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