jiangyy
4 years ago
4 changed files with 1813 additions and 186 deletions
@ -0,0 +1,83 @@ |
|||||
|
|
||||
|
|
||||
|
.div_form { |
||||
|
width: 100%; |
||||
|
margin-top:20px; |
||||
|
|
||||
|
.data-tag{ |
||||
|
margin-left:10px; |
||||
|
} |
||||
|
|
||||
|
.item_width_1{ |
||||
|
width: 480px; |
||||
|
} |
||||
|
.item_width_2{ |
||||
|
width: 220px; |
||||
|
} |
||||
|
|
||||
|
.list_item_width_1 { |
||||
|
width: 165px; |
||||
|
} |
||||
|
.list_item_width_2 { |
||||
|
width: 135px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.div-mult-form { |
||||
|
margin-top: 20px; |
||||
|
|
||||
|
.div_person { |
||||
|
display: flex; |
||||
|
font-size: 14px; |
||||
|
padding-bottom: 20px; |
||||
|
|
||||
|
.person_title { |
||||
|
text-align: right; |
||||
|
flex: 0 0 100px; |
||||
|
|
||||
|
line-height: 36px; |
||||
|
padding: 0 12px 0 0; |
||||
|
} |
||||
|
|
||||
|
.tag_item { |
||||
|
margin-right: 10px; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.tag_tip { |
||||
|
margin-top: 10px; |
||||
|
color: #9c9c9c; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.twoline { |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 2; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.div_btn { |
||||
|
margin-top: 20px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.d-h3{ |
||||
|
margin-left:20px; |
||||
|
} |
||||
|
|
||||
|
.div_map { |
||||
|
margin-top:10px; |
||||
|
position: relative; |
||||
|
} |
||||
|
.div_searchmap { |
||||
|
z-index: 1000; |
||||
|
position: absolute; |
||||
|
top: 5px; |
||||
|
left: 5px; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
@ -0,0 +1,850 @@ |
|||||
|
<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="serviceCategoryId"> |
||||
|
<el-select v-model="formData.serviceCategoryId" |
||||
|
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="principalConcat" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
placeholder="请输入联系人电话" |
||||
|
v-model="formData.principalConcat"> |
||||
|
</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-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="500" |
||||
|
show-word-limit |
||||
|
:rows="3" |
||||
|
placeholder="请输入服务目标，不超过500字" |
||||
|
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="500" |
||||
|
show-word-limit |
||||
|
:rows="3" |
||||
|
placeholder="请输入服务效果，不超过500字" |
||||
|
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"> |
||||
|
<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" |
||||
|
:on-success="handleFileSuccess" |
||||
|
:on-remove="handleFileRemove" |
||||
|
:on-preview="handleFileDownload" |
||||
|
:limit="3" |
||||
|
:before-upload="beforeUpload" |
||||
|
:file-list="fileList"> |
||||
|
<el-button size="small" |
||||
|
type="primary">点击上传</el-button> |
||||
|
<div slot="tip" |
||||
|
class="el-upload__tip">只能上传word、excel、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: { |
||||
|
serviceCategoryId: '',//服务分类id |
||||
|
serviceProjectId: '',//服务项目id |
||||
|
serviceOrgId: '',//服务组织id |
||||
|
serviceScope: [],// |
||||
|
principalName: '',//经办人(责任人)姓名 |
||||
|
principalConcat: '',//经办人联系方式 |
||||
|
serviceTimeStart: '',//服务起始时间yyyy-MM-dd |
||||
|
serviceTimeEnd: '',//服务截止时间yyyy-MM-dd |
||||
|
remark: '',// |
||||
|
feedback: {},//反馈。允许发起服务的时候直接填写反馈，完成服务。 |
||||
|
|
||||
|
}, |
||||
|
feedbackFormData: { |
||||
|
serviceProjectId: '',// 服务项目id |
||||
|
serviceProjectName: '', |
||||
|
serviceGoal: '',// 服务目标 |
||||
|
serviceEffect: '',// 服务效果 |
||||
|
servicePeopleNumber: null,// 服务人数 |
||||
|
serviceStatus: '',// 服务状态。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] |
||||
|
// } |
||||
|
|
||||
|
// }, |
||||
|
}, |
||||
|
components: {}, |
||||
|
async mounted () { |
||||
|
this.startLoading() |
||||
|
this.initMap() |
||||
|
this.$refs.ref_form.resetFields(); |
||||
|
this.$refs.ref_form_feedback.resetFields(); |
||||
|
await this.loadScopeTree() |
||||
|
this.endLoading() |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
methods: { |
||||
|
handleChangeFeedback (val) { |
||||
|
this.showFeedback = val |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
hancleClickCategray () { |
||||
|
//获取服务项目 |
||||
|
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/isServiceProject/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.objectType, |
||||
|
objectId: element.objectId, |
||||
|
objectName: element.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, |
||||
|
serviceCategory: this.formData.serviceCategoryId, |
||||
|
} |
||||
|
|
||||
|
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.serviceCategoryId, |
||||
|
|
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.orgList = data |
||||
|
} 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 { |
||||
|
|
||||
|
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 () { |
||||
|
console.log(this.formData) |
||||
|
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) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
beforeUpload (file) { |
||||
|
const array = file.name.split('.') |
||||
|
const extension = array[array.length - 1] |
||||
|
|
||||
|
if (extension !== 'xls' |
||||
|
&& extension !== 'xlsx' |
||||
|
&& extension !== 'doc' |
||||
|
&& extension !== 'docx' |
||||
|
&& extension !== 'pdf') { |
||||
|
this.$message.error('只能上传word、excel、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] |
||||
|
|
||||
|
file.url = res.data.url |
||||
|
file.type = fileType |
||||
|
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 = { |
||||
|
serviceCategoryId: '',//服务分类id |
||||
|
serviceProjectId: '',//服务项目id |
||||
|
serviceOrgId: '',//服务组织id |
||||
|
serviceScope: [],// |
||||
|
principalName: '',//经办人(责任人)姓名 |
||||
|
principalConcat: '',//经办人联系方式 |
||||
|
serviceTimeStart: '',//服务起始时间yyyy-MM-dd |
||||
|
serviceTimeEnd: '',//服务截止时间yyyy-MM-dd |
||||
|
remark: '',// |
||||
|
feedback: {},//反馈。允许发起服务的时候直接填写反馈，完成服务。 |
||||
|
|
||||
|
} |
||||
|
this.feedbackFormData = { |
||||
|
serviceProjectId: '',// 服务项目id |
||||
|
serviceProjectName: '', |
||||
|
serviceGoal: '',// 服务目标 |
||||
|
serviceEffect: '',// 服务效果 |
||||
|
servicePeopleNumber: null,// 服务人数 |
||||
|
serviceStatus: '',// 服务状态。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 { |
||||
|
|
||||
|
serviceCategoryId: [ |
||||
|
{ 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: '' |
||||
|
}, |
||||
|
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,697 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="dialog-h-content scroll-h"> |
||||
|
|
||||
|
<el-form ref="ref_form" |
||||
|
:inline="true" |
||||
|
:model="formData" |
||||
|
:rules="dataRule" |
||||
|
:disabled="formType === 'detail'" |
||||
|
class="form"> |
||||
|
|
||||
|
<el-form-item label="服务分类" |
||||
|
prop="serviceCategoryId"> |
||||
|
<el-select v-model="formData.serviceCategoryId" |
||||
|
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="type" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-select class="item_width_1" |
||||
|
v-model="formData.type" |
||||
|
placeholder="请选择" |
||||
|
filterable |
||||
|
clearable> |
||||
|
<el-option v-for="item in typeList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="服务组织" |
||||
|
prop="type" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-select class="item_width_1" |
||||
|
v-model="formData.type" |
||||
|
placeholder="请选择" |
||||
|
filterable |
||||
|
clearable> |
||||
|
<el-option v-for="item in typeList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="服务范围" |
||||
|
prop="unitName" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
maxlength="50" |
||||
|
show-word-limit |
||||
|
placeholder="请输入单位名称" |
||||
|
v-model="formData.unitName"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="经办人" |
||||
|
prop="contact" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
placeholder="请输入联系人姓名" |
||||
|
v-model="formData.contact"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系方式" |
||||
|
prop="contactMobile" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
placeholder="请输入联系人电话" |
||||
|
v-model="formData.contactMobile"> |
||||
|
</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" |
||||
|
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" |
||||
|
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> |
||||
|
|
||||
|
<h3>反馈内容</h3> |
||||
|
<el-form ref="ref_form" |
||||
|
:inline="true" |
||||
|
:model="formData" |
||||
|
:rules="dataRule" |
||||
|
:disabled="formType === 'detail'" |
||||
|
class="form"> |
||||
|
|
||||
|
<el-form-item label="分类" |
||||
|
prop="type" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-select class="item_width_1" |
||||
|
v-model="formData.type" |
||||
|
placeholder="请选择" |
||||
|
filterable |
||||
|
clearable> |
||||
|
<el-option v-for="item in typeList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="单位名称" |
||||
|
prop="unitName" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
maxlength="50" |
||||
|
show-word-limit |
||||
|
placeholder="请输入单位名称" |
||||
|
v-model="formData.unitName"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="服务事项" |
||||
|
prop="serviceMatterList" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-checkbox-group class="item_width_1" |
||||
|
style="display:flex;flex-wrap:wrap" |
||||
|
v-model="formData.serviceMatterList"> |
||||
|
<el-checkbox v-for="item in serviceList" |
||||
|
:key="item.value" |
||||
|
:label="item.value">{{item.label}}</el-checkbox> |
||||
|
|
||||
|
</el-checkbox-group> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系人" |
||||
|
prop="contact" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
placeholder="请输入联系人姓名" |
||||
|
v-model="formData.contact"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系电话" |
||||
|
prop="contactMobile" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
placeholder="请输入联系人电话" |
||||
|
v-model="formData.contactMobile"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="在职党员" |
||||
|
style="display: block" |
||||
|
prop="memberCount" |
||||
|
label-width="150px"> |
||||
|
<el-input-number class="item_width_4" |
||||
|
v-model="formData.memberCount" |
||||
|
:min="0" |
||||
|
:max="9999" |
||||
|
label="在职党员"></el-input-number> |
||||
|
</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-item label="位置坐标" |
||||
|
prop="longitude" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<div style="width:500px"> |
||||
|
|
||||
|
<div class="div_map"> |
||||
|
<div id="app"> |
||||
|
|
||||
|
</div> |
||||
|
<div class="div_searchmap"> |
||||
|
<el-input class="item_width_4" |
||||
|
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 style="margin-top: 10px"> |
||||
|
<span>经度</span> |
||||
|
<el-input class="item_width_3" |
||||
|
maxlength="50" |
||||
|
placeholder="请输入经度" |
||||
|
v-model="formData.longitude"> |
||||
|
</el-input> |
||||
|
<span style="margin-left: 20px">纬度</span> |
||||
|
<el-input class="item_width_3" |
||||
|
maxlength="50" |
||||
|
placeholder="请输入纬度" |
||||
|
v-model="formData.latitude"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="地理位置" |
||||
|
prop="address" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
|
||||
|
<el-input class="item_width_1" |
||||
|
v-model="formData.address"> |
||||
|
</el-input> |
||||
|
|
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</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 { |
||||
|
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情,feedback反馈 |
||||
|
|
||||
|
btnDisable: false, |
||||
|
|
||||
|
unitId: '', |
||||
|
keyWords: '', |
||||
|
formData: { |
||||
|
unitName: '', |
||||
|
serviceMatterList: [], |
||||
|
type: '', |
||||
|
contact: '', |
||||
|
contactMobile: '', |
||||
|
memberCount: 0, |
||||
|
remark: '', //备注【最大500字】 |
||||
|
address: '', //详细地址 |
||||
|
longitude: 36.0722275, //经度 |
||||
|
latitude: 120.38945519 //纬度 |
||||
|
}, |
||||
|
serviceList: [],//服务list |
||||
|
|
||||
|
endPickerOptions: { |
||||
|
disabledDate: endDisabledDate |
||||
|
}, |
||||
|
startPickerOptions: { |
||||
|
disabledDate: startDisabledDate |
||||
|
}, |
||||
|
|
||||
|
categrayArray: [], |
||||
|
projectList: [], |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
components: {}, |
||||
|
mounted () { |
||||
|
if (this.serviceRecordId) {//详情 |
||||
|
|
||||
|
} |
||||
|
this.initMap() |
||||
|
console.log('mounted') |
||||
|
}, |
||||
|
activated () { |
||||
|
console.log('activated') |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
async initForm (type, unitId) { |
||||
|
this.startLoading() |
||||
|
this.$refs.ref_form.resetFields(); |
||||
|
|
||||
|
//获取服务事项 |
||||
|
await this.loadService() |
||||
|
|
||||
|
this.formType = type |
||||
|
if (unitId) { |
||||
|
this.unitId = unitId |
||||
|
this.formData.id = unitId |
||||
|
await this.loadFormData() |
||||
|
} else { |
||||
|
map.setCenter(new TMap.LatLng(36.0722275, 120.38945519)) |
||||
|
this.setMarker(36.0722275, 120.38945519) |
||||
|
} |
||||
|
|
||||
|
this.endLoading() |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//获取服务事项下拉框 |
||||
|
async loadService () { |
||||
|
const url = "/heart/serviceitem/dict-list" |
||||
|
let params = { |
||||
|
type: 'usable' |
||||
|
// parentCategoryCode: '1010' |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.serviceList = data |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//加载组织 |
||||
|
async loadFormData () { |
||||
|
const url = '/heart/icpartyunit/detail' |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/detail' |
||||
|
let params = { |
||||
|
id: this.unitId |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
if (!data.serviceMatterList || !Array.isArray(data.serviceMatterList)) { |
||||
|
data.serviceMatterList = [] |
||||
|
} |
||||
|
|
||||
|
this.formData = { ...data } |
||||
|
map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude)) |
||||
|
this.setMarker(this.formData.latitude, this.formData.longitude) |
||||
|
} 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.addUnit() |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
async addUnit () { |
||||
|
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码 |
||||
|
if (regPhone.test(this.formData.contactMobile) === false) { |
||||
|
this.btnDisable = false |
||||
|
this.$message({ |
||||
|
type: 'warning', |
||||
|
message: '请输入正确的手机号码' |
||||
|
}) |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
let url = '/heart/icpartyunit/save' |
||||
|
// let url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/save" |
||||
|
// if (this.formType === 'edit') { |
||||
|
// this.formData.id = this.unitId |
||||
|
// } |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, this.formData) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '操作成功' |
||||
|
}) |
||||
|
this.resetData() |
||||
|
this.$emit('dialogOk') |
||||
|
this.btnDisable = false |
||||
|
} else { |
||||
|
this.btnDisable = false |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
handleCancle () { |
||||
|
this.resetData() |
||||
|
this.$emit('dialogCancle') |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 地图初始化函数，本例取名为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.unitId = '' |
||||
|
this.keyWords = '' |
||||
|
this.formData = { |
||||
|
unitName: '', |
||||
|
serviceMatterList: [], |
||||
|
type: '', |
||||
|
contact: '', |
||||
|
contactMobile: '', |
||||
|
memberCount: 0, |
||||
|
remark: '', //备注【最大500字】 |
||||
|
address: '', //详细地址 |
||||
|
longitude: '', //经度 |
||||
|
latitude: '' //纬度 |
||||
|
} |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
dataRule () { |
||||
|
return { |
||||
|
|
||||
|
unitName: [ |
||||
|
{ required: true, message: '单位名称不能为空', trigger: 'blur' }, |
||||
|
], |
||||
|
type: [ |
||||
|
{ required: true, message: '分类不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
|
||||
|
contact: [ |
||||
|
{ required: true, message: '联系人不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
contactMobile: [ |
||||
|
{ required: true, message: '联系电话不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
memberCount: [ |
||||
|
{ required: true, message: '在职党员数不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
address: [ |
||||
|
{ required: true, message: '详细地址不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
longitude: [ |
||||
|
{ required: true, message: '坐标不能为空', trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
serviceRecordId: { |
||||
|
type: String, |
||||
|
required: '' |
||||
|
}, |
||||
|
formType: { |
||||
|
type: String, |
||||
|
required: '' |
||||
|
}, |
||||
|
categrayArray: { |
||||
|
type: Array, |
||||
|
default () { |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.div_map { |
||||
|
position: relative; |
||||
|
} |
||||
|
.div_searchmap { |
||||
|
z-index: 5000; |
||||
|
position: absolute; |
||||
|
top: 5px; |
||||
|
left: 5px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style lang="scss" scoped > |
||||
|
@import "@/assets/scss/modules/visual/communityManageForm.scss"; |
||||
|
</style> |
||||
Loading…
Reference in new issue