君歌 1.部署修改

gaoluyang

2026-06-16 ffe58e0cf73fa61d8b05de09645c5d8d89007ce5

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

@@ -1,318 +1,813 @@
<template>
  <el-dialog v-model="dialogVisible"
             :title="title"
             width="700px"
             :close-on-click-modal="false">
    <el-form ref="formRef"
             :model="form"
             :rules="rules"
             label-width="140px"
             label-position="top">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="统计月份"
                        prop="payDate">
            <el-date-picker v-model="form.payDate"
                            type="month"
                            value-format="YYYY-MM"
                            format="YYYY-MM"
                            placeholder="请选择月份"
                            style="width: 100%"
                            :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名"
                        prop="staffId">
            <el-select v-model="form.staffId"
                       placeholder="请选择员工"
                       style="width: 100%"
                       :disabled="operationType === 'view'">
              <el-option v-for="item in userList"
                         :key="item.id"
                         :label="item.staffName"
                         :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="基本工资"
                        prop="basicSalary">
            <el-input v-model="form.basicSalary"
                      type="number"
                      placeholder="请输入基本工资"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计件工资"
                        prop="pieceworkSalary">
            <el-input v-model="form.pieceworkSalary"
                      type="number"
                      placeholder="请输入计件工资"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="计时工资"
                        prop="hourlySalary">
            <el-input v-model="form.hourlySalary"
                      type="number"
                      placeholder="请输入计时工资"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="其他收入"
                        prop="otherIncome">
            <el-input v-model="form.otherIncome"
                      type="number"
                      placeholder="请输入其他收入"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="社保个人"
                        prop="socialSecurityIndividuals">
            <el-input v-model="form.socialSecurityIndividuals"
                      type="number"
                      placeholder="请输入社保个人"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公积金个人"
                        prop="providentFundIndividuals">
            <el-input v-model="form.providentFundIndividuals"
                      type="number"
                      placeholder="请输入公积金个人"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="个人所得税"
                        prop="personalIncomeTax">
            <el-input v-model="form.personalIncomeTax"
                      type="number"
                      placeholder="请输入个人所得税"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="其他扣款"
                        prop="otherDeductions">
            <el-input v-model="form.otherDeductions"
                      type="number"
                      placeholder="请输入其他扣款"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注"
                        prop="remark">
            <el-input v-model="form.remark"
                      type="textarea"
                      placeholder="请输入备注"
                      :rows="3"
                      :disabled="operationType === 'view'" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  <FormDialog v-model="dialogVisible"
              :title="operationType === 'add' ? '新建工资表' : '编辑工资表'"
              width="90%"
              @close="closeDia">
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="submitForm"
                   v-if="operationType !== 'view'">
          确定
        </el-button>
      </span>
      <el-button type="info"
                 @click="saveDraft">保存草稿</el-button>
      <el-button type="primary"
                 @click="submitForm">确认提交</el-button>
      <el-button @click="closeDia">取消</el-button>
    </template>
  </el-dialog>
    <div class="form-dia-body">
      <!-- 基础资料 -->
      <el-card class="form-card"
               shadow="never">
        <template #header>
          <span class="card-title"><span class="card-title-line">|</span> 基础资料</span>
          <el-icon class="card-collapse">
            <ArrowUp />
          </el-icon>
        </template>
        <el-form ref="formRef"
                 :model="form"
                 :rules="rules"
                 label-position="top">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="工资主题"
                            prop="salaryTitle">
                <el-input v-model="form.salaryTitle"
                          placeholder="请输入"
                          clearable
                          maxlength="20"
                          show-word-limit />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选择部门"
                            prop="deptIds">
                <el-select v-model="form.deptIds"
                           placeholder="请选择"
                           clearable
                           multiple
                           collapse-tags-tooltip
                           style="width: 100%">
                  <el-option v-for="item in deptOptions"
                             :key="item.deptId"
                             :label="item.deptName"
                             :value="item.deptId" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选择工资月份"
                            prop="salaryMonth">
                <el-date-picker v-model="form.salaryMonth"
                                type="month"
                                value-format="YYYY-MM"
                                format="YYYY-MM"
                                placeholder="请选择工资月份"
                                style="width: 100%"
                                clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备注"
                            prop="remark">
                <el-input v-model="form.remark"
                          placeholder="请输入"
                          clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="支付银行"
                            prop="payBank">
                <el-select v-model="form.payBank"
                           placeholder="请选择"
                           clearable
                           filterable
                           style="width: 100%">
                  <el-option v-for="b in bankOptions"
                             :key="b"
                             :label="b"
                             :value="b" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审核人"
                            prop="auditUserId">
                <el-select v-model="form.auditUserId"
                           placeholder="请选择审核人"
                           clearable
                           filterable
                           style="width: 100%">
                  <el-option v-for="item in userList"
                             :key="item.userId"
                             :label="item.nickName"
                             :value="item.userId" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <!-- 操作按钮 -->
      <div class="toolbar">
        <el-button type="primary"
                   @click="handleGenerate">生成工资表</el-button>
        <el-button @click="handleClear">清空</el-button>
        <el-button @click="handleBatchDelete">删除</el-button>
        <el-button @click="handleTaxForm">个税表</el-button>
      </div>
      <!-- 员工工资详情表格 -->
      <div class="employee-table-wrap">
        <el-table ref="employeeTableRef"
                  :data="employeeList"
                  border
                  max-height="400"
                  @selection-change="onEmployeeSelectionChange">
          <el-table-column type="selection"
                           width="55"
                           align="center" />
          <el-table-column label="员工姓名"
                           prop="staffName"
                           minWidth="100" />
          <el-table-column label="部门"
                           prop="deptName"
                           minWidth="100" />
          <el-table-column label="基本工资"
                           minWidth="110">
            <template #default="{ row }">
              <el-input v-model.number="row.basicSalary"
                        type="number"
                        placeholder="0"
                        size="small"
                        @input="row.basicSalary = parseNum(row.basicSalary)" />
            </template>
          </el-table-column>
          <el-table-column label="计件工资"
                           minWidth="110">
            <template #default="{ row }">
              <el-input v-model.number="row.pieceSalary"
                        type="number"
                        placeholder="0"
                        size="small"
                        disabled
                        @input="row.pieceSalary = parseNum(row.pieceSalary)" />
            </template>
          </el-table-column>
          <el-table-column label="计时工资"
                           minWidth="110">
            <template #default="{ row }">
              <el-input v-model.number="row.hourlySalary"
                        type="number"
                        placeholder="0"
                        size="small"
                        disabled
                        @input="row.hourlySalary = parseNum(row.hourlySalary)" />
            </template>
          </el-table-column>
          <el-table-column label="其他收入"
                           minWidth="110">
            <template #default="{ row }">
              <el-input v-model.number="row.otherIncome"
                        type="number"
                        placeholder="0"
                        size="small"
                        @input="row.otherIncome = parseNum(row.otherIncome)" />
            </template>
          </el-table-column>
          <el-table-column label="社保个人"
                           minWidth="110">
            <template #default="{ row }">
              <el-input v-model.number="row.socialPersonal"
                        type="number"
                        placeholder="0"
                        size="small"
                        disabled
                        @input="row.socialPersonal = parseNum(row.socialPersonal)" />
            </template>
          </el-table-column>
          <el-table-column label="公积金个人"
                           minWidth="120">
            <template #default="{ row }">
              <el-input v-model.number="row.fundPersonal"
                        type="number"
                        placeholder="0"
                        size="small"
                        disabled
                        @input="row.fundPersonal = parseNum(row.fundPersonal)" />
            </template>
          </el-table-column>
          <el-table-column label="其他支出"
                           minWidth="110">
            <template #default="{ row }">
              <el-input v-model.number="row.otherDeduct"
                        type="number"
                        placeholder="0"
                        size="small"
                        disabled
                        @input="row.otherDeduct = parseNum(row.otherDeduct)" />
            </template>
          </el-table-column>
          <el-table-column label="工资个税"
                           minWidth="110">
            <template #default="{ row }">
              <el-input v-model.number="row.salaryTax"
                        type="number"
                        placeholder="0"
                        size="small"
                        disabled
                        @input="row.salaryTax = parseNum(row.salaryTax)" />
            </template>
          </el-table-column>
          <el-table-column label="应发工资"
                           minWidth="110">
            <template #default="{ row }">
              <el-input v-model.number="row.grossSalary"
                        type="number"
                        placeholder="0"
                        size="small"
                        disabled
                        @input="row.grossSalary = parseNum(row.grossSalary)" />
            </template>
          </el-table-column>
          <el-table-column label="应扣工资"
                           minWidth="110">
            <template #default="{ row }">
              <el-input v-model.number="row.deductSalary"
                        type="number"
                        placeholder="0"
                        size="small"
                        disabled
                        @input="row.deductSalary = parseNum(row.deductSalary)" />
            </template>
          </el-table-column>
          <el-table-column label="实发工资"
                           minWidth="110">
            <template #default="{ row }">
              <el-input v-model.number="row.netSalary"
                        type="number"
                        placeholder="0"
                        size="small"
                        disabled
                        @input="row.netSalary = parseNum(row.netSalary)" />
            </template>
          </el-table-column>
          <el-table-column label="备注"
                           minWidth="120">
            <template #default="{ row }">
              <el-input v-model="row.remark"
                        placeholder="请输入"
                        size="small" />
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="80"
                           align="center"
                           fixed="right">
            <template #default="{ row }">
              <el-button type="primary"
                         link
                         @click="removeEmployee(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="!employeeList.length"
             class="table-empty">暂无数据</div>
        <div v-else
             class="salary-total">
          <span class="total-label">工资总额：</span>
          <span class="total-value">¥ {{ totalSalary.toFixed(2) }}</span>
        </div>
      </div>
    </div>
    <!-- 新增人员弹窗 -->
    <el-dialog v-model="addPersonVisible"
               title="新增人员"
               width="400px"
               append-to-body
               @close="addPersonClose">
      <div class="add-person-tree">
        <el-tree ref="personTreeRef"
                 :data="deptStaffTree"
                 show-checkbox
                 node-key="id"
                 :props="{ label: 'label', children: 'children' }"
                 default-expand-all />
      </div>
      <template #footer>
        <el-button @click="addPersonVisible = false">取消</el-button>
        <el-button type="primary"
                   @click="confirmAddPerson">确定</el-button>
      </template>
    </el-dialog>
    <!-- 个税表弹窗 -->
    <el-dialog v-model="taxDialogVisible"
               title="个税表"
               width="700px"
               append-to-body>
      <div class="tax-desc">个人所得税免征额：5000元</div>
      <el-table :data="taxTableData"
                border
                style="width: 100%;margin-bottom: 20px;">
        <el-table-column prop="level"
                         label="级数"
                         width="80"
                         align="center" />
        <el-table-column prop="range"
                         label="全年应纳税所得额/元"
                         min-width="220" />
        <el-table-column prop="rate"
                         label="税率(%)"
                         width="100"
                         align="center" />
        <el-table-column prop="quickDeduction"
                         label="速算扣除数/元"
                         width="160"
                         align="center" />
      </el-table>
    </el-dialog>
  </FormDialog>
</template>

<script setup>
  import { ref, reactive, computed, onMounted } from "vue";
  import { ElMessage } from "element-plus";
  import {
    monthlyStatisticsAdd,
    monthlyStatisticsUpdate,
    staffOnJobList,
  } from "@/api/personnelManagement/monthlyStatistics.js";

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    operationType: {
      type: String,
      default: "add",
    },
    row: {
      type: Object,
      default: () => ({}),
    },
  });
    ref,
    reactive,
    toRefs,
    computed,
    getCurrentInstance,
    nextTick,
  } from "vue";
  import { ArrowUp } from "@element-plus/icons-vue";
  import FormDialog from "@/components/Dialog/FormDialog.vue";
  import { listDept } from "@/api/system/dept.js";
  import { staffOnJobList } from "@/api/personnelManagement/monthlyStatistics.js";
  import { bankList } from "@/api/personnelManagement/bank.js";
  import {
    staffSalaryMainAdd,
    staffSalaryMainUpdate,
    staffSalaryMainCalculateSalary,
  } from "@/api/personnelManagement/staffSalaryMain.js";
  import { userListNoPageByTenantId } from "@/api/system/user.js";

  const emit = defineEmits(["update:modelValue", "close"]);
  const props = defineProps({
    modelValue: { type: Boolean, default: false },
    operationType: { type: String, default: "add" },
    row: { type: Object, default: () => ({}) },
  });

  const { proxy } = getCurrentInstance();

  const dialogVisible = computed({
    get: () => props.modelValue,
    set: val => emit("update:modelValue", val),
  });

  const title = computed(() => {
    if (props.operationType === "add") return "新增薪资台账";
    if (props.operationType === "edit") return "编辑薪资台账";
    return "查看薪资台账";
  const formRef = ref(null);
  const employeeTableRef = ref(null);
  const personTreeRef = ref(null);
  const addPersonVisible = ref(false);
  const taxDialogVisible = ref(false);
  const deptOptions = ref([]);
  const deptStaffTree = ref([]);
  const employeeList = ref([]);
  const selectedEmployees = ref([]);
  const bankOptions = ref([]);
  const userList = ref([]);
  const taxTableData = ref([
    { level: 1, range: "不超过36000元", rate: 3, quickDeduction: 0 },
    { level: 2, range: "超过36000-144000元", rate: 10, quickDeduction: 2520 },
    { level: 3, range: "超过144000-300000元", rate: 20, quickDeduction: 16920 },
    { level: 4, range: "超过300000-420000元", rate: 25, quickDeduction: 31920 },
    { level: 5, range: "超过420000-660000元", rate: 30, quickDeduction: 52920 },
    { level: 6, range: "超过660000-960000元", rate: 35, quickDeduction: 85920 },
    { level: 7, range: "超过960000元", rate: 45, quickDeduction: 181920 },
  ]);

  function parseNum(v) {
    if (v === "" || v == null) return 0;
    const n = Number(v);
    return isNaN(n) ? 0 : n;
  }

  // 基础资料表单
  const data = reactive({
    form: {
      id: undefined,
      salaryTitle: "",
      deptIds: [],
      salaryMonth: "",
      remark: "",
      payBank: "",
      auditUserId: undefined,
    },
    rules: {
      salaryTitle: [
        { required: true, message: "请输入工资主题", trigger: "blur" },
      ],
      deptIds: [{ required: true, message: "请选择部门", trigger: "change" }],
      salaryMonth: [
        { required: true, message: "请选择工资月份", trigger: "change" },
      ],
      auditUserId: [
        { required: true, message: "请选择审核人", trigger: "change" },
      ],
    },
  });
  const { form, rules } = toRefs(data);

  // 计算工资总额（所有员工实发工资之和）
  const totalSalary = computed(() => {
    return employeeList.value.reduce((sum, e) => sum + parseNum(e.netSalary), 0);
  });

  const formRef = ref();
  const form = reactive({
    id: "",
    payDate: "",
    staffId: "",
    basicSalary: 0,
    pieceworkSalary: 0,
    hourlySalary: 0,
    otherIncome: 0,
    socialSecurityIndividuals: 0,
    providentFundIndividuals: 0,
    personalIncomeTax: 0,
    otherDeductions: 0,
    payableWages: 0,
    deductibleWages: 0,
    actualWages: 0,
    remark: "",
  // 根据审核人ID获取审核人名称
  const auditUserName = computed(() => {
    if (!form.value.auditUserId) return "";
    const user = userList.value.find(u => u.userId === form.value.auditUserId);
    return user ? user.nickName : "";
  });

  const rules = {
    payDate: [{ required: true, message: "请选择统计月份", trigger: "change" }],
    staffId: [{ required: true, message: "请选择员工", trigger: "change" }],
    basicSalary: [{ required: true, message: "请输入基本工资", trigger: "blur" }],
  const loadBankOptions = () => {
    return bankList().then(res => {
      const list = Array.isArray(res?.data) ? res.data : [];
      bankOptions.value = list
        .map(b => (b?.bankName == null ? "" : String(b.bankName).trim()))
        .filter(v => v !== "");
    });
  };

  const userList = ref([]);

  const loadUserList = () => {
    // userListNoPage().then(res => {
    //   userList.value = res.data || [];
    // });
    staffOnJobList().then(res => {
    return userListNoPageByTenantId().then(res => {
      userList.value = res.data || [];
    });
  };

  const openDialog = (type, row) => {
    // 重置表单
    Object.assign(form, {
      id: "",
      payDate: "",
      staffId: "",
      basicSalary: 0,
      pieceworkSalary: 0,
      hourlySalary: 0,
      otherIncome: 0,
      socialSecurityIndividuals: 0,
      providentFundIndividuals: 0,
      personalIncomeTax: 0,
      otherDeductions: 0,
      payableWages: 0,
      deductibleWages: 0,
      actualWages: 0,
      remark: "",
  // 扁平化部门树供下拉使用
  function flattenDept(tree, list = []) {
    if (!tree?.length) return list;
    tree.forEach(node => {
      list.push({ deptId: node.deptId, deptName: node.deptName });
      if (node.children?.length) flattenDept(node.children, list);
    });
    return list;
  }

    if (type === "add") {
      dialogVisible.value = true;
    } else if (type === "edit" || type === "view") {
      if (row && row.id) {
        Object.assign(form, row);
        dialogVisible.value = true;
      }
    }
  const loadDeptOptions = () => {
    listDept().then(res => {
      const tree = res.data ?? [];
      deptOptions.value = flattenDept(tree);
    });
  };

  const submitForm = () => {
    formRef.value.validate(valid => {
      if (valid) {
        form.basicSalary = Number(form.basicSalary);
        form.pieceworkSalary = Number(form.pieceworkSalary);
        form.hourlySalary = Number(form.hourlySalary);
        form.otherIncome = Number(form.otherIncome);
        form.socialSecurityIndividuals = Number(form.socialSecurityIndividuals);
        form.providentFundIndividuals = Number(form.providentFundIndividuals);
        form.personalIncomeTax = Number(form.personalIncomeTax);
        form.otherDeductions = Number(form.otherDeductions);

        // 计算应发工资、应扣工资和实发工资
        const payableWages =
          form.basicSalary +
          form.pieceworkSalary +
          form.hourlySalary +
          form.otherIncome;
        const deductibleWages =
          form.socialSecurityIndividuals +
          form.providentFundIndividuals +
          form.personalIncomeTax +
          form.otherDeductions;
        const actualWages = payableWages - deductibleWages;

        const submitData = {
          ...form,
          payableWages,
          deductibleWages,
          actualWages,
        };

        if (props.operationType === "add") {
          monthlyStatisticsAdd(submitData).then(res => {
            if (res.code === 200) {
              ElMessage.success("新增成功");
              dialogVisible.value = false;
              emit("close");
            } else {
              ElMessage.error(res.msg || "新增失败");
            }
  // 构建 部门-人员 树（用于新增人员弹窗）
  const loadDeptStaffTree = () => {
    Promise.all([listDept(), staffOnJobList()]).then(([deptRes, staffRes]) => {
      const tree = deptRes.data ?? [];
      const staffList = staffRes.data ?? [];
      const deptMap = new Map();
      function walk(nodes) {
        nodes.forEach(node => {
          deptMap.set(node.deptId, {
            id: "dept_" + node.deptId,
            deptId: node.deptId,
            label: node.deptName,
            type: "dept",
            children: [],
          });
        } else if (props.operationType === "edit") {
          monthlyStatisticsUpdate(submitData).then(res => {
            if (res.code === 200) {
              ElMessage.success("更新成功");
              dialogVisible.value = false;
              emit("close");
            } else {
              ElMessage.error(res.msg || "更新失败");
            }
          if (node.children?.length) walk(node.children);
        });
      }
      walk(tree);
      staffList.forEach(s => {
        const deptId = s.deptId ?? s.dept_id;
        const node = deptMap.get(deptId);
        if (node) {
          node.children.push({
            id: s.id ?? s.staffId,
            staffId: s.id ?? s.staffId,
            label: s.staffName ?? s.name,
            type: "staff",
            ...s,
          });
        }
      });
      deptStaffTree.value = Array.from(deptMap.values()).filter(
        n => n.children && n.children.length > 0
      );
    });
  };

  const openDialog = (type, row) => {
    nextTick(() => {
      loadDeptOptions();
      loadBankOptions();
      loadUserList();
      employeeList.value = [];
      Object.assign(form.value, {
        id: undefined,
        salaryTitle: "",
        deptIds: [],
        salaryMonth: "",
        remark: "",
        payBank: "",
        auditUserId: undefined,
      });
      // 编辑：列表页已返回主表字段；这里只做回显（明细由“生成工资表/计算工资”得到）
      if (type === "edit" && row?.id) {
        form.value.id = row.id;
        form.value.salaryTitle = row.salaryTitle ?? "";
        // deptIds 后端是字符串（多个用逗号分隔）；当前表单仍是单选 deptId
        form.value.deptIds = row.deptIds
          ? String(row.deptIds)
              .split(",")
              .map(id => Number(id.trim()))
              .filter(Boolean)
          : [];
        form.value.salaryMonth = row.salaryMonth ?? "";
        form.value.remark = row.remark ?? "";
        form.value.payBank = row.payBank ?? "";
        form.value.auditUserId = row.auditUserId ?? undefined;

        // 如果有员工明细数据，直接反显
        if (row.staffSalaryDetailList && row.staffSalaryDetailList.length > 0) {
          employeeList.value = row.staffSalaryDetailList.map(e => ({
            staffOnJobId: e.staffOnJobId ?? e.staffId ?? e.id,
            id: e.staffOnJobId ?? e.staffId ?? e.id,
            staffName: e.staffName ?? "",
            postName: e.postName ?? "",
            deptName: e.deptName ?? "",
            basicSalary: parseNum(e.basicSalary),
            pieceSalary: parseNum(e.pieceSalary),
            hourlySalary: parseNum(e.hourlySalary),
            otherIncome: parseNum(e.otherIncome),
            socialPersonal: parseNum(e.socialPersonal),
            fundPersonal: parseNum(e.fundPersonal),
            otherDeduct: parseNum(e.otherDeduct),
            salaryTax: parseNum(e.salaryTax),
            grossSalary: parseNum(e.grossSalary),
            deductSalary: parseNum(e.deductSalary),
            netSalary: parseNum(e.netSalary),
            remark: e.remark ?? "",
          }));
        }
      }
    });
  };

  onMounted(() => {
    loadUserList();
  });
  const openAddPerson = () => {
    loadDeptStaffTree();
    addPersonVisible.value = true;
    nextTick(() => {
      personTreeRef.value?.setCheckedKeys([]);
    });
  };

  defineExpose({
    openDialog,
  });
  const addPersonClose = () => {};

  const confirmAddPerson = () => {
    const tree = personTreeRef.value;
    if (!tree) {
      addPersonVisible.value = false;
      return;
    }
    const checked = tree.getCheckedNodes();
    const staffNodes = checked.filter(n => n.type === "staff");
    const existIds = new Set(employeeList.value.map(e => e.staffId || e.id));
    staffNodes.forEach(node => {
      const id = node.staffId ?? node.id;
      if (existIds.has(id)) return;
      existIds.add(id);
      employeeList.value.push({
        staffOnJobId: id,
        id,
        staffName: node.label,
        postName: node.postName ?? node.post ?? "",
        deptName: node.deptName ?? "",
        basicSalary: 0,
        pieceSalary: 0,
        hourlySalary: 0,
        otherIncome: 0,
        socialPersonal: 0,
        fundPersonal: 0,
        otherDeduct: 0,
        salaryTax: 0,
        grossSalary: 0,
        deductSalary: 0,
        netSalary: 0,
        remark: "",
      });
    });
    addPersonVisible.value = false;
  };

  const removeEmployee = row => {
    employeeList.value = employeeList.value.filter(
      e => (e.staffOnJobId || e.id) !== (row.staffOnJobId || row.id)
    );
  };

  const onEmployeeSelectionChange = selection => {
    selectedEmployees.value = selection;
  };

  const handleBatchDelete = () => {
    if (!selectedEmployees.value?.length) {
      proxy.$modal.msgWarning("请先勾选要删除的员工");
      return;
    }
    const ids = new Set(selectedEmployees.value.map(e => e.staffOnJobId || e.id));
    employeeList.value = employeeList.value.filter(
      e => !ids.has(e.staffOnJobId || e.id)
    );
  };

  const handleGenerate = () => {
    if (!form.value.deptIds?.length) {
      proxy.$modal.msgWarning("请先选择部门");
      return;
    }
    if (!form.value.salaryMonth) {
      proxy.$modal.msgWarning("请先选择工资月份");
      return;
    }
    const payload = {
      ids: form.value.deptIds,
      date: form.value.salaryMonth,
    };
    staffSalaryMainCalculateSalary(payload).then(res => {
      const list = Array.isArray(res?.data) ? res.data : [];
      if (!list.length) {
        proxy.$modal.msgWarning("未计算到工资数据");
        return;
      }
      employeeList.value = list.map(e => ({
        ...e,
        staffOnJobId: e.staffOnJobId ?? e.staffId ?? e.id,
        staffName: e.staffName,
        postName: e.postName,
        deptName: e.deptName,
        basicSalary: parseNum(e.basicSalary),
        pieceSalary: parseNum(e.pieceSalary),
        hourlySalary: parseNum(e.hourlySalary),
        otherIncome: parseNum(e.otherIncome),
        socialPersonal: parseNum(e.socialPersonal),
        fundPersonal: parseNum(e.fundPersonal),
        otherDeduct: parseNum(e.otherDeduct),
        salaryTax: parseNum(e.salaryTax),
        grossSalary: parseNum(e.grossSalary),
        deductSalary: parseNum(e.deductSalary),
        netSalary: parseNum(e.netSalary),
        remark: e.remark ?? "",
      }));
      proxy.$modal.msgSuccess("生成成功");
    });
  };

  const handleClear = () => {
    proxy.$modal
      .confirm("确定清空当前员工列表吗？")
      .then(() => {
        employeeList.value = [];
      })
      .catch(() => {});
  };

  const handleTaxForm = () => {
    taxDialogVisible.value = true;
  };

  const submitForm = () => {
    formRef.value?.validate(valid => {
      if (!valid) return;
      saveData(3); // 确认提交，状态为3（待审核）
    });
  };

  const saveDraft = () => {
    formRef.value?.validate(valid => {
      if (!valid) return;
      saveData(1); // 保存草稿，状态为1（草稿）
    });
  };

  const saveData = status => {
    const payload = {
      id: form.value.id,
      salaryTitle: form.value.salaryTitle,
      deptIds: form.value.deptIds?.length ? form.value.deptIds.join(",") : "",
      salaryMonth: form.value.salaryMonth,
      remark: form.value.remark,
      payBank: form.value.payBank,
      auditUserId: form.value.auditUserId,
      auditUserName: auditUserName.value,
      totalSalary: totalSalary.value,
      staffSalaryDetailList: employeeList.value.map(e => ({
        staffOnJobId: e.staffOnJobId ?? e.staffId ?? e.id,
        staffName: e.staffName,
        postName: e.postName ?? "",
        deptName: e.deptName ?? "",
        basicSalary: parseNum(e.basicSalary),
        pieceSalary: parseNum(e.pieceSalary),
        hourlySalary: parseNum(e.hourlySalary),
        otherIncome: parseNum(e.otherIncome),
        socialPersonal: parseNum(e.socialPersonal),
        fundPersonal: parseNum(e.fundPersonal),
        otherDeduct: parseNum(e.otherDeduct),
        salaryTax: parseNum(e.salaryTax),
        grossSalary: parseNum(e.grossSalary),
        deductSalary: parseNum(e.deductSalary),
        netSalary: parseNum(e.netSalary),
        remark: e.remark ?? "",
      })),
    };
    if (props.operationType === "add") {
      staffSalaryMainAdd({ ...payload, status }).then(() => {
        proxy.$modal.msgSuccess(status === 1 ? "草稿保存成功" : "提交成功");
        closeDia();
      });
    } else {
      staffSalaryMainUpdate({ ...payload, status }).then(() => {
        proxy.$modal.msgSuccess(status === 1 ? "草稿保存成功" : "提交成功");
        closeDia();
      });
    }
  };

  const closeDia = () => {
    dialogVisible.value = false;
    emit("close");
  };

  defineExpose({ openDialog });
</script>

<style scoped>
  .form-dia-body {
    padding: 0;
  }
  .card-title-line {
    color: #f56c6c;
    margin-right: 4px;
  }
  .form-card {
    margin-bottom: 16px;
  }
  .form-card :deep(.el-card__header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
  }
  .card-title {
    font-weight: 500;
  }
  .card-collapse {
    color: #999;
    cursor: pointer;
  }
  .toolbar {
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .employee-table-wrap {
    position: relative;
    min-height: 120px;
  }
  .table-empty {
    text-align: center;
    padding: 24px;
    color: #999;
    font-size: 14px;
  }
  .add-person-tree {
    max-height: 360px;
    overflow-y: auto;
    padding: 8px 0;
  }
  .tax-desc {
    margin-bottom: 12px;
    font-size: 14px;
    color: #606266;
  }
  .dialog-footer {
    text-align: right;
  }
</style>
  .salary-total {
    margin-top: 16px;
    padding: 12px 16px;
    background-color: #f5f7fa;
    border-radius: 4px;
    text-align: right;
    font-size: 16px;
  }
  .salary-total .total-label {
    color: #606266;
    margin-right: 8px;
  }
  .salary-total .total-value {
    color: #f56c6c;
    font-weight: bold;
    font-size: 18px;
  }
</style>