forked from integrated_whb/integrated_whb_vue
352 lines
11 KiB
Vue
352 lines
11 KiB
Vue
<template>
|
||
<el-row :gutter="24">
|
||
<el-col
|
||
:span="
|
||
hiddenType === 'unqualified' || hiddenType === 'otherHidden' ? 12 : 24
|
||
"
|
||
>
|
||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||
<el-row>
|
||
<el-col v-if="hiddenType === 'unqualified'" :span="24">
|
||
<el-form-item label="检查内容" prop="CHECK_CONTENT">
|
||
<el-input
|
||
:model-value="info.CHECK_CONTENT"
|
||
disabled
|
||
type="textarea"
|
||
autosize
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="隐患部位" prop="HIDDENPART">
|
||
<el-input
|
||
v-model="form.HIDDENPART"
|
||
placeholder="请输入内容"
|
||
@blur="fnGetHiddenDangerDatabaseList"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="隐患描述" prop="HIDDENDESCR">
|
||
<el-input
|
||
v-model="form.HIDDENDESCR"
|
||
placeholder="请输入内容"
|
||
type="textarea"
|
||
:autosize="{ minRows: 3 }"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="隐患级别" prop="HIDDENLEVEL">
|
||
<el-select
|
||
v-model="form.HIDDENLEVEL"
|
||
@change="
|
||
form.HIDDENLEVEL === 'hiddenLevel0002'
|
||
? (form.RECTIFICATIONTYPE = '2')
|
||
: null
|
||
"
|
||
>
|
||
<el-option
|
||
v-for="item in hazardLevelList"
|
||
:key="item.BIANMA"
|
||
:label="item.NAME"
|
||
:value="item.BIANMA"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col v-if="info.BAO_BAO_TYPE === '1'" :span="24">
|
||
<el-form-item label="隐患类别" prop="HIDDEN_CATEGORY">
|
||
<el-select v-model="form.HIDDEN_CATEGORY">
|
||
<el-option
|
||
v-for="item in hazardCategoriesList"
|
||
:key="item.DICTIONARIES_ID"
|
||
:label="item.NAME"
|
||
:value="item.DICTIONARIES_ID"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="隐患类型" prop="HIDDENTYPE">
|
||
<layout-hidden-danger-type
|
||
ref="hiddenDangerTypeRef"
|
||
v-model="form.HIDDENTYPE"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="隐患图片" prop="hiddenImgs">
|
||
<layout-upload
|
||
v-model:file-list="form.hiddenImgs"
|
||
list-type="picture-card"
|
||
accept=".jpg,.jpeg,.png"
|
||
:limit="99"
|
||
delete-to-server
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="隐患视频" prop="videoFiles">
|
||
<layout-upload
|
||
v-model:file-list="form.videoFiles"
|
||
accept=".mp4"
|
||
:size="50"
|
||
@preview="fnVideoPreview"
|
||
>
|
||
<template #tip>只能上传mp4文件，且不超过50M</template>
|
||
</layout-upload>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="隐患处置" prop="RECTIFICATIONTYPE">
|
||
<el-radio-group v-model="form.RECTIFICATIONTYPE">
|
||
<el-radio
|
||
:disabled="form.HIDDENLEVEL === 'hiddenLevel0002'"
|
||
label="1"
|
||
>
|
||
立即整改
|
||
</el-radio>
|
||
<el-radio label="2">限期整改</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<template v-if="form.RECTIFICATIONTYPE === '1'">
|
||
<el-col :span="24">
|
||
<el-form-item prop="RECTIFYDESCR" label="整改描述">
|
||
<el-input
|
||
v-model="form.RECTIFYDESCR"
|
||
placeholder="请输入内容"
|
||
type="textarea"
|
||
:autosize="{ minRows: 3 }"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="整改后图片" prop="rectifyImgs">
|
||
<layout-upload
|
||
v-model:file-list="form.rectifyImgs"
|
||
list-type="picture-card"
|
||
accept=".jpg,.jpeg,.png"
|
||
:limit="99"
|
||
delete-to-server
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</template>
|
||
<template v-if="form.RECTIFICATIONTYPE === '2'">
|
||
<el-col :span="24">
|
||
<el-form-item prop="RECTIFICATIONDEADLINE" label="整改期限">
|
||
<el-date-picker
|
||
v-model="form.RECTIFICATIONDEADLINE"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
type="date"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="整改部门" prop="RECTIFICATIONDEPT">
|
||
<layout-department
|
||
v-model="form.RECTIFICATIONDEPT"
|
||
@update:model-value="form.RECTIFICATIONOR = ''"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="整改人" prop="RECTIFICATIONOR">
|
||
<el-select v-model="form.RECTIFICATIONOR">
|
||
<el-option
|
||
v-for="item in data.rectifyUserList"
|
||
:key="item.USER_ID"
|
||
:label="item.NAME"
|
||
:value="item.USER_ID"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</template>
|
||
</el-row>
|
||
</el-form>
|
||
</el-col>
|
||
<el-col
|
||
v-if="hiddenType === 'unqualified' || hiddenType === 'otherHidden'"
|
||
:span="12"
|
||
>
|
||
<div
|
||
v-for="item in data.list"
|
||
:key="item.HIDDEN_LIBRARY_ID"
|
||
class="item"
|
||
@click="fnChoice(item)"
|
||
>
|
||
<el-descriptions :column="1" border>
|
||
<el-descriptions-item label="风险单元名称">
|
||
{{ item.RISK_UNIT_NAME }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="隐患部位">
|
||
{{ item.HIDDEN_PART }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="隐患描述">
|
||
{{ item.INSPECTION_BASIS }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<layout-video
|
||
v-model:visible="data.videoDialog.visible"
|
||
:src="data.videoDialog.src"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import LayoutDepartment from "@/components/department/index.vue";
|
||
import LayoutHiddenDangerType from "@/components/hazard_type/index.vue";
|
||
import LayoutUpload from "@/components/upload/index.vue";
|
||
import LayoutVideo from "@/components/video/index.vue";
|
||
import { reactive, ref, watchEffect } from "vue";
|
||
import { useVModel } from "@vueuse/core";
|
||
import { getHiddenDangerDatabaseList } from "@/request/hazard_investigation.js";
|
||
import {
|
||
layoutFnGetHazardCategories,
|
||
layoutFnGetHazardLevel,
|
||
} from "@/assets/js/data_dictionary.js";
|
||
import { getUserListAll } from "@/request/data_dictionary.js";
|
||
import useFormValidate from "@/assets/js/useFormValidate.js";
|
||
|
||
defineOptions({
|
||
name: "LayoutHiddenAdd",
|
||
});
|
||
const props = defineProps({
|
||
form: {
|
||
type: Object,
|
||
required: true,
|
||
default: () => ({}),
|
||
},
|
||
info: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
// unqualified 清单检查不合格隐患
|
||
// otherHidden 清单检查其他隐患
|
||
// ledger 隐患台账
|
||
hiddenType: {
|
||
type: String,
|
||
required: true,
|
||
default: "",
|
||
},
|
||
});
|
||
const emits = defineEmits(["update:form"]);
|
||
const form = useVModel(props, "form", emits);
|
||
const rules = {
|
||
HIDDENPART: [{ required: true, message: "请输入隐患部位", trigger: "blur" }],
|
||
HIDDENDESCR: [{ required: true, message: "请输入隐患描述", trigger: "blur" }],
|
||
HIDDENLEVEL: [
|
||
{ required: true, message: "请选择隐患级别", trigger: "change" },
|
||
],
|
||
HIDDEN_CATEGORY: [
|
||
{ required: true, message: "请选择隐患类别", trigger: "change" },
|
||
],
|
||
HIDDENTYPE: [
|
||
{ required: true, message: "请选择隐患类型", trigger: "change" },
|
||
],
|
||
hiddenImgs: [
|
||
{ required: true, message: "请上传隐患图片", trigger: "change" },
|
||
],
|
||
RECTIFICATIONTYPE: [
|
||
{ required: true, message: "请选择隐患处置", trigger: "change" },
|
||
],
|
||
RECTIFYDESCR: [
|
||
{ required: true, message: "请输入整改描述", trigger: "blur" },
|
||
],
|
||
rectifyImgs: [
|
||
{ required: true, message: "请上传整改后图片", trigger: "change" },
|
||
],
|
||
RECTIFICATIONDEADLINE: [
|
||
{ required: true, message: "请选择整改期限", trigger: "change" },
|
||
],
|
||
RECTIFICATIONDEPT: [
|
||
{ required: true, message: "请选择整改部门", trigger: "change" },
|
||
],
|
||
RECTIFICATIONOR: [
|
||
{ required: true, message: "请选择整改人", trigger: "change" },
|
||
],
|
||
};
|
||
const formRef = ref(null);
|
||
const hiddenDangerTypeRef = ref(null);
|
||
const data = reactive({
|
||
list: [],
|
||
rectifyUserList: [],
|
||
videoDialog: {
|
||
visible: false,
|
||
src: "",
|
||
},
|
||
});
|
||
const fnVideoPreview = (event) => {
|
||
if (event.url) {
|
||
data.videoDialog.visible = true;
|
||
data.videoDialog.src = event.url;
|
||
}
|
||
};
|
||
const fnGetHiddenDangerDatabaseList = async () => {
|
||
if (props.hiddenType !== "unqualified" && props.hiddenType !== "otherHidden")
|
||
return;
|
||
if (!form.value.HIDDENPART) return;
|
||
const resData = await getHiddenDangerDatabaseList({
|
||
RISK_UNIT_NAME: props.info.RISKUNITNAME,
|
||
HIDDEN_PART: form.value.HIDDENPART,
|
||
});
|
||
data.list = resData.varList;
|
||
};
|
||
const fnChoice = (item) => {
|
||
form.value.HIDDENPART = item.HIDDEN_PART;
|
||
form.value.HIDDENDESCR = item.INSPECTION_BASIS;
|
||
form.value.HIDDENLEVEL = "hiddenLevel0001";
|
||
form.value.HIDDENTYPE = [
|
||
item.HIDDEN_TYPE_ONE,
|
||
item.HIDDEN_TYPE_TWO,
|
||
item.HIDDEN_TYPE_THREE,
|
||
];
|
||
};
|
||
const fnRectificationDepartmentChange = async (event) => {
|
||
const resData = await getUserListAll({
|
||
DEPARTMENT_ID: event,
|
||
});
|
||
data.rectifyUserList = resData.userList;
|
||
};
|
||
const fnReset = () => {
|
||
formRef.value.resetFields();
|
||
data.list = [];
|
||
data.rectifyUserList = [];
|
||
};
|
||
const fnFormValidate = async () => {
|
||
await useFormValidate(formRef);
|
||
};
|
||
const fnHiddenDangerTypeLabel = () => {
|
||
return hiddenDangerTypeRef.value.getCheckedNodes();
|
||
};
|
||
defineExpose({
|
||
reset: fnReset,
|
||
formValidate: fnFormValidate,
|
||
hiddenDangerTypeLabel: fnHiddenDangerTypeLabel,
|
||
});
|
||
const hazardLevelList = await layoutFnGetHazardLevel();
|
||
const hazardCategoriesList = await layoutFnGetHazardCategories();
|
||
watchEffect(() => {
|
||
if (form.value.RECTIFICATIONDEPT)
|
||
fnRectificationDepartmentChange(form.value.RECTIFICATIONDEPT);
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.item {
|
||
cursor: pointer;
|
||
border-bottom: 1px dashed #ccc;
|
||
padding: 10px 0;
|
||
|
||
&:first-child {
|
||
padding-top: 0;
|
||
}
|
||
}
|
||
</style>
|