|
|
@@ -0,0 +1,380 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form
|
|
|
+ ref="refFormSubmit"
|
|
|
+ :model="formSubmit"
|
|
|
+ :rules="rulesSubmit"
|
|
|
+ label-width="135px"
|
|
|
+ >
|
|
|
+ <el-form-item label="检查表名称" prop="categoryName">
|
|
|
+ <el-input v-model="formSubmit.id" type="hidden" />
|
|
|
+ {{ checkFormName }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="关区代码" prop="customs">
|
|
|
+ <span class="form-line-left">
|
|
|
+ <el-select
|
|
|
+ v-model="formSubmit.customs"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="margin-right:10px;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in listCustomer"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ {{ formSubmit.customs ?? '-' }}
|
|
|
+ </span>
|
|
|
+ <span class="form-line-right">检查时间</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formSubmit.checkTime"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="检查人员" prop="checkPerson">
|
|
|
+ <span class="form-line-left">
|
|
|
+ <el-input v-model="formSubmit.checkPerson" placeholder="请输入" style="width:215px;" />
|
|
|
+ </span>
|
|
|
+ <span class="form-line-right">联系方式</span>
|
|
|
+ <el-input v-model="formSubmit.contactInfo" placeholder="请输入" style="width:220px;" />
|
|
|
+ </el-form-item>
|
|
|
+ <div class="check-container">
|
|
|
+ <el-row class="check-title">
|
|
|
+ <el-col :md="24" class="check-col">{{ checkFormName }}</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="check-title">
|
|
|
+ <el-col :md="2" class="check-col">序号</el-col>
|
|
|
+ <el-col :md="8" class="check-col">检查结果</el-col>
|
|
|
+ <el-col :md="6" class="check-col">检查项</el-col>
|
|
|
+ <el-col :md="8" class="check-col">检查内容</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :md="24" v-for="(item, key) in formSubmit.listItem" :key="key" class="check-item">
|
|
|
+ <el-col :md="2" class="check-col check-col-idx">{{(key+1)}}</el-col>
|
|
|
+ <el-col :md="8" class="check-col">
|
|
|
+ <el-radio-group v-model="item.checkResult">
|
|
|
+ <el-radio :label="0" size="small">无隐患</el-radio>
|
|
|
+ <el-radio :label="1" size="small">有隐患</el-radio>
|
|
|
+ <el-radio :label="2" size="small">不适用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="6" class="check-col">
|
|
|
+ <span v-if="item.checkResult === 0" class="opt opt-no" title="无隐患">无</span>
|
|
|
+ <span v-if="item.checkResult === 2" class="opt opt-no" title="不适用">不</span>
|
|
|
+ <span v-if="(item.checkResult === 1 && item.isRectify === 1)" @click="showRectify(item)" class="opt opt-submit" title="有隐患，已填整改措施">改</span>
|
|
|
+ <span v-if="(item.checkResult === 1 && item.isRectify === 0)" @click="submitRectify(item)" class="opt opt-wait" title="有隐患，需要填写整改措施">待</span>
|
|
|
+ <span>{{ item.itemName }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="8" class="check-col check-item-desc" :title="item.description">{{ item.description }}</el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="提交至网格管理员" prop="isSubmit">
|
|
|
+ <el-radio-group v-model="formSubmit.isSubmit">
|
|
|
+ <el-radio :label="0">暂存</el-radio>
|
|
|
+ <el-radio :label="1">提交</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="附件列表" prop="listAttachment">
|
|
|
+ <el-upload
|
|
|
+ ref="refUploadCreate"
|
|
|
+ :headers="{ Authorization: 'Bearer ' + getToken() }"
|
|
|
+ :action="uploadUrl"
|
|
|
+ v-model:file-list="uploadSubmitFiles"
|
|
|
+ multiple
|
|
|
+ :before-upload="handleBeforeUpload"
|
|
|
+ :on-success="onSubmitUploadSuccess"
|
|
|
+ :limit="6"
|
|
|
+ :on-exceed="onSubmitUploadExceed"
|
|
|
+ :on-remove="onSubmitUploadRemove"
|
|
|
+ >
|
|
|
+ <template #trigger>
|
|
|
+ <el-button type="primary">选择文件</el-button>
|
|
|
+ <span style="display:inline-flex;margin-left:10px;">支持格式：<span style="color:red;">jpg,png,gif,mp4</span></span>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="formSubmit.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 模态框 - 检查项存在隐患，提交整改措施 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="titleCheckItemRectify"
|
|
|
+ v-model="dialogCheckItemRectify"
|
|
|
+ width="600px"
|
|
|
+ append-to-body
|
|
|
+ draggable
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="refFormCheckItemRectify"
|
|
|
+ :model="formCheckItemRectify"
|
|
|
+ :rules="rulesCheckItemRectify"
|
|
|
+ :disabled="isDetail"
|
|
|
+ label-width="85px"
|
|
|
+ >
|
|
|
+ <el-form-item label="检查项" prop="itemName">
|
|
|
+ {{ formCheckItemRectify.itemName }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="隐患描述" prop="dangerDescription">
|
|
|
+ <el-input v-model="formCheckItemRectify.dangerDescription" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="整改措施" prop="rectifyPlan">
|
|
|
+ <el-input v-model="formCheckItemRectify.rectifyPlan" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="请输入" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="整改期限" prop="rectifyDeadline">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formCheckItemRectify.rectifyDeadline"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="请选择"
|
|
|
+ format="YYYY-MM-DD hh:mm:ss"
|
|
|
+ value-format="x"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="submitCheckItemRectify"
|
|
|
+ >提 交</el-button>
|
|
|
+ <el-button @click="dialogCheckItemRectify = false">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .form-line-left{width:300px;margin-right:10px;}
|
|
|
+ .form-line-right{display:flex;;font-weight:700;margin-right:10px;}
|
|
|
+ .check-container{border-left:1px solid #dcdfe6;border-top:1px solid #dcdfe6;margin:20px 0;}
|
|
|
+ .check-title{text-align:center;font-size:14px;font-weight:600;height:25px;line-height:25px;}
|
|
|
+ .check-item{height:28px;line-height:28px;font-size:12px;}
|
|
|
+ .check-col{border-right:1px solid #dcdfe6;border-bottom:1px solid #dcdfe6;padding-left:10px;}
|
|
|
+ .check-col-idx{padding:0;text-align:center;}
|
|
|
+ .check-item-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
|
+ .opt{color:#fff;padding:5px;margin-right:2px;border-radius:5px;}
|
|
|
+ .opt-no{background-color:gray;}
|
|
|
+ .opt-wait{background-color:red;cursor:pointer;}
|
|
|
+ .opt-submit{background-color:green;cursor:pointer;}
|
|
|
+</style>
|
|
|
+
|
|
|
+<script setup name="SubmitDangerCheck">
|
|
|
+import { getUserProfile } from '@/api/system/user.js';
|
|
|
+import { getToken } from '@/utils/auth';
|
|
|
+import { listMine } from '@/api/grid/GridIndex';
|
|
|
+import { detail } from "@/api/form/DangerCheckForm";
|
|
|
+import { submit } from "@/api/form/DangerCheckRecord";
|
|
|
+import { parseTime } from '@/utils/ruoyi'
|
|
|
+import { getDicts } from '@/api/system/dict/data'
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ // 网格id
|
|
|
+ gridId: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ // 隐患检查表id
|
|
|
+ checkFormId: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ // 隐患检查表名称
|
|
|
+ checkFormName: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ // 关闭回调函数
|
|
|
+ closeCallback: {
|
|
|
+ type: Object
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const uploadUrl = import.meta.env.VITE_APP_BASE_API + "/file/upload";
|
|
|
+const allowedFileTypes = ref([
|
|
|
+ 'image/jpeg', // JPEG 图像文件
|
|
|
+ 'image/jpg',
|
|
|
+ 'image/png', // PNG 图像文件
|
|
|
+ 'image/gif',
|
|
|
+ 'video/3gpp',
|
|
|
+ 'video/mp4',
|
|
|
+ 'video/avi',
|
|
|
+]);
|
|
|
+
|
|
|
+const loginUser = ref({});
|
|
|
+const listCustomer = ref([]);
|
|
|
+const listMineGrid = ref([]);
|
|
|
+const formDetail = ref({});
|
|
|
+
|
|
|
+const loadingSubmit = ref(false);
|
|
|
+const formSubmit = ref({
|
|
|
+ gridId: props.gridId,
|
|
|
+ checkFormId: props.checkFormId,
|
|
|
+ customs: undefined,
|
|
|
+ checkTime: parseTime(new Date(), '{y}-{m}-{d}'),
|
|
|
+ checkPerson: '',
|
|
|
+ contactInfo: '',
|
|
|
+ listAttachment: [],
|
|
|
+ listItem: [],
|
|
|
+ isSubmit: 0,
|
|
|
+ remark: ''
|
|
|
+});
|
|
|
+const refUploadCreate = ref({});
|
|
|
+const uploadSubmitFiles = ref([]);
|
|
|
+const rulesSubmit = ref({
|
|
|
+ gridId: [{ required: true, message: "所属网格不能为空", trigger: "blur" }],
|
|
|
+ checkFormId: [{ required: true, message: "所属检查表不能为空", trigger: "blur" }],
|
|
|
+ customs: [{ required: true, message: "关区代码不能为空", trigger: "blur" }],
|
|
|
+ checkTime: [{ required: true, message: "检查时间不能为空", trigger: "blur" }],
|
|
|
+ checkPerson: [{ required: true, message: "检查人员不能为空", trigger: "blur" }],
|
|
|
+ contactInfo: [{ required: true, message: "联系方式不能为空", trigger: "blur" }],
|
|
|
+ listItem: [{ required: true, message: "检查项列表不能为空", trigger: "blur" }],
|
|
|
+ isSubmit: [{ required: true, message: "是否直接提交不能为空", trigger: "blur" }],
|
|
|
+ remark: [{ max: 200, message: '备注字符长度不能超过200', trigger: 'blur' }]
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+const formCheckItemRectify = ref({});
|
|
|
+const rulesCheckItemRectify = ref({
|
|
|
+ dangerDescription: [{ required: true, message: "隐患描述不能为空", trigger: "blur" }],
|
|
|
+ rectifyPlan: [{ required: true, message: "整改措施不能为空", trigger: "blur" }],
|
|
|
+ rectifyDeadline: [{ required: true, message: "整改期限不能为空", trigger: "blur" }]
|
|
|
+});
|
|
|
+const dialogCheckItemRectify = ref(false);
|
|
|
+const titleCheckItemRectify = ref('');
|
|
|
+const isDetail = ref(false);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const handleBeforeUpload = (file) => {
|
|
|
+ // 获取文件的类型
|
|
|
+ const fileType = file.type;
|
|
|
+ if (allowedFileTypes.value.indexOf(fileType) != -1) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ proxy.$modal.msgError("上传文件格式不支持");
|
|
|
+ return false; // 阻止文件上传
|
|
|
+ }
|
|
|
+}
|
|
|
+/** 新增文件上传成功 */
|
|
|
+function onSubmitUploadSuccess(response, file, fileList) {
|
|
|
+ let data = response.data;
|
|
|
+ formSubmit.value.listAttachment.push({
|
|
|
+ fileName: data.name,
|
|
|
+ filePath: data.newFileName,
|
|
|
+ filePdfPath: data.newPdfFileName,
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 新增文件重复上传 */
|
|
|
+function onSubmitUploadExceed(files) {
|
|
|
+ uploadCreate.value.clearFiles();
|
|
|
+ const file = files[0];
|
|
|
+ file.uid = genFileId();
|
|
|
+ uploadCreate.value.handleStart(file);
|
|
|
+ uploadCreate.value.submit();
|
|
|
+}
|
|
|
+/** 移除文件 */
|
|
|
+function onSubmitUploadRemove(item) {
|
|
|
+ console.log('移除文件: ' + JSON.stringify(item));
|
|
|
+}
|
|
|
+/** 检查项存在隐患是，填写整改措施 */
|
|
|
+function submitRectify(item) {
|
|
|
+ formCheckItemRectify.value = item;
|
|
|
+ titleCheckItemRectify.value = item.itemName + ' - 整改措施方案';
|
|
|
+ dialogCheckItemRectify.value = true;
|
|
|
+ isDetail.value = false;
|
|
|
+}
|
|
|
+function submitCheckItemRectify() {
|
|
|
+ proxy.$refs["refFormCheckItemRectify"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let item = formSubmit.value.listItem.find(c => c.id === formCheckItemRectify.value.id);
|
|
|
+ if (item && item != null && item.id > 0) {
|
|
|
+ item.isRectify = 1;
|
|
|
+ dialogCheckItemRectify.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 检查项查看整改措施 */
|
|
|
+function showRectify(item) {
|
|
|
+ formCheckItemRectify.value = item;
|
|
|
+ titleCheckItemRectify.value = item.itemName + ' - 整改措施方案';
|
|
|
+ dialogCheckItemRectify.value = true;
|
|
|
+ //isDetail.value = true;
|
|
|
+}
|
|
|
+/** 提交检查表 */
|
|
|
+function submitCheck() {
|
|
|
+ let that = this;
|
|
|
+
|
|
|
+ console.log(formSubmit.value);
|
|
|
+ proxy.$refs["refFormSubmit"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ loadingSubmit.value = true;
|
|
|
+
|
|
|
+ submit(formSubmit.value)
|
|
|
+ .then((response) => {
|
|
|
+ proxy.$modal.msgSuccess("提交成功");
|
|
|
+ that.props.closeCallback();
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loadingSubmit.value = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/** 登录信息 */
|
|
|
+function getLoginUser() {
|
|
|
+ getUserProfile()
|
|
|
+ .then((response) => {
|
|
|
+ loginUser.value = response.data.user;
|
|
|
+
|
|
|
+ formSubmit.value.checkPerson = loginUser.value.nickName;
|
|
|
+ formSubmit.value.contactInfo = loginUser.value.phonenumber;
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 关区代码 */
|
|
|
+function initListDictData() {
|
|
|
+ getDicts('sys_customs_code')
|
|
|
+ .then((response) => {
|
|
|
+ listCustomer.value = response.data;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ // loadingSubmit.value = false;
|
|
|
+ });
|
|
|
+}
|
|
|
+/** 检查表详情 */
|
|
|
+function getFormDetail() {
|
|
|
+ detail(props.checkFormId)
|
|
|
+ .then((response) => {
|
|
|
+ formDetail.value = response.data;
|
|
|
+ for (let index = 0; index < response.data.listItem.length; index++) {
|
|
|
+ let item = response.data.listItem[index];
|
|
|
+ let value = {...item};
|
|
|
+ value.checkFormId = props.checkFormId;
|
|
|
+ //value.itemName = '';
|
|
|
+ //value.description = '';
|
|
|
+ value.checkResult = undefined;
|
|
|
+ value.isRectify = 0;
|
|
|
+ value.rectifyPlan = '';
|
|
|
+ value.rectifyDeadline = 0;
|
|
|
+ formSubmit.value.listItem.push(value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/** 页面加载完毕 */
|
|
|
+onMounted(async () => {
|
|
|
+ // 登录信息
|
|
|
+ getLoginUser();
|
|
|
+ initListDictData();
|
|
|
+ getFormDetail();
|
|
|
+});
|
|
|
+</script>
|
