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="800"
        :showFooter="true"
        @register="registerDrawer"
        title="员工档案字段申请审核"
        okText="通过"
        @ok="handleApprove"
      >
        <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>
        
        <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';
  
    export default defineComponent({
      name: 'EmployeeFieldPanel',
      components: {
        BasicTable,
        BasicDrawer,
        TableAction,
      },
      setup() {
        const currentRecord = ref<any>({});
        const allEmployeeFields = ref<any[]>([]);
        const rejectModalVisible = ref(false);
        const rejectReason = ref('');
        const rejectLoading = ref(false);
        
        const [registerDrawer, { openDrawer, closeDrawer }] = 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: 'applyRemark',
            width: 200,
            ellipsis: true,
          },
        ];
  
        // 注册表格
        const [registerTable, { reload }] = useTable({
          api: loadEmployeeFieldApplyList,
          columns,
          useSearchForm: false,
          rowKey: 'id',
          actionColumn: {
            width: 100,
            title: '操作',
            dataIndex: 'action',
          },
        });
  
        // 加载员工档案字段申请列表
        async function loadEmployeeFieldApplyList(params: any) {
          try {
            const requestData = {
              page: params.current || 1,
              pageSize: params.pageSize || 10,
              status: [0], // 只查询待审核的申请
            };
            
            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);
        }
  
        // 处理审核通过
        async function handleApprove() {
          try {
            await defHttp.post({
              url: '/order/erp/users/audit',
              data: {
                id: currentRecord.value.id,
                status: 10, // 通过
              },
            });
            
            message.success('审核通过成功');
            closeDrawer();
            reload();
          } catch (error) {
            console.error('审核失败:', error);
            message.error('审核失败');
          }
        }
  
        // 处理拒绝
        function handleReject() {
          rejectModalVisible.value = true;
          rejectReason.value = '';
        }
  
        // 确认拒绝
        async function handleRejectConfirm() {
          if (!rejectReason.value.trim()) {
            message.warning('请输入拒绝原因');
            return;
          }
          
          try {
            rejectLoading.value = true;
            
            await defHttp.post({
              url: '/order/erp/users/audit',
              data: {
                id: currentRecord.value.id,
                status: 20, // 拒绝
                refuseRemark: rejectReason.value,
              },
            });
            
            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,
          allEmployeeFields,
          rejectModalVisible,
          rejectReason,
          rejectLoading,
          handleDetail,
          handleApprove,
          handleReject,
          handleRejectConfirm,
          handleRejectCancel,
        };
      },
    });
  </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;
            }
          }
        }
      }
    }
  </style>