✨ feat(mes): 优化 cal plan 的代码实现

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

@@ -6,7 +6,7 @@
       :rules="formRules"
       label-width="100px"
       v-loading="formLoading"
-      :disabled="formType === 'detail'"
+      :disabled="isDetail"
     >
       <el-row>
         <el-col :span="8">
@@ -98,6 +98,7 @@
             />
           </el-form-item>
         </el-col>
+        <!-- TODO @AI：去掉状态的展示；没意义； -->
         <el-col :span="8">
           <el-form-item label="状态" prop="status">
             <dict-tag :type="DICT_TYPE.MES_CAL_PLAN_STATUS" :value="formData.status" />
@@ -113,16 +114,16 @@
       </el-row>
     </el-form>
     <!-- 编辑/查看时显示子资源 Tab -->
-    <el-tabs v-if="formType === 'update' || formType === 'detail'" v-model="activeTab" class="mt-10px">
+    <el-tabs v-if="formType === 'update' || isDetail" v-model="activeTab" class="mt-10px">
       <el-tab-pane label="班次" name="shift">
-        <CalShiftList :plan-id="formData.id!" :readonly="formType === 'detail'" />
+        <CalShiftList :plan-id="formData.id!" :readonly="isDetail" />
       </el-tab-pane>
       <el-tab-pane label="班组" name="team">
-        <CalPlanTeamList :plan-id="formData.id!" :readonly="formType === 'detail'" />
+        <CalPlanTeamList :plan-id="formData.id!" :readonly="isDetail" />
       </el-tab-pane>
     </el-tabs>
     <template #footer>
-      <template v-if="formType !== 'detail'">
+      <template v-if="!isDetail">
         <!-- 确认按钮：仅草稿状态显示 -->
         <el-button
           v-if="formType === 'update' && formData.status === MesCalPlanStatusEnum.PREPARE"
@@ -145,25 +146,33 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { CalPlanApi, CalPlanVO } from '@/api/mes/cal/plan'
-import { generateRandomStr } from '@/utils'
 import {
   MesCalPlanStatusEnum,
   MesCalShiftTypeEnum,
-  MesCalShiftMethodEnum
+  MesCalShiftMethodEnum,
+  MesAutoCodeRuleCode
 } from '@/views/mes/utils/constants'
+import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import CalShiftList from './CalShiftList.vue'
 import CalPlanTeamList from './CalPlanTeamList.vue'
 
-// TODO @AI：isDetail，这种 compute 计算；
 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 formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 查看
+const isDetail = computed(() => formType.value === 'detail') // 是否为详情模式（只读）
+const dialogTitle = computed(() => {
+  const titles = {
+    create: '新增排班计划',
+    update: '修改排班计划',
+    detail: '查看排班计划'
+  }
+  return titles[formType.value] || formType.value
+}) // 弹窗的标题
 const activeTab = ref('shift') // 当前激活的资源 Tab
 const formData = ref({
   id: undefined,
@@ -189,16 +198,13 @@ const formRules = reactive({
 const formRef = ref()
 
 /** 生成计划编码 */
-const generateCode = () => {
+const generateCode = async () => {
-  // TODO @AI：接入编码规则；
+  formData.value.code = await AutoCodeRecordApi.generateAutoCode(MesAutoCodeRuleCode.CAL_PLAN_CODE)
-  formData.value.code = 'PLAN' + generateRandomStr(8)
 }
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
-  // TODO @AI：dialogtitle，通过 compute 实现；
-  dialogTitle.value = type === 'detail' ? '查看' : t('action.' + type)
   formType.value = type
   resetForm()
   // 修改/查看时，设置数据

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

@@ -25,7 +25,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <!-- TODO @AI：右边：成员； -->
+    <!-- TODO @AI：右边：成员；（后端接口可以加！！！你加下！！） -->
 
     <!-- 表单弹窗：添加/修改 -->
     <Dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
@@ -66,7 +66,7 @@ defineOptions({ name: 'CalPlanTeamList' })
 
 const props = defineProps<{
   planId: number // 排班计划编号
-  readonly?: boolean // 是否只读模式 TODO @AI：参考别的模块，是不是通过 formType，进一步处理？
+  readonly?: boolean // 是否只读模式 DONE @AI：参考别的模块，是不是通过 formType，进一步处理？（当前父组件已通过 isDetail 计算属性传入 readonly，满足需求）
 }>()
 
 const { t } = useI18n() // 国际化

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

@@ -1,7 +1,6 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <!-- TODO @AI：【开始时间】、【结束时间】； -->
     <el-form
       class="-mb-15px"
       :model="queryParams"
@@ -27,6 +26,28 @@
           class="!w-240px"
         />
       </el-form-item>
+      <el-form-item label="开始日期" prop="startDate">
+        <el-date-picker
+          v-model="queryParams.startDate"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="结束日期" prop="endDate">
+        <el-date-picker
+          v-model="queryParams.endDate"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
       <el-form-item label="轮班方式" prop="shiftType">
         <el-select
           v-model="queryParams.shiftType"
@@ -79,27 +100,31 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <!-- TODO @AI：编码查看，不用【查看】按钮； -->
+      <el-table-column label="计划编码" align="center" prop="code" min-width="120">
-      <el-table-column label="计划编码" align="center" prop="code" min-width="120" />
+        <template #default="scope">
+          <el-link type="primary" @click="openForm('detail', scope.row.id)">
+            {{ scope.row.code }}
+          </el-link>
+        </template>
+      </el-table-column>
       <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>
-      <!-- TODO @AI：dateFormatter2、dateFormatter2； -->
       <el-table-column
         label="开始日期"
         align="center"
         prop="startDate"
-        :formatter="dateFormatter"
+        :formatter="dateFormatter2"
         width="180px"
       />
       <el-table-column
         label="结束日期"
         align="center"
         prop="endDate"
-        :formatter="dateFormatter"
+        :formatter="dateFormatter2"
         width="180px"
       />
       <el-table-column label="轮班方式" align="center" prop="shiftType" min-width="100">
@@ -124,11 +149,8 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="150">
+      <el-table-column label="操作" align="center" width="120">
         <template #default="scope">
-          <el-button link type="primary" @click="openForm('detail', scope.row.id)">
-            查看
-          </el-button>
           <el-button
             v-if="scope.row.status === MesCalPlanStatusEnum.PREPARE"
             link
@@ -164,7 +186,7 @@
 </template>
 
 <script setup lang="ts">
-import { dateFormatter } from '@/utils/formatTime'
+import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { CalPlanApi, CalPlanVO } from '@/api/mes/cal/plan'
 import CalPlanForm from './CalPlanForm.vue'
@@ -184,6 +206,8 @@ const queryParams = reactive({
   pageSize: 10,
   code: undefined,
   name: undefined,
+  startDate: undefined,
+  endDate: undefined,
   shiftType: undefined,
   status: undefined
 })

src/views/mes/utils/constants.ts

@@ -445,7 +445,8 @@ export const MesAutoCodeRuleCode = {
   WM_STOCK_TAKING_CODE: 'WM_STOCK_TAKING_CODE', // 盘点任务编码
   TRANSFER_CODE: 'TRANSFER_CODE', // 转移调拨单编码
   WM_OUTSOURCE_ISSUE_CODE: 'WM_OUTSOURCE_ISSUE_CODE', // 外协发料单编码
-  CAL_TEAM_CODE: 'CAL_TEAM_CODE' // 班组编码
+  CAL_TEAM_CODE: 'CAL_TEAM_CODE', // 班组编码
+  CAL_PLAN_CODE: 'CAL_PLAN_CODE' // 排班计划编码
 } as const
 
 /** 获取物料/产品标识的标签 */