1.排班管理-班次、加一个午休时间（h）、人员多选、人员从用户管理获取，加一条列表也只展示一条 2.薪资管理-只要，人员、薪资、月份三个字段

gaoluyang

2025-11-13 fdd6bb96d8aad1ab796ce10038d170b47a19f661

 src/views/personnelManagement/payrollManagement/index.vue

@@ -27,9 +27,10 @@
            >
         </div>
         <div>
            <el-button @click="handleExport" style="margin-right: 10px">导出</el-button>
            <el-button @click="handleImport">导入</el-button>
            <el-button type="primary" @click="openForm('add')">新增薪资</el-button>
            <el-button type="danger" plain @click="handleDelete">删除</el-button>
            <el-button @click="handleExport">导出</el-button>
         </div>
      </div>
      <div class="table_list">
@@ -46,17 +47,56 @@
         ></PIMTable>
      </div>
      <form-dia ref="formDia" @close="handleQuery"></form-dia>
		
      <!-- 导入弹窗 -->
      <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body @close="handleUploadClose">
         <el-upload
            ref="uploadRef"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="upload.onProgress"
            :on-success="upload.onSuccess"
            :on-error="upload.onError"
            :on-change="upload.onChange"
            :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="handleUploadCancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { Search, UploadFilled } from "@element-plus/icons-vue";
import {onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick} from "vue";
import FormDia from "@/views/personnelManagement/payrollManagement/components/formDia.vue";
import {staffJoinDel} from "@/api/personnelManagement/onboarding.js";
import {ElMessageBox} from "element-plus";
import dayjs from "dayjs";
import {compensationDelete, compensationListPage} from "@/api/personnelManagement/payrollManagement.js";
import { getToken } from "@/utils/auth.js";

const data = reactive({
   searchForm: {
@@ -73,98 +113,6 @@
   {
      label: "姓名",
      prop: "name",
   },
   {
      label: "应出勤天数",
      prop: "shouldAttendedNum",
      width:100
   },
   {
      label: "实际出勤天数",
      prop: "actualAttendedNum",
      width:110
   },
   {
      label: "基本工资",
      prop: "basicSalary",
   },
   {
      label: "岗位工资",
      prop: "postSalary",
      width:100
   },
   {
      label: "入离职缺勤扣款",
      prop: "deductionAbsenteeism",
      width:130
   },
   {
      label: "病假扣款",
      prop: "sickLeaveDeductions",
      width:100
   },
   {
      label: "事假扣款",
      prop: "deductionPersonalLeave",
      width:100
   },
   {
      label: "忘记打卡扣款",
      prop: "forgetClockDeduct",
      width:110
   },
   {
      label: "绩效得分",
      prop: "performanceScore",
      width:150
   },
   {
      label: "绩效工资",
      prop: "performancePay",
      width: 120
   },
   {
      label: "应发合计",
      prop: "payableWages",
      width:150
   },
   {
      label: "社保个人",
      prop: "socialSecurityIndividuals",
   },
   {
      label: "社保公司",
      prop: "socialSecurityCompanies",
      width: 120
   },
   {
      label: "社保合计",
      prop: "socialSecurityTotal",
      width: 120
   },
   {
      label: "公积金个人",
      prop: "providentFundIndividuals",
      width: 120
   },
   {
      label: "公积金公司",
      prop: "providentFundCompany",
      width: 120
   },
   {
      label: "公积金合计",
      prop: "providentFundTotal",
      width: 120
   },
   {
      label: "应税工资",
      prop: "taxableWaget",
   },
   {
      label: "个人所得税",
      prop: "personalIncomeTax",
      width: 120
   },
   {
      label: "实发工资",
@@ -197,6 +145,56 @@
});
const formDia = ref()
const { proxy } = getCurrentInstance()

// 导入功能配置
const upload = reactive({
  // 是否显示弹出层（薪资导入）
  open: false,
  // 弹出层标题（薪资导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/compensationPerformance/importData",
  // 文件上传前的回调
  beforeUpload: (file) => {
    // 可以在此处做文件类型或大小校验
    const isValid = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
    if (!isValid) {
      proxy.$modal.msgError("只能上传 Excel 文件");
    }
    return isValid;
  },
  // 文件状态改变时的回调
  onChange: (file, fileList) => {
    console.log('文件状态改变', file, fileList);
  },
  // 文件上传成功时的回调
  onSuccess: (response, file, fileList) => {
    upload.isUploading = false;
    if(response.code === 200){
      proxy.$modal.msgSuccess("文件上传成功");
      handleUploadClose();
      getList();
    }else if(response.code === 500){
      proxy.$modal.msgError(response.msg);
    }else{
      proxy.$modal.msgWarning(response.msg);
    }
  },
  // 文件上传失败时的回调
  onError: (error, file, fileList) => {
    console.error('上传失败', error, file, fileList);
    upload.isUploading = false;
    proxy.$modal.msgError("文件上传失败");
  },
  // 文件上传进度回调
  onProgress: (event, file, fileList) => {
    console.log('上传中...', event.percent);
  }
});

const handleDateChange = (value,type) => {
   searchForm.value.entryDateEnd = null
@@ -299,6 +297,39 @@
      });
};

/** 导入按钮操作 */
function handleImport() {
  upload.title = "薪资导入";
  upload.open = true;
}

/** 提交上传文件 */
function submitFileForm() {
  upload.isUploading = true;
  proxy.$refs["uploadRef"].submit();
}

/** 下载模板 */
function importTemplate() {
  proxy.download("/compensationPerformance/exportTemplate", {}, "薪资导入模板.xlsx");
}

// 处理上传弹框取消
function handleUploadCancel() {
  upload.open = false;
  handleUploadClose();
}

// 处理上传弹框关闭
function handleUploadClose() {
  upload.open = false;
  upload.isUploading = false;
  // 清空上传文件缓存
  if (proxy.$refs.uploadRef) {
    proxy.$refs.uploadRef.clearFiles();
  }
}

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