<template>
|
<div>
|
<el-dialog :title="dialogData.title" top="30px" :visible.sync="visible" width="900px" center :before-close="close">
|
<div slot="title" class="titBox">
|
<div>{{ parentFormData.allocationNum }}</div>
|
<div>{{ dialogData.title }}</div>
|
</div>
|
<div>
|
<div v-if="dialogData.pageType !=='delay'" class="stepsList">
|
<el-steps :space="200" :active="parentFormData.approveList.length+1" align-center>
|
<el-step v-for="(item,index) in setepList" :key="index" :title="'' + item.createName + ' ' + item.stateName" :description="item.createTime" />
|
</el-steps>
|
</div>
|
<div class="inforData">
|
<el-descriptions title="基本信息" :column="parseInt('4')">
|
<el-descriptions-item label="上报时间" label-class-name="itemSpan">{{ parentFormData.escalationTime }}</el-descriptions-item>
|
<el-descriptions-item label="责任单位" label-class-name="itemSpan">{{ unitIdFormatter }}</el-descriptions-item>
|
<el-descriptions-item label="污染分类" label-class-name="itemSpan">{{ polluteTypeFormatter }}</el-descriptions-item>
|
<el-descriptions-item label="整改类型" label-class-name="itemSpan">{{ dictObj.changeEnum[parentFormData.changeType] }}</el-descriptions-item>
|
<el-descriptions-item label="期限天数" label-class-name="itemSpan">{{ parentFormData.changeDay }}</el-descriptions-item>
|
<el-descriptions-item label="上报单位" label-class-name="itemSpan">{{ updataUnitIdFormatter }}</el-descriptions-item>
|
<el-descriptions-item label="上报人" label-class-name="itemSpan">{{ parentFormData.escalationName }}</el-descriptions-item>
|
</el-descriptions>
|
<el-descriptions :column="parseInt('2')">
|
<el-descriptions-item label="污染位置" label-class-name="itemSpan">{{ parentFormData.pollutePosition }}</el-descriptions-item>
|
<el-descriptions-item label="重点任务" label-class-name="itemSpan">{{ dictObj.emphasisEnum[parentFormData.keyPoint] }}</el-descriptions-item>
|
</el-descriptions>
|
<el-descriptions :column="parseInt('1')">
|
<el-descriptions-item label="问题描述" label-class-name="itemSpan" :content-style="{'width': '80%'}">{{ parentFormData.problemDescribe }}</el-descriptions-item>
|
<el-descriptions-item label="附件" label-class-name="itemSpan" :content-style="{'width': '80%'}">
|
<div>
|
<div v-for="(file,index) in fileBaseListCover" :key="file.id+index" class="block">
|
<el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.id,fileBaseList)" :initial-index="index" />
|
<video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
|
您的浏览器不支持 video 标签。
|
</video>
|
</div>
|
</div>
|
</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<!-- 整改部分操作 -->
|
<div v-if="dialogData.pageType ==='work'" class="rectification">
|
<div>
|
<el-form label-width="90px" class="demo-form-inline">
|
<div style="display: flex;">
|
<el-form-item label="是否整改:">
|
<el-radio-group v-model="workForme.isChange">
|
<el-radio :label="0">是</el-radio>
|
<el-radio :label="1">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="整改人:">
|
<el-input v-model="workForme.changeName" size="mini" placeholder="请输入整改人" />
|
</el-form-item>
|
</div>
|
<el-form-item label="整改反馈:">
|
<el-input v-model="workForme.changeDescribe" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" />
|
</el-form-item>
|
<el-row>
|
<el-form-item label="附件:">
|
<uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
|
</el-form-item>
|
</el-row>
|
|
</el-form>
|
</div>
|
</div>
|
<!-- 整改信息 -->
|
<div v-if="(dialogData.pageType ==='detail'||dialogData.pageType ==='approve' )&& parentFormData.state >=30">
|
<el-row class="rectificationContent">
|
<el-col :span="12">
|
<div class="grid-content bg-purple" />
|
<el-descriptions title="整改信息" :column="parseInt('2')">
|
<el-descriptions-item label="是否整改" label-class-name="itemSpan">{{ parentFormData.changeType }}</el-descriptions-item>
|
<el-descriptions-item label="整改人" label-class-name="itemSpan">{{ parentFormData.changeName }}</el-descriptions-item>
|
</el-descriptions>
|
<el-descriptions :column="parseInt('1')">
|
<el-descriptions-item label="整改反馈" label-class-name="itemSpan">{{ parentFormData.changeDescribe }}</el-descriptions-item>
|
</el-descriptions>
|
</el-col>
|
<el-col :span="12">
|
<div class="grid-content bg-purple-light" />
|
<el-row>
|
<el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;">
|
<div class="grid-content bg-purple" />附件：
|
</el-col>
|
<el-col :span="21">
|
<div class="grid-content bg-purple-light" />
|
<div>
|
<div v-for="(file,index) in fileChangeListCover" :key="file.id+index" class="block">
|
<el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.id,fileChangeList)" :initial-index="index" />
|
<video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
|
您的浏览器不支持 video 标签。
|
</video>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 审批信息 -->
|
<div v-if="dialogData.pageType ==='detail'&& parentFormData.state>30">
|
<el-row class="rectificationContent">
|
<el-col :span="12">
|
<div class="grid-content bg-purple" />
|
<el-descriptions title="审批信息" :column="2">
|
<el-descriptions-item label="考核打分" label-class-name="itemSpan">{{ parentFormData.checkScore }}</el-descriptions-item>
|
</el-descriptions>
|
<el-descriptions :column="1">
|
<el-descriptions-item label="理由" label-class-name="itemSpan">{{ parentFormData.checkDescribe }}</el-descriptions-item>
|
</el-descriptions>
|
</el-col>
|
<el-col :span="12">
|
<div class="grid-content bg-purple-light" />
|
<el-row>
|
<el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;">
|
<div class="grid-content bg-purple" />附件：
|
</el-col>
|
<el-col :span="21">
|
<div class="grid-content bg-purple-light" />
|
<div>
|
<div>
|
<div v-for="(file,index) in fileApproveListCover" :key="file.id+index" class="block">
|
<el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.id,fileApproveList)" :initial-index="index" />
|
<video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
|
您的浏览器不支持 video 标签。
|
</video>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 延期信息 -->
|
<div v-if="(dialogData.pageType ==='delay' && (dialogData.pageState ==='view' ||dialogData.pageState ==='edit'))">
|
<el-row class="rectificationContent">
|
<el-col :span="12">
|
<div class="grid-content bg-purple" />
|
<el-descriptions title="延期信息" :column="1">
|
<el-descriptions-item label="延期天数" label-class-name="itemSpan">{{ parentFormData.extensionNum }}</el-descriptions-item>
|
<el-descriptions-item label="延期理由" label-class-name="itemSpan">{{ parentFormData.remake }}</el-descriptions-item>
|
</el-descriptions>
|
</el-col>
|
<el-col :span="12">
|
<div class="grid-content bg-purple-light" />
|
<el-row>
|
<el-col :span="3" style="margin-top: 40px;font-size: 15px;color: #101010;">
|
<div class="grid-content bg-purple" />附件：
|
</el-col>
|
<el-col :span="21">
|
<div class="grid-content bg-purple-light" />
|
<div>
|
<div v-for="(file,index) in fileDelayListCover" :key="file.id+index" class="block">
|
<el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.id,fileDelayList)" :initial-index="index" />
|
<video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
|
您的浏览器不支持 video 标签。
|
</video>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 审批操作 -->
|
<div v-if="dialogData.pageType ==='approve'" class="examineAndApprove">
|
<el-form label-width="90px" :model="rectificationFromData" class="demo-form-inline">
|
<el-form-item label="考核打分:">
|
<el-input v-model="approveForm.checkScore" style="width: 120px;" size="mini" />
|
</el-form-item>
|
<el-form-item label="理由:">
|
<el-input v-model="approveForm.checkDescribe" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" />
|
</el-form-item>
|
<el-form-item label="附件:">
|
<uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 延期操作 -->
|
<div v-if="dialogData.pageType ==='delay' && ( dialogData.pageState ==='approve')" class="examineAndApprove">
|
<el-form label-width="90px" :model="rectificationFromData" class="demo-form-inline">
|
<el-form-item label="延期天数:">
|
<el-input v-model="delayForm.extensionNum" style="width: 200px;" />
|
</el-form-item>
|
<el-form-item label="延期理由:">
|
<el-input v-model="delayForm.remake" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" />
|
</el-form-item>
|
<el-form-item label="附件:">
|
<uploadFile :upload-url="uploadTermExcelUrl" :sys-code="dialogData.sysCode" />
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="close()">关闭</el-button>
|
<el-button v-if="dialogData.pageType ==='approve'" type="danger" @click="handleSubmit(50)">拒绝</el-button>
|
<el-button v-if="dialogData.pageType ==='delay'&& dialogData.pageState ==='edit'" type="danger" @click="handleDelaySubmit(50)">拒绝</el-button>
|
<el-button v-if="dialogData.pageType ==='delay'&& dialogData.pageState ==='edit'" type="primary" @click="handleDelaySubmit(40)">提交</el-button>
|
<el-button v-if="dialogData.pageType !=='detail'&& dialogData.pageState ==='approve'" type="primary" @click="handleSubmit(40)">提交</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog :visible.sync="videoVisible" width="600px" :modal-append-to-body="false" :destroy-on-close="true" @close="handleCancel">
|
<div style="text-align: center;">
|
<video ref="video" style="width: 300px;height: 500px" :src="dialogImageUrl" controls autoplay />
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
p
|
<script>
|
import _ from 'lodash'
|
import uploadFile from '@/components/UploadExcel/index'
|
import Bus from '@/Bus'
|
import requestObj from '@/utils/request'
|
|
export default {
|
components: {
|
uploadFile
|
},
|
props: {
|
dialogData: { type: Object, default: () => {} },
|
visible: { type: Boolean, required: true }
|
},
|
data() {
|
return {
|
centerDialogVisible: true,
|
workForme: {
|
isChange: 0,
|
changeName: '',
|
changeDescribe: ''
|
},
|
approveForm: {
|
checkScore: '',
|
checkDescribe: ''
|
},
|
delayForm: {
|
remake: '',
|
extensionNum: ''
|
},
|
rectificationFromData: {},
|
dialogVisibleMainGraph: false,
|
hasFile: '',
|
setepListAdd: {
|
set1: [
|
{ createName: '', stateName: '整改', createTime: '' },
|
{ createName: '', stateName: '审批', createTime: '' },
|
{ createName: '', stateName: '完成', createTime: '' }
|
],
|
set2: [
|
{ createName: '', stateName: '审批', createTime: '' },
|
{ createName: '', stateName: '完成', createTime: '' }
|
],
|
set3: [{ createName: '', stateName: '完成', createTime: '' }]
|
},
|
unitList: [],
|
polluteList: [],
|
fileList: [],
|
Dic: JSON.parse(localStorage.getItem('dict')),
|
dictObj: JSON.parse(localStorage.getItem('dictObj')),
|
fileBaseList: [],
|
fileChangeList: [],
|
fileApproveList: [],
|
fileBaseListCover: [],
|
fileChangeListCover: [],
|
fileApproveListCover: [],
|
fileDelayListCover: [],
|
fileDelayList: [],
|
videoVisible: false,
|
dialogImageUrl: ''
|
}
|
},
|
computed: {
|
uploadTermExcelUrl() {
|
return `${requestObj.baseUrl}/file/upload`
|
},
|
parentFormData() {
|
console.log('parentFormData.approveList', this.dialogData.parentFormData)
|
return this.dialogData.parentFormData
|
},
|
updataUnitIdFormatter: function () {
|
const data = this.unitList.find(
|
item =>
|
item &&
|
item.unitId === this.dialogData.parentFormData.escalationUnitId
|
)
|
return data ? data.unitName : ''
|
},
|
unitIdFormatter: function () {
|
const data = this.unitList.find(
|
item => item && item.unitId === this.dialogData.parentFormData.unitId
|
)
|
return data ? data.unitName : ''
|
},
|
polluteTypeFormatter: function () {
|
const data = this.polluteList.find(
|
item =>
|
item &&
|
parseInt(item.dataKey) === this.dialogData.parentFormData.polluteType
|
)
|
return data ? data.dataValue : ''
|
},
|
setepList() {
|
const leng = this.dialogData.parentFormData.approveList.length
|
let data = _.cloneDeep(this.dialogData.parentFormData.approveList)
|
|
if (leng === 1) {
|
data = [...data, ...this.setepListAdd.set1]
|
}
|
if (leng === 2) {
|
data = [...data, ...this.setepListAdd.set2]
|
}
|
if (leng === 3) {
|
data = [...data, ...this.setepListAdd.set3]
|
}
|
console.log('data', leng)
|
return data
|
}
|
},
|
watch: {
|
parentFormData: {
|
handler(newVal) {
|
this.searchthisFileList(newVal)
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
created() {
|
const name = this.$store.state.user.name
|
this.workForme.changeName = name
|
this.getContaminateList()
|
this.getUnitList()
|
Bus.$on('changeFileAfterList', (type, fileList) => {
|
console.log('fileList', fileList)
|
this.fileList = []
|
if (fileList.length > 0) {
|
fileList.map(item => {
|
if (item.response) {
|
this.fileList.push(item.response.data)
|
}
|
})
|
}
|
})
|
},
|
methods: {
|
getPreviewImages(index, list) {
|
let startIndex = 0
|
const chechList = _.cloneDeep(list)
|
chechList.forEach((item, i) => {
|
const str = item.substring(item.lastIndexOf('/') + 1)
|
if (Number(str) === Number(index)) {
|
startIndex = i
|
}
|
})
|
console.log('startIndex', startIndex)
|
var imgList = [...list]
|
if (index === 0) return imgList
|
var start = imgList.splice(startIndex)
|
var remain = imgList.splice(0, startIndex)
|
return start.concat(remain)
|
},
|
openVideo(item) {
|
console.log('item', item)
|
this.dialogImageUrl = item.url
|
this.videoVisible = true
|
},
|
handleCancel() {
|
this.dialogImageUrl = ''
|
this.videoVisible = false
|
},
|
searchthisFileList(newVal) {
|
if (newVal.fileBaseList && newVal.fileBaseList.length > 0) {
|
newVal.fileBaseList.forEach(item => {
|
if (item.fileType === 1) {
|
this.fileBaseList.push(
|
`${requestObj.baseUrl}/file/preview/${item.fileId}`
|
) // 原图
|
}
|
|
this.fileBaseListCover.push({
|
url:
|
item.fileType === 1
|
? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}`
|
: `${requestObj.baseUrl}/file/preview/${item.fileId}`,
|
fileType: item.fileType,
|
id: item.fileId
|
})
|
})
|
console.log('fileBaseList', this.fileBaseList)
|
}
|
if (newVal.fileChangeList && newVal.fileChangeList.length > 0) {
|
newVal.fileChangeList.forEach(item => {
|
if (item.fileType === 1) {
|
this.fileChangeList.push(
|
`${requestObj.baseUrl}/file/preview/${item.fileId}`
|
) // 原图
|
}
|
this.fileChangeListCover.push({
|
url:
|
item.fileType === 1
|
? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}`
|
: `${requestObj.baseUrl}/file/preview/${item.fileId}`,
|
fileType: item.fileType,
|
id: item.fileId
|
})
|
})
|
}
|
if (newVal.fileApproveList && newVal.fileApproveList.length > 0) {
|
newVal.fileApproveList.forEach(item => {
|
if (item.fileType === 1) {
|
this.fileApproveList.push(
|
`${requestObj.baseUrl}/file/preview/${item.fileId}`
|
) // 原图
|
}
|
this.fileApproveList.push(
|
`${requestObj.baseUrl}/file/preview/${item.fileId}`
|
) // 原图
|
this.fileApproveListCover.push({
|
url:
|
item.fileType === 1
|
? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}`
|
: `${requestObj.baseUrl}/file/preview/${item.fileId}`,
|
fileType: item.fileType,
|
id: item.fileId
|
})
|
})
|
}
|
if (newVal.fileList && newVal.fileList.length > 0) {
|
newVal.fileList.forEach(item => {
|
if (item.fileType === 1) {
|
this.fileDelayList.push(
|
`${requestObj.baseUrl}/file/preview/${item.fileId}`
|
) // 原图
|
}
|
this.fileDelayList.push(
|
`${requestObj.baseUrl}/file/preview/${item.fileId}`
|
) // 原图
|
this.fileDelayListCover.push({
|
url:
|
item.fileType === 1
|
? `${requestObj.baseUrl}/file/preview/cover/${item.fileId}`
|
: `${requestObj.baseUrl}/file/preview/${item.fileId}`,
|
fileType: item.fileType,
|
id: item.fileId
|
})
|
})
|
}
|
},
|
close() {
|
this.$emit('update:visible', false)
|
},
|
// 获取责任单位list
|
getUnitList() {
|
this.$request({
|
url: '/allocation/unit',
|
method: 'get'
|
}).then(res => {
|
this.unitList = res.data
|
})
|
},
|
handleDelaySubmit(state) {
|
this.$request({
|
url: '/allocationExtension/check',
|
method: 'get',
|
params: {
|
id: this.dialogData.parentFormData.id,
|
state: state
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
this.$emit('update:visible', false)
|
this.$emit('handeleSumit')
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
},
|
handleSubmit(state) {
|
// 整改
|
let api = '/allocation/change'
|
let data = {}
|
console.log('this.dialogData.pageType', this.dialogData.pageType)
|
if (this.dialogData.pageType === 'work') {
|
api = '/allocation/change'
|
data = {
|
allocationId: this.dialogData.parentFormData.allocationId,
|
...this.workForme,
|
fileChangeList: this.fileList,
|
state: 30
|
}
|
} else if (this.dialogData.pageType === 'approve') {
|
api = '/allocation/check'
|
data = {
|
allocationId: this.dialogData.parentFormData.allocationId,
|
...this.approveForm,
|
fileApproveList: this.fileList,
|
state: state
|
}
|
} else if (this.dialogData.pageType === 'delay') {
|
api = '/allocation/applyfor'
|
data = {
|
allocationId: this.dialogData.parentFormData.allocationId,
|
...this.delayForm,
|
fileList: this.fileList
|
}
|
}
|
this.$request({
|
url: api,
|
method: 'post',
|
data: data
|
}).then(res => {
|
if (res.code === 0) {
|
this.$emit('update:visible', false)
|
this.$emit('handeleSumit')
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
},
|
getContaminateList() {
|
this.$request({
|
url: '/allocation/contaminate',
|
method: 'get'
|
}).then(res => {
|
this.polluteList = res.data
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.titBox {
|
position: relative;
|
font-size: 18px;
|
div:first-child {
|
position: absolute;
|
left: 10px;
|
}
|
div {
|
display: inline-block;
|
}
|
}
|
.stepsList {
|
border-bottom: 1px dashed rgba(187, 187, 187, 1);
|
padding-bottom: 10px;
|
}
|
.inforData {
|
margin-top: 20px;
|
border-bottom: 1px dashed rgba(187, 187, 187, 1);
|
padding-bottom: 10px;
|
font-size: 15px !important;
|
color: rgba(16, 16, 16, 1) !important;
|
}
|
/deep/.itemSpan {
|
width: 70px;
|
text-align: right;
|
font-size: 15px;
|
color: rgba(16, 16, 16, 1);
|
}
|
.rectification,
|
.examineAndApprove,
|
.rectificationContent {
|
margin-top: 20px;
|
border-bottom: 1px dashed rgba(187, 187, 187, 1);
|
margin-bottom: 10px;
|
}
|
.block {
|
display: inline-block;
|
margin-right: 10px;
|
}
|
</style>
|
