qa-prevention-gwj-vue/src/views/safetyenvironmental/inspection/components/edit.vue

1319 lines
51 KiB
Vue
Raw Normal View History

2023-11-06 18:11:01 +08:00
<template>
<div>
<div class="app-container">
<el-form ref="form" :rules="rules" :model="form" label-width="170px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="检查题目" prop="INSPECTION_SUBJECT">
<el-radio-group id="INSPECTION_SUBJECT" ref="INSPECTION_SUBJECT" v-model="form.INSPECTION_SUBJECT">
<el-radio :label="'安全'">安全</el-radio>
<el-radio :label="'环保'">环保</el-radio>
<el-radio :label="'综合'">综合</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="被检查单位" prop="INSPECTED_DEPARTMENT_ID">
<SelectTree ref="deptTree_Inspected" :clearable="false" :options="treeData" :props="defaultProps" v-model="form.INSPECTED_DEPARTMENT_ID" placeholder="请选择被检查单位" style="width: 300px" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="被检查单位现场负责人" prop="INSPECTED_SITEUSER_ID">
<el-select v-model="form.INSPECTED_SITEUSER_ID" clearable placeholder="请选择被检查单位现场负责人">
<el-option v-for="item in INSPECTED_SITEUSER_List" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="检查场所" prop="INSPECTION_PLACE">
<el-input id="INSPECTION_PLACE" ref="INSPECTION_PLACE" v-model="form.INSPECTION_PLACE" maxlength="255" placeholder="这里输入检查场所..." title="检查场所"/>
</el-form-item>
<el-form-item label="检查人确认" prop="Confirm">
<el-input id="Confirm" ref="openConfirm" v-model="form.CONFIRM_MESSAGE" maxlength="255" readonly placeholder="点击签字" title="检查人确认" @click.native="openConfirm"/>
</el-form-item>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item :prop="switchInspectionType === 'select'?'INSPECTION_TYPE':'INSPECTION_TYPE_OTHER'" label="检查类型">
<el-input v-if="switchInspectionType ==='value'" v-model="form.INSPECTION_TYPE_OTHER" placeholder="请输入内容" />
<SelectTree
v-if="switchInspectionType === 'select'"
ref="tree_InspectionType"
:clearable="false"
:options="inspectionTypeTree"
:props="defaultProps"
v-model="form.INSPECTION_TYPE"
:canparent="false"
placeholder="这里选择检查类型..."
children-name="nodes" />
<el-button class="ml5" @click="changeSwitch('InspectionType')">{{ switchInspectionType === 'select' ? '' : '' }}</el-button>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="检查开始时间" prop="INSPECTION_TIME_START">
<el-date-picker v-model="form.INSPECTION_TIME_START" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择检查开始时间"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="检查结束时间" prop="INSPECTION_TIME_END">
<el-date-picker v-model="form.INSPECTION_TIME_END" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择检查结束时间"/>
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="left">检查人员 <el-button type="primary" size="mini" @click="addInspector"></el-button></el-divider>
<el-form-item v-for="(item,index) in form.inspectorList" :key="index + (Math.random() + '').replace('.', '')" :label="(index+1)+'.'">
<div class="uo-flex">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="检查人员部门" prop="INSPECTION_DEPARTMENT_ID">
<SelectTree
:ref="'deptTree_INSPECTION'+index"
:clearable="false"
:options="treeDataInspectDept"
:props="defaultProps"
v-model="item.INSPECTION_DEPARTMENT_ID"
placeholder="请选择检查人员部门"
style="width: 300px"
@change="updateInspecteDept(item.INSPECTION_DEPARTMENT_ID,index)"/>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="检查人员" prop="INSPECTION_USER_ID">
<el-select v-model="item.INSPECTION_USER_ID" clearable placeholder="请选择检查人员" @change="changeHiddenUserList">
<el-option v-for="data in INSPECTOR_List[index]" :key="data.USER_ID" :label="data.NAME" :value="data.USER_ID" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="1">
<el-button plain size="mini" type="danger" icon="el-icon-delete" title="移除" @click="delInspectorRow(item,index)"/>
</el-col>
</el-row>
</div>
</el-form-item>
<el-divider content-position="left">检查情况 <el-button type="primary" size="mini" @click="addSituation"></el-button></el-divider>
<el-form-item v-for="(item,index) in form.situationList" :key="'SITUATION'+index" :label="(index+1)+'.'" :prop="item.SITUATION">
<div class="uo-flex">
<el-input v-model="item.SITUATION" :autosize="{ minRows: 1}" maxlength="255" type="textarea" placeholder="这里输入检查情况..." style="margin-right: 5px" />
<el-button plain size="mini" type="danger" icon="el-icon-delete" title="删除" @click="delSituationRow(item,index)"/>
</div>
</el-form-item>
<div style="margin-top: 50px;"/>
<el-divider content-position="left">发现问题 <el-button type="primary" size="mini" @click="addHidden"></el-button></el-divider>
<div class="mb-20">
<table class="table-ui">
<tr>
<th width="55" style="text-align:center">序号</th>
<th>问题描述</th>
<th width="200">操作</th>
</tr>
<template v-if="form.hiddenList.length !== 0">
<tr v-for="(item,index) in form.hiddenList" :key="'HIDDEN'+index">
<td align="center">{{ index+1 }}</td>
<td>{{ item.HIDDENDESCR }}</td>
<td>
<el-button v-if="false" type="primary" icon="el-icon-edit" size="mini" @click="editInspectionHidden(item,index)"></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeInspectionHidden(item,index)"></el-button>
</td>
</tr>
</template>
<template v-else>
<tr>
<td colspan="3" style="text-align: center">暂无数据</td>
</tr>
</template>
</table>
</div>
</el-form>
</div>
<!-- 添加隐患 -->
<el-dialog :visible.sync="dialogFormVisible" :title="hiddenForm.HIDDEN_ID ==''?'添加隐患':'修改隐患'">
<el-form v-if="dialogFormVisible" ref="hiddenForm" :rules="hiddenRules" :model="hiddenForm" label-width="140px" style="padding:0 20px">
<el-form-item label="隐患描述:" prop="HIDDENDESCR">
<el-input v-model="hiddenForm.HIDDENDESCR" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="隐患发现时间:" prop="DISCOVERYTIME">
<el-date-picker
v-model="hiddenForm.DISCOVERYTIME"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
style="width: 100%"
placeholder="选择日期"/>
</el-form-item>
<el-row>
<el-col :span="24">
<el-form-item label="隐患部位:" prop="HIDDENPART">
<el-input v-if="hiddenPartType =='value'" v-model="hiddenForm.HIDDENPART" style="width: 60%;display: inline-block" placeholder="请输入内容" />
<SelectTree
v-if="hiddenPartType =='select'"
ref="deptTree_Select1"
:clearable="false"
:options="hiddenPartList"
:props="defaultProps"
v-model="hiddenForm.HIDDENPART"
style="width: 90%;"
allow-create
placeholder="请选择" />
<el-button class="ml5" @click="hiddenPartTypeBtn">{{ hiddenPartType === 'select' ? '' : '' }}</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="隐患级别:" prop="HIDDENLEVEL">
<SelectTree
ref="deptTree_Select2"
:clearable="false"
:options="hiddenlevelList"
:props="defaultProps"
v-model="hiddenForm.HIDDENLEVEL"
:canparent="false"
style="width: 100%;"
children-name="nodes"
placeholder="请选择" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="隐患类型:" prop="HIDDENTYPE">
<SelectTree
ref="deptTree_Select3"
:clearable="false"
:options="hiddenTypeList"
:props="defaultProps"
v-model="hiddenForm.HIDDENTYPE"
:canparent="false"
children-name="nodes"
style="width: 100%;"
placeholder="请选择" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="隐患位置" prop="LONGITUDE" >
<el-row :gutter="12" type="flex" justify="space-between">
<el-col :span="10">
<el-input
id="LONGITUDE"
ref="LONGITUDE"
v-model="hiddenForm.LONGITUDE"
:readonly="true"
maxlength="255"
placeholder="这里选择隐患经度..."
title="隐患位置经度"
@focus="chooseMap" />
</el-col>
<el-col :span="10">
<el-input
id="LATITUDE"
ref="LATITUDE"
v-model="hiddenForm.LATITUDE"
:readonly="true"
maxlength="255"
placeholder="这里选择隐患位置纬度..."
title="隐患位置经度"
@focus="chooseMap" />
</el-col>
<el-col :span="4" style="text-align: right">
<el-button type="primary" icon="el-icon-add-location" plain @click="chooseMap"></el-button>
</el-col>
</el-row>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="隐患位置描述:" prop="POSITIONDESC" >
<el-row>
<el-input
id="POSITIONDESC"
ref="POSITIONDESC"
v-model="hiddenForm.POSITIONDESC"
type="textarea"
maxlength="255"
placeholder="请输入隐患位置描述..."
title="隐患位置描述"/>
</el-row>
</el-form-item>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否相关方:" prop="ISRELEVANT">
<el-radio v-model="hiddenForm.ISRELEVANT" label="1"></el-radio>
<el-radio v-model="hiddenForm.ISRELEVANT" label="2"></el-radio>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="隐患图片:" class="is-required">
<div class="disContent">
<div v-for="(item, index) in hiddenForm.hiddenImgs" :key="index" class="img-div">
<img :src="config.fileUrl + item.FILEPATH" alt="">
<div class="disContent-hide">
<el-tooltip class="item" effect="dark" content="预览" placement="top">
<span class="el-icon-zoom-in yuLan">
<viewer :images="hiddenForm.hiddenImgs">
<img :src="config.fileUrl + item.FILEPATH" alt="" class="yuLanImg">
</viewer>
</span>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top">
<span class="Delete" @click="delHiddenImg(index)"><i class="el-icon-delete" /></span>
</el-tooltip>
</div>
</div>
<el-upload
ref="hiddenUpload"
:on-preview="handlePictureCardPreview"
:before-upload="hiddenBeforeUpload"
:on-change="handleChangeIMG"
:auto-upload="false"
:limit="4"
:class="{hide:hiddenPicture}"
class="avatar-uploader"
action="#"
accept=".jpg,.jpeg,.png"
list-type="picture-card">
<i class="el-icon-plus" />
</el-upload>
</div>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog>
</el-form-item>
</el-col>
<el-col :span="24">
<div v-if="hiddenForm.hiddenVideos.length > 0">
<el-form-item label="隐患视频:">
<div v-for="(data, indexImg) in hiddenForm.hiddenVideos" :key="'hdVideo'+indexImg" class="demo-image__preview" style="float: left; margin-right: 5px">
<img
src="../../../../assets/images/hidden_video.png"
style="width: 100px; height: 100px; cursor: pointer;"
@click="goViewVideo(data)"
>
<i class="el-icon-close" @click="delFujian(indexImg)" />
</div>
</el-form-item>
</div>
<el-form-item v-else label="隐患视频:">
<el-upload
ref="videoUpload"
:on-remove="handleRemoveVideo"
:on-error="handleUploadVideoError"
:on-exceed="handleUploadVideoExceed"
:before-upload="beforeVideoFileUpload"
:file-list="fileVideoList"
:limit="1"
accept=".mp4"
class="upload-demo"
action="#"
multiple>
<div>
<el-button size="small" type="primary" style="width:110px">点击上传</el-button>
<span class="red-tip">* 只能上传mp4文件.最大上传50M</span>
</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<el-row class="form-group input-group-sm">
<el-form-item label="隐患责任人:" prop="CREATOR">
<el-select v-model="hiddenForm.CREATOR" clearable placeholder="请选择隐患责任人" style="width: 100%;" @change="changeHiddenFindDept">
<el-option v-for="item in RESPONSIBLE_USER_List" :key="item.USER_ID" :label="item.NAME" :value="item.USER_ID" />
</el-select>
</el-form-item>
</el-row>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false"> </el-button>
<el-button type="primary" @click="saveInspectionHidden"> </el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogMap" :title="'隐患位置'" width="80%">
<div>
<iframe :src="iframeSrc" frameborder="0" allowtransparency="true" width="100%" height="600"/>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogViewVideo" title="视频" width="800px" @close="closePlay">
<div>
<video-player
ref="hdVideoPlayer"
:playsinline="true"
:options="playerOptions"
class="video-player vjs-custom-skin"/>
</div>
</el-dialog>
<confirm ref="confirm" @getProposal="getProposal"/>
<video id="videoPlayer" controls="controls" crossOrigin="anonymous" style="display: none">
<source id="videoSource" src="" type="video/mp4">
</video>
<canvas id="canvasVideo" style="display: none"/>
<div class="ui-height" />
<div v-loading="loading" class="ui-foot">
<el-button type="primary" @click="confirm"> </el-button>
<el-button type="success" @click="staging"> </el-button>
2023-11-06 18:11:01 +08:00
<el-button @click="goBack"> </el-button>
</div>
</div>
</template>
<script>
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'
import { upload } from '@/utils/upload'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import confirm from './confirm'
export default {
components: { SelectTree, videoPlayer, confirm },
directives: { waves },
data() {
return {
listLoading: true,
config: config,
INSPECTED_SITEUSER_List: [],
INSPECTION_TYPE_List: [],
INSPECTOR_List: [],
treeData: [],
treeDataInspectDept: [],
inspectionTypeTree: [],
defaultProps: {
value: 'id',
children: 'nodes',
label: 'name'
},
pd: [],
switchInspectionType: 'select',
form: {
INSPECTION_SUBJECT: '', // 检查标题
INSPECTION_SOURCE: '5', // 检查来源4-监管端 5-企业端)
inspectorList: [{ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '' }], // 检查人员
INSPECTION_ORIGINATOR_ID: '', // 检查发起人
INSPECTED_DEPARTMENT_ID: '', // 被检查单位
INSPECTED_SITEUSER_ID: '', // 被检查单位现场负责人
INSPECTED_EXPLAIN: '', // 申辩内容
INSPECTED_SITEUSER_SIGN_IMG: '', // 被检查单位现场负责人签字
INSPECTED_SITEUSER_SIGN_TIME: '', // 被检查单位现场负责人签字时间
INSPECTION_TYPE: '', // 检查类型
INSPECTION_TYPE_OTHER: '', // 检查类型(其他)
INSPECTION_PLACE: '', // 检查场所
INSPECTION_TIME_START: '', // 检查开始时间
INSPECTION_TIME_END: '', // 检查结束时间
INSPECTION_STATUS: '0', // 状态(0.暂存 1.检查人待确认、2.被检查人待确认、3.归档 -1.检查人异议打回 -2被检查人申辩)
situationList: [{ INSPECTION_SITUATION_ID: '', SITUATION: '' }], // 检查情况
hiddenList: [{ ...this.hiddenForm }] // 隐患信息集合
},
hiddenCurIndex: 0,
hdFile: [], // 隐患附件
delInspectors: [], // 编辑时删除的原来检查人员
delSituations: [], // 编辑时删除的原来检查情况
delHiddens: [], // 编辑时删除的原来检查问题
delHiddenFiles: [], // 编辑时删除的原来隐患照片+视频
dialogType: 'edit',
rules: {
// INSPECTION_ORIGINATOR_ID: [{ required: true, message: '检查发起人不能为空', trigger: 'blur' }],
INSPECTION_SUBJECT: [{ required: true, message: '检查标题不能为空', trigger: 'blur' }],
INSPECTED_DEPARTMENT_ID: [{ required: true, message: '被检查单位不能为空', trigger: 'blur' }],
INSPECTED_SITEUSER_ID: [{ required: true, message: '被检查单位现场负责人不能为空', trigger: 'blur' }],
INSPECTED_EXPLAIN: [{ required: true, message: '申辩内容不能为空', trigger: 'blur' }],
INSPECTED_SITEUSER_SIGN_IMG: [{ required: true, message: '被检查单位现场负责人签字不能为空', trigger: 'blur' }],
INSPECTED_SITEUSER_SIGN_TIME: [{ required: true, message: '请选择被检查单位现场负责人签字时间', trigger: 'blur' }],
INSPECTION_TYPE: [{ required: true, message: '检查类型不能为空', trigger: 'blur' }],
INSPECTION_TYPE_OTHER: [{ required: true, message: '检查类型不能为空', trigger: 'blur' }],
INSPECTION_PLACE: [{ required: true, message: '检查场所不能为空', trigger: 'blur' }],
INSPECTION_TIME_START: [{ required: true, message: '请选择检查开始时间', trigger: 'blur' }],
INSPECTION_TIME_END: [{ required: true, message: '请选择检查结束时间', trigger: 'blur' }],
INSPECTION_STATUS: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
},
dialogFormVisible: false,
hiddenForm: {
ISRELEVANT: '', // 是否相关方
HIDDEN_ID: '', // 隐患ID
HIDDENDESCR: '', // 隐患描述
HIDDENPART: '', // 隐患部位
HIDDENLEVEL: '', // 隐患级别
HIDDENTYPE: '', // 隐患类型1
HIDDENTYPE2: '', // 隐患类型2
LONGITUDE: '', // 隐患位置经度
LATITUDE: '', // 隐患位置纬度
POSITIONDESC: '', // 隐患位置描述
DISCOVERYTIME: '', // 隐患发现时间
HIDDENFINDDEPT: '', // 隐患发现部门(隐患责任人部门)
CREATOR: '', // 发现人(隐患责任人)
SOURCE: '5', // 隐患描述
hiddenImgs: [],
hiddenVideos: []
},
hiddenPartList: [], // 隐患部位
hiddenPartType: 'select',
hiddenlevelList: [], // 隐患级别
hiddenTypeList: [], // 隐患类型1
hiddenType2List: [], // 隐患类型2
RESPONSIBLE_USER_List: [], // 隐患责任人
dialogMap: false,
iframeSrc: '',
hiddenPicture: false,
dialogImageUrl: '',
dialogVisible: false,
fileHdImgList: [], // 隐患图片
fileVideoList: [], // 隐患视频
hiddenRules: {
HIDDENDESCR: [{ required: true, message: '隐患描述不能为空', trigger: 'blur' }],
// HIDDENPART: [{ required: true, message: '隐患部位不能为空', trigger: 'blur' }],
HIDDENLEVEL: [{ required: true, message: '隐患级别不能为空', trigger: 'blur' }],
HIDDENTYPE: [{ required: true, message: '隐患类型1不能为空', trigger: 'blur' }],
HIDDENTYPE2: [{ required: true, message: '隐患类型2不能为空', trigger: 'blur' }],
// LONGITUDE: [{ required: true, message: '隐患位置不能为空', trigger: 'blur' }],
// LATITUDE: [{ required: true, message: '隐患位置不能为空', trigger: 'blur' }],
DISCOVERYTIME: [{ required: true, message: '隐患发现时间不能为空', trigger: 'blur' }],
HIDDENFINDDEPT: [{ required: true, message: '隐患责任人部门不能为空', trigger: 'blur' }],
CREATOR: [{ required: true, message: '隐患责任人不能为空', trigger: 'blur' }]
},
dialogViewVideo: false,
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: false, // 如果为true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3"
fluid: true, // 当true时Video.js player将拥有流体大小。换句话说它将按比例缩放以适应其容器。
sources: [{
type: 'video/mp4', // 类型
src: '' // url地址
}],
poster: '', // 封面地址
notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, // 当前时间和持续时间的分隔符
durationDisplay: true, // 显示持续时间
remainingTimeDisplay: true, // 是否显示剩余时间功能
fullscreenToggle: true // 是否显示全屏按钮
}
},
loading: true
}
},
watch: {
'form.INSPECTED_DEPARTMENT_ID': {
handler(newVal, oldVal) {
if (this.dialogType == 'add' || (oldVal != null && oldVal != '')) { // 编辑初始化时,不监听
this.form.INSPECTED_SITEUSER_ID = ''
this.INSPECTED_SITEUSER_List = []
}
if (newVal != null && newVal != '') {
this.getUserList(newVal)
}
},
immediate: false
}
},
async created() {
this.resetForm()
await this.getDict()
await this.getDictTreeData()
await this.getHiddenReginTreeList()
await this.handleEdit(this.$parent.INSPECTION_ID)
this.loading = false
// loading.close()
},
mounted() {
const that = this
window.addEventListener('message', function(e) {
that.hiddenForm.LONGITUDE = e.data.LONGITUDE
that.hiddenForm.LATITUDE = e.data.LATITUDE
that.dialogMap = false
})
},
methods: {
// 修改
handleEdit(ID) {
requestFN(
'/safetyenvironmental/goEdit',
{
INSPECTION_ID: ID
}
).then((data) => {
this.form = Object.assign(this.form, data.pd) // copy obj
if (this.form.INSPECTION_TYPE_OTHER) {
this.switchInspectionType = 'value'
} else {
this.switchInspectionType = 'select'
}
for (let i = 0; i < this.form.inspectorList.length; i++) {
this.INSPECTOR_List.push([])
this.getInspectorList(this.form.inspectorList[i].INSPECTION_DEPARTMENT_ID, i)
}
for (let i = 0; i < this.form.hiddenList.length; i++) {
const formData = { fileHdImgList: [], fileVideoList: [] }
this.hdFile.push(formData)
}
this.$nextTick(() => { // 此处使用这个可以等节点渲染后再获取节点
if (this.switchInspectionType === 'select') {
this.$refs['tree_InspectionType'].handleNodeClick({ id: this.form.INSPECTION_TYPE })
}
this.$refs['deptTree_Inspected'].handleNodeClick({ id: this.form.INSPECTED_DEPARTMENT_ID })
this.getUserList(this.form.INSPECTED_DEPARTMENT_ID)
// for (let i = 0; i < this.form.inspectorList.length; i++) {
// this.$refs['deptTree_INSPECTION' + i][0].handleNodeClick({ id: this.form.inspectorList[i].INSPECTION_DEPARTMENT_ID })
// }
})
}).catch((e) => {
this.listLoading = false
})
},
changeSwitch(type) {
if (type === 'InspectionType') {
this.form.INSPECTION_TYPE = ''
this.form.INSPECTION_TYPE_OTHER = ''
this.switchInspectionType = (this.switchInspectionType === 'select') ? 'value' : 'select'
if (this.switchInspectionType === 'select') {
this.rules.INSPECTION_TYPE = [{ required: true, message: '检查类型不能为空', trigger: 'blur' }]
this.rules.INSPECTION_TYPE_OTHER = [{ required: false, message: '检查类型不能为空', trigger: 'blur' }]
} else {
this.rules.INSPECTION_TYPE = [{ required: false, message: '检查类型不能为空', trigger: 'blur' }]
this.rules.INSPECTION_TYPE_OTHER = [{ required: true, message: '检查类型不能为空', trigger: 'blur' }]
}
}
},
addInspector() {
this.form.inspectorList.push({ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '' })
this.INSPECTOR_List.push([])
},
updateInspecteDept(DEPARTMENT_ID, i) {
this.form.inspectorList[i].INSPECTION_USER_ID = ''
this.getInspectorList(DEPARTMENT_ID, i)
},
// 获取人员列表
getInspectorList(DEPARTMENT_ID, i) {
if (DEPARTMENT_ID) {
requestFN(
'/user/listAll',
{
DEPARTMENT_ID: DEPARTMENT_ID,
NOMAIN: '1'
}
).then((data) => {
this.INSPECTOR_List[i] = data.userList
this.$forceUpdate()
}).catch((e) => {
})
}
},
/* 隐患责任人改为充检查人员中选取 */
changeHiddenUserList(val) {
this.RESPONSIBLE_USER_List = []
for (let i = 0; i < this.form.inspectorList.length; i++) {
this.INSPECTOR_List[i].forEach(item => {
if (this.form.inspectorList[i].INSPECTION_USER_ID === item.USER_ID) {
this.RESPONSIBLE_USER_List.push(item)
}
})
}
},
// 删除检查人员
delInspectorRow(row, index) {
if (this.validStr(row.INSPECTION_DEPARTMENT_ID) || this.validStr(row.INSPECTION_USER_ID)) {
this.$confirm('确定要移除第' + (index + 1) + '个检查人员吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.form.inspectorList.splice(index, 1)
this.INSPECTOR_List.splice(index, 1)
if (row.INSPECTION_INSPECTOR_ID) {
this.delInspectors.push(row.INSPECTION_INSPECTOR_ID)
}
this.$forceUpdate()
}).catch(() => {
})
} else {
this.form.inspectorList.splice(index, 1)
this.INSPECTOR_List.splice(index, 1)
if (row.INSPECTION_INSPECTOR_ID) {
this.delInspectors.push(row.INSPECTION_INSPECTOR_ID)
}
}
},
// 添加检查情况
addSituation() {
this.form.situationList.push({ INSPECTION_SITUATION_ID: '', SITUATION: '' })
},
// 删除检查情况
delSituationRow(row, index) {
if (this.form.situationList[index]) {
this.$confirm('确定要移除第' + (index + 1) + '条检查情况吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.form.situationList.splice(index, 1)
if (row.INSPECTION_SITUATION_ID) {
this.delSituations.push(row.INSPECTION_SITUATION_ID)
}
}).catch(() => {
})
} else {
this.form.situationList.splice(index, 1)
if (row.INSPECTION_SITUATION_ID) {
this.delSituations.push(row.INSPECTION_SITUATION_ID)
}
}
},
hiddenPartTypeBtn() {
this.hiddenForm.HIDDENPART = ''
this.hiddenPartType = (this.hiddenPartType == 'select') ? 'value' : 'select'
},
// 添加检查问题
addHidden() {
this.resetHd()
this.RESPONSIBLE_USER_List = []
for (let i = 0; i < this.form.inspectorList.length; i++) {
this.INSPECTOR_List[i].forEach(item => {
if (this.form.inspectorList[i].INSPECTION_USER_ID === item.USER_ID) {
this.RESPONSIBLE_USER_List.push(item)
}
})
}
this.dialogFormVisible = true
},
// 添加/编辑其他隐患
editInspectionHidden(item, index) {
// console.info(this.form.hiddenList[index])
this.RESPONSIBLE_USER_List = []
for (let i = 0; i < this.form.inspectorList.length; i++) {
this.INSPECTOR_List[i].forEach(item => {
if (this.form.inspectorList[i].INSPECTION_USER_ID === item.USER_ID) {
this.RESPONSIBLE_USER_List.push(item)
}
})
}
this.hiddenCurIndex = index
this.hiddenForm = JSON.parse(JSON.stringify(this.form.hiddenList[index]))
console.info(this.hiddenForm)
this.dialogFormVisible = true
},
// 删除
removeInspectionHidden(item, index) {
this.$confirm('确定要删除吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.form.hiddenList.splice(index, 1)
this.hdFile.splice(index, 1)
if (item.HIDDEN_ID) {
this.delHiddens.push(item.HIDDEN_ID)
}
}).catch(() => {
})
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
// 隐患上传
hiddenBeforeUpload(file) {
const types = ['image/jpeg', 'image/jpg', 'image/png']
const isImage = types.includes(file.type)
if (!isImage) {
this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
return false
} else if (this.fileHdImgList.length >= 4) {
this.$message.error('最多上传4张隐患图片')
return false
} else {
this.fileHdImgList.push(file)
}
},
handleChangeIMG(file, fileList) {
const types = ['image/jpeg', 'image/jpg', 'image/png']
const isImage = types.includes(file.raw.type)
if (!isImage) {
this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
fileList.pop()
}
if (this.$refs.hiddenUpload) {
this.hiddenPicture = this.$refs.hiddenUpload.uploadFiles.length >= 4
}
},
// 删除隐患照片
delHiddenImg(index) {
this.$confirm('确定要移除该隐患图片吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.delHiddenFiles.push(this.hiddenForm.hiddenImgs[index].FILEPATH)
this.hiddenForm.hiddenImgs.splice(index, 1)
// this.form.hiddenList[this.hiddenCurIndex].hiddenImgs.splice(index, 1)
}).catch(() => {
})
},
goViewVideo(row) {
const type = row.FILEPATH.slice(row.FILEPATH.lastIndexOf('.') + 1)
this.playerOptions.sources[0].src = this.config.fileUrl + row.FILEPATH
this.playerOptions.poster = this.config.fileUrl + row.IMGFILEPATH
this.playerOptions.sources[0].type = 'video/' + type
this.dialogViewVideo = true
},
closePlay() {
this.$refs.hdVideoPlayer.player.pause()
},
delFujian(index) {
this.$confirm('确定要移除该隐患视频吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// this.delHiddenFiles.push(this.form.hiddenList[this.hiddenCurIndex].hiddenVideos[index].FILEPATH)
// this.form.hiddenList[this.hiddenCurIndex].hiddenVideos.splice(index, 1)
this.delHiddenFiles.push(this.hiddenForm.hiddenVideos[index].FILEPATH)
this.hiddenForm.hiddenVideos.splice(index, 1)
}).catch(() => {
})
},
handleRemoveVideo(file, fileVideoList) { // 文件列表移除文件时的钩子
this.fileVideoList = []
},
// eslint-disable-next-line handle-callback-err
handleUploadVideoError(err, file, fileVideoList) {
this.fileVideoList = fileVideoList
file.status = 'success'
this.fileVideoList.push(file)
},
handleUploadVideoExceed(file, fileVideoList) { // 文件超出个数限制时的钩子
this.$message.warning('最多上传1个视频哦')
},
beforeVideoFileUpload(file) {
const types = ['video/mp4']
const isImage = types.includes(file.type)
const isLt500M = file.size / 1024 / 1024 < 50
if (this.fileVideoList.length > 0) {
this.$message.error('文件超出个数限制!')
return false
}
if (!isImage) {
this.$message.error('上传视频只能是 MP4 格式!')
return false
} else if (!isLt500M) {
this.$message.error('上传视频大小不能超过 50MB!')
return false
} else {
this.fileVideoList.push(file)
this.$forceUpdate()
return true
}
},
changeHiddenFindDept(val) {
this.form.inspectorList.forEach(item => {
if (val === item.INSPECTION_USER_ID) {
this.hiddenForm.HIDDENFINDDEPT = item.INSPECTION_DEPARTMENT_ID
}
})
},
// 隐患提交
saveInspectionHidden() {
if (this.hiddenForm.hiddenImgs.length < 1 && this.$refs.hiddenUpload.uploadFiles.length < 1) {
this.$message({
message: '请上传隐患图片',
type: 'error'
})
return false
}
this.$refs.hiddenForm.validate(valid => {
if (valid) {
this.$refs.hiddenUpload.submit()
const formData = { fileHdImgList: this.fileHdImgList, fileVideoList: this.fileVideoList }
if (!this.validStr(this.hiddenForm.HIDDEN_ID)) { // 隐患ID为空新增
this.form.hiddenList.push(this.hiddenForm)
this.hdFile.push(formData)
} else {
this.form.hiddenList[this.hiddenCurIndex] = JSON.parse(JSON.stringify(this.hiddenForm))
this.hdFile[this.hiddenCurIndex] = formData
}
this.fileHdImgList = []
this.fileVideoList = []
this.dialogFormVisible = false
} else {
return false
}
})
},
// 保存
confirm() {
let flag = false
this.form.situationList.forEach(item => {
if (!this.validStr(item.SITUATION)) {
flag = true
return
}
})
if (flag) {
this.$message({
message: '检查情况不能为空',
type: 'warning'
})
return false
}
flag = false
this.form.inspectorList.forEach(item => {
if (!this.validStr(item.INSPECTION_USER_ID)) {
flag = true
return
}
})
if (flag) {
this.$message({
message: '检查人员不能为空',
type: 'warning'
})
return false
}
this.$refs.form.validate(valid => {
if (valid) {
const loading = this.$loading({
lock: true,
text: '数据保存中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
// console.info(this.form.hiddenList[index])
this.$set(this.form, 'INSPECTORJSON', JSON.stringify(this.form.inspectorList))
this.$set(this.form, 'SITUATIONJSON', JSON.stringify(this.form.situationList))
this.$set(this.form, 'HIDDENJSON', JSON.stringify(this.form.hiddenList))
this.$set(this.form, 'delInspectors', this.delInspectors.join(','))
this.$set(this.form, 'delSituations', this.delSituations.join(','))
this.$set(this.form, 'delHiddens', this.delHiddens.join(','))
this.$set(this.form, 'delHiddenFiles', this.delHiddenFiles.join(','))
this.listLoading = true
requestFN(
'/safetyenvironmental/' + this.dialogType,
{ ...this.form }
).then((data) => {
for (let i = 0; i < data.pd.hiddenList.length; i++) {
this.uploadImg(this.hdFile[i]['fileHdImgList'], data.pd.hiddenList[i].HIDDEN_ID)
this.uploadVideo(this.hdFile[i]['fileVideoList'], data.pd.hiddenList[i].HIDDEN_ID)
}
this.$message({
message: '保存成功',
type: 'success'
})
this.listLoading = false
loading.close()
this.goBack()
}).catch((e) => {
this.listLoading = false
loading.close()
})
} else {
return false
}
})
},
// 上传隐患视频
uploadVideo(list, HIDDEN_ID) {
const formData = new FormData()
for (var i = 0; i < list.length; i++) {
formData.append('FFILE', list[i])
}
formData.append('FOREIGN_KEY', HIDDEN_ID)
formData.append('TYPE', 102)
upload(
'/imgfiles/addVideo',
formData
).then((data) => {
}).catch((e) => {
this.listLoading = false
})
},
// 上传隐患照片
uploadImg(list, HIDDEN_ID) {
const formData = new FormData()
for (var i = 0; i < list.length; i++) {
formData.append('FFILE', list[i])
}
formData.append('FOREIGN_KEY', HIDDEN_ID)
formData.append('TYPE', 3)
upload(
'/imgfiles/add',
formData
).then((data) => {
}).catch((e) => {
this.listLoading = false
})
},
goBack() {
this.$parent.INSPECTION_ID = ''
this.$parent.activeName = 'List'
2023-11-06 18:11:01 +08:00
},
// 获取整改人列表
getUserList(DEPARTMENT_ID) {
if (DEPARTMENT_ID) {
requestFN(
'/user/listAll',
{ DEPARTMENT_ID: DEPARTMENT_ID }
).then((data) => {
this.INSPECTED_SITEUSER_List = data.userList
}).catch((e) => {
})
}
},
// 获取整改人列表
getResponsibleUserList(DEPARTMENT_ID) {
/* if (DEPARTMENT_ID) {
requestFN(
'/user/listAll',
{ DEPARTMENT_ID: DEPARTMENT_ID }
).then((data) => {
this.RESPONSIBLE_USER_List = data.userList
}).catch((e) => {
})
}*/
},
// 获取数据字典数据
getDict: function() {
requestFN(
'/dictionaries/listSelectTree',
{
DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型
}
).then((data) => {
this.inspectionTypeTree = JSON.parse(data.zTreeNodes)
}).catch((e) => {
})
requestFN(
'/dictionaries/listSelectTree',
{
DICTIONARIES_ID: '5e7cf8620ba54ad89719d0be62133c7a' // 隐患级别
}
).then((data) => {
this.hiddenlevelList = JSON.parse(data.zTreeNodes)
// 屏蔽较大重大隐患
this.hiddenlevelList.forEach((itemFirst, i) => {
itemFirst.nodes.forEach((itemSecond, j) => {
if (itemSecond.DICTIONARIES_ID === 'a9d916b5a17848c1b15e8b821c24bf6e' ||
itemSecond.DICTIONARIES_ID === '39a8c8e95da448868cb8a67118726f09' ||
itemSecond.DICTIONARIES_ID === 'a8e356e008de442c8785c876374d8da7') { // 忽略隐患、较大隐患、重大隐患 第二级
itemFirst.nodes.splice(j, 1)
}
})
if (itemFirst.DICTIONARIES_ID === '5ff9daf78e9a4fb1b40d77980656799d') { // 重大隐患 第一级
this.hiddenlevelList.splice(i, 1)
}
})
})
requestFN(
'/dictionaries/listSelectTree',
{
DICTIONARIES_ID: '3babc15144444bdc8d763d0af2bdfff6' // 隐患类型1
}
).then((data) => {
this.hiddenTypeList = JSON.parse(data.zTreeNodes)
})
requestFN(
'/dictionaries/listSelectTree',
{
DICTIONARIES_ID: '18c0a9aea6e54feab9f4ab3f46e0bc86' // 隐患类型2
}
).then((data) => {
this.hiddenType2List = JSON.parse(data.zTreeNodes)
})
requestFN(
'/dictionaries/getLevels',
{
DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型
}
).then((data) => {
this.INSPECTION_TYPE_List = data.list
}).catch((e) => {
})
},
getDictTreeData() {
return new Promise((resolve) => {
requestFN(
'/department/listTreeCorpDept',
{}
).then((data) => {
this.treeData = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
this.treeDataInspectDept = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
resolve()
}).catch((e) => {
})
})
},
// 获取隐患部位 下拉树
getHiddenReginTreeList() {
return new Promise((resolve) => {
this.treeLoading = true
requestFN(
'/hiddenRegion/listAll',
{}
).then((data) => {
this.treeLoading = false
this.hiddenPartList = JSON.parse(data.zTreeNodes)
resolve()
}).catch((e) => {
this.treeLoading = false
})
})
},
resetForm() {
this.form = {
INSPECTION_SUBJECT: '', // 检查标题
INSPECTION_SOURCE: '5', // 检查来源4-监管端 5-企业端)
inspectorList: [], // 检查人员
INSPECTION_ORIGINATOR_ID: '', // 检查发起人
INSPECTED_DEPARTMENT_ID: '', // 被检查单位
INSPECTED_SITEUSER_ID: '', // 被检查单位现场负责人
INSPECTED_EXPLAIN: '', // 申辩内容
INSPECTED_SITEUSER_SIGN_IMG: '', // 被检查单位现场负责人签字
INSPECTED_SITEUSER_SIGN_TIME: '', // 被检查单位现场负责人签字时间
INSPECTION_TYPE: '', // 检查类型
INSPECTION_TYPE_OTHER: '', // 检查类型(其他)
INSPECTION_PLACE: '', // 检查场所
INSPECTION_TIME_START: '', // 检查开始时间
INSPECTION_TIME_END: '', // 检查结束时间
INSPECTION_STATUS: '0', // 状态(0.暂存 1.检查人待确认、2.被检查人待确认、3.归档 -1.检查人异议打回 -2被检查人申辩)
situationList: [], // 检查情况
hiddenList: [] // 隐患
}
// this.form.inspectorList.push({ 'INSPECTION_DEPARTMENT_ID': '', 'INSPECTION_USER_ID': '' })
// this.INSPECTOR_List.push([])
},
resetHd() {
this.hiddenForm = {
ISRELEVANT: '2', // 是否相关方
HIDDEN_ID: '', // 隐患ID
HIDDENDESCR: '', // 隐患描述
HIDDENPART: '', // 隐患部位
HIDDENLEVEL: '', // 隐患级别
HIDDENTYPE: '', // 隐患类型1
HIDDENTYPE2: '', // 隐患类型2
LONGITUDE: '', // 隐患位置经度
LATITUDE: '', // 隐患位置纬度
DISCOVERYTIME: '', // 隐患发现时间
HIDDENFINDDEPT: '', // 隐患发现部门(隐患责任人部门)
CREATOR: '', // 发现人(隐患责任人)
SOURCE: '5', // 隐患描述
hiddenImgs: [],
hiddenVideos: []
}
this.fileHdImgList = [] // 隐患图片
this.fileVideoList = [] // 隐患视频
},
chooseMap() { // 弹出地图
this.dialogMap = true
this.iframeSrc = this.config.weburl + 'static/maplocation.html?t=' + Math.random()
},
openConfirm() {
this.$refs.confirm.init()
},
getProposal(information) {
this.form.CONFIRM_MESSAGE = information.INSPECTION_USER_OPINION
this.form.CONFIRM_MESSAGE_SIGN = information.INSPECTION_USER_SIGN_IMG
this.form.CONFIRM_MESSAGE_TIME = information.INSPECTION_USER_SIGN_TIME
this.$forceUpdate()
},
/**
* 暂存
*/
staging() {
let flag = false
this.form.situationList.forEach(item => {
if (!this.validStr(item.SITUATION)) {
flag = true
return
}
})
if (flag) {
this.$message({
message: '检查情况不能为空',
type: 'warning'
})
return false
}
flag = false
this.form.inspectorList.forEach(item => {
if (!this.validStr(item.INSPECTION_USER_ID)) {
flag = true
return
}
})
if (flag) {
this.$message({
message: '检查人员不能为空',
type: 'warning'
})
return false
}
this.$refs.form.validate(valid => {
if (valid) {
const loading = this.$loading({
lock: true,
text: '数据保存中...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
// console.info(this.form.hiddenList[index])
this.$set(this.form, 'INSPECTORJSON', JSON.stringify(this.form.inspectorList))
this.$set(this.form, 'SITUATIONJSON', JSON.stringify(this.form.situationList))
this.$set(this.form, 'HIDDENJSON', JSON.stringify(this.form.hiddenList))
this.$set(this.form, 'delInspectors', this.delInspectors.join(','))
this.$set(this.form, 'delSituations', this.delSituations.join(','))
this.$set(this.form, 'delHiddens', this.delHiddens.join(','))
this.$set(this.form, 'delHiddenFiles', this.delHiddenFiles.join(','))
this.listLoading = true
requestFN(
'/safetyenvironmental/' + this.dialogType,
{ ...this.form, INSPECTION_STATUS: '99' }
).then((data) => {
for (let i = 0; i < data.pd.hiddenList.length; i++) {
this.uploadImg(this.hdFile[i]['fileHdImgList'], data.pd.hiddenList[i].HIDDEN_ID)
this.uploadVideo(this.hdFile[i]['fileVideoList'], data.pd.hiddenList[i].HIDDEN_ID)
}
this.$message({
message: '保存成功',
type: 'success'
})
this.listLoading = false
loading.close()
this.goBack()
}).catch((e) => {
this.listLoading = false
loading.close()
})
} else {
return false
}
})
2023-11-06 18:11:01 +08:00
}
}
}
</script>
<style lang="scss" scoped>
.uo-flex {
display: flex;
}
</style>
<style lang="sass" scoped>
.el-row
margin-bottom: 16px
&:last-child
margin-bottom: 0
.form-group
display: flex
align-items: center
margin-right: 20px
.form-label
padding: 9px 15px
font-size: 14px
width: 240px
font-weight: 400
line-height: 20px
text-align: right
margin-bottom: 0
.star
color: red
padding-right: 4px
.input-block
flex: 1
min-height: 36px
position: relative
.disContent
padding: 0 20px
display: flex
align-items: center
flex-wrap: wrap
.img-div
position: relative
margin: auto 10px 10px 10px
width: 120px
height: 120px
border-radius: 4px
&>img
width: 100%
height: 100%
.disContent-hide
position: absolute
width: 100%
height: 100%
border-radius: 4px
background-color: rgba(48, 48, 48, 0.59)
display: none
top: 0
left: 0
.Delete
position: absolute
bottom: 14px
right: 10px
font-size: 16px
color: white
cursor: pointer
.editCss
.Delete
font-size: 16px
right: 90px
.yuLan
position: absolute
bottom: 23px
right: 50px
font-size: 16px
color: white
cursor: pointer
.yuLanImg
position: absolute
bottom: 0
right: 0
width: 100%
height: 100%
opacity: 0
.img-div:hover .disContent-hide
display: block
.pitchCss
border: 1px solid #202e78
transition: all linear 0.1s
width: 116px
height: 116px
</style>