sl-sfy-safety/src/views/production-safety/risk-identification-and-control/hazard-approval-manage/list.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title"> 危险作业审批管理 </div>
    </header>
    <main class="safety-platform-container__main">
        <div style="margin-bottom:20px">
            <el-button type="primary" @click="$router.push({ name: 'hazardApprovalManageAdd' })">添加 </el-button>
        </div>
      <div class="search-form">
        <el-form :inline="true">
          <el-form-item label="申请单位名称">
            <el-input
              v-model="queryParams.queryParam.applicationUnitName"
              placeholder="申请单位名称"
              style="width: 170px"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.queryParam.status" clearable placeholder="状态" style="width: 170px">
              <el-option value="" label="全部" />
              <el-option :value="1" label="待提交" />
              <el-option :value="2" label="待审批" />
              <el-option :value="3" label="已完成" />
            </el-select>
          </el-form-item>
          <el-form-item label="申请人名称">
            <el-input v-model="queryParams.queryParam.applicantName" placeholder="搜索申请人" style="width: 170px" />
          </el-form-item>
          <el-form-item label="申请部门">
            <el-cascader
              v-model="queryParams.queryParam.applicationDepartmentId"
              style="width: 170px"
              ref="cascaderRef"
              :options="firstLevelDepts"
              :props="cascaderProp"
              :show-all-levels="false"
              placeholder="部门名称"
              filterable
              @change="handleChangeDept"
            />
          </el-form-item>
        </el-form>

        <div>
          
          <el-button type="primary" @click="queryTableList">查询</el-button>
          <el-button @click="handleRestParams">重置</el-button>
          <el-button plain  @click="handleDownload">
            导出
          </el-button>
        </div>
      </div>

      <div class="table-content">
        <el-table :data="tableData.data">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column label="申请单号" width="150" prop="code" />
          <el-table-column label="申请单位" width="180" prop="applicationUnitName" />
          <el-table-column label="申请人" width="180" prop="applicantName" />
          <el-table-column label="申请部门" width="180" prop="applicationDepartment" />
          <el-table-column label="申请人电话" width="180" prop="applicantPhone" />
          <el-table-column label="作业类别" width="180" prop="hazardOperationType" />
          <el-table-column label="申请状态" width="120" prop="statusName" />
          <el-table-column label="申请时间" width="180" prop="createdAt" />
          <el-table-column label="备注" width="180" prop="remark" />
          <el-table-column label="当前节点名称" width="180" prop="nodeDescription" />

          <el-table-column fixed="right" min-width="240" label="操作">
            <template #default="scope">

              <el-button v-if="scope.row.status === 1" type="primary" link @click="handleSendApproval(scope)"
                >提交</el-button
              >
              <el-button
                type="primary"
                link
                v-if="scope.row.status === 1"
                @click="$router.push({ name: 'hazardApprovalManageEdit', query: { id: scope.row.id } })"
                >编辑</el-button
              >
              
              <el-button
                type="primary"
                link
                @click="$router.push({ name: 'hazardApprovalManageView', query: { id: scope.row.id } })"
                >查看</el-button
              >

              <el-popconfirm title="确定要删除吗?" @confirm="handleConfirmDeleteRow(scope)" v-if="scope.row.status === 1">
                <template #reference>
                  <el-button type="primary" link>删除</el-button>
                </template>
              </el-popconfirm>

              <!-- <el-button type="primary" link>审批</el-button> -->
              <el-button
                v-if="scope.row.status === 3"
                type="primary"
                link
                @click="$router.push({ name: 'hazardApprovalManageMonitor', query: { id: scope.row.id } })"
                >视频监控</el-button
              >
              
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container" v-if="tableData.total > 0">
        <el-pagination
          background
          :current-page="queryParams.pageNumber"
          :page-size="queryParams.pageSize"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>
  </div>
  <BasicDialog
    v-if="approvalVisible"
    v-model="approvalVisible"
    ref="basicDialogRef"
    title="提交审批"
    @refresh="closeApprovalDialog"
  >
    <template #form>
      <div class="form">
        <el-form ref="approvalFormRef" :model="approvalForm">
          <el-form-item label="审批描述：" label-position="top">
            <el-input v-model="approvalForm.description" placeholder="请输入审批描述" type="textarea" />
          </el-form-item>
          <div class="form-item">
            <span>审批流程：</span>
            <template v-for="item in approvalNodeList" :key="item.id">
              <el-form-item
                :label="`第${item.approvalOrder}步：${item.nodeDescription}（${APPROVAL_TYPE_MAP[item.approvalType]}）`"
                label-position="top"
                :prop="item.approverType !== APPROVER_TYPE.FIX ? `approvers.${item.id}` : ''"
                :rules="{ required: true, message: '请选择审批人员', trigger: 'change' }"
              >
                <el-input
                  v-if="item.approverType === APPROVER_TYPE.FIX"
                  :model-value="item.approverInfoList.map((info) => info.approverName).join(',')"
                  disabled
                />
                <el-select
                  v-else
                  v-model="approvalForm.approvers[item.id]"
                  placeholder="请选择审批人员"
                  value-key="id"
                  filterable
                  remote
                  collapse-tags
                  collapse-tags-tooltip
                  :max-collapse-tags="2"
                  :remote-method="remoteMethod"
                  :loading="loading"
                  multiple
                >
                  <el-option
                    v-for="option in userOptions"
                    :key="option.id"
                    :label="`${option.realname}（${option.username}）${option.deptName}`"
                    :value="option.id"
                  />
                </el-select>
              </el-form-item>
            </template>
          </div>
        </el-form>
      </div>
    </template>
    <template #footer>
      <el-button type="primary" @click="handleSubmitApproval">提交</el-button>
      <el-button @click="approvalVisible = false">取消</el-button>
    </template>
  </BasicDialog>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { ElMessage, ElTableColumn } from 'element-plus';
  import { useRouter } from 'vue-router';
  import {
    dangerWorkSubmit,
    dangerWorkQueryPage,
    dangerWorkDeleteDangerWork,
    exportHazardApprovalList,
  } from '@/api/production-safety/responsibility-implementation';
  import BasicDialog from '@/components/BasicDialog.vue';
  import { getApprovalNodeInstanceList } from '@/api/approval/approval';
  import { submitReceiptRecordApprovalProcess } from '@/api/receiptRecord';
  import { omit } from 'lodash-es';
  import { useUserInfoHook } from '@/hooks/useUserInfoHook';
  import type { ApprovalNodeInstanceType } from '@/views/system/approval/types';
  import { downloadByData } from '@/utils/file/download';
  import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
  import { getAllDepartments } from '@/api/auth/dept';
  import { APPROVAL_TYPE_MAP, APPROVER_TYPE } from '@/views/emergency/emergency-plan/src/constant';
  import { useEmergencySuppliesHook } from '@/views/emergency/emergency-supplies/src/hook';

  const router = useRouter();
  const { id } = useUserInfoHook();
  const firstLevelDepts = ref<any[]>([]);
  const approvalVisible = ref(false);
  const cascaderProp = {
    expandTrigger: 'click',
    checkStrictly: true,
    // emitPath: false,
    value: 'id',
    label: 'deptName',
  };
  const queryParams = reactive<any>({
    pageNumber: 1,
    pageSize: 10,
    queryParam: {
      status: '',
      applicationUnitName: '',
      applicantName: '',
      applicationDepartmentId: [],
    },
  });
  const cascaderRef = ref();

  const tableData = reactive({
    data: [],
    total: 0,
  });

  const handleSizeChange = (value) => {};

  const handleCurrentChange = (value) => {
    queryParams.pageNumber = value;
    queryTableList();
  };

  const getDeptData = () => {
    getAllDepartments().then((res) => {
      firstLevelDepts.value = formatDeptTree(res);
    });
  };
  const handleChangeDept = () => {};

  const handleConfirmDeleteRow = (scope) => {
    dangerWorkDeleteDangerWork(scope.row.id).then(() => {
      ElMessage.success('删除成功!');
      queryTableList();
    });
  };

  const queryTableList = () => {
    dangerWorkQueryPage({
      ...queryParams,
      queryParam: {
        ...omit(queryParams.queryParam, 'responsibleDepartmentId'),
        status: queryParams.queryParam.status !== '' ? queryParams.queryParam.status : undefined,
        applicationDepartmentId: JSON.stringify(queryParams.queryParam.applicationDepartmentId),
      },
    }).then((res) => {
      tableData.data = res.records;
      tableData.total = res.totalRow;
    });
  };
  const handleRestParams = () => {
    Object.assign(queryParams, {
      pageNumber: 1,
      pageSize: 10,
      queryParam: {
        ...queryParams.queryParam,
        status: '',
        applicationUnitName: '',
        applicantName: '',
        applicationDepartmentId: [],
      },
    });
    queryTableList();
  };

  const basicDialogRef = ref<InstanceType<typeof BasicDialog>>();
  const approvalFormRef = ref();
  const approvalForm = reactive({
    description: '',
    approvers: {} as Record<number, any[]>,
  });

  const approvalNodeList = ref<ApprovalNodeInstanceType[]>([]);
  const receiptRecordId = ref<number>();

  const { userOptions, loading, remoteMethod } = useEmergencySuppliesHook();

  const getApprovalNode = async (id: number) => {
    const res = await getApprovalNodeInstanceList(id);
    approvalNodeList.value = res.approvalNodeInfoList || [];
  };
  const handleSendApproval = async (scope) => {
    await getApprovalNode(scope.row.templateId);
    approvalVisible.value = true;
    receiptRecordId.value = scope.row.id;
  };
  const resetApprovalForm = () => {
    approvalFormRef.value?.resetFields();
    approvalForm.description = '';
  };

  const closeApprovalDialog = () => {
    resetApprovalForm();
    basicDialogRef.value?.closeDialog();
  };

  const handleSubmitApproval = () => {
    approvalFormRef.value?.validate(async (valid: boolean) => {
      if (!valid) return;
      if (!receiptRecordId?.value) {
        ElMessage.error('缺少施工作业记录ID，无法提交审批');
        return;
      }

      const approvalData: any = {
        id: receiptRecordId.value,
        approvalDescription: approvalForm.description,
        approvalInfoList: approvalNodeList.value.map((node) => {
          let approverIdList: number[] = [];
          if (node.approverType === APPROVER_TYPE.FIX) {
            approverIdList = node.approverInfoList.map((info) => info.approverId);
          } else if (approvalForm.approvers[node.id]) {
            approverIdList = approvalForm.approvers[node.id];
          }
          return {
            approvalOrder: node.approvalOrder,
            approverIdList,
          };
        }),
      };

      try {
        await dangerWorkSubmit(approvalData);
        ElMessage.success('提交成功');
        approvalVisible.value = false;
        queryTableList();
      } catch (e) {
        ElMessage.error('提交审批失败，请重试');
      }
    });
  };

    const handleDownload = async () => {
    try {
      const response = await exportHazardApprovalList();
      if (response) {
        const fileName = `危险作业审批管理_${new Date().toISOString().split('T')[0]}.xlsx`;
        downloadByData(response, fileName);
        ElMessage.success('导出成功');
      }
    } catch (e) {
      console.error('导出院级文件失败:', e);
      ElMessage.error('导出失败，请重试');
    }
  };

  onMounted(async () => {
    await getDeptData();
    queryTableList();
  });
</script>

<style lang="scss" scoped>
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;
  @use '@/styles/basic-table-action.scss' as *;
  main {
    display: flex;
    flex-direction: column;
  }
  :deep(.el-tabs__header) {
    margin: 0;
  }
  :deep(.el-tabs__item) {
    font-size: 14px !important;
  }
  :deep(.flexContent) {
    display: flex;
  }
  :deep(.breadcrumb .title) {
    margin-left: 0;
  }

  .search-form {
    min-width: 800px;
    display: flex;

    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    :deep(.el-form) {
      flex: 1;
      display: flex;
      row-gap: 15px;
      flex-wrap: wrap;
    }
    :deep(.el-form-item) {
      margin-bottom: 0;
    }
    :deep(main) {
      display: flex;
      flex-direction: column;
    }
  }

  .button-content {
    margin-bottom: 20px;
  }
  .table-content {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
  }
  .page-content {
    display: flex;
    justify-content: flex-end;
  }
</style>