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.
467 lines
11 KiB
467 lines
11 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-select v-model="dataForm.appointmentDate" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in dateList"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"
|
|
>
|
|
</el-option
|
|
></el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
v-if="timeList.length > 0"
|
|
label="预约时段"
|
|
prop="timeId"
|
|
label-width="150px"
|
|
style="display: block"
|
|
>
|
|
<div style="margin-left: auto; width: 600px">
|
|
<el-checkbox
|
|
:label="item.timeId"
|
|
:key="item.timeId"
|
|
:disabled="!item.isAppointment"
|
|
v-for="(item, index) in timeList"
|
|
:checked="item.selected"
|
|
:value="item.selected"
|
|
@change="selectTime(index)"
|
|
@onChange="selectTime(index)"
|
|
>{{ item.time }}</el-checkbox
|
|
>
|
|
</div>
|
|
</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";
|
|
import dateFormat from "dai-js/tools/dateFormat";
|
|
import formVltHelper from "dai-js/tools/formVltHelper";
|
|
|
|
const deepClone = function (arg) {
|
|
if (typeof arg == "object" || typeof arg == "array") {
|
|
return JSON.parse(JSON.stringify(arg));
|
|
} else {
|
|
return arg;
|
|
}
|
|
};
|
|
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
|
|
);
|
|
},
|
|
},
|
|
dateList: [],
|
|
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;
|
|
this.getDateList();
|
|
}
|
|
},
|
|
|
|
selectTime(index) {
|
|
// return console.log(index);
|
|
let list = deepClone(this.timeList);
|
|
if (!list[index].isAppointment) return false;
|
|
|
|
let startIndex = list.findIndex((item) => item.selected);
|
|
let endIndex = list.findIndex((item, index) => {
|
|
return (
|
|
item.selected &&
|
|
(index == list.length - 1 || !list[index + 1].selected)
|
|
);
|
|
});
|
|
// console.log(startIndex, endIndex);
|
|
if (startIndex == -1) {
|
|
list[index].selected = !list[index].selected;
|
|
} else if (startIndex == endIndex) {
|
|
let big = Math.max(startIndex, index);
|
|
let little = Math.min(startIndex, index);
|
|
if (big == little) {
|
|
list[index].selected = !list[index].selected;
|
|
} else {
|
|
for (let i = little; i <= big; i++) {
|
|
// console.log(i);
|
|
if (!list[i].isAppointment) {
|
|
this.$message({
|
|
type: "warning",
|
|
message: "请选择连续的时间",
|
|
});
|
|
return false;
|
|
}
|
|
list[i].selected = true;
|
|
}
|
|
}
|
|
} else {
|
|
if (index == startIndex || index == endIndex) {
|
|
list[index].selected = !list[index].selected;
|
|
} else if (list[index].selected) {
|
|
let big = index;
|
|
let little = index;
|
|
if (startIndex - index < index - endIndex) {
|
|
big = endIndex;
|
|
} else {
|
|
little = startIndex;
|
|
}
|
|
for (let i = little; i <= big; i++) {
|
|
list[i].selected = false;
|
|
}
|
|
} else {
|
|
let big = index;
|
|
let little = index;
|
|
if (index < startIndex) {
|
|
big = startIndex;
|
|
} else {
|
|
little = endIndex;
|
|
}
|
|
for (let i = little; i <= big; i++) {
|
|
// console.log(i);
|
|
if (!list[i].isAppointment) {
|
|
this.$message({
|
|
type: "warning",
|
|
message: "请选择连续的时间",
|
|
});
|
|
return false;
|
|
}
|
|
list[i].selected = true;
|
|
}
|
|
}
|
|
}
|
|
console.log(list);
|
|
this.timeList = list;
|
|
this.dataForm.timeId = list
|
|
.filter((item) => item.selected && item.isAppointment)
|
|
.map((item) => item.timeId);
|
|
return false;
|
|
},
|
|
|
|
async getDateList() {
|
|
let url = "/gov/org/icpartyservicecenter/appointmenttime";
|
|
|
|
const {
|
|
dataForm: { matterId },
|
|
} = this;
|
|
if (!matterId) return;
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
matterId,
|
|
date: dateFormat(new Date(), "yyyy-MM-dd"),
|
|
});
|
|
|
|
if (code === 0) {
|
|
this.dateList = data.dateList || [];
|
|
// this.dataForm.appointmentDate = data.dateList[0];
|
|
} else {
|
|
}
|
|
},
|
|
|
|
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) {
|
|
let timeList = data.timeDetail || [];
|
|
this.timeList = timeList.map((item) => {
|
|
item.selected = false;
|
|
return item;
|
|
});
|
|
}
|
|
},
|
|
|
|
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 {
|
|
if (!formVltHelper.userOrMobile(this.dataForm.appointmentPhone)) {
|
|
return this.$message({
|
|
type: "error",
|
|
message: "手机号格式有误",
|
|
});
|
|
}
|
|
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>
|
|
|