feat: 排班日历视图

apps/web-antd/src/api/property/attendanceManagement/arrangement/index.ts

@@ -1,18 +1,25 @@
-import type { ArrangementVO, ArrangementForm, ArrangementQuery } from './model';
+import type {
+  ArrangementVO,
+  ArrangementForm,
+  ArrangementQuery,
+  arrangmentListQuery,
+} from './model';
 
 import type { ID, IDS } from '#/api/common';
 import type { PageResult } from '#/api/common';
 
-import { commonExport } from '#/api/helper';
 import { requestClient } from '#/api/request';
 
 /**
-* 分页查询排班列表
+ * 分页查询排班列表
-* @param params
+ * @param params
-* @returns 排班列表
+ * @returns 排班列表
-*/
+ */
 export function arrangementList(params?: ArrangementQuery) {
-  return requestClient.get<PageResult<ArrangementVO>>('/property/arrangement/list', { params });
+  return requestClient.get<PageResult<ArrangementVO>>(
+    '/property/arrangement/list',
+    { params },
+  );
 }
 /**
  * 根据月份查询排班列表
@@ -58,3 +65,16 @@ export function arrangementUpdate(data: ArrangementForm) {
 export function arrangementRemove(id: ID | IDS) {
   return requestClient.deleteWithMsg<void>(`/property/arrangement/${id}`);
 }
+
+/**
+ * 查询某天排班详情列表
+ * @param params
+ * @returns 排班列表
+ */
+
+export function arrangmentList(params?: arrangmentListQuery) {
+  return requestClient.get<PageResult<ArrangementVO>>(
+    '/property/arrangement/list',
+    { params },
+  );
+}

apps/web-antd/src/api/property/attendanceManagement/arrangement/model.d.ts

@@ -9,37 +9,40 @@ export interface ArrangementVO {
   /**
    * 排班名称
    */
-  scheduleName: string;
+  scheduleName?: string;
 
   /**
    * 考勤组ID
    */
-  groupId: string | number;
+  groupId?: string | number;
 
   /**
    * 排班类型：1-固定班制，2-排班制
    */
-  scheduleType: number;
+  scheduleType?: number;
 
   /**
    * 日期类型：1-单个日期，2-长期有效，3-期间有效
    */
-  dateType: number;
+  dateType?: number;
 
   /**
    * 开始日期
    */
-  startDate: string;
+  startDate?: string;
 
   /**
    * 结束日期(仅date_type=3时有效)
    */
-  endDate: string;
+  endDate?: string;
 
   /**
    * 状态：0-未生效，1-已生效
    */
-  status: number;
+  status?: number;
+  userGroupList?:any[];
+  attendanceGroup?:any;
+  dateType?:number
 }
 
 export interface ArrangementForm extends BaseEntity {
@@ -134,3 +137,6 @@ export interface ArrangementQuery extends PageQuery {
    */
   month?: string;
 }
+export interface arrangmentListQuery extends PageQuery {
+  currentDate:string//某天的日期
+}

apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue

@@ -1,18 +1,9 @@
 <script setup lang="ts">
-import { computed, reactive, onMounted } from 'vue';
+import { reactive, onMounted } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
 
-import { useVbenForm } from '#/adapter/form';
+import { arrangementAdd } from '#/api/property/attendanceManagement/arrangement';
-import {
-  arrangementAdd,
-  arrangementInfo,
-  arrangementUpdate,
-} from '#/api/property/attendanceManagement/arrangement';
-import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
-import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
-import { modalSchema, attendanceColumns } from './data';
 import {
   Radio,
   DatePicker,
@@ -30,12 +21,8 @@ import type { PersonVO } from './type';
 import { ref, h } from 'vue';
 import { Tag, Table } from 'ant-design-vue';
 const emit = defineEmits<{ reload: [] }>();
-const isUpdate = ref(false);
-const title = computed(() => {
-  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
-});
 //表单项
-let formModel = reactive<{
+let formModal = reactive<{
   id: string;
   groupId: string;
   attendanceType: string;
@@ -122,7 +109,7 @@ const columns = [
     title: '操作',
     key: 'action',
     width: 80,
-    customRender: ({ record, index }: { record: any; index: number }) =>
+    customRender: ({ index }: { index: number }) =>
       h(
         'a',
         {
@@ -181,28 +168,6 @@ function handleTableData(newTableData: any) {
   }
 }
 
-const [BasicForm, formApi] = useVbenForm({
-  commonConfig: {
-    // 默认占满两列
-    formItemClass: 'col-span-2',
-    // 默认label宽度 px
-    labelWidth: 80,
-    // 通用配置项 会影响到所有表单项
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  schema: modalSchema(),
-  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
-});
-
-const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
-  {
-    initializedGetter: defaultFormValueGetter(formApi),
-    currentGetter: defaultFormValueGetter(formApi),
-  },
-);
 const [UnitPersonModal, unitPersonmodalApi] = useVbenModal({
   connectedComponent: unitPersonModal,
 });
@@ -210,7 +175,6 @@ const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
   class: 'w-[85%]',
   fullscreenButton: false,
-  onBeforeClose,
   onClosed: handleClosed,
   onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
@@ -219,13 +183,6 @@ const [BasicModal, modalApi] = useVbenModal({
     }
     await getGroupList();
     modalApi.modalLoading(true);
-    const { id } = modalApi.getData() as { id?: number | string };
-    isUpdate.value = !!id;
-
-    if (isUpdate.value && id) {
-      const record = await arrangementInfo(id);
-      await formApi.setValues(record);
-    }
     // await markInitialized();
     modalApi.modalLoading(false);
   },
@@ -256,17 +213,17 @@ async function getGroupList() {
 function chooseGroup(value: any) {
   const group = groupMap.value[value];
   if (group) {
-    formModel.attendanceType = String(group.attendanceType);
+    formModal.attendanceType = String(group.attendanceType);
   }
 }
 async function handleDateTypeChange(value: any) {
-  formModel.dateType = value;
+  formModal.dateType = value;
 }
 async function handleConfirm() {
   try {
     modalApi.lock(true);
     await formRef.value.validate(); // 先校验
-    const data = formModel;
+    const data = formModal;
     const { id } = modalApi.getData() as { id?: string };
     data.id = id ? id : '';
     if (data.dateType == 1) {
@@ -305,11 +262,10 @@ async function handleConfirm() {
         });
       }
     }
-    await (isUpdate.value ? arrangementUpdate(data) : arrangementAdd(data));
+    await arrangementAdd(data);
-    resetInitialized();
     emit('reload');
     // 重置表单数据
-    Object.assign(formModel, {
+    Object.assign(formModal, {
       id: '',
       groupId: '',
       attendanceType: '',
@@ -324,7 +280,6 @@ async function handleConfirm() {
     longDate.value = '';
     rangeDate.value = ['', ''];
     modalApi.close();
-    await formApi.resetForm();
   } catch (error) {
     console.error(error);
   } finally {
@@ -334,7 +289,7 @@ async function handleConfirm() {
 
 async function handleClosed() {
   // 重置表单数据
-  Object.assign(formModel, {
+  Object.assign(formModal, {
     id: '',
     groupId: '',
     attendanceType: '',
@@ -350,19 +305,16 @@ async function handleClosed() {
   longDate.value = '';
   rangeDate.value = ['', ''];
 
-  // 重置表单状态
-  await formApi.resetForm();
-  resetInitialized();
   modalApi.close();
 }
 onMounted(() => {});
 </script>
 
 <template>
-  <BasicModal :title="title">
+  <BasicModal title="新增">
     <!-- 顶部表单区 -->
     <Form
-      :model="formModel"
+      :model="formModal"
       :rules="rules"
       ref="formRef"
       layout="horizontal"
@@ -371,7 +323,7 @@ onMounted(() => {});
       <div class="grid grid-cols-2 gap-x-8 gap-y-2">
         <FormItem name="groupId" label="请选择考勤组" class="mb-0">
           <Select
-            v-model:value="formModel.groupId"
+            v-model:value="formModal.groupId"
             :options="groupOptions"
             placeholder="请选择"
             @change="chooseGroup"
@@ -381,12 +333,12 @@ onMounted(() => {});
           <Select
             :disabled="true"
             :options="getDictOptions('wy_kqlx')"
-            v-model:value="formModel.attendanceType"
+            v-model:value="formModal.attendanceType"
             placeholder="请选择考勤组"
           />
         </FormItem>
         <FormItem label="排班日期" name="dateType" class="col-span-2 mb-0">
-          <RadioGroup v-model:value="formModel.dateType" class="mr-4">
+          <RadioGroup v-model:value="formModal.dateType" class="mr-4">
             <Radio value="1">
               <span>
                 单个日期

apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue

@@ -5,8 +5,13 @@ import { ref, onMounted, reactive } from 'vue';
 import { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import arrangementModal from './arrangement-modal.vue';
+import workforceDetailModal from './workforce-detail.vue';
+import workforceDayDetailModal from './workforce-day-detail.vue';
 import { useVbenModal } from '@vben/common-ui';
-import { arrangementCalender } from '#/api/property/attendanceManagement/arrangement'; // 导入接口
+import {
+  arrangementCalender,
+  arrangementRemove,
+} from '#/api/property/attendanceManagement/arrangement'; // 导入接口
 import { Modal } from 'ant-design-vue';
 
 const emit = defineEmits<{
@@ -20,8 +25,6 @@ const calendarData = reactive<any[]>([]);
 const loading = ref(false);
 // 查询日历数据
 const fetchCalendarData = async (month?: string) => {
-  console.log(123);
-  
   try {
     loading.value = true;
     const params = {
@@ -48,24 +51,25 @@ const fetchCalendarData = async (month?: string) => {
         const currentMonthEnd = dayjs(currentMonth).endOf('month');
 
         //当开始时间小于当前月份的开始日期
-        if (startDate.isBefore(currentMonthStart) || startDate.isSame(currentMonthStart, 'day')) {
+        if (
-          console.log(row, '小 - 开始时间小于等于当前月份开始时间');
+          startDate.isBefore(currentMonthStart) ||
-          console.log('开始时间:', row.startDate);
+          startDate.isSame(currentMonthStart, 'day')
-          console.log('结束时间:', row.endDate);
+        ) {
-          console.log('当前月份开始:', currentMonthStart.format('YYYY-MM-DD'));
+          // 分析：
-          console.log('当前月份结束:', currentMonthEnd.format('YYYY-MM-DD'));
-          
           //如果结束时间小于当前月份的结束时间，则生成当前月份开始时间到row.endDate结束时间的n条数据
           //如果结束时间大于等于当前月份的结束时间，则生成当前月份开始时间到当前月份结束时间（即当前月份天数）的n条数据
-          
+          // 实现：
           // 确定结束日期：取row.endDate和当前月份结束日期的较小值
-          const actualEndDate = endDate.isBefore(currentMonthEnd) ? endDate : currentMonthEnd;
+          // 先判断当前日期与结束日期的大小，如果小则取实际结束时间endDate，否则取月份实际结束时间currentMonthEnd
-          console.log('实际结束日期:', actualEndDate.format('YYYY-MM-DD'));
+          const actualEndDate = endDate.isBefore(currentMonthEnd)
-          
+            ? endDate
-          // 生成从当前月份开始到实际结束日期的数据
+            : currentMonthEnd;
+          // 生成数据
           let currentDate = currentMonthStart;
-          let generatedCount = 0;
+          while (
-          while (currentDate.isSame(actualEndDate, 'day') || currentDate.isBefore(actualEndDate, 'day')) {
+            currentDate.isSame(actualEndDate, 'day') ||
+            currentDate.isBefore(actualEndDate, 'day')
+          ) {
             calendarData.push({
               date: currentDate.format('YYYY-MM-DD'),
               item: {
@@ -76,27 +80,21 @@ const fetchCalendarData = async (month?: string) => {
                 endDate: row.endDate,
               },
             });
-            generatedCount++;
             currentDate = currentDate.add(1, 'day');
           }
-          console.log(`生成了 ${generatedCount} 条数据`);
         } else {
           //当开始时间大于当前月份的开始日期
           //如果结束时间小于当前月份的结束时间，则生成开始时间到结束时间的n条数据
-          console.log(row, '大 - 开始时间大于当前月份开始时间');
-          console.log('开始时间:', row.startDate);
-          console.log('结束时间:', row.endDate);
-          console.log('当前月份开始:', currentMonthStart.format('YYYY-MM-DD'));
-          console.log('当前月份结束:', currentMonthEnd.format('YYYY-MM-DD'));
-          
           // 确定结束日期：取row.endDate和当前月份结束日期的较小值
-          const actualEndDate = endDate.isBefore(currentMonthEnd) ? endDate : currentMonthEnd;
+          const actualEndDate = endDate.isBefore(currentMonthEnd)
-          console.log('实际结束日期:', actualEndDate.format('YYYY-MM-DD'));
+            ? endDate
-          
+            : currentMonthEnd;
           // 生成从开始日期到实际结束日期的数据
           let currentDate = startDate;
-          let generatedCount = 0;
+          while (
-          while (currentDate.isSame(actualEndDate, 'day') || currentDate.isBefore(actualEndDate, 'day')) {
+            currentDate.isSame(actualEndDate, 'day') ||
+            currentDate.isBefore(actualEndDate, 'day')
+          ) {
             calendarData.push({
               date: currentDate.format('YYYY-MM-DD'),
               item: {
@@ -107,13 +105,11 @@ const fetchCalendarData = async (month?: string) => {
                 endDate: row.endDate,
               },
             });
-            generatedCount++;
             currentDate = currentDate.add(1, 'day');
           }
-          console.log(`生成了 ${generatedCount} 条数据`);
         }
       } else {
-        // 没有结束日期的情况，只在开始日期添加一条数据
+        // 单个日期排班类型
         calendarData.push({
           date: row.startDate,
           item: {
@@ -126,14 +122,13 @@ const fetchCalendarData = async (month?: string) => {
         });
       }
     }
-    console.log('日历数据:', calendarData);
     //变量calendarData,日期相同的数据放到一个对象中，数据结构为scheduleData
 
     // 将calendarData按日期分组，形成scheduleData结构
     const groupedData = new Map<string, any[]>();
 
     // 遍历calendarData，按日期分组
-    calendarData.forEach(item => {
+    calendarData.forEach((item) => {
       const date = item.date;
       if (!groupedData.has(date)) {
         groupedData.set(date, []);
@@ -146,32 +141,19 @@ const fetchCalendarData = async (month?: string) => {
     groupedData.forEach((items, date) => {
       scheduleData.push({
         date: date,
-        list: items.map(item => ({
+        list: items.map((item) => ({
           type: 'success' as BadgeProps['status'],
           content: item.groupName || '排班安排',
-          item: item
+          item: item,
-        }))
+        })),
       });
     });
-    
-    console.log('处理后的scheduleData:', scheduleData);
-    
-    // 测试：验证生成的日历数据
-    console.log('=== 日历数据验证 ===');
-    console.log('当前月份:', currentMonth);
-    console.log('原始数据条数:', res.rows.length);
-    console.log('生成的日历数据条数:', calendarData.length);
-    console.log('分组后的数据条数:', scheduleData.length);
-    
     // 验证是否有重复日期
     const dateCounts = new Map<string, number>();
-    calendarData.forEach(item => {
+    calendarData.forEach((item) => {
       const count = dateCounts.get(item.date) || 0;
       dateCounts.set(item.date, count + 1);
     });
-    
-    console.log('日期分布:', Object.fromEntries(dateCounts));
-    console.log('=== 验证完成 ===');
   } catch (error) {
     console.error('获取日历数据失败:', error);
     message.error('获取日历数据失败');
@@ -247,25 +229,34 @@ function customHeader() {
   // 返回想要的VNode或null
   return null; // 什么都不显示
 }
-const [ArrangementModal, modalApi] = useVbenModal({
+const [ArrangementModal, arrangementModalApi] = useVbenModal({
   connectedComponent: arrangementModal,
 });
+const [WorkforceDetailModal, workforceDetailModalApi] = useVbenModal({
+  connectedComponent: workforceDetailModal,
+});
+const [WorkforceDayDetailModal, workforceDayDetailModalApi] = useVbenModal({
+  connectedComponent: workforceDayDetailModal,
+});
 function handleAdd() {
-  modalApi.setData({});
+  arrangementModalApi.setData({});
-  modalApi.open();
+  arrangementModalApi.open();
 }
 
 // 编辑排班
-function handleEdit(item: any) {
+function handleEdit(item: any, date: string) {
-console.log(815328);
+  workforceDetailModalApi.setData({
-
+    id: item.id as number | string,
-  // modalApi.setData({
+    date: dayjs(date).format('YYYY-MM-DD'),
+  });
+  workforceDetailModalApi.open();
+  // arrangementModalApi.setData({
   //   id: item.id,
   //   groupId: item.groupId,
   //   startDate: item.startDate,
   //   endDate: item.endDate,
   // });
-  // modalApi.open();
+  // arrangementModalApi.open();
 }
 
 // 删除排班
@@ -276,7 +267,7 @@ function handleDelete(item: any) {
     onOk: async () => {
       try {
         // 这里需要调用删除接口
-        // await deleteArrangement(item.id);
+        await arrangementRemove(item.id);
         message.success('删除成功');
         fetchCalendarData();
       } catch (error) {
@@ -287,23 +278,12 @@ function handleDelete(item: any) {
   });
 }
 
-// 查看详情
-function handleViewDetails(item: any) {
-  // 这里可以打开详情弹窗或跳转到详情页面
-  console.log('查看详情:', item);
-}
-
-// 获取指定日期的所有排班项目
-function getScheduleItemsByDate(date: string) {
-  const found = scheduleData.find((item) => item.date === date);
-  return found ? found.list : [];
-}
-
 // 查看某日期的所有排班详情
 function handleViewDateDetails(date: string) {
-  const items = getScheduleItemsByDate(date);
+  workforceDayDetailModalApi.setData({
-  console.log(`${date} 的所有排班安排:`, items);
+    date: dayjs(date).format('YYYY-MM-DD'),
-  // 这里可以打开详情弹窗显示该日期的所有排班
+  });
+  workforceDayDetailModalApi.open();
 }
 
 // 页面初始化时加载数据
@@ -351,7 +331,7 @@ onMounted(() => {
                 <div class="action-buttons">
                   <a
                     style="margin-left: 4px; color: #1890ff; cursor: pointer"
-                    @click.stop="handleEdit(item.item)"
+                    @click.stop="handleEdit(item.item, current)"
                   >
                     编辑
                   </a>
@@ -367,7 +347,7 @@ onMounted(() => {
             <a
               v-if="getListData2(current).length > 0"
               style="margin-left: 4px; color: #1890ff; cursor: pointer"
-              @click.stop="handleViewDateDetails(current.format('YYYY-MM-DD'))"
+              @click.stop="handleViewDateDetails(current)"
             >
               详情
             </a>
@@ -375,7 +355,12 @@ onMounted(() => {
         </template>
       </Calendar>
     </div>
+    <!-- 新增排班弹窗 -->
     <ArrangementModal @reload="fetchCalendarData()" />
+    <!-- 编辑排班弹窗 -->
+    <WorkforceDetailModal @reload="fetchCalendarData()" />
+    <!-- 查看某天的排班列表 -->
+    <WorkforceDayDetailModal @reload="workforceDayDetailModalApi.close()" />
   </div>
 </template>
 <style scoped>

apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts

@@ -1,5 +1,6 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
+import { renderDict } from '#/utils/render';
 
 export const querySchema: FormSchemaGetter = () => [
   {
@@ -246,3 +247,68 @@ export const modalSchema: FormSchemaGetter = () => [
     },
   },
 ];
+
+//排班日期详情
+export const workforceDayDetailColumns:VxeGridProps['columns'] =[
+  {
+    title: '序号',
+    field: 'id',
+    width: 60,
+    slots: {
+      default: ({ rowIndex }) => {
+        return (rowIndex + 1).toString();
+      },
+    },
+  },
+  {
+    title: '考勤组',
+    field: 'attendanceGroup.groupName',
+    width: 'auto',
+  },
+  {
+    title: '考勤类型',
+    field: 'attendanceGroup.attendanceType',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(String(row.attendanceGroup.attendanceType),'wy_kqlx')
+      },
+    },
+    width: 'auto',
+
+  },
+  {
+    title: '班次名称',
+    field: 'shift.name',
+    width:'auto' ,
+  },
+  {
+    title: '考勤时间',
+    field: 'time',
+    width: 'auto',
+    slots: {
+      default: ({ row }) => {
+        if (row.shift.startTime && row.shift.endTime) {
+          if(row.shift.restEndTime&&row.shift.restStartTime){
+            return `${row.shift.restStartTime}～${row.shift.restEndTime} ${row.shift.startTime}～${row.shift.endTime}`;
+          }else{
+            return `${row.shift.startTime}～${row.shift.endTime}`;
+          }
+        }
+        return '/';
+      },
+    },
+  },
+  {
+    title: '班组人数',
+    field: 'userCount',
+    width:100,
+    slots: { default: 'userCount' },
+  },
+  {
+    title: '人员',
+    field: 'userGroupList',
+    minWidth: 200,
+    fixed: 'right',
+    slots: { default: 'userGroupList' },
+  },
+]

apps/web-antd/src/views/property/attendanceManagement/workforceManagement/workforce-day-detail.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { useVbenModal, Page } from '@vben/common-ui';
+import { arrangmentList } from '#/api/property/attendanceManagement/arrangement';
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
+import dayjs from 'dayjs';
+import { ref } from 'vue';
+import { workforceDayDetailColumns } from './data';
+const editDate = ref<string>('');
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    reserve: true,
+  },
+  columns: workforceDayDetailColumns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }) => {
+        return await arrangmentList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          currentDate: editDate.value,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  toolbarConfig: {
+    // 隐藏"刷新/重置"按钮（对应 redo）
+    refresh: false,
+    zoom: false, // 显示全屏
+    custom: false, // 隐藏列设置
+  },
+};
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  gridOptions,
+});
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[85%]',
+  fullscreenButton: false,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    const { date } = modalApi.getData() as { date?: string };
+    if (date) {
+      editDate.value = date;
+    }
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  modalApi.close();
+}
+
+async function handleClosed() {
+  modalApi.close();
+}
+</script>
+
+<template>
+  <BasicModal :title="`${editDate}(${dayjs(editDate).format('dddd')})排班详情`">
+    <div class="py-2 text-base font-bold">
+      排班日期:{{ editDate }}({{ dayjs(editDate).format('dddd') }})
+    </div>
+    <div class="mb-2">
+      <Page :auto-content-height="true">
+        <BasicTable>
+          <template #userCount="{ row }">
+            <span>
+              {{ row.userGroupList.length }}
+            </span>
+          </template>
+          <template #userGroupList="{ row }">
+            <span
+              v-for="(item, index) in row.userGroupList"
+              :key="item.id"
+              class="wrap-cell"
+            >
+              {{ item.employeeName }}
+              <span v-if="index !== row.userGroupList.length - 1">、</span>
+            </span>
+          </template>
+        </BasicTable>
+      </Page>
+    </div>
+  </BasicModal>
+</template>
+<style scoped>
+.wrap-cell {
+  white-space: normal !important;
+  word-break: break-all;
+  line-height: 1;
+  padding: 0 2px;
+  gap: 3px;
+}
+</style>

apps/web-antd/src/views/property/attendanceManagement/workforceManagement/workforce-detail.vue

@@ -0,0 +1,346 @@
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  arrangementInfo,
+  arrangementUpdate,
+} from '#/api/property/attendanceManagement/arrangement';
+import { Form, Select, FormItem } from 'ant-design-vue';
+import unitPersonModal from './unit-person-modal.vue';
+import { groupList } from '#/api/property/attendanceManagement/attendanceGroupSettings';
+import { getDictOptions } from '#/utils/dict';
+import dayjs from 'dayjs';
+import type { PersonVO } from './type';
+import { ref, h } from 'vue';
+import { Tag, Table } from 'ant-design-vue';
+const emit = defineEmits<{ reload: [] }>();
+//表单项
+let formModal = reactive<{
+  id: string | number;
+  groupId?: string | number;
+  attendanceType: string;
+  userGroupList: any[];
+  dateType: number | undefined;
+}>({
+  id: '',
+  groupId: '',
+  attendanceType: '', //考勤组类型
+  userGroupList: [
+    // scheduleId:undefined,//排班ID
+    // employeeId:undefined,//员工ID
+    // employeeName:undefined,//员工姓名
+    // deptId:undefined,//部门ID
+    // deptName:undefined,//部门名称
+  ], //考勤组人员列表
+  dateType: undefined, //排班日期类型
+});
+const formRef = ref();
+const groupOptions = ref<any[]>([]);
+const groupMap = ref<Record<string, any>>({}); // 用于快速查找
+let tableData = reactive<
+  { dept: { unitId: string | number; unitName: string }; users: PersonVO[] }[]
+>([]); //存放考勤组人员列表数据
+const columns = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    key: 'index',
+    width: 60,
+    customRender: ({ index }: { index: number }) => index + 1,
+  },
+  {
+    title: '部门',
+    dataIndex: ['dept', 'unitName'],
+    key: 'dept',
+    width: 120,
+    customRender: ({ record }: { record: any }) => record.dept.unitName,
+  },
+  {
+    title: '已选人数',
+    dataIndex: 'users',
+    key: 'userCount',
+    width: 100,
+    customRender: ({ record }: { record: any }) => record.users.length,
+  },
+  {
+    title: '人员',
+    dataIndex: 'users',
+    key: 'users',
+    customRender: ({ record }: { record: any }) =>
+      record.users.map((user: any) =>
+        h(
+          Tag,
+          {
+            color: 'blue',
+            closable: true,
+            onClose: (e) => {
+              e.preventDefault();
+              handleRemoveUser(record, user);
+            },
+            style: 'margin-right: 4px;',
+          },
+          () => user.userName,
+        ),
+      ),
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 80,
+    customRender: ({ index }: { index: number }) =>
+      h(
+        'a',
+        {
+          style:
+            'color: #ff4d4f; font-size: 18px; margin-left: 8px; cursor: pointer;',
+          onClick: () => handleRemoveRow(index),
+        },
+        '移除',
+      ),
+  },
+];
+const editDate = ref<string | undefined>('');
+function handleRemoveUser(row: any, user: any) {
+  row.users = row.users.filter((u: any) => u.id !== user.id);
+}
+function handleRemoveRow(index: number) {
+  tableData.splice(index, 1);
+}
+
+function handleTableData(newTableData: any) {
+  // 如果现有数据为空，直接替换
+  if (tableData.length === 0) {
+    tableData.splice(0, 0, ...newTableData);
+    return;
+  }
+
+  // 如果新数据为空，不做处理
+  if (newTableData.length === 0) {
+    return;
+  }
+
+  // 处理有数据的情况
+  for (const newItem of newTableData) {
+    // 查找是否已存在相同部门
+    const existingDeptIndex = tableData.findIndex(
+      (item) => item.dept.unitId === newItem.dept.unitId,
+    );
+
+    if (existingDeptIndex !== -1) {
+      // 找到相同部门，检查人员是否有重复
+      const existingDept = tableData[existingDeptIndex];
+      for (const newUser of newItem.users) {
+        // 检查该用户是否已存在
+        const userExists = existingDept?.users.some(
+          (existingUser) => existingUser.id === newUser.id,
+        );
+        if (!userExists) {
+          // 用户不存在，添加到现有部门
+          existingDept?.users.push(newUser);
+        }
+      }
+    } else {
+      // 部门不存在，直接添加新部门
+      tableData.push(newItem);
+    }
+  }
+}
+const [UnitPersonModal, unitPersonmodalApi] = useVbenModal({
+  connectedComponent: unitPersonModal,
+});
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[85%]',
+  fullscreenButton: false,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    await getGroupList();
+    modalApi.modalLoading(true);
+    const { id, date } = modalApi.getData() as {
+      id?: number | string;
+      date?: string;
+    };
+    editDate.value = date;
+    if (id) {
+      const record = await arrangementInfo(id);
+      formModal.attendanceType = String(record.attendanceGroup.attendanceType);
+      formModal.id = record.id;
+      formModal.groupId = record.attendanceGroup.id;
+      formModal.dateType = record.dateType;
+
+      if (record.userGroupList) {
+        // 按部门分组处理 userGroupList
+        const deptMap = new Map();
+
+        for (const item of record.userGroupList) {
+          const deptId = item.deptId;
+          const deptName = item.deptName;
+
+          if (!deptMap.has(deptId)) {
+            deptMap.set(deptId, {
+              dept: { unitId: deptId, unitName: deptName },
+              users: [],
+            });
+          }
+          deptMap.get(deptId).users.push({
+            id: item.employeeId,
+            userName: item.employeeName,
+          });
+        }
+        // 转换为 tableData 格式
+        tableData.splice(0, 0, ...Array.from(deptMap.values()));
+      }
+    }
+    // await markInitialized();
+    modalApi.modalLoading(false);
+  },
+});
+const totalSelected: number = 0;
+async function getGroupList() {
+  const res = await groupList({
+    pageSize: 1000000000,
+    pageNum: 1,
+    status: 1, //0:停用 1:启用
+  });
+  groupOptions.value = (res.rows || []).map((item) => ({
+    label: item.groupName,
+    value: item.id,
+  }));
+  // 构建 id 到 group 对象的映射
+  groupMap.value = {};
+  (res.rows || []).forEach((item) => {
+    groupMap.value[item.id] = item;
+  });
+}
+function chooseGroup(value: any) {
+  const group = groupMap.value[value];
+  if (group) {
+    formModal.attendanceType = String(group.attendanceType);
+  }
+}
+function handleAdd() {
+  unitPersonmodalApi.setData({});
+  unitPersonmodalApi.open();
+}
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    await formRef.value.validate(); // 先校验
+    const data = formModal;
+    data.userGroupList = tableData.flatMap((item) =>
+      item.users.map((user) => ({
+        deptId: item.dept.unitId,
+        deptName: item.dept.unitName,
+        employeeId: user.id,
+        employeeName: user.userName,
+      })),
+    );
+    await arrangementUpdate(data);
+    emit('reload');
+    // 重置表单数据
+    Object.assign(formModal, {
+      id: '',
+      groupId: '',
+      attendanceType: '',
+      dateType: undefined,
+      startDate: '',
+      endDate: '',
+      userGroupList: [],
+    });
+    // 重置其他数据
+    tableData.length = 0;
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  // 重置表单数据
+  Object.assign(formModal, {
+    id: '',
+    groupId: '',
+    attendanceType: '',
+    dateType: undefined,
+    startDate: '',
+    endDate: '',
+    userGroupList: [],
+  });
+
+  // 重置其他数据
+  tableData.length = 0;
+  modalApi.close();
+}
+onMounted(() => {});
+</script>
+
+<template>
+  <BasicModal title="编辑">
+    <div class="py-2 text-base font-bold">
+      排班日期:{{ editDate }}({{ dayjs(editDate).format('dddd') }})
+    </div>
+    <!-- 顶部表单区 -->
+    <Form :model="formModal" ref="formRef" layout="horizontal" class="mb-4">
+      <div class="grid grid-cols-2 gap-x-8 gap-y-2">
+        <FormItem name="groupId" label="请选择考勤组" class="mb-0">
+          <Select
+            v-model:value="formModal.groupId"
+            :options="groupOptions"
+            placeholder="请选择"
+            @change="chooseGroup"
+          />
+        </FormItem>
+        <FormItem name="attendanceType" label="考勤类型" class="mb-0">
+          <Select
+            :disabled="true"
+            :options="getDictOptions('wy_kqlx')"
+            v-model:value="formModal.attendanceType"
+            placeholder="请选择考勤组"
+          />
+        </FormItem>
+      </div>
+    </Form>
+    <!-- 考勤组人员表格区 -->
+    <div class="mb-2">
+      <div class="mb-2 flex items-center">
+        <span
+          >考勤组人员（已选
+          <span class="text-red-500">{{ totalSelected }}</span> 人）</span
+        >
+        <a-button type="primary" size="small" class="ml-4" @click="handleAdd"
+          >+ 添加人员</a-button
+        >
+      </div>
+      <Table
+        :columns="columns"
+        :dataSource="tableData"
+        :pagination="false"
+        rowKey="dept.unitId"
+        bordered
+      />
+    </div>
+    <UnitPersonModal @reload="handleTableData" />
+    <!-- 底部按钮区 -->
+  </BasicModal>
+</template>
+<style scoped>
+/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
+:deep(.ant-input[disabled]),
+:deep(.ant-input-number-disabled .ant-input-number-input),
+:deep(.ant-select-disabled .ant-select-selection-item),
+:deep(.ant-picker-input input[disabled]),
+:deep(.ant-picker-disabled .ant-picker-input input) {
+  /* 设置一个更深的颜色，可以自己调整 */
+  color: rgba(0, 0, 0, 0.65) !important;
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
+}
+</style>