5 changed files with 2662 additions and 28 deletions
@ -0,0 +1,708 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div |
||||
|
class="dialog-h-content scroll-h" |
||||
|
:class="{ 'visiual-form': source === 'visiual' }" |
||||
|
> |
||||
|
<el-form |
||||
|
v-if="formType === 'add' || formType == 'edit'" |
||||
|
ref="ref_form" |
||||
|
:inline="true" |
||||
|
:model="formData" |
||||
|
:rules="dataRule" |
||||
|
class="div_form" |
||||
|
> |
||||
|
<!-- 服务类别 --> |
||||
|
<el-form-item |
||||
|
label="姓名" |
||||
|
style="display: block" |
||||
|
label-width="150px" |
||||
|
prop="name" |
||||
|
> |
||||
|
<el-input |
||||
|
class="input-width-small" |
||||
|
placeholder="请输入姓名" |
||||
|
v-model="formData.name" |
||||
|
> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="性别" |
||||
|
prop="gender" |
||||
|
label-width="150px" |
||||
|
:class="{ 'form-item': source === 'visiual' }" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<el-select |
||||
|
v-model="formData.gender" |
||||
|
class="input-width-small" |
||||
|
placeholder="请选择" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in genderArr" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="出生日期" |
||||
|
label-width="150px" |
||||
|
:class="{ 'form-item': source === 'visiual' }" |
||||
|
prop="birthday" |
||||
|
> |
||||
|
<el-date-picker |
||||
|
v-model="formData.birthday" |
||||
|
class="item_width_2" |
||||
|
style="width: 220px" |
||||
|
type="date" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
value="yyyy-MM-dd" |
||||
|
placeholder="出生日期" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="民族" |
||||
|
prop="nation" |
||||
|
label-width="150px" |
||||
|
:class="{ 'form-item': source === 'visiual' }" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<el-select |
||||
|
v-model="formData.nation" |
||||
|
class="input-width-small" |
||||
|
placeholder="请选择" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in nationArr" |
||||
|
: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="idCard" |
||||
|
> |
||||
|
<el-input |
||||
|
class="input-width-small" |
||||
|
placeholder="请输入证件号" |
||||
|
v-model="formData.idCard" |
||||
|
> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="联系电话" |
||||
|
style="display: block" |
||||
|
label-width="150px" |
||||
|
prop="phone" |
||||
|
> |
||||
|
<el-input |
||||
|
class="input-width-small" |
||||
|
placeholder="请输入联系电话" |
||||
|
v-model="formData.phone" |
||||
|
> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="文化程度" prop="eduLevel"> |
||||
|
<el-select |
||||
|
class="u-item-width-normal" |
||||
|
v-model="formData.eduLevel" |
||||
|
placeholder="全部" |
||||
|
size="small" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in eduArray" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="政策依据" |
||||
|
prop="policyId" |
||||
|
label-width="150px" |
||||
|
:class="{ 'form-item': source === 'visiual' }" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<el-select |
||||
|
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" |
||||
|
:class="{ 'form-item': source === 'visiual' }" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<el-input |
||||
|
class="item_width_1" |
||||
|
placeholder="请输入联系人姓名" |
||||
|
v-model="formData.principalName" |
||||
|
> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
label="联系方式" |
||||
|
prop="principalContact" |
||||
|
:class="{ 'form-item': source === 'visiual' }" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<el-input |
||||
|
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="formData.assignSwitch" |
||||
|
@change="handelDisabledRules" |
||||
|
> |
||||
|
</el-switch> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="查找享受服务人员" |
||||
|
prop="resiSearchTagId" |
||||
|
:class="{ 'form-item': source === 'visiual' }" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
v-if="formData.assignSwitch" |
||||
|
> |
||||
|
<input |
||||
|
type="text" |
||||
|
v-model="formData.resiSearchTagId" |
||||
|
v-show="false" |
||||
|
/> |
||||
|
<template v-if="formData.resiSearchTagName"> |
||||
|
<el-tag @close="handleCloseTag" closable style="margin-right: 10px"> |
||||
|
{{ formData.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="服务方" |
||||
|
prop="serviceOrgId" |
||||
|
label-width="150px" |
||||
|
:class="{ 'form-item': source === 'visiual' }" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<el-select |
||||
|
v-model="formData.serviceOrgType" |
||||
|
class="input-width-small" |
||||
|
placeholder="请选择" |
||||
|
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="input-width-middle" |
||||
|
filterable |
||||
|
placeholder="请选择" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in serviceOptiondList" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item |
||||
|
label="直接反馈" |
||||
|
prop="remark" |
||||
|
label-width="150px" |
||||
|
:class="{ 'form-item': source === 'visiual' }" |
||||
|
style="display: block" |
||||
|
> |
||||
|
<el-checkbox |
||||
|
:label="'是'" |
||||
|
v-model="showFeedback" |
||||
|
@change="handleChangeFeedback" |
||||
|
></el-checkbox> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="div_btn"> |
||||
|
<el-button size="small" @click="handleCancle">取 消</el-button> |
||||
|
<el-button |
||||
|
size="small" |
||||
|
type="primary" |
||||
|
:disabled="btnDisable" |
||||
|
@click="handleComfirm" |
||||
|
>确 定</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { Loading } from "element-ui"; // 引入Loading服务 |
||||
|
import { requestPost, requestGet } from "@/js/dai/request"; |
||||
|
// import personList from "../policy/personList"; |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
// import labelForm from "../labelConfig/addForm.vue"; |
||||
|
import { computedCard } from '@/utils/index' |
||||
|
|
||||
|
let loading; // 加载动画 |
||||
|
let map; |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
|
||||
|
serviceRecordId: { |
||||
|
type: String, |
||||
|
required: "", |
||||
|
}, |
||||
|
serviceCategoryKey: { |
||||
|
type: String, |
||||
|
required: "", |
||||
|
}, |
||||
|
|
||||
|
formType: { |
||||
|
//表单操作类型 add新增，edit编辑，detail详情,feedback反馈 |
||||
|
type: String, |
||||
|
required: "", |
||||
|
}, |
||||
|
|
||||
|
source: { |
||||
|
//展示来源：manage 管理平台 visiual 可视化平台 |
||||
|
type: String, |
||||
|
default: "manage", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
let endDisabledDate = (time) => { |
||||
|
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now(); |
||||
|
if (this.formData.serviceTimeStart) { |
||||
|
let serviceTimeStart = new Date(this.formData.serviceTimeStart); |
||||
|
return ( |
||||
|
time.getTime() < serviceTimeStart - 24 * 60 * 60 * 1000 || |
||||
|
time.getTime() === serviceTimeStart - 24 * 60 * 60 * 1000 |
||||
|
); |
||||
|
} else { |
||||
|
return time.getTime() > nowData || time.getTime() === nowData; |
||||
|
} |
||||
|
}; |
||||
|
let startDisabledDate = (time) => { |
||||
|
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now() - 24 * 60 * 60 * 1000; |
||||
|
return time.getTime() < nowData; |
||||
|
}; |
||||
|
|
||||
|
return { |
||||
|
// 公共服务分类 |
||||
|
serviceTypesLevel1: [], |
||||
|
serviceTypesLevel2: [], |
||||
|
|
||||
|
btnDisable: false, |
||||
|
casOptions: [], |
||||
|
scopeIdArray: [], |
||||
|
iscascaderShow: 0, |
||||
|
|
||||
|
optionProps: { |
||||
|
multiple: true, |
||||
|
value: "objectId", |
||||
|
label: "objectName", |
||||
|
children: "children", |
||||
|
checkStrictly: true, |
||||
|
emitPath: false, |
||||
|
}, |
||||
|
|
||||
|
formData: { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
genderArr:[ |
||||
|
{label:'男',value:'1'}, |
||||
|
{label:'女',value:'2'}, |
||||
|
], |
||||
|
nationArr:[], |
||||
|
// endPickerOptions: { |
||||
|
// disabledDate: endDisabledDate, |
||||
|
// }, |
||||
|
// startPickerOptions: { |
||||
|
// disabledDate: startDisabledDate, |
||||
|
// }, |
||||
|
|
||||
|
showFeedback: false, |
||||
|
serviceOptions: [], |
||||
|
serviceOptiondList: [], |
||||
|
policyList: [], |
||||
|
|
||||
|
fileList: [], |
||||
|
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile", |
||||
|
|
||||
|
policyId: "", |
||||
|
showPersonList: false, |
||||
|
ruleList: [], |
||||
|
firstInitMap: true, |
||||
|
|
||||
|
categrayOptions: [], |
||||
|
|
||||
|
|
||||
|
showLabelForm: false, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
|
||||
|
dataRule() { |
||||
|
return { |
||||
|
// serviceTypeLevel2Id: [ |
||||
|
// { required: true, message: "政策类型不能为空", trigger: "change" }, |
||||
|
// ], |
||||
|
// serviceName: [ |
||||
|
// { required: true, message: "服务名称不能为空", trigger: "change" }, |
||||
|
// ], |
||||
|
// serviceOrgId: [ |
||||
|
// { required: true, message: "服务组织不能为空", trigger: "change" }, |
||||
|
// ], |
||||
|
|
||||
|
// serviceTimeStart: [ |
||||
|
// { required: true, message: "服务时间不能为空", trigger: "change" }, |
||||
|
// ], |
||||
|
// objList: [ |
||||
|
// { required: true, message: "服务范围不能为空", trigger: "change" }, |
||||
|
// ], |
||||
|
// resiSearchTagId: [ |
||||
|
// { |
||||
|
// required: true, |
||||
|
// message: "享受服务人员不能为空", |
||||
|
// trigger: "change", |
||||
|
// }, |
||||
|
// ], |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
components: {}, |
||||
|
|
||||
|
async mounted() { |
||||
|
this.startLoading(); |
||||
|
// 都已经重置了，还放在prop里干嘛，我不理解 |
||||
|
|
||||
|
this.getDictOptions(); |
||||
|
|
||||
|
if (this.formType === "add") { |
||||
|
// await this.loadScopeTree(); |
||||
|
} else { |
||||
|
} |
||||
|
|
||||
|
|
||||
|
this.endLoading(); |
||||
|
// 服务分类下拉（其实是获取的共性服务分类） |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
|
||||
|
addFormOk(val) { |
||||
|
this.showLabelForm = false; |
||||
|
this.formData.resiSearchTagId = val.tagId; |
||||
|
this.formData.resiSearchTagName = val.tagName; |
||||
|
}, |
||||
|
addFormCancle() { |
||||
|
this.showLabelForm = false; |
||||
|
}, |
||||
|
handleCloseTag() { |
||||
|
this.formData.resiSearchTagId = ""; |
||||
|
this.formData.resiSearchTagName = ""; |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
//加载组织数据 |
||||
|
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; |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
//字典 |
||||
|
async getDictOptions() { |
||||
|
this.$http |
||||
|
.post("/sys/dict/data/dictlist", { |
||||
|
dictType: "user_demand_service_type", |
||||
|
}) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg); |
||||
|
} else { |
||||
|
this.serviceOptions = res.data; |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
return this.$message.error("网络错误"); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
//字典 |
||||
|
async getServiceuserList(serverOrgType) { |
||||
|
|
||||
|
const url = "/actual/base/serviceitem/listServerOrg"; |
||||
|
let params = { |
||||
|
serviceTypeId: this.formData.serviceTypeLevel2Id, |
||||
|
serverOrgType: serverOrgType, |
||||
|
businessType: "common_service", |
||||
|
}; |
||||
|
let { data, code, msg } = await requestPost(url, params); |
||||
|
if (code == 0) { |
||||
|
this.serviceOptiondList = data; |
||||
|
} else if (code >= 8000) { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async handleComfirm() { |
||||
|
if (this.formType === "add") { |
||||
|
this.handleAdd(); |
||||
|
} else if (this.formType === "feedback") { |
||||
|
this.handleFeedback(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async handleAdd() { |
||||
|
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.addFuwu(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
async addFuwu() { |
||||
|
|
||||
|
console.log(this.formData); |
||||
|
// return false |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
const url = "/governance/icServiceRecordV2/add"; |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/245/governance/icServiceProject/service/initiate' |
||||
|
let params = { |
||||
|
...this.formData, |
||||
|
}; |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message.success("发起成功"); |
||||
|
this.resetData(); |
||||
|
this.$emit("handleOk"); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async handleFeedback() { |
||||
|
this.btnDisable = true; |
||||
|
setTimeout(() => { |
||||
|
this.btnDisable = false; |
||||
|
}, 10000); |
||||
|
|
||||
|
this.$refs["ref_form_feedback"].validate((valid, messageObj) => { |
||||
|
if (!valid) { |
||||
|
app.util.validateRule(messageObj); |
||||
|
this.btnDisable = false; |
||||
|
} else { |
||||
|
this.addFeecback(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
async addFeecback() { |
||||
|
this.feedbackFormData.fileList = []; |
||||
|
this.feedbackFormData.fileList = [...this.fileList]; |
||||
|
this.feedbackFormData.serviceRecordId = this.serviceRecordId; |
||||
|
|
||||
|
console.log(this.feedbackFormData); |
||||
|
// return false |
||||
|
|
||||
|
const url = "/governance/icServiceFeedbackV2/add"; |
||||
|
|
||||
|
let params = { |
||||
|
...this.feedbackFormData, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message.success("反馈成功"); |
||||
|
this.resetData(); |
||||
|
this.$emit("handleOk"); |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
resetData() { |
||||
|
this.formData = { |
||||
|
serviceTypeLevel1Id: "", // 公共服务（政策级别）一级分类id |
||||
|
serviceTypeLevel2Id: "", // 公共服务（政策级别）二级分类id |
||||
|
objList: [], // |
||||
|
principalName: "", //经办人(责任人)姓名 |
||||
|
principalContact: "", //经办人联系方式 |
||||
|
serviceTimeStart: "", //服务起始时间yyyy-MM-dd |
||||
|
serviceTimeEnd: "", //服务截止时间yyyy-MM-dd |
||||
|
remark: "", // |
||||
|
feedback: {}, //反馈。允许发起服务的时候直接填写反馈，完成服务。 |
||||
|
}; |
||||
|
this.feedbackFormData = { |
||||
|
serviceGoal: "", // 服务目标 |
||||
|
serviceEffect: "", // 服务效果 |
||||
|
servicePeopleNumber: null, // 服务人数 |
||||
|
serviceStatus: "completed", // 服务状态。in_service服务中；completed:已完成 |
||||
|
satisfaction: "", //满意度。不满意:bad、基本满意:good、非常满意:perfect |
||||
|
longitude: "", // 经度 |
||||
|
latitude: "", // 维度 |
||||
|
address: "", |
||||
|
fileList: [], // 附件列表 |
||||
|
}; |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
startLoading() { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: "正在加载……", // 加载中需要显示的文字 |
||||
|
background: "rgba(0,0,0,.7)", // 背景颜色 |
||||
|
}); |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading() { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close(); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/modules/management/form-main.scss"; |
||||
|
@import "@/assets/scss/modules/visual/a_customize.scss"; |
||||
|
|
||||
|
.form-item::v-deep .el-form-item__label { |
||||
|
color: #fff; |
||||
|
} |
||||
|
.form-item { |
||||
|
.el-radio { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.el-checkbox { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,418 @@ |
|||||
|
<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 { Loading } from "element-ui"; // 引入Loading服务 |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
// import personList from "../policy/personList"; |
||||
|
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() { |
||||
|
await this.getPolicyList(); |
||||
|
// 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 getPolicyList() { |
||||
|
const url = "/governance/policy/policyListSelect"; |
||||
|
|
||||
|
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/icServiceRecordV2/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.policyName = ""; |
||||
|
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.policyList.forEach((element) => { |
||||
|
if (this.formData.policyId === element.policyId) { |
||||
|
this.formData.policyName = element.title; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
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,800 @@ |
|||||
|
<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="resiSearchTagId" |
||||
|
label-width="150px" |
||||
|
style="display: block" |
||||
|
v-if="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="地址" |
||||
|
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 |
||||
|
class="block" |
||||
|
label="附件" |
||||
|
label-width="150px" |
||||
|
prop="attach" |
||||
|
> |
||||
|
|
||||
|
<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> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { Loading } from "element-ui"; // 引入Loading服务 |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
// import personList from "../policy/personList"; |
||||
|
// 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() < serviceTimeStart - 24 * 60 * 60 * 1000 || |
||||
|
time.getTime() === serviceTimeStart - 24 * 60 * 60 * 1000 |
||||
|
); |
||||
|
} else { |
||||
|
return time.getTime() > nowData || time.getTime() === nowData; |
||||
|
} |
||||
|
}; |
||||
|
let startDisabledDate = (time) => { |
||||
|
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now() - 24 * 60 * 60 * 1000; |
||||
|
return time.getTime() < nowData; |
||||
|
}; |
||||
|
|
||||
|
return { |
||||
|
btnDisable: false, |
||||
|
|
||||
|
keyWords: "", |
||||
|
assignSwitch: false, |
||||
|
formData: {}, |
||||
|
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: { }, |
||||
|
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/policyListSelect"; |
||||
|
|
||||
|
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/icServiceRecordV2/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 = this.resiSearchTagName ? true : false; |
||||
|
} 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); |
||||
|
this.formData.resiSearchTagId = this.assignSwitch |
||||
|
? this.formData.resiSearchTagId |
||||
|
: ""; |
||||
|
this.formData.resiSearchTagName = this.assignSwitch |
||||
|
? this.formData.resiSearchTagName |
||||
|
: ""; |
||||
|
let url = "/governance/icServiceRecordV2/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 { |
||||
|
resiSearchTagId: [ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: "享受服务人员不能为空", |
||||
|
trigger: "change", |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
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,708 @@ |
|||||
|
<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="name" label="姓名"> |
||||
|
<el-input |
||||
|
v-model="formData.name" |
||||
|
class="u-item-width-normal" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入" |
||||
|
> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="性别" prop="gender"> |
||||
|
<el-select |
||||
|
v-model="formData.gender" |
||||
|
class="u-item-width-daterange" |
||||
|
placeholder="请选择" |
||||
|
size="small" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in genderList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="年龄" prop="age"> |
||||
|
<el-input |
||||
|
v-model="formData.age" |
||||
|
class="u-item-width-normal" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入" |
||||
|
> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="证件号" prop="idCard"> |
||||
|
<el-input |
||||
|
v-model="formData.idCard" |
||||
|
class="u-item-width-normal" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入" |
||||
|
> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="文化程度" prop="eduLevel"> |
||||
|
<el-select |
||||
|
class="u-item-width-normal" |
||||
|
v-model="formData.eduLevel" |
||||
|
placeholder="全部" |
||||
|
size="small" |
||||
|
clearable |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in eduArray" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="岗位类型" prop="jobPost"> |
||||
|
<el-select |
||||
|
class="u-item-width-normal" |
||||
|
placeholder="全部" |
||||
|
v-model="formData.jobPost" |
||||
|
size="small" |
||||
|
clearable |
||||
|
multiple |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in jobPostArray" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="入职时间" prop="hiredateEnd"> |
||||
|
<el-date-picker v-model="formData.hiredateStr" |
||||
|
: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.hiredateEnd" |
||||
|
:picker-options="endPickerOptions" |
||||
|
class="u-item-width-daterange u-data-tag" |
||||
|
size="small" |
||||
|
type="date" |
||||
|
value-format="yyyy-MM-dd-ss" |
||||
|
value="yyyy-MM-dd-ss" |
||||
|
placeholder="结束时间"> |
||||
|
</el-date-picker> |
||||
|
</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 |
||||
|
> |
||||
|
</div> |
||||
|
|
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
border |
||||
|
v-loading="tableLoading" |
||||
|
class="m-table-item" |
||||
|
style="width: 100%" |
||||
|
:height="maxTableHeight" |
||||
|
> |
||||
|
<el-table-column |
||||
|
label="序号" |
||||
|
fixed="left" |
||||
|
type="index" |
||||
|
align="center" |
||||
|
width="50" |
||||
|
/> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="name" |
||||
|
align="center" |
||||
|
min-width="150" |
||||
|
label="姓名" |
||||
|
:show-overflow-tooltip="true" |
||||
|
> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="gender" |
||||
|
label="性别" |
||||
|
align="center" |
||||
|
min-width="150" |
||||
|
:show-overflow-tooltip="true" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.gender==1?'男':'女' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
prop="address" |
||||
|
align="center" |
||||
|
min-width="150" |
||||
|
label="现居住地" |
||||
|
:show-overflow-tooltip="true" |
||||
|
> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="idCard" |
||||
|
align="center" |
||||
|
min-width="150" |
||||
|
label="证件号" |
||||
|
:show-overflow-tooltip="true" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span |
||||
|
>{{ scope.row.idCard.substr(0,10)+'******'+scope.row.idCard.substr(14,4) }}</span |
||||
|
> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="phone" |
||||
|
align="center" |
||||
|
min-width="150" |
||||
|
label="联系电话" |
||||
|
:show-overflow-tooltip="true" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span |
||||
|
>{{ scope.row.phone.substr(0,3)+'****'+scope.row.phone.substr(7,4) }}</span |
||||
|
> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="jobPost" |
||||
|
align="center" |
||||
|
min-width="150" |
||||
|
label="岗位类型" |
||||
|
:show-overflow-tooltip="true" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<span |
||||
|
>{{jobPostStr(scope.row.jobPost) }}</span |
||||
|
> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- 我需要从一个数组中筛选出多个符合条件的并返回它的lable --> |
||||
|
<el-table-column |
||||
|
prop="hiredate" |
||||
|
align="center" |
||||
|
width="200" |
||||
|
:show-overflow-tooltip="true" |
||||
|
label="入职时间" |
||||
|
> |
||||
|
<!-- <template slot-scope="scope"> |
||||
|
<span |
||||
|
>{{ scope.row.serviceTimeStart }}至{{ |
||||
|
scope.row.serviceTimeEnd |
||||
|
}}</span |
||||
|
> |
||||
|
</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 |
||||
|
> |
||||
|
<!-- v-if="scope.row.serviceStatus === 'in_service'" --> |
||||
|
<el-button |
||||
|
|
||||
|
@click="handleEdit(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 |
||||
|
> |
||||
|
<!-- v-if="scope.row.serviceStatus === 'in_service'" --> |
||||
|
<el-button |
||||
|
@click="handleFeedback(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" |
||||
|
:eduArray="eduArray" |
||||
|
: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" |
||||
|
: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" |
||||
|
:statusArray="statusArray" |
||||
|
@diaDetailClose="diaDetailClose" |
||||
|
> |
||||
|
</detail-form> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
import { mapGetters } from "vuex"; |
||||
|
import axios from "axios"; |
||||
|
import addForm from "./addForm"; |
||||
|
import detailForm from "./detailForm"; |
||||
|
import editForm from "./editForm"; |
||||
|
import feedBackForm from "./addForm"; |
||||
|
|
||||
|
export default { |
||||
|
components: { addForm, detailForm, feedBackForm, editForm }, |
||||
|
|
||||
|
data() { |
||||
|
let endDisabledDate = (time) => { |
||||
|
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键 |
||||
|
let nowData = Date.now(); |
||||
|
if (this.formData.hiredateStr) { |
||||
|
let hiredateStr = new Date(this.formData.hiredateStr); |
||||
|
return ( |
||||
|
time.getTime() < hiredateStr- 24 * 60 * 60 * 1000 || |
||||
|
time.getTime() === hiredateStr- 24 * 60 * 60 * 1000 |
||||
|
); |
||||
|
} else { |
||||
|
return (time.getTime() > nowData || time.getTime() === nowData) ; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
return { |
||||
|
// 公共服务分类 |
||||
|
serviceTypesLevel2: [], |
||||
|
tableLoading: false, |
||||
|
user: {}, |
||||
|
agencyId: "", |
||||
|
searchH: 170, |
||||
|
tableData: [], |
||||
|
genderList:[ |
||||
|
{label:'男',value:'1'}, |
||||
|
{label:'女',value:'2'} |
||||
|
], |
||||
|
|
||||
|
formData: { |
||||
|
name: "", |
||||
|
phone: "", |
||||
|
age: "", |
||||
|
idCard: "", |
||||
|
gender: "", |
||||
|
eduLevel: "", |
||||
|
jobPost: [], |
||||
|
hiredateStr: "", |
||||
|
hiredateEnd: "" |
||||
|
}, |
||||
|
pageNo: 1, |
||||
|
total: 1, |
||||
|
pageSize: window.localStorage.getItem("pageSize") || 20, |
||||
|
|
||||
|
endPickerOptions: { |
||||
|
disabledDate: endDisabledDate, |
||||
|
}, |
||||
|
startPickerOptions: { |
||||
|
// disabledDate: startDisabledDate |
||||
|
}, |
||||
|
serviceRecordId: "", |
||||
|
serviceName: "", |
||||
|
serviceOrgName: "", |
||||
|
|
||||
|
showAdd: false, |
||||
|
showEdit: false, |
||||
|
showDetail: false, |
||||
|
showFeedback: false, |
||||
|
formType: "add", |
||||
|
addDiaTitle: "发起服务", |
||||
|
detailDiaTitle: "服务详情", |
||||
|
|
||||
|
eduArray: [], |
||||
|
jobPostArray: [], |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
maxTableHeight() { |
||||
|
const h = this.clientHeight - this.searchH - 275 + this.iframeHeight; |
||||
|
const _h = this.clientHeight - 275 - this.searchH; |
||||
|
return this.$store.state.inIframe ? h : _h; |
||||
|
}, |
||||
|
jobPostStr(){ |
||||
|
return function(arr) { |
||||
|
let str = '' |
||||
|
let arrs = [...this.jobPostArray] |
||||
|
arrs.forEach(item=>{ |
||||
|
arr.map(items=>{ |
||||
|
if(item.value == items){ |
||||
|
str += item.label + ' ' |
||||
|
} |
||||
|
return arr |
||||
|
}) |
||||
|
}) |
||||
|
return str |
||||
|
} |
||||
|
}, |
||||
|
...mapGetters(["clientHeight", "iframeHeight"]), |
||||
|
}, |
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
created(){ |
||||
|
this.getEducDict() |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log(this.$store.state); |
||||
|
this.user = this.$store.state.user; |
||||
|
this.agencyId = this.user.agencyId; |
||||
|
this.getWelfareDict() |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
handleSearch(val) { |
||||
|
console.log(this.formData); |
||||
|
this.pageNo = 1; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
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.detailDiaTitle = "编辑服务" |
||||
|
this.serviceRecordId = row.serviceRecordId; |
||||
|
this.serviceOrgName = row.serviceOrgName; |
||||
|
this.formType = "edit"; |
||||
|
this.showEdit = 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(); |
||||
|
}) |
||||
|
.catch((err) => { |
||||
|
if (err == "cancel") { |
||||
|
// this.$message({ |
||||
|
// type: "info", |
||||
|
// message: "已取消删除" |
||||
|
// }); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//删除 |
||||
|
async cancelFuwu() { |
||||
|
const url = "/governance/icServiceRecordV2/cancel"; |
||||
|
let params = { |
||||
|
serviceRecordId: this.serviceRecordId, |
||||
|
}; |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message.success("取消成功！"); |
||||
|
this.getTableData(); |
||||
|
} else { |
||||
|
this.$message.error("操作失败！"); |
||||
|
} |
||||
|
}, |
||||
|
//列表 |
||||
|
async getTableData() { |
||||
|
this.tableLoading = true; |
||||
|
const url = "/actual/base/publicWelfarePost/list"; |
||||
|
|
||||
|
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 || 0; |
||||
|
this.tableData = data.list; |
||||
|
} else { |
||||
|
this.$message.error(msg); |
||||
|
} |
||||
|
}, |
||||
|
//导出 |
||||
|
async handleExport() { |
||||
|
//导出改接口-公共服务 |
||||
|
// const url = "/gov/project/icEvent/export"; |
||||
|
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.ms-excel" }); |
||||
|
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 = { |
||||
|
name: "", |
||||
|
phone: "", |
||||
|
age: "", |
||||
|
idCard: "", |
||||
|
gender: "", |
||||
|
eduLevel: "", |
||||
|
jobPost: [], |
||||
|
hiredateStr: "", |
||||
|
hiredateEnd: "" |
||||
|
}; |
||||
|
|
||||
|
this.pageNo = 1; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
async getEducDict(){ |
||||
|
try { |
||||
|
let { data } = await this.$http.post('sys/dict/data/education',{formCode: "resi_base_info"}) |
||||
|
this.eduArray = data.data |
||||
|
} catch (error) { |
||||
|
console.log(error,'获取民族字典'); |
||||
|
} |
||||
|
}, |
||||
|
async getWelfareDict(){ |
||||
|
try { |
||||
|
const { data } = await this.$http.post('sys/dict/data/dictlist', {'dictType':'welfare_post'}) |
||||
|
this.jobPostArray = data.data |
||||
|
} catch (error) { |
||||
|
console.log(error,'获取公益岗位字典'); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
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> |
||||
Loading…
Reference in new issue