战立标
2 years ago
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