diff --git a/src/api/mes/deviceledger/index.ts b/src/api/mes/deviceledger/index.ts
index 32040d08..d14f7e03 100644
--- a/src/api/mes/deviceledger/index.ts
+++ b/src/api/mes/deviceledger/index.ts
@@ -102,5 +102,14 @@ export const DeviceLedgerApi = {
 
     exportMold: async (params) => {
     return await request.download({ url: `/mes/device-ledger/export-mold`, params })
+  },
+
+  // 查询设备关键件明细
+  getDeviceCriticalComponent: async (id: number) => {
+    return await request.get({ url: `/mes/device-critical-component/getDetails?deviceId=` + id })
+  },
+
+  exportDeviceComponent: async (params: any) => {
+    return await request.download({ url: `/mes/device-critical-component/export-excel`, params })
   }
 }
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index d1e56667..56deda1e 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -716,6 +716,17 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: '/mes/deviceledger'
         },
         component: () => import('@/views/mes/deviceledger/detail/index.vue')
+      },
+      {
+        path: 'device-ledger/detail/editIndex:id',
+        name: 'MesDeviceLedgerEditDetail',
+        meta: {
+          title: '编辑设备台账',
+          noCache: true,
+          hidden: true,
+          activeMenu: '/mes/deviceledger'
+        },
+        component: () => import('@/views/mes/deviceledger/detail/editIndex.vue')
       }
     ]
   }
diff --git a/src/views/erp/component/in/StockInForm.vue b/src/views/erp/component/in/StockInForm.vue
index 03cee405..bf4c1cc4 100644
--- a/src/views/erp/component/in/StockInForm.vue
+++ b/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>
diff --git a/src/views/erp/component/in/index.vue b/src/views/erp/component/in/index.vue
index 39a1a982..38bf25e8 100644
--- a/src/views/erp/component/in/index.vue
+++ b/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)
 }
 
 /** 删除按钮操作 */
diff --git a/src/views/erp/component/out/StockOutForm.vue b/src/views/erp/component/out/StockOutForm.vue
index 2ae3ed78..058541a3 100644
--- a/src/views/erp/component/out/StockOutForm.vue
+++ b/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>
diff --git a/src/views/erp/component/out/index.vue b/src/views/erp/component/out/index.vue
index e2da4546..e89456bb 100644
--- a/src/views/erp/component/out/index.vue
+++ b/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)
 }
 
 /** 删除按钮操作 */
diff --git a/src/views/erp/stock/out/StockOutForm.vue b/src/views/erp/stock/out/StockOutForm.vue
index beda1977..d95fd506 100644
--- a/src/views/erp/stock/out/StockOutForm.vue
+++ b/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>
diff --git a/src/views/erp/stock/out/index.vue b/src/views/erp/stock/out/index.vue
index f11f485c..98fe6a75 100644
--- a/src/views/erp/stock/out/index.vue
+++ b/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)
 }
 
 /** 删除按钮操作 */
diff --git a/src/views/iot/feedback/FeedbackForm.vue b/src/views/iot/feedback/FeedbackForm.vue
index 6482e582..cd968fe6 100644
--- a/src/views/iot/feedback/FeedbackForm.vue
+++ b/src/views/iot/feedback/FeedbackForm.vue
@@ -1,28 +1,34 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="800px">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="标题" prop="title">
-        <el-input v-model="formData.title" placeholder="请输入标题" />
-      </el-form-item>
-      <el-form-item label="标签" prop="tags">
-        <el-input v-model="formData.tags" placeholder="请输入标签" />
-      </el-form-item>
-      <el-form-item label="内容" prop="content">
-        <Editor v-model="formData.content" height="150px" />
-      </el-form-item>
-
-    </el-form>
-    <template #footer>
+  <div class="feedback-panel">
+    <div class="feedback-panel__header">
+      <div class="feedback-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="feedback-dialog" v-loading="formLoading">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+      >
+        <el-form-item label="标题" prop="title">
+          <el-input v-model="formData.title" placeholder="请输入标题" />
+        </el-form-item>
+        <el-form-item label="标签" prop="tags">
+          <el-input v-model="formData.tags" placeholder="请输入标签" />
+        </el-form-item>
+        <el-form-item label="内容" prop="content">
+          <Editor v-model="formData.content" height="150px" />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="feedback-footer">
+      <el-button @click="closeForm">取 消</el-button>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { FeedbackApi, FeedbackVO } from '@/api/iot/feedback'
@@ -33,7 +39,6 @@ defineOptions({ name: 'FeedbackForm' })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
-const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
@@ -50,7 +55,6 @@ const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -66,8 +70,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()
@@ -82,7 +90,7 @@ const submitForm = async () => {
       await FeedbackApi.updateFeedback(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
+    closeForm()
     // 发送操作成功的事件
     emit('success')
   } finally {
@@ -101,3 +109,57 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.feedback-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.feedback-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.feedback-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.feedback-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.feedback-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 768px) {
+  .feedback-panel__header {
+    padding: 14px 16px;
+  }
+
+  .feedback-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .feedback-footer {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/src/views/iot/feedback/index.vue b/src/views/iot/feedback/index.vue
index 5c362804..336bf77e 100644
--- a/src/views/iot/feedback/index.vue
+++ b/src/views/iot/feedback/index.vue
@@ -1,5 +1,7 @@
 <template>
-  <ContentWrap>
+  <div class="feedback-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
       class="-mb-15px"
@@ -105,9 +107,11 @@
       @pagination="getList"
     />
   </ContentWrap>
+    </template>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <FeedbackForm ref="formRef" @success="getList" />
+    <!-- 表单：添加/修改 -->
+    <FeedbackForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -163,8 +167,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)
 }
 
 /** 删除按钮操作 */
diff --git a/src/views/mes/criticalComponent/CriticalComponentForm.vue b/src/views/mes/criticalComponent/CriticalComponentForm.vue
index e9d7c164..aa52a5cb 100644
--- a/src/views/mes/criticalComponent/CriticalComponentForm.vue
+++ b/src/views/mes/criticalComponent/CriticalComponentForm.vue
@@ -1,104 +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-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"
-        />
-      </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">
@@ -111,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')
@@ -198,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()
@@ -207,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)
@@ -216,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,
@@ -232,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()
@@ -245,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>
diff --git a/src/views/mes/criticalComponent/index.vue b/src/views/mes/criticalComponent/index.vue
index e311b84d..d7504f19 100644
--- a/src/views/mes/criticalComponent/index.vue
+++ b/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('导入成功')
diff --git a/src/views/mes/deviceledger/DeviceLedgerForm.vue b/src/views/mes/deviceledger/DeviceLedgerForm.vue
index 80e7076b..f94726be 100644
--- a/src/views/mes/deviceledger/DeviceLedgerForm.vue
+++ b/src/views/mes/deviceledger/DeviceLedgerForm.vue
@@ -1,13 +1,18 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="920px">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-      v-loading="formLoading || fileUploading"
-      element-loading-text="资料上传中，请稍候"
-    >
+  <div class="device-ledger-panel">
+    <div class="device-ledger-panel__header">
+      <div class="device-ledger-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="device-ledger-dialog" v-loading="formLoading || fileUploading" element-loading-text="资料上传中，请稍候">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="110px"
+      >
       <el-row :gutter="16">
         <!-- <el-col :span="24">
           <el-form-item label="资产编号" prop="id">
@@ -238,12 +243,13 @@
           </el-form-item>
         </el-col>
       </el-row>
-    </el-form>
-    <template #footer>
+      </el-form>
+    </div>
+    <div class="device-ledger-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
       <el-button @click="submitForm" type="primary" :disabled="formLoading || fileUploading">{{ t('common.ok') }}</el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 
   <el-dialog v-model="criticalComponentDialogVisible" :title="t('EquipmentManagement.EquipmentLedger.gjTitle')" width="1200px" class="device-ledger-transfer-dialog"
     append-to-body>
@@ -291,8 +297,8 @@
           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.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"
@@ -395,7 +401,6 @@ const total = ref(0)
 const bjTotal = ref(0)
 const selectedIds = ref<number[]>([])
 const bjSelectedIds = ref<number[]>([])
-const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const fileUploading = ref(false)
@@ -744,7 +749,6 @@ const ensureOptionsLoaded = async () => {
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number, defaultDeviceTypeId?: number, defaultDeviceLineId?: number) => {
-  dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -992,7 +996,7 @@ const bjToggleSelection = () => {
 }
 
 /** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const emit = defineEmits(['success', 'closed']) // 定义 success 和 closed 事件
 const submitForm = async () => {
   if (fileUploading.value) {
     message.warning('资料上传中，请等待上传完成后再提交')
@@ -1027,7 +1031,7 @@ const submitForm = async () => {
       await DeviceLedgerApi.updateDeviceLedger(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
+    closeForm()
     // 发送操作成功的事件
     emit('success')
   } finally {
@@ -1108,6 +1112,10 @@ const setBJDefaultSelections = () => {
 
 
 
+const closeForm = () => {
+  emit('closed')
+}
+
 /** 重置表单 */
 const resetForm = () => {
   fileUploading.value = false
@@ -1183,4 +1191,56 @@ const resetForm = () => {
 .no-select-all :deep(.el-table__header-wrapper .el-checkbox) {
   display: none;
 }
+
+.device-ledger-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.device-ledger-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.device-ledger-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.device-ledger-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.device-ledger-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 768px) {
+  .device-ledger-panel__header {
+    padding: 14px 16px;
+  }
+
+  .device-ledger-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .device-ledger-footer {
+    padding: 16px;
+  }
+}
 </style>
diff --git a/src/views/mes/deviceledger/detail/editIndex.vue b/src/views/mes/deviceledger/detail/editIndex.vue
new file mode 100644
index 00000000..cf126644
--- /dev/null
+++ b/src/views/mes/deviceledger/detail/editIndex.vue
@@ -0,0 +1,1412 @@
+<template>
+  <div ref="detailPageRef" class="device-ledger-detail-page">
+    <ContentWrap>
+    <div v-loading="detailLoading" class="device-ledger-detail-body">
+      <div class="device-ledger-detail-title">设备基本信息</div>
+      <div class="device-ledger-detail-main" >
+        <el-form
+          ref="formRef"
+          :model="formData"
+          :rules="formRules"
+          label-width="110px"
+          v-loading="formLoading || fileUploading"
+          :element-loading-text="t('common.loading')"
+        >
+          <el-row :gutter="20" class="device-basic-layout">
+            <el-col :xs="24" :lg="18" class="device-basic-fields">
+              <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceCode')" prop="deviceCode">
+                <el-row :gutter="12" class="device-code-row">
+                  <el-col :xs="18" :sm="18" :md="18" :lg="19" :xl="20">
+                    <el-input v-model="formData.deviceCode"
+                              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceCode')"
+                              :disabled="Boolean(formData.isCode) || formType === 'update'" />
+                  </el-col>
+                  <el-col :xs="6" :sm="6" :md="6" :lg="5" :xl="4">
+                    <div class="device-code-switch">
+                      <el-switch v-model="formData.isCode" :disabled="formType === 'update'"
+                                 @change="handleCodeAutoChange" />
+                    </div>
+                  </el-col>
+
+                </el-row>
+              </el-form-item>
+
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')" prop="deviceName" required>
+                    <el-input v-model="formData.deviceName"
+                              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceName')" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceType')" prop="deviceType" required>
+                    <el-tree-select v-model="formData.deviceType" :data="deviceTypeTree" :props="treeSelectProps"
+                                    check-strictly default-expand-all value-key="id"
+                                    :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceType')" class="!w-full" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceSpec')" prop="deviceSpec">
+                    <el-input v-model="formData.deviceSpec"
+                              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceSpec')" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <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 v-if="isScheduledEnabled" :span="12">
+                  <el-form-item
+                    :label="t('EquipmentManagement.EquipmentLedger.ratedCapacity')"
+                    prop="ratedCapacity"
+                    :required="isScheduledEnabled"
+                  >
+                    <el-input-number v-model="formData.ratedCapacity" :min="0" :precision="0" controls-position="right"
+                                     class="!w-full" :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderRatedCapacity')" />
+                  </el-form-item>
+                </el-col>
+
+              </el-row>
+
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.isSchedueld')" prop="isScheduled">
+                    <el-switch v-model="formData.isScheduled" :active-value="1" :inactive-value="0"
+                               :active-text="t('EquipmentManagement.EquipmentLedger.yes')"
+                               :inactive-text="t('EquipmentManagement.EquipmentLedger.no')" inline-prompt />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+<!--                  <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>-->
+                    <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-row>
+
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <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="12">
+                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceLocation')" prop="deviceLocation">
+                    <el-input v-model="formData.deviceLocation"
+                              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceLocation')" />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')" prop="deviceManagerIds">
+                    <el-select v-model="formData.deviceManagerIds" multiple filterable clearable
+                               :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceManagerIds')" class="!w-full">
+                      <el-option v-for="item in users" :key="item.id" :label="item.nickname" :value="item.id" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <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>
+
+              </el-row>
+
+              <el-row :gutter="20">
+                <el-col :span="12">
+
+                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')" prop="componentIds">
+                    <el-input :model-value="criticalComponentDisplay" readonly clearable class="device-ledger-selection-input"
+                              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderComponentIds')"
+                              @clear="clearCriticalComponent" @click="openCriticalComponentDialog" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item :label="t('EquipmentManagement.EquipmentLedger.sparePart')" prop="beijianIds">
+                    <el-input :model-value="beijianDisplay" readonly clearable class="device-ledger-selection-input"
+                              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderBeijianIds')" @clear="clearBeijian" @click="openBeijianDialog"/>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-col>
+
+            <el-col :xs="24" :lg="6" class="device-basic-media">
+              <div class="device-media-panel">
+                <el-form-item label-width="0" prop="images" class="device-media-item">
+                  <div class="device-media-box device-media-upload-box">
+                    <span class="device-media-label">{{ t('EquipmentManagement.EquipmentLedger.images') }}</span>
+                    <UploadImg class="device-media-upload" v-model="formData.images" />
+                  </div>
+                </el-form-item>
+                <el-form-item v-if="formType === 'update'" label-width="0" prop="qrcodeUrl" class="device-media-item">
+                  <div class="device-media-box device-media-code-box">
+                    <span class="device-media-label">{{ t('EquipmentManagement.EquipmentLedger.qrcode') }}</span>
+                    <div class="device-media-code">
+                      <QrcodeActionCard :image-url="formData.qrcodeUrl" :print-id="formData.id"
+                                        :print-title="`${formData.deviceName || 'Device'} QR Code`" :print-paper-width="80" :print-paper-height="80"
+                                        :print-max-width="220" :empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeEmpty')"
+                                        :error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
+                                        :refresh-url="getQrcodeRefreshUrl()" :refresh-disabled="!formData.id || !formData.deviceCode"
+                                        refresh-confirm-text="Refresh QR code?"
+                                        :template-json="formData.templateJson"
+                                        :print-data="buildPrintData()"
+                                        @refresh-success="handleQrcodeRefreshSuccess" />
+                    </div>
+                  </div>
+                </el-form-item>
+              </div>
+            </el-col>
+
+            <el-col :span="24">
+              <el-form-item :label="t('EquipmentManagement.EquipmentLedger.fileUrl')" prop="fileUrl">
+                <UploadFile
+                  :is-show-tip="false"
+                  v-model="formData.fileUrl"
+                  :limit="9"
+                  @uploading-change="handleFileUploadingChange"
+                />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="24">
+              <el-form-item :label="t('EquipmentManagement.EquipmentLedger.remark')" prop="remark">
+                <el-input v-model="formData.remark"
+                          :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderRemark')" type="textarea" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+
+      </div>
+
+      <div class="device-ledger-detail-tabs">
+        <el-tabs v-model="detailActiveTab" class="mt-12px">
+
+          <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')" name="criticalComponent">
+            <div class="device-ledger-tab-toolbar">
+              <el-button
+                type="success"
+                plain
+                :loading="criticalExportLoading"
+                @click="handleExportCriticalComponent"
+                v-hasPermi="['mes:device-ledger:export']"
+              >
+                <Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
+              </el-button>
+            </div>
+            <el-table v-loading="tableLoading" :data="editableCriticalComponentRows" :stripe="true" :show-overflow-tooltip="true">
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentCode')" align="center" prop="code" min-width="140" sortable />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentName')" align="center" prop="name" min-width="140" sortable />
+                            <el-table-column :label="t('EquipmentManagement.EquipmentKeyItems.count')" align="center" prop="count" min-width="180">
+                <template #default="scope">
+                  <el-input-number
+                    v-model="scope.row.count"
+                    :min="0"
+                    :precision="0"
+                    controls-position="right"
+                    class="!w-full"
+                  />
+                </template>
+              </el-table-column>
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.componentDesc')" align="center" prop="description" min-width="180" />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.remark')" align="center" prop="remark" min-width="180" />
+              <el-table-column :label="t('EquipmentManagement.EquipmentLedger.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180" sortable />
+            </el-table>
+          </el-tab-pane>
+
+
+                </el-tabs>
+      </div>
+      <div class="device-ledger-action-bar" :style="actionBarStyle">
+        <el-button @click="handleCancelEdit">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" :loading="formLoading" :disabled="fileUploading" @click="submitForm">{{ t('common.save') }}</el-button>
+      </div>
+    </div>
+
+    <!-- 关键件弹出框     -->
+      <TableSelectDialog
+        ref="criticalComponentSelectDialogRef"
+        :title="t('EquipmentManagement.EquipmentLedger.gjTitle')"
+        :columns="criticalComponentColumns"
+        :fetch-api="fetchCriticalComponentPage"
+        :query-params="queryParams"
+        :default-selected-keys="ids"
+        row-key="id"
+        @confirm="handleCriticalComponentSelectConfirm"
+      >
+        <template #header>
+          <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px"
+                   style="margin-bottom: 10px">
+            <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">
+              <el-input v-model="queryParams.description"
+                        :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderDescription')" 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('common.query') }}
+              </el-button>
+              <el-button @click="resetQuery">
+                <Icon icon="ep:refresh" class="mr-5px" />
+                {{ t('common.reset') }}
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </template>
+      </TableSelectDialog>
+      <!-- 备件弹出框     -->
+    <el-dialog v-model="beijianDialogVisible" :title="t('EquipmentManagement.EquipmentLedger.bjTitle')" width="860px" class="device-ledger-transfer-dialog"
+               append-to-body>
+      <!--    <div class="device-ledger-transfer">
+        <el-transfer
+          v-model="beijianDraft"
+          :data="beijianTransferData"
+          filterable
+          :filter-placeholder="t('EquipmentManagement.EquipmentLedger.placeholderBeijianIds')"
+        />
+      </div>-->
+      <!-- 列表 -->
+      <el-form class="-mb-15px" :model="bjQueryParams" ref="bjQueryFormRef" :inline="true" min-label-width="68px"
+               style="margin-bottom: 10px">
+        <el-form-item :label="t('SparePartsManagement.SpareInfo.code')" prop="barCode">
+          <el-input v-model="bjQueryParams.barCode" :placeholder="t('SparePartsManagement.SpareInfo.placeholderCode')"
+                    clearable @keyup.enter="handleQuery" class="!w-240px" />
+        </el-form-item>
+        <el-form-item :label="t('SparePartsManagement.SpareInfo.name')" prop="name">
+          <el-input v-model="bjQueryParams.name" :placeholder="t('SparePartsManagement.SpareInfo.placeholderName')"
+                    clearable @keyup.enter="bjHandleQuery" class="!w-240px" />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="bjHandleQuery">
+            <Icon icon="ep:search" class="mr-5px" />
+            {{ t('common.query') }}
+          </el-button>
+          <el-button @click="bjResetQuery">
+            <Icon icon="ep:refresh" class="mr-5px" />
+            {{ t('common.reset') }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <ContentWrap>
+        <el-table ref="bjMultipleTableRef" v-loading="loading" :data="bjList" :stripe="true"  class="no-select-all"
+                  @selection-change="bjHandleSelectionChange" @select="bjHandleSelect" @select-all="bjHandleSelectAll"
+                  :show-overflow-tooltip="true" row-key="id">
+          <el-table-column type="selection" width="55" :reserve-selection="true" />
+          <el-table-column :label="t('SparePartsManagement.SpareInfo.code')" align="center" prop="barCode" width="240px"
+                           sortable />
+          <el-table-column :label="t('SparePartsManagement.SpareInfo.name')" align="left" prop="name" width="220px"
+                           sortable />
+          <el-table-column :label="t('SparePartsManagement.SpareInfo.unit')" align="center" prop="unitName" sortable />
+          <el-table-column :label="t('SparePartsManagement.SpareInfo.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('SparePartsManagement.SpareInfo.createTime')" align="center" prop="createTime"
+                           :formatter="dateFormatter" width="180px" sortable />
+        </el-table>
+        <!-- 分页 -->
+        <Pagination :total="bjTotal" v-model:page="bjQueryParams.pageNo" v-model:limit="bjQueryParams.pageSize"
+                    @pagination="bjGetList" />
+      </ContentWrap>
+      <template #footer>
+        <el-button @click="beijianDialogVisible = false">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="confirmBeijianDialog">{{ t('common.ok') }}</el-button>
+      </template>
+    </el-dialog>
+
+  </ContentWrap>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { dateFormatter, formatDate } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { DeviceLedgerApi, DeviceLedgerVO } from '@/api/mes/deviceledger'
+import { DeviceTypeApi, DeviceTypeTreeVO } from '@/api/mes/devicetype'
+import {CriticalComponentApi, CriticalComponentVO} from '@/api/mes/criticalComponent'
+import { getSimpleUserList, UserVO } from '@/api/system/user'
+import {ProductApi, ProductVO} from '@/api/erp/product/product'
+import QrcodeActionCard from '@/components/QrcodeActionCard/index.vue'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useAppStore } from '@/store/modules/app'
+import type { FormRules } from 'element-plus'
+import { ref } from 'vue'
+import {ElTable} from "element-plus";
+import { DICT_TYPE } from '@/utils/dict'
+defineOptions({ name: 'MesDeviceLedgerEditDetail' })
+
+const { t } = useI18n()
+const message = useMessage()
+const route = useRoute()
+const { delView } = useTagsViewStore()
+const { currentRoute } = useRouter()
+const appStore = useAppStore()
+const deviceId = computed(() => Number(route.params.id))
+const detailLoading = ref(false)
+const tableLoading = ref(false)
+const detailData = ref<DeviceLedgerVO | undefined>()
+const detailActiveTab = ref('criticalComponent')
+const detailPageRef = ref<HTMLElement>()
+const actionBarStyle = reactive({
+  left: '0px',
+  width: '100%'
+})
+let actionBarObserver: ResizeObserver | undefined
+const criticalComponentSelectDialogRef = ref(false)
+const updateActionBarRect = () => {
+  const rect = detailPageRef.value?.getBoundingClientRect()
+  if (!rect) return
+  actionBarStyle.left = rect.left + 'px'
+  actionBarStyle.width = rect.width + 'px'
+}
+
+const updateActionBarRectAfterLayout = () => {
+  nextTick(updateActionBarRect)
+  window.setTimeout(updateActionBarRect, 320)
+}
+const criticalComponentDialogVisible = ref(false)
+const beijianDialogVisible = ref(false)
+const criticalComponentDraft = ref<number[]>([])
+const beijianDraft = ref<number[]>([])
+const list = ref<CriticalComponentVO[]>([])
+const bjList = ref<ProductVO[]>([])
+const loading = ref(true)
+const total = ref(0)
+const bjTotal = ref(0)
+const selectedIds = ref<number[]>([])
+const bjSelectedIds = ref<number[]>([])
+// 表格引用
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const bjMultipleTableRef = ref<InstanceType<typeof ElTable>>()
+const queryFormRef = ref()
+const bjQueryFormRef = ref()
+const parseIdsValue = (value: any): number[] => {
+  if (!value) return []
+  if (Array.isArray(value)) return value.map((v) => Number(v)).filter((v) => !Number.isNaN(v))
+  return String(value)
+    .split(',')
+    .map((v) => Number(v.trim()))
+    .filter((v) => !Number.isNaN(v))
+}
+const selectedRows = ref<any[]>([])  // 存储所有选中的行
+const bjSelectedRows = ref<any[]>([])  // 存储所有选中的行
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  code: undefined as string | undefined,
+  name: undefined as string | undefined,
+  description: undefined as string | undefined,
+  remark: undefined as string | undefined,
+  createTime: [] as string[]
+})
+
+const bjQueryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  barCode: undefined as string | undefined,
+  name: undefined as string | undefined,
+  categoryId: undefined as number | undefined
+})
+
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 配件搜索按钮操作 */
+const bjHandleQuery = () => {
+  bjQueryParams.pageNo = 1
+  bjGetList()
+}
+
+/** 配件重置按钮操作 */
+const bjResetQuery = () => {
+  bjQueryFormRef.value.resetFields()
+  bjHandleQuery()
+}
+
+
+const handleSelectionChange = (rows: CriticalComponentVO[]) => {
+  selectedIds.value = rows.map((r) => r.id).filter((id): id is number => typeof id === 'number')
+  // 获取当前页所有行�?id
+  const currentPageIds = rows.map(item => item.id)
+
+  // 从已选中的数组中移除当前页的数据
+  selectedRows.value = selectedRows.value.filter(
+    item => !currentPageIds.includes(item.id)
+  )
+  // 添加当前页新选中的数�?  selectedRows.value.push(...rows)
+}
+
+// 存储当前已选中的行
+
+const handleSelect = (selection: any[], row: any) => {
+  // 判断是选中还是取消选中
+  const isSelected = selection.includes(row)
+  if (isSelected) {
+    // console.log(`�?行被选中: ID=${row.id}, Name=${row.name}`)
+    ids.value.push(row.id)
+  } else {
+
+    ids.value = ids.value.filter(
+      item => item !== row.id
+    )
+    // console.log(`�?行被取消选中: ID=${row.id}, Name=${row.name}`)
+  }
+  // 更新当前选中状�?  currentSelectedRows.value = selection
+}
+
+
+const handleSelectAll = (selection) => {
+  ids.value = selection?.map((row) => row.id).filter((id) => id !== undefined) ?? []
+
+  /*  let newVar = selection?.map((row) => row.id).filter((id) => id !== undefined) ?? [];
+    newVar.forEach(row => {
+      ids.value.push(row)
+    })*/
+}
+const confirmCriticalComponentDialog = () => {
+  //let ids = selectedRows.value.map(item => item.id);
+  //const validMap = new Set(criticalComponentOptions.value.map((item) => item.value))
+  //const selected = Array.from(new Set(criticalComponentDraft.value.map((v) => Number(v)).filter((v) => validMap.has(v))))
+  formData.value.componentIds = filterValidSelectedIds(ids.value, criticalComponentOptions.value)
+  criticalComponentDialogVisible.value = false
+  syncCriticalComponentRows()
+  //multipleTableRef.value.clearSelection()
+}
+const filterValidSelectedIds = (selectedIds: any[], options: SelectionOption[]) => {
+  const validIds = new Set(options.map((item) => item.value))
+  return Array.from(
+    new Set(
+      (selectedIds ?? [])
+        .map((id) => normalizeNumberish(id))
+        .filter((id): id is number => id !== undefined && validIds.has(id))
+    )
+  )
+}
+const confirmBeijianDialog = () => {
+  // let ids = bjSelectedRows.value.map(item => item.id);
+  /* const validMap = new Set(beijianOptions.value.map((item) => item.value))
+   const selected = Array.from(new Set(beijianDraft.value.map((v) => Number(v)).filter((v) => validMap.has(v))))*/
+  formData.value.beijianIds = filterValidSelectedIds(bjIds.value, beijianOptions.value)
+  beijianDialogVisible.value = false
+  //multipleTableRef.value.clearSelection()
+}
+
+const bjHandleSelectionChange = (rows: CriticalComponentVO[]) => {
+  bjSelectedIds.value = rows.map((r) => r.id).filter((id): id is number => typeof id === 'number')
+  // 获取当前页所有行�?id
+  const currentPageIds = rows.map(item => item.id)
+
+  // 从已选中的数组中移除当前页的数据
+  bjSelectedRows.value = bjSelectedRows.value.filter(
+    item => !currentPageIds.includes(item.id)
+  )
+  // 添加当前页新选中的数�?  bjSelectedRows.value.push(...rows)
+}
+
+// 存储当前已选中的行
+
+const bjHandleSelect = (selection: any[], row: any) => {
+  // 判断是选中还是取消选中
+  const isSelected = selection.includes(row)
+  if (isSelected) {
+    // console.log(`�?行被选中: ID=${row.id}, Name=${row.name}`)
+    bjIds.value.push(row.id)
+  } else {
+    bjIds.value = bjIds.value.filter(
+      item => item !== row.id
+    )
+    // console.log(`�?行被取消选中: ID=${row.id}, Name=${row.name}`)
+  }
+  // 更新当前选中状�?  bjCurrentSelectedRows.value = selection
+}
+
+
+const bjHandleSelectAll = (selection) => {
+  bjIds.value = selection?.map((row) => row.id).filter((id) => id !== undefined) ?? []
+}
+
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CriticalComponentApi.getCriticalComponentPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+    nextTick(() => {
+      toggleSelection()
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 配件查询列表 */
+const bjGetList = async () => {
+  loading.value = true
+  try {
+    bjQueryParams.categoryId = 5
+    const data = await ProductApi.getProductPage(bjQueryParams)
+    bjList.value = data.list
+    bjTotal.value = data.total
+    nextTick(() => {
+      bjToggleSelection()
+    })
+  } finally {
+    loading.value = false
+  }
+}
+const toggleSelection = () => {
+  if (!multipleTableRef.value || !selectedRows.value.length) return
+
+  // 遍历当前页的数据
+  list.value.forEach(row => {
+    const isSelected = selectedRows.value.some(item => item.id === row.id)
+
+    if (isSelected) {
+      // 如果应该选中，就选中
+      multipleTableRef.value!.toggleRowSelection(row, true)
+    } else {
+      // 否则取消选中
+      multipleTableRef.value!.toggleRowSelection(row, false)
+    }
+  })
+}
+
+const bjToggleSelection = () => {
+  if (!bjMultipleTableRef.value || !bjSelectedRows.value.length) return
+
+  // 遍历当前页的数据
+  bjList.value.forEach(row => {
+    const isSelected = bjSelectedRows.value.some(item => item.id === row.id)
+
+    if (isSelected) {
+      // 如果应该选中，就选中
+      bjMultipleTableRef.value!.toggleRowSelection(row, true)
+    } else {
+      // 否则取消选中
+      bjMultipleTableRef.value!.toggleRowSelection(row, false)
+    }
+  })
+}
+const selectedDeviceRows = ref<any[]>([])
+const ids = ref<number[]>([])
+const bjIds = ref<number[]>([])
+const openCriticalComponentDialog = () => {
+/*  criticalComponentDraft.value = [...(formData.value.componentIds ?? [])]
+  criticalComponentDialogVisible.value = true
+  ids.value = [...(formData.value.componentIds ?? [])]
+  setDefaultSelections()*/
+
+  const rows = selectedDeviceRows.value.map((item) => ({ ...item, id: Number(item.id) }))
+  criticalComponentSelectDialogRef.value?.open(rows)
+  let initIds= formData.value.machineId!=undefined?formData.value.machineId.toString().split(","):[]
+  ids.value=initIds.map((id) => Number(id))
+}
+const openBeijianDialog = () => {
+  beijianDraft.value = [...(formData.value.beijianIds ?? [])]
+  beijianDialogVisible.value = true
+  bjIds.value = [...(formData.value.beijianIds ?? [])]
+  setBJDefaultSelections()
+}
+
+// 设置默认选中的行
+const setDefaultSelections = () => {
+  // 等待DOM更新完成
+  nextTick(() => {
+    if (!multipleTableRef.value) return
+    multipleTableRef.value.clearSelection()
+    const rawSubjectIds = toRaw(formData.value.componentIds)
+    if (rawSubjectIds.length != 0) {
+      let row = {
+        id: undefined
+      }
+      multipleTableRef.value!.toggleRowSelection(row, true)
+    }
+    // 遍历数据，找到需要选中的行
+    list.value.forEach(row => {
+      if (rawSubjectIds.includes(row.id)) {
+        multipleTableRef.value!.toggleRowSelection(row, true)
+      }
+    })
+  })
+}
+
+const normalizeNumberish = (value: any): number | undefined => {
+  if (value === null || value === undefined || value === '') return undefined
+  if (typeof value === 'number') return Number.isFinite(value) ? value : undefined
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    if (!trimmed) return undefined
+    const n = Number(trimmed)
+    return Number.isFinite(n) ? n : undefined
+  }
+  return undefined
+}
+
+const normalizeYmd = (value: any): string | undefined => {
+  if (value === null || value === undefined || value === '') return undefined
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    const matched = trimmed.match(/^(\d{4}-\d{2}-\d{2})/)
+    if (matched?.[1]) return matched[1]
+    const parsed = Date.parse(trimmed)
+    if (!Number.isNaN(parsed)) return formatDate(new Date(parsed), 'YYYY-MM-DD')
+    return trimmed
+  }
+  if (typeof value === 'number') return formatDate(new Date(value), 'YYYY-MM-DD')
+  if (value instanceof Date) return formatDate(value, 'YYYY-MM-DD')
+  return formatDate(new Date(value), 'YYYY-MM-DD')
+}
+
+const initFormData = () => ({
+  id: undefined,
+  images: undefined,
+  deviceCode: undefined,
+  isCode: true,
+  deviceName: undefined,
+  deviceStatus: undefined,
+  deviceBrand: undefined,
+  deviceModel: undefined,
+  deviceSpec: undefined,
+  isScheduled: 0,
+  ratedCapacity: undefined,
+  deviceType: undefined as number | undefined,
+  deviceLine: undefined as number | undefined,
+  supplier: undefined,
+  workshop: undefined,
+  deviceLocation: undefined,
+  systemOrg: undefined,
+  deviceManagerIds: [] as number[],
+  productionDate: undefined,
+  factoryEntryDate: undefined,
+  sn: undefined,
+  outgoingTime: undefined,
+  remark: undefined,
+  componentIds: [] as number[],
+  beijianIds: [] as number[],
+  fileUrl: '',
+  qrcodeUrl: undefined,
+  templateJson: undefined,
+  sort: undefined,
+  dvId: undefined
+})
+
+const formLoading = ref(false)
+const fileUploading = ref(false)
+const formType = ref('update')
+const formRef = ref()
+const formData = ref<any>({
+  ...initFormData()
+})
+const isScheduledEnabled = computed(() => Number(formData.value.isScheduled) === 1)
+const validateDeviceCode = (_rule, value, callback) => {
+  if (Boolean(formData.value.isCode)) {
+    callback()
+    return
+  }
+  if (value === undefined || value === null || String(value).trim() === '') {
+    callback(new Error(t('EquipmentManagement.EquipmentLedger.validatorDeviceCodeRequired')))
+    return
+  }
+  callback()
+}
+const validateScheduledRequired = (label: string) => (_rule, value, callback) => {
+  if (!isScheduledEnabled.value) {
+    callback()
+    return
+  }
+  const normalized = normalizeNumberish(value)
+  if (normalized === undefined) {
+    callback(new Error(String(label)))
+    return
+  }
+  callback()
+}
+const formRules = reactive<FormRules>({
+  deviceCode: [{ validator: validateDeviceCode, trigger: ['blur', 'change'] }],
+  deviceName: [{ required: true, message: t('EquipmentManagement.EquipmentLedger.placeholderDeviceName'), trigger: 'blur' }],
+  deviceType: [{ required: true, message: t('EquipmentManagement.EquipmentLedger.placeholderDeviceType'), trigger: 'change' }],
+  ratedCapacity: [{ validator: validateScheduledRequired('ratedCapacity'), trigger: ['blur', 'change'] }]
+})
+const treeSelectProps = { label: 'name', children: 'children' }
+const deviceTypeTree = ref<DeviceTypeTreeVO[]>([])
+const users = ref<UserVO[]>([])
+type SelectionOption = { label: string; value: number }
+const criticalComponentOptions = ref<SelectionOption[]>([])
+const beijianOptions = ref<SelectionOption[]>([])
+const savedCriticalComponentOptions = ref<SelectionOption[]>([])
+const savedBeijianOptions = ref<SelectionOption[]>([])
+const editableCriticalComponentRows = ref<any[]>([])
+const getCriticalComponentId = (item: any): number | undefined =>
+  normalizeNumberish(
+    item?.componentId ??
+    item?.criticalComponentId ??
+    item?.criticalId ??
+    item?.criticalComponent?.id ??
+    item?.component?.id ??
+    item?.id
+  )
+const buildCriticalComponentOptions = (items: any[] = []): SelectionOption[] =>
+  (items ?? [])
+    .map((item: any) => {
+      const id = normalizeNumberish(item?.id)
+      if (id === undefined) return undefined
+      const code = item.code ? String(item.code) : ''
+      const name = item.name ? String(item.name) : ''
+      const label = code && name ? `${code}-${name}` : name || code || String(id)
+      return { label, value: id }
+    })
+    .filter((item): item is SelectionOption => Boolean(item))
+
+const buildBeijianOptions = (items: any[] = []): SelectionOption[] =>
+  (items ?? [])
+    .map((item: any) => {
+      const id = normalizeNumberish(item?.id)
+      if (id === undefined) return undefined
+      const code = item.barCode ? String(item.barCode) : ''
+      const name = item.name ? String(item.name) : ''
+      const label = code && name ? `${code}-${name}` : name || code || String(id)
+      return { label, value: id }
+    })
+    .filter((item): item is SelectionOption => Boolean(item))
+
+const mergeSelectionOptions = (...groups: SelectionOption[][]): SelectionOption[] => {
+  const optionMap = new Map<number, SelectionOption>()
+  groups.flat().forEach((item) => optionMap.set(item.value, item))
+  return Array.from(optionMap.values())
+}
+
+const formatSelectedSummary = (ids: number[], options: SelectionOption[]) => {
+  const optionMap = new Map<number, string>(options.map((item) => [item.value, item.label]))
+  const labels = ids.map((id) => optionMap.get(id)).filter((v): v is string => Boolean(v))
+  if (!labels.length) return ''
+  if (labels.length <= 3) return labels.join(', ')
+  return `${labels.slice(0, 3).join(', ')}...${labels.length}`
+}
+
+const criticalComponentDisplay = computed(() =>
+  formatSelectedSummary(
+    formData.value.componentIds ?? [],
+    mergeSelectionOptions(criticalComponentOptions.value, savedCriticalComponentOptions.value)
+  )
+)
+const beijianDisplay = computed(() =>
+  formatSelectedSummary(formData.value.beijianIds ?? [], mergeSelectionOptions(beijianOptions.value, savedBeijianOptions.value))
+)
+const buildCriticalComponentTableRows = () => {
+  const detailList = (detailData.value as any)?.componentList
+  if (Array.isArray(detailList) && detailList.length) {
+ /*   detailList.forEach(item => {
+      item.id = null
+    })*/
+    return detailList.map((item: any) => ({ ...item, count: normalizeNumberish(item?.count) ?? 0 }))
+  }
+
+  const selectedIds = new Set<number>((formData.value.componentIds ?? []).map((id: any) => Number(id)).filter((id: number) => !Number.isNaN(id)))
+  if (!selectedIds.size) return []
+
+  const optionMap = new Map<number, any>()
+  ;[...criticalComponentOptions.value, ...savedCriticalComponentOptions.value].forEach((item: any) => {
+    optionMap.set(Number(item.value), item)
+  })
+
+  return Array.from(selectedIds).map((id) => {
+    const option = optionMap.get(id)
+    const label = option?.label ?? String(id)
+    const [code, ...nameParts] = label.split('-')
+    return {
+      id,
+      code: nameParts.length ? code : '',
+      name: nameParts.length ? nameParts.join('-') : label,
+      count: 0,
+      description: '',
+      remark: '',
+      createTime: undefined
+    }
+  })
+}
+
+const syncCriticalComponentRows = () => {
+  editableCriticalComponentRows.value = buildCriticalComponentTableRows()
+}
+
+const clearCriticalComponent = () => {
+  formData.value.componentIds = []
+}
+const clearBeijian = () => {
+  formData.value.beijianIds = []
+}
+
+const handleFileUploadingChange = (uploading: boolean) => {
+  fileUploading.value = uploading
+}
+
+watch(
+  () => formData.value.isScheduled,
+  () => {
+    formRef.value?.clearValidate?.(['ratedCapacity'])
+  }
+)
+
+const handleCodeAutoChange = (value: boolean) => {
+  if (value) {
+    formData.value.deviceCode = undefined
+  }
+  formRef.value?.clearValidate('deviceCode')
+}
+
+const getQrcodeRefreshUrl = () => {
+  if (!formData.value.id || !formData.value.deviceCode) return ''
+  return `/mes/device-ledger/regenerate-code?id=${formData.value.id}&code=${encodeURIComponent(String(formData.value.deviceCode))}`
+}
+
+const buildPrintData = () => {
+  return {
+    id: formData.value.id,
+    deviceCode: formData.value.deviceCode,
+    deviceName: formData.value.deviceName,
+    deviceSpec: formData.value.deviceSpec,
+    deviceBrand: formData.value.deviceBrand,
+    deviceModel: formData.value.deviceModel,
+    sn: formData.value.sn,
+    outgoingTime: formData.value.outgoingTime,
+    deviceLocation: formData.value.deviceLocation,
+    remark: formData.value.remark,
+    qrcodeUrl: formData.value.qrcodeUrl
+  }
+}
+
+const handleQrcodeRefreshSuccess = async (data: any) => {
+  if (!formData.value.id) return
+  if (data?.qrcodeUrl) {
+    formData.value.qrcodeUrl = data.qrcodeUrl
+    return
+  }
+  const detail = await DeviceLedgerApi.getDeviceLedger(formData.value.id)
+  formData.value.qrcodeUrl = detail?.qrcodeUrl
+  formData.value.deviceCode = detail?.deviceCode ?? formData.value.deviceCode
+}
+
+const ensureOptionsLoaded = async () => {
+  const [deviceTypeRes, userRes, criticalRes, beijianRes] = await Promise.all([
+    DeviceTypeApi.getDeviceTypeTree({ pageNo: 1, pageSize: 10 }),
+    getSimpleUserList(),
+    CriticalComponentApi.getCriticalComponentList(),
+    ProductApi.getComponentSimpleList()
+  ])
+  deviceTypeTree.value = deviceTypeRes ?? []
+  users.value = userRes ?? []
+  criticalComponentOptions.value = buildCriticalComponentOptions(criticalRes ?? [])
+  beijianOptions.value = buildBeijianOptions(beijianRes ?? [])
+}
+
+const bindFormData = (detail: DeviceLedgerVO) => {
+  const templateJson = (detail as any)?.templateJson
+  const parsedTemplateJson =
+    typeof templateJson === 'string'
+      ? (() => {
+          try {
+            return JSON.parse(templateJson)
+          } catch {
+            return undefined
+          }
+        })()
+      : templateJson
+  formData.value = {
+    ...initFormData(),
+    ...(detail as any),
+    templateJson: parsedTemplateJson,
+    isCode: (detail as any)?.isCode ?? false,
+    isScheduled: normalizeNumberish((detail as any)?.isScheduled) ?? 0,
+    ratedCapacity: normalizeNumberish((detail as any)?.ratedCapacity),
+    deviceType: normalizeNumberish((detail as any)?.deviceType),
+    deviceLine: normalizeNumberish((detail as any)?.deviceLine),
+    deviceManagerIds: parseIdsValue((detail as any)?.deviceManager),
+    productionDate: normalizeYmd((detail as any)?.productionDate),
+    outgoingTime: normalizeYmd((formData.value as any).outgoingTime),
+    factoryEntryDate: normalizeYmd((detail as any)?.factoryEntryDate),
+    componentIds: parseIdsValue((detail as any)?.componentId),
+    beijianIds: parseIdsValue((detail as any)?.beijianId),
+    qrcodeUrl: (detail as any)?.qrcodeUrl
+  }
+  savedCriticalComponentOptions.value = buildCriticalComponentOptions((detail as any)?.componentList ?? [])
+  savedBeijianOptions.value = buildBeijianOptions((detail as any)?.beijianList ?? [])
+}
+  syncCriticalComponentRows()
+
+const criticalExportLoading = ref(false)
+
+const normalizeFileUrlAsJsonArrayString = (value: any): string | undefined => {
+  if (value === null || value === undefined || value === '') return undefined
+  if (typeof value === 'string') return value.trim() || undefined
+  if (Array.isArray(value)) return JSON.stringify(value)
+  return JSON.stringify(value)
+}
+
+const buildSubmitData = () => {
+  const componentRows = editableCriticalComponentRows.value.map((row: any) => ({
+    ...row,
+    id: normalizeNumberish(row?.id),
+    count: normalizeNumberish(row?.count) ?? 0
+  })).filter((row: any) => row.id !== undefined)
+  formData.value.componentIds = componentRows.map((row: any) => row.id)
+
+  const data = {
+    ...(formData.value as any),
+    isScheduled: normalizeNumberish((formData.value as any).isScheduled) ?? 0,
+    ratedCapacity: normalizeNumberish((formData.value as any).ratedCapacity),
+    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,
+    componentList: componentRows,
+    beijianId: formData.value.beijianIds?.length ? formData.value.beijianIds.join(',') : undefined,
+    fileUrl: normalizeFileUrlAsJsonArrayString((formData.value as any).fileUrl)
+  } as unknown as DeviceLedgerVO
+
+  delete (data as any).deviceManagerIds
+  delete (data as any).componentIds
+  delete (data as any).beijianIds
+  return data
+}
+
+const submitForm = async () => {
+  if (fileUploading.value) {
+    message.warning(t('common.loading'))
+    return
+  }
+  await formRef.value?.validate?.()
+  formLoading.value = true
+  try {
+    await DeviceLedgerApi.updateDeviceLedger(buildSubmitData())
+    message.success(t('common.updateSuccess'))
+    await getDetail()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+const handleCancelEdit = async () => {
+  await getDetail()
+}
+const handleExportCriticalComponent = async () => {
+  if (!deviceId.value) return
+  try {
+    await message.exportConfirm()
+    criticalExportLoading.value = true
+    const data = await DeviceLedgerApi.exportDeviceComponent({ deviceId: deviceId.value })
+    download.excel(data, 'critical-component.xls')
+  } catch {
+  } finally {
+    criticalExportLoading.value = false
+  }
+}
+
+
+const getDetail = async () => {
+  if (!deviceId.value) {
+    message.warning(t('EquipmentManagement.EquipmentLedger.Detail.invalidId'))
+    delView(unref(currentRoute))
+    return
+  }
+  detailLoading.value = true
+  try {
+    const detail = await DeviceLedgerApi.getDeviceLedger(deviceId.value)
+    detailData.value = detail
+    bindFormData(detail)
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+
+watch(bjList, (newData) => {
+  if (newData.length > 0) {
+    setBJDefaultSelections()
+  }
+}, { deep: true })
+
+
+//const defaultSelectedIds = [144, 143,141]
+
+// 设置默认选中的行
+const setBJDefaultSelections = () => {
+  // 等待DOM更新完成
+  nextTick(() => {
+    if (!bjMultipleTableRef.value) return
+    bjMultipleTableRef.value.clearSelection()
+    const rawSubjectIds = toRaw(formData.value.beijianIds)
+    if (rawSubjectIds.length != 0) {
+      let row = {
+        id: undefined
+      }
+      bjMultipleTableRef.value!.toggleRowSelection(row, true)
+    }
+    // 遍历数据，找到需要选中的行
+    bjList.value.forEach(row => {
+      if (rawSubjectIds.includes(row.id)) {
+        bjMultipleTableRef.value!.toggleRowSelection(row, true)
+      }
+    })
+  })
+}
+async function initForm() {
+  // 修改时，设置数据
+  if (deviceId.value) {
+    formLoading.value = true
+    try {
+      const detail = await DeviceLedgerApi.getDeviceLedger(deviceId.value)
+      detailData.value = detail
+      const templateJson = (detail as any)?.templateJson
+      const parsedTemplateJson = typeof templateJson === 'string'
+        ? JSON.parse(templateJson)
+        : templateJson
+      formData.value = {
+        ...initFormData(),
+        ...(detail as any),
+        templateJson: parsedTemplateJson,
+        isCode: (detail as any)?.isCode ?? false,
+        isScheduled: normalizeNumberish((detail as any)?.isScheduled ?? (detail as any)?.isScheduled) ?? 0,
+        ratedCapacity: normalizeNumberish((detail as any)?.ratedCapacity),
+        deviceType: normalizeNumberish((detail as any)?.deviceType),
+        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),
+        qrcodeUrl: (detail as any)?.qrcodeUrl,
+      }
+      savedCriticalComponentOptions.value = buildCriticalComponentOptions((detail as any)?.componentList ?? [])
+      savedBeijianOptions.value = buildBeijianOptions((detail as any)?.beijianList ?? [])
+     // syncCriticalComponentRows()
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+async function getDetailList() {
+  if (!deviceId.value) return
+  detailLoading.value = true
+  try {
+    let detail:any = await DeviceLedgerApi.getDeviceCriticalComponent(deviceId.value)
+    editableCriticalComponentRows.value = detail
+  } finally {
+    detailLoading.value = false
+  }
+}
+
+const criticalComponentColumns = computed(() => [
+  { label: t('EquipmentManagement.EquipmentKeyItems.code'), prop: 'code', minWidth: 140 },
+  { label: t('EquipmentManagement.EquipmentKeyItems.name'), prop: 'name', minWidth: 140 },
+  { label: t('EquipmentManagement.EquipmentKeyItems.description'), prop: 'description', minWidth: 180 },
+  { label: t('EquipmentManagement.EquipmentKeyItems.remark'), prop: 'remark', minWidth: 180 },
+  { label: t('EquipmentManagement.EquipmentKeyItems.createTime'), prop: 'createTime', width: 180 }
+])
+
+const fetchCriticalComponentPage = async (params: Record<string, any>) => {
+  return await CriticalComponentApi.getCriticalComponentPage(params)
+}
+const handleCriticalComponentSelectConfirm = ({ ids: selectedIds, rows }: { ids: Array<number | string>; rows: any[] }) => {
+/*  selectedRows.value = rows
+  savedCriticalComponentOptions.value = mergeSelectionOptions(savedCriticalComponentOptions.value, buildCriticalComponentOptions(rows))
+  const selected = filterValidSelectedIds(
+    [...(formData.value.componentIds ?? []), ...selectedIds],
+    mergeSelectionOptions(savedCriticalComponentOptions.value, criticalComponentOptions.value)
+  )
+  formData.value.componentIds = selected
+  appendSelectedCriticalComponentRows(selected)*/
+  formData.value.devices = payload.rows
+    .map((item) => {
+      const id = Number(item.id)
+      if (!Number.isFinite(id)) return undefined
+      return {
+        id,
+        name: item.deviceName || item.name || item.code || `设备ID:${id}`
+      }
+    })
+    .filter((item): item is { id: number; name: string } => Boolean(item))
+  selectedDeviceRows.value = payload.rows
+  formData.value.machineId = payload.ids.join(',')
+  ids.value = payload.ids.map((id) => Number(id))
+}
+
+const buildCriticalComponentRowById = (id: number) => {
+  const row = selectedRows.value.find((item: any) => normalizeNumberish(item.id) === id)
+  if (row) {
+    return {
+      ...row,
+      id,
+      count: normalizeNumberish(row?.count) ?? 0
+    }
+  }
+
+  const option = mergeSelectionOptions(savedCriticalComponentOptions.value, criticalComponentOptions.value).find((item) => item.value === id)
+  const label = option?.label ?? String(id)
+  const [code, ...nameParts] = label.split('-')
+  return {
+    id,
+    code: nameParts.length ? code : '',
+    name: nameParts.length ? nameParts.join('-') : label,
+    count: 0,
+    description: '',
+    remark: '',
+    createTime: undefined
+  }
+}
+
+const appendSelectedCriticalComponentRows = (selectedIds: number[]) => {
+  const existingIds = new Set(
+    editableCriticalComponentRows.value
+      .map((row: any) => getCriticalComponentId(row))
+      .filter((id): id is number => id !== undefined)
+  )
+  const rowsToAppend = selectedIds
+    .filter((id) => !existingIds.has(id))
+    .map((id) => buildCriticalComponentRowById(id))
+  if (rowsToAppend.length) {
+    editableCriticalComponentRows.value = [...editableCriticalComponentRows.value, ...rowsToAppend]
+  }
+}
+
+onMounted(async () => {
+  await ensureOptionsLoaded()
+  initForm()
+ //初始化设备关键件
+  getList()
+//初始化备件
+  bjGetList()
+  //初始化设备关键件明细
+  getDetailList()
+  await nextTick()
+  updateActionBarRect()
+  window.addEventListener('resize', updateActionBarRect)
+  if (detailPageRef.value) {
+    actionBarObserver = new ResizeObserver(updateActionBarRect)
+    actionBarObserver.observe(detailPageRef.value)
+  }
+})
+
+watch(() => appStore.getCollapse, updateActionBarRectAfterLayout)
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateActionBarRect)
+  actionBarObserver?.disconnect()
+})
+</script>
+
+<style lang="scss" scoped>
+.device-ledger-detail-page {
+  width: 100%;
+}
+
+.device-ledger-detail-body {
+  position: relative;
+  max-height: 100vh;
+  padding: 2px 0 72px;
+}
+
+.device-ledger-detail-title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  color: var(--el-text-color-primary);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+}
+
+.device-ledger-detail-title::before {
+  width: 3px;
+  height: 16px;
+  margin-right: 8px;
+  content: '';
+  border-radius: 2px;
+  background: var(--el-color-primary);
+}
+
+.device-ledger-detail-main {
+  min-height: 224px;
+  padding-top: 12px;
+  margin-bottom: 10px;
+  gap: 28px;
+  box-sizing: border-box;
+}
+
+.device-ledger-detail-main :deep(.el-form) {
+  width: 100%;
+}
+
+.device-basic-layout {
+  align-items: flex-start;
+}
+
+.device-basic-fields {
+  min-width: 0;
+}
+
+.device-code-row {
+  width: 100%;
+}
+
+.device-code-switch {
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+
+.device-basic-media {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.device-media-panel {
+  width: 100%;
+  max-width: 260px;
+  padding: 12px 12px 4px;
+  box-sizing: border-box;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 6px;
+  background: var(--el-fill-color-extra-light);
+}
+
+.device-media-item {
+  margin-bottom: 16px;
+}
+
+.device-media-item :deep(.el-form-item__label) {
+  justify-content: flex-start;
+}
+
+.device-media-item :deep(.el-form-item__content) {
+  justify-content: center;
+}
+
+.device-media-upload {
+  width: 100%;
+  min-height: 120px;
+}
+
+.device-media-code {
+  width: 148px;
+  height: 148px;
+}
+
+.device-media-code :deep(.qrcode-action-card__img),
+.device-media-code :deep(.qrcode-action-card__error) {
+  width: 148px;
+  height: 148px;
+}
+
+.device-ledger-detail-tabs {
+  padding-right: 4px;
+}
+
+:deep(.el-tabs__content) {
+  max-height: 65vh;
+  overflow-y: auto;
+}
+
+.device-ledger-tab-toolbar {
+  margin-bottom: 8px;
+  text-align: right;
+}
+
+.device-ledger-selection-input :deep(.el-input__inner) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.device-ledger-action-bar {
+  position: fixed;
+  bottom: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 16px;
+  box-sizing: border-box;
+  border-top: 1px solid var(--el-border-color-lighter);
+  background: var(--el-bg-color);
+  box-shadow: 0 -4px 12px rgb(0 0 0 / 6%);
+}
+
+@media (max-width: 1199px) {
+  .device-basic-media {
+    justify-content: flex-start;
+  }
+
+  .device-media-panel {
+    max-width: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .device-basic-fields :deep(.el-col) {
+    max-width: 100%;
+    flex: 0 0 100%;
+  }
+
+  .device-code-row :deep(.el-col:first-child) {
+    max-width: 75%;
+    flex: 0 0 75%;
+  }
+
+  .device-code-row :deep(.el-col:last-child) {
+    max-width: 25%;
+    flex: 0 0 25%;
+  }
+}
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/mes/deviceledger/index.vue b/src/views/mes/deviceledger/index.vue
index f7074eea..af6e8725 100644
--- a/src/views/mes/deviceledger/index.vue
+++ b/src/views/mes/deviceledger/index.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="device-ledger-layout">
+  <div class="device-ledger-page">
+    <template v-if="!formVisible">
+      <div class="device-ledger-layout">
     <ContentWrap class="device-ledger-left">
       <div class="tree-header">
         <span class="tree-title">{{ t('EquipmentManagement.EquipmentLedger.lineCategory') }}</span>
@@ -238,7 +240,7 @@
                 <el-button link @click="handleDetail(scope.row.id)">
                   {{ t('EquipmentManagement.EquipmentLedger.detail') }}
                 </el-button>
-                <el-button link type="primary" @click="openForm('update', scope.row.id)"
+                <el-button link type="primary" @click="handleEditDetail(scope.row.id)"
                   v-hasPermi="['mes:device-ledger:update']">
                   {{ t('EquipmentManagement.EquipmentLedger.edit') }}
                 </el-button>
@@ -319,10 +321,12 @@
 
       </ContentWrap>
     </div>
-  </div>
+    </div>
+    </template>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <DeviceLedgerForm ref="formRef" @success="getList" />
+    <!-- 表单：添加/修改 -->
+    <DeviceLedgerForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -734,6 +738,9 @@ const handleDetail = (id: number) => {
   router.push({ name: 'MesDeviceLedgerDetail', params: { id } })
 }
 
+const handleEditDetail = (id: number) => {
+  router.push({name: 'MesDeviceLedgerEditDetail', params: {id } })
+}
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -771,7 +778,10 @@ const resetQuery = () => {
 
 /** 添加/修改操作 */
 const formRef = ref()
-const openForm = (type: string, id?: number) => {
+const formVisible = ref(false)
+const openForm = async (type: string, id?: number) => {
+  formVisible.value = true
+  await nextTick()
   formRef.value.open(type, id, queryParams.deviceType, selectedDeviceLineId.value)
 }
 
diff --git a/src/views/mes/moldget/MoldGetForm.vue b/src/views/mes/moldget/MoldGetForm.vue
index e8199491..998dfc43 100644
--- a/src/views/mes/moldget/MoldGetForm.vue
+++ b/src/views/mes/moldget/MoldGetForm.vue
@@ -1,121 +1,111 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1200">
-    <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('MoldManagement.MoldGet.outType')" prop="outType">
-            <el-select
-              v-model="formData.outType"
-              clearable
-              filterable
-              :placeholder="t('MoldManagement.MoldGet.placeholderOutType')"
-              class="!w-1/1"
-              disabled
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+  <div class="mold-get-panel">
+    <div class="mold-get-panel__header">
+      <div class="mold-get-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="mold-get-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('MoldManagement.MoldGet.outType')" prop="outType">
+              <el-select
+                v-model="formData.outType"
+                clearable
+                filterable
+                :placeholder="t('MoldManagement.MoldGet.placeholderOutType')"
+                class="!w-1/1"
+                disabled
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('MoldManagement.MoldGet.outNo')" prop="no">
+              <el-input
+                disabled
+                v-model="formData.no"
+                :placeholder="t('MoldManagement.MoldGet.placeholderOutNoAuto')"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldGet.outNo')" prop="no">
-            <el-input
-              disabled
-              v-model="formData.no"
-              :placeholder="t('MoldManagement.MoldGet.placeholderOutNoAuto')"
-            />
-          </el-form-item>
-        </el-col>
-        <!-- <el-col :span="8">
-          <el-form-item label="客户" prop="customerId">
-            <el-select
-              v-model="formData.customerId"
-              clearable
-              filterable
-              placeholder="请选择客户"
-              class="!w-1/1"
-            >
-              <el-option
-                v-for="item in customerList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('MoldManagement.MoldGet.outTimeSingle')" prop="outTime">
+              <el-date-picker
+                v-model="formData.outTime"
+                type="date"
+                value-format="x"
+                :placeholder="t('MoldManagement.MoldGet.placeholderOutTime')"
+                class="!w-1/1"
               />
-            </el-select>
-          </el-form-item>
-        </el-col> -->
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldGet.outTimeSingle')" prop="outTime">
-            <el-date-picker
-              v-model="formData.outTime"
-              type="date"
-              value-format="x"
-              :placeholder="t('MoldManagement.MoldGet.placeholderOutTime')"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8" v-if="disabled">
-          <el-form-item :label="t('MoldManagement.MoldReturn.warehouse')" prop="warehouseId">
-            <el-select
-              v-model="formData.warehouseId"
-              clearable
-              filterable
-              :placeholder="t('MoldManagement.MoldReturn.placeholderWarehouse')"
-              class="!w-240px"
-              disabled
-            >
-              <el-option
-                v-for="item in warehouseList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" v-if="disabled">
+            <el-form-item :label="t('MoldManagement.MoldReturn.warehouse')" prop="warehouseId">
+              <el-select
+                v-model="formData.warehouseId"
+                clearable
+                filterable
+                :placeholder="t('MoldManagement.MoldReturn.placeholderWarehouse')"
+                class="!w-240px"
+                disabled
+              >
+                <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('MoldManagement.MoldGet.attachment')" prop="fileUrl">
+              <UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item :label="t('MoldManagement.MoldGet.remarkSingle')" prop="remark">
+              <el-input
+                type="textarea"
+                v-model="formData.remark"
+                :placeholder="t('MoldManagement.MoldGet.placeholderRemark')"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldGet.attachment')" prop="fileUrl">
-            <UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item :label="t('MoldManagement.MoldGet.remarkSingle')" prop="remark">
-            <el-input
-              type="textarea"
-              v-model="formData.remark"
-              :placeholder="t('MoldManagement.MoldGet.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('MoldManagement.MoldGet.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-row>
+      </el-form>
+      <!-- 子表的表单 -->
+      <ContentWrap>
+        <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
+          <el-tab-pane :label="t('MoldManagement.MoldGet.itemListTitle')" name="item">
+            <StockOutItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
+          </el-tab-pane>
+        </el-tabs>
+      </ContentWrap>
+    </div>
+
+    <div class="mold-get-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'
@@ -131,7 +121,6 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
 
-const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
@@ -179,7 +168,6 @@ const getTodayTimestamp = () => new Date().setHours(0, 0, 0, 0)
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -204,8 +192,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()
@@ -252,7 +244,7 @@ const submitForm = async () => {
       await StockOutApi.updateStockOut(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
+    closeForm()
     // 发送操作成功的事件
     emit('success')
   } finally {
@@ -275,3 +267,57 @@ const resetForm = () => {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.mold-get-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.mold-get-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.mold-get-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.mold-get-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.mold-get-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 768px) {
+  .mold-get-panel__header {
+    padding: 14px 16px;
+  }
+
+  .mold-get-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .mold-get-footer {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/src/views/mes/moldget/index.vue b/src/views/mes/moldget/index.vue
index e5ab245b..ad033595 100644
--- a/src/views/mes/moldget/index.vue
+++ b/src/views/mes/moldget/index.vue
@@ -1,6 +1,8 @@
 <template>
 
-  <ContentWrap>
+  <div class="mold-get-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
       class="-mb-15px"
@@ -260,9 +262,11 @@
       @pagination="getList"
     />
   </ContentWrap>
+    </template>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <MoldGetForm ref="formRef" @success="getList" />
+    <!-- 表单：添加/修改 -->
+    <MoldGetForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -340,8 +344,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)
 }
 
 /** 删除按钮操作 */
diff --git a/src/views/mes/moldreturn/MoldReturnForm.vue b/src/views/mes/moldreturn/MoldReturnForm.vue
index 04503e9a..a6a7383e 100644
--- a/src/views/mes/moldreturn/MoldReturnForm.vue
+++ b/src/views/mes/moldreturn/MoldReturnForm.vue
@@ -1,103 +1,111 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="1200">
-    <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('MoldManagement.MoldReturn.inType')" prop="inType">
-            <el-select
-              v-model="formData.inType"
-              clearable
-              filterable
-              :placeholder="t('MoldManagement.MoldReturn.placeholderInType')"
-              class="!w-1/1"
-              disabled
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+  <div class="mold-return-panel">
+    <div class="mold-return-panel__header">
+      <div class="mold-return-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="mold-return-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('MoldManagement.MoldReturn.inType')" prop="inType">
+              <el-select
+                v-model="formData.inType"
+                clearable
+                filterable
+                :placeholder="t('MoldManagement.MoldReturn.placeholderInType')"
+                class="!w-1/1"
+                disabled
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('MoldManagement.MoldReturn.inNo')" prop="no">
+              <el-input
+                disabled
+                v-model="formData.no"
+                :placeholder="t('MoldManagement.MoldReturn.placeholderInNoAuto')"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldReturn.inNo')" prop="no">
-            <el-input
-              disabled
-              v-model="formData.no"
-              :placeholder="t('MoldManagement.MoldReturn.placeholderInNoAuto')"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldReturn.inTimeSingle')" prop="inTime">
-            <el-date-picker
-              v-model="formData.inTime"
-              type="date"
-              value-format="x"
-              :placeholder="t('MoldManagement.MoldReturn.placeholderInTime')"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8" v-if="disabled">
-          <el-form-item :label="t('MoldManagement.MoldReturn.warehouse')" prop="warehouseId">
-            <el-select
-              v-model="formData.warehouseId"
-              clearable
-              filterable
-              :placeholder="t('MoldManagement.MoldReturn.placeholderWarehouse')"
-              class="!w-240px"
-              disabled
-            >
-              <el-option
-                v-for="item in warehouseList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :label="t('MoldManagement.MoldReturn.inTimeSingle')" prop="inTime">
+              <el-date-picker
+                v-model="formData.inTime"
+                type="date"
+                value-format="x"
+                :placeholder="t('MoldManagement.MoldReturn.placeholderInTime')"
+                class="!w-1/1"
               />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="t('MoldManagement.MoldReturn.attachment')" prop="fileUrl">
-            <UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" />
-          </el-form-item>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" v-if="disabled">
+            <el-form-item :label="t('MoldManagement.MoldReturn.warehouse')" prop="warehouseId">
+              <el-select
+                v-model="formData.warehouseId"
+                clearable
+                filterable
+                :placeholder="t('MoldManagement.MoldReturn.placeholderWarehouse')"
+                class="!w-240px"
+                disabled
+              >
+                <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="24">
-          <el-form-item :label="t('MoldManagement.MoldReturn.remarkSingle')" prop="remark">
-            <el-input
-              type="textarea"
-              v-model="formData.remark"
-              :placeholder="t('MoldManagement.MoldReturn.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('MoldManagement.MoldReturn.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">
-        {{ t('action.save') }}
+          <el-col :span="8">
+            <el-form-item :label="t('MoldManagement.MoldReturn.attachment')" prop="fileUrl">
+              <UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" />
+            </el-form-item>
+            </el-col>
+            <el-col :span="24">
+            <el-form-item :label="t('MoldManagement.MoldReturn.remarkSingle')" prop="remark">
+              <el-input
+                type="textarea"
+                v-model="formData.remark"
+                :placeholder="t('MoldManagement.MoldReturn.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('MoldManagement.MoldReturn.itemListTitle')" name="item">
+            <StockInItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
+          </el-tab-pane>
+        </el-tabs>
+      </ContentWrap>
+    </div>
+
+    <div class="mold-return-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 { StockInApi, StockInVO } from '@/api/erp/stock/in'
@@ -112,7 +120,6 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
 
-const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
@@ -160,7 +167,6 @@ const getTodayTimestamp = () => new Date().setHours(0, 0, 0, 0)
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -185,8 +191,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()
@@ -233,7 +243,7 @@ const submitForm = async () => {
       await StockInApi.updateStockIn(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
+    closeForm()
     // 发送操作成功的事件
     emit('success')
   } finally {
@@ -256,3 +266,57 @@ const resetForm = () => {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.mold-return-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.mold-return-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.mold-return-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.mold-return-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.mold-return-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 768px) {
+  .mold-return-panel__header {
+    padding: 14px 16px;
+  }
+
+  .mold-return-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .mold-return-footer {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/src/views/mes/moldreturn/index.vue b/src/views/mes/moldreturn/index.vue
index 77993fb8..114ad4b2 100644
--- a/src/views/mes/moldreturn/index.vue
+++ b/src/views/mes/moldreturn/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <ContentWrap>
+
+  <div class="mold-return-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
       class="-mb-15px"
@@ -257,9 +260,11 @@
       @pagination="getList"
     />
   </ContentWrap>
+    </template>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <MoldReturnForm ref="formRef" @success="getList" />
+    <!-- 表单：添加/修改 -->
+    <MoldReturnForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -335,8 +340,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)
 }
 
 /** 删除按钮操作 */
diff --git a/src/views/system/role/RoleAssignMenuForm.vue b/src/views/system/role/RoleAssignMenuForm.vue
index a69d847f..73a026fb 100644
--- a/src/views/system/role/RoleAssignMenuForm.vue
+++ b/src/views/system/role/RoleAssignMenuForm.vue
@@ -1,5 +1,39 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="t('SystemManagement.Role.menuPermission')">
+  <el-drawer
+    v-model="dialogVisible"
+    :with-header="false"
+    append-to-body
+    class="role-permission-drawer"
+    direction="rtl"
+    size="640px"
+  >
+    <div class="role-permission-drawer__shell">
+      <div class="role-permission-drawer__header">
+        <div class="role-permission-drawer__title">
+          <el-button text circle class="role-permission-drawer__close" @click="dialogVisible = false">
+            <Icon icon="ep:close" />
+          </el-button>
+          <span>{{ t('SystemManagement.Role.menuPermission') }}</span>
+        </div>
+        <el-dropdown trigger="click">
+          <el-button>
+            更多操作
+            <Icon icon="ep:arrow-down" class="ml-4px" />
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="handleCheckedTreeNodeAll">
+                {{ t('SystemManagement.Role.selectAll') }}
+              </el-dropdown-item>
+              <el-dropdown-item @click="handleCheckedTreeExpand">
+                {{ t('SystemManagement.Role.expandCollapse') }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+
+      <div class="role-permission-drawer__body">
     <el-form
       ref="formRef"
       v-loading="formLoading"
@@ -7,15 +41,17 @@
       label-width="auto"
       class="role-assign-menu-form"
     >
-      <el-form-item :label="t('SystemManagement.Role.name')">
-        <el-tag>{{ formData.name }}</el-tag>
-      </el-form-item>
-      <el-form-item :label="t('SystemManagement.Role.code')">
-        <el-tag>{{ formData.code }}</el-tag>
-      </el-form-item>
-      <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__meta-row">
+        <el-form-item :label="t('SystemManagement.Role.name')" class="role-assign-menu-form__meta">
+          <el-tag>{{ formData.name }}</el-tag>
+        </el-form-item>
+        <el-form-item :label="t('SystemManagement.Role.code')" class="role-assign-menu-form__meta">
+          <el-tag>{{ formData.code }}</el-tag>
+        </el-form-item>
+      </div>
+      <el-form-item label-width="0" class="role-assign-menu-form__permission">
+        <div class="role-permission-tree-panel">
+          <div class="role-permission-tree-panel__title">所拥有的权限</div>
             <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" />
@@ -40,23 +76,27 @@
             />
               </div>
             </div>
-          </template>
           <el-tree
             ref="treeRef"
+            class="role-permission-tree"
             :data="menuOptions"
             :props="defaultProps"
             :empty-text="t('SystemManagement.Role.loadingText')"
             node-key="id"
             show-checkbox
           />
-        </el-card>
+        </div>
       </el-form-item>
     </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">{{ t('common.ok') }}</el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+      </div>
+
+      <div class="role-permission-drawer__footer">
+        <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
+        <el-button :disabled="formLoading" @click="submitForm">仅保存</el-button>
+        <el-button :disabled="formLoading" type="primary" @click="submitForm">保存并关闭</el-button>
+      </div>
+    </div>
+  </el-drawer>
 </template>
 <script lang="ts" setup>
 import { defaultProps, handleTree } from '@/utils/tree'
@@ -231,25 +271,182 @@ const handleCheckedTreeExpand = () => {
 </script>
 
 <style scoped>
+.role-permission-drawer :deep(.el-drawer__body) {
+  padding: 0;
+  overflow: hidden;
+}
+
+.role-permission-drawer__shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--el-bg-color);
+}
+
+.role-permission-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 0 0 74px;
+  padding: 0 24px 0 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.role-permission-drawer__title {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  color: var(--el-text-color-primary);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.role-permission-drawer__close {
+  margin-right: 10px;
+  color: var(--el-text-color-secondary);
+}
+
+.role-permission-drawer__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 24px 18px 92px;
+  box-sizing: border-box;
+}
+
+.role-permission-drawer__footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 14px 18px;
+  box-sizing: border-box;
+  border-top: 1px solid var(--el-border-color-lighter);
+  background: var(--el-bg-color);
+}
+
 .role-assign-menu-form :deep(.el-form-item__label) {
   min-width: 80px;
 }
 
+.role-assign-menu-form__meta-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.role-assign-menu-form__meta {
+  margin-bottom: 0;
+}
+
+.role-assign-menu-form__meta :deep(.el-form-item__content) {
+  min-width: 0;
+}
+
+.role-assign-menu-form__meta :deep(.el-tag) {
+  max-width: 100%;
+  height: 28px;
+  overflow: hidden;
+  border-color: var(--el-border-color-lighter);
+  background: var(--el-fill-color-extra-light);
+  color: var(--el-text-color-primary);
+  line-height: 26px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.role-assign-menu-form__permission {
+  margin-top: 6px;
+  margin-bottom: 0;
+}
+
+.role-permission-tree-panel {
+  width: 100%;
+}
+
+.role-permission-tree-panel__title {
+  margin-bottom: 22px;
+  color: var(--el-text-color-primary);
+  font-size: 16px;
+  line-height: 24px;
+}
+
 .role-assign-menu-form__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
+  margin-bottom: 12px;
 }
 
 .role-assign-menu-form__header :deep(.el-tabs__header) {
   margin: 0;
 }
 
+.role-assign-menu-form__header :deep(.el-tabs__nav-wrap::after) {
+  display: none;
+}
+
 .role-assign-menu-form__actions {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }
+
+.role-permission-tree {
+  --el-tree-node-hover-bg-color: transparent;
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+}
+
+.role-permission-tree :deep(.el-tree-node__content) {
+  height: 28px;
+  padding-right: 8px;
+}
+
+.role-permission-tree :deep(.el-tree-node__expand-icon) {
+  color: var(--el-text-color-primary);
+  font-size: 12px;
+}
+
+.role-permission-tree :deep(.el-checkbox) {
+  height: 18px;
+  margin-right: 8px;
+}
+
+.role-permission-tree :deep(.el-checkbox__inner) {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+}
+
+.role-permission-tree :deep(.el-tree-node__label) {
+  line-height: 22px;
+}
+
+@media (max-width: 768px) {
+  .role-permission-drawer :deep(.el-drawer) {
+    width: 100% !important;
+  }
+
+  .role-permission-drawer__header {
+    padding-right: 14px;
+  }
+
+  .role-permission-drawer__body {
+    padding-right: 14px;
+    padding-left: 14px;
+  }
+
+  .role-assign-menu-form__meta-row {
+    grid-template-columns: 1fr;
+  }
+}
 </style>