添加暂存和图片

祖安之光

4 days ago 0e5a00bf8804b600415f53e71b80d12b250958be

 src/views/saftyCheckMng/dailyCheck/index.vue

@@ -1,106 +1,174 @@
<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
    <div style="display: flex; justify-content: space-between">
      <el-form
        :inline="true"
        style="display: flex; align-items: center; flex-wrap: wrap"
      >
        <el-form-item>
          <el-button
              type="primary"
              plain
              icon="Plus"
              @click="openDialog('add',{})"
          >新增</el-button>
            type="primary"
            plain
            icon="Plus"
            @click="openDialog('add', {})"
            >新增</el-button
          >
        </el-form-item>
        <el-form-item label="被检查部门/研究组：" >
<!--          <el-select v-model="queryParams.researchGroup" placeholder="请选择" clearable>-->
<!--            <el-option-->
<!--                v-for="item in deptList"-->
<!--                :key="item.deptId"-->
<!--                :label="item.deptName"-->
<!--                :value="item.deptId">-->
<!--            </el-option>-->
<!--          </el-select>-->
          <el-cascader v-model="queryParams.researchGroup" placeholder="请选择" :options="deptList" :show-all-levels="false" :props="{value: 'deptId',label: 'deptName',children: 'children',emitPath: false,checkStrictly: true}"/>
        <el-form-item label="被检查部门/研究组：">
          <!--          <el-select v-model="queryParams.researchGroup" placeholder="请选择" clearable>-->
          <!--            <el-option-->
          <!--                v-for="item in deptList"-->
          <!--                :key="item.deptId"-->
          <!--                :label="item.deptName"-->
          <!--                :value="item.deptId">-->
          <!--            </el-option>-->
          <!--          </el-select>-->
          <el-cascader
            v-model="queryParams.researchGroup"
            placeholder="请选择"
            :options="deptList"
            :show-all-levels="false"
            :props="{
              value: 'deptId',
              label: 'deptName',
              children: 'children',
              emitPath: false,
              checkStrictly: true,
            }"
          />
        </el-form-item>
        <el-form-item label="参加检查人员" >
          <el-input v-model.trim="queryParams.checkUser" placeholder="参加检查人员"></el-input>
        <el-form-item label="参加检查人员">
          <el-input
            v-model.trim="queryParams.checkUser"
            placeholder="参加检查人员"
          ></el-input>
        </el-form-item>
        <el-form-item label="检查类型" >
          <el-select v-model="queryParams.checkType" placeholder="请选择" clearable>
        <el-form-item label="检查类型">
          <el-select
            v-model="queryParams.checkType"
            placeholder="请选择"
            clearable
          >
            <el-option
                v-for="item in checkTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              v-for="item in checkTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="隐患" >
          <el-select v-model="queryParams.haveMainHazard" placeholder="请选择" clearable>
        <el-form-item label="隐患">
          <el-select
            v-model="queryParams.haveMainHazard"
            placeholder="请选择"
            clearable
          >
            <el-option :key="1" label="有" :value="1"></el-option>
            <el-option :key="0" label="无" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查日期" >
        <el-form-item label="检查日期">
          <el-date-picker
              v-model="checkDate"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            v-model="checkDate"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item >
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button type="primary" plain @click="reset">重置</el-button>
<!--          <el-button type="primary">导出</el-button>-->
          <!--          <el-button type="primary">导出</el-button>-->
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="checkDate" align="center" label="检查时间"/>
      <el-table-column prop="checkPlace" align="center" label="检查地点"/>
      <el-table-column prop="checkRoom" align="center" label="检查房间号"/>
      <el-table-column prop="checkUser" align="center" label="参加检查人员"/>
      <el-table-column prop="researchGroupName" align="center" label="被检查部门/研究组">
      <el-table-column prop="checkDate" align="center" label="检查时间" />
      <el-table-column prop="checkPlace" align="center" label="检查地点" />
      <el-table-column prop="checkRoom" align="center" label="检查房间号" />
      <el-table-column prop="checkUser" align="center" label="参加检查人员" />
      <el-table-column
        prop="researchGroupName"
        align="center"
        label="被检查部门/研究组"
      >
        <template #default="scope">
          {{ scope.row.dailySafetyInspectionDepts.filter(item=>item.deptName && item.deptName !== '').map(i=>i.deptName).join('、') }}
          {{
            scope.row.dailySafetyInspectionDepts
              .filter((item) => item.deptName && item.deptName !== "")
              .map((i) => i.deptName)
              .join("、")
          }}
        </template>
      </el-table-column>
      <el-table-column prop="checkContent" align="center" label="检查内容"/>
      <el-table-column prop="checkContent" align="center" label="检查内容" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="openDialog('view',scope.row)">查看</el-button>
          <el-button link type="primary" @click="openDialog('edit',scope.row)">编辑</el-button>
          <el-button link type="primary" @click="downloadFile(scope.row)">导出</el-button>
          <el-button v-if="isAuthority" link type="danger" @click="handleDelete(scope.row)">删除</el-button>
          <el-button link type="primary" @click="openDialog('view', scope.row)"
            >查看</el-button
          >
          <el-button link type="primary" @click="openDialog('edit', scope.row)"
            >编辑</el-button
          >
          <el-button link type="primary" @click="downloadFile(scope.row)"
            >导出</el-button
          >
          <el-button
            v-if="isAuthority"
            link
            type="danger"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <form-dialog ref="dialogRef" :config="formConfig" :data-loader="dataLoader" :api="api" @submit="handleSubmit"></form-dialog>
    <form-dialog
      ref="dialogRef"
      :config="formConfig"
      :data-loader="dataLoader"
      :api="api"
      @submit="handleSubmit"
      @onSave="handleSave"
    ></form-dialog>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {
  getCurrentInstance,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  toRefs,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import Cookies from "js-cookie";
import FormDialog from "@/views/components/formDialog"
import FormDialog from "@/views/components/formDialog";
import useUserStore from "@/store/modules/user";
import {generateWordDocument} from "@/utils/exportWord";
import {listDept} from "@/api/system/dept";
import {listUser} from "@/api/system/user";
import {delDailySafetyInspect, getDailySafetyInspectList, saveDailySafetyInspect} from "@/api/saftyCheck";
import { generateWordDocument } from "@/utils/exportWord";
import { listDept } from "@/api/system/dept";
import { listUser } from "@/api/system/user";
import {
  delDailySafetyInspect,
  getDailySafetyInspectList,
  saveDailySafetyInspect,
  saveTemDailySafetyInspect,
} from "@/api/saftyCheck";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
@@ -109,11 +177,12 @@
    pageNum: 1,
    pageSize: 10,
    researchGroup: null,
    checkUser: '',
    checkUser: "",
    checkType: null,
    haveMainHazard: null,
    checkBeginDate: '',
    checkEndDate: ''
    checkBeginDate: "",
    checkEndDate: "",
    scratchpad: 2
  },
  originDeptList: [],
  dataList: [],
@@ -122,262 +191,344 @@
  checkTypeList: [
    {
      value: 1,
      label: '综合检查'
      label: "综合检查",
    },
    {
      value: 2,
      label: '部门检查'
      label: "部门检查",
    },
    {
      value: 3,
      label: '实验室自查'
      label: "实验室自查",
    },
    {
      value: 4,
      label: '专项检查'
    }
      label: "专项检查",
    },
  ],
  total: 0,
  formConfig: {
    formItems: [
      {
        label: '检查时间',
        prop: 'checkDate',
        type: 'date',
        dateType: 'date',
        valueFormat: 'YYYY-MM-DD',
        rules: [{ required: true, message: '请选择日期', trigger: 'blur' }]
        label: "检查时间",
        prop: "checkDate",
        type: "date",
        dateType: "date",
        valueFormat: "YYYY-MM-DD",
        rules: [{ required: true, message: "请选择日期", trigger: "blur" }],
      },
      {
        label: '参加检查人员',
        prop: 'checkUser',
        type: 'text',
        rules: [{ required: true, message: '请输入人员', trigger: 'blur' }],
        label: "参加检查人员",
        prop: "checkUser",
        type: "text",
        rules: [{ required: true, message: "请输入人员", trigger: "blur" }],
      },
      {
        label: '检查地点',
        prop: 'checkPlace',
        type: 'text',
        rules: [{ required: true, message: '请输入地点', trigger: 'blur' }]
        label: "检查地点",
        prop: "checkPlace",
        type: "text",
        rules: [{ required: true, message: "请输入地点", trigger: "blur" }],
      },
      {
        label: '检查房间号',
        prop: 'checkRoom',
        type: 'text',
        rules: [{ required: true, message: '请输入房间号', trigger: 'blur' }]
        label: "检查房间号",
        prop: "checkRoom",
        type: "text",
        rules: [{ required: true, message: "请输入房间号", trigger: "blur" }],
      },
      {
        label: '被检查部门/研究组',
        prop: 'dailySafetyInspectionDepts',
        type: 'cascader',
        label: "被检查部门/研究组",
        prop: "dailySafetyInspectionDepts",
        type: "cascader",
        showAllLevels: false,
        props: {
          value: 'deptId',
          label: 'deptName',
          children: 'children',
          value: "deptId",
          label: "deptName",
          children: "children",
          emitPath: false,
          checkStrictly: true,
          multiple: true
          multiple: true,
        },
        rules: [{ required: true, message: '请选择部门', trigger: 'blur' }],
        options: () => state.deptList
        rules: [{ required: true, message: "请选择部门", trigger: "blur" }],
        options: () => state.deptList,
      },
      {
        label: '检查类型',
        prop: 'checkType',
        type: 'select',
        label: "检查类型",
        prop: "checkType",
        type: "select",
        filterable: true,
        rules: [{ required: true, message: '请选择检查类型', trigger: 'change' }],
        options: () => state.checkTypeList
        rules: [
          { required: true, message: "请选择检查类型", trigger: "change" },
        ],
        options: () => state.checkTypeList,
      },
      {
        label: '检查内容',
        prop: 'checkContent',
        type: 'textarea',
        label: "检查内容",
        prop: "checkContent",
        type: "textarea",
        autosize: { minRows: 3 },
        rules: [{ required: true, message: '请输入检查内容', trigger: 'blur' }]
        rules: [{ required: true, message: "请输入检查内容", trigger: "blur" }],
      },
      {
        label: '存在的主要隐患/问题',
        prop: 'mainHazard',
        type: 'textarea',
        placeholder: '没有则填“无”',
        label: "存在的主要隐患/问题",
        prop: "mainHazard",
        type: "textarea",
        placeholder: "没有则填“无”",
        autosize: { minRows: 3 },
        rules: [{ required: true, message: '请输入存在的主要隐患/问题', trigger: 'blur' }]
        rules: [
          {
            required: true,
            message: "请输入存在的主要隐患/问题",
            trigger: "blur",
          },
        ],
      },
      {
        label: '整改措施',
        prop: 'rectificationMeasures',
        type: 'textarea',
        placeholder: '没有则填“无”',
        label: "整改措施",
        prop: "rectificationMeasures",
        type: "textarea",
        placeholder: "没有则填“无”",
        autosize: { minRows: 3 },
        rules: [{ required: true, message: '请输入整改措施', trigger: 'blur' }]
        rules: [{ required: true, message: "请输入整改措施", trigger: "blur" }],
      },
      {
        label: '复查结果',
        prop: 'examinationResults',
        type: 'textarea',
        label: "复查结果",
        prop: "examinationResults",
        type: "textarea",
        autosize: { minRows: 3 },
        rules: [{ required: true, message: '请输入复查结果', trigger: 'blur' }]
        rules: [{ required: true, message: "请输入复查结果", trigger: "blur" }],
      },
      {
        label: '复查人员',
        prop: 'reCheckUser',
        type: 'text',
        rules: [{ required: true, message: '请输入复查人员', trigger: 'blur' }]
        label: "复查人员",
        prop: "reCheckUser",
        type: "text",
        rules: [{ required: true, message: "请输入复查人员", trigger: "blur" }],
      },
      {
        label: '复查时间',
        prop: 'reCheckDate',
        type: 'date',
        dateType: 'date',
        valueFormat: 'YYYY-MM-DD',
        rules: [{ required: true, message: '请选择复查时间', trigger: 'blur' }]
        label: "复查时间",
        prop: "reCheckDate",
        type: "date",
        dateType: "date",
        valueFormat: "YYYY-MM-DD",
        rules: [{ required: true, message: "请选择复查时间", trigger: "blur" }],
      },
      {
        label: '备注',
        prop: 'remark',
        type: 'textarea',
        autosize: { minRows: 3 }
      }
    ]
        label: '检查图片',
        prop: 'checkPics',
        type: 'upload',
        uploadType: 'img',
        limit: 3,
        maxSize: 5,
        accept: 'image/*',
        tip: '支持上传图片格式，尺寸小于5M，最多可上传3份'
      },
      {
        label: "备注",
        prop: "remark",
        type: "textarea",
        autosize: { minRows: 3 },
      },
    ],
  },
  dataLoader: {},
  api: {},
  checkDate: [],
  isAuthority: false
  isAuthority: false,
});

const { queryParams, total, dataList,deptList, userList, formConfig, dataLoader, api, checkTypeList, checkDate, isAuthority } = toRefs(state);
const userStore = useUserStore()
onMounted(async ()=>{
  await getList()
  await getDeptList()
  await getUserList()
  if(userStore.roles.includes('admin') || userStore.roles.includes('sys_admin') || userStore.roles.includes('place_safety_officer')){
    state.isAuthority = true
  }else{
    state.isAuthority = false
const {
  queryParams,
  total,
  dataList,
  deptList,
  userList,
  formConfig,
  dataLoader,
  api,
  checkTypeList,
  checkDate,
  isAuthority,
} = toRefs(state);
const userStore = useUserStore();
onMounted(async () => {
  await getList();
  await getDeptList();
  await getUserList();
  if (
    userStore.roles.includes("admin") ||
    userStore.roles.includes("sys_admin") ||
    userStore.roles.includes("place_safety_officer")
  ) {
    state.isAuthority = true;
  } else {
    state.isAuthority = false;
  }
})
});

onUnmounted(()=>{

})
onUnmounted(() => {});

function getDeptList() {
  listDept().then(response => {
    state.originDeptList = response.data
    state.deptList = proxy.handleTree(response.data, "deptId")
  })
  listDept().then((response) => {
    state.originDeptList = response.data;
    state.deptList = proxy.handleTree(response.data, "deptId");
  });
}

function getUserList() {
  listUser({pageNum: 1,pageSize: 999}).then(res => {
  listUser({ pageNum: 1, pageSize: 999 }).then((res) => {
    state.userList = res.rows;
  })
};
  });
}

const getList = async () => {
  loading.value = true
  state.queryParams.checkBeginDate = state.checkDate[0] || ''
  state.queryParams.checkEndDate = state.checkDate[1] || ''
  const res = await getDailySafetyInspectList(state.queryParams)
  if(res.code == 200){
    state.dataList = res.rows || []
    state.total = res.total
  }else{
    ElMessage.warning(res.msg)
  loading.value = true;
  state.queryParams.checkBeginDate = state.checkDate[0] || "";
  state.queryParams.checkEndDate = state.checkDate[1] || "";
  const res = await getDailySafetyInspectList(state.queryParams);
  if (res.code == 200) {
    state.dataList = res.rows || [];
    state.total = res.total;
  } else {
    ElMessage.warning(res.msg);
  }
  loading.value = false
}
  loading.value = false;
};

const downloadFile = async (val)=>{
    let tableData = val
    try {
      generateWordDocument('/dailyCheckSheet.docx', tableData, '日常安全检查记录表.docx');
    } catch (error){
      ElMessage({
        type: 'warning',
        message: '导出失败'
      });
const downloadFile = async (val) => {
  let tableData = val;
  try {
    generateWordDocument(
      "/dailyCheckSheet.docx",
      tableData,
      "日常安全检查记录表.docx",
    );
  } catch (error) {
    ElMessage({
      type: "warning",
      message: "导出失败",
    });
  }
};

const openDialog = async(type, value) => {
  let initalData = {}
  if(type == 'add'){
    const res = await getDailySafetyInspectList({
    pageNum: 1,
    pageSize: 10,
    researchGroup: null,
    checkUser: "",
    checkType: null,
    haveMainHazard: null,
    checkBeginDate: "",
    checkEndDate: "",
    scratchpad: 1
  })
    if (res.code == 200) {
      initalData =  JSON.parse(JSON.stringify(res.rows[0])) || {}
    } else {
      ElMessage.warning(res.msg);
    }
}

const openDialog = (type, value) => {
  const initalData = JSON.parse(JSON.stringify(value))
  dialogRef.value.openDialog(type, initalData)
}
  }else{
    initalData = JSON.parse(JSON.stringify(value));
  }
  if (
    initalData.dailySafetyInspectionDepts &&
    Array.isArray(initalData.dailySafetyInspectionDepts)
  ) {
    initalData.dailySafetyInspectionDepts =
      initalData.dailySafetyInspectionDepts.map((item) => item.deptId);
  }
  dialogRef.value.openDialog(type, initalData, true);
};

/** 重置新增的表单以及其他数据  */
const reset= async()=> {
const reset = async () => {
  state.queryParams = {
    pageNum: 1,
    pageSize: 10,
    researchGroup: null,
    checkUser: '',
    checkUser: "",
    checkType: null,
    haveMainHazard: null,
    checkBeginDate: '',
    checkEndDate: ''
  }
  state.checkDate = []
  await getList()
}
    checkBeginDate: "",
    checkEndDate: "",
  };
  state.checkDate = [];
  await getList();
};
const handleDelete = (val) => {
  ElMessageBox.confirm(
      '确定删除此条数据？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await delDailySafetyInspect({id: val.id})
        if(res.code == 200){
          ElMessage.success('数据删除成功')
          await getList()
        }else{
          ElMessage.warning(res.msg)
        }
      })
}
  ElMessageBox.confirm("确定删除此条数据？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await delDailySafetyInspect({ id: val.id });
    if (res.code == 200) {
      ElMessage.success("数据删除成功");
      await getList();
    } else {
      ElMessage.warning(res.msg);
    }
  });
};

const handleSubmit = async (data, type) => {
  const params = JSON.parse(JSON.stringify(data))
  params.dailySafetyInspectionDepts = params.dailySafetyInspectionDepts.map(i=>{
    return {
      deptId: i,
      deptName: state.originDeptList.find(item=>item.deptId == i)?.deptName
    }
  })
  const params = JSON.parse(JSON.stringify(data));
  params.dailySafetyInspectionDepts = params.dailySafetyInspectionDepts.map(
    (i) => {
      return {
        deptId: i,
        deptName: state.originDeptList.find((item) => item.deptId == i)
          ?.deptName,
      };
    },
  );
  // params.reCheckUser = state.userList.find(i=>i.userId == params.reCheckUserId)?.nickName
  // 调用API保存数据
  if (type === '新增') {
    delete params.id
    const res = await saveDailySafetyInspect(params)
    if(res.code == 200){
      ElMessage.success(res.msg)
      await handleClose()
      await getList()
    }else{
      ElMessage.warning(res.msg)
  if (type === "新增") {
    delete params.id;
    const res = await saveDailySafetyInspect(params);
    if (res.code == 200) {
      ElMessage.success(res.msg);
      await handleClose();
      await getList();
    } else {
      ElMessage.warning(res.msg);
    }
  } else {
    const res = await saveDailySafetyInspect(params)
    if(res.code == 200){
      ElMessage.success(res.msg)
      await handleClose()
      await getList()
    }else{
      ElMessage.warning(res.msg)
    const res = await saveDailySafetyInspect(params);
    if (res.code == 200) {
      ElMessage.success(res.msg);
      await handleClose();
      await getList();
    } else {
      ElMessage.warning(res.msg);
    }
  }
}
};

const handleSave = async (data) => {
  const params = JSON.parse(JSON.stringify(data));
  params.dailySafetyInspectionDepts = params.dailySafetyInspectionDepts.map(
    (i) => {
      return {
        deptId: i,
        deptName: state.originDeptList.find((item) => item.deptId == i)
          ?.deptName,
      };
    },
  );
  const res = await saveTemDailySafetyInspect(params);
  if (res.code == 200) {
    ElMessage.success(res.msg);
    await handleClose();
    await getList();
  } else {
    ElMessage.warning(res.msg);
  }
};

const handleClose = () => {
  dialogRef.value.closeDialog()
}

  dialogRef.value.closeDialog();
};
</script>