jiangyy
3 years ago
9 changed files with 5016 additions and 124 deletions
@ -0,0 +1,960 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
|
|||
<el-form v-if="formType==='add'" |
|||
ref="ref_form" |
|||
:inline="true" |
|||
:model="formData" |
|||
:rules="dataRule" |
|||
class="div_form"> |
|||
|
|||
<el-form-item label="服务分类" |
|||
label-width="150px" |
|||
prop="serviceCategoryKey"> |
|||
<el-select v-model="formData.serviceCategoryKey" |
|||
placeholder="请选择" |
|||
clearable |
|||
class="item_width_1"> |
|||
<el-option v-for="(item,index) in categrayArray" |
|||
@click.native="hancleClickCategray(index)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务项目" |
|||
prop="serviceProjectId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<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"> |
|||
<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="serviceScope" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<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="principalName" |
|||
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" |
|||
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" |
|||
prop="serviceTimeStart"> |
|||
<el-date-picker v-model="formData.serviceTimeStart" |
|||
:picker-options="startPickerOptions" |
|||
class="item_width_2" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<span class="data-tag">至</span> |
|||
<el-date-picker v-model="formData.serviceTimeEnd" |
|||
:picker-options="endPickerOptions" |
|||
class="item_width_2 data-tag" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
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 class="item_width_1" |
|||
type="textarea" |
|||
maxlength="1000" |
|||
show-word-limit |
|||
:rows="3" |
|||
placeholder="请输入备注，不超过1000字" |
|||
v-model="formData.remark"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="直接反馈" |
|||
prop="remark" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-checkbox :label="'是'" |
|||
v-model="showFeedback" |
|||
@change="handleChangeFeedback"></el-checkbox> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
<div v-show="formType==='feedback'||showFeedback"> |
|||
<!-- <h3 class="d-h3">反馈内容</h3> --> |
|||
|
|||
<el-form ref="ref_form_feedback" |
|||
:inline="true" |
|||
:model="feedbackFormData" |
|||
:rules="feedbackDataRule" |
|||
class="div_form"> |
|||
|
|||
<el-form-item label="服务项目" |
|||
prop="serviceProjectName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span v-if="feedbackFormData.serviceProjectName">{{feedbackFormData.serviceProjectName}}</span> |
|||
<span v-else>--</span> |
|||
|
|||
</el-form-item> |
|||
|
|||
<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_1" |
|||
v-model="feedbackFormData.servicePeopleNumber" |
|||
:min="0" |
|||
:max="9999" |
|||
label="服务人数"></el-input-number> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务状态" |
|||
label-width="150px" |
|||
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="满意度" |
|||
label-width="150px" |
|||
prop="satisfaction"> |
|||
<el-select class="item_width_1" |
|||
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 class="upload-demo" |
|||
:action="uploadUlr" |
|||
accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3" |
|||
:on-success="handleFileSuccess" |
|||
:on-remove="handleFileRemove" |
|||
:limit="3" |
|||
:before-upload="beforeUpload" |
|||
:file-list="fileList"> |
|||
<el-button size="small" |
|||
:disabled="fileList.length===3" |
|||
type="primary">点击上传</el-button> |
|||
<div slot="tip" |
|||
class="el-upload__tip">支持图片、word、pdf</div> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</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 { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
|
|||
|
|||
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, |
|||
casOptions: [], |
|||
scopeIdArray: [], |
|||
iscascaderShow: 0, |
|||
|
|||
optionProps: { |
|||
multiple: true, |
|||
value: 'objectId', |
|||
label: 'objectName', |
|||
children: 'children', |
|||
checkStrictly: true |
|||
}, |
|||
|
|||
keyWords: '', |
|||
formData: { |
|||
serviceCategoryKey: '',//服务分类id |
|||
serviceProjectId: '',//服务项目id |
|||
serviceOrgId: '',//服务组织id |
|||
serviceScope: [],// |
|||
principalName: '',//经办人(责任人)姓名 |
|||
principalContact: '',//经办人联系方式 |
|||
serviceTimeStart: '',//服务起始时间yyyy-MM-dd |
|||
serviceTimeEnd: '',//服务截止时间yyyy-MM-dd |
|||
remark: '',// |
|||
feedback: {},//反馈。允许发起服务的时候直接填写反馈，完成服务。 |
|||
|
|||
}, |
|||
feedbackFormData: { |
|||
serviceProjectId: '',// 服务项目id |
|||
serviceProjectName: '', |
|||
serviceGoal: '',// 服务目标 |
|||
serviceEffect: '',// 服务效果 |
|||
servicePeopleNumber: null,// 服务人数 |
|||
serviceStatus: 'completed',// 服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度。不满意:bad、基本满意:good、非常满意:perfect |
|||
longitude: '',// 经度 |
|||
latitude: '',// 维度 |
|||
address: '', |
|||
attachmentList: [],// 附件列表 |
|||
}, |
|||
|
|||
projectList: [],//服务项目list |
|||
orgList: [],//服务组织list |
|||
|
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
|
|||
showFeedback: true, |
|||
|
|||
|
|||
fileList: [], |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile', |
|||
|
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
"formData.serviceTimeEnd": function (val) { |
|||
if (val && val != '') { |
|||
let arrayTemp = val.split(' ') |
|||
this.formData.serviceTimeEnd = arrayTemp[0] + ' 23:59:59' |
|||
} |
|||
|
|||
}, |
|||
}, |
|||
components: {}, |
|||
async mounted () { |
|||
this.startLoading() |
|||
this.initMap() |
|||
this.$refs.ref_form_feedback.resetFields(); |
|||
if (this.formType === 'add') { |
|||
this.$refs.ref_form.resetFields(); |
|||
await this.loadScopeTree() |
|||
} else { |
|||
this.$set(this.feedbackFormData, 'serviceProjectName', this.serviceProjectName) |
|||
|
|||
} |
|||
|
|||
this.endLoading() |
|||
|
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
handleChangeFeedback (val) { |
|||
this.showFeedback = val |
|||
|
|||
}, |
|||
|
|||
hancleClickCategray () { |
|||
this.formData.serviceProjectId = '' |
|||
this.formData.serviceOrgId = '' |
|||
//获取服务项目 |
|||
this.loadProjectList() |
|||
//获取服务组织 |
|||
this.loadOrgList() |
|||
}, |
|||
|
|||
hancleClickProject (index) { |
|||
this.feedbackFormData.serviceProjectId = this.projectList[index].serviceProjectId |
|||
this.feedbackFormData.serviceProjectName = this.projectList[index].serviceName |
|||
}, |
|||
|
|||
// 获取服务范围树 |
|||
loadScopeTree () { |
|||
const url = '/gov/org/icServiceProject/service/serviceScopeTree' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree' |
|||
let params = {} |
|||
window.app.ajax.post( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
//组织级联数据 |
|||
++this.iscascaderShow |
|||
this.casOptions = [] |
|||
this.scopeIdArray = [] |
|||
this.casOptions.push(data) |
|||
|
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg) |
|||
} |
|||
) |
|||
|
|||
}, |
|||
|
|||
|
|||
handleChangeScope (value) { |
|||
this.formData.serviceScope = [] |
|||
let selArray = this.$refs["myCascader"].getCheckedNodes() |
|||
selArray.forEach(element => { |
|||
|
|||
let obj = { |
|||
objectType: element.data.objectType === 'grid' ? 'grid' : element.data.objectType === 'neighborhood' ? 'neighborhood' : 'agency', |
|||
objectId: element.data.objectId, |
|||
objectName: element.data.objectName, |
|||
} |
|||
this.formData.serviceScope.push(obj) |
|||
}); |
|||
|
|||
}, |
|||
|
|||
//加载组织 |
|||
async loadProjectList () { |
|||
const url = '/heart/icServiceProject/serviceProjectList' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icServiceProject/serviceProjectList' |
|||
let params = { |
|||
isPage: false, |
|||
serviceCategoryKey: this.formData.serviceCategoryKey, |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.projectList = [...data.list] |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//加载组织 |
|||
async loadOrgList () { |
|||
const url = '/heart/icServiceOrg/selectlist' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icServiceOrg/selectlist' |
|||
let params = { |
|||
serviceType: this.formData.serviceCategoryKey, |
|||
|
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.orgList = data |
|||
} else { |
|||
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 { |
|||
|
|||
if (this.showFeedback) { |
|||
this.$refs['ref_form_feedback'].validate((valid, messageObj) => { |
|||
if (!valid) { |
|||
app.util.validateRule(messageObj) |
|||
this.btnDisable = false |
|||
} else { |
|||
this.formData.feedback = { ...this.feedbackFormData } |
|||
this.addFuwu() |
|||
|
|||
|
|||
} |
|||
|
|||
}) |
|||
} else { |
|||
this.addFuwu() |
|||
} |
|||
|
|||
} |
|||
|
|||
}) |
|||
|
|||
}, |
|||
|
|||
async addFuwu () { |
|||
if (this.showFeedback) { |
|||
this.feedbackFormData.attachmentList = [] |
|||
this.feedbackFormData.attachmentList = [...this.fileList] |
|||
this.formData.feedback = { ... this.feedbackFormData } |
|||
} else { |
|||
this.formData.feedback = null |
|||
} |
|||
|
|||
|
|||
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 = '/heart/icServiceProject/service/initiate' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/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.attachmentList = [] |
|||
this.feedbackFormData.attachmentList = [...this.fileList] |
|||
this.feedbackFormData.serviceRecordId = this.serviceRecordId |
|||
|
|||
console.log(this.feedbackFormData) |
|||
// return false |
|||
|
|||
const url = '/heart/icServiceProject/service/feedback' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icServiceProject/service/initiate' |
|||
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) |
|||
} |
|||
}, |
|||
|
|||
beforeUpload (file) { |
|||
const array = file.name.split('.') |
|||
const extension = array[array.length - 1] |
|||
|
|||
const formatarray = ['jpg', 'png', 'jpeg', 'bmp', 'mp4', 'wma', 'm4a', 'mp3', 'doc', 'docx', 'xls', 'xlsx', 'pdf'] |
|||
|
|||
if (formatarray.indexOf(extension) === -1) { |
|||
this.$message.error('只支持图片、word、pdf') |
|||
return false |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleFileRemove (file) { |
|||
|
|||
if (file && file.status === "success") { |
|||
this.fileList.splice(this.fileList.findIndex(item => item.uid === file.uid), 1) |
|||
} |
|||
}, |
|||
|
|||
handleFileSuccess (res, file) { |
|||
|
|||
if (res.code === 0 && res.msg === 'success') { |
|||
const array = file.name.split('.') |
|||
const fileType = array[array.length - 1] |
|||
|
|||
const picArray = ['jpg', 'png', 'jpeg', 'bmp'] |
|||
const videoarray = ['mp4', 'wma', 'm4a'] |
|||
const docArray = ['doc', 'docx', 'xls', 'xlsx', 'pdf'] |
|||
const mp3Array = ['mp3'] |
|||
|
|||
if (picArray.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = 'image' |
|||
} else if (videoarray.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = 'video' |
|||
} else if (docArray.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = 'doc' |
|||
} else if (mp3Array.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = 'voice' |
|||
} |
|||
|
|||
file.url = res.data.url |
|||
file.type = fileType |
|||
|
|||
file.attachmentName = file.name |
|||
file.attachmentType = file.type |
|||
file.attachmentUrl = file.url |
|||
|
|||
this.fileList.push(file) |
|||
console.log(this.fileList) |
|||
} else this.$message.error(res.msg) |
|||
}, |
|||
|
|||
//下载 |
|||
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); |
|||
|
|||
|
|||
}, |
|||
handleCancle () { |
|||
this.resetData() |
|||
this.$emit('handleClose') |
|||
|
|||
}, |
|||
|
|||
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|||
initMap () { |
|||
// 定义地图中心点坐标 |
|||
var center = new window.TMap.LatLng(36.0722275, 120.38945519) |
|||
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
|||
map = new window.TMap.Map(document.getElementById('map_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 |
|||
.searchRectangle({ |
|||
keyword: this.keyWords, |
|||
bounds: map.getBounds() |
|||
}) |
|||
.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.feedbackFormData.latitude = lat |
|||
this.feedbackFormData.longitude = lng |
|||
this.convert() |
|||
} else { |
|||
this.$message.error('未检索到相关位置坐标') |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
handleMoveCenter () { |
|||
//修改地图中心点 |
|||
const center = map.getCenter() |
|||
const lat = center.getLat() |
|||
const lng = center.getLng() |
|||
this.feedbackFormData.latitude = lat |
|||
this.feedbackFormData.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.feedbackFormData.latitude, this.feedbackFormData.longitude); |
|||
} |
|||
|
|||
// map.setCenter(location); |
|||
markers.updateGeometries([ |
|||
{ |
|||
id: 'main', // 点标注数据数组 |
|||
position: location, |
|||
}, |
|||
]); |
|||
geocoder |
|||
.getAddress({ location: location }) // 将给定的坐标位置转换为地址 |
|||
.then((result) => { |
|||
|
|||
this.feedbackFormData.address = result.result.address |
|||
// 显示搜索到的地址 |
|||
}); |
|||
}, |
|||
|
|||
|
|||
resetData () { |
|||
this.formData = { |
|||
serviceCategoryKey: '',//服务分类id |
|||
serviceProjectId: '',//服务项目id |
|||
serviceOrgId: '',//服务组织id |
|||
serviceScope: [],// |
|||
principalName: '',//经办人(责任人)姓名 |
|||
principalContact: '',//经办人联系方式 |
|||
serviceTimeStart: '',//服务起始时间yyyy-MM-dd |
|||
serviceTimeEnd: '',//服务截止时间yyyy-MM-dd |
|||
remark: '',// |
|||
feedback: {},//反馈。允许发起服务的时候直接填写反馈，完成服务。 |
|||
|
|||
} |
|||
this.feedbackFormData = { |
|||
serviceProjectId: '',// 服务项目id |
|||
serviceProjectName: '', |
|||
serviceGoal: '',// 服务目标 |
|||
serviceEffect: '',// 服务效果 |
|||
servicePeopleNumber: null,// 服务人数 |
|||
serviceStatus: 'completed',// 服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度。不满意:bad、基本满意:good、非常满意:perfect |
|||
longitude: '',// 经度 |
|||
latitude: '',// 维度 |
|||
address: '', |
|||
attachmentList: [],// 附件列表 |
|||
} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
|
|||
serviceCategoryKey: [ |
|||
{ required: true, message: '服务类别不能为空', trigger: 'blur' }, |
|||
], |
|||
serviceProjectId: [ |
|||
{ required: true, message: '服务项目不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
serviceOrgId: [ |
|||
{ required: true, message: '服务组织不能为空', trigger: 'blur' } |
|||
], |
|||
serviceTimeStart: [ |
|||
{ required: true, message: '服务时间不能为空', trigger: 'blur' } |
|||
], |
|||
serviceScope: [ |
|||
{ required: true, message: '服务范围不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
} |
|||
}, |
|||
feedbackDataRule () { |
|||
return { |
|||
|
|||
serviceProjectName: [ |
|||
{ required: true, message: '服务项目不能为空', trigger: 'blur' }, |
|||
], |
|||
serviceGoal: [ |
|||
{ required: true, message: '服务目标不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
serviceEffect: [ |
|||
{ required: true, message: '服务效果不能为空', trigger: 'blur' } |
|||
], |
|||
servicePeopleNumber: [ |
|||
{ required: true, message: '服务人数不能为空', trigger: 'blur' } |
|||
], |
|||
serviceStatus: [ |
|||
{ required: true, message: '服务状态不能为空', trigger: 'blur' } |
|||
], |
|||
satisfaction: [ |
|||
{ required: true, message: '满意度不能为空', trigger: 'blur' } |
|||
], |
|||
address: [ |
|||
{ required: true, message: '地址不能为空', trigger: 'blur' } |
|||
] |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
props: { |
|||
|
|||
serviceRecordId: { |
|||
type: String, |
|||
required: '' |
|||
}, |
|||
serviceProjectName: {//服务项目名称 |
|||
type: String, |
|||
required: false, |
|||
default: '' |
|||
}, |
|||
formType: { //表单操作类型 add新增，edit编辑，detail详情,feedback反馈 |
|||
type: String, |
|||
required: '' |
|||
}, |
|||
categrayArray: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
statusArray: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
satisfyArray: { |
|||
type: Array, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/form-main.scss"; |
|||
</style> |
|||
@ -0,0 +1,693 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
|
|||
<el-form ref="ref_form" |
|||
:inline="true" |
|||
:model="formData" |
|||
:disabled="formType==='detail'" |
|||
:rules="dataRule" |
|||
class="div_form"> |
|||
|
|||
<el-form-item label="服务分类" |
|||
label-width="150px" |
|||
prop="serviceCategoryKey"> |
|||
<span>{{formData.serviceCategoryName}}</span> |
|||
|
|||
<!-- <el-select v-model="formData.serviceCategoryKey" |
|||
placeholder="请选择" |
|||
clearable |
|||
class="item_width_1"> |
|||
<el-option v-for="(item,index) in categrayArray" |
|||
@click.native="hancleClickCategray(index)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务项目" |
|||
prop="serviceProjectId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{formData.serviceProjectName}}</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>{{formData.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="serviceScope" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<div v-for="item in formData.serviceScope" |
|||
: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="principalName" |
|||
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" |
|||
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" |
|||
prop="serviceTimeStart"> |
|||
<el-date-picker 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="data-tag">至</span> |
|||
<el-date-picker v-model="formData.serviceTimeEnd" |
|||
:picker-options="endPickerOptions" |
|||
class="item_width_2 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 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_1" |
|||
v-model="feedbackFormData.servicePeopleNumber" |
|||
:min="0" |
|||
:max="9999" |
|||
label="服务人数"></el-input-number> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务状态" |
|||
label-width="150px" |
|||
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="满意度" |
|||
label-width="150px" |
|||
prop="satisfaction"> |
|||
<el-select class="item_width_1" |
|||
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 v-if="feedbackFormData.attachmentList&&feedbackFormData.attachmentList.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.attachmentList&&feedbackFormData.attachmentList.length>0" |
|||
class="attachement-list"> |
|||
<a :href="att.attachmentUrl" |
|||
target="_blank" |
|||
:key="att.attachmentUrl" |
|||
v-for="att in feedbackFormData.attachmentList"> |
|||
<i class="el-icon-folder-opened"></i> |
|||
{{ att.attachmentName }} |
|||
</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 { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
|
|||
|
|||
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: '', |
|||
formData: { |
|||
unitName: '', |
|||
serviceMatterList: [], |
|||
type: '', |
|||
contact: '', |
|||
contactMobile: '', |
|||
memberCount: 0, |
|||
remark: '', //备注【最大500字】 |
|||
address: '', //详细地址 |
|||
longitude: 36.0722275, //经度 |
|||
latitude: 120.38945519 //纬度 |
|||
}, |
|||
|
|||
feedbackFormData: { |
|||
serviceProjectId: '',// 服务项目id |
|||
serviceProjectName: '', |
|||
serviceGoal: '',// 服务目标 |
|||
serviceEffect: '',// 服务效果 |
|||
servicePeopleNumber: null,// 服务人数 |
|||
serviceStatus: 'completed',// 服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度。不满意:bad、基本满意:good、非常满意:perfect |
|||
longitude: '',// 经度 |
|||
latitude: '',// 维度 |
|||
address: '', |
|||
attachmentList: [],// 附件列表 |
|||
}, |
|||
serviceList: [],//服务list |
|||
|
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
|
|||
projectList: [], |
|||
fileList: [], |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile', |
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted () { |
|||
if (this.serviceRecordId) {//详情 |
|||
this.loadInfo() |
|||
|
|||
} |
|||
// this.initMap() |
|||
|
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
|
|||
|
|||
//加载组织 |
|||
async loadInfo () { |
|||
const url = `/heart/icServiceProject/service/detail/${this.serviceRecordId}` |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/detail' + this.serviceRecordId |
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.formData = { ...data } |
|||
this.formData.serviceRecordId = this.serviceRecordId |
|||
this.feedbackFormData = { ...data.feedBack } |
|||
this.feedbackFormData.servicePeopleNumber = this.formData.servicePeopleNumber |
|||
this.fileList = [] |
|||
if (data.feedBack.attachmentList && data.feedBack.attachmentList.length > 0) { |
|||
data.feedBack.attachmentList.forEach(element => { |
|||
let obj = { |
|||
name: element.attachmentName, |
|||
format: element.attachmentFormat, |
|||
url: element.attachmentUrl, |
|||
} |
|||
this.fileList.push(obj) |
|||
}); |
|||
} |
|||
|
|||
|
|||
} 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 (regPhone.test(this.formData.principalContact) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的手机号码' |
|||
}) |
|||
return false; |
|||
} |
|||
|
|||
let url = '/heart/icServiceProject/service/update' |
|||
// let url = "http://yapi.elinkservice.cn/mock/245/heart/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') |
|||
|
|||
}, |
|||
|
|||
//下载 |
|||
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 |
|||
.searchRectangle({ |
|||
keyword: this.keyWords, |
|||
bounds: map.getBounds() |
|||
}) |
|||
.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 = { |
|||
serviceCategoryKey: '',//服务分类id |
|||
serviceProjectId: '',//服务项目id |
|||
serviceOrgId: '',//服务组织id |
|||
serviceScope: [],// |
|||
principalName: '',//经办人(责任人)姓名 |
|||
principalContact: '',//经办人联系方式 |
|||
serviceTimeStart: '',//服务起始时间yyyy-MM-dd |
|||
serviceTimeEnd: '',//服务截止时间yyyy-MM-dd |
|||
remark: '',// |
|||
|
|||
} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
|
|||
serviceCategoryKey: [ |
|||
{ required: true, message: '服务类别不能为空', trigger: 'blur' }, |
|||
], |
|||
serviceProjectId: [ |
|||
{ required: true, message: '服务项目不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
serviceOrgId: [ |
|||
{ required: true, message: '服务组织不能为空', trigger: 'blur' } |
|||
], |
|||
serviceTimeStart: [ |
|||
{ required: true, message: '服务时间不能为空', trigger: 'blur' } |
|||
], |
|||
serviceScope: [ |
|||
{ required: true, message: '服务范围不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
} |
|||
}, |
|||
}, |
|||
props: { |
|||
|
|||
serviceRecordId: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
formType: {//表单操作类型 add新增，edit编辑，detail详情,feedback反馈 |
|||
type: String, |
|||
required: true |
|||
}, |
|||
categrayArray: { |
|||
type: Array, |
|||
required: true, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
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,607 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div> |
|||
<div class="div_search"> |
|||
<el-form :inline="true" |
|||
:model="formData" |
|||
ref="ref_searchform" |
|||
:label-width="'80px'"> |
|||
<div> |
|||
|
|||
<el-form-item label="服务分类" |
|||
prop="serviceCategoryKey"> |
|||
<el-select v-model="formData.serviceCategoryKey" |
|||
placeholder="请选择" |
|||
size="small" |
|||
clearable |
|||
class="item_width_2"> |
|||
<el-option v-for="item in categrayArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="服务项目" |
|||
prop="serviceProjectName"> |
|||
<el-input v-model="formData.serviceProjectName" |
|||
class="item_width_1" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务组织" |
|||
prop="serviceOrgName"> |
|||
<el-input v-model="formData.serviceOrgName" |
|||
class="item_width_2" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务时间" |
|||
prop="serviceTimeStart"> |
|||
<el-date-picker v-model="formData.serviceTimeStart" |
|||
:picker-options="startPickerOptions" |
|||
class="item_width_2" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<span class="data-tag">至</span> |
|||
<el-date-picker v-model="formData.serviceTimeEnd" |
|||
:picker-options="endPickerOptions" |
|||
class="item_width_2 data-tag" |
|||
size="small" |
|||
type="date" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
value="yyyy-MM-dd" |
|||
placeholder="结束时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务状态" |
|||
prop="serviceStatus"> |
|||
<el-select class="item_width_2" |
|||
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="item_width_2" |
|||
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-button style="margin-left:30px" |
|||
size="small" |
|||
class="diy-button--search" |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
class="diy-button--reset" |
|||
@click="resetSearch">重置</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="div_table"> |
|||
|
|||
<div class="div_btn"> |
|||
<el-button class="diy-button--add" |
|||
size="small" |
|||
@click="handleAdd">发起服务</el-button> |
|||
|
|||
<!-- <el-button @click="handleExport" |
|||
class="diy-button--reset" |
|||
size="small">导出</el-button> --> |
|||
</div> |
|||
|
|||
<el-table :data="tableData" |
|||
border |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
|||
class="table" |
|||
style="width: 100%" |
|||
:height="maxTableHeight"> |
|||
<el-table-column label="序号" |
|||
fixed="left" |
|||
type="index" |
|||
align="center" |
|||
width="50" /> |
|||
|
|||
<el-table-column prop="serviceCategoryName" |
|||
align="center" |
|||
width="100" |
|||
label="服务类别" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="serviceProjectName" |
|||
label="服务项目" |
|||
align="center" |
|||
:show-overflow-tooltip="true"> |
|||
</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="serviceTimeStart" |
|||
align="center" |
|||
width="250" |
|||
: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="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="servicePeopleNumber" |
|||
align="center" |
|||
width="110" |
|||
label="服务人数" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column fixed="right" |
|||
label="操作" |
|||
align="center" |
|||
width="180"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handleDetail(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
class=".div-table-button--detail">详情</el-button> |
|||
<el-button v-if="scope.row.serviceStatus==='in_service'" |
|||
@click="handleEdit(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
class="div-table-button--edit">编辑</el-button> |
|||
<el-button v-if="scope.row.serviceStatus==='in_service'" |
|||
@click="handleFeedback(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
class="div-table-button--edit">反馈</el-button> |
|||
<el-button v-if="scope.row.serviceStatus==='in_service'" |
|||
@click="handleDel(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
class="div-table-button--delete">取消</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" |
|||
width="850px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showAdd = false"> |
|||
<add-form ref="ref_add_form" |
|||
:formType="formType" |
|||
:categrayArray="categrayArray" |
|||
:statusArray="statusArray" |
|||
:satisfyArray="satisfyArray" |
|||
:serviceRecordId="serviceRecordId" |
|||
:serviceProjectName="serviceProjectName" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose"></add-form> |
|||
</el-dialog> |
|||
<el-dialog v-if="showDetail" |
|||
:visible.sync="showDetail" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="detailDiaTitle" |
|||
width="850px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showDetail = false"> |
|||
<detail-form ref="ref_detail_form" |
|||
:serviceRecordId="serviceRecordId" |
|||
:satisfyArray="satisfyArray" |
|||
:categrayArray="categrayArray" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose" |
|||
:formType="formType"> |
|||
</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 eventInfo from "./cpts/event-info"; |
|||
import axios from "axios"; |
|||
import addForm from "./addForm"; |
|||
import detailForm from "./detailForm"; |
|||
import feedBackForm from "./addForm"; |
|||
|
|||
export default { |
|||
components: { addForm, detailForm, feedBackForm }, |
|||
|
|||
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 { |
|||
tableLoading: false, |
|||
user: {}, |
|||
agencyId: '', |
|||
|
|||
tableData: [], |
|||
categrayArray: [], |
|||
statusArray: [ |
|||
{ |
|||
value: "in_service", |
|||
label: "进行中", |
|||
}, |
|||
{ |
|||
value: "completed", |
|||
label: "已完成", |
|||
}, |
|||
], |
|||
satisfyArray: [ |
|||
{ |
|||
value: "bad", |
|||
label: "不满意", |
|||
}, |
|||
{ |
|||
value: "good", |
|||
label: "基本满意", |
|||
}, |
|||
{ |
|||
value: "perfect", |
|||
label: "非常满意", |
|||
}, |
|||
|
|||
], |
|||
|
|||
formData: { |
|||
serviceCategoryKey: '',//服务类别id |
|||
serviceProjectName: '',//项目名称 |
|||
serviceOrgName: '',//服务组织名称 |
|||
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: '', |
|||
serviceProjectName: '', |
|||
|
|||
showAdd: false, |
|||
showDetail: false, |
|||
showFeedback: false, |
|||
formType: 'add', |
|||
addDiaTitle: '发起服务', |
|||
detailDiaTitle: '服务详情', |
|||
|
|||
}; |
|||
}, |
|||
computed: { |
|||
maxTableHeight () { |
|||
return this.$store.state.inIframe |
|||
? this.clientHeight - 410 + this.iframeHeigh |
|||
: this.clientHeight - 410; |
|||
}, |
|||
...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.getCategrayList() |
|||
this.getTableData(); |
|||
}, |
|||
methods: { |
|||
|
|||
handleSearch (val) { |
|||
console.log(this.formData); |
|||
this.pageNo = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 字典 |
|||
async getCategrayList () { |
|||
const url = "/sys/dict/data/dictlist" |
|||
|
|||
let params = { |
|||
dictType: 'ic_service_type' |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.categrayArray = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
|
|||
async handleAdd () { |
|||
this.addDiaTitle = '发起服务' |
|||
this.formType = 'add' |
|||
this.showAdd = true; |
|||
}, |
|||
|
|||
async handleDetail (row) { |
|||
this.serviceRecordId = row.serviceRecordId |
|||
|
|||
this.formType = 'detail' |
|||
this.showDetail = true |
|||
|
|||
}, |
|||
async handleEdit (row) { |
|||
this.serviceRecordId = row.serviceRecordId |
|||
this.formType = 'edit' |
|||
this.showDetail = true |
|||
|
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async handleFeedback (row) { |
|||
|
|||
this.serviceRecordId = row.serviceRecordId |
|||
this.serviceProjectName = row.serviceProjectName |
|||
this.addDiaTitle = '服务反馈' |
|||
this.formType = 'feedback' |
|||
this.showAdd = true; |
|||
}, |
|||
|
|||
|
|||
handleClose () { |
|||
this.serviceRecordId = "" |
|||
this.formType = '' |
|||
|
|||
this.showAdd = false |
|||
this.showDetail = 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 = `/heart/icServiceProject/service/cancel/${this.serviceRecordId}`; |
|||
|
|||
|
|||
const { data, code, msg } = await requestPost(url, {}); |
|||
|
|||
if (code === 0) { |
|||
this.$message.success("取消成功！"); |
|||
this.getTableData(); |
|||
} else { |
|||
this.$message.error("操作失败！"); |
|||
} |
|||
}, |
|||
|
|||
async getTableData () { |
|||
this.tableLoading = true |
|||
const url = "/heart/icServiceProject/service/recordList"; |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icServiceProject/service/recordList"; |
|||
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 |
|||
? data.list.map((item) => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
|
|||
this.tableData.forEach(item => { |
|||
if (item.operationType === '2') { |
|||
item.operationTypeShow = '已转需求' |
|||
} |
|||
if (item.operationType === '1') { |
|||
item.operationTypeShow = '已立项' |
|||
} |
|||
if (item.operationType === '0') { |
|||
item.operationTypeShow = '已回复' |
|||
} |
|||
|
|||
}); |
|||
} 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 = { |
|||
serviceCategoryKey: '', |
|||
serviceProjectName: '', |
|||
serviceOrgName: '', |
|||
serviceTimeStart: '', |
|||
serviceTimeEnd: '', |
|||
serviceStatus: '', |
|||
satisfaction: '' |
|||
} |
|||
|
|||
|
|||
this.pageNo = 1 |
|||
// this.getTableData() |
|||
}, |
|||
}, |
|||
}; |
|||
</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,597 @@ |
|||
<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="政策级别" |
|||
label-width="150px" |
|||
prop="policyLevel"> |
|||
<el-select class="item_width_1" |
|||
v-model="formData.policyLevel" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in policyLevelArray" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item label="政策日期" |
|||
label-width="150px" |
|||
prop="startDate"> |
|||
<el-date-picker v-model="formData.startDate" |
|||
class="item_width_2" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<span class="data-tag">至</span> |
|||
<el-date-picker v-model="formData.endDate" |
|||
class="item_width_2 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="title" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
placeholder="请输入政策标题" |
|||
v-model="formData.title"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="政策内容" |
|||
prop="content" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
maxlength="1000" |
|||
show-word-limit |
|||
:rows="3" |
|||
placeholder="请输入政策内容" |
|||
v-model="formData.content"></el-input> |
|||
</el-form-item> |
|||
|
|||
<div v-for="(item,index) in ruleList" |
|||
:key="index"> |
|||
|
|||
<el-form-item :label="'政策细则'+(index+1)" |
|||
prop="principalName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_short" |
|||
placeholder="请输入政策细则名称" |
|||
v-model="item.ruleName"> |
|||
</el-input> |
|||
|
|||
<el-button v-if="index!==0" |
|||
type="danger" |
|||
size="mini" |
|||
plain |
|||
style="margin-left:20px" |
|||
@click="delRule(index)">删除细则</el-button> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="'匹配规则'+(index+1)" |
|||
prop="principalName" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<rule :ref="'ref_rule'+index"></rule> |
|||
</el-form-item> |
|||
<div v-if="index===(ruleList.length-1)" |
|||
class="btn-add-rule"> |
|||
<el-button type="primary" |
|||
size="mini" |
|||
plain |
|||
@click="addRule">增加细则</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-form-item label="匹配资源类型" |
|||
prop="serviceScope" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-cascader class="item_width_1" |
|||
ref="myCascader" |
|||
v-model="demandIdArray" |
|||
:options="demandOptions" |
|||
:props="optionProps" |
|||
@change="handleCateSlect"></el-cascader> |
|||
</el-form-item> |
|||
|
|||
<el-form-item class="block" |
|||
label="附件" |
|||
label-width="150px" |
|||
prop="attach"> |
|||
<el-upload class="upload-demo" |
|||
:action="uploadUlr" |
|||
accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3" |
|||
:on-success="handleFileSuccess" |
|||
:on-remove="handleFileRemove" |
|||
:limit="3" |
|||
:before-upload="beforeUpload" |
|||
:file-list="fileList"> |
|||
<el-button size="small" |
|||
:disabled="fileList.length===3" |
|||
type="primary">点击上传</el-button> |
|||
<div slot="tip" |
|||
class="el-upload__tip">支持图片、word、pdf</div> |
|||
</el-upload> |
|||
</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 { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
import rule from './rule' |
|||
|
|||
|
|||
|
|||
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 { |
|||
|
|||
ruleList: [ |
|||
{ |
|||
ruleName: '', |
|||
resiRuleList: [], |
|||
houseRuleList: [], |
|||
statRuleList: [] |
|||
} |
|||
], |
|||
|
|||
policyLevelArray: [], |
|||
|
|||
btnDisable: false, |
|||
demandOptions: [], |
|||
demandIdArray: [], |
|||
|
|||
optionProps: { |
|||
multiple: true, |
|||
// value: 'objectId', |
|||
// label: 'objectName', |
|||
// children: 'children', |
|||
checkStrictly: true |
|||
}, |
|||
|
|||
formData: { |
|||
policyLevel: '',//政府级别 |
|||
startDate: '',//起始时间yyyy-MM-dd |
|||
endDate: '',//截止时间yyyy-MM-dd |
|||
title: '',// |
|||
content: '',// |
|||
categoryList: [], |
|||
attachmentList: [], |
|||
ruleList: [], |
|||
|
|||
}, |
|||
|
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
|
|||
fileList: [], |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile', |
|||
|
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
"formData.serviceTimeEnd": function (val) { |
|||
if (val && val != '') { |
|||
let arrayTemp = val.split(' ') |
|||
this.formData.serviceTimeEnd = arrayTemp[0] + ' 23:59:59' |
|||
} |
|||
|
|||
}, |
|||
}, |
|||
components: { rule }, |
|||
async mounted () { |
|||
this.startLoading() |
|||
|
|||
this.getDictOptions(); |
|||
await this.loadDemandoption() |
|||
|
|||
if (this.formType === 'add') { |
|||
this.$refs.ref_form.resetFields(); |
|||
|
|||
} else { |
|||
this.loadFormInfo() |
|||
|
|||
} |
|||
|
|||
this.endLoading() |
|||
|
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
addRule () { |
|||
let obj = { |
|||
name: '', |
|||
detail: [] |
|||
} |
|||
|
|||
this.ruleList.push(obj) |
|||
}, |
|||
delRule (index) { |
|||
this.ruleList.splice(index, 1); |
|||
}, |
|||
|
|||
async loadFormInfo () { |
|||
const url = '/heart/policy/detail/' + this.policyId |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.formData = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
async getDictOptions () { |
|||
|
|||
this.$http |
|||
.post("/sys/dict/data/dictlist", { |
|||
dictType: "policy_level", |
|||
}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.policyLevelArray = res.data; |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
|
|||
}, |
|||
|
|||
|
|||
// 获取服务范围树 |
|||
loadDemandoption () { |
|||
const url = '/heart/icresidemanddict/demandoption' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree' |
|||
let params = {} |
|||
window.app.ajax.post( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.demandOptions = this.getFlagData( |
|||
this.getTreeData(data), |
|||
"usableFlag" |
|||
); |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg) |
|||
} |
|||
) |
|||
|
|||
}, |
|||
|
|||
|
|||
handleCateSlect (val) { |
|||
console.log("val", val); |
|||
let arr = [] |
|||
val.forEach((item) => { |
|||
let obj = { |
|||
codePath: item.join(','), |
|||
categoryCode: item[item.length - 1] |
|||
} |
|||
|
|||
arr.push(obj) |
|||
}); |
|||
|
|||
console.log("arr", arr); |
|||
this.formData.categoryList = arr |
|||
|
|||
}, |
|||
|
|||
|
|||
|
|||
async handleComfirm () { |
|||
|
|||
|
|||
this.handleAdd() |
|||
|
|||
}, |
|||
|
|||
async handleAdd () { |
|||
|
|||
let ruleList = [] |
|||
let _this = this |
|||
|
|||
this.ruleList.forEach((oneRule, index) => { |
|||
if (!oneRule.ruleName) { |
|||
this.$message.error('政策细则不能为空') |
|||
return false |
|||
} |
|||
let refObj = _this.$refs['ref_rule' + index][0] |
|||
|
|||
refObj.getRule() |
|||
if (refObj.okflag) { |
|||
oneRule.resiRuleList = refObj.resiRuleList |
|||
oneRule.houseRuleList = refObj.houseRuleList |
|||
oneRule.statRuleList = refObj.statRuleList |
|||
|
|||
} else { |
|||
return false |
|||
} |
|||
}); |
|||
|
|||
this.formData.ruleList = this.ruleList |
|||
|
|||
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) |
|||
|
|||
|
|||
|
|||
const url = '/heart/policy/add' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/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) |
|||
} |
|||
}, |
|||
|
|||
getTreeData (data) { |
|||
if (!Array.isArray(data)) return []; |
|||
let arr = data.map((item) => { |
|||
let _item = {}; |
|||
if (item.children) { |
|||
if (item.children.length === 0) |
|||
_item = { ...item, children: undefined }; |
|||
else _item = { ...item, children: this.getTreeData(item.children) }; |
|||
} else { |
|||
_item = { ...item }; |
|||
} |
|||
return _item; |
|||
}); |
|||
return arr; |
|||
}, |
|||
getFlagData (data, flag) { |
|||
if (!Array.isArray(data)) return []; |
|||
let arr1 = data.filter((item) => item[flag]); |
|||
let arr2 = arr1.map((item) => { |
|||
if (item.children) |
|||
return { ...item, children: this.getFlagData(item.children, flag) }; |
|||
else return item; |
|||
}); |
|||
// console.log('arrr-oppp', arr2) |
|||
return arr2; |
|||
}, |
|||
|
|||
beforeUpload (file) { |
|||
const array = file.name.split('.') |
|||
const extension = array[array.length - 1] |
|||
|
|||
const formatarray = ['jpg', 'png', 'jpeg', 'bmp', 'mp4', 'wma', 'm4a', 'mp3', 'doc', 'docx', 'xls', 'xlsx', 'pdf'] |
|||
|
|||
if (formatarray.indexOf(extension) === -1) { |
|||
this.$message.error('只支持图片、word、pdf') |
|||
return false |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleFileRemove (file) { |
|||
|
|||
if (file && file.status === "success") { |
|||
this.fileList.splice(this.fileList.findIndex(item => item.uid === file.uid), 1) |
|||
} |
|||
}, |
|||
|
|||
handleFileSuccess (res, file) { |
|||
|
|||
if (res.code === 0 && res.msg === 'success') { |
|||
const array = file.name.split('.') |
|||
const fileType = array[array.length - 1] |
|||
|
|||
const picArray = ['jpg', 'png', 'jpeg', 'bmp'] |
|||
const videoarray = ['mp4', 'wma', 'm4a'] |
|||
const docArray = ['doc', 'docx', 'xls', 'xlsx', 'pdf'] |
|||
const mp3Array = ['mp3'] |
|||
|
|||
if (picArray.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = 'image' |
|||
} else if (videoarray.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = 'video' |
|||
} else if (docArray.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = 'doc' |
|||
} else if (mp3Array.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = 'voice' |
|||
} |
|||
|
|||
file.url = res.data.url |
|||
file.type = fileType |
|||
|
|||
file.attachmentName = file.name |
|||
file.attachmentType = file.type |
|||
file.attachmentUrl = file.url |
|||
|
|||
this.fileList.push(file) |
|||
console.log(this.fileList) |
|||
} else this.$message.error(res.msg) |
|||
}, |
|||
|
|||
//下载 |
|||
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); |
|||
|
|||
|
|||
}, |
|||
handleCancle () { |
|||
this.resetData() |
|||
this.$emit('handleClose') |
|||
|
|||
}, |
|||
|
|||
|
|||
resetData () { |
|||
this.ruleList = [] |
|||
this.formData = { |
|||
policyLevel: '',//政府级别 |
|||
startDate: '',//起始时间yyyy-MM-dd |
|||
endDate: '',//截止时间yyyy-MM-dd |
|||
title: '',// |
|||
content: '',// |
|||
categoryList: [], |
|||
attachmentList: [], |
|||
ruleList: [], |
|||
} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
|
|||
policyLevel: [ |
|||
{ required: true, message: '政策级别不能为空', trigger: 'change' } |
|||
], |
|||
startDate: [ |
|||
{ required: true, message: '政策日期不能为空', trigger: 'change' } |
|||
], |
|||
title: [ |
|||
{ required: true, message: '政策标题不能为空', trigger: 'change' } |
|||
], |
|||
|
|||
|
|||
} |
|||
}, |
|||
|
|||
|
|||
}, |
|||
props: { |
|||
|
|||
policyId: { |
|||
type: String, |
|||
required: '' |
|||
}, |
|||
|
|||
formType: { //表单操作类型 add新增，edit编辑，detail详情,feedback反馈 |
|||
type: String, |
|||
required: '' |
|||
}, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/form-main.scss"; |
|||
|
|||
.btn-add-rule { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.item_width_short { |
|||
width: 380px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,693 @@ |
|||
<template> |
|||
<div> |
|||
<div class="dialog-h-content scroll-h"> |
|||
|
|||
<el-form ref="ref_form" |
|||
:inline="true" |
|||
:model="formData" |
|||
:disabled="formType==='detail'" |
|||
:rules="dataRule" |
|||
class="div_form"> |
|||
|
|||
<el-form-item label="服务分类" |
|||
label-width="150px" |
|||
prop="serviceCategoryKey"> |
|||
<span>{{formData.serviceCategoryName}}</span> |
|||
|
|||
<!-- <el-select v-model="formData.serviceCategoryKey" |
|||
placeholder="请选择" |
|||
clearable |
|||
class="item_width_1"> |
|||
<el-option v-for="(item,index) in categrayArray" |
|||
@click.native="hancleClickCategray(index)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务项目" |
|||
prop="serviceProjectId" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{formData.serviceProjectName}}</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>{{formData.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="serviceScope" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<div v-for="item in formData.serviceScope" |
|||
: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="principalName" |
|||
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" |
|||
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" |
|||
prop="serviceTimeStart"> |
|||
<el-date-picker 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="data-tag">至</span> |
|||
<el-date-picker v-model="formData.serviceTimeEnd" |
|||
:picker-options="endPickerOptions" |
|||
class="item_width_2 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 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_1" |
|||
v-model="feedbackFormData.servicePeopleNumber" |
|||
:min="0" |
|||
:max="9999" |
|||
label="服务人数"></el-input-number> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="服务状态" |
|||
label-width="150px" |
|||
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="满意度" |
|||
label-width="150px" |
|||
prop="satisfaction"> |
|||
<el-select class="item_width_1" |
|||
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 v-if="feedbackFormData.attachmentList&&feedbackFormData.attachmentList.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.attachmentList&&feedbackFormData.attachmentList.length>0" |
|||
class="attachement-list"> |
|||
<a :href="att.attachmentUrl" |
|||
target="_blank" |
|||
:key="att.attachmentUrl" |
|||
v-for="att in feedbackFormData.attachmentList"> |
|||
<i class="el-icon-folder-opened"></i> |
|||
{{ att.attachmentName }} |
|||
</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 { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
|
|||
|
|||
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: '', |
|||
formData: { |
|||
unitName: '', |
|||
serviceMatterList: [], |
|||
type: '', |
|||
contact: '', |
|||
contactMobile: '', |
|||
memberCount: 0, |
|||
remark: '', //备注【最大500字】 |
|||
address: '', //详细地址 |
|||
longitude: 36.0722275, //经度 |
|||
latitude: 120.38945519 //纬度 |
|||
}, |
|||
|
|||
feedbackFormData: { |
|||
serviceProjectId: '',// 服务项目id |
|||
serviceProjectName: '', |
|||
serviceGoal: '',// 服务目标 |
|||
serviceEffect: '',// 服务效果 |
|||
servicePeopleNumber: null,// 服务人数 |
|||
serviceStatus: 'completed',// 服务状态。in_service服务中；completed:已完成 |
|||
satisfaction: '',//满意度。不满意:bad、基本满意:good、非常满意:perfect |
|||
longitude: '',// 经度 |
|||
latitude: '',// 维度 |
|||
address: '', |
|||
attachmentList: [],// 附件列表 |
|||
}, |
|||
serviceList: [],//服务list |
|||
|
|||
endPickerOptions: { |
|||
disabledDate: endDisabledDate |
|||
}, |
|||
startPickerOptions: { |
|||
disabledDate: startDisabledDate |
|||
}, |
|||
|
|||
projectList: [], |
|||
fileList: [], |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile', |
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted () { |
|||
if (this.serviceRecordId) {//详情 |
|||
this.loadInfo() |
|||
|
|||
} |
|||
// this.initMap() |
|||
|
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
|
|||
|
|||
//加载组织 |
|||
async loadInfo () { |
|||
const url = `/heart/icServiceProject/service/detail/${this.serviceRecordId}` |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/detail' + this.serviceRecordId |
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.formData = { ...data } |
|||
this.formData.serviceRecordId = this.serviceRecordId |
|||
this.feedbackFormData = { ...data.feedBack } |
|||
this.feedbackFormData.servicePeopleNumber = this.formData.servicePeopleNumber |
|||
this.fileList = [] |
|||
if (data.feedBack.attachmentList && data.feedBack.attachmentList.length > 0) { |
|||
data.feedBack.attachmentList.forEach(element => { |
|||
let obj = { |
|||
name: element.attachmentName, |
|||
format: element.attachmentFormat, |
|||
url: element.attachmentUrl, |
|||
} |
|||
this.fileList.push(obj) |
|||
}); |
|||
} |
|||
|
|||
|
|||
} 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 (regPhone.test(this.formData.principalContact) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的手机号码' |
|||
}) |
|||
return false; |
|||
} |
|||
|
|||
let url = '/heart/icServiceProject/service/update' |
|||
// let url = "http://yapi.elinkservice.cn/mock/245/heart/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') |
|||
|
|||
}, |
|||
|
|||
//下载 |
|||
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 |
|||
.searchRectangle({ |
|||
keyword: this.keyWords, |
|||
bounds: map.getBounds() |
|||
}) |
|||
.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 = { |
|||
serviceCategoryKey: '',//服务分类id |
|||
serviceProjectId: '',//服务项目id |
|||
serviceOrgId: '',//服务组织id |
|||
serviceScope: [],// |
|||
principalName: '',//经办人(责任人)姓名 |
|||
principalContact: '',//经办人联系方式 |
|||
serviceTimeStart: '',//服务起始时间yyyy-MM-dd |
|||
serviceTimeEnd: '',//服务截止时间yyyy-MM-dd |
|||
remark: '',// |
|||
|
|||
} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
|
|||
serviceCategoryKey: [ |
|||
{ required: true, message: '服务类别不能为空', trigger: 'blur' }, |
|||
], |
|||
serviceProjectId: [ |
|||
{ required: true, message: '服务项目不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
serviceOrgId: [ |
|||
{ required: true, message: '服务组织不能为空', trigger: 'blur' } |
|||
], |
|||
serviceTimeStart: [ |
|||
{ required: true, message: '服务时间不能为空', trigger: 'blur' } |
|||
], |
|||
serviceScope: [ |
|||
{ required: true, message: '服务范围不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
} |
|||
}, |
|||
}, |
|||
props: { |
|||
|
|||
serviceRecordId: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
formType: {//表单操作类型 add新增，edit编辑，detail详情,feedback反馈 |
|||
type: String, |
|||
required: true |
|||
}, |
|||
categrayArray: { |
|||
type: Array, |
|||
required: true, |
|||
default () { |
|||
return [] |
|||
} |
|||
}, |
|||
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,479 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div> |
|||
<div class="div_search"> |
|||
<el-form :inline="true" |
|||
:model="formData" |
|||
ref="ref_searchform" |
|||
:label-width="'80px'"> |
|||
<div> |
|||
|
|||
<el-form-item label="政策标题" |
|||
prop="title"> |
|||
<el-input v-model="formData.title" |
|||
class="item_width_1" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="政策内容" |
|||
prop="content"> |
|||
<el-input v-model="formData.content" |
|||
class="item_width_2" |
|||
size="small" |
|||
clearable |
|||
placeholder="请输入"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="是否过期" |
|||
prop="expiredFlag"> |
|||
<el-select class="item_width_2" |
|||
v-model="formData.expiredFlag" |
|||
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-button style="margin-left:30px" |
|||
size="small" |
|||
class="diy-button--search" |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
class="diy-button--reset" |
|||
@click="resetSearch">重置</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="div_table"> |
|||
|
|||
<div class="div_btn"> |
|||
<el-button class="diy-button--add" |
|||
size="small" |
|||
@click="handleAdd">新增政策</el-button> |
|||
|
|||
<!-- <el-button @click="handleExport" |
|||
class="diy-button--reset" |
|||
size="small">导出</el-button> --> |
|||
</div> |
|||
|
|||
<el-table :data="tableData" |
|||
border |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
|||
class="table" |
|||
style="width: 100%" |
|||
:height="maxTableHeight"> |
|||
<el-table-column label="序号" |
|||
fixed="left" |
|||
type="index" |
|||
align="center" |
|||
width="50" /> |
|||
|
|||
<el-table-column prop="policyLevelName" |
|||
label="政策级别" |
|||
width="100" |
|||
align="center" |
|||
:show-overflow-tooltip="true"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="title" |
|||
align="center" |
|||
min-width="150" |
|||
label="政策标题" |
|||
:show-overflow-tooltip="true"> |
|||
|
|||
</el-table-column> |
|||
<el-table-column prop="content" |
|||
align="center" |
|||
min-width="250" |
|||
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.startDate}}-{{scope.row.endDate}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="expiredFlag" |
|||
align="center" |
|||
width="100" |
|||
label="是否过期" |
|||
:show-overflow-tooltip="true"> |
|||
<template slot-scope="scope"> |
|||
<span>{{scope.row.expiredFlag==='1'?'已过期':'未过期'}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column fixed="right" |
|||
label="操作" |
|||
align="center" |
|||
width="180"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handleDetail(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
class=".div-table-button--detail">详情</el-button> |
|||
<el-button @click="handleEdit(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
class="div-table-button--edit">编辑</el-button> |
|||
<el-button @click="handleFeedback(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
class="div-table-button--edit">人员名单</el-button> |
|||
<el-button @click="handleDel(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
class="div-table-button--delete">删除</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" |
|||
width="1050px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showAdd = false"> |
|||
<add-policy ref="ref_add_form" |
|||
:formType="formType" |
|||
:policyId="policyId" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose"></add-policy> |
|||
</el-dialog> |
|||
<el-dialog v-if="showDetail" |
|||
:visible.sync="showDetail" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
:title="detailDiaTitle" |
|||
width="850px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="showDetail = false"> |
|||
<detail-form ref="ref_detail_form" |
|||
:policyId="policyId" |
|||
@handleOk="handleOk" |
|||
@handleClose="handleClose" |
|||
:formType="formType"> |
|||
</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 eventInfo from "./cpts/event-info"; |
|||
import axios from "axios"; |
|||
import addPolicy from "./addPolicy"; |
|||
import detailForm from "./detailForm"; |
|||
|
|||
|
|||
export default { |
|||
components: { addPolicy, detailForm }, |
|||
|
|||
data () { |
|||
|
|||
|
|||
return { |
|||
tableLoading: false, |
|||
user: {}, |
|||
agencyId: '', |
|||
|
|||
tableData: [], |
|||
|
|||
statusArray: [ |
|||
{ |
|||
value: "1", |
|||
label: "是", |
|||
}, |
|||
{ |
|||
value: "0", |
|||
label: "否", |
|||
}, |
|||
], |
|||
|
|||
|
|||
formData: { |
|||
title: '',// 政策标题 |
|||
content: '',//政策内容 |
|||
expiredFlag: '',//是否过期；1：已过期；0：未过期 |
|||
|
|||
}, |
|||
pageNo: 1, |
|||
pageSize: window.localStorage.getItem("pageSize") || 20, |
|||
total: 1, |
|||
|
|||
policyId: '', |
|||
serviceProjectName: '', |
|||
|
|||
showAdd: false, |
|||
showDetail: false, |
|||
showFeedback: false, |
|||
formType: 'add', |
|||
addDiaTitle: '新增政策', |
|||
detailDiaTitle: '服务详情', |
|||
|
|||
}; |
|||
}, |
|||
computed: { |
|||
maxTableHeight () { |
|||
return this.$store.state.inIframe |
|||
? this.clientHeight - 350 + this.iframeHeigh |
|||
: this.clientHeight - 350; |
|||
}, |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
mounted () { |
|||
console.log(this.$store.state) |
|||
this.user = this.$store.state.user |
|||
this.agencyId = this.user.agencyId |
|||
|
|||
this.getTableData(); |
|||
}, |
|||
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.policyId = row.policyId |
|||
|
|||
this.formType = 'detail' |
|||
this.showDetail = true |
|||
|
|||
}, |
|||
async handleEdit (row) { |
|||
this.policyId = row.policyId |
|||
this.formType = 'edit' |
|||
this.showAdd = true; |
|||
|
|||
}, |
|||
|
|||
//加载组织数据 |
|||
async handleFeedback (row) { |
|||
|
|||
this.policyId = row.policyId |
|||
this.serviceProjectName = row.serviceProjectName |
|||
this.addDiaTitle = '服务反馈' |
|||
this.formType = 'feedback' |
|||
this.showAdd = true; |
|||
}, |
|||
|
|||
|
|||
handleClose () { |
|||
this.policyId = "" |
|||
this.formType = '' |
|||
|
|||
this.showAdd = false |
|||
this.showDetail = false |
|||
|
|||
|
|||
}, |
|||
handleOk () { |
|||
this.handleClose() |
|||
this.pageNo = 1 |
|||
this.getTableData() |
|||
|
|||
}, |
|||
|
|||
|
|||
async handleDel (row) { |
|||
|
|||
this.policyId = row.policyId |
|||
|
|||
this.$confirm("确认取消服务?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.cancelFuwu() |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
// this.$message({ |
|||
// type: "info", |
|||
// message: "已取消删除" |
|||
// }); |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
|
|||
}, |
|||
|
|||
async cancelFuwu () { |
|||
|
|||
const url = `/heart/icServiceProject/service/cancel/${this.policyId}`; |
|||
|
|||
|
|||
const { data, code, msg } = await requestPost(url, {}); |
|||
|
|||
if (code === 0) { |
|||
this.$message.success("取消成功！"); |
|||
this.getTableData(); |
|||
} else { |
|||
this.$message.error("操作失败！"); |
|||
} |
|||
}, |
|||
|
|||
async getTableData () { |
|||
this.tableLoading = true |
|||
const url = "/heart/policy/list"; |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icServiceProject/service/recordList"; |
|||
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 |
|||
? data.list.map((item) => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
|
|||
this.tableData.forEach(item => { |
|||
if (item.operationType === '2') { |
|||
item.operationTypeShow = '已转需求' |
|||
} |
|||
if (item.operationType === '1') { |
|||
item.operationTypeShow = '已立项' |
|||
} |
|||
if (item.operationType === '0') { |
|||
item.operationTypeShow = '已回复' |
|||
} |
|||
|
|||
}); |
|||
} 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 = { |
|||
title: '',// 政策标题 |
|||
content: '',//政策内容 |
|||
expiredFlag: '',//是否过期；1：已过期；0：未过期 |
|||
} |
|||
|
|||
|
|||
this.pageNo = 1 |
|||
this.getTableData() |
|||
}, |
|||
}, |
|||
}; |
|||
</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,889 @@ |
|||
<template> |
|||
<div> |
|||
<div> |
|||
<el-checkbox v-model="personChecked"></el-checkbox> |
|||
<span @click="clickTab('person')" |
|||
:class="['tab-title',{'tab-title-sel':personSel}]">人员信息</span> |
|||
<el-checkbox v-model="houseChecked"></el-checkbox> |
|||
<span @click="clickTab('house')" |
|||
:class="['tab-title',{'tab-title-sel':houseSel}]">房屋信息</span> |
|||
<el-checkbox v-model="staticChecked"></el-checkbox> |
|||
<span @click="clickTab('static')" |
|||
:class="['tab-title',{'tab-title-sel':staticSel}]">统计信息</span> |
|||
|
|||
<el-button class="diy-button--search" |
|||
size="mini">预览</el-button> |
|||
|
|||
<el-button class="diy-button--add" |
|||
@click="addRule" |
|||
size="mini">增加</el-button> |
|||
</div> |
|||
|
|||
<div v-if="personSel"> |
|||
<div v-for="(personItem,personIndex) in resiRuleList" |
|||
:key="personIndex" |
|||
class="row-item"> |
|||
<el-select class="item_width_1" |
|||
v-model="personItem.itemGroupId" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in groupList" |
|||
@click.native="handleSelGroup(personIndex,item)" |
|||
:key="item.id" |
|||
:label="item.label" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select class="item_width_1" |
|||
v-model="personItem.itemId" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in personItem.itemList" |
|||
@click.native="handleSelGroupItem(personIndex,item)" |
|||
:key="item.itemId" |
|||
:label="item.label" |
|||
:value="item.itemId"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select class="item_width_1" |
|||
v-model="personItem.queryType" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in queryList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<div> |
|||
|
|||
<el-select v-if="personItem.colType==='select'||personItem.colType==='radio'||personItem.colType==='checkbox'" |
|||
class="item_width_1" |
|||
v-model="personItem.colVal" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in personItem.colOption" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-input-number v-else-if="personItem.colType==='inputNum'" |
|||
v-model="personItem.colVal" |
|||
:min="0" |
|||
size="mini" |
|||
label="请输入"></el-input-number> |
|||
|
|||
<el-date-picker v-else-if="personItem.colType==='datepicker'||personItem.colType==='date'" |
|||
v-model="personItem.colVal" |
|||
class="item_width_1" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<el-input v-else |
|||
class="item_width_1" |
|||
size="mini" |
|||
placeholder="请输入" |
|||
v-model="personItem.colVal"> |
|||
</el-input> |
|||
</div> |
|||
|
|||
<el-select v-if="personIndex<(resiRuleList.length-1)" |
|||
class="item_width_1" |
|||
v-model="personItem.lastLogicalRel" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in logicalList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
<el-button icon="el-icon-remove-outline" |
|||
circle |
|||
@click="delPerson(personIndex)" |
|||
type="danger"></el-button> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div v-if="houseSel"> |
|||
<div v-for="(houseItem,houseIndex) in houseRuleList" |
|||
:key="houseIndex" |
|||
class="row-item"> |
|||
<el-input class="item_width_1" |
|||
size="mini" |
|||
placeholder="请输入" |
|||
:disabled="true" |
|||
v-model="houseItem.titleName"> |
|||
</el-input> |
|||
<el-select class="item_width_1" |
|||
v-model="houseItem.colKey" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in houseItemList" |
|||
@click.native="handleSelHouseItem(houseIndex,item)" |
|||
:key="item.colKey" |
|||
:label="item.label" |
|||
:value="item.colKey"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select class="item_width_1" |
|||
v-model="houseItem.queryType" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in queryList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<div> |
|||
|
|||
<el-select v-if="houseItem.colType==='select'||houseItem.colType==='radio'||houseItem.colType==='checkbox'" |
|||
class="item_width_1" |
|||
v-model="houseItem.colVal" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in houseItem.colOption" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-input-number v-else-if="houseItem.colType==='inputNum'" |
|||
v-model="houseItem.colVal" |
|||
:min="0" |
|||
size="mini" |
|||
label="请输入"></el-input-number> |
|||
<el-date-picker v-else-if="houseItem.colType==='datepicker'||houseItem.colType==='date'" |
|||
v-model="houseItem.colVal" |
|||
class="item_width_1" |
|||
type="date" |
|||
size="mini" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<el-input v-else |
|||
class="item_width_1" |
|||
size="mini" |
|||
placeholder="请输入" |
|||
v-model="houseItem.colVal"> |
|||
</el-input> |
|||
</div> |
|||
|
|||
<el-select v-if="houseIndex<(houseRuleList.length-1)" |
|||
class="item_width_1" |
|||
v-model="houseItem.lastLogicalRel" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in logicalList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
<el-button icon="el-icon-remove-outline" |
|||
circle |
|||
@click="delHouse(houseIndex)" |
|||
type="danger"></el-button> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div v-if="staticSel"> |
|||
<div v-for="(staticItem,staticIndex) in statRuleList" |
|||
:key="staticIndex" |
|||
class="row-item"> |
|||
<el-input class="item_width_1" |
|||
size="mini" |
|||
placeholder="请输入" |
|||
:disabled="true" |
|||
v-model="staticItem.titleName"> |
|||
</el-input> |
|||
<el-select class="item_width_1" |
|||
v-model="staticItem.colKey" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in staticItemList" |
|||
@click.native="handleSelStaticItem(staticIndex,item)" |
|||
:key="item.colKey" |
|||
:label="item.label" |
|||
:value="item.colKey"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-select class="item_width_1" |
|||
v-model="staticItem.queryType" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in queryList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<div> |
|||
|
|||
<el-select v-if="staticItem.colType==='select'||staticItem.colType==='radio'||staticItem.colType==='checkbox'" |
|||
class="item_width_1" |
|||
v-model="staticItem.colVal" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in staticItem.colOption" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-input-number v-else-if="staticItem.colType==='inputNum'" |
|||
v-model="staticItem.colVal" |
|||
:min="0" |
|||
size="mini" |
|||
label="请输入"></el-input-number> |
|||
<el-date-picker v-else-if="staticItem.colType==='datepicker'||staticItem.colType==='date'" |
|||
v-model="staticItem.colVal" |
|||
class="item_width_1" |
|||
type="date" |
|||
value-format="yyyy-MM-dd" |
|||
value="yyyy-MM-dd" |
|||
placeholder="开始时间"> |
|||
</el-date-picker> |
|||
<el-input v-else |
|||
class="item_width_1" |
|||
size="mini" |
|||
placeholder="请输入" |
|||
v-model="staticItem.colVal"> |
|||
</el-input> |
|||
</div> |
|||
|
|||
<el-select v-if="staticIndex<(statRuleList.length-1)" |
|||
class="item_width_1" |
|||
v-model="staticItem.lastLogicalRel" |
|||
size="mini" |
|||
placeholder="全部" |
|||
clearable> |
|||
<el-option v-for="item in logicalList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
<el-button icon="el-icon-remove-outline" |
|||
circle |
|||
@click="delStatic(staticIndex)" |
|||
type="danger"></el-button> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
|
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
|
|||
personChecked: false, |
|||
houseChecked: false, |
|||
staticChecked: false, |
|||
|
|||
personSel: true, |
|||
houseSel: false, |
|||
staticSel: false, |
|||
|
|||
groupList: [], |
|||
queryList: [], |
|||
logicalList: [ |
|||
{ |
|||
label: '并且', |
|||
value: 'and' |
|||
}, |
|||
{ |
|||
label: '或者', |
|||
value: 'or' |
|||
} |
|||
], |
|||
houseItemList: [],//房屋信息第二列 |
|||
staticItemList: [],//统计信息第二列 |
|||
resiRuleList: [], |
|||
resiRuleList1: [ |
|||
{ |
|||
ruleDesc: '',//规则描述文字，例如：基础信息性别等于女 |
|||
lastLogicalRel: '',//与上一条的关系；and、or |
|||
itemGroupId: '', |
|||
itemId: '', |
|||
queryType: '', |
|||
colTable: '', |
|||
colKey: '', |
|||
colVal: '', |
|||
|
|||
itemList: [], |
|||
colType: '',//详细参数的组件类型 |
|||
colOption: [], |
|||
|
|||
} |
|||
], |
|||
houseRuleList: [], |
|||
houseRuleList1: [ |
|||
{ |
|||
ruleDesc: '', |
|||
lastLogicalRel: '',//与上一条的关系；and、or |
|||
queryType: '', |
|||
colTable: '', |
|||
colKey: '', |
|||
colVal: '', |
|||
|
|||
titleName: '房屋信息', |
|||
colType: '',//详细参数的组件类型 |
|||
colOption: [], |
|||
} |
|||
], |
|||
statRuleList: [], |
|||
statRuleList1: [ |
|||
{ |
|||
ruleDesc: '', |
|||
lastLogicalRel: '',//与上一条的关系；and、or |
|||
queryType: '', |
|||
colTable: '', |
|||
colKey: '', |
|||
colVal: '', |
|||
|
|||
titleName: '统计信息', |
|||
colType: '',//详细参数的组件类型 |
|||
colOption: [], |
|||
|
|||
} |
|||
], |
|||
okflag: false, |
|||
|
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
|
|||
}, |
|||
components: {}, |
|||
async mounted () { |
|||
this.loadPersonGroup() |
|||
this.loadHouseItem() |
|||
this.loadStaticItem() |
|||
this.loadDicOption() |
|||
}, |
|||
|
|||
|
|||
methods: { |
|||
getRule () { |
|||
this.okflag = false |
|||
let messageObj = this.validateRule() |
|||
|
|||
console.log('resiRuleList', this.resiRuleList) |
|||
console.log('houseRuleList', this.houseRuleList) |
|||
console.log('statRuleList', this.statRuleList) |
|||
|
|||
if (messageObj) { |
|||
this.$message.error(messageObj) |
|||
|
|||
} else { |
|||
this.okflag = true |
|||
} |
|||
|
|||
}, |
|||
|
|||
validateRule () { |
|||
|
|||
let message = '' |
|||
|
|||
this.resiRuleList.forEach((item, index) => { |
|||
if (index === this.resiRuleList.length - 1) { |
|||
if (item.lastLogicalRel === '' || |
|||
item.ruleDesc === '' || |
|||
item.itemGroupId === '' || |
|||
item.itemId === '' || |
|||
item.queryType === '' || |
|||
item.colKey === '' || |
|||
item.colVal === '') { |
|||
|
|||
message = '人员信息不完整，请填写完整！' |
|||
return message |
|||
} |
|||
} else { |
|||
if ( |
|||
item.ruleDesc === '' || |
|||
item.itemGroupId === '' || |
|||
item.itemId === '' || |
|||
item.queryType === '' || |
|||
item.colKey === '' || |
|||
item.colVal === '') { |
|||
|
|||
message = '人员信息不完整，请填写完整！' |
|||
return message |
|||
} |
|||
} |
|||
|
|||
}); |
|||
|
|||
this.houseRuleList.forEach((item, index) => { |
|||
|
|||
if (index === this.houseRuleList.length - 1) { |
|||
|
|||
if ( |
|||
|
|||
item.ruleDesc === '' || |
|||
item.queryType === '' || |
|||
item.colKey === '' || |
|||
item.colVal === '') { |
|||
|
|||
message = '房屋信息不完整，请填写完整！' |
|||
return message |
|||
} |
|||
} else { |
|||
if (item.lastLogicalRel === '' || |
|||
item.ruleDesc === '' || |
|||
item.queryType === '' || |
|||
item.colKey === '' || |
|||
item.colVal === '') { |
|||
|
|||
message = '房屋信息不完整，请填写完整！' |
|||
return message |
|||
} |
|||
} |
|||
}); |
|||
|
|||
this.statRuleList.forEach((item, index) => { |
|||
if (index === this.statRuleList.length - 1) { |
|||
if ( |
|||
|
|||
item.ruleDesc === '' || |
|||
item.queryType === '' || |
|||
item.colKey === '' || |
|||
item.colVal === '') { |
|||
|
|||
message = '统计信息不完整，请填写完整！' |
|||
return message |
|||
} |
|||
} else { |
|||
if ( |
|||
item.lastLogicalRel === '' || |
|||
item.ruleDesc === '' || |
|||
item.queryType === '' || |
|||
item.colKey === '' || |
|||
item.colVal === '') { |
|||
|
|||
message = '统计信息不完整，请填写完整！' |
|||
return message |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
return message |
|||
}, |
|||
|
|||
clickTab (type) { |
|||
if (type === 'person') { |
|||
this.personSel = true |
|||
this.houseSel = false |
|||
this.staticSel = false |
|||
} |
|||
if (type === 'house') { |
|||
this.personSel = false |
|||
this.houseSel = true |
|||
this.staticSel = false |
|||
} |
|||
if (type === 'static') { |
|||
this.personSel = false |
|||
this.houseSel = false |
|||
this.staticSel = true |
|||
} |
|||
}, |
|||
|
|||
addRule () { |
|||
if (this.personSel) { |
|||
this.addPerson() |
|||
} |
|||
|
|||
if (this.houseSel) { |
|||
this.addHouse() |
|||
} |
|||
|
|||
if (this.staticSel) { |
|||
this.addStatic() |
|||
} |
|||
}, |
|||
|
|||
addPerson () { |
|||
let obj = { |
|||
ruleDesc: '',//规则描述文字，例如：基础信息性别等于女 |
|||
lastLogicalRel: 'and',//与上一条的关系；and、or |
|||
itemGroupId: '', |
|||
itemId: '', |
|||
queryType: '', |
|||
colTable: '', |
|||
colKey: '', |
|||
colVal: '', |
|||
|
|||
itemList: [], |
|||
colType: '',//详细参数的组件类型 |
|||
colOption: [], |
|||
} |
|||
|
|||
this.resiRuleList.push(obj) |
|||
}, |
|||
|
|||
delPerson (index) { |
|||
this.resiRuleList.splice(index, 1); |
|||
}, |
|||
|
|||
addHouse () { |
|||
let obj = { |
|||
ruleDesc: '房屋信息', |
|||
lastLogicalRel: 'and',//与上一条的关系；and、or |
|||
queryType: '', |
|||
colTable: '', |
|||
colKey: '', |
|||
colVal: '', |
|||
|
|||
titleName: '房屋信息', |
|||
colType: '',//详细参数的组件类型 |
|||
colOption: [], |
|||
} |
|||
|
|||
this.houseRuleList.push(obj) |
|||
}, |
|||
|
|||
delHouse (index) { |
|||
this.houseRuleList.splice(index, 1); |
|||
}, |
|||
|
|||
addStatic () { |
|||
let obj = { |
|||
ruleDesc: '统计信息', |
|||
lastLogicalRel: 'and',//与上一条的关系；and、or |
|||
queryType: '', |
|||
colTable: '', |
|||
colKey: '', |
|||
colVal: '', |
|||
|
|||
titleName: '统计信息', |
|||
colType: '',//详细参数的组件类型 |
|||
colOption: [], |
|||
} |
|||
|
|||
this.statRuleList.push(obj) |
|||
}, |
|||
|
|||
delStatic (index) { |
|||
this.statRuleList.splice(index, 1); |
|||
}, |
|||
|
|||
//选择人员信息第一列下拉框 |
|||
async handleSelGroup (personIndex, item) { |
|||
const url = '/oper/customize/icformitem/getItemListV2' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree' |
|||
let params = { |
|||
policyFlag: '1', |
|||
groupId: item.id, |
|||
|
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
let oneData = this.resiRuleList[personIndex] |
|||
oneData.ruleDesc = item.label |
|||
oneData.itemList = data |
|||
oneData.colTable = item.tableName |
|||
this.$set(this.resiRuleList, personIndex, oneData) |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//选择人员信息第二列下拉框 |
|||
async handleSelGroupItem (personIndex, item) { |
|||
|
|||
let oneData = this.resiRuleList[personIndex] |
|||
|
|||
oneData.colKey = item.columnName |
|||
oneData.colType = item.itemType |
|||
|
|||
oneData.ruleDesc = oneData.ruleDesc + item.label |
|||
|
|||
|
|||
if (item.optionSourceType === 'remote') { |
|||
const url = item.optionSourceValue |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
oneData.colOption = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
} else { |
|||
oneData.colOption = item.options |
|||
} |
|||
|
|||
|
|||
this.$set(this.resiRuleList, personIndex, oneData) |
|||
|
|||
}, |
|||
|
|||
//选择房屋信息第二列下拉框 |
|||
async handleSelHouseItem (houseIndex, item) { |
|||
// debugger |
|||
let oneData = this.houseRuleList[houseIndex] |
|||
|
|||
oneData.colTable = item.tableName |
|||
oneData.colType = item.itemType |
|||
oneData.ruleDesc = oneData.ruleDesc + item.label |
|||
|
|||
if (item.optionSourceType === 'remote') { |
|||
const url = item.optionSourceUrl |
|||
let params = {} |
|||
if (item.optionSourceParam) { |
|||
params = JSON.parse(item.optionSourceParam) |
|||
} else { |
|||
params = {} |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
oneData.colOption = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
} else { |
|||
oneData.colOption = [] |
|||
} |
|||
|
|||
|
|||
this.$set(this.houseRuleList, houseIndex, oneData) |
|||
|
|||
}, |
|||
//选择统计信息第二列下拉框 |
|||
async handleSelStaticItem (staticIndex, item) { |
|||
|
|||
let oneData = this.statRuleList[staticIndex] |
|||
|
|||
oneData.colTable = item.tableName |
|||
oneData.colType = item.itemType |
|||
oneData.ruleDesc = oneData.ruleDesc + item.label |
|||
|
|||
if (item.optionSourceType === 'remote') { |
|||
const url = item.optionSourceUrl |
|||
let params = {} |
|||
if (item.optionSourceParam) { |
|||
params = JSON.parse(item.optionSourceParam) |
|||
} else { |
|||
params = {} |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
oneData.colOption = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
} else { |
|||
oneData.colOption = [] |
|||
} |
|||
|
|||
|
|||
this.$set(this.statRuleList, staticIndex, oneData) |
|||
|
|||
}, |
|||
|
|||
// 获取人员信息---第一列 |
|||
async loadPersonGroup () { |
|||
const url = '/oper/customize//icformitemgroup/list' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree' |
|||
let params = { |
|||
formCode: 'resi_base_info' |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.groupList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
|
|||
}, |
|||
// 获取房屋信息--第二列 |
|||
async loadHouseItem () { |
|||
const url = '/heart/policy/item-list/' + 'house' |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.houseItemList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
|
|||
}, |
|||
// 获取统计信息--第二列 |
|||
async loadStaticItem () { |
|||
const url = '/heart/policy/item-list/' + 'stat' |
|||
|
|||
let params = {} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.staticItemList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
|
|||
}, |
|||
async loadDicOption () { |
|||
const url = '/sys/dict/data/dictlist' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree' |
|||
let params = { |
|||
dictType: "sql_query_type" |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.queryList = data |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
// 开启加载动画 |
|||
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' } |
|||
], |
|||
serviceScope: [ |
|||
{ required: true, message: '服务范围不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
} |
|||
}, |
|||
feedbackDataRule () { |
|||
return { |
|||
|
|||
|
|||
serviceGoal: [ |
|||
{ required: true, message: '服务目标不能为空', trigger: 'blur' } |
|||
], |
|||
|
|||
serviceEffect: [ |
|||
{ required: true, message: '服务效果不能为空', trigger: 'blur' } |
|||
], |
|||
servicePeopleNumber: [ |
|||
{ required: true, message: '服务人数不能为空', trigger: 'blur' } |
|||
], |
|||
serviceStatus: [ |
|||
{ required: true, message: '服务状态不能为空', trigger: 'blur' } |
|||
], |
|||
satisfaction: [ |
|||
{ required: true, message: '满意度不能为空', trigger: 'blur' } |
|||
], |
|||
address: [ |
|||
{ required: true, message: '地址不能为空', trigger: 'blur' } |
|||
] |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
props: { |
|||
|
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/buttonstyle.scss"; |
|||
|
|||
.tab-title { |
|||
margin-right: 20px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.tab-title-sel { |
|||
color: #3e8ef7; |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
.row-item { |
|||
display: flex; |
|||
margin-bottom: 5px; |
|||
} |
|||
.item_width_1 { |
|||
width: 120px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
/deep/ .el-checkbox { |
|||
margin-right: 10px; |
|||
} |
|||
/deep/.el-checkbox:last-of-type { |
|||
margin-right: 10px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue