canrd-outside / order-erp-front · Files

<template>
    <div class="attendance-container">
      <!-- 搜索表单 -->
      <div class="search-form">
        <a-form layout="inline" @submit.prevent="handleSearch">
          <a-form-item label="姓名">
            <a-input v-model:value="searchParams.chineseName" placeholder="输入姓名" />
          </a-form-item>
          <a-form-item label="昵称">
            <a-input v-model:value="searchParams.nickName" placeholder="输入昵称" />
          </a-form-item>
          <a-form-item label="部门">
            <a-select 
              v-model:value="searchParams.deptId" 
              style="width: 160px" 
              placeholder="请选择部门"
              allowClear
            >
              <a-select-option 
                v-for="dept in deptOptions" 
                :key="dept.id" 
                :value="dept.id"
              >
                {{ dept.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="公司">
            <a-select 
              v-model:value="searchParams.companyId" 
              style="width: 160px" 
              placeholder="请选择公司"
              allowClear
            >
              <a-select-option 
                v-for="company in companyOptions" 
                :key="company.id" 
                :value="company.id"
              >
                {{ company.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="统计月份" required>
            <a-date-picker 
              v-model:value="searchParams.dateTime" 
              picker="month" 
              :format="monthFormat"
              value-format="YYYY-MM" 
              placeholder="选择月份"
              style="width: 120px"
            />
          </a-form-item>
          <a-form-item label="审核状态">
            <a-select v-model:value="searchParams.attendanceStatus" style="width: 120px" >
              <a-select-option value="0">待审核</a-select-option>
              <a-select-option value="10">已审核</a-select-option>
              <a-select-option value="20">已驳回</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">查询</a-button>
            <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      
      <!-- 工具栏 -->
      <div class="toolbar" style="margin-bottom: 16px; margin-top: 16px">
        <!-- 显示已选择数量 -->
        <a-alert v-if="selectedRowKeys.length > 0" style="margin-bottom: 16px" type="info" show-icon>
          <template #message>
            <span>已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a> 项</span>
            <a-button type="link" @click="onClearSelected">取消选择</a-button>
          </template>
        </a-alert>
        
        <!-- 批量操作按钮区域 -->
        <div class="button-group" style="display: flex; gap: 8px; margin-bottom: 16px">
          <!-- 批量设置状态按钮 -->
          <a-dropdown>
            <a-button type="primary">
              设置状态
              <DownOutlined />
            </a-button>
            <template #overlay>
              <a-menu @click="handleBatchOperation">
                <a-menu-item key="10">设置审核通过</a-menu-item>
                <a-menu-item key="20">设置审核驳回</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
          
          <!-- 导出按钮 -->
          <a-button type="primary" @click="handleExport">
            导出考勤数据
          </a-button>
        </div>
      </div>
      
      <!-- 原生表格显示数据 -->
      <div class="table-container">
        <a-table 
          :loading="loading" 
          :columns="columns"
          :data-source="tableData" 
          :pagination="pagination"
          :row-key="record => record.userId"
          :row-selection="rowSelection"
          @change="handleTableChange"
          bordered
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'attendanceStatus'">
              {{ getAttendanceStatusText(record.attendanceStatus) }}
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a @click="handleEdit(record,searchParams.dateTime)">编辑</a>
              <a-divider type="vertical" />
              <a @click="handleApplyPermission(record)">申请权限</a>
              <a-divider type="vertical" />
              <a-popconfirm
                title="是否确认删除？"
                @confirm="handleDelete(record)"
              >
                <a style="color: #ff4d4f">删除</a>
              </a-popconfirm>
          </template>
        </template>
        </a-table>
      </div>
      
      <!-- 使用抽屉替代模态框 -->
      <BasicDrawer
        v-bind="$attrs"
        @register="registerDrawer"
        @ok="handleDrawerSubmit"
        :title="drawerTitle"
        width="40%"
        :showFooter="true"
        okText="保存"
        :closable="true"
      >
        <AttendanceForm 
          ref="drawerFormRef" 
          :record="currentRecord" 
          :is-update="isUpdate"
          :dateTime="editDateTime"
        />
      </BasicDrawer>
      
      <!-- 申请权限抽屉 -->
      <BasicDrawer
        v-bind="$attrs"
        @register="registerApplyDrawer"
        @ok="handleApplySubmit"
        title="字段编辑权限申请"
        width="60%"
        :destroyOnClose="true"
        :isDetail="true"
        :showFooter="true"
        okText="申请"
        :showDetailBack="false"
        :closable="true"
        class="apply-permission-drawer"
      >
        <div>
          <h3 style="margin-bottom: 16px; color: #1890ff;">请选择需要申请编辑权限的字段：</h3>
          <BasicForm @register="registerApplyForm" />
        </div>
      </BasicDrawer>
      
      <!-- 申请理由组件 -->
      <ApproveReason @register="registerApproveReason" @success="handleApproveSuccess" />
    </div>
  </template>
  
  <script lang="ts">
    import { defineComponent, ref, reactive, onMounted, computed } from 'vue';
    import { message, Modal } from 'ant-design-vue';
    import { BasicDrawer, useDrawer } from '/@/components/Drawer';
    import { BasicForm, useForm } from '/@/components/Form/index';
    import { useModal } from '/@/components/Modal';
    import type { AttendanceParams, PageResult, AttendanceData } from '/@/api/system/attendance'; 
    import { getAttendanceList, getAttendanceStatusText } from '/@/api/system/attendance';
    import { defHttp } from '/@/utils/http/axios';
    import dayjs from 'dayjs';
    import { DownOutlined } from '@ant-design/icons-vue';
    import AttendanceForm from './AttendanceModal.vue';
    import ApproveReason from './ApproveReason.vue';
    import axios from 'axios';
    import { useUserStoreWithOut } from '/@/store/modules/user';
  
    const userStore = useUserStoreWithOut();
    export default defineComponent({
      name: 'AttendanceManagement',
      components: { BasicDrawer, BasicForm, AttendanceForm, ApproveReason, DownOutlined },
      setup() {
        // 表格数据相关状态
        const loading = ref(false);
        const tableData = ref<any[]>([]);
        const pagination = reactive({
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
          showTotal: (total: number) => `共 ${total} 条数据`,
        });
        
        // 部门选项数据
        const deptOptions = ref<{ id: number | string; name: string }[]>([]);
        
        // 公司选项数据
        const companyOptions = ref<{ id: number | string; name: string }[]>([]);
        
        // 搜索参数
        const monthFormat = 'YYYY-MM';
        const searchParams = reactive<any>({
          nickName: '',
          chineseName: '',
          deptId: undefined,
          companyId: undefined,
          dateTime: dayjs().format(monthFormat),
          attendanceStatus: '',
        });
  
        // 抽屉表单相关状态
        const currentRecord = ref<any>(null);
        const isUpdate = ref(false);
        const drawerFormRef = ref(null);
        const editDateTime = ref('');
        
        // 多选相关状态
        const selectedRowKeys = ref<(string | number)[]>([]);
        const selectedRows = ref<any[]>([]);
        
        // 注册抽屉
        const [registerDrawer, { openDrawer, closeDrawer }] = useDrawer();
        
        // 申请权限相关状态
        const currentApplyRecord = ref<any>(null);
        const selectedApplyFields = ref<any>({});
        
        // 定义申请权限表单字段
        const getApplySchema = () => [
          {
            field: 'monthlyAttendance',
            label: '考勤组',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'attendanceDays',
            label: '实际出勤小时',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'leaveDays',
            label: '请假',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'compensatoryLeaveDays',
            label: '本月调休',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'storageLeaveDays',
            label: '本月存休',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'lastMonthLeaveDays',
            label: '上月存休',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'totalStorageLeaveDays',
            label: '累计存休',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
          {
            field: 'workHours',
            label: '全部上班时间',
            component: 'Switch',
            componentProps: {
              checkedValue: 'UN_LOCKED',
              unCheckedValue: 'LOCKED',
            },
            colProps: {
              span: 8,
            },
          },
        ];
        
        // 注册申请权限表单
        const [registerApplyForm, { getFieldsValue: getApplyFieldsValue }] = useForm({
          labelWidth: 180,
          schemas: getApplySchema(),
          showActionButtonGroup: false,
          actionColOptions: {
            span: 24,
          },
        });
        
        // 注册申请权限抽屉
        const [registerApplyDrawer, { openDrawer: openApplyDrawer, closeDrawer: closeApplyDrawer }] = useDrawer();
        
        // 注册申请理由模态框
        const [registerApproveReason, { openModal: openApproveReasonModal }] = useModal();
        
        // 表格行选择配置
        const rowSelection = computed(() => {
          return {
            selectedRowKeys: selectedRowKeys.value,
            onChange: (keys: (string | number)[], rows: any[]) => {
              selectedRowKeys.value = keys;
              selectedRows.value = rows;
            },
            preserveSelectedRowKeys: true,
          };
        });
        
        // 清除所有选择
        const onClearSelected = () => {
          selectedRowKeys.value = [];
          selectedRows.value = [];
        };
  
        // 定义表格列
        const columns = [
          { title: '昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
          { title: '姓名', dataIndex: 'chineseName', key: 'chineseName', width: 120 },
          { title: '角色', dataIndex: 'roleName', key: 'roleName', width: 120 },
          { title: '部门', dataIndex: 'deptName', key: 'deptName', width: 120 },
          { title: '公司', dataIndex: 'companyName', key: 'companyName', width: 150 },
          { title: '考勤组', dataIndex: 'monthlyAttendanceName', key: 'monthlyAttendanceName', width: 120 },
          { title: '计薪日', dataIndex: 'payDay', key: 'payDay', width: 100 },
          { title: '工作日', dataIndex: 'monthlyWorkingDay', key: 'monthlyWorkingDay', width: 100 },
          { title: '实际出勤小时', dataIndex: 'attendanceDays', key: 'attendanceDays', width: 120 },
          { title: '请假', dataIndex: 'leaveDays', key: 'leaveDays', width: 100 },
          { title: '本月调休', dataIndex: 'compensatoryLeaveDays', key: 'compensatoryLeaveDays', width: 100 },
          { title: '本月存休', dataIndex: 'storageLeaveDays', key: 'storageLeaveDays', width: 100 },
          { title: '上月存休', dataIndex: 'lastMonthLeaveDays', key: 'lastMonthLeaveDays', width: 100 },
          { title: '累计存休', dataIndex: 'totalStorageLeaveDays', key: 'totalStorageLeaveDays', width: 100 },
          { title: '全部上班时间', dataIndex: 'workHours', key: 'workHours', width: 120 },
          { title: '审核状态', dataIndex: 'attendanceStatus', key: 'attendanceStatus', width: 100 },
          { title: '操作', dataIndex: 'action', key: 'action', width: 120 },
        ];
        
        // 加载部门数据
        const loadDeptOptions = async () => {
          try {
            const result = await defHttp.post<any[]>({
              url: '/order/erp/depts/all'
            });
            
            if (Array.isArray(result)) {
              deptOptions.value = result;
            }
          } catch (error) {
            console.error('加载部门数据失败:', error);
          }
        };
        
        // 加载公司数据
        const loadCompanyOptions = async () => {
          try {
            const result = await defHttp.post<any[]>({
              url: '/order/erp/jobs/all'
            });
            
            if (Array.isArray(result)) {
              companyOptions.value = result;
            }
          } catch (error) {
            console.error('加载公司数据失败:', error);
          }
        };
  
        // 加载数据
        const loadData = async () => {
          try {
            loading.value = true;
            
            const params: AttendanceParams = {
              page: pagination.current,
              pageSize: pagination.pageSize,
              dateTime: searchParams.dateTime,
            };
            
            if (searchParams.nickName) params.nickName = searchParams.nickName;
            if (searchParams.chineseName) params.chineseName = searchParams.chineseName;
            if (searchParams.deptId) params.deptId = searchParams.deptId;
            if (searchParams.companyId) params.companyId = searchParams.companyId;
            if (searchParams.attendanceStatus) params.attendanceStatus = searchParams.attendanceStatus;
            
            const result: PageResult<AttendanceData> = await getAttendanceList(params);
            
            tableData.value = result.records || [];
            pagination.total = result.total || 0;
          } catch (error) {
            console.error('加载数据失败:', error);
            message.error('加载数据失败，请稍后重试');
            tableData.value = [];
            pagination.total = 0;
          } finally {
            loading.value = false;
          }
        };
        
        // 处理表格分页变化
        const handleTableChange = (pag: any) => {
          pagination.current = pag.current;
          pagination.pageSize = pag.pageSize;
          loadData();
        };
        
        // 处理搜索表单提交
        const handleSearch = () => {
          pagination.current = 1;
          loadData();
        };
        
        // 重置搜索条件
        const handleReset = () => {
          Object.assign(searchParams, {
            nickName: '',
            chineseName: '',
            deptId: undefined,
            companyId: undefined,
            dateTime: dayjs().format(monthFormat),
            attendanceStatus: '',
          });
          pagination.current = 1;
          loadData();
        };
  
        // 编辑记录
        const handleEdit = (record: any, dateTime: string) => {
          currentRecord.value = { ...record };
          isUpdate.value = true;
          editDateTime.value = dateTime;
          openDrawer(true);
        };
  
        // 提交抽屉表单
        const handleDrawerSubmit = async () => {
          if (!drawerFormRef.value) return;
          try {
            loading.value = true;
            
            // 调用子组件的保存方法
            const result = await drawerFormRef.value.handleSave();
            
            if (result) {
              message.success('保存成功');
              closeDrawer();
              loadData(); // 重新加载表格数据
            }
          } catch (error) {
            console.error('保存失败:', error);
            message.error('保存失败，请稍后重试');
          } finally {
            loading.value = false;
          }
        };
  
        // 删除记录
        const handleDelete = async (record: any) => {
          try {
            loading.value = true;
            
            // 调用删除接口
            await defHttp.post({
              url: '/order/erp/users/oldAttendance/delete',
              params: {
                userId: record.userId,
                dateTime: searchParams.dateTime
              }
            });
            
            // 删除成功后，从选择行中移除
            if (selectedRowKeys.value.includes(record.userId)) {
              selectedRowKeys.value = selectedRowKeys.value.filter(key => key !== record.userId);
              selectedRows.value = selectedRows.value.filter(row => row.userId !== record.userId);
            }
            
            message.success('删除成功');
            // 重新加载数据
            loadData();
          } catch (error) {
            console.error('删除失败:', error);
            message.error('删除失败，请稍后重试');
          } finally {
            loading.value = false;
          }
        };
        
        // 处理批量操作
        const handleBatchOperation = async (menuInfo) => {
          if (!selectedRowKeys.value || selectedRowKeys.value.length === 0) {
            message.warning('请先选择要操作的记录');
            return;
          }
          
          // 获取选中的用户ID数组
          const userIds = selectedRows.value.map(row => row.userId);
          
          // 获取点击的菜单项key作为状态值
          const attendanceStatus = Number(menuInfo.key);
          
          try {
            loading.value = true;
            
            // 发送批量设置状态请求
            await defHttp.post({
              url: '/order/erp/users/oldAttendance/setStatus',
              params: {
                userIds,
                attendanceStatus,
                dateTime: searchParams.dateTime,
              }
            });
            
            message.success('状态设置成功');
            
            // 重新加载数据
            loadData();
            
            // 清除选择
            onClearSelected();
          } catch (error) {
            console.error('设置状态失败:', error);
            message.error('设置状态失败，请稍后重试');
          } finally {
            loading.value = false;
          }
        };
  
        // 处理导出功能
        const handleExport = async () => {
    if (selectedRowKeys.value.length === 0) {
      message.warning('请先选择要导出的记录');
      return;
    }
  
    loading.value = true;
    message.loading({ content: '正在准备导出数据...', key: 'exporting', duration: 0 });
    const token = userStore.getToken;
    axios
      .post(
        '/basic-api/order/erp/users/oldAttendance/export',
        {
          dateTime: searchParams.dateTime,
          ids: selectedRows.value.map(row => row.userId),
          isExport: true,
        },
        { 
          responseType: 'blob',
          headers: {
            Authorization: `${token}`, // 去掉引号
          },
        }
      )
      .then((response) => {
        const blob = new Blob([response.data], { type: 'application/octet-stream' });
        const fileName = `考勤数据_${searchParams.dateTime}.xlsx`;
  
        const downloadLink = document.createElement('a');
        downloadLink.href = window.URL.createObjectURL(blob);
        downloadLink.download = fileName;
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
  
        message.success({ content: '导出成功', key: 'exporting' });
      })
      .catch(async (error) => {
        console.error('导出失败:', error);
  
        if (error.response && error.response.data instanceof Blob) {
          const text = await error.response.data.text();
          console.error('服务器返回的错误信息:', text); 
        }
        message.error({ content: '导出失败，请稍后重试', key: 'exporting' });
      })
      .finally(() => {
        loading.value = false;
      });
     };
     
        // 处理申请权限
        const handleApplyPermission = (record: any) => {
          currentApplyRecord.value = { ...record };
          openApplyDrawer(true);
        };
        
        // 处理申请权限提交
        const handleApplySubmit = async () => {
          try {
            const fieldValues = getApplyFieldsValue();
            selectedApplyFields.value = fieldValues;
            closeApplyDrawer();
            
            // 打开申请理由模态框
            openApproveReasonModal(true, {
              fieldValues: selectedApplyFields.value,
              dateTime: searchParams.dateTime,
              userId: currentApplyRecord.value?.userId
            });
          } catch (error) {
            console.error('获取表单数据失败:', error);
            message.error('获取表单数据失败');
          }
        };
        
        // 处理申请成功回调
        const handleApproveSuccess = () => {
          selectedApplyFields.value = {};
          currentApplyRecord.value = null;
          message.success('申请提交成功');
        };
  
        // 组件挂载后自动加载数据
        onMounted(() => {
          loadDeptOptions();
          loadCompanyOptions();
          loadData();
        });
  
        // 抽屉标题
        const drawerTitle = computed(() => {
          return isUpdate.value ? '编辑出勤记录' : '新增出勤记录';
        });
  
        return {
          loading,
          tableData,
          columns,
          pagination,
          searchParams,
          monthFormat,
          deptOptions,
          companyOptions,
          currentRecord,
          isUpdate,
          drawerFormRef,
          selectedRowKeys,
          selectedRows,
          rowSelection,
          registerDrawer,
          onClearSelected,
          loadData,
          handleTableChange,
          handleSearch,
          handleReset,
          handleEdit,
          handleDelete,
          handleDrawerSubmit,
          handleBatchOperation,
          handleExport,
          getAttendanceStatusText,
          drawerTitle,
          editDateTime,
          currentApplyRecord,
          selectedApplyFields,
          registerApplyForm,
          getApplyFieldsValue,
          registerApplyDrawer,
          openApplyDrawer,
          closeApplyDrawer,
          handleApplyPermission,
          handleApplySubmit,
          handleApproveSuccess,
          registerApproveReason,
        };
      },
    });
  </script>
  
  <style lang="less" scoped>
    .attendance-container {
      padding: 16px;
      
      .search-form {
        margin-bottom: 16px;
        background: #fff;
        padding: 16px;
        border-radius: 2px;
      }
      
      .table-container {
        background: #fff;
        padding: 16px;
        border-radius: 2px;
      }
    }
    
    // 申请权限抽屉样式，与CheckDetail.vue保持一致
    :deep(.apply-permission-drawer) {
      .ant-drawer-content {
        position: fixed;
        z-index: 10;
      }
    }
  </style>