update

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

@@ -1,5 +1,6 @@
 <template>
-  <ContentWrap>
+  <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" >
@@ -197,7 +198,7 @@
 
                 </el-tabs>
       </div>
-      <div class="device-ledger-action-bar">
+      <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>
@@ -328,6 +329,7 @@
     </el-dialog>
 
   </ContentWrap>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -340,6 +342,7 @@ 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";
@@ -351,11 +354,30 @@ 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 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[]>([])
@@ -779,6 +801,9 @@ const beijianDisplay = computed(() =>
 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 }))
   }
 
@@ -973,7 +998,7 @@ const handleExportCriticalComponent = async () => {
   try {
     await message.exportConfirm()
     criticalExportLoading.value = true
-    const data = await CriticalComponentApi.exportDeviceComponent({ id: deviceId.value })
+    const data = await DeviceLedgerApi.exportDeviceComponent({ deviceId: deviceId.value })
     download.excel(data, 'critical-component.xls')
   } catch {
   } finally {
@@ -1058,24 +1083,53 @@ async function initForm() {
       }
       savedCriticalComponentOptions.value = buildCriticalComponentOptions((detail as any)?.componentList ?? [])
       savedBeijianOptions.value = buildBeijianOptions((detail as any)?.beijianList ?? [])
-      syncCriticalComponentRows()
+     // 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
+  }
+}
 onMounted(async () => {
   await ensureOptionsLoaded()
   initForm()
- // await getDetail()
+ //初始化设备关键件
   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;
@@ -1132,17 +1186,14 @@ onMounted(async () => {
   white-space: nowrap;
 }
 .device-ledger-action-bar {
-/*  position: sticky;
-  bottom: 0;*/
   position: fixed;
-  right: 24px;
   bottom: 0;
-  left: 240px;
   z-index: 10;
   display: flex;
-  justify-content: flex-end;
+  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%);
@@ -1163,4 +1214,9 @@ onMounted(async () => {
 
 
 
+
+
+
+
+