SongZhen
3 years ago
41 changed files with 11492 additions and 203 deletions
@ -0,0 +1,160 @@ |
|||
<template> |
|||
<Dialog title="安全隐患" width="1200" @close="handleClose"> |
|||
<template> |
|||
<div class="saftHard"> |
|||
<div class="saftDetails"> |
|||
<div class="title" style="margin-bottom: 32px">事件详情</div> |
|||
<div class="content"> |
|||
<el-row :gutter="16" class="columnHeight"> |
|||
<el-col :span="6"> |
|||
<div class="item"> |
|||
<span>场所名称:</span> |
|||
<span>张亮麻辣烫</span> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="item"> |
|||
<span>占地面积:</span> |
|||
<span>120平米</span> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="item"> |
|||
<span>场所规模:</span> |
|||
<span>260人</span> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="item"> |
|||
<span>所属组织:</span> |
|||
<span>亿联社区第一网格</span> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="16" class="columnHeight"> |
|||
<el-col :span="6"> |
|||
<div class="item"> |
|||
<span>所属级别:</span> |
|||
<span>久小场所</span> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="item"> |
|||
<span>场所类型:</span> |
|||
<span>学校</span> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="item"> |
|||
<span>负责人:</span> |
|||
<span>张三</span> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="item"> |
|||
<span>联系电话:</span> |
|||
<span>13234343434</span> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<div class="item columnHeight"> |
|||
<span>场所地址：</span> |
|||
<span></span> |
|||
</div> |
|||
<div class="item"> |
|||
<span>备注：</span> |
|||
<span></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="saftRecords"> |
|||
<div class="title" style="margin-top: 48px">巡查记录</div> |
|||
<div class="table"> |
|||
<el-table :data="list" :loading="loading"> |
|||
<el-table-column label="序号" type="index" width="80" /> |
|||
<el-table-column prop="name" label="巡查时间" /> |
|||
<el-table-column prop="address" label="巡查人员" /> |
|||
<el-table-column prop="address" label="联系电话" /> |
|||
<el-table-column prop="address" label="检查结果" /> |
|||
<el-table-column prop="address" label="发现隐患" /> |
|||
<el-table-column prop="address" label="是否回复" /> |
|||
<el-table-column prop="address" label="拟复查时间" /> |
|||
<el-table-column label="操作" width="90" align="center"> |
|||
<template slot-scope="data"> |
|||
<el-button type="text">详情</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</Dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import Dialog from "@/components/Dialog/index.vue"; |
|||
|
|||
export default { |
|||
name: "Safetyhazard", |
|||
props: { |
|||
resiId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}, |
|||
|
|||
components: { Dialog }, |
|||
|
|||
data() { |
|||
return {}; |
|||
}, |
|||
|
|||
computed: {}, |
|||
|
|||
mounted() {}, |
|||
|
|||
methods: { |
|||
handleClose() { |
|||
this.$emit("close", false); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/dataBoard/table.scss"; |
|||
.saftHard { |
|||
height: 500px; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
.title { |
|||
font-size: 18px !important; |
|||
padding: 0 !important; |
|||
color: #fff; |
|||
margin-bottom: 16px; |
|||
} |
|||
.saftDetails { |
|||
padding: 18px 0 0 22px; |
|||
.content { |
|||
.columnHeight { |
|||
margin-bottom: 32px; |
|||
} |
|||
.item { |
|||
color: #fff; |
|||
font-size: 16px; |
|||
span:first-child { |
|||
display: inline-block; |
|||
width: 90px; |
|||
} |
|||
span:last-child { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.saftRecords { |
|||
padding: 18px 0 0 22px; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,399 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<div v-if="initLoading" class="m-row"> |
|||
<div class="m-info"> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务名称：</span> |
|||
<span>{{ formData.serviceName || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务组织：</span> |
|||
<span>{{ serviceOrgName || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务范围：</span> |
|||
<span>{{ formData.gridIdListName || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">政策依据：</span> |
|||
<span>{{ formData.policyTitle || "--" }}</span> |
|||
<!-- <el-button |
|||
v-if="formData.policyId" |
|||
style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handlePersonList" |
|||
>预览</el-button |
|||
> --> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">经办人：</span> |
|||
<span>{{ formData.principalName || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">联系方式：</span> |
|||
<span>{{ formData.principalContact || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务时间：</span> |
|||
<span>{{ formData.serviceTimeStart || "--" }}</span |
|||
>至 |
|||
<span>{{ formData.serviceTimeEnd || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">享受服务人员: </span> |
|||
<span>{{ resiSearchTagName }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">备注：</span> |
|||
<span>{{ formData.remark || "--" }}</span> |
|||
</div> |
|||
|
|||
<div v-show="formData.serviceStatus === 'completed'"> |
|||
<h3 class="d-h3">反馈内容</h3> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">备注：</span> |
|||
<span>{{ feedbackFormData.serviceGoal || "--" }}</span> |
|||
</div> |
|||
<!-- <div class="info-prop"> |
|||
<span class="info-title-2">服务效果：</span> |
|||
<span>{{ feedbackFormData.serviceEffect || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务人数：</span> |
|||
<span>{{ feedbackFormData.servicePeopleNumber || 0 }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务状态：</span> |
|||
<span>{{ feedbackFormData.serviceStatusShow || "--" }}</span> |
|||
</div> --> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">满意度：</span> |
|||
<span>{{ feedbackFormData.satisfactionShow || "--" }}</span> |
|||
</div> |
|||
|
|||
<!-- <div class="info-prop"> |
|||
<span class="info-title-2">地理位置：</span> |
|||
<span>{{ feedbackFormData.address || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">地图位置：</span> |
|||
<div class="div_map"> |
|||
<div id="app_detail"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">附件：</span> |
|||
<file-list |
|||
v-if="fileList.length > 0" |
|||
:fileList="fileList" |
|||
></file-list> |
|||
<span v-else>--</span> |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="div-btn"> |
|||
</div> |
|||
<el-row type="flex" justify="right"> |
|||
<el-col :span="24" align="right"> |
|||
<el-button size="small" @click="handleCancle" style="margin-right:16px;">关 闭</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<el-dialog |
|||
v-if="showPersonList" |
|||
:visible.sync="showPersonList" |
|||
:append-to-body="true" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'政策预览'" |
|||
width="1150px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showPersonList = false" |
|||
> |
|||
<person-list |
|||
ref="ref_detail_form" |
|||
:policyId="policyId" |
|||
:ruleList="ruleList" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose" |
|||
> |
|||
</person-list> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from "vuex"; |
|||
import { Loading } from "element-ui"; // 引入Loading服务 |
|||
import { requestPost } from "@/js/dai/request"; |
|||
// import personList from "../policy/oldPersonList.vue"; |
|||
import fileList from "@/views/components/fileList"; |
|||
import daiMap from "@/utils/dai-map"; |
|||
|
|||
var map; |
|||
let loading; // 加载动画 |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
initLoading: false, |
|||
|
|||
keyWords: "", |
|||
formData: {}, |
|||
resiSearchTagName:"", |
|||
feedbackFormData: { |
|||
serviceProjectId: "", // 服务项目id |
|||
serviceName: "", |
|||
serviceGoal: "", // 服务目标 |
|||
serviceEffect: "", // 服务效果 |
|||
servicePeopleNumber: null, // 服务人数 |
|||
serviceStatus: "completed", // 服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: "", //满意度。不满意:bad、基本满意:good、非常满意:perfect |
|||
longitude: "", // 经度 |
|||
latitude: "", // 维度 |
|||
address: "", |
|||
fileList: [], // 附件列表 |
|||
}, |
|||
|
|||
policyId: "", |
|||
showPersonList: false, |
|||
ruleList: [], |
|||
policyList: [], |
|||
}; |
|||
}, |
|||
components: { fileList }, |
|||
async mounted() { |
|||
// if (this.serviceRecordId) {//详情 |
|||
await this.loadInfo(); |
|||
this.initLoading = true; |
|||
|
|||
if ( |
|||
this.formData.serviceStatus === "completed" && |
|||
this.feedbackFormData.latitude |
|||
) { |
|||
this.$nextTick(() => { |
|||
this.initMap(); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
diaDestroy() {}, |
|||
|
|||
//加载组织数据 |
|||
async handlePersonList() { |
|||
if (!this.formData.policyId) { |
|||
this.$message.info("请先选择政策"); |
|||
return false; |
|||
} |
|||
|
|||
this.policyId = this.formData.policyId; |
|||
await this.loadRuleList(); |
|||
|
|||
this.showPersonList = true; |
|||
}, |
|||
|
|||
async loadRuleList() { |
|||
const url = "/governance/policy/rulelist/" + this.policyId; |
|||
|
|||
let params = {}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.ruleList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
handleClose() { |
|||
this.showPersonList = false; |
|||
}, |
|||
|
|||
//加载组织 |
|||
async loadInfo() { |
|||
const url = "/governance/icServicePostRecord/detail"; |
|||
|
|||
let params = { |
|||
serviceRecordId: this.serviceRecordId, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.formData = { ...data }; |
|||
this.formData.serviceRecordId = this.serviceRecordId; |
|||
this.feedbackFormData = { ...data.feedback }; |
|||
this.formData.gridIdListName = ""; |
|||
this.feedbackFormData.serviceStatusShow = ""; |
|||
this.feedbackFormData.satisfactionShow = ""; |
|||
await this.getTagName() |
|||
let arr = []; |
|||
this.formData.gridIdList.forEach((element) => { |
|||
arr.push(element.objectName); |
|||
}); |
|||
this.formData.gridIdListName = arr.join(","); |
|||
this.statusArray.forEach((element) => { |
|||
if (this.formData.serviceStatus === element.value) { |
|||
this.feedbackFormData.serviceStatusShow = element.label; |
|||
} |
|||
}); |
|||
this.satisfyArray.forEach((element) => { |
|||
if (this.feedbackFormData.satisfaction === element.value) { |
|||
this.feedbackFormData.satisfactionShow = element.label; |
|||
} |
|||
}); |
|||
|
|||
this.fileList = []; |
|||
if ( |
|||
data.feedback && |
|||
data.feedback.fileList && |
|||
data.feedback.fileList.length > 0 |
|||
) { |
|||
data.feedback.fileList.forEach((element) => { |
|||
let obj = { |
|||
name: element.name, |
|||
format: element.format, |
|||
url: element.url, |
|||
type: element.type, |
|||
}; |
|||
this.fileList.push(obj); |
|||
}); |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getTagName() { |
|||
const url = "/governance/resiSearchTag/listResiSearchTags"; |
|||
let params = { |
|||
pageSize: 99, |
|||
}; |
|||
let { data, msg, code } = await requestPost(url, params); |
|||
if (code == 0) { |
|||
let showAddProduct = data.list.filter(item=>{ |
|||
return [this.formData.resiSearchTagId].includes(item.tagId) |
|||
}) |
|||
if(this.formData.resiSearchTagId){ |
|||
this.resiSearchTagName = showAddProduct[0].tagName |
|||
}else{ |
|||
this.resiSearchTagName = '--' |
|||
} |
|||
|
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleCancle() { |
|||
this.resetData(); |
|||
this.$emit("diaDetailClose"); |
|||
}, |
|||
|
|||
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap() { |
|||
let { latitude, longitude } = this.feedbackFormData; |
|||
|
|||
map = new daiMap( |
|||
document.getElementById("app_detail"), |
|||
{ latitude, longitude }, |
|||
{ |
|||
zoom: 16.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45, // 设置地图旋转角度 |
|||
} |
|||
); |
|||
|
|||
map.setCenter(latitude, longitude); |
|||
map.setMarker(latitude, longitude); |
|||
}, |
|||
|
|||
handleOk() { |
|||
this.showPersonList = false; |
|||
}, |
|||
|
|||
resetData() { |
|||
this.formData = {}; |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading() { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: "正在加载……", // 加载中需要显示的文字 |
|||
background: "rgba(0,0,0,.7)", // 背景颜色 |
|||
}); |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading() { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close(); |
|||
} |
|||
}, |
|||
}, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
serviceTimeStart: [ |
|||
{ required: true, message: "服务时间不能为空", trigger: "blur" }, |
|||
], |
|||
}; |
|||
}, |
|||
// resiSearchTagNameText(){ |
|||
// let text = "" |
|||
// if(this.resiSearchTagName){ |
|||
// text = this.resiSearchTagName |
|||
// }else { |
|||
// text = '--' |
|||
// } |
|||
// return text |
|||
// }, |
|||
}, |
|||
props: { |
|||
serviceRecordId: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
serviceOrgName: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
|
|||
satisfyArray: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
statusArray: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/detail-main.scss"; |
|||
.info-prop{ |
|||
margin-top: 29px; |
|||
} |
|||
.scroll-h{ |
|||
padding: 0 90px !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,825 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
|
|||
<el-form ref="ref_form" |
|||
:inline="true" |
|||
:model="formData" |
|||
:rules="dataRule" |
|||
class="div_form"> |
|||
|
|||
<el-form-item label="服务名称" |
|||
prop="serviceName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{formData.serviceName}}</span> |
|||
<!-- <el-select class="item_width_1" |
|||
v-model="formData.serviceProjectId" |
|||
placeholder="请选择" |
|||
filterable |
|||
clearable> |
|||
<el-option v-for="(item,index) in projectList" |
|||
@click.native="hancleClickProject(index)" |
|||
:key="item.serviceProjectId" |
|||
:label="item.serviceName" |
|||
:value="item.serviceProjectId"> |
|||
</el-option> |
|||
</el-select> --> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="服务组织" |
|||
prop="serviceOrgId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{serviceOrgName}}</span> |
|||
<!-- <el-select class="item_width_1" |
|||
v-model="formData.serviceOrgId" |
|||
placeholder="请选择" |
|||
filterable |
|||
clearable> |
|||
<el-option v-for="item in orgList" |
|||
:key="item.icServiceOrgId" |
|||
:label="item.orgName" |
|||
:value="item.icServiceOrgId"> |
|||
</el-option> |
|||
</el-select> --> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务范围" |
|||
prop="gridIdList" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<div v-for="item in formData.gridIdList" |
|||
:key="item.objectId"> |
|||
<div>{{item.objectName}}</div> |
|||
</div> |
|||
<!-- <el-cascader class="item_width_1" |
|||
ref="myCascader" |
|||
v-model="scopeIdArray" |
|||
:key="iscascaderShow" |
|||
:options="casOptions" |
|||
:props="optionProps" |
|||
:show-all-levels="false" |
|||
@change="handleChangeScope"></el-cascader> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="政策依据" |
|||
prop="policyId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-select :disabled="formType==='detail'" |
|||
v-model="formData.policyId" |
|||
class="input-width-small" |
|||
placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in policyList" |
|||
:key="item.policyId" |
|||
:label="item.title" |
|||
:value="item.policyId"> |
|||
</el-option> |
|||
</el-select> |
|||
<!-- |
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handlePersonList">预览</el-button> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="经办人" |
|||
prop="principalName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input :disabled="formType==='detail'" |
|||
class="item_width_1" |
|||
placeholder="请输入经办人姓名" |
|||
v-model="formData.principalName"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="联系方式" |
|||
prop="principalContact" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input :disabled="formType==='detail'" |
|||
class="item_width_1" |
|||
placeholder="请输入联系方式" |
|||
v-model="formData.principalContact"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="指派服务" label-width="150px"> |
|||
<el-switch v-model="assignSwitch"> </el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item |
|||
label="查找享受服务人员" |
|||
prop="principalContact" |
|||
label-width="150px" |
|||
style="display: block" |
|||
v-show="this.assignSwitch" |
|||
> |
|||
<input type="text" v-model="formData.resiSearchTagId" v-show="false"> |
|||
<template v-if="this.resiSearchTagName"> |
|||
<el-tag @close="handleCloseTag" closable style="margin-right:10px;"> |
|||
{{this.resiSearchTagName }} |
|||
</el-tag> |
|||
</template> |
|||
|
|||
<el-button type="primary" @click="handleClickLabel" size="mini"> |
|||
<span> <i class="el-icon-plus"></i> 按标签查找 </span> |
|||
</el-button> |
|||
</el-form-item> |
|||
<el-form-item label="服务时间" |
|||
label-width="150px" |
|||
prop="serviceTimeStart" |
|||
style="display: block"> |
|||
<el-date-picker :disabled="formType==='detail'" |
|||
v-model="formData.serviceTimeStart" |
|||
:picker-options="startPickerOptions" |
|||
class="item_width_2" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<span class="u-data-tag">至</span> |
|||
<el-date-picker :disabled="formType==='detail'" |
|||
v-model="formData.serviceTimeEnd" |
|||
:picker-options="endPickerOptions" |
|||
class="item_width_2 u-data-tag" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="结束时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="备注" |
|||
prop="remark" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input :disabled="formType==='detail'" |
|||
class="item_width_1" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
:rows="3" |
|||
placeholder="请输入备注，不超过500字" |
|||
v-model="formData.remark"></el-input> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
<div v-show="formData.serviceStatus==='completed'"> |
|||
<h3 class="d-h3">反馈内容</h3> |
|||
|
|||
<el-form ref="ref_form_feedback" |
|||
:inline="true" |
|||
:disabled="true" |
|||
:model="feedbackFormData" |
|||
class="div_form"> |
|||
|
|||
<el-form-item label="服务目标" |
|||
prop="serviceGoal" |
|||
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="feedbackFormData.serviceGoal"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务效果" |
|||
prop="serviceEffect" |
|||
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="feedbackFormData.serviceEffect"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务人数" |
|||
style="display: block" |
|||
prop="servicePeopleNumber" |
|||
label-width="150px"> |
|||
<el-input-number class="item_width_2" |
|||
v-model="feedbackFormData.servicePeopleNumber" |
|||
:min="0" |
|||
:max="9999" |
|||
label="服务人数"></el-input-number> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务状态" |
|||
label-width="150px" |
|||
style="display: block" |
|||
prop="serviceStatus"> |
|||
<span>已完成</span> |
|||
<!-- <el-select class="item_width_1" |
|||
v-model="feedbackFormData.serviceStatus" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in statusArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> --> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="满意度" |
|||
style="display: block" |
|||
label-width="150px" |
|||
prop="satisfaction"> |
|||
<el-select class="item_width_2" |
|||
v-model="feedbackFormData.satisfaction" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in satisfyArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="地址" |
|||
prop="address" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
v-model="feedbackFormData.address"></el-input> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="地图位置" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<div style="width:500px"> |
|||
|
|||
<div class="div_map"> |
|||
<div id="map_app"> |
|||
|
|||
</div> |
|||
<div class="div_searchmap"> |
|||
<el-input maxlength="50" |
|||
size="mini" |
|||
placeholder="请输入关键字" |
|||
v-model="keyWords"> |
|||
</el-input> |
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="mini" |
|||
@click="handleSearchMap">查询</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</el-form-item> --> |
|||
|
|||
<el-form-item class="block" |
|||
label="附件" |
|||
label-width="150px" |
|||
prop="attach"> |
|||
<!-- <el-upload :headers="$getElUploadHeaders()" v-if="feedbackFormData.fileList&&feedbackFormData.fileList.length>0" |
|||
class="upload-demo" |
|||
:on-preview="handleFileDownload" |
|||
accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3" |
|||
:limit="3" |
|||
:file-list="fileList"> |
|||
|
|||
</el-upload> --> |
|||
<div v-if="feedbackFormData.fileList&&feedbackFormData.fileList.length>0" |
|||
class="attachement-list"> |
|||
<a :href="att.url" |
|||
target="_blank" |
|||
:key="att.url" |
|||
v-for="att in feedbackFormData.fileList"> |
|||
<i class="el-icon-folder-opened"></i> |
|||
{{ att.name }} |
|||
</a> |
|||
</div> |
|||
<span v-else>无附件</span> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="div_btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">取 消</el-button> |
|||
<el-button size="small" |
|||
v-if="formType != 'detail'" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
|
|||
<el-dialog v-if="showPersonList" |
|||
:visible.sync="showPersonList" |
|||
:append-to-body="true" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'标签查找'" |
|||
width="1150px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showPersonList = false"> |
|||
<person-list ref="ref_detail_form" |
|||
:policyId="policyId" |
|||
:ruleList="ruleList" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose"> |
|||
</person-list> |
|||
</el-dialog> |
|||
<el-dialog |
|||
v-if="showLabelForm" |
|||
:visible.sync="showLabelForm" |
|||
:append-to-body="true" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'标签配置'" |
|||
width="900px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showLabelForm = false" |
|||
> |
|||
<label-form |
|||
ref="ref_label_form" |
|||
:policyId="policyId" |
|||
:ruleList="ruleList" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk" |
|||
> |
|||
<!-- @handleOk="handleOk" |
|||
@handleClose="handleClose" --> |
|||
</label-form> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
// import personList from "../policy/oldPersonList.vue"; |
|||
import labelForm from "../labelConfig/addForm.vue"; |
|||
import { nextTick } from 'vue'; |
|||
|
|||
var map |
|||
var search |
|||
var markers |
|||
var infoWindowList |
|||
var geocoder // 新建一个正逆地址解析类 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now() |
|||
if (this.formData.serviceTimeStart) { |
|||
let serviceTimeStart = new Date(this.formData.serviceTimeStart) |
|||
return time.getTime() > nowData || time.getTime() < serviceTimeStart || time.getTime() === serviceTimeStart |
|||
} else { |
|||
return time.getTime() > nowData |
|||
} |
|||
|
|||
} |
|||
let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now() |
|||
return time.getTime() > nowData |
|||
} |
|||
|
|||
return { |
|||
btnDisable: false, |
|||
|
|||
keyWords: '', |
|||
assignSwitch: true, |
|||
formData: { |
|||
}, |
|||
showLabelForm: false, |
|||
resiSearchTagName:'', |
|||
feedbackFormData: { |
|||
serviceProjectId: '',// 服务项目id |
|||
serviceName: '', |
|||
serviceGoal: '',// 服务目标 |
|||
serviceEffect: '',// 服务效果 |
|||
servicePeopleNumber: null,// 服务人数 |
|||
serviceStatus: 'completed',// 服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度。不满意:bad、基本满意:good、非常满意:perfect |
|||
longitude: '',// 经度 |
|||
latitude: '',// 维度 |
|||
address: '', |
|||
fileList: [],// 附件列表 |
|||
}, |
|||
serviceList: [],//服务list |
|||
|
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
policyList: [], |
|||
projectList: [], |
|||
fileList: [], |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile', |
|||
|
|||
policyId: '', |
|||
showPersonList: false, |
|||
ruleList: [] |
|||
} |
|||
}, |
|||
components: { labelForm}, |
|||
mounted () { |
|||
this.getPolicyList() |
|||
if (this.serviceRecordId) {//详情 |
|||
this.loadInfo() |
|||
} |
|||
// this.initMap() |
|||
|
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
//加载组织数据 |
|||
async handlePersonList () { |
|||
if (!this.formData.policyId) { |
|||
this.$message.info('请先选择政策') |
|||
return false |
|||
} |
|||
|
|||
this.policyId = this.formData.policyId |
|||
await this.loadRuleList() |
|||
|
|||
this.showPersonList = true; |
|||
}, |
|||
|
|||
async loadRuleList () { |
|||
|
|||
const url = "/governance/policy/rulelist/" + this.policyId |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.ruleList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleClose () { |
|||
this.showPersonList = false |
|||
|
|||
|
|||
}, |
|||
handleOk () { |
|||
this.showPersonList = false |
|||
|
|||
|
|||
}, |
|||
handleClickLabel() { |
|||
this.showLabelForm = true; |
|||
this.$nextTick(() => { |
|||
this.$refs["ref_label_form"].initForm("info"); |
|||
}); |
|||
}, |
|||
async getPolicyList () { |
|||
const url = '/governance/policy/policyList' |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.policyList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
//加载组织 |
|||
async loadInfo () { |
|||
const url = '/governance/icServicePostRecord/detail' |
|||
|
|||
let params = { |
|||
serviceRecordId: this.serviceRecordId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.formData = { ...data } |
|||
this.formData.serviceRecordId = this.serviceRecordId |
|||
this.feedbackFormData = { ...data.feedback } |
|||
await this.getTagName() |
|||
this.fileList = [] |
|||
if (data.feedback && data.feedback.fileList && data.feedback.fileList.length > 0) { |
|||
data.feedback.fileList.forEach(element => { |
|||
let obj = { |
|||
name: element.name, |
|||
format: element.format, |
|||
url: element.url, |
|||
} |
|||
this.fileList.push(obj) |
|||
}); |
|||
} |
|||
|
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async getTagName() { |
|||
const url = "/governance/resiSearchTag/listResiSearchTags"; |
|||
let params = { |
|||
pageSize: 99, |
|||
}; |
|||
let { data, msg, code } = await requestPost(url, params); |
|||
if (code == 0) { |
|||
let showAddProduct = data.list.filter(item=>{ |
|||
return [this.formData.resiSearchTagId].includes(item.tagId) |
|||
}) |
|||
this.resiSearchTagName = showAddProduct[0].tagName |
|||
this.assignSwitch = true |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
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.editFuwu() |
|||
} |
|||
|
|||
}) |
|||
|
|||
|
|||
}, |
|||
async editFuwu () { |
|||
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //联系电话 |
|||
if (this.formData.principalContact && regPhone.test(this.formData.principalContact) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的联系电话' |
|||
}) |
|||
return false; |
|||
} |
|||
console.log(this.formData); |
|||
let url = '/governance/icServicePostRecord/edit' |
|||
// let url = "http://yapi.elinkservice.cn/mock/245/governance/icServiceProject/service/update" |
|||
|
|||
|
|||
const { data, code, msg } = await requestPost(url, this.formData) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}) |
|||
this.resetData() |
|||
|
|||
this.$emit('handleOk') |
|||
} else { |
|||
this.btnDisable = false |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleCancle () { |
|||
this.resetData() |
|||
this.$emit('handleClose') |
|||
|
|||
}, |
|||
addFormOk(val) { |
|||
this.showLabelForm = false; |
|||
this.formData.resiSearchTagId = val.tagId; |
|||
this.resiSearchTagName = val.tagName; |
|||
}, |
|||
addFormCancle() { |
|||
this.showLabelForm = false; |
|||
}, |
|||
handleCloseTag(){ |
|||
this.resiSearchTagName = '' |
|||
this.formData.resiSearchTagId = '' |
|||
}, |
|||
//下载 |
|||
handleFileDownload (file) { |
|||
|
|||
var a = document.createElement('a'); |
|||
var event = new MouseEvent('click'); |
|||
a.download = file.name; |
|||
console.log(a) |
|||
a.href = file.url; |
|||
a.dispatchEvent(event); |
|||
|
|||
|
|||
}, |
|||
|
|||
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap () { |
|||
// 定义地图中心点坐标 |
|||
var center = new window.TMap.LatLng(36.0722275, 120.38945519) |
|||
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
|||
map = new window.TMap.Map(document.getElementById('app'), { |
|||
center: center, // 设置地图中心点坐标 |
|||
zoom: 17.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45 // 设置地图旋转角度 |
|||
}) |
|||
|
|||
search = new window.TMap.service.Search({ pageSize: 10 }) |
|||
// 新建一个地点搜索类 |
|||
markers = new TMap.MultiMarker({ |
|||
map: map, |
|||
geometries: [] |
|||
}) |
|||
infoWindowList = Array(10) |
|||
|
|||
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 |
|||
|
|||
// 监听地图平移结束 |
|||
map.on('panend', () => { |
|||
this.handleMoveCenter() |
|||
}) |
|||
this.handleMoveCenter() |
|||
this.convert() |
|||
}, |
|||
|
|||
setMarker (lat, lng) { |
|||
markers.setGeometries([]) |
|||
markers.add([ |
|||
{ |
|||
id: '4', |
|||
styleId: 'marker', |
|||
position: new TMap.LatLng(lat, lng), |
|||
properties: { |
|||
title: 'marker4' |
|||
} |
|||
} |
|||
]) |
|||
}, |
|||
|
|||
handleSearchMap () { |
|||
infoWindowList.forEach((infoWindow) => { |
|||
infoWindow.close() |
|||
}) |
|||
infoWindowList.length = 0 |
|||
markers.setGeometries([]) |
|||
// 在地图显示范围内以给定的关键字搜索地点 |
|||
search |
|||
.searchNearby({ |
|||
keyword: this.keyWords, |
|||
radius: 1000, |
|||
autoExtend: true, |
|||
center: map.getCenter(), |
|||
}) |
|||
.then((result) => { |
|||
let { data } = result |
|||
if (Array.isArray(data) && data.length > 0) { |
|||
const { |
|||
location: { lat, lng } |
|||
} = data[0] |
|||
|
|||
|
|||
map.setCenter(new TMap.LatLng(lat, lng)) |
|||
this.setMarker(lat, lng) |
|||
this.formData.latitude = lat |
|||
this.formData.longitude = lng |
|||
this.convert() |
|||
} else { |
|||
this.$message.error('未检索到相关位置坐标') |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
handleMoveCenter () { |
|||
//修改地图中心点 |
|||
const center = map.getCenter() |
|||
const lat = center.getLat() |
|||
const lng = center.getLng() |
|||
this.formData.latitude = lat |
|||
this.formData.longitude = lng |
|||
this.setMarker(lat, lng) |
|||
this.convert(lat, lng) |
|||
}, |
|||
|
|||
convert (lat, lng) { |
|||
markers.setGeometries([]); |
|||
// var input = document.getElementById('location').value.split(','); |
|||
let location |
|||
if (lat && lng) { |
|||
location = new TMap.LatLng(lat, lng); |
|||
} else { |
|||
location = new TMap.LatLng(this.formData.latitude, this.formData.longitude); |
|||
} |
|||
|
|||
// map.setCenter(location); |
|||
markers.updateGeometries([ |
|||
{ |
|||
id: 'main', // 点标注数据数组 |
|||
position: location, |
|||
}, |
|||
]); |
|||
geocoder |
|||
.getAddress({ location: location }) // 将给定的坐标位置转换为地址 |
|||
.then((result) => { |
|||
this.formData.address = result.result.address |
|||
// 显示搜索到的地址 |
|||
}); |
|||
}, |
|||
|
|||
|
|||
resetData () { |
|||
this.formData = {} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
|
|||
|
|||
serviceTimeStart: [ |
|||
{ required: true, message: '服务时间不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
|
|||
} |
|||
}, |
|||
}, |
|||
props: { |
|||
|
|||
serviceRecordId: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
serviceOrgName: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
formType: {//表单操作类型 add新增，edit编辑，detail详情,feedback反馈 |
|||
type: String, |
|||
required: true |
|||
}, |
|||
|
|||
satisfyArray: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/form-main.scss"; |
|||
|
|||
.attachement-list { |
|||
// padding-left: 20px; |
|||
a { |
|||
display: block; |
|||
cursor: pointer; |
|||
// color: #4df0ff; |
|||
font-size: 14px; |
|||
|
|||
i { |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,856 @@ |
|||
<template> |
|||
<div class="g-main"> |
|||
<div> |
|||
<div class="m-search"> |
|||
<el-form :inline="true" |
|||
:model="formData" |
|||
ref="ref_searchform" |
|||
:label-width="'100px'"> |
|||
<el-form-item prop="serviceType" |
|||
label="服务类别" |
|||
> |
|||
<el-select class="u-item-width-daterange" |
|||
v-model.trim="formData.serviceTypeLevel1Id" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in serviceTypesLevel1" |
|||
@click.native="handleChangeServiceTypeLevel1" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="serviceType"> |
|||
<el-select class="u-item-width-daterange" |
|||
v-model.trim="formData.serviceTypeLevel2Id" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in serviceTypesLevel2" |
|||
@click.native="" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务时间" |
|||
prop="serviceTimeStart"> |
|||
<el-date-picker v-model="formData.serviceTimeStart" |
|||
:picker-options="startPickerOptions" |
|||
class="u-item-width-daterange" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<span class="u-data-tag">至</span> |
|||
<el-date-picker v-model="formData.serviceTimeEnd" |
|||
:picker-options="endPickerOptions" |
|||
class="u-item-width-daterange u-data-tag" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="结束时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="服务事项" |
|||
prop="serviceName"> |
|||
<el-input v-model="formData.serviceName" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务组织" |
|||
prop="serviceOrgType"> |
|||
<el-select v-model="formData.serviceOrgType" |
|||
class="u-item-width-daterange" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable |
|||
@change="handleServiceChange('add', $event)"> |
|||
<el-option v-for="item in serviceOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="formData.serviceOrgId" |
|||
class="u-item-width-daterange u-data-tag" |
|||
filterable |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in serviceOptiondList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
|
|||
<el-form-item label="服务状态" |
|||
prop="serviceStatus"> |
|||
<el-select class="u-item-width-normal" |
|||
v-model="formData.serviceStatus" |
|||
placeholder="全部" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in statusArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="满意度" |
|||
prop="satisfaction"> |
|||
<el-select class="u-item-width-normal" |
|||
v-model="formData.satisfaction" |
|||
placeholder="全部" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in satisfyArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
<el-row type="flex" > |
|||
<el-col :span="24" align="right"> |
|||
<el-button style="margin-left:30px" |
|||
size="small" |
|||
type="primary " |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" |
|||
is-plain |
|||
class="diy-button--white el-button--default" |
|||
size="small" |
|||
@click="resetSearch">重置</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="m-table"> |
|||
<div class="div_btn"> |
|||
<div class="div_btn_left"> |
|||
<el-button |
|||
size="small" |
|||
@click="handleAdd" |
|||
type="primary" |
|||
icon="el-icon-plus" |
|||
style="margin-right:10px" |
|||
>新增</el-button> |
|||
</div> |
|||
<el-button @click="handleExport" |
|||
type="primary" |
|||
size="small" |
|||
class="diy-button--white el-button--default" |
|||
>导出</el-button> |
|||
<el-button type="primary" @click="onDeleteBatch" size="small"> |
|||
批量删除 |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-table :data="tableData" |
|||
border |
|||
v-loading="tableLoading" |
|||
class="m-table-item" |
|||
style="width: 100%" |
|||
:height="maxTableHeight" |
|||
@select-all="onMultiSelect" |
|||
@selection-change="onMultiSelect"> |
|||
|
|||
<el-table-column |
|||
type="selection" |
|||
fixed="left" |
|||
align="center" |
|||
width="50"/> |
|||
|
|||
<el-table-column label="序号" |
|||
fixed="left" |
|||
type="index" |
|||
align="center" |
|||
width="50" /> |
|||
|
|||
<el-table-column prop="serviceTypeName" |
|||
label="服务类型" |
|||
align="center" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="serviceName" |
|||
align="center" |
|||
min-width="150" |
|||
label="服务事项" |
|||
:show-overflow-tooltip="true"> |
|||
|
|||
</el-table-column> |
|||
<el-table-column prop="sourceName" |
|||
align="center" |
|||
min-width="150" |
|||
label="来自" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
<el-table-column prop="serviceTimeStart" |
|||
align="center" |
|||
width="300" |
|||
:show-overflow-tooltip="true" |
|||
label="服务时间"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<span>{{scope.row.serviceTimeStart}}至{{scope.row.serviceTimeEnd}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="serviceOrgName" |
|||
align="center" |
|||
min-width="150" |
|||
label="服务方" |
|||
:show-overflow-tooltip="true"> |
|||
|
|||
</el-table-column> |
|||
<el-table-column prop="serviceStatus" |
|||
align="center" |
|||
width="100" |
|||
label="服务状态" |
|||
:show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<span>{{scope.row.serviceStatus==='in_service'?'进行中':'已完成'}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="servedPersonQty" |
|||
align="center" |
|||
width="110" |
|||
label="服务人数" |
|||
:show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handlePersonList(scope.row)" type="text" size="small"> |
|||
{{ scope.row.servedPersonQty }} |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column fixed="right" |
|||
label="操作" |
|||
align="center" |
|||
width="220"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handleDetail(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>查看</el-button> |
|||
<el-button |
|||
@click="handleEdit(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>编辑</el-button> |
|||
<!-- 临时去掉人员名单与反馈 --> |
|||
<el-button v-if="scope.row.serviceStatus==='in_service'" |
|||
@click="handleFeedback(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>反馈</el-button> |
|||
<!-- <el-button v-if="scope.row.policyId" |
|||
@click="handlePersonList(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>人员名单</el-button> --> |
|||
|
|||
<!-- 暂时不限制删除按钮，任何状态都允许删除，产品要求的 --> |
|||
<!-- v-if="scope.row.serviceStatus==='in_service'" --> |
|||
<el-button |
|||
@click="handleDel(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>删除</el-button> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<div> |
|||
|
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
<el-dialog v-if="showAdd" |
|||
:visible.sync="showAdd" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="addDiaTitle" |
|||
:modal-append-to-body="false" |
|||
width="720px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showAdd = false"> |
|||
<add-form ref="ref_add_form" |
|||
:formType="formType" |
|||
:statusArray="statusArray" |
|||
:satisfyArray="satisfyArray" |
|||
:serviceRecordId="serviceRecordId" |
|||
:serviceName="serviceName" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose"></add-form> |
|||
</el-dialog> |
|||
<!-- 编辑与新增写在一个组件中 --> |
|||
<!-- <el-dialog v-if="showEdit" |
|||
:visible.sync="showEdit" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'编辑'" |
|||
:modal-append-to-body="false" |
|||
width="850px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showEdit = false"> |
|||
<edit-form ref="ref_edit_form" |
|||
:serviceRecordId="serviceRecordId" |
|||
:serviceOrgName="serviceOrgName" |
|||
:satisfyArray="satisfyArray" |
|||
:statusArray="statusArray" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose" |
|||
:formType="formType"> |
|||
</edit-form> |
|||
</el-dialog> --> |
|||
<el-dialog v-if="showDetail" |
|||
:visible.sync="showDetail" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="detailDiaTitle" |
|||
:modal-append-to-body="false" |
|||
width="850px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaDetailClose"> |
|||
<detail-form ref="ref_detail_form" |
|||
:serviceRecordId="serviceRecordId" |
|||
:serviceOrgName="serviceOrgName" |
|||
:satisfyArray="satisfyArray" |
|||
:statusArray="statusArray" |
|||
@diaDetailClose="diaDetailClose"> |
|||
</detail-form> |
|||
</el-dialog> |
|||
<el-dialog v-if="showPersonList" |
|||
:visible.sync="showPersonList" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'人员名单'" |
|||
width="1150px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showPersonList = false"> |
|||
<person-list ref="ref_person_list" |
|||
:serviceId="commonServiceId" |
|||
:tagId="tagId"> |
|||
</person-list> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { mapGetters } from "vuex"; |
|||
// import eventInfo from "./cpts/event-info"; |
|||
import axios from "axios"; |
|||
import addForm from "./addForm"; |
|||
import detailForm from "./detailForm.vue"; |
|||
import editForm from "./editForm"; |
|||
import feedBackForm from "./addForm"; |
|||
import personList from "./personList"; |
|||
// 其他组件其他页面有调用 |
|||
export default { |
|||
components: { addForm, detailForm, feedBackForm, editForm, personList }, |
|||
|
|||
|
|||
data () { |
|||
let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now() |
|||
|
|||
if (this.formData.serviceTimeStart) { |
|||
let serviceTimeStart = new Date(this.formData.serviceTimeStart) |
|||
return time.getTime() > nowData || time.getTime() < serviceTimeStart || time.getTime() === serviceTimeStart |
|||
} else { |
|||
return time.getTime() > nowData |
|||
} |
|||
|
|||
} |
|||
let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now() |
|||
return time.getTime() > nowData |
|||
} |
|||
|
|||
return { |
|||
// 公共服务分类 |
|||
serviceTypesLevel1:[], |
|||
serviceTypesLevel2:[], |
|||
tableLoading: false, |
|||
user: {}, |
|||
agencyId: '', |
|||
searchH:0, |
|||
tableData: [], |
|||
|
|||
statusArray: [ |
|||
{ |
|||
value: "in_service", |
|||
label: "进行中", |
|||
}, |
|||
{ |
|||
value: "completed", |
|||
label: "已完成", |
|||
}, |
|||
], |
|||
satisfyArray: [ |
|||
{ |
|||
value: "bad", |
|||
label: "不满意", |
|||
}, |
|||
{ |
|||
value: "good", |
|||
label: "基本满意", |
|||
}, |
|||
{ |
|||
value: "perfect", |
|||
label: "非常满意", |
|||
}, |
|||
|
|||
], |
|||
|
|||
formData: { |
|||
serviceTypeLevel1Id:'',// 公共服务（政策级别）一级分类id |
|||
serviceTypeLevel2Id:'',// 公共服务（政策级别）二级分类id |
|||
serviceName: '',//项目名称 |
|||
serviceOrgType: '',//服务组织类型 |
|||
serviceOrgId: '',//服务组织Id |
|||
serviceTimeStart: '',//服务开始时间yyyy-MM-dd |
|||
serviceTimeEnd: '',//服务结束时间yyyy-MM-dd |
|||
serviceStatus: '',//服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度.不满意:bad、基本满意:good、非常满意:perfect |
|||
|
|||
}, |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem("pageSize") || 20, |
|||
total: 1, |
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
serviceRecordId: '', |
|||
serviceName: '', |
|||
serviceOrgName: '', |
|||
|
|||
showAdd: false, |
|||
showEdit: false, |
|||
showDetail: false, |
|||
showFeedback: false, |
|||
formType: 'add', |
|||
addDiaTitle: '指派服务', |
|||
detailDiaTitle: '服务详情', |
|||
|
|||
serviceOptions: [], |
|||
serviceOptiondList: [], |
|||
|
|||
commonServiceId: null, |
|||
tagId: null, |
|||
showPersonList: false, |
|||
ruleList: [], |
|||
|
|||
// 多选行 |
|||
multiSelectedRows: [] |
|||
}; |
|||
}, |
|||
computed: { |
|||
maxTableHeight () { |
|||
const h = |
|||
this.clientHeight - this.searchH - 450 + this.iframeHeight; |
|||
const _h = this.clientHeight - 450 - this.searchH; |
|||
return this.$store.state.inIframe ? h : _h; |
|||
}, |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
}, |
|||
watch: { |
|||
// "formData.serviceTimeEnd": function (val) { |
|||
// if (val && val != '') { |
|||
// let arrayTemp = val.split(' ') |
|||
// this.formData.serviceTimeEnd = arrayTemp[0] + ' 23:59:59' |
|||
// } |
|||
|
|||
// }, |
|||
}, |
|||
mounted () { |
|||
console.log(this.$store.state) |
|||
this.user = this.$store.state.user |
|||
this.agencyId = this.user.agencyId |
|||
this.getDictOptions() |
|||
this.getTableData(); |
|||
}, |
|||
methods: { |
|||
|
|||
// 服务类型下拉框选中事件 |
|||
handleChangeServiceTypeLevel1() { |
|||
this.formData.serviceTypeLevel2Id = '' |
|||
this.$http |
|||
.get("/governance/commonServiceType/selectList/" + this.formData.serviceTypeLevel1Id) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.serviceTypesLevel2 = res.data; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}) |
|||
}, |
|||
|
|||
handleSearch (val) { |
|||
console.log(this.formData); |
|||
this.pageNo = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 获取服务组织 |
|||
async getDictOptions () { |
|||
const url = "/sys/dict/data/dictlist" |
|||
|
|||
let params = { |
|||
dictType: 'user_demand_service_type' |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.serviceOptions = data; |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
this.$http |
|||
.get("/governance/commonServiceType/selectList/0") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.serviceTypesLevel1 = res.data; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
|
|||
handleServiceChange (type, val) { |
|||
this.formData.serviceOrgId = '' |
|||
if (val === "social_org") { |
|||
if (type === "add") { |
|||
this.getServiceuserList(val, "add_demand"); |
|||
} else { |
|||
this.getServiceuserList(val, "query_demand"); |
|||
} |
|||
} else { |
|||
this.getServiceuserList(val, ""); |
|||
} |
|||
}, |
|||
|
|||
async getServiceuserList (serviceType, query) { |
|||
if (!serviceType) return false; |
|||
|
|||
const params = { |
|||
serviceName: "", |
|||
serviceType: serviceType, |
|||
queryPurpose: query, |
|||
}; |
|||
await this.$http |
|||
.post("/governance/userdemand/servicelist", params) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.serviceOptiondList = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
//加载人员列表数据 |
|||
async handlePersonList (row) { |
|||
this.commonServiceId = row.serviceRecordId; |
|||
this.tagId = row.resiSearchTagId; |
|||
this.showPersonList = true; |
|||
}, |
|||
|
|||
async loadRuleList () { |
|||
|
|||
const url = "/governance/policy/rulelist/" + this.policyId |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.ruleList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
async handleAdd () { |
|||
this.addDiaTitle = '指派服务' |
|||
this.formType = 'add' |
|||
this.showAdd = true; |
|||
}, |
|||
|
|||
async handleDetail (row) { |
|||
this.detailDiaTitle = "服务详情" |
|||
this.serviceRecordId = row.serviceRecordId |
|||
this.serviceOrgName = row.serviceOrgName |
|||
|
|||
// this.formType = 'detail' |
|||
this.showDetail = true |
|||
|
|||
}, |
|||
diaDetailClose () { |
|||
console.log(this.$refs.ref_detail) |
|||
this.$refs.ref_detail_form.diaDestroy() |
|||
this.showDetail = false |
|||
}, |
|||
async handleEdit (row) { |
|||
this.addDiaTitle = "编辑服务" |
|||
this.serviceRecordId = row.serviceRecordId |
|||
this.serviceOrgName = row.serviceOrgName |
|||
this.formType = 'edit' |
|||
this.showAdd = true |
|||
|
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async handleFeedback (row) { |
|||
|
|||
this.serviceRecordId = row.serviceRecordId |
|||
this.serviceName = row.serviceName |
|||
this.addDiaTitle = '服务反馈' |
|||
this.formType = 'feedback' |
|||
this.showAdd = true; |
|||
}, |
|||
|
|||
|
|||
handleClose () { |
|||
this.serviceRecordId = "" |
|||
this.formType = '' |
|||
|
|||
this.showAdd = false |
|||
this.showDetail = false |
|||
this.showEdit = false |
|||
|
|||
|
|||
}, |
|||
handleOk () { |
|||
this.handleClose() |
|||
this.pageNo = 1 |
|||
this.getTableData() |
|||
|
|||
}, |
|||
|
|||
|
|||
async handleDel (row) { |
|||
|
|||
this.serviceRecordId = row.serviceRecordId |
|||
|
|||
this.$confirm("确认删除服务?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.cancelFuwu([row.serviceRecordId]) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
|
|||
}, |
|||
|
|||
async cancelFuwu (serviceRecordIds) { |
|||
|
|||
const url = '/governance/icServicePostRecord/searchDeleteBatch'; |
|||
|
|||
const { data, code, msg } = await requestPost(url, serviceRecordIds); |
|||
|
|||
if (code === 0) { |
|||
this.$message.success("取消成功！"); |
|||
this.getTableData(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getTableData () { |
|||
this.tableLoading = true |
|||
const url = "/governance/icServicePostRecord/searchList"; |
|||
|
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}); |
|||
|
|||
this.tableLoading = false |
|||
if (code === 0) { |
|||
|
|||
this.total = data.total ; |
|||
this.tableData = data.list |
|||
|
|||
|
|||
|
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async handleExport () { |
|||
//导出改接口-'服务找人' |
|||
const url = "/governance/icServicePostRecord/searchExport"; |
|||
const { pageSize, pageNo, formData } = this; |
|||
axios({ |
|||
url: window.SITE_CONFIG["apiURL"] + url, |
|||
method: "post", |
|||
data: { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}, |
|||
responseType: "blob", |
|||
}) |
|||
.then((res) => { |
|||
let fileName = window.decodeURI( |
|||
res.headers["content-disposition"].split(";")[1].split("=")[1] |
|||
); |
|||
console.log("filename", fileName); |
|||
let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); |
|||
var url = window.URL.createObjectURL(blob); |
|||
var aLink = document.createElement("a"); |
|||
aLink.style.display = "none"; |
|||
aLink.href = url; |
|||
aLink.setAttribute("download", fileName); |
|||
document.body.appendChild(aLink); |
|||
aLink.click(); |
|||
document.body.removeChild(aLink); //下载完成移除元素 |
|||
window.URL.revokeObjectURL(url); //释放掉blob对象 |
|||
}) |
|||
.catch((err) => { |
|||
console.log("获取导出情失败", err); |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
|
|||
this.pageSize = val; |
|||
window.localStorage.setItem("pageSize", val); |
|||
this.getTableData(); |
|||
}, |
|||
handleCurrentChange (val) { |
|||
|
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
|
|||
resetSearch () { |
|||
this.formData = { |
|||
serviceTypeLevel1Id:'',// 公共服务（政策级别）一级分类id |
|||
serviceTypeLevel2Id:'',// 公共服务（政策级别）二级分类id |
|||
serviceName: '',//项目名称 |
|||
serviceOrgType: '',//服务组织类型 |
|||
serviceOrgId: '',//服务组织Id |
|||
serviceTimeStart: '',//服务开始时间yyyy-MM-dd |
|||
serviceTimeEnd: '',//服务结束时间yyyy-MM-dd |
|||
serviceStatus: '',//服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度.不满意:bad、基本满意:good、非常满意:perfect |
|||
} |
|||
|
|||
|
|||
this.pageNo = 1 |
|||
this.getTableData() |
|||
}, |
|||
|
|||
// 多选 |
|||
onMultiSelect(row) { |
|||
this.multiSelectedRows = row; |
|||
}, |
|||
|
|||
// 批量删除 |
|||
onDeleteBatch() { |
|||
if (this.multiSelectedRows.length == 0) { |
|||
return; |
|||
} |
|||
|
|||
this.$confirm("删除之后无法恢复，确认删除？", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
let serviceRecordIds = this.multiSelectedRows.map(item => item.serviceRecordId) |
|||
this.cancelFuwu(serviceRecordIds) |
|||
}) |
|||
.catch((err) => { |
|||
if (err == "cancel") { |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
props: { |
|||
|
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/buttonstyle.scss"; |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
</style> |
|||
@ -0,0 +1,486 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<el-form |
|||
:inline="true" |
|||
:model="searchFormData" |
|||
ref="ref_searchform" |
|||
:label-width="'110px'"> |
|||
|
|||
<el-form-item label="所属组织" prop="orgId"> |
|||
<el-cascader |
|||
@change="handleOrgChange" |
|||
:options="orgTree" |
|||
:props="orgOptionProps" |
|||
clearable |
|||
placeholder="请选择组织"></el-cascader> |
|||
</el-form-item> |
|||
<el-form-item label="人员姓名" prop="title"> |
|||
<el-input |
|||
v-model="searchFormData.name" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="手机号" prop="title"> |
|||
<el-input |
|||
v-model="searchFormData.mobile" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="身份证号" prop="title"> |
|||
<el-input |
|||
v-model="searchFormData.idCard" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="享受服务次数" prop="title"> |
|||
<el-input |
|||
v-model="searchFormData.serveTimes" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="家庭住址" prop="title"> |
|||
<el-select v-model="searchFormData.villageId" placeholder="请选择小区" |
|||
@change="handleQuarterSelectorsChange" clearable> |
|||
<el-option |
|||
v-for="item in quartersSelectItems" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="searchFormData.buildId" placeholder="请选择楼栋" |
|||
@change="handleBuildSelectorsChange" clearable> |
|||
<el-option |
|||
v-for="item in buildingSelectItems" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="searchFormData.unitId" placeholder="请选择单元" |
|||
@change="handleUnitSelectorsChange" clearable> |
|||
<el-option |
|||
v-for="item in unitSelectItems" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="searchFormData.homeId" placeholder="请选择房屋" |
|||
@change="handleUnitSelectorsChange" clearable> |
|||
<el-option |
|||
v-for="item in homeSelectItems" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="div_btn"> |
|||
<el-button type="primary" size="small" class="diy-button--blue" @click="handleIncrementServeTimes">标记享受服务人员</el-button> |
|||
<el-button type="primary" size="small" class="diy-button--blue" @click="handleSearch">查询</el-button> |
|||
</div> |
|||
|
|||
<div class="m-table"> |
|||
<!--表格--> |
|||
<el-table |
|||
:data="personList" |
|||
height="250" |
|||
border |
|||
@select-all="handleSelectAll" |
|||
@selection-change="handleTableRowsSelected" |
|||
style="width: 100%"> |
|||
|
|||
<el-table-column |
|||
type="selection" |
|||
width="55"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
prop="agencyName" |
|||
label="所属组织" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="gridName" |
|||
label="所属网格" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="name" |
|||
label="姓名"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="genderDisplay" |
|||
label="性别"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="birthday" |
|||
width="170" |
|||
label="出生日期"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="age" |
|||
label="年龄"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="mobile" |
|||
width="120" |
|||
label="手机号"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="idCard" |
|||
width="180" |
|||
label="身份证号"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="address" |
|||
width="250" |
|||
label="家庭住址"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="serveTimes" |
|||
label="享受服务次数"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!--分页条--> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="searchFormData.pageNo" |
|||
:page-sizes="pageSizes" |
|||
:page-size="searchFormData.pageSize" |
|||
layout="sizes, prev, pager, next, total" |
|||
background |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { requestPost } from '@/js/dai/request' |
|||
import { requestGet } from '@/js/dai/request' |
|||
import { EpmetResultResolver } from '@/js/epmet-result-resolver' |
|||
import nextTick from 'dai-js/tools/nextTick' |
|||
|
|||
export default { |
|||
mounted () { |
|||
this.epmetResultResolver = new EpmetResultResolver(this); |
|||
this.searchFormData.serviceId = this.serviceId; |
|||
this.initOrgTree(); |
|||
this.handleSearch(); |
|||
}, |
|||
data () { |
|||
return { |
|||
// 搜索表单 |
|||
searchFormData: { |
|||
serviceId: null, |
|||
orgId: null, |
|||
orgType: null, |
|||
tagId: null, |
|||
name: null, |
|||
mobile: null, |
|||
idCard: null, |
|||
serveTimes: null, |
|||
villageId: null, |
|||
buildId: null, |
|||
unitId: null, |
|||
homeId: null, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
}, |
|||
|
|||
// 分页参数 |
|||
pageSizes: [10, 20, 50, 100, 200], |
|||
total: 0, // 总页数 |
|||
|
|||
// 小区下拉框选项 |
|||
quartersSelectItems: [], |
|||
buildingSelectItems: [], |
|||
unitSelectItems: [], |
|||
homeSelectItems: [], |
|||
orgTree: [], // 组织树 |
|||
// 组织树选项 |
|||
orgOptionProps: { |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
}, |
|||
|
|||
//表格数据 |
|||
selectedPersonListIds: [], // 选中的名单id列表 |
|||
personList: [], // 找到的人员名单 |
|||
epmetResultResolver: null |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
/** |
|||
* 行选中事件 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleTableRowsSelected(selection) { |
|||
this.selectedPersonListIds = selection.map(e => e.id); |
|||
}, |
|||
|
|||
/** |
|||
* 全选 |
|||
* @param selection |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleSelectAll(selection) { |
|||
this.selectedPersonListIds = selection.map(e => e.id); |
|||
}, |
|||
|
|||
/** |
|||
* 搜索事件 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleSearch () { |
|||
let url = '/actual/base/residentBaseInfo/commonServicePersonList/list' |
|||
this.searchFormData.tagId = this.tagId |
|||
this.searchFormData.serviceId = this.serviceId |
|||
let result = await requestPost(url, this.searchFormData) |
|||
|
|||
this.epmetResultResolver |
|||
.success((data) => { |
|||
this.personList = data.list; |
|||
this.total = data.total; |
|||
}) |
|||
.parse(result); |
|||
}, |
|||
|
|||
/** |
|||
* 标记享受服务人员 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleIncrementServeTimes() { |
|||
let params = { |
|||
recIds: this.selectedPersonListIds |
|||
}; |
|||
|
|||
let url = "/actual/base/residentBaseInfo/commonServicePersonList/incrementServeTimes"; |
|||
|
|||
const rst = await requestPost(url, params); |
|||
|
|||
this.epmetResultResolver.parse(result); |
|||
|
|||
// 重新加载列表 |
|||
this.handleSearch(); |
|||
}, |
|||
|
|||
/** |
|||
* 组织选择触发事件 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async initOrgTree () { |
|||
let url = '/gov/org/customeragency/agencygridtree' |
|||
const { data, code, msg } = await requestPost(url, {}) |
|||
if (code === 0) { |
|||
debugger |
|||
this.orgTree.push(data) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 加载和填充小区下拉框 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleOrgChange (selectedOrgNodes) { |
|||
let selectedLastNode = selectedOrgNodes[selectedOrgNodes.length - 1] |
|||
this.searchFormData.orgId = selectedLastNode |
|||
const { orgId, level } = this.getSelectedOrgIdAndType(selectedLastNode, this.orgTree) |
|||
let url = '/actual/base/communityQuarters/listQuartersOptions' |
|||
let params = {} |
|||
this.searchFormData.orgId = orgId |
|||
if (level === 'grid') { |
|||
params['gridId'] = orgId |
|||
this.searchFormData.orgType = 'grid' |
|||
} else { |
|||
params['agencyId'] = orgId |
|||
this.searchFormData.orgType = 'agency' |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.quartersSelectItems = data.map(e => { |
|||
return { |
|||
label: e.label, |
|||
value: e.value |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 小区选择器change，填充楼栋下拉框 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleQuarterSelectorsChange (quartersId) { |
|||
let url = '/actual/base/communityBuilding/buildingoption' |
|||
let params = { |
|||
quartersId: quartersId, |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.buildingSelectItems = data.map(e => { |
|||
return { |
|||
label: e.label, |
|||
value: e.value |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 楼栋选择器change，填充单元下拉框 |
|||
* @param selectedQuarter |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleBuildSelectorsChange (buildId) { |
|||
let url = '/actual/base/communityBuildingUnit/unitoption' |
|||
let params = { |
|||
buildingId: buildId, |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.unitSelectItems = data.map(e => { |
|||
return { |
|||
label: e.label, |
|||
value: e.value |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 单元下拉框选择器change，填充房屋 |
|||
* @param unitId |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleUnitSelectorsChange (unitId) { |
|||
let url = '/actual/base/communityHouse/houseoption' |
|||
let params = { |
|||
unitId: unitId, |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.homeSelectItems = data.map(e => { |
|||
return { |
|||
label: e.label, |
|||
value: e.value, |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 递归搜索组织树，选出选中的节点 |
|||
* @param orgId |
|||
* @param orgList |
|||
* @returns {*} |
|||
*/ |
|||
getSelectedOrgIdAndType (orgId, orgList) { |
|||
for (let org of orgList) { |
|||
if (org.agencyId === orgId) { |
|||
return { orgId: org.agencyId, level: org.level } |
|||
} |
|||
|
|||
if (org.subAgencyList && org.subAgencyList.length > 0) { |
|||
let selectedOrg = this.getSelectedOrgIdAndType(orgId, org.subAgencyList) |
|||
if (selectedOrg) { |
|||
return selectedOrg |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 条数改变 |
|||
handleSizeChange (newPageSize) { |
|||
this.searchFormData.pageSize = newPageSize |
|||
this.handleSearch() |
|||
}, |
|||
|
|||
// 翻页 |
|||
handleCurrentChange (pageNo) { |
|||
this.searchFormData.pageNo = pageNo |
|||
this.handleSearch() |
|||
} |
|||
}, |
|||
props: { |
|||
serviceId: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
tagId: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
serviceId: { |
|||
type: String, |
|||
required: true, |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/form-main.scss"; |
|||
|
|||
.btn-add-rule { |
|||
margin-left: 150px; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.item_width_short { |
|||
width: 380px; |
|||
} |
|||
|
|||
.item_rule { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.item_label { |
|||
flex: 0 0 150px; |
|||
line-height: 30px; |
|||
text-align: right; |
|||
padding-right: 12px; |
|||
} |
|||
|
|||
.item_label:before { |
|||
content: "*"; |
|||
color: #f56c6c; |
|||
margin-right: 4px; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,399 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<div v-if="initLoading" class="m-row"> |
|||
<div class="m-info"> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务名称：</span> |
|||
<span>{{ formData.serviceName || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务组织：</span> |
|||
<span>{{ serviceOrgName || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务范围：</span> |
|||
<span>{{ formData.gridIdListName || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">政策依据：</span> |
|||
<span>{{ formData.policyTitle || "--" }}</span> |
|||
<!-- <el-button |
|||
v-if="formData.policyId" |
|||
style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handlePersonList" |
|||
>预览</el-button |
|||
> --> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">经办人：</span> |
|||
<span>{{ formData.principalName || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">联系方式：</span> |
|||
<span>{{ formData.principalContact || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务时间：</span> |
|||
<span>{{ formData.serviceTimeStart || "--" }}</span |
|||
>至 |
|||
<span>{{ formData.serviceTimeEnd || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">享受服务人员: </span> |
|||
<span>{{ resiSearchTagName }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">备注：</span> |
|||
<span>{{ formData.remark || "--" }}</span> |
|||
</div> |
|||
|
|||
<div v-show="formData.serviceStatus === 'completed'"> |
|||
<h3 class="d-h3">反馈内容</h3> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">备注：</span> |
|||
<span>{{ feedbackFormData.serviceGoal || "--" }}</span> |
|||
</div> |
|||
<!-- <div class="info-prop"> |
|||
<span class="info-title-2">服务效果：</span> |
|||
<span>{{ feedbackFormData.serviceEffect || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务人数：</span> |
|||
<span>{{ feedbackFormData.servicePeopleNumber || 0 }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务状态：</span> |
|||
<span>{{ feedbackFormData.serviceStatusShow || "--" }}</span> |
|||
</div> --> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">满意度：</span> |
|||
<span>{{ feedbackFormData.satisfactionShow || "--" }}</span> |
|||
</div> |
|||
|
|||
<!-- <div class="info-prop"> |
|||
<span class="info-title-2">地理位置：</span> |
|||
<span>{{ feedbackFormData.address || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">地图位置：</span> |
|||
<div class="div_map"> |
|||
<div id="app_detail"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">附件：</span> |
|||
<file-list |
|||
v-if="fileList.length > 0" |
|||
:fileList="fileList" |
|||
></file-list> |
|||
<span v-else>--</span> |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="div-btn"> |
|||
</div> |
|||
<el-row type="flex" justify="right"> |
|||
<el-col :span="24" align="right"> |
|||
<el-button size="small" @click="handleCancle" style="margin-right:16px;">关 闭</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<el-dialog |
|||
v-if="showPersonList" |
|||
:visible.sync="showPersonList" |
|||
:append-to-body="true" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'政策预览'" |
|||
width="1150px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showPersonList = false" |
|||
> |
|||
<person-list |
|||
ref="ref_detail_form" |
|||
:policyId="policyId" |
|||
:ruleList="ruleList" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose" |
|||
> |
|||
</person-list> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from "vuex"; |
|||
import { Loading } from "element-ui"; // 引入Loading服务 |
|||
import { requestPost } from "@/js/dai/request"; |
|||
// import personList from "../policy/oldPersonList.vue"; |
|||
import fileList from "@/views/components/fileList"; |
|||
import daiMap from "@/utils/dai-map"; |
|||
|
|||
var map; |
|||
let loading; // 加载动画 |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
initLoading: false, |
|||
|
|||
keyWords: "", |
|||
formData: {}, |
|||
resiSearchTagName:"", |
|||
feedbackFormData: { |
|||
serviceProjectId: "", // 服务项目id |
|||
serviceName: "", |
|||
serviceGoal: "", // 服务目标 |
|||
serviceEffect: "", // 服务效果 |
|||
servicePeopleNumber: null, // 服务人数 |
|||
serviceStatus: "completed", // 服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: "", //满意度。不满意:bad、基本满意:good、非常满意:perfect |
|||
longitude: "", // 经度 |
|||
latitude: "", // 维度 |
|||
address: "", |
|||
fileList: [], // 附件列表 |
|||
}, |
|||
|
|||
policyId: "", |
|||
showPersonList: false, |
|||
ruleList: [], |
|||
policyList: [], |
|||
}; |
|||
}, |
|||
components: { fileList }, |
|||
async mounted() { |
|||
// if (this.serviceRecordId) {//详情 |
|||
await this.loadInfo(); |
|||
this.initLoading = true; |
|||
|
|||
if ( |
|||
this.formData.serviceStatus === "completed" && |
|||
this.feedbackFormData.latitude |
|||
) { |
|||
this.$nextTick(() => { |
|||
this.initMap(); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
diaDestroy() {}, |
|||
|
|||
//加载组织数据 |
|||
async handlePersonList() { |
|||
if (!this.formData.policyId) { |
|||
this.$message.info("请先选择政策"); |
|||
return false; |
|||
} |
|||
|
|||
this.policyId = this.formData.policyId; |
|||
await this.loadRuleList(); |
|||
|
|||
this.showPersonList = true; |
|||
}, |
|||
|
|||
async loadRuleList() { |
|||
const url = "/governance/policy/rulelist/" + this.policyId; |
|||
|
|||
let params = {}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.ruleList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
handleClose() { |
|||
this.showPersonList = false; |
|||
}, |
|||
|
|||
//加载组织 |
|||
async loadInfo() { |
|||
const url = "/governance/icServiceSkillRecord/detail"; |
|||
|
|||
let params = { |
|||
serviceRecordId: this.serviceRecordId, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.formData = { ...data }; |
|||
this.formData.serviceRecordId = this.serviceRecordId; |
|||
this.feedbackFormData = { ...data.feedback }; |
|||
this.formData.gridIdListName = ""; |
|||
this.feedbackFormData.serviceStatusShow = ""; |
|||
this.feedbackFormData.satisfactionShow = ""; |
|||
await this.getTagName() |
|||
let arr = []; |
|||
this.formData.gridIdList.forEach((element) => { |
|||
arr.push(element.objectName); |
|||
}); |
|||
this.formData.gridIdListName = arr.join(","); |
|||
this.statusArray.forEach((element) => { |
|||
if (this.formData.serviceStatus === element.value) { |
|||
this.feedbackFormData.serviceStatusShow = element.label; |
|||
} |
|||
}); |
|||
this.satisfyArray.forEach((element) => { |
|||
if (this.feedbackFormData.satisfaction === element.value) { |
|||
this.feedbackFormData.satisfactionShow = element.label; |
|||
} |
|||
}); |
|||
|
|||
this.fileList = []; |
|||
if ( |
|||
data.feedback && |
|||
data.feedback.fileList && |
|||
data.feedback.fileList.length > 0 |
|||
) { |
|||
data.feedback.fileList.forEach((element) => { |
|||
let obj = { |
|||
name: element.name, |
|||
format: element.format, |
|||
url: element.url, |
|||
type: element.type, |
|||
}; |
|||
this.fileList.push(obj); |
|||
}); |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getTagName() { |
|||
const url = "/governance/resiSearchTag/listResiSearchTags"; |
|||
let params = { |
|||
pageSize: 99, |
|||
}; |
|||
let { data, msg, code } = await requestPost(url, params); |
|||
if (code == 0) { |
|||
let showAddProduct = data.list.filter(item=>{ |
|||
return [this.formData.resiSearchTagId].includes(item.tagId) |
|||
}) |
|||
if(this.formData.resiSearchTagId){ |
|||
this.resiSearchTagName = showAddProduct[0].tagName |
|||
}else{ |
|||
this.resiSearchTagName = '--' |
|||
} |
|||
|
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleCancle() { |
|||
this.resetData(); |
|||
this.$emit("diaDetailClose"); |
|||
}, |
|||
|
|||
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap() { |
|||
let { latitude, longitude } = this.feedbackFormData; |
|||
|
|||
map = new daiMap( |
|||
document.getElementById("app_detail"), |
|||
{ latitude, longitude }, |
|||
{ |
|||
zoom: 16.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45, // 设置地图旋转角度 |
|||
} |
|||
); |
|||
|
|||
map.setCenter(latitude, longitude); |
|||
map.setMarker(latitude, longitude); |
|||
}, |
|||
|
|||
handleOk() { |
|||
this.showPersonList = false; |
|||
}, |
|||
|
|||
resetData() { |
|||
this.formData = {}; |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading() { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: "正在加载……", // 加载中需要显示的文字 |
|||
background: "rgba(0,0,0,.7)", // 背景颜色 |
|||
}); |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading() { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close(); |
|||
} |
|||
}, |
|||
}, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
serviceTimeStart: [ |
|||
{ required: true, message: "服务时间不能为空", trigger: "blur" }, |
|||
], |
|||
}; |
|||
}, |
|||
// resiSearchTagNameText(){ |
|||
// let text = "" |
|||
// if(this.resiSearchTagName){ |
|||
// text = this.resiSearchTagName |
|||
// }else { |
|||
// text = '--' |
|||
// } |
|||
// return text |
|||
// }, |
|||
}, |
|||
props: { |
|||
serviceRecordId: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
serviceOrgName: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
|
|||
satisfyArray: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
statusArray: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/detail-main.scss"; |
|||
.info-prop{ |
|||
margin-top: 29px; |
|||
} |
|||
.scroll-h{ |
|||
padding: 0 90px !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,825 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
|
|||
<el-form ref="ref_form" |
|||
:inline="true" |
|||
:model="formData" |
|||
:rules="dataRule" |
|||
class="div_form"> |
|||
|
|||
<el-form-item label="服务名称" |
|||
prop="serviceName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{formData.serviceName}}</span> |
|||
<!-- <el-select class="item_width_1" |
|||
v-model="formData.serviceProjectId" |
|||
placeholder="请选择" |
|||
filterable |
|||
clearable> |
|||
<el-option v-for="(item,index) in projectList" |
|||
@click.native="hancleClickProject(index)" |
|||
:key="item.serviceProjectId" |
|||
:label="item.serviceName" |
|||
:value="item.serviceProjectId"> |
|||
</el-option> |
|||
</el-select> --> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="服务组织" |
|||
prop="serviceOrgId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{serviceOrgName}}</span> |
|||
<!-- <el-select class="item_width_1" |
|||
v-model="formData.serviceOrgId" |
|||
placeholder="请选择" |
|||
filterable |
|||
clearable> |
|||
<el-option v-for="item in orgList" |
|||
:key="item.icServiceOrgId" |
|||
:label="item.orgName" |
|||
:value="item.icServiceOrgId"> |
|||
</el-option> |
|||
</el-select> --> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务范围" |
|||
prop="gridIdList" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<div v-for="item in formData.gridIdList" |
|||
:key="item.objectId"> |
|||
<div>{{item.objectName}}</div> |
|||
</div> |
|||
<!-- <el-cascader class="item_width_1" |
|||
ref="myCascader" |
|||
v-model="scopeIdArray" |
|||
:key="iscascaderShow" |
|||
:options="casOptions" |
|||
:props="optionProps" |
|||
:show-all-levels="false" |
|||
@change="handleChangeScope"></el-cascader> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="政策依据" |
|||
prop="policyId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-select :disabled="formType==='detail'" |
|||
v-model="formData.policyId" |
|||
class="input-width-small" |
|||
placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in policyList" |
|||
:key="item.policyId" |
|||
:label="item.title" |
|||
:value="item.policyId"> |
|||
</el-option> |
|||
</el-select> |
|||
<!-- |
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handlePersonList">预览</el-button> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="经办人" |
|||
prop="principalName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input :disabled="formType==='detail'" |
|||
class="item_width_1" |
|||
placeholder="请输入经办人姓名" |
|||
v-model="formData.principalName"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="联系方式" |
|||
prop="principalContact" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input :disabled="formType==='detail'" |
|||
class="item_width_1" |
|||
placeholder="请输入联系方式" |
|||
v-model="formData.principalContact"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="指派服务" label-width="150px"> |
|||
<el-switch v-model="assignSwitch"> </el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item |
|||
label="查找享受服务人员" |
|||
prop="principalContact" |
|||
label-width="150px" |
|||
style="display: block" |
|||
v-show="this.assignSwitch" |
|||
> |
|||
<input type="text" v-model="formData.resiSearchTagId" v-show="false"> |
|||
<template v-if="this.resiSearchTagName"> |
|||
<el-tag @close="handleCloseTag" closable style="margin-right:10px;"> |
|||
{{this.resiSearchTagName }} |
|||
</el-tag> |
|||
</template> |
|||
|
|||
<el-button type="primary" @click="handleClickLabel" size="mini"> |
|||
<span> <i class="el-icon-plus"></i> 按标签查找 </span> |
|||
</el-button> |
|||
</el-form-item> |
|||
<el-form-item label="服务时间" |
|||
label-width="150px" |
|||
prop="serviceTimeStart" |
|||
style="display: block"> |
|||
<el-date-picker :disabled="formType==='detail'" |
|||
v-model="formData.serviceTimeStart" |
|||
:picker-options="startPickerOptions" |
|||
class="item_width_2" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<span class="u-data-tag">至</span> |
|||
<el-date-picker :disabled="formType==='detail'" |
|||
v-model="formData.serviceTimeEnd" |
|||
:picker-options="endPickerOptions" |
|||
class="item_width_2 u-data-tag" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="结束时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="备注" |
|||
prop="remark" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input :disabled="formType==='detail'" |
|||
class="item_width_1" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
:rows="3" |
|||
placeholder="请输入备注，不超过500字" |
|||
v-model="formData.remark"></el-input> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
<div v-show="formData.serviceStatus==='completed'"> |
|||
<h3 class="d-h3">反馈内容</h3> |
|||
|
|||
<el-form ref="ref_form_feedback" |
|||
:inline="true" |
|||
:disabled="true" |
|||
:model="feedbackFormData" |
|||
class="div_form"> |
|||
|
|||
<el-form-item label="服务目标" |
|||
prop="serviceGoal" |
|||
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="feedbackFormData.serviceGoal"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务效果" |
|||
prop="serviceEffect" |
|||
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="feedbackFormData.serviceEffect"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务人数" |
|||
style="display: block" |
|||
prop="servicePeopleNumber" |
|||
label-width="150px"> |
|||
<el-input-number class="item_width_2" |
|||
v-model="feedbackFormData.servicePeopleNumber" |
|||
:min="0" |
|||
:max="9999" |
|||
label="服务人数"></el-input-number> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务状态" |
|||
label-width="150px" |
|||
style="display: block" |
|||
prop="serviceStatus"> |
|||
<span>已完成</span> |
|||
<!-- <el-select class="item_width_1" |
|||
v-model="feedbackFormData.serviceStatus" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in statusArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> --> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="满意度" |
|||
style="display: block" |
|||
label-width="150px" |
|||
prop="satisfaction"> |
|||
<el-select class="item_width_2" |
|||
v-model="feedbackFormData.satisfaction" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in satisfyArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="地址" |
|||
prop="address" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
v-model="feedbackFormData.address"></el-input> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="地图位置" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<div style="width:500px"> |
|||
|
|||
<div class="div_map"> |
|||
<div id="map_app"> |
|||
|
|||
</div> |
|||
<div class="div_searchmap"> |
|||
<el-input maxlength="50" |
|||
size="mini" |
|||
placeholder="请输入关键字" |
|||
v-model="keyWords"> |
|||
</el-input> |
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="mini" |
|||
@click="handleSearchMap">查询</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</el-form-item> --> |
|||
|
|||
<el-form-item class="block" |
|||
label="附件" |
|||
label-width="150px" |
|||
prop="attach"> |
|||
<!-- <el-upload :headers="$getElUploadHeaders()" v-if="feedbackFormData.fileList&&feedbackFormData.fileList.length>0" |
|||
class="upload-demo" |
|||
:on-preview="handleFileDownload" |
|||
accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3" |
|||
:limit="3" |
|||
:file-list="fileList"> |
|||
|
|||
</el-upload> --> |
|||
<div v-if="feedbackFormData.fileList&&feedbackFormData.fileList.length>0" |
|||
class="attachement-list"> |
|||
<a :href="att.url" |
|||
target="_blank" |
|||
:key="att.url" |
|||
v-for="att in feedbackFormData.fileList"> |
|||
<i class="el-icon-folder-opened"></i> |
|||
{{ att.name }} |
|||
</a> |
|||
</div> |
|||
<span v-else>无附件</span> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="div_btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">取 消</el-button> |
|||
<el-button size="small" |
|||
v-if="formType != 'detail'" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
|
|||
<el-dialog v-if="showPersonList" |
|||
:visible.sync="showPersonList" |
|||
:append-to-body="true" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'标签查找'" |
|||
width="1150px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showPersonList = false"> |
|||
<person-list ref="ref_detail_form" |
|||
:policyId="policyId" |
|||
:ruleList="ruleList" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose"> |
|||
</person-list> |
|||
</el-dialog> |
|||
<el-dialog |
|||
v-if="showLabelForm" |
|||
:visible.sync="showLabelForm" |
|||
:append-to-body="true" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'标签配置'" |
|||
width="900px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showLabelForm = false" |
|||
> |
|||
<label-form |
|||
ref="ref_label_form" |
|||
:policyId="policyId" |
|||
:ruleList="ruleList" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk" |
|||
> |
|||
<!-- @handleOk="handleOk" |
|||
@handleClose="handleClose" --> |
|||
</label-form> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
// import personList from "../policy/oldPersonList.vue"; |
|||
import labelForm from "../labelConfig/addForm.vue"; |
|||
import { nextTick } from 'vue'; |
|||
|
|||
var map |
|||
var search |
|||
var markers |
|||
var infoWindowList |
|||
var geocoder // 新建一个正逆地址解析类 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now() |
|||
if (this.formData.serviceTimeStart) { |
|||
let serviceTimeStart = new Date(this.formData.serviceTimeStart) |
|||
return time.getTime() > nowData || time.getTime() < serviceTimeStart || time.getTime() === serviceTimeStart |
|||
} else { |
|||
return time.getTime() > nowData |
|||
} |
|||
|
|||
} |
|||
let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now() |
|||
return time.getTime() > nowData |
|||
} |
|||
|
|||
return { |
|||
btnDisable: false, |
|||
|
|||
keyWords: '', |
|||
assignSwitch: true, |
|||
formData: { |
|||
}, |
|||
showLabelForm: false, |
|||
resiSearchTagName:'', |
|||
feedbackFormData: { |
|||
serviceProjectId: '',// 服务项目id |
|||
serviceName: '', |
|||
serviceGoal: '',// 服务目标 |
|||
serviceEffect: '',// 服务效果 |
|||
servicePeopleNumber: null,// 服务人数 |
|||
serviceStatus: 'completed',// 服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度。不满意:bad、基本满意:good、非常满意:perfect |
|||
longitude: '',// 经度 |
|||
latitude: '',// 维度 |
|||
address: '', |
|||
fileList: [],// 附件列表 |
|||
}, |
|||
serviceList: [],//服务list |
|||
|
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
policyList: [], |
|||
projectList: [], |
|||
fileList: [], |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile', |
|||
|
|||
policyId: '', |
|||
showPersonList: false, |
|||
ruleList: [] |
|||
} |
|||
}, |
|||
components: { labelForm}, |
|||
mounted () { |
|||
this.getPolicyList() |
|||
if (this.serviceRecordId) {//详情 |
|||
this.loadInfo() |
|||
} |
|||
// this.initMap() |
|||
|
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
//加载组织数据 |
|||
async handlePersonList () { |
|||
if (!this.formData.policyId) { |
|||
this.$message.info('请先选择政策') |
|||
return false |
|||
} |
|||
|
|||
this.policyId = this.formData.policyId |
|||
await this.loadRuleList() |
|||
|
|||
this.showPersonList = true; |
|||
}, |
|||
|
|||
async loadRuleList () { |
|||
|
|||
const url = "/governance/policy/rulelist/" + this.policyId |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.ruleList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleClose () { |
|||
this.showPersonList = false |
|||
|
|||
|
|||
}, |
|||
handleOk () { |
|||
this.showPersonList = false |
|||
|
|||
|
|||
}, |
|||
handleClickLabel() { |
|||
this.showLabelForm = true; |
|||
this.$nextTick(() => { |
|||
this.$refs["ref_label_form"].initForm("info"); |
|||
}); |
|||
}, |
|||
async getPolicyList () { |
|||
const url = '/governance/policy/policyList' |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.policyList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
//加载组织 |
|||
async loadInfo () { |
|||
const url = '/governance/icServiceSkillRecord/detail' |
|||
|
|||
let params = { |
|||
serviceRecordId: this.serviceRecordId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.formData = { ...data } |
|||
this.formData.serviceRecordId = this.serviceRecordId |
|||
this.feedbackFormData = { ...data.feedback } |
|||
await this.getTagName() |
|||
this.fileList = [] |
|||
if (data.feedback && data.feedback.fileList && data.feedback.fileList.length > 0) { |
|||
data.feedback.fileList.forEach(element => { |
|||
let obj = { |
|||
name: element.name, |
|||
format: element.format, |
|||
url: element.url, |
|||
} |
|||
this.fileList.push(obj) |
|||
}); |
|||
} |
|||
|
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async getTagName() { |
|||
const url = "/governance/resiSearchTag/listResiSearchTags"; |
|||
let params = { |
|||
pageSize: 99, |
|||
}; |
|||
let { data, msg, code } = await requestPost(url, params); |
|||
if (code == 0) { |
|||
let showAddProduct = data.list.filter(item=>{ |
|||
return [this.formData.resiSearchTagId].includes(item.tagId) |
|||
}) |
|||
this.resiSearchTagName = showAddProduct[0].tagName |
|||
this.assignSwitch = true |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
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.editFuwu() |
|||
} |
|||
|
|||
}) |
|||
|
|||
|
|||
}, |
|||
async editFuwu () { |
|||
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //联系电话 |
|||
if (this.formData.principalContact && regPhone.test(this.formData.principalContact) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的联系电话' |
|||
}) |
|||
return false; |
|||
} |
|||
console.log(this.formData); |
|||
let url = '/governance/icServiceSkillRecord/edit' |
|||
// let url = "http://yapi.elinkservice.cn/mock/245/governance/icServiceProject/service/update" |
|||
|
|||
|
|||
const { data, code, msg } = await requestPost(url, this.formData) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}) |
|||
this.resetData() |
|||
|
|||
this.$emit('handleOk') |
|||
} else { |
|||
this.btnDisable = false |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleCancle () { |
|||
this.resetData() |
|||
this.$emit('handleClose') |
|||
|
|||
}, |
|||
addFormOk(val) { |
|||
this.showLabelForm = false; |
|||
this.formData.resiSearchTagId = val.tagId; |
|||
this.resiSearchTagName = val.tagName; |
|||
}, |
|||
addFormCancle() { |
|||
this.showLabelForm = false; |
|||
}, |
|||
handleCloseTag(){ |
|||
this.resiSearchTagName = '' |
|||
this.formData.resiSearchTagId = '' |
|||
}, |
|||
//下载 |
|||
handleFileDownload (file) { |
|||
|
|||
var a = document.createElement('a'); |
|||
var event = new MouseEvent('click'); |
|||
a.download = file.name; |
|||
console.log(a) |
|||
a.href = file.url; |
|||
a.dispatchEvent(event); |
|||
|
|||
|
|||
}, |
|||
|
|||
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap () { |
|||
// 定义地图中心点坐标 |
|||
var center = new window.TMap.LatLng(36.0722275, 120.38945519) |
|||
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
|||
map = new window.TMap.Map(document.getElementById('app'), { |
|||
center: center, // 设置地图中心点坐标 |
|||
zoom: 17.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45 // 设置地图旋转角度 |
|||
}) |
|||
|
|||
search = new window.TMap.service.Search({ pageSize: 10 }) |
|||
// 新建一个地点搜索类 |
|||
markers = new TMap.MultiMarker({ |
|||
map: map, |
|||
geometries: [] |
|||
}) |
|||
infoWindowList = Array(10) |
|||
|
|||
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 |
|||
|
|||
// 监听地图平移结束 |
|||
map.on('panend', () => { |
|||
this.handleMoveCenter() |
|||
}) |
|||
this.handleMoveCenter() |
|||
this.convert() |
|||
}, |
|||
|
|||
setMarker (lat, lng) { |
|||
markers.setGeometries([]) |
|||
markers.add([ |
|||
{ |
|||
id: '4', |
|||
styleId: 'marker', |
|||
position: new TMap.LatLng(lat, lng), |
|||
properties: { |
|||
title: 'marker4' |
|||
} |
|||
} |
|||
]) |
|||
}, |
|||
|
|||
handleSearchMap () { |
|||
infoWindowList.forEach((infoWindow) => { |
|||
infoWindow.close() |
|||
}) |
|||
infoWindowList.length = 0 |
|||
markers.setGeometries([]) |
|||
// 在地图显示范围内以给定的关键字搜索地点 |
|||
search |
|||
.searchNearby({ |
|||
keyword: this.keyWords, |
|||
radius: 1000, |
|||
autoExtend: true, |
|||
center: map.getCenter(), |
|||
}) |
|||
.then((result) => { |
|||
let { data } = result |
|||
if (Array.isArray(data) && data.length > 0) { |
|||
const { |
|||
location: { lat, lng } |
|||
} = data[0] |
|||
|
|||
|
|||
map.setCenter(new TMap.LatLng(lat, lng)) |
|||
this.setMarker(lat, lng) |
|||
this.formData.latitude = lat |
|||
this.formData.longitude = lng |
|||
this.convert() |
|||
} else { |
|||
this.$message.error('未检索到相关位置坐标') |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
handleMoveCenter () { |
|||
//修改地图中心点 |
|||
const center = map.getCenter() |
|||
const lat = center.getLat() |
|||
const lng = center.getLng() |
|||
this.formData.latitude = lat |
|||
this.formData.longitude = lng |
|||
this.setMarker(lat, lng) |
|||
this.convert(lat, lng) |
|||
}, |
|||
|
|||
convert (lat, lng) { |
|||
markers.setGeometries([]); |
|||
// var input = document.getElementById('location').value.split(','); |
|||
let location |
|||
if (lat && lng) { |
|||
location = new TMap.LatLng(lat, lng); |
|||
} else { |
|||
location = new TMap.LatLng(this.formData.latitude, this.formData.longitude); |
|||
} |
|||
|
|||
// map.setCenter(location); |
|||
markers.updateGeometries([ |
|||
{ |
|||
id: 'main', // 点标注数据数组 |
|||
position: location, |
|||
}, |
|||
]); |
|||
geocoder |
|||
.getAddress({ location: location }) // 将给定的坐标位置转换为地址 |
|||
.then((result) => { |
|||
this.formData.address = result.result.address |
|||
// 显示搜索到的地址 |
|||
}); |
|||
}, |
|||
|
|||
|
|||
resetData () { |
|||
this.formData = {} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
|
|||
|
|||
serviceTimeStart: [ |
|||
{ required: true, message: '服务时间不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
|
|||
} |
|||
}, |
|||
}, |
|||
props: { |
|||
|
|||
serviceRecordId: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
serviceOrgName: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
formType: {//表单操作类型 add新增，edit编辑，detail详情,feedback反馈 |
|||
type: String, |
|||
required: true |
|||
}, |
|||
|
|||
satisfyArray: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/form-main.scss"; |
|||
|
|||
.attachement-list { |
|||
// padding-left: 20px; |
|||
a { |
|||
display: block; |
|||
cursor: pointer; |
|||
// color: #4df0ff; |
|||
font-size: 14px; |
|||
|
|||
i { |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,856 @@ |
|||
<template> |
|||
<div class="g-main"> |
|||
<div> |
|||
<div class="m-search"> |
|||
<el-form :inline="true" |
|||
:model="formData" |
|||
ref="ref_searchform" |
|||
:label-width="'100px'"> |
|||
<el-form-item prop="serviceType" |
|||
label="服务类别" |
|||
> |
|||
<el-select class="u-item-width-daterange" |
|||
v-model.trim="formData.serviceTypeLevel1Id" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in serviceTypesLevel1" |
|||
@click.native="handleChangeServiceTypeLevel1" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="serviceType"> |
|||
<el-select class="u-item-width-daterange" |
|||
v-model.trim="formData.serviceTypeLevel2Id" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in serviceTypesLevel2" |
|||
@click.native="" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务时间" |
|||
prop="serviceTimeStart"> |
|||
<el-date-picker v-model="formData.serviceTimeStart" |
|||
:picker-options="startPickerOptions" |
|||
class="u-item-width-daterange" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<span class="u-data-tag">至</span> |
|||
<el-date-picker v-model="formData.serviceTimeEnd" |
|||
:picker-options="endPickerOptions" |
|||
class="u-item-width-daterange u-data-tag" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="结束时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="服务事项" |
|||
prop="serviceName"> |
|||
<el-input v-model="formData.serviceName" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务组织" |
|||
prop="serviceOrgType"> |
|||
<el-select v-model="formData.serviceOrgType" |
|||
class="u-item-width-daterange" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable |
|||
@change="handleServiceChange('add', $event)"> |
|||
<el-option v-for="item in serviceOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="formData.serviceOrgId" |
|||
class="u-item-width-daterange u-data-tag" |
|||
filterable |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in serviceOptiondList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
|
|||
<el-form-item label="服务状态" |
|||
prop="serviceStatus"> |
|||
<el-select class="u-item-width-normal" |
|||
v-model="formData.serviceStatus" |
|||
placeholder="全部" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in statusArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="满意度" |
|||
prop="satisfaction"> |
|||
<el-select class="u-item-width-normal" |
|||
v-model="formData.satisfaction" |
|||
placeholder="全部" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in satisfyArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
<el-row type="flex" > |
|||
<el-col :span="24" align="right"> |
|||
<el-button style="margin-left:30px" |
|||
size="small" |
|||
type="primary " |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" |
|||
is-plain |
|||
class="diy-button--white el-button--default" |
|||
size="small" |
|||
@click="resetSearch">重置</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="m-table"> |
|||
<div class="div_btn"> |
|||
<div class="div_btn_left"> |
|||
<el-button |
|||
size="small" |
|||
@click="handleAdd" |
|||
type="primary" |
|||
icon="el-icon-plus" |
|||
style="margin-right:10px" |
|||
>新增</el-button> |
|||
</div> |
|||
<el-button @click="handleExport" |
|||
type="primary" |
|||
size="small" |
|||
class="diy-button--white el-button--default" |
|||
>导出</el-button> |
|||
<el-button type="primary" @click="onDeleteBatch" size="small"> |
|||
批量删除 |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-table :data="tableData" |
|||
border |
|||
v-loading="tableLoading" |
|||
class="m-table-item" |
|||
style="width: 100%" |
|||
:height="maxTableHeight" |
|||
@select-all="onMultiSelect" |
|||
@selection-change="onMultiSelect"> |
|||
|
|||
<el-table-column |
|||
type="selection" |
|||
fixed="left" |
|||
align="center" |
|||
width="50"/> |
|||
|
|||
<el-table-column label="序号" |
|||
fixed="left" |
|||
type="index" |
|||
align="center" |
|||
width="50" /> |
|||
|
|||
<el-table-column prop="serviceTypeName" |
|||
label="服务类型" |
|||
align="center" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="serviceName" |
|||
align="center" |
|||
min-width="150" |
|||
label="服务事项" |
|||
:show-overflow-tooltip="true"> |
|||
|
|||
</el-table-column> |
|||
<el-table-column prop="sourceName" |
|||
align="center" |
|||
min-width="150" |
|||
label="来自" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
<el-table-column prop="serviceTimeStart" |
|||
align="center" |
|||
width="300" |
|||
:show-overflow-tooltip="true" |
|||
label="服务时间"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<span>{{scope.row.serviceTimeStart}}至{{scope.row.serviceTimeEnd}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="serviceOrgName" |
|||
align="center" |
|||
min-width="150" |
|||
label="服务方" |
|||
:show-overflow-tooltip="true"> |
|||
|
|||
</el-table-column> |
|||
<el-table-column prop="serviceStatus" |
|||
align="center" |
|||
width="100" |
|||
label="服务状态" |
|||
:show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<span>{{scope.row.serviceStatus==='in_service'?'进行中':'已完成'}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="servedPersonQty" |
|||
align="center" |
|||
width="110" |
|||
label="服务人数" |
|||
:show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handlePersonList(scope.row)" type="text" size="small"> |
|||
{{ scope.row.servedPersonQty }} |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column fixed="right" |
|||
label="操作" |
|||
align="center" |
|||
width="220"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handleDetail(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>查看</el-button> |
|||
<el-button |
|||
@click="handleEdit(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>编辑</el-button> |
|||
<!-- 临时去掉人员名单与反馈 --> |
|||
<el-button v-if="scope.row.serviceStatus==='in_service'" |
|||
@click="handleFeedback(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>反馈</el-button> |
|||
<!-- <el-button v-if="scope.row.policyId" |
|||
@click="handlePersonList(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>人员名单</el-button> --> |
|||
|
|||
<!-- 暂时不限制删除按钮，任何状态都允许删除，产品要求的 --> |
|||
<!-- v-if="scope.row.serviceStatus==='in_service'" --> |
|||
<el-button |
|||
@click="handleDel(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>删除</el-button> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<div> |
|||
|
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
<el-dialog v-if="showAdd" |
|||
:visible.sync="showAdd" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="addDiaTitle" |
|||
:modal-append-to-body="false" |
|||
width="720px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showAdd = false"> |
|||
<add-form ref="ref_add_form" |
|||
:formType="formType" |
|||
:statusArray="statusArray" |
|||
:satisfyArray="satisfyArray" |
|||
:serviceRecordId="serviceRecordId" |
|||
:serviceName="serviceName" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose"></add-form> |
|||
</el-dialog> |
|||
<!-- 编辑与新增写在一个组件中 --> |
|||
<!-- <el-dialog v-if="showEdit" |
|||
:visible.sync="showEdit" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'编辑'" |
|||
:modal-append-to-body="false" |
|||
width="850px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showEdit = false"> |
|||
<edit-form ref="ref_edit_form" |
|||
:serviceRecordId="serviceRecordId" |
|||
:serviceOrgName="serviceOrgName" |
|||
:satisfyArray="satisfyArray" |
|||
:statusArray="statusArray" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose" |
|||
:formType="formType"> |
|||
</edit-form> |
|||
</el-dialog> --> |
|||
<el-dialog v-if="showDetail" |
|||
:visible.sync="showDetail" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="detailDiaTitle" |
|||
:modal-append-to-body="false" |
|||
width="850px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaDetailClose"> |
|||
<detail-form ref="ref_detail_form" |
|||
:serviceRecordId="serviceRecordId" |
|||
:serviceOrgName="serviceOrgName" |
|||
:satisfyArray="satisfyArray" |
|||
:statusArray="statusArray" |
|||
@diaDetailClose="diaDetailClose"> |
|||
</detail-form> |
|||
</el-dialog> |
|||
<el-dialog v-if="showPersonList" |
|||
:visible.sync="showPersonList" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'人员名单'" |
|||
width="1150px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showPersonList = false"> |
|||
<person-list ref="ref_person_list" |
|||
:serviceId="commonServiceId" |
|||
:tagId="tagId"> |
|||
</person-list> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { mapGetters } from "vuex"; |
|||
// import eventInfo from "./cpts/event-info"; |
|||
import axios from "axios"; |
|||
import addForm from "./addForm"; |
|||
import detailForm from "./detailForm.vue"; |
|||
import editForm from "./editForm"; |
|||
import feedBackForm from "./addForm"; |
|||
import personList from "./personList"; |
|||
// 其他组件其他页面有调用 |
|||
export default { |
|||
components: { addForm, detailForm, feedBackForm, editForm, personList }, |
|||
|
|||
|
|||
data () { |
|||
let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now() |
|||
|
|||
if (this.formData.serviceTimeStart) { |
|||
let serviceTimeStart = new Date(this.formData.serviceTimeStart) |
|||
return time.getTime() > nowData || time.getTime() < serviceTimeStart || time.getTime() === serviceTimeStart |
|||
} else { |
|||
return time.getTime() > nowData |
|||
} |
|||
|
|||
} |
|||
let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now() |
|||
return time.getTime() > nowData |
|||
} |
|||
|
|||
return { |
|||
// 公共服务分类 |
|||
serviceTypesLevel1:[], |
|||
serviceTypesLevel2:[], |
|||
tableLoading: false, |
|||
user: {}, |
|||
agencyId: '', |
|||
searchH:0, |
|||
tableData: [], |
|||
|
|||
statusArray: [ |
|||
{ |
|||
value: "in_service", |
|||
label: "进行中", |
|||
}, |
|||
{ |
|||
value: "completed", |
|||
label: "已完成", |
|||
}, |
|||
], |
|||
satisfyArray: [ |
|||
{ |
|||
value: "bad", |
|||
label: "不满意", |
|||
}, |
|||
{ |
|||
value: "good", |
|||
label: "基本满意", |
|||
}, |
|||
{ |
|||
value: "perfect", |
|||
label: "非常满意", |
|||
}, |
|||
|
|||
], |
|||
|
|||
formData: { |
|||
serviceTypeLevel1Id:'',// 公共服务（政策级别）一级分类id |
|||
serviceTypeLevel2Id:'',// 公共服务（政策级别）二级分类id |
|||
serviceName: '',//项目名称 |
|||
serviceOrgType: '',//服务组织类型 |
|||
serviceOrgId: '',//服务组织Id |
|||
serviceTimeStart: '',//服务开始时间yyyy-MM-dd |
|||
serviceTimeEnd: '',//服务结束时间yyyy-MM-dd |
|||
serviceStatus: '',//服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度.不满意:bad、基本满意:good、非常满意:perfect |
|||
|
|||
}, |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem("pageSize") || 20, |
|||
total: 1, |
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
serviceRecordId: '', |
|||
serviceName: '', |
|||
serviceOrgName: '', |
|||
|
|||
showAdd: false, |
|||
showEdit: false, |
|||
showDetail: false, |
|||
showFeedback: false, |
|||
formType: 'add', |
|||
addDiaTitle: '指派服务', |
|||
detailDiaTitle: '服务详情', |
|||
|
|||
serviceOptions: [], |
|||
serviceOptiondList: [], |
|||
|
|||
commonServiceId: null, |
|||
tagId: null, |
|||
showPersonList: false, |
|||
ruleList: [], |
|||
|
|||
// 多选行 |
|||
multiSelectedRows: [] |
|||
}; |
|||
}, |
|||
computed: { |
|||
maxTableHeight () { |
|||
const h = |
|||
this.clientHeight - this.searchH - 450 + this.iframeHeight; |
|||
const _h = this.clientHeight - 450 - this.searchH; |
|||
return this.$store.state.inIframe ? h : _h; |
|||
}, |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
}, |
|||
watch: { |
|||
// "formData.serviceTimeEnd": function (val) { |
|||
// if (val && val != '') { |
|||
// let arrayTemp = val.split(' ') |
|||
// this.formData.serviceTimeEnd = arrayTemp[0] + ' 23:59:59' |
|||
// } |
|||
|
|||
// }, |
|||
}, |
|||
mounted () { |
|||
console.log(this.$store.state) |
|||
this.user = this.$store.state.user |
|||
this.agencyId = this.user.agencyId |
|||
this.getDictOptions() |
|||
this.getTableData(); |
|||
}, |
|||
methods: { |
|||
|
|||
// 服务类型下拉框选中事件 |
|||
handleChangeServiceTypeLevel1() { |
|||
this.formData.serviceTypeLevel2Id = '' |
|||
this.$http |
|||
.get("/governance/commonServiceType/selectList/" + this.formData.serviceTypeLevel1Id) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.serviceTypesLevel2 = res.data; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}) |
|||
}, |
|||
|
|||
handleSearch (val) { |
|||
console.log(this.formData); |
|||
this.pageNo = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 获取服务组织 |
|||
async getDictOptions () { |
|||
const url = "/sys/dict/data/dictlist" |
|||
|
|||
let params = { |
|||
dictType: 'user_demand_service_type' |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.serviceOptions = data; |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
this.$http |
|||
.get("/governance/commonServiceType/selectList/0") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.serviceTypesLevel1 = res.data; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
|
|||
handleServiceChange (type, val) { |
|||
this.formData.serviceOrgId = '' |
|||
if (val === "social_org") { |
|||
if (type === "add") { |
|||
this.getServiceuserList(val, "add_demand"); |
|||
} else { |
|||
this.getServiceuserList(val, "query_demand"); |
|||
} |
|||
} else { |
|||
this.getServiceuserList(val, ""); |
|||
} |
|||
}, |
|||
|
|||
async getServiceuserList (serviceType, query) { |
|||
if (!serviceType) return false; |
|||
|
|||
const params = { |
|||
serviceName: "", |
|||
serviceType: serviceType, |
|||
queryPurpose: query, |
|||
}; |
|||
await this.$http |
|||
.post("/governance/userdemand/servicelist", params) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.serviceOptiondList = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
//加载人员列表数据 |
|||
async handlePersonList (row) { |
|||
this.commonServiceId = row.serviceRecordId; |
|||
this.tagId = row.resiSearchTagId; |
|||
this.showPersonList = true; |
|||
}, |
|||
|
|||
async loadRuleList () { |
|||
|
|||
const url = "/governance/policy/rulelist/" + this.policyId |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.ruleList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
async handleAdd () { |
|||
this.addDiaTitle = '指派服务' |
|||
this.formType = 'add' |
|||
this.showAdd = true; |
|||
}, |
|||
|
|||
async handleDetail (row) { |
|||
this.detailDiaTitle = "服务详情" |
|||
this.serviceRecordId = row.serviceRecordId |
|||
this.serviceOrgName = row.serviceOrgName |
|||
|
|||
// this.formType = 'detail' |
|||
this.showDetail = true |
|||
|
|||
}, |
|||
diaDetailClose () { |
|||
console.log(this.$refs.ref_detail) |
|||
this.$refs.ref_detail_form.diaDestroy() |
|||
this.showDetail = false |
|||
}, |
|||
async handleEdit (row) { |
|||
this.addDiaTitle = "编辑服务" |
|||
this.serviceRecordId = row.serviceRecordId |
|||
this.serviceOrgName = row.serviceOrgName |
|||
this.formType = 'edit' |
|||
this.showAdd = true |
|||
|
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async handleFeedback (row) { |
|||
|
|||
this.serviceRecordId = row.serviceRecordId |
|||
this.serviceName = row.serviceName |
|||
this.addDiaTitle = '服务反馈' |
|||
this.formType = 'feedback' |
|||
this.showAdd = true; |
|||
}, |
|||
|
|||
|
|||
handleClose () { |
|||
this.serviceRecordId = "" |
|||
this.formType = '' |
|||
|
|||
this.showAdd = false |
|||
this.showDetail = false |
|||
this.showEdit = false |
|||
|
|||
|
|||
}, |
|||
handleOk () { |
|||
this.handleClose() |
|||
this.pageNo = 1 |
|||
this.getTableData() |
|||
|
|||
}, |
|||
|
|||
|
|||
async handleDel (row) { |
|||
|
|||
this.serviceRecordId = row.serviceRecordId |
|||
|
|||
this.$confirm("确认删除服务?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.cancelFuwu([row.serviceRecordId]) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
|
|||
}, |
|||
|
|||
async cancelFuwu (serviceRecordIds) { |
|||
|
|||
const url = '/governance/icServiceSkillRecord/searchDeleteBatch'; |
|||
|
|||
const { data, code, msg } = await requestPost(url, serviceRecordIds); |
|||
|
|||
if (code === 0) { |
|||
this.$message.success("取消成功！"); |
|||
this.getTableData(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getTableData () { |
|||
this.tableLoading = true |
|||
const url = "/governance/icServiceSkillRecord/searchList"; |
|||
|
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}); |
|||
|
|||
this.tableLoading = false |
|||
if (code === 0) { |
|||
|
|||
this.total = data.total ; |
|||
this.tableData = data.list |
|||
|
|||
|
|||
|
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async handleExport () { |
|||
//导出改接口-'服务找人' |
|||
const url = "/governance/icServiceSkillRecord/searchExport"; |
|||
const { pageSize, pageNo, formData } = this; |
|||
axios({ |
|||
url: window.SITE_CONFIG["apiURL"] + url, |
|||
method: "post", |
|||
data: { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}, |
|||
responseType: "blob", |
|||
}) |
|||
.then((res) => { |
|||
let fileName = window.decodeURI( |
|||
res.headers["content-disposition"].split(";")[1].split("=")[1] |
|||
); |
|||
console.log("filename", fileName); |
|||
let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); |
|||
var url = window.URL.createObjectURL(blob); |
|||
var aLink = document.createElement("a"); |
|||
aLink.style.display = "none"; |
|||
aLink.href = url; |
|||
aLink.setAttribute("download", fileName); |
|||
document.body.appendChild(aLink); |
|||
aLink.click(); |
|||
document.body.removeChild(aLink); //下载完成移除元素 |
|||
window.URL.revokeObjectURL(url); //释放掉blob对象 |
|||
}) |
|||
.catch((err) => { |
|||
console.log("获取导出情失败", err); |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
|
|||
this.pageSize = val; |
|||
window.localStorage.setItem("pageSize", val); |
|||
this.getTableData(); |
|||
}, |
|||
handleCurrentChange (val) { |
|||
|
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
|
|||
resetSearch () { |
|||
this.formData = { |
|||
serviceTypeLevel1Id:'',// 公共服务（政策级别）一级分类id |
|||
serviceTypeLevel2Id:'',// 公共服务（政策级别）二级分类id |
|||
serviceName: '',//项目名称 |
|||
serviceOrgType: '',//服务组织类型 |
|||
serviceOrgId: '',//服务组织Id |
|||
serviceTimeStart: '',//服务开始时间yyyy-MM-dd |
|||
serviceTimeEnd: '',//服务结束时间yyyy-MM-dd |
|||
serviceStatus: '',//服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度.不满意:bad、基本满意:good、非常满意:perfect |
|||
} |
|||
|
|||
|
|||
this.pageNo = 1 |
|||
this.getTableData() |
|||
}, |
|||
|
|||
// 多选 |
|||
onMultiSelect(row) { |
|||
this.multiSelectedRows = row; |
|||
}, |
|||
|
|||
// 批量删除 |
|||
onDeleteBatch() { |
|||
if (this.multiSelectedRows.length == 0) { |
|||
return; |
|||
} |
|||
|
|||
this.$confirm("删除之后无法恢复，确认删除？", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
let serviceRecordIds = this.multiSelectedRows.map(item => item.serviceRecordId) |
|||
this.cancelFuwu(serviceRecordIds) |
|||
}) |
|||
.catch((err) => { |
|||
if (err == "cancel") { |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
props: { |
|||
|
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/buttonstyle.scss"; |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
</style> |
|||
@ -0,0 +1,486 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<el-form |
|||
:inline="true" |
|||
:model="searchFormData" |
|||
ref="ref_searchform" |
|||
:label-width="'110px'"> |
|||
|
|||
<el-form-item label="所属组织" prop="orgId"> |
|||
<el-cascader |
|||
@change="handleOrgChange" |
|||
:options="orgTree" |
|||
:props="orgOptionProps" |
|||
clearable |
|||
placeholder="请选择组织"></el-cascader> |
|||
</el-form-item> |
|||
<el-form-item label="人员姓名" prop="title"> |
|||
<el-input |
|||
v-model="searchFormData.name" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="手机号" prop="title"> |
|||
<el-input |
|||
v-model="searchFormData.mobile" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="身份证号" prop="title"> |
|||
<el-input |
|||
v-model="searchFormData.idCard" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="享受服务次数" prop="title"> |
|||
<el-input |
|||
v-model="searchFormData.serveTimes" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="家庭住址" prop="title"> |
|||
<el-select v-model="searchFormData.villageId" placeholder="请选择小区" |
|||
@change="handleQuarterSelectorsChange" clearable> |
|||
<el-option |
|||
v-for="item in quartersSelectItems" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="searchFormData.buildId" placeholder="请选择楼栋" |
|||
@change="handleBuildSelectorsChange" clearable> |
|||
<el-option |
|||
v-for="item in buildingSelectItems" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="searchFormData.unitId" placeholder="请选择单元" |
|||
@change="handleUnitSelectorsChange" clearable> |
|||
<el-option |
|||
v-for="item in unitSelectItems" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="searchFormData.homeId" placeholder="请选择房屋" |
|||
@change="handleUnitSelectorsChange" clearable> |
|||
<el-option |
|||
v-for="item in homeSelectItems" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="div_btn"> |
|||
<el-button type="primary" size="small" class="diy-button--blue" @click="handleIncrementServeTimes">标记享受服务人员</el-button> |
|||
<el-button type="primary" size="small" class="diy-button--blue" @click="handleSearch">查询</el-button> |
|||
</div> |
|||
|
|||
<div class="m-table"> |
|||
<!--表格--> |
|||
<el-table |
|||
:data="personList" |
|||
height="250" |
|||
border |
|||
@select-all="handleSelectAll" |
|||
@selection-change="handleTableRowsSelected" |
|||
style="width: 100%"> |
|||
|
|||
<el-table-column |
|||
type="selection" |
|||
width="55"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
prop="agencyName" |
|||
label="所属组织" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="gridName" |
|||
label="所属网格" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="name" |
|||
label="姓名"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="genderDisplay" |
|||
label="性别"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="birthday" |
|||
width="170" |
|||
label="出生日期"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="age" |
|||
label="年龄"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="mobile" |
|||
width="120" |
|||
label="手机号"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="idCard" |
|||
width="180" |
|||
label="身份证号"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="address" |
|||
width="250" |
|||
label="家庭住址"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="serveTimes" |
|||
label="享受服务次数"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!--分页条--> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="searchFormData.pageNo" |
|||
:page-sizes="pageSizes" |
|||
:page-size="searchFormData.pageSize" |
|||
layout="sizes, prev, pager, next, total" |
|||
background |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { requestPost } from '@/js/dai/request' |
|||
import { requestGet } from '@/js/dai/request' |
|||
import { EpmetResultResolver } from '@/js/epmet-result-resolver' |
|||
import nextTick from 'dai-js/tools/nextTick' |
|||
|
|||
export default { |
|||
mounted () { |
|||
this.epmetResultResolver = new EpmetResultResolver(this); |
|||
this.searchFormData.serviceId = this.serviceId; |
|||
this.initOrgTree(); |
|||
this.handleSearch(); |
|||
}, |
|||
data () { |
|||
return { |
|||
// 搜索表单 |
|||
searchFormData: { |
|||
serviceId: null, |
|||
orgId: null, |
|||
orgType: null, |
|||
tagId: null, |
|||
name: null, |
|||
mobile: null, |
|||
idCard: null, |
|||
serveTimes: null, |
|||
villageId: null, |
|||
buildId: null, |
|||
unitId: null, |
|||
homeId: null, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
}, |
|||
|
|||
// 分页参数 |
|||
pageSizes: [10, 20, 50, 100, 200], |
|||
total: 0, // 总页数 |
|||
|
|||
// 小区下拉框选项 |
|||
quartersSelectItems: [], |
|||
buildingSelectItems: [], |
|||
unitSelectItems: [], |
|||
homeSelectItems: [], |
|||
orgTree: [], // 组织树 |
|||
// 组织树选项 |
|||
orgOptionProps: { |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
}, |
|||
|
|||
//表格数据 |
|||
selectedPersonListIds: [], // 选中的名单id列表 |
|||
personList: [], // 找到的人员名单 |
|||
epmetResultResolver: null |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
/** |
|||
* 行选中事件 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleTableRowsSelected(selection) { |
|||
this.selectedPersonListIds = selection.map(e => e.id); |
|||
}, |
|||
|
|||
/** |
|||
* 全选 |
|||
* @param selection |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleSelectAll(selection) { |
|||
this.selectedPersonListIds = selection.map(e => e.id); |
|||
}, |
|||
|
|||
/** |
|||
* 搜索事件 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleSearch () { |
|||
let url = '/actual/base/residentBaseInfo/commonServicePersonList/list' |
|||
this.searchFormData.tagId = this.tagId |
|||
this.searchFormData.serviceId = this.serviceId |
|||
let result = await requestPost(url, this.searchFormData) |
|||
|
|||
this.epmetResultResolver |
|||
.success((data) => { |
|||
this.personList = data.list; |
|||
this.total = data.total; |
|||
}) |
|||
.parse(result); |
|||
}, |
|||
|
|||
/** |
|||
* 标记享受服务人员 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleIncrementServeTimes() { |
|||
let params = { |
|||
recIds: this.selectedPersonListIds |
|||
}; |
|||
|
|||
let url = "/actual/base/residentBaseInfo/commonServicePersonList/incrementServeTimes"; |
|||
|
|||
const rst = await requestPost(url, params); |
|||
|
|||
this.epmetResultResolver.parse(result); |
|||
|
|||
// 重新加载列表 |
|||
this.handleSearch(); |
|||
}, |
|||
|
|||
/** |
|||
* 组织选择触发事件 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async initOrgTree () { |
|||
let url = '/gov/org/customeragency/agencygridtree' |
|||
const { data, code, msg } = await requestPost(url, {}) |
|||
if (code === 0) { |
|||
debugger |
|||
this.orgTree.push(data) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 加载和填充小区下拉框 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleOrgChange (selectedOrgNodes) { |
|||
let selectedLastNode = selectedOrgNodes[selectedOrgNodes.length - 1] |
|||
this.searchFormData.orgId = selectedLastNode |
|||
const { orgId, level } = this.getSelectedOrgIdAndType(selectedLastNode, this.orgTree) |
|||
let url = '/actual/base/communityQuarters/listQuartersOptions' |
|||
let params = {} |
|||
this.searchFormData.orgId = orgId |
|||
if (level === 'grid') { |
|||
params['gridId'] = orgId |
|||
this.searchFormData.orgType = 'grid' |
|||
} else { |
|||
params['agencyId'] = orgId |
|||
this.searchFormData.orgType = 'agency' |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.quartersSelectItems = data.map(e => { |
|||
return { |
|||
label: e.label, |
|||
value: e.value |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 小区选择器change，填充楼栋下拉框 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleQuarterSelectorsChange (quartersId) { |
|||
let url = '/actual/base/communityBuilding/buildingoption' |
|||
let params = { |
|||
quartersId: quartersId, |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.buildingSelectItems = data.map(e => { |
|||
return { |
|||
label: e.label, |
|||
value: e.value |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 楼栋选择器change，填充单元下拉框 |
|||
* @param selectedQuarter |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleBuildSelectorsChange (buildId) { |
|||
let url = '/actual/base/communityBuildingUnit/unitoption' |
|||
let params = { |
|||
buildingId: buildId, |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.unitSelectItems = data.map(e => { |
|||
return { |
|||
label: e.label, |
|||
value: e.value |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 单元下拉框选择器change，填充房屋 |
|||
* @param unitId |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleUnitSelectorsChange (unitId) { |
|||
let url = '/actual/base/communityHouse/houseoption' |
|||
let params = { |
|||
unitId: unitId, |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.homeSelectItems = data.map(e => { |
|||
return { |
|||
label: e.label, |
|||
value: e.value, |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 递归搜索组织树，选出选中的节点 |
|||
* @param orgId |
|||
* @param orgList |
|||
* @returns {*} |
|||
*/ |
|||
getSelectedOrgIdAndType (orgId, orgList) { |
|||
for (let org of orgList) { |
|||
if (org.agencyId === orgId) { |
|||
return { orgId: org.agencyId, level: org.level } |
|||
} |
|||
|
|||
if (org.subAgencyList && org.subAgencyList.length > 0) { |
|||
let selectedOrg = this.getSelectedOrgIdAndType(orgId, org.subAgencyList) |
|||
if (selectedOrg) { |
|||
return selectedOrg |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 条数改变 |
|||
handleSizeChange (newPageSize) { |
|||
this.searchFormData.pageSize = newPageSize |
|||
this.handleSearch() |
|||
}, |
|||
|
|||
// 翻页 |
|||
handleCurrentChange (pageNo) { |
|||
this.searchFormData.pageNo = pageNo |
|||
this.handleSearch() |
|||
} |
|||
}, |
|||
props: { |
|||
serviceId: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
tagId: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
serviceId: { |
|||
type: String, |
|||
required: true, |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/form-main.scss"; |
|||
|
|||
.btn-add-rule { |
|||
margin-left: 150px; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.item_width_short { |
|||
width: 380px; |
|||
} |
|||
|
|||
.item_rule { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.item_label { |
|||
flex: 0 0 150px; |
|||
line-height: 30px; |
|||
text-align: right; |
|||
padding-right: 12px; |
|||
} |
|||
|
|||
.item_label:before { |
|||
content: "*"; |
|||
color: #f56c6c; |
|||
margin-right: 4px; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,399 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<div v-if="initLoading" class="m-row"> |
|||
<div class="m-info"> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务名称：</span> |
|||
<span>{{ formData.serviceName || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务组织：</span> |
|||
<span>{{ serviceOrgName || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务范围：</span> |
|||
<span>{{ formData.gridIdListName || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">政策依据：</span> |
|||
<span>{{ formData.policyTitle || "--" }}</span> |
|||
<!-- <el-button |
|||
v-if="formData.policyId" |
|||
style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handlePersonList" |
|||
>预览</el-button |
|||
> --> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">经办人：</span> |
|||
<span>{{ formData.principalName || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">联系方式：</span> |
|||
<span>{{ formData.principalContact || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务时间：</span> |
|||
<span>{{ formData.serviceTimeStart || "--" }}</span |
|||
>至 |
|||
<span>{{ formData.serviceTimeEnd || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">享受服务人员: </span> |
|||
<span>{{ resiSearchTagName }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">备注：</span> |
|||
<span>{{ formData.remark || "--" }}</span> |
|||
</div> |
|||
|
|||
<div v-show="formData.serviceStatus === 'completed'"> |
|||
<h3 class="d-h3">反馈内容</h3> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">备注：</span> |
|||
<span>{{ feedbackFormData.serviceGoal || "--" }}</span> |
|||
</div> |
|||
<!-- <div class="info-prop"> |
|||
<span class="info-title-2">服务效果：</span> |
|||
<span>{{ feedbackFormData.serviceEffect || "--" }}</span> |
|||
</div> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务人数：</span> |
|||
<span>{{ feedbackFormData.servicePeopleNumber || 0 }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">服务状态：</span> |
|||
<span>{{ feedbackFormData.serviceStatusShow || "--" }}</span> |
|||
</div> --> |
|||
<div class="info-prop"> |
|||
<span class="info-title-2">满意度：</span> |
|||
<span>{{ feedbackFormData.satisfactionShow || "--" }}</span> |
|||
</div> |
|||
|
|||
<!-- <div class="info-prop"> |
|||
<span class="info-title-2">地理位置：</span> |
|||
<span>{{ feedbackFormData.address || "--" }}</span> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">地图位置：</span> |
|||
<div class="div_map"> |
|||
<div id="app_detail"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="info-prop"> |
|||
<span class="info-title-2">附件：</span> |
|||
<file-list |
|||
v-if="fileList.length > 0" |
|||
:fileList="fileList" |
|||
></file-list> |
|||
<span v-else>--</span> |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="div-btn"> |
|||
</div> |
|||
<el-row type="flex" justify="right"> |
|||
<el-col :span="24" align="right"> |
|||
<el-button size="small" @click="handleCancle" style="margin-right:16px;">关 闭</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<el-dialog |
|||
v-if="showPersonList" |
|||
:visible.sync="showPersonList" |
|||
:append-to-body="true" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'政策预览'" |
|||
width="1150px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showPersonList = false" |
|||
> |
|||
<person-list |
|||
ref="ref_detail_form" |
|||
:policyId="policyId" |
|||
:ruleList="ruleList" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose" |
|||
> |
|||
</person-list> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from "vuex"; |
|||
import { Loading } from "element-ui"; // 引入Loading服务 |
|||
import { requestPost } from "@/js/dai/request"; |
|||
// import personList from "../policy/oldPersonList.vue"; |
|||
import fileList from "@/views/components/fileList"; |
|||
import daiMap from "@/utils/dai-map"; |
|||
|
|||
var map; |
|||
let loading; // 加载动画 |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
initLoading: false, |
|||
|
|||
keyWords: "", |
|||
formData: {}, |
|||
resiSearchTagName:"", |
|||
feedbackFormData: { |
|||
serviceProjectId: "", // 服务项目id |
|||
serviceName: "", |
|||
serviceGoal: "", // 服务目标 |
|||
serviceEffect: "", // 服务效果 |
|||
servicePeopleNumber: null, // 服务人数 |
|||
serviceStatus: "completed", // 服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: "", //满意度。不满意:bad、基本满意:good、非常满意:perfect |
|||
longitude: "", // 经度 |
|||
latitude: "", // 维度 |
|||
address: "", |
|||
fileList: [], // 附件列表 |
|||
}, |
|||
|
|||
policyId: "", |
|||
showPersonList: false, |
|||
ruleList: [], |
|||
policyList: [], |
|||
}; |
|||
}, |
|||
components: { fileList }, |
|||
async mounted() { |
|||
// if (this.serviceRecordId) {//详情 |
|||
await this.loadInfo(); |
|||
this.initLoading = true; |
|||
|
|||
if ( |
|||
this.formData.serviceStatus === "completed" && |
|||
this.feedbackFormData.latitude |
|||
) { |
|||
this.$nextTick(() => { |
|||
this.initMap(); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
diaDestroy() {}, |
|||
|
|||
//加载组织数据 |
|||
async handlePersonList() { |
|||
if (!this.formData.policyId) { |
|||
this.$message.info("请先选择政策"); |
|||
return false; |
|||
} |
|||
|
|||
this.policyId = this.formData.policyId; |
|||
await this.loadRuleList(); |
|||
|
|||
this.showPersonList = true; |
|||
}, |
|||
|
|||
async loadRuleList() { |
|||
const url = "/governance/policy/rulelist/" + this.policyId; |
|||
|
|||
let params = {}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.ruleList = data; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
handleClose() { |
|||
this.showPersonList = false; |
|||
}, |
|||
|
|||
//加载组织 |
|||
async loadInfo() { |
|||
const url = "/governance/icServiceWarmRecord/detail"; |
|||
|
|||
let params = { |
|||
serviceRecordId: this.serviceRecordId, |
|||
}; |
|||
|
|||
const { data, code, msg } = await requestPost(url, params); |
|||
|
|||
if (code === 0) { |
|||
this.formData = { ...data }; |
|||
this.formData.serviceRecordId = this.serviceRecordId; |
|||
this.feedbackFormData = { ...data.feedback }; |
|||
this.formData.gridIdListName = ""; |
|||
this.feedbackFormData.serviceStatusShow = ""; |
|||
this.feedbackFormData.satisfactionShow = ""; |
|||
await this.getTagName() |
|||
let arr = []; |
|||
this.formData.gridIdList.forEach((element) => { |
|||
arr.push(element.objectName); |
|||
}); |
|||
this.formData.gridIdListName = arr.join(","); |
|||
this.statusArray.forEach((element) => { |
|||
if (this.formData.serviceStatus === element.value) { |
|||
this.feedbackFormData.serviceStatusShow = element.label; |
|||
} |
|||
}); |
|||
this.satisfyArray.forEach((element) => { |
|||
if (this.feedbackFormData.satisfaction === element.value) { |
|||
this.feedbackFormData.satisfactionShow = element.label; |
|||
} |
|||
}); |
|||
|
|||
this.fileList = []; |
|||
if ( |
|||
data.feedback && |
|||
data.feedback.fileList && |
|||
data.feedback.fileList.length > 0 |
|||
) { |
|||
data.feedback.fileList.forEach((element) => { |
|||
let obj = { |
|||
name: element.name, |
|||
format: element.format, |
|||
url: element.url, |
|||
type: element.type, |
|||
}; |
|||
this.fileList.push(obj); |
|||
}); |
|||
} |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getTagName() { |
|||
const url = "/governance/resiSearchTag/listResiSearchTags"; |
|||
let params = { |
|||
pageSize: 99, |
|||
}; |
|||
let { data, msg, code } = await requestPost(url, params); |
|||
if (code == 0) { |
|||
let showAddProduct = data.list.filter(item=>{ |
|||
return [this.formData.resiSearchTagId].includes(item.tagId) |
|||
}) |
|||
if(this.formData.resiSearchTagId){ |
|||
this.resiSearchTagName = showAddProduct[0].tagName |
|||
}else{ |
|||
this.resiSearchTagName = '--' |
|||
} |
|||
|
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
handleCancle() { |
|||
this.resetData(); |
|||
this.$emit("diaDetailClose"); |
|||
}, |
|||
|
|||
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap() { |
|||
let { latitude, longitude } = this.feedbackFormData; |
|||
|
|||
map = new daiMap( |
|||
document.getElementById("app_detail"), |
|||
{ latitude, longitude }, |
|||
{ |
|||
zoom: 16.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45, // 设置地图旋转角度 |
|||
} |
|||
); |
|||
|
|||
map.setCenter(latitude, longitude); |
|||
map.setMarker(latitude, longitude); |
|||
}, |
|||
|
|||
handleOk() { |
|||
this.showPersonList = false; |
|||
}, |
|||
|
|||
resetData() { |
|||
this.formData = {}; |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading() { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: "正在加载……", // 加载中需要显示的文字 |
|||
background: "rgba(0,0,0,.7)", // 背景颜色 |
|||
}); |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading() { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close(); |
|||
} |
|||
}, |
|||
}, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
serviceTimeStart: [ |
|||
{ required: true, message: "服务时间不能为空", trigger: "blur" }, |
|||
], |
|||
}; |
|||
}, |
|||
// resiSearchTagNameText(){ |
|||
// let text = "" |
|||
// if(this.resiSearchTagName){ |
|||
// text = this.resiSearchTagName |
|||
// }else { |
|||
// text = '--' |
|||
// } |
|||
// return text |
|||
// }, |
|||
}, |
|||
props: { |
|||
serviceRecordId: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
serviceOrgName: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
|
|||
satisfyArray: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
statusArray: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/detail-main.scss"; |
|||
.info-prop{ |
|||
margin-top: 29px; |
|||
} |
|||
.scroll-h{ |
|||
padding: 0 90px !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,825 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
|
|||
<el-form ref="ref_form" |
|||
:inline="true" |
|||
:model="formData" |
|||
:rules="dataRule" |
|||
class="div_form"> |
|||
|
|||
<el-form-item label="服务名称" |
|||
prop="serviceName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{formData.serviceName}}</span> |
|||
<!-- <el-select class="item_width_1" |
|||
v-model="formData.serviceProjectId" |
|||
placeholder="请选择" |
|||
filterable |
|||
clearable> |
|||
<el-option v-for="(item,index) in projectList" |
|||
@click.native="hancleClickProject(index)" |
|||
:key="item.serviceProjectId" |
|||
:label="item.serviceName" |
|||
:value="item.serviceProjectId"> |
|||
</el-option> |
|||
</el-select> --> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="服务组织" |
|||
prop="serviceOrgId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{serviceOrgName}}</span> |
|||
<!-- <el-select class="item_width_1" |
|||
v-model="formData.serviceOrgId" |
|||
placeholder="请选择" |
|||
filterable |
|||
clearable> |
|||
<el-option v-for="item in orgList" |
|||
:key="item.icServiceOrgId" |
|||
:label="item.orgName" |
|||
:value="item.icServiceOrgId"> |
|||
</el-option> |
|||
</el-select> --> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务范围" |
|||
prop="gridIdList" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<div v-for="item in formData.gridIdList" |
|||
:key="item.objectId"> |
|||
<div>{{item.objectName}}</div> |
|||
</div> |
|||
<!-- <el-cascader class="item_width_1" |
|||
ref="myCascader" |
|||
v-model="scopeIdArray" |
|||
:key="iscascaderShow" |
|||
:options="casOptions" |
|||
:props="optionProps" |
|||
:show-all-levels="false" |
|||
@change="handleChangeScope"></el-cascader> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="政策依据" |
|||
prop="policyId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-select :disabled="formType==='detail'" |
|||
v-model="formData.policyId" |
|||
class="input-width-small" |
|||
placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in policyList" |
|||
:key="item.policyId" |
|||
:label="item.title" |
|||
:value="item.policyId"> |
|||
</el-option> |
|||
</el-select> |
|||
<!-- |
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="small" |
|||
@click="handlePersonList">预览</el-button> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="经办人" |
|||
prop="principalName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input :disabled="formType==='detail'" |
|||
class="item_width_1" |
|||
placeholder="请输入经办人姓名" |
|||
v-model="formData.principalName"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="联系方式" |
|||
prop="principalContact" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input :disabled="formType==='detail'" |
|||
class="item_width_1" |
|||
placeholder="请输入联系方式" |
|||
v-model="formData.principalContact"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="指派服务" label-width="150px"> |
|||
<el-switch v-model="assignSwitch"> </el-switch> |
|||
</el-form-item> |
|||
|
|||
<el-form-item |
|||
label="查找享受服务人员" |
|||
prop="principalContact" |
|||
label-width="150px" |
|||
style="display: block" |
|||
v-show="this.assignSwitch" |
|||
> |
|||
<input type="text" v-model="formData.resiSearchTagId" v-show="false"> |
|||
<template v-if="this.resiSearchTagName"> |
|||
<el-tag @close="handleCloseTag" closable style="margin-right:10px;"> |
|||
{{this.resiSearchTagName }} |
|||
</el-tag> |
|||
</template> |
|||
|
|||
<el-button type="primary" @click="handleClickLabel" size="mini"> |
|||
<span> <i class="el-icon-plus"></i> 按标签查找 </span> |
|||
</el-button> |
|||
</el-form-item> |
|||
<el-form-item label="服务时间" |
|||
label-width="150px" |
|||
prop="serviceTimeStart" |
|||
style="display: block"> |
|||
<el-date-picker :disabled="formType==='detail'" |
|||
v-model="formData.serviceTimeStart" |
|||
:picker-options="startPickerOptions" |
|||
class="item_width_2" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<span class="u-data-tag">至</span> |
|||
<el-date-picker :disabled="formType==='detail'" |
|||
v-model="formData.serviceTimeEnd" |
|||
:picker-options="endPickerOptions" |
|||
class="item_width_2 u-data-tag" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="结束时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="备注" |
|||
prop="remark" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input :disabled="formType==='detail'" |
|||
class="item_width_1" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
:rows="3" |
|||
placeholder="请输入备注，不超过500字" |
|||
v-model="formData.remark"></el-input> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
<div v-show="formData.serviceStatus==='completed'"> |
|||
<h3 class="d-h3">反馈内容</h3> |
|||
|
|||
<el-form ref="ref_form_feedback" |
|||
:inline="true" |
|||
:disabled="true" |
|||
:model="feedbackFormData" |
|||
class="div_form"> |
|||
|
|||
<el-form-item label="服务目标" |
|||
prop="serviceGoal" |
|||
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="feedbackFormData.serviceGoal"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务效果" |
|||
prop="serviceEffect" |
|||
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="feedbackFormData.serviceEffect"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务人数" |
|||
style="display: block" |
|||
prop="servicePeopleNumber" |
|||
label-width="150px"> |
|||
<el-input-number class="item_width_2" |
|||
v-model="feedbackFormData.servicePeopleNumber" |
|||
:min="0" |
|||
:max="9999" |
|||
label="服务人数"></el-input-number> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务状态" |
|||
label-width="150px" |
|||
style="display: block" |
|||
prop="serviceStatus"> |
|||
<span>已完成</span> |
|||
<!-- <el-select class="item_width_1" |
|||
v-model="feedbackFormData.serviceStatus" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in statusArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> --> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="满意度" |
|||
style="display: block" |
|||
label-width="150px" |
|||
prop="satisfaction"> |
|||
<el-select class="item_width_2" |
|||
v-model="feedbackFormData.satisfaction" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in satisfyArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="地址" |
|||
prop="address" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
v-model="feedbackFormData.address"></el-input> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="地图位置" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<div style="width:500px"> |
|||
|
|||
<div class="div_map"> |
|||
<div id="map_app"> |
|||
|
|||
</div> |
|||
<div class="div_searchmap"> |
|||
<el-input maxlength="50" |
|||
size="mini" |
|||
placeholder="请输入关键字" |
|||
v-model="keyWords"> |
|||
</el-input> |
|||
<el-button style="margin-left: 10px" |
|||
type="primary" |
|||
size="mini" |
|||
@click="handleSearchMap">查询</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</el-form-item> --> |
|||
|
|||
<el-form-item class="block" |
|||
label="附件" |
|||
label-width="150px" |
|||
prop="attach"> |
|||
<!-- <el-upload :headers="$getElUploadHeaders()" v-if="feedbackFormData.fileList&&feedbackFormData.fileList.length>0" |
|||
class="upload-demo" |
|||
:on-preview="handleFileDownload" |
|||
accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3" |
|||
:limit="3" |
|||
:file-list="fileList"> |
|||
|
|||
</el-upload> --> |
|||
<div v-if="feedbackFormData.fileList&&feedbackFormData.fileList.length>0" |
|||
class="attachement-list"> |
|||
<a :href="att.url" |
|||
target="_blank" |
|||
:key="att.url" |
|||
v-for="att in feedbackFormData.fileList"> |
|||
<i class="el-icon-folder-opened"></i> |
|||
{{ att.name }} |
|||
</a> |
|||
</div> |
|||
<span v-else>无附件</span> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="div_btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">取 消</el-button> |
|||
<el-button size="small" |
|||
v-if="formType != 'detail'" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
|
|||
<el-dialog v-if="showPersonList" |
|||
:visible.sync="showPersonList" |
|||
:append-to-body="true" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'标签查找'" |
|||
width="1150px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showPersonList = false"> |
|||
<person-list ref="ref_detail_form" |
|||
:policyId="policyId" |
|||
:ruleList="ruleList" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose"> |
|||
</person-list> |
|||
</el-dialog> |
|||
<el-dialog |
|||
v-if="showLabelForm" |
|||
:visible.sync="showLabelForm" |
|||
:append-to-body="true" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'标签配置'" |
|||
width="900px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showLabelForm = false" |
|||
> |
|||
<label-form |
|||
ref="ref_label_form" |
|||
:policyId="policyId" |
|||
:ruleList="ruleList" |
|||
@dialogCancle="addFormCancle" |
|||
@dialogOk="addFormOk" |
|||
> |
|||
<!-- @handleOk="handleOk" |
|||
@handleClose="handleClose" --> |
|||
</label-form> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
// import personList from "../policy/oldPersonList.vue"; |
|||
import labelForm from "../labelConfig/addForm.vue"; |
|||
import { nextTick } from 'vue'; |
|||
|
|||
var map |
|||
var search |
|||
var markers |
|||
var infoWindowList |
|||
var geocoder // 新建一个正逆地址解析类 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now() |
|||
if (this.formData.serviceTimeStart) { |
|||
let serviceTimeStart = new Date(this.formData.serviceTimeStart) |
|||
return time.getTime() > nowData || time.getTime() < serviceTimeStart || time.getTime() === serviceTimeStart |
|||
} else { |
|||
return time.getTime() > nowData |
|||
} |
|||
|
|||
} |
|||
let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now() |
|||
return time.getTime() > nowData |
|||
} |
|||
|
|||
return { |
|||
btnDisable: false, |
|||
|
|||
keyWords: '', |
|||
assignSwitch: true, |
|||
formData: { |
|||
}, |
|||
showLabelForm: false, |
|||
resiSearchTagName:'', |
|||
feedbackFormData: { |
|||
serviceProjectId: '',// 服务项目id |
|||
serviceName: '', |
|||
serviceGoal: '',// 服务目标 |
|||
serviceEffect: '',// 服务效果 |
|||
servicePeopleNumber: null,// 服务人数 |
|||
serviceStatus: 'completed',// 服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度。不满意:bad、基本满意:good、非常满意:perfect |
|||
longitude: '',// 经度 |
|||
latitude: '',// 维度 |
|||
address: '', |
|||
fileList: [],// 附件列表 |
|||
}, |
|||
serviceList: [],//服务list |
|||
|
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
policyList: [], |
|||
projectList: [], |
|||
fileList: [], |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile', |
|||
|
|||
policyId: '', |
|||
showPersonList: false, |
|||
ruleList: [] |
|||
} |
|||
}, |
|||
components: { labelForm}, |
|||
mounted () { |
|||
this.getPolicyList() |
|||
if (this.serviceRecordId) {//详情 |
|||
this.loadInfo() |
|||
} |
|||
// this.initMap() |
|||
|
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
//加载组织数据 |
|||
async handlePersonList () { |
|||
if (!this.formData.policyId) { |
|||
this.$message.info('请先选择政策') |
|||
return false |
|||
} |
|||
|
|||
this.policyId = this.formData.policyId |
|||
await this.loadRuleList() |
|||
|
|||
this.showPersonList = true; |
|||
}, |
|||
|
|||
async loadRuleList () { |
|||
|
|||
const url = "/governance/policy/rulelist/" + this.policyId |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.ruleList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleClose () { |
|||
this.showPersonList = false |
|||
|
|||
|
|||
}, |
|||
handleOk () { |
|||
this.showPersonList = false |
|||
|
|||
|
|||
}, |
|||
handleClickLabel() { |
|||
this.showLabelForm = true; |
|||
this.$nextTick(() => { |
|||
this.$refs["ref_label_form"].initForm("info"); |
|||
}); |
|||
}, |
|||
async getPolicyList () { |
|||
const url = '/governance/policy/policyList' |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.policyList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
//加载组织 |
|||
async loadInfo () { |
|||
const url = '/governance/icServiceWarmRecord/detail' |
|||
|
|||
let params = { |
|||
serviceRecordId: this.serviceRecordId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.formData = { ...data } |
|||
this.formData.serviceRecordId = this.serviceRecordId |
|||
this.feedbackFormData = { ...data.feedback } |
|||
await this.getTagName() |
|||
this.fileList = [] |
|||
if (data.feedback && data.feedback.fileList && data.feedback.fileList.length > 0) { |
|||
data.feedback.fileList.forEach(element => { |
|||
let obj = { |
|||
name: element.name, |
|||
format: element.format, |
|||
url: element.url, |
|||
} |
|||
this.fileList.push(obj) |
|||
}); |
|||
} |
|||
|
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async getTagName() { |
|||
const url = "/governance/resiSearchTag/listResiSearchTags"; |
|||
let params = { |
|||
pageSize: 99, |
|||
}; |
|||
let { data, msg, code } = await requestPost(url, params); |
|||
if (code == 0) { |
|||
let showAddProduct = data.list.filter(item=>{ |
|||
return [this.formData.resiSearchTagId].includes(item.tagId) |
|||
}) |
|||
this.resiSearchTagName = showAddProduct[0].tagName |
|||
this.assignSwitch = true |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
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.editFuwu() |
|||
} |
|||
|
|||
}) |
|||
|
|||
|
|||
}, |
|||
async editFuwu () { |
|||
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //联系电话 |
|||
if (this.formData.principalContact && regPhone.test(this.formData.principalContact) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的联系电话' |
|||
}) |
|||
return false; |
|||
} |
|||
console.log(this.formData); |
|||
let url = '/governance/icServiceWarmRecord/edit' |
|||
// let url = "http://yapi.elinkservice.cn/mock/245/governance/icServiceProject/service/update" |
|||
|
|||
|
|||
const { data, code, msg } = await requestPost(url, this.formData) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}) |
|||
this.resetData() |
|||
|
|||
this.$emit('handleOk') |
|||
} else { |
|||
this.btnDisable = false |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleCancle () { |
|||
this.resetData() |
|||
this.$emit('handleClose') |
|||
|
|||
}, |
|||
addFormOk(val) { |
|||
this.showLabelForm = false; |
|||
this.formData.resiSearchTagId = val.tagId; |
|||
this.resiSearchTagName = val.tagName; |
|||
}, |
|||
addFormCancle() { |
|||
this.showLabelForm = false; |
|||
}, |
|||
handleCloseTag(){ |
|||
this.resiSearchTagName = '' |
|||
this.formData.resiSearchTagId = '' |
|||
}, |
|||
//下载 |
|||
handleFileDownload (file) { |
|||
|
|||
var a = document.createElement('a'); |
|||
var event = new MouseEvent('click'); |
|||
a.download = file.name; |
|||
console.log(a) |
|||
a.href = file.url; |
|||
a.dispatchEvent(event); |
|||
|
|||
|
|||
}, |
|||
|
|||
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap () { |
|||
// 定义地图中心点坐标 |
|||
var center = new window.TMap.LatLng(36.0722275, 120.38945519) |
|||
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
|||
map = new window.TMap.Map(document.getElementById('app'), { |
|||
center: center, // 设置地图中心点坐标 |
|||
zoom: 17.2, // 设置地图缩放级别 |
|||
pitch: 43.5, // 设置俯仰角 |
|||
rotation: 45 // 设置地图旋转角度 |
|||
}) |
|||
|
|||
search = new window.TMap.service.Search({ pageSize: 10 }) |
|||
// 新建一个地点搜索类 |
|||
markers = new TMap.MultiMarker({ |
|||
map: map, |
|||
geometries: [] |
|||
}) |
|||
infoWindowList = Array(10) |
|||
|
|||
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 |
|||
|
|||
// 监听地图平移结束 |
|||
map.on('panend', () => { |
|||
this.handleMoveCenter() |
|||
}) |
|||
this.handleMoveCenter() |
|||
this.convert() |
|||
}, |
|||
|
|||
setMarker (lat, lng) { |
|||
markers.setGeometries([]) |
|||
markers.add([ |
|||
{ |
|||
id: '4', |
|||
styleId: 'marker', |
|||
position: new TMap.LatLng(lat, lng), |
|||
properties: { |
|||
title: 'marker4' |
|||
} |
|||
} |
|||
]) |
|||
}, |
|||
|
|||
handleSearchMap () { |
|||
infoWindowList.forEach((infoWindow) => { |
|||
infoWindow.close() |
|||
}) |
|||
infoWindowList.length = 0 |
|||
markers.setGeometries([]) |
|||
// 在地图显示范围内以给定的关键字搜索地点 |
|||
search |
|||
.searchNearby({ |
|||
keyword: this.keyWords, |
|||
radius: 1000, |
|||
autoExtend: true, |
|||
center: map.getCenter(), |
|||
}) |
|||
.then((result) => { |
|||
let { data } = result |
|||
if (Array.isArray(data) && data.length > 0) { |
|||
const { |
|||
location: { lat, lng } |
|||
} = data[0] |
|||
|
|||
|
|||
map.setCenter(new TMap.LatLng(lat, lng)) |
|||
this.setMarker(lat, lng) |
|||
this.formData.latitude = lat |
|||
this.formData.longitude = lng |
|||
this.convert() |
|||
} else { |
|||
this.$message.error('未检索到相关位置坐标') |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
handleMoveCenter () { |
|||
//修改地图中心点 |
|||
const center = map.getCenter() |
|||
const lat = center.getLat() |
|||
const lng = center.getLng() |
|||
this.formData.latitude = lat |
|||
this.formData.longitude = lng |
|||
this.setMarker(lat, lng) |
|||
this.convert(lat, lng) |
|||
}, |
|||
|
|||
convert (lat, lng) { |
|||
markers.setGeometries([]); |
|||
// var input = document.getElementById('location').value.split(','); |
|||
let location |
|||
if (lat && lng) { |
|||
location = new TMap.LatLng(lat, lng); |
|||
} else { |
|||
location = new TMap.LatLng(this.formData.latitude, this.formData.longitude); |
|||
} |
|||
|
|||
// map.setCenter(location); |
|||
markers.updateGeometries([ |
|||
{ |
|||
id: 'main', // 点标注数据数组 |
|||
position: location, |
|||
}, |
|||
]); |
|||
geocoder |
|||
.getAddress({ location: location }) // 将给定的坐标位置转换为地址 |
|||
.then((result) => { |
|||
this.formData.address = result.result.address |
|||
// 显示搜索到的地址 |
|||
}); |
|||
}, |
|||
|
|||
|
|||
resetData () { |
|||
this.formData = {} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
|
|||
|
|||
serviceTimeStart: [ |
|||
{ required: true, message: '服务时间不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
|
|||
} |
|||
}, |
|||
}, |
|||
props: { |
|||
|
|||
serviceRecordId: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
serviceOrgName: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
formType: {//表单操作类型 add新增，edit编辑，detail详情,feedback反馈 |
|||
type: String, |
|||
required: true |
|||
}, |
|||
|
|||
satisfyArray: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/form-main.scss"; |
|||
|
|||
.attachement-list { |
|||
// padding-left: 20px; |
|||
a { |
|||
display: block; |
|||
cursor: pointer; |
|||
// color: #4df0ff; |
|||
font-size: 14px; |
|||
|
|||
i { |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,856 @@ |
|||
<template> |
|||
<div class="g-main"> |
|||
<div> |
|||
<div class="m-search"> |
|||
<el-form :inline="true" |
|||
:model="formData" |
|||
ref="ref_searchform" |
|||
:label-width="'100px'"> |
|||
<el-form-item prop="serviceType" |
|||
label="服务类别" |
|||
> |
|||
<el-select class="u-item-width-daterange" |
|||
v-model.trim="formData.serviceTypeLevel1Id" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in serviceTypesLevel1" |
|||
@click.native="handleChangeServiceTypeLevel1" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item prop="serviceType"> |
|||
<el-select class="u-item-width-daterange" |
|||
v-model.trim="formData.serviceTypeLevel2Id" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in serviceTypesLevel2" |
|||
@click.native="" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务时间" |
|||
prop="serviceTimeStart"> |
|||
<el-date-picker v-model="formData.serviceTimeStart" |
|||
:picker-options="startPickerOptions" |
|||
class="u-item-width-daterange" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<span class="u-data-tag">至</span> |
|||
<el-date-picker v-model="formData.serviceTimeEnd" |
|||
:picker-options="endPickerOptions" |
|||
class="u-item-width-daterange u-data-tag" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="结束时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="服务事项" |
|||
prop="serviceName"> |
|||
<el-input v-model="formData.serviceName" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务组织" |
|||
prop="serviceOrgType"> |
|||
<el-select v-model="formData.serviceOrgType" |
|||
class="u-item-width-daterange" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable |
|||
@change="handleServiceChange('add', $event)"> |
|||
<el-option v-for="item in serviceOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="formData.serviceOrgId" |
|||
class="u-item-width-daterange u-data-tag" |
|||
filterable |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in serviceOptiondList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
|
|||
<el-form-item label="服务状态" |
|||
prop="serviceStatus"> |
|||
<el-select class="u-item-width-normal" |
|||
v-model="formData.serviceStatus" |
|||
placeholder="全部" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in statusArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="满意度" |
|||
prop="satisfaction"> |
|||
<el-select class="u-item-width-normal" |
|||
v-model="formData.satisfaction" |
|||
placeholder="全部" |
|||
size="small" |
|||
clearable> |
|||
<el-option v-for="item in satisfyArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
<el-row type="flex" > |
|||
<el-col :span="24" align="right"> |
|||
<el-button style="margin-left:30px" |
|||
size="small" |
|||
type="primary " |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" |
|||
is-plain |
|||
class="diy-button--white el-button--default" |
|||
size="small" |
|||
@click="resetSearch">重置</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="m-table"> |
|||
<div class="div_btn"> |
|||
<div class="div_btn_left"> |
|||
<el-button |
|||
size="small" |
|||
@click="handleAdd" |
|||
type="primary" |
|||
icon="el-icon-plus" |
|||
style="margin-right:10px" |
|||
>新增</el-button> |
|||
</div> |
|||
<el-button @click="handleExport" |
|||
type="primary" |
|||
size="small" |
|||
class="diy-button--white el-button--default" |
|||
>导出</el-button> |
|||
<el-button type="primary" @click="onDeleteBatch" size="small"> |
|||
批量删除 |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-table :data="tableData" |
|||
border |
|||
v-loading="tableLoading" |
|||
class="m-table-item" |
|||
style="width: 100%" |
|||
:height="maxTableHeight" |
|||
@select-all="onMultiSelect" |
|||
@selection-change="onMultiSelect"> |
|||
|
|||
<el-table-column |
|||
type="selection" |
|||
fixed="left" |
|||
align="center" |
|||
width="50"/> |
|||
|
|||
<el-table-column label="序号" |
|||
fixed="left" |
|||
type="index" |
|||
align="center" |
|||
width="50" /> |
|||
|
|||
<el-table-column prop="serviceTypeName" |
|||
label="服务类型" |
|||
align="center" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="serviceName" |
|||
align="center" |
|||
min-width="150" |
|||
label="服务事项" |
|||
:show-overflow-tooltip="true"> |
|||
|
|||
</el-table-column> |
|||
<el-table-column prop="sourceName" |
|||
align="center" |
|||
min-width="150" |
|||
label="来自" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
<el-table-column prop="serviceTimeStart" |
|||
align="center" |
|||
width="300" |
|||
:show-overflow-tooltip="true" |
|||
label="服务时间"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<span>{{scope.row.serviceTimeStart}}至{{scope.row.serviceTimeEnd}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="serviceOrgName" |
|||
align="center" |
|||
min-width="150" |
|||
label="服务方" |
|||
:show-overflow-tooltip="true"> |
|||
|
|||
</el-table-column> |
|||
<el-table-column prop="serviceStatus" |
|||
align="center" |
|||
width="100" |
|||
label="服务状态" |
|||
:show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<span>{{scope.row.serviceStatus==='in_service'?'进行中':'已完成'}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="servedPersonQty" |
|||
align="center" |
|||
width="110" |
|||
label="服务人数" |
|||
:show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handlePersonList(scope.row)" type="text" size="small"> |
|||
{{ scope.row.servedPersonQty }} |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column fixed="right" |
|||
label="操作" |
|||
align="center" |
|||
width="220"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handleDetail(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>查看</el-button> |
|||
<el-button |
|||
@click="handleEdit(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>编辑</el-button> |
|||
<!-- 临时去掉人员名单与反馈 --> |
|||
<el-button v-if="scope.row.serviceStatus==='in_service'" |
|||
@click="handleFeedback(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>反馈</el-button> |
|||
<!-- <el-button v-if="scope.row.policyId" |
|||
@click="handlePersonList(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>人员名单</el-button> --> |
|||
|
|||
<!-- 暂时不限制删除按钮，任何状态都允许删除，产品要求的 --> |
|||
<!-- v-if="scope.row.serviceStatus==='in_service'" --> |
|||
<el-button |
|||
@click="handleDel(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>删除</el-button> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<div> |
|||
|
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
<el-dialog v-if="showAdd" |
|||
:visible.sync="showAdd" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="addDiaTitle" |
|||
:modal-append-to-body="false" |
|||
width="720px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showAdd = false"> |
|||
<add-form ref="ref_add_form" |
|||
:formType="formType" |
|||
:statusArray="statusArray" |
|||
:satisfyArray="satisfyArray" |
|||
:serviceRecordId="serviceRecordId" |
|||
:serviceName="serviceName" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose"></add-form> |
|||
</el-dialog> |
|||
<!-- 编辑与新增写在一个组件中 --> |
|||
<!-- <el-dialog v-if="showEdit" |
|||
:visible.sync="showEdit" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'编辑'" |
|||
:modal-append-to-body="false" |
|||
width="850px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showEdit = false"> |
|||
<edit-form ref="ref_edit_form" |
|||
:serviceRecordId="serviceRecordId" |
|||
:serviceOrgName="serviceOrgName" |
|||
:satisfyArray="satisfyArray" |
|||
:statusArray="statusArray" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose" |
|||
:formType="formType"> |
|||
</edit-form> |
|||
</el-dialog> --> |
|||
<el-dialog v-if="showDetail" |
|||
:visible.sync="showDetail" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="detailDiaTitle" |
|||
:modal-append-to-body="false" |
|||
width="850px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaDetailClose"> |
|||
<detail-form ref="ref_detail_form" |
|||
:serviceRecordId="serviceRecordId" |
|||
:serviceOrgName="serviceOrgName" |
|||
:satisfyArray="satisfyArray" |
|||
:statusArray="statusArray" |
|||
@diaDetailClose="diaDetailClose"> |
|||
</detail-form> |
|||
</el-dialog> |
|||
<el-dialog v-if="showPersonList" |
|||
:visible.sync="showPersonList" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="'人员名单'" |
|||
width="1150px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showPersonList = false"> |
|||
<person-list ref="ref_person_list" |
|||
:serviceId="commonServiceId" |
|||
:tagId="tagId"> |
|||
</person-list> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { mapGetters } from "vuex"; |
|||
// import eventInfo from "./cpts/event-info"; |
|||
import axios from "axios"; |
|||
import addForm from "./addForm"; |
|||
import detailForm from "./detailForm.vue"; |
|||
import editForm from "./editForm"; |
|||
import feedBackForm from "./addForm"; |
|||
import personList from "./personList"; |
|||
// 其他组件其他页面有调用 |
|||
export default { |
|||
components: { addForm, detailForm, feedBackForm, editForm, personList }, |
|||
|
|||
|
|||
data () { |
|||
let endDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now() |
|||
|
|||
if (this.formData.serviceTimeStart) { |
|||
let serviceTimeStart = new Date(this.formData.serviceTimeStart) |
|||
return time.getTime() > nowData || time.getTime() < serviceTimeStart || time.getTime() === serviceTimeStart |
|||
} else { |
|||
return time.getTime() > nowData |
|||
} |
|||
|
|||
} |
|||
let startDisabledDate = (time) => {//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
|||
let nowData = Date.now() |
|||
return time.getTime() > nowData |
|||
} |
|||
|
|||
return { |
|||
// 公共服务分类 |
|||
serviceTypesLevel1:[], |
|||
serviceTypesLevel2:[], |
|||
tableLoading: false, |
|||
user: {}, |
|||
agencyId: '', |
|||
searchH:0, |
|||
tableData: [], |
|||
|
|||
statusArray: [ |
|||
{ |
|||
value: "in_service", |
|||
label: "进行中", |
|||
}, |
|||
{ |
|||
value: "completed", |
|||
label: "已完成", |
|||
}, |
|||
], |
|||
satisfyArray: [ |
|||
{ |
|||
value: "bad", |
|||
label: "不满意", |
|||
}, |
|||
{ |
|||
value: "good", |
|||
label: "基本满意", |
|||
}, |
|||
{ |
|||
value: "perfect", |
|||
label: "非常满意", |
|||
}, |
|||
|
|||
], |
|||
|
|||
formData: { |
|||
serviceTypeLevel1Id:'',// 公共服务（政策级别）一级分类id |
|||
serviceTypeLevel2Id:'',// 公共服务（政策级别）二级分类id |
|||
serviceName: '',//项目名称 |
|||
serviceOrgType: '',//服务组织类型 |
|||
serviceOrgId: '',//服务组织Id |
|||
serviceTimeStart: '',//服务开始时间yyyy-MM-dd |
|||
serviceTimeEnd: '',//服务结束时间yyyy-MM-dd |
|||
serviceStatus: '',//服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度.不满意:bad、基本满意:good、非常满意:perfect |
|||
|
|||
}, |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem("pageSize") || 20, |
|||
total: 1, |
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
serviceRecordId: '', |
|||
serviceName: '', |
|||
serviceOrgName: '', |
|||
|
|||
showAdd: false, |
|||
showEdit: false, |
|||
showDetail: false, |
|||
showFeedback: false, |
|||
formType: 'add', |
|||
addDiaTitle: '指派服务', |
|||
detailDiaTitle: '服务详情', |
|||
|
|||
serviceOptions: [], |
|||
serviceOptiondList: [], |
|||
|
|||
commonServiceId: null, |
|||
tagId: null, |
|||
showPersonList: false, |
|||
ruleList: [], |
|||
|
|||
// 多选行 |
|||
multiSelectedRows: [] |
|||
}; |
|||
}, |
|||
computed: { |
|||
maxTableHeight () { |
|||
const h = |
|||
this.clientHeight - this.searchH - 450 + this.iframeHeight; |
|||
const _h = this.clientHeight - 450 - this.searchH; |
|||
return this.$store.state.inIframe ? h : _h; |
|||
}, |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
}, |
|||
watch: { |
|||
// "formData.serviceTimeEnd": function (val) { |
|||
// if (val && val != '') { |
|||
// let arrayTemp = val.split(' ') |
|||
// this.formData.serviceTimeEnd = arrayTemp[0] + ' 23:59:59' |
|||
// } |
|||
|
|||
// }, |
|||
}, |
|||
mounted () { |
|||
console.log(this.$store.state) |
|||
this.user = this.$store.state.user |
|||
this.agencyId = this.user.agencyId |
|||
this.getDictOptions() |
|||
this.getTableData(); |
|||
}, |
|||
methods: { |
|||
|
|||
// 服务类型下拉框选中事件 |
|||
handleChangeServiceTypeLevel1() { |
|||
this.formData.serviceTypeLevel2Id = '' |
|||
this.$http |
|||
.get("/governance/commonServiceType/selectList/" + this.formData.serviceTypeLevel1Id) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.serviceTypesLevel2 = res.data; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}) |
|||
}, |
|||
|
|||
handleSearch (val) { |
|||
console.log(this.formData); |
|||
this.pageNo = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 获取服务组织 |
|||
async getDictOptions () { |
|||
const url = "/sys/dict/data/dictlist" |
|||
|
|||
let params = { |
|||
dictType: 'user_demand_service_type' |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.serviceOptions = data; |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
this.$http |
|||
.get("/governance/commonServiceType/selectList/0") |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.serviceTypesLevel1 = res.data; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
|
|||
handleServiceChange (type, val) { |
|||
this.formData.serviceOrgId = '' |
|||
if (val === "social_org") { |
|||
if (type === "add") { |
|||
this.getServiceuserList(val, "add_demand"); |
|||
} else { |
|||
this.getServiceuserList(val, "query_demand"); |
|||
} |
|||
} else { |
|||
this.getServiceuserList(val, ""); |
|||
} |
|||
}, |
|||
|
|||
async getServiceuserList (serviceType, query) { |
|||
if (!serviceType) return false; |
|||
|
|||
const params = { |
|||
serviceName: "", |
|||
serviceType: serviceType, |
|||
queryPurpose: query, |
|||
}; |
|||
await this.$http |
|||
.post("/governance/userdemand/servicelist", params) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.serviceOptiondList = res.data |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
//加载人员列表数据 |
|||
async handlePersonList (row) { |
|||
this.commonServiceId = row.serviceRecordId; |
|||
this.tagId = row.resiSearchTagId; |
|||
this.showPersonList = true; |
|||
}, |
|||
|
|||
async loadRuleList () { |
|||
|
|||
const url = "/governance/policy/rulelist/" + this.policyId |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.ruleList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
async handleAdd () { |
|||
this.addDiaTitle = '指派服务' |
|||
this.formType = 'add' |
|||
this.showAdd = true; |
|||
}, |
|||
|
|||
async handleDetail (row) { |
|||
this.detailDiaTitle = "服务详情" |
|||
this.serviceRecordId = row.serviceRecordId |
|||
this.serviceOrgName = row.serviceOrgName |
|||
|
|||
// this.formType = 'detail' |
|||
this.showDetail = true |
|||
|
|||
}, |
|||
diaDetailClose () { |
|||
console.log(this.$refs.ref_detail) |
|||
this.$refs.ref_detail_form.diaDestroy() |
|||
this.showDetail = false |
|||
}, |
|||
async handleEdit (row) { |
|||
this.addDiaTitle = "编辑服务" |
|||
this.serviceRecordId = row.serviceRecordId |
|||
this.serviceOrgName = row.serviceOrgName |
|||
this.formType = 'edit' |
|||
this.showAdd = true |
|||
|
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async handleFeedback (row) { |
|||
|
|||
this.serviceRecordId = row.serviceRecordId |
|||
this.serviceName = row.serviceName |
|||
this.addDiaTitle = '服务反馈' |
|||
this.formType = 'feedback' |
|||
this.showAdd = true; |
|||
}, |
|||
|
|||
|
|||
handleClose () { |
|||
this.serviceRecordId = "" |
|||
this.formType = '' |
|||
|
|||
this.showAdd = false |
|||
this.showDetail = false |
|||
this.showEdit = false |
|||
|
|||
|
|||
}, |
|||
handleOk () { |
|||
this.handleClose() |
|||
this.pageNo = 1 |
|||
this.getTableData() |
|||
|
|||
}, |
|||
|
|||
|
|||
async handleDel (row) { |
|||
|
|||
this.serviceRecordId = row.serviceRecordId |
|||
|
|||
this.$confirm("确认删除服务?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.cancelFuwu([row.serviceRecordId]) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
|
|||
}, |
|||
|
|||
async cancelFuwu (serviceRecordIds) { |
|||
|
|||
const url = '/governance/icServiceWarmRecord/searchDeleteBatch'; |
|||
|
|||
const { data, code, msg } = await requestPost(url, serviceRecordIds); |
|||
|
|||
if (code === 0) { |
|||
this.$message.success("取消成功！"); |
|||
this.getTableData(); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async getTableData () { |
|||
this.tableLoading = true |
|||
const url = "/governance/icServiceWarmRecord/searchList"; |
|||
|
|||
const { pageSize, pageNo, formData } = this; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}); |
|||
|
|||
this.tableLoading = false |
|||
if (code === 0) { |
|||
|
|||
this.total = data.total ; |
|||
this.tableData = data.list |
|||
|
|||
|
|||
|
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
|
|||
async handleExport () { |
|||
//导出改接口-'服务找人' |
|||
const url = "/governance/icServiceWarmRecord/searchExport"; |
|||
const { pageSize, pageNo, formData } = this; |
|||
axios({ |
|||
url: window.SITE_CONFIG["apiURL"] + url, |
|||
method: "post", |
|||
data: { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}, |
|||
responseType: "blob", |
|||
}) |
|||
.then((res) => { |
|||
let fileName = window.decodeURI( |
|||
res.headers["content-disposition"].split(";")[1].split("=")[1] |
|||
); |
|||
console.log("filename", fileName); |
|||
let blob = new Blob([res.data], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }); |
|||
var url = window.URL.createObjectURL(blob); |
|||
var aLink = document.createElement("a"); |
|||
aLink.style.display = "none"; |
|||
aLink.href = url; |
|||
aLink.setAttribute("download", fileName); |
|||
document.body.appendChild(aLink); |
|||
aLink.click(); |
|||
document.body.removeChild(aLink); //下载完成移除元素 |
|||
window.URL.revokeObjectURL(url); //释放掉blob对象 |
|||
}) |
|||
.catch((err) => { |
|||
console.log("获取导出情失败", err); |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
|
|||
this.pageSize = val; |
|||
window.localStorage.setItem("pageSize", val); |
|||
this.getTableData(); |
|||
}, |
|||
handleCurrentChange (val) { |
|||
|
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
|
|||
resetSearch () { |
|||
this.formData = { |
|||
serviceTypeLevel1Id:'',// 公共服务（政策级别）一级分类id |
|||
serviceTypeLevel2Id:'',// 公共服务（政策级别）二级分类id |
|||
serviceName: '',//项目名称 |
|||
serviceOrgType: '',//服务组织类型 |
|||
serviceOrgId: '',//服务组织Id |
|||
serviceTimeStart: '',//服务开始时间yyyy-MM-dd |
|||
serviceTimeEnd: '',//服务结束时间yyyy-MM-dd |
|||
serviceStatus: '',//服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度.不满意:bad、基本满意:good、非常满意:perfect |
|||
} |
|||
|
|||
|
|||
this.pageNo = 1 |
|||
this.getTableData() |
|||
}, |
|||
|
|||
// 多选 |
|||
onMultiSelect(row) { |
|||
this.multiSelectedRows = row; |
|||
}, |
|||
|
|||
// 批量删除 |
|||
onDeleteBatch() { |
|||
if (this.multiSelectedRows.length == 0) { |
|||
return; |
|||
} |
|||
|
|||
this.$confirm("删除之后无法恢复，确认删除？", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
let serviceRecordIds = this.multiSelectedRows.map(item => item.serviceRecordId) |
|||
this.cancelFuwu(serviceRecordIds) |
|||
}) |
|||
.catch((err) => { |
|||
if (err == "cancel") { |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
props: { |
|||
|
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/buttonstyle.scss"; |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
@import "@/assets/scss/modules/shequzhili/event-info.scss"; |
|||
</style> |
|||
@ -0,0 +1,486 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<el-form |
|||
:inline="true" |
|||
:model="searchFormData" |
|||
ref="ref_searchform" |
|||
:label-width="'110px'"> |
|||
|
|||
<el-form-item label="所属组织" prop="orgId"> |
|||
<el-cascader |
|||
@change="handleOrgChange" |
|||
:options="orgTree" |
|||
:props="orgOptionProps" |
|||
clearable |
|||
placeholder="请选择组织"></el-cascader> |
|||
</el-form-item> |
|||
<el-form-item label="人员姓名" prop="title"> |
|||
<el-input |
|||
v-model="searchFormData.name" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="手机号" prop="title"> |
|||
<el-input |
|||
v-model="searchFormData.mobile" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="身份证号" prop="title"> |
|||
<el-input |
|||
v-model="searchFormData.idCard" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="享受服务次数" prop="title"> |
|||
<el-input |
|||
v-model="searchFormData.serveTimes" |
|||
class="u-item-width-normal" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="家庭住址" prop="title"> |
|||
<el-select v-model="searchFormData.villageId" placeholder="请选择小区" |
|||
@change="handleQuarterSelectorsChange" clearable> |
|||
<el-option |
|||
v-for="item in quartersSelectItems" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="searchFormData.buildId" placeholder="请选择楼栋" |
|||
@change="handleBuildSelectorsChange" clearable> |
|||
<el-option |
|||
v-for="item in buildingSelectItems" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="searchFormData.unitId" placeholder="请选择单元" |
|||
@change="handleUnitSelectorsChange" clearable> |
|||
<el-option |
|||
v-for="item in unitSelectItems" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select v-model="searchFormData.homeId" placeholder="请选择房屋" |
|||
@change="handleUnitSelectorsChange" clearable> |
|||
<el-option |
|||
v-for="item in homeSelectItems" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="div_btn"> |
|||
<el-button type="primary" size="small" class="diy-button--blue" @click="handleIncrementServeTimes">标记享受服务人员</el-button> |
|||
<el-button type="primary" size="small" class="diy-button--blue" @click="handleSearch">查询</el-button> |
|||
</div> |
|||
|
|||
<div class="m-table"> |
|||
<!--表格--> |
|||
<el-table |
|||
:data="personList" |
|||
height="250" |
|||
border |
|||
@select-all="handleSelectAll" |
|||
@selection-change="handleTableRowsSelected" |
|||
style="width: 100%"> |
|||
|
|||
<el-table-column |
|||
type="selection" |
|||
width="55"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
prop="agencyName" |
|||
label="所属组织" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="gridName" |
|||
label="所属网格" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="name" |
|||
label="姓名"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="genderDisplay" |
|||
label="性别"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="birthday" |
|||
width="170" |
|||
label="出生日期"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="age" |
|||
label="年龄"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="mobile" |
|||
width="120" |
|||
label="手机号"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="idCard" |
|||
width="180" |
|||
label="身份证号"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="address" |
|||
width="250" |
|||
label="家庭住址"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="serveTimes" |
|||
label="享受服务次数"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!--分页条--> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="searchFormData.pageNo" |
|||
:page-sizes="pageSizes" |
|||
:page-size="searchFormData.pageSize" |
|||
layout="sizes, prev, pager, next, total" |
|||
background |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { requestPost } from '@/js/dai/request' |
|||
import { requestGet } from '@/js/dai/request' |
|||
import { EpmetResultResolver } from '@/js/epmet-result-resolver' |
|||
import nextTick from 'dai-js/tools/nextTick' |
|||
|
|||
export default { |
|||
mounted () { |
|||
this.epmetResultResolver = new EpmetResultResolver(this); |
|||
this.searchFormData.serviceId = this.serviceId; |
|||
this.initOrgTree(); |
|||
this.handleSearch(); |
|||
}, |
|||
data () { |
|||
return { |
|||
// 搜索表单 |
|||
searchFormData: { |
|||
serviceId: null, |
|||
orgId: null, |
|||
orgType: null, |
|||
tagId: null, |
|||
name: null, |
|||
mobile: null, |
|||
idCard: null, |
|||
serveTimes: null, |
|||
villageId: null, |
|||
buildId: null, |
|||
unitId: null, |
|||
homeId: null, |
|||
pageSize: 10, |
|||
pageNo: 1, |
|||
}, |
|||
|
|||
// 分页参数 |
|||
pageSizes: [10, 20, 50, 100, 200], |
|||
total: 0, // 总页数 |
|||
|
|||
// 小区下拉框选项 |
|||
quartersSelectItems: [], |
|||
buildingSelectItems: [], |
|||
unitSelectItems: [], |
|||
homeSelectItems: [], |
|||
orgTree: [], // 组织树 |
|||
// 组织树选项 |
|||
orgOptionProps: { |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
}, |
|||
|
|||
//表格数据 |
|||
selectedPersonListIds: [], // 选中的名单id列表 |
|||
personList: [], // 找到的人员名单 |
|||
epmetResultResolver: null |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
/** |
|||
* 行选中事件 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleTableRowsSelected(selection) { |
|||
this.selectedPersonListIds = selection.map(e => e.id); |
|||
}, |
|||
|
|||
/** |
|||
* 全选 |
|||
* @param selection |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleSelectAll(selection) { |
|||
this.selectedPersonListIds = selection.map(e => e.id); |
|||
}, |
|||
|
|||
/** |
|||
* 搜索事件 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleSearch () { |
|||
let url = '/actual/base/residentBaseInfo/commonServicePersonList/list' |
|||
this.searchFormData.tagId = this.tagId |
|||
this.searchFormData.serviceId = this.serviceId |
|||
let result = await requestPost(url, this.searchFormData) |
|||
|
|||
this.epmetResultResolver |
|||
.success((data) => { |
|||
this.personList = data.list; |
|||
this.total = data.total; |
|||
}) |
|||
.parse(result); |
|||
}, |
|||
|
|||
/** |
|||
* 标记享受服务人员 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleIncrementServeTimes() { |
|||
let params = { |
|||
recIds: this.selectedPersonListIds |
|||
}; |
|||
|
|||
let url = "/actual/base/residentBaseInfo/commonServicePersonList/incrementServeTimes"; |
|||
|
|||
const rst = await requestPost(url, params); |
|||
|
|||
this.epmetResultResolver.parse(result); |
|||
|
|||
// 重新加载列表 |
|||
this.handleSearch(); |
|||
}, |
|||
|
|||
/** |
|||
* 组织选择触发事件 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async initOrgTree () { |
|||
let url = '/gov/org/customeragency/agencygridtree' |
|||
const { data, code, msg } = await requestPost(url, {}) |
|||
if (code === 0) { |
|||
debugger |
|||
this.orgTree.push(data) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 加载和填充小区下拉框 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleOrgChange (selectedOrgNodes) { |
|||
let selectedLastNode = selectedOrgNodes[selectedOrgNodes.length - 1] |
|||
this.searchFormData.orgId = selectedLastNode |
|||
const { orgId, level } = this.getSelectedOrgIdAndType(selectedLastNode, this.orgTree) |
|||
let url = '/actual/base/communityQuarters/listQuartersOptions' |
|||
let params = {} |
|||
this.searchFormData.orgId = orgId |
|||
if (level === 'grid') { |
|||
params['gridId'] = orgId |
|||
this.searchFormData.orgType = 'grid' |
|||
} else { |
|||
params['agencyId'] = orgId |
|||
this.searchFormData.orgType = 'agency' |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.quartersSelectItems = data.map(e => { |
|||
return { |
|||
label: e.label, |
|||
value: e.value |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 小区选择器change，填充楼栋下拉框 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleQuarterSelectorsChange (quartersId) { |
|||
let url = '/actual/base/communityBuilding/buildingoption' |
|||
let params = { |
|||
quartersId: quartersId, |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.buildingSelectItems = data.map(e => { |
|||
return { |
|||
label: e.label, |
|||
value: e.value |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 楼栋选择器change，填充单元下拉框 |
|||
* @param selectedQuarter |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleBuildSelectorsChange (buildId) { |
|||
let url = '/actual/base/communityBuildingUnit/unitoption' |
|||
let params = { |
|||
buildingId: buildId, |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.unitSelectItems = data.map(e => { |
|||
return { |
|||
label: e.label, |
|||
value: e.value |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 单元下拉框选择器change，填充房屋 |
|||
* @param unitId |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
async handleUnitSelectorsChange (unitId) { |
|||
let url = '/actual/base/communityHouse/houseoption' |
|||
let params = { |
|||
unitId: unitId, |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.homeSelectItems = data.map(e => { |
|||
return { |
|||
label: e.label, |
|||
value: e.value, |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 递归搜索组织树，选出选中的节点 |
|||
* @param orgId |
|||
* @param orgList |
|||
* @returns {*} |
|||
*/ |
|||
getSelectedOrgIdAndType (orgId, orgList) { |
|||
for (let org of orgList) { |
|||
if (org.agencyId === orgId) { |
|||
return { orgId: org.agencyId, level: org.level } |
|||
} |
|||
|
|||
if (org.subAgencyList && org.subAgencyList.length > 0) { |
|||
let selectedOrg = this.getSelectedOrgIdAndType(orgId, org.subAgencyList) |
|||
if (selectedOrg) { |
|||
return selectedOrg |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 条数改变 |
|||
handleSizeChange (newPageSize) { |
|||
this.searchFormData.pageSize = newPageSize |
|||
this.handleSearch() |
|||
}, |
|||
|
|||
// 翻页 |
|||
handleCurrentChange (pageNo) { |
|||
this.searchFormData.pageNo = pageNo |
|||
this.handleSearch() |
|||
} |
|||
}, |
|||
props: { |
|||
serviceId: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
tagId: { |
|||
type: String, |
|||
required: true, |
|||
}, |
|||
serviceId: { |
|||
type: String, |
|||
required: true, |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/form-main.scss"; |
|||
|
|||
.btn-add-rule { |
|||
margin-left: 150px; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.item_width_short { |
|||
width: 380px; |
|||
} |
|||
|
|||
.item_rule { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.item_label { |
|||
flex: 0 0 150px; |
|||
line-height: 30px; |
|||
text-align: right; |
|||
padding-right: 12px; |
|||
} |
|||
|
|||
.item_label:before { |
|||
content: "*"; |
|||
color: #f56c6c; |
|||
margin-right: 4px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue