Merge remote-tracking branch 'origin/main'

# Conflicts:
#	src/views/mes/criticalComponent/CriticalComponentForm.vue
#	src/views/mes/criticalComponent/index.vue

src/api/mes/deviceledger/index.ts

@@ -10,6 +10,7 @@ export interface DeviceLedgerVO {
   deviceName: string // 设备名称
   deviceStatus: number // 设备状态 (0-正常, 1-停用, 2-维修, 3-报废)
   deviceBrand: string // 设备品牌
+  sn?: string // 序列号
   deviceModel: string // 设备型号
   deviceSpec: string // 设备规格
   deviceType: string | number // 设备类型
@@ -22,6 +23,7 @@ export interface DeviceLedgerVO {
   useDept?: string // 使用部门
   deviceManager: string // 设备负责人
   productionDate: string | number | Date // 设备生产日期
+  outgoingTime?: string | number | Date // 出厂日期
   factoryEntryDate: string | number | Date // 设备入厂日期
   deviceRemark: string // 设备备注
   remark: string // 备注

src/api/mes/dvrepair/index.ts

@@ -15,8 +15,20 @@ export interface DvRepairVO {
   finishDate: Date // 完成日期
   confirmDate: Date // 验收日期
   repairResult: string // 维修结果
+  repairStatus?: string // 维修结果状态
+  faultPhenomenon?: string // 故障现象
+  faultDescription?: string // 故障描述
+  faultImages?: string // 故障图片，逗号分隔
+  downtimeDuration?: string // 停机时长
+  faultReason?: string // 故障原因
+  handlingMeasures?: string // 处理措施
+  replacementParts?: string // 更换配件
+  repairContent?: string // 维修内容
+  repairedImages?: string // 维修后图片，逗号分隔
   acceptedBy: string // 维修人员
   confirmBy: string // 验收人员
+  faultLevel?: string // 故障等级
+  isShutdown?: boolean // 是否停机
   status: string // 单据状态
   remark: string // 备注
 }

src/api/system/menu/index.ts

@@ -37,12 +37,12 @@ export const getMenu = (id: number) => {
 }
 
 // 新增菜单
-export const createMenu = (data: MenuVO) => {
+export const createMenu = (data: Partial<MenuVO>) => {
   return request.post({ url: '/system/menu/create', data })
 }
 
 // 修改菜单
-export const updateMenu = (data: MenuVO) => {
+export const updateMenu = (data: Partial<MenuVO>) => {
   return request.put({ url: '/system/menu/update', data })
 }
 

src/api/system/permission/index.ts

@@ -17,8 +17,11 @@ export interface PermissionAssignRoleDataScopeReqVO {
 }
 
 // 查询角色拥有的菜单权限
-export const getRoleMenuList = async (roleId: number) => {
-  return await request.get({ url: '/system/permission/list-role-menus?roleId=' + roleId })
+export const getRoleMenuList = async (roleId: number, clientType?: number) => {
+  return await request.get({
+    url: '/system/permission/list-role-menus',
+    params: { roleId, clientType }
+  })
 }
 
 // 赋予角色菜单权限

src/components/QrcodeActionCard/index.vue

@@ -39,6 +39,7 @@ import request from '@/config/axios'
 import HiprintPreviewDialog from '@/components/HiprintPreviewDialog/index.vue'
 import { createImageViewer } from '@/components/ImageViewer'
 import { ElLoading } from 'element-plus'
+import { getSimpleDictDataList } from '@/api/system/dict/dict.data'
 
 const { t } = useI18n()
 const message = useMessage()
@@ -66,6 +67,7 @@ const props = withDefaults(
     templateJsonUrl?: string
     templateJson?: any
     printData?: Record<string, any>
+    printTemplateType?: string | number
   }>(),
   {
     imageUrl: '',
@@ -88,7 +90,8 @@ const props = withDefaults(
     printMaxHeight: 120,
     templateJsonUrl: '',
     templateJson: undefined,
-    printData: () => ({})
+    printData: () => ({}),
+    printTemplateType: undefined
   }
 )
 
@@ -99,14 +102,49 @@ const emit = defineEmits<{
 const hiprintPreviewDialogRef = ref()
 const refreshLoading = ref(false)
 
+type TemplateFieldMap = {
+  qrcodeField?: string
+  nameField?: string
+  codeField?: string
+}
+
+let printTemplateDictCache: any[] | undefined
+
 const showActionMask = computed(() => props.showPreview || props.showPrint || props.showRefresh)
 
+const parseTemplateFieldMap = (remark: any): TemplateFieldMap | undefined => {
+  const parts = String(remark || '')
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean)
+  if (!parts.length) return undefined
+  return {
+    qrcodeField: parts[0],
+    nameField: parts[1],
+    codeField: parts[2] || parts[1]
+  }
+}
+
+const getTemplateFieldMap = async (): Promise<TemplateFieldMap | undefined> => {
+  if (props.printTemplateType === undefined || props.printTemplateType === null || props.printTemplateType === '') {
+    return undefined
+  }
+  if (!printTemplateDictCache) {
+    printTemplateDictCache = await getSimpleDictDataList()
+  }
+  const matched = (printTemplateDictCache || []).find(
+    (item: any) => item.dictType === 'print_template_type' && String(item.value) === String(props.printTemplateType)
+  )
+  return parseTemplateFieldMap(matched?.remark)
+}
+
 const buildQrcodeTemplateJson = (
   qrcodeUrl: string,
-  printId: string,
+  printData: Record<string, any>,
   imageWidth: number,
   imageHeight: number,
-  paperHeight: number
+  paperHeight: number,
+  fieldMap?: TemplateFieldMap
 ) => ({
   panels: [
     {
@@ -124,7 +162,7 @@ const buildQrcodeTemplateJson = (
             width: imageWidth,
             height: imageHeight,
             src: qrcodeUrl,
-            field: 'qrcodeUrl',
+            field: fieldMap?.qrcodeField || 'qrcodeUrl',
             title: '二维码图片',
             testData: qrcodeUrl
           },
@@ -133,23 +171,7 @@ const buildQrcodeTemplateJson = (
             type: 'image'
           }
         },
-        {
-          options: {
-            left: 0,
-            top: imageHeight + 2,
-            height: 10,
-            width: imageWidth,
-            testData: printId,
-            title: 'ID',
-            field: 'printId',
-            textAlign: 'center',
-            fontSize: 10
-          },
-          printElementType: {
-            title: '文本',
-            type: 'text'
-          }
-        }
+        ...buildDefaultTextElements(printData, imageWidth, imageHeight, fieldMap)
       ],
       paperNumberDisabled: true,
       paperNumberContinue: true,
@@ -159,6 +181,60 @@ const buildQrcodeTemplateJson = (
   ]
 })
 
+const buildDefaultTextElements = (
+  printData: Record<string, any>,
+  imageWidth: number,
+  imageHeight: number,
+  fieldMap?: TemplateFieldMap
+) => {
+  const fields = [
+    { title: '名称', field: fieldMap?.nameField },
+    { title: '编码', field: fieldMap?.codeField }
+  ].filter((item) => item.field)
+
+  if (!fields.length) {
+    const printId = printData.printId === undefined || printData.printId === null ? '' : String(printData.printId)
+    if (!printId) return []
+    return [
+      {
+        options: {
+          left: 0,
+          top: imageHeight + 2,
+          height: 10,
+          width: imageWidth,
+          testData: printId,
+          title: 'ID',
+          field: 'printId',
+          textAlign: 'center',
+          fontSize: 10
+        },
+        printElementType: {
+          title: '文本',
+          type: 'text'
+        }
+      }
+    ]
+  }
+
+  return fields.map((item, index) => ({
+    options: {
+      left: 0,
+      top: imageHeight + 2 + index * 12,
+      height: 10,
+      width: imageWidth,
+      testData: printData[item.field!] === undefined || printData[item.field!] === null ? '' : String(printData[item.field!]),
+      title: item.title,
+      field: item.field,
+      textAlign: 'center',
+      fontSize: 10
+    },
+    printElementType: {
+      title: '文本',
+      type: 'text'
+    }
+  }))
+}
+
 const getImageSize = (src: string) =>
   new Promise<{ width: number; height: number }>((resolve, reject) => {
     const img = new Image()
@@ -208,33 +284,44 @@ const handlePreview = () => {
   })
 }
 
-const replaceTemplateValues = (templateJson: any, printData: Record<string, any>) => {
+const resolveElementFieldKey = (element: any, fieldMap?: TemplateFieldMap) => {
+  const fieldKey = typeof element?.options?.field === 'string' ? element.options.field.trim() : ''
+  const qidKey = typeof element?.options?.qid === 'string' ? element.options.qid.trim() : ''
+  const title = String(element?.options?.title || element?.printElementType?.title || '').trim()
+
+  if (fieldMap) {
+    if (title.includes('二维码')) return fieldMap.qrcodeField || fieldKey || qidKey
+    if (title.includes('名称')) return fieldMap.nameField || fieldKey || qidKey
+    if (title.includes('编码') || title.includes('条码') || title.includes('文本')) return fieldMap.codeField || fieldKey || qidKey
+  }
+
+  return fieldKey || qidKey
+}
+
+const replaceTemplateValues = (templateJson: any, printData: Record<string, any>, fieldMap?: TemplateFieldMap) => {
   if (!templateJson?.panels) return templateJson
-  
+
   return {
     ...templateJson,
     panels: templateJson.panels.map((panel: any) => ({
       ...panel,
       printElements: panel.printElements?.map((element: any) => {
-        if (!element?.options?.qid) return element
-        
-        const qid = element.options.qid
-        const value = printData[qid]
-        
+        const valueKey = resolveElementFieldKey(element, fieldMap)
+        if (!valueKey) return element
+
+        const value = printData[valueKey]
         if (value === undefined || value === null) return element
-        
+
         const newOptions = { ...element.options }
-        
-        if (qid === 'qrcodeUrl') {
+
+        if (element?.printElementType?.type === 'image') {
           newOptions.src = value
           newOptions.testData = value
         } else {
-          newOptions.field = qid
-          if (newOptions.testData === undefined || newOptions.testData === '') {
-            newOptions.testData = String(value)
-          }
+          newOptions.field = valueKey
+          newOptions.testData = String(value)
         }
-        
+
         return {
           ...element,
           options: newOptions
@@ -249,6 +336,7 @@ const handlePrint = async () => {
   
   let templateJson: any
   let printData: Record<string, any>
+  const templateFieldMap = await getTemplateFieldMap()
   
   printData = {
     qrcodeUrl: props.imageUrl,
@@ -257,12 +345,12 @@ const handlePrint = async () => {
   }
   
   if (props.templateJson) {
-    templateJson = replaceTemplateValues(props.templateJson, printData)
+    templateJson = replaceTemplateValues(props.templateJson, printData, templateFieldMap)
   } else if (props.templateJsonUrl) {
     try {
       const response = await request.get({ url: props.templateJsonUrl })
       templateJson = typeof response.data === 'string' ? JSON.parse(response.data) : response.data
-      templateJson = replaceTemplateValues(templateJson, printData)
+      templateJson = replaceTemplateValues(templateJson, printData, templateFieldMap)
     } catch (error) {
       console.error('获取打印模板失败', error)
       message.error('获取打印模板失败')
@@ -273,10 +361,11 @@ const handlePrint = async () => {
     const imageWidth = printSize.width
     const imageHeight = printSize.height
     const printId = props.printId === undefined || props.printId === null ? '' : String(props.printId)
-    const idAreaHeight = printId ? 14 : 0
-    const paperHeight = imageHeight + idAreaHeight
-    
-    templateJson = buildQrcodeTemplateJson(props.imageUrl, printId, imageWidth, imageHeight, paperHeight)
+    const hasMappedFields = Boolean(templateFieldMap?.nameField || templateFieldMap?.codeField)
+    const textLineCount = hasMappedFields ? [templateFieldMap?.nameField, templateFieldMap?.codeField].filter(Boolean).length : (printId ? 1 : 0)
+    const paperHeight = imageHeight + textLineCount * 12 + (textLineCount ? 4 : 0)
+
+    templateJson = buildQrcodeTemplateJson(props.imageUrl, printData, imageWidth, imageHeight, paperHeight, templateFieldMap)
   }
   
   const paperSize = templateJson?.panels?.[0] ? {

src/components/UploadFile/src/UploadImgs.vue

@@ -119,18 +119,27 @@ interface UploadEmits {
 }
 
 const emit = defineEmits<UploadEmits>()
+const unwrapUploadPayload = (res: any) => {
+  if (!res) return undefined
+  const payload = res.data ?? res
+  if (payload && typeof payload === 'object' && payload.data) {
+    return payload.data
+  }
+  return payload
+}
+
 const getUrlFromRes = (res: any): string => {
   if (!res) return ''
   if (typeof res === 'string') return res
   if (typeof res.data === 'string') return res.data
-  const data = res.data || res
+  const data = unwrapUploadPayload(res)
   if (typeof data === 'string') return data
   if (data.fileUrl) return data.fileUrl
   return ''
 }
 
 const getNameFromRes = (res: any, url: string): string => {
-  const data = res && res.data ? res.data : res
+  const data = unwrapUploadPayload(res)
   if (data && typeof data === 'object' && data.fileName) return data.fileName
   if (!url) return ''
   const idx = url.lastIndexOf('/')

src/locales/en.ts

@@ -1283,6 +1283,7 @@ export default {
       yes: 'Yes',
       no: 'No',
       productionDate: 'Production Date',
+      outgoingTime: 'Outgoing Date',
       factoryEntryDate: 'Factory Entry Date',
       deviceLocation: 'Location',
       deviceManagerName: 'Manager',
@@ -1301,8 +1302,11 @@ export default {
       placeholderDeviceType: 'Please select type',
       placeholderDeviceModel: 'Please input model',
       placeholderDeviceSpec: 'Please input spec',
+      placeholderDeviceBrand: 'Please input device brand',
+      placeholderSn: 'Please input serial number',
       placeholderRatedCapacity: 'Please input rated capacity',
       placeholderProductionDate: 'Please select production date',
+      placeholderOutgoingTime: 'Please select outgoing date',
       placeholderFactoryEntryDate: 'Please select factory entry date',
       placeholderDeviceLocation: 'Please input location',
       placeholderDeviceManagerIds: 'Please select manager',
@@ -1311,6 +1315,7 @@ export default {
       placeholderBeijianIds: 'Please select spare part',
       deviceNo: 'Device No',
       deviceBrand: 'Device Brand',
+      sn: 'Serial Number',
       supplier: 'Supplier',
       workshop: 'Workshop',
       systemOrg: 'System Org',
@@ -1580,10 +1585,21 @@ export default {
       component: 'Key Component',
       acceptedBy: 'Repairer',
       confirmBy: 'Inspector',
+      faultLevel: 'Failure Level',
+      isShutdown: 'Shutdown Required',
       requireDate: 'Request Date',
       finishDate: 'Finish Date',
       confirmDate: 'Accept Date',
       repairResult: 'Repair Result',
+      faultPhenomenon: 'Fault Phenomenon',
+      faultDescription: 'Fault Description',
+      faultImages: 'On-site Images',
+      downtimeDuration: 'Downtime Duration',
+      faultReason: 'Fault Reason',
+      handlingMeasures: 'Handling Measures',
+      replacementParts: 'Replacement Parts',
+      repairContent: 'Repair Content',
+      repairedImages: 'After-repair Images',
       repairStatus: 'Result',
       status: 'Order Status',
       deviceTypeDevice: 'Device',
@@ -1623,7 +1639,17 @@ export default {
       placeholderRequireDate: 'Select request date',
       placeholderFinishDate: 'Select finish date',
       placeholderConfirmDate: 'Select accept date',
+      placeholderRepairResult: 'Please select repair result',
+      placeholderFaultLevel: 'Please select failure level',
       placeholderAutoFill: 'Auto fill',
+      placeholderFaultPhenomenon: 'Please enter fault phenomenon',
+      placeholderFaultDescription: 'Please enter fault description',
+      placeholderDowntimeDuration: 'Please enter downtime duration',
+      placeholderFaultReason: 'Please enter fault reason',
+      placeholderHandlingMeasures: 'Please enter handling measures',
+      placeholderReplacementParts: 'Please enter replacement parts (optional)',
+      placeholderRepairContent: 'Please describe the repair process and result',
+      placeholderRemark: 'Please enter remarks within 300 characters',
       placeholderLineSubjectCode: 'Please input repair code',
       placeholderLineSubjectName: 'Please input repair name',
       placeholderLineSubjectContent: 'Please input repair content',
@@ -1634,9 +1660,13 @@ export default {
       validatorMachineryNameRequired: 'Device name can not be empty',
       validatorMachineryTypeIdRequired: 'Device type can not be empty',
       validatorRequireDateRequired: 'Request date can not be empty',
+      validatorFaultLevelRequired: 'Failure level can not be empty',
+      validatorIsShutdownRequired: 'Shutdown required can not be empty',
       validatorFinishDateRequired: 'Finish date can not be empty',
       validatorConfirmDateRequired: 'Accept date can not be empty',
       validatorRepairResultRequired: 'Repair result can not be empty',
+      validatorFaultPhenomenonRequired: 'Fault phenomenon can not be empty',
+      validatorComponentRequired: 'Component can not be empty',
       validatorLineRepairIdRequired: 'Repair order ID can not be empty',
       validatorLineSubjectIdRequired: 'Item ID can not be empty',
       validatorLineSubjectCodeRequired: 'Item code can not be empty',

src/locales/zh-CN.ts

@@ -1273,6 +1273,7 @@ export default {
       yes: '是',
       no: '否',
       productionDate: '生产日期',
+      outgoingTime: '出厂日期',
       factoryEntryDate: '入厂日期',
       deviceLocation: '位置',
       deviceManagerName: '责任人',
@@ -1291,8 +1292,11 @@ export default {
       placeholderDeviceType: '请选择类型',
       placeholderDeviceModel: '请输入型号',
       placeholderDeviceSpec: '请输入规格型号',
+      placeholderDeviceBrand: '请输入设备品牌',
+      placeholderSn: '请输入序列号',
       placeholderRatedCapacity: '请输入额定产能',
       placeholderProductionDate: '请选择生产日期',
+      placeholderOutgoingTime: '请选择出厂日期',
       placeholderFactoryEntryDate: '请选择入厂日期',
       placeholderDeviceLocation: '请输入位置',
       placeholderDeviceManagerIds: '请选择责任人',
@@ -1301,6 +1305,7 @@ export default {
       placeholderBeijianIds: '请选择备件',
       deviceNo: '设备编号',
       deviceBrand: '设备品牌',
+      sn: '序列号',
       supplier: '供应商',
       workshop: '所属车间',
       systemOrg: '所属系统组织',
@@ -1577,10 +1582,21 @@ export default {
       component: '关键件',
       acceptedBy: '维修人员',
       confirmBy: '验收人员',
+      faultLevel: '故障等级',
+      isShutdown: '是否停机',
       requireDate: '报修日期',
       finishDate: '完成日期',
       confirmDate: '验收日期',
       repairResult: '维修结果',
+      faultPhenomenon: '故障现象',
+      faultDescription: '故障描述',
+      faultImages: '现场图片',
+      downtimeDuration: '停机时长',
+      faultReason: '故障原因',
+      handlingMeasures: '处理措施',
+      replacementParts: '更换配件',
+      repairContent: '维修总结 / 维修内容',
+      repairedImages: '附件 / 维修后图片',
       repairStatus: '结果',
       status: '单据状态',
       deviceTypeDevice: '设备',
@@ -1620,7 +1636,17 @@ export default {
       placeholderRequireDate: '选择报修日期',
       placeholderFinishDate: '选择完成日期',
       placeholderConfirmDate: '选择验收日期',
+      placeholderRepairResult: '请选择维修结果',
+      placeholderFaultLevel: '请选择故障等级',
       placeholderAutoFill: '自动带出',
+      placeholderFaultPhenomenon: '请输入故障现象',
+      placeholderFaultDescription: '请输入故障描述',
+      placeholderDowntimeDuration: '请输入停机时长',
+      placeholderFaultReason: '请输入故障原因',
+      placeholderHandlingMeasures: '请输入处理措施',
+      placeholderReplacementParts: '请输入更换配件（可选）',
+      placeholderRepairContent: '请详细描述维修过程、处理情况及结果',
+      placeholderRemark: '请输入备注信息，限 300 字以内',
       placeholderLineSubjectCode: '请输入维修编码',
       placeholderLineSubjectName: '请输入维修名称',
       placeholderLineSubjectContent: '请输入维修内容',
@@ -1631,9 +1657,13 @@ export default {
       validatorMachineryNameRequired: '设备名称不能为空',
       validatorMachineryTypeIdRequired: '设备类型不能为空',
       validatorRequireDateRequired: '报修日期不能为空',
+      validatorFaultLevelRequired: '故障等级不能为空',
+      validatorIsShutdownRequired: '是否停机不能为空',
       validatorFinishDateRequired: '完成日期不能为空',
       validatorConfirmDateRequired: '验收日期不能为空',
       validatorRepairResultRequired: '维修结果不能为空',
+      validatorFaultPhenomenonRequired: '故障现象不能为空',
+      validatorComponentRequired: '关键件不能为空',
       validatorLineRepairIdRequired: '维修单ID不能为空',
       validatorLineSubjectIdRequired: '项目ID不能为空',
       validatorLineSubjectCodeRequired: '项目编码不能为空',

src/utils/dict.ts

@@ -142,6 +142,7 @@ export enum DICT_TYPE {
 
   // ========== INFRA 模块 ==========
   INFRA_BOOLEAN_STRING = 'infra_boolean_string',
+  FAILURE_LEVEL = 'failure_level',
   INFRA_JOB_STATUS = 'infra_job_status',
   INFRA_JOB_LOG_STATUS = 'infra_job_log_status',
   INFRA_API_ERROR_LOG_PROCESS_STATUS = 'infra_api_error_log_process_status',

src/views/erp/autocode/AutocodeIndex.vue

@@ -1,132 +1,135 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px">
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.searchRuleCodeLabel')" prop="ruleCode">
-        <el-input v-model="queryParams.ruleCode"
-          :placeholder="t('FactoryModeling.AutocodeRule.searchRuleCodePlaceholder')" clearable
-          @keyup.enter="handleQuery" class="!w-240px" />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.searchRuleNameLabel')" prop="ruleName">
-        <el-input v-model="queryParams.ruleName"
-          :placeholder="t('FactoryModeling.AutocodeRule.searchRuleNamePlaceholder')" clearable
-          @keyup.enter="handleQuery" class="!w-240px" />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.searchRuleDescLabel')" prop="ruleDesc">
-        <el-input v-model="queryParams.ruleDesc"
-          :placeholder="t('FactoryModeling.AutocodeRule.searchRuleDescPlaceholder')" clearable
-          @keyup.enter="handleQuery" class="!w-240px" />
-      </el-form-item>
-
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.searchRemarkLabel')" prop="remark" v-show="showAllFilters">
-        <el-input v-model="queryParams.remark" :placeholder="t('FactoryModeling.AutocodeRule.searchRemarkPlaceholder')"
-          clearable @keyup.enter="handleQuery" class="!w-240px" />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.searchIsEnableLabel')" prop="isEnable"
-        v-show="showAllFilters">
-        <el-select v-model="queryParams.isEnable"
-          :placeholder="t('FactoryModeling.AutocodeRule.searchIsEnablePlaceholder')" clearable class="!w-240px">
-          <el-option v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" :key="dict.value"
-            :label="dict.label" :value="dict.value" />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item v-if="filterCount > 3">
-        <el-button type="text" class="text-primary" @click="toggleFilters">
-          <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
-          {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') :
-            t('FactoryModeling.FactoryStructure.expandText') }}
-        </el-button>
-      </el-form-item>
-
-      <el-form-item>
-        <el-button @click="handleQuery">
-          <Icon icon="ep:search" class="mr-5px" /> {{ t('FactoryModeling.AutocodeRule.searchButtonText') }}
-        </el-button>
-        <el-button @click="resetQuery">
-          <Icon icon="ep:refresh" class="mr-5px" /> {{ t('FactoryModeling.AutocodeRule.resetButtonText') }}
-        </el-button>
-        <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['erp:autocode-rule:create']">
-          <Icon icon="ep:plus" class="mr-5px" /> {{ t('FactoryModeling.AutocodeRule.addButtonText') }}
-        </el-button>
-        <el-button type="success" plain @click="handleExport" :loading="exportLoading"
-          v-hasPermi="['erp:autocode-rule:export']">
-          <Icon icon="ep:download" class="mr-5px" /> {{ t('FactoryModeling.AutocodeRule.exportButtonText') }}
-        </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 type="expand">
-        <template #default="scope">
-          <el-tabs model-value="autocodePart">
-            <el-tab-pane :label="t('FactoryModeling.AutocodeRule.listPartTabLabel')" name="autocodePart">
-              <AutocodePartList :rule-id="scope.row.id" />
-            </el-tab-pane>
-          </el-tabs>
-        </template>
-      </el-table-column>
-      <!-- <el-table-column label="ID" align="center" prop="id" /> -->
-      <el-table-column :label="t('FactoryModeling.AutocodeRule.tableRuleCodeColumn')" align="center" prop="ruleCode"
-        width="260px" sortable />
-      <el-table-column :label="t('FactoryModeling.AutocodeRule.tableRuleNameColumn')" align="center" prop="ruleName"
-        width="200px" sortable />
-      <el-table-column :label="t('FactoryModeling.AutocodeRule.tableBarcodeTypeColumn')" align="center">
-        <template #default="scope">
-          <el-tag type="primary">{{ getBarcodeTypeLabel(scope.row.barcodeType) }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('FactoryModeling.AutocodeRule.tableRuleDescColumn')" align="center" prop="ruleDesc" />
-      <el-table-column :label="t('FactoryModeling.AutocodeRule.tableMaxLengthColumn')" align="center"
-        prop="maxLength" />
-      <el-table-column :label="t('FactoryModeling.AutocodeRule.tableIsPaddedColumn')" align="center" prop="isPadded">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.ERP_AUTOCODE_IS_PADDING" :value="scope.row.isPadded" />
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('FactoryModeling.AutocodeRule.tablePaddedCharColumn')" align="center"
-        prop="paddedChar" />
-      <el-table-column :label="t('FactoryModeling.AutocodeRule.tablePaddedMethodColumn')" align="center"
-        prop="paddedMethod">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.ERP_AUTOCODE_PADDING_TYPE" :value="scope.row.paddedMethod" />
-        </template>
-      </el-table-column>
-      <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
-      <el-table-column :label="t('FactoryModeling.AutocodeRule.tableIsEnableColumn')" align="center" prop="isEnable">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isEnable" />
-        </template>
-      </el-table-column>
-
-      <el-table-column :label="t('FactoryModeling.AutocodeRule.tableOperateColumn')" align="center" fixed="right"
-        width="200">
-        <template #default="scope">
-          <el-button link type="primary" @click="openForm('update', scope.row.id)"
-            v-hasPermi="['erp:autocode-rule:update']">
-            {{ t('FactoryModeling.AutocodeRule.tableEditAction') }}
-          </el-button>
-          <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['erp:autocode-rule:delete']">
-            {{ t('FactoryModeling.AutocodeRule.tableDeleteAction') }}
-          </el-button>
-          <el-button link type="primary" @click="handleTestCode(scope.row.ruleCode)"
-            v-hasPermi="['erp:autocode-rule:update']">
-            {{ t('FactoryModeling.AutocodeRule.tableTestCodeAction') }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-      @pagination="getList" />
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <AutocodeRuleForm ref="formRef" @success="getList" />
+  <div class="dv-repair-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
+        <!-- 搜索工作栏 -->
+        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px">
+          <el-form-item :label="t('FactoryModeling.AutocodeRule.searchRuleCodeLabel')" prop="ruleCode">
+            <el-input v-model="queryParams.ruleCode"
+              :placeholder="t('FactoryModeling.AutocodeRule.searchRuleCodePlaceholder')" clearable
+              @keyup.enter="handleQuery" class="!w-240px" />
+          </el-form-item>
+          <el-form-item :label="t('FactoryModeling.AutocodeRule.searchRuleNameLabel')" prop="ruleName">
+            <el-input v-model="queryParams.ruleName"
+              :placeholder="t('FactoryModeling.AutocodeRule.searchRuleNamePlaceholder')" clearable
+              @keyup.enter="handleQuery" class="!w-240px" />
+          </el-form-item>
+          <el-form-item :label="t('FactoryModeling.AutocodeRule.searchRuleDescLabel')" prop="ruleDesc">
+            <el-input v-model="queryParams.ruleDesc"
+              :placeholder="t('FactoryModeling.AutocodeRule.searchRuleDescPlaceholder')" clearable
+              @keyup.enter="handleQuery" class="!w-240px" />
+          </el-form-item>
+
+          <el-form-item :label="t('FactoryModeling.AutocodeRule.searchRemarkLabel')" prop="remark" v-show="showAllFilters">
+            <el-input v-model="queryParams.remark" :placeholder="t('FactoryModeling.AutocodeRule.searchRemarkPlaceholder')"
+              clearable @keyup.enter="handleQuery" class="!w-240px" />
+          </el-form-item>
+          <el-form-item :label="t('FactoryModeling.AutocodeRule.searchIsEnableLabel')" prop="isEnable"
+            v-show="showAllFilters">
+            <el-select v-model="queryParams.isEnable"
+              :placeholder="t('FactoryModeling.AutocodeRule.searchIsEnablePlaceholder')" clearable class="!w-240px">
+              <el-option v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" :key="dict.value"
+                :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item v-if="filterCount > 3">
+            <el-button type="text" class="text-primary" @click="toggleFilters">
+              <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
+              {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') :
+                t('FactoryModeling.FactoryStructure.expandText') }}
+            </el-button>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button @click="handleQuery">
+              <Icon icon="ep:search" class="mr-5px" /> {{ t('FactoryModeling.AutocodeRule.searchButtonText') }}
+            </el-button>
+            <el-button @click="resetQuery">
+              <Icon icon="ep:refresh" class="mr-5px" /> {{ t('FactoryModeling.AutocodeRule.resetButtonText') }}
+            </el-button>
+            <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['erp:autocode-rule:create']">
+              <Icon icon="ep:plus" class="mr-5px" /> {{ t('FactoryModeling.AutocodeRule.addButtonText') }}
+            </el-button>
+            <el-button type="success" plain @click="handleExport" :loading="exportLoading"
+              v-hasPermi="['erp:autocode-rule:export']">
+              <Icon icon="ep:download" class="mr-5px" /> {{ t('FactoryModeling.AutocodeRule.exportButtonText') }}
+            </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 type="expand">
+            <template #default="scope">
+              <el-tabs model-value="autocodePart">
+                <el-tab-pane :label="t('FactoryModeling.AutocodeRule.listPartTabLabel')" name="autocodePart">
+                  <AutocodePartList :rule-id="scope.row.id" />
+                </el-tab-pane>
+              </el-tabs>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="ID" align="center" prop="id" /> -->
+          <el-table-column :label="t('FactoryModeling.AutocodeRule.tableRuleCodeColumn')" align="center" prop="ruleCode"
+            width="260px" sortable />
+          <el-table-column :label="t('FactoryModeling.AutocodeRule.tableRuleNameColumn')" align="center" prop="ruleName"
+            width="200px" sortable />
+          <el-table-column :label="t('FactoryModeling.AutocodeRule.tableBarcodeTypeColumn')" align="center">
+            <template #default="scope">
+              <el-tag type="primary">{{ getBarcodeTypeLabel(scope.row.barcodeType) }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('FactoryModeling.AutocodeRule.tableRuleDescColumn')" align="center" prop="ruleDesc" />
+          <el-table-column :label="t('FactoryModeling.AutocodeRule.tableMaxLengthColumn')" align="center"
+            prop="maxLength" />
+          <el-table-column :label="t('FactoryModeling.AutocodeRule.tableIsPaddedColumn')" align="center" prop="isPadded">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.ERP_AUTOCODE_IS_PADDING" :value="scope.row.isPadded" />
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('FactoryModeling.AutocodeRule.tablePaddedCharColumn')" align="center"
+            prop="paddedChar" />
+          <el-table-column :label="t('FactoryModeling.AutocodeRule.tablePaddedMethodColumn')" align="center"
+            prop="paddedMethod">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.ERP_AUTOCODE_PADDING_TYPE" :value="scope.row.paddedMethod" />
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
+          <el-table-column :label="t('FactoryModeling.AutocodeRule.tableIsEnableColumn')" align="center" prop="isEnable">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isEnable" />
+            </template>
+          </el-table-column>
+
+          <el-table-column :label="t('FactoryModeling.AutocodeRule.tableOperateColumn')" align="center" fixed="right"
+            width="200">
+            <template #default="scope">
+              <el-button link type="primary" @click="openForm('update', scope.row.id)"
+                v-hasPermi="['erp:autocode-rule:update']">
+                {{ t('FactoryModeling.AutocodeRule.tableEditAction') }}
+              </el-button>
+              <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['erp:autocode-rule:delete']">
+                {{ t('FactoryModeling.AutocodeRule.tableDeleteAction') }}
+              </el-button>
+              <el-button link type="primary" @click="handleTestCode(scope.row.ruleCode)"
+                v-hasPermi="['erp:autocode-rule:update']">
+                {{ t('FactoryModeling.AutocodeRule.tableTestCodeAction') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+          @pagination="getList" />
+      </ContentWrap>
+    </template>
+
+    <AutocodeRuleForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -140,12 +143,12 @@ import AutocodePartList from './components/AutocodePartList.vue'
 /** 编码规则 列表 */
 defineOptions({ name: 'AutocodeRule' })
 
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
+const message = useMessage()
+const { t } = useI18n()
 
-const loading = ref(true) // 列表的加载中
-const list = ref<AutocodeRuleVO[]>([]) // 列表的数据
-const total = ref(0) // 列表的总页数
+const loading = ref(true)
+const list = ref<AutocodeRuleVO[]>([])
+const total = ref(0)
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -160,10 +163,11 @@ const queryParams = reactive({
   isEnable: undefined,
   createTime: []
 })
-const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
-const showAllFilters = ref(false) // 是否显示所有筛选框
-const filterCount = 5 // 筛选框数量（ruleCode、ruleName、ruleDesc、remark、isEnable）
+const queryFormRef = ref()
+const exportLoading = ref(false)
+const showAllFilters = ref(false)
+const filterCount = 5
+const formVisible = ref(false)
 
 /** 切换筛选框展开/折叠 */
 const toggleFilters = () => {
@@ -204,38 +208,34 @@ const resetQuery = () => {
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  formVisible.value = true
+  nextTick(() => {
+    formRef.value.open(type, id)
+  })
 }
 
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
-    // 删除的二次确认
     await message.delConfirm()
-    // 发起删除
     await AutocodeRuleApi.deleteAutocodeRule(id)
     message.success(t('common.delSuccess'))
-    // 刷新列表
     await getList()
   } catch { }
 }
+
 /** 测试编码按钮操作 */
 const handleTestCode = async (ruleCode: string) => {
   try {
-
-    // 发起测试
     const data = await AutocodeRuleApi.getTestCode(ruleCode)
     message.success(data)
-
   } catch { }
 }
 
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {
-    // 导出的二次确认
     await message.exportConfirm()
-    // 发起导出
     exportLoading.value = true
     const data = await AutocodeRuleApi.exportAutocodeRule(queryParams)
     download.excel(data, t('FactoryModeling.AutocodeRule.exportFilename'))

src/views/erp/autocode/AutocodeRuleForm.vue

@@ -1,101 +1,109 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1200">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogRuleCodeLabel')" prop="ruleCode">
-        <el-input
-          v-model="formData.ruleCode"
-          :placeholder="t('FactoryModeling.AutocodeRule.dialogRuleCodePlaceholder')"
-          :disabled="formType == 'update'"
-        />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogRuleNameLabel')" prop="ruleName">
-        <el-input
-          v-model="formData.ruleName"
-          :placeholder="t('FactoryModeling.AutocodeRule.dialogRuleNamePlaceholder')"
-        />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogBarcodeTypeLabel')" prop="barcodeType">
-        <el-radio-group v-model="formData.barcodeType">
-          <el-radio :label="1">{{ t('FactoryModeling.AutocodeRule.barcodeTypeBarcodeLabel') }}</el-radio>
-          <el-radio :label="2">{{ t('FactoryModeling.AutocodeRule.barcodeTypeQrcodeLabel') }}</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogRuleDescLabel')" prop="ruleDesc">
-        <el-input
-          v-model="formData.ruleDesc"
-          :placeholder="t('FactoryModeling.AutocodeRule.dialogRuleDescPlaceholder')"
-        />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogMaxLengthLabel')" prop="maxLength">
-        <el-input
-          v-model="formData.maxLength"
-          :placeholder="t('FactoryModeling.AutocodeRule.dialogMaxLengthPlaceholder')"
-        />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogIsPaddedLabel')" prop="isPadded">
-        <el-radio-group v-model="formData.isPadded">
-          <el-radio
-            v-for="dict in getStrDictOptions(DICT_TYPE.ERP_AUTOCODE_IS_PADDING)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogPaddedCharLabel')" prop="paddedChar">
-        <el-input
-          v-model="formData.paddedChar"
-          :placeholder="t('FactoryModeling.AutocodeRule.dialogPaddedCharPlaceholder')"
-        />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogPaddedMethodLabel')" prop="paddedMethod">
-        <el-radio-group v-model="formData.paddedMethod">
-          <el-radio
-            v-for="dict in getStrDictOptions(DICT_TYPE.ERP_AUTOCODE_PADDING_TYPE)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogRemarkLabel')" prop="remark">
-        <el-input
-          v-model="formData.remark"
-          :placeholder="t('FactoryModeling.AutocodeRule.dialogRemarkPlaceholder')"
-          type="textarea"
-        />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogIsEnableLabel')" prop="isEnable">
-        <el-radio-group v-model="formData.isEnable">
-          <el-radio
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-    </el-form>
-    <!-- 子表的表单 -->
-    <el-tabs v-model="subTabsName">
-      <el-tab-pane :label="t('FactoryModeling.AutocodeRule.dialogPartTabLabel')" name="autocodePart">
-        <AutocodePartForm ref="autocodePartFormRef" :rule-id="formData.id" />
-      </el-tab-pane>
-    </el-tabs>
-    <template #footer>
+  <div class="dv-repair-panel">
+    <div class="dv-repair-panel__header">
+      <div class="dv-repair-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="dv-repair-dialog" v-loading="formLoading">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogRuleCodeLabel')" prop="ruleCode">
+          <el-input
+            v-model="formData.ruleCode"
+            :placeholder="t('FactoryModeling.AutocodeRule.dialogRuleCodePlaceholder')"
+            :disabled="formType == 'update'"
+          />
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogRuleNameLabel')" prop="ruleName">
+          <el-input
+            v-model="formData.ruleName"
+            :placeholder="t('FactoryModeling.AutocodeRule.dialogRuleNamePlaceholder')"
+          />
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogBarcodeTypeLabel')" prop="barcodeType">
+          <el-radio-group v-model="formData.barcodeType">
+            <el-radio :label="1">{{ t('FactoryModeling.AutocodeRule.barcodeTypeBarcodeLabel') }}</el-radio>
+            <el-radio :label="2">{{ t('FactoryModeling.AutocodeRule.barcodeTypeQrcodeLabel') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogRuleDescLabel')" prop="ruleDesc">
+          <el-input
+            v-model="formData.ruleDesc"
+            :placeholder="t('FactoryModeling.AutocodeRule.dialogRuleDescPlaceholder')"
+          />
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogMaxLengthLabel')" prop="maxLength">
+          <el-input
+            v-model="formData.maxLength"
+            :placeholder="t('FactoryModeling.AutocodeRule.dialogMaxLengthPlaceholder')"
+          />
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogIsPaddedLabel')" prop="isPadded">
+          <el-radio-group v-model="formData.isPadded">
+            <el-radio
+              v-for="dict in getStrDictOptions(DICT_TYPE.ERP_AUTOCODE_IS_PADDING)"
+              :key="dict.value"
+              :label="dict.value"
+            >
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogPaddedCharLabel')" prop="paddedChar">
+          <el-input
+            v-model="formData.paddedChar"
+            :placeholder="t('FactoryModeling.AutocodeRule.dialogPaddedCharPlaceholder')"
+          />
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogPaddedMethodLabel')" prop="paddedMethod">
+          <el-radio-group v-model="formData.paddedMethod">
+            <el-radio
+              v-for="dict in getStrDictOptions(DICT_TYPE.ERP_AUTOCODE_PADDING_TYPE)"
+              :key="dict.value"
+              :label="dict.value"
+            >
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogRemarkLabel')" prop="remark">
+          <el-input
+            v-model="formData.remark"
+            :placeholder="t('FactoryModeling.AutocodeRule.dialogRemarkPlaceholder')"
+            type="textarea"
+          />
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.AutocodeRule.dialogIsEnableLabel')" prop="isEnable">
+          <el-radio-group v-model="formData.isEnable">
+            <el-radio
+              v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+              :key="dict.value"
+              :label="dict.value"
+            >
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <!-- 子表的表单 -->
+      <el-tabs v-model="subTabsName">
+        <el-tab-pane :label="t('FactoryModeling.AutocodeRule.dialogPartTabLabel')" name="autocodePart">
+          <AutocodePartForm ref="autocodePartFormRef" :rule-id="formData.id" />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <div class="dv-repair-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
@@ -105,13 +113,12 @@ import AutocodePartForm from './components/AutocodePartForm.vue'
 /** 编码规则 表单 */
 defineOptions({ name: 'AutocodeRuleForm' })
 
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
+const { t } = useI18n()
+const message = useMessage()
 
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
 const formData = ref({
   id: undefined,
   ruleCode: undefined,
@@ -130,19 +137,20 @@ const formRules = reactive({
     { required: true, message: t('FactoryModeling.AutocodeRule.validatorIsEnableRequired'), trigger: 'blur' }
   ]
 })
-const formRef = ref() // 表单 Ref
+const formRef = ref()
 
 /** 子表的表单 */
 const subTabsName = ref('autocodePart')
 const autocodePartFormRef = ref()
 
+let openRequestId = 0
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
+  const currentOpenId = ++openRequestId
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
-  // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
@@ -157,21 +165,29 @@ const open = async (type: string, id?: number) => {
     }
   }
 }
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+defineExpose({ open })
+
+const emit = defineEmits(['success', 'closed'])
+
+const closeForm = () => {
+  openRequestId++
+  emit('closed')
+}
+
+onBeforeUnmount(() => {
+  openRequestId++
+})
 
 /** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
-  // 校验表单
   await formRef.value.validate()
-  // 校验子表单
   try {
     await autocodePartFormRef.value.validate()
   } catch (e) {
     subTabsName.value = 'autocodePart'
     return
   }
-  // 提交请求
   formLoading.value = true
   try {
     const barcodeType = Number(formData.value.barcodeType) === 2 ? 2 : 1
@@ -180,7 +196,6 @@ const submitForm = async () => {
       barcodeType,
       barCodeType: barcodeType
     } as unknown as AutocodeRuleVO
-    // 拼接子表的数据
     data.autocodeParts = autocodePartFormRef.value.getData()
     if (formType.value === 'create') {
       await AutocodeRuleApi.createAutocodeRule(data)
@@ -189,9 +204,8 @@ const submitForm = async () => {
       await AutocodeRuleApi.updateAutocodeRule(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
-    // 发送操作成功的事件
     emit('success')
+    closeForm()
   } finally {
     formLoading.value = false
   }
@@ -215,3 +229,58 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.dv-repair-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.dv-repair-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.dv-repair-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.dv-repair-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.dv-repair-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 768px) {
+  .dv-repair-panel__header {
+    padding: 14px 16px;
+  }
+
+  .dv-repair-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .dv-repair-footer {
+    padding: 16px;
+  }
+}
+</style>

src/views/erp/component/in/StockInForm.vue

@@ -1,100 +1,108 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1080">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-      v-loading="formLoading"
-      :disabled="disabled"
-    >
-      <el-row :gutter="20">
-        <el-col :span="8">
-          <el-form-item :label="t('SparePartsManagement.SpareIn.no')" prop="no">
-            <el-input disabled v-model="formData.no" :placeholder="t('SparePartsManagement.SpareIn.placeholderNoAuto')" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('SparePartsManagement.SpareIn.inType')" prop="inType">
-            <el-select
-              disabled
-              v-model="formData.inType"
-              clearable
-              filterable
-              :placeholder="t('SparePartsManagement.SpareIn.placeholderInType')"
-              class="!w-1/1"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-                :disabled="item.disabled"
+  <div class="stock-in-panel">
+    <div class="stock-in-panel__header">
+      <div class="stock-in-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="stock-in-dialog" v-loading="formLoading">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="110px"
+        :disabled="disabled"
+      >
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="t('SparePartsManagement.SpareIn.no')" prop="no">
+              <el-input disabled v-model="formData.no" :placeholder="t('SparePartsManagement.SpareIn.placeholderNoAuto')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('SparePartsManagement.SpareIn.inType')" prop="inType">
+              <el-select
+                disabled
+                v-model="formData.inType"
+                clearable
+                filterable
+                :placeholder="t('SparePartsManagement.SpareIn.placeholderInType')"
+                class="!w-1/1"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                  :disabled="item.disabled"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('SparePartsManagement.SpareIn.inTime')" prop="inTime">
+              <el-date-picker
+                v-model="formData.inTime"
+                type="date"
+                value-format="x"
+                :placeholder="t('SparePartsManagement.SpareIn.placeholderInTime')"
+                class="!w-1/1"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('SparePartsManagement.SpareIn.inTime')" prop="inTime">
-            <el-date-picker
-              v-model="formData.inTime"
-              type="date"
-              value-format="x"
-              :placeholder="t('SparePartsManagement.SpareIn.placeholderInTime')"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('SparePartsManagement.SpareIn.supplier')" prop="supplierId">
-            <el-select
-              v-model="formData.supplierId"
-              clearable
-              filterable
-              :placeholder="t('SparePartsManagement.SpareIn.placeholderSupplier')"
-              class="!w-1/1"
-            >
-              <el-option
-                v-for="item in supplierList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('SparePartsManagement.SpareIn.supplier')" prop="supplierId">
+              <el-select
+                v-model="formData.supplierId"
+                clearable
+                filterable
+                :placeholder="t('SparePartsManagement.SpareIn.placeholderSupplier')"
+                class="!w-1/1"
+              >
+                <el-option
+                  v-for="item in supplierList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('SparePartsManagement.SpareIn.remark')" prop="remark">
+              <el-input
+                type="textarea"
+                v-model="formData.remark"
+                :rows="1"
+                :placeholder="t('SparePartsManagement.SpareIn.placeholderRemark')"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('SparePartsManagement.SpareIn.remark')" prop="remark">
-            <el-input
-              type="textarea"
-              v-model="formData.remark"
-              :rows="1"
-              :placeholder="t('SparePartsManagement.SpareIn.placeholderRemark')"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('SparePartsManagement.SpareIn.file')" prop="fileUrl">
-            <UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <!-- 子表的表单 -->
-    <ContentWrap>
-      <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
-        <el-tab-pane :label="t('SparePartsManagement.SpareIn.itemListTitle')" name="item">
-          <StockInItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
-        </el-tab-pane>
-      </el-tabs>
-    </ContentWrap>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('SparePartsManagement.SpareIn.file')" prop="fileUrl">
+              <UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <!-- 子表的表单 -->
+      <ContentWrap>
+        <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
+          <el-tab-pane :label="t('SparePartsManagement.SpareIn.itemListTitle')" name="item">
+            <StockInItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
+          </el-tab-pane>
+        </el-tabs>
+      </ContentWrap>
+    </div>
+
+    <div class="stock-in-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
+      <el-button v-if="!disabled" @click="submitForm" type="primary" :disabled="formLoading">
         {{ t('common.ok') }}
       </el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { StockInApi, StockInVO } from '@/api/erp/stock/in'
@@ -107,7 +115,6 @@ defineOptions({ name: 'StockInForm' })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
-const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
@@ -158,7 +165,6 @@ const itemFormRef = ref()
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -177,8 +183,12 @@ const open = async (type: string, id?: number) => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
+const closeForm = () => {
+  emit('closed')
+}
+
 /** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const emit = defineEmits(['success', 'closed']) // 定义 success 和 closed 事件
 const submitForm = async () => {
   // 校验表单
   await formRef.value.validate()
@@ -194,9 +204,9 @@ const submitForm = async () => {
       await StockInApi.updateStockIn(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
     // 发送操作成功的事件
     emit('success')
+    closeForm()
   } finally {
     formLoading.value = false
   }
@@ -215,3 +225,57 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.stock-in-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.stock-in-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.stock-in-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.stock-in-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.stock-in-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 768px) {
+  .stock-in-panel__header {
+    padding: 14px 16px;
+  }
+
+  .stock-in-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .stock-in-footer {
+    padding: 16px;
+  }
+}
+</style>

src/views/erp/component/in/index.vue

@@ -1,6 +1,7 @@
 <template>
-
-  <ContentWrap>
+  <div class="stock-in-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
       class="-mb-15px"
@@ -217,10 +218,11 @@
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
-  </ContentWrap>
+    </ContentWrap>
+    </template>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <StockInForm ref="formRef" @success="getList" />
+    <StockInForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -296,8 +298,12 @@ const resetQuery = () => {
 
 /** 添加/修改操作 */
 const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+const formVisible = ref(false)
+
+const openForm = async (type: string, id?: number) => {
+  formVisible.value = true
+  await nextTick()
+  formRef.value?.open(type, id)
 }
 
 /** 删除按钮操作 */

src/views/erp/component/out/StockOutForm.vue

@@ -1,84 +1,92 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1080">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-      :disabled="disabled"
-    >
-      <el-row :gutter="20">
-        <el-col :span="8">
-          <el-form-item :label="t('SparePartsManagement.SpareOut.no')" prop="no">
-            <el-input
-              disabled
-              v-model="formData.no"
-              :placeholder="t('SparePartsManagement.SpareOut.placeholderNoAuto')"
-            />
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="8">
-          <el-form-item :label="t('SparePartsManagement.SpareOut.outTime')" prop="outTime">
-            <el-date-picker
-              v-model="formData.outTime"
-              type="date"
-              value-format="x"
-              :placeholder="t('SparePartsManagement.SpareOut.placeholderOutTime')"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('SparePartsManagement.SpareOut.outType')" prop="outType">
-            <el-select
-              disabled
-              v-model="formData.outType"
-              clearable
-              filterable
-              :placeholder="t('SparePartsManagement.SpareOut.placeholderOutType')"
-              class="!w-1/1"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-                :disabled="item.disabled"
+  <div class="stock-out-panel">
+    <div class="stock-out-panel__header">
+      <div class="stock-out-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="stock-out-dialog" v-loading="formLoading">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+        :disabled="disabled"
+      >
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="t('SparePartsManagement.SpareOut.no')" prop="no">
+              <el-input
+                disabled
+                v-model="formData.no"
+                :placeholder="t('SparePartsManagement.SpareOut.placeholderNoAuto')"
+              />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item :label="t('SparePartsManagement.SpareOut.outTime')" prop="outTime">
+              <el-date-picker
+                v-model="formData.outTime"
+                type="date"
+                value-format="x"
+                :placeholder="t('SparePartsManagement.SpareOut.placeholderOutTime')"
+                class="!w-1/1"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-
-
-        <el-col :span="8">
-          <el-form-item :label="t('SparePartsManagement.SpareOut.remark')" prop="remark">
-            <el-input
-              type="textarea"
-              v-model="formData.remark"
-              :rows="1"
-              :placeholder="t('SparePartsManagement.SpareOut.placeholderRemark')"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <!-- 子表的表单 -->
-    <ContentWrap>
-      <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
-        <el-tab-pane :label="t('SparePartsManagement.SpareOut.itemListTitle')" name="item">
-          <StockOutItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
-        </el-tab-pane>
-      </el-tabs>
-    </ContentWrap>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">
-        {{ t('action.save') }}
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('SparePartsManagement.SpareOut.outType')" prop="outType">
+              <el-select
+                disabled
+                v-model="formData.outType"
+                clearable
+                filterable
+                :placeholder="t('SparePartsManagement.SpareOut.placeholderOutType')"
+                class="!w-1/1"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                  :disabled="item.disabled"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+
+          <el-col :span="8">
+            <el-form-item :label="t('SparePartsManagement.SpareOut.remark')" prop="remark">
+              <el-input
+                type="textarea"
+                v-model="formData.remark"
+                :rows="1"
+                :placeholder="t('SparePartsManagement.SpareOut.placeholderRemark')"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <!-- 子表的表单 -->
+      <ContentWrap>
+        <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
+          <el-tab-pane :label="t('SparePartsManagement.SpareOut.itemListTitle')" name="item">
+            <StockOutItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
+          </el-tab-pane>
+        </el-tabs>
+      </ContentWrap>
+    </div>
+
+    <div class="stock-out-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
+      <el-button v-if="!disabled" @click="submitForm" type="primary" :disabled="formLoading">
+        {{ t('common.ok') }}
       </el-button>
-      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { StockOutApi, StockOutVO } from '@/api/erp/stock/out'
@@ -92,7 +100,6 @@ defineOptions({ name: 'StockOutForm' })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
-const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
@@ -146,7 +153,6 @@ const itemFormRef = ref()
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -163,8 +169,12 @@ const open = async (type: string, id?: number) => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
+const closeForm = () => {
+  emit('closed')
+}
+
 /** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const emit = defineEmits(['success', 'closed']) // 定义 success 和 closed 事件
 const submitForm = async () => {
   // 校验表单
   await formRef.value.validate()
@@ -180,9 +190,9 @@ const submitForm = async () => {
       await StockOutApi.updateStockOut(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
     // 发送操作成功的事件
     emit('success')
+    closeForm()
   } finally {
     formLoading.value = false
   }
@@ -201,3 +211,57 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.stock-out-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.stock-out-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.stock-out-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.stock-out-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.stock-out-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 768px) {
+  .stock-out-panel__header {
+    padding: 14px 16px;
+  }
+
+  .stock-out-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .stock-out-footer {
+    padding: 16px;
+  }
+}
+</style>

src/views/erp/component/out/index.vue

@@ -1,6 +1,7 @@
 <template>
-
-  <ContentWrap>
+  <div class="stock-out-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
       class="-mb-15px"
@@ -211,9 +212,10 @@
       @pagination="getList"
     />
   </ContentWrap>
+    </template>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <StockOutForm ref="formRef" @success="getList" />
+    <StockOutForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -289,8 +291,12 @@ const resetQuery = () => {
 
 /** 添加/修改操作 */
 const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+const formVisible = ref(false)
+
+const openForm = async (type: string, id?: number) => {
+  formVisible.value = true
+  await nextTick()
+  formRef.value?.open(type, id)
 }
 
 /** 删除按钮操作 */

src/views/erp/component/product/ProductForm.vue

@@ -109,6 +109,7 @@
             <QrcodeActionCard
               :image-url="formData.qrcodeUrl"
               :print-id="formData.id"
+              :print-template-type="5"
               :print-title="`${formData.name || '备件'}码打印预览`"
               :print-paper-width="80"
               :print-paper-height="80"

src/views/erp/mold/components/MoldForm.vue

@@ -88,6 +88,7 @@
         <QrcodeActionCard
           :image-url="formData.qrcodeUrl"
           :print-id="formData.id"
+          :print-template-type="4"
           :print-title="`${formData.name || '模具'}码打印预览`"
           :print-paper-width="80"
           :print-paper-height="80"

src/views/erp/product/product/ProductForm.vue

@@ -1,186 +1,148 @@
-<!-- ERP 产品的新增/修改 -->
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="120px"
-      v-loading="formLoading"
-    >
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.dialogBarCodeLabel')" prop="barCode">
-            <el-row :gutter="10" style="width: 100%">
-              <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="20">
-                <el-input
-                  v-model="formData.barCode"
-                  :placeholder="t('FactoryModeling.ProductInformation.dialogBarCodePlaceholder')"
-                  :disabled="Boolean(formData.isCode) || formType === 'update'"
-                />
-              </el-col>
-              <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
-                <div>
-                  <el-switch
-                    v-model="formData.isCode"
-                    :disabled="formType === 'update'"
-                    @change="handleCodeAutoChange"
+  <div class="dv-repair-panel">
+    <div class="dv-repair-panel__header">
+      <div class="dv-repair-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="dv-repair-dialog" v-loading="formLoading">
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogBarCodeLabel')" prop="barCode">
+              <el-row :gutter="10" style="width: 100%">
+                <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="20">
+                  <el-input
+                    v-model="formData.barCode"
+                    :placeholder="t('FactoryModeling.ProductInformation.dialogBarCodePlaceholder')"
+                    :disabled="Boolean(formData.isCode) || formType === 'update'"
                   />
-                </div>
-              </el-col>
-            </el-row>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.dialogNameLabel')" prop="name">
-            <el-input v-model="formData.name" :placeholder="t('FactoryModeling.ProductInformation.dialogNamePlaceholder')" />
-          </el-form-item>
-        </el-col>       
-        <el-col :span="12">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.dialogCategoryLabel')" prop="categoryId">
-            <el-tree-select
-              v-model="formData.categoryId"
-              :data="categoryList"
-              :props="defaultProps"
-              check-strictly
-              default-expand-all
-              :placeholder="t('FactoryModeling.ProductInformation.dialogCategoryPlaceholder')"
-              class="w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.dialogUnitLabel')" prop="unitId">
-            <el-select v-model="formData.unitId" clearable :placeholder="t('FactoryModeling.ProductInformation.dialogUnitPlaceholder')" class="w-1/1">
-              <el-option
-                v-for="unit in unitList"
-                :key="unit.id"
-                :label="unit.name"
-                :value="unit.id"
+                </el-col>
+                <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
+                  <div>
+                    <el-switch
+                      v-model="formData.isCode"
+                      :disabled="formType === 'update'"
+                      @change="handleCodeAutoChange"
+                    />
+                  </div>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogNameLabel')" prop="name">
+              <el-input v-model="formData.name" :placeholder="t('FactoryModeling.ProductInformation.dialogNamePlaceholder')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogCategoryLabel')" prop="categoryId">
+              <el-tree-select
+                v-model="formData.categoryId"
+                :data="categoryList"
+                :props="defaultProps"
+                check-strictly
+                default-expand-all
+                :placeholder="t('FactoryModeling.ProductInformation.dialogCategoryPlaceholder')"
+                class="w-1/1"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.dialogStandardLabel')" prop="standard">
-            <el-input v-model="formData.standard" :placeholder="t('FactoryModeling.ProductInformation.dialogStandardPlaceholder')" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.dialogExpiryDayLabel')" prop="expiryDay">
-            <el-input-number
-              v-model="formData.expiryDay"
-              :placeholder="t('FactoryModeling.ProductInformation.dialogExpiryDayPlaceholder')"
-              :min="0"
-              :precision="0"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <!-- <el-col :span="12">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.dialogWeightLabel')" prop="weight">
-            <el-input-number
-              v-model="formData.weight"
-              :placeholder="t('FactoryModeling.ProductInformation.dialogWeightPlaceholder')"
-              :min="0"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col> -->
-        <!-- <el-col :span="12">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.dialogPurchasePriceLabel')" prop="purchasePrice">
-            <el-input-number
-              v-model="formData.purchasePrice"
-              :placeholder="t('FactoryModeling.ProductInformation.dialogPurchasePricePlaceholder')"
-              :min="0"
-              :precision="2"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.dialogSalePriceLabel')" prop="salePrice">
-            <el-input-number
-              v-model="formData.salePrice"
-              :placeholder="t('FactoryModeling.ProductInformation.dialogSalePricePlaceholder')"
-              :min="0"
-              :precision="2"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.dialogMinPriceLabel')" prop="minPrice">
-            <el-input-number
-              v-model="formData.minPrice"
-              :placeholder="t('FactoryModeling.ProductInformation.dialogMinPricePlaceholder')"
-              :min="0"
-              :precision="2"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col> -->
-        <el-col v-if="isProductCategory" :span="12">
-          <el-form-item label="关联设备" prop="devices">
-            <el-input
-              :model-value="deviceDisplayText"
-              placeholder="点击选择设备"
-              readonly
-              @click="openDeviceSelectDialog"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col v-if="isProductCategory" :span="12">
-          <el-form-item label="关联模具" prop="molds">
-            <el-input
-              :model-value="moldDisplayText"
-              placeholder="点击选择模具"
-              readonly
-              @click="openMoldSelectDialog"
-            />
-          </el-form-item>
-        </el-col>
-         <el-col :span="12">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.dialogStatusLabel')" prop="status">
-            <el-radio-group v-model="formData.status">
-              <el-radio
-                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
-                :key="dict.value"
-                :label="dict.value"
-              >
-                {{ dict.label }}
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <el-col v-if="formType === 'update'" :span="24">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.qrcode')" prop="qrcodeUrl">
-            <QrcodeActionCard
-              :image-url="formData.qrcodeUrl"
-              :print-id="formData.id"
-              :print-title="`${formData.name || '产品'}二维码打印预览`"
-              :empty-text="t('FactoryModeling.ProductInformation.qrcodeEmpty')"
-              :refresh-url="getQrcodeRefreshUrl()"
-              :refresh-disabled="!formData.id || !formData.barCode"
-              refresh-confirm-text="确认刷新该产品二维码吗？"
-              :template-json="formData.templateJson"
-              :print-data="buildPrintData()"
-              @refresh-success="handleQrcodeRefreshSuccess"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item :label="t('FactoryModeling.ProductInformation.dialogRemarkLabel')" prop="remark">
-            <el-input type="textarea" v-model="formData.remark" :placeholder="t('FactoryModeling.ProductInformation.dialogRemarkPlaceholder')" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogUnitLabel')" prop="unitId">
+              <el-select v-model="formData.unitId" clearable :placeholder="t('FactoryModeling.ProductInformation.dialogUnitPlaceholder')" class="w-1/1">
+                <el-option
+                  v-for="unit in unitList"
+                  :key="unit.id"
+                  :label="unit.name"
+                  :value="unit.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogStandardLabel')" prop="standard">
+              <el-input v-model="formData.standard" :placeholder="t('FactoryModeling.ProductInformation.dialogStandardPlaceholder')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogExpiryDayLabel')" prop="expiryDay">
+              <el-input-number
+                v-model="formData.expiryDay"
+                :placeholder="t('FactoryModeling.ProductInformation.dialogExpiryDayPlaceholder')"
+                :min="0"
+                :precision="0"
+                class="!w-1/1"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col v-if="isProductCategory" :span="12">
+            <el-form-item label="关联设备" prop="devices">
+              <el-input
+                :model-value="deviceDisplayText"
+                placeholder="点击选择设备"
+                readonly
+                @click="openDeviceSelectDialog"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col v-if="isProductCategory" :span="12">
+            <el-form-item label="关联模具" prop="molds">
+              <el-input
+                :model-value="moldDisplayText"
+                placeholder="点击选择模具"
+                readonly
+                @click="openMoldSelectDialog"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogStatusLabel')" prop="status">
+              <el-radio-group v-model="formData.status">
+                <el-radio
+                  v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                  :key="dict.value"
+                  :label="dict.value"
+                >
+                  {{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col v-if="formType === 'update'" :span="24">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.qrcode')" prop="qrcodeUrl">
+              <QrcodeActionCard
+                :image-url="formData.qrcodeUrl"
+                :print-id="formData.id"
+                :print-template-type="1"
+                :print-title="`${formData.name || '产品'}二维码打印预览`"
+                :empty-text="t('FactoryModeling.ProductInformation.qrcodeEmpty')"
+                :refresh-url="getQrcodeRefreshUrl()"
+                :refresh-disabled="!formData.id || !formData.barCode"
+                refresh-confirm-text="确认刷新该产品二维码吗？"
+                :template-json="formData.templateJson"
+                :print-data="buildPrintData()"
+                @refresh-success="handleQrcodeRefreshSuccess"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item :label="t('FactoryModeling.ProductInformation.dialogRemarkLabel')" prop="remark">
+              <el-input type="textarea" v-model="formData.remark" :placeholder="t('FactoryModeling.ProductInformation.dialogRemarkPlaceholder')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+    <div class="dv-repair-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
+      <el-button v-if="formType !== 'detail'" @click="submitForm" type="primary" :disabled="formLoading">
+        {{ t('common.ok') }}
+      </el-button>
+    </div>
+  </div>
   <TableSelectDialog
     ref="deviceSelectDialogRef"
     title="选择设备"
@@ -190,9 +152,8 @@
     @confirm="handleDeviceSelectConfirm"
     :query-params="mergedQueryParams"
   >
-    <!-- 使用 header 插槽插入查询表单 -->
     <template #header>
-      <el-form ref="searchFormRef" :model="searchParams" :inline="true" >
+      <el-form ref="searchFormRef" :model="searchParams" :inline="true">
         <el-form-item label="设备编号" prop="deviceCode">
           <el-input v-model="searchParams.deviceCode" placeholder="请输入编号" clearable />
         </el-form-item>
@@ -215,9 +176,8 @@
     @confirm="handleMoldSelectConfirm"
     :query-params="mergedMoldQueryParams"
   >
-    <!-- 使用 header 插槽插入查询表单 -->
     <template #header>
-      <el-form ref="searchMoldFormRef" :model="searchMoldParams" :inline="true" >
+      <el-form ref="searchMoldFormRef" :model="searchMoldParams" :inline="true">
         <el-form-item label="模具编号" prop="code">
           <el-input v-model="searchMoldParams.code" placeholder="请输入编号" clearable />
         </el-form-item>
@@ -247,24 +207,21 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 /** ERP 产品 表单 */
 defineOptions({ name: 'ProductForm' })
 
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
+const { t } = useI18n()
+const message = useMessage()
 
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
 const deviceSelectDialogRef = ref()
 const moldSelectDialogRef = ref()
 const searchFormRef = ref()
-// 1. 自定义表单的查询参数
 const searchParams = reactive({
   deviceCode: undefined,
   deviceName: undefined,
 })
 
 const handleSearch = () => {
-  // 触发弹窗内部重新加载数据
   deviceSelectDialogRef.value?.reload?.()
 }
 
@@ -273,23 +230,20 @@ const resetSearch = () => {
   handleSearch()
 }
 
-// 1. 自定义表单的查询参数
 const searchMoldParams = reactive({
   code: undefined,
   name: undefined,
 })
 const searchMoldFormRef = ref()
 const handleMoldSearch = () => {
-  // 触发弹窗内部重新加载数据
   moldSelectDialogRef.value?.reload?.()
 }
 
 const resetMoldSearch = () => {
   searchMoldFormRef.value?.resetFields()
-  handleSearch()
+  handleMoldSearch()
 }
 
-// 2. 合并参数：将表单参数与组件内部的分页参数合并
 const mergedQueryParams = computed(() => ({ ...searchParams }))
 const mergedMoldQueryParams = computed(() => ({ ...searchMoldParams }))
 const formData = ref({
@@ -484,20 +438,20 @@ const formRules = reactive({
   unitId: [{ required: true, message: t('FactoryModeling.ProductInformation.validatorUnitRequired'), trigger: 'blur' }],
   status: [{ required: true, message: t('FactoryModeling.ProductInformation.validatorStatusRequired'), trigger: 'blur' }]
 })
-const formRef = ref() // 表单 Ref
-const categoryList = ref<ProductCategoryVO[]>([]) // 产品分类列表
-const unitList = ref<ProductUnitVO[]>([]) // 产品单位列表
+const formRef = ref()
+const categoryList = ref<ProductCategoryVO[]>([])
+const unitList = ref<ProductUnitVO[]>([])
+
+let openRequestId = 0
 
-/** 打开弹窗 */
 const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
+  const currentOpenId = ++openRequestId
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
   const categoryData = await ProductCategoryApi.getProductCategorySimpleList()
   categoryList.value = handleTree(categoryData, 'id', 'parentId')
   unitList.value = await ProductUnitApi.getProductUnitSimpleList()
-  // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
@@ -532,7 +486,19 @@ const open = async (type: string, id?: number) => {
     }
   }
 }
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+defineExpose({ open })
+
+const emit = defineEmits(['success', 'closed'])
+
+const closeForm = () => {
+  openRequestId++
+  emit('closed')
+}
+
+onBeforeUnmount(() => {
+  openRequestId++
+})
 
 const handleCodeAutoChange = (value: boolean) => {
   if (value) {
@@ -572,12 +538,8 @@ const buildRelationIdListString = (list: { id: number; name: string }[]) => {
   return list.map((item) => Number(item.id)).filter((id) => Number.isFinite(id))
 }
 
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
-  // 校验表单
   await formRef.value.validate()
-  // 提交请求
   formLoading.value = true
   try {
     const relationDevices = isProductCategory.value ? formData.value.devices : []
@@ -596,15 +558,13 @@ const submitForm = async () => {
       await ProductApi.updateProduct(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
-    // 发送操作成功的事件
     emit('success')
+    closeForm()
   } finally {
     formLoading.value = false
   }
 }
 
-/** 重置表单 */
 const resetForm = () => {
   formData.value = {
     id: undefined,
@@ -642,4 +602,58 @@ watch(
   }
 )
 </script>
-<style scoped lang="scss"></style>
+
+<style lang="scss" scoped>
+.dv-repair-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.dv-repair-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.dv-repair-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.dv-repair-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.dv-repair-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 768px) {
+  .dv-repair-panel__header {
+    padding: 14px 16px;
+  }
+
+  .dv-repair-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .dv-repair-footer {
+    padding: 16px;
+  }
+}
+</style>

src/views/erp/product/product/index.vue

@@ -1,97 +1,79 @@
 <!-- ERP 产品列表 -->
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto" @submit.prevent>
-      <el-form-item :label="t('FactoryModeling.ProductInformation.searchCodeLabel')" prop="barCode">
-        <el-input v-model="queryParams.barCode"
-          :placeholder="t('FactoryModeling.ProductInformation.searchCodePlaceholder')" clearable
-          @keyup.enter="handleQuery" class="!w-240px" />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.ProductInformation.searchNameLabel')" prop="name">
-        <el-input v-model="queryParams.name"
-          :placeholder="t('FactoryModeling.ProductInformation.searchNamePlaceholder')" clearable
-          @keyup.enter="handleQuery" class="!w-240px" />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery">
-          <Icon icon="ep:search" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.searchButtonText') }}
-        </el-button>
-        <el-button @click="resetQuery">
-          <Icon icon="ep:refresh" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.resetButtonText') }}
-        </el-button>
-        <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['erp:product:create']">
-          <Icon icon="ep:plus" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.addButtonText') }}
-        </el-button>
-        <el-button type="success" plain @click="handleExport" :loading="exportLoading"
-          v-hasPermi="['erp:product:export']">
-          <Icon icon="ep:download" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.exportButtonText') }}
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-tabs v-model="activeName" @tab-click="handleTabClick">
-      <!-- 使用 v-for 动态生成 el-tab-pane -->
-      <el-tab-pane v-for="item in parentList" :key="item.id" :label="item.name" :name="item.id.toString()" />
-      <!-- <el-tab-pane label="产品" name="2" />
-      <el-tab-pane label="原料" name="1" />
-      <el-tab-pane label="备件" name="5" />
-      <el-tab-pane label="工具" name="3" />
-      <el-tab-pane label="耗材" name="4" />
-      <el-tab-pane label="办公室用品" name="6" />
-      <el-tab-pane label="其他" name="0" /> -->
-    </el-tabs>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column :label="t('FactoryModeling.ProductInformation.tableBarCodeColumn')" align="center" prop="barCode"
-        sortable />
-      <el-table-column :label="t('FactoryModeling.ProductInformation.tableNameColumn')" align="left" prop="name"
-        width="220px" sortable />
-      <el-table-column :label="t('FactoryModeling.ProductInformation.tableStandardColumn')" align="center"
-        prop="standard" sortable />
-      <el-table-column :label="t('FactoryModeling.ProductInformation.tableCategoryColumn')" align="center"
-        prop="subCategoryName" sortable />
-      <el-table-column :label="t('FactoryModeling.ProductInformation.tableUnitColumn')" align="center" prop="unitName"
-        sortable />
-      <el-table-column :label="t('FactoryModeling.ProductInformation.tableStatusColumn')" align="center" prop="status"
-        sortable>
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('FactoryModeling.ProductInformation.tableCreateTimeColumn')" align="center"
-        prop="createTime" :formatter="dateFormatter" width="180px" sortable />
-      <el-table-column :label="t('FactoryModeling.ProductInformation.tableOperateColumn')" align="center" width="150px">
-        <template #default="scope">
-          <!--          <el-button-->
-          <!--            v-if="scope.row.categoryId ===2"-->
-          <!--            link-->
-          <!--            type="primary"-->
-          <!--            @click="openBomForm('detail', scope.row.id)"-->
-          <!--          >-->
-          <!--            BOM-->
-          <!--          </el-button>-->
-          <el-button link type="primary" @click="openForm('update', scope.row.id)" v-hasPermi="['erp:product:update']">
-            {{ t('FactoryModeling.ProductInformation.tableEditAction') }}
-          </el-button>
-          <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['erp:product:delete']">
-            {{ t('FactoryModeling.ProductInformation.tableDeleteAction') }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-      @pagination="getList" />
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <ProductForm ref="formRef" @success="getList" />
-  <!-- 表单弹窗：添加/修改 -->
-  <BomForm ref="bomFormRef" @success="getList" />
-
+  <div class="dv-repair-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
+        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto" @submit.prevent>
+          <el-form-item :label="t('FactoryModeling.ProductInformation.searchCodeLabel')" prop="barCode">
+            <el-input v-model="queryParams.barCode"
+              :placeholder="t('FactoryModeling.ProductInformation.searchCodePlaceholder')" clearable
+              @keyup.enter="handleQuery" class="!w-240px" />
+          </el-form-item>
+          <el-form-item :label="t('FactoryModeling.ProductInformation.searchNameLabel')" prop="name">
+            <el-input v-model="queryParams.name"
+              :placeholder="t('FactoryModeling.ProductInformation.searchNamePlaceholder')" clearable
+              @keyup.enter="handleQuery" class="!w-240px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery">
+              <Icon icon="ep:search" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.searchButtonText') }}
+            </el-button>
+            <el-button @click="resetQuery">
+              <Icon icon="ep:refresh" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.resetButtonText') }}
+            </el-button>
+            <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['erp:product:create']">
+              <Icon icon="ep:plus" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.addButtonText') }}
+            </el-button>
+            <el-button type="success" plain @click="handleExport" :loading="exportLoading"
+              v-hasPermi="['erp:product:export']">
+              <Icon icon="ep:download" class="mr-5px" /> {{ t('FactoryModeling.ProductInformation.exportButtonText') }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
+
+      <ContentWrap>
+        <el-tabs v-model="activeName" @tab-click="handleTabClick">
+          <el-tab-pane v-for="item in parentList" :key="item.id" :label="item.name" :name="item.id.toString()" />
+        </el-tabs>
+        <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+          <el-table-column :label="t('FactoryModeling.ProductInformation.tableBarCodeColumn')" align="center" prop="barCode"
+            sortable />
+          <el-table-column :label="t('FactoryModeling.ProductInformation.tableNameColumn')" align="left" prop="name"
+            width="220px" sortable />
+          <el-table-column :label="t('FactoryModeling.ProductInformation.tableStandardColumn')" align="center"
+            prop="standard" sortable />
+          <el-table-column :label="t('FactoryModeling.ProductInformation.tableCategoryColumn')" align="center"
+            prop="subCategoryName" sortable />
+          <el-table-column :label="t('FactoryModeling.ProductInformation.tableUnitColumn')" align="center" prop="unitName"
+            sortable />
+          <el-table-column :label="t('FactoryModeling.ProductInformation.tableStatusColumn')" align="center" prop="status"
+            sortable>
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('FactoryModeling.ProductInformation.tableCreateTimeColumn')" align="center"
+            prop="createTime" :formatter="dateFormatter" width="180px" sortable />
+          <el-table-column :label="t('FactoryModeling.ProductInformation.tableOperateColumn')" align="center" width="150px">
+            <template #default="scope">
+              <el-button link type="primary" @click="openForm('update', scope.row.id)" v-hasPermi="['erp:product:update']">
+                {{ t('FactoryModeling.ProductInformation.tableEditAction') }}
+              </el-button>
+              <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['erp:product:delete']">
+                {{ t('FactoryModeling.ProductInformation.tableDeleteAction') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+          @pagination="getList" />
+      </ContentWrap>
+    </template>
+
+    <ProductForm v-else-if="formType === 'product'" ref="formRef" @success="getList" @closed="handleFormClosed" />
+    <BomForm v-else-if="formType === 'bom'" ref="bomFormRef" @success="getList" @closed="handleFormClosed" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -107,12 +89,12 @@ import BomForm from "@/views/mes/bom/BomForm.vue";
 /** ERP 产品列表 */
 defineOptions({ name: 'ErpProduct' })
 
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
+const message = useMessage()
+const { t } = useI18n()
 
-const loading = ref(true) // 列表的加载中
-const list = ref<ProductVO[]>([]) // 列表的数据
-const total = ref(0) // 列表的总页数
+const loading = ref(true)
+const list = ref<ProductVO[]>([])
+const total = ref(0)
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -120,12 +102,13 @@ const queryParams = reactive({
   barCode: undefined,
   categoryId: undefined
 })
-const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
-const categoryList = ref<ProductCategoryVO[]>([]) // 产品分类列表
+const queryFormRef = ref()
+const exportLoading = ref(false)
+const categoryList = ref<ProductCategoryVO[]>([])
 const parentList = ref<ProductCategoryVO[]>([])
+const formVisible = ref(false)
+const formType = ref('')
 
-/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
@@ -137,43 +120,37 @@ const getList = async () => {
   }
 }
 
-/** 搜索按钮操作 */
 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)
+  formVisible.value = true
+  formType.value = 'product'
+  nextTick(() => {
+    formRef.value.open(type, id)
+  })
 }
 
-/** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
-    // 删除的二次确认
     await message.delConfirm()
-    // 发起删除
     await ProductApi.deleteProduct(id)
     message.success(t('common.delSuccess'))
-    // 刷新列表
     await getList()
   } catch { }
 }
 
-/** 导出按钮操作 */
 const handleExport = async () => {
   try {
-    // 导出的二次确认
     await message.exportConfirm()
-    // 发起导出
     exportLoading.value = true
     const data = await ProductApi.exportProduct(queryParams)
     download.excel(data, '产品.xls')
@@ -183,33 +160,36 @@ const handleExport = async () => {
   }
 }
 
-/** 初始化 **/
 onMounted(async () => {
   queryParams.categoryId = 2
   await getList()
-  // 产品分类
   const categoryData = await ProductCategoryApi.getProductCategorySimpleList()
   categoryList.value = handleTree(categoryData, 'id', 'parentId')
-  // 获取顶层分类
   for (let i = 0; i < categoryData.length; i++) {
     if (categoryData[i].parentId === 0) {
       parentList.value.push(categoryData[i]);
     }
   }
-  // 排序
   parentList.value.sort((a, b) => a.sort - b.sort);
 })
 
-/** tab 切换 */
 let activeName = '2'
 const handleTabClick = (tab: TabsPaneContext) => {
   queryParams.categoryId = tab.paneName
   handleQuery()
 }
 
-/** 添加/修改操作 */
 const bomFormRef = ref()
 const openBomForm = (type: string, id?: number) => {
-  bomFormRef.value.open(type, id)
+  formVisible.value = true
+  formType.value = 'bom'
+  nextTick(() => {
+    bomFormRef.value.open(type, id)
+  })
+}
+
+const handleFormClosed = () => {
+  formVisible.value = false
+  formType.value = ''
 }
 </script>

src/views/erp/stock/in/StockInForm.vue

@@ -1,121 +1,110 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1080">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="auto"
-      v-loading="formLoading"
-      :disabled="disabled"
-    >
-      <el-form-item prop="code">
-        <template #label>
-          <span>
-            {{ t('ErpStock.In.no') }}
-            <el-tooltip :content="t('ErpStock.In.no')" placement="top">
-              <Icon icon="ep:question-filled" />
-            </el-tooltip>
-          </span>
-        </template>
-        <el-row :gutter="10" style="width: 100%">
-          <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
-            <el-input
-              :disabled="formData.isCode == true || formType === 'update'"
-              v-model="formData.no"
-              :placeholder="t('common.code')"
-            />
-          </el-col>
-          <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
-            <div>
-              <el-switch
-                v-model="formData.isCode"
-                :disabled="formType === 'update'"
+  <div class="dv-repair-panel">
+    <div class="dv-repair-panel__header">
+      <div class="dv-repair-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="dv-repair-dialog" v-loading="formLoading">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="auto"
+        :disabled="disabled"
+      >
+        <el-form-item prop="code">
+          <template #label>
+            <span>
+              {{ t('ErpStock.In.no') }}
+              <el-tooltip :content="t('ErpStock.In.no')" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-row :gutter="10" style="width: 100%">
+            <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
+              <el-input
+                :disabled="formData.isCode == true || formType === 'update'"
+                v-model="formData.no"
+                :placeholder="t('common.code')"
               />
-            </div>
+            </el-col>
+            <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
+              <div>
+                <el-switch
+                  v-model="formData.isCode"
+                  :disabled="formType === 'update'"
+                />
+              </div>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="t('ErpStock.In.inType')" prop="inType">
+              <el-select
+                v-model="formData.inType"
+                clearable
+                filterable
+                :placeholder="t('ErpStock.In.placeholderInType')"
+                class="!w-1/1"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                  :disabled="item.disabled"
+                />
+              </el-select>
+            </el-form-item>
           </el-col>
-        </el-row>
-      </el-form-item>
-      <el-row :gutter="20">
-        <el-col :span="8">
-          <el-form-item :label="t('ErpStock.In.inType')" prop="inType">
-            <el-select
-              v-model="formData.inType"
-              clearable
-              filterable
-              :placeholder="t('ErpStock.In.placeholderInType')"
-              class="!w-1/1"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-                :disabled="item.disabled"
+          <el-col :span="8">
+            <el-form-item :label="t('ErpStock.In.inTime')" prop="inTime">
+              <el-date-picker
+                v-model="formData.inTime"
+                type="date"
+                value-format="x"
+                :placeholder="t('ErpStock.In.placeholderInTime')"
+                class="!w-1/1"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('ErpStock.In.inTime')" prop="inTime">
-            <el-date-picker
-              v-model="formData.inTime"
-              type="date"
-              value-format="x"
-              :placeholder="t('ErpStock.In.placeholderInTime')"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <!-- <el-col :span="8">
-          <el-form-item label="供应商" prop="supplierId">
-            <el-select
-              v-model="formData.supplierId"
-              clearable
-              filterable
-              placeholder="请选择供应商"
-              class="!w-1/1"
-            >
-              <el-option
-                v-for="item in supplierList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('ErpStock.In.remark')" prop="remark">
+              <el-input
+                type="textarea"
+                v-model="formData.remark"
+                :rows="1"
+                :placeholder="t('ErpStock.In.placeholderRemark')"
               />
-            </el-select>
-          </el-form-item>
-        </el-col> -->
-        <el-col :span="8">
-          <el-form-item :label="t('ErpStock.In.remark')" prop="remark">
-            <el-input
-              type="textarea"
-              v-model="formData.remark"
-              :rows="1"
-              :placeholder="t('ErpStock.In.placeholderRemark')"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('ErpStock.In.file')" prop="fileUrl">
-            <UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <!-- 子表的表单 -->
-    <ContentWrap>
-      <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
-        <el-tab-pane :label="t('ErpStock.In.list')" name="item">
-          <StockInItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
-        </el-tab-pane>
-      </el-tabs>
-    </ContentWrap>
-    <template #footer>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('ErpStock.In.file')" prop="fileUrl">
+              <UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <!-- 子表的表单 -->
+      <ContentWrap>
+        <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
+          <el-tab-pane :label="t('ErpStock.In.list')" name="item">
+            <StockInItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
+          </el-tab-pane>
+        </el-tabs>
+      </ContentWrap>
+    </div>
+    <div class="dv-repair-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
       <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">
         {{ t('common.ok') }}
       </el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { StockInApi, StockInVO } from '@/api/erp/stock/in'
@@ -128,7 +117,6 @@ defineOptions({ name: 'StockInForm' })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
-const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
@@ -159,28 +147,27 @@ const options = [
     value: '备件入库',
     label: t('ErpStock.In.tabPart')
   },
-  // {
-  //   value: '原料入库',
-  //   label: '原料入库',
-  // },
   {
     value: '产品入库',
     label: t('ErpStock.In.tabProduct')
   },
-  // {
-  //   value: '生产入库',
-  //   label: '生产入库',
-  //   disabled: true,
-  // },
-
 ]
 /** 子表的表单 */
 const subTabsName = ref('item')
 const itemFormRef = ref()
 
+// 用于取消未完成的异步操作
+const openRequestId = ref(0)
+
+/** 关闭表单 */
+const closeForm = () => {
+  openRequestId.value++
+  emit('closed')
+}
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
+  const currentRequestId = ++openRequestId.value
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -189,6 +176,7 @@ const open = async (type: string, id?: number) => {
     formLoading.value = true
     try {
       formData.value = await StockInApi.getStockIn(id)
+      if (currentRequestId !== openRequestId.value) return
     } finally {
       formLoading.value = false
     }
@@ -199,7 +187,7 @@ const open = async (type: string, id?: number) => {
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const emit = defineEmits(['success', 'closed']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
   // 校验表单
   await formRef.value.validate()
@@ -215,9 +203,8 @@ const submitForm = async () => {
       await StockInApi.updateStockIn(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
-    // 发送操作成功的事件
     emit('success')
+    closeForm()
   } finally {
     formLoading.value = false
   }
@@ -237,4 +224,68 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+onBeforeUnmount(() => {
+  openRequestId.value++
+})
 </script>
+<style scoped lang="scss">
+.dv-repair-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.dv-repair-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.dv-repair-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.dv-repair-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.dv-repair-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 1200px) {
+  .dv-repair-dialog :deep(.el-col) {
+    max-width: 100%;
+    flex: 0 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .dv-repair-panel__header {
+    padding: 14px 16px;
+  }
+
+  .dv-repair-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .dv-repair-footer {
+    padding: 16px;
+  }
+}
+</style>

src/views/erp/stock/in/index.vue

@@ -1,283 +1,262 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="auto"
-    >
-      <el-form-item :label="t('ErpStock.In.no')" prop="no">
-        <el-input
-          v-model="queryParams.no"
-          :placeholder="t('ErpStock.In.placeholderNo')"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.In.product')" prop="productId">
-        <el-select
-          v-model="queryParams.productId"
-          clearable
-          filterable
-          :placeholder="t('ErpStock.In.placeholderProduct')"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in productList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.In.inTime')" prop="inTime">
-        <el-date-picker
-          v-model="queryParams.inTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          :start-placeholder="t('common.startTimeText')"
-          :end-placeholder="t('common.endTimeText')"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-220px"
-        />
-      </el-form-item>
-      <!-- <el-form-item label="供应商" prop="supplierId">
-        <el-select
-          v-model="queryParams.supplierId"
-          clearable
-          filterable
-          placeholder="请选择供应商"
-          class="!w-240px"
+  <div class="dv-repair-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
+        <!-- 搜索工作栏 -->
+        <el-form
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="auto"
         >
-          <el-option
-            v-for="item in supplierList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item> -->
-      <el-form-item :label="t('ErpStock.In.warehouse')" prop="warehouseId" v-show="showAllFilters">
-        <el-select
-          v-model="queryParams.warehouseId"
-          clearable
-          filterable
-          :placeholder="t('ErpStock.In.placeholderWarehouse')"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in warehouseList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.In.creator')" prop="creator" v-show="showAllFilters">
-        <el-select
-          v-model="queryParams.creator"
-          clearable
-          filterable
-          :placeholder="t('ErpStock.In.placeholderCreator')"
-          class="!w-240px"
+          <el-form-item :label="t('ErpStock.In.no')" prop="no">
+            <el-input
+              v-model="queryParams.no"
+              :placeholder="t('ErpStock.In.placeholderNo')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.In.product')" prop="productId">
+            <el-select
+              v-model="queryParams.productId"
+              clearable
+              filterable
+              :placeholder="t('ErpStock.In.placeholderProduct')"
+              class="!w-240px"
+            >
+              <el-option
+                v-for="item in productList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.In.inTime')" prop="inTime">
+            <el-date-picker
+              v-model="queryParams.inTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              :start-placeholder="t('common.startTimeText')"
+              :end-placeholder="t('common.endTimeText')"
+              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+              class="!w-220px"
+            />
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.In.warehouse')" prop="warehouseId" v-show="showAllFilters">
+            <el-select
+              v-model="queryParams.warehouseId"
+              clearable
+              filterable
+              :placeholder="t('ErpStock.In.placeholderWarehouse')"
+              class="!w-240px"
+            >
+              <el-option
+                v-for="item in warehouseList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.In.creator')" prop="creator" v-show="showAllFilters">
+            <el-select
+              v-model="queryParams.creator"
+              clearable
+              filterable
+              :placeholder="t('ErpStock.In.placeholderCreator')"
+              class="!w-240px"
+            >
+              <el-option
+                v-for="item in userList"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.In.status')" prop="status" v-show="showAllFilters">
+            <el-select
+              v-model="queryParams.status"
+              :placeholder="t('ErpStock.In.placeholderStatus')"
+              clearable
+              class="!w-240px"
+            >
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.ERP_AUDIT_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.In.remark')" prop="remark" v-show="showAllFilters">
+            <el-input
+              v-model="queryParams.remark"
+              :placeholder="t('ErpStock.In.placeholderRemark')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item v-if="filterCount > 3">
+            <el-button type="text" class="text-primary" @click="toggleFilters">
+              <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
+              {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') :
+                t('FactoryModeling.FactoryStructure.expandText') }}
+            </el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}</el-button>
+            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
+            <el-button
+              type="primary"
+              plain
+              @click="openForm('create')"
+              v-hasPermi="['erp:stock-in:create']"
+            >
+              <Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
+            </el-button>
+            <el-button
+              type="success"
+              plain
+              @click="handleExport"
+              :loading="exportLoading"
+              v-hasPermi="['erp:stock-in:export']"
+            >
+              <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+            </el-button>
+            <el-button
+              type="danger"
+              plain
+              @click="handleDelete(selectionList.map((item) => item.id))"
+              v-hasPermi="['erp:stock-in:delete']"
+              :disabled="selectionList.length === 0"
+            >
+              <Icon icon="ep:delete" class="mr-5px" /> {{ t('action.del') }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
+
+      <!-- 列表 -->
+      <ContentWrap>
+        <el-tabs v-model="activeName" @tab-click="handleTabClick">
+          <el-tab-pane :label="t('ErpStock.In.tabProduct')" name="产品入库" />
+          <el-tab-pane :label="t('ErpStock.In.tabPart')" name="备件入库" />
+          <el-tab-pane :label="t('ErpStock.In.tabOther')" name="其他入库" />
+        </el-tabs>
+
+        <el-table
+          v-loading="loading"
+          :data="list"
+          :stripe="true"
+          :show-overflow-tooltip="true"
+          @selection-change="handleSelectionChange"
         >
-          <el-option
-            v-for="item in userList"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
+          <el-table-column width="30" :label="t('common.select')" type="selection" />
+          <el-table-column
+            min-width="180"
+            :label="t('ErpStock.In.no')"
+            align="center"
+            prop="no"
+           sortable />
+          <el-table-column
+            :label="t('ErpStock.In.productInfo')"
+            align="left"
+            sortable
+            prop="productNames"
+            min-width="200"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.In.status')" prop="status" v-show="showAllFilters">
-        <el-select
-          v-model="queryParams.status"
-          :placeholder="t('ErpStock.In.placeholderStatus')"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.ERP_AUDIT_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+          <el-table-column
+            :label="t('ErpStock.In.inTime')"
+            align="center"
+            prop="inTime"
+            :formatter="dateFormatter2"
+            width="120px"
+           sortable />
+          <el-table-column :label="t('ErpStock.In.creator')" align="center" prop="creatorName"  sortable />
+          <el-table-column
+            :label="t('ErpStock.In.count')"
+            align="right"
+            sortable
+            prop="totalCount"
+            :formatter="erpCountTableColumnFormatter"
           />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.In.remark')" prop="remark" v-show="showAllFilters">
-        <el-input
-          v-model="queryParams.remark"
-          :placeholder="t('ErpStock.In.placeholderRemark')"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
+          <el-table-column
+            :label="t('ErpStock.In.status')"
+            align="center"
+            fixed="right"
+            width="90"
+            prop="status"
+           sortable>
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.ERP_AUDIT_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('common.operate')" align="center" fixed="right" width="220">
+            <template #default="scope">
+              <el-button
+                link
+                @click="openForm('detail', scope.row.id)"
+                v-hasPermi="['erp:stock-in:query']"
+              >
+                {{ t('action.detail') }}
+              </el-button>
+              <el-button
+                link
+                type="primary"
+                @click="openForm('update', scope.row.id)"
+                v-hasPermi="['erp:stock-in:update']"
+                :disabled="scope.row.status === 20"
+              >
+                {{ t('action.edit') }}
+              </el-button>
+              <el-button
+                link
+                type="primary"
+                @click="handleUpdateStatus(scope.row.id, 20)"
+                v-hasPermi="['erp:stock-in:update-status']"
+                v-if="scope.row.status === 10"
+              >
+                {{ t('action.approve') }}
+              </el-button>
+              <el-button
+                link
+                type="danger"
+                @click="handleUpdateStatus(scope.row.id, 10)"
+                v-hasPermi="['erp:stock-in:update-status']"
+                v-else
+              >
+                {{ t('action.unapprove') }}
+              </el-button>
+              <el-button
+                link
+                type="danger"
+                @click="handleDelete([scope.row.id])"
+                v-hasPermi="['erp:stock-in:delete']"
+              >
+                {{ t('action.del') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
         />
-      </el-form-item>
-      <el-form-item v-if="filterCount > 3">
-        <el-button type="text" class="text-primary" @click="toggleFilters">
-          <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
-          {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') :
-            t('FactoryModeling.FactoryStructure.expandText') }}
-        </el-button>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['erp:stock-in:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['erp:stock-in:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
-        </el-button>
-        <el-button
-          type="danger"
-          plain
-          @click="handleDelete(selectionList.map((item) => item.id))"
-          v-hasPermi="['erp:stock-in:delete']"
-          :disabled="selectionList.length === 0"
-        >
-          <Icon icon="ep:delete" class="mr-5px" /> {{ t('action.del') }}
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-tabs v-model="activeName" @tab-click="handleTabClick">
-      <el-tab-pane :label="t('ErpStock.In.tabProduct')" name="产品入库" />
-      <!-- <el-tab-pane :label="t('ErpStock.In.tabMaterial')" name="原料入库" /> -->
-      <el-tab-pane :label="t('ErpStock.In.tabPart')" name="备件入库" />
-      <el-tab-pane :label="t('ErpStock.In.tabOther')" name="其他入库" />
-    </el-tabs>
+      </ContentWrap>
+    </template>
 
-    <el-table
-      v-loading="loading"
-      :data="list"
-      :stripe="true"
-      :show-overflow-tooltip="true"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column width="30" :label="t('common.select')" type="selection" />
-      <el-table-column
-        min-width="180"
-        :label="t('ErpStock.In.no')"
-        align="center"
-        prop="no"
-       sortable />
-      <el-table-column
-        :label="t('ErpStock.In.productInfo')"
-        align="left"
-        sortable
-        prop="productNames"
-        min-width="200"
-      />
-      <!-- <el-table-column label="供应商" align="center" prop="supplierName"  sortable /> -->
-      <el-table-column
-        :label="t('ErpStock.In.inTime')"
-        align="center"
-        prop="inTime"
-        :formatter="dateFormatter2"
-        width="120px"
-       sortable />
-      <el-table-column :label="t('ErpStock.In.creator')" align="center" prop="creatorName"  sortable />
-      <el-table-column
-        :label="t('ErpStock.In.count')"
-        align="right"
-        sortable
-        prop="totalCount"
-        :formatter="erpCountTableColumnFormatter"
-      />
-      <!-- <el-table-column
-        label="金额"
-        align="right"
-        sortable
-        prop="totalPrice"
-        :formatter="erpPriceTableColumnFormatter"
-      /> -->
-      <el-table-column
-        :label="t('ErpStock.In.status')"
-        align="center"
-        fixed="right"
-        width="90"
-        prop="status"
-       sortable>
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.ERP_AUDIT_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('common.operate')" align="center" fixed="right" width="220">
-        <template #default="scope">
-          <el-button
-            link
-            @click="openForm('detail', scope.row.id)"
-            v-hasPermi="['erp:stock-in:query']"
-          >
-            {{ t('action.detail') }}
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['erp:stock-in:update']"
-            :disabled="scope.row.status === 20"
-          >
-            {{ t('action.edit') }}
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="handleUpdateStatus(scope.row.id, 20)"
-            v-hasPermi="['erp:stock-in:update-status']"
-            v-if="scope.row.status === 10"
-          >
-            {{ t('action.approve') }}
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleUpdateStatus(scope.row.id, 10)"
-            v-hasPermi="['erp:stock-in:update-status']"
-            v-else
-          >
-            {{ t('action.unapprove') }}
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete([scope.row.id])"
-            v-hasPermi="['erp:stock-in:delete']"
-          >
-            {{ t('action.del') }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <StockInForm ref="formRef" @success="getList" />
+    <!-- 表单面板：添加/修改 -->
+    <StockInForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -325,6 +304,8 @@ const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
 const supplierList = ref<SupplierVO[]>([]) // 供应商列表
 const userList = ref<UserVO[]>([]) // 用户列表
 
+const formVisible = ref(false) // 表单是否可见
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -352,7 +333,10 @@ const resetQuery = () => {
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  formVisible.value = true
+  nextTick(() => {
+    formRef.value.open(type, id)
+  })
 }
 
 /** 删除按钮操作 */
@@ -420,8 +404,6 @@ onMounted(async () => {
   supplierList.value = await SupplierApi.getSupplierSimpleList()
   userList.value = await UserApi.getSimpleUserList()
 })
-// TODO 芋艿：可优化功能：列表界面，支持导入
-// TODO 芋艿：可优化功能：详情界面，支持打印
 let activeName = '产品入库'
 const handleTabClick = (tab: TabsPaneContext) => {
   queryParams.inType = tab.paneName

src/views/erp/stock/out/StockOutForm.vue

@@ -1,102 +1,110 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1080">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-      :disabled="disabled"
-    >
-      <el-row :gutter="20">
-        <el-col :span="8">
-          <el-form-item :label="t('ErpStock.Out.no')" prop="no">
-            <el-input disabled v-model="formData.no" :placeholder="t('ErpStock.Out.placeholderNo')" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('ErpStock.Out.customer')" prop="customerId">
-            <el-select
-              v-model="formData.customerId"
-              clearable
-              filterable
-              :placeholder="t('ErpStock.Out.placeholderCustomer')"
-              class="!w-1/1"
-            >
-              <el-option
-                v-for="item in customerList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+  <div class="stock-out-panel">
+    <div class="stock-out-panel__header">
+      <div class="stock-out-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="stock-out-dialog" v-loading="formLoading">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+        :disabled="disabled"
+      >
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item :label="t('ErpStock.Out.no')" prop="no">
+              <el-input disabled v-model="formData.no" :placeholder="t('ErpStock.Out.placeholderNo')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('ErpStock.Out.customer')" prop="customerId">
+              <el-select
+                v-model="formData.customerId"
+                clearable
+                filterable
+                :placeholder="t('ErpStock.Out.placeholderCustomer')"
+                class="!w-1/1"
+              >
+                <el-option
+                  v-for="item in customerList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('ErpStock.Out.outTime')" prop="outTime">
+              <el-date-picker
+                v-model="formData.outTime"
+                type="date"
+                value-format="x"
+                :placeholder="t('ErpStock.Out.placeholderOutTime')"
+                class="!w-1/1"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('ErpStock.Out.outTime')" prop="outTime">
-            <el-date-picker
-              v-model="formData.outTime"
-              type="date"
-              value-format="x"
-              :placeholder="t('ErpStock.Out.placeholderOutTime')"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('ErpStock.Out.outType')" prop="outType">
-            <el-select
-              v-model="formData.outType"
-              clearable
-              filterable
-              :placeholder="t('ErpStock.Out.placeholderOutType')"
-              class="!w-1/1"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-                :disabled="item.disabled"
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('ErpStock.Out.outType')" prop="outType">
+              <el-select
+                v-model="formData.outType"
+                clearable
+                filterable
+                :placeholder="t('ErpStock.Out.placeholderOutType')"
+                class="!w-1/1"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                  :disabled="item.disabled"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+
+          <el-col :span="8">
+            <el-form-item :label="t('ErpStock.Out.remark')" prop="remark">
+              <el-input
+                type="textarea"
+                v-model="formData.remark"
+                :rows="1"
+                :placeholder="t('ErpStock.Out.placeholderRemark')"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-
-
-        <el-col :span="8">
-          <el-form-item :label="t('ErpStock.Out.remark')" prop="remark">
-            <el-input
-              type="textarea"
-              v-model="formData.remark"
-              :rows="1"
-              :placeholder="t('ErpStock.Out.placeholderRemark')"
-            />
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="8">
-          <el-form-item :label="t('ErpStock.Out.file')" prop="fileUrl">
-            <UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <!-- 子表的表单 -->
-    <ContentWrap>
-      <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
-        <el-tab-pane :label="t('ErpStock.Out.list')" name="item">
-          <StockOutItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
-        </el-tab-pane>
-      </el-tabs>
-    </ContentWrap>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item :label="t('ErpStock.Out.file')" prop="fileUrl">
+              <UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <!-- 子表的表单 -->
+      <ContentWrap>
+        <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
+          <el-tab-pane :label="t('ErpStock.Out.list')" name="item">
+            <StockOutItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
+          </el-tab-pane>
+        </el-tabs>
+      </ContentWrap>
+    </div>
+
+    <div class="stock-out-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
+      <el-button v-if="!disabled" @click="submitForm" type="primary" :disabled="formLoading">
         {{ t('common.ok') }}
       </el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { StockOutApi, StockOutVO } from '@/api/erp/stock/out'
@@ -109,7 +117,6 @@ defineOptions({ name: 'StockOutForm' })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
-const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
@@ -158,7 +165,6 @@ const itemFormRef = ref()
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -176,8 +182,12 @@ const open = async (type: string, id?: number) => {
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
+const closeForm = () => {
+  emit('closed')
+}
+
 /** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const emit = defineEmits(['success', 'closed']) // 定义 success 和 closed 事件
 const submitForm = async () => {
   // 校验表单
   await formRef.value.validate()
@@ -193,9 +203,9 @@ const submitForm = async () => {
       await StockOutApi.updateStockOut(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
     // 发送操作成功的事件
     emit('success')
+    closeForm()
   } finally {
     formLoading.value = false
   }
@@ -214,3 +224,57 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.stock-out-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.stock-out-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.stock-out-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.stock-out-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.stock-out-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 768px) {
+  .stock-out-panel__header {
+    padding: 14px 16px;
+  }
+
+  .stock-out-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .stock-out-footer {
+    padding: 16px;
+  }
+}
+</style>

src/views/erp/stock/out/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <ContentWrap>
+  <div class="stock-out-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
       class="-mb-15px"
@@ -282,9 +284,10 @@
       @pagination="getList"
     />
   </ContentWrap>
+    </template>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <StockOutForm ref="formRef" @success="getList" />
+    <StockOutForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -360,8 +363,12 @@ const resetQuery = () => {
 
 /** 添加/修改操作 */
 const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+const formVisible = ref(false)
+
+const openForm = async (type: string, id?: number) => {
+  formVisible.value = true
+  await nextTick()
+  formRef.value?.open(type, id)
 }
 
 /** 删除按钮操作 */

src/views/erp/warehouselocation/WarehouseLocationForm.vue

@@ -1,113 +1,148 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="120px"
-      v-loading="formLoading"
-    >
-      <el-form-item :label="t('ErpStock.WarehouseLocation.warehouseId')" prop="warehouseId">
-        <el-select
-          v-model="formData.warehouseId"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderWarehouseId')"
-          class="!w-1/1"
-          @change="handleWarehouseChange"
-        >
-          <el-option
-            v-for="item in warehouseList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.areaId')" prop="areaId">
-        <el-select
-          v-model="formData.areaId"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaId')"
-          class="!w-1/1"
-        >
-          <el-option
-            v-for="item in filteredAreaList"
-            :key="item.id"
-            :label="item.areaName"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.code')" prop="code">
-        <el-row :gutter="10" class="!w-full">
-          <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
-            <el-input v-model="formData.code" :placeholder="t('ErpStock.WarehouseLocation.placeholderCode')" :disabled="formData.isCode == true || formType === 'update'" />
-          </el-col>
-          <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
-            <div>
-              <el-switch v-model="formData.isCode" :disabled="formType === 'update'" />
-            </div>
-          </el-col>
-        </el-row>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.name')" prop="name">
-        <el-input v-model="formData.name" :placeholder="t('ErpStock.WarehouseLocation.placeholderName')" />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.areaSize')" prop="areaSize">
-        <el-input-number
-          v-model="formData.areaSize"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaSize')"
-          :min="0"
-          :precision="2"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" prop="maxLoadWeight">
-        <el-input-number
-          v-model="formData.maxLoadWeight"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderMaxLoadWeight')"
-          :min="0"
-          :precision="2"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.positionX')" prop="positionX">
-        <el-input-number
-          v-model="formData.positionX"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionX')"
-          :precision="0"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.positionY')" prop="positionY">
-        <el-input-number
-          v-model="formData.positionY"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionY')"
-          :precision="0"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.positionZ')" prop="positionZ">
-        <el-input-number
-          v-model="formData.positionZ"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionZ')"
-          :precision="0"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.allowProductMix')" prop="allowProductMix">
-        <el-switch v-model="formData.allowProductMix" />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.allowBatchMix')" prop="allowBatchMix">
-        <el-switch v-model="formData.allowBatchMix" />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.status')" prop="status">
-        <el-switch v-model="formData.status" :active-value="CommonStatusEnum.ENABLE" :inactive-value="CommonStatusEnum.DISABLE" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
+  <div class="warehouse-location-panel">
+    <div class="warehouse-location-panel__header">
+      <div class="warehouse-location-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="warehouse-location-dialog" v-loading="formLoading">
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+        <section class="warehouse-location-section">
+          <div class="warehouse-location-section__title">基本信息</div>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.warehouseId')" prop="warehouseId">
+                <el-select
+                  v-model="formData.warehouseId"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderWarehouseId')"
+                  class="!w-full"
+                  @change="handleWarehouseChange"
+                >
+                  <el-option
+                    v-for="item in warehouseList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.areaId')" prop="areaId">
+                <el-select
+                  v-model="formData.areaId"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaId')"
+                  class="!w-full"
+                >
+                  <el-option
+                    v-for="item in filteredAreaList"
+                    :key="item.id"
+                    :label="item.areaName"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.code')" prop="code">
+                <el-row :gutter="10" class="!w-full">
+                  <el-col :span="18">
+                    <el-input v-model="formData.code" :placeholder="t('ErpStock.WarehouseLocation.placeholderCode')" :disabled="formData.isCode == true || formType === 'update'" />
+                  </el-col>
+                  <el-col :span="6">
+                    <el-switch v-model="formData.isCode" :disabled="formType === 'update'" />
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.name')" prop="name">
+                <el-input v-model="formData.name" :placeholder="t('ErpStock.WarehouseLocation.placeholderName')" class="!w-full" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.areaSize')" prop="areaSize">
+                <el-input-number
+                  v-model="formData.areaSize"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaSize')"
+                  :min="0"
+                  :precision="2"
+                  class="!w-full"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" prop="maxLoadWeight">
+                <el-input-number
+                  v-model="formData.maxLoadWeight"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderMaxLoadWeight')"
+                  :min="0"
+                  :precision="2"
+                  class="!w-full"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.positionX')" prop="positionX">
+                <el-input-number
+                  v-model="formData.positionX"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionX')"
+                  :precision="0"
+                  class="!w-full"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.positionY')" prop="positionY">
+                <el-input-number
+                  v-model="formData.positionY"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionY')"
+                  :precision="0"
+                  class="!w-full"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.positionZ')" prop="positionZ">
+                <el-input-number
+                  v-model="formData.positionZ"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionZ')"
+                  :precision="0"
+                  class="!w-full"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.allowProductMix')" prop="allowProductMix">
+                <el-switch v-model="formData.allowProductMix" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.allowBatchMix')" prop="allowBatchMix">
+                <el-switch v-model="formData.allowBatchMix" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.status')" prop="status">
+                <el-switch v-model="formData.status" :active-value="CommonStatusEnum.ENABLE" :inactive-value="CommonStatusEnum.DISABLE" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </section>
+      </el-form>
+    </div>
+    <div class="warehouse-location-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -122,7 +157,6 @@ defineOptions({ name: 'WarehouseLocationForm' })
 const { t } = useI18n()
 const message = useMessage()
 
-const dialogVisible = ref(false)
 const dialogTitle = ref('')
 const formLoading = ref(false)
 const formType = ref('')
@@ -164,7 +198,6 @@ const handleWarehouseChange = () => {
 }
 
 const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -182,7 +215,7 @@ const open = async (type: string, id?: number) => {
 }
 defineExpose({ open })
 
-const emit = defineEmits(['success'])
+const emit = defineEmits(['success', 'closed'])
 const submitForm = async () => {
   await formRef.value.validate()
   formLoading.value = true
@@ -198,13 +231,17 @@ const submitForm = async () => {
       await WarehouseLocationApi.updateWarehouseLocation(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
+    closeForm()
     emit('success')
   } finally {
     formLoading.value = false
   }
 }
 
+const closeForm = () => {
+  emit('closed')
+}
+
 const resetForm = () => {
   formData.value = {
     id: undefined,
@@ -225,3 +262,93 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.warehouse-location-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.warehouse-location-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.warehouse-location-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.warehouse-location-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.warehouse-location-section {
+  margin-bottom: 16px;
+  padding: 16px 18px 8px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 10px;
+  box-shadow: 0 4px 14px rgb(15 23 42 / 4%);
+}
+
+.warehouse-location-section__title {
+  position: relative;
+  margin-bottom: 16px;
+  padding-left: 10px;
+  color: #1f2937;
+  font-size: 15px;
+  font-weight: 600;
+
+  &::before {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    width: 3px;
+    height: 16px;
+    background: var(--el-color-primary);
+    border-radius: 999px;
+    content: '';
+  }
+}
+
+.warehouse-location-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 1200px) {
+  .warehouse-location-dialog :deep(.el-col) {
+    max-width: 100%;
+    flex: 0 0 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .warehouse-location-panel__header {
+    padding: 14px 16px;
+  }
+
+  .warehouse-location-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .warehouse-location-footer {
+    padding: 16px;
+  }
+}
+</style>

src/views/erp/warehouselocation/index.vue

@@ -1,175 +1,179 @@
 <template>
-  <ContentWrap>
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="auto"
-    >
-      <el-form-item :label="t('ErpStock.WarehouseLocation.warehouseId')" prop="warehouseId">
-        <el-select
-          v-model="queryParams.warehouseId"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderWarehouseId')"
-          clearable
-          class="!w-240px"
-          @change="handleWarehouseChange"
+  <div class="warehouse-location-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
+        <el-form
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="auto"
         >
-          <el-option
-            v-for="item in warehouseList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.areaId')" prop="areaId">
-        <el-select
-          v-model="queryParams.areaId"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaId')"
-          clearable
-          class="!w-240px"
+          <el-form-item :label="t('ErpStock.WarehouseLocation.warehouseId')" prop="warehouseId">
+            <el-select
+              v-model="queryParams.warehouseId"
+              :placeholder="t('ErpStock.WarehouseLocation.placeholderWarehouseId')"
+              clearable
+              class="!w-240px"
+              @change="handleWarehouseChange"
+            >
+              <el-option
+                v-for="item in warehouseList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.WarehouseLocation.areaId')" prop="areaId">
+            <el-select
+              v-model="queryParams.areaId"
+              :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaId')"
+              clearable
+              class="!w-240px"
+            >
+              <el-option
+                v-for="item in filteredAreaList"
+                :key="item.id"
+                :label="item.areaName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.WarehouseLocation.code')" prop="code">
+            <el-input
+              v-model="queryParams.code"
+              :placeholder="t('ErpStock.WarehouseLocation.placeholderCode')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.WarehouseLocation.name')" prop="name" v-show="showAllFilters">
+            <el-input
+              v-model="queryParams.name"
+              :placeholder="t('ErpStock.WarehouseLocation.placeholderName')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.WarehouseLocation.status')" prop="status" v-show="showAllFilters">
+            <el-select
+              v-model="queryParams.status"
+              :placeholder="t('ErpStock.WarehouseLocation.placeholderStatus')"
+              clearable
+              class="!w-240px"
+            >
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="filterCount > 3">
+            <el-button type="text" class="text-primary" @click="toggleFilters">
+              <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
+              {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') :
+                t('FactoryModeling.FactoryStructure.expandText') }}
+            </el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}</el-button>
+            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
+            <el-button
+              type="primary"
+              plain
+              @click="openForm('create')"
+              v-hasPermi="['erp:warehouse-location:create']"
+            >
+              <Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
+
+      <ContentWrap>
+        <el-table
+          v-loading="loading"
+          :data="list"
+          :stripe="true"
+          :show-overflow-tooltip="true"
+          row-key="id"
         >
-          <el-option
-            v-for="item in filteredAreaList"
-            :key="item.id"
-            :label="item.areaName"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.code')" prop="code">
-        <el-input
-          v-model="queryParams.code"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderCode')"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.name')" prop="name" v-show="showAllFilters">
-        <el-input
-          v-model="queryParams.name"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderName')"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
+          <el-table-column :label="t('ErpStock.WarehouseLocation.warehouseId')" align="center" prop="warehouseId" sortable>
+            <template #default="scope">
+              {{ getWarehouseName(scope.row.warehouseId) }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('ErpStock.WarehouseLocation.areaId')" align="center" prop="areaId" sortable>
+            <template #default="scope">
+              {{ getAreaName(scope.row.areaId) }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('ErpStock.WarehouseLocation.code')" align="center" prop="code" sortable />
+          <el-table-column :label="t('ErpStock.WarehouseLocation.name')" align="center" prop="name" sortable />
+          <el-table-column :label="t('ErpStock.WarehouseLocation.areaSize')" align="center" prop="areaSize" />
+          <el-table-column :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" align="center" prop="maxLoadWeight" />
+          <el-table-column :label="t('ErpStock.WarehouseLocation.position')" align="center">
+            <template #default="scope">
+              {{ scope.row.positionX ?? '-' }}, {{ scope.row.positionY ?? '-' }}, {{ scope.row.positionZ ?? '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('ErpStock.WarehouseLocation.allowProductMix')" align="center" prop="allowProductMix">
+            <template #default="scope">
+              <el-tag :type="scope.row.allowProductMix ? 'success' : 'danger'" size="small">
+                {{ scope.row.allowProductMix ? t('common.yes') : t('common.no') }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('ErpStock.WarehouseLocation.allowBatchMix')" align="center" prop="allowBatchMix">
+            <template #default="scope">
+              <el-tag :type="scope.row.allowBatchMix ? 'success' : 'danger'" size="small">
+                {{ scope.row.allowBatchMix ? t('common.yes') : t('common.no') }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('ErpStock.WarehouseLocation.status')" align="center" prop="status" sortable>
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('ErpStock.WarehouseLocation.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" sortable />
+          <el-table-column :label="t('common.operate')" align="center" width="150px">
+            <template #default="scope">
+              <el-button
+                link
+                type="primary"
+                @click="openForm('update', scope.row.id)"
+                v-hasPermi="['erp:warehouse-location:update']"
+              >
+                {{ t('action.edit') }}
+              </el-button>
+              <el-button
+                link
+                type="danger"
+                @click="handleDelete(scope.row.id)"
+                v-hasPermi="['erp:warehouse-location:delete']"
+              >
+                {{ t('action.del') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
         />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.status')" prop="status" v-show="showAllFilters">
-        <el-select
-          v-model="queryParams.status"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderStatus')"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item v-if="filterCount > 3">
-        <el-button type="text" class="text-primary" @click="toggleFilters">
-          <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
-          {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') :
-            t('FactoryModeling.FactoryStructure.expandText') }}
-        </el-button>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['erp:warehouse-location:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <ContentWrap>
-    <el-table
-      v-loading="loading"
-      :data="list"
-      :stripe="true"
-      :show-overflow-tooltip="true"
-      row-key="id"
-    >
-      <el-table-column :label="t('ErpStock.WarehouseLocation.warehouseId')" align="center" prop="warehouseId" sortable>
-        <template #default="scope">
-          {{ getWarehouseName(scope.row.warehouseId) }}
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('ErpStock.WarehouseLocation.areaId')" align="center" prop="areaId" sortable>
-        <template #default="scope">
-          {{ getAreaName(scope.row.areaId) }}
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('ErpStock.WarehouseLocation.code')" align="center" prop="code" sortable />
-      <el-table-column :label="t('ErpStock.WarehouseLocation.name')" align="center" prop="name" sortable />
-      <el-table-column :label="t('ErpStock.WarehouseLocation.areaSize')" align="center" prop="areaSize" />
-      <el-table-column :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" align="center" prop="maxLoadWeight" />
-      <el-table-column :label="t('ErpStock.WarehouseLocation.position')" align="center">
-        <template #default="scope">
-          {{ scope.row.positionX ?? '-' }}, {{ scope.row.positionY ?? '-' }}, {{ scope.row.positionZ ?? '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('ErpStock.WarehouseLocation.allowProductMix')" align="center" prop="allowProductMix">
-        <template #default="scope">
-          <el-tag :type="scope.row.allowProductMix ? 'success' : 'danger'" size="small">
-            {{ scope.row.allowProductMix ? t('common.yes') : t('common.no') }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('ErpStock.WarehouseLocation.allowBatchMix')" align="center" prop="allowBatchMix">
-        <template #default="scope">
-          <el-tag :type="scope.row.allowBatchMix ? 'success' : 'danger'" size="small">
-            {{ scope.row.allowBatchMix ? t('common.yes') : t('common.no') }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('ErpStock.WarehouseLocation.status')" align="center" prop="status" sortable>
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('ErpStock.WarehouseLocation.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" sortable />
-      <el-table-column :label="t('common.operate')" align="center" width="150px">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['erp:warehouse-location:update']"
-          >
-            {{ t('action.edit') }}
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['erp:warehouse-location:delete']"
-          >
-            {{ t('action.del') }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
+      </ContentWrap>
+    </template>
 
-  <WarehouseLocationForm ref="formRef" @success="getList" />
+    <WarehouseLocationForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -206,6 +210,8 @@ const toggleFilters = () => {
 const warehouseList = ref<any[]>([])
 const areaList = ref<any[]>([])
 
+const formVisible = ref(false)
+
 const filteredAreaList = computed(() => {
   if (!queryParams.warehouseId) return areaList.value
   return areaList.value.filter((item) => item.warehouseId === queryParams.warehouseId)
@@ -255,7 +261,10 @@ const resetQuery = () => {
 
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  formVisible.value = true
+  nextTick(() => {
+    formRef.value.open(type, id)
+  })
 }
 
 const handleDelete = async (id: number) => {

src/views/mes/bom/BomForm.vue

@@ -1,53 +1,62 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px" :close-on-click-modal="false">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
-      <el-form-item :label="t('FactoryModeling.ProductBOM.dialogCodeLabel')" prop="code">
-        <el-input v-model="formData.code" :placeholder="t('FactoryModeling.ProductBOM.dialogCodePlaceholder')"
-          :disabled="formType === 'update'" />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.ProductBOM.dialogVersionLabel')" prop="version">
-        <el-input v-model="formData.version" :placeholder="t('FactoryModeling.ProductBOM.dialogVersionPlaceholder')" />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.ProductBOM.dialogProductLabel')" prop="productId">
-        <el-select v-model="formData.productId" clearable filterable
-          :placeholder="t('FactoryModeling.ProductBOM.dialogProductPlaceholder')" class="!w-1/1">
-          <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.ProductBOM.dialogUnitLabel')" prop="unitId">
-        <el-select v-model="formData.unitId" clearable
-          :placeholder="t('FactoryModeling.ProductBOM.dialogUnitPlaceholder')" class="w-1/1">
-          <el-option v-for="unit in unitList" :key="unit.id" :label="unit.name" :value="unit.id" />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.ProductBOM.dialogYieldRateLabel')" prop="yieldRate">
-        <el-input-number v-model="formData.yieldRate" :min="0" :max="100" :precision="2" class="!w-1/1"
-          :placeholder="t('FactoryModeling.ProductBOM.dialogYieldRatePlaceholder')" />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.ProductBOM.dialogRemarkLabel')" prop="remark">
-        <el-input type="textarea" v-model="formData.remark"
-          :placeholder="t('FactoryModeling.ProductBOM.dialogRemarkPlaceholder')" />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.ProductBOM.dialogEnableLabel')" prop="isEnable">
-        <el-radio-group v-model="formData.isEnable">
-          <el-radio v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" :key="dict.value"
-            :label="dict.value">
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-    </el-form>
-    <!-- 子表的表单 -->
-    <el-tabs v-model="subTabsName">
-      <el-tab-pane :label="t('FactoryModeling.ProductBOM.detailTabLabel')" name="bomDetail">
-        <BomDetailForm ref="bomDetailFormRef" :bom-id="formData.id" />
-      </el-tab-pane>
-    </el-tabs>
-    <template #footer>
+  <div class="dv-repair-panel">
+    <div class="dv-repair-panel__header">
+      <div class="dv-repair-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="dv-repair-dialog" v-loading="formLoading">
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+        <el-form-item :label="t('FactoryModeling.ProductBOM.dialogCodeLabel')" prop="code">
+          <el-input v-model="formData.code" :placeholder="t('FactoryModeling.ProductBOM.dialogCodePlaceholder')"
+            :disabled="formType === 'update'" />
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.ProductBOM.dialogVersionLabel')" prop="version">
+          <el-input v-model="formData.version" :placeholder="t('FactoryModeling.ProductBOM.dialogVersionPlaceholder')" />
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.ProductBOM.dialogProductLabel')" prop="productId">
+          <el-select v-model="formData.productId" clearable filterable
+            :placeholder="t('FactoryModeling.ProductBOM.dialogProductPlaceholder')" class="!w-1/1">
+            <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.ProductBOM.dialogUnitLabel')" prop="unitId">
+          <el-select v-model="formData.unitId" clearable
+            :placeholder="t('FactoryModeling.ProductBOM.dialogUnitPlaceholder')" class="w-1/1">
+            <el-option v-for="unit in unitList" :key="unit.id" :label="unit.name" :value="unit.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.ProductBOM.dialogYieldRateLabel')" prop="yieldRate">
+          <el-input-number v-model="formData.yieldRate" :min="0" :max="100" :precision="2" class="!w-1/1"
+            :placeholder="t('FactoryModeling.ProductBOM.dialogYieldRatePlaceholder')" />
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.ProductBOM.dialogRemarkLabel')" prop="remark">
+          <el-input type="textarea" v-model="formData.remark"
+            :placeholder="t('FactoryModeling.ProductBOM.dialogRemarkPlaceholder')" />
+        </el-form-item>
+        <el-form-item :label="t('FactoryModeling.ProductBOM.dialogEnableLabel')" prop="isEnable">
+          <el-radio-group v-model="formData.isEnable">
+            <el-radio v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" :key="dict.value"
+              :label="dict.value">
+              {{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <!-- 子表的表单 -->
+      <el-tabs v-model="subTabsName">
+        <el-tab-pane :label="t('FactoryModeling.ProductBOM.detailTabLabel')" name="bomDetail">
+          <BomDetailForm ref="bomDetailFormRef" :bom-id="formData.id" />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <div class="dv-repair-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
@@ -56,19 +65,18 @@ import BomDetailForm from './components/BomDetailForm.vue'
 import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
 import { ProductApi, ProductVO } from '@/api/erp/product/product'
 
-const productList = ref<ProductVO[]>([]) // 产品列表
-const unitList = ref<ProductUnitVO[]>([]) // 产品单位列表
+const productList = ref<ProductVO[]>([])
+const unitList = ref<ProductUnitVO[]>([])
 
 /** 产品BOM 表单 */
 defineOptions({ name: 'BomForm' })
 
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
+const { t } = useI18n()
+const message = useMessage()
 
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
 const formData = ref({
   id: undefined,
   code: undefined,
@@ -86,19 +94,20 @@ const formRules = reactive({
   unitId: [{ required: true, message: t('FactoryModeling.ProductBOM.validatorUnitRequired'), trigger: 'blur' }],
   isEnable: [{ required: true, message: t('FactoryModeling.ProductBOM.validatorEnableRequired'), trigger: 'blur' }]
 })
-const formRef = ref() // 表单 Ref
+const formRef = ref()
 
 /** 子表的表单 */
 const subTabsName = ref('bomDetail')
 const bomDetailFormRef = ref()
 
+let openRequestId = 0
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
+  const currentOpenId = ++openRequestId
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
-  // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
@@ -107,33 +116,35 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
-  if (type === 'detail') {
-
-  }
-  // 产品单位
   unitList.value = await ProductUnitApi.getProductUnitSimpleList()
-  // 加载产品、
   productList.value = await ProductApi.getMesProductSimpleList()
 }
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+defineExpose({ open })
+
+const emit = defineEmits(['success', 'closed'])
+
+const closeForm = () => {
+  openRequestId++
+  emit('closed')
+}
+
+onBeforeUnmount(() => {
+  openRequestId++
+})
 
 /** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
-  // 校验表单
   await formRef.value.validate()
-  // 校验子表单
   try {
     await bomDetailFormRef.value.validate()
   } catch (e) {
     subTabsName.value = 'bomDetail'
     return
   }
-  // 提交请求
   formLoading.value = true
   try {
     const data = formData.value as unknown as BomVO
-    // 拼接子表的数据
     data.bomDetails = bomDetailFormRef.value.getData()
     if (formType.value === 'create') {
       await BomApi.createBom(data)
@@ -143,9 +154,8 @@ const submitForm = async () => {
       await BomApi.updateBom(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
-    // 发送操作成功的事件
     emit('success')
+    closeForm()
   } finally {
     formLoading.value = false
   }
@@ -166,3 +176,58 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.dv-repair-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.dv-repair-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.dv-repair-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.dv-repair-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.dv-repair-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 768px) {
+  .dv-repair-panel__header {
+    padding: 14px 16px;
+  }
+
+  .dv-repair-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .dv-repair-footer {
+    padding: 16px;
+  }
+}
+</style>

src/views/mes/bom/index.vue

@@ -1,155 +1,158 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      min-label-width="80px"
-    >
-      <el-form-item :label="t('FactoryModeling.ProductBOM.searchCodeLabel')" prop="code">
-        <el-input
-          v-model="queryParams.code"
-          :placeholder="t('FactoryModeling.ProductBOM.searchCodePlaceholder')"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.ProductBOM.searchProductLabel')" prop="productId">
-        <el-select v-model="queryParams.productId"  @change="handleQuery" clearable filterable :placeholder="t('FactoryModeling.ProductBOM.searchProductPlaceholder')" class="!w-240px">
-          <el-option
-            v-for="item in productList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-    
-      <el-form-item :label="t('FactoryModeling.ProductBOM.searchRemarkLabel')" prop="remark">
-        <el-input
-          v-model="queryParams.remark"
-          :placeholder="t('FactoryModeling.ProductBOM.searchRemarkPlaceholder')"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item :label="t('FactoryModeling.ProductBOM.searchEnableLabel')" prop="isEnable" v-show="showAllFilters">
-        <el-select
-          v-model="queryParams.isEnable"
-          :placeholder="t('FactoryModeling.ProductBOM.searchEnablePlaceholder')"
-          clearable
-          @change="handleQuery"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      
-       <el-form-item v-if="filterCount > 3">
-        <el-button type="text" class="text-primary" @click="toggleFilters">
-          <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
-          {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') : t('FactoryModeling.FactoryStructure.expandText') }}
-        </el-button>
-      </el-form-item>
-      
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.searchButtonText') }}</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.resetButtonText') }}</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['mes:bom:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.addButtonText') }}
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['mes:bom:export']"
+  <div class="dv-repair-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
+        <!-- 搜索工作栏 -->
+        <el-form
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          min-label-width="80px"
         >
-          <Icon icon="ep:download" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.exportButtonText') }}
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+          <el-form-item :label="t('FactoryModeling.ProductBOM.searchCodeLabel')" prop="code">
+            <el-input
+              v-model="queryParams.code"
+              :placeholder="t('FactoryModeling.ProductBOM.searchCodePlaceholder')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item :label="t('FactoryModeling.ProductBOM.searchProductLabel')" prop="productId">
+            <el-select v-model="queryParams.productId"  @change="handleQuery" clearable filterable :placeholder="t('FactoryModeling.ProductBOM.searchProductPlaceholder')" class="!w-240px">
+              <el-option
+                v-for="item in productList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <!-- 子表的列表 -->
-      <el-table-column type="expand">
-        <template #default="scope">
-          <el-tabs model-value="bomDetail">
-            <el-tab-pane :label="t('FactoryModeling.ProductBOM.detailTabLabel')" name="bomDetail">
-              <BomDetailList :bom-id="scope.row.id" />
-            </el-tab-pane>
-          </el-tabs>
-        </template>
-      </el-table-column>
-      <!-- <el-table-column label="ID" align="center" prop="id" /> -->
-      <el-table-column :label="t('FactoryModeling.ProductBOM.tableCodeColumn')" align="center" prop="code" sortable/>
-      <el-table-column :label="t('FactoryModeling.ProductBOM.tableVersionColumn')" align="center" prop="version" />
-      <el-table-column :label="t('FactoryModeling.ProductBOM.tableProductColumn')" align="center" prop="productName"  sortable />
-      <el-table-column :label="t('FactoryModeling.ProductBOM.tableUnitColumn')" align="center" prop="unitName"  sortable />
-      <el-table-column :label="t('FactoryModeling.ProductBOM.tableYieldRateColumn')" align="center" prop="yieldRate" sortable/>
-      <el-table-column :label="t('FactoryModeling.ProductBOM.tableRemarkColumn')" align="center" prop="remark" />
-      <el-table-column :label="t('FactoryModeling.ProductBOM.tableEnableColumn')" align="center" prop="isEnable">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isEnable" />
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="t('FactoryModeling.ProductBOM.tableCreateTimeColumn')"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-        sortable
-      />
-      <el-table-column :label="t('FactoryModeling.ProductBOM.tableOperateColumn')" align="center" fixed="right" width="150">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['mes:bom:update']"
-          >
-            {{ t('FactoryModeling.ProductBOM.tableEditAction') }}
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['mes:bom:delete']"
-          >
-            {{ t('FactoryModeling.ProductBOM.tableDeleteAction') }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
+          <el-form-item :label="t('FactoryModeling.ProductBOM.searchRemarkLabel')" prop="remark">
+            <el-input
+              v-model="queryParams.remark"
+              :placeholder="t('FactoryModeling.ProductBOM.searchRemarkPlaceholder')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item :label="t('FactoryModeling.ProductBOM.searchEnableLabel')" prop="isEnable" v-show="showAllFilters">
+            <el-select
+              v-model="queryParams.isEnable"
+              :placeholder="t('FactoryModeling.ProductBOM.searchEnablePlaceholder')"
+              clearable
+              @change="handleQuery"
+              class="!w-240px"
+            >
+              <el-option
+                v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+
+           <el-form-item v-if="filterCount > 3">
+            <el-button type="text" class="text-primary" @click="toggleFilters">
+              <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
+              {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') : t('FactoryModeling.FactoryStructure.expandText') }}
+            </el-button>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.searchButtonText') }}</el-button>
+            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.resetButtonText') }}</el-button>
+            <el-button
+              type="primary"
+              plain
+              @click="openForm('create')"
+              v-hasPermi="['mes:bom:create']"
+            >
+              <Icon icon="ep:plus" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.addButtonText') }}
+            </el-button>
+            <el-button
+              type="success"
+              plain
+              @click="handleExport"
+              :loading="exportLoading"
+              v-hasPermi="['mes:bom:export']"
+            >
+              <Icon icon="ep:download" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.exportButtonText') }}
+            </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 type="expand">
+            <template #default="scope">
+              <el-tabs model-value="bomDetail">
+                <el-tab-pane :label="t('FactoryModeling.ProductBOM.detailTabLabel')" name="bomDetail">
+                  <BomDetailList :bom-id="scope.row.id" />
+                </el-tab-pane>
+              </el-tabs>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="ID" align="center" prop="id" /> -->
+          <el-table-column :label="t('FactoryModeling.ProductBOM.tableCodeColumn')" align="center" prop="code" sortable/>
+          <el-table-column :label="t('FactoryModeling.ProductBOM.tableVersionColumn')" align="center" prop="version" />
+          <el-table-column :label="t('FactoryModeling.ProductBOM.tableProductColumn')" align="center" prop="productName"  sortable />
+          <el-table-column :label="t('FactoryModeling.ProductBOM.tableUnitColumn')" align="center" prop="unitName"  sortable />
+          <el-table-column :label="t('FactoryModeling.ProductBOM.tableYieldRateColumn')" align="center" prop="yieldRate" sortable/>
+          <el-table-column :label="t('FactoryModeling.ProductBOM.tableRemarkColumn')" align="center" prop="remark" />
+          <el-table-column :label="t('FactoryModeling.ProductBOM.tableEnableColumn')" align="center" prop="isEnable">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isEnable" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            :label="t('FactoryModeling.ProductBOM.tableCreateTimeColumn')"
+            align="center"
+            prop="createTime"
+            :formatter="dateFormatter"
+            width="180px"
+            sortable
+          />
+          <el-table-column :label="t('FactoryModeling.ProductBOM.tableOperateColumn')" align="center" fixed="right" width="150">
+            <template #default="scope">
+              <el-button
+                link
+                type="primary"
+                @click="openForm('update', scope.row.id)"
+                v-hasPermi="['mes:bom:update']"
+              >
+                {{ t('FactoryModeling.ProductBOM.tableEditAction') }}
+              </el-button>
+              <el-button
+                link
+                type="danger"
+                @click="handleDelete(scope.row.id)"
+                v-hasPermi="['mes:bom:delete']"
+              >
+                {{ t('FactoryModeling.ProductBOM.tableDeleteAction') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </ContentWrap>
+    </template>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <BomForm ref="formRef" @success="getList" />
+    <BomForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -161,16 +164,16 @@ import BomForm from './BomForm.vue'
 import BomDetailList from './components/BomDetailList.vue'
 import { ProductApi, ProductVO } from '@/api/erp/product/product'
 
-const productList = ref<ProductVO[]>([]) // 产品列表
+const productList = ref<ProductVO[]>([])
 /** 产品BOM 列表 */
 defineOptions({ name: 'Bom' })
 
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
+const message = useMessage()
+const { t } = useI18n()
 
-const loading = ref(true) // 列表的加载中
-const list = ref<BomVO[]>([]) // 列表的数据
-const total = ref(0) // 列表的总页数
+const loading = ref(true)
+const list = ref<BomVO[]>([])
+const total = ref(0)
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -183,10 +186,11 @@ const queryParams = reactive({
   isEnable: undefined,
   createTime: []
 })
-const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
-const showAllFilters = ref(false) // 是否显示所有筛选框
-const filterCount = 4 // 筛选框数量（code、productId、remark、isEnable）
+const queryFormRef = ref()
+const exportLoading = ref(false)
+const showAllFilters = ref(false)
+const filterCount = 4
+const formVisible = ref(false)
 
 /** 切换筛选框展开/折叠 */
 const toggleFilters = () => {
@@ -220,18 +224,18 @@ const resetQuery = () => {
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  formVisible.value = true
+  nextTick(() => {
+    formRef.value.open(type, id)
+  })
 }
 
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
-    // 删除的二次确认
     await message.delConfirm()
-    // 发起删除
     await BomApi.deleteBom(id)
     message.success(t('common.delSuccess'))
-    // 刷新列表
     await getList()
   } catch {}
 }
@@ -239,9 +243,7 @@ const handleDelete = async (id: number) => {
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {
-    // 导出的二次确认
     await message.exportConfirm()
-    // 发起导出
     exportLoading.value = true
     const data = await BomApi.exportBom(queryParams)
     download.excel(data, '产品BOM.xls')
@@ -254,7 +256,6 @@ const handleExport = async () => {
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  // 加载产品、
   productList.value = await ProductApi.getMesProductSimpleList()
 })
 </script>

src/views/mes/criticalComponent/CriticalComponentForm.vue

@@ -1,103 +1,107 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="720px">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
-      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.code')" prop="code">
-        <el-row :gutter="10" style="width: 100%">
-          <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
-            <el-input
-              v-model="formData.code"
-              :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderCode')"
-              clearable
-              :disabled="Boolean(formData.isCode) || formType === 'update'"
-            />
-          </el-col>
-          <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
-            <div>
-              <el-switch
-                v-model="formData.isCode"
-                :disabled="formType === 'update'"
-                @change="handleCodeAutoChange"
+  <div class="critical-component-panel">
+    <div class="critical-component-panel__header">
+      <div class="critical-component-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="critical-component-dialog" v-loading="formLoading">
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.code')" prop="code">
+          <el-row :gutter="10" style="width: 100%">
+            <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
+              <el-input
+                v-model="formData.code"
+                :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderCode')"
+                clearable
+                :disabled="Boolean(formData.isCode) || formType === 'update'"
+              />
+            </el-col>
+            <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
+              <div>
+                <el-switch
+                  v-model="formData.isCode"
+                  :disabled="formType === 'update'"
+                  @change="handleCodeAutoChange"
+                />
+              </div>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.name')" prop="name">
+          <el-input
+            v-model="formData.name"
+            :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderName')"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.deviceSpec')" prop="deviceSpec">
+          <el-input
+            v-model="formData.deviceSpec"
+            :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderDeviceSpec')"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.description')" prop="description">
+          <el-input
+            v-model="formData.description"
+            :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderDescription')"
+            clearable
+            type="textarea"
+          />
+        </el-form-item>
+        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.count')" prop="count">
+          <el-input
+            v-model="formData.count"
+            :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderCount')"
+            clearable
+            type="number"
+          />
+        </el-form-item>
+        <el-row :gutter="16">
+          <el-col :span="12" >
+            <el-form-item  :label="t('EquipmentManagement.EquipmentKeyItems.qrcode')" prop="qrcodeUrl">
+              <QrcodeActionCard
+                :image-url="formData.qrcodeUrl"
+                :print-id="formData.id"
+                :print-template-type="3"
+                :print-title="`${formData.name || '关键件'}码打印预览`"
+                :print-paper-width="80"
+                :print-paper-height="80"
+                :print-max-width="220"
+                :empty-text="t('EquipmentManagement.EquipmentKeyItems.qrcodeEmpty')"
+                :error-text="t('EquipmentManagement.EquipmentKeyItems.qrcodeLoadError')"
+                :refresh-url="getQrcodeRefreshUrl()"
+                :refresh-disabled="!formData.id || !formData.code"
+                refresh-confirm-text="确认刷新该关键件二维码吗？"
+                :template-json="formData.templateJson"
+                :print-data="buildPrintData()"
+                @refresh-success="handleQrcodeRefreshSuccess"
               />
-            </div>
+            </el-form-item>
           </el-col>
-        </el-row>
-      </el-form-item>
-      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.name')" prop="name">
-        <el-input
-          v-model="formData.name"
-          :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderName')"
-          clearable
-        />
-      </el-form-item>
-      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.deviceSpec')" prop="deviceSpec">
-        <el-input
-          v-model="formData.deviceSpec"
-          :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderDeviceSpec')"
-          clearable
-        />
-      </el-form-item>
-      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.description')" prop="description">
-        <el-input
-          v-model="formData.description"
-          :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderDescription')"
-          clearable
-          type="textarea"
-        />
-      </el-form-item>
-<!--        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.count')" prop="count">
-        <el-input
-          v-model="formData.count"
-          :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderCount')"
-          clearable
-          type="number"
-        />
-      </el-form-item>-->
-      <el-row :gutter="16">
-        <!-- <el-col :span="24">
-          <el-form-item label="资产编号" prop="id">
-            <el-input v-model="formData.id" placeholder="系统自动生成" disabled />
-          </el-form-item>
-        </el-col> -->
-        <el-col :span="12" >
-      <el-form-item  :label="t('EquipmentManagement.EquipmentKeyItems.qrcode')" prop="qrcodeUrl">
-        <QrcodeActionCard
-          :image-url="formData.qrcodeUrl"
-          :print-id="formData.id"
-          :print-title="`${formData.name || '关键件'}码打印预览`"
-          :print-paper-width="80"
-          :print-paper-height="80"
-          :print-max-width="220"
-          :empty-text="t('EquipmentManagement.EquipmentKeyItems.qrcodeEmpty')"
-          :error-text="t('EquipmentManagement.EquipmentKeyItems.qrcodeLoadError')"
-          :refresh-url="getQrcodeRefreshUrl()"
-          :refresh-disabled="!formData.id || !formData.code"
-          refresh-confirm-text="确认刷新该关键件二维码吗？"
-          :template-json="formData.templateJson"
-          :print-data="buildPrintData()"
-          @refresh-success="handleQrcodeRefreshSuccess"
-        />
-      </el-form-item>
+          <el-col :span="12" >
+            <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.images')" prop="images">
+              <UploadImg style="height: 100px" v-model="formData.images" />
+            </el-form-item>
           </el-col>
-        <el-col :span="12" >
-          <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.images')" prop="images">
-            <UploadImg style="height: 100px" v-model="formData.images" />
-          </el-form-item>
-        </el-col>
         </el-row>
-      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.remark')" prop="remark">
-        <el-input
-          v-model="formData.remark"
-          :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderRemark')"
-          clearable
-          type="textarea"
-        />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
+        <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.remark')" prop="remark">
+          <el-input
+            v-model="formData.remark"
+            :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderRemark')"
+            clearable
+            type="textarea"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="critical-component-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
       <el-button type="primary" @click="submitForm" :disabled="formLoading">{{ t('common.ok') }}</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -110,7 +114,6 @@ defineOptions({ name: 'CriticalComponentForm' })
 const { t } = useI18n()
 const message = useMessage()
 
-const dialogVisible = ref(false)
 const dialogTitle = ref('')
 const formLoading = ref(false)
 const formType = ref<'create' | 'update'>('create')
@@ -197,8 +200,10 @@ const handleQrcodeRefreshSuccess = async (data: any) => {
   formData.value.code = detail?.code ?? formData.value.code
 }
 
+let openRequestId = 0
+
 const open = async (type: 'create' | 'update', id?: number) => {
-  dialogVisible.value = true
+  const currentOpenId = ++openRequestId
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -206,6 +211,7 @@ const open = async (type: 'create' | 'update', id?: number) => {
     formLoading.value = true
     try {
       const detail = await CriticalComponentApi.getCriticalComponent(id)
+      if (currentOpenId !== openRequestId) return
       const templateJson = detail?.templateJson
       const parsedTemplateJson = typeof templateJson === 'string'
         ? JSON.parse(templateJson)
@@ -215,7 +221,7 @@ const open = async (type: 'create' | 'update', id?: number) => {
         code: detail?.code,
         isCode: detail?.isCode ?? false,
         name: detail?.name,
-        deviceSpec:detail?.deviceSpec,
+        deviceSpec: detail?.deviceSpec,
         description: detail?.description,
         count: detail?.count,
         remark: detail?.remark,
@@ -231,7 +237,12 @@ const open = async (type: 'create' | 'update', id?: number) => {
 
 defineExpose({ open })
 
-const emit = defineEmits(['success'])
+const emit = defineEmits(['success', 'closed'])
+
+const closeForm = () => {
+  openRequestId++
+  emit('closed')
+}
 
 const submitForm = async () => {
   await formRef.value.validate()
@@ -244,11 +255,64 @@ const submitForm = async () => {
       await CriticalComponentApi.updateCriticalComponent(formData.value)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
     emit('success')
+    closeForm()
   } finally {
     formLoading.value = false
   }
 }
 </script>
-<style scoped lang="scss"></style>
+
+<style lang="scss" scoped>
+.critical-component-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.critical-component-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.critical-component-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.critical-component-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.critical-component-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 768px) {
+  .critical-component-panel__header {
+    padding: 14px 16px;
+  }
+
+  .critical-component-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .critical-component-footer {
+    padding: 16px;
+  }
+}
+</style>

src/views/mes/criticalComponent/index.vue

@@ -1,154 +1,204 @@
 <template>
-  <ContentWrap>
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px">
-      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.code')" prop="code">
-        <el-input
-v-model="queryParams.code" :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderCode')"
-          clearable @keyup.enter="handleQuery" class="!w-240px" />
-      </el-form-item>
-      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.name')" prop="name">
-        <el-input
-v-model="queryParams.name" :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderName')"
-          clearable @keyup.enter="handleQuery" class="!w-240px" />
-      </el-form-item>
-      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.description')" prop="description" v-show="showAllFilters">
-        <el-input
-v-model="queryParams.description"
-          :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderDescription')" clearable
-          @keyup.enter="handleQuery" class="!w-240px" />
-      </el-form-item>
-      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.remark')" prop="remark" v-show="showAllFilters">
-        <el-input
-v-model="queryParams.remark"
-          :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderRemark')" clearable
-          @keyup.enter="handleQuery" class="!w-240px" />
-      </el-form-item>
-      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.createTime')" prop="createTime" v-show="showAllFilters">
-        <el-date-picker
-v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
-          :start-placeholder="t('common.startTimeText')" :end-placeholder="t('common.endTimeText')"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-220px" />
-      </el-form-item>
-      <el-form-item v-if="filterCount > 3">
-        <el-button type="text" class="text-primary" @click="toggleFilters">
-          <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
-          {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') : t('FactoryModeling.FactoryStructure.expandText') }}
-        </el-button>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery">
-          <Icon icon="ep:search" class="mr-5px" />
-          {{ t('common.query') }}
-        </el-button>
-        <el-button @click="resetQuery">
-          <Icon icon="ep:refresh" class="mr-5px" />
-          {{ t('common.reset') }}
-        </el-button>
-        <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mes:critical-component:create']">
-          <Icon icon="ep:plus" class="mr-5px" />
-          {{ t('action.add') }}
-        </el-button>
-        <el-button
-type="danger" plain @click="handleBatchDelete" :disabled="!selectedIds.length"
-          v-hasPermi="['mes:critical-component:delete']">
-          <Icon icon="ep:delete" class="mr-5px" />
-          {{ t('EquipmentManagement.EquipmentKeyItems.batchDelete') }}
-        </el-button>
-        <el-button type="warning" plain @click="openImport" v-hasPermi="['mes:critical-component:import']">
-          <Icon icon="ep:upload" class="mr-5px" />
-          {{ t('action.import') }}
-        </el-button>
-        <el-button
-type="success" plain @click="handleExport" :loading="exportLoading"
-          v-hasPermi="['mes:critical-component:export']">
-          <Icon icon="ep:download" class="mr-5px" />
-          {{ t('action.export') }}
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+  <div class="critical-component-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
+        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px">
+          <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.code')" prop="code">
+            <el-input
+              v-model="queryParams.code"
+              :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderCode')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.name')" prop="name">
+            <el-input
+              v-model="queryParams.name"
+              :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderName')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item
+            :label="t('EquipmentManagement.EquipmentKeyItems.description')"
+            prop="description"
+            v-show="showAllFilters"
+          >
+            <el-input
+              v-model="queryParams.description"
+              :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderDescription')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.remark')" prop="remark" v-show="showAllFilters">
+            <el-input
+              v-model="queryParams.remark"
+              :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderRemark')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item
+            :label="t('EquipmentManagement.EquipmentKeyItems.createTime')"
+            prop="createTime"
+            v-show="showAllFilters"
+          >
+            <el-date-picker
+              v-model="queryParams.createTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              :start-placeholder="t('common.startTimeText')"
+              :end-placeholder="t('common.endTimeText')"
+              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+              class="!w-220px"
+            />
+          </el-form-item>
+          <el-form-item v-if="filterCount > 3">
+            <el-button type="text" class="text-primary" @click="toggleFilters">
+              <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
+              {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') : t('FactoryModeling.FactoryStructure.expandText') }}
+            </el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery">
+              <Icon icon="ep:search" class="mr-5px" />
+              {{ t('common.query') }}
+            </el-button>
+            <el-button @click="resetQuery">
+              <Icon icon="ep:refresh" class="mr-5px" />
+              {{ t('common.reset') }}
+            </el-button>
+            <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mes:critical-component:create']">
+              <Icon icon="ep:plus" class="mr-5px" />
+              {{ t('action.add') }}
+            </el-button>
+            <el-button
+              type="danger"
+              plain
+              @click="handleBatchDelete"
+              :disabled="!selectedIds.length"
+              v-hasPermi="['mes:critical-component:delete']"
+            >
+              <Icon icon="ep:delete" class="mr-5px" />
+              {{ t('EquipmentManagement.EquipmentKeyItems.batchDelete') }}
+            </el-button>
+            <el-button type="warning" plain @click="openImport" v-hasPermi="['mes:critical-component:import']">
+              <Icon icon="ep:upload" class="mr-5px" />
+              {{ t('action.import') }}
+            </el-button>
+            <el-button
+              type="success"
+              plain
+              @click="handleExport"
+              :loading="exportLoading"
+              v-hasPermi="['mes:critical-component:export']"
+            >
+              <Icon icon="ep:download" class="mr-5px" />
+              {{ t('action.export') }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
 
-  <ContentWrap>
-    <el-table
-v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
-      @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column
-:label="t('EquipmentManagement.EquipmentKeyItems.code')" align="center" prop="code"
-        min-width="140"  sortable />
-      <el-table-column
-:label="t('EquipmentManagement.EquipmentKeyItems.name')" align="center" prop="name"
-        min-width="140"  sortable />
-      <el-table-column
-        :label="t('EquipmentManagement.EquipmentKeyItems.deviceSpec')" align="center" prop="deviceSpec"
-        min-width="140"  sortable />
-      <el-table-column
-:label="t('EquipmentManagement.EquipmentKeyItems.description')" align="center" prop="description"
-        min-width="180" />
-<!--              <el-table-column
-:label="t('EquipmentManagement.EquipmentKeyItems.count')" align="center" prop="count"
-        min-width="180" />-->
-      <el-table-column
-:label="t('EquipmentManagement.EquipmentKeyItems.remark')" align="center" prop="remark"
-        min-width="180" />
-      <el-table-column
-:label="t('EquipmentManagement.EquipmentKeyItems.createTime')" align="center" prop="createTime"
-        :formatter="dateFormatter" width="180"  sortable />
-      <el-table-column
-:label="t('EquipmentManagement.EquipmentKeyItems.operate')" align="center" width="140"
-        fixed="right">
-        <template #default="scope">
-          <el-button
-link type="primary" @click="openForm('update', scope.row.id)"
-            v-hasPermi="['mes:critical-component:update']">
-            {{ t('EquipmentManagement.EquipmentKeyItems.edit') }}
-          </el-button>
-          <el-button
-link type="danger" @click="handleDelete(scope.row.id)"
-            v-hasPermi="['mes:critical-component:delete']">
-            {{ t('EquipmentManagement.EquipmentKeyItems.delete') }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+      <ContentWrap>
+        <el-table
+          v-loading="loading"
+          :data="list"
+          :stripe="true"
+          :show-overflow-tooltip="true"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column
+            :label="t('EquipmentManagement.EquipmentKeyItems.code')"
+            align="center"
+            prop="code"
+            min-width="140"
+            sortable
+          />
+          <el-table-column
+            :label="t('EquipmentManagement.EquipmentKeyItems.name')"
+            align="center"
+            prop="name"
+            min-width="140"
+            sortable
+          />
+          <el-table-column
+            :label="t('EquipmentManagement.EquipmentKeyItems.deviceSpec')"
+            align="center"
+            prop="deviceSpec"
+            min-width="140"
+            sortable
+          />
+          <el-table-column
+            :label="t('EquipmentManagement.EquipmentKeyItems.description')"
+            align="center"
+            prop="description"
+            min-width="180"
+          />
+          <el-table-column
+            :label="t('EquipmentManagement.EquipmentKeyItems.count')"
+            align="center"
+            prop="count"
+            min-width="180"
+          />
+          <el-table-column
+            :label="t('EquipmentManagement.EquipmentKeyItems.remark')"
+            align="center"
+            prop="remark"
+            min-width="180"
+          />
+          <el-table-column
+            :label="t('EquipmentManagement.EquipmentKeyItems.createTime')"
+            align="center"
+            prop="createTime"
+            :formatter="dateFormatter"
+            width="180"
+            sortable
+          />
+          <el-table-column
+            :label="t('EquipmentManagement.EquipmentKeyItems.operate')"
+            align="center"
+            width="140"
+            fixed="right"
+          >
+            <template #default="scope">
+              <el-button
+                link
+                type="primary"
+                @click="openForm('update', scope.row.id)"
+                v-hasPermi="['mes:critical-component:update']"
+              >
+                {{ t('EquipmentManagement.EquipmentKeyItems.edit') }}
+              </el-button>
+              <el-button
+                link
+                type="danger"
+                @click="handleDelete(scope.row.id)"
+                v-hasPermi="['mes:critical-component:delete']"
+              >
+                {{ t('EquipmentManagement.EquipmentKeyItems.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>
-
-  <CriticalComponentForm ref="formRef" @success="getList" />
-
-  <Dialog v-model="importDialogVisible" :title="t('action.import')" width="400">
-    <el-upload
-ref="uploadRef" v-model:file-list="importFileList"
-      :action="importUrl + '?updateSupport=' + updateSupport" :auto-upload="false" :disabled="importLoading"
-      :headers="uploadHeaders" :limit="1" :on-error="handleImportError" :on-exceed="handleImportExceed"
-      :on-success="handleImportSuccess" accept=".xlsx, .xls" drag>
-      <Icon icon="ep:upload" />
-      <div class="el-upload__text">
-        将文件拖到此处，或点击上传
-      </div>
-      <template #tip>
-        <div class="el-upload__tip text-center">
-          <div class="el-upload__tip">
-            <el-checkbox v-model="updateSupport" />
-            是否更新已存在的数据
-          </div>
-          <span>仅支持 .xlsx, .xls 格式</span>
-          <el-link
-:underline="false" style="font-size: 12px; vertical-align: baseline" type="primary"
-            @click="importTemplate">
-            下载导入模板
-          </el-link>
-        </div>
-      </template>
-    </el-upload>
-    <template #footer>
-      <el-button :disabled="importLoading" type="primary" @click="submitImport">{{ t('common.ok') }}</el-button>
-      <el-button @click="importDialogVisible = false">{{ t('common.cancel') }}</el-button>
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </ContentWrap>
     </template>
-  </Dialog>
+
+    <CriticalComponentForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -231,8 +281,12 @@ const handleSelectionChange = (rows: CriticalComponentVO[]) => {
 }
 
 const formRef = ref()
-const openForm = (type: 'create' | 'update', id?: number) => {
-  formRef.value.open(type, id)
+const formVisible = ref(false)
+
+const openForm = async (type: 'create' | 'update', id?: number) => {
+  formVisible.value = true
+  await nextTick()
+  formRef.value?.open(type, id)
 }
 
 const openImport = () => {
@@ -309,7 +363,7 @@ const handleImportSuccess = async (response: any) => {
         .join('<br />')
       await ElMessageBox.alert(`以下编码导入失败：<br />${detail}`, t('common.confirmTitle'), {
         type: 'error',
-        dangerouslyUseHTMLString: true,
+        dangerouslyUseHTMLString: true
       })
     } else {
       message.success('导入成功')

src/views/mes/deviceledger/DeviceLedgerForm.vue

@@ -76,11 +76,12 @@
 
 
         </el-col>
-        <!-- <el-col :span="12">
-          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" prop="deviceBrand">
-            <el-input v-model="formData.deviceBrand" placeholder="请输入品牌" />
+        <el-col :span="8">
+         <el-form-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" prop="factoryEntryDate">
+            <el-date-picker v-model="formData.factoryEntryDate" type="date" value-format="YYYY-MM-DD"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderFactoryEntryDate')" class="!w-full" />
           </el-form-item>
-        </el-col> -->
+        </el-col>
         <!--        <el-col :span="24">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceModel')" prop="deviceModel">
             <el-input v-model="formData.deviceModel" :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceModel')" />
@@ -115,6 +116,13 @@
         -->
         <!-- </el-form-item>
       </el-col> -->
+        
+        <el-col :span="8">
+          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.outgoingTime')" prop="outgoingTime">
+            <el-date-picker v-model="formData.outgoingTime" type="date" value-format="YYYY-MM-DD"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderOutgoingTime')" class="!w-full" />
+          </el-form-item>
+        </el-col>
         <el-col :span="8">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.isSchedueld')" prop="isScheduled">
             <el-switch v-model="formData.isScheduled" :active-value="1" :inactive-value="0"
@@ -123,16 +131,17 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')" prop="productionDate">
-            <el-date-picker v-model="formData.productionDate" type="date" value-format="YYYY-MM-DD"
-              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderProductionDate')" class="!w-full" />
+           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" prop="deviceBrand">
+            <el-input v-model="formData.deviceBrand"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceBrand')" />
           </el-form-item>
+          
         </el-col>
 
-        <el-col :span="8">
-          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" prop="factoryEntryDate">
-            <el-date-picker v-model="formData.factoryEntryDate" type="date" value-format="YYYY-MM-DD"
-              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderFactoryEntryDate')" class="!w-full" />
+        <el-col :span="12">
+          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.sn')" prop="sn">
+            <el-input v-model="formData.sn"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderSn')" />
           </el-form-item>
         </el-col>
 
@@ -210,6 +219,7 @@
         <el-col v-if="formType === 'update'" :span="24">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.qrcode')" prop="qrcodeUrl">
             <QrcodeActionCard :image-url="formData.qrcodeUrl" :print-id="formData.id"
+              :print-template-type="2"
               :print-title="`${formData.deviceName || '设备'}码打印预览`" :print-paper-width="80" :print-paper-height="80"
               :print-max-width="220" :empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeEmpty')"
               :error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
@@ -496,6 +506,7 @@ const initFormData = () => ({
   deviceName: undefined,
   deviceStatus: undefined,
   deviceBrand: undefined,
+  sn: undefined,
   deviceModel: undefined,
   deviceSpec: undefined,
   isScheduled: 0,
@@ -508,6 +519,7 @@ const initFormData = () => ({
   systemOrg: undefined,
   deviceManagerIds: [] as number[],
   productionDate: undefined,
+  outgoingTime: undefined,
   factoryEntryDate: undefined,
   remark: undefined,
   componentIds: [] as number[],
@@ -697,6 +709,8 @@ const buildPrintData = () => {
     deviceName: formData.value.deviceName,
     deviceSpec: formData.value.deviceSpec,
     deviceBrand: formData.value.deviceBrand,
+    sn: formData.value.sn,
+    outgoingTime: formData.value.outgoingTime,
     deviceModel: formData.value.deviceModel,
     deviceLocation: formData.value.deviceLocation,
     remark: formData.value.remark,
@@ -761,6 +775,7 @@ const open = async (type: string, id?: number, defaultDeviceTypeId?: number, def
         deviceLine: normalizeNumberish((detail as any)?.deviceLine),
         deviceManagerIds: parseIdsValue((detail as any)?.deviceManager),
         productionDate: normalizeYmd((detail as any)?.productionDate),
+        outgoingTime: normalizeYmd((detail as any)?.outgoingTime),
         factoryEntryDate: normalizeYmd((detail as any)?.factoryEntryDate),
         componentIds: parseIdsValue((detail as any)?.componentId),
         beijianIds: parseIdsValue((detail as any)?.beijianId),
@@ -995,6 +1010,7 @@ const submitForm = async () => {
       deviceType: normalizeNumberish(formData.value.deviceType),
       deviceLine: normalizeNumberish((formData.value as any).deviceLine),
       productionDate: normalizeYmd(formData.value.productionDate),
+      outgoingTime: normalizeYmd((formData.value as any).outgoingTime),
       factoryEntryDate: normalizeYmd(formData.value.factoryEntryDate),
       deviceManager: formData.value.deviceManagerIds?.length ? formData.value.deviceManagerIds.join(',') : undefined,
       componentId: formData.value.componentIds?.length ? formData.value.componentIds.join(',') : undefined,

src/views/mes/deviceledger/detail/index.vue

@@ -47,12 +47,18 @@
           <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceStatus')">
             <dict-tag type="mes_tz_status" :value="detailData?.deviceStatus ?? ''" />
           </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceModel')">
+          <!-- <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceModel')">
             {{ detailData?.deviceModel ?? '' }}
-          </el-descriptions-item>
+          </el-descriptions-item> -->
           <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')">
             {{ detailData?.deviceSpec ?? '' }}
           </el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')">
+            {{ detailData?.deviceBrand ?? '' }}
+          </el-descriptions-item>
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.sn')">
+            {{ detailData?.sn ?? '' }}
+          </el-descriptions-item>
           <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceType')">
             <el-tag effect="light">{{ getDeviceTypeName(detailData?.deviceTypeName ?? detailData?.deviceType) }}</el-tag>
           </el-descriptions-item>
@@ -62,8 +68,8 @@
           <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')">
             {{ deviceManagerName }}
           </el-descriptions-item>
-          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')">
-            {{ formatDetailDate(detailData?.productionDate) }}
+          <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.outgoingTime')">
+            {{ formatDetailDate(detailData?.outgoingTime) }}
           </el-descriptions-item>
           <el-descriptions-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')">
             {{ formatDetailDate(detailData?.factoryEntryDate) }}
@@ -87,6 +93,7 @@
           <QrcodeActionCard
             :image-url="detailData.qrcodeUrl"
             :print-id="detailData.id || detailData.deviceCode"
+            :print-template-type="2"
             :print-title="`${detailData.deviceName || '设备'}码打印预览`"
             :print-paper-width="80"
             :print-paper-height="80"
@@ -462,10 +469,15 @@ const route = useRoute()
 const { delView } = useTagsViewStore()
 const { currentRoute } = useRouter()
 
+type DeviceLedgerDetailVO = DeviceLedgerVO & {
+  sn?: string
+  outgoingTime?: string | number | Date
+}
+
 const deviceId = computed(() => Number(route.params.id))
 const detailLoading = ref(false)
 const tableLoading = ref(false)
-const detailData = ref<DeviceLedgerVO | undefined>()
+const detailData = ref<DeviceLedgerDetailVO | undefined>()
 const detailActiveTab = ref('check')
 
 const deviceTypeNameMap = ref<Record<number, string>>({})
@@ -567,6 +579,8 @@ const buildDetailPrintData = () => {
     deviceName: detailData.value?.deviceName,
     deviceSpec: detailData.value?.deviceSpec,
     deviceBrand: detailData.value?.deviceBrand,
+    sn: detailData.value?.sn,
+    outgoingTime: detailData.value?.outgoingTime,
     deviceModel: detailData.value?.deviceModel,
     deviceLocation: detailData.value?.deviceLocation,
     remark: detailData.value?.remark ?? detailData.value?.deviceRemark,

src/views/mes/deviceledger/index.vue

@@ -66,6 +66,7 @@
             <QrcodeActionCard
               :image-url="treeFormData.qrcodeUrl"
               :print-id="treeFormData.id"
+              :print-template-type="6"
               :print-title="`${treeFormData.name || '设备类型'}码打印预览`"
               :print-paper-width="80"
               :print-paper-height="80"
@@ -90,7 +91,7 @@
 
     <div class="device-ledger-right">
       <ContentWrap>
-        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="60px">
+        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceCode')" prop="deviceCode">
             <el-input v-model="queryParams.deviceCode"
               :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceCode')" clearable
@@ -114,6 +115,21 @@
               :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceType')" clearable
               class="!w-240px" />
           </el-form-item>
+          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" prop="deviceBrand">
+            <el-input v-model="queryParams.deviceBrand"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceBrand')" clearable
+              @keyup.enter="handleQuery" class="!w-240px" />
+          </el-form-item>
+          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.sn')" prop="sn">
+            <el-input v-model="queryParams.sn"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderSn')" clearable
+              @keyup.enter="handleQuery" class="!w-240px" />
+          </el-form-item>
+          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.outgoingTime')" prop="outgoingTime">
+            <el-date-picker v-model="queryParams.outgoingTime" type="date" value-format="YYYY-MM-DD"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderOutgoingTime')" clearable
+              class="!w-240px" />
+          </el-form-item>
           <el-form-item>
             <el-button @click="handleQuery">
               <Icon icon="ep:search" class="mr-5px" />
@@ -193,11 +209,14 @@
               prop="ratedCapacity" min-width="120px" />
             <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')" align="center"
               prop="deviceSpec" />
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" align="center"
+              prop="deviceBrand" min-width="120px" />
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.sn')" align="center"
+              prop="sn" min-width="140px" />
             <!--            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceModel')"
                              align="center" prop="deviceModel"/>-->
-            <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" align="center" prop="deviceBrand" /> -->
-            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.productionDate')" align="center"
-              prop="productionDate" :formatter="dateFormatter2" width="120px" sortable />
+            <el-table-column :label="t('EquipmentManagement.EquipmentLedger.outgoingTime')" align="center"
+              prop="outgoingTime" :formatter="dateFormatter2" width="120px" sortable />
             <el-table-column :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" align="center"
               prop="factoryEntryDate" :formatter="dateFormatter2" width="120px" sortable />
             <!-- <el-table-column :label="t('EquipmentManagement.EquipmentLedger.supplier')" align="center" prop="supplier" width="110px" /> -->
@@ -415,6 +434,9 @@ const queryParams = reactive({
   deviceCode: undefined,
   deviceName: undefined,
   deviceStatus: undefined,
+  deviceBrand: undefined,
+  sn: undefined,
+  outgoingTime: undefined,
   deviceType: undefined as number | undefined,
   deviceLine: undefined as number | undefined,
 })
@@ -725,6 +747,9 @@ const getList = async () => {
       deviceCode: queryParams.deviceCode,
       deviceName: queryParams.deviceName,
       deviceStatus: queryParams.deviceStatus,
+      deviceBrand: queryParams.deviceBrand,
+      sn: queryParams.sn,
+      outgoingTime: queryParams.outgoingTime,
       deviceType: queryParams.deviceType,
       deviceLine: queryParams.deviceLine
     })

src/views/mes/dvrepair/index.vue

@@ -1,7 +1,9 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px">
+  <div class="dv-repair-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
+        <!-- 搜索工作栏 -->
+        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px">
       <el-form-item :label="t('EquipmentManagement.DvRepair.repairCode')" prop="repairCode">
         <el-input
           v-model="queryParams.repairCode"
@@ -104,22 +106,36 @@
           {{ t('action.export') }}
         </el-button>
       </el-form-item>
-    </el-form>
-  </ContentWrap>
+        </el-form>
+      </ContentWrap>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table
-      ref="tableRef"
-      v-loading="loading"
-      :data="list"
-      :stripe="true"
-      :show-overflow-tooltip="true"
-      row-key="id"
-      @selection-change="handleSelectionChange">
+      <!-- 列表 -->
+      <ContentWrap>
+        <el-table
+          ref="tableRef"
+          v-loading="loading"
+          :data="list"
+          :stripe="true"
+          :show-overflow-tooltip="true"
+          row-key="id"
+          @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55px" fixed="left" reserve-selection />
       <el-table-column :label="t('EquipmentManagement.DvRepair.repairCode')" align="center" prop="repairCode" minWidth="180px"   sortable />
       <el-table-column :label="t('EquipmentManagement.DvRepair.repairName')" align="center" prop="repairName"  sortable />
+       <el-table-column :label="t('EquipmentManagement.DvRepair.status')" align="center" prop="status" width="110px" sortable>
+        <template #default="scope">
+          <el-tag :type="getStatusTagType(scope.row.status)" effect="light">
+            {{ getStatusLabel(scope.row.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+        <el-table-column :label="t('EquipmentManagement.DvRepair.repairStatus')" align="center" prop="repairStatus" min-width="120" sortable>
+        <template #default="scope">
+          <el-tag :type="getResultTagType(scope.row.repairStatus)" effect="light">
+            {{ getResultLabel(scope.row.repairStatus) }}
+          </el-tag>
+        </template>
+      </el-table-column>
       <el-table-column :label="t('EquipmentManagement.DvRepair.machineryName')" align="center" prop="machineryName"  minWidth="180px" sortable />
       <el-table-column :label="t('EquipmentManagement.DvRepair.machineryCode')" align="center" prop="machineryCode" minWidth="180px" sortable />
       <!-- <el-table-column label="品牌" align="center" prop="machineryBrand" /> -->
@@ -147,23 +163,8 @@
         prop="confirmDate"
         :formatter="dateFormatter2"
         width="110px"  sortable />
-      <el-table-column :label="t('EquipmentManagement.DvRepair.repairResult')" align="center" prop="repairResult" minWidth="130px"/>
       <el-table-column :label="t('EquipmentManagement.DvRepair.acceptedBy')" align="center" prop="acceptedBy" minWidth="150px"/>
       <el-table-column :label="t('EquipmentManagement.DvRepair.confirmBy')" align="center" prop="confirmBy" minWidth="150px"/>
-      <el-table-column :label="t('EquipmentManagement.DvRepair.status')" align="center" prop="status" width="110px" sortable>
-        <template #default="scope">
-          <el-tag :type="getStatusTagType(scope.row.status)" effect="light">
-            {{ getStatusLabel(scope.row.status) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('EquipmentManagement.DvRepair.repairStatus')" align="center" prop="repairStatus" min-width="120" sortable>
-        <template #default="scope">
-          <el-tag :type="getResultTagType(scope.row.repairStatus)" effect="light">
-            {{ getResultLabel(scope.row.repairStatus) }}
-          </el-tag>
-        </template>
-      </el-table-column>
       <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
       <el-table-column
         :label="t('EquipmentManagement.DvRepair.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="170px"
@@ -172,28 +173,36 @@
         <template #default="scope">
           <el-button
             link type="primary" @click="openForm('repair', scope.row.id)"
-            v-if="String(scope.row.status) !== '1'" v-hasPermi="['mes:dv-repair:update']">
+            v-if="String(scope.row.status) !== '1' && !isProcessedRepair(scope.row.repairStatus)" v-hasPermi="['mes:dv-repair:update']">
             {{ t('EquipmentManagement.DvRepair.repair') }}
           </el-button>
           <el-button
+            v-if="!isProcessedRepair(scope.row.repairStatus)"
             link type="primary" @click="openForm('update', scope.row.id)"
             v-hasPermi="['mes:dv-repair:update']">
             {{ t('action.update') }}
           </el-button>
+          <el-button
+            v-else
+            link type="primary" @click="openForm('detail', scope.row.id)"
+            v-hasPermi="['mes:dv-repair:update']">
+            {{ t('action.detail') }}
+          </el-button>
           <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['mes:dv-repair:delete']">
             {{ t('action.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>
+        </el-table>
+        <!-- 分页 -->
+        <Pagination
+          :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+          @pagination="getList" />
+      </ContentWrap>
+    </template>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <DvRepairForm v-if="formVisible" ref="formRef" @success="getList" @closed="formVisible = false" />
+    <DvRepairForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -276,6 +285,11 @@ const getResultTagType = (value: any) => {
   return 'info'
 }
 
+const isProcessedRepair = (value: any) => {
+  const v = value === '' || value === null || value === undefined ? '0' : String(value)
+  return v !== '0'
+}
+
 const tableRef = ref()
 const selectedIds = ref<number[]>([])
 const handleSelectionChange = (rows: any[]) => {

src/views/mes/printTemplate/PrintTemplateDesigner.vue

@@ -66,10 +66,14 @@
               <span>{{ item.label }}</span>
             </div>
           </div>
-          <div v-if="barcodeElements.length" class="hiprint-title" style="margin-top: 8px">条码类型</div>
-          <div v-if="barcodeElements.length" :id="barcodeDragContainerId" class="hiprint-drag-wrap">
-            <div v-for="item in barcodeElements" :key="item.tid" class="ep-draggable-item hiprint-item" :tid="item.tid">
-              <span style="display: block; text-align: center;" v-html="item.label"></span>
+          <div v-if="barcodeGroups.length" :id="barcodeDragContainerId" class="hiprint-barcode-groups">
+            <div v-for="group in barcodeGroups" :key="group.value" class="hiprint-barcode-group">
+              <div class="hiprint-title hiprint-title-group">{{ group.label }}</div>
+              <div class="hiprint-drag-wrap hiprint-drag-wrap-compact">
+                <div v-for="item in group.elements" :key="item.tid" class="ep-draggable-item hiprint-item" :tid="item.tid">
+                  <span style="display: block; text-align: center;">{{ item.label }}</span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -158,7 +162,18 @@ const ensureIconRuntime = () => {
   ;(window as any).__hiprintBuildIconHtml = buildIconHtml
 }
 
-const barcodeElements = ref<{ tid: string; label: string }[]>([])
+type BarcodeElementItem = {
+  tid: string
+  label: string
+}
+
+type BarcodeElementGroup = {
+  value: string | number
+  label: string
+  elements: BarcodeElementItem[]
+}
+
+const barcodeGroups = ref<BarcodeElementGroup[]>([])
 const barcodeDictData = ref<any[]>([])
 
 const loadBarcodeDictData = async () => {
@@ -166,12 +181,15 @@ const loadBarcodeDictData = async () => {
     const res = await getSimpleDictDataList()
     const filtered = (res || []).filter((item: any) => item.dictType === 'print_template_type')
     barcodeDictData.value = filtered
-    const elements: { tid: string; label: string }[] = []
-    filtered.forEach((item: any) => {
-      elements.push({ tid: `barcodeModule.${item.value}_qrcode`, label: `${item.label}<br/>二维码` })
-      elements.push({ tid: `barcodeModule.${item.value}_text`, label: `${item.label}<br/>文本` })
-    })
-    barcodeElements.value = elements
+    barcodeGroups.value = filtered.map((item: any) => ({
+      value: item.value,
+      label: item.label,
+      elements: [
+        { tid: `barcodeModule.${item.value}_qrcode`, label: '二维码' },
+        { tid: `barcodeModule.${item.value}_name`, label: '名称' },
+        { tid: `barcodeModule.${item.value}_code`, label: '编码' }
+      ]
+    }))
   } catch (e) {
     console.error('加载条码字典数据失败', e)
   }
@@ -186,12 +204,13 @@ const barcodeProvider = function () {
       const remark = item.remark || ''
       const parts = remark.split(',').map((s: string) => s.trim())
       const qrcodeField = parts[0] || ''
-      const textField = parts[1] || ''
+      const nameField = parts[1] || ''
+      const codeField = parts[2] || parts[1] || ''
       groups.push(
         new hiprint.PrintElementTypeGroup(item.label, [
           {
             tid: `barcodeModule.${item.value}_qrcode`,
-            title: `${item.label}`,
+            title: '二维码',
             type: 'image',
             options: {
               field: qrcodeField,
@@ -199,17 +218,31 @@ const barcodeProvider = function () {
               testData: qrCodeImg,
               width: 80,
               height: 80,
-              title: `${item.label}<br/>二维码`
+              title: '二维码'
+            }
+          },
+          {
+            tid: `barcodeModule.${item.value}_name`,
+            title: '名称',
+            type: 'text',
+            options: {
+              field: nameField,
+              testData: '',
+              title: '名称',
+              fontSize: 10,
+              textAlign: 'center',
+              width: 80,
+              height: 16
             }
           },
           {
-            tid: `barcodeModule.${item.value}_text`,
-            title: `${item.label}`,
+            tid: `barcodeModule.${item.value}_code`,
+            title: '编码',
             type: 'text',
             options: {
-              field: textField,
+              field: codeField,
               testData: '',
-              title: `${item.label}<br/>文本`,
+              title: '编码',
               fontSize: 10,
               textAlign: 'center',
               width: 80,
@@ -307,10 +340,13 @@ const paperTypes = {
   B4: { width: 250, height: 352.6 },
   B5: { width: 250, height: 175.6 }
 }
-const curPaper = ref({
+const defaultPaperConfig = {
   type: 'A4',
   width: 210,
   height: 296.6
+}
+const curPaper = ref({
+  ...defaultPaperConfig
 })
 const paperPopVisible = ref(false)
 const paperWidth = ref(220)
@@ -342,6 +378,31 @@ let iconSelectEventKey = ''
 let iconSelectHandler: ((payload: any) => void) | undefined
 let clearSettingHandler: (() => void) | undefined
 
+const normalizePaperConfig = (value: any) => {
+  const width = Number(value?.width)
+  const height = Number(value?.height)
+  if (width <= 0 || height <= 0 || Number.isNaN(width) || Number.isNaN(height)) {
+    return { ...defaultPaperConfig }
+  }
+  return {
+    type: typeof value?.type === 'string' && value.type ? value.type : 'other',
+    width,
+    height
+  }
+}
+
+const applyPaperConfig = (value: any) => {
+  const paper = normalizePaperConfig(value)
+  curPaper.value = paper
+  paperWidth.value = paper.width
+  paperHeight.value = paper.height
+}
+
+const getTemplatePaperConfig = (value: any) => {
+  const panel = Array.isArray(value?.panels) ? value.panels[0] : undefined
+  return panel
+}
+
 const ensureInit = () => {
   if (hiprintInited) {
     return
@@ -444,7 +505,7 @@ const buildLeftElement = () => {
     return
   }
   hiprint.PrintElementTypeManager.buildByHtml(jquery(`#${dragContainerId} .ep-draggable-item`))
-  if (barcodeElements.value.length) {
+  if (barcodeGroups.value.length) {
     hiprint.PrintElementTypeManager.buildByHtml(jquery(`#${barcodeDragContainerId} .ep-draggable-item`))
   }
 }
@@ -549,13 +610,7 @@ const handleSave = async () => {
 const resetState = () => {
   scaleValue.value = 1
   setSelectedIconState(null)
-  curPaper.value = {
-    type: 'A4',
-    width: 210,
-    height: 296.6
-  }
-  paperWidth.value = 220
-  paperHeight.value = 80
+  applyPaperConfig(defaultPaperConfig)
   paperPopVisible.value = false
 }
 
@@ -564,6 +619,7 @@ const open = async (row: any) => {
   dialogTitle.value = `${t('TemplateManagement.PrintTemplate.designTitle')}${row.templateName ? ' - ' + row.templateName : ''}`
   currentTemplateJson.value = row.templateJson ? (typeof row.templateJson === 'string' ? JSON.parse(row.templateJson) : row.templateJson) : undefined
   resetState()
+  applyPaperConfig(getTemplatePaperConfig(currentTemplateJson.value))
   await loadBarcodeDictData()
   dialogVisible.value = true
   await nextTick()
@@ -664,10 +720,18 @@ watch(selectedIconColor, () => {
   font-weight: 600;
 }
 
+.hiprint-title-group {
+  padding-top: 12px;
+}
+
 .hiprint-title-inline {
   padding: 0 0 12px;
 }
 
+.hiprint-barcode-groups {
+  padding-bottom: 10px;
+}
+
 .hiprint-drag-wrap {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -675,6 +739,11 @@ watch(selectedIconColor, () => {
   padding: 10px;
 }
 
+.hiprint-drag-wrap-compact {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  padding-top: 8px;
+}
+
 .hiprint-item {
   min-height: 56px;
   display: flex;

src/views/mes/printTemplate/ReportTemplateDesigner.vue

@@ -528,10 +528,13 @@ const paperTypes = {
   B4: { width: 250, height: 352.6 },
   B5: { width: 250, height: 175.6 }
 }
-const curPaper = ref({
+const defaultPaperConfig = {
   type: 'A4',
   width: 210,
   height: 296.6
+}
+const curPaper = ref({
+  ...defaultPaperConfig
 })
 const paperPopVisible = ref(false)
 const paperWidth = ref(220)
@@ -563,6 +566,31 @@ let iconSelectEventKey = ''
 let iconSelectHandler: ((payload: any) => void) | undefined
 let clearSettingHandler: (() => void) | undefined
 
+const normalizePaperConfig = (value: any) => {
+  const width = Number(value?.width)
+  const height = Number(value?.height)
+  if (width <= 0 || height <= 0 || Number.isNaN(width) || Number.isNaN(height)) {
+    return { ...defaultPaperConfig }
+  }
+  return {
+    type: typeof value?.type === 'string' && value.type ? value.type : 'other',
+    width,
+    height
+  }
+}
+
+const applyPaperConfig = (value: any) => {
+  const paper = normalizePaperConfig(value)
+  curPaper.value = paper
+  paperWidth.value = paper.width
+  paperHeight.value = paper.height
+}
+
+const getTemplatePaperConfig = (value: any) => {
+  const panel = Array.isArray(value?.panels) ? value.panels[0] : undefined
+  return panel
+}
+
 const ensureInit = () => {
   if (hiprintInited) {
     return
@@ -788,13 +816,7 @@ const handleSave = async () => {
 const resetState = () => {
   scaleValue.value = 1
   setSelectedIconState(null)
-  curPaper.value = {
-    type: 'A4',
-    width: 210,
-    height: 296.6
-  }
-  paperWidth.value = 220
-  paperHeight.value = 80
+  applyPaperConfig(defaultPaperConfig)
   paperPopVisible.value = false
 }
 
@@ -803,6 +825,7 @@ const open = async (row: any) => {
   dialogTitle.value = `${t('TemplateManagement.PrintTemplate.designTitle')}${row.templateName ? ' - ' + row.templateName : ''}`
   currentTemplateJson.value = row.templateJson ? (typeof row.templateJson === 'string' ? JSON.parse(row.templateJson) : row.templateJson) : undefined
   resetState()
+  applyPaperConfig(getTemplatePaperConfig(currentTemplateJson.value))
   dialogVisible.value = true
   await nextTick()
   ensureInit()

src/views/mes/taskManagement/index.vue

@@ -38,6 +38,25 @@
           <el-option v-for="item in planOptions" :key="String(item.id)" :label="item.planName" :value="String(item.id)" />
         </el-select>
       </el-form-item>
+      <el-form-item :label="t('EquipmentManagement.TaskManagement.deviceList')" prop="deviceIds">
+        <el-select
+          v-model="queryParams.deviceIds"
+          multiple
+          filterable
+          clearable
+          collapse-tags
+          collapse-tags-tooltip
+          :placeholder="t('EquipmentManagement.TaskManagement.placeholderDeviceList')"
+          class="!w-240px"
+        >
+          <el-option
+            v-for="item in deviceOptions"
+            :key="item.id"
+            :label="item.label"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery">
           <Icon icon="ep:search" class="mr-5px" />
@@ -86,6 +105,16 @@
         prop="name"
         min-width="200"
        sortable />
+      <el-table-column
+        :label="t('EquipmentManagement.TaskManagement.deviceList')"
+        align="center"
+        prop="deviceList"
+        min-width="180"
+      >
+        <template #default="scope">
+          <span>{{ getDeviceNames(scope.row.deviceList) }}</span>
+        </template>
+      </el-table-column>
       <el-table-column
         :label="t('EquipmentManagement.TaskManagement.taskType')"
         align="center"
@@ -209,6 +238,7 @@ import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { TaskManagementApi, TaskManagementVO } from '@/api/mes/taskManagement'
+import { DeviceLedgerApi, DeviceLedgerVO } from '@/api/mes/deviceledger'
 import { PlanMaintenanceApi } from '@/api/mes/planmaintenance'
 import TaskManagementForm from './TaskManagementForm.vue'
 
@@ -234,13 +264,15 @@ type PlanOption = {
 }
 
 const planOptions = ref<PlanOption[]>([])
+const deviceOptions = ref<{ id: number; label: string; raw?: DeviceLedgerVO }[]>([])
 
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: undefined as string | undefined,
   taskType: undefined as number | undefined,
-  projectForm: [] as string[]
+  projectForm: [] as string[],
+  deviceIds: [] as number[]
 })
 const queryFormRef = ref()
 
@@ -263,6 +295,30 @@ const ensurePlanOptionsLoaded = async () => {
   planOptions.value = (planRes?.list ?? []) as PlanOption[]
 }
 
+const ensureDeviceOptionsLoaded = async () => {
+  const deviceRes = await DeviceLedgerApi.getDeviceLedgerList()
+  const rows = (Array.isArray(deviceRes) ? deviceRes : deviceRes?.list ?? deviceRes?.data ?? []) as DeviceLedgerVO[]
+  deviceOptions.value = rows
+    .filter((item) => typeof item?.id === 'number')
+    .map((item) => ({
+      id: item.id,
+      label: `${item.deviceCode ?? ''} ${item.deviceName ?? ''}`.trim() || String(item.id),
+      raw: item
+    }))
+}
+
+const getDeviceNames = (value: any) => {
+  const ids = parseIdsValue(value)
+  if (!ids.length) return '-'
+  const names = ids
+    .map((id) => {
+      const option = deviceOptions.value.find((item) => String(item.id) === id)
+      return option?.raw?.deviceName ?? option?.label?.split(' ').slice(1).join(' ') ?? id
+    })
+    .filter(Boolean)
+  return names.length ? names.join('，') : '-'
+}
+
 const buildQueryParams = () => {
   return {
     ...queryParams,
@@ -370,6 +426,6 @@ const handleExport = async () => {
 }
 
 onMounted(() => {
-  Promise.all([ensurePlanOptionsLoaded(), getList()])
+  Promise.all([ensurePlanOptionsLoaded(), ensureDeviceOptionsLoaded(), getList()])
 })
 </script>

src/views/mold/moldrepair/MoldRepairForm.vue

@@ -1,149 +1,154 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px" @closed="handleDialogClosed">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
-      <el-row>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.repairCode')" prop="repairCode">
-<template #label>
-    <span>
-      {{ t('MoldManagement.MoldRepair.repairCode') }}
-      <el-tooltip :content="t('MoldManagement.MoldRepair.repairCode')" placement="top">
-        <Icon icon="ep:question-filled" />
-      </el-tooltip>
-    </span>
-  </template>
-  <el-row :gutter="10" style="width: 100%;">
-    <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
-      <el-input 
-        :disabled="formData.isCode == true || formType === 'update'" 
-        v-model="formData.repairCode" 
-        :placeholder="t('common.code')"
-      />
-    </el-col>
-    <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
-      <div>
-        <el-switch 
-          v-model="formData.isCode" 
-          :disabled="formType === 'update'"
-        />
-      </div>
-    </el-col>
-  </el-row>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.repairName')" prop="repairName">
-            <el-input
-              v-model="formData.repairName"
-              :placeholder="t('MoldManagement.MoldRepair.placeholderRepairName')"
-              :disabled="isRepairMode"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.mold')" prop="moldId">
-            <el-select
-              v-model="formData.moldId" filterable clearable :loading="moldLoading"
-              :disabled="isRepairMode"
-              :placeholder="t('MoldManagement.MoldRepair.placeholderMold')"
-              class="!w-full"
-            >
-              <el-option v-for="opt in moldOptions" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.moldName')" prop="moldName" :required="false">
-            <el-input v-model="formData.moldName" :placeholder="t('MoldManagement.MoldRepair.placeholderMoldNameAuto')" disabled />
-          </el-form-item>
-        </el-col>
-         <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.moldCode')" prop="moldCode" :required="false">
-            <el-input v-model="formData.moldCode" :placeholder="t('MoldManagement.MoldRepair.placeholderMoldCodeAuto')" disabled />
-          </el-form-item>
-        </el-col>
-        <!-- <el-col :span="8">
-          <el-form-item label="规格型号" prop="machinerySpec" :required="false">
-            <el-input v-model="formData.machinerySpec" placeholder="自动带出" disabled />
-          </el-form-item>
-          <el-form-item label="品牌" prop="machineryBrand" :required="false">
-            <el-input v-model="formData.machineryBrand" placeholder="自动带出" disabled />
-          </el-form-item>
-        </el-col> -->
-      </el-row>
-      <el-row>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.repairUser')" prop="acceptedBy">
-            <el-select
-              v-model="formData.acceptedBy" filterable clearable
-              :placeholder="t('MoldManagement.MoldRepair.placeholderAcceptUser')"
-              class="!w-full"
-              :disabled="isRepairMode">
-              <el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldRepair.confirmUser')" prop="confirmBy">
-            <el-select
-              v-model="formData.confirmBy" filterable clearable
-              :placeholder="t('MoldManagement.MoldRepair.placeholderConfirmUser')"
-              class="!w-full"
-              :disabled="isRepairMode">
-              <el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <template v-if="showRepairFields">
-        <el-row>
-          <el-col :span="8">
-            <el-form-item :label="t('MoldManagement.MoldRepair.requireDate')" prop="requireDate">
-              <el-date-picker
-                v-model="formData.requireDate" type="date" value-format="x"
-                :placeholder="t('MoldManagement.MoldRepair.placeholderRequireDate')"
-                class="!w-full" :disabled="repairFieldsDisabled"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item :label="t('MoldManagement.MoldRepair.finishDate')" prop="finishDate">
-              <el-date-picker
-                v-model="formData.finishDate" type="date" value-format="x"
-                :placeholder="t('MoldManagement.MoldRepair.placeholderFinishDate')"
-                class="!w-full" :disabled="repairFieldsDisabled"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item :label="t('MoldManagement.MoldRepair.confirmDate')" prop="confirmDate">
-              <el-date-picker
-                v-model="formData.confirmDate" type="date" value-format="x"
-                :placeholder="t('MoldManagement.MoldRepair.placeholderConfirmDate')"
-                class="!w-full" :disabled="repairFieldsDisabled"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item :label="t('MoldManagement.MoldRepair.repairResult')" prop="repairResult">
-          <Editor v-model="formData.repairResult" height="150px" :readonly="repairFieldsDisabled" />
-        </el-form-item>
-      </template>
-    </el-form>
-    <el-tabs v-model="subTabsName">
-      <el-tab-pane :label="t('MoldManagement.MoldRepair.tabMoldRepairLine')" name="moldRepairLine">
-        <MoldRepairLineForm ref="moldRepairLineFormRef" :repair-id="formData.id" :line-mode="lineMode" />
-      </el-tab-pane>
-    </el-tabs>
-    <template #footer>
+  <div class="dv-repair-panel">
+    <div class="dv-repair-panel__header">
+      <div class="dv-repair-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="dv-repair-dialog" v-loading="formLoading">
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+        <section class="dv-repair-section">
+          <div class="dv-repair-section__title">基本信息</div>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.repairCode')" prop="repairCode">
+                <template #label>
+                  <span>
+                    {{ t('MoldManagement.MoldRepair.repairCode') }}
+                    <el-tooltip :content="t('MoldManagement.MoldRepair.repairCode')" placement="top">
+                      <Icon icon="ep:question-filled" />
+                    </el-tooltip>
+                  </span>
+                </template>
+                <div class="dv-repair-code-row">
+                  <el-input
+                    :disabled="formData.isCode == true || formType === 'update'"
+                    v-model="formData.repairCode"
+                    :placeholder="t('common.code')"
+                  />
+                  <el-switch
+                    v-model="formData.isCode"
+                    :disabled="formType === 'update'"
+                  />
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.repairName')" prop="repairName">
+                <el-input
+                  v-model="formData.repairName"
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderRepairName')"
+                  :disabled="isRepairMode"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.mold')" prop="moldId">
+                <el-select
+                  v-model="formData.moldId" filterable clearable :loading="moldLoading"
+                  :disabled="isRepairMode"
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderMold')"
+                  class="!w-full"
+                >
+                  <el-option v-for="opt in moldOptions" :key="String(opt.value)" :label="opt.label" :value="opt.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.moldName')" prop="moldName" :required="false">
+                <el-input v-model="formData.moldName" :placeholder="t('MoldManagement.MoldRepair.placeholderMoldNameAuto')" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.moldCode')" prop="moldCode" :required="false">
+                <el-input v-model="formData.moldCode" :placeholder="t('MoldManagement.MoldRepair.placeholderMoldCodeAuto')" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.repairUser')" prop="acceptedBy">
+                <el-select
+                  v-model="formData.acceptedBy" filterable clearable
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderAcceptUser')"
+                  class="!w-full"
+                  :disabled="isRepairMode">
+                  <el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.confirmUser')" prop="confirmBy">
+                <el-select
+                  v-model="formData.confirmBy" filterable clearable
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderConfirmUser')"
+                  class="!w-full"
+                  :disabled="isRepairMode">
+                  <el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </section>
+
+        <section v-if="showRepairFields" class="dv-repair-section">
+          <div class="dv-repair-section__title">处理结果</div>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.requireDate')" prop="requireDate">
+                <el-date-picker
+                  v-model="formData.requireDate" type="date" value-format="x"
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderRequireDate')"
+                  class="!w-full" :disabled="repairFieldsDisabled"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.finishDate')" prop="finishDate">
+                <el-date-picker
+                  v-model="formData.finishDate" type="date" value-format="x"
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderFinishDate')"
+                  class="!w-full" :disabled="repairFieldsDisabled"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('MoldManagement.MoldRepair.confirmDate')" prop="confirmDate">
+                <el-date-picker
+                  v-model="formData.confirmDate" type="date" value-format="x"
+                  :placeholder="t('MoldManagement.MoldRepair.placeholderConfirmDate')"
+                  class="!w-full" :disabled="repairFieldsDisabled"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item :label="t('MoldManagement.MoldRepair.repairResult')" prop="repairResult">
+                <Editor v-model="formData.repairResult" height="150px" :readonly="repairFieldsDisabled" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </section>
+      </el-form>
+
+      <el-tabs v-model="subTabsName" style="margin-top: 16px;">
+        <el-tab-pane :label="t('MoldManagement.MoldRepair.tabMoldRepairLine')" name="moldRepairLine">
+          <MoldRepairLineForm ref="moldRepairLineFormRef" :repair-id="formData.id" :line-mode="lineMode" />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <div class="dv-repair-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
+
 <script setup lang="ts">
 import { MoldRepairApi, MoldRepairVO } from '@/api/mold/moldrepair'
 import { MoldRepairItemsApi } from '@/api/mold/moldRepairItems'
@@ -156,7 +161,6 @@ defineOptions({ name: 'MoldRepairForm' })
 const { t } = useI18n()
 const message = useMessage()
 
-const dialogVisible = ref(false)
 const dialogTitle = ref('')
 const formLoading = ref(false)
 const formType = ref('')
@@ -164,6 +168,7 @@ const isRepairMode = computed(() => formType.value === 'update' || formType.valu
 const showRepairFields = computed(() => formType.value === 'update' || formType.value === 'repair')
 const repairFieldsDisabled = computed(() => formType.value !== 'repair')
 const isHydrating = ref(false)
+const openRequestId = ref(0)
 const emit = defineEmits(['success', 'closed'])
 const formData = ref({
   id: undefined,
@@ -397,29 +402,21 @@ const prefillLinesByMold = async (moldId: number | undefined) => {
   setLineRows(list.map(toMoldRepairLineRow))
 }
 
-let openRequestId = 0
-
 const open = async (type: string, id?: number) => {
-  const currentOpenId = ++openRequestId
-  dialogVisible.value = true
-  dialogTitle.value =
-    type === 'repair'
-      ? t('MoldManagement.MoldRepair.dialogTitleRepair')
-      : type === 'create'
-        ? t('MoldManagement.MoldRepair.dialogTitleCreate')
-        : t('MoldManagement.MoldRepair.dialogTitleUpdate')
+  const currentOpenId = ++openRequestId.value
+  dialogTitle.value = type === 'repair' ? '维修处理结果' : t('action.' + type)
   formType.value = type
   resetForm()
   await ensureUsersLoaded()
   await ensureMoldOptionsLoaded()
-  if (currentOpenId !== openRequestId) return
+  if (currentOpenId !== openRequestId.value) return
   if (id) {
     formLoading.value = true
     try {
       isHydrating.value = true
       formData.value = await MoldRepairApi.getMoldRepair(id)
 
-      if (currentOpenId !== openRequestId) return
+      if (currentOpenId !== openRequestId.value) return
 
       ;(formData.value as any).requireDate = (formData.value as any).requireDate ?? undefined
       ;(formData.value as any).finishDate = (formData.value as any).finishDate ?? undefined
@@ -456,66 +453,25 @@ const open = async (type: string, id?: number) => {
 }
 defineExpose({ open })
 
-const handleDialogClosed = () => {
-  openRequestId++
+const closeForm = () => {
+  openRequestId.value++
   emit('closed')
 }
 
-onBeforeUnmount(() => {
-  openRequestId++
-})
-
 const submitForm = async () => {
   await formRef.value.validate()
-  try {
-    await moldRepairLineFormRef.value.validate()
-  } catch {
-    subTabsName.value = 'moldRepairLine'
-    return
-  }
   formLoading.value = true
   try {
-    const data = { ...(formData.value as any) } as MoldRepairVO & { moldId?: number; componentId?: number }
-      ;(data as any).acceptedBy = normalizeUserId((data as any).acceptedBy)
-      ;(data as any).confirmBy = normalizeUserId((data as any).confirmBy)
-      ;(data as any).moldCode = (data as any).moldCode ?? (data as any).machineryCode
-      ;(data as any).moldName = (data as any).moldName ?? (data as any).machineryName
-
-    delete (data as any).machineryId
-    delete (data as any).machineryCode
-    delete (data as any).machineryName
-    if (formType.value === 'repair') {
-      ;(data as any).status = 1
-    }
-    ;(data as any).moldId = formData.value.moldId
-    const lineList = moldRepairLineFormRef.value.getData() || []
-
-    if (formType.value === 'repair') {
-      const requireDate = (data as any).requireDate
-      const finishDate = (data as any).finishDate
-      const confirmDate = (data as any).confirmDate
-      const repairResult = (data as any).repairResult
-      const updateReqVOList = lineList
-      await MoldRepairApi.updateMoldRepairStatus({
-        id: (data as any).id,
-        requireDate,
-        finishDate,
-        confirmDate,
-        repairResult,
-        updateReqVOList,
-      })
-      message.success(t('common.updateSuccess'))
+    const data = { ...formData.value }
+    if (formType.value === 'create') {
+      await MoldRepairApi.createMoldRepair(data)
+      message.success(t('common.createSuccess'))
     } else {
-      ;(data as any).moldRepairLines = lineList
-      if (formType.value === 'create') {
-        await MoldRepairApi.createMoldRepair(data)
-        message.success(t('common.createSuccess'))
-      } else {
-        await MoldRepairApi.updateMoldRepair(data)
-        message.success(t('common.updateSuccess'))
-      }
+      await MoldRepairApi.updateMoldRepair(data)
+      message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
+    await moldRepairLineFormRef.value?.submit()
+    closeForm()
     emit('success')
   } finally {
     formLoading.value = false
@@ -546,3 +502,85 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.dv-repair-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.dv-repair-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.dv-repair-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.dv-repair-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.dv-repair-section {
+  margin-bottom: 20px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.dv-repair-section__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 16px;
+  padding-left: 8px;
+  border-left: 3px solid #409eff;
+}
+
+.dv-repair-code-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.dv-repair-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 1200px) {
+  .dv-repair-section .el-col {
+    flex: 0 0 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .dv-repair-panel__header {
+    padding: 14px 16px;
+  }
+
+  .dv-repair-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .dv-repair-footer {
+    padding: 16px;
+  }
+}
+</style>

src/views/mold/moldrepair/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <ContentWrap>
+  <ContentWrap v-if="!formVisible">
+    <!-- 搜索工作栏 -->
     <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px">
       <el-form-item :label="t('MoldManagement.MoldRepair.repairCode')" prop="repairCode">
         <el-input
@@ -106,7 +107,8 @@
     </el-form>
   </ContentWrap>
 
-  <ContentWrap>
+  <ContentWrap v-if="!formVisible">
+    <!-- 列表 -->
     <el-table
       ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
       @selection-change="handleSelectionChange">
@@ -179,17 +181,19 @@
         </template>
       </el-table-column>
     </el-table>
+    <!-- 分页 -->
     <Pagination
       :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
   </ContentWrap>
 
-  <MoldRepairForm v-if="formVisible" ref="formRef" @success="getList" @closed="formVisible = false" />
+  <div v-if="formVisible">
+    <MoldRepairForm ref="formRef" @success="handleFormSuccess" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { DICT_TYPE } from '@/utils/dict'
-import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
+import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { MoldRepairApi, MoldRepairVO } from '@/api/mold/moldrepair'
 import MoldRepairForm from './MoldRepairForm.vue'
@@ -302,8 +306,8 @@ const resetQuery = () => {
   handleQuery()
 }
 
-const formRef = ref()
 const formVisible = ref(false)
+const formRef = ref()
 
 const openForm = async (type: string, id?: number) => {
   formVisible.value = true
@@ -311,6 +315,11 @@ const openForm = async (type: string, id?: number) => {
   formRef.value?.open(type, id)
 }
 
+const handleFormSuccess = () => {
+  formVisible.value = false
+  getList()
+}
+
 const buildIdsParam = (ids: number | number[]) => {
   return Array.isArray(ids) ? ids.join(',') : String(ids)
 }

src/views/system/menu/MenuForm.vue

@@ -66,16 +66,6 @@
       <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 && formData.type === SystemMenuTypeEnum.DIR"
-        :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
@@ -162,15 +152,13 @@ const formData = ref({
   visible: true,
   keepAlive: true,
   alwaysShow: true,
-  clientType: 1,
-  terminalType: 1
+  clientType: 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' }],
-  terminalType: [{ required: clientType.value === 2 && formData.value.type === SystemMenuTypeEnum.DIR, message: t('SystemManagement.Menu.terminalTypeRequired'), trigger: 'change' }]
+  status: [{ required: true, message: t('SystemManagement.Menu.statusRequired'), trigger: 'blur' }]
 }))
 const formRef = ref() // 表单 Ref
 
@@ -222,16 +210,13 @@ const submitForm = async () => {
         }
       }
     }
-    const data = formData.value as unknown as MenuApi.MenuVO & { terminalType?: number }
+    const { terminalType: _terminalType, ...data } = formData.value as typeof formData.value & { terminalType?: number }
     data.clientType = clientType.value
-    data.terminalType = clientType.value === 2 && formData.value.type === SystemMenuTypeEnum.DIR
-      ? formData.value.terminalType
-      : undefined
     if (formType.value === 'create') {
-      await MenuApi.createMenu(data)
+      await MenuApi.createMenu(data as unknown as MenuApi.MenuVO)
       message.success(t('common.createSuccess'))
     } else {
-      await MenuApi.updateMenu(data)
+      await MenuApi.updateMenu(data as unknown as MenuApi.MenuVO)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -272,8 +257,7 @@ const resetForm = () => {
     visible: true,
     keepAlive: true,
     alwaysShow: true,
-    clientType: 1,
-    terminalType: 1
+    clientType: 1
   }
   formRef.value?.resetFields()
 }

src/views/system/menu/index.vue

@@ -88,16 +88,6 @@
         </template>
       </el-table-column>
       <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 />
@@ -197,11 +187,6 @@ 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()

src/views/system/role/RoleAssignMenuForm.vue

@@ -16,6 +16,12 @@
       <el-form-item :label="t('SystemManagement.Role.menuPermission')">
         <el-card class="w-full h-400px !overflow-y-scroll" shadow="never">
           <template #header>
+            <div class="role-assign-menu-form__header">
+              <el-tabs v-model="activeClientType" @tab-change="handleClientTypeChange">
+                <el-tab-pane :label="t('SystemManagement.Menu.clientTypeWeb')" :name="1" />
+                <el-tab-pane :label="t('SystemManagement.Menu.clientTypeApp')" :name="2" />
+              </el-tabs>
+              <div class="role-assign-menu-form__actions">
             {{ t('SystemManagement.Role.selectAll') }}:
             <el-switch
               v-model="treeNodeAll"
@@ -32,6 +38,8 @@
               inline-prompt
               @change="handleCheckedTreeExpand"
             />
+              </div>
+            </div>
           </template>
           <el-tree
             ref="treeRef"
@@ -58,12 +66,19 @@ import * as PermissionApi from '@/api/system/permission'
 
 defineOptions({ name: 'SystemRoleAssignMenuForm' })
 
+interface RoleAssignMenuFormData {
+  id: number | undefined
+  name: string
+  code: string
+  menuIds: number[]
+}
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formData = reactive({
+const formData = reactive<RoleAssignMenuFormData>({
   id: undefined,
   name: '',
   code: '',
@@ -74,30 +89,80 @@ const menuOptions = ref<any[]>([]) // 菜单树形结构
 const menuExpand = ref(false) // 展开/折叠
 const treeRef = ref() // 菜单树组件 Ref
 const treeNodeAll = ref(false) // 全选/全不选
+const activeClientType = ref(1) // 客户端类型：1=Web，2=APP
+const currentTreeClientType = ref(1) // 当前树实际对应的客户端类型
+const roleMenuIdsByClientType = reactive<Record<number, number[]>>({
+  1: [],
+  2: []
+})
+const loadedClientTypes = reactive<Record<number, boolean>>({
+  1: false,
+  2: false
+})
+
+const getCurrentTreeMenuIds = () => {
+  if (!treeRef.value) return []
+  return Array.from(new Set([
+    ...(treeRef.value.getCheckedKeys(false) as Array<number>),
+    ...(treeRef.value.getHalfCheckedKeys() as Array<number>)
+  ]))
+}
+
+const saveCurrentClientMenuIds = () => {
+  if (!dialogVisible.value) return
+  roleMenuIdsByClientType[currentTreeClientType.value] = getCurrentTreeMenuIds()
+}
+
+const ensureRoleMenuIdsLoaded = async (roleId: number, clientType: number) => {
+  if (loadedClientTypes[clientType]) return
+  roleMenuIdsByClientType[clientType] = await PermissionApi.getRoleMenuList(roleId, clientType)
+  loadedClientTypes[clientType] = true
+}
+
+const loadRoleMenus = async (roleId: number) => {
+  currentTreeClientType.value = activeClientType.value
+  treeNodeAll.value = false
+  menuExpand.value = false
+  treeRef.value?.setCheckedNodes([])
+  menuOptions.value = handleTree(await MenuApi.getSimpleMenusList(currentTreeClientType.value))
+  await ensureRoleMenuIdsLoaded(roleId, currentTreeClientType.value)
+  await nextTick()
+  formData.menuIds = roleMenuIdsByClientType[currentTreeClientType.value] ?? []
+  formData.menuIds.forEach((menuId: number) => {
+    treeRef.value.setChecked(menuId, true, false)
+  })
+}
 
 /** 打开弹窗 */
 const open = async (row: RoleApi.RoleVO) => {
   dialogVisible.value = true
   resetForm()
-  // 加载 Menu 列表。注意，必须放在前面，不然下面 setChecked 没数据节点
-  menuOptions.value = handleTree(await MenuApi.getSimpleMenusList())
   // 设置数据
   formData.id = row.id
   formData.name = row.name
   formData.code = row.code
   formLoading.value = true
   try {
-    formData.menuIds = await PermissionApi.getRoleMenuList(row.id)
-    // 设置选中
-    formData.menuIds.forEach((menuId: number) => {
-      treeRef.value.setChecked(menuId, true, false)
-    })
+    await loadRoleMenus(row.id)
   } finally {
     formLoading.value = false
   }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
+/** 切换客户端类型 */
+const handleClientTypeChange = async (val: number | string) => {
+  saveCurrentClientMenuIds()
+  activeClientType.value = Number(val)
+  if (!dialogVisible.value || !formData.id) return
+  formLoading.value = true
+  try {
+    await loadRoleMenus(formData.id)
+  } finally {
+    formLoading.value = false
+  }
+}
+
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
@@ -105,15 +170,18 @@ const submitForm = async () => {
   if (!formRef) return
   const valid = await formRef.value.validate()
   if (!valid) return
+  if (formData.id === undefined) return
+  saveCurrentClientMenuIds()
   // 提交请求
   formLoading.value = true
   try {
+    await Promise.all([1, 2].map((clientType) => ensureRoleMenuIdsLoaded(formData.id as number, clientType)))
     const data = {
       roleId: formData.id,
-      menuIds: [
-        ...(treeRef.value.getCheckedKeys(false) as unknown as Array<number>), // 获得当前选中节点
-        ...(treeRef.value.getHalfCheckedKeys() as unknown as Array<number>) // 获得半选中的父节点
-      ]
+      menuIds: Array.from(new Set([
+        ...roleMenuIdsByClientType[1],
+        ...roleMenuIdsByClientType[2]
+      ]))
     }
     await PermissionApi.assignRoleMenu(data)
     message.success(t('common.updateSuccess'))
@@ -128,6 +196,8 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   // 重置选项
+  activeClientType.value = 1
+  currentTreeClientType.value = 1
   treeNodeAll.value = false
   menuExpand.value = false
   // 重置表单
@@ -135,6 +205,10 @@ const resetForm = () => {
   formData.name = ''
   formData.code = ''
   formData.menuIds = []
+  roleMenuIdsByClientType[1] = []
+  roleMenuIdsByClientType[2] = []
+  loadedClientTypes[1] = false
+  loadedClientTypes[2] = false
   treeRef.value?.setCheckedNodes([])
   formRef.value?.resetFields()
 }
@@ -160,4 +234,22 @@ const handleCheckedTreeExpand = () => {
 .role-assign-menu-form :deep(.el-form-item__label) {
   min-width: 80px;
 }
+
+.role-assign-menu-form__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.role-assign-menu-form__header :deep(.el-tabs__header) {
+  margin: 0;
+}
+
+.role-assign-menu-form__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 </style>