✨ feat(mes): 添加编码规则分段详情查询 API

src/api/mes/md/autocode/part/index.ts

@@ -18,6 +18,11 @@ export interface AutoCodePartVO {
 
 // MES 编码规则分段 API
 export const AutoCodePartApi = {
+  // 查询编码规则分段详情
+  getAutoCodePart: async (id: number) => {
+    return await request.get({ url: `/mes/md/auto-code-part/get?id=` + id })
+  },
+
   // 查询编码规则分段列表
   getAutoCodePartListByRuleId: async (ruleId: number) => {
     return await request.get({ url: `/mes/md/auto-code-part/list-by-rule-id?ruleId=` + ruleId })

src/views/mes/autocode/rule/AutoCodePartForm.vue

@@ -1,6 +1,4 @@
 <!-- MES 编码规则分段的新增/修改 -->
-<!-- TODO @AI：每行一个； -->
-<!-- TODO @AI：所有 magic number 枚举的，都使用 mes utils 里的枚举；没有就新建 -->
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible" width="800px">
     <el-form
@@ -11,14 +9,30 @@
       v-loading="formLoading"
     >
       <el-row :gutter="20">
-        <el-col :span="12">
+        <el-col :span="24">
-          <el-form-item label="分段类型" prop="type">
+          <el-form-item label="分段排序" prop="sort">
-            <el-select
+            <el-input-number
-              v-model="formData.type"
+              v-model="formData.sort"
-              placeholder="请选择分段类型"
+              placeholder="请输入分段排序"
+              :min="1"
               class="!w-1/1"
-              @change="handleTypeChange"
+            />
-            >
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="分段长度" prop="length">
+            <el-input-number
+              v-model="formData.length"
+              placeholder="请输入分段长度"
+              :min="1"
+              :max="50"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="分段类型" prop="type">
+            <el-select v-model="formData.type" placeholder="请选择分段类型" class="!w-1/1">
               <el-option
                 v-for="dict in getIntDictOptions(DICT_TYPE.MES_MD_AUTO_CODE_PART_TYPE)"
                 :key="dict.value"
@@ -28,24 +42,9 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
-          <el-form-item label="长度" prop="length">
-            <el-input-number
-              v-model="formData.length"
-              placeholder="请输入长度"
-              :min="1"
-              :max="50"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <!-- 输入字符类型 -->
-        <template v-if="formData.type === 1">
-          <!-- 输入字符类型不需要额外配置 -->
-        </template>
         <!-- 当前日期类型 -->
-        <template v-if="formData.type === 2">
+        <template v-if="formData.type === MesAutoCodePartTypeEnum.DATE">
-          <el-col :span="12">
+          <el-col :span="24">
             <el-form-item label="日期格式" prop="dateFormat">
               <el-select v-model="formData.dateFormat" placeholder="请选择日期格式" class="!w-1/1">
                 <el-option label="yyyy" value="yyyy" />
@@ -58,16 +57,16 @@
           </el-col>
         </template>
         <!-- 固定字符类型 -->
-        <template v-if="formData.type === 3">
+        <template v-if="formData.type === MesAutoCodePartTypeEnum.FIX">
-          <el-col :span="12">
+          <el-col :span="24">
             <el-form-item label="固定字符" prop="fixCharacter">
               <el-input v-model="formData.fixCharacter" placeholder="请输入固定字符" />
             </el-form-item>
           </el-col>
         </template>
         <!-- 流水号类型 -->
-        <template v-if="formData.type === 4">
+        <template v-if="formData.type === MesAutoCodePartTypeEnum.SERIAL">
-          <el-col :span="12">
+          <el-col :span="24">
             <el-form-item label="流水号起始值" prop="serialStartNo">
               <el-input-number
                 v-model="formData.serialStartNo"
@@ -77,7 +76,7 @@
               />
             </el-form-item>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="24">
             <el-form-item label="流水号步长" prop="serialStep">
               <el-input-number
                 v-model="formData.serialStep"
@@ -87,12 +86,12 @@
               />
             </el-form-item>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="24">
             <el-form-item label="是否循环" prop="cycleFlag">
               <el-switch v-model="formData.cycleFlag" />
             </el-form-item>
           </el-col>
-          <el-col :span="12" v-if="formData.cycleFlag">
+          <el-col :span="24" v-if="formData.cycleFlag">
             <el-form-item label="循环方式" prop="cycleMethod">
               <el-select v-model="formData.cycleMethod" placeholder="请选择循环方式" class="!w-1/1">
                 <el-option
@@ -105,16 +104,6 @@
             </el-form-item>
           </el-col>
         </template>
-        <el-col :span="12">
-          <el-form-item label="排序" prop="sort">
-            <el-input-number
-              v-model="formData.sort"
-              placeholder="请输入排序"
-              :min="1"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
             <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
@@ -132,34 +121,35 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { AutoCodePartApi, AutoCodePartVO } from '@/api/mes/md/autocode/part'
+import { MesAutoCodePartTypeEnum } from '@/views/mes/utils/constants'
 
 defineOptions({ name: 'AutoCodePartForm' })
 
-const { t } = useI18n()
+const { t } = useI18n() // 国际化
-const message = useMessage()
+const message = useMessage() // 消息弹窗
 
-const dialogVisible = ref(false)
+const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('')
+const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false)
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('')
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
-  ruleId: undefined,
+  ruleId: undefined as number | undefined,
   sort: 1,
   type: undefined,
-  length: 1,
+  length: undefined,
   dateFormat: undefined,
   fixCharacter: undefined,
-  serialStartNo: 1,
+  serialStartNo: undefined,
-  serialStep: 1,
+  serialStep: undefined,
   cycleFlag: false,
   cycleMethod: undefined,
   remark: undefined
 })
 const formRules = reactive({
-  sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
+  sort: [{ required: true, message: '分段排序不能为空', trigger: 'blur' }],
   type: [{ required: true, message: '分段类型不能为空', trigger: 'change' }],
-  length: [{ required: true, message: '长度不能为空', trigger: 'blur' }],
+  length: [{ required: true, message: '分段长度不能为空', trigger: 'blur' }],
   dateFormat: [{ required: true, message: '日期格式不能为空', trigger: 'change' }],
   fixCharacter: [{ required: true, message: '固定字符不能为空', trigger: 'blur' }],
   serialStartNo: [{ required: true, message: '流水号起始值不能为空', trigger: 'blur' }],
@@ -168,32 +158,22 @@ const formRules = reactive({
 })
 const formRef = ref()
 
-/** 分段类型变化 */
-const handleTypeChange = () => {
-  // 清空其他类型的字段
-  formData.value.dateFormat = undefined
-  formData.value.fixCharacter = undefined
-  formData.value.serialStartNo = 1
-  formData.value.serialStep = 1
-  formData.value.cycleFlag = false
-  formData.value.cycleMethod = undefined
-}
-
 /** 打开弹窗 */
-const open = async (type: string, id?: number, ruleId?: number) => {
+const open = async (type: string, id?: number, ruleId?: number, maxSort?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
   formData.value.ruleId = ruleId
+  // 如果是新增，且传入了 maxSort，则设置默认的排序为 maxSort + 1
+  if (maxSort) {
+    formData.value.sort = maxSort + 1
+  }
+  // 如果是修改，直接通过 id 查询
   if (id) {
     formLoading.value = true
     try {
-      const data = await AutoCodePartApi.getAutoCodePartListByRuleId(ruleId!)
+      formData.value = await AutoCodePartApi.getAutoCodePart(id)
-      const part = data.find((item) => item.id === id)
-      if (part) {
-        formData.value = part
-      }
     } finally {
       formLoading.value = false
     }
@@ -226,14 +206,14 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     id: undefined,
-    ruleId: undefined,
+    ruleId: undefined as number | undefined,
     sort: 1,
     type: undefined,
-    length: 1,
+    length: undefined,
     dateFormat: undefined,
     fixCharacter: undefined,
-    serialStartNo: 1,
+    serialStartNo: undefined,
-    serialStep: 1,
+    serialStep: undefined,
     cycleFlag: false,
     cycleMethod: undefined,
     remark: undefined

src/views/mes/autocode/rule/AutoCodePartList.vue

@@ -5,13 +5,13 @@
       <Icon icon="ep:plus" class="mr-5px" /> 新增分段
     </el-button>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="排序" align="center" prop="sort" width="80" />
+      <el-table-column label="分段排序" align="center" prop="sort" width="80" />
       <el-table-column label="分段类型" align="center" prop="type" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.MES_MD_AUTO_CODE_PART_TYPE" :value="scope.row.type" />
         </template>
       </el-table-column>
-      <el-table-column label="长度" align="center" prop="length" width="80" />
+      <el-table-column label="分段长度" align="center" prop="length" width="80" />
       <el-table-column label="日期格式" align="center" prop="dateFormat" width="150" />
       <el-table-column label="固定字符" align="center" prop="fixCharacter" width="120" />
       <el-table-column label="流水号起始" align="center" prop="serialStartNo" width="100" />
@@ -79,7 +79,8 @@ const getList = async () => {
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id, props.ruleId)
+  const maxSort = list.value.length > 0 ? Math.max(...list.value.map((item) => item.sort || 0)) : 0
+  formRef.value.open(type, id, props.ruleId, maxSort)
 }
 
 /** 删除按钮操作 */

src/views/mes/autocode/rule/AutoCodeRuleForm.vue

@@ -1,6 +1,4 @@
 <!-- MES 编码规则的新增/修改 -->
-<!-- TODO @AI：最大长度，默认是有的把；-->
-<!-- TODO @AI：所有 magic number 枚举的，都使用 mes utils 里的枚举；没有就新建 -->
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible" width="1000px">
     <el-form
@@ -11,17 +9,61 @@
       v-loading="formLoading"
     >
       <el-row :gutter="20">
-        <el-col :span="8">
+        <el-col :span="24">
           <el-form-item label="规则编码" prop="code">
             <el-input v-model="formData.code" placeholder="请输入规则编码" />
           </el-form-item>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="24">
           <el-form-item label="规则名称" prop="name">
             <el-input v-model="formData.name" placeholder="请输入规则名称" />
           </el-form-item>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="24">
+          <el-form-item label="规则描述" prop="description">
+            <el-input v-model="formData.description" placeholder="请输入规则描述" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="最大长度" prop="maxLength">
+            <el-input-number
+              v-model="formData.maxLength"
+              placeholder="请输入最大长度"
+              :min="1"
+              :max="100"
+              class="!w-1/1"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="是否补齐" prop="padded">
+            <!-- DONE @AI：改成 radio group -->
+            <el-radio-group v-model="formData.padded">
+              <el-radio :value="true">是</el-radio>
+              <el-radio :value="false">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" v-if="formData.padded">
+          <el-form-item label="补齐字符" prop="paddedChar">
+            <el-input v-model="formData.paddedChar" placeholder="请输入补齐字符" maxlength="1" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" v-if="formData.padded">
+          <el-form-item label="补齐方式" prop="paddedMethod">
+            <!-- DONE @AI：改成 radio -->
+            <el-radio-group v-model="formData.paddedMethod">
+              <el-radio
+                v-for="dict in getIntDictOptions(DICT_TYPE.MES_MD_AUTO_CODE_PADDED_METHOD)"
+                :key="dict.value"
+                :value="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
           <el-form-item label="状态" prop="status">
             <el-radio-group v-model="formData.status">
               <el-radio
@@ -34,44 +76,6 @@
             </el-radio-group>
           </el-form-item>
         </el-col>
-        <el-col :span="24">
-          <el-form-item label="规则描述" prop="description">
-            <el-input v-model="formData.description" placeholder="请输入规则描述" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label="是否补齐" prop="padded">
-            <el-switch v-model="formData.padded" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8" v-if="formData.padded">
-          <el-form-item label="最大长度" prop="maxLength">
-            <el-input-number
-              v-model="formData.maxLength"
-              placeholder="请输入最大长度"
-              :min="1"
-              :max="100"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8" v-if="formData.padded">
-          <el-form-item label="补齐字符" prop="paddedChar">
-            <el-input v-model="formData.paddedChar" placeholder="请输入补齐字符" maxlength="1" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8" v-if="formData.padded">
-          <el-form-item label="补齐方式" prop="paddedMethod">
-            <el-select v-model="formData.paddedMethod" placeholder="请选择补齐方式" class="!w-1/1">
-              <el-option
-                v-for="dict in getIntDictOptions(DICT_TYPE.MES_MD_AUTO_CODE_PADDED_METHOD)"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
             <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
@@ -80,12 +84,10 @@
       </el-row>
     </el-form>
     <!-- 底部 Tab：仅修改时展示 -->
-    <!-- TODO @AI：el- 风格先的交互，参考别的界面； -->
+    <template v-if="formType === 'update' && formData.id">
-    <el-tabs v-model="activeTab" v-if="formType === 'update' && formData.id">
+      <el-divider>物料信息</el-divider>
-      <el-tab-pane label="编码分段" name="parts" lazy>
+      <AutoCodePartList :ruleId="formData.id!" />
-        <AutoCodePartList :ruleId="formData.id!" />
+    </template>
-      </el-tab-pane>
-    </el-tabs>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -101,24 +103,23 @@ import { CommonStatusEnum } from '@/utils/constants'
 
 defineOptions({ name: 'AutoCodeRuleForm' })
 
-const { t } = useI18n()
+const { t } = useI18n() // 国际化
-const message = useMessage()
+const message = useMessage() // 消息弹窗
 
-// TODO @AI：/Users/yunai/Java/yudao-all-in-one/yudao-ui-admin-vue3/src/views/system/user/UserForm.vue 注释风格；
+const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogVisible = ref(false)
+const dialogTitle = ref('') // 弹窗的标题
-const dialogTitle = ref('')
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formLoading = ref(false)
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formType = ref('')
+const activeTab = ref('parts') // 当前激活的 Tab
-const activeTab = ref('parts')
 const formData = ref({
   id: undefined,
   code: undefined,
   name: undefined,
   description: undefined,
-  maxLength: 20,
+  maxLength: undefined,
   padded: false,
-  paddedChar: '0',
+  paddedChar: undefined,
-  paddedMethod: 1, // TODO @AI：这里有枚举，需要使用下；
+  paddedMethod: undefined,
   status: CommonStatusEnum.ENABLE,
   remark: undefined
 })
@@ -127,6 +128,7 @@ const formRules = reactive({
   name: [{ required: true, message: '规则名称不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
   maxLength: [{ required: true, message: '最大长度不能为空', trigger: 'blur' }],
+  padded: [{ required: true, message: '是否补齐不能为空', trigger: 'change' }],
   paddedChar: [{ required: true, message: '补齐字符不能为空', trigger: 'blur' }],
   paddedMethod: [{ required: true, message: '补齐方式不能为空', trigger: 'change' }]
 })
@@ -178,10 +180,10 @@ const resetForm = () => {
     code: undefined,
     name: undefined,
     description: undefined,
-    maxLength: 20,
+    maxLength: undefined,
     padded: false,
-    paddedChar: '0',
+    paddedChar: undefined,
-    paddedMethod: 1, // TODO @AI：这里有枚举，需要使用下；
+    paddedMethod: undefined,
     status: CommonStatusEnum.ENABLE,
     remark: undefined
   }

src/views/mes/utils/constants.ts

@@ -322,6 +322,20 @@ export const MesWmOutsourceIssueStatusEnum = {
   CANCELLED: MesOrderStatusConstants.CANCELLED
 }
 
+/** MES 编码规则分段类型枚举 */
+export const MesAutoCodePartTypeEnum = {
+  INPUT: 1, // 输入字符
+  DATE: 2, // 当前日期
+  FIX: 3, // 固定字符
+  SERIAL: 4 // 流水号
+}
+
+/** MES 编码规则补齐方式枚举 */
+export const MesAutoCodePaddedMethodEnum = {
+  LEFT: 1, // 左补齐
+  RIGHT: 2 // 右补齐
+}
+
 /** 获取物料/产品标识的标签 */
 export const getItemOrProductLabel = (value: string): string => {
   for (const item of Object.values(MesItemOrProductEnum)) {