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.
598 lines
17 KiB
598 lines
17 KiB
<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>
|
|
|