canrd-outside / order-erp-front · Files

<template>
    <div>
      <!-- 薪资字段申请列表 -->
      <BasicTable @register="registerTable" className="p-0">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  label: '详情',
                  onClick: handleDetail.bind(null, record),
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
  
      <!-- 申请详情抽屉 -->
      <BasicDrawer
        width="600"
        :showFooter="true"
        @register="registerDrawer"
        title="薪资字段申请详情"
        okText="通过"
        @ok="handleApprove"
      >
        <div class="detail-content">
          <a-descriptions title="薪资信息" :column="2" bordered>
            <a-descriptions-item label="社保配置">
              {{ currentRecord.userOldSalaryVO?.wagesName || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="基本工资">
              {{ currentRecord.userOldSalaryVO?.basicWages || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="岗位津贴">
              {{ currentRecord.userOldSalaryVO?.postAllowance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="管理岗位津贴">
              {{ currentRecord.userOldSalaryVO?.managementAllowance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="话费补贴">
              {{ currentRecord.userOldSalaryVO?.phoneAllowance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="餐补">
              {{ currentRecord.userOldSalaryVO?.mealAllowance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="交通补贴">
              {{ currentRecord.userOldSalaryVO?.transportationAllowance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="全勤奖">
              {{ currentRecord.userOldSalaryVO?.attendanceAllowance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="绩效部分">
              {{ currentRecord.userOldSalaryVO?.performanceAllowance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="提成">
              {{ currentRecord.userOldSalaryVO?.commissionPrice || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="奖金">
              {{ currentRecord.userOldSalaryVO?.bonusPrice || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="应扣工资">
              {{ currentRecord.userOldSalaryVO?.deductibleSalaryPrice || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="其他扣款">
              {{ currentRecord.userOldSalaryVO?.otherDeductionsPrice || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="个人所得税">
              {{ currentRecord.userOldSalaryVO?.tax || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="个人养老保险">
              {{ currentRecord.userOldSalaryVO?.personalPensionInsurance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="个人医疗保险">
              {{ currentRecord.userOldSalaryVO?.personalPensionMedicalInsurance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="个人失业保险">
              {{ currentRecord.userOldSalaryVO?.personalPensionUnemploymentInsurance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="个人大额医疗">
              {{ currentRecord.userOldSalaryVO?.personalPensionLargeScaleMedicalInsurance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="个人公积金">
              {{ currentRecord.userOldSalaryVO?.personalPensionProvidentFundInsurance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="公司养老保险">
              {{ currentRecord.userOldSalaryVO?.companyInsurance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="公司医疗保险">
              {{ currentRecord.userOldSalaryVO?.companyMedicalInsurance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="公司失业保险">
              {{ currentRecord.userOldSalaryVO?.companyUnemploymentInsurance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="公司工伤保险">
              {{ currentRecord.userOldSalaryVO?.companyEmploymentInjuryInsurance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="公司生育保险">
              {{ currentRecord.userOldSalaryVO?.companyMaternityInsurance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="公司大额医疗">
              {{ currentRecord.userOldSalaryVO?.companyLargeScaleMedicalInsurance || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="公司公积金">
              {{ currentRecord.userOldSalaryVO?.companyProvidentFundInsurance || '-' }}
            </a-descriptions-item>
          </a-descriptions>
          
          <a-divider />
          
          <div class="field-info">
            <h3>申请编辑的字段：</h3>
            <div class="field-list">
              <a-tag 
                v-for="field in appliedFields" 
                :key="field" 
                color="green"
                class="field-tag"
              >
                {{ field }}
              </a-tag>
            </div>
          </div>
        </div>
        
        <template #appendFooter>
          <a-button @click="handleReject">不通过</a-button>
        </template>
      </BasicDrawer>
  
      <!-- 拒绝原因弹框 -->
      <a-modal
        v-model:visible="rejectModalVisible"
        title="拒绝原因"
        @ok="handleRejectConfirm"
        @cancel="handleRejectCancel"
        :confirmLoading="rejectLoading"
      >
        <a-textarea
          v-model:value="rejectReason"
          placeholder="请输入拒绝原因"
          :rows="4"
          :maxlength="200"
          show-count
        />
      </a-modal>
    </div>
  </template>
  
  <script lang="ts">
    import { defineComponent, ref } from 'vue';
    import { BasicTable, useTable, TableAction } from '/@/components/Table';
    import { BasicDrawer, useDrawer } from '/@/components/Drawer';
    import { message } from 'ant-design-vue';
    import { defHttp } from '/@/utils/http/axios';
    import dayjs from 'dayjs';
  
    export default defineComponent({
      name: 'SalaryPanel',
      components: {
        BasicTable,
        BasicDrawer,
        TableAction,
      },
      props: {
        selectedDate: {
          type: Object,
          default: null,
        },
      },
      setup(props) {
        const currentRecord = ref<any>({});
        const appliedFields = ref<string[]>([]);
        const rejectModalVisible = ref(false);
        const rejectReason = ref('');
        const rejectLoading = ref(false);
        
        const [registerDrawer, { openDrawer, closeDrawer }] = useDrawer();
  
        // 字段映射表
        const fieldMapping: Record<string, string> = {
          'wages': '社保配置',
          'commissionPrice': '提成',
          'bonusPrice': '奖金',
          'deductibleSalaryPrice': '应扣工资',
          'otherDeductionsPrice': '其他扣款',
          'tax': '个人所得税',
          'basicWages': '基本工资',
          'postAllowance': '岗位津贴',
          'managementAllowance': '管理岗位津贴',
          'phoneAllowance': '话费补贴',
          'mealAllowance': '餐补',
          'transportationAllowance': '交通补贴',
          'attendanceAllowance': '全勤奖',
          'performanceAllowance': '绩效部分',
        };
  
        // 表格列定义
        const columns = [
          {
            title: '申请人',
            dataIndex: 'createBy',
            width: 120,
          },
          {
            title: '审核字段类型',
            dataIndex: 'type',
            width: 150,
            customRender: () => {
              return '薪资字段';
            },
          },
          {
            title: '日期',
            dataIndex: 'dateTime',
            width: 120,
          },
          {
            title: '姓名',
            dataIndex: 'chineseName',
            width: 100,
          },
          {
            title: '昵称',
            dataIndex: 'nickName',
            width: 100,
          },
          {
            title: '申请原因',
            dataIndex: 'applyRemark',
            width: 200,
            ellipsis: true,
          },
        ];
  
        // 注册表格
        const [registerTable, { reload }] = useTable({
          api: loadSalaryApplyList,
          columns,
          useSearchForm: false,
          rowKey: 'id',
          actionColumn: {
            width: 100,
            title: '操作',
            dataIndex: 'action',
          },
        });
  
        // 加载薪资字段申请列表
        async function loadSalaryApplyList(params: any) {
          try {
            const requestData: any = {
              ...params,
              status: [0], // 只查询待审核的申请
            };
            
            // 如果选择了日期，添加dateTime参数
            if (props.selectedDate) {
              requestData.dateTime = dayjs(props.selectedDate).format('YYYY-MM');
            }
            
            const response = await defHttp.post({
              url: '/order/erp/users/oldWages/applyEditFields_list_by_page',
              data: requestData,
            });
            
            return {
              items: response.records || [],
              total: response.total || 0,
            };
          } catch (error) {
            console.error('加载薪资字段申请列表失败:', error);
            message.error('加载数据失败');
            return {
              items: [],
              total: 0,
            };
          }
        }
  
        // 处理详情查看
        function handleDetail(record: any) {
          currentRecord.value = record;
          
          // 解析申请的字段 - 使用 userOldSalaryFieldVO
          const fields: string[] = [];
          if (record.userOldSalaryFieldVO) {
            Object.entries(record.userOldSalaryFieldVO).forEach(([key, value]) => {
              if (value === 'UN_LOCKED' && fieldMapping[key]) {
                fields.push(fieldMapping[key]);
              }
            });
          }
          
          appliedFields.value = fields;
          openDrawer(true);
        }
  
        // 处理审核通过
        async function handleApprove() {
          try {
            await defHttp.post({
              url: '/order/erp/users/oldWages/audit',
              data: {
                id: currentRecord.value.id,
                status: 10,
              },
            });
            
            message.success('审核通过成功');
            closeDrawer();
            reload();
          } catch (error) {
            console.error('审核通过失败:', error);
            message.error('审核通过失败');
          }
        }
  
        // 处理审核拒绝
        function handleReject() {
          rejectReason.value = '';
          rejectModalVisible.value = true;
        }
  
        // 确认拒绝
        async function handleRejectConfirm() {
          if (!rejectReason.value.trim()) {
            message.warning('请输入拒绝原因');
            return;
          }
  
          try {
            rejectLoading.value = true;
            await defHttp.post({
              url: '/order/erp/users/oldWages/audit',
              data: {
                id: currentRecord.value.id,
                status: 20,
                refuseRemark: rejectReason.value.trim(),
              },
            });
            
            message.success('审核拒绝成功');
            rejectModalVisible.value = false;
            closeDrawer();
            reload();
          } catch (error) {
            console.error('审核拒绝失败:', error);
            message.error('审核拒绝失败');
          } finally {
            rejectLoading.value = false;
          }
        }
  
        // 取消拒绝
        function handleRejectCancel() {
          rejectModalVisible.value = false;
          rejectReason.value = '';
        }
  
        return {
          registerTable,
          registerDrawer,
          currentRecord,
          appliedFields,
          rejectModalVisible,
          rejectReason,
          rejectLoading,
          handleDetail,
          handleApprove,
          handleReject,
          handleRejectConfirm,
          handleRejectCancel,
          reload,
        };
      },
    });
  </script>
  
  <style lang="less" scoped>
    .detail-content {
      padding: 16px;
      
      .field-info {
        margin-top: 16px;
        
        h3 {
          margin-bottom: 12px;
          color: #52c41a;
        }
        
        .field-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          
          .field-tag {
            margin-bottom: 8px;
            padding: 4px 12px;
            font-size: 14px;
          }
        }
      }
    }
  </style>