feat：菜单管理-app端菜单添加终端类型

src/api/system/menu/index.ts

@@ -17,6 +17,7 @@ export interface MenuVO {
   keepAlive: boolean
   alwaysShow?: boolean
   clientType?: number
+  terminalType?: number
   createTime: Date
 }
 

src/locales/en.ts

@@ -1146,6 +1146,9 @@ export default {
       updateCacheTitle: 'Refresh Menu Cache',
       clientTypeWeb: 'Web Menu',
       clientTypeApp: 'APP Menu',
+      terminalType: 'Terminal Type',
+      terminalTypeMobile: 'Phone',
+      terminalTypeScanner: 'Scanner',
       visibleShow: 'Show',
       visibleHide: 'Hide',
       always: 'Always',
@@ -1156,6 +1159,7 @@ export default {
       nameRequired: 'Menu name is required',
       sortRequired: 'Menu order is required',
       pathRequired: 'Route path is required',
+      terminalTypeRequired: 'Terminal type is required',
       statusRequired: 'Status is required',
       pathMustStartWithSlash: 'Path must start with /',
       pathMustNotStartWithSlash: 'Path must not start with /',

src/locales/zh-CN.ts

@@ -1147,6 +1147,9 @@ export default {
       updateCacheTitle: '刷新菜单缓存',
       clientTypeWeb: 'Web端菜单',
       clientTypeApp: 'APP端菜单',
+      terminalType: '终端类型',
+      terminalTypeMobile: '手机',
+      terminalTypeScanner: '扫码器',
       visibleShow: '显示',
       visibleHide: '隐藏',
       always: '总是',
@@ -1157,6 +1160,7 @@ export default {
       nameRequired: '菜单名称不能为空',
       sortRequired: '菜单顺序不能为空',
       pathRequired: '路由地址不能为空',
+      terminalTypeRequired: '终端类型不能为空',
       statusRequired: '状态不能为空',
       pathMustStartWithSlash: '路径必须以 / 开头',
       pathMustNotStartWithSlash: '路径不能以 / 开头',

src/views/system/menu/MenuForm.vue

@@ -66,6 +66,12 @@
       <el-form-item :label="t('SystemManagement.Menu.sort')" prop="sort">
         <el-input-number v-model="formData.sort" :min="0" clearable controls-position="right" />
       </el-form-item>
+      <el-form-item v-if="clientType === 2" :label="t('SystemManagement.Menu.terminalType')" prop="terminalType">
+        <el-radio-group v-model="formData.terminalType">
+          <el-radio :value="1">{{ t('SystemManagement.Menu.terminalTypeMobile') }}</el-radio>
+          <el-radio :value="2">{{ t('SystemManagement.Menu.terminalTypeScanner') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
       <el-form-item :label="t('SystemManagement.Menu.status')" prop="status">
         <el-radio-group v-model="formData.status">
           <el-radio
@@ -152,13 +158,15 @@ const formData = ref({
   visible: true,
   keepAlive: true,
   alwaysShow: true,
-  clientType: 1
+  clientType: 1,
+  terminalType: 1
 })
 const formRules = computed(() => ({
   name: [{ required: true, message: t('SystemManagement.Menu.nameRequired'), trigger: 'blur' }],
   sort: [{ required: true, message: t('SystemManagement.Menu.sortRequired'), trigger: 'blur' }],
   path: [{ required: clientType.value === 1, message: t('SystemManagement.Menu.pathRequired'), trigger: 'blur' }],
-  status: [{ required: true, message: t('SystemManagement.Menu.statusRequired'), trigger: 'blur' }]
+  status: [{ required: true, message: t('SystemManagement.Menu.statusRequired'), trigger: 'blur' }],
+  terminalType: [{ required: clientType.value === 2, message: t('SystemManagement.Menu.terminalTypeRequired'), trigger: 'change' }]
 }))
 const formRef = ref() // 表单 Ref
 
@@ -210,8 +218,9 @@ const submitForm = async () => {
         }
       }
     }
-    const data = formData.value as unknown as MenuApi.MenuVO
+    const data = formData.value as unknown as MenuApi.MenuVO & { terminalType?: number }
     data.clientType = clientType.value
+    data.terminalType = clientType.value === 2 ? formData.value.terminalType : undefined
     if (formType.value === 'create') {
       await MenuApi.createMenu(data)
       message.success(t('common.createSuccess'))
@@ -257,7 +266,8 @@ const resetForm = () => {
     visible: true,
     keepAlive: true,
     alwaysShow: true,
-    clientType: 1
+    clientType: 1,
+    terminalType: 1
   }
   formRef.value?.resetFields()
 }

src/views/system/menu/index.vue

@@ -79,19 +79,29 @@
       :default-expand-all="isExpandAll"
       row-key="id"
     >
-      <el-table-column :show-overflow-tooltip="true" :label="t('SystemManagement.Menu.name')" prop="name" width="250"  sortable />
-      <el-table-column :show-overflow-tooltip="true" :label="t('SystemManagement.Menu.enName')" prop="enName" width="250"  sortable />
+      <el-table-column :show-overflow-tooltip="true" :label="t('SystemManagement.Menu.name')" prop="name" width="200"  sortable />
+      <el-table-column :show-overflow-tooltip="true" :label="t('SystemManagement.Menu.enName')" prop="enName" width="220"  sortable />
       <el-table-column align="center" :label="t('SystemManagement.Menu.icon')" prop="icon" width="100">
         <template #default="scope">
           <Icon v-if="activeClientType === 1" :icon="scope.row.icon" />
           <span v-else>{{ scope.row.icon }}</span>
         </template>
       </el-table-column>
-      <el-table-column :label="t('SystemManagement.Menu.sort')" prop="sort" width="60" />
+      <el-table-column :label="t('SystemManagement.Menu.sort')" prop="sort" width="80" />
+      <el-table-column
+        v-if="activeClientType === 2"
+        :label="t('SystemManagement.Menu.terminalType')"
+        prop="terminalType"
+        width="120"
+      >
+        <template #default="scope">
+          {{ getTerminalTypeLabel(scope.row.terminalType) }}
+        </template>
+      </el-table-column>
       <el-table-column :show-overflow-tooltip="true" :label="t('SystemManagement.Menu.permission')" prop="permission" />
       <el-table-column :show-overflow-tooltip="true" :label="t('SystemManagement.Menu.component')" prop="component" />
       <el-table-column :show-overflow-tooltip="true" :label="t('SystemManagement.Menu.componentName')" prop="componentName"  sortable />
-      <el-table-column :label="t('SystemManagement.Menu.status')" prop="status" sortable>
+      <el-table-column :label="t('SystemManagement.Menu.status')" prop="status" sortable width="80">
         <template #default="scope">
           <el-switch
             class="ml-4px"
@@ -187,6 +197,11 @@ const handleClientTypeChange = (val: number | string) => {
   getList()
 }
 
+const getTerminalTypeLabel = (value?: number) => {
+  if (Number(value) === 2) return t('SystemManagement.Menu.terminalTypeScanner')
+  return t('SystemManagement.Menu.terminalTypeMobile')
+}
+
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields()