</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-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> </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 :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>