<template>
|
<div>
|
<el-dialog :title="title" :visible.sync="visible" width="900px" center :before-close="close">
|
<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="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'
|
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: {
|
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
|
}
|
},
|
created() {
|
console.log('oldValue', this.parentFormData)
|
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.getUnitList()
|
this.getContaminateList()
|
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: {
|
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
|
})
|
},
|
getContaminateList() {
|
this.$request({
|
url: '/allocation/contaminate',
|
method: 'get'
|
}).then((res) => {
|
this.polluteList = res.data
|
})
|
},
|
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>
|
.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>
|
