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 v-if="column.key === 'status'">
            <a-tag :color="record.status === 10 ? 'green' : 'red'">
              {{ record.status === 10 ? '已通过' : '已拒绝' }}
            </a-tag>
          </template>
        </template>
      </BasicTable>
      
      <!-- 详情抽屉 -->
      <BasicDrawer
        width="800"
        :showFooter="false"
        @register="registerDrawer"
        title="员工档案字段申请详情"
      >
        <div class="detail-content">
          <a-descriptions title="员工基本信息" :column="2" bordered>
            <a-descriptions-item label="姓名">
              {{ currentRecord.chineseName || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="昵称">
              {{ currentRecord.nickName || '-' }}
            </a-descriptions-item>
          </a-descriptions>
          
          <a-divider />
          
          <div class="field-info">
            <h3>员工档案详细信息：</h3>
            <div class="field-list">
              <a-descriptions :column="2" bordered>
                <a-descriptions-item 
                  v-for="field in allEmployeeFields" 
                  :key="field.key"
                  :label="field.label"
                >
                  <span class="field-value" :class="{ 'highlight-field': field.isApplied }">
                    {{ field.value || '-' }}
                  </span>
                  <a-tag v-if="field.isApplied" color="red" size="small" style="margin-left: 8px">
                    已申请修改
                  </a-tag>
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </div>
          
          <div v-if="currentRecord.status === 20 && currentRecord.refuseRemark" class="reject-info">
            <a-divider />
            <h3>拒绝原因：</h3>
            <p class="reject-reason">{{ currentRecord.refuseRemark }}</p>
          </div>
        </div>
      </BasicDrawer>
    </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';
  
    export default defineComponent({
      name: 'EmployeeFieldApprovedPanel',
      components: {
        BasicTable,
        BasicDrawer,
        TableAction,
      },
      setup() {
        const currentRecord = ref<any>({});
        const allEmployeeFields = ref<any[]>([]);
        
        const [registerDrawer, { openDrawer }] = useDrawer();
  
        // 字段映射表
        const fieldMapping: Record<string, string> = {
          'attendanceAllowance': '全勤奖',
          'basicWages': '基本工资',
          'contractEndTime': '合同结束时间',
          'contractStartTime': '合同开始时间',
          'managementAllowance': '管理岗位津贴',
          'mealAllowance': '餐补',
          'monthlyAttendanceName': '考勤组',
          'performanceAllowance': '绩效部分',
          'periodEndTime': '试用期结束时间',
          'periodStartTime': '试用期开始时间',
          'phoneAllowance': '话费补贴',
          'postAllowance': '岗位津贴',
          'roleName': '岗位',
          'socialSettingName': '社保',
          'transportationAllowance': '交通补贴',
        };
  
        // 表格列定义
        const columns = [
          {
            title: '申请人',
            dataIndex: 'createBy',
            width: 120,
          },
          {
            title: '审核字段类型',
            dataIndex: 'type',
            width: 150,
            customRender: () => {
              return '员工档案信息修改';
            },
          },
          {
            title: '姓名',
            dataIndex: 'chineseName',
            width: 100,
          },
          {
            title: '昵称',
            dataIndex: 'nickName',
            width: 100,
          },
          {
            title: '状态',
            dataIndex: 'status',
            width: 100,
            key: 'status',
          },
          {
            title: '拒绝原因',
            dataIndex: 'refuseRemark',
            width: 200,
            ellipsis: true,
            customRender: ({ record }: { record: any }) => {
              return record.refuseRemark || '-';
            },
          },
        ];
  
        // 注册表格
        const [registerTable] = useTable({
          api: loadEmployeeFieldApprovedList,
          columns,
          useSearchForm: false,
          rowKey: 'id',
          actionColumn: {
            width: 100,
            title: '操作',
            dataIndex: 'action',
          },
        });
  
        // 加载员工档案字段已审核列表
        async function loadEmployeeFieldApprovedList(params: any) {
          try {
            const requestData = {
              page: params.current || 1,
              pageSize: params.pageSize || 10,
              status: [10, 20], // 查询已通过和已拒绝的申请
            };
            
            const response = await defHttp.post({
              url: '/order/erp/users/fieldApply_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;
          
          // 获取所有员工档案字段信息
          const fields: any[] = [];
          const userWagesResultVO = record.userWagesResultVO || {};
          const userWagesFieldLockApplyVO = record.userWagesFieldLockApplyVO || {};
          
          // 遍历所有字段映射，显示完整的员工档案信息
          Object.entries(fieldMapping).forEach(([key, label]) => {
            const value = userWagesResultVO[key];
            const isApplied = userWagesFieldLockApplyVO[key] === 'UN_LOCKED';
            
            fields.push({
              key,
              label,
              value: value || '',
              isApplied, // 标记是否为申请修改的字段
            });
          });
          
          allEmployeeFields.value = fields;
          openDrawer(true);
        }
  
        return {
          registerTable,
          registerDrawer,
          currentRecord,
          allEmployeeFields,
          handleDetail,
        };
      },
    });
  </script>
  
  <style lang="less" scoped>
    .detail-content {
      .field-info {
        margin-top: 16px;
        
        h3 {
          margin-bottom: 12px;
          color: #333;
        }
        
        .field-list {
          .field-value {
            font-weight: 500;
            
            &.highlight-field {
              color: #ff4d4f;
              background-color: #fff2f0;
              padding: 2px 6px;
              border-radius: 4px;
              border: 1px solid #ffccc7;
            }
          }
        }
      }
      
      .reject-info {
        margin-top: 16px;
        
        h3 {
          margin-bottom: 12px;
          color: #333;
        }
        
        .reject-reason {
          padding: 12px;
          background-color: #fff2f0;
          border: 1px solid #ffccc7;
          border-radius: 4px;
          color: #ff4d4f;
          margin: 0;
        }
      }
    }
  </style>