<!--创建事件-->
<template>
<div ref="caseContainer" class="case-container">
<!--表单-->
<div v-show="!showMap" class="form-div">
<el-form
ref="form"
:model="form"
:size="inputSize"
:rules="rules"
label-width="80px"
>
<div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="事件编号" prop="caseId">
<el-input v-model="form.caseId" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="录音编号" prop="sound">
<el-input v-model="form.sound" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="来电时间" prop="callTime" disabled>
<el-input v-model="form.callTime" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="联系电话" prop="reporterPhone">
<el-input v-model="form.reporterPhone" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系人" prop="reporterName">
<el-input v-model="form.reporterName" />
</el-form-item>
</el-col>
<el-button
v-if="allowAdd"
:disabled="form.reporterName == '' || form.reporterPhone == ''"
type="primary"
size="small"
@click="addToCustomerList"
>添加到通讯录</el-button
>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="事件分类" prop="type">
<el-select
v-model="form.type.eorc"
placeholder="请选择"
style="width: 100%"
@change="changeEorc"
>
<el-option
v-for="item of eorcList"
:key="'eorc_' + item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="事件类型" prop="typeCode" style="position:relative">
<select-tree
v-if="form.type.eorc"
v-model="form.typeCode"
:options="typeSelectList"
:props="typeProps"
placeholder="请先选择事件分类"
expandAll
:disabled="form.type.eorc == ''"
/>
<el-input v-else v-model="form.typeCode" placeholder="请先选择事件分类" :disabled="form.type.eorc == ''"/>
</el-form-item>
<span v-show="form.type.eorc == ''" class="type_text_tip">请先选择事件分类</span>
</el-col>
<el-col>
</el-col>
</el-row>
<!-- <el-row>
<el-form-item label="事件分类" prop="type" required>
<el-col :span="6"> -->
<!-- <el-select v-model="form.classify" placeholder="请选择" style="width: 100%">
<el-option v-for="item of classifyList" :key="'classify_'+item.value" :label="item.name" :value="item.value"/>
</el-select> -->
<!-- <el-select
v-model="form.type.eorc"
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="item of eorcList"
:key="'eorc_' + item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-col> -->
<!-- <el-col :span="6">
<el-form-item label="事件类型" prop="type" required>
<el-select v-model="form.type.eorc" filterable placeholder="请选择" style="width: 100%">
<el-option v-for="item of eorcList" :key="'eorc_'+item.value" :label="item.name" :value="item.value"/>
</el-select>
</el-form-item>
</el-col> -->
<!-- 案卷类别二级 -->
<!-- <el-col :span="6">
<el-select
v-model="form.type.caseTypeCode"
placeholder="请选择"
style="width: 100%"
filterable
>
<el-option
v-for="item of caseTypeList"
:key="'case_' + item.id"
:label="item.typeName"
:value="item.typeCode"
/>
</el-select>
</el-col> -->
<!-- 案卷类别三级 -->
<!-- <el-col :span="6">
<el-select
v-model="form.type.caseDetailTypeCode"
placeholder="请选择"
style="width: 100%"
filterable
clearable
>
<el-option
v-for="item of caseDetailTypeList"
:key="'casedetail_' + item.id"
:label="item.typeDetailName"
:value="item.typeDetailCode"
/>
</el-select>
</el-col> -->
<!-- </el-form-item> -->
<!-- </el-row> -->
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="事件来源" prop="source">
<el-select
v-model="form.source"
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="item of caseSourceList"
:key="'source_' + item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="8">
<el-form-item label="紧急程度" prop="caseLevel">
<el-select
v-model="form.caseLevel"
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="item of caseLevelList"
:key="'caselevel_' + item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col> -->
<el-col :span="8">
<el-form-item label="办理期限" prop="limitedTime">
<el-date-picker
v-model="form.limitedTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择时间"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="事件地址" prop="address" required>
<el-col :span="5">
<el-select
v-model="form.address.areaCode"
placeholder="选择所在区"
value=""
style="width: 152px"
>
<!--<el-option key="99" label="蓉江新区" value="99"/>-->
<el-option
v-for="item in areaList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-col>
<el-col :span="5">
<el-select
v-model="form.address.streetCode"
placeholder="选择所在街道"
value=""
style="width: 152px"
>
<el-option
v-for="item in streetList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-col>
<!--<el-col :span="5">-->
<!--<el-select v-model="form.address.communityCode" placeholder="选择所在社区" value="" style="width: 100%">-->
<!--<el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.id"/>-->
<!--</el-select>-->
<!--</el-col>-->
<el-col :span="6">
<el-input
v-model="form.address.fieldintro"
placeholder="详细地址"
/>
</el-col>
<el-button
type="primary"
size="small"
style="margin-left: 10px"
@click="showMapDiv"
>地图选点</el-button
>
<span v-show="form.lng != '0'" style="font-size: 9px"
>({{ form.lng }},{{ form.lat }})</span
>
</el-form-item>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="事件标题" prop="title">
<el-input v-model="form.title" maxlength="100" />
</el-form-item>
</el-col>
<el-col :span="12">
<div class="checkbox">
<el-checkbox
v-model="form.isTypical"
true-label="1"
false-label="0"
>典型案例</el-checkbox
>
</div>
<div class="checkbox">
<el-checkbox
v-model="form.isImportant"
true-label="1"
false-label="0"
>要情</el-checkbox
>
</div>
<div class="checkbox">
<el-checkbox
v-model="form.isReturnVisit"
true-label="1"
false-label="0"
>需要回访</el-checkbox
>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col>
<el-form-item label="事件内容" prop="description">
<el-input
v-model="form.description"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
maxlength="255"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col>
<el-form-item label="处理方式" prop="processWay">
<el-radio-group v-model="form.processWay">
<el-radio
v-for="item in processWayList"
:disabled="
form.caseLevel &&
form.caseLevel == '2' &&
item.nextState != 6
"
:key="'process_' + item.id"
:label="item.nextState"
>{{ item.nextOperation }}</el-radio
>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<!--<el-row :gutter="20">-->
<!--<el-col :span="10">-->
<!--<el-form-item label="处理单位" prop="processDept">-->
<!--<dept-select/>-->
<!--</el-form-item>-->
<!--</el-col>-->
<!--<el-col :span="10">-->
<!--<el-form-item label="处理人" prop="processUser">-->
<!--<el-select v-model="form.processUser" placeholder="选择处理人" value="" style="width: 100%">-->
<!--<el-option v-for="item in userList" :key="item.id" :label="item.name" value="item.id"/>-->
<!--</el-select>-->
<!--</el-form-item>-->
<!--</el-col>-->
<!--</el-row>-->
<el-row :gutter="20" type="flex" justify="center">
<el-col :span="24">
<div style="text-align: center">
<el-button
:size="inputSize"
:loading="submitLoading"
type="primary"
@click="submit"
>提交</el-button
>
</div>
</el-col>
</el-row>
</div>
</el-form>
</div>
<!-- 知识库检索-->
<div v-show="!showMap" class="knowledge-div">
<knowledge-search />
</div>
<!-- 地图显示 -->
<div v-show="showMap" id="map" :style="{ height: mapHeight }">
<el-row
:gutter="10"
type="flex"
style="margin-top: -30px; margin-bottom: 10px"
>
<!-- <el-col :span="6">
<el-input v-model="keyword" placeholder="兴趣点筛选" size="small" />
</el-col>
<el-col :span="14">
<el-button size="small" type="primary" @click="queryPoi"
>查询</el-button
>
<el-button
size="small"
type="primary"
style="margin-left: 15px"
@click="confirmPos"
>确定</el-button
>
<span>说明：双击添加位置, </span>
<span
>当前坐标：{{ currentPosition.lng }},{{ currentPosition.lat }}</span
>
</el-col>
<el-col :span="4" style="text-align: right">
<el-button size="small" type="info" @click="clearMap"
>清除地图</el-button
>
<el-button size="small" @click="backToForm">返回</el-button>
</el-col>-->
<el-col :span="4">
<el-input v-model="mapInfo.name" placeholder="兴趣点名称" size="small" disabled/>
</el-col>
<el-col :span="8">
<el-input v-model="mapInfo.address" placeholder="兴趣点地址" size="small" disabled/>
</el-col>
<div style="line-height:32px;margin-left:10px">
经纬度:({{ mapInfo.lon}} , {{ mapInfo.lat}})
</div>
<el-button
size="small"
type="primary"
style="margin-left: 15px"
@click="confirmPos"
>确定</el-button
>
<el-button size="small" @click="backToForm" style="margin-left:15px">返回</el-button>
</el-row>
<f-map ref="mapComp" type="vector" @ready="mapReady" style="display:none"/>
<FDSelectMap ref="FDSelectMap" v-if="showMap" @getMapInfo="getMapInfo"/>
</div>
</div>
</template>
<script>
import KnowledgeSearch from "./components/knowledgeSearch";
import { addCustomer } from "@/api/customer";
import { getToday } from "@/utils/dateutils";
import { getEorc, getCaseSource, getCaseLevel } from "@/api/allDict";
import { getCaseType, getCaseDetailType, addCase } from "@/api/callCase";
import { getNextNodeList } from "@/api/process";
import { getAreaList } from "@/api/system/area";
import { getCustomerList } from "@/api/customer";
import { matchReverse } from "@/api/map";
import FMap from "@/components/fMap/components/fMap";
import FDSelectMap from "@/components/fdSelectMap/index.vue";
import SelectTree from "@/components/SelectTree/singleSelect";
import { toTreeList } from "@/utils/structure";
export default {
name: "CreateCase",
components: { KnowledgeSearch, FMap, FDSelectMap, SelectTree },
data() {
const validateAddress = function (rule, value, callback) {
console.log(value);
// if (value.areaCode === '' || value.streetCode === '' || value.communityCode === '') {
if (
value.areaCode === "" ||
value.streetCode === "" ||
value.fieldintro.trim() === ""
) {
callback(new Error("地址需填写完整"));
} else {
callback();
}
};
const validateType = function (rule, value, callback) {
console.log(value);
if (
value.eorc === ""
// ||
// value.caseTypeCode === "" ||
// value.caseDetailTypeCode === ""
) {
callback(new Error("请选择事件类型"));
} else {
callback();
}
};
return {
mapInfo:{},
// props: {
// lazy: true,
// lazyLoad(node, resolve) {
// let { level, value } = node;
// if (level == 1) {
// getCaseType(value).then((response) => {
// resolve(response.data.map((item) => {
// return {
// value: item.typeCode,
// label: item.typeName,
// leaf: false,
// };
// }))
// });
// } else if (level == 2) {
// getCaseDetailType(value).then((response) => {
// resolve(response.data.map((item) => {
// return {
// value: item.typeDetailCode,
// label: item.typeDetailName,
// leaf: true,
// };
// }))
// });
// }
// },
// },
typeProps: {
parent: "pid",
value: "id",
label: "name",
children: "children",
// disabled:function(data,node){
// console.log(data)
// if(data.children&&data.children.length>0){
// return true
// }else{
// return false
// }
// }
},
typeSelectList: [],
form: {
typeCode:"", // 二三级value
caseId: "", // 案卷编号，年月日时分秒毫秒+坐席号
sound: "", // 来电录音编号
callTime: "", // 来电时间
reporterName: "", // 事件联系人
reporterPhone: "", // 时间联系人电话
// classify: "", // 事件类别
type: {
eorc: "", // 案卷类别
caseTypeCode: "", // 案卷大类编码
caseDetailTypeCode: "", // 案卷小类编码
}, // 案卷类别
source: "3", // 来源
address: {
areaCode: "360791", // 区域ID
streetCode: "", // 街道ID
communityCode: "", // 社区ID
gridId: "", // 网格ID
fieldintro: "", // 事件地址
},
caseLevel: "", // 案卷紧急程度
isTypical: "0", // 是否典型案例
isImportant: "0", // 是否要情
isReturnVisit: "1", // 是否需要回访
title: "", // 事件标题
description: "", // 事件内容
limitedTime: "", // 事件办理期限
processWay: "", // 处理方式
processDept: "", // 处理单位
processUser: "", // 处理人
lng: "", // 事件经度
lat: "", // 事件纬度
},
currentPosition: {
lng: "0",
lat: "0",
},
allowAdd: true, // 允许新增联系人
addLoading: false, // 添加允许等待
submitLoading: false,
reportersList: [], // 联系人选择列表
eorcList: [], // 案卷类别
classifyList: [
{
name: "应急事件",
value: 1,
},
{
name: "运维事件",
value: 3,
},
{
name: "精细化平台事件",
value: 4,
},
], //事件类别
caseTypeList: [], // 案卷类别二级
caseDetailTypeList: [], // 案卷类别三级
areaList: [], // 区域列表
streetList: [], // 街道列表
communityList: [], // 社区列表
gridList: [], // 网格列表
caseLevelList: [], // 紧急程度字典
processWayList: [], // 是否列表
caseSourceList: [],
userList: [], // 处理人列表
inputSize: "small", // 按钮样式
fmap: null, // 地图
showMap: false, // 是否显示地图
mapHeight: "0px",
keyword: "",
rules: {
caseId: [
{ required: true, message: "事件编号不能为空", trigger: ["blur"] },
],
sound: [
{
required: true,
message: "来电录音编号不能为空",
trigger: ["blur"],
},
],
callTime: [
{ required: true, message: "来电时间不能为空", trigger: ["blur"] },
],
reporterName: [
{ required: true, message: "联系人姓名不能为空", trigger: ["blur"] },
],
reporterPhone: [
{ required: true, message: "联系电话不能为空", trigger: ["blur"] },
],
areaCode: [
{ required: true, message: "事件辖区必选", trigger: ["blur"] },
],
source: [
{
required: true,
message: "事件来源必选",
trigger: ["blur", "change"],
},
],
caseLevel: [
{
required: true,
message: "紧急程度必选",
trigger: ["blur", "change"],
},
],
// classify: [
// { required: true, message: "事件分类必选", trigger: ["blur"] },
// ],
type: [
{
required: true,
message: "事件分类必选",
trigger: ["blur"],
validator: validateType,
},
],
typeCode:[
{
required: true,
message: "事件类型必选",
trigger: ["change"],
},
],
caseDetailTypeCode: [
{ required: true, message: "事件分类必选", trigger: ["blur"] },
],
description: [
{ required: true, message: "事件内容不能为空", trigger: ["blur"] },
],
title: [
{
required: true,
message: "事件标题不能为空",
trigger: ["blur", "change"],
},
],
address: [
{
required: true,
message: "地址需填写完整",
trigger: ["blur"],
validator: validateAddress,
},
],
processWay: [
{
required: true,
message: "处理方式必选",
trigger: ["blur", "change"],
},
],
}, // 表单验证
};
},
watch: {
"form.typeCode":function(val){
console.log('631',val)
if(val == "" || val == undefined){
this.form.type.caseTypeCode = "";
this.form.type.caseDetailTypeCode = "";
} else {
// this.form.type.caseTypeCode = val.slice(0,3)
// this.form.type.caseDetailTypeCode = val;
if(val.length <= 3){
this.$nextTick(()=>{
this.form.typeCode = "";
this.form.type.caseTypeCode = "";
this.form.type.caseDetailTypeCode = "";
})
// this.form.type.caseTypeCode = val;
// this.typeSelectList.map(item =>{
// if(item.value == val){
// this.form.type.caseDetailTypeCode = item.children[0].value;
// }
// })
} else {
this.form.type.caseDetailTypeCode = val;
this.form.type.caseTypeCode = val.slice(0,3)
}
}
},
"form.type.eorc": function (val) {
if (val === "") {
this.form.type.caseTypeCode = "";
this.form.type.caseDetailTypeCode = "";
} else {
this.$set(this.form,'typeCode','')
// this.form.typeCode = ""
// this.form.type.caseTypeCode = "";
// this.form.type.caseDetailTypeCode = "";
}
// else {
// this.form.type.caseTypeCode = "";
// this.form.type.caseDetailTypeCode = "";
// this.fetchCaseTypeList();
// }
if (val == "2") {
this.form.caseLevel = "2"; // 默认设置为紧急事件
} else {
this.form.caseLevel = "1"; // 普通事件
}
// 资讯类，默认地址和坐标
if (val == "2") {
this.form.address = {
areaCode: "360791", // 区域ID
streetCode: "360791103", // 街道ID
communityCode: "", // 社区ID
gridId: "", // 网格ID
fieldintro: "516双创产业园运行指挥调度中心", // 事件地址
};
this.form.lng = 114.87176164;
this.form.lat = 25.77615476;
}
},
"form.type.caseTypeCode": function (val) {
if (val === "") {
this.form.type.caseDetailTypeCode = "";
} else {
// this.form.type.caseDetailTypeCode = "";
this.fetchCaseDetailTypeList();
}
},
"form.address.areaCode": function (val) {
if (val === "") {
this.form.address.streetCode = "";
this.form.address.communityCode = "";
} else {
this.fetchStreetList();
}
},
"form.address.streetCode": function (val) {
if (val === "") {
this.form.address.communityCode = "";
} else {
this.fetchCommunityList();
}
},
deep:true
},
created() {
// 获取大类
this.fetchEorcList();
this.fetchCaseSourceList();
// 事件紧急程度
// this.fetchCaseLevelList();
this.fetchAreaList();
this.fetchStreetList();
this.fetchProcessWayList();
},
methods: {
getMapInfo(item){
this.mapInfo = item;
},
// 选中下拉框内容
handleSelectChange(node) {
this.form.type.eorc = node[0];
this.form.type.caseTypeCode = node[1];
this.form.type.caseDetailTypeCode = node[2];
},
// 提交
submit() {
console.log(this.form);
this.submitLoading = true;
this.$refs["form"].validate((valid) => {
if (valid && this.twiceValidate()) {
// 初步校验通过
const form = {
caseId: this.form.caseId, // 案卷编号，年月日时分秒毫秒+坐席号
sound: this.form.sound, // 来电录音编号
callTime: this.form.callTime, // 来电时间
reporterName: this.form.reporterName, // 事件联系人
reporterPhone: this.form.reporterPhone, // 时间联系人电话
eorc: this.form.type.eorc, // 案卷类别
caseTypeCode: this.form.type.caseTypeCode, // 案卷大类编码
caseDetailTypeCode: this.form.type.caseDetailTypeCode, // 案卷小类编码
source: this.form.source, // 来源
areaCode: this.form.address.areaCode, // 区域ID
streetCode: this.form.address.streetCode, // 街道ID
communityCode: this.form.address.communityCode, // 社区ID
gridId: this.form.address.gridId, // 网格ID
fieldintro: this.form.address.fieldintro, // 事件地址
caseLevel: this.form.caseLevel, // 案卷紧急程度
isTypical: this.form.isTypical, // 是否典型案例
isImportant: this.form.isImportant, // 是否要情
isReturnVisit: this.form.isReturnVisit, // 是否需要回访
title: this.form.title, // 事件标题
description: this.form.description, // 事件内容
limitedTime: this.form.limitedTime, // 事件办理期限
processWay: "" + this.form.processWay, // 处理方式
processDept: this.form.processDept, // 处理单位
processUser: this.form.processUser, // 处理人
lng: this.form.lng, // 事件经度
lat: this.form.lat, // 事件纬度
};
addCase(form)
.then((response) => {
if (response.code === 200) {
this.$message.success("新建成功");
this.$emit("cancel");
this.submitLoading = false;
}
})
.catch((_) => {
this.$emit("cancel");
this.submitLoading = false;
});
} else {
this.submitLoading = false;
}
});
},
// 二次校验
twiceValidate() {
// debugger;
const judge =
this.form.processWay === 6 &&
(this.form.lng === "0" || this.form.lat === "0");
if (judge) {
this.$message.warning("请在地图上选点");
return false;
} else {
return true;
}
},
// 初始化数据
initData(data) {
this.form = {
caseId: "", // 案卷编号，年月日时分秒毫秒+坐席号
sound: data.callid, // 来电录音编号
callTime: data.dialStartStamp, // 来电时间
reporterName: "", // 事件联系人
reporterPhone: data.number, // 时间联系人电话
type: {
eorc: "", // 案卷类别
caseTypeCode: "", // 案卷大类编码
caseDetailTypeCode: "", // 案卷小类编码
}, // 案卷类别
source: "3", // 来源
address: {
areaCode: "360791", // 区域ID
streetCode: "", // 街道ID
communityCode: "", // 社区ID
gridId: "", // 网格ID
fieldintro: "", // 事件地址
},
lng: "0",
lat: "0",
caseLevel: "", // 案卷紧急程度
isTypical: "0", // 是否典型案例
isImportant: "0", // 是否要情
title: "", // 事件标题
description: "", // 事件内容
limitedTime: "", // 事件办理期限
processWay: "", // 处理方式
processDept: "", // 处理单位
processUser: "", // 处理人
};
// 清除校验
this.$nextTick(() => {
this.$refs["form"].clearValidate();
});
this.generateCaseId();
// 根据电话去查找人
if (this.form.reporterPhone) {
this.fetchReporter(this.form.reporterPhone);
}
// this.$refs.mapComp.initMap()
},
// 将客户添加到通讯录
addToCustomerList() {
this.addLoading = true;
const customerForm = {
name: this.form.reporterName, // 姓名
tel1: this.form.reporterPhone, // 联系方式1
};
// 如果信息完整, 添加到通讯录
if (this.allowAdd && customerForm.tel1 && customerForm.name) {
this.$confirm("确定要将该客户添加到客户列表吗？", "确认操作", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
addCustomer(customerForm)
.then((response) => {
if (response.code === 200) {
this.$message.success("添加成功");
this.allowAdd = false;
}
})
.catch((_) => {
// 异常情况，loading置为false
this.addLoading = false;
});
});
} else {
this.$message.warning("请确保联系人姓名和电话完整性");
}
},
// 根据电话去找人
fetchReporter(phone) {
const params = {
tel: phone,
};
getCustomerList(params).then((response) => {
if (response.code === 200 && response.data) {
if (response.data.total === 1) {
this.form.reporterName = response.data.rows[0].name;
this.allowAdd = false;
} else {
this.allowAdd = true;
}
}
});
},
// 获取联系人列表
fetchReportersList() {
const params = {
limit: 10000,
offset: 1,
};
getCustomerList(params).then((response) => {
if (response.code === 200) {
this.reportersList = response.data.rows;
}
});
},
// 案卷来源列表
fetchCaseSourceList() {
getCaseSource().then((response) => {
if (response.code === 200) {
this.caseSourceList = response.data;
}
});
},
// 案卷等级列表
fetchCaseLevelList() {
getCaseLevel().then((response) => {
if (response.code === 200) {
this.caseLevelList = response.data;
}
});
},
// 大类列表
fetchEorcList() {
getEorc().then(async (response) => {
if (response.code === 200) {
this.eorcList = response.data;
// this.typeSelectList = response.data.map((item) => {
// item.pid = "-1";
// item.level = 1;
// return item;
// });
// let data2 = await this.getLevelData2(this.typeSelectList);
// let data3 = await this.getLevelData3(data2);
// setTimeout(() => {
// this.typeSelectList = toTreeList([...this.typeSelectList, ...data2,...data3], "-1");
// console.log(this.typeSelectList)
// }, 2000);
}
});
},
// 大类选中改变
async changeEorc(node){
let data2 = await this.getLevelData2(node);
let codeList = data2.map(item =>{
return item.id
})
let data3 = await this.getLevelData3(codeList);
setTimeout(()=>{
this.typeSelectList = toTreeList([...data2,...data3], "-1");
},500)
},
getLevelData2(node) {
return new Promise((resolve) => {
getCaseType(node).then((res) => {
if (res.code === 200) {
let data = res.data.map(child =>{
return {
id:child.typeCode,
pid:"-1",
level:1,
name:child.typeName,
value:child.typeCode,
}
})
resolve(data);
}
});
});
},
getLevelData3(codeList) {
return new Promise((resolve) => {
getCaseDetailType().then((res) => {
if (res.code === 200) {
res.data = res.data.map(child =>{
return {
pid:child.typeCode,
id:child.typeDetailCode,
level:2,
name:child.typeDetailName,
value:child.typeDetailCode
}
})
res.data = res.data.filter(item =>{
if(codeList.includes(item.pid)){
return item;
}
})
resolve(res.data);
}
});
});
},
// 二级类型列表
fetchCaseTypeList() {
getCaseType(this.form.type.eorc).then((response) => {
this.caseTypeList = response.data;
// let index = this.eorcList.findIndex((item, index, arr)=> (this.form.type.eorc == item.value))
// let level2 = Object.assign(this.caseTypeList).map(item =>{
// return {
// pid:this.eorcList[index].id,
// level:2,
// id:item.id,
// name:item.targetName,
// value:item.typeCode
// }
// })
// this.typeSelectList.push(...level2)
// console.log(this.typeSelectList)
});
},
// 三级类型列表
fetchCaseDetailTypeList() {
// :label="item.typeDetailName"
// :value="item.typeDetailCode"
// 遍历caseTypeList根据code获取大类的ID，进行级联查询
// let typeId = 0
// this.caseTypeList.forEach(item => {
// if (item.typeCode === this.form.type.caseTypeCode) {
// typeId = item.id
// }
// })
// if (typeId > 0) {
// getCaseDetailType( this.form.type.caseTypeCode).then(response => {
// this.caseDetailTypeList = response.data
// })
// }
getCaseDetailType(this.form.type.caseTypeCode).then((response) => {
this.caseDetailTypeList = response.data;
// 暂时取消赋值
// this.form.type.caseDetailTypeCode =
// this.caseDetailTypeList[0].typeDetailCode;
// let index = this.caseTypeList.findIndex((item, index, arr)=> (this.form.type.typeCode == item.value))
// let level3 = Object.assign(this.caseDetailTypeList).map(item =>{
// return {
// pid:this.caseTypeList[index].id,
// level:3,
// id:item.id,
// name:item.typeDetailName,
// value:item.typeDetailCode
// }
// })
// this.typeSelectList.push(...level3)
// console.log(this.typeSelectList)
});
},
// 区列表
fetchAreaList() {
getAreaList("0").then((response) => {
this.areaList = response.data;
});
},
// 街道列表
fetchStreetList() {
getAreaList(this.form.address.areaCode).then((response) => {
this.streetList = response.data;
});
},
// 社区列表
fetchCommunityList() {
getAreaList(this.form.address.streetCode).then((response) => {
this.communityList = response.data;
});
},
// 获取处理方式列表
fetchProcessWayList() {
getNextNodeList("0").then((response) => {
this.processWayList = response.data;
});
},
fetchGridList() {},
// 自动生成案卷编号，时间+坐席号
generateCaseId() {
const id = getToday("yyMMddhhmmss");
const seat = this.$store.getters.seat;
this.form.caseId = id + seat;
},
// 地图准备好后的操作
mapReady({ fmap }) {
this.fmap = fmap;
// 禁用双击放大
this.fmap.deactivateDbClickZoom();
const that = this;
// 添加双击事件,在地图上添加点
this.fmap.on("fmap.map.dbclick", function (event) {
that.fmap.clearLayer("case");
const marker = {
lon: event.coordinate[0],
lat: event.coordinate[1],
layer: "case",
};
that.currentPosition.lng = marker.lon.toFixed(8) + "";
that.currentPosition.lat = marker.lat.toFixed(8) + "";
that.fmap.addFeatures([marker], {
xField: "lon",
yField: "lat",
layer: "case",
});
// that.fmap.navigate2Center([marker.lon, marker.lat])
});
},
// 显示地图
showMapDiv() {
this.showMap = true;
this.$refs.mapComp.initMap();
// 如果已经有坐标了，显示当前点
if (this.form.lng && this.form.lat) {
const marker = {
lon: this.form.lng,
lat: this.form.lat,
layer: "case",
};
this.currentPosition.lng = this.form.lng;
this.currentPosition.lat = this.form.lat;
this.fmap.addFeatures([marker], {
xField: "lon",
yField: "lat",
layer: "case",
});
}
this.mapHeight = this.$refs.caseContainer.offsetHeight + 50 +"px";
},
// 查询兴趣点
queryPoi() {
if (this.keyword === "") {
this.$message.warning("请输入关键字");
} else {
this.$refs.mapComp.queryPoi(this.keyword);
}
},
// 确定, 保存坐标并返回
confirmPos() {
// 添加飞渡地图 start
this.form.lng = this.mapInfo.lon
this.form.lat = this.mapInfo.lat
// end
// this.form.lng = this.currentPosition.lng;
// this.form.lat = this.currentPosition.lat;
if (this.form.lng != "0") {
// 进行逆地址解析
const loading = this.$loading({
lock: true,
text: '地址解析中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
matchReverse(this.form.lng, this.form.lat)
.then((res) => {
loading.close();
if (res.data.length > 0) {
this.form.address = {
areaCode: res.data[0].politicalCode.substring(0, 6), // 区域ID
streetCode: res.data[0].politicalCode.substring(0, 9), // 街道ID
communityCode: res.data[0].politicalCode, // 社区ID
gridId: "", // 网格ID
// fieldintro: res.data[0].standardAddressName.substring(10), // 事件地址
fieldintro: res.data[0].standardAddressName.split('镇')[1], // 事件地址
};
} else {
this.$message.warning("地址解析失败");
// 不存在的时候
this.form.address = {
// areaCode: '', // 区域ID
streetCode: '', // 街道ID
communityCode: '', // 社区ID
gridId: '', // 网格ID
fieldintro: '', // 事件地址
}
}
})
.catch(() => {
loading.close();
console.log("进行逆地址解析解析失败");
this.$message.warning("地址解析失败");
});
}
this.showMap = false;
this.clearMap();
console.log(this.form);
},
// 清除地图
clearMap() {
this.currentPosition.lng = "0";
this.currentPosition.lat = "0";
this.$refs.mapComp.clearMap();
},
// 返回到事件详情
backToForm() {
if (this.showMap) {
this.showMap = false;
this.clearMap();
}
},
},
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$rightwidth: 300px;
.case-container {
width: 100%;
display: flex;
display: -webkit-flex; /* Safari */
justify-content: space-between;
}
.form-div {
width: calc(100%- 300px);
/*height: 50vh;*/
.checkbox {
display: inline-block;
line-height: 32px; // 设置行高
margin-right: 20px;
}
padding-right: 10px;
}
.knowledge-div {
width: $rightwidth;
}
#map {
width: 100%;
height: 50vh;
}
.type_text_tip{
color: #F56C6C;
font-size: 12px;
line-height: 1;
padding-top: 4px;
position: absolute;
top: 13%;
right: 20%;
}
</style>
