人员台账增加民族筛选、补贴配置页面、人员薪资修改工资表、增加厂家管理页面、库存管理增加来源字段和废品库

zhangwencui

4 天以前 332cfbec0e7dddadc5c5f676d183d06210abc981

人员台账增加民族筛选、补贴配置页面、人员薪资修改工资表、增加厂家管理页面、库存管理增加来源字段和废品库

 src/api/personnelManagement/subsidyConfig.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
import request from "@/utils/request";

// æŸ¥è¯¢è¡¥è´´é…ç½®åˆ—表
export function listSubsidyConfiguration(query) {
  return request({
    url: "/subsidyConfiguration/list",
    method: "get",
    params: query,
  });
}

// ä¿å­˜è¡¥è´´é…ç½®
export function saveSubsidyConfiguration(data) {
  return request({
    url: "/subsidyConfiguration/save",
    method: "post",
    data: data,
  });
}

 src/views/inventoryManagement/manufacturer/components/BlacklistTab.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,583 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">厂家档案：</span>
        <el-input v-model="searchForm.supplierName"
                  style="width: 240px"
                  placeholder="输入厂家名称搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
      </div>
      <div>
        <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="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"></PIMTable>
    </div>
    <el-dialog v-model="dialogFormVisible"
               :title="operationType === 'add' ? '新增厂家信息' : '编辑厂家信息'"
               width="70%"
               @close="closeDia">
      <el-form :model="form"
               label-width="140px"
               label-position="top"
               :rules="rules"
               ref="formRef">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="厂家名称："
                          prop="supplierName">
              <el-input v-model="form.supplierName"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纳税人识别号："
                          prop="taxpayerIdentificationNum">
              <el-input v-model="form.taxpayerIdentificationNum"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="公司地址："
                          prop="companyAddress">
              <el-input v-model="form.companyAddress"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司电话："
                          prop="companyPhone">
              <el-input v-model="form.companyPhone"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="开户行："
                          prop="bankAccountName">
              <el-input v-model="form.bankAccountName"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号："
                          prop="bankAccountNum">
              <el-input v-model="form.bankAccountNum"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="联系人："
                          prop="contactUserName">
              <el-input v-model="form.contactUserName"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话："
                          prop="contactUserPhone">
              <el-input v-model="form.contactUserPhone"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维护人："
                          prop="maintainUserId">
              <el-select v-model="form.maintainUserId"
                         placeholder="请选择"
                         clearable
                         disabled>
                <el-option v-for="item in userList"
                           :key="item.nickName"
                           :label="item.nickName"
                           :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维护时间："
                          prop="maintainTime">
              <el-date-picker style="width: 100%"
                              v-model="form.maintainTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="厂家类型："
                          prop="supplierType">
              <el-select v-model="form.supplierType"
                         placeholder="请选择"
                         clearable>
                <el-option label="甲"
                           value="甲" />
                <el-option label="乙"
                           value="乙" />
                <el-option label="丙"
                           value="丙" />
                <el-option label="丁"
                           value="丁" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否白名单："
                          prop="isWhite">
              <el-select v-model="form.isWhite"
                         placeholder="请选择"
                         clearable>
                <el-option label="是"
                           :value="0" />
                <el-option label="否"
                           :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- åŽ‚家导入对话框 -->
    <el-dialog :title="upload.title"
               v-model="upload.open"
               width="400px"
               append-to-body>
      <el-upload ref="uploadRef"
                 :limit="1"
                 accept=".xlsx, .xls"
                 :headers="upload.headers"
                 :action="upload.url + '?updateSupport=' + upload.updateSupport"
                 :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress"
                 :on-success="handleFileSuccess"
                 :on-error="handleFileError"
                 :auto-upload="false"
                 drag>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary"
                     :underline="false"
                     style="font-size: 12px; vertical-align: baseline"
                     @click="importTemplate">下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitFileForm">ç¡® å®š</el-button>
          <el-button @click="upload.open = false">取 æ¶ˆ</el-button>
        </div>
      </template>
    </el-dialog>
    <FileList v-if="fileListDialogVisible"
              v-model:visible="fileListDialogVisible"
              record-type="supplier_manage"
              :record-id="recordId" />
  </div>
</template>

<script setup>
  import { onMounted, ref } from "vue";
  import { Search } from "@element-plus/icons-vue";
  import { delSupplier } from "@/api/basicData/supplierManageFile.js";
  import { ElMessageBox } from "element-plus";
  import { userListNoPage } from "@/api/system/user.js";
  import {
    addSupplier,
    getSupplier,
    listSupplier,
    updateSupplier,
  } from "@/api/basicData/supplierManageFile.js";
  import useUserStore from "@/store/modules/user";
  import { getToken } from "@/utils/auth.js";
  const FileList = defineAsyncComponent(() =>
    import("@/components/Dialog/FileList.vue")
  );
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();

  const tableColumn = ref([
    {
      label: "厂家名称",
      prop: "supplierName",
      width: 250,
    },
    {
      label: "厂家类型",
      prop: "supplierType",
      width: 120,
    },
    {
      label: "纳税人识别号",
      prop: "taxpayerIdentificationNum",
      width: 230,
    },
    {
      label: "公司地址",
      prop: "companyAddress",
      width: 220,
    },
    {
      label: "联系方式",
      prop: "companyPhone",
      width: 150,
    },
    {
      label: "开户行",
      prop: "bankAccountName",
      width: 220,
    },
    {
      label: "账号",
      prop: "bankAccountNum",
      width: 220,
    },
    {
      label: "联系人",
      prop: "contactUserName",
    },
    {
      label: "联系电话",
      prop: "contactUserPhone",
      width: 150,
    },
    {
      label: "维护人",
      prop: "maintainUserName",
    },

    {
      label: "维护时间",
      prop: "maintainTime",
      width: 100,
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 150,
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openForm("edit", row);
          },
        },
        {
          //资质附件
          name: "资质文件",
          type: "text",
          clickFun: row => {
            openFileDialog(row);
          },
        },
      ],
    },
  ]);
  const tableData = ref([]);
  const selectedRows = ref([]);
  const userList = ref([]);
  const tableLoading = ref(false);
  const page = reactive({
    current: 1,
    size: 100,
    total: 0,
  });
  const fileListDialogVisible = ref(false);
  const recordId = ref();
  // ç”¨æˆ·ä¿¡æ¯è¡¨å•å¼¹æ¡†æ•°æ®
  const operationType = ref("");
  const dialogFormVisible = ref(false);
  const data = reactive({
    searchForm: {
      supplierName: "",
    },
    form: {
      supplierName: "",
      taxpayerIdentificationNum: "",
      companyAddress: "",
      companyPhone: "",
      bankAccountName: "",
      bankAccountNum: "",
      contactUserName: "",
      contactUserPhone: "",
      maintainUserId: "",
      maintainTime: "",
      supplierType: "",
      isWhite: "",
    },
    rules: {
      supplierName: [{ required: true, message: "请输入", trigger: "blur" }],
      taxpayerIdentificationNum: [
        { required: true, message: "请输入", trigger: "blur" },
      ],
      companyAddress: [{ required: true, message: "请输入", trigger: "blur" }],
      companyPhone: [{ required: true, message: "请输入", trigger: "blur" }],
      bankAccountName: [{ required: true, message: "请输入", trigger: "blur" }],
      bankAccountNum: [{ required: true, message: "请输入", trigger: "blur" }],
      contactUserName: [{ required: false, message: "请输入", trigger: "blur" }],
      contactUserPhone: [{ required: false, message: "请输入", trigger: "blur" }],
      maintainUserId: [{ required: false, message: "请选择", trigger: "change" }],
      maintainTime: [{ required: false, message: "请选择", trigger: "change" }],
      supplierType: [
        { required: true, message: "请选择厂家类型", trigger: "change" },
      ],
    },
  });
  const { searchForm, form, rules } = toRefs(data);

  // æŸ¥è¯¢åˆ—表
  /** æœç´¢æŒ‰é’®æ“ä½œ */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  /** æäº¤ä¸Šä¼ æ–‡ä»¶ */
  function submitFileForm() {
    upload.isUploading = true;
    proxy.$refs["uploadRef"].submit();
  }
  const getList = () => {
    tableLoading.value = true;
    listSupplier({ ...searchForm.value, ...page, isWhite: 1 }).then(res => {
      tableLoading.value = false;
      tableData.value = res.data.records;
      page.total = res.data.total;
    });
  };
  const upload = reactive({
    // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚（厂家导入）
    open: false,
    // å¼¹å‡ºå±‚标题（厂家导入）
    title: "",
    // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
    isUploading: false,
    // æ˜¯å¦æ›´æ–°å·²ç»å­˜åœ¨çš„用户数据
    updateSupport: 1,
    // è®¾ç½®ä¸Šä¼ çš„请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // ä¸Šä¼ çš„地址
    url: import.meta.env.VITE_APP_BASE_API + "/system/supplier/import",
  });
  /** å¯¼å…¥æŒ‰é’®æ“ä½œ */
  function handleImport() {
    upload.title = "厂家导入";
    upload.open = true;
  }
  /** ä¸‹è½½æ¨¡æ¿ */
  function importTemplate() {
    proxy.download("/system/supplier/downloadTemplate", {}, "厂家导入模板.xlsx");
  }

  /**文件上传中处理 */
  const handleFileUploadProgress = (event, file, fileList) => {
    upload.isUploading = true;
  };

  /** æ–‡ä»¶ä¸Šä¼ æˆåŠŸå¤„理 */
  const handleFileSuccess = (response, file, fileList) => {
    upload.isUploading = false;
    if (response.code === 200) {
      proxy.$modal.msgSuccess("文件上传成功");
      upload.open = false;
      proxy.$refs["uploadRef"].clearFiles();
      getList();
    } else if (response.code === 500) {
      proxy.$modal.msgError(response.msg);
    } else {
      proxy.$modal.msgWarning(response.msg);
    }
  };

  /** æ–‡ä»¶ä¸Šä¼ å¤±è´¥å¤„理 */
  const handleFileError = (error, file, fileList) => {
    upload.isUploading = false;
    proxy.$modal.msgError("文件上传失败");
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };
  // æ‰“开弹框
  const openForm = (type, row) => {
    operationType.value = type;
    form.value = {};
    form.value.maintainUserId = userStore.id;
    form.value.maintainTime = getCurrentDate();
    userListNoPage().then(res => {
      userList.value = res.data;
    });
    if (type === "edit") {
      getSupplier(row.id).then(res => {
        form.value = { ...res.data };
      });
    }
    dialogFormVisible.value = true;
  };
  // æäº¤è¡¨å•
  const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
      if (valid) {
        if (operationType.value === "edit") {
          submitEdit();
        } else {
          submitAdd();
        }
      }
    });
  };
  // æäº¤æ–°å¢ž
  const submitAdd = () => {
    addSupplier(form.value).then(res => {
      proxy.$modal.msgSuccess("提交成功");
      closeDia();
      getList();
    });
  };
  // æäº¤ä¿®æ”¹
  const submitEdit = () => {
    updateSupplier(form.value).then(res => {
      proxy.$modal.msgSuccess("提交成功");
      closeDia();
      getList();
    });
  };
  // å…³é—­å¼¹æ¡†
  const closeDia = () => {
    proxy.resetForm("formRef");
    dialogFormVisible.value = false;
  };
  // å¯¼å‡º
  const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        proxy.download(
          "/system/supplier/export",
          { isWhite: 1 },
          "厂家档案.xlsx"
        );
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  // åˆ é™¤
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      // æ£€æŸ¥æ˜¯å¦æœ‰ä»–人维护的数据
      const unauthorizedData = selectedRows.value.filter(
        item => item.maintainUserName !== userStore.nickName
      );
      if (unauthorizedData.length > 0) {
        proxy.$modal.msgWarning("不可删除他人维护的数据");
        return;
      }
      ids = selectedRows.value.map(item => item.id);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        tableLoading.value = true;
        delSupplier(ids)
          .then(res => {
            proxy.$modal.msgSuccess("删除成功");
            getList();
          })
          .finally(() => {
            tableLoading.value = false;
          });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };

  // èŽ·å–当前日期并格式化为 YYYY-MM-DD
  function getCurrentDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0"); // æœˆä»½ä»Ž0开始
    const day = String(today.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }
  // æ‰“开附件弹框
  const openFileDialog = async row => {
    recordId.value = row.id;
    fileListDialogVisible.value = true;
  };

  onMounted(() => {
    getList();
  });

  defineExpose({
    getList,
  });
</script>



 src/views/inventoryManagement/manufacturer/components/HomeTab.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,588 @@
<template>
  <div>
    <div class="search_form">
      <div style="margin-bottom: 10px;">
        <span class="search_title">厂家档案：</span>
        <el-input v-model="searchForm.supplierName"
                  style="width: 240px"
                  placeholder="输入厂家名称搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
      </div>
      <div style="margin-bottom: 10px;">
        <el-button type="primary"
                   @click="openForm('add')">新增厂家</el-button>
        <el-button @click="handleOut">导出</el-button>
        <el-button type="info"
                   plain
                   icon="Upload"
                   @click="handleImport">导入</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"></PIMTable>
    </div>
    <el-dialog v-model="dialogFormVisible"
               :title="operationType === 'add' ? '新增厂家信息' : '编辑厂家信息'"
               width="70%"
               @close="closeDia">
      <el-form :model="form"
               label-width="140px"
               label-position="top"
               :rules="rules"
               ref="formRef">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="厂家名称："
                          prop="supplierName">
              <el-input v-model="form.supplierName"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纳税人识别号："
                          prop="taxpayerIdentificationNum">
              <el-input v-model="form.taxpayerIdentificationNum"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="公司地址："
                          prop="companyAddress">
              <el-input v-model="form.companyAddress"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司电话："
                          prop="companyPhone">
              <el-input v-model="form.companyPhone"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="开户行："
                          prop="bankAccountName">
              <el-input v-model="form.bankAccountName"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号："
                          prop="bankAccountNum">
              <el-input v-model="form.bankAccountNum"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="联系人："
                          prop="contactUserName">
              <el-input v-model="form.contactUserName"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话："
                          prop="contactUserPhone">
              <el-input v-model="form.contactUserPhone"
                        placeholder="请输入"
                        clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维护人："
                          prop="maintainUserId">
              <el-select v-model="form.maintainUserId"
                         placeholder="请选择"
                         clearable
                         disabled>
                <el-option v-for="item in userList"
                           :key="item.nickName"
                           :label="item.nickName"
                           :value="item.userId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维护时间："
                          prop="maintainTime">
              <el-date-picker style="width: 100%"
                              v-model="form.maintainTime"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="厂家类型："
                          prop="supplierType">
              <el-select v-model="form.supplierType"
                         placeholder="请选择"
                         clearable>
                <el-option label="甲"
                           value="甲" />
                <el-option label="乙"
                           value="乙" />
                <el-option label="丙"
                           value="丙" />
                <el-option label="丁"
                           value="丁" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否白名单："
                          prop="isWhite">
              <el-select v-model="form.isWhite"
                         placeholder="请选择"
                         clearable>
                <el-option label="是"
                           :value="0" />
                <el-option label="否"
                           :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- åŽ‚家导入对话框 -->
    <el-dialog :title="upload.title"
               v-model="upload.open"
               width="400px"
               append-to-body>
      <el-upload ref="uploadRef"
                 :limit="1"
                 accept=".xlsx, .xls"
                 :headers="upload.headers"
                 :action="upload.url + '?updateSupport=' + upload.updateSupport"
                 :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress"
                 :on-success="handleFileSuccess"
                 :on-error="handleFileError"
                 :auto-upload="false"
                 drag>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary"
                     :underline="false"
                     style="font-size: 12px; vertical-align: baseline"
                     @click="importTemplate">下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitFileForm">ç¡® å®š</el-button>
          <el-button @click="upload.open = false">取 æ¶ˆ</el-button>
        </div>
      </template>
    </el-dialog>
    <FileList v-if="fileListDialogVisible"
              v-model:visible="fileListDialogVisible"
              record-type="supplier_manage"
              :record-id="recordId" />
  </div>
</template>

<script setup>
  import { onMounted, ref } from "vue";
  import { Search } from "@element-plus/icons-vue";
  import { delSupplier } from "@/api/basicData/supplierManageFile.js";
  import { ElMessageBox } from "element-plus";
  import { userListNoPage } from "@/api/system/user.js";
  import {
    addSupplier,
    getSupplier,
    listSupplier,
    updateSupplier,
  } from "@/api/basicData/supplierManageFile.js";
  import useUserStore from "@/store/modules/user";
  import { getToken } from "@/utils/auth.js";
  const FileList = defineAsyncComponent(() =>
    import("@/components/Dialog/FileList.vue")
  );
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();

  const tableColumn = ref([
    {
      label: "厂家名称",
      prop: "supplierName",
      width: 250,
    },
    {
      label: "厂家类型",
      prop: "supplierType",
      width: 120,
    },
    {
      label: "纳税人识别号",
      prop: "taxpayerIdentificationNum",
      width: 230,
    },
    {
      label: "公司地址",
      prop: "companyAddress",
      width: 220,
    },
    {
      label: "联系方式",
      prop: "companyPhone",
      width: 150,
    },
    {
      label: "开户行",
      prop: "bankAccountName",
      width: 220,
    },
    {
      label: "账号",
      prop: "bankAccountNum",
      width: 220,
    },
    {
      label: "联系人",
      prop: "contactUserName",
    },
    {
      label: "联系电话",
      prop: "contactUserPhone",
      width: 150,
    },
    {
      label: "维护人",
      prop: "maintainUserName",
    },

    {
      label: "维护时间",
      prop: "maintainTime",
      width: 100,
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 150,
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openForm("edit", row);
          },
        },
        {
          //资质附件
          name: "资质文件",
          type: "text",
          clickFun: row => {
            openFileDialog(row);
          },
        },
      ],
    },
  ]);
  const tableData = ref([]);
  const selectedRows = ref([]);
  const userList = ref([]);
  const tableLoading = ref(false);
  const fileListDialogVisible = ref(false);
  const recordId = ref();
  const page = reactive({
    current: 1,
    size: 100,
    total: 0,
  });
  // ç”¨æˆ·ä¿¡æ¯è¡¨å•å¼¹æ¡†æ•°æ®
  const operationType = ref("");
  const dialogFormVisible = ref(false);
  const data = reactive({
    searchForm: {
      supplierName: "",
    },
    form: {
      supplierName: "",
      taxpayerIdentificationNum: "",
      companyAddress: "",
      companyPhone: "",
      bankAccountName: "",
      bankAccountNum: "",
      contactUserName: "",
      contactUserPhone: "",
      maintainUserId: "",
      maintainTime: "",
      supplierType: "",
      isWhite: "",
    },
    rules: {
      supplierName: [{ required: true, message: "请输入", trigger: "blur" }],
      taxpayerIdentificationNum: [
        { required: true, message: "请输入", trigger: "blur" },
      ],
      companyAddress: [{ required: true, message: "请输入", trigger: "blur" }],
      companyPhone: [{ required: true, message: "请输入", trigger: "blur" }],
      bankAccountName: [{ required: true, message: "请输入", trigger: "blur" }],
      bankAccountNum: [{ required: true, message: "请输入", trigger: "blur" }],
      contactUserName: [{ required: false, message: "请输入", trigger: "blur" }],
      contactUserPhone: [{ required: false, message: "请输入", trigger: "blur" }],
      maintainUserId: [{ required: false, message: "请选择", trigger: "change" }],
      maintainTime: [{ required: false, message: "请选择", trigger: "change" }],
      supplierType: [
        { required: true, message: "请选择厂家类型", trigger: "change" },
      ],
    },
  });
  const { searchForm, form, rules } = toRefs(data);

  // æŸ¥è¯¢åˆ—表
  /** æœç´¢æŒ‰é’®æ“ä½œ */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  /** æäº¤ä¸Šä¼ æ–‡ä»¶ */
  function submitFileForm() {
    upload.isUploading = true;
    proxy.$refs["uploadRef"].submit();
  }
  const getList = () => {
    tableLoading.value = true;
    listSupplier({ ...searchForm.value, ...page, isWhite: 0 }).then(res => {
      tableLoading.value = false;
      tableData.value = res.data.records;
      page.total = res.data.total;
    });
  };
  const upload = reactive({
    // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚（厂家导入）
    open: false,
    // å¼¹å‡ºå±‚标题（厂家导入）
    title: "",
    // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
    isUploading: false,
    // æ˜¯å¦æ›´æ–°å·²ç»å­˜åœ¨çš„用户数据
    updateSupport: 1,
    // è®¾ç½®ä¸Šä¼ çš„请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // ä¸Šä¼ çš„地址
    url: import.meta.env.VITE_APP_BASE_API + "/system/supplier/import",
  });
  /** å¯¼å…¥æŒ‰é’®æ“ä½œ */
  function handleImport() {
    upload.title = "厂家导入";
    upload.open = true;
  }
  /** ä¸‹è½½æ¨¡æ¿ */
  function importTemplate() {
    proxy.download("/system/supplier/downloadTemplate", {}, "厂家导入模板.xlsx");
  }

  /**文件上传中处理 */
  const handleFileUploadProgress = (event, file, fileList) => {
    upload.isUploading = true;
  };

  /** æ–‡ä»¶ä¸Šä¼ æˆåŠŸå¤„理 */
  const handleFileSuccess = (response, file, fileList) => {
    upload.isUploading = false;
    if (response.code === 200) {
      proxy.$modal.msgSuccess("文件上传成功");
      upload.open = false;
      proxy.$refs["uploadRef"].clearFiles();
      getList();
    } else if (response.code === 500) {
      proxy.$modal.msgError(response.msg);
    } else {
      proxy.$modal.msgWarning(response.msg);
    }
  };

  /** æ–‡ä»¶ä¸Šä¼ å¤±è´¥å¤„理 */
  const handleFileError = (error, file, fileList) => {
    upload.isUploading = false;
    proxy.$modal.msgError("文件上传失败");
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };
  // æ‰“开弹框
  const openForm = (type, row) => {
    operationType.value = type;
    form.value = {};
    form.value.maintainUserId = userStore.id;
    form.value.maintainTime = getCurrentDate();
    userListNoPage().then(res => {
      userList.value = res.data;
    });
    if (type === "edit") {
      getSupplier(row.id).then(res => {
        form.value = { ...res.data };
      });
    }
    dialogFormVisible.value = true;
  };
  // æäº¤è¡¨å•
  const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
      if (valid) {
        if (operationType.value === "edit") {
          submitEdit();
        } else {
          submitAdd();
        }
      }
    });
  };
  // æäº¤æ–°å¢ž
  const submitAdd = () => {
    addSupplier(form.value).then(res => {
      proxy.$modal.msgSuccess("提交成功");
      closeDia();
      getList();
    });
  };
  // æäº¤ä¿®æ”¹
  const submitEdit = () => {
    updateSupplier(form.value).then(res => {
      proxy.$modal.msgSuccess("提交成功");
      closeDia();
      getList();
    });
  };
  // å…³é—­å¼¹æ¡†
  const closeDia = () => {
    proxy.resetForm("formRef");
    dialogFormVisible.value = false;
  };
  // å¯¼å‡º
  const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        proxy.download(
          "/system/supplier/export",
          { isWhite: 0 },
          "厂家档案.xlsx"
        );
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  // åˆ é™¤
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      // æ£€æŸ¥æ˜¯å¦æœ‰ä»–人维护的数据
      const unauthorizedData = selectedRows.value.filter(
        item => item.maintainUserName !== userStore.nickName
      );
      if (unauthorizedData.length > 0) {
        proxy.$modal.msgWarning("不可删除他人维护的数据");
        return;
      }
      ids = selectedRows.value.map(item => item.id);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        tableLoading.value = true;
        delSupplier(ids)
          .then(res => {
            proxy.$modal.msgSuccess("删除成功");
            getList();
          })
          .finally(() => {
            tableLoading.value = false;
          });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };

  // èŽ·å–当前日期并格式化为 YYYY-MM-DD
  function getCurrentDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0"); // æœˆä»½ä»Ž0开始
    const day = String(today.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }
  // æ‰“开附件弹框
  const openFileDialog = async row => {
    recordId.value = row.id;
    fileListDialogVisible.value = true;
  };

  onMounted(() => {
    getList();
  });

  defineExpose({
    getList,
  });
</script>


 src/views/inventoryManagement/manufacturer/filesDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,198 @@
<template>
  <div>
    <el-dialog v-model="dialogFormVisible"
               title="上传附件"
               width="50%"
               @close="closeDia">
      <div style="margin-bottom: 10px;text-align: right">
        <el-upload v-model:file-list="fileList"
                   class="upload-demo"
                   :action="uploadUrl"
                   :on-success="handleUploadSuccess"
                   :on-error="handleUploadError"
                   name="file"
                   :show-file-list="false"
                   :headers="headers"
                   style="display: inline;margin-right: 10px">
          <el-button type="primary">上传附件</el-button>
        </el-upload>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
      </div>
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :tableLoading="tableLoading"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                height="500"
                @pagination-change="paginationSearch"
                :total="total"
                :page="page.current"
                :limit="page.size">
      </PIMTable>
      <pagination style="margin: 10px 0"
                  v-show="total > 0"
                  @pagination="paginationSearch"
                  :total="total"
                  :page="page.current"
                  :limit="page.size" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <filePreview ref="filePreviewRef" />
  </div>
</template>

<script setup>
  import { ref } from "vue";
  import { ElMessageBox } from "element-plus";
  import { getToken } from "@/utils/auth.js";
  import filePreview from "@/components/filePreview/index.vue";
  import {
    fileAdd,
    fileDel,
    fileListPage,
  } from "@/api/basicData/supplierManageFile.js";
  import Pagination from "@/components/PIMTable/Pagination.vue";
  const { proxy } = getCurrentInstance();
  const emit = defineEmits(["close"]);

  const dialogFormVisible = ref(false);
  const currentId = ref("");
  const selectedRows = ref([]);
  const filePreviewRef = ref();
  const tableColumn = ref([
    {
      label: "文件名称",
      prop: "name",
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      operation: [
        {
          name: "下载",
          type: "text",
          clickFun: row => {
            downLoadFile(row);
          },
        },
        {
          name: "预览",
          type: "text",
          clickFun: row => {
            lookFile(row);
          },
        },
      ],
    },
  ]);
  const page = reactive({
    current: 1,
    size: 100,
  });
  const total = ref(0);
  const tableData = ref([]);
  const fileList = ref([]);
  const tableLoading = ref(false);
  const headers = ref({
    Authorization: "Bearer " + getToken(),
  });
  const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/file/upload"); // ä¸Šä¼ çš„图片服务器地址

  // æ‰“开弹框
  const openDialog = row => {
    dialogFormVisible.value = true;
    currentId.value = row.id;
    getList();
  };
  const paginationSearch = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  const getList = () => {
    fileListPage({ supplierId: currentId.value, ...page }).then(res => {
      tableData.value = res.data.records;
      total.value = res.data.total;
    });
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };

  // å…³é—­å¼¹æ¡†
  const closeDia = () => {
    dialogFormVisible.value = false;
    emit("close");
  };
  // ä¸Šä¼ æˆåŠŸå¤„理
  function handleUploadSuccess(res, file) {
    // å¦‚果上传成功
    if (res.code == 200) {
      const fileRow = {};
      fileRow.name = res.data.originalName;
      fileRow.url = res.data.tempPath;
      uploadFile(fileRow);
    } else {
      proxy.$modal.msgError("文件上传失败");
    }
  }
  function uploadFile(file) {
    file.supplierId = currentId.value;
    fileAdd(file).then(res => {
      proxy.$modal.msgSuccess("文件上传成功");
      getList();
    });
  }
  // ä¸Šä¼ å¤±è´¥å¤„理
  function handleUploadError() {
    proxy.$modal.msgError("文件上传失败");
  }
  // ä¸‹è½½é™„件
  const downLoadFile = row => {
    proxy.$download.byUrl(row.url, row.originalFilename);
  };
  // åˆ é™¤
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map(item => item.id);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        fileDel(ids).then(res => {
          proxy.$modal.msgSuccess("删除成功");
          getList();
        });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  // é¢„览附件
  const lookFile = row => {
    filePreviewRef.value.open(row.url);
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped>
</style>

 src/views/inventoryManagement/manufacturer/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,50 @@
<!-- åœ¨ä½ çš„主页面中 -->
<template>
  <div class="app-container">
    <el-tabs v-model="activeTab"
             @tab-change="handleTabChange">
      <el-tab-pane label="正常厂家"
                   name="home">
        <HomeTab ref="homeTab" />
      </el-tab-pane>
      <el-tab-pane label="黑名单"
                   name="blacklist">
        <BlacklistTab ref="blacklistTab" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import HomeTab from "./components/HomeTab.vue";
  import BlacklistTab from "./components/BlacklistTab.vue";

  export default {
    name: "MainPage",
    components: {
      HomeTab,
      BlacklistTab,
    },
    data() {
      return {
        activeTab: "home",
      };
    },
    methods: {
      handleTabChange(tabName) {
        this.activeTab = tabName;
        this.$nextTick(() => {
          if (tabName === "home") {
            this.$refs.homeTab &&
              this.$refs.homeTab.getList &&
              this.$refs.homeTab.getList();
          } else if (tabName === "blacklist") {
            this.$refs.blacklistTab &&
              this.$refs.blacklistTab.getList &&
              this.$refs.blacklistTab.getList();
          }
        });
      },
    },
  };
</script>

 src/views/inventoryManagement/stockManagement/New.vue

@@ -32,6 +32,11 @@
          <el-input v-model="formState.unit"
                    disabled />
        </el-form-item>
        <el-form-item label="厂家"
                      prop="manufacturer">
          <el-input v-model="formState.manufacturer"
                    placeholder="请输入厂家" />
        </el-form-item>
        <el-form-item label="库存类型"
                      prop="type"
                      :rules="[
@@ -42,11 +47,32 @@
              }
            ]">
          <el-select v-model="formState.type"
                     placeholder="请选择库存类型">
            <el-option label="合格库存"
                     placeholder="请选择库存类型"
                     @change="handleTypeChange">
            <el-option label="合格库"
                       value="qualified" />
            <el-option label="不合格库存"
            <el-option label="废品库"
                       value="waste" />
            <el-option label="不合格库"
                       value="unqualified" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="formState.type && formState.type !== 'unqualified'"
                      label="来源"
                      prop="source"
                      :rules="[
                {
                required: true,
                message: '请选择来源',
                trigger: 'change',
              }
            ]">
          <el-select v-model="formState.source"
                     placeholder="请选择来源">
            <el-option v-for="item in sourceOptions"
                       :key="item"
                       :label="item"
                       :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="库存数量"
@@ -120,11 +146,30 @@
    productModelName: "",
    unit: "",
    type: undefined,
    manufacturer: "",
    source: "",
    qualitity: 0,
    batchNo: null,
    warnNum: 0,
    remark: "",
  });

  const sourceOptions = computed(() => {
    if (formState.value.type === "qualified") {
      return ["采购入库", "生产入库", "外协入库", "修复入库"];
    } else if (formState.value.type === "waste") {
      return ["生产产生", "运输产生", "裁剪产生"];
    }
    return [];
  });

  const handleTypeChange = val => {
    if (val === "unqualified") {
      formState.value.source = "自定义";
    } else {
      formState.value.source = "";
    }
  };

  const isShow = computed({
    get() {
@@ -158,6 +203,8 @@
      productModelName: "",
      unit: "",
      type: undefined,
      manufacturer: "",
      source: "",
      qualitity: 0,
      batchNo: null,
      warnNum: 0,

 src/views/personnelManagement/employeeRecord/components/BasicInfoSection.vue

@@ -1,154 +1,149 @@
<template>
  <el-card class="form-card" shadow="never">
  <el-card class="form-card"
           shadow="never">
    <template #header>
      <span class="card-title">
        <span class="card-title-line">|</span>
        åŸºæœ¬ä¿¡æ¯
      </span>
    </template>

    <el-row :gutter="24">
      <el-col :span="5">
        <el-form-item label="员工编号" prop="staffNo">
          <el-input
            v-model="form.staffNo"
            placeholder="请输入"
            clearable
            maxlength="20"
            show-word-limit
            :disabled="operationType !== 'add'"
          />
        <el-form-item label="员工编号"
                      prop="staffNo">
          <el-input v-model="form.staffNo"
                    placeholder="请输入"
                    clearable
                    maxlength="20"
                    show-word-limit
                    :disabled="operationType !== 'add'" />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="姓名" prop="staffName">
          <el-input
            v-model="form.staffName"
            placeholder="请输入"
            clearable
            maxlength="50"
            show-word-limit
          />
        <el-form-item label="姓名"
                      prop="staffName">
          <el-input v-model="form.staffName"
                    placeholder="请输入"
                    clearable
                    maxlength="50"
                    show-word-limit />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="别名" prop="alias">
          <el-input
            v-model="form.alias"
            placeholder="请输入"
            clearable
            maxlength="50"
            show-word-limit
          />
        <el-form-item label="别名"
                      prop="alias">
          <el-input v-model="form.alias"
                    placeholder="请输入"
                    clearable
                    maxlength="50"
                    show-word-limit />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="手机" prop="phone">
          <el-input
            v-model="form.phone"
            placeholder="请输入"
            clearable
            maxlength="11"
            show-word-limit
          />
        <el-form-item label="手机"
                      prop="phone">
          <el-input v-model="form.phone"
                    placeholder="请输入"
                    clearable
                    maxlength="11"
                    show-word-limit />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="性别" prop="sex">
          <el-select
            v-model="form.sex"
            placeholder="请选择"
            clearable
            style="width: 100%"
          >
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
        <el-form-item label="性别"
                      prop="sex">
          <el-select v-model="form.sex"
                     placeholder="请选择"
                     clearable
                     style="width: 100%">
            <el-option label="男"
                       value="男" />
            <el-option label="女"
                       value="女" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="5">
        <el-form-item label="出生日期" prop="birthDate">
          <el-date-picker
            v-model="form.birthDate"
            type="date"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            placeholder="请选择"
            style="width: 100%"
            clearable
          />
        <el-form-item label="出生日期"
                      prop="birthDate">
          <el-date-picker v-model="form.birthDate"
                          type="date"
                          value-format="YYYY-MM-DD"
                          format="YYYY-MM-DD"
                          placeholder="请选择"
                          style="width: 100%"
                          clearable />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="年龄" prop="age">
          <el-input-number
            v-model="form.age"
            :min="0"
            :max="150"
            :precision="0"
            :step="1"
            style="width: 100%"
          />
        <el-form-item label="年龄"
                      prop="age">
          <el-input-number v-model="form.age"
                           :min="0"
                           :max="150"
                           :precision="0"
                           :step="1"
                           style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="籍贯" prop="nativePlace">
          <el-input
            v-model="form.nativePlace"
            placeholder="请输入"
            clearable
            maxlength="50"
            show-word-limit
          />
        <el-form-item label="籍贯"
                      prop="nativePlace">
          <el-input v-model="form.nativePlace"
                    placeholder="请输入"
                    clearable
                    maxlength="50"
                    show-word-limit />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="民族" prop="nation">
          <el-input
            v-model="form.nation"
            placeholder="请输入"
            clearable
            maxlength="20"
            show-word-limit
          />
        <el-form-item label="民族"
                      prop="nation">
          <el-select v-model="form.nation"
                     placeholder="请选择"
                     clearable
                     style="width: 100%">
            <el-option v-for="dict in nation_type"
                       :key="dict.label"
                       :label="dict.label"
                       :value="dict.label" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="婚姻状况" prop="maritalStatus">
          <el-select
            v-model="form.maritalStatus"
            placeholder="请选择"
            clearable
            style="width: 100%"
          >
            <el-option label="未婚" value="未婚" />
            <el-option label="已婚" value="已婚" />
            <el-option label="离异" value="离异" />
            <el-option label="丧偶" value="丧偶" />
        <el-form-item label="婚姻状况"
                      prop="maritalStatus">
          <el-select v-model="form.maritalStatus"
                     placeholder="请选择"
                     clearable
                     style="width: 100%">
            <el-option label="未婚"
                       value="未婚" />
            <el-option label="已婚"
                       value="已婚" />
            <el-option label="离异"
                       value="离异" />
            <el-option label="丧偶"
                       value="丧偶" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="10">
        <el-form-item label="角色" prop="roleId">
          <el-select
            v-model="form.roleId"
            placeholder="请选择"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in roleOptions"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
              :disabled="item.status == 1"
            />
        <el-form-item label="角色"
                      prop="roleId">
          <el-select v-model="form.roleId"
                     placeholder="请选择"
                     clearable
                     style="width: 100%">
            <el-option v-for="item in roleOptions"
                       :key="item.roleId"
                       :label="item.roleName"
                       :value="item.roleId"
                       :disabled="item.status == 1" />
          </el-select>
        </el-form-item>
      </el-col>
@@ -157,25 +152,27 @@
</template>

<script setup>
import { toRefs } from "vue";
  import { toRefs, getCurrentInstance } from "vue";

const props = defineProps({
  form: { type: Object, required: true },
  operationType: { type: String, default: "add" },
  roleOptions: { type: Array, default: () => [] },
});
  const props = defineProps({
    form: { type: Object, required: true },
    operationType: { type: String, default: "add" },
    roleOptions: { type: Array, default: () => [] },
  });

const { form, operationType, roleOptions } = toRefs(props);
  const { proxy } = getCurrentInstance();
  const { nation_type } = proxy.useDict("nation_type");
  const { form, operationType, roleOptions } = toRefs(props);
</script>

<style scoped>
.form-card {
  margin-bottom: 16px;
}
  .form-card {
    margin-bottom: 16px;
  }

.card-title-line {
  color: #f56c6c;
  margin-right: 4px;
}
  .card-title-line {
    color: #f56c6c;
    margin-right: 4px;
  }
</style>


 src/views/personnelManagement/employeeRecord/index.vue

@@ -3,90 +3,101 @@
    <div class="search_form mb20">
      <div>
        <span class="search_title">姓名：</span>
        <el-input
            v-model="searchForm.staffName"
            style="width: 240px"
            placeholder="请输入姓名搜索"
            @change="handleQuery"
            clearable
            :prefix-icon="Search"
        />
        <el-input v-model="searchForm.staffName"
                  style="width: 240px"
                  placeholder="请输入姓名搜索"
                  @change="handleQuery"
                  clearable
                  :prefix-icon="Search" />
        <span class="search_title search_title2">部门：</span>
          <el-tree-select
            v-model="searchForm.sysDeptId"
            :data="deptOptions"
            check-strictly
            :render-after-expand="false"
            style="width: 240px"
            placeholder="请选择"
          />
          <span class="search_title search_title2">入职日期：</span>
          <el-date-picker
            v-model="searchForm.contractStartTime"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            placeholder="请选择"
          />
        <el-tree-select v-model="searchForm.sysDeptId"
                        :data="deptOptions"
                        check-strictly
                        :render-after-expand="false"
                        style="width: 240px"
                        placeholder="请选择" />
        <span class="search_title search_title2">入职日期：</span>
        <el-date-picker v-model="searchForm.contractStartTime"
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        placeholder="请选择" />
        <span class="search_title search_title2">民族：</span>
        <el-select v-model="searchForm.nation"
                   placeholder="请选择民族"
                   clearable
                   style="width: 240px"
                   @change="handleQuery">
          <el-option v-for="dict in nation_type"
                     :key="dict.label"
                     :label="dict.label"
                     :value="dict.label" />
        </el-select>
        <!-- <span  style="margin-left: 10px" class="search_title">合同结束日期：</span> -->
        <!-- <el-date-picker  v-model="searchForm.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                         placeholder="请选择" clearable @change="changeDaterange" /> -->
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
        >搜索</el-button
        >
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
      </div>
      <div>
        <el-button type="primary" @click="openFormNewOrEditFormDia('add')">新增入职</el-button>
        <el-button type="info" @click="handleImport">导入</el-button>
        <el-button type="primary"
                   @click="openFormNewOrEditFormDia('add')">新增入职</el-button>
        <el-button type="info"
                   @click="handleImport">导入</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="tableColumn"
          :tableData="tableData"
          :page="page"
          :isSelection="true"
          @selection-change="handleSelectionChange"
          :tableLoading="tableLoading"
          @pagination="pagination"
          :total="page.total"
      >
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"
                :total="page.total">
        <template #positiveDate="{ row }">
          <span :class="getPositiveDateClass(row.positiveDate)">{{ row.positiveDate }}</span>
        </template>
      </PIMTable>
    </div>
    <show-form-dia ref="formDia" @close="handleQuery"></show-form-dia>
    <new-or-edit-form-dia ref="formDiaNewOrEditFormDia" @close="handleQuery"></new-or-edit-form-dia>
    
    <show-form-dia ref="formDia"
                   @close="handleQuery"></show-form-dia>
    <new-or-edit-form-dia ref="formDiaNewOrEditFormDia"
                          @close="handleQuery"></new-or-edit-form-dia>
    <!-- å¯¼å…¥å¯¹è¯æ¡† -->
    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
    <el-dialog :title="upload.title"
               v-model="upload.open"
               width="400px"
               append-to-body>
      <el-upload ref="uploadRef"
                 :limit="1"
                 accept=".xlsx, .xls"
                 :headers="upload.headers"
                 :action="upload.url"
                 :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress"
                 :on-success="handleFileSuccess"
                 :auto-upload="false"
                 drag>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline; margin-left: 5px;" @click="importTemplate">下载模板</el-link>
            <el-link type="primary"
                     :underline="false"
                     style="font-size: 12px; vertical-align: baseline; margin-left: 5px;"
                     @click="importTemplate">下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">ç¡® å®š</el-button>
          <el-button type="primary"
                     @click="submitFileForm">ç¡® å®š</el-button>
          <el-button @click="upload.open = false">取 æ¶ˆ</el-button>
        </div>
      </template>
@@ -95,176 +106,192 @@
</template>

<script setup>
import { Search, UploadFilled } from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {ElMessageBox} from "element-plus";
import { deptTreeSelect } from "@/api/system/user.js";
import {batchDeleteStaffOnJobs, staffOnJobListPage} from "@/api/personnelManagement/staffOnJob.js";
import { getToken } from "@/utils/auth";
import dayjs from "dayjs";
  import { Search, UploadFilled } from "@element-plus/icons-vue";
  import { onMounted, ref } from "vue";
  import { ElMessageBox } from "element-plus";
  import { deptTreeSelect } from "@/api/system/user.js";
  import {
    batchDeleteStaffOnJobs,
    staffOnJobListPage,
  } from "@/api/personnelManagement/staffOnJob.js";
  import { getToken } from "@/utils/auth";
  import dayjs from "dayjs";

const NewOrEditFormDia = defineAsyncComponent(() => import("@/views/personnelManagement/employeeRecord/components/NewOrEditFormDia.vue"));
const ShowFormDia = defineAsyncComponent(() => import( "@/views/personnelManagement/employeeRecord/components/Show.vue"));
  const NewOrEditFormDia = defineAsyncComponent(() =>
    import(
      "@/views/personnelManagement/employeeRecord/components/NewOrEditFormDia.vue"
    )
  );
  const ShowFormDia = defineAsyncComponent(() =>
    import("@/views/personnelManagement/employeeRecord/components/Show.vue")
  );

const data = reactive({
  searchForm: {
    staffName: "",
    entryDate: undefined, // å½•å…¥æ—¥æœŸ
    entryDateStart: undefined,
    entryDateEnd: undefined,
  },
  deptOptions: [],
});
const { searchForm, deptOptions } = toRefs(data);
const tableColumn = ref([
  {
    label: "状态",
    prop: "staffState",
    dataType: "tag",
    formatData: (params) => {
      if (params == 0) {
        return "离职";
      } else if (params == 1) {
        return "在职";
      } else {
        return null;
      }
  const data = reactive({
    searchForm: {
      staffName: "",
      sysDeptId: undefined,
      contractStartTime: undefined,
      nation: undefined,
      entryDate: undefined, // å½•å…¥æ—¥æœŸ
      entryDateStart: undefined,
      entryDateEnd: undefined,
    },
    formatType: (params) => {
      if (params == 0) {
        return "danger";
      } else if (params == 1) {
        return "primary";
      } else {
        return null;
      }
    },
  },
  {
    label: "员工编号",
    prop: "staffNo",
  },
  {
    label: "姓名",
    prop: "staffName",
  },
  {
    label: "别名",
    prop: "alias",
  },
  {
    label: "手机",
    prop: "phone",
    width: 150,
  },
  {
    label: "性别",
    prop: "sex",
  },
  {
    label: "出生日期",
    prop: "birthDate",
    width: 120,
  },
  {
    label: "入职日期",
    prop: "contractStartTime",
    width: 120,
  },
  {
    label: "转正日期",
    prop: "positiveDate",
    width: 120,
    dataType: "slot",
    slot: "positiveDate",
  },
  {
    label: "年龄",
    prop: "age",
  },
  {
    label: "籍贯",
    prop: "nativePlace",
  },
  {
    label: "民族",
    prop: "nation",
    width: 100,
  },
  {
    label: "婚姻状况",
    prop: "maritalStatus",
    width: 100,
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: 'right',
    width: 180,
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          openFormNewOrEditFormDia("edit", row);
        },
    deptOptions: [],
  });
  const { searchForm, deptOptions } = toRefs(data);
  const tableColumn = ref([
    {
      label: "状态",
      prop: "staffState",
      dataType: "tag",
      formatData: params => {
        if (params == 0) {
          return "离职";
        } else if (params == 1) {
          return "在职";
        } else {
          return null;
        }
      },
    ],
  },
]);
const tableData = ref([]);
const selectedRows = ref([]);
const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 100,
  total: 0
});
const formDia = ref()
const formDiaNewOrEditFormDia = ref()
const { proxy } = getCurrentInstance()
      formatType: params => {
        if (params == 0) {
          return "danger";
        } else if (params == 1) {
          return "primary";
        } else {
          return null;
        }
      },
    },
    {
      label: "员工编号",
      prop: "staffNo",
    },
    {
      label: "姓名",
      prop: "staffName",
    },
    {
      label: "别名",
      prop: "alias",
    },
    {
      label: "手机",
      prop: "phone",
      width: 150,
    },
    {
      label: "性别",
      prop: "sex",
    },
    {
      label: "出生日期",
      prop: "birthDate",
      width: 120,
    },
    {
      label: "入职日期",
      prop: "contractStartTime",
      width: 120,
    },
    {
      label: "转正日期",
      prop: "positiveDate",
      width: 120,
      dataType: "slot",
      slot: "positiveDate",
    },
    {
      label: "年龄",
      prop: "age",
    },
    {
      label: "籍贯",
      prop: "nativePlace",
    },
    {
      label: "民族",
      prop: "nation",
      width: 100,
      formatData: params => {
        return proxy.selectDictLabel(nation_type.value, params);
      },
    },
    {
      label: "婚姻状况",
      prop: "maritalStatus",
      width: 100,
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 180,
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openFormNewOrEditFormDia("edit", row);
          },
        },
      ],
    },
  ]);
  const tableData = ref([]);
  const selectedRows = ref([]);
  const tableLoading = ref(false);
  const page = reactive({
    current: 1,
    size: 100,
    total: 0,
  });
  const formDia = ref();
  const formDiaNewOrEditFormDia = ref();
  const { proxy } = getCurrentInstance();
  const { nation_type } = proxy.useDict("nation_type");

// å¯¼å…¥ç›¸å…³
const uploadRef = ref(null)
const upload = reactive({
  // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚
  open: false,
  // å¼¹å‡ºå±‚标题
  title: "",
  // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
  isUploading: false,
  // è®¾ç½®ä¸Šä¼ çš„请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // ä¸Šä¼ çš„地址
  url: import.meta.env.VITE_APP_BASE_API + "/staff/staffOnJob/import"
})
  // å¯¼å…¥ç›¸å…³
  const uploadRef = ref(null);
  const upload = reactive({
    // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚
    open: false,
    // å¼¹å‡ºå±‚标题
    title: "",
    // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
    isUploading: false,
    // è®¾ç½®ä¸Šä¼ çš„请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // ä¸Šä¼ çš„地址
    url: import.meta.env.VITE_APP_BASE_API + "/staff/staffOnJob/import",
  });

// åˆ¤æ–­è½¬æ­£æ—¥æœŸæ˜¯å¦åœ¨7天内
const getPositiveDateClass = (positiveDate) => {
  if (!positiveDate) return '';
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const positive = new Date(positiveDate);
  positive.setHours(0, 0, 0, 0);
  const diffTime = positive - today;
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  // 7天内转正（包括今天）显示警告色
  if (diffDays >= 0 && diffDays <= 7) {
    return 'positive-date-warning';
  }
  return '';
};
  // åˆ¤æ–­è½¬æ­£æ—¥æœŸæ˜¯å¦åœ¨7天内
  const getPositiveDateClass = positiveDate => {
    if (!positiveDate) return "";
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const positive = new Date(positiveDate);
    positive.setHours(0, 0, 0, 0);
    const diffTime = positive - today;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    // 7天内转正（包括今天）显示警告色
    if (diffDays >= 0 && diffDays <= 7) {
      return "positive-date-warning";
    }
    return "";
  };

const fetchDeptOptions = () => {
  const fetchDeptOptions = () => {
    deptTreeSelect().then(response => {
      console.log(response.data)
      console.log(response.data);
      deptOptions.value = filterDisabledDept(
        JSON.parse(JSON.stringify(response.data))
      );
    });
  };
const filterDisabledDept = deptList => {
  const filterDisabledDept = deptList => {
    return deptList.filter(dept => {
      if (dept.disabled) {
        return false;
@@ -275,72 +302,74 @@
      return true;
    });
  };
const changeDaterange = (value) => {
  searchForm.value.entryDateStart = undefined;
  searchForm.value.entryDateEnd = undefined;
  if (value) {
    searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
    searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
  }
  getList();
};
// æŸ¥è¯¢åˆ—表
/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
  page.current = 1;
  getList();
};
const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
const getList = () => {
  fetchDeptOptions();
  tableLoading.value = true;
  const params = { ...searchForm.value, ...page };
  params.entryDate = undefined
  staffOnJobListPage({...params}).then(res => {
    tableLoading.value = false;
    tableData.value = res.data.records
    page.total = res.data.total;
  }).catch(err => {
    tableLoading.value = false;
  })
};
// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
  const changeDaterange = value => {
    searchForm.value.entryDateStart = undefined;
    searchForm.value.entryDateEnd = undefined;
    if (value) {
      searchForm.value.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
      searchForm.value.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
    }
    getList();
  };
  // æŸ¥è¯¢åˆ—表
  /** æœç´¢æŒ‰é’®æ“ä½œ */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  const getList = () => {
    fetchDeptOptions();
    tableLoading.value = true;
    const params = { ...searchForm.value, ...page };
    params.entryDate = undefined;
    staffOnJobListPage({ ...params })
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
      })
      .catch(err => {
        tableLoading.value = false;
      });
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };

// æ‰“开弹框
const openForm = (type, row) => {
  nextTick(() => {
    formDia.value?.openDialog(type, row)
  })
};
const openFormNewOrEditFormDia = (type, row) => {
  nextTick(() => {
    formDiaNewOrEditFormDia.value?.openDialog(type, row)
  })
};
  // æ‰“开弹框
  const openForm = (type, row) => {
    nextTick(() => {
      formDia.value?.openDialog(type, row);
    });
  };
  const openFormNewOrEditFormDia = (type, row) => {
    nextTick(() => {
      formDiaNewOrEditFormDia.value?.openDialog(type, row);
    });
  };

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

// å¯¼å‡º
const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
  // å¯¼å‡º
  const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        proxy.download("/staff/staffOnJob/export", {staffState: 1}, "员工台账.xlsx");
        proxy.download(
          "/staff/staffOnJob/export",
          { staffState: 1 },
          "员工台账.xlsx"
        );
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};
  };

// å¯¼å…¥æŒ‰é’®æ“ä½œ
const handleImport = () => {
  upload.title = "员工导入"
  upload.open = true
}
  // å¯¼å…¥æŒ‰é’®æ“ä½œ
  const handleImport = () => {
    upload.title = "员工导入";
    upload.open = true;
  };

// ä¸‹è½½æ¨¡æ¿æ“ä½œ
const importTemplate = () => {
  proxy.download("/staff/staffOnJob/downloadTemplate", {}, `员工导入模板_${new Date().getTime()}.xlsx`)
}
  // ä¸‹è½½æ¨¡æ¿æ“ä½œ
  const importTemplate = () => {
    proxy.download(
      "/staff/staffOnJob/downloadTemplate",
      {},
      `员工导入模板_${new Date().getTime()}.xlsx`
    );
  };

// æ–‡ä»¶ä¸Šä¼ ä¸­å¤„理
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true
}
  // æ–‡ä»¶ä¸Šä¼ ä¸­å¤„理
  const handleFileUploadProgress = (event, file, fileList) => {
    upload.isUploading = true;
  };

// æ–‡ä»¶ä¸Šä¼ æˆåŠŸå¤„理
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false
  upload.isUploading = false
  proxy.$refs["uploadRef"].handleRemove(file)
  if (response.code !== 200) {
    proxy.$modal.msgError(response.msg)
  } else {
    proxy.$modal.msgSuccess(response.msg)
  }
  getList()
}
  // æ–‡ä»¶ä¸Šä¼ æˆåŠŸå¤„理
  const handleFileSuccess = (response, file, fileList) => {
    upload.open = false;
    upload.isUploading = false;
    proxy.$refs["uploadRef"].handleRemove(file);
    if (response.code !== 200) {
      proxy.$modal.msgError(response.msg);
    } else {
      proxy.$modal.msgSuccess(response.msg);
    }
    getList();
  };

// æäº¤ä¸Šä¼ æ–‡ä»¶
const submitFileForm = () => {
  proxy.$refs["uploadRef"].submit()
}
  // æäº¤ä¸Šä¼ æ–‡ä»¶
  const submitFileForm = () => {
    proxy.$refs["uploadRef"].submit();
  };

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

<style scoped>
.search_title2 {
  margin-left: 10px;
}
  .search_title2 {
    margin-left: 10px;
  }

.positive-date-warning {
  color: #f56c6c;
  font-weight: bold;
}
  .positive-date-warning {
    color: #f56c6c;
    font-weight: bold;
  }
</style>

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

@@ -1,505 +1,456 @@
<template>
  <FormDialog
    v-model="dialogVisible"
    :title="operationType === 'add' ? '新建工资表' : '编辑工资表'"
    width="90%"
    @close="closeDia"
  >
  <FormDialog v-model="dialogVisible"
              :title="operationType === 'add' ? '新建工资表' : '编辑工资表'"
              width="90%"
              @close="closeDia">
    <template #footer>
      <el-button type="info" @click="saveDraft">保存草稿</el-button>
      <el-button type="primary" @click="submitForm">确认提交</el-button>
      <el-button type="info"
                 @click="saveDraft">保存草稿</el-button>
      <el-button type="primary"
                 @click="submitForm">确认提交</el-button>
      <el-button @click="closeDia">取消</el-button>
    </template>
    <div class="form-dia-body">
      <!-- åŸºç¡€èµ„æ–™ -->
      <el-card class="form-card" shadow="never">
      <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>
          <el-icon class="card-collapse">
            <ArrowUp />
          </el-icon>
        </template>
        <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
        <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 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-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 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 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-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-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 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">
        <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="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="基本工资"
                           minWidth="110">
            <template #default="{ row }">
              <el-input
                v-model.number="row.basicSalary"
                type="number"
                placeholder="0"
                size="small"
                @input="row.basicSalary = parseNum(row.basicSalary)"
              />
              <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">
          <el-table-column label="白班天数"
                           minWidth="100">
            <template #default="{ row }">
              <el-input
                v-model.number="row.pieceSalary"
                type="number"
                placeholder="0"
                size="small"
                @input="row.pieceSalary = parseNum(row.pieceSalary)"
              />
              <el-input v-model.number="row.dayDays"
                        type="number"
                        placeholder="0"
                        size="small"
                        @input="handleDaysChange(row)" />
            </template>
          </el-table-column>
          <el-table-column label="计时工资" minWidth="110">
          <el-table-column label="夜班天数"
                           minWidth="100">
            <template #default="{ row }">
              <el-input
                v-model.number="row.hourlySalary"
                type="number"
                placeholder="0"
                size="small"
                @input="row.hourlySalary = parseNum(row.hourlySalary)"
              />
              <el-input v-model.number="row.nightDays"
                        type="number"
                        placeholder="0"
                        size="small"
                        @input="handleDaysChange(row)" />
            </template>
          </el-table-column>
          <el-table-column label="其他收入" minWidth="110">
          <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)"
              />
              <el-input v-model.number="row.mealAmount"
                        type="number"
                        placeholder="0"
                        size="small"
                        disabled />
            </template>
          </el-table-column>
          <el-table-column label="社保个人" minWidth="110">
          <el-table-column label="夜班补助"
                           minWidth="110">
            <template #default="{ row }">
              <el-input
                v-model.number="row.socialPersonal"
                type="number"
                placeholder="0"
                size="small"
                @input="row.socialPersonal = parseNum(row.socialPersonal)"
              />
              <el-input v-model.number="row.nightAmount"
                        type="number"
                        placeholder="0"
                        size="small"
                        disabled />
            </template>
          </el-table-column>
          <el-table-column label="公积金个人" minWidth="120">
          <el-table-column label="其他收入"
                           minWidth="110">
            <template #default="{ row }">
              <el-input
                v-model.number="row.fundPersonal"
                type="number"
                placeholder="0"
                size="small"
                @input="row.fundPersonal = parseNum(row.fundPersonal)"
              />
              <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">
          <el-table-column label="社保个人"
                           minWidth="110">
            <template #default="{ row }">
              <el-input
                v-model.number="row.otherDeduct"
                type="number"
                placeholder="0"
                size="small"
                @input="row.otherDeduct = parseNum(row.otherDeduct)"
              />
              <el-input v-model.number="row.socialPersonal"
                        type="number"
                        placeholder="0"
                        size="small"
                        @input="row.socialPersonal = parseNum(row.socialPersonal)" />
            </template>
          </el-table-column>
          <el-table-column label="工资个税" minWidth="110">
          <el-table-column label="公积金个人"
                           minWidth="120">
            <template #default="{ row }">
              <el-input
                v-model.number="row.salaryTax"
                type="number"
                placeholder="0"
                size="small"
                @input="row.salaryTax = parseNum(row.salaryTax)"
              />
              <el-input v-model.number="row.fundPersonal"
                        type="number"
                        placeholder="0"
                        size="small"
                        @input="row.fundPersonal = parseNum(row.fundPersonal)" />
            </template>
          </el-table-column>
          <el-table-column label="应发工资" minWidth="110">
          <el-table-column label="其他支出"
                           minWidth="110">
            <template #default="{ row }">
              <el-input
                v-model.number="row.grossSalary"
                type="number"
                placeholder="0"
                size="small"
                @input="row.grossSalary = parseNum(row.grossSalary)"
              />
              <el-input v-model.number="row.otherDeduct"
                        type="number"
                        placeholder="0"
                        size="small"
                        @input="row.otherDeduct = parseNum(row.otherDeduct)" />
            </template>
          </el-table-column>
          <el-table-column label="应扣工资" minWidth="110">
          <el-table-column label="社保补缴"
                           minWidth="110">
            <template #default="{ row }">
              <el-input
                v-model.number="row.deductSalary"
                type="number"
                placeholder="0"
                size="small"
                @input="row.deductSalary = parseNum(row.deductSalary)"
              />
              <el-input v-model.number="row.socialSecurityRetroactive"
                        type="number"
                        placeholder="0"
                        size="small"
                        @input="row.socialSecurityRetroactive = parseNum(row.socialSecurityRetroactive)" />
            </template>
          </el-table-column>
          <el-table-column label="实发工资" minWidth="110">
          <el-table-column label="工资个税"
                           minWidth="110">
            <template #default="{ row }">
              <el-input
                v-model.number="row.netSalary"
                type="number"
                placeholder="0"
                size="small"
                @input="row.netSalary = parseNum(row.netSalary)"
              />
              <el-input v-model.number="row.salaryTax"
                        type="number"
                        placeholder="0"
                        size="small"
                        @input="row.salaryTax = parseNum(row.salaryTax)" />
            </template>
          </el-table-column>
          <el-table-column label="备注" minWidth="120">
          <el-table-column label="应发工资"
                           minWidth="110">
            <template #default="{ row }">
              <el-input
                v-model="row.remark"
                placeholder="请输入"
                size="small"
              />
              <el-input v-model.number="row.grossSalary"
                        type="number"
                        placeholder="0"
                        size="small"
                        @input="row.grossSalary = parseNum(row.grossSalary)" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center" fixed="right">
          <el-table-column label="应扣工资"
                           minWidth="110">
            <template #default="{ row }">
              <el-button type="primary" link @click="removeEmployee(row)">删除</el-button>
              <el-input v-model.number="row.deductSalary"
                        type="number"
                        placeholder="0"
                        size="small"
                        @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"
                        @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">
        <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"
    >
    <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
        />
        <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>
        <el-button type="primary"
                   @click="confirmAddPerson">确定</el-button>
      </template>
    </el-dialog>

    <!-- ä¸ªç¨Žè¡¨å¼¹çª— -->
    <el-dialog
      v-model="taxDialogVisible"
      title="个税表"
      width="700px"
      append-to-body
    >
    <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 :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, 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";
  import {
    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";
  import { listSubsidyConfiguration } from "@/api/personnelManagement/subsidyConfig.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 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);
});

// æ ¹æ®å®¡æ ¸äºº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 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 emit = defineEmits(["update:modelValue", "close"]);
  const props = defineProps({
    modelValue: { type: Boolean, default: false },
    operationType: { type: String, default: "add" },
    row: { type: Object, default: () => ({}) },
  });
};

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

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

// æ‰å¹³åŒ–部门树供下拉使用
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);
  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 subsidyStandard = ref({
    mealAmount: 0,
    nightAmount: 0,
  });
  return list;
}

const loadDeptOptions = () => {
  listDept().then((res) => {
    const tree = res.data ?? [];
    deptOptions.value = flattenDept(tree);
  });
};

// æž„建 éƒ¨é—¨-人员 æ ‘（用于新增人员弹窗）
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: [],
        });
        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,
        });
  const loadSubsidyStandard = () => {
    listSubsidyConfiguration().then(res => {
      if (res.data && res.data.length > 0) {
        subsidyStandard.value = {
          mealAmount: res.data[0].mealAmount || 0,
          nightAmount: res.data[0].nightAmount || 0,
        };
      }
    });
    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, {
  const handleDaysChange = row => {
    row.dayDays = parseNum(row.dayDays);
    row.nightDays = parseNum(row.nightDays);

    // å¤œç­è¡¥è´´è®¡ç®—：夜班天数 * æ ‡å‡†
    row.nightAmount = row.nightDays * subsidyStandard.value.nightAmount;

    // é¤è¡¥è®¡ç®—：仅限回族，(白班 + å¤œç­) * æ ‡å‡†
    // æ³¨æ„ï¼šnation å¯èƒ½æ˜¯å­—典值，这里假设 "回族" æ˜¯ç›´æŽ¥å­˜å‚¨çš„字符串或需要根据字典判断
    // ä¹‹å‰çš„ BasicInfoSection.vue ä¸­æ°‘族是下拉框，通常存储的是字典的 value æˆ– label
    // è¿™é‡Œå…ˆç®€å•åˆ¤æ–­åŒ…含 "回" å­—，或者您可以根据具体字典值调整
    if (row.nation && (row.nation === "回族" || row.nation.includes("回"))) {
      row.mealAmount =
        (row.dayDays + row.nightDays) * subsidyStandard.value.mealAmount;
    } else {
      row.mealAmount = 0;
    }
  };
  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: [],
@@ -507,298 +458,433 @@
      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);
  });

  // æ ¹æ®å®¡æ ¸äºº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 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 !== "");
    });
    // ç¼–辑：列表页已返回主表字段；这里只做回显（明细由“生成工资表/计算工资”得到）
    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 ?? "",
        }));
      }
    }
  });
};

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

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("未计算到工资数据");

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

  // æ‰å¹³åŒ–部门树供下拉使用
  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;
  }

  const loadDeptOptions = () => {
    listDept().then(res => {
      const tree = res.data ?? [];
      deptOptions.value = flattenDept(tree);
    });
  };

  // æž„建 éƒ¨é—¨-人员 æ ‘（用于新增人员弹窗）
  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: [],
          });
          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();
      loadSubsidyStandard();
      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 ?? "",
            nation: e.nation ?? "",
            basicSalary: parseNum(e.basicSalary),
            dayDays: parseNum(e.dayDays ?? e.dayShiftDays),
            nightDays: parseNum(e.nightDays ?? e.nightShiftDays),
            mealAmount: parseNum(e.mealAmount ?? e.mealSubsidy),
            nightAmount: parseNum(e.nightAmount ?? e.nightSubsidy),
            otherIncome: parseNum(e.otherIncome),
            socialPersonal: parseNum(e.socialPersonal),
            fundPersonal: parseNum(e.fundPersonal),
            otherDeduct: parseNum(e.otherDeduct),
            socialSecurityRetroactive: parseNum(e.socialSecurityRetroactive),
            salaryTax: parseNum(e.salaryTax),
            grossSalary: parseNum(e.grossSalary),
            deductSalary: parseNum(e.deductSalary),
            netSalary: parseNum(e.netSalary),
            remark: e.remark ?? "",
          }));
        }
      }
    });
  };

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

  const addPersonClose = () => {};

  const confirmAddPerson = () => {
    const tree = personTreeRef.value;
    if (!tree) {
      addPersonVisible.value = false;
      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 ?? "",
    })),
    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 ?? "",
        nation: node.nation ?? "",
        basicSalary: parseNum(node.basicSalary),
        dayDays: 0,
        nightDays: 0,
        mealAmount: 0,
        nightAmount: 0,
        otherIncome: 0,
        socialPersonal: 0,
        fundPersonal: 0,
        otherDeduct: 0,
        socialSecurityRetroactive: 0,
        salaryTax: 0,
        grossSalary: 0,
        deductSalary: 0,
        netSalary: 0,
        remark: "",
      });
    });
    addPersonVisible.value = false;
  };
  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");
};
  const removeEmployee = row => {
    employeeList.value = employeeList.value.filter(
      e => (e.staffOnJobId || e.id) !== (row.staffOnJobId || row.id)
    );
  };

defineExpose({ openDialog });
  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,
        nation: e.nation ?? "",
        basicSalary: parseNum(e.basicSalary),
        dayDays: parseNum(e.dayDays ?? e.dayShiftDays),
        nightDays: parseNum(e.nightDays ?? e.nightShiftDays),
        mealAmount: parseNum(e.mealAmount ?? e.mealSubsidy),
        nightAmount: parseNum(e.nightAmount ?? e.nightSubsidy),
        otherIncome: parseNum(e.otherIncome),
        socialPersonal: parseNum(e.socialPersonal),
        fundPersonal: parseNum(e.fundPersonal),
        otherDeduct: parseNum(e.otherDeduct),
        socialSecurityRetroactive: parseNum(e.socialSecurityRetroactive),
        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 ?? "",
        nation: e.nation ?? "",
        basicSalary: parseNum(e.basicSalary),
        dayDays: parseNum(e.dayDays),
        nightDays: parseNum(e.nightDays),
        mealAmount: parseNum(e.mealAmount),
        nightAmount: parseNum(e.nightAmount),
        otherIncome: parseNum(e.otherIncome),
        socialPersonal: parseNum(e.socialPersonal),
        fundPersonal: parseNum(e.fundPersonal),
        otherDeduct: parseNum(e.otherDeduct),
        socialSecurityRetroactive: parseNum(e.socialSecurityRetroactive),
        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;
}
.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;
}
  .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;
  }
  .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>

 src/views/personnelManagement/subsidyConfig/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,437 @@
<template>
  <div class="app-container subsidy-config-container">
    <el-row :gutter="20">
      <!-- å·¦ä¾§é…ç½®è¡¨å• -->
      <el-col :span="16">
        <el-card class="config-card"
                 shadow="hover">
          <template #header>
            <div class="card-header">
              <div class="header-title">
                <el-icon class="header-icon">
                  <Setting />
                </el-icon>
                <span>补贴标准配置</span>
              </div>
              <div class="header-ops">
                <el-button type="primary"
                           :loading="loading"
                           @click="submitForm">
                  <el-icon>
                    <Check />
                  </el-icon> ä¿å­˜é…ç½®
                </el-button>
              </div>
            </div>
          </template>
          <el-form ref="formRef"
                   :model="form"
                   :rules="rules"
                   label-position="top"
                   class="subsidy-form">
            <div class="config-section">
              <div class="section-title">
                <el-icon>
                  <Food />
                </el-icon> é¤è¡¥è®¾ç½®
              </div>
              <el-row :gutter="40">
                <el-col :span="12">
                  <el-form-item label="补贴标准金额"
                                style="margin-right:20px"
                                prop="mealAmount">
                    <el-input-number v-model="form.mealAmount"
                                     :precision="2"
                                     :step="1"
                                     :min="0"
                                     controls-position="right"
                                     class="full-width-input" />
                    <span class="input-unit">元/天</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div class="quick-info">
                    <div class="info-item">
                      <span class="label">适用对象：</span>
                      <el-tag size="small"
                              type="warning">回族员工</el-tag>
                    </div>
                    <div class="info-item">
                      <span class="label">计算范围：</span>
                      <span>白班 + å¤œç­</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-divider />
            <div class="config-section">
              <div class="section-title">
                <el-icon>
                  <Moon />
                </el-icon> å¤œç­è¡¥åŠ©è®¾ç½®
              </div>
              <el-row :gutter="40">
                <el-col :span="12">
                  <el-form-item label="补助标准金额"
                                style="margin-right:20px"
                                prop="nightAmount">
                    <el-input-number v-model="form.nightAmount"
                                     :precision="2"
                                     :step="1"
                                     :min="0"
                                     controls-position="right"
                                     class="full-width-input" />
                    <span class="input-unit">元/天</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div class="quick-info">
                    <div class="info-item">
                      <span class="label">适用对象：</span>
                      <el-tag size="small">全员（排班为夜班）</el-tag>
                    </div>
                    <div class="info-item">
                      <span class="label">计算范围：</span>
                      <span>仅限夜班</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </el-card>
        <!-- è®¡ç®—示例卡片 -->
        <el-card class="example-card"
                 shadow="never">
          <template #header>
            <div class="card-header-small">
              <el-icon>
                <InfoFilled />
              </el-icon>
              <span>薪资计算逻辑说明</span>
            </div>
          </template>
          <div class="example-content">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="example-box meal">
                  <h5>餐补计算示例</h5>
                  <p>若标准为 <strong>{{ form.mealAmount }}元/天</strong></p>
                  <p>某回族员工：白班10天，夜班10天</p>
                  <div class="formula">
                    è®¡ç®—：(10 + 10) * {{ form.mealAmount }} = <span>{{ (20 * form.mealAmount).toFixed(2) }}元</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="example-box night">
                  <h5>夜班补助计算示例</h5>
                  <p>若标准为 <strong>{{ form.nightAmount }}元/天</strong></p>
                  <p>某员工：当月夜班10天</p>
                  <div class="formula">
                    è®¡ç®—：10 * {{ form.nightAmount }} = <span>{{ (10 * form.nightAmount).toFixed(2) }}元</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <!-- å³ä¾§è§„则说明 -->
      <el-col :span="8">
        <el-card class="rule-card"
                 shadow="hover">
          <template #header>
            <div class="card-header">
              <span>业务规则详情</span>
            </div>
          </template>
          <el-scrollbar height="500px">
            <div class="rule-item">
              <div class="rule-header">
                <span class="dot warning"></span>
                <h6>关于餐补的标准与发放</h6>
              </div>
              <p>1. ç³»ç»Ÿå°†è‡ªåŠ¨è¯†åˆ«å‘˜å·¥æ¡£æ¡ˆä¸­çš„【民族】字段，仅对标注为“回族”的员工计算此项补贴。</p>
              <p>2. å‘放依据以考勤系统中的实际出勤天数为准，包含所有正常班次（白班、夜班）。</p>
              <p>3. è¯·å‡ã€æ—·å·¥ç­‰éžå‡ºå‹¤å¤©æ•°ä¸è®¡å…¥è®¡ç®—范围。</p>
            </div>
            <el-divider />
            <div class="rule-item">
              <div class="rule-header">
                <span class="dot primary"></span>
                <h6>关于夜班补助的标准与发放</h6>
              </div>
              <p>1. åªè¦å‘˜å·¥çš„排班班次被定义为“夜班”，且有实际出勤记录，即可享受此补助。</p>
              <p>2. è¡¥åŠ©æŒ‰å¤©è®¡ç®—，不区分岗位职级，统一执行此标准配置。</p>
              <p>3. æ­¤è¡¥åŠ©ä¸Žé¤è¡¥å¯åŒæ—¶äº«å—（若符合餐补条件）。</p>
            </div>
            <el-alert title="配置生效说明"
                      type="info"
                      :closable="false"
                      show-icon
                      style="margin-top: 20px">
              ä¿®æ”¹åŽçš„标准将在下一次执行“工资结算”任务时正式生效，不会影响已结算的历史薪资数据。
            </el-alert>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="SubsidyConfig">
  import { ref, onMounted } from "vue";
  import {
    Setting,
    Check,
    RefreshRight,
    Food,
    Moon,
    InfoFilled,
  } from "@element-plus/icons-vue";
  import {
    listSubsidyConfiguration,
    saveSubsidyConfiguration,
  } from "@/api/personnelManagement/subsidyConfig.js";
  import { ElMessage, ElMessageBox } from "element-plus";

  const formRef = ref(null);
  const loading = ref(false);

  const form = ref({
    id: undefined,
    mealAmount: 0,
    nightAmount: 0,
    tenantId: undefined,
    createTime: undefined,
  });

  const rules = {
    mealAmount: [{ required: true, message: "请输入餐补标准", trigger: "blur" }],
    nightAmount: [
      { required: true, message: "请输入夜班补助标准", trigger: "blur" },
    ],
  };

  /** æŸ¥è¯¢é…ç½® */
  const getConfig = async () => {
    try {
      const res = await listSubsidyConfiguration();
      if (res.data && res.data.length > 0) {
        const config = res.data[0];
        form.value = {
          id: config.id,
          mealAmount: config.mealAmount || 0,
          nightAmount: config.nightAmount || 0,
          tenantId: config.tenantId,
          createTime: config.createTime,
        };
      }
    } catch (error) {
      console.error("获取配置失败", error);
    }
  };

  /** æäº¤è¡¨å• */
  const submitForm = async () => {
    if (!formRef.value) return;

    await formRef.value.validate(async valid => {
      if (valid) {
        loading.value = true;
        try {
          await saveSubsidyConfiguration(form.value);
          ElMessage.success("标准配置已更新");
          getConfig(); // é‡æ–°åŠ è½½ä»¥èŽ·å–可能的更新（如id）
        } catch (error) {
          console.error("保存失败", error);
        } finally {
          loading.value = false;
        }
      }
    });
  };

  onMounted(() => {
    getConfig();
  });
</script>

<style scoped lang="scss">
  .subsidy-config-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 84px);

    .config-card {
      margin-bottom: 20px;
      border-radius: 8px;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .header-title {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          color: #303133;

          .header-icon {
            margin-right: 8px;
            color: #409eff;
          }
        }
      }
    }

    .subsidy-form {
      padding: 10px 20px;

      .config-section {
        .section-title {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 20px;
          color: #606266;

          .el-icon {
            color: #409eff;
          }
        }
      }

      .full-width-input {
        width: 100% !important;
      }

      .input-unit {
        position: absolute;
        right: -45px;
        top: 0;
        color: #909399;
        font-size: 14px;
      }

      .quick-info {
        background: #fdf6ec;
        border-radius: 4px;
        padding: 15px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;

        .info-item {
          font-size: 14px;
          color: #666;
          .label {
            font-weight: 500;
          }
        }
      }
    }

    .example-card {
      background: #fff;
      border: 1px dashed #dcdfe6;

      .card-header-small {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        color: #909399;
      }

      .example-box {
        padding: 15px;
        border-radius: 6px;

        h5 {
          margin: 0 0 10px 0;
          font-size: 14px;
          color: #303133;
        }

        p {
          margin: 5px 0;
          font-size: 13px;
          color: #606266;
        }

        .formula {
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px solid rgba(0, 0, 0, 0.05);
          font-size: 13px;
          font-weight: bold;

          span {
            color: #f56c6c;
            font-size: 16px;
          }
        }

        &.meal {
          background-color: #f0f9eb;
        }
        &.night {
          background-color: #ecf5ff;
        }
      }
    }

    .rule-card {
      height: 100%;

      .rule-item {
        padding: 5px 0;

        .rule-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 10px;

          .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            &.warning {
              background: #e6a23c;
            }
            &.primary {
              background: #409eff;
            }
          }

          h6 {
            margin: 0;
            font-size: 15px;
            color: #303133;
          }
        }

        p {
          font-size: 13px;
          line-height: 1.8;
          color: #606266;
          margin: 5px 0 5px 16px;
        }
      }
    }
  }

  :deep(.el-divider--horizontal) {
    margin: 24px 0;
  }
</style>