修复抽盘选择数据多时的卡顿问题

src/components/customer/AssetInventoryStep5.vue

@@ -24,7 +24,9 @@
           <button type="button" class="btn btn-danger" @click="clearFilter">
             {{ $t("lang.AssetInventorySearch.empty") }}
           </button>
-          <a-button style="height: 33.5px" type="primary" @click="downloadFile">下载</a-button>
+          <a-button style="height: 33.5px" type="primary" @click="downloadFile"
+            >下载</a-button
+          >
           <a-upload
             v-model:file-list="fileList"
             :show-upload-list="false"
@@ -324,10 +326,11 @@
               <td>
                 <input
                   id="assetInstance.id"
-                  v-model="assetInstancesTempory"
+                  v-model="assetInstance.checked"
                   autocomplete="off"
                   type="checkbox"
                   :value="assetInstance"
+                  @change="checkedChange(assetInstance)"
                 />
               </td>
               <td>{{ assetInstance.clientName }}</td>
@@ -369,15 +372,17 @@
       <div class="grid-item-row4-column2">
         <div>
           <div class="pull-left">
-            <span>{{ $t("lang.AssetInventorySearch.the")
-            }}{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{
-              pagination.current_page * pagination.per_page
-            }}{{ $t("lang.AssetInventorySearch.strip") }},{{
-              $t("lang.AssetInventorySearch.inTotal")
-            }}{{ pagination.total
-            }}{{ $t("lang.AssetInventorySearch.strip") }},{{
-              $t("lang.AssetInventorySearch.eachPage")
-            }}</span>
+            <span
+              >{{ $t("lang.AssetInventorySearch.the")
+              }}{{ (pagination.current_page - 1) * pagination.per_page + 1 }}-{{
+                pagination.current_page * pagination.per_page
+              }}{{ $t("lang.AssetInventorySearch.strip") }},{{
+                $t("lang.AssetInventorySearch.inTotal")
+              }}{{ pagination.total
+              }}{{ $t("lang.AssetInventorySearch.strip") }},{{
+                $t("lang.AssetInventorySearch.eachPage")
+              }}</span
+            >
             <PageSizeSelect @page-size-changed="pageSizeChanged" />
             <span>{{ $t("lang.AssetInventorySearch.strip") }}</span>
           </div>
@@ -416,7 +421,7 @@
     </div> -->
     <Loading v-if="loading" />
     <Modal v-model:show="modal1" title="盘点清单" small="true">
-      <div>
+      <div style="height: 500px; overflow: auto">
         <table class="fixed-table table-striped table-bordered">
           <thead>
             <tr>
@@ -549,18 +554,18 @@
 </template>
 
 <script>
-import Common from '../../common/Common.js';
+import Common from "../../common/Common.js";
 
-import AssetInstanceResource from '../../api/asset/AssetInstanceResource.js';
-import AssetInventoryResource from '../../api/asset/AssetInventoryResource.js';
+import AssetInstanceResource from "../../api/asset/AssetInstanceResource.js";
+import AssetInventoryResource from "../../api/asset/AssetInventoryResource.js";
 
-import AssetInventoryLineResource from '../../api/asset/AssetInventoryLineResource.js';
-import ClientOrganizationTree from '../../widget/ClientOrganizationTree.vue';
-import ProjectItemTree from '../../widget/ProjectItemTree.vue';
-import AssetCategoryTree from '../../widget/AssetCategoryTree.vue';
+import AssetInventoryLineResource from "../../api/asset/AssetInventoryLineResource.js";
+import ClientOrganizationTree from "../../widget/ClientOrganizationTree.vue";
+import ProjectItemTree from "../../widget/ProjectItemTree.vue";
+import AssetCategoryTree from "../../widget/AssetCategoryTree.vue";
 
-import { Notify, Uuid } from 'pc-component-v3';
-import { message } from 'ant-design-vue';
+import { Notify, Uuid } from "pc-component-v3";
+import { message } from "ant-design-vue";
 
 export default {
   components: {
@@ -571,7 +576,7 @@ export default {
     ClientOrganizationTree,
   },
   // 定义抛出的事件名称
-  emits: ['previous', 'next'],
+  emits: ["previous", "next"],
   data: function () {
     return {
       clientOrganizations: [], // 所属部门
@@ -590,7 +595,7 @@ export default {
         custodianId: null,
         depositoryUserId: null,
       },
-      additionalHql: '',
+      additionalHql: "",
       pagination: {
         total: 0,
         per_page: Common.pageSize, // required
@@ -606,59 +611,59 @@ export default {
       assetInventoryResponseOrganizationIds: [], // 盘点单中已经选中的所属部门
       assetInventoryCategoryIds: [], // 盘点单中已经选中的资产类别
       assetInventoryProjectItemIds: [], // 盘点单中已经选择的项目
-      locationWindowNo: '109494',
+      locationWindowNo: "109494",
       locationField: {
-        name: '',
-        listDisplayFieldName: 'ar.name',
+        name: "",
+        listDisplayFieldName: "ar.name",
       },
       locationFieldValue: {
         id: null,
-        displayValue: [''],
-        fieldType: 'Key',
+        displayValue: [""],
+        fieldType: "Key",
       },
       whereClauseSource: {
         customerDataDimensions: [
           {
-            fieldName: 'ar.client.id',
-            dataDimensionTypeNo: '202201191757',
-            defaultDataDimensionTypeValueNo: '1',
+            fieldName: "ar.client.id",
+            dataDimensionTypeNo: "202201191757",
+            defaultDataDimensionTypeValueNo: "1",
           },
         ],
       },
-      userWindowNo: '050408',
+      userWindowNo: "050408",
       userField: {
-        name: '',
-        listDisplayFieldName: 'name',
+        name: "",
+        listDisplayFieldName: "name",
       },
       userFieldValue: {
         id: null,
-        displayValue: [''],
-        fieldType: 'Key',
+        displayValue: [""],
+        fieldType: "Key",
       },
       custodianNameField: {
-        name: '',
-        listDisplayFieldName: 'name',
+        name: "",
+        listDisplayFieldName: "name",
       },
       custodianNameFieldValue: {
         id: null,
-        displayValue: [''],
-        fieldType: 'Key',
+        displayValue: [""],
+        fieldType: "Key",
       },
       userIdWhereClauseSource: {
         customerDataDimensions: [
           {
-            fieldName: 'client.id',
-            dataDimensionTypeNo: '202201191757',
-            defaultDataDimensionTypeValueNo: '4',
+            fieldName: "client.id",
+            dataDimensionTypeNo: "202201191757",
+            defaultDataDimensionTypeValueNo: "4",
           },
         ],
       },
       custodianIdWhereClauseSource: {
         customerDataDimensions: [
           {
-            fieldName: 'client.id',
-            dataDimensionTypeNo: '202201191757',
-            defaultDataDimensionTypeValueNo: '4',
+            fieldName: "client.id",
+            dataDimensionTypeNo: "202201191757",
+            defaultDataDimensionTypeValueNo: "4",
           },
         ],
       },
@@ -695,31 +700,31 @@ export default {
 
     // 可调整表格列宽
     _self.$nextTick(function () {
-      $('.fixed-table').resizableColumns();
+      $(".fixed-table").resizableColumns();
     });
   },
   methods: {
     // 下载文件
     downloadFile: function () {
-      const loginInfo = JSON.parse(localStorage.getItem('#LoginInfo'));
+      const loginInfo = JSON.parse(localStorage.getItem("#LoginInfo"));
       const envClientId = loginInfo.loginClientId;
       $.ajax({
         url: Common.getApiURL(
-          `ExcelReportResource/execute/20231121_164158?processReportNo=20231121_164158&envClientId=${envClientId}`,
+          `ExcelReportResource/execute/20231121_164158?processReportNo=20231121_164158&envClientId=${envClientId}`
         ),
-        type: 'get',
+        type: "get",
         xhrFields: {
-          responseType: 'blob',
+          responseType: "blob",
         },
         beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
         success: function (data) {
           const blobUrl = window.URL.createObjectURL(data);
-          const link = document.createElement('a');
+          const link = document.createElement("a");
           link.href = blobUrl;
-          link.style.display = 'none';
-          link.download = '抽盘数据.xlsx';
+          link.style.display = "none";
+          link.download = "抽盘数据.xlsx";
           document.body.appendChild(link);
           link.click();
           URL.revokeObjectURL(blobUrl);
@@ -734,31 +739,31 @@ export default {
     uploadFileChange: function ({ file }) {
       const _self = this;
       const formData = new FormData();
-      formData.append('file', file);
+      formData.append("file", file);
       $.ajax({
         url: Common.getApiURL(
-          'AssetInstanceResource/assetInstanceLedgerUpload',
+          "AssetInstanceResource/assetInstanceLedgerUpload"
         ),
-        type: 'post',
+        type: "post",
         beforeSend: function (request) {
           Common.addTokenToRequest(request);
         },
         data: formData,
         contentType: false,
         processData: false,
-        success: function ({ errorCode,datas }) {
+        success: function ({ errorCode, datas }) {
           if (errorCode === 0) {
-            if(datas){
-              datas.forEach(item =>{
+            if (datas) {
+              datas.forEach((item) => {
                 item.name = item.assetName;
                 item.no = item.assetCardNo;
                 item.categoryName = item.assetCategory;
                 _self.assetInstancesTempory.push(item);
               });
             }
-            message.success('上传成功,已加入至盘点清单', 5);
+            message.success("上传成功,已加入至盘点清单", 5);
           } else {
-            message.error('上传失败');
+            message.error("上传失败");
           }
           _self.loading = false;
         },
@@ -793,7 +798,7 @@ export default {
     // 自编号为null
     selfNoChange: function () {
       const _self = this;
-      if (_self.filter.selfNo == '') {
+      if (_self.filter.selfNo == "") {
         _self.filter.selfNo = null;
       }
     },
@@ -828,20 +833,20 @@ export default {
       if (
         _self.inventorySheetName == null ||
         _self.inventorySheetName == undefined ||
-        _self.inventorySheetName == ''
+        _self.inventorySheetName == ""
       ) {
-        Notify.error('错误', '请填写盘点单名称', 1000);
+        Notify.error("错误", "请填写盘点单名称", 1000);
         return;
       }
       if (
         _self.assetInstancesTempory == null ||
         _self.assetInstancesTempory.length < 1
       ) {
-        Notify.error('错误', '请至少选择一条盘点明细', 1000);
+        Notify.error("错误", "请至少选择一条盘点明细", 1000);
         return;
       }
       let assetInventoryLineSaveDtos = [];
-      _self.assetInstancesTempory.forEach(item => {
+      _self.assetInstancesTempory.forEach((item) => {
         assetInventoryLineSaveDtos.push(item.id);
       });
       var param = {
@@ -854,7 +859,7 @@ export default {
         showPage: 6,
         assetInventoryStep3: param,
       };
-      this.$emit('next', data);
+      this.$emit("next", data);
     },
 
     previous: function () {
@@ -863,7 +868,7 @@ export default {
         showPage: 0,
         assetInventoryStep3: undefined,
       };
-      this.$emit('previous', data);
+      this.$emit("previous", data);
     },
     /**
      * 查询盘点单DTO,
@@ -874,7 +879,7 @@ export default {
       var _self = this;
 
       AssetInventoryResource.getOrganizationsAndOrganizationsAndCategory().then(
-        data => {
+        (data) => {
           _self.assetInventoryOrganizationIds = data.organizationIds;
 
           _self.assetInventoryResponseOrganizationIds =
@@ -886,25 +891,25 @@ export default {
 
           // _self.$nextTick(function() {
           _self.$refs.organization.setSelectedIds(
-            _self.assetInventoryOrganizationIds,
+            _self.assetInventoryOrganizationIds
           );
           _self.$refs.responseOrganization.setSelectedIds(
-            _self.assetInventoryResponseOrganizationIds,
+            _self.assetInventoryResponseOrganizationIds
           );
           _self.$refs.assetCategory.setSelectedIds(
-            _self.assetInventoryCategoryIds,
+            _self.assetInventoryCategoryIds
           );
           _self.$refs.projectItem.setSelectedIds(
-            _self.assetInventoryProjectItemIds,
+            _self.assetInventoryProjectItemIds
           );
           // });
 
           // 查询资产卡片的数据
           _self.getAssetInstance(false);
         },
-        xmlHttpRequest => {
+        (xmlHttpRequest) => {
           Common.processException(xmlHttpRequest);
-        },
+        }
       );
     },
     /**
@@ -925,8 +930,12 @@ export default {
           item.checked = false;
           let index = _self.checkedIds.indexOf(item.id);
           _self.checkedIds.splice(index, 1);
-          let index2 = _self.assetInstancesTempory.indexOf(item);
-          _self.assetInstancesTempory.splice(index2, 1);
+          const data = _self.assetInstancesTempory;
+          data.forEach((obj, index) => {
+            if (obj.id == item.id) {
+              _self.assetInstancesTempory.splice(index, 1);
+            }
+          });
         });
       }
       const checkedIds = new Set(_self.checkedIds);
@@ -935,6 +944,28 @@ export default {
       _self.assetInstancesTempory = Array.from(assetInstancesTempory);
     },
 
+    // 单条checked改变更新清单和选择的id
+    checkedChange: function (data) {
+      var _self = this;
+      if (data.checked) {
+        _self.assetInstancesTempory.push(data);
+        _self.checkedIds.push(data.id);
+      } else {
+        for (var i = 0; i < _self.checkedIds.length; i++) {
+          if (_self.checkedIds[i] == data.id) {
+            _self.checkedIds.splice(i, 1);
+            i--;
+          }
+        }
+        for (var j = 0; j < _self.assetInstancesTempory.length; j++) {
+          if (_self.assetInstancesTempory[j].id == data.id) {
+            _self.assetInstancesTempory.splice(j, 1);
+            j--;
+          }
+        }
+      }
+    },
+
     /**
      * 选择的房间发生了改变
      */
@@ -974,10 +1005,10 @@ export default {
 
       // _self.loading=true;
 
-      if (_self.filter.orginalValue1 == '') {
+      if (_self.filter.orginalValue1 == "") {
         _self.filter.orginalValue1 = null;
       }
-      if (_self.filter.orginalValue2 == '') {
+      if (_self.filter.orginalValue2 == "") {
         _self.filter.orginalValue2 = null;
       }
 
@@ -994,43 +1025,22 @@ export default {
             (_self.pagination.current_page - 1) * _self.pagination.per_page,
           length: _self.pagination.per_page,
         },
-        inventoryStatus: 'RANDOM_STOCKTAKING',
+        inventoryStatus: "RANDOM_STOCKTAKING",
       };
 
       AssetInstanceResource.getByOrganizationAndCategory(obj).then(
-        data => {
+        (data) => {
           if (data.errorCode == 0) {
             _self.redrawAssetInstance(data.data);
             _self.loading = false;
           } else {
-            Notify.error('提示', data.errorMessage, false);
+            Notify.error("提示", data.errorMessage, false);
           }
         },
-        xmlHttpRequest => {
+        (xmlHttpRequest) => {
           Common.processException(xmlHttpRequest);
-        },
-      );
-    },
-
-    changeAassetInstanceId: function (data) {
-      var _self = this;
-      if (data.checked) {
-        _self.assetInstancesTempory.push(data);
-        _self.checkedIds.push(data.id);
-      } else {
-        for (var i = 0; i < _self.checkedIds.length; i++) {
-          if (_self.checkedIds[i] == data.id) {
-            _self.checkedIds.splice(i, 1);
-            i--;
-          }
         }
-        for (var j = 0; j < _self.assetInstancesTempory.length; j++) {
-          if (_self.assetInstancesTempory[j].id == data.id) {
-            _self.assetInstancesTempory.splice(j, 1);
-            j--;
-          }
-        }
-      }
+      );
     },
 
     /**
@@ -1052,7 +1062,7 @@ export default {
       });
       _self.pagination.total = data.totalSize;
       _self.pagination.last_page = Math.ceil(
-        data.totalSize / data.range.length,
+        data.totalSize / data.range.length
       );
       _self.totalCount = data.totalSize;
       _self.orginalValueTotal = data.totalOrginalValue;
@@ -1098,20 +1108,20 @@ export default {
       this.filter.selfNo = null;
       (this.custodianNameFieldValue = {
         id: null,
-        displayValue: [''],
-        fieldType: 'Key',
-      }),
-      (this.userFieldValue = {
-        id: null,
-        displayValue: [''],
-        fieldType: 'Key',
-      }),
-      (this.locationFieldValue = {
-        id: null,
-        displayValue: [''],
-        fieldType: 'Key',
+        displayValue: [""],
+        fieldType: "Key",
       }),
-      this.initTreeData();
+        (this.userFieldValue = {
+          id: null,
+          displayValue: [""],
+          fieldType: "Key",
+        }),
+        (this.locationFieldValue = {
+          id: null,
+          displayValue: [""],
+          fieldType: "Key",
+        }),
+        this.initTreeData();
       this.getAssetInstance(false);
     },
 
@@ -1152,7 +1162,7 @@ export default {
     fixedTableHeader: function () {
       var _self = this;
       _self.$nextTick(function () {
-        $('.fixed-table').tableFixer({
+        $(".fixed-table").tableFixer({
           head: true,
         });
       });
@@ -1167,12 +1177,12 @@ export default {
      */
     openCurdWindow: function (assetInstance) {
       let url = Common.getRedirectUrl(
-        '#/desktop/window/window-read/view/040701/0/' +
+        "#/desktop/window/window-read/view/040701/0/" +
           assetInstance.id +
-          '?currPage=1&currIndex=1&totalCount=1&uuid=' +
-          Uuid.createUUID(),
+          "?currPage=1&currIndex=1&totalCount=1&uuid=" +
+          Uuid.createUUID()
       );
-      window.open(url, '资产卡片');
+      window.open(url, "资产卡片");
     },
   },
 };