dai
4 years ago
7 changed files with 907 additions and 71 deletions
@ -0,0 +1,341 @@ |
|||||
|
<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> |
||||
@ -0,0 +1,206 @@ |
|||||
|
<template> |
||||
|
<div style="min-height: 400px"> |
||||
|
<el-form ref="ref_form" :inline="true" class="form"> |
||||
|
<el-form-item |
||||
|
label="选择预约日期" |
||||
|
prop="appointmentDate" |
||||
|
label-width="110px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<el-date-picker |
||||
|
v-model="appointmentDate" |
||||
|
placeholder="预约日期" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-table |
||||
|
v-if="tableData.length > 0" |
||||
|
:data="tableData" |
||||
|
border |
||||
|
style="width: 96%; margin: 0 auto" |
||||
|
class="resi-table" |
||||
|
:max-height="maxTableHeight" |
||||
|
> |
||||
|
<el-table-column label="序号" type="index" align="center" width="50" /> |
||||
|
<el-table-column prop="matterName" label="预约事项"></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="appointmentTime" |
||||
|
label="预约时间" |
||||
|
></el-table-column> |
||||
|
<el-table-column prop="appointmentName" label="预约人"></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="appointmentPhone" |
||||
|
label="联系方式" |
||||
|
></el-table-column> |
||||
|
<el-table-column prop="remark" label="备注"></el-table-column> |
||||
|
<el-table-column fixed="right" label="操作" align="center" width="120"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
@click="handleCancel(scope.$index)" |
||||
|
type="text" |
||||
|
size="small" |
||||
|
>取消</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<div class="m-hint" v-else> |
||||
|
<el-empty description="暂无内容" :image-size="200"></el-empty> |
||||
|
</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 { |
||||
|
appointmentDate: new Date().toLocaleDateString().split("/").join("-"), |
||||
|
matterId: "", |
||||
|
tableData: [], |
||||
|
}; |
||||
|
}, |
||||
|
components: {}, |
||||
|
computed: {}, |
||||
|
props: {}, |
||||
|
watch: { |
||||
|
appointmentDate: function () { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
async mounted() {}, |
||||
|
|
||||
|
methods: { |
||||
|
async init(row, index) { |
||||
|
let item = row.matterList[index]; |
||||
|
if (item) { |
||||
|
this.matterId = item.matterId; |
||||
|
this.getList(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async getList() { |
||||
|
let url = "/gov/org/icpartyservicecenter/appointmentrecord"; |
||||
|
|
||||
|
const { matterId, appointmentDate } = this; |
||||
|
if (!matterId || !appointmentDate) return; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
matterId, |
||||
|
date: appointmentDate, |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.tableData = data |
||||
|
? data.map((item) => { |
||||
|
item.appointmentTime = item.appointmentTime.join("，"); |
||||
|
return item; |
||||
|
}) |
||||
|
: []; |
||||
|
} else { |
||||
|
} |
||||
|
}, |
||||
|
async handleCancel(index) { |
||||
|
let url = "/gov/org/icpartyservicecenter/cancelappointment"; |
||||
|
|
||||
|
const { matterId, tableData } = this; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, { |
||||
|
matterId, |
||||
|
recordId: tableData[index].recordId, |
||||
|
}); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message.success("操作成功"); |
||||
|
this.getList(); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleCancle() { |
||||
|
this.resetData(); |
||||
|
this.$emit("dialogCancle"); |
||||
|
}, |
||||
|
resetData() { |
||||
|
this.tableData = []; |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
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> |
||||
|
.m-hint { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.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> |
||||
Loading…
Reference in new issue