elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

预约事项添加封面

shibei_master
dai 4 years ago
parent
4ab4cd1d47
commit
748c466f53
1 changed files with 176 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 238
      src/views/modules/communityService/dqfwzx/cpts/edit.vue

238
src/views/modules/communityService/dqfwzx/cpts/edit.vue
View File

@ -173,67 +173,95 @@
:key="'staff' + index"
v-for="(item, index) in dataForm.matterList"
>
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="事项名"
v-model="item.matterName"
:disabled="item.matterId != undefined"
/>
<el-select
style="margin-left: 10px"
v-model="item.appointmentType"
filterable
placeholder="预约类型"
:disabled="item.matterId != undefined"
>
<el-option
v-for="item in appointmentTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
<div class="item-info">
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="事项名"
v-model="item.matterName"
:disabled="item.matterId != undefined"
/>
<el-select
style="margin-left: 10px"
v-model="item.appointmentType"
filterable
placeholder="预约类型"
:disabled="item.matterId != undefined"
>
</el-option>
</el-select>
<el-time-select
style="margin-left: 10px"
v-model="item.startTime"
:picker-options="{
start: '00:00',
step: '00:30',
end: '24:00',
}"
placeholder="开始时间"
:disabled="item.matterId != undefined"
>
</el-time-select>
<span style="margin: 0 5px">至</span>
<el-time-select
v-model="item.endTime"
:picker-options="{
start: '00:00',
step: '00:30',
end: '24:00',
minTime: item.startTime,
}"
placeholder="结束时间"
:disabled="item.matterId != undefined"
>
</el-time-select>
<el-button
style="margin-left: 10px"
size="small"
@click="handleDelStaff(index)"
>删除</el-button
>
<el-option
v-for="item in appointmentTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-time-select
style="margin-left: 10px"
v-model="item.startTime"
:picker-options="{
start: '00:00',
step: '00:30',
end: '24:00',
}"
placeholder="开始时间"
:disabled="item.matterId != undefined"
>
</el-time-select>
<span style="margin: 0 5px">至</span>
<el-time-select
v-model="item.endTime"
:picker-options="{
start: '00:00',
step: '00:30',
end: '24:00',
minTime: item.startTime,
}"
placeholder="结束时间"
:disabled="item.matterId != undefined"
>
</el-time-select>
</div>
<div class="item-pic">
<el-upload
:disabled="item.matterId != undefined"
class="avatar-uploader"
:action="uploadUlr"
:data="{ customerId: customerId }"
:show-file-list="false"
:on-success="
(response, file, fileList) =>
handleImgSuccess(index, response, file, fileList)
"
:before-upload="beforeImgUpload"
>
<img
v-if="item.matterImg"
:src="item.matterImg"
style="width: 50px; height: 50px"
class="function-icon"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<div class="hint">（事项封面，图片小于1M）</div>
<el-button
style="margin-left: auto"
size="small"
@click="handleDelStaff(index)"
>删除</el-button
>
</div>
</div>
<div class="item-add">
<el-button size="small" @click="handleAddStaff">添加</el-button>
<el-button size="small" type="warning" @click="handleAddStaff"
>添加</el-button
>
</div>
</div>
</el-form-item>
@ -266,6 +294,9 @@ let loading; // 加载动画
export default {
data() {
return {
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
customerId: "",
formType: "add", //表单操作类型 add新增，edit编辑，detail详情
btnDisable: false,
@ -342,14 +373,39 @@ export default {
watch: {},
async mounted() {
this.customerId = localStorage.getItem("customerId");
this.initMap();
},
methods: {
handleImgSuccess(index, res, file) {
if (res.code === 0 && res.msg === "success") {
console.log("res.data.url", res.data.url);
this.dataForm.matterList[index].matterImg = res.data.url;
} else {
this.$message.error(res.msg);
}
},
beforeImgUpload(file) {
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isLt1M) {
this.$message.error("上传图片大小不能超过 1MB!");
}
return isLt1M;
},
handleAddStaff() {
this.dataForm.matterList = [
...this.dataForm.matterList,
{ matterName: "", appointmentType: "", startTime: "", endTime: "" },
{
matterName: "",
appointmentType: "",
matterImg: "",
startTime: "",
endTime: "",
},
];
},
handleDelStaff(index) {
@ -482,9 +538,28 @@ export default {
this.dataForm.partyServiceCenterId = this.partyServiceCenterId;
}
const matterList = this.dataForm.matterList.filter(
(item) => !item.matterId
);
if (
matterList.some(
(item) =>
!item.matterImg ||
!item.matterName ||
!item.appointmentType ||
!item.startTime ||
!item.endTime
)
) {
return this.$message({
type: "warning",
message: "请补充完整可预约事项信息",
});
}
const { data, code, msg } = await requestPost(url, {
...this.dataForm,
matterList: this.dataForm.matterList.filter((item) => !item.matterId),
matterList,
});
if (code === 0) {
@ -580,9 +655,48 @@ export default {
width: 650px;
.item {
display: flex;
justify-content: space-around;
margin-bottom: 7px;
.item-info {
display: flex;
justify-content: space-around;
margin-bottom: 7px;
}
.item-pic {
display: flex;
align-items: center;
.hint {
font-size: 14px;
color: #999999;
margin-left: 10px;
}
.avatar-uploader {
::v-deep .el-upload {
cursor: pointer;
position: relative;
overflow: hidden;
}
img {
object-fit: cover;
}
.el-upload:hover {
border-color: #409eff;
}
.avatar {
width: 50px;
height: 50px;
display: block;
}
.avatar-uploader-icon {
border: 1px dashed #d9d9d9;
border-radius: 6px;
font-size: 28px;
color: #8c939d;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
}
}
}
.item-add {
}

Write Preview
Loading…
Cancel
Save