From 9f5303aea62322aac15f5dd91031f78e18a567d9 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 17 Feb 2026 09:52:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(mes-cal):=20=E6=96=B0=E5=A2=9E=E6=8E=92?=
 =?UTF-8?q?=E7=8F=AD=E8=AE=A1=E5=88=92=E5=92=8C=E7=8F=AD=E6=AC=A1=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=89=8D=E7=AB=AF=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增班次管理独立页面(index.vue + CalShiftForm.vue)，支持 CRUD + 导出
- 新增排班计划列表页(index.vue)，支持按编码/名称/轮班方式/状态搜索
- 新增排班计划表单(CalPlanForm.vue)，含编码生成、条件显示倒班方式/天数、确认计划操作
- 新增班次子表面板(CalShiftPanel.vue)，嵌入计划表单 Tab
- 新增班组子表面板(CalPlanTeamPanel.vue)，嵌入计划表单 Tab
- 新增 shift/plan/plan-team 三个 API 文件
- dict.ts 新增 4 个字典类型常量(shift_type/shift_method/calendar_type/plan_status)
---
 src/api/mes/cal/plan/index.ts               |  53 ++++
 src/api/mes/cal/plan/team.ts                |  34 +++
 src/api/mes/cal/shift/index.ts              |  56 +++++
 src/views/mes/cal/plan/CalPlanForm.vue      | 257 ++++++++++++++++++++
 src/views/mes/cal/plan/CalPlanTeamPanel.vue | 134 ++++++++++
 src/views/mes/cal/plan/CalShiftPanel.vue    | 179 ++++++++++++++
 src/views/mes/cal/plan/index.vue            | 230 ++++++++++++++++++
 src/views/mes/cal/shift/CalShiftForm.vue    | 128 ++++++++++
 src/views/mes/cal/shift/index.vue           | 185 ++++++++++++++
 9 files changed, 1256 insertions(+)
 create mode 100644 src/api/mes/cal/plan/index.ts
 create mode 100644 src/api/mes/cal/plan/team.ts
 create mode 100644 src/api/mes/cal/shift/index.ts
 create mode 100644 src/views/mes/cal/plan/CalPlanForm.vue
 create mode 100644 src/views/mes/cal/plan/CalPlanTeamPanel.vue
 create mode 100644 src/views/mes/cal/plan/CalShiftPanel.vue
 create mode 100644 src/views/mes/cal/plan/index.vue
 create mode 100644 src/views/mes/cal/shift/CalShiftForm.vue
 create mode 100644 src/views/mes/cal/shift/index.vue

diff --git a/src/api/mes/cal/plan/index.ts b/src/api/mes/cal/plan/index.ts
new file mode 100644
index 000000000..fc942b001
--- /dev/null
+++ b/src/api/mes/cal/plan/index.ts
@@ -0,0 +1,53 @@
+import request from '@/config/axios'
+
+// MES 排班计划 VO
+export interface CalPlanVO {
+  id: number
+  code: string // 计划编码
+  name: string // 计划名称
+  calendarType: number // 班组类型
+  startDate: number // 开始日期
+  endDate: number // 结束日期
+  shiftType: number // 轮班方式
+  shiftMethod: number // 倒班方式
+  shiftCount: number // 倒班天数
+  status: number // 状态
+  remark: string // 备注
+  attribute1: string
+  attribute2: string
+  attribute3: number
+  attribute4: number
+}
+
+// MES 排班计划 API
+export const CalPlanApi = {
+  // 查询排班计划分页
+  getPlanPage: async (params: any) => {
+    return await request.get({ url: `/mes/cal/plan/page`, params })
+  },
+
+  // 查询排班计划详情
+  getPlan: async (id: number) => {
+    return await request.get({ url: `/mes/cal/plan/get?id=` + id })
+  },
+
+  // 新增排班计划
+  createPlan: async (data: CalPlanVO) => {
+    return await request.post({ url: `/mes/cal/plan/create`, data })
+  },
+
+  // 修改排班计划
+  updatePlan: async (data: CalPlanVO) => {
+    return await request.put({ url: `/mes/cal/plan/update`, data })
+  },
+
+  // 删除排班计划
+  deletePlan: async (id: number) => {
+    return await request.delete({ url: `/mes/cal/plan/delete?id=` + id })
+  },
+
+  // 导出排班计划 Excel
+  exportPlan: async (params: any) => {
+    return await request.download({ url: `/mes/cal/plan/export-excel`, params })
+  }
+}
diff --git a/src/api/mes/cal/plan/team.ts b/src/api/mes/cal/plan/team.ts
new file mode 100644
index 000000000..19e11c043
--- /dev/null
+++ b/src/api/mes/cal/plan/team.ts
@@ -0,0 +1,34 @@
+import request from '@/config/axios'
+
+// MES 计划班组关联 VO
+// TODO @AI：挪到 plan/team 目录下
+export interface CalPlanTeamVO {
+  id: number
+  planId: number // 排班计划编号
+  teamId: number // 班组编号
+  teamCode: string // 班组编码
+  teamName: string // 班组名称
+  remark: string // 备注
+  attribute1: string
+  attribute2: string
+  attribute3: number
+  attribute4: number
+}
+
+// MES 计划班组关联 API
+export const CalPlanTeamApi = {
+  // 查询指定排班计划的班组列表
+  getPlanTeamListByPlan: async (planId: number) => {
+    return await request.get({ url: `/mes/cal/plan-team/list-by-plan?planId=` + planId })
+  },
+
+  // 新增计划班组关联
+  createPlanTeam: async (data: CalPlanTeamVO) => {
+    return await request.post({ url: `/mes/cal/plan-team/create`, data })
+  },
+
+  // 删除计划班组关联
+  deletePlanTeam: async (id: number) => {
+    return await request.delete({ url: `/mes/cal/plan-team/delete?id=` + id })
+  }
+}
diff --git a/src/api/mes/cal/shift/index.ts b/src/api/mes/cal/shift/index.ts
new file mode 100644
index 000000000..7b1335b8d
--- /dev/null
+++ b/src/api/mes/cal/shift/index.ts
@@ -0,0 +1,56 @@
+import request from '@/config/axios'
+
+// TODO @AI：挪到 plan/shift 目录下
+
+// MES 计划班次 VO
+export interface CalShiftVO {
+  id: number
+  planId: number // 排班计划编号
+  sort: number // 显示顺序
+  name: string // 班次名称
+  startTime: string // 开始时间
+  endTime: string // 结束时间
+  remark: string // 备注
+  attribute1: string
+  attribute2: string
+  attribute3: number
+  attribute4: number
+}
+
+// MES 计划班次 API
+export const CalShiftApi = {
+  // 查询计划班次分页
+  getShiftPage: async (params: any) => {
+    return await request.get({ url: `/mes/cal/shift/page`, params })
+  },
+
+  // 查询计划班次详情
+  getShift: async (id: number) => {
+    return await request.get({ url: `/mes/cal/shift/get?id=` + id })
+  },
+
+  // 查询指定排班计划的班次列表
+  getShiftListByPlan: async (planId: number) => {
+    return await request.get({ url: `/mes/cal/shift/list-by-plan?planId=` + planId })
+  },
+
+  // 新增计划班次
+  createShift: async (data: CalShiftVO) => {
+    return await request.post({ url: `/mes/cal/shift/create`, data })
+  },
+
+  // 修改计划班次
+  updateShift: async (data: CalShiftVO) => {
+    return await request.put({ url: `/mes/cal/shift/update`, data })
+  },
+
+  // 删除计划班次
+  deleteShift: async (id: number) => {
+    return await request.delete({ url: `/mes/cal/shift/delete?id=` + id })
+  },
+
+  // 导出计划班次 Excel
+  exportShift: async (params: any) => {
+    return await request.download({ url: `/mes/cal/shift/export-excel`, params })
+  }
+}
diff --git a/src/views/mes/cal/plan/CalPlanForm.vue b/src/views/mes/cal/plan/CalPlanForm.vue
new file mode 100644
index 000000000..09fba8cb1
--- /dev/null
+++ b/src/views/mes/cal/plan/CalPlanForm.vue
@@ -0,0 +1,257 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="960px">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="计划编码" prop="code">
+            <el-input v-model="formData.code" placeholder="请输入计划编码">
+              <template #append>
+                <el-button @click="generateCode" :disabled="formType === 'update'">
+                  生成
+                </el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="计划名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入计划名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="班组类型" prop="calendarType">
+            <el-select v-model="formData.calendarType" placeholder="请选择班组类型" class="!w-1/1">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.MES_CAL_CALENDAR_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="开始日期" prop="startDate">
+            <el-date-picker
+              v-model="formData.startDate"
+              type="date"
+              value-format="x"
+              placeholder="请选择开始日期"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="结束日期" prop="endDate">
+            <el-date-picker
+              v-model="formData.endDate"
+              type="date"
+              value-format="x"
+              placeholder="请选择结束日期"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="轮班方式" prop="shiftType">
+            <el-select v-model="formData.shiftType" placeholder="请选择轮班方式" class="!w-1/1">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.MES_CAL_SHIFT_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <!-- TODO @AI：枚举类 -->
+        <el-col :span="8" v-if="formData.shiftType && formData.shiftType !== 1">
+          <el-form-item label="倒班方式" prop="shiftMethod">
+            <el-select v-model="formData.shiftMethod" placeholder="请选择倒班方式" class="!w-1/1">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.MES_CAL_SHIFT_METHOD)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <!-- TODO @AI：枚举类 -->
+        <el-col :span="8" v-if="formData.shiftMethod === 4">
+          <el-form-item label="倒班天数" prop="shiftCount">
+            <el-input-number
+              v-model="formData.shiftCount"
+              :min="1"
+              controls-position="right"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="状态" prop="status">
+            <dict-tag :type="DICT_TYPE.MES_CAL_PLAN_STATUS" :value="formData.status" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- 编辑时显示子资源 Tab -->
+    <el-tabs v-if="formType === 'update'" v-model="activeTab" class="mt-10px">
+      <el-tab-pane label="班次" name="shift">
+        <CalShiftPanel :plan-id="formData.id!" />
+      </el-tab-pane>
+      <el-tab-pane label="班组" name="team">
+        <CalPlanTeamPanel :plan-id="formData.id!" />
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <!-- 确认按钮：仅草稿状态显示 -->
+      <!-- TODO @AI：status 枚举 -->
+      <el-button
+        v-if="formType === 'update' && formData.status === 0"
+        type="warning"
+        @click="handleConfirm"
+        :disabled="formLoading"
+      >
+        确认计划
+      </el-button>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { CalPlanApi, CalPlanVO } from '@/api/mes/cal/plan'
+import { generateRandomStr } from '@/utils'
+import CalShiftPanel from './CalShiftPanel.vue'
+import CalPlanTeamPanel from './CalPlanTeamPanel.vue'
+
+defineOptions({ name: 'CalPlanForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const activeTab = ref('shift') // 当前激活的资源 Tab
+const formData = ref({
+  id: undefined,
+  code: undefined,
+  name: undefined,
+  calendarType: undefined,
+  startDate: undefined,
+  endDate: undefined,
+  shiftType: undefined,
+  shiftMethod: undefined,
+  shiftCount: undefined,
+  status: 0,
+  remark: undefined
+})
+const formRules = reactive({
+  code: [{ required: true, message: '计划编码不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '计划名称不能为空', trigger: 'blur' }],
+  startDate: [{ required: true, message: '开始日期不能为空', trigger: 'change' }],
+  endDate: [{ required: true, message: '结束日期不能为空', trigger: 'change' }]
+})
+const formRef = ref()
+
+/** 生成计划编码 */
+const generateCode = () => {
+  formData.value.code = 'PLAN' + generateRandomStr(8)
+}
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await CalPlanApi.getPlan(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open })
+
+/** 提交表单 */
+const emit = defineEmits(['success'])
+const submitForm = async () => {
+  await formRef.value.validate()
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as CalPlanVO
+    if (formType.value === 'create') {
+      await CalPlanApi.createPlan(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await CalPlanApi.updatePlan(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 确认计划 */
+const handleConfirm = async () => {
+  try {
+    await message.confirm('确认该排班计划？确认后将不可删除。')
+    formLoading.value = true
+    // TODO @AI：枚举类；
+    const data = { ...formData.value, status: 1 } as unknown as CalPlanVO
+    await CalPlanApi.updatePlan(data)
+    message.success('确认成功')
+    dialogVisible.value = false
+    emit('success')
+  } catch {
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    code: undefined,
+    name: undefined,
+    calendarType: undefined,
+    startDate: undefined,
+    endDate: undefined,
+    shiftType: undefined,
+    shiftMethod: undefined,
+    shiftCount: undefined,
+    status: 0, // TODO @AI：枚举类；
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mes/cal/plan/CalPlanTeamPanel.vue b/src/views/mes/cal/plan/CalPlanTeamPanel.vue
new file mode 100644
index 000000000..34578a625
--- /dev/null
+++ b/src/views/mes/cal/plan/CalPlanTeamPanel.vue
@@ -0,0 +1,134 @@
+<!-- TODO @AI：晚点 review 下 -->
+<template>
+  <div>
+    <el-button type="primary" plain size="small" @click="openForm('create')" class="mb-10px">
+      <Icon icon="ep:plus" class="mr-5px" /> 添加班组
+    </el-button>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border>
+      <el-table-column label="班组编号" align="center" prop="teamId" width="120" />
+      <el-table-column label="班组编码" align="center" prop="teamCode" min-width="120" />
+      <el-table-column label="班组名称" align="center" prop="teamName" min-width="120" />
+      <el-table-column label="备注" align="center" prop="remark" min-width="150" />
+      <el-table-column label="操作" align="center" width="80">
+        <template #default="scope">
+          <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加班组弹窗 -->
+    <Dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px" v-loading="formLoading">
+        <el-form-item label="班组" prop="teamId">
+          <!-- TODO @芋艿：对接班组下拉列表，等 cal_team 迁移后对接 -->
+          <el-input-number
+            v-model="formData.teamId"
+            placeholder="请输入班组编号"
+            class="!w-1/1"
+          />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CalPlanTeamApi, CalPlanTeamVO } from '@/api/mes/cal/plan/team'
+
+const props = defineProps<{
+  planId: number // 排班计划编号
+}>()
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const loading = ref(false) // 列表加载中
+const list = ref<CalPlanTeamVO[]>([]) // 班组列表
+
+/** 加载列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    list.value = await CalPlanTeamApi.getPlanTeamListByPlan(props.planId)
+  } finally {
+    loading.value = false
+  }
+}
+
+// ==================== 添加班组 ====================
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的提交加载中
+const formRef = ref() // 表单 Ref
+const formData = ref({
+  id: undefined as number | undefined,
+  planId: undefined as number | undefined,
+  teamId: undefined as number | undefined,
+  remark: undefined as string | undefined
+})
+const formRules = reactive({
+  teamId: [{ required: true, message: '班组不能为空', trigger: 'blur' }]
+})
+
+/** 打开表单弹窗 */
+const openForm = (type: string) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  resetForm()
+}
+
+/** 提交表单 */
+const submitForm = async () => {
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as CalPlanTeamVO
+    await CalPlanTeamApi.createPlanTeam(data)
+    message.success(t('common.createSuccess'))
+    dialogVisible.value = false
+    await getList()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    planId: props.planId,
+    teamId: undefined,
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+
+/** 删除 */
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+    await CalPlanTeamApi.deletePlanTeam(id)
+    message.success('删除成功')
+    await getList()
+  } catch {}
+}
+
+watch(
+  () => props.planId,
+  (val) => {
+    if (val) {
+      getList()
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/views/mes/cal/plan/CalShiftPanel.vue b/src/views/mes/cal/plan/CalShiftPanel.vue
new file mode 100644
index 000000000..bd2840196
--- /dev/null
+++ b/src/views/mes/cal/plan/CalShiftPanel.vue
@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <el-button type="primary" plain size="small" @click="openForm('create')" class="mb-10px">
+      <Icon icon="ep:plus" class="mr-5px" /> 添加班次
+    </el-button>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border>
+      <el-table-column label="顺序" align="center" prop="sort" width="80" />
+      <el-table-column label="班次名称" align="center" prop="name" min-width="120" />
+      <el-table-column label="开始时间" align="center" prop="startTime" width="100" />
+      <el-table-column label="结束时间" align="center" prop="endTime" width="100" />
+      <el-table-column label="备注" align="center" prop="remark" min-width="150" />
+      <el-table-column label="操作" align="center" width="120">
+        <template #default="scope">
+          <el-button link type="primary" @click="openForm('update', scope.row)">编辑</el-button>
+          <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加/编辑班次弹窗 -->
+    <Dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="80px"
+        v-loading="formLoading"
+      >
+        <el-form-item label="顺序" prop="sort">
+          <el-input-number
+            v-model="formData.sort"
+            :min="1"
+            controls-position="right"
+            class="!w-1/1"
+          />
+        </el-form-item>
+        <el-form-item label="班次名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入班次名称" />
+        </el-form-item>
+        <el-form-item label="开始时间" prop="startTime">
+          <el-input v-model="formData.startTime" placeholder="请输入开始时间（如 08:00）" />
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-input v-model="formData.endTime" placeholder="请输入结束时间（如 17:00）" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CalShiftApi, CalShiftVO } from '@/api/mes/cal/shift'
+
+const props = defineProps<{
+  planId: number // 排班计划编号
+}>()
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const loading = ref(false) // 列表加载中
+const list = ref<CalShiftVO[]>([]) // 班次列表
+
+/** 加载列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    list.value = await CalShiftApi.getShiftListByPlan(props.planId)
+  } finally {
+    loading.value = false
+  }
+}
+
+// ==================== 添加/编辑班次 ====================
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formLoading = ref(false) // 表单的提交加载中
+const formRef = ref() // 表单 Ref
+const formData = ref({
+  id: undefined as number | undefined,
+  planId: undefined as number | undefined,
+  sort: 1,
+  name: undefined as string | undefined,
+  startTime: undefined as string | undefined,
+  endTime: undefined as string | undefined,
+  remark: undefined as string | undefined
+})
+const formRules = reactive({
+  sort: [{ required: true, message: '顺序不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '班次名称不能为空', trigger: 'blur' }],
+  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
+  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }]
+})
+
+/** 打开表单弹窗 */
+// TODO @AI：参考别的模块，方法里，应该有注释
+const openForm = (type: string, row?: CalShiftVO) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  if (type === 'update' && row) {
+    formData.value = {
+      id: row.id,
+      planId: row.planId,
+      sort: row.sort,
+      name: row.name,
+      startTime: row.startTime,
+      endTime: row.endTime,
+      remark: row.remark
+    }
+  }
+}
+
+/** 提交表单 */
+// TODO @AI：参考别的模块，方法里，应该有注释
+const submitForm = async () => {
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as CalShiftVO
+    if (formType.value === 'create') {
+      await CalShiftApi.createShift(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await CalShiftApi.updateShift(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    await getList()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    planId: props.planId,
+    sort: 1,
+    name: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+
+/** 删除 */
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+    await CalShiftApi.deleteShift(id)
+    message.success('删除成功')
+    await getList()
+  } catch {}
+}
+
+watch(
+  () => props.planId,
+  (val) => {
+    if (val) {
+      getList()
+    }
+  },
+  { immediate: true }
+)
+</script>
diff --git a/src/views/mes/cal/plan/index.vue b/src/views/mes/cal/plan/index.vue
new file mode 100644
index 000000000..cfdb37c67
--- /dev/null
+++ b/src/views/mes/cal/plan/index.vue
@@ -0,0 +1,230 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="85px"
+    >
+      <el-form-item label="计划编码" prop="code">
+        <el-input
+          v-model="queryParams.code"
+          placeholder="请输入计划编码"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="计划名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入计划名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="轮班方式" prop="shiftType">
+        <el-select
+          v-model="queryParams.shiftType"
+          placeholder="请选择轮班方式"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.MES_CAL_SHIFT_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.MES_CAL_PLAN_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['mes:cal-plan:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['mes:cal-plan:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="计划编码" align="center" prop="code" min-width="120" />
+      <el-table-column label="计划名称" align="center" prop="name" min-width="150" />
+      <el-table-column label="班组类型" align="center" prop="calendarType" min-width="100">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.MES_CAL_CALENDAR_TYPE" :value="scope.row.calendarType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="开始日期" align="center" prop="startDate" :formatter="dateFormatter" width="180px" />
+      <el-table-column label="结束日期" align="center" prop="endDate" :formatter="dateFormatter" width="180px" />
+      <el-table-column label="轮班方式" align="center" prop="shiftType" min-width="100">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.MES_CAL_SHIFT_TYPE" :value="scope.row.shiftType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="倒班方式" align="center" prop="shiftMethod" min-width="100">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.MES_CAL_SHIFT_METHOD" :value="scope.row.shiftMethod" />
+        </template>
+      </el-table-column>
+      <el-table-column label="单据状态" align="center" prop="status" min-width="100">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.MES_CAL_PLAN_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" width="150">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['mes:cal-plan:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            v-if="scope.row.status === 0"
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['mes:cal-plan:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <CalPlanForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { CalPlanApi, CalPlanVO } from '@/api/mes/cal/plan'
+import CalPlanForm from './CalPlanForm.vue'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+
+defineOptions({ name: 'MesCalPlan' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<CalPlanVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  code: undefined,
+  name: undefined,
+  shiftType: undefined,
+  status: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CalPlanApi.getPlanPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+    await CalPlanApi.deletePlan(id)
+    message.success(t('common.delSuccess'))
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    await message.exportConfirm()
+    exportLoading.value = true
+    const data = await CalPlanApi.exportPlan(queryParams)
+    download.excel(data, '排班计划.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+})
+</script>
diff --git a/src/views/mes/cal/shift/CalShiftForm.vue b/src/views/mes/cal/shift/CalShiftForm.vue
new file mode 100644
index 000000000..18dd181c0
--- /dev/null
+++ b/src/views/mes/cal/shift/CalShiftForm.vue
@@ -0,0 +1,128 @@
+<!-- TODO @AI：是不是不用这个？？？ -->
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="排班计划" prop="planId">
+        <el-input-number
+          v-model="formData.planId"
+          placeholder="请输入排班计划编号"
+          class="!w-1/1"
+        />
+      </el-form-item>
+      <el-form-item label="显示顺序" prop="sort">
+        <el-input-number
+          v-model="formData.sort"
+          :min="1"
+          controls-position="right"
+          class="!w-1/1"
+        />
+      </el-form-item>
+      <el-form-item label="班次名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入班次名称" />
+      </el-form-item>
+      <el-form-item label="开始时间" prop="startTime">
+        <el-input v-model="formData.startTime" placeholder="请输入开始时间（如 08:00）" />
+      </el-form-item>
+      <el-form-item label="结束时间" prop="endTime">
+        <el-input v-model="formData.endTime" placeholder="请输入结束时间（如 17:00）" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { CalShiftApi, CalShiftVO } from '@/api/mes/cal/shift'
+
+defineOptions({ name: 'CalShiftForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  planId: undefined,
+  sort: 1,
+  name: undefined,
+  startTime: undefined,
+  endTime: undefined,
+  remark: undefined
+})
+const formRules = reactive({
+  planId: [{ required: true, message: '排班计划不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '班次名称不能为空', trigger: 'blur' }],
+  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
+  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }]
+})
+const formRef = ref()
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await CalShiftApi.getShift(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open })
+
+/** 提交表单 */
+const emit = defineEmits(['success'])
+const submitForm = async () => {
+  await formRef.value.validate()
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as CalShiftVO
+    if (formType.value === 'create') {
+      await CalShiftApi.createShift(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await CalShiftApi.updateShift(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    planId: undefined,
+    sort: 1,
+    name: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    remark: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mes/cal/shift/index.vue b/src/views/mes/cal/shift/index.vue
new file mode 100644
index 000000000..0b75bc0b9
--- /dev/null
+++ b/src/views/mes/cal/shift/index.vue
@@ -0,0 +1,185 @@
+<!-- TODO @AI：是不是不用这个？？？ -->
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="85px"
+    >
+      <el-form-item label="排班计划" prop="planId">
+        <el-input
+          v-model="queryParams.planId"
+          placeholder="请输入排班计划编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="班次名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入班次名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['mes:cal-shift:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['mes:cal-shift:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="班次编号" align="center" prop="id" width="100" />
+      <el-table-column label="排班计划编号" align="center" prop="planId" width="120" />
+      <el-table-column label="显示顺序" align="center" prop="sort" width="100" />
+      <el-table-column label="班次名称" align="center" prop="name" min-width="120" />
+      <el-table-column label="开始时间" align="center" prop="startTime" width="100" />
+      <el-table-column label="结束时间" align="center" prop="endTime" width="100" />
+      <el-table-column label="备注" align="center" prop="remark" min-width="150" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" width="150">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['mes:cal-shift:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['mes:cal-shift:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <CalShiftForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { CalShiftApi, CalShiftVO } from '@/api/mes/cal/shift'
+import CalShiftForm from './CalShiftForm.vue'
+
+defineOptions({ name: 'MesCalShift' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<CalShiftVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  planId: undefined,
+  name: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CalShiftApi.getShiftPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+    await CalShiftApi.deleteShift(id)
+    message.success(t('common.delSuccess'))
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    await message.exportConfirm()
+    exportLoading.value = true
+    const data = await CalShiftApi.exportShift(queryParams)
+    download.excel(data, '计划班次.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+})
+</script>