<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="120px"
|
: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-icon-map-location -->
|
<el-input
|
v-model="formData.pollutePosition"
|
type="text"
|
placeholder="请选择"
|
size="small"
|
>
|
<template
|
slot="append"
|
>
|
<div
|
style="line-height: 2;"
|
@click="toMap()"
|
>
|
定位
|
</div>
|
</template>
|
</el-input>
|
</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-col :span="24">
|
<el-form-item
|
label="任务分类："
|
prop="keyPointlist"
|
class="span"
|
>
|
<el-radio-group
|
v-model="formData.keyPoint"
|
size="small"
|
>
|
<el-radio
|
v-for="item in Dic.emphasisEnum"
|
: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 },
|
isToMap: { type: Boolean, required: true, default: false },
|
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: '',
|
keyPoint: 0,
|
changeDay: 0,
|
investigationType: 1,
|
pollutePosition: ''
|
},
|
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: {
|
toMap () {
|
this.$emit('update:isToMap', true)
|
},
|
changeKeyPoint (data) {
|
this.$forceUpdate()
|
},
|
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)
|
this.formData.keyPoint = Number(this.parentFormData.keyPoint)
|
} 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%;
|
}
|
}
|
}
|
/deep/.el-checkbox__inner {
|
border-radius: 50%;
|
}
|
/deep/.el-input-group__append {
|
width: 60px !important;
|
padding: 0;
|
text-align: center;
|
cursor: pointer;
|
}
|
</style>
|
