✨ feat(mes): 新增查看模式下的只读功能及相关按钮逻辑

src/views/mes/cal/plan/CalPlanForm.vue

@@ -6,6 +6,7 @@
       :rules="formRules"
       label-width="100px"
       v-loading="formLoading"
+      :disabled="formType === 'detail'"
     >
       <el-row>
         <el-col :span="8">
@@ -111,27 +112,32 @@
         </el-col>
       </el-row>
     </el-form>
-    <!-- 编辑时显示子资源 Tab -->
+    <!-- 编辑/查看时显示子资源 Tab -->
-    <el-tabs v-if="formType === 'update'" v-model="activeTab" class="mt-10px">
+    <el-tabs v-if="formType === 'update' || formType === 'detail'" v-model="activeTab" class="mt-10px">
       <el-tab-pane label="班次" name="shift">
-        <CalShiftList :plan-id="formData.id!" />
+        <CalShiftList :plan-id="formData.id!" :readonly="formType === 'detail'" />
       </el-tab-pane>
       <el-tab-pane label="班组" name="team">
-        <CalPlanTeamList :plan-id="formData.id!" />
+        <CalPlanTeamList :plan-id="formData.id!" :readonly="formType === 'detail'" />
       </el-tab-pane>
     </el-tabs>
     <template #footer>
-      <!-- 确认按钮：仅草稿状态显示 -->
+      <template v-if="formType !== 'detail'">
-      <el-button
+        <!-- 确认按钮：仅草稿状态显示 -->
-        v-if="formType === 'update' && formData.status === MesCalPlanStatusEnum.PREPARE"
+        <el-button
-        type="warning"
+          v-if="formType === 'update' && formData.status === MesCalPlanStatusEnum.PREPARE"
-        @click="handleConfirm"
+          type="warning"
-        :disabled="formLoading"
+          @click="handleConfirm"
-      >
+          :disabled="formLoading"
-        确认计划
+        >
-      </el-button>
+          确认计划
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        </el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </template>
+      <template v-else>
+        <el-button @click="dialogVisible = false">关 闭</el-button>
+      </template>
     </template>
   </Dialog>
 </template>
@@ -148,6 +154,7 @@ import {
 import CalShiftList from './CalShiftList.vue'
 import CalPlanTeamList from './CalPlanTeamList.vue'
 
+// TODO @AI：isDetail，这种 compute 计算；
 defineOptions({ name: 'CalPlanForm' })
 
 const { t } = useI18n() // 国际化
@@ -174,23 +181,27 @@ const formData = ref({
 const formRules = reactive({
   code: [{ required: true, message: '计划编码不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '计划名称不能为空', trigger: 'blur' }],
+  calendarType: [{ required: true, message: '班组类型不能为空', trigger: 'change' }],
   startDate: [{ required: true, message: '开始日期不能为空', trigger: 'change' }],
-  endDate: [{ required: true, message: '结束日期不能为空', trigger: 'change' }]
+  endDate: [{ required: true, message: '结束日期不能为空', trigger: 'change' }],
+  shiftType: [{ required: true, message: '轮班方式不能为空', trigger: 'change' }]
 })
 const formRef = ref()
 
 /** 生成计划编码 */
 const generateCode = () => {
+  // TODO @AI：接入编码规则；
   formData.value.code = 'PLAN' + generateRandomStr(8)
 }
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
+  // TODO @AI：dialogtitle，通过 compute 实现；
+  dialogTitle.value = type === 'detail' ? '查看' : t('action.' + type)
   formType.value = type
   resetForm()
-  // 修改时，设置数据
+  // 修改/查看时，设置数据
   if (id) {
     formLoading.value = true
     try {
@@ -223,11 +234,16 @@ const submitForm = async () => {
   }
 }
 
-/** 确认计划 */
+/** 确认计划（先自动保存再确认） */
 const handleConfirm = async () => {
   try {
-    await message.confirm('确认该排班计划？确认后将不可修改或删除。')
+    // 1. 先校验并保存表单
+    await formRef.value.validate()
     formLoading.value = true
+    const data = formData.value as unknown as CalPlanVO
+    await CalPlanApi.updatePlan(data)
+    // 2. 再确认计划
+    await message.confirm('确认该排班计划？确认后将不可修改或删除。')
     await CalPlanApi.confirmPlan(formData.value.id!)
     message.success('确认成功')
     dialogVisible.value = false

src/views/mes/cal/plan/CalPlanTeamList.vue

@@ -2,10 +2,18 @@
 <template>
   <div>
     <!-- 操作栏 -->
-    <el-button v-if="!readonly" type="primary" plain size="small" @click="openForm('create')" class="mb-10px">
+    <el-button
+      v-if="!readonly"
+      type="primary"
+      plain
+      size="small"
+      @click="openForm('create')"
+      class="mb-10px"
+    >
       <Icon icon="ep:plus" class="mr-5px" /> 添加班组
     </el-button>
     <!-- 列表 -->
+    <!-- TODO @AI：左边：班组； -->
     <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" />
@@ -17,6 +25,7 @@
         </template>
       </el-table-column>
     </el-table>
+    <!-- TODO @AI：右边：成员； -->
 
     <!-- 表单弹窗：添加/修改 -->
     <Dialog :title="dialogTitle" v-model="dialogVisible" width="500px">

src/views/mes/cal/plan/CalShiftList.vue

@@ -40,7 +40,6 @@
         <el-form-item label="班次名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入班次名称" />
         </el-form-item>
-        <!-- TODO @芋艿：这块要测试下 -->
         <el-form-item label="开始时间" prop="startTime">
           <el-time-picker
             v-model="formData.startTime"

src/views/mes/cal/plan/index.vue

@@ -1,6 +1,7 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
+    <!-- TODO @AI：【开始时间】、【结束时间】； -->
     <el-form
       class="-mb-15px"
       :model="queryParams"
@@ -86,6 +87,7 @@
           <dict-tag :type="DICT_TYPE.MES_CAL_CALENDAR_TYPE" :value="scope.row.calendarType" />
         </template>
       </el-table-column>
+      <!-- TODO @AI：dateFormatter2、dateFormatter2； -->
       <el-table-column
         label="开始日期"
         align="center"
@@ -124,11 +126,7 @@
       />
       <el-table-column label="操作" align="center" width="150">
         <template #default="scope">
-          <el-button
+          <el-button link type="primary" @click="openForm('detail', scope.row.id)">
-            link
-            type="primary"
-            @click="openForm('detail', scope.row.id)"
-          >
             查看
           </el-button>
           <el-button