You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
7.6 KiB
341 lines
7.6 KiB
<template>
|
|
<div>
|
|
<div>
|
|
<el-form
|
|
ref="ref_form"
|
|
:inline="true"
|
|
:model="dataForm"
|
|
:rules="dataRule"
|
|
:disabled="formType === 'detail'"
|
|
class="form"
|
|
>
|
|
<el-form-item
|
|
label="事项名称"
|
|
prop="matterName"
|
|
label-width="150px"
|
|
style="display: block"
|
|
>
|
|
<el-input
|
|
class="item_width_1"
|
|
maxlength="50"
|
|
show-word-limit
|
|
v-model="info.matterName"
|
|
disabled
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
label="预约日期"
|
|
prop="appointmentDate"
|
|
label-width="150px"
|
|
style="display: block"
|
|
>
|
|
<el-date-picker
|
|
v-model="dataForm.appointmentDate"
|
|
placeholder="预约日期"
|
|
value-format="yyyy-MM-dd"
|
|
:picker-options="dateOptions"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
v-if="timeList.length > 0"
|
|
label="预约时段"
|
|
prop="timeId"
|
|
label-width="150px"
|
|
style="display: block"
|
|
>
|
|
<el-checkbox-group
|
|
style="margin-left: auto; width: 600px"
|
|
v-model="dataForm.timeId"
|
|
>
|
|
<el-checkbox
|
|
:label="item.timeId"
|
|
:key="item.timeId"
|
|
:disabled="item.isAppointment"
|
|
v-for="item in timeList"
|
|
>{{ item.time }}</el-checkbox
|
|
>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
label="预约人"
|
|
prop="appointmentName"
|
|
label-width="150px"
|
|
style="display: block"
|
|
>
|
|
<el-input
|
|
class="item_width_1"
|
|
maxlength="50"
|
|
show-word-limit
|
|
placeholder="请输入预约人"
|
|
v-model="dataForm.appointmentName"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
label="联系方式"
|
|
prop="appointmentPhone"
|
|
label-width="150px"
|
|
style="display: block"
|
|
>
|
|
<el-input
|
|
class="item_width_1"
|
|
maxlength="50"
|
|
show-word-limit
|
|
placeholder="请输入联系方式"
|
|
v-model="dataForm.appointmentPhone"
|
|
>
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
label="备注"
|
|
prop="remark"
|
|
label-width="150px"
|
|
style="display: block"
|
|
>
|
|
<el-input
|
|
class="item_width_1"
|
|
type="textarea"
|
|
maxlength="1000"
|
|
show-word-limit
|
|
:rows="3"
|
|
placeholder="请输入备注，不超过1000字"
|
|
v-model="dataForm.remark"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="div_btn">
|
|
<el-button @click="handleCancle">取 消</el-button>
|
|
<el-button
|
|
v-if="formType != 'detail'"
|
|
type="primary"
|
|
:disabled="btnDisable"
|
|
@click="handleComfirm"
|
|
>确 定</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import { Loading } from "element-ui"; // 引入Loading服务
|
|
import { requestPost } from "@/js/dai/request";
|
|
|
|
var map;
|
|
var search;
|
|
var markers;
|
|
var infoWindowList;
|
|
let loading; // 加载动画
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
formType: "add", //表单操作类型 add新增，edit编辑，detail详情
|
|
|
|
btnDisable: false,
|
|
|
|
info: {
|
|
matterName: "",
|
|
},
|
|
|
|
dateOptions: {
|
|
disabledDate(time) {
|
|
return (
|
|
time.getTime() < Date.now() - 3600 * 24 * 1 * 1000 ||
|
|
time.getTime() > Date.now() + 3600 * 24 * 6 * 1000
|
|
);
|
|
},
|
|
},
|
|
timeList: [],
|
|
|
|
dataForm: {
|
|
matterId: "",
|
|
appointmentDate: "",
|
|
timeId: [],
|
|
appointmentName: "",
|
|
appointmentPhone: "",
|
|
remark: "",
|
|
},
|
|
};
|
|
},
|
|
components: {},
|
|
computed: {
|
|
dataRule() {
|
|
return {
|
|
appointmentName: [
|
|
{ required: true, message: "预约人不能为空", trigger: "blur" },
|
|
],
|
|
appointmentPhone: [
|
|
{ required: true, message: "预约人电话不能为空", trigger: "blur" },
|
|
],
|
|
appointmentDate: [
|
|
{ required: true, message: "预约日期不能为空", trigger: "blur" },
|
|
],
|
|
timeId: [
|
|
{ required: true, message: "预约时段不能为空", trigger: "blur" },
|
|
],
|
|
};
|
|
},
|
|
},
|
|
props: {},
|
|
watch: {
|
|
"dataForm.appointmentDate": function () {
|
|
this.getTimeList();
|
|
},
|
|
},
|
|
|
|
async mounted() {},
|
|
|
|
methods: {
|
|
async initForm(type, row, index) {
|
|
this.$refs.ref_form.resetFields();
|
|
|
|
let item = row.matterList[index];
|
|
if (item) {
|
|
this.dataForm.matterId = item.matterId;
|
|
this.info.matterName = item.matterName;
|
|
}
|
|
},
|
|
|
|
async getTimeList() {
|
|
let url = "/gov/org/icpartyservicecenter/appointmenttime";
|
|
|
|
const {
|
|
dataForm: { matterId, appointmentDate },
|
|
} = this;
|
|
if (!matterId || !appointmentDate) return;
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
matterId,
|
|
date: appointmentDate,
|
|
});
|
|
|
|
if (code === 0) {
|
|
this.timeList = data.timeDetail || [];
|
|
} else {
|
|
}
|
|
},
|
|
|
|
async handleComfirm() {
|
|
this.btnDisable = true;
|
|
setTimeout(() => {
|
|
this.btnDisable = false;
|
|
}, 10000);
|
|
this.$refs["ref_form"].validate((valid, messageObj) => {
|
|
if (!valid) {
|
|
app.util.validateRule(messageObj);
|
|
this.btnDisable = false;
|
|
} else {
|
|
this.submit();
|
|
}
|
|
});
|
|
},
|
|
|
|
async submit() {
|
|
let url = "";
|
|
if (this.formType === "add") {
|
|
url = "/gov/org/icpartyservicecenter/appointment";
|
|
// url = "http://yapi.elinkservice.cn/mock/245/gov/org/neighborhood/neighborhoodadd"
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
...this.dataForm,
|
|
timeId: this.dataForm.timeId.join(","),
|
|
});
|
|
|
|
if (code === 0) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "操作成功",
|
|
});
|
|
this.resetData();
|
|
this.$emit("dialogOk");
|
|
this.btnDisable = false;
|
|
} else {
|
|
this.btnDisable = false;
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
handleCancle() {
|
|
this.resetData();
|
|
this.$emit("dialogCancle");
|
|
},
|
|
resetData() {
|
|
this.dataForm = {
|
|
matterId: "",
|
|
appointmentDate: "",
|
|
timeId: [],
|
|
appointmentName: "",
|
|
appointmentPhone: "",
|
|
remark: "",
|
|
};
|
|
this.timeList = [];
|
|
},
|
|
// 开启加载动画
|
|
startLoading() {
|
|
loading = Loading.service({
|
|
lock: true, // 是否锁定
|
|
text: "正在加载……", // 加载中需要显示的文字
|
|
background: "rgba(0,0,0,.7)", // 背景颜色
|
|
});
|
|
},
|
|
// 结束加载动画
|
|
endLoading() {
|
|
// clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.item_width_1 {
|
|
width: 500px;
|
|
}
|
|
.item_width_2 {
|
|
width: 400px;
|
|
}
|
|
.item_width_3 {
|
|
margin-left: 10px;
|
|
width: 200px;
|
|
}
|
|
.item_width_4 {
|
|
width: 200px;
|
|
}
|
|
|
|
.div_map {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.div_btn {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.el-tabs {
|
|
margin: 0 20px;
|
|
}
|
|
.el-upload__tip {
|
|
color: rgb(155, 155, 155);
|
|
margin: 0;
|
|
}
|
|
.form {
|
|
margin-top: 30px;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.el-dialog__body {
|
|
padding: 0 10px 20px !important;
|
|
}
|
|
</style>
|
|
|