You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
666 lines
18 KiB
666 lines
18 KiB
<template>
|
|
<div class="">
|
|
<el-form
|
|
ref="ref_form"
|
|
:inline="false"
|
|
:model="formData"
|
|
:rules="dataRule"
|
|
label-width="100px"
|
|
>
|
|
<!-- <el-form-item label="事件分类"
|
|
label-width="150px"
|
|
prop="categoryId">
|
|
<el-cascader class="cell-width-2"
|
|
ref="myCascader"
|
|
v-model="selCategoryArray"
|
|
:key="iscascaderShow"
|
|
:options="casOptions"
|
|
:props="optionProps"
|
|
:show-all-levels="false"
|
|
@change="handleChangeCate"></el-cascader>
|
|
</el-form-item> -->
|
|
<el-form-item
|
|
label="服务内容"
|
|
label-width="150px"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
prop="content"
|
|
>
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
|
<el-input
|
|
v-model="formData.content"
|
|
:autosize="{ minRows: 2, maxRows: 10 }"
|
|
type="textarea"
|
|
clearable
|
|
class="cell-width-area"
|
|
placeholder="请输入内容"
|
|
></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
label="服务类型"
|
|
label-width="150px"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
prop="categoryCode"
|
|
>
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
|
<el-cascader
|
|
v-model="formData.categoryCode"
|
|
:options="demandOptions"
|
|
clearable
|
|
class="cell-width-1"
|
|
@change="handleCateSlect"
|
|
></el-cascader>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
label="服务时间"
|
|
label-width="150px"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
prop="wantServiceTime"
|
|
>
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
|
<el-date-picker
|
|
v-model="formData.wantServiceTime"
|
|
type="datetime"
|
|
class="cell-width-1"
|
|
clearable
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
placeholder="选择日期时间"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
label="需求人"
|
|
label-width="150px"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
prop="demandUserName"
|
|
>
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
|
<el-input
|
|
v-model="formData.demandUserName"
|
|
class="cell-width-1"
|
|
></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="联系电话"
|
|
label-width="150px"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
prop="demandUserMobile"
|
|
>
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
|
<el-input
|
|
v-model="formData.demandUserMobile"
|
|
class="cell-width-1"
|
|
></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="服务地点"
|
|
prop="serviceLocation"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
label-width="150px"
|
|
style="display: block"
|
|
>
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
|
<el-input class="cell-width-1" v-model="formData.serviceLocation">
|
|
</el-input>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="位置坐标"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
prop="longitude"
|
|
label-width="150px"
|
|
style="display: block"
|
|
>
|
|
<div style="width: 500px">
|
|
<div class="div_map">
|
|
<div id="app_map"></div>
|
|
<div class="div_searchmap">
|
|
<el-input
|
|
class="cell-width-map"
|
|
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="门牌号"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
label-width="150px"
|
|
prop="locationDetail"
|
|
>
|
|
<div :class="{ 'visiual-form': source === 'visiual' }">
|
|
<el-input
|
|
v-model="formData.locationDetail"
|
|
class="cell-width-1"
|
|
></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
label="服务方"
|
|
:class="{ 'form-item': source === 'visiual' }"
|
|
label-width="150px"
|
|
prop="serverId"
|
|
>
|
|
<template>
|
|
<div
|
|
:class="[{ 'single-select': source === 'visiual' }, 'sel-service']"
|
|
>
|
|
<el-select
|
|
v-model="formData.serviceType"
|
|
class="cell-width-1"
|
|
placeholder="请选择"
|
|
clearable
|
|
@change="handleServiceChange('add', $event)"
|
|
>
|
|
<el-option
|
|
v-for="item in serviceOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
-
|
|
<el-select
|
|
v-model="formData.serverId"
|
|
class="cell-width-1"
|
|
filterable
|
|
placeholder="请选择"
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in serviceOptiondList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</template>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Loading } from "element-ui"; // 引入Loading服务
|
|
import { requestPost } from "@/js/dai/request";
|
|
import daiMap from "@/utils/dai-map";
|
|
|
|
let loading; // 加载动画
|
|
var map;
|
|
|
|
function iniFmData() {
|
|
return {
|
|
operationType: "2", //处理方式[0:已回复 1:已转项目 2:已转服务]
|
|
icEventId: "", //事件Id
|
|
gridId: "", //
|
|
categoryCode: "", // 二级服务分类编码
|
|
parentCode: "", // 父级服务分类编码
|
|
content: "", // 服务内容1000字
|
|
reportType: "self_help", // 社区帮办：community；楼长帮办：building_caption;党员帮办：party;自身上报：self_help
|
|
reportUserName: "", // 上报人姓名
|
|
reportUserMobile: "", // 自身上报时存储注册居民的手机号
|
|
reportTime: "", // 上报时间
|
|
demandUserId: "", // 需求人：user.id或者ic_resi_user.id
|
|
demandUserName: "", // 需求人姓名
|
|
demandUserMobile: "", //需求人联系电话
|
|
wantServiceTime: "", // 希望服务时间
|
|
serviceType: "",
|
|
serverId: "",
|
|
locationDetail: "",
|
|
serviceLocation: "", //事件地址
|
|
latitude: "", // 经度
|
|
longitude: "", //维度
|
|
// categoryId: ''
|
|
};
|
|
}
|
|
export default {
|
|
data() {
|
|
return {
|
|
btnDisable: false,
|
|
customerId: localStorage.getItem("customerId"),
|
|
demandOptions: [],
|
|
serviceOptions: [],
|
|
serviceOptiondList: [],
|
|
|
|
casOptions: [],
|
|
iscascaderShow: 0,
|
|
selCategoryArray: [],
|
|
selCateObj: {},
|
|
optionProps: {
|
|
multiple: false,
|
|
value: "id",
|
|
label: "name",
|
|
children: "subCategory",
|
|
},
|
|
|
|
formData: iniFmData(),
|
|
|
|
okflag: false,
|
|
//地图相关
|
|
keyWords: "",
|
|
|
|
eventDetailCopy: {},
|
|
};
|
|
},
|
|
|
|
components: {},
|
|
|
|
computed: {
|
|
dataRule() {
|
|
return {
|
|
// categoryId: [
|
|
// { required: true, message: "请填写事件分类", trigger: "blur" },
|
|
// ],
|
|
content: [
|
|
{ required: true, message: "服务内容不能为空", trigger: "blur" },
|
|
],
|
|
categoryCode: [
|
|
{ required: true, message: "服务类型不能为空", trigger: "blur" },
|
|
],
|
|
wantServiceTime: [
|
|
{ required: true, message: "服务时间不能为空", trigger: "blur" },
|
|
],
|
|
demandUserName: [
|
|
{ required: true, message: "需求人不能为空", trigger: "blur" },
|
|
],
|
|
demandUserMobile: [
|
|
{ required: true, message: "联系电话不能为空", trigger: "blur" },
|
|
],
|
|
serviceLocation: [
|
|
{ required: true, message: "服务地点不能为空", trigger: "blur" },
|
|
],
|
|
serverId: [
|
|
{ required: true, message: "服务方不能为空", trigger: "blur" },
|
|
],
|
|
};
|
|
},
|
|
},
|
|
|
|
props: {
|
|
demandUserId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
demandUserName: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
demandUserMobile: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
eventId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
|
|
eventDetailData: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
|
|
source: {
|
|
//展示来源：manage 管理平台 visiual 可视化平台
|
|
type: String,
|
|
default: "manage",
|
|
},
|
|
},
|
|
|
|
watch: {
|
|
demandUserName: function (val) {
|
|
this.formData.reportUserName = val;
|
|
this.formData.demandUserName = val;
|
|
},
|
|
demandUserMobile: function (val) {
|
|
this.formData.reportUserMobile = val;
|
|
this.formData.demandUserMobile = val;
|
|
},
|
|
demandUserId: function (val) {
|
|
this.formData.demandUserId = val;
|
|
},
|
|
},
|
|
|
|
async mounted() {
|
|
const { user } = this.$store.state;
|
|
this.agencyId = user.agencyId;
|
|
|
|
if (this.eventId) {
|
|
this.eventDetailCopy = JSON.parse(JSON.stringify(this.eventDetailData));
|
|
this.formData.reportUserMobile = this.eventDetailCopy.mobile;
|
|
this.formData.reportUserName = this.eventDetailCopy.name;
|
|
this.formData.reportTime = this.eventDetailCopy.happenTime;
|
|
this.formData.gridId = this.eventDetailCopy.gridId;
|
|
this.formData.demandUserId = this.eventDetailCopy.reportUserId;
|
|
this.formData.demandUserName = this.eventDetailCopy.name;
|
|
this.formData.demandUserMobile = this.eventDetailCopy.mobile;
|
|
|
|
if (
|
|
this.eventDetailCopy.parentCategoryId &&
|
|
this.eventDetailCopy.categoryId
|
|
) {
|
|
// this.selCategoryArray = []
|
|
// this.selCategoryArray.push(this.eventDetailCopy.parentCategoryId)
|
|
// this.selCategoryArray.push(this.eventDetailCopy.categoryId)
|
|
// this.formData.categoryId = this.eventDetailCopy.categoryId
|
|
// this.selCateObj = {
|
|
// name: this.eventDetailCopy.categoryName,
|
|
// id: this.eventDetailCopy.categoryId
|
|
// }
|
|
}
|
|
} else {
|
|
this.formData.demandUserName = this.demandUserName;
|
|
this.formData.demandUserMobile = this.demandUserMobile;
|
|
this.formData.demandUserId = this.demandUserId;
|
|
}
|
|
|
|
this.getCategoryList();
|
|
this.getDemandOptions();
|
|
this.getServiceOption();
|
|
|
|
this.initMap();
|
|
},
|
|
|
|
methods: {
|
|
async getCategoryList() {
|
|
const url = "/gov/issue/issueprojectcategorydict/list";
|
|
|
|
let params = {};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
let treeDataNew = this.filterTree(data);
|
|
|
|
//组织级联数据
|
|
++this.iscascaderShow;
|
|
this.casOptions = [];
|
|
|
|
this.casOptions = treeDataNew;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
handleChangeCate() {
|
|
console.log(this.$refs["myCascader"].getCheckedNodes()[0].data);
|
|
this.selCateObj = this.$refs["myCascader"].getCheckedNodes()[0].data;
|
|
this.formData.categoryId = this.selCateObj.id;
|
|
},
|
|
|
|
//重构树，去除网格
|
|
filterTree(arr) {
|
|
let childs = arr;
|
|
for (let i = childs.length; i--; i > 0) {
|
|
if (childs[i].subCategory) {
|
|
if (childs[i].subCategory.length) {
|
|
this.filterTree(childs[i].subCategory);
|
|
} else {
|
|
delete childs[i].subCategory;
|
|
}
|
|
}
|
|
}
|
|
return arr;
|
|
},
|
|
|
|
async getDemandOptions() {
|
|
const url = "/heart/icresidemanddict/demandoption";
|
|
let params = {};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (code === 0) {
|
|
this.demandOptions = this.getFlagData(
|
|
this.getTreeData(data),
|
|
"usableFlag"
|
|
);
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
async getServiceOption() {
|
|
const url = "/sys/dict/data/dictlist";
|
|
let params = { dictType: "user_demand_service_type" };
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (code === 0) {
|
|
this.serviceOptions = data;
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
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;
|
|
},
|
|
|
|
handleCateSlect(val) {
|
|
console.log("val", val);
|
|
if (val.length === 1) {
|
|
this.demandOptions.forEach((item) => {
|
|
if (item.value == val[0]) this.formData.parentCode = item.pvalue;
|
|
});
|
|
this.formData.categoryCode = val[0];
|
|
} else {
|
|
this.formData.parentCode = val[0];
|
|
this.formData.categoryCode = val[1];
|
|
}
|
|
},
|
|
|
|
handleServiceChange(type, val) {
|
|
if (val === "social_org") {
|
|
if (type === "add") {
|
|
this.getServiceuserList(val, "add_demand");
|
|
} else {
|
|
this.getServiceuserList(val, "query_demand");
|
|
}
|
|
} else {
|
|
this.getServiceuserList(val, "");
|
|
}
|
|
},
|
|
|
|
async getServiceuserList(serviceType, query) {
|
|
if (!serviceType) return false;
|
|
const { demandUserId } = this.formData;
|
|
const params = {
|
|
serviceName: "",
|
|
serviceType: serviceType,
|
|
queryPurpose: query,
|
|
};
|
|
|
|
const url = "/heart/userdemand/servicelist";
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (code === 0) {
|
|
this.serviceOptiondList = data.filter(
|
|
(item) => item.value != demandUserId
|
|
);
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
async getDemandInfo() {
|
|
this.okflag = false;
|
|
this.$refs["ref_form"].validate((valid, messageObj) => {
|
|
if (!valid) {
|
|
app.util.validateRule(messageObj);
|
|
// this.formData.categoryId = this.selCateObj.id
|
|
} else {
|
|
this.okflag = true;
|
|
}
|
|
});
|
|
},
|
|
|
|
resetData() {},
|
|
|
|
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
|
|
initMap() {
|
|
let { latitude, longitude } = this.$store.state.user;
|
|
|
|
map = new daiMap(
|
|
document.getElementById("app_map"),
|
|
{ latitude, longitude },
|
|
{
|
|
zoom: 16.2, // 设置地图缩放级别
|
|
pitch: 43.5, // 设置俯仰角
|
|
rotation: 45, // 设置地图旋转角度
|
|
}
|
|
);
|
|
|
|
// 监听地图平移结束
|
|
map.on("dragend", (e) => {
|
|
this.handleMoveCenter(e);
|
|
});
|
|
|
|
map.setCenter(latitude, longitude);
|
|
map.setMarker(latitude, longitude);
|
|
},
|
|
|
|
async handleMoveCenter() {
|
|
//修改地图中心点
|
|
const { lat, lng } = map.getCenter();
|
|
this.formData.latitude = lat;
|
|
this.formData.longitude = lng;
|
|
map.setMarker(lat, lng);
|
|
|
|
let { msg, data } = await map.getAddress(lat, lng);
|
|
if (msg == "success") {
|
|
this.formData.address = data.address;
|
|
}
|
|
},
|
|
|
|
async handleSearchMap() {
|
|
const { msg, data } = await map.searchNearby(this.keyWords);
|
|
if (msg == "success") {
|
|
const { lat, lng } = data;
|
|
map.setCenter(lat, lng);
|
|
map.setMarker(lat, lng);
|
|
this.formData.latitude = lat;
|
|
this.formData.longitude = lng;
|
|
} else {
|
|
this.$message.error("未检索到相关位置坐标");
|
|
}
|
|
},
|
|
|
|
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.serviceLocation = result.result.address;
|
|
// 显示搜索到的地址
|
|
});
|
|
},
|
|
|
|
// 开启加载动画
|
|
startLoading() {
|
|
loading = Loading.service({
|
|
lock: true, // 是否锁定
|
|
text: "正在加载……", // 加载中需要显示的文字
|
|
background: "rgba(0,0,0,.7)", // 背景颜色
|
|
});
|
|
},
|
|
// 结束加载动画
|
|
endLoading() {
|
|
// clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/modules/visual/a_customize.scss";
|
|
@import "@/assets/scss/modules/shequzhili/event-info.scss";
|
|
</style>
|
|
|
|
<style>
|
|
.el-dialog__body {
|
|
padding: 0 10px 20px !important;
|
|
}
|
|
</style>
|
|
|