style：处理设备台账代码合并问题

src/views/mes/deviceledger/DeviceLedgerForm.vue

@@ -1,132 +1,87 @@
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible" width="920px">
-    <el-form
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="110px" v-loading="formLoading">
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
       <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="8">
-        <el-col :span="12">
+          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.images')" prop="images">
+            <UploadImg style="height: 100px" v-model="formData.images" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="16">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceCode')" prop="deviceCode">
-            <el-row :gutter="10" style="width: 100%">
+            <el-row :gutter="20" style="width: 100%">
-              <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
+              <el-col :xs="18" :sm="18" :md="16" :lg="14" :xl="10">
-                <el-input
+                <el-input v-model="formData.deviceCode"
-                  v-model="formData.deviceCode"
                   :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceCode')"
-                  :disabled="Boolean(formData.isCode) || formType === 'update'"
+                  :disabled="Boolean(formData.isCode) || formType === 'update'" />
-                />
               </el-col>
               <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
                 <div>
-                  <el-switch
+                  <el-switch v-model="formData.isCode" :disabled="formType === 'update'"
-                    v-model="formData.isCode"
+                    @change="handleCodeAutoChange" />
-                    :disabled="formType === 'update'"
-                    @change="handleCodeAutoChange"
-                  />
                 </div>
               </el-col>
+
             </el-row>
           </el-form-item>
-        </el-col>
-        <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="24">
+          <el-row :gutter="20">
-          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceType')" prop="deviceType" required>
+            <el-col :span="12">
-            <el-tree-select
+              <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceName')" prop="deviceName" required>
-              v-model="formData.deviceType"
+                <el-input v-model="formData.deviceName"
-              :data="deviceTypeTree"
+                  :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceName')" />
-              :props="treeSelectProps"
+              </el-form-item>
-              check-strictly
+            </el-col>
-              default-expand-all
+            <el-col :span="12">
-              value-key="id"
+              <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceType')" prop="deviceType" required>
-              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceType')"
+                <el-tree-select v-model="formData.deviceType" :data="deviceTypeTree" :props="treeSelectProps"
-              class="!w-full"
+                  check-strictly default-expand-all value-key="id"
-            />
+                  :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceType')" class="!w-full" />
-          </el-form-item>
+              </el-form-item>
-        </el-col>
+            </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.ratedCapacity')" prop="ratedCapacity">
+                <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-col :span="12">
+              <el-form-item label="每日报工平均值" prop="dailyAverageValue">
+                <el-input-number v-model="formData.dailyAverageValue" :min="0" :precision="0" controls-position="right"
+                  class="!w-full" placeholder="请输入每日报工平均值" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="数据采集产能" prop="dataCollectionCapacity">
+                <el-input-number v-model="formData.dataCollectionCapacity" :min="0" :precision="0"
+                  controls-position="right" class="!w-full" placeholder="请输入数据采集产能" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
 
-        <!-- <el-col :span="12">
-          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" prop="deviceBrand">
-            <el-input v-model="formData.deviceBrand" placeholder="请输入品牌" />
-          </el-form-item>
-        </el-col> -->
-        <el-col :span="24">
-          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceModel')" prop="deviceModel">
-            <el-input v-model="formData.deviceModel" :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceModel')" />
-          </el-form-item>
-        </el-col>
 
-        <el-col :span="24">
-          <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.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.ratedCapacity')" prop="ratedCapacity">
-            <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-col :span="12">
-          <el-form-item label="每日报工平均值" prop="dailyAverageValue">
-            <el-input-number
-              v-model="formData.dailyAverageValue"
-              :min="0"
-              :precision="0"
-              controls-position="right"
-              class="!w-full"
-              placeholder="请输入每日报工平均值"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="数据采集产能" prop="dataCollectionCapacity">
-            <el-input-number
-              v-model="formData.dataCollectionCapacity"
-              :min="0"
-              :precision="0"
-              controls-position="right"
-              class="!w-full"
-              placeholder="请输入数据采集产能"
-            />
-          </el-form-item>
         </el-col>
         <!-- <el-col :span="12">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceBrand')" prop="deviceBrand">
             <el-input v-model="formData.deviceBrand" placeholder="请输入品牌" />
           </el-form-item>
         </el-col> -->
-<!--        <el-col :span="24">
+        <!--        <el-col :span="24">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceModel')" prop="deviceModel">
             <el-input v-model="formData.deviceModel" :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceModel')" />
           </el-form-item>
@@ -136,77 +91,81 @@
         <!-- <el-col :span="12">
           <el-form-item label="供应商" prop="supplier">
             <el-input v-model="formData.supplier" placeholder="请输入供应商" /> -->
-            <!--
+        <!--
-            <el-select v-model="formData.supplier" placeholder="请选择供应商" clearable filterable class="!w-full">
+        <el-select v-model="formData.supplier" placeholder="请选择供应商" clearable filterable class="!w-full">
-              <el-option v-for="item in supplierOptions" :key="item" :label="item" :value="item" />
+          <el-option v-for="item in supplierOptions" :key="item" :label="item" :value="item" />
-            </el-select>
+        </el-select>
-            -->
+        -->
-          <!-- </el-form-item>
+        <!-- </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="所属车间" prop="workshop">
+          <el-input v-model="formData.workshop" placeholder="请输入所属车间" /> -->
+        <!--
+        <el-tree-select
+          v-model="formData.workshop"
+          :data="deptTree"
+          :props="treeSelectProps"
+          check-strictly
+          default-expand-all
+          value-key="id"
+          placeholder="请选择所属车间"
+          class="!w-full"
+        />
+        -->
+        <!-- </el-form-item>
+      </el-col> -->
+        <el-col :span="8">
+          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.isSchedueld')" prop="isScheduled">
+            <el-switch v-model="formData.isScheduled" :active-value="1" :inactive-value="0"
+              :active-text="t('EquipmentManagement.EquipmentLedger.yes')"
+              :inactive-text="t('EquipmentManagement.EquipmentLedger.no')" inline-prompt />
+          </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="8">
-          <el-form-item label="所属车间" prop="workshop">
-            <el-input v-model="formData.workshop" placeholder="请输入所属车间" /> -->
-            <!--
-            <el-tree-select
-              v-model="formData.workshop"
-              :data="deptTree"
-              :props="treeSelectProps"
-              check-strictly
-              default-expand-all
-              value-key="id"
-              placeholder="请选择所属车间"
-              class="!w-full"
-            />
-            -->
-          <!-- </el-form-item>
-        </el-col> -->
-
-        <el-col :span="24">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.productionDate')" prop="productionDate" required>
-            <el-date-picker v-model="formData.productionDate" type="date" value-format="YYYY-MM-DD" :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderProductionDate')" class="!w-full" />
+            <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-col>
 
-        <el-col :span="24">
+        <el-col :span="8">
-          <el-form-item :label="t('EquipmentManagement.EquipmentLedger.factoryEntryDate')" prop="factoryEntryDate" required>
+          <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" />
+            required>
+            <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 :span="24">
+        <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-input v-model="formData.deviceLocation"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceLocation')" />
           </el-form-item>
         </el-col>
 
         <!-- <el-col :span="24">
           <el-form-item label="所属系统组织" prop="systemOrg">
             <el-input v-model="formData.systemOrg" placeholder="请输入所属系统组织" /> -->
-            <!--
+        <!--
-            <el-tree-select
+        <el-tree-select
-              v-model="formData.systemOrg"
+          v-model="formData.systemOrg"
-              :data="deptTree"
+          :data="deptTree"
-              :props="treeSelectProps"
+          :props="treeSelectProps"
-              check-strictly
+          check-strictly
-              default-expand-all
+          default-expand-all
-              value-key="id"
+          value-key="id"
-              placeholder="请选择部门"
+          placeholder="请选择部门"
-              class="!w-full"
+          class="!w-full"
-            />
+        />
-            -->
+        -->
-          <!-- </el-form-item>
+        <!-- </el-form-item>
-        </el-col> -->
+      </el-col> -->
 
-        <el-col :span="24">
+        <el-col :span="12">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.deviceManagerName')" prop="deviceManagerIds">
-            <el-select
+            <el-select v-model="formData.deviceManagerIds" multiple filterable clearable
-              v-model="formData.deviceManagerIds"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderDeviceManagerIds')" class="!w-full">
-              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>
@@ -225,29 +184,17 @@
         </el-col> -->
         <el-col :span="24">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')" prop="componentIds">
-            <el-input
+            <el-input :model-value="criticalComponentDisplay" readonly clearable class="device-ledger-selection-input"
-              :model-value="criticalComponentDisplay"
-              readonly
-              clearable
-              class="device-ledger-selection-input"
               :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderComponentIds')"
-              @clear="clearCriticalComponent"
+              @clear="clearCriticalComponent" @click="openCriticalComponentDialog" />
-              @click="openCriticalComponentDialog"
-            />
           </el-form-item>
         </el-col>
 
         <el-col :span="24">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.sparePart')" prop="beijianIds">
-            <el-input
+            <el-input :model-value="beijianDisplay" readonly clearable class="device-ledger-selection-input"
-              :model-value="beijianDisplay"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderBeijianIds')" @clear="clearBeijian"
-              readonly
+              @click="openBeijianDialog" />
-              clearable
-              class="device-ledger-selection-input"
-              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderBeijianIds')"
-              @clear="clearBeijian"
-              @click="openBeijianDialog"
-            />
           </el-form-item>
         </el-col>
 
@@ -258,26 +205,19 @@
         </el-col>
         <el-col v-if="formType === 'update'" :span="24">
           <el-form-item :label="t('EquipmentManagement.EquipmentLedger.qrcode')" prop="qrcodeUrl">
-            <QrcodeActionCard
+            <QrcodeActionCard :image-url="formData.qrcodeUrl" :print-id="formData.id"
-              :image-url="formData.qrcodeUrl"
+              :print-title="`${formData.deviceName || '设备'}码打印预览`" :print-paper-width="80" :print-paper-height="80"
-              :print-id="formData.id"
+              :print-max-width="220" :empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeEmpty')"
-              :print-title="`${formData.deviceName || '设备'}码打印预览`"
-              :print-paper-width="80"
-              :print-paper-height="80"
-              :print-max-width="220"
-              :empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeEmpty')"
               :error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
-              :refresh-url="getQrcodeRefreshUrl()"
+              :refresh-url="getQrcodeRefreshUrl()" :refresh-disabled="!formData.id || !formData.deviceCode"
-              :refresh-disabled="!formData.id || !formData.deviceCode"
+              refresh-confirm-text="确认刷新该设备二维码吗？" @refresh-success="handleQrcodeRefreshSuccess" />
-              refresh-confirm-text="确认刷新该设备二维码吗？"
-              @refresh-success="handleQrcodeRefreshSuccess"
-            />
           </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-input v-model="formData.remark"
+              :placeholder="t('EquipmentManagement.EquipmentLedger.placeholderRemark')" type="textarea" />
           </el-form-item>
         </el-col>
       </el-row>
@@ -288,42 +228,124 @@
     </template>
   </Dialog>
 
-  <el-dialog
+  <el-dialog v-model="criticalComponentDialogVisible" title="选择关键件" width="1200px" class="device-ledger-transfer-dialog"
-    v-model="criticalComponentDialogVisible"
+    append-to-body>
-    title="选择关键件"
+    <!--    <div class="device-ledger-transfer">
-    width="860px"
+          <el-transfer
-    class="device-ledger-transfer-dialog"
+            v-model="criticalComponentDraft"
-    append-to-body
+            :data="criticalComponentTransferData"
-  >
+            filterable
-    <div class="device-ledger-transfer">
+            :filter-placeholder="t('EquipmentManagement.EquipmentLedger.placeholderComponentIds')"
-      <el-transfer
+          />
-        v-model="criticalComponentDraft"
+        </div>-->
-        :data="criticalComponentTransferData"
+    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px"
-        filterable
+      style="margin-bottom: 10px">
-        :filter-placeholder="t('EquipmentManagement.EquipmentLedger.placeholderComponentIds')"
+      <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.code')" prop="code">
-      />
+        <el-input v-model="queryParams.code" :placeholder="t('EquipmentManagement.EquipmentKeyItems.placeholderCode')"
-    </div>
+          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>
+    <ContentWrap>
+      <el-table ref="multipleTableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
+        @selection-change="handleSelectionChange" @select="handleSelect" @select-all="handleSelectAll" row-key="id">
+        <el-table-column type="selection" width="55" :reserve-selection="true" />
+        <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.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>
+
+      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+        @pagination="getList" />
+
+    </ContentWrap>
     <template #footer>
       <el-button @click="criticalComponentDialogVisible = false">{{ t('common.cancel') }}</el-button>
       <el-button type="primary" @click="confirmCriticalComponentDialog">{{ t('common.ok') }}</el-button>
     </template>
   </el-dialog>
 
-  <el-dialog
+  <el-dialog v-model="beijianDialogVisible" title="选择备件" width="860px" class="device-ledger-transfer-dialog"
-    v-model="beijianDialogVisible"
+    append-to-body>
-    title="选择备件"
+    <!--    <div class="device-ledger-transfer">
-    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>
+    </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"
+        @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>
@@ -333,27 +355,41 @@
 </template>
 <script setup lang="ts">
 import { DeviceLedgerApi, DeviceLedgerVO } from '@/api/mes/deviceledger'
-import { CriticalComponentApi } from '@/api/mes/criticalComponent'
+import { CriticalComponentApi, CriticalComponentVO } from '@/api/mes/criticalComponent'
 import { DeviceTypeApi, DeviceTypeTreeVO } from '@/api/mes/devicetype'
 import { getSimpleUserList, UserVO } from '@/api/system/user'
 import { formatDate } from '@/utils/formatTime'
 import type { FormRules } from 'element-plus'
-import { ProductApi } from '@/api/erp/product/product'
+import { ProductApi, ProductVO } from '@/api/erp/product/product'
-import { DeviceApi,DeviceVO } from '@/api/iot/device'
+import { DeviceApi, DeviceVO } from '@/api/iot/device'
 import QrcodeActionCard from '@/components/QrcodeActionCard/index.vue'
-
+import { dateFormatter } from '@/utils/formatTime'
+import { ref } from "vue";
+import { ElTable } from "element-plus";
+import { DICT_TYPE } from '@/utils/dict'
 /** 设备类型 表单 */
 defineOptions({ name: 'DeviceLedgerForm' })
-
+const queryFormRef = ref()
+const bjQueryFormRef = ref()
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
+const loading = ref(true)
+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 formType = ref('') // 表单的类型：create - 新增；update - 修改
 const deviceList = ref<DeviceVO[]>([]) // 列表
-
+const list = ref<CriticalComponentVO[]>([])
+const bjList = ref<ProductVO[]>([])
+const selectedRows = ref<any[]>([])  // 存储所有选中的行
+const bjSelectedRows = ref<any[]>([])  // 存储所有选中的行
+// 表格引用
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const bjMultipleTableRef = ref<InstanceType<typeof ElTable>>()
 const parseIdsValue = (value: any): number[] => {
   if (!value) return []
   if (Array.isArray(value)) return value.map((v) => Number(v)).filter((v) => !Number.isNaN(v))
@@ -426,7 +462,7 @@ const normalizeFileUrlAsJsonArrayString = (value: any): string | undefined => {
         const idx = url.lastIndexOf('/')
         return JSON.stringify([{ fileName: name || (idx !== -1 ? url.substring(idx + 1) : url), fileUrl: url }])
       }
-    } catch {}
+    } catch { }
 
     const urls = trimmed
       .split(',')
@@ -454,7 +490,7 @@ const initFormData = () => ({
   deviceBrand: undefined,
   deviceModel: undefined,
   deviceSpec: undefined,
-  isSchedueld: 0,
+  isScheduled: 0,
   ratedCapacity: undefined,
   deviceType: undefined,
   supplier: undefined,
@@ -470,7 +506,9 @@ const initFormData = () => ({
   fileUrl: undefined,
   qrcodeUrl: undefined,
   sort: undefined,
-  dvId: undefined
+  dvId: undefined,
+  dailyAverageValue: undefined,
+  dataCollectionCapacity: undefined
 })
 
 const formData = ref({
@@ -538,23 +576,32 @@ const clearBeijian = () => {
 const openCriticalComponentDialog = () => {
   criticalComponentDraft.value = [...(formData.value.componentIds ?? [])]
   criticalComponentDialogVisible.value = true
+  ids.value = formData.value.componentIds
+  setDefaultSelections()
 }
 const openBeijianDialog = () => {
   beijianDraft.value = [...(formData.value.beijianIds ?? [])]
   beijianDialogVisible.value = true
+  bjIds.value = formData.value.beijianIds
+  setBJDefaultSelections()
 }
-
+const ids = ref([])
 const confirmCriticalComponentDialog = () => {
-  const validMap = new Set(criticalComponentOptions.value.map((item) => item.value))
+  //let ids = selectedRows.value.map(item => item.id);
-  const selected = Array.from(new Set(criticalComponentDraft.value.map((v) => Number(v)).filter((v) => validMap.has(v))))
+  //const validMap = new Set(criticalComponentOptions.value.map((item) => item.value))
-  formData.value.componentIds = selected
+  //const selected = Array.from(new Set(criticalComponentDraft.value.map((v) => Number(v)).filter((v) => validMap.has(v))))
+  formData.value.componentIds = ids.value
   criticalComponentDialogVisible.value = false
+  //multipleTableRef.value.clearSelection()
 }
+const bjIds = ref([])
 const confirmBeijianDialog = () => {
-  const validMap = new Set(beijianOptions.value.map((item) => item.value))
+  // let ids = bjSelectedRows.value.map(item => item.id);
-  const selected = Array.from(new Set(beijianDraft.value.map((v) => Number(v)).filter((v) => validMap.has(v))))
+  /* const validMap = new Set(beijianOptions.value.map((item) => item.value))
-  formData.value.beijianIds = selected
+   const selected = Array.from(new Set(beijianDraft.value.map((v) => Number(v)).filter((v) => validMap.has(v))))*/
+  formData.value.beijianIds = bjIds.value
   beijianDialogVisible.value = false
+  //multipleTableRef.value.clearSelection()
 }
 
 const handleCodeAutoChange = (value: boolean) => {
@@ -622,7 +669,7 @@ const open = async (type: string, id?: number, defaultDeviceTypeId?: number) =>
         ...initFormData(),
         ...(detail as any),
         isCode: (detail as any)?.isCode ?? false,
-        isSchedueld: normalizeNumberish((detail as any)?.isSchedueld ?? (detail as any)?.isScheduled) ?? 0,
+        isScheduled: normalizeNumberish((detail as any)?.isScheduled ?? (detail as any)?.isScheduled) ?? 0,
         ratedCapacity: normalizeNumberish((detail as any)?.ratedCapacity),
         deviceType: normalizeNumberish((detail as any)?.deviceType),
         deviceManagerIds: parseIdsValue((detail as any)?.deviceManager),
@@ -631,6 +678,8 @@ const open = async (type: string, id?: number, defaultDeviceTypeId?: number) =>
         componentIds: parseIdsValue((detail as any)?.componentId),
         beijianIds: parseIdsValue((detail as any)?.beijianId),
         qrcodeUrl: (detail as any)?.qrcodeUrl,
+        dailyAverageValue: normalizeNumberish((detail as any)?.dailyAverageValue),
+        dataCollectionCapacity: normalizeNumberish((detail as any)?.dataCollectionCapacity),
       }
     } finally {
       formLoading.value = false
@@ -641,8 +690,199 @@ const open = async (type: string, id?: number, defaultDeviceTypeId?: number) =>
   } else {
     deviceList.value = await DeviceApi.getDeviceList2ByNoUsed(formData.value.dvId)
   }
+  getList()
+
+  bjGetList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+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,
+  name: undefined,
+  categoryId: 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 currentSelectedRows = ref([])
+
+// select 事件：row 是当前操作的行，selected 是操作后的状态
+const handleSelect = (selection, row) => {
+  // 判断是选中还是取消选中
+  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) ?? []
+}
+
+
+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 bjCurrentSelectedRows = ref([])
+
+// select 事件：row 是当前操作的行，selected 是操作后的状态
+const bjHandleSelect = (selection, row) => {
+  // 判断是选中还是取消选中
+  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 emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
@@ -654,7 +894,7 @@ const submitForm = async () => {
   try {
     const data = {
       ...(formData.value as any),
-      isSchedueld: normalizeNumberish((formData.value as any).isSchedueld) ?? 0,
+      isScheduled: normalizeNumberish((formData.value as any).isScheduled) ?? 0,
       ratedCapacity: normalizeNumberish((formData.value as any).ratedCapacity),
       deviceType: normalizeNumberish(formData.value.deviceType),
       productionDate: normalizeYmd(formData.value.productionDate),
@@ -662,7 +902,9 @@ const submitForm = async () => {
       deviceManager: formData.value.deviceManagerIds?.length ? formData.value.deviceManagerIds.join(',') : undefined,
       componentId: formData.value.componentIds?.length ? formData.value.componentIds.join(',') : undefined,
       beijianId: formData.value.beijianIds?.length ? formData.value.beijianIds.join(',') : undefined,
-      fileUrl: normalizeFileUrlAsJsonArrayString((formData.value as any).fileUrl)
+      fileUrl: normalizeFileUrlAsJsonArrayString((formData.value as any).fileUrl),
+      dailyAverageValue: normalizeNumberish((formData.value as any).dailyAverageValue),
+      dataCollectionCapacity: normalizeNumberish((formData.value as any).dataCollectionCapacity)
     } as unknown as DeviceLedgerVO
     delete (data as any).deviceManagerIds
     delete (data as any).componentIds
@@ -682,6 +924,79 @@ const submitForm = async () => {
   }
 }
 
+// 方法1：直接监听 data
+watch(list, (newData, oldData) => {
+  // 可以在这里执行相关操作
+  if (newData.length > 0) {
+    // 数据加载完成后的操作
+    setDefaultSelections()
+  }
+}, { deep: true })
+
+
+//const defaultSelectedIds = [144, 143,141]
+
+// 设置默认选中的行
+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 => {
+      let id = row.id;
+      if (rawSubjectIds.includes(row.id)) {
+        multipleTableRef.value.toggleRowSelection(row, true)
+      }
+    })
+  })
+}
+
+// 方法1：直接监听 data
+watch(bjList, (newData, oldData) => {
+  // 可以在这里执行相关操作
+  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 => {
+      let id = row.id;
+      if (rawSubjectIds.includes(row.id)) {
+        bjMultipleTableRef.value.toggleRowSelection(row, true)
+      }
+    })
+  })
+}
+
+
+
+
 /** 重置表单 */
 const resetForm = () => {
   formData.value = initFormData()
@@ -699,7 +1014,8 @@ const resetForm = () => {
 .device-ledger-manager :deep(.el-input) {
   flex: 1;
 }
-:deep(.ellipsis-text){
+
+:deep(.ellipsis-text) {
   max-width: 300px;
 }
 
@@ -745,5 +1061,4 @@ const resetForm = () => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 </style>