gaoluyang
2025-11-21 f9c7ba194dee021012f366e743164c5a1336f405
src/views/collaborativeApproval/approvalProcess/index.vue
@@ -11,13 +11,21 @@
            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 @click="handleOut">导出</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
      </div>
    </div>
@@ -34,91 +42,134 @@
          :total="page.total"
      ></PIMTable>
    </div>
    <info-form-dia ref="infoFormDia" @close="handleQuery"></info-form-dia>
    <approval-dia ref="approvalDia" @close="handleQuery"></approval-dia>
    <info-form-dia ref="infoFormDia" @close="handleQuery" :approveType="approveType"></info-form-dia>
    <approval-dia ref="approvalDia" @close="handleQuery" :approveType="approveType"></approval-dia>
    <FileList ref="fileListRef" />
  </div>
</template>
<script setup>
import FileList from "./fileList.vue";
import { Search } from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {ElMessageBox} from "element-plus";
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 {approveProcessDelete, approveProcessListPage} from "@/api/collaborativeApproval/approvalProcess.js";
import useUserStore from "@/store/modules/user";
// 定义组件接收的props
const props = defineProps({
  approveType: {
    type: [Number, String],
    default: 0
  }
});
const userStore = useUserStore();
const data = reactive({
  searchForm: {
      approveId: "",
      approveStatus: "",
  },
});
const { searchForm } = toRefs(data);
const tableColumn = ref([
  {
    label: "审批状态",
    prop: "approveStatus",
    dataType: "tag",
    formatData: (params) => {
      if (params == 0) {
        return "待审核";
      } else if (params == 1) {
        return "审核中";
      } else if (params == 2) {
        return "审核完成";
      } else {
        return '不通过';
      }
const tableColumn = 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 "";
        } else {
          return 'danger';
        }
      },
    },
    formatType: (params) => {
      if (params == 0) {
        return "warning";
      } else if (params == 1) {
        return "primary";
      }  else if (params == 2) {
        return "success";
      } else {
        return 'danger';
      }
    {
      label: "流程编号",
      prop: "approveId",
      width: 170
    },
  },
  {
    label: "流程编号",
    prop: "approveId",
    width: 170
  },
  {
    label: "申请部门",
    prop: "approveDeptName",
  },
  {
    label: "审批事由",
    prop: "approveReason",
      width: 200
  },
  {
    label: "申请人",
    prop: "approveUser",
  },
  {
    label: "申请日期",
    prop: "approveTime",
  },
  {
    label: "结束日期",
    prop: "approveOverTime",
    width: 120
  },
  {
    label: "当前审批人",
    prop: "checkCompany",
    width: 120
  },
  {
    {
      label: "申请部门",
      prop: "approveDeptName",
        width: 220
    },
    {
      label: "审批事由",
      prop: "approveReason",
        width: 200
    },
    {
      label: "申请人",
      prop: "approveUserName",
      width: 120
    },
    {
      label: "申请日期",
      prop: "approveTime",
        width: 200
    },
    {
      label: "结束日期",
      prop: "approveOverTime",
      width: 120
    },
    {
      label: "当前审批人",
      prop: "approveUserCurrentName",
      width: 120
    }
  ];
  // 如果是报销管理审批表(approveType=4),添加报销金额列
  if (props.approveType == 4) {
    baseColumns.push({
      label: "报销金额",
      prop: "price",
      width: 120,
      fixed: "right",
      formatData: (params) => {
        if (params) {
          return `¥${Number(params).toFixed(2)}`;
        }
        return '-'
      }
    });
  }
  // 添加操作列
  baseColumns.push({
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 150,
    width: 230,
    operation: [
      {
        name: "编辑",
@@ -126,6 +177,7 @@
        clickFun: (row) => {
          openForm("edit", row);
        },
            disabled: (row) => row.approveStatus == 2 || row.approveStatus == 1 || row.approveStatus == 4
      },
      {
        name: "审核",
@@ -133,6 +185,7 @@
        clickFun: (row) => {
          openApprovalDia("approval", row);
        },
            disabled: (row) => row.approveUserCurrentId == null || row.approveStatus == 2 || row.approveStatus == 3 || row.approveStatus == 4 || row.approveUserCurrentId !== userStore.id
      },
      {
        name: "详情",
@@ -141,9 +194,18 @@
          openApprovalDia('view', row);
        },
      },
      {
        name: "附件",
        type: "text",
        clickFun: (row) => {
          downLoadFile(row);
        },
      },
    ],
  },
]);
  });
  return baseColumns;
});
const tableData = ref([]);
const selectedRows = ref([]);
const tableLoading = ref(false);
@@ -162,6 +224,11 @@
  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;
@@ -169,7 +236,7 @@
};
const getList = () => {
  tableLoading.value = true;
  approveProcessListPage({...page, ...searchForm.value,}).then(res => {
  approveProcessListPage({...page, ...searchForm.value,approveType:props.approveType}).then(res => {
    tableLoading.value = false;
    tableData.value = res.data.records
    page.total = res.data.total;
@@ -177,6 +244,29 @@
    tableLoading.value = false;
  })
};
// 导出
const handleOut = () => {
  const type = Number(props.approveType || 0)
  const urlMap = {
    0: "/approveProcess/exportZero",
    1: "/approveProcess/exportOne",
    2: "/approveProcess/exportTwo",
    3: "/approveProcess/exportThree",
    4: "/approveProcess/exportFour",
    5: "/approveProcess/exportFive",
  }
  const url = urlMap[type] || urlMap[0]
  const nameMap = {
    0: "协同审批管理表",
    1: "公出管理审批表",
    2: "请假管理审批表",
    3: "出差管理审批表",
    4: "报销管理审批表",
    5: "采购申请审批表",
  }
  const fileName = nameMap[type] || nameMap[0]
  proxy.download(url, {}, `${fileName}.xlsx`)
}
// 表格选择数据
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;