canrd-outside / order-erp-front · Files

<template>
    <div>
      <BasicTable @register="registerTable" className="p-0">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="record.status === 10 ? 'green' : 'red'">
              {{ record.status === 10 ? '通过' : '拒绝' }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  label: '详情',
                  onClick: handleDetail.bind(null, record),
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
      
      <!-- 详情抽屉 -->
      <BasicDrawer
        width="600"
        :showFooter="false"
        @register="registerDrawer"
        title="考勤字段申请详情"
      >
        <div class="detail-content">
          <a-descriptions title="考勤信息" :column="2" bordered>
            <a-descriptions-item label="考勤组名称">
              {{ currentRecord.userOldAttendanceVO?.monthlyAttendanceName || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="工作日">
              {{ currentRecord.userOldAttendanceVO?.monthlyWorkingDay || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="计薪日">
              {{ currentRecord.userOldAttendanceVO?.payDay || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="实际出勤">
              {{ currentRecord.userOldAttendanceVO?.attendanceDays || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="请假">
              {{ currentRecord.userOldAttendanceVO?.leaveDays || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="本月调休">
              {{ currentRecord.userOldAttendanceVO?.compensatoryLeaveDays || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="本月存休">
              {{ currentRecord.userOldAttendanceVO?.storageLeaveDays || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="上月存休">
              {{ currentRecord.userOldAttendanceVO?.lastMonthLeaveDays || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="累计存休">
              {{ currentRecord.userOldAttendanceVO?.totalStorageLeaveDays || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="全部上班时间">
              {{ currentRecord.userOldAttendanceVO?.workHours || '-' }}
            </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="blue"
                class="field-tag"
              >
                {{ field }}
              </a-tag>
            </div>
          </div>
          
          <a-divider />
          
          <a-descriptions title="审核信息" :column="2" bordered>
            <a-descriptions-item label="审核状态">
              <a-tag :color="currentRecord.status === 10 ? 'green' : 'red'">
                {{ currentRecord.status === 10 ? '通过' : '拒绝' }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="拒绝原因" v-if="currentRecord.status === 20">
              {{ currentRecord.refuseRemark || '-' }}
            </a-descriptions-item>
          </a-descriptions>
        </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';
    import dayjs from 'dayjs';
  
    export default defineComponent({
      name: 'AttendanceApprovedPanel',
      components: {
        BasicTable,
        BasicDrawer,
        TableAction,
      },
      props: {
        selectedDate: {
          type: Object,
          default: null,
        },
      },
      setup(props) {
        const currentRecord = ref<any>({});
        const appliedFields = ref<string[]>([]);
        
        const [registerDrawer, { openDrawer, closeDrawer }] = useDrawer();
  
        // 字段映射表
        const fieldMapping: Record<string, string> = {
          'monthlyAttendance': '考勤组',
          'attendanceDays': '实际出勤小时',
          'leaveDays': '请假',
          'compensatoryLeaveDays': '本月调休',
          'storageLeaveDays': '本月存休',
          'lastMonthLeaveDays': '上月存休',
          'totalStorageLeaveDays': '累计存休',
          'workHours': '全部上班时间',
        };
  
        // 表格列定义
        const columns = [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            customRender: ({ index }: { index: number }) => index + 1,
          },
          {
            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: 'status',
            width: 100,
            key: 'status',
          },
          {
            title: '拒绝原因',
            dataIndex: 'refuseRemark',
            width: 200,
            ellipsis: true,
            customRender: ({ record }: { record: any }) => {
              return record.refuseRemark || '-';
            },
          },
        ];
  
        // 注册表格
        const [registerTable, { reload }] = useTable({
          api: loadAttendanceApprovedList,
          columns,
          useSearchForm: false,
          rowKey: 'id',
          actionColumn: {
            width: 100,
            title: '操作',
            dataIndex: 'action',
          },
        });
  
        // 加载考勤字段已审核列表
        async function loadAttendanceApprovedList(params: any) {
          try {
            const requestData: any = {
              ...params,
              status: [10, 20], // 查询已审核的申请（通过和拒绝）
            };
            
            // 如果选择了日期，添加dateTime参数
            if (props.selectedDate) {
              requestData.dateTime = dayjs(props.selectedDate).format('YYYY-MM');
            }
            
            const response = await defHttp.post({
              url: '/order/erp/users/oldAttendance/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;
          
          // 解析申请的字段 - 使用 userOldAttendanceFieldVO
          const fields: string[] = [];
          if (record.userOldAttendanceFieldVO) {
            Object.entries(record.userOldAttendanceFieldVO).forEach(([key, value]) => {
              if (value === 'UN_LOCKED' && fieldMapping[key]) {
                fields.push(fieldMapping[key]);
              }
            });
          }
          
          appliedFields.value = fields;
          openDrawer(true);
        }
  
        return {
          registerTable,
          registerDrawer,
          currentRecord,
          appliedFields,
          handleDetail,
          reload,
        };
      },
    });
  </script>
  
  <style lang="less" scoped>
    .detail-content {
      padding: 16px;
      
      .field-info {
        margin-top: 16px;
        
        h3 {
          margin-bottom: 12px;
          color: #1890ff;
        }
        
        .field-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          
          .field-tag {
            margin-bottom: 8px;
            padding: 4px 12px;
            font-size: 14px;
          }
        }
      }
    }
  </style>