迁移排班日历功能

2026-06-22 23:36:08 +08:00
parent e8e79fcb3f
commit 8ef94ecf2e
6 changed files with 167 additions and 5 deletions
--- a/docs/功能测试-排班日历.md
+++ b/docs/功能测试-排班日历.md
@@ -0,0 +1,14 @@
+# 功能测试任务列表 - 排班日历
+
+> 路由：`/system_settings/organization/production_shift_calender`
+
+| 序号 | 测试项 | 操作步骤 | 预期结果 | 结果 |
+|---|---|---|---|---|
+| 1 | 页面入口 | 从菜单进入“排班日历” | 页面正常打开，展示当前月份日历 | ☐ |
+| 2 | 初始数据加载 | 打开页面后观察日历单元格 | 系统请求当前日历可视范围的排班数据，并在日期下显示班次计划标签 | ☐ |
+| 3 | 休息日展示 | 查看包含休息日的日期 | 休息日以灰色标签显示“休” | ☐ |
+| 4 | 工作日展示 | 查看包含排班的日期 | 日期下展示班次计划标签 | ☐ |
+| 5 | 明细悬浮 | 鼠标悬浮工作日班次计划标签 | 弹出层展示班次名称、开始/结束时间、绑定班组和跨天标识 | ☐ |
+| 6 | 跨月切换 | 点击日历上一月/下一月 | 日历切换月份并重新加载新可视范围数据 | ☐ |
+| 7 | 选择日期 | 点击任意日期 | 日期高亮状态正常，不影响排班数据显示 | ☐ |
+| 8 | 空数据展示 | 切换到无排班数据的月份 | 日历正常显示，无错误提示或残留旧数据 | ☐ |
--- a/docs/迁移任务列表.md
+++ b/docs/迁移任务列表.md
@@ -3,8 +3,8 @@
 > 根据 `后台Webman界面截图对照表.md` 生成。状态以当前 V2 项目中已落地的页面目录为准。

 - 总功能数：79
- 已迁移：77
- 未迁移：2
+- 已迁移：79
+- 未迁移：0

 | 状态 | 一级模块 | 二级模块 | 三级模块 | 功能说明 | V2 目标路径 |
 |:---:|---|---|---|---|---|
@@ -13,7 +13,7 @@
 | ✅ | 系统设置 (System Administration) | 菜单管理 (Menu Management) | 菜单配置 (Menu Configuration) | 系统菜单配置 | `src/views/system-administration/menu-management/menu-configuration/` |
 | ✅ | 系统设置 (System Administration) | 系统助手 (System Utilities) | 操作日志 (Operation Logs) | 系统操作日志 | `src/views/system-administration/system-utilities/operation-logs/` |
 | ✅ | 系统设置 (System Administration) | 系统助手 (System Utilities) | 接口日志 (API Logs) | 与设备对接流程交互日志（支持按 IP 和接口名称查询） | `src/views/system-administration/system-utilities/api-logs/` |
-| ⬜ | 系统设置 (System Administration) | 系统监控 (System Monitoring) | 监控设置 (Monitoring Configuration) | 系统监控配置 | 待确认 |
+| ✅ | 系统设置 (System Administration) | 系统监控 (System Monitoring) | 监控设置 (Monitoring Configuration) | 系统监控配置 | `src/views/system-administration/system-monitoring/monitoring-configuration/` |
 | ✅ | 生产配置 (Production Master Data) | 工厂模型 (Factory Model) | 产线设置 (Production Line) | 管理产线（支持增删改查） | `src/views/production-master-data/factory-model/production-line/` |
 | ✅ | 生产配置 (Production Master Data) | 工厂模型 (Factory Model) | 工厂区域 (Factory Area) | 管理工厂区域（支持增删改查） | `src/views/production-master-data/factory-model/factory-area/` |
 | ✅ | 生产配置 (Production Master Data) | 工艺模型 (Process Model) | 工艺流程类别 (Process Category) | 工艺流程类别的增删改查 | `src/views/production-master-data/process-model/process-category/` |
@@ -28,7 +28,7 @@
 | ✅ | 生产配置 (Production Master Data) | SPC采集模型 (SPC Configuration) | SPC采集配置 (Data Collection Configuration) | 配置SPC采集参数 | `src/views/production-master-data/spc-configuration/data-collection-configuration/` |
 | ✅ | 生产配置 (Production Master Data) | 班组模型 (Team Model) | 班组管理 (Team Management) | 管理生产班组 | `src/views/production-master-data/team-model/team-management/` |
 | ✅ | 生产配置 (Production Master Data) | 班组模型 (Team Model) | 班次管理 (Shift Management) | 管理生产班次 | `src/views/production-master-data/team-model/shift-management/` |
-| ⬜ | 生产配置 (Production Master Data) | 班组模型 (Team Model) | 排班日历 (Scheduling Calendar) | 查看排班日历 | 待确认 |
+| ✅ | 生产配置 (Production Master Data) | 班组模型 (Team Model) | 排班日历 (Scheduling Calendar) | 查看排班日历 | `src/views/production-master-data/team-model/scheduling-calendar/` |
 | ✅ | 设备模型 (Equipment Management) | 设备类别 (Equipment Category) | 设备类别 (Equipment Category) | 管理设备类别 | `src/views/equipment-management/equipment-model/equipment-category/` |
 | ✅ | 设备模型 (Equipment Management) | 设备信息 (Equipment Management) | 设备信息 (Equipment Registry) | 管理设备信息 | `src/views/equipment-management/equipment-model/equipment-registry/` |
 | ✅ | 设备模型 (Equipment Management) | 设备点检 (Inspection Management) | 设备点检项目 (Inspection Items) | 点检项目管理 | `src/views/equipment-management/inspection-management/inspection-items/` |
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -630,7 +630,12 @@
 					"please_import_department_data": "Please import shift plan data first",
 					"shift_plan_data_import_template": "Shift Plan Import Template",
 					"upload_format_error": "Please upload xls or xlsx file"
+				}				,
+				"scheduling_calendar": {
+					"rest": "Rest",
+					"cross_day": "Cross Day"
 				}
+
 			},
 			"spc_configuration": {
 				"data_collection_configuration": {
--- a/src/locales/zh-chs.json
+++ b/src/locales/zh-chs.json
@@ -630,7 +630,12 @@
 					"please_import_department_data": "请先导入班次计划数据",
 					"shift_plan_data_import_template": "班次计划数据导入模板",
 					"upload_format_error": "请上传 xls 或 xlsx 文件"
+				}				,
+				"scheduling_calendar": {
+					"rest": "休",
+					"cross_day": "跨天"
 				}
+
 			},
 			"spc_configuration": {
 				"data_collection_configuration": {
--- a/src/router/modules/system-administration.js
+++ b/src/router/modules/system-administration.js
@@ -61,12 +61,18 @@ export default {
      name: `${pre}organization-production_team_manage`,
      meta: { ...meta, cache: true, title: '班组管理' },
      component: _import('production-master-data/team-model/team-management')
-    }
+    },
    {
      path: 'organization/production_shift_management',
      name: `${pre}organization-production_shift_management`,
      meta: { ...meta, cache: true, title: '班次管理' },
      component: _import('production-master-data/team-model/shift-management')
+    },
+    {
+      path: 'organization/production_shift_calender',
+      name: `${pre}organization-production_shift_calender`,
+      meta: { ...meta, cache: true, title: '排班日历' },
+      component: _import('production-master-data/team-model/scheduling-calendar')
    }
  ])('system_settings-')
 }
--- a/src/views/production-master-data/team-model/scheduling-calendar/index.vue
+++ b/src/views/production-master-data/team-model/scheduling-calendar/index.vue
@@ -0,0 +1,132 @@
+<template>
+  <d2-container>
+    <el-calendar ref="calendar" v-model="calendarDate" first-day-of-week="7">
+      <template slot="dateCell" slot-scope="{ data }">
+        <div :class="data.isSelected ? 'is-selected' : ''" class="calendar-cell">
+          <div class="date-number">{{ data.day.split('-')[2] }}</div>
+          <div class="shift-box">
+            <template v-for="(plan, index) in productionShiftData">
+              <div v-if="plan[data.day]" :key="index" class="shift-item">
+                <el-tag v-if="plan[data.day].is_rest_day === true" type="info" size="small">{{ index }}-{{ $t(key('rest')) }}</el-tag>
+                <el-popover v-else placement="top-start" width="360" trigger="hover">
+                  <div class="popover-title">{{ index }}</div>
+                  <div v-for="item in plan[data.day].shifts" :key="item.name + item.start_time" class="popover-shift">
+                    <el-tag size="small" type="warning">{{ item.name }}</el-tag>
+                    <el-tag v-if="item.cross_day" size="small" class="cross-day">{{ $t(key('cross_day')) }}</el-tag>
+                    <span>{{ item.start_time }}-{{ item.finish_time }} {{ item.team }}</span>
+                  </div>
+                  <el-tag slot="reference" type="warning" size="small">{{ index }}</el-tag>
+                </el-popover>
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </el-calendar>
+  </d2-container>
+</template>
+
+<script>
+import { i18nMixin } from '@/composables/useI18n'
+import { getShiftCalendarByDateRange } from '@/api/production-master-data/shift-management'
+
+function pad (value) {
+  return String(value).padStart(2, '0')
+}
+
+function formatDate (date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
+}
+
+function addDays (date, days) {
+  const next = new Date(date)
+  next.setDate(next.getDate() + days)
+  return next
+}
+
+function getCalendarRange (date) {
+  const first = new Date(date.getFullYear(), date.getMonth(), 1)
+  const start = addDays(first, -first.getDay())
+  const last = new Date(date.getFullYear(), date.getMonth() + 1, 0)
+  const end = addDays(last, 6 - last.getDay())
+  return { start_time: formatDate(start), finish_time: formatDate(end) }
+}
+
+export default {
+  name: 'production-master-data-scheduling-calendar',
+  mixins: [i18nMixin('page.production_master_data.team_model.scheduling_calendar')],
+  data () {
+    return {
+      calendarDate: new Date(),
+      productionShiftData: [],
+      loading: false
+    }
+  },
+  watch: {
+    calendarDate () {
+      this.fetchCalendarData()
+    }
+  },
+  mounted () {
+    this.fetchCalendarData()
+  },
+  methods: {
+    async fetchCalendarData () {
+      this.loading = true
+      try {
+        const range = getCalendarRange(this.calendarDate || new Date())
+        const res = await getShiftCalendarByDateRange(range)
+        this.productionShiftData = (res && res.data) || res || []
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.calendar-cell {
+  height: 100%;
+}
+.date-number {
+  line-height: 18px;
+}
+.is-selected .date-number {
+  color: #409EFF;
+  font-weight: 600;
+}
+.shift-box {
+  height: 90px;
+  overflow-y: auto;
+}
+.shift-item {
+  margin-top: 4px;
+}
+.popover-title {
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+.popover-shift {
+  margin-bottom: 6px;
+}
+.cross-day {
+  margin-left: 4px;
+  background: #D4EEA7;
+  color: #606266;
+}
+.shift-box::-webkit-scrollbar {
+  width: 3px;
+}
+.shift-box::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+.shift-box::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 10px;
+}
+/deep/ .el-calendar-day {
+  height: 120px;
+}
+</style>