8 changed files with 1369 additions and 603 deletions
@ -1,598 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
<el-dialog |
|||
:before-close="handleClose" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:visible.sync="dialogVisible" |
|||
class="dissatisfied-detail" |
|||
title="" |
|||
width="1118px" |
|||
> |
|||
<div class="content"> |
|||
<div class="main-title main-title2"> |
|||
<Title text="事件派单"/> |
|||
</div> |
|||
<div class="contents" v-if="dialogVisible"> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">事件类型:</div> |
|||
<div class="value">{{ detail.categoryName }}</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">接收时间:</div> |
|||
<div class="value">{{ detail.happenTime }}</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">发生地点:</div> |
|||
<div class="value">{{ detail.address }}</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="items"> |
|||
<div class="label">事件描述:</div> |
|||
<div class="value"> |
|||
{{ detail.eventContent }} |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items" style="align-items: center"> |
|||
<div class="label">处理方式:</div> |
|||
<el-radio-group v-model="form.operationType" class="select" popper-class="selectPopClass" |
|||
text-color="#fff"> |
|||
<el-radio label="5" value="5">指派</el-radio> |
|||
<!-- <el-radio disabled label="" value="">转财务</el-radio>--> |
|||
</el-radio-group> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items" style="align-items: center"> |
|||
<div class="label">事件分类:</div> |
|||
<el-cascader |
|||
:key="iscascaderShow" |
|||
ref="myCascader" |
|||
v-model="selCategoryArray" |
|||
:options="casOptions" |
|||
:props="optionProps" |
|||
:show-all-levels="false" |
|||
class="select" |
|||
clearable |
|||
popper-class="selectPopClass" |
|||
@change="handleChangeCate" |
|||
/> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">处理部门:</div> |
|||
<el-cascader |
|||
ref="agencyIdArray" |
|||
v-model="agencyIdArray" |
|||
:options="orgOptions" |
|||
:props="orgOptionProps" |
|||
:show-all-levels="false" |
|||
class="select" |
|||
popper-class="selectPopClass" |
|||
@change="handleChangeAgency" |
|||
/> |
|||
<!-- <div class="value">{{ detail.gridName }} {{ detail.name }}</div>--> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
|
|||
<div class="items"> |
|||
<div class="label">转办意见:</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="items"> |
|||
<el-input |
|||
v-model="form.content" |
|||
:autosize="{ minRows: 5, maxRows: 10}" |
|||
class="input" |
|||
maxlength="500" |
|||
placeholder="请输入转办意见" |
|||
type="textarea"/> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col :span="24"> |
|||
<div class="items"> |
|||
<div class="label">图片/附件:</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="items"> |
|||
<!-- <el-upload |
|||
:auto-upload="false" |
|||
action="#" |
|||
list-type="picture-card"> |
|||
<div slot="default"> |
|||
<i class="el-icon-plus"></i> |
|||
<div class="text">添加图片</div> |
|||
</div> |
|||
|
|||
<div slot="file" slot-scope="{file}"> |
|||
<img |
|||
:src="file.url" |
|||
alt="" class="el-upload-list__item-thumbnail" |
|||
> |
|||
<span class="el-upload-list__item-actions"> |
|||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"> |
|||
<i class="el-icon-zoom-in"></i> |
|||
</span> |
|||
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)"> |
|||
<i class="el-icon-download"></i> |
|||
</span> |
|||
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> |
|||
<i class="el-icon-delete"></i> |
|||
</span> |
|||
</span> |
|||
</div> |
|||
</el-upload>--> |
|||
<el-upload |
|||
:action="uploadUlr" |
|||
:before-upload="beforeUpload" |
|||
:file-list="fileList" |
|||
:headers="$getElUploadHeaders()" |
|||
:limit="3" |
|||
:on-preview="handleFileDownload" |
|||
:on-remove="handleFileRemove" |
|||
:on-success="handleFileSuccess" |
|||
accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3" |
|||
class="upload-demo"> |
|||
<el-button :disabled="fileList.length === 3" size="small" type="primary">点击上传</el-button> |
|||
<div slot="tip" class="el-upload__tip">支持图片、word、pdf</div> |
|||
</el-upload> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="items"> |
|||
<div class="label">办结时限:</div> |
|||
<el-date-picker |
|||
v-model="form.timeLimit" |
|||
:append-to-body="false" |
|||
format="yyyy-MM-dd" |
|||
placeholder="开始日期" |
|||
popper-class="date-current-weiyi" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
/> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
<div class="btn-group"> |
|||
<el-button class="cancel" plain round type="success" @click="handleCancel">取消</el-button> |
|||
<el-button class="sure" plain round type="warning" @click="handleSure">确定</el-button> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
<el-dialog :visible.sync="imageVisible" append-to-body width="300px"> |
|||
<img :src="dialogImageUrl" alt="" width="100%"> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import CallPhone from "@/views/dataBoard/cpts/CallPhone"; |
|||
import {requestPost} from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
name: "EventDispatchOrder", |
|||
components: {Title, CallPhone}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
form: { |
|||
operationType: "5", //处理方式[0:已回复 5、指派 6、完成并回复] |
|||
content: "",//转办意见 |
|||
timeLimit: "",//办结时限 |
|||
categoryId: "",//事件分类 |
|||
deptId: "", //指派部门 |
|||
deptName: "", |
|||
categoryList: [], |
|||
files: [] //附件 |
|||
}, |
|||
dialogImageUrl: '', |
|||
imageVisible: false, |
|||
disabled: false, |
|||
detail: {}, |
|||
|
|||
|
|||
orgOptions: [], |
|||
orgOptionProps: { |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
}, |
|||
agencyIdArray: [], |
|||
status: false, |
|||
okflag: false, |
|||
eventDetailCopy: {}, |
|||
selCategoryArray: [], |
|||
casOptions: [], |
|||
fileList: [], |
|||
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile", |
|||
iscascaderShow: 0, |
|||
optionProps: { |
|||
multiple: false, |
|||
value: "id", |
|||
label: "categoryName", |
|||
children: "children", |
|||
checkStrictly: true |
|||
}, |
|||
dataRule: { |
|||
content: [ |
|||
{required: true, message: "回复内容不能为空", trigger: "blur"}, |
|||
], |
|||
categoryId: [ |
|||
{required: true, message: "事件分类不能为空", trigger: "blur"}, |
|||
], |
|||
deptId: [ |
|||
{required: true, message: "处理部门不能为空", trigger: "blur"}, |
|||
], |
|||
timeLimit: [ |
|||
{required: true, message: "办结时限不能为空", trigger: "blur"}, |
|||
], |
|||
categoryList: [ |
|||
{required: true, message: '事件分类不能为空', trigger: 'blur'}, |
|||
] |
|||
}, |
|||
selCateObj: { |
|||
id: "" |
|||
}, |
|||
|
|||
}; |
|||
}, |
|||
async mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
handleClose(done) { |
|||
this.dialogVisible = false; |
|||
this.$emit('close') |
|||
}, |
|||
open(detail) { |
|||
this.dialogVisible = true; |
|||
this.detail = detail |
|||
const {user} = this.$store.state; |
|||
this.agencyId = user.agencyId; |
|||
this.getOrgTreeList(); |
|||
this.getCategoryList(); |
|||
}, |
|||
handleCancel() { |
|||
this.handleClose() |
|||
}, |
|||
handleSure() { |
|||
console.log(this.form) |
|||
this.$http.post('/governance/icEventOld/reply', { |
|||
...this.form, |
|||
files: this.fileList, |
|||
icEventId: this.detail.icEventId, |
|||
status:"processing", |
|||
}).then(res => { |
|||
this.handleClose() |
|||
this.$message.success('操作成功') |
|||
this.$emit('ok') |
|||
}) |
|||
}, |
|||
|
|||
beforeUpload(file) { |
|||
const array = file.name.split("."); |
|||
const extension = array[array.length - 1]; |
|||
const formatarray = [ |
|||
"jpg", |
|||
"png", |
|||
"jpeg", |
|||
"bmp", |
|||
"mp4", |
|||
"wma", |
|||
"m4a", |
|||
"mp3", |
|||
"doc", |
|||
"docx", |
|||
"xls", |
|||
"xlsx", |
|||
"pdf", |
|||
]; |
|||
if (formatarray.indexOf(extension) === -1) { |
|||
this.$message.error("只支持图片、word、pdf"); |
|||
return false; |
|||
} |
|||
}, |
|||
handleFileRemove(file) { |
|||
if (file && file.status === "success") { |
|||
this.fileList.splice( |
|||
this.fileList.findIndex((item) => item.uid === file.uid), |
|||
1 |
|||
); |
|||
} |
|||
}, |
|||
handleFileSuccess(res, file) { |
|||
if (res.code === 0 && res.msg === "success") { |
|||
const array = file.name.split("."); |
|||
const fileType = array[array.length - 1]; |
|||
const picArray = ["jpg", "png", "jpeg", "bmp"]; |
|||
const videoarray = ["mp4", "wma", "m4a"]; |
|||
const docArray = ["doc", "docx", "xls", "xlsx", "pdf"]; |
|||
const mp3Array = ["mp3"]; |
|||
|
|||
if (picArray.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = "image"; |
|||
} else if (videoarray.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = "video"; |
|||
} else if (docArray.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = "doc"; |
|||
} else if (mp3Array.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = "voice"; |
|||
} |
|||
|
|||
file.url = res.data.url; |
|||
file.type = fileType; |
|||
|
|||
file.attachmentName = file.name; |
|||
file.attachmentType = file.type; |
|||
file.attachmentUrl = file.url; |
|||
|
|||
this.fileList.push(file); |
|||
} else this.$message.error(res.msg); |
|||
}, |
|||
//下载 |
|||
handleFileDownload(file) { |
|||
var a = document.createElement("a"); |
|||
var event = new MouseEvent("click"); |
|||
a.download = file.name; |
|||
a.target = '_blank'; |
|||
a.href = file.url; |
|||
a.dispatchEvent(event); |
|||
}, |
|||
handleChangeCate() { |
|||
if (this.selCateObj = this.$refs["myCascader"].getCheckedNodes()[0]) { |
|||
this.selCateObj = this.$refs["myCascader"].getCheckedNodes()[0].data |
|||
this.form.categoryList = this.selCateObj |
|||
this.form.categoryId = this.selCateObj.id |
|||
} else { |
|||
this.selCateObj = {} |
|||
} |
|||
}, |
|||
handleChangeAgency(val) { |
|||
let obj = this.$refs["agencyIdArray"].getCheckedNodes()[0].data |
|||
if (obj) { |
|||
this.form.orgType = obj.level === 'grid' ? 'grid' : 'agency' |
|||
this.form.deptId = obj.agencyId |
|||
this.form.deptName = obj.agencyName |
|||
} else { |
|||
this.form.orgType = '' |
|||
this.form.orgId = '' |
|||
} |
|||
}, |
|||
//组织机构树 |
|||
async getOrgTreeList() { |
|||
const url = "/gov/org/customeragency/agencygridtree" |
|||
let params = { |
|||
agencyId: this.agencyId, |
|||
purpose: "query" |
|||
} |
|||
const {data, code, msg} = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.orgOptions = [] |
|||
this.orgOptions.push(data) |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async getCategoryList() { |
|||
const url = '/governance/icEvent/getCategoryTree'; |
|||
let params = {}; |
|||
const {data, code, msg} = await requestPost(url, params); |
|||
if (code === 0) { |
|||
let treeDataNew = this.deepTree(data, "children"); |
|||
++this.iscascaderShow; |
|||
this.casOptions = []; |
|||
this.casOptions = treeDataNew; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
if (this.eventDetailCopy.parentCategoryId) { |
|||
const pids = this.eventDetailCopy.parentCategoryId.split(','); |
|||
pids.push(this.eventDetailCopy.categoryId); |
|||
let nodes = this.casOptions; |
|||
for (let i = 0; i < pids.length; i++) { |
|||
nodes = this.buildNode(nodes, pids[i]) |
|||
} |
|||
if (nodes) { |
|||
this.form.categoryList.push(nodes) |
|||
this.selCateObj = nodes |
|||
} |
|||
} |
|||
}, |
|||
|
|||
//重构树,去除网格 |
|||
deepTree(arr, children) { |
|||
if (Array.isArray(arr) && arr.length > 0) { |
|||
return arr.map((item) => { |
|||
return { |
|||
...item, |
|||
[children]: |
|||
(item[children] && |
|||
item[children].length > 0 && |
|||
this.deepTree(item[children], children)) || |
|||
null, |
|||
}; |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/scss/dataBoard/dialog.scss"; |
|||
|
|||
.contents { |
|||
padding: 40px 50px; |
|||
|
|||
.items { |
|||
font-size: 14px; |
|||
line-height: 34px; |
|||
position: relative; |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 17px; |
|||
|
|||
.label { |
|||
white-space: nowrap; |
|||
color: #9CB4D3; |
|||
} |
|||
|
|||
.value { |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hr { |
|||
height: 1px; |
|||
margin: 25px 0; |
|||
opacity: .4; |
|||
border-bottom: 1px #0E79D6 dashed; |
|||
} |
|||
|
|||
|
|||
.btn-group { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-top: 20px; |
|||
|
|||
.green { |
|||
color: #00CD96; |
|||
border: 1px solid #00CD96; |
|||
background: rgba(39, 189, 127, 0.3); |
|||
} |
|||
|
|||
.el-button { |
|||
width: 136px; |
|||
height: 36px; |
|||
margin: 0 20px; |
|||
} |
|||
|
|||
.orange { |
|||
color: #FD8904; |
|||
border: 1px solid #FD8904; |
|||
background: rgba(253, 137, 4, 0.3); |
|||
} |
|||
|
|||
.sure { |
|||
color: #8ED3FF; |
|||
border: 1px solid #006CFF; |
|||
background: rgba(0, 108, 255, 0.5); |
|||
} |
|||
|
|||
.cancel { |
|||
color: #B6D2FF; |
|||
border: 1px solid #6496E8; |
|||
background: rgba(116, 146, 194, 0.6); |
|||
} |
|||
|
|||
} |
|||
|
|||
.select { |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
/deep/ .el-date-editor .el-range-separator { |
|||
color: #fff; |
|||
} |
|||
|
|||
/deep/ .el-radio { |
|||
color: #fff; |
|||
} |
|||
|
|||
/deep/ .el-input__inner { |
|||
width: 360px; |
|||
height: 40px; |
|||
color: #fff; |
|||
border: 1px solid #0E3978; |
|||
border-radius: 20px; |
|||
background: rgba(0, 23, 66, 0.72); |
|||
} |
|||
|
|||
/deep/ .el-range-editor .el-range-input { |
|||
color: #fff; |
|||
background: none; |
|||
} |
|||
|
|||
::v-deep .date-current-weiyi { |
|||
border-color: #006cff; |
|||
background: rgba(3, 19, 51, 0.9); |
|||
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1); |
|||
|
|||
.el-date-picker__header-label { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.el-picker-panel__icon-btn { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.el-month-table { |
|||
td { |
|||
.cell { |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-month-table td.current:not(.disabled) .cell { |
|||
color: #fff; |
|||
background-color: #409eff; |
|||
} |
|||
|
|||
.el-month-table td.today:not(.disabled) .cell { |
|||
color: #0056d6; |
|||
} |
|||
|
|||
.el-date-picker__header--bordered { |
|||
border-bottom: solid 1px #006cff; |
|||
} |
|||
} |
|||
|
|||
/deep/ .el-textarea__inner { |
|||
color: #fff; |
|||
border: 1px solid #0E3978; |
|||
border-radius: 2px; |
|||
background: rgba(0, 23, 66, 0.72); |
|||
} |
|||
|
|||
/deep/ .el-upload--picture-card { |
|||
line-height: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
opacity: 0.72; |
|||
color: #fff; |
|||
border: 1px solid #0E3978; |
|||
border-radius: 2px; |
|||
background: rgb(0, 23, 66); |
|||
|
|||
.text { |
|||
margin-top: 10px; |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,348 @@ |
|||
<template> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div class="items" style="align-items: center"> |
|||
<div class="label required">事件分类:</div> |
|||
<el-cascader |
|||
:key="iscascaderShow" |
|||
ref="myCascader" |
|||
v-model="selCategoryArray" |
|||
:options="casOptions" |
|||
:props="optionProps" |
|||
:show-all-levels="false" |
|||
class="select" |
|||
clearable |
|||
popper-class="selectPopClass" |
|||
@change="handleChangeCate" |
|||
/> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label required">处理部门:</div> |
|||
<el-cascader |
|||
ref="agencyIdArray" |
|||
v-model="agencyIdArray" |
|||
:options="orgOptions" |
|||
:props="orgOptionProps" |
|||
:show-all-levels="false" |
|||
class="select" |
|||
popper-class="selectPopClass" |
|||
@change="handleChangeAgency" |
|||
/> |
|||
<!-- <div class="value">{{ detail.gridName }} {{ detail.name }}</div>--> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
|
|||
<div class="items"> |
|||
<div class="label required">转办意见:</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="items"> |
|||
<el-input |
|||
v-model="form.content" |
|||
:autosize="{ minRows: 5, maxRows: 10}" |
|||
class="input" |
|||
maxlength="500" |
|||
placeholder="请输入转办意见" |
|||
type="textarea"/> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col :span="24"> |
|||
<div class="items"> |
|||
<div class="label">图片/附件:</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="items"> |
|||
<el-upload |
|||
:action="uploadUlr" |
|||
:before-upload="beforeUpload" |
|||
:file-list="fileList" |
|||
:headers="$getElUploadHeaders()" |
|||
:limit="3" |
|||
:on-preview="handleFileDownload" |
|||
:on-remove="handleFileRemove" |
|||
:on-success="handleFileSuccess" |
|||
accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3" |
|||
class="upload-demo"> |
|||
<el-button :disabled="fileList.length === 3" size="small" type="primary">点击上传</el-button> |
|||
<div slot="tip" class="el-upload__tip">支持图片、word、pdf</div> |
|||
</el-upload> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="items"> |
|||
<div class="label required">办结时限:</div> |
|||
<el-date-picker |
|||
v-model="form.timeLimit" |
|||
:append-to-body="false" |
|||
format="yyyy-MM-dd" |
|||
placeholder="请选择办结时限" |
|||
popper-class="date-current-weiyi" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
/> |
|||
</div> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
</template> |
|||
|
|||
<script> |
|||
import {requestPost} from "@/js/dai/request"; |
|||
|
|||
export default { |
|||
name: "assign", |
|||
data() { |
|||
return { |
|||
form: { |
|||
operationType: "5", //处理方式[0:已回复 5、指派 6、完成并回复] |
|||
content: "",//转办意见 |
|||
timeLimit: "",//办结时限 |
|||
categoryId: "",//事件分类 |
|||
deptId: "", //指派部门 |
|||
deptName: "", |
|||
categoryList: [], |
|||
files: [] //附件 |
|||
}, |
|||
orgOptions: [], |
|||
orgOptionProps: { |
|||
multiple: false, |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
checkStrictly: true |
|||
}, |
|||
agencyIdArray: [], |
|||
status: false, |
|||
okflag: false, |
|||
eventDetailCopy: {}, |
|||
selCategoryArray: [], |
|||
casOptions: [], |
|||
fileList: [], |
|||
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile", |
|||
iscascaderShow: 0, |
|||
optionProps: { |
|||
multiple: false, |
|||
value: "id", |
|||
label: "categoryName", |
|||
children: "children", |
|||
checkStrictly: true |
|||
}, |
|||
selCateObj: { |
|||
id: "" |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
eventDetailData: { |
|||
type: Object, |
|||
default: () => { |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
form: { |
|||
handler(val) { |
|||
this.$emit('change', val) |
|||
}, |
|||
deep: true |
|||
}, |
|||
eventDetailData(val) { |
|||
|
|||
this.form.categoryId = val.categoryId |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getOrgTreeList(); |
|||
this.getCategoryList(); |
|||
this.eventDetailCopy = JSON.parse(JSON.stringify(this.eventDetailData)); |
|||
// 这一步接收到eventDetailCopy在这里回填 |
|||
if (this.eventDetailCopy.parentCategoryId && this.eventDetailCopy.categoryId) { |
|||
this.selCategoryArray = this.eventDetailCopy.parentCategoryId.split(","); |
|||
this.selCategoryArray.push(this.eventDetailCopy.categoryId); |
|||
this.handleChangeCate(this.selCategoryArray) |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
beforeUpload(file) { |
|||
const array = file.name.split("."); |
|||
const extension = array[array.length - 1]; |
|||
const formatarray = [ |
|||
"jpg", |
|||
"png", |
|||
"jpeg", |
|||
"bmp", |
|||
"mp4", |
|||
"wma", |
|||
"m4a", |
|||
"mp3", |
|||
"doc", |
|||
"docx", |
|||
"xls", |
|||
"xlsx", |
|||
"pdf", |
|||
]; |
|||
if (formatarray.indexOf(extension) === -1) { |
|||
this.$message.error("只支持图片、word、pdf"); |
|||
return false; |
|||
} |
|||
}, |
|||
handleFileRemove(file) { |
|||
if (file && file.status === "success") { |
|||
this.fileList.splice( |
|||
this.fileList.findIndex((item) => item.uid === file.uid), |
|||
1 |
|||
); |
|||
} |
|||
}, |
|||
handleFileSuccess(res, file) { |
|||
if (res.code === 0 && res.msg === "success") { |
|||
const array = file.name.split("."); |
|||
const fileType = array[array.length - 1]; |
|||
const picArray = ["jpg", "png", "jpeg", "bmp"]; |
|||
const videoarray = ["mp4", "wma", "m4a"]; |
|||
const docArray = ["doc", "docx", "xls", "xlsx", "pdf"]; |
|||
const mp3Array = ["mp3"]; |
|||
|
|||
if (picArray.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = "image"; |
|||
} else if (videoarray.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = "video"; |
|||
} else if (docArray.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = "doc"; |
|||
} else if (mp3Array.indexOf(fileType) > -1) { |
|||
file.attachmentFormat = "voice"; |
|||
} |
|||
|
|||
file.url = res.data.url; |
|||
file.type = fileType; |
|||
|
|||
file.attachmentName = file.name; |
|||
file.attachmentType = file.type; |
|||
file.attachmentUrl = file.url; |
|||
|
|||
this.fileList.push(file); |
|||
} else this.$message.error(res.msg); |
|||
}, |
|||
//下载 |
|||
handleFileDownload(file) { |
|||
var a = document.createElement("a"); |
|||
var event = new MouseEvent("click"); |
|||
a.download = file.name; |
|||
a.target = '_blank'; |
|||
a.href = file.url; |
|||
a.dispatchEvent(event); |
|||
}, |
|||
handleChangeCate() { |
|||
if (this.selCateObj = this.$refs["myCascader"].getCheckedNodes()[0]) { |
|||
this.selCateObj = this.$refs["myCascader"].getCheckedNodes()[0].data |
|||
this.form.categoryList = this.selCateObj |
|||
this.form.categoryId = this.selCateObj.id |
|||
} else { |
|||
this.selCateObj = {} |
|||
} |
|||
}, |
|||
handleChangeAgency(val) { |
|||
let obj = this.$refs["agencyIdArray"].getCheckedNodes()[0].data |
|||
if (obj) { |
|||
this.form.orgType = obj.level === 'grid' ? 'grid' : 'agency' |
|||
this.form.deptId = obj.agencyId |
|||
this.form.deptName = obj.agencyName |
|||
} else { |
|||
this.form.orgType = '' |
|||
this.form.orgId = '' |
|||
} |
|||
}, |
|||
//组织机构树 |
|||
async getOrgTreeList() { |
|||
const url = "/gov/org/customeragency/agencygridtree" |
|||
let params = { |
|||
agencyId: this.agencyId, |
|||
purpose: "query" |
|||
} |
|||
const {data, code, msg} = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.orgOptions = [] |
|||
this.orgOptions.push(data) |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
async getCategoryList() { |
|||
const url = '/governance/icEvent/getCategoryTree'; |
|||
let params = {}; |
|||
const {data, code, msg} = await requestPost(url, params); |
|||
if (code === 0) { |
|||
let treeDataNew = this.deepTree(data, "children"); |
|||
++this.iscascaderShow; |
|||
this.casOptions = []; |
|||
this.casOptions = treeDataNew; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
if (this.eventDetailCopy.parentCategoryId) { |
|||
const pids = this.eventDetailCopy.parentCategoryId.split(','); |
|||
pids.push(this.eventDetailCopy.categoryId); |
|||
let nodes = this.casOptions; |
|||
for (let i = 0; i < pids.length; i++) { |
|||
nodes = this.buildNode(nodes, pids[i]) |
|||
} |
|||
if (nodes) { |
|||
this.form.categoryList.push(nodes) |
|||
this.selCateObj = nodes |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
//重构树,去除网格 |
|||
deepTree(arr, children) { |
|||
if (Array.isArray(arr) && arr.length > 0) { |
|||
return arr.map((item) => { |
|||
return { |
|||
...item, |
|||
[children]: |
|||
(item[children] && |
|||
item[children].length > 0 && |
|||
this.deepTree(item[children], children)) || |
|||
null, |
|||
}; |
|||
}); |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
.items { |
|||
font-size: 14px; |
|||
line-height: 34px; |
|||
position: relative; |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 17px; |
|||
|
|||
.label { |
|||
white-space: nowrap; |
|||
color: #9CB4D3; |
|||
} |
|||
|
|||
.value { |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
} |
|||
|
|||
.required:before { |
|||
margin-right: 5px; |
|||
content: '*'; |
|||
color: #f00; |
|||
} |
|||
</style> |
@ -0,0 +1,636 @@ |
|||
<template> |
|||
<el-row class="tansfer"> |
|||
<el-form ref="ref_form_demand" :inline="false" :model="formData" :rules="dataRule"> |
|||
<el-form-item label="" label-width="0" prop="content"> |
|||
<div class="items"> |
|||
<div class="label required">服务内容:</div> |
|||
<div class="value"> |
|||
<el-input |
|||
v-model="formData.content" |
|||
:autosize="{ minRows: 2, maxRows: 10 }" |
|||
class="cell-width-area" |
|||
clearable |
|||
placeholder="请输入内容" |
|||
type="textarea" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
<el-col :span="12"> |
|||
<el-form-item label="" prop="categoryCode"> |
|||
<div class="items"> |
|||
<div class="label required">服务类型:</div> |
|||
<div class="value"> |
|||
<el-cascader |
|||
v-model="formData.categoryCode" |
|||
:options="demandOptions" |
|||
class="cell-width-1" |
|||
clearable |
|||
@change="handleCateSlect" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="" prop="wantServiceTime"> |
|||
<div class="items"> |
|||
<div class="label required">服务时间:</div> |
|||
<div class="value"> |
|||
<el-date-picker |
|||
v-model="formData.wantServiceTime" |
|||
class="cell-width-1" |
|||
clearable placeholder="选择日期时间" |
|||
type="datetime" |
|||
value-format="yyyy-MM-dd HH:mm:ss" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="" prop="demandUserName"> |
|||
<div class="items"> |
|||
<div class="label required">需求人:</div> |
|||
<div class="value"> |
|||
<el-input v-model="formData.demandUserName" class="cell-width-1"/> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="" prop="demandUserMobile"> |
|||
<div class="items"> |
|||
<div class="label required">联系电话:</div> |
|||
<div class="value"> |
|||
<el-input v-model="formData.demandUserMobile" class="cell-width-1"/> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="" prop="serviceLocation" style="display: block"> |
|||
<div class="items"> |
|||
<div class="label required">服务地点:</div> |
|||
<div class="value"> |
|||
<el-input v-model="formData.serviceLocation" class="cell-width-1"/> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="" prop="longitude"> |
|||
<div class="items"> |
|||
<div class="label required">位置坐标:</div> |
|||
<div class="value"> |
|||
<!-- <div class="div_searchmap"> |
|||
<el-input |
|||
v-model="keyWords" |
|||
class="cell-width-map" |
|||
maxlength="50" |
|||
placeholder="请输入关键字" |
|||
size="mini" |
|||
/> |
|||
<el-button size="mini" style="margin-left: 10px" type="primary" @click="handleSearchMap"> |
|||
查询 |
|||
</el-button> |
|||
</div>--> |
|||
<div id="app_map" style="width: 100%"></div> |
|||
</div> |
|||
|
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="" prop="locationDetail"> |
|||
<div class="items"> |
|||
<div class="label">门牌号:</div> |
|||
<div class="value"> |
|||
<el-input v-model="formData.locationDetail" class="cell-width-1"/> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="" prop="serverId"> |
|||
<div class="items"> |
|||
<div class="label required">服务组织:</div> |
|||
<div class="value serviceOrg"> |
|||
<el-select |
|||
v-model="formData.serviceType" |
|||
class="cell-width-1" |
|||
clearable placeholder="请选择" |
|||
@change="handleServiceChange('add', $event)" |
|||
> |
|||
<el-option |
|||
v-for="item in serviceOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<div class="line">-</div> |
|||
<el-select |
|||
v-model="formData.serverId" |
|||
class="cell-width-1" |
|||
clearable |
|||
filterable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in serviceOptiondList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-form> |
|||
</el-row> |
|||
</template> |
|||
|
|||
<script> |
|||
import {Loading} from "element-ui"; // 引入Loading服务 |
|||
import {requestPost} from "@/js/dai/request"; |
|||
|
|||
let loading; // 加载动画 |
|||
var map |
|||
var search |
|||
var markers |
|||
var infoWindowList |
|||
var geocoder // 新建一个正逆地址解析类 |
|||
|
|||
function iniFmData() { |
|||
return { |
|||
operationType: '2',//处理方式[0:已回复 1:已转项目 2:已转服务] |
|||
icEventId: '',//事件Id |
|||
gridId: '',// |
|||
categoryCode: '',// 二级服务分类编码 |
|||
parentCode: '',// 父级服务分类编码 |
|||
content: '',// 服务内容1000字 |
|||
reportType: 'community',// 社区帮办: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: { |
|||
// value: "id", |
|||
// label: "categoryName", |
|||
// children: "children", |
|||
// level: 'categoryType', |
|||
// checkStrictly: true |
|||
// }, |
|||
formData: iniFmData(), |
|||
okflag: false, |
|||
//地图相关 |
|||
keyWords: '', |
|||
eventDetailCopy: {} |
|||
}; |
|||
}, |
|||
components: {}, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
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 {} |
|||
} |
|||
}, |
|||
transferObj: { |
|||
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 |
|||
}, |
|||
"transferObj.longitude": { |
|||
handler(newVal, oldVal) { |
|||
console.log(this.transferObj, 'transferObj') |
|||
this.$nextTick(() => { |
|||
var center = new window.TMap.LatLng(this.transferObj.latitude || 36.0722275, this.transferObj.longitude || 120.38945519) |
|||
|
|||
map.setCenter(center) |
|||
}) |
|||
}, |
|||
immediate: true // 页面加载立即执行 |
|||
}, |
|||
demandUserId: function (val) { |
|||
this.formData.demandUserId = val |
|||
}, |
|||
formData: { |
|||
handler(val) { |
|||
this.$emit('change', val) |
|||
}, |
|||
deep: true |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
async mounted() { |
|||
const {user} = this.$store.state |
|||
this.agencyId = user.agencyId |
|||
// this.getCategoryList(); |
|||
|
|||
console.log(this.eventId, this.eventDetailData, 'eventDetailDataeventDetailDataeventDetailDataeventDetailData') |
|||
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 |
|||
} else { |
|||
this.formData.demandUserName = this.demandUserName |
|||
this.formData.demandUserMobile = this.demandUserMobile |
|||
this.formData.demandUserId = this.demandUserId |
|||
} |
|||
this.getDemandOptions(); |
|||
this.getServiceOption() |
|||
this.initMap() |
|||
}, |
|||
|
|||
methods: { |
|||
async getDemandOptions() { |
|||
const url = "/governance/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) { |
|||
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]; |
|||
} |
|||
}, |
|||
|
|||
async handleServiceChange(serverOrgType, val) { |
|||
if (!val) return false; |
|||
if (this.formData.categoryCode == "") { |
|||
this.$message.error("请先选择服务类型!"); |
|||
return; |
|||
} |
|||
const url = "/actual/base/serviceitem/listServerOrg"; |
|||
let params = { |
|||
serviceTypeId: this.formData.categoryCode, |
|||
serverOrgType: val, |
|||
businessType: "resi_service", |
|||
}; |
|||
let {data, code, msg} = await requestPost(url, params); |
|||
if (code == 0) { |
|||
this.serviceOptiondList = data; |
|||
} else if (code >= 8000) { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getServiceuserList(serviceType) { |
|||
if (!serviceType) return false; |
|||
const {demandUserId} = this.formData; |
|||
const params = { |
|||
serviceName: this.formData.categoryCode, |
|||
serviceType: serviceType, |
|||
queryPurpose: 'query', |
|||
}; |
|||
const url = "/governance/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_demand"].validate((valid, messageObj) => { |
|||
if (!valid) { |
|||
app.util.validateRule(messageObj); |
|||
// this.formData.categoryId = this.selCateObj.id |
|||
} else { |
|||
this.okflag = true |
|||
} |
|||
}); |
|||
}, |
|||
resetData() { |
|||
}, |
|||
// 地图初始化函数,本例取名为init,开发者可根据实际情况定义 |
|||
initMap() { |
|||
// 定义地图中心点坐标 |
|||
console.log(this.transferObj, 'this.transferObjthis.transferObj') |
|||
var center = new window.TMap.LatLng(this.transferObj.latitude || 36.0722275, this.transferObj.longitude || 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}) |
|||
// 新建一个地点搜索类 |
|||
markers = new TMap.MultiMarker({ |
|||
map: map, |
|||
geometries: [] |
|||
}) |
|||
infoWindowList = Array(10) |
|||
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 |
|||
// 监听地图平移结束 |
|||
map.on('click', (e) => { |
|||
this.handleMoveCenter(e) |
|||
}) |
|||
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(e) { |
|||
//修改地图中心点 |
|||
const center = e.latLng; |
|||
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.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> |
|||
.tansfer { |
|||
|
|||
.items { |
|||
font-size: 14px; |
|||
line-height: 34px; |
|||
position: relative; |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 17px; |
|||
|
|||
.label { |
|||
width: 100px; |
|||
white-space: nowrap; |
|||
color: #9CB4D3; |
|||
} |
|||
|
|||
.value { |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
.required:before { |
|||
margin-right: 5px; |
|||
content: '*'; |
|||
color: #f00; |
|||
} |
|||
|
|||
.serviceOrg { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
/deep/ .el-input .el-input__inner { |
|||
width: 100% !important; |
|||
} |
|||
|
|||
.cell-width-1 { |
|||
width: 100%; |
|||
} |
|||
|
|||
.value { |
|||
width: calc(100% - 120px); |
|||
} |
|||
|
|||
.cell-width-area { |
|||
width: 100% !important; |
|||
} |
|||
|
|||
.line { |
|||
margin: 0 20px; |
|||
} |
|||
|
|||
.div_searchmap { |
|||
position: static; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.cell-width-map { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
</style> |
@ -0,0 +1,380 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
<el-dialog |
|||
:before-close="handleClose" |
|||
:modal="true" |
|||
:modal-append-to-body="false" |
|||
:visible.sync="dialogVisible" |
|||
class="dissatisfied-detail" |
|||
title="" |
|||
width="1118px" |
|||
> |
|||
<div class="content"> |
|||
<div class="main-title main-title2"> |
|||
<Title text="事件派单"/> |
|||
</div> |
|||
<div v-if="dialogVisible" class="contents"> |
|||
<el-row> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">事件类型:</div> |
|||
<div class="value">{{ detail.categoryName }}</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">接收时间:</div> |
|||
<div class="value">{{ detail.happenTime }}</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<div class="items"> |
|||
<div class="label">发生地点:</div> |
|||
<div class="value">{{ detail.address }}</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="items"> |
|||
<div class="label">事件描述:</div> |
|||
<div class="value"> |
|||
{{ detail.eventContent }} |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<div class="items" style="align-items: center"> |
|||
<div class="label required">处理方式:</div> |
|||
<el-radio-group |
|||
v-model="form.operationType" |
|||
class="select" |
|||
popper-class="selectPopClass" |
|||
text-color="#fff"> |
|||
<el-radio label="5" value="5">指派</el-radio> |
|||
<el-radio label="2" value="2">转服务</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<template v-if="form.operationType == '5'"> |
|||
<Assign :eventDetailData="detail" @change="setForm"/> |
|||
</template> |
|||
<template v-if="form.operationType == '2'"> |
|||
<TransferService |
|||
:transferObj="transferObj" |
|||
@change="setForm" |
|||
:demandUserId="detail.demandUserId" |
|||
:demandUserName="detail.demandUserName" |
|||
:demandUserMobile="detail.demandUserMobile" |
|||
:eventId="detail.icEventId" |
|||
:eventDetailData="detail" |
|||
/> |
|||
</template> |
|||
<div class="btn-group"> |
|||
<el-button class="cancel" plain round type="success" @click="handleCancel">取消</el-button> |
|||
<el-button class="sure" plain round type="warning" @click="handleSure">确定</el-button> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
<el-dialog :visible.sync="imageVisible" append-to-body width="300px"> |
|||
<img :src="dialogImageUrl" alt="" width="100%"> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Title from "@/views/dataBoard/satisfactionEval/components/Title"; |
|||
import CallPhone from "@/views/dataBoard/cpts/CallPhone"; |
|||
import Assign from "@/views/dataBoard/overview/components/EventDispatchOrder/Assign.vue"; |
|||
import TransferService from "@/views/dataBoard/overview/components/EventDispatchOrder/TransferService.vue"; |
|||
|
|||
export default { |
|||
name: "EventDispatchOrder", |
|||
components: {Assign, Title, CallPhone, TransferService}, |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
form: { |
|||
operationType: "5", //处理方式[0:已回复 5、指派 6、完成并回复] |
|||
}, |
|||
dialogImageUrl: '', |
|||
imageVisible: false, |
|||
disabled: false, |
|||
detail: {}, |
|||
transferObj: {} |
|||
}; |
|||
}, |
|||
async mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
setForm(val) { |
|||
this.form = { |
|||
...this.form, |
|||
...val |
|||
} |
|||
}, |
|||
handleClose(done) { |
|||
this.dialogVisible = false; |
|||
this.$emit('close') |
|||
}, |
|||
open(detail) { |
|||
this.dialogVisible = true; |
|||
this.detail = detail |
|||
const {user} = this.$store.state; |
|||
this.agencyId = user.agencyId; |
|||
this.$EventBus.$on('map', (val) => { |
|||
console.log(val, 'valvalval') |
|||
this.transferObj.latitude = val.lat |
|||
this.transferObj.longitude = val.lng |
|||
}) |
|||
}, |
|||
handleCancel() { |
|||
this.handleClose() |
|||
}, |
|||
handleSure() { |
|||
console.log(this.form) |
|||
if (!this.form.operationType) { |
|||
|
|||
this.$message.error('请选择处理方式') |
|||
return; |
|||
} |
|||
let url = "/governance/icEventOld/reply" |
|||
|
|||
if (this.form.operationType == "5") { |
|||
if (!this.form.categoryId) { |
|||
this.$message.error('请选择事件分类') |
|||
return; |
|||
} |
|||
if (!this.form.deptId) { |
|||
this.$message.error('请选择处理部门') |
|||
return; |
|||
} |
|||
if (!this.form.content) { |
|||
this.$message.error('请选择转办意见') |
|||
return; |
|||
} |
|||
if (!this.form.timeLimit) { |
|||
this.$message.error('请选择办结时限') |
|||
return; |
|||
} |
|||
this.form.files = this.fileList |
|||
this.form.status = "processing" |
|||
} |
|||
if (this.form.operationType == "2") { |
|||
url = "/governance/icEventOld/icEventToDemand"; |
|||
if (!this.form.content) { |
|||
this.$message.error('服务内容不能为空') |
|||
return; |
|||
} |
|||
if (!this.form.categoryCode) { |
|||
this.$message.error("服务类型不能为空") |
|||
return; |
|||
} |
|||
if (!this.form.wantServiceTime) { |
|||
this.$message.error("服务时间不能为空") |
|||
return; |
|||
} |
|||
if (!this.form.demandUserName) { |
|||
this.$message.error("需求人不能为空") |
|||
return; |
|||
} |
|||
if (!this.form.demandUserMobile) { |
|||
this.$message.error("联系电话不能为空") |
|||
return; |
|||
} |
|||
if (!this.form.serviceLocation) { |
|||
this.$message.error("服务地点不能为空") |
|||
return; |
|||
} |
|||
if (!this.form.serverId) { |
|||
this.$message.error("服务组织不能为空") |
|||
return; |
|||
} |
|||
} |
|||
this.$http.post(url, { |
|||
...this.form, |
|||
icEventId: this.detail.icEventId, |
|||
}).then(res => { |
|||
this.handleClose() |
|||
this.$message.success('操作成功') |
|||
this.$emit('ok') |
|||
}) |
|||
}, |
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "~@/assets/scss/dataBoard/dialog.scss"; |
|||
|
|||
.contents { |
|||
padding: 40px 50px; |
|||
|
|||
.items { |
|||
font-size: 14px; |
|||
line-height: 34px; |
|||
position: relative; |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 17px; |
|||
|
|||
.label { |
|||
white-space: nowrap; |
|||
color: #9CB4D3; |
|||
} |
|||
|
|||
.value { |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.hr { |
|||
height: 1px; |
|||
margin: 25px 0; |
|||
opacity: .4; |
|||
border-bottom: 1px #0E79D6 dashed; |
|||
} |
|||
|
|||
|
|||
.btn-group { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-top: 20px; |
|||
|
|||
.green { |
|||
color: #00CD96; |
|||
border: 1px solid #00CD96; |
|||
background: rgba(39, 189, 127, 0.3); |
|||
} |
|||
|
|||
.el-button { |
|||
width: 136px; |
|||
height: 36px; |
|||
margin: 0 20px; |
|||
} |
|||
|
|||
.orange { |
|||
color: #FD8904; |
|||
border: 1px solid #FD8904; |
|||
background: rgba(253, 137, 4, 0.3); |
|||
} |
|||
|
|||
.sure { |
|||
color: #8ED3FF; |
|||
border: 1px solid #006CFF; |
|||
background: rgba(0, 108, 255, 0.5); |
|||
} |
|||
|
|||
.cancel { |
|||
color: #B6D2FF; |
|||
border: 1px solid #6496E8; |
|||
background: rgba(116, 146, 194, 0.6); |
|||
} |
|||
|
|||
} |
|||
|
|||
.select { |
|||
margin-right: 16px; |
|||
} |
|||
|
|||
/deep/ .el-date-editor .el-range-separator { |
|||
color: #fff; |
|||
} |
|||
|
|||
/deep/ .el-radio { |
|||
color: #fff; |
|||
} |
|||
|
|||
/deep/ .el-input--medium .el-input__icon { |
|||
line-height: 40px !important; |
|||
} |
|||
|
|||
/deep/ .el-date-editor.el-input { |
|||
width: 360px !important; |
|||
} |
|||
|
|||
/deep/ .el-input .el-input__inner { |
|||
width: 360px !important; |
|||
height: 40px !important; |
|||
color: #fff !important; |
|||
border: 1px solid #0E3978 !important; |
|||
border-radius: 20px !important; |
|||
background: rgba(0, 23, 66, 0.72) !important; |
|||
} |
|||
|
|||
/deep/ .el-range-editor .el-range-input { |
|||
color: #fff; |
|||
background: none; |
|||
} |
|||
|
|||
::v-deep .date-current-weiyi { |
|||
border-color: #006cff; |
|||
background: rgba(3, 19, 51, 0.9); |
|||
box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1); |
|||
|
|||
.el-date-picker__header-label { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.el-picker-panel__icon-btn { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.el-month-table { |
|||
td { |
|||
.cell { |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-month-table td.current:not(.disabled) .cell { |
|||
color: #fff; |
|||
background-color: #409eff; |
|||
} |
|||
|
|||
.el-month-table td.today:not(.disabled) .cell { |
|||
color: #0056d6; |
|||
} |
|||
|
|||
.el-date-picker__header--bordered { |
|||
border-bottom: solid 1px #006cff; |
|||
} |
|||
} |
|||
|
|||
/deep/ .el-textarea__inner { |
|||
color: #fff; |
|||
border: 1px solid #0E3978; |
|||
border-radius: 2px; |
|||
background: rgba(0, 23, 66, 0.72); |
|||
} |
|||
|
|||
/deep/ .el-upload--picture-card { |
|||
line-height: normal; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
text-align: center; |
|||
opacity: 0.72; |
|||
color: #fff; |
|||
border: 1px solid #0E3978; |
|||
border-radius: 2px; |
|||
background: rgb(0, 23, 66); |
|||
|
|||
.text { |
|||
margin-top: 10px; |
|||
} |
|||
} |
|||
|
|||
.required:before { |
|||
margin-right: 5px; |
|||
content: '*'; |
|||
color: #f00; |
|||
} |
|||
</style> |
Loading…
Reference in new issue