新疆马铃薯 1.过程检验下载添加3个模版

gaoluyang

2026-06-02 7c2cdcbc7f5585b96fba76a07b0e4417a09c4d7e

 src/views/safeProduction/safeWorkApproval/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,371 @@
<template>
  <div class="app-container">
    <!-- æ ‡ç­¾é¡µåˆ‡æ¢ä¸åŒçš„审批类型 -->
    <div class="search_form mb20">
      <div>
        <span class="search_title">流程编号：</span>
        <el-input v-model="searchForm.approveId"
                  style="width: 240px"
                  placeholder="请输入流程编号搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span class="search_title ml10">审批状态：</span>
        <el-select v-model="searchForm.approveStatus"
                   clearable
                   @change="handleQuery"
                   style="width: 240px">
          <el-option label="待审核"
                     :value="0" />
          <el-option label="审核中"
                     :value="1" />
          <el-option label="审核完成"
                     :value="2" />
          <el-option label="审核未通过"
                     :value="3" />
          <el-option label="已重新提交"
                     :value="4" />
        </el-select>
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
      </div>
      <div>
        <el-button type="primary"
                   @click="openForm('add')">新增</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumnCopy"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"
                :total="page.total"></PIMTable>
    </div>
    <info-form-dia ref="infoFormDia"
                   @close="handleQuery"
                   :approveType="currentApproveType"></info-form-dia>
    <approval-dia ref="approvalDia"
                  @close="handleQuery"
                  :approveType="currentApproveType"></approval-dia>
    <FileList ref="fileListRef" />
  </div>
</template>

<script setup>
  import FileList from "./fileList.vue";
  import { Search } from "@element-plus/icons-vue";
  import {
    onMounted,
    ref,
    computed,
    reactive,
    toRefs,
    nextTick,
    getCurrentInstance,
  } from "vue";
  import { ElMessageBox } from "element-plus";
  import { useRoute } from "vue-router";
  import InfoFormDia from "@/views/collaborativeApproval/approvalProcess/components/infoFormDia.vue";
  import ApprovalDia from "@/views/collaborativeApproval/approvalProcess/components/approvalDia.vue";
  import {
    approveProcessDelete,
    approveProcessListPage,
  } from "@/api/collaborativeApproval/approvalProcess.js";
  import useUserStore from "@/store/modules/user";

  const userStore = useUserStore();
  const route = useRoute();

  // å½“前审批类型，根据选中的标签页计算
  const currentApproveType = computed(() => {
    return Number(8);
  });

  // æ ‡ç­¾é¡µåˆ‡æ¢å¤„理
  const handleTabChange = tabName => {
    // åˆ‡æ¢æ ‡ç­¾é¡µæ—¶é‡ç½®æœç´¢æ¡ä»¶å’Œåˆ†é¡µï¼Œå¹¶é‡æ–°åŠ è½½æ•°æ®
    searchForm.value.approveId = "";
    searchForm.value.approveStatus = "";
    page.current = 1;
    getList();
  };

  const data = reactive({
    searchForm: {
      approveId: "",
      approveStatus: "",
    },
  });
  const { searchForm } = toRefs(data);

  // åŠ¨æ€è¡¨æ ¼åˆ—配置，根据审批类型生成列
  const tableColumnCopy = computed(() => {
    // åŸºç¡€åˆ—配置
    const baseColumns = [
      {
        label: "审批状态",
        prop: "approveStatus",
        dataType: "tag",
        width: 100,
        formatData: params => {
          if (params == 0) {
            return "待审核";
          } else if (params == 1) {
            return "审核中";
          } else if (params == 2) {
            return "审核完成";
          } else if (params == 4) {
            return "已重新提交";
          } else {
            return "不通过";
          }
        },
        formatType: params => {
          if (params == 0) {
            return "warning";
          } else if (params == 1) {
            return "primary";
          } else if (params == 2) {
            return "success";
          } else if (params == 4) {
            return "info";
          } else {
            return "danger";
          }
        },
      },
      {
        label: "流程编号",
        prop: "approveId",
        width: 170,
      },
      {
        label: "申请部门",
        prop: "approveDeptName",
        width: 220,
      },
      {
        label: "审批事由",
        prop: "approveReason",
        width: 200,
      },
      {
        label: "申请人",
        prop: "approveUserName",
        width: 120,
      },
    ];

    // æ—¥æœŸåˆ—（根据类型动态配置）
    baseColumns.push(
      {
        label: "申请日期",
        prop: "approveTime",
        width: 200,
      },
      {
        label: "结束日期",
        prop: "approveOverTime",
        width: 120,
      }
    );

    // å½“前审批人列
    baseColumns.push({
      label: "当前审批人",
      prop: "approveUserCurrentName",
      width: 120,
    });

    // æ“ä½œåˆ—
    baseColumns.push({
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 230,
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openForm("edit", row);
          },
          disabled: row =>
            row.approveStatus == 2 ||
            row.approveStatus == 1 ||
            row.approveStatus == 4,
        },
        {
          name: "审核",
          type: "text",
          clickFun: row => {
            openApprovalDia("approval", row);
          },
          disabled: row =>
            row.approveUserCurrentId == null ||
            row.approveStatus == 2 ||
            row.approveStatus == 3 ||
            row.approveStatus == 4 ||
            row.approveUserCurrentId !== userStore.id,
        },
        {
          name: "详情",
          type: "text",
          clickFun: row => {
            openApprovalDia("view", row);
          },
        },
        {
          name: "附件",
          type: "text",
          clickFun: row => {
            downLoadFile(row);
          },
        },
      ],
    });

    return baseColumns;
  });
  const tableData = ref([]);
  const selectedRows = ref([]);
  const tableLoading = ref(false);
  const page = reactive({
    current: 1,
    size: 100,
    total: 0,
  });
  const infoFormDia = ref();
  const approvalDia = ref();
  const { proxy } = getCurrentInstance();

  // æŸ¥è¯¢åˆ—表
  /** æœç´¢æŒ‰é’®æ“ä½œ */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };
  const fileListRef = ref(null);
  const downLoadFile = row => {
    fileListRef.value.open(row.commonFileList);
  };
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  const getList = () => {
    tableLoading.value = true;
    approveProcessListPage({
      ...page,
      ...searchForm.value,
      approveType: currentApproveType.value,
    })
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
      })
      .catch(err => {
        tableLoading.value = false;
      });
  };
  // å¯¼å‡º
  const handleOut = () => {
    const type = currentApproveType.value;
    const urlMap = {
      0: "/approveProcess/exportZero",
      1: "/approveProcess/exportOne",
      2: "/approveProcess/exportTwo",
      3: "/approveProcess/exportThree",
      4: "/approveProcess/exportFour",
      5: "/approveProcess/exportFive",
      6: "/approveProcess/exportSix",
      7: "/approveProcess/exportSeven",
      8: "/approveProcess/exportEight",
    };
    const url = urlMap[type] || urlMap[0];
    const nameMap = {
      0: "协同审批管理表",
      1: "公出管理审批表",
      2: "请假管理审批表",
      3: "出差管理审批表",
      4: "报销管理审批表",
      5: "采购申请审批表",
      6: "报价审批表",
      7: "发货审批表",
      8: "危险作业审批表",
    };
    const fileName = nameMap[type] || nameMap[0];
    proxy.download(url, {}, `${fileName}.xlsx`);
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };

  // æ‰“开新增、编辑弹框
  const openForm = (type, row) => {
    nextTick(() => {
      infoFormDia.value?.openDialog(type, row);
    });
  };
  // æ‰“开新增检验弹框
  const openApprovalDia = (type, row) => {
    nextTick(() => {
      approvalDia.value?.openDialog(type, row);
    });
  };

  // åˆ é™¤
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map(item => item.approveId);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        approveProcessDelete(ids).then(res => {
          proxy.$modal.msgSuccess("删除成功");
          getList();
        });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  onMounted(() => {
    const approveId = route.query.approveId;

    if (approveId) {
      // è®¾ç½®æµç¨‹ç¼–号查询条件
      searchForm.value.approveId = String(approveId);
    }

    // æŸ¥è¯¢åˆ—表
    getList();
  });
</script>

<style scoped>
  .approval-tabs {
    margin-bottom: 10px;
  }
</style>