fix: 工资非零申报添加loading

src/views/business/production/salary/form.vue

@@ -1,92 +1,94 @@
 <template>
-  <el-dialog title="工资信息" v-model="visible" :width="width" append-to-body draggable @close="close" :close-on-click-modal = "false" >
-    <!-- <div slot="title" class="dialog-title-container">
+  <el-dialog title="工资信息" v-model="visible" :width="width" append-to-body draggable @close="close"
+    :close-on-click-modal="false">
+    <div v-loading="loading">
+      <!-- <div slot="title" class="dialog-title-container">
       <span class="title-label"><i class="el-icon-document" /> 工资信息</span>
       <i class="el-icon-close" @click="close" />
     </div> -->
-    <!-- 功能按钮 -->
-    <div style="padding: 8px 24px 16px 24px">
-      <el-form size="small" label-width="100px" v-model="form">
-        <el-row :gutter="30">
-          <el-col :span="12">
-            <el-form-item label="客户名称">
-              <div>{{ form.companyName }}</div>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="所属月份">
-              <div>{{ form.year }}-{{ form.month }}</div>
-            </el-form-item>
-          </el-col>
-          <el-col v-if="form.status === 4" :span="12">
-            <el-form-item label="驳回原因">
-              <div>{{ form.feedbackContent }}</div>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24" class="details-container">
-            <!--操作按钮 开始-->
-            <div class="details-head">
-              <div class="title">
-                <i class="fa fa-th-list" aria-hidden="true" /> 人员信息
+      <!-- 功能按钮 -->
+      <div style="padding: 8px 24px 16px 24px">
+        <el-form size="small" label-width="100px" v-model="form">
+          <el-row :gutter="30">
+            <el-col :span="12">
+              <el-form-item label="客户名称">
+                <div>{{ form.companyName }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="所属月份">
+                <div>{{ form.year }}-{{ form.month }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col v-if="form.status === 4" :span="12">
+              <el-form-item label="驳回原因">
+                <div>{{ form.feedbackContent }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" class="details-container">
+              <!--操作按钮 开始-->
+              <div class="details-head">
+                <div class="title">
+                  <i class="fa fa-th-list" aria-hidden="true" /> 人员信息
+                </div>
+                <el-button class="button-class" type="primary" icon="plus" size="small" @click="handleEmployeeCreate">
+                  新增</el-button>
+                <el-button class="button-class" type="primary" icon="plus" size="small" @click="handleImport"
+                  v-hasPermi="['business:salary:import']">
+                  导入</el-button>
+                <el-button class="button-class" v-if="selections.length > 0" type="danger" size="small" icon="delete"
+                  @click="handleEmployeeBatchDelete">
+                  删除</el-button>
               </div>
-              <el-button class="button-class" type="primary" icon="plus" size="small" @click="handleEmployeeCreate">
-                新增</el-button>
-              <el-button class="button-class" type="primary" icon="plus" size="small" @click="handleImport"
-                v-hasPermi="['business:salary:import']">
-                导入</el-button>
-              <el-button class="button-class" v-if="selections.length > 0" type="danger" size="small" icon="delete"
-                @click="handleEmployeeBatchDelete">
-                删除</el-button>
-            </div>
-            <div class="details-body">
-              <div>
-                <el-table ref="sourceTable" :data="form.details" size="small" max-height="490px" border
-                  header-align="center" show-summary :summary-method="getSummaries" highlight-current-row
-                  header-row-class-name="list-header-row" row-class-name="list-row" class="salary-table"
-                  @selection-change="handleCheckChange" @current-change="handleCurrentChange">
-                  <el-table-column type="selection" fixed="left" width="50" align="center" />
-                  <el-table-column type="index" label="序号" width="50" fixed="left" align="center" />
-                  <el-table-column label="员工姓名" fixed="left" width="80" align="center">
-                    <template #default="scope">
-                      <div>
-                        <el-input v-model="scope.row.employeeName" size="small" placeholder="员工姓名"
-                          style="width: 100%" />
-                      </div>
-                      <span style="
+              <div class="details-body">
+                <div>
+                  <el-table ref="sourceTable" :data="form.details" size="small" max-height="490px" border
+                    header-align="center" show-summary :summary-method="getSummaries" highlight-current-row
+                    header-row-class-name="list-header-row" row-class-name="list-row" class="salary-table"
+                    @selection-change="handleCheckChange" @current-change="handleCurrentChange">
+                    <el-table-column type="selection" fixed="left" width="50" align="center" />
+                    <el-table-column type="index" label="序号" width="50" fixed="left" align="center" />
+                    <el-table-column label="员工姓名" fixed="left" width="80" align="center">
+                      <template #default="scope">
+                        <div>
+                          <el-input v-model="scope.row.employeeName" size="small" placeholder="员工姓名"
+                            style="width: 100%" />
+                        </div>
+                        <span style="
                           color: red;
                           position: absolute;
                           z-index: 10;
                           top: 4px;
                           right: 12px;
                         ">*</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="身份证号" width="150" align="center">
-                    <template #default="scope">
-                      <div>
-                        <el-input v-model="scope.row.idCode" size="small" placeholder="身份证号" style="width: 100%" />
-                      </div>
-                      <span style="
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="身份证号" width="150" align="center">
+                      <template #default="scope">
+                        <div>
+                          <el-input v-model="scope.row.idCode" size="small" placeholder="身份证号" style="width: 100%" />
+                        </div>
+                        <span style="
                           color: red;
                           position: absolute;
                           z-index: 10;
                           top: 4px;
                           right: 12px;
                         ">*</span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="应发工资" width="100" header-align="center" align="right" prop="planSalary">
-                    <template #default="scope">
-                      <div>
-                        <el-input-number v-model="scope.row.planSalary" size="small" placeholder="应发工资" :precision="2"
-                          :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
-                      </div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="实发工资" width="100" header-align="center" align="right" prop="actuallySalary">
-                    <template #default="scope">
-                      <div>
-                        <!-- <el-input-number
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="应发工资" width="100" header-align="center" align="right" prop="planSalary">
+                      <template #default="scope">
+                        <div>
+                          <el-input-number v-model="scope.row.planSalary" size="small" placeholder="应发工资" :precision="2"
+                            :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
+                        </div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="实发工资" width="100" header-align="center" align="right" prop="actuallySalary">
+                      <template #default="scope">
+                        <div>
+                          <!-- <el-input-number
                           v-model="scope.row.actuallySalary"
                           size="small"
                           placeholder="实发工资"
@@ -94,376 +96,387 @@
                           :controls="false"
                           style="width: 100%"
                         /> -->
-                        {{ rowNum(scope.row.actuallySalary) }}
-                      </div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="奖金及其他" width="100" header-align="center" align="right" prop="bonusAmount">
-                    <template #default="scope">
-                      <div>
-                        <el-input-number v-model="scope.row.bonusAmount" size="small" placeholder="奖金及其他" :precision="2"
-                          :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
-                      </div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="社保" align="center">
-                    <el-table-column label="养老保险" width="85" header-align="center" align="right"
-                      prop="endowmentInsurance">
+                          {{ rowNum(scope.row.actuallySalary) }}
+                        </div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="奖金及其他" width="100" header-align="center" align="right" prop="bonusAmount">
                       <template #default="scope">
                         <div>
-                          <el-input-number v-model="scope.row.endowmentInsurance" size="small" placeholder="养老保险"
-                            :precision="2" :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
+                          <el-input-number v-model="scope.row.bonusAmount" size="small" placeholder="奖金及其他" :precision="2"
+                            :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
                         </div>
                       </template>
                     </el-table-column>
-                    <el-table-column label="医疗保险" width="85" header-align="center" align="right"
-                      prop="medicalInsurance">
+                    <el-table-column label="社保" align="center">
+                      <el-table-column label="养老保险" width="85" header-align="center" align="right"
+                        prop="endowmentInsurance">
+                        <template #default="scope">
+                          <div>
+                            <el-input-number v-model="scope.row.endowmentInsurance" size="small" placeholder="养老保险"
+                              :precision="2" :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
+                          </div>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="医疗保险" width="85" header-align="center" align="right"
+                        prop="medicalInsurance">
+                        <template #default="scope">
+                          <div>
+                            <el-input-number v-model="scope.row.medicalInsurance" size="small" placeholder="医疗保险"
+                              :precision="2" :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
+                          </div>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="失业险" width="85" header-align="center" align="right"
+                        prop="unemploymentBenefit">
+                        <template #default="scope">
+                          <div>
+                            <el-input-number v-model="scope.row.unemploymentBenefit" size="small" placeholder="失业险"
+                              :precision="2" :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
+                          </div>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="大病险" width="85" header-align="center" align="right"
+                        prop="seriousIllnessInsurance">
+                        <template #default="scope">
+                          <div>
+                            <el-input-number v-model="scope.row.seriousIllnessInsurance" size="small" placeholder="大病险"
+                              :precision="2" :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
+                          </div>
+                        </template>
+                      </el-table-column>
+                    </el-table-column>
+                    <el-table-column label="公积金" width="85" header-align="center" align="right" prop="housingFund">
                       <template #default="scope">
                         <div>
-                          <el-input-number v-model="scope.row.medicalInsurance" size="small" placeholder="医疗保险"
-                            :precision="2" :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
+                          <el-input-number v-model="scope.row.housingFund" size="small" placeholder="住房公积金" :precision="2"
+                            :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
                         </div>
                       </template>
                     </el-table-column>
-                    <el-table-column label="失业险" width="85" header-align="center" align="right"
-                      prop="unemploymentBenefit">
+                    <el-table-column label="个税" header-align="center" align="right" width="85"
+                      prop="currentIndividualIncomeTax">
                       <template #default="scope">
                         <div>
-                          <el-input-number v-model="scope.row.unemploymentBenefit" size="small" placeholder="失业险"
+                          <el-input-number v-model="scope.row.currentIndividualIncomeTax" size="small" placeholder="个税"
                             :precision="2" :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
                         </div>
+                      </template></el-table-column>
+                    <el-table-column label="其他扣款" width="85" header-align="center" align="right" prop="otherCut">
+                      <template #default="scope">
+                        <div>
+                          <el-input-number v-model="scope.row.otherCut" size="small" placeholder="其他扣款" :precision="2"
+                            :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
+                        </div>
                       </template>
                     </el-table-column>
-                    <el-table-column label="大病险" width="85" header-align="center" align="right"
-                      prop="seriousIllnessInsurance">
+                    <el-table-column label="备注" width="100" header-align="center">
                       <template #default="scope">
                         <div>
-                          <el-input-number v-model="scope.row.seriousIllnessInsurance" size="small" placeholder="大病险"
-                            :precision="2" :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
+                          <el-input v-model="scope.row.remark" size="small" placeholder="备注" />
                         </div>
                       </template>
                     </el-table-column>
-                  </el-table-column>
-                  <el-table-column label="公积金" width="85" header-align="center" align="right" prop="housingFund">
-                    <template #default="scope">
-                      <div>
-                        <el-input-number v-model="scope.row.housingFund" size="small" placeholder="住房公积金" :precision="2"
-                          :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
-                      </div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="个税" header-align="center" align="right" width="85"
-                    prop="currentIndividualIncomeTax">
-                    <template #default="scope">
-                      <div>
-                        <el-input-number v-model="scope.row.currentIndividualIncomeTax" size="small" placeholder="个税"
-                          :precision="2" :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
-                      </div>
-                    </template></el-table-column>
-                  <el-table-column label="其他扣款" width="85" header-align="center" align="right" prop="otherCut">
-                    <template #default="scope">
-                      <div>
-                        <el-input-number v-model="scope.row.otherCut" size="small" placeholder="其他扣款" :precision="2"
-                          :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
-                      </div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="备注" width="100" header-align="center">
-                    <template #default="scope">
-                      <div>
-                        <el-input v-model="scope.row.remark" size="small" placeholder="备注" />
-                      </div>
-                    </template>
-                  </el-table-column>
-                </el-table>
+                  </el-table>
+                </div>
               </div>
-            </div>
-          </el-col>
-          <el-col :span="24">
-            <el-divider />
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="合计工资">
-              {{ rowNum(form.amount) }}
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input v-model.trim="form.content" maxlength="200" show-word-limit type="textarea" rows="2" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-    <div class="form-btns-container" style="height: 40px">
-      <el-button size="small" style="float: right; margin-left: 12px; margin-right: 12px" @click="close" icon="close">
-        取消
-      </el-button>
-      <el-button type="primary" size="small" style="float: right" icon="Finished" @click="handleSave(2)">
-        保存</el-button>
-      <el-button type="warning" size="small" icon="Edit" style="float: right" @click="handleSave(1)">
-        待确认</el-button>
-    </div>
-    <import-excel-dialog-customer ref="importExcelDialogRef"  :companyId = "companyId" v-bind="$attrs" @loadData ="loadData"/>
-    <!-- <feedback-dialog ref="feedbackDialogView" :parent="this" />
+            </el-col>
+            <el-col :span="24">
+              <el-divider />
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="合计工资">
+                {{ rowNum(form.amount) }}
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <el-input v-model.trim="form.content" maxlength="200" show-word-limit type="textarea" rows="2" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="form-btns-container" style="height: 40px">
+        <el-button size="small" style="float: right; margin-left: 12px; margin-right: 12px" @click="close" icon="close">
+          取消
+        </el-button>
+        <el-button type="primary" size="small" style="float: right" icon="Finished" @click="handleSave(2)">
+          保存</el-button>
+        <el-button type="warning" size="small" icon="Edit" style="float: right" @click="handleSave(1)">
+          待确认</el-button>
+      </div>
+      <import-excel-dialog-customer ref="importExcelDialogRef" :companyId="companyId" v-bind="$attrs"
+        @loadData="loadData" />
+      <!-- <feedback-dialog ref="feedbackDialogView" :parent="this" />
     <print-dialog ref="printDialog" :parent="this" /> -->
+    </div>
   </el-dialog>
 </template>
 <script setup>
-  import {
-    getDetail,
-    saveDetail,
-    updateDetail,
-  } from "@/api/business/production/salary";
-  import { rowNum, numberToCurrencyNo } from "@/utils/index";
-  import importExcelDialogCustomer from "./importExcelDialogCustomer.vue";
-  import { ref } from "vue";
-  const { proxy } = getCurrentInstance();
-  const visible = ref(false);
-  const width = ref(1420);
-  const selections = ref([]);
-  const currentSource = ref(null);
-  const importExcelDialogRef = ref(null);
-  const props = defineProps({
-    getList: {
-      type: Function,
-      default: () => { },
-    },
-  });
-
-  const { getList } = toRefs(props);
-  const total = ref(0);
+import {
+  getDetail,
+  saveDetail,
+  updateDetail,
+} from "@/api/business/production/salary";
+import { rowNum, numberToCurrencyNo } from "@/utils/index";
+import importExcelDialogCustomer from "./importExcelDialogCustomer.vue";
+import { ref } from "vue";
+const { proxy } = getCurrentInstance();
+const visible = ref(false);
+const width = ref(1420);
+const selections = ref([]);
+const currentSource = ref(null);
+const importExcelDialogRef = ref(null);
+const props = defineProps({
+  getList: {
+    type: Function,
+    default: () => { },
+  },
+});
 
-  const employeeEmptyData = {
-    id: null,
-    title: "",
-    remark: "",
-    employeeName: "",
-    departmentName: "",
-    idCode: "",
-    salaryAmount: "",
-    bonusAmount: "",
-    allowanceAmount: "",
-    subsidyAmount: "",
-    absenceCut: "",
-    planSalary: 0,
-    actuallySalary: 0,
-    endowmentInsurance: 0,
-    medicalInsurance: 0,
-    unemploymentBenefit: 0,
-    seriousIllnessInsurance: 0,
-    housingFund: 0,
-    otherCut: 0,
-    cumulativeIncome: 0,
-    cumulativeSpecialCut: 0,
-    cumulativeChildEduCut: 0,
-    cumulativeHouseLoanInterestCut: 0,
-    cumulativeHouseRentCut: 0,
-    cumulativeSupportElderCut: 0,
-    cumulativeContinuingEduCut: 0,
-    cumulativeBabyCareCut: 0,
-    sumSpecialCumulativeCut: 0,
-    cumulativeOtherCut: 0,
-    cumulativeIndividualIncomeTax: 0,
-    cumulativeHasPaidIit: 0,
-    currentIndividualIncomeTax: 0,
-    idiograph: "",
-    details: [],
-    editStatus: true,
-  };
+const { getList } = toRefs(props);
+const total = ref(0);
+const loading = ref(false)
+const employeeEmptyData = {
+  id: null,
+  title: "",
+  remark: "",
+  employeeName: "",
+  departmentName: "",
+  idCode: "",
+  salaryAmount: "",
+  bonusAmount: "",
+  allowanceAmount: "",
+  subsidyAmount: "",
+  absenceCut: "",
+  planSalary: 0,
+  actuallySalary: 0,
+  endowmentInsurance: 0,
+  medicalInsurance: 0,
+  unemploymentBenefit: 0,
+  seriousIllnessInsurance: 0,
+  housingFund: 0,
+  otherCut: 0,
+  cumulativeIncome: 0,
+  cumulativeSpecialCut: 0,
+  cumulativeChildEduCut: 0,
+  cumulativeHouseLoanInterestCut: 0,
+  cumulativeHouseRentCut: 0,
+  cumulativeSupportElderCut: 0,
+  cumulativeContinuingEduCut: 0,
+  cumulativeBabyCareCut: 0,
+  sumSpecialCumulativeCut: 0,
+  cumulativeOtherCut: 0,
+  cumulativeIndividualIncomeTax: 0,
+  cumulativeHasPaidIit: 0,
+  currentIndividualIncomeTax: 0,
+  idiograph: "",
+  details: [],
+  editStatus: true,
+};
 
-  const form = ref({});
- const  companyId = ref(null)
-  const emptyForm = {
-    details: [],
-  };
+const form = ref({});
+const companyId = ref(null)
+const emptyForm = {
+  details: [],
+};
 
-  function open(detail) {
-    visible.value = true;
-    form.value = detail;
-    companyId.value = detail.companyId
-    loadData();
-  }
+function open(detail) {
+  visible.value = true;
+  form.value = detail;
+  companyId.value = detail.companyId
+  loadData();
+}
 
-  function loadData() {
-    getDetail(form.value).then((res) => {
-      form.value = { ...proxy.deepClone(emptyForm), ...res.data };
-      res.data.details.forEach(item => {
-        form.value.details.forEach(item2 => {
-          if (item.employeeName == item2.employeeName) {
-            item2.currentIndividualIncomeTax = item.individualIncomeTaxConfirm;
-          }
-        })
+function loadData() {
+  loading.value = true
+  getDetail(form.value).then((res) => {
+    form.value = { ...proxy.deepClone(emptyForm), ...res.data };
+    res.data.details.forEach(item => {
+      form.value.details.forEach(item2 => {
+        if (item.employeeName == item2.employeeName) {
+          item2.currentIndividualIncomeTax = item.individualIncomeTaxConfirm;
+        }
       })
-      if (form.value.status === 2 || form.value.status === 3) {
-        proxy.$modal.msgError("该工资信息已提交待审核");
-        close();
-      }
-      computeTotal();
-    });
-  }
-
-  function close() {
-    visible.value = false;
-    reset();
-  }
-
-  function reset() {
-    form.value = proxy.deepClone(emptyForm);
-  }
-
-  function printSalary() { }
-  function exportSalary() { }
+    })
+    if (form.value.status === 2 || form.value.status === 3) {
+      proxy.$modal.msgError("该工资信息已提交待审核");
+      close();
+    }
+    computeTotal();
+  }).finally(() => {
+    loading.value = false
+  });
+}
 
-  function handleCurrentChange(row) {
-    currentSource.value = row;
-  }
+function close() {
+  visible.value = false;
+  reset();
+}
 
-  function handleCheckChange(selection) {
-    selections.value = selection.map((item) => item);
-  }
+function reset() {
+  form.value = proxy.deepClone(emptyForm);
+}
 
-  function handleEmployeeCreate() {
-    // 此处必须进行深拷贝，否则添加的明细，将都指向了一个对象
-    const _newSource = JSON.parse(JSON.stringify(employeeEmptyData));
-    form.value.details.push(_newSource);
-    handleCurrentChange(_newSource);
-  }
+function printSalary() { }
+function exportSalary() { }
 
-  function handleEmployeeBatchDelete() {
-    proxy.$modal
-      .confirm("确定删除?")
-      .then(() => {
-        form.value.details = form.value.details.filter(
-          (item) => selections.value.indexOf(item) === -1
-        );
-      })
-      .catch(() => {
-        proxy.$modal.msg("已取消删除");
-      });
-  }
-  //导入按钮操作
-  function handleImport() {
-    importExcelDialogRef.value.open();
-  }
+function handleCurrentChange(row) {
+  currentSource.value = row;
+}
 
-  function rowChangeSum(row) {
-    let actuallySalary = 0;
-    actuallySalary += row.planSalary == null ? 0 : row.planSalary;
-    actuallySalary += row.bonusAmount == null ? 0 : row.bonusAmount;
-    actuallySalary -= row.endowmentInsurance == null ? 0 : row.endowmentInsurance;
-    actuallySalary -= row.medicalInsurance == null ? 0 : row.medicalInsurance;
-    actuallySalary -=
-      row.unemploymentBenefit == null ? 0 : row.unemploymentBenefit;
-    actuallySalary -=
-      row.seriousIllnessInsurance == null ? 0 : row.seriousIllnessInsurance;
-    actuallySalary -= row.housingFund == null ? 0 : row.housingFund;
-    actuallySalary -=
-      row.currentIndividualIncomeTax == null ? 0 : row.currentIndividualIncomeTax;
-    actuallySalary -= row.otherCut == null ? 0 : row.otherCut;
+function handleCheckChange(selection) {
+  selections.value = selection.map((item) => item);
+}
 
-    row.actuallySalary = parseFloat(actuallySalary.toFixed(2));
-    computeTotal();
-  }
+function handleEmployeeCreate() {
+  // 此处必须进行深拷贝，否则添加的明细，将都指向了一个对象
+  const _newSource = JSON.parse(JSON.stringify(employeeEmptyData));
+  form.value.details.push(_newSource);
+  handleCurrentChange(_newSource);
+}
 
-  function computeTotal() {
-    let totalSalay = 0;
-    form.value.details.forEach((l) => {
-      totalSalay += l.actuallySalary == null ? 0 : l.actuallySalary;
+function handleEmployeeBatchDelete() {
+  proxy.$modal
+    .confirm("确定删除?")
+    .then(() => {
+      form.value.details = form.value.details.filter(
+        (item) => selections.value.indexOf(item) === -1
+      );
+    })
+    .catch(() => {
+      proxy.$modal.msg("已取消删除");
     });
-    form.value.amount = totalSalay;
-  }
+}
+//导入按钮操作
+function handleImport() {
+  importExcelDialogRef.value.open();
+}
 
-  function getSummaries(param) {
-    const { columns, data } = param;
-    const sums = [];
-    columns.forEach((column, index) => {
-      if (index === 0) {
-        sums[index] = "合计";
-        return;
-      } else if (index === 1) {
-        sums[index] = "";
-        return;
-      }
-      const values = data.map((item) => Number(item[column.property]));
+function rowChangeSum(row) {
+  let actuallySalary = 0;
+  actuallySalary += row.planSalary == null ? 0 : row.planSalary;
+  actuallySalary += row.bonusAmount == null ? 0 : row.bonusAmount;
+  actuallySalary -= row.endowmentInsurance == null ? 0 : row.endowmentInsurance;
+  actuallySalary -= row.medicalInsurance == null ? 0 : row.medicalInsurance;
+  actuallySalary -=
+    row.unemploymentBenefit == null ? 0 : row.unemploymentBenefit;
+  actuallySalary -=
+    row.seriousIllnessInsurance == null ? 0 : row.seriousIllnessInsurance;
+  actuallySalary -= row.housingFund == null ? 0 : row.housingFund;
+  actuallySalary -=
+    row.currentIndividualIncomeTax == null ? 0 : row.currentIndividualIncomeTax;
+  actuallySalary -= row.otherCut == null ? 0 : row.otherCut;
 
-      if (!values.every((value) => isNaN(value))) {
-        sums[index] = values.reduce((prev, curr) => {
-          const value = Number(curr);
-          if (!isNaN(value)) {
-            return (Number(prev) + Number(curr)).toFixed(2);
-          } else {
-            return Number(prev).toFixed(2);
-          }
-        }, 0);
-        sums[index] = numberToCurrencyNo(sums[index]);
-      } else {
-        sums[index] = "";
-      }
-    });
-    return sums;
-  }
+  row.actuallySalary = parseFloat(actuallySalary.toFixed(2));
+  computeTotal();
+}
 
-  function handleSave(status) {
-    for (let i = 0; i < form.value.details.length; i++) {
-      const l = form.value.details[i];
-      // 数据校验
-      if (!l.employeeName) {
-        proxy.$modal.msgError(`第${i + 1}行员工姓名不能为空`);
-        return;
-      }
-      if (!l.idCode) {
-        proxy.$modal.msgError(`第${i + 1}行身份证号不能为空`);
-        return;
-      }
-      if (l.actuallySalary < 0) {
-        proxy.$modal.msgError(`第${i + 1}行实际工资不能为负`);
-        return;
-      }
-      // 正则表达式匹配身份证号的格式
-      const idRegExp =
-        /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/;
-      const regExp = /^([a-zA-z]|[0-9]){5,17}$/;
-      if (!(regExp.test(l.idCode) || idRegExp.test(l.idCode))) {
-        proxy.$modal.msgError(`第${i + 1}行请输入正确的身份证号！`);
-        return;
-      }
+function computeTotal() {
+  let totalSalay = 0;
+  form.value.details.forEach((l) => {
+    totalSalay += l.actuallySalary == null ? 0 : l.actuallySalary;
+  });
+  form.value.amount = totalSalay;
+}
+
+function getSummaries(param) {
+  const { columns, data } = param;
+  const sums = [];
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = "合计";
+      return;
+    } else if (index === 1) {
+      sums[index] = "";
+      return;
     }
-    proxy.$modal
-      .confirm("确认保存么？")
-      .then(() => {
-        const saveValue = proxy.deepClone(form.value);
-        saveValue.status = status;
-        if (saveValue.id == null) {
-          saveDetail(saveValue).then((res) => {
-            proxy.$modal.msgSuccess("保存成功");
-            reset();
-            close();
-            getList.value();
-          });
+    const values = data.map((item) => Number(item[column.property]));
+
+    if (!values.every((value) => isNaN(value))) {
+      sums[index] = values.reduce((prev, curr) => {
+        const value = Number(curr);
+        if (!isNaN(value)) {
+          return (Number(prev) + Number(curr)).toFixed(2);
         } else {
-          updateDetail(saveValue).then((res) => {
-            proxy.$modal.msgSuccess("保存成功");
-            reset();
-            close();
-            getList.value();
-          });
+          return Number(prev).toFixed(2);
         }
-      })
-      .catch((err) => {
-        proxy.$modal.msg("取消保存");
-      });
+      }, 0);
+      sums[index] = numberToCurrencyNo(sums[index]);
+    } else {
+      sums[index] = "";
+    }
+  });
+  return sums;
+}
+
+function handleSave(status) {
+  for (let i = 0; i < form.value.details.length; i++) {
+    const l = form.value.details[i];
+    // 数据校验
+    if (!l.employeeName) {
+      proxy.$modal.msgError(`第${i + 1}行员工姓名不能为空`);
+      return;
+    }
+    if (!l.idCode) {
+      proxy.$modal.msgError(`第${i + 1}行身份证号不能为空`);
+      return;
+    }
+    if (l.actuallySalary < 0) {
+      proxy.$modal.msgError(`第${i + 1}行实际工资不能为负`);
+      return;
+    }
+    // 正则表达式匹配身份证号的格式
+    const idRegExp =
+      /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/;
+    const regExp = /^([a-zA-z]|[0-9]){5,17}$/;
+    if (!(regExp.test(l.idCode) || idRegExp.test(l.idCode))) {
+      proxy.$modal.msgError(`第${i + 1}行请输入正确的身份证号！`);
+      return;
+    }
   }
+  proxy.$modal
+    .confirm("确认保存么？")
+    .then(() => {
+      const saveValue = proxy.deepClone(form.value);
+      saveValue.status = status;
+      if (saveValue.id == null) {
+        loading.value = true
+        saveDetail(saveValue).then((res) => {
+          proxy.$modal.msgSuccess("保存成功");
+          reset();
+          close();
+          getList.value();
+        }).finally(() => {
+          loading.value = false
+        });
+      } else {
+        loading.value = true
+        updateDetail(saveValue).then((res) => {
+          proxy.$modal.msgSuccess("保存成功");
+          reset();
+          close();
+          getList.value();
+        }).finally(() => {
+          loading.value = false
+        });
+      }
+    })
+    .catch((err) => {
+      proxy.$modal.msg("取消保存");
+    });
+}
 
-  // 暴露给父组件的方法
-  defineExpose({
-    open,
-  });
+// 暴露给父组件的方法
+defineExpose({
+  open,
+});
 </script>
 
 <style lang="scss" scoped>
-  .button-class {
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
+.button-class {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
 </style>

src/views/business/production/salary/view.vue

@@ -1,421 +1,251 @@
 <template>
-  <el-dialog
-    title="工资信息"
-    v-model="visible"
-    :width="width"
-    append-to-body
-    draggable
-    @close="close"
-    :close-on-click-modal = "false"
-  >
-    <!-- 功能按钮 -->
-    <div style="padding: 8px 24px 16px 24px">
-      <el-form size="small" label-width="100px" v-model="form">
-        <el-row :gutter="30">
-          <el-col :span="12">
-            <el-form-item label="客户名称">
-              <div>{{ form.companyName }}</div>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="所属月份">
-              <div>{{ form.year }}-{{ form.month }}</div>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24" class="details-container">
-            <div class="details-head">
-              <div class="title">
-                <i class="fa fa-th-list" aria-hidden="true" /> 人员信息
+  <el-dialog title="工资信息" v-model="visible" :width="width" append-to-body draggable @close="close"
+    :close-on-click-modal="false">
+    <div v-loading="loading">
+      <!-- 功能按钮 -->
+      <div style="padding: 8px 24px 16px 24px">
+        <el-form size="small" label-width="100px" v-model="form">
+          <el-row :gutter="30">
+            <el-col :span="12">
+              <el-form-item label="客户名称">
+                <div>{{ form.companyName }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="所属月份">
+                <div>{{ form.year }}-{{ form.month }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" class="details-container">
+              <div class="details-head">
+                <div class="title">
+                  <i class="fa fa-th-list" aria-hidden="true" /> 人员信息
 
-                <el-button
-                class="button-class"
-                  size="small"
-                  @click="printSalary"
-                  icon="printer"
-                  type="primary"
-                  >打印</el-button
-                >
+                  <el-button class="button-class" size="small" @click="printSalary" icon="printer"
+                    type="primary">打印</el-button>
 
-                <el-button
-                class="button-class"
-                  size="small"
-                  @click="exportSalary"
-                  icon="download"
-                  type="info"
-                  >导出</el-button
-                >
-              </div>
-              <!-- <el-button size="small" @click="printSalary">打印</el-button>
+                  <el-button class="button-class" size="small" @click="exportSalary" icon="download"
+                    type="info">导出</el-button>
+                </div>
+                <!-- <el-button size="small" @click="printSalary">打印</el-button>
               <el-button size="small" @click="exportSalary">导出</el-button> -->
-            </div>
-            <div class="details-body">
-              <div>
-                <el-table
-                  ref="sourceTable"
-                  :data="form.details"
-                  size="small"
-                  max-height="260px"
-                  border
-                  show-summary
-                  :summary-method="getSummaries"
-                  highlight-current-row
-                  header-row-class-name="list-header-row"
-                  row-class-name="list-row"
-                  @selection-change="handleCheckChange"
-                  @current-change="handleCurrentChange"
-                >
-                  <el-table-column
-                    type="index"
-                    label="序号"
-                    width="50"
-                    align="center"
-                  />
-                  <el-table-column label="员工姓名" width="80" align="center">
-                    <template #default="scope">
-                      <div>
-                        {{ scope.row.employeeName }}
-                      </div>
-                      <span
-                        style="
+              </div>
+              <div class="details-body">
+                <div>
+                  <el-table ref="sourceTable" :data="form.details" size="small" max-height="260px" border show-summary
+                    :summary-method="getSummaries" highlight-current-row header-row-class-name="list-header-row"
+                    row-class-name="list-row" @selection-change="handleCheckChange" @current-change="handleCurrentChange">
+                    <el-table-column type="index" label="序号" width="50" align="center" />
+                    <el-table-column label="员工姓名" width="80" align="center">
+                      <template #default="scope">
+                        <div>
+                          {{ scope.row.employeeName }}
+                        </div>
+                        <span style="
                           color: red;
                           position: absolute;
                           z-index: 10;
                           top: 4px;
                           right: 6px;
-                        "
-                        >*</span
-                      >
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="身份证号" width="150" align="center">
-                    <template #default="scope">
-                      <div>
-                        {{ scope.row.idCode }}
-                      </div>
-                      <span
-                        style="
+                        ">*</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="身份证号" width="150" align="center">
+                      <template #default="scope">
+                        <div>
+                          {{ scope.row.idCode }}
+                        </div>
+                        <span style="
                           color: red;
                           position: absolute;
                           z-index: 10;
                           top: 4px;
                           right: 6px;
-                        "
-                        >*</span
-                      >
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    label="应发工资"
-                    width="70"
-                    header-align="center"
-                    align="right"
-                    prop="planSalary"
-                  >
-                    <template #default="scope">
-                      <div>
-                        {{ rowNum(scope.row.planSalary) }}
-                      </div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    label="实发工资"
-                    width="70"
-                    header-align="center"
-                    align="right"
-                    prop="actuallySalary"
-                  >
-                    <template #default="scope">
-                      <div>
-                        {{ rowNum(scope.row.actuallySalary) }}
-                      </div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    label="奖金及其他"
-                    width="95"
-                    header-align="center"
-                    align="right"
-                    prop="bonusAmount"
-                  >
-                    <template #default="scope">
-                      <div>
-                        {{ rowNum(scope.row.bonusAmount) }}
-                      </div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="社保" align="center">
-                    <el-table-column
-                      label="养老保险"
-                      width="70"
-                      header-align="center"
-                      align="right"
-                      prop="endowmentInsurance"
-                    >
+                        ">*</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="应发工资" width="70" header-align="center" align="right" prop="planSalary">
+                      <template #default="scope">
+                        <div>
+                          {{ rowNum(scope.row.planSalary) }}
+                        </div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="实发工资" width="70" header-align="center" align="right" prop="actuallySalary">
+                      <template #default="scope">
+                        <div>
+                          {{ rowNum(scope.row.actuallySalary) }}
+                        </div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="奖金及其他" width="95" header-align="center" align="right" prop="bonusAmount">
                       <template #default="scope">
                         <div>
-                          {{ rowNum(scope.row.endowmentInsurance) }}
+                          {{ rowNum(scope.row.bonusAmount) }}
                         </div>
                       </template>
                     </el-table-column>
-                    <el-table-column
-                      label="医疗保险"
-                      width="70"
-                      header-align="center"
-                      align="right"
-                      prop="medicalInsurance"
-                    >
+                    <el-table-column label="社保" align="center">
+                      <el-table-column label="养老保险" width="70" header-align="center" align="right"
+                        prop="endowmentInsurance">
+                        <template #default="scope">
+                          <div>
+                            {{ rowNum(scope.row.endowmentInsurance) }}
+                          </div>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="医疗保险" width="70" header-align="center" align="right"
+                        prop="medicalInsurance">
+                        <template #default="scope">
+                          <div>
+                            {{ rowNum(scope.row.medicalInsurance) }}
+                          </div>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="失业险" width="70" header-align="center" align="right"
+                        prop="unemploymentBenefit">
+                        <template #default="scope">
+                          <div>
+                            {{ rowNum(scope.row.unemploymentBenefit) }}
+                          </div>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="大病险" width="70" header-align="center" align="right"
+                        prop="seriousIllnessInsurance">
+                        <template #default="scope">
+                          <div>
+                            {{ rowNum(scope.row.seriousIllnessInsurance) }}
+                          </div>
+                        </template>
+                      </el-table-column>
+                    </el-table-column>
+                    <el-table-column label="公积金" width="80" header-align="center" align="right" prop="housingFund">
                       <template #default="scope">
                         <div>
-                          {{ rowNum(scope.row.medicalInsurance) }}
+                          {{ rowNum(scope.row.housingFund) }}
                         </div>
                       </template>
                     </el-table-column>
-                    <el-table-column
-                      label="失业险"
-                      width="70"
-                      header-align="center"
-                      align="right"
-                      prop="unemploymentBenefit"
-                    >
+                    <el-table-column label="个税" header-align="center" align="right" :prop="form.status === 3 && form.hasIndividualIncomeTax
+                      ? 'individualIncomeTaxConfirm'
+                      : 'currentIndividualIncomeTax'
+                      ">
+                      <template #default="scope">
+                        <div>
+                          {{
+                            rowNum(
+                              form.status === 3 && form.hasIndividualIncomeTax
+                                ? scope.row.individualIncomeTaxConfirm
+                                : scope.row.currentIndividualIncomeTax
+                            )
+                          }}
+                        </div>
+                      </template></el-table-column>
+                    <el-table-column label="其他扣款" width="70" header-align="center" align="right" prop="otherCut">
                       <template #default="scope">
                         <div>
-                          {{ rowNum(scope.row.unemploymentBenefit) }}
+                          {{ rowNum(scope.row.otherCut) }}
                         </div>
                       </template>
                     </el-table-column>
-                    <el-table-column
-                      label="大病险"
-                      width="70"
-                      header-align="center"
-                      align="right"
-                      prop="seriousIllnessInsurance"
-                    >
+                    <el-table-column label="备注" width="100" header-align="center">
                       <template #default="scope">
                         <div>
-                          {{ rowNum(scope.row.seriousIllnessInsurance) }}
+                          {{ scope.row.remark }}
                         </div>
                       </template>
                     </el-table-column>
-                  </el-table-column>
-                  <el-table-column
-                    label="公积金"
-                    width="80"
-                    header-align="center"
-                    align="right"
-                    prop="housingFund"
-                  >
-                    <template #default="scope">
-                      <div>
-                        {{ rowNum(scope.row.housingFund) }}
-                      </div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    label="个税"
-                    header-align="center"
-                    align="right"
-                    :prop="
-                      form.status === 3 && form.hasIndividualIncomeTax
-                        ? 'individualIncomeTaxConfirm'
-                        : 'currentIndividualIncomeTax'
-                    "
-                  >
-                    <template #default="scope">
-                      <div>
-                        {{
-                          rowNum(
-                            form.status === 3 && form.hasIndividualIncomeTax
-                              ? scope.row.individualIncomeTaxConfirm
-                              : scope.row.currentIndividualIncomeTax
-                          )
-                        }}
-                      </div>
-                    </template></el-table-column
-                  >
-                  <el-table-column
-                    label="其他扣款"
-                    width="70"
-                    header-align="center"
-                    align="right"
-                    prop="otherCut"
-                  >
-                    <template #default="scope">
-                      <div>
-                        {{ rowNum(scope.row.otherCut) }}
-                      </div>
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    label="备注"
-                    width="100"
-                    header-align="center"
-                  >
-                    <template #default="scope">
-                      <div>
-                        {{ scope.row.remark }}
-                      </div>
-                    </template>
-                  </el-table-column>
-                </el-table>
+                  </el-table>
+                </div>
               </div>
-            </div>
-          </el-col>
-          <el-col :span="24">
-            <el-divider />
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <span>
-                {{ form.content }}
-              </span>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="合计工资">
-              {{ rowNum(form.amount) }}
-            </el-form-item>
-          </el-col>
-          <el-col v-if="showVerify()" :span="24">
-            <el-divider />
-          </el-col>
-          <el-col v-if="showVerify()" :span="24">
-            <el-form-item label="是否有个税">
-              <el-select
-                v-model.trim="form.hasIndividualIncomeTax"
-                placeholder="请选择"
-                size="small"
-                style="width: 100%"
-                @change="changeIndividual"
-              >
-                <el-option
-                  v-for="item in confirmChoices"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col
-            v-if="showVerify() && form.hasIndividualIncomeTax === 1"
-            :span="24"
-            class="details-container"
-          >
-            <div class="details-head">
-              <div class="title">
-                <i class="fa fa-th-list" aria-hidden="true" /> 人员信息
+            </el-col>
+            <el-col :span="24">
+              <el-divider />
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <span>
+                  {{ form.content }}
+                </span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="合计工资">
+                {{ rowNum(form.amount) }}
+              </el-form-item>
+            </el-col>
+            <el-col v-if="showVerify()" :span="24">
+              <el-divider />
+            </el-col>
+            <el-col v-if="showVerify()" :span="24">
+              <el-form-item label="是否有个税">
+                <el-select v-model.trim="form.hasIndividualIncomeTax" placeholder="请选择" size="small" style="width: 100%"
+                  @change="changeIndividual">
+                  <el-option v-for="item in confirmChoices" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col v-if="showVerify() && form.hasIndividualIncomeTax === 1" :span="24" class="details-container">
+              <div class="details-head">
+                <div class="title">
+                  <i class="fa fa-th-list" aria-hidden="true" /> 人员信息
+                </div>
               </div>
-            </div>
-            <div class="details-body">
-              <div>
-                <el-table
-                  ref="sourceTable"
-                  :data="form.details"
-                  size="small"
-                  max-height="260px"
-                  border
-                  highlight-current-row
-                  header-row-class-name="list-header-row"
-                  row-class-name="list-row"
-                  @selection-change="handleCheckChange"
-                  @current-change="handleCurrentChange"
-                >
-                  <el-table-column
-                    type="index"
-                    label="序号"
-                    width="50"
-                    align="center"
-                  />
-                  <el-table-column label="员工姓名" width="120" align="center">
-                    <template #default="scope">
-                      <div>
-                        {{ scope.row.employeeName }}
-                      </div>
-                      <span
-                        style="
+              <div class="details-body">
+                <div>
+                  <el-table ref="sourceTable" :data="form.details" size="small" max-height="260px" border
+                    highlight-current-row header-row-class-name="list-header-row" row-class-name="list-row"
+                    @selection-change="handleCheckChange" @current-change="handleCurrentChange">
+                    <el-table-column type="index" label="序号" width="50" align="center" />
+                    <el-table-column label="员工姓名" width="120" align="center">
+                      <template #default="scope">
+                        <div>
+                          {{ scope.row.employeeName }}
+                        </div>
+                        <span style="
                           color: red;
                           position: absolute;
                           z-index: 10;
                           top: 4px;
                           right: 6px;
-                        "
-                        >*</span
-                      >
-                    </template>
-                  </el-table-column>
-                  <el-table-column
-                    label="实际个税"
-                    align="center"
-                    width="120"
-                    prop="individualIncomeTaxConfirm"
-                  >
-                    <template #default="scope">
-                      <div>
-                        <el-input-number
-                          v-model="scope.row.individualIncomeTaxConfirm"
-                          size="small"
-                          placeholder="个税"
-                          :precision="2"
-                          :controls="false"
-                          style="width: 100%"
-                          @change="rowChangeSum(scope.row)"
-                        />
-                      </div>
-                    </template>
-                  </el-table-column>
-                </el-table>
-                <br />
+                        ">*</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="实际个税" align="center" width="120" prop="individualIncomeTaxConfirm">
+                      <template #default="scope">
+                        <div>
+                          <el-input-number v-model="scope.row.individualIncomeTaxConfirm" size="small" placeholder="个税"
+                            :precision="2" :controls="false" style="width: 100%" @change="rowChangeSum(scope.row)" />
+                        </div>
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                  <br />
+                </div>
               </div>
-            </div>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="审核备注">
-              <el-input
-                v-if="form.status === 2"
-                v-model.trim="form.verifyContent"
-                maxlength="200"
-                show-word-limit
-                type="textarea"
-                rows="2"
-              />
-              <span v-else> {{ form.verifyContent }}</span>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-    <div class="form-btns-container" style="height: 40px">
-      <el-button
-        v-if="showVerify()"
-        type="danger"
-        size="small"
-        icon="back"
-        style="float: right; margin-left: 12px"
-        @click="handleVerify(4)"
-      >
-        驳回</el-button
-      >
-      <el-button
-        v-if="showVerify()"
-        type="primary"
-        icon="check"
-        size="small"
-        style="float: right; margin-left: 12px"
-        @click="handleVerify(3)"
-      >
-        审核通过</el-button
-      >
-      <el-button
-        v-if="blackButton() && form.status === 3"
-        type="warning"
-        size="small"
-        icon="back"
-        style="float: right; margin-left: 12px"
-        @click="returnStatus()"
-        >退回</el-button
-      >
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="审核备注">
+                <el-input v-if="form.status === 2" v-model.trim="form.verifyContent" maxlength="200" show-word-limit
+                  type="textarea" rows="2" />
+                <span v-else> {{ form.verifyContent }}</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="form-btns-container" style="height: 40px">
+        <el-button v-if="showVerify()" type="danger" size="small" icon="back" style="float: right; margin-left: 12px"
+          @click="handleVerify(4)">
+          驳回</el-button>
+        <el-button v-if="showVerify()" type="primary" icon="check" size="small" style="float: right; margin-left: 12px"
+          @click="handleVerify(3)">
+          审核通过</el-button>
+        <el-button v-if="blackButton() && form.status === 3" type="warning" size="small" icon="back"
+          style="float: right; margin-left: 12px" @click="returnStatus()">退回</el-button>
+      </div>
+      <feedback-dialog ref="feedbackDialogView" :verify="verify" />
     </div>
-    <feedback-dialog ref="feedbackDialogView" :verify="verify" />
   </el-dialog>
 </template>
 <script setup>
@@ -435,6 +265,7 @@ const visible = ref(false);
 const width = ref(1420);
 const selections = ref([]);
 const currentSource = ref(null);
+const loading = ref(false)
 
 const permissions = useUserStore().permissions;
 const all_permission = "*:*:*";
@@ -454,7 +285,7 @@ const confirmChoices = ref([
 const props = defineProps({
   getList: {
     type: Function,
-    default: () => {},
+    default: () => { },
   },
 });
 
@@ -516,9 +347,12 @@ function open(detail) {
 }
 
 function loadData() {
+  loading.value = true
   getDetail(form.value).then((res) => {
     form.value = { ...proxy.deepClone(emptyForm), ...res.data };
     computeTotal();
+  }).finally(() => {
+    loading.value = true
   });
 }
 
@@ -552,7 +386,7 @@ function showVerify() {
     return false;
   } else if (verifiable()) {
     return true;
-  } 
+  }
   else {
     return false;
   }
@@ -560,14 +394,14 @@ function showVerify() {
 
 function verifiable() {
 
-return (
-  permissions.includes("business:salary:verify")||permissions.includes(all_permission) );
+  return (
+    permissions.includes("business:salary:verify") || permissions.includes(all_permission));
 }
 function blackButton() {
 
-return (
-  permissions.includes("business:salary:back")|| permissions.includes(all_permission) 
-);
+  return (
+    permissions.includes("business:salary:back") || permissions.includes(all_permission)
+  );
 }
 
 function handleCurrentChange(row) {
@@ -627,10 +461,13 @@ function handleVerify(status) {
 }
 
 function verify(data) {
+  loading.value = true
   verifyDetail(data).then((res) => {
     reset();
     getList.value();
     close();
+  }).finally(() => {
+    loading.value = false
   });
 }
 
@@ -673,6 +510,7 @@ function returnStatus(status) {
   proxy.$modal
     .confirm("确认退回么？")
     .then((_) => {
+      loading.value = true
       turnBackDetail(form.value).then((res) => {
         // if (res.data.successStatus = true) {
         //   reset()
@@ -684,6 +522,8 @@ function returnStatus(status) {
         reset();
         getList.value();
         close();
+      }).finally(() => {
+        loading.value = false
       });
     })
     .catch((_) => {
@@ -729,8 +569,8 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-    .button-class{
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
+.button-class {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
 </style>