<template>
|
<div>
|
<el-dialog :title="title" :visible.sync="visible" top="30px" width="900px" center :before-close="close">
|
<div slot="title" class="titBox">
|
<div>{{ parentFormData.allocationNum }}</div>
|
<div>{{ title }}</div>
|
</div>
|
<div>
|
<el-form ref="ruleForm" :disabled="pageState==='detail'" label-width="100px" :model="formData" class="demo-form-inline" :rules="rules">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="上报时间：" prop="escalationTime" class="span">
|
<el-date-picker v-model="formData.escalationTime" value-format="yyyy-MM-dd" size="small" type="date" placeholder="选择日期" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="污染位置：" prop="pollutePosition" class="span">
|
<el-input v-model="formData.pollutePosition" type="text" placeholder="请选择" size="small" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="责任主体：" prop="unitId" class="span">
|
<el-select v-model="formData.unitId" placeholder="请选择" size="small">
|
<el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="污染分类：" prop="polluteType" class="span">
|
<el-select v-model="formData.polluteType" placeholder="请选择" size="small">
|
<el-option v-for="item in polluteList" :key="item.dataKey" :label="item.dataValue" :value="item.dataKey" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="整改类型：" prop="changeType" class="span">
|
<el-select v-model="formData.changeType" placeholder="请选择" size="small" @change="changeEnumList">
|
<el-option v-for="item in Dic.changeEnum" :key="item.value" :label="item.name" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="限期天数：" prop="changeDay" class="span">
|
<el-input-number v-model="formData.changeDay" :disabled="formData.changeType===1" :min="0" label="请输入" />
|
<!-- <el-input v-model.number="formData.changeDay" :disabled="formData.changeType===1" type="text" placeholder="请输入" size="small" /> -->
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="上报单位：" prop="escalationUnitId" class="span">
|
<el-select v-model="formData.escalationUnitId" placeholder="请选择" size="small">
|
<el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="上报人：" prop="escalationName" class="span">
|
<el-input v-model="formData.escalationName" type="text" placeholder="请选择" size="small" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="排查方式：" prop="investigationType" class="span">
|
<el-radio-group v-model="formData.investigationType" size="small">
|
<el-radio v-for="(item) in Dic.investigationEnum" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-form-item label="问题描述：" prop="problemDescribe" class="span">
|
<el-input v-model="formData.problemDescribe" type="textarea" :rows="4" placeholder="请输入内容" />
|
</el-form-item>
|
</el-row>
|
<el-row>
|
<el-form-item label="附件：">
|
<div>
|
<div v-if="pageState==='edit'">
|
<div v-for="(file,index) in fileBaseListCover" :key="file.fileId+index" class="block">
|
<el-image v-if="file.fileType ===1" style="width: 100px; height: 100px" :src="file.url" :preview-src-list="getPreviewImages(file.fileId,fileBaseList)" :initial-index="index" />
|
<video v-else :src="file.url" style="width: 100px; height: 100px" @click="openVideo(file)">
|
您的浏览器不支持 video 标签。
|
</video>
|
</div>
|
</div>
|
</div>
|
<uploadFile v-if="pageState!=='detail'" :upload-url="uploadTermExcelUrl" :sys-code="sysCode" />
|
</el-form-item>
|
</el-row>
|
</el-form>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="close">关闭</el-button>
|
<el-button v-if="pageState!=='detail'" type="info" @click="handleSubmit('9')">保存</el-button>
|
<el-button v-if="pageState!=='detail'" type="primary" @click="handleSubmit('10')">提交</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>
|
|
<script>
|
import uploadFile from '@/components/UploadExcel/index'
|
import bus from '@/Bus'
|
import requestObj from '@/utils/request'
|
import _ from 'lodash'
|
export default {
|
components: { uploadFile },
|
props: {
|
title: { type: String, default: '' },
|
visible: { type: Boolean, required: true },
|
pageState: { type: String, required: true, default: 'add' },
|
parentFormData: { type: Object, default: () => {} }
|
},
|
data() {
|
return {
|
videoVisible: false,
|
formData: {
|
unitId: '',
|
escalationUnitId: '',
|
changeType: '',
|
polluteType: '',
|
escalationTime: new Date(),
|
fileBaseList: [],
|
escalationName: '',
|
changeDay: 0,
|
investigationType: 1
|
},
|
fileBaseList: [],
|
fileBaseListCover: [],
|
sysCode: '1010201', //
|
Dic: JSON.parse(localStorage.getItem('dict')),
|
unitList: [],
|
polluteList: [],
|
dialogImageUrl: '',
|
rules: {
|
escalationTime: [
|
{ required: true, message: '请选择上报时间', trigger: 'change' }
|
],
|
pollutePosition: [
|
{ required: true, message: '请输入污染位置', trigger: 'blur' }
|
],
|
unitId: [
|
{ required: true, message: '请选择责任主体', trigger: 'change' }
|
],
|
polluteType: [
|
{ required: true, message: '请选择污染分类', trigger: 'change' }
|
],
|
changeType: [
|
{ required: true, message: '请选择整改类型', trigger: 'change' }
|
],
|
changeDay: [{ required: true, message: '请输入天数', trigger: 'blur' }],
|
escalationUnitId: [
|
{ required: true, message: '请选择上报单位', trigger: 'change' }
|
],
|
investigationType: [
|
{ required: true, message: '请选择排查方式', trigger: 'change' }
|
],
|
escalationName: [
|
{ required: true, message: '请输入上报人', trigger: 'blur' }
|
],
|
problemDescribe: [
|
{ required: true, message: '请输入问题描述', trigger: 'blur' }
|
]
|
}
|
}
|
},
|
computed: {
|
uploadTermExcelUrl() {
|
return `${requestObj.baseUrl}/file/upload`
|
}
|
},
|
watch: {
|
pageState: {
|
handler(newVal) {
|
if (this.pageState === 'edit') {
|
if (
|
this.parentFormData.fileBaseList &&
|
this.parentFormData.fileBaseList.length > 0
|
) {
|
this.parentFormData.fileBaseList.forEach(item => {
|
if (item.fileType === 1) {
|
this.fileBaseList.push(
|
`${requestObj.baseUrl}file/preview/${item.fileId}`
|
) // 原图
|
}
|
// const srcApi = item.fileType === 1 ? api + 'preview/' : api + 'preview/cover/'
|
// 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,
|
fileId: item.fileId,
|
fileName: item.fileName
|
})
|
})
|
console.log('fileBaseList', this.fileBaseList)
|
}
|
}
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
async created() {
|
this.getUnitList()
|
|
console.log('oldValue', this.parentFormData)
|
|
bus.$on('changeFileAfterList', (type, fileList) => {
|
this.formData.fileBaseList = []
|
if (fileList.length > 0) {
|
fileList.map(item => {
|
if (item.response) {
|
console.log('item.response.data', item.response.data)
|
this.formData.fileBaseList.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)
|
console.log('str', str)
|
if (Number(str) === Number(index)) {
|
startIndex = i
|
}
|
})
|
|
console.log('index', index)
|
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
|
},
|
changeEnumList(val) {
|
if (val === 1) {
|
this.formData.changeDay = 0
|
}
|
},
|
// 获取责任单位list
|
getUnitList() {
|
this.$request({
|
url: '/allocation/unit',
|
method: 'get'
|
}).then(res => {
|
this.unitList = res.data
|
this.getContaminateList()
|
})
|
},
|
getContaminateList() {
|
this.$request({
|
url: '/allocation/contaminate',
|
method: 'get'
|
}).then(res => {
|
this.polluteList = res.data
|
if (!(JSON.stringify(this.parentFormData) === '{}')) {
|
this.formData = this.parentFormData
|
this.formData.polluteType = String(this.parentFormData.polluteType)
|
} else {
|
const name = this.$store.state.user.name
|
this.formData.escalationName = name
|
this.formData.changeType = this.Dic.changeEnum[0].value
|
this.formData.unitId = this.unitList[0].unitId
|
this.formData.escalationUnitId = this.unitList[0].unitId
|
this.formData.polluteType = this.polluteList[0].dataKey
|
}
|
})
|
},
|
close() {
|
this.$nextTick(function () {
|
this.$refs.ruleForm.resetFields()
|
})
|
this.$emit('update:visible', false)
|
},
|
handleSubmit(val) {
|
console.log('this.formData', this.formData)
|
if (this.fileBaseListCover && this.fileBaseListCover.length > 0) {
|
this.fileBaseListCover.forEach(item => {
|
this.formData.fileBaseList.push({
|
fileId: item.fileId,
|
fileName: item.fileName
|
})
|
})
|
}
|
this.formData.state = val
|
this.$refs.ruleForm.validate(valid => {
|
if (valid) {
|
// this.formData.fileBaseList = [...this.parentFormData.fileBaseList, this.formData.fileBaseList]
|
this.$emit('handleSubmit', this.formData)
|
} else {
|
return false
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.titBox {
|
position: relative;
|
font-size: 18px;
|
div:first-child {
|
position: absolute;
|
left: 10px;
|
}
|
div {
|
display: inline-block;
|
}
|
}
|
.block {
|
display: inline-block !important;
|
margin-right: 10px;
|
}
|
.textBox {
|
display: flex;
|
justify-content: space-between;
|
margin-left: 15px;
|
}
|
|
.el-dialog__body > div {
|
border-bottom: 1px dashed rgba(187, 187, 187, 1);
|
}
|
.span {
|
/deep/.el-form-item__content {
|
div {
|
width: 100%;
|
}
|
}
|
}
|
|
.textare {
|
/deep/.el-form-item__content {
|
width: 800px;
|
|
div {
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
