Browse Source

转服务的坑

dev-登录返回旧业面
dai 3 years ago
parent
commit
affd6ba55d
  1. 505
      src/views/modules/shequzhili/event/cpts/process-form-demand.vue

505
src/views/modules/shequzhili/event/cpts/process-form-demand.vue

@ -1,10 +1,12 @@
<template> <template>
<div class=""> <div class="">
<el-form ref="ref_form" <el-form
ref="ref_form"
:inline="false" :inline="false"
:model="formData" :model="formData"
:rules="dataRule" :rules="dataRule"
label-width="100px"> label-width="100px"
>
<!-- <el-form-item label="事件分类" <!-- <el-form-item label="事件分类"
label-width="150px" label-width="150px"
prop="categoryId"> prop="categoryId">
@ -17,105 +19,124 @@
:show-all-levels="false" :show-all-levels="false"
@change="handleChangeCate"></el-cascader> @change="handleChangeCate"></el-cascader>
</el-form-item> --> </el-form-item> -->
<el-form-item label="服务内容" <el-form-item
label="服务内容"
label-width="150px" label-width="150px"
:class="{ 'form-item': source === 'visiual' }" :class="{ 'form-item': source === 'visiual' }"
prop="content"> prop="content"
>
<div :class="{ 'visiual-form': source === 'visiual' }"> <div :class="{ 'visiual-form': source === 'visiual' }">
<el-input v-model="formData.content" <el-input
v-model="formData.content"
:autosize="{ minRows: 2, maxRows: 10 }" :autosize="{ minRows: 2, maxRows: 10 }"
type="textarea" type="textarea"
clearable clearable
class="cell-width-area" class="cell-width-area"
placeholder="请输入内容"></el-input> placeholder="请输入内容"
></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="服务类型" <el-form-item
label="服务类型"
label-width="150px" label-width="150px"
:class="{ 'form-item': source === 'visiual' }" :class="{ 'form-item': source === 'visiual' }"
prop="categoryCode"> prop="categoryCode"
>
<div :class="{ 'visiual-form': source === 'visiual' }"> <div :class="{ 'visiual-form': source === 'visiual' }">
<el-cascader
<el-cascader v-model="formData.categoryCode" v-model="formData.categoryCode"
:options="demandOptions" :options="demandOptions"
clearable clearable
class="cell-width-1" class="cell-width-1"
@change="handleCateSlect"></el-cascader> @change="handleCateSlect"
></el-cascader>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="服务时间" <el-form-item
label="服务时间"
label-width="150px" label-width="150px"
:class="{ 'form-item': source === 'visiual' }" :class="{ 'form-item': source === 'visiual' }"
prop="wantServiceTime"> prop="wantServiceTime"
>
<div :class="{ 'visiual-form': source === 'visiual' }"> <div :class="{ 'visiual-form': source === 'visiual' }">
<el-date-picker v-model="formData.wantServiceTime" <el-date-picker
v-model="formData.wantServiceTime"
type="datetime" type="datetime"
class="cell-width-1" class="cell-width-1"
clearable clearable
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"> placeholder="选择日期时间"
>
</el-date-picker> </el-date-picker>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="需求人" <el-form-item
label="需求人"
label-width="150px" label-width="150px"
:class="{ 'form-item': source === 'visiual' }" :class="{ 'form-item': source === 'visiual' }"
prop="demandUserName"> prop="demandUserName"
>
<div :class="{ 'visiual-form': source === 'visiual' }"> <div :class="{ 'visiual-form': source === 'visiual' }">
<el-input v-model="formData.demandUserName" <el-input
class="cell-width-1"></el-input> v-model="formData.demandUserName"
class="cell-width-1"
></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="联系电话" <el-form-item
label="联系电话"
label-width="150px" label-width="150px"
:class="{ 'form-item': source === 'visiual' }" :class="{ 'form-item': source === 'visiual' }"
prop="demandUserMobile"> prop="demandUserMobile"
>
<div :class="{ 'visiual-form': source === 'visiual' }"> <div :class="{ 'visiual-form': source === 'visiual' }">
<el-input v-model="formData.demandUserMobile" <el-input
class="cell-width-1"></el-input> v-model="formData.demandUserMobile"
class="cell-width-1"
></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="服务地点" <el-form-item
label="服务地点"
prop="serviceLocation" prop="serviceLocation"
:class="{ 'form-item': source === 'visiual' }" :class="{ 'form-item': source === 'visiual' }"
label-width="150px" label-width="150px"
style="display: block"> style="display: block"
>
<div :class="{ 'visiual-form': source === 'visiual' }"> <div :class="{ 'visiual-form': source === 'visiual' }">
<el-input class="cell-width-1" <el-input class="cell-width-1" v-model="formData.serviceLocation">
v-model="formData.serviceLocation">
</el-input> </el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="位置坐标" <el-form-item
label="位置坐标"
:class="{ 'form-item': source === 'visiual' }" :class="{ 'form-item': source === 'visiual' }"
prop="longitude" prop="longitude"
label-width="150px" label-width="150px"
style="display: block"> style="display: block"
>
<div style="width: 500px"> <div style="width: 500px">
<div class="div_map"> <div class="div_map">
<div id="app_map"> <div id="app_map"></div>
</div>
<div class="div_searchmap"> <div class="div_searchmap">
<el-input class="cell-width-map" <el-input
class="cell-width-map"
maxlength="50" maxlength="50"
size="mini" size="mini"
placeholder="请输入关键字" placeholder="请输入关键字"
v-model="keyWords"> v-model="keyWords"
>
</el-input> </el-input>
<el-button style="margin-left: 10px" <el-button
style="margin-left: 10px"
type="primary" type="primary"
size="mini" size="mini"
@click="handleSearchMap">查询</el-button> @click="handleSearchMap"
>查询</el-button
>
</div> </div>
</div> </div>
@ -136,92 +157,98 @@
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="门牌号" <el-form-item
label="门牌号"
:class="{ 'form-item': source === 'visiual' }" :class="{ 'form-item': source === 'visiual' }"
label-width="150px" label-width="150px"
prop="locationDetail"> prop="locationDetail"
>
<div :class="{ 'visiual-form': source === 'visiual' }"> <div :class="{ 'visiual-form': source === 'visiual' }">
<el-input v-model="formData.locationDetail" <el-input
class="cell-width-1"></el-input> v-model="formData.locationDetail"
class="cell-width-1"
></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="服务方" <el-form-item
label="服务方"
:class="{ 'form-item': source === 'visiual' }" :class="{ 'form-item': source === 'visiual' }"
label-width="150px" label-width="150px"
prop="serverId"> prop="serverId"
>
<template> <template>
<div :class="[{'single-select':source==='visiual'},'sel-service']"> <div
<el-select v-model="formData.serviceType" :class="[{ 'single-select': source === 'visiual' }, 'sel-service']"
>
<el-select
v-model="formData.serviceType"
class="cell-width-1" class="cell-width-1"
placeholder="请选择" placeholder="请选择"
clearable clearable
@change="handleServiceChange('add', $event)"> @change="handleServiceChange('add', $event)"
<el-option v-for="item in serviceOptions" >
<el-option
v-for="item in serviceOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
- -
<el-select v-model="formData.serverId" <el-select
v-model="formData.serverId"
class="cell-width-1" class="cell-width-1"
filterable filterable
placeholder="请选择" placeholder="请选择"
clearable> clearable
<el-option v-for="item in serviceOptiondList" >
<el-option
v-for="item in serviceOptiondList"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</template> </template>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</template> </template>
<script> <script>
import { Loading } from "element-ui"; // Loading import { Loading } from "element-ui"; // Loading
import { requestPost } from "@/js/dai/request"; import { requestPost } from "@/js/dai/request";
import formVltHelper from "dai-js/tools/formVltHelper"; import daiMap from "@/utils/dai-map";
import { isCard } from "@/utils/validate";
let loading; // let loading; //
var map var map;
var search
var markers
var infoWindowList
var geocoder //
function iniFmData() { function iniFmData() {
return { return {
operationType: '2',//[0: 1: 2:] operationType: "2", //[0: 1: 2:]
icEventId: '',//Id icEventId: "", //Id
gridId: '',// gridId: "", //
categoryCode: '',// categoryCode: "", //
parentCode: '',// parentCode: "", //
content: '',// 1000 content: "", // 1000
reportType: 'self_help',// communitybuilding_caption;party;self_help reportType: "self_help", // communitybuilding_caption;party;self_help
reportUserName: '',// reportUserName: "", //
reportUserMobile: '',// reportUserMobile: "", //
reportTime: '',// reportTime: "", //
demandUserId: '',// user.idic_resi_user.id demandUserId: "", // user.idic_resi_user.id
demandUserName: '',// demandUserName: "", //
demandUserMobile: '',// demandUserMobile: "", //
wantServiceTime: '',// wantServiceTime: "", //
serviceType: '', serviceType: "",
serverId: '', serverId: "",
locationDetail: '', locationDetail: "",
serviceLocation: '',// serviceLocation: "", //
latitude: '',// latitude: "", //
longitude: '',// longitude: "", //
// categoryId: '' // categoryId: ''
}; };
} }
@ -231,8 +258,7 @@ export default {
btnDisable: false, btnDisable: false,
customerId: localStorage.getItem("customerId"), customerId: localStorage.getItem("customerId"),
demandOptions: [], demandOptions: [],
serviceOptions: [ serviceOptions: [],
],
serviceOptiondList: [], serviceOptiondList: [],
casOptions: [], casOptions: [],
@ -241,25 +267,25 @@ export default {
selCateObj: {}, selCateObj: {},
optionProps: { optionProps: {
multiple: false, multiple: false,
value: 'id', value: "id",
label: 'name', label: "name",
children: 'subCategory', children: "subCategory",
}, },
formData: iniFmData(), formData: iniFmData(),
okflag: false, okflag: false,
// //
keyWords: '', keyWords: "",
eventDetailCopy: {} eventDetailCopy: {},
}; };
}, },
components: {}, components: {},
computed: { computed: {
dataRule() { dataRule() {
return { return {
// categoryId: [ // categoryId: [
// { required: true, message: "", trigger: "blur" }, // { required: true, message: "", trigger: "blur" },
@ -285,14 +311,11 @@ export default {
serverId: [ serverId: [
{ required: true, message: "服务方不能为空", trigger: "blur" }, { required: true, message: "服务方不能为空", trigger: "blur" },
], ],
}; };
}, },
}, },
props: {
props: {
demandUserId: { demandUserId: {
type: String, type: String,
default: "", default: "",
@ -313,152 +336,138 @@ export default {
eventDetailData: { eventDetailData: {
type: Object, type: Object,
default() { default() {
return {} return {};
} },
}, },
source: {//manage visiual source: {
//manage visiual
type: String, type: String,
default: 'manage' default: "manage",
}
}, },
},
watch: { watch: {
demandUserName: function (val) { demandUserName: function (val) {
this.formData.reportUserName = val;
this.formData.reportUserName = val this.formData.demandUserName = val;
this.formData.demandUserName = val
}, },
demandUserMobile: function (val) { demandUserMobile: function (val) {
this.formData.reportUserMobile = val;
this.formData.reportUserMobile = val this.formData.demandUserMobile = val;
this.formData.demandUserMobile = val
}, },
demandUserId: function (val) { demandUserId: function (val) {
this.formData.demandUserId = val;
this.formData.demandUserId = val
}, },
},
created () {
}, },
async mounted() { async mounted() {
const { user } = this.$store.state const { user } = this.$store.state;
this.agencyId = user.agencyId this.agencyId = user.agencyId;
this.getCategoryList();
this.getDemandOptions();
this.getServiceOption()
// this.formData = { ...this.formDataTemp }
this.initMap()
if (this.eventId) { if (this.eventId) {
this.eventDetailCopy = JSON.parse(JSON.stringify(this.eventDetailData)); this.eventDetailCopy = JSON.parse(JSON.stringify(this.eventDetailData));
this.formData.reportUserMobile = this.eventDetailCopy.mobile this.formData.reportUserMobile = this.eventDetailCopy.mobile;
this.formData.reportUserName = this.eventDetailCopy.name this.formData.reportUserName = this.eventDetailCopy.name;
this.formData.reportTime = this.eventDetailCopy.happenTime this.formData.reportTime = this.eventDetailCopy.happenTime;
this.formData.gridId = this.eventDetailCopy.gridId this.formData.gridId = this.eventDetailCopy.gridId;
this.formData.demandUserId = this.eventDetailCopy.reportUserId this.formData.demandUserId = this.eventDetailCopy.reportUserId;
this.formData.demandUserName = this.eventDetailCopy.name this.formData.demandUserName = this.eventDetailCopy.name;
this.formData.demandUserMobile = this.eventDetailCopy.mobile this.formData.demandUserMobile = this.eventDetailCopy.mobile;
if (this.eventDetailCopy.parentCategoryId && this.eventDetailCopy.categoryId) { if (
this.eventDetailCopy.parentCategoryId &&
this.eventDetailCopy.categoryId
) {
// this.selCategoryArray = [] // this.selCategoryArray = []
// this.selCategoryArray.push(this.eventDetailCopy.parentCategoryId) // this.selCategoryArray.push(this.eventDetailCopy.parentCategoryId)
// this.selCategoryArray.push(this.eventDetailCopy.categoryId) // this.selCategoryArray.push(this.eventDetailCopy.categoryId)
// this.formData.categoryId = this.eventDetailCopy.categoryId // this.formData.categoryId = this.eventDetailCopy.categoryId
// this.selCateObj = { // this.selCateObj = {
// name: this.eventDetailCopy.categoryName, // name: this.eventDetailCopy.categoryName,
// id: this.eventDetailCopy.categoryId // id: this.eventDetailCopy.categoryId
// } // }
} }
} else { } else {
this.formData.demandUserName = this.demandUserName this.formData.demandUserName = this.demandUserName;
this.formData.demandUserMobile = this.demandUserMobile this.formData.demandUserMobile = this.demandUserMobile;
this.formData.demandUserId = this.demandUserId this.formData.demandUserId = this.demandUserId;
} }
this.getCategoryList();
this.getDemandOptions();
this.getServiceOption();
this.initMap();
}, },
methods: { methods: {
async getCategoryList() { async getCategoryList() {
const url = "/gov/issue/issueprojectcategorydict/list" const url = "/gov/issue/issueprojectcategorydict/list";
let params = {} let params = {};
const { data, code, msg } = await requestPost(url, params) const { data, code, msg } = await requestPost(url, params);
if (code === 0) { if (code === 0) {
let treeDataNew = this.filterTree(data);
let treeDataNew = this.filterTree(data)
// //
++this.iscascaderShow ++this.iscascaderShow;
this.casOptions = [] this.casOptions = [];
this.casOptions = treeDataNew
this.casOptions = treeDataNew;
} else { } else {
this.$message.error(msg) this.$message.error(msg);
} }
}, },
handleChangeCate() { handleChangeCate() {
console.log(this.$refs["myCascader"].getCheckedNodes()[0].data) console.log(this.$refs["myCascader"].getCheckedNodes()[0].data);
this.selCateObj = this.$refs["myCascader"].getCheckedNodes()[0].data this.selCateObj = this.$refs["myCascader"].getCheckedNodes()[0].data;
this.formData.categoryId = this.selCateObj.id this.formData.categoryId = this.selCateObj.id;
}, },
// //
filterTree(arr) { filterTree(arr) {
let childs = arr let childs = arr;
for (let i = childs.length; i--; i > 0) { for (let i = childs.length; i--; i > 0) {
if (childs[i].subCategory) { if (childs[i].subCategory) {
if (childs[i].subCategory.length) { if (childs[i].subCategory.length) {
this.filterTree(childs[i].subCategory) this.filterTree(childs[i].subCategory);
} else { } else {
delete childs[i].subCategory delete childs[i].subCategory;
} }
} }
} }
return arr return arr;
}, },
async getDemandOptions() { async getDemandOptions() {
const url = "/heart/icresidemanddict/demandoption" const url = "/heart/icresidemanddict/demandoption";
let params = {} let params = {};
const { data, code, msg } = await requestPost(url, params) const { data, code, msg } = await requestPost(url, params);
if (code === 0) { if (code === 0) {
this.demandOptions = this.getFlagData( this.demandOptions = this.getFlagData(
this.getTreeData(data), this.getTreeData(data),
"usableFlag" "usableFlag"
); );
} else { } else {
this.$message.error(msg) this.$message.error(msg);
} }
}, },
async getServiceOption() { async getServiceOption() {
const url = "/sys/dict/data/dictlist" const url = "/sys/dict/data/dictlist";
let params = { dictType: "user_demand_service_type", } let params = { dictType: "user_demand_service_type" };
const { data, code, msg } = await requestPost(url, params) const { data, code, msg } = await requestPost(url, params);
if (code === 0) { if (code === 0) {
this.serviceOptions = data; this.serviceOptions = data;
} else { } else {
this.$message.error(msg) this.$message.error(msg);
} }
}, },
getTreeData(data) { getTreeData(data) {
@ -476,6 +485,7 @@ export default {
}); });
return arr; return arr;
}, },
getFlagData(data, flag) { getFlagData(data, flag) {
if (!Array.isArray(data)) return []; if (!Array.isArray(data)) return [];
let arr1 = data.filter((item) => item[flag]); let arr1 = data.filter((item) => item[flag]);
@ -514,7 +524,6 @@ export default {
}, },
async getServiceuserList(serviceType, query) { async getServiceuserList(serviceType, query) {
if (!serviceType) return false; if (!serviceType) return false;
const { demandUserId } = this.formData; const { demandUserId } = this.formData;
const params = { const params = {
@ -523,152 +532,109 @@ export default {
queryPurpose: query, queryPurpose: query,
}; };
const url = "/heart/userdemand/servicelist";
const url = "/heart/userdemand/servicelist" const { data, code, msg } = await requestPost(url, params);
const { data, code, msg } = await requestPost(url, params)
if (code === 0) { if (code === 0) {
this.serviceOptiondList = data.filter( this.serviceOptiondList = data.filter(
(item) => item.value != demandUserId (item) => item.value != demandUserId
); );
} else { } else {
this.$message.error(msg) this.$message.error(msg);
} }
}, },
async getDemandInfo() { async getDemandInfo() {
this.okflag = false this.okflag = false;
this.$refs["ref_form"].validate((valid, messageObj) => { this.$refs["ref_form"].validate((valid, messageObj) => {
if (!valid) { if (!valid) {
app.util.validateRule(messageObj); app.util.validateRule(messageObj);
// this.formData.categoryId = this.selCateObj.id // this.formData.categoryId = this.selCateObj.id
} else { } else {
this.okflag = true;
this.okflag = true
} }
}); });
}, },
resetData() {},
resetData () {
},
// init // init
initMap() { initMap() {
// let { latitude, longitude } = this.$store.state.user;
var center = new window.TMap.LatLng(36.0722275, 120.38945519)
// map TMap.Map()
map = new window.TMap.Map(document.getElementById('app_map'), {
center: center, //
zoom: 17.2, //
pitch: 43.5, //
rotation: 45 //
})
search = new window.TMap.service.Search({ pageSize: 10 }) map = new daiMap(
// document.getElementById("app_map"),
markers = new TMap.MultiMarker({ { latitude, longitude },
map: map, {
geometries: [] zoom: 16.2, //
}) pitch: 43.5, //
infoWindowList = Array(10) rotation: 45, //
}
geocoder = new TMap.service.Geocoder(); // );
// //
map.on('panend', () => { map.on("dragend", (e) => {
this.handleMoveCenter() this.handleMoveCenter(e);
}) });
this.handleMoveCenter()
this.convert() map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
}, },
setMarker (lat, lng) { async handleMoveCenter() {
markers.setGeometries([]) //
markers.add([ const { lat, lng } = map.getCenter();
{ this.formData.latitude = lat;
id: '4', this.formData.longitude = lng;
styleId: 'marker', map.setMarker(lat, lng);
position: new TMap.LatLng(lat, lng),
properties: { let { msg, data } = await map.getAddress(lat, lng);
title: 'marker4' if (msg == "success") {
} this.formData.address = data.address;
}
])
},
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 () { async handleSearchMap() {
// const { msg, data } = await map.searchNearby(this.keyWords);
const center = map.getCenter() if (msg == "success") {
const lat = center.getLat() const { lat, lng } = data;
const lng = center.getLng() map.setCenter(lat, lng);
this.formData.latitude = lat map.setMarker(lat, lng);
this.formData.longitude = lng this.formData.latitude = lat;
this.setMarker(lat, lng) this.formData.longitude = lng;
this.convert(lat, lng) } else {
this.$message.error("未检索到相关位置坐标");
}
}, },
convert(lat, lng) { convert(lat, lng) {
markers.setGeometries([]); markers.setGeometries([]);
// var input = document.getElementById('location').value.split(','); // var input = document.getElementById('location').value.split(',');
let location let location;
if (lat && lng) { if (lat && lng) {
location = new TMap.LatLng(lat, lng); location = new TMap.LatLng(lat, lng);
} else { } else {
location = new TMap.LatLng(this.formData.latitude, this.formData.longitude); location = new TMap.LatLng(
this.formData.latitude,
this.formData.longitude
);
} }
// map.setCenter(location); // map.setCenter(location);
markers.updateGeometries([ markers.updateGeometries([
{ {
id: 'main', // id: "main", //
position: location, position: location,
}, },
]); ]);
geocoder geocoder
.getAddress({ location: location }) // .getAddress({ location: location }) //
.then((result) => { .then((result) => {
this.formData.serviceLocation = result.result.address this.formData.serviceLocation = result.result.address;
// //
}); });
}, },
// //
startLoading() { startLoading() {
loading = Loading.service({ loading = Loading.service({
@ -688,14 +654,11 @@ export default {
}; };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
@import "@/assets/scss/modules/visual/a_customize.scss"; @import "@/assets/scss/modules/visual/a_customize.scss";
@import "@/assets/scss/modules/shequzhili/event-info.scss"; @import "@/assets/scss/modules/shequzhili/event-info.scss";
</style> </style>
<style> <style>
.el-dialog__body { .el-dialog__body {
padding: 0 10px 20px !important; padding: 0 10px 20px !important;

Loading…
Cancel
Save