1.新增排班时间管理页面及其对接接口

2.对接排班人员列表接口
3.修改部分样式

src/api/renyuan/paiban/index.ts

@@ -0,0 +1,26 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+
+
+/**
+ * 查询排班人员列表
+ * @param deptId
+ */
+export function getPaibanRenYuanList(deptId:string | number): AxiosPromise<any> {
+  return request({
+    url: `/system/user/list/dept/`+deptId,
+    method: 'get',
+  });
+}
+
+
+/**
+ * 查询运维-人员排班列表
+ * @param deptId
+ */
+export function getPaibanRiLiList(deptId:string | number): AxiosPromise<any> {
+  return request({
+    url: `/ops/personnel/scheduling/getRiLiList/`+deptId,
+    method: 'get',
+  });
+}

src/api/renyuan/schedulingDate/index.ts

@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { SchedulingDateVO, SchedulingDateForm, SchedulingDateQuery } from '@/api/renyuan/schedulingDate/types';
+
+/**
+ * 查询运维-排班时间类型列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listSchedulingDate = (query?: SchedulingDateQuery): AxiosPromise<SchedulingDateVO[]> => {
+  return request({
+    url: '/ops/personnel/schedulingDate/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询运维-排班时间类型详细
+ * @param id
+ */
+export const getSchedulingDate = (id: string | number): AxiosPromise<SchedulingDateVO> => {
+  return request({
+    url: '/ops/personnel/schedulingDate/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增运维-排班时间类型
+ * @param data
+ */
+export const addSchedulingDate = (data: SchedulingDateForm) => {
+  return request({
+    url: '/ops/personnel/schedulingDate',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改运维-排班时间类型
+ * @param data
+ */
+export const updateSchedulingDate = (data: SchedulingDateForm) => {
+  return request({
+    url: '/ops/personnel/schedulingDate',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除运维-排班时间类型
+ * @param id
+ */
+export const delSchedulingDate = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/ops/personnel/schedulingDate/' + id,
+    method: 'delete'
+  });
+};

src/api/renyuan/schedulingDate/types.ts

@@ -0,0 +1,86 @@
+export interface SchedulingDateVO {
+  /**
+   * id
+   */
+  id: string | number;
+
+  /**
+   * 排班名称
+   */
+  schedulingName: string;
+
+  /**
+   * 开始时间
+   */
+  startTime: string;
+
+  /**
+   * 结束时间
+   */
+  endTime: string;
+
+  /**
+   * 部门ID
+   */
+  projectId?: string | number;
+
+}
+
+export interface SchedulingDateForm extends BaseEntity {
+  /**
+   * id
+   */
+  id?: string | number;
+
+  /**
+   * 排班名称
+   */
+  schedulingName?: string;
+
+  /**
+   * 开始时间
+   */
+  startTime?: string;
+
+  /**
+   * 结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 部门ID
+   */
+  projectId?: string | number;
+
+}
+
+export interface SchedulingDateQuery extends PageQuery {
+
+  /**
+   * 排班名称
+   */
+  schedulingName?: string;
+
+  /**
+   * 开始时间
+   */
+  startTime?: string;
+
+  /**
+   * 结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 部门ID
+   */
+  projectId?: string | number;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/views/integratedManage/attendManage/components/attendTrend.vue

@@ -242,7 +242,7 @@ onMounted(() => {
     background-color: #fff;
     border-radius: 8px;
     overflow: hidden;
-    height: 500px;
+    height: 435px;
     width: 100%;
     padding: 10px;
     box-sizing: border-box;
@@ -288,7 +288,7 @@ onMounted(() => {
 
 @media (max-width: 768px) {
     .chart-container {
-        height: 450px;
+        height: 435px;
     }
 }
 

src/views/integratedManage/attendManage/components/renyuanguanliDialog.vue

@@ -43,11 +43,12 @@
               multiple 
               filterable
             >
-              <el-option label="张三" value="1"></el-option>
+              <el-option 
-              <el-option label="李四" value="2"></el-option>
+                v-for="person in props.personnelList" 
-              <el-option label="王五" value="3"></el-option>
+                :key="person.value" 
-              <el-option label="赵六" value="4"></el-option>
+                :label="person.label" 
-              <el-option label="钱七" value="5"></el-option>
+                :value="person.value"
+              ></el-option>
             </el-select>
             
             <!-- 删除按钮 (仅在不是第一个项目时显示) -->
@@ -97,6 +98,17 @@ const props = defineProps({
   manageAttendDialogVisible: {
     type: Boolean,
     default: false
+  },
+  // 排班人员列表数据
+  personnelList: {
+    type: Array,
+    default: () => [
+      { label: '张三', value: '1' },
+      { label: '李四', value: '2' },
+      { label: '王五', value: '3' },
+      { label: '赵六', value: '4' },
+      { label: '钱七', value: '5' }
+    ]
   }
 });
 

src/views/integratedManage/attendManage/components/renyuanpaiban.vue

@@ -37,6 +37,19 @@
         </template>
       </el-table-column>
     </el-table>
+    
+    <!-- 分页组件 -->
+    <div class="pagination-container">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
   </div>
 </template>
 
@@ -110,9 +123,17 @@ const getCurrentMonthDates = () => {
   return dates;
 };
 
+// 分页相关状态
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(50); // 总数据条数，模拟数据
+
 // 生成排班数据
 const scheduleData = computed(() => {
-  return Array.from({ length: 20 }, (_, index) => {
+  const startIndex = (currentPage.value - 1) * pageSize.value;
+  const endIndex = startIndex + pageSize.value;
+  
+  return Array.from({ length: total.value }, (_, index) => {
     // 循环使用员工数据
     const employee = employees[index % employees.length];
     
@@ -131,9 +152,20 @@ const scheduleData = computed(() => {
     });
     
     return rowData;
-  });
+  }).slice(startIndex, endIndex);
 });
 
+// 分页大小变化处理
+const handleSizeChange = (size: number) => {
+  pageSize.value = size;
+  currentPage.value = 1; // 重置为第一页
+};
+
+// 当前页码变化处理
+const handleCurrentChange = (current: number) => {
+  currentPage.value = current;
+};
+
 // 组件挂载时获取当前月数据
 onMounted(() => {
   currentMonthDates.value = getCurrentMonthDates();
@@ -216,7 +248,20 @@ const handleCellClick = (rowData: any, columnData: any, cellEvent: any) => {
 }
 
 .week-day {
-  font-size: 12px;
+    font-size: 12px;
-  color: #666;
+    color: #666;
-}
+  }
+  
+  /* 分页容器样式 */
+  .pagination-container {
+    margin-top: 16px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  
+  /* 分页组件样式优化 */
+  :deep(.el-pagination) {
+    font-size: 14px;
+  }
 </style>

src/views/integratedManage/attendManage/index.vue

@@ -72,6 +72,7 @@
         <renyuanguanliDialog 
             v-model:manageAttendDialogVisible="manageAttendDialogVisible"
             @confirm="handleAttendConfirm"
+            :personnel-list="paibanRenYuanList"
         />
         
         <!-- 编辑排班弹窗 -->
@@ -107,13 +108,49 @@
 <script setup lang="ts">
 import infoBox from '@/views/integratedManage/attendManage/components/infoBox.vue'
 import attendTrend from '@/views/integratedManage/attendManage/components/attendTrend.vue'
-import todayAttend from '@/views/integratedManage/attendManage/components/leftBox/todayAttend.vue'
+import todayAttend from '@/views/integratedManage/attendManage/components/rightBox/todayAttend.vue'
-import approval from '@/views/integratedManage/attendManage/components/leftBox/approval.vue'
+import approval from '@/views/integratedManage/attendManage/components/rightBox/approval.vue'
-import calendar from '@/views/integratedManage/attendManage/components/leftBox/calendar.vue'
+import calendar from '@/views/integratedManage/attendManage/components/rightBox/calendar.vue'
 import totalView from '@/views/integratedManage/attendManage/components/totalView.vue'
 import renyuanpaiban from '@/views/integratedManage/attendManage/components/renyuanpaiban.vue'
 import renyuanguanliDialog from '@/views/integratedManage/attendManage/components/renyuanguanliDialog.vue'
-import { ref } from 'vue';
+import { getPaibanRenYuanList } from '@/api/renyuan/paiban';
+import { ref, onMounted } from 'vue';
+// 导入用户store
+import { useUserStore } from '@/store/modules/user';
+
+// 排班人员列表
+const paibanRenYuanList = ref([]);
+
+// 获取排班人员列表
+const fetchPaibanRenYuanList = async (deptId?: string) => {
+  try {
+    // 如果没有提供deptId，默认使用当前登录用户的部门ID
+    const targetDeptId = deptId || userStore.deptId;
+    if (!targetDeptId) {
+      console.warn('未提供部门ID，无法获取排班人员列表');
+      return;
+    }
+    const response = await getPaibanRenYuanList(targetDeptId);
+    // 格式化人员列表数据，确保每个人员对象包含label和value属性
+    paibanRenYuanList.value = response.data?.map((user: any) => ({
+      label: user.nickName || user.userName || '未知用户',
+      value: user.userId || user.id || ''
+    })) || [];
+    
+    console.log('获取排班人员列表成功:', paibanRenYuanList.value);
+  } catch (error) {
+    console.error('获取排班人员列表失败:', error);
+    // 错误情况下提供模拟数据，确保功能可用
+    paibanRenYuanList.value = [
+      { label: '张三', value: '1' },
+      { label: '李四', value: '2' },
+      { label: '王五', value: '3' },
+      { label: '赵六', value: '4' },
+      { label: '钱七', value: '5' }
+    ];
+  }
+};
 
 // 人员排班弹窗
 const manageAttendDialogVisible = ref(false);
@@ -329,6 +366,13 @@ const calendarData = ref({
 });
 
 
+// 初始化用户store
+const userStore = useUserStore();
+
+onMounted(() => {
+  fetchPaibanRenYuanList(String(userStore.deptId));
+});
+
 </script>
 
 <style scoped lang="scss">

src/views/integratedManage/paibanTimeType.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="排班名称" prop="schedulingName">
+          <el-input v-model="queryParams.schedulingName" placeholder="请输入排班名称" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['personnel:schedulingDate:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['personnel:schedulingDate:edit']">修改</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['personnel:schedulingDate:remove']">删除</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="schedulingDateList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="排班名称" align="center" prop="schedulingName" />
+        <el-table-column label="开始时间" align="center" prop="startTime" width="180">
+          <template #default="scope">
+            <span>{{scope.row.startTime}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="结束时间" align="center" prop="endTime" width="180">
+          <template #default="scope">
+            <span>{{ scope.row.endTime}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['personnel:schedulingDate:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['personnel:schedulingDate:remove']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改运维-排班时间类型对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="schedulingDateFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="排班名称" prop="schedulingName">
+          <el-input v-model="form.schedulingName" placeholder="请输入排班名称" />
+        </el-form-item>
+        <el-form-item label="开始时间" prop="startTime">
+          <el-time-select clearable
+            v-model="form.startTime"
+            value-format="HH:mm:ss"
+            step="00:10:00"
+            start="00:00"
+            end="23:59"
+            placeholder="请选择开始时间">
+          </el-time-select>
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-time-select clearable
+            v-model="form.endTime"
+            value-format="HH:mm:ss"
+            step="00:10:00"
+            start="00:00"
+            end="23:59"
+            placeholder="请选择结束时间">
+          </el-time-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="SchedulingDate" lang="ts">
+import { ref, reactive, toRefs, onMounted, onUnmounted, watch, getCurrentInstance } from 'vue';
+import { listSchedulingDate, getSchedulingDate, delSchedulingDate, addSchedulingDate, updateSchedulingDate } from '@/api/renyuan/schedulingDate';
+import { SchedulingDateVO, SchedulingDateQuery, SchedulingDateForm } from '@/api/renyuan/schedulingDate/types';
+// 导入用户store
+import { useUserStore } from '@/store/modules/user';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+// 获取用户store
+const userStore = useUserStore();
+
+const schedulingDateList = ref<SchedulingDateVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const schedulingDateFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const initFormData: SchedulingDateForm = {
+  id: undefined,
+  schedulingName: undefined,
+  startTime: undefined,
+  endTime: undefined,
+  projectId: undefined,
+}
+const data = reactive<PageData<SchedulingDateForm, SchedulingDateQuery>>({
+  form: {...initFormData},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    schedulingName: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    projectId: undefined,
+    params: {
+    }
+  },
+  rules: {
+    schedulingName: [
+      { required: true, message: "排班名称不能为空", trigger: "blur" }
+    ],
+    startTime: [
+      { required: true, message: "开始时间不能为空", trigger: "blur" }
+    ],
+    endTime: [
+      { required: true, message: "结束时间不能为空", trigger: "blur" }
+    ]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询运维-排班时间类型列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listSchedulingDate(queryParams.value);
+  schedulingDateList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+}
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+}
+
+/** 表单重置 */
+const reset = () => {
+  form.value = {...initFormData};
+  schedulingDateFormRef.value?.resetFields();
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+}
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: SchedulingDateVO[]) => {
+  ids.value = selection.map(item => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  // 显式设置projectId为当前选中的项目ID
+  if (userStore.selectedProject && userStore.selectedProject.id) {
+    form.value.projectId = userStore.selectedProject.id;
+  }
+  dialog.visible = true;
+  dialog.title = "添加运维-排班时间类型";
+}
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: SchedulingDateVO) => {
+  reset();
+  const _id = row?.id || ids.value[0]
+  const res = await getSchedulingDate(_id);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = "修改运维-排班时间类型";
+}
+
+/** 提交按钮 */
+const submitForm = () => {
+  schedulingDateFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateSchedulingDate(form.value).finally(() =>  buttonLoading.value = false);
+      } else {
+        await addSchedulingDate(form.value).finally(() =>  buttonLoading.value = false);
+      }
+      proxy?.$modal.msgSuccess("操作成功");
+      dialog.visible = false;
+      await getList();
+    }
+  });
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: SchedulingDateVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除运维-排班时间类型编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
+  await delSchedulingDate(_ids);
+  proxy?.$modal.msgSuccess("删除成功");
+  await getList();
+}
+
+
+// 监听用户选择的项目变化
+watch(() => userStore.selectedProject, (newProject) => {
+  if (newProject && newProject.id) {
+    queryParams.value.projectId = newProject.id;
+    // 只在新增表单时设置projectId，编辑表单保留原有值
+    if (!form.value.id) {
+      form.value.projectId = newProject.id;
+    }
+    // 调用getList刷新数据
+    getList();
+  }
+}, { immediate: true, deep: true });
+
+onMounted(() => {
+  getList();
+});
+
+// 组件卸载时清空projectId
+onUnmounted(() => {
+  queryParams.value.projectId = undefined;
+  form.value.projectId = undefined;
+});
+
+
+</script>