人员薪资增加详情功能

zhangwencui

4 天以前 4d3d3012fe57eb26a9eb39ba41f231a5352cdd3b

人员薪资增加详情功能

 src/views/personnelManagement/monthlyStatistics/components/Show.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,127 @@
<template>
  <el-dialog v-model="visible"
             title="工资表详情"
             width="90%"
             append-to-body>
    <div class="detail-container">
      <!-- ä¸»è¡¨ä¿¡æ¯ -->
      <el-descriptions title="基础信息" :column="4" border>
        <el-descriptions-item label="工资主题">{{ mainInfo.salaryTitle }}</el-descriptions-item>
        <el-descriptions-item label="工资月份">{{ mainInfo.salaryMonth }}</el-descriptions-item>
        <el-descriptions-item label="工资总额">
          <span class="text-danger">Â¥ {{ (mainInfo.totalSalary || 0).toFixed(2) }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(mainInfo.status)">{{ getStatusLabel(mainInfo.status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审核人">{{ mainInfo.auditUserName }}</el-descriptions-item>
        <el-descriptions-item label="支付银行">{{ mainInfo.payBank || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ mainInfo.createTime }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ mainInfo.remark || '-' }}</el-descriptions-item>
      </el-descriptions>

      <!-- æ˜Žç»†åˆ—表 -->
      <div class="detail-table-wrap">
        <div class="table-title">工资明细</div>
        <el-table :data="detailList" border stripe max-height="500">
          <el-table-column label="部门" prop="deptName" minWidth="120" />
          <el-table-column label="员工姓名" prop="staffName" minWidth="100" />
          <el-table-column label="民族" prop="nation" width="80" align="center" />
          <el-table-column label="基本工资" prop="basicSalary" minWidth="100" align="right" />
          <el-table-column label="白班天数" prop="dayDays" width="90" align="center" />
          <el-table-column label="夜班天数" prop="nightDays" width="90" align="center" />
          <el-table-column label="餐补" prop="mealAmount" minWidth="100" align="right" />
          <el-table-column label="夜班补助" prop="nightAmount" minWidth="100" align="right" />
          <el-table-column label="其他收入" prop="otherIncome" minWidth="100" align="right" />
          <el-table-column label="社保个人" prop="socialPersonal" minWidth="100" align="right" />
          <el-table-column label="公积金个人" prop="fundPersonal" minWidth="110" align="right" />
          <el-table-column label="其他支出" prop="otherDeduct" minWidth="100" align="right" />
          <el-table-column label="社保补缴" prop="socialSecurityRetroactive" minWidth="100" align="right" />
          <el-table-column label="工资个税" prop="salaryTax" minWidth="100" align="right" />
          <el-table-column label="应发工资" prop="grossSalary" minWidth="110" align="right">
            <template #default="{ row }">
              <span class="text-bold">{{ row.grossSalary }}</span>
            </template>
          </el-table-column>
          <el-table-column label="应扣工资" prop="deductSalary" minWidth="110" align="right">
            <template #default="{ row }">
              <span class="text-danger">{{ row.deductSalary }}</span>
            </template>
          </el-table-column>
          <el-table-column label="实发工资" prop="netSalary" minWidth="110" align="right">
            <template #default="{ row }">
              <span class="text-success text-bold">{{ row.netSalary }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" minWidth="120" show-overflow-tooltip />
        </el-table>
      </div>
    </div>
    <template #footer>
      <el-button @click="visible = false">关 é—­</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';

const visible = ref(false);
const mainInfo = ref({});
const detailList = ref([]);

const openDialog = (row) => {
  mainInfo.value = row || {};
  detailList.value = row.staffSalaryDetailList || [];
  visible.value = true;
};

const getStatusType = (status) => {
  const map = {
    1: 'info',    // è‰ç¨¿
    2: 'warning', // å¾…支付
    3: 'primary', // å¾…审核
    4: 'success', // å·²å‘放
    5: 'danger'   // å·²é©³å›ž
  };
  return map[status] || 'info';
};

const getStatusLabel = (status) => {
  const map = {
    1: '草稿',
    2: '待支付',
    3: '待审核',
    4: '已发放',
    5: '已驳回'
  };
  return map[status] || '未知';
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.detail-container {
  padding: 10px;
}
.detail-table-wrap {
  margin-top: 20px;
}
.table-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 4px solid #409eff;
}
.text-danger {
  color: #f56c6c;
}
.text-success {
  color: #67c23a;
}
.text-bold {
  font-weight: bold;
}
</style>

 src/views/personnelManagement/monthlyStatistics/index.vue

@@ -3,33 +3,39 @@
    <div class="search_form">
      <div>
        <span class="search_title">主题：</span>
        <el-input
          v-model="searchForm.salaryTitle"
          style="width: 240px"
          placeholder="请输入主题"
          clearable
          @keyup.enter="handleQuery"
        />
        <el-input v-model="searchForm.salaryTitle"
                  style="width: 240px"
                  placeholder="请输入主题"
                  clearable
                  @keyup.enter="handleQuery" />
        <span class="search_title ml10">状态：</span>
        <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 180px">
          <el-option label="草稿" :value="1" />
          <el-option label="审核未通过" :value="2" />
          <el-option label="待审核" :value="3" />
          <el-option label="待发放" :value="4" />
          <el-option label="已发放" :value="5" />
        <el-select v-model="searchForm.status"
                   placeholder="请选择状态"
                   clearable
                   style="width: 180px">
          <el-option label="草稿"
                     :value="1" />
          <el-option label="审核未通过"
                     :value="2" />
          <el-option label="待审核"
                     :value="3" />
          <el-option label="待发放"
                     :value="4" />
          <el-option label="已发放"
                     :value="5" />
        </el-select>
        <span class="search_title ml10">工资月份：</span>
        <el-date-picker
          v-model="searchForm.salaryMonth"
          type="month"
          value-format="YYYY-MM"
          format="YYYY-MM"
          placeholder="请选择工资月份"
          style="width: 180px"
          clearable
          @change="handleQuery"
        />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
        <el-date-picker v-model="searchForm.salaryMonth"
                        type="month"
                        value-format="YYYY-MM"
                        format="YYYY-MM"
                        placeholder="请选择工资月份"
                        style="width: 180px"
                        clearable
                        @change="handleQuery" />
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">
          æœç´¢
        </el-button>
        <el-button @click="handleReset">重置</el-button>
@@ -37,371 +43,386 @@
    </div>
    <div class="table_list">
      <div style="margin-bottom: 10px;text-align: right">
        <el-button type="primary" @click="openForm('add')">新建工资表</el-button>
        <el-button type="primary"
                   @click="openForm('add')">新建工资表</el-button>
        <el-button @click="handleDelete">删除</el-button>
        <el-button @click="openBankSetting">设置银行</el-button>
        <el-button @click="handleExport">导出</el-button>
      </div>
      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :isSelection="true"
        :tableLoading="tableLoading"
        @selection-change="handleSelectionChange"
        @pagination="pagination"
        :total="page.total"
      />
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                :tableLoading="tableLoading"
                @selection-change="handleSelectionChange"
                @pagination="pagination"
                :total="page.total" />
    </div>
    <form-dia
      v-model="dialogVisible"
      :operation-type="operationType"
      :row="currentRow"
      ref="formDiaRef"
      @close="handleQuery"
    />
    <bank-setting-dia
      v-model="bankDialogVisible"
      ref="bankDiaRef"
      @saved="handleBankSaved"
    />
    <el-dialog v-model="issueDialogVisible" title="工资发放" width="720px">
    <form-dia v-model="dialogVisible"
              :operation-type="operationType"
              :row="currentRow"
              ref="formDiaRef"
              @close="handleQuery" />
    <bank-setting-dia v-model="bankDialogVisible"
                      ref="bankDiaRef"
                      @saved="handleBankSaved" />
    <el-dialog v-model="issueDialogVisible"
               title="工资发放"
               width="720px">
      <el-form label-position="top">
        <el-form-item label="发放银行" required>
          <el-select
            v-model="issueForm.bank"
            placeholder="请选择发放银行"
            clearable
            filterable
            style="width: 100%"
          >
            <el-option v-for="b in issueBankOptions" :key="b" :label="b" :value="b" />
        <el-form-item label="发放银行"
                      required>
          <el-select v-model="issueForm.bank"
                     placeholder="请选择发放银行"
                     clearable
                     filterable
                     style="width: 100%">
            <el-option v-for="b in issueBankOptions"
                       :key="b"
                       :label="b"
                       :value="b" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" :loading="issueLoading" @click="confirmIssue">
        <el-button type="primary"
                   :loading="issueLoading"
                   @click="confirmIssue">
          ç¡®å®š
        </el-button>
        <el-button @click="issueDialogVisible = false">取消</el-button>
      </template>
    </el-dialog>
    <audit-dia
      v-model="auditDialogVisible"
      :row="auditRow"
      @close="auditDialogVisible = false"
      @success="handleAuditSuccess"
    />
    <audit-dia v-model="auditDialogVisible"
               :row="auditRow"
               @close="auditDialogVisible = false"
               @success="handleAuditSuccess" />
    <show-dia ref="showDiaRef" />
  </div>
</template>

<script setup>
import {
  onMounted,
  computed,
  ref,
  reactive,
  toRefs,
  getCurrentInstance,
  nextTick,
} from "vue";
import { ElMessageBox } from "element-plus";
import Cookies from "js-cookie";
import FormDia from "./components/formDia.vue";
import BankSettingDia from "./components/bankSettingDia.vue";
import AuditDia from "./components/auditDia.vue";
import PIMTable from "@/components/PIMTable/PIMTable.vue";
import { bankList } from "@/api/personnelManagement/bank.js";
import {
  staffSalaryMainListPage,
  staffSalaryMainDelete,
  staffSalaryMainUpdate,
} from "@/api/personnelManagement/staffSalaryMain.js";
  import {
    onMounted,
    computed,
    ref,
    reactive,
    toRefs,
    getCurrentInstance,
    nextTick,
  } from "vue";
  import { ElMessageBox } from "element-plus";
  import Cookies from "js-cookie";
  import FormDia from "./components/formDia.vue";
  import BankSettingDia from "./components/bankSettingDia.vue";
  import AuditDia from "./components/auditDia.vue";
  import ShowDia from "./components/Show.vue";
  import PIMTable from "@/components/PIMTable/PIMTable.vue";
  import { bankList } from "@/api/personnelManagement/bank.js";
  import {
    staffSalaryMainListPage,
    staffSalaryMainDelete,
    staffSalaryMainUpdate,
  } from "@/api/personnelManagement/staffSalaryMain.js";

const data = reactive({
  searchForm: {
    salaryTitle: "",
    status: "",
    salaryMonth: "",
  },
});
const { searchForm } = toRefs(data);
  const data = reactive({
    searchForm: {
      salaryTitle: "",
      status: "",
      salaryMonth: "",
    },
  });
  const { searchForm } = toRefs(data);

const tableColumn = ref([
  { label: "工资主题", prop: "salaryTitle", minWidth: 140 },
  { label: "工资月份", prop: "salaryMonth", width: 120 },
  { 
    label: "状态", 
    prop: "statusName", 
    width: 110,
    dataType: "tag",
    formatType: (status) => {
      const statusMap = {
        "草稿": "info",
        "审核未通过": "danger", 
        "待审核": "warning",
        "待发放": "primary",
        "已发放": "success"
      };
      return statusMap[status] || "info";
    }
  },
  { label: "工资总额", prop: "totalSalary", width: 120 },
  { label: "支付银行", prop: "payBank", width: 120 },
  { label: "审核人", prop: "auditUserName", width: 110 },
  { label: "备注", prop: "remark", minWidth: 120 },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 180,
    operation: [
      {
        name: "编辑",
        type: "text",
        disabled: (row) => Number(row?.status) !== 1 && Number(row?.status) !== 2,
        clickFun: (row) => openForm("edit", row),
      },
      {
        name: "审核",
        type: "text",
        disabled: (row) => Number(row?.status) !== 3,
        clickFun: (row) => openAudit(row),
      },
      {
        name: "发放",
        type: "text",
        disabled: (row) => Number(row?.status) !== 4,
        clickFun: (row) => openIssue(row),
      },
    ],
  },
]);

const tableData = ref([]);
const selectedRows = ref([]);
const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 10,
  total: 0,
});
const formDiaRef = ref(null);
const dialogVisible = ref(false);
const operationType = ref("add");
const currentRow = ref({});
const { proxy } = getCurrentInstance();
const bankSetting = ref({});
const bankDialogVisible = ref(false);
const bankDiaRef = ref(null);
const issueDialogVisible = ref(false);
const issueLoading = ref(false);
const issueRow = ref(null);
const issueForm = reactive({ bank: "" });
const auditDialogVisible = ref(false);
const auditRow = ref(null);
const auditDiaRef = ref(null);

const issueBankOptions = computed(() => {
  const options = Array.isArray(bankSetting.value?.options) ? bankSetting.value.options : [];
  return options
    .map((v) => (v == null ? "" : String(v).trim()))
    .filter((v) => v !== "");
});

const statusName = (s) => {
  const n = Number(s);
  return (
  const tableColumn = ref([
    { label: "工资主题", prop: "salaryTitle", minWidth: 140 },
    { label: "工资月份", prop: "salaryMonth", width: 120 },
    {
      1: "草稿",
      2: "审核未通过",
      3: "待审核",
      4: "待发放",
      5: "已发放",
    }[n] || "-"
  );
};
      label: "状态",
      prop: "statusName",
      width: 110,
      dataType: "tag",
      formatType: status => {
        const statusMap = {
          è‰ç¨¿: "info",
          å®¡æ ¸æœªé€šè¿‡: "danger",
          å¾…审核: "warning",
          å¾…发放: "primary",
          å·²å‘放: "success",
        };
        return statusMap[status] || "info";
      },
    },
    { label: "工资总额", prop: "totalSalary", width: 120 },
    { label: "支付银行", prop: "payBank", width: 120 },
    { label: "审核人", prop: "auditUserName", width: 110 },
    { label: "备注", prop: "remark", minWidth: 120 },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 200,
      operation: [
        {
          name: "详情",
          type: "text",
          clickFun: row => openShow(row),
        },
        {
          name: "编辑",
          type: "text",
          disabled: row => Number(row?.status) !== 1 && Number(row?.status) !== 2,
          clickFun: row => openForm("edit", row),
        },
        {
          name: "审核",
          type: "text",
          disabled: row => Number(row?.status) !== 3,
          clickFun: row => openAudit(row),
        },
        {
          name: "发放",
          type: "text",
          disabled: row => Number(row?.status) !== 4,
          clickFun: row => openIssue(row),
        },
      ],
    },
  ]);

const loadBankSetting = () => {
  return bankList().then((res) => {
    const list = Array.isArray(res?.data) ? res.data : [];
    const options = list
      .map((b) => (b?.bankName == null ? "" : String(b.bankName).trim()))
      .filter((v) => v !== "");
    bankSetting.value = { options, defaultBank: "" };
  const tableData = ref([]);
  const selectedRows = ref([]);
  const tableLoading = ref(false);
  const page = reactive({
    current: 1,
    size: 10,
    total: 0,
  });
};
  const formDiaRef = ref(null);
  const showDiaRef = ref(null);
  const dialogVisible = ref(false);
  const operationType = ref("add");
  const currentRow = ref({});
  const { proxy } = getCurrentInstance();
  const bankSetting = ref({});
  const bankDialogVisible = ref(false);
  const bankDiaRef = ref(null);
  const issueDialogVisible = ref(false);
  const issueLoading = ref(false);
  const issueRow = ref(null);
  const issueForm = reactive({ bank: "" });
  const auditDialogVisible = ref(false);
  const auditRow = ref(null);
  const auditDiaRef = ref(null);

const handleQuery = () => {
  page.current = 1;
  getList();
};
  const issueBankOptions = computed(() => {
    const options = Array.isArray(bankSetting.value?.options)
      ? bankSetting.value.options
      : [];
    return options
      .map(v => (v == null ? "" : String(v).trim()))
      .filter(v => v !== "");
  });

const handleReset = () => {
  searchForm.value.salaryTitle = "";
  searchForm.value.status = "";
  searchForm.value.salaryMonth = "";
  page.current = 1;
  getList();
};
  const statusName = s => {
    const n = Number(s);
    return (
      {
        1: "草稿",
        2: "审核未通过",
        3: "待审核",
        4: "待发放",
        5: "已发放",
      }[n] || "-"
    );
  };

const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};

const getList = () => {
  tableLoading.value = true;
  staffSalaryMainListPage({
    ...searchForm.value,
    current: page.current,
    size: page.size,
  })
    .then((res) => {
      tableLoading.value = false;
      const records = res.data?.records ?? res.data?.list ?? [];
      console.log('列表接口返回数据:', records);
      // å…¼å®¹åŽç«¯å­—段：若接口仍返回台账结构，可在此做映射
      tableData.value = records.map((item) => ({
        ...item,
        salaryTitle: item.salaryTitle ?? "-",
        salaryMonth: item.salaryMonth ?? "-",
        statusName: statusName(item.status),
        totalSalary: item.totalSalary ?? "-",
        payBank: (item.payBank == null ? "" : String(item.payBank).trim()) || "-",
        auditUserName: item.auditUserName ?? "-",
      }));
      page.total = res.data?.total ?? res.data?.count ?? 0;
    })
    .catch(() => {
      tableLoading.value = false;
  const loadBankSetting = () => {
    return bankList().then(res => {
      const list = Array.isArray(res?.data) ? res.data : [];
      const options = list
        .map(b => (b?.bankName == null ? "" : String(b.bankName).trim()))
        .filter(v => v !== "");
      bankSetting.value = { options, defaultBank: "" };
    });
};
  };

const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
  const handleQuery = () => {
    page.current = 1;
    getList();
  };

const openForm = (type, row) => {
  operationType.value = type;
  currentRow.value = row || {};
  dialogVisible.value = true;
  nextTick(() => {
    formDiaRef.value?.openDialog(type, row);
  });
};
  const handleReset = () => {
    searchForm.value.salaryTitle = "";
    searchForm.value.status = "";
    searchForm.value.salaryMonth = "";
    page.current = 1;
    getList();
  };

const openBankSetting = () => {
  bankDialogVisible.value = true;
};
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };

const openAudit = (row) => {
  console.log('打开审核，传入的数据:', row);
  auditRow.value = row || null;
  auditDialogVisible.value = true;
  nextTick(() => {
    auditDiaRef.value?.openDialog(row);
  });
};

const handleAuditSuccess = () => {
  getList();
};

const openIssue = (row) => {
  if (!issueBankOptions.value?.length) {
    proxy?.$modal?.msgWarning?.("请先在“设置银行”中维护发放银行选项");
    return;
  }
  issueRow.value = row || null;
  const current = row?.payBank && row.payBank !== "-" ? String(row.payBank).trim() : "";
  issueForm.bank = current;
  issueDialogVisible.value = true;
};



const confirmIssue = () => {
  const bank = issueForm.bank ? String(issueForm.bank).trim() : "";
  if (!bank) {
    proxy?.$modal?.msgWarning?.("请选择发放银行");
    return;
  }
  const row = issueRow.value;
  if (!row?.id) {
    issueDialogVisible.value = false;
    return;
  }
  issueLoading.value = true;
  staffSalaryMainUpdate({
    id: row.id,
    payBank: bank,
    status: 5,
  })
    .then(() => {
      proxy?.$modal?.msgSuccess?.("发放成功");
      issueDialogVisible.value = false;
      getList();
  const getList = () => {
    tableLoading.value = true;
    staffSalaryMainListPage({
      ...searchForm.value,
      current: page.current,
      size: page.size,
    })
    .finally(() => {
      issueLoading.value = false;
    });
};

const handleBankSaved = () => {
  loadBankSetting();
  getList();
};

const handleDelete = () => {
  if (!selectedRows.value?.length) {
    proxy.$modal.msgWarning("请选择要删除的数据");
    return;
  }
  const ids = selectedRows.value.map((item) => item.id);
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      staffSalaryMainDelete(ids).then(() => {
        proxy.$modal.msgSuccess("删除成功");
        getList();
      .then(res => {
        tableLoading.value = false;
        const records = res.data?.records ?? res.data?.list ?? [];
        console.log("列表接口返回数据:", records);
        // å…¼å®¹åŽç«¯å­—段：若接口仍返回台账结构，可在此做映射
        tableData.value = records.map(item => ({
          ...item,
          salaryTitle: item.salaryTitle ?? "-",
          salaryMonth: item.salaryMonth ?? "-",
          statusName: statusName(item.status),
          totalSalary: item.totalSalary ?? "-",
          payBank:
            (item.payBank == null ? "" : String(item.payBank).trim()) || "-",
          auditUserName: item.auditUserName ?? "-",
        }));
        page.total = res.data?.total ?? res.data?.count ?? 0;
      })
      .catch(() => {
        tableLoading.value = false;
      });
  };

  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };

  const openForm = (type, row) => {
    operationType.value = type;
    currentRow.value = row || {};
    dialogVisible.value = true;
    nextTick(() => {
      formDiaRef.value?.openDialog(type, row);
    });
  };

  const openShow = row => {
    nextTick(() => {
      showDiaRef.value?.openDialog(row);
    });
  };

  const openBankSetting = () => {
    bankDialogVisible.value = true;
  };

  const openAudit = row => {
    console.log("打开审核，传入的数据:", row);
    auditRow.value = row || null;
    auditDialogVisible.value = true;
    nextTick(() => {
      auditDiaRef.value?.openDialog(row);
    });
  };

  const handleAuditSuccess = () => {
    getList();
  };

  const openIssue = row => {
    if (!issueBankOptions.value?.length) {
      proxy?.$modal?.msgWarning?.("请先在“设置银行”中维护发放银行选项");
      return;
    }
    issueRow.value = row || null;
    const current =
      row?.payBank && row.payBank !== "-" ? String(row.payBank).trim() : "";
    issueForm.bank = current;
    issueDialogVisible.value = true;
  };

  const confirmIssue = () => {
    const bank = issueForm.bank ? String(issueForm.bank).trim() : "";
    if (!bank) {
      proxy?.$modal?.msgWarning?.("请选择发放银行");
      return;
    }
    const row = issueRow.value;
    if (!row?.id) {
      issueDialogVisible.value = false;
      return;
    }
    issueLoading.value = true;
    staffSalaryMainUpdate({
      id: row.id,
      payBank: bank,
      status: 5,
    })
    .catch(() => {});
};
      .then(() => {
        proxy?.$modal?.msgSuccess?.("发放成功");
        issueDialogVisible.value = false;
        getList();
      })
      .finally(() => {
        issueLoading.value = false;
      });
  };

const handleExport = () => {
  proxy.download(
    "/compensationPerformance/export",
    { ...searchForm.value, current: page.current, size: page.size },
    "工资表.xlsx"
  );
};
  const handleBankSaved = () => {
    loadBankSetting();
    getList();
  };

onMounted(() => {
  loadBankSetting();
  getList();
});
  const handleDelete = () => {
    if (!selectedRows.value?.length) {
      proxy.$modal.msgWarning("请选择要删除的数据");
      return;
    }
    const ids = selectedRows.value.map(item => item.id);
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        staffSalaryMainDelete(ids).then(() => {
          proxy.$modal.msgSuccess("删除成功");
          getList();
        });
      })
      .catch(() => {});
  };

  const handleExport = () => {
    proxy.download(
      "/compensationPerformance/export",
      { ...searchForm.value, current: page.current, size: page.size },
      "工资表.xlsx"
    );
  };

  onMounted(() => {
    loadBankSetting();
    getList();
  });
</script>

<style scoped>
.search_form {
  margin-bottom: 20px;
}
.search_title {
  font-weight: 500;
  margin-right: 5px;
}
.ml10 {
  margin-left: 10px;
}
.table_list {
  margin-top: 20px;
}
  .search_form {
    margin-bottom: 20px;
  }
  .search_title {
    font-weight: 500;
    margin-right: 5px;
  }
  .ml10 {
    margin-left: 10px;
  }
  .table_list {
    margin-top: 20px;
  }
</style>