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
Unified 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" :key="'staff' + index"
v-for="(item, index) in dataForm.matterList" v-for="(item, index) in dataForm.matterList"
> >
<el-input <div class="item-info">
class="item_width_1" <el-input
maxlength="50" class="item_width_1"
show-word-limit maxlength="50"
placeholder="事项名" show-word-limit
v-model="item.matterName" placeholder="事项名"
:disabled="item.matterId != undefined" v-model="item.matterName"
/> :disabled="item.matterId != undefined"
/>
<el-select
style="margin-left: 10px" <el-select
v-model="item.appointmentType" style="margin-left: 10px"
filterable v-model="item.appointmentType"
placeholder="预约类型" filterable
:disabled="item.matterId != undefined" placeholder="预约类型"
> :disabled="item.matterId != undefined"
<el-option
v-for="item in appointmentTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
> >
</el-option> <el-option
</el-select> v-for="item in appointmentTypeOptions"
:key="item.value"
<el-time-select :label="item.label"
style="margin-left: 10px" :value="item.value"
v-model="item.startTime" >
:picker-options="{ </el-option>
start: '00:00', </el-select>
step: '00:30',
end: '24:00', <el-time-select
}" style="margin-left: 10px"
placeholder="开始时间" v-model="item.startTime"
:disabled="item.matterId != undefined" :picker-options="{
> start: '00:00',
</el-time-select> step: '00:30',
<span style="margin: 0 5px">至</span> end: '24:00',
<el-time-select }"
v-model="item.endTime" placeholder="开始时间"
:picker-options="{ :disabled="item.matterId != undefined"
start: '00:00', >
step: '00:30', </el-time-select>
end: '24:00', <span style="margin: 0 5px">至</span>
minTime: item.startTime, <el-time-select
}" v-model="item.endTime"
placeholder="结束时间" :picker-options="{
:disabled="item.matterId != undefined" start: '00:00',
> step: '00:30',
</el-time-select> end: '24:00',
minTime: item.startTime,
<el-button }"
style="margin-left: 10px" placeholder="结束时间"
size="small" :disabled="item.matterId != undefined"
@click="handleDelStaff(index)" >
>删除</el-button </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>
<div class="item-add"> <div class="item-add">
<el-button size="small" @click="handleAddStaff">添加</el-button> <el-button size="small" type="warning" @click="handleAddStaff"
>添加</el-button
>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
@ -266,6 +294,9 @@ let loading; // 加载动画
export default { export default {
data() { data() {
return { return {
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
customerId: "",
formType: "add", //表单操作类型 add新增，edit编辑，detail详情 formType: "add", //表单操作类型 add新增，edit编辑，detail详情
btnDisable: false, btnDisable: false,
@ -342,14 +373,39 @@ export default {
watch: {}, watch: {},
async mounted() { async mounted() {
this.customerId = localStorage.getItem("customerId");
this.initMap(); this.initMap();
}, },
methods: { 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() { handleAddStaff() {
this.dataForm.matterList = [ this.dataForm.matterList = [
...this.dataForm.matterList, ...this.dataForm.matterList,
{ matterName: "", appointmentType: "", startTime: "", endTime: "" }, {
matterName: "",
appointmentType: "",
matterImg: "",
startTime: "",
endTime: "",
},
]; ];
}, },
handleDelStaff(index) { handleDelStaff(index) {
@ -482,9 +538,28 @@ export default {
this.dataForm.partyServiceCenterId = this.partyServiceCenterId; 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, { const { data, code, msg } = await requestPost(url, {
...this.dataForm, ...this.dataForm,
matterList: this.dataForm.matterList.filter((item) => !item.matterId), matterList,
}); });
if (code === 0) { if (code === 0) {
@ -580,9 +655,48 @@ export default {
width: 650px; width: 650px;
.item { .item {
display: flex; .item-info {
justify-content: space-around; display: flex;
margin-bottom: 7px; 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 { .item-add {
} }

Write Preview
Loading…
Cancel
Save