优化数据项多选事件

chuanyi_client2/package-lock.json

@@ -31,6 +31,7 @@
         "vue": "^2.6.14",
         "vue-router": "3.0.2",
         "vue-splitpane": "^1.0.6",
+        "vue-virtual-scroll-list": "^2.3.5",
         "vuex": "^3.6.2"
       },
       "devDependencies": {
@@ -16637,6 +16638,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vue-virtual-scroll-list": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmmirror.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-2.3.5.tgz",
+      "integrity": "sha512-YFK6u5yltqtAOfTBcij/KGAS2SoZvzbNIAf9qTULauPObEp53xj22tDuohrrM2vNkgoD5kejXICIUBt2Q4ZDqQ=="
+    },
     "node_modules/vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
@@ -31205,6 +31211,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-virtual-scroll-list": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmmirror.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-2.3.5.tgz",
+      "integrity": "sha512-YFK6u5yltqtAOfTBcij/KGAS2SoZvzbNIAf9qTULauPObEp53xj22tDuohrrM2vNkgoD5kejXICIUBt2Q4ZDqQ=="
+    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",

chuanyi_client2/package.json

@@ -35,6 +35,7 @@
     "vue": "^2.6.14",
     "vue-router": "3.0.2",
     "vue-splitpane": "^1.0.6",
+    "vue-virtual-scroll-list": "^2.3.5",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

chuanyi_client2/src/components/CustomDialog/DataSourceItem.vue

@@ -69,11 +69,16 @@
                           style="margin-top: -10px;width: calc(100% - 60px);" size="mini"
                           @input="itemChangeEvent" v-model="filterItemText"></el-input>
                 <el-checkbox v-model="isSelectAllItemData" @change="handleCheckAllChange"
-                             style="margin-left: 5px;">全选</el-checkbox>
+                             style="margin-left: 5px;">全选
+                </el-checkbox>
                 <div class="cy-leaves-div">
-                  <el-checkbox-group v-model="leavesChooseList" @change="handleCheckedCitiesChange">
-                    <el-checkbox v-for="leaves in leavesList" :label="leaves">{{ leaves.itemName }}</el-checkbox>
-                  </el-checkbox-group>
+                  <!--                  <el-checkbox-group v-model="leavesChooseList" @change="handleCheckedCitiesChange">-->
+                  <!--                    <el-checkbox v-for="leaves in leavesList" :label="leaves">{{ leaves.itemName }}</el-checkbox>-->
+                  <!--                  </el-checkbox-group>-->
+                  <p-virtual-check ref="pvc"
+                                   :data-sources="leavesList"
+                                   @check-change-all="checkChangeAll"
+                                   @check-change="checkChange"></p-virtual-check>
                 </div>
               </div>
             </div>
@@ -95,24 +100,28 @@
         <div class="cy-transform-data">
           <el-divider content-position="left">已选择数据项（{{ chooseItemDataListByTree.length }}）</el-divider>
           <div class="cy-line">
-            <div style="height: 100%; overflow: auto;">
-              <el-checkbox v-model="isSelectAllItem" @change="selectAllItem" style="margin-left: 24px;">全选</el-checkbox>
-              <el-tree :data="chooseItemDataListByTree"
-                       ref="chooseItemTree"
-                       :indent="0"
-                       node-key="id"
-                       show-checkbox
-                       :check-on-click-node="true"
-                       :highlight-current="true"
-                       :default-expand-all="true"
-                       @check-change="handleItemCheckChange">
-              <span class="custom-tree-node" slot-scope="{ node, data }">
-                <svg-icon v-if="!data.children" icon-class="file-bg"/>
-                <svg-icon v-else-if="node.expanded" icon-class="folder-open"/>
-                <svg-icon v-else icon-class="folder"/>
-                <span :title='node.label || data.itemName' style="margin-left: 2px;">{{ node.label || data.itemName }}</span>
-              </span>
-              </el-tree>
+            <el-checkbox v-model="isSelectAllItem" @change="selectAllItem" style="margin-left: 10px;">全选</el-checkbox>
+            <div style="height: calc(100% - 20px); overflow: auto;">
+              <!--              <el-tree :data="chooseItemDataListByTree"-->
+              <!--                       ref="chooseItemTree"-->
+              <!--                       :indent="0"-->
+              <!--                       node-key="id"-->
+              <!--                       show-checkbox-->
+              <!--                       :check-on-click-node="true"-->
+              <!--                       :highlight-current="true"-->
+              <!--                       :default-expand-all="true"-->
+              <!--                       @check-change="handleItemCheckChange">-->
+              <!--                <span class="custom-tree-node" slot-scope="{ node, data }">-->
+              <!--                  <svg-icon v-if="!data.children" icon-class="file-bg"/>-->
+              <!--                  <svg-icon v-else-if="node.expanded" icon-class="folder-open"/>-->
+              <!--                  <svg-icon v-else icon-class="folder"/>-->
+              <!--                  <span :title='node.label || data.itemName' style="margin-left: 2px;">{{ node.label || data.itemName }}</span>-->
+              <!--                </span>-->
+              <!--              </el-tree>-->
+              <p-virtual-check ref="pvcChoose"
+                               :data-sources="chooseItemDataListByTree"
+                               @check-change-all="checkChangeAllChoose"
+                               @check-change="checkChangeChoose"></p-virtual-check>
             </div>
           </div>
         </div>
@@ -120,10 +129,12 @@
       <div v-if="itemDataStep == 2" style="overflow: auto; height: calc(100% - 40px);">
         <el-button size="mini"
                    @click="multipleSetting"
-                   style="position: absolute; right: 30px; top: 80px;">批量设置表达式</el-button>
+                   style="position: absolute; right: 30px; top: 80px;">批量设置表达式
+        </el-button>
         <el-button size="mini"
                    @click="multipleSettingEventReport"
-                   style="position: absolute; right: 160px; top: 80px; display: none;">批量配置事件驱动</el-button>
+                   style="position: absolute; right: 160px; top: 80px; display: none;">批量配置事件驱动
+        </el-button>
         <el-table
             ref="multipleTable"
             :data="chooseItemDataList"
@@ -161,7 +172,8 @@
             <template slot-scope="scope">
               <el-button
                   size="mini"
-                  @click="handleChoose(scope.$index, scope.row)">选择表达式</el-button>
+                  @click="handleChoose(scope.$index, scope.row)">选择表达式
+              </el-button>
               <!--              <el-button-->
               <!--                  size="mini"-->
               <!--                  @click="handleReportEventConfig(scope.$index, scope.row)">事件驱动配置</el-button>-->
@@ -216,14 +228,16 @@ import {
 import {
   getAllDataModel,
   getAllDataSource,
-  getAllItemGroup,
-  getNextAllItem,
-  getTableItemGroupById
+  getNextAllItem
 } from "@/api/datasource";
 import {v4 as uuidv4} from "uuid";
+import PVirtualCheck from "@/components/PVirtualCheck"
 
 export default {
   name: "DataSourceItem",
+  components: {
+    "p-virtual-check": PVirtualCheck,
+  },
   data() {
     return {
       dataItemDialogTitle: '选择数据项',
@@ -274,7 +288,7 @@ export default {
       this.getDataSourceList()
     },
     /** 自定义排序 */
-    sortChange({ prop, order }) {
+    sortChange({prop, order}) {
       this.chooseItemDataList.sort(customCompare(prop, order))
     },
     /** 动态搜索事件 */
@@ -295,23 +309,45 @@ export default {
       return data.label.indexOf(value) !== -1
     },
     /** 数据多选事件 */
-    selectionLineChangeHandle (val) {
+    selectionLineChangeHandle(val) {
       this.dataLineListSelections = val
     },
     /** 数据项全选事件 */
-    selectAllItem() {
-      const data = traverseNode(this.$refs.chooseItemTree.store.root.childNodes)
-      if (this.isSelectAllItem) {
-        let arr = traverseVisible(data)
-        let ids = Array.from(arr, ({ id }) => id)
-        this.$refs.chooseItemTree.setCheckedKeys(ids)
-      } else {
-        this.$refs.chooseItemTree.setCheckedNodes([])
-      }
+    selectAllItem(val) {
+      // const data = traverseNode(this.$refs.chooseItemTree.store.root.childNodes)
+      // if (this.isSelectAllItem) {
+      //   let arr = traverseVisible(data)
+      //   let ids = Array.from(arr, ({id}) => id)
+      //   this.$refs.chooseItemTree.setCheckedKeys(ids)
+      // } else {
+      //   this.$refs.chooseItemTree.setCheckedNodes([])
+      // }
+      this.$refs.pvcChoose.checkedAll(val)
     },
     /** 全选事件 */
     handleCheckAllChange(val) {
-      this.leavesChooseList = val ? this.leavesList : []
+      this.$refs.pvc.checkedAll(val)
+      // this.leavesChooseList = val ? this.leavesList : []
+    },
+    checkChangeAll(flag) {
+      this.isSelectAllItemData = flag
+    },
+    checkChangeAllChoose(flag) {
+      this.isSelectAllItem = flag
+    },
+    checkChange(datas) {
+      this.leavesChooseList = []
+      if (!datas || datas.length == 0) {
+        return
+      }
+      datas.forEach((data) => {
+        if (data.checked) {
+          this.leavesChooseList.push(data)
+        }
+      })
+    },
+    checkChangeChoose(datas) {
+      this.chooseItemDataListByTree = datas
     },
     /** 全选事件 */
     handleCheckedCitiesChange(value) {
@@ -376,7 +412,7 @@ export default {
     loadGroupDataItemNode(node, resolve) {
       if (node.level === 0) {
         this.getDataItemByDataSource()
-      //   return resolve(this.itemDataListByTree)
+        //   return resolve(this.itemDataListByTree)
       }
       let itemNames = []
       extractDataItemValues(node, itemNames)
@@ -392,12 +428,16 @@ export default {
         let leaveList = []
         if (leaves && leaves.length > 0) {
           leaves.forEach((t) => {
+            t.label = t.itemName
+            t.value = t.itemReadName
+            t.checked = false
             leaveList.push(t)
           })
         }
         this.filterItemText = ''
         this.leavesList = leaveList
         this.leavesListF = JSON.parse(JSON.stringify(this.leavesList))
+        console.log(11, this.leavesList)
         let dataList = []
         if (datas && datas.length > 0) {
           datas.forEach((t) => {
@@ -416,33 +456,42 @@ export default {
       })
     },
     /** 数据项点击事件 */
-    handleItemNodeClick(data, node, target) {
-      if (this.hasLeavesFlag !== 1) return
-      this.isSelectAllItemData = false
-      const loading = showLoading(this, '加载中，请稍候···')
-      let itemNames = []
-      extractDataItemValues(node, itemNames)
-      let itemName = itemNames.reverse().join('!@')
-      let dataSourceId = node.data.dataSourceId
-      getNextAllItem(dataSourceId, itemName).then(res => {
-        loading.close()
-        let data = res.data
-
-        let leaves = []
-        if (data.leaves && data.leaves.length > 0) {
-          data.leaves.forEach((t) => {
-            leaves.push(t)
-          })
-        }
-        this.filterItemText = ''
-        this.leavesList = leaves
-        this.leavesListF = JSON.parse(JSON.stringify(this.leavesList))
-      }).catch((e) => {
-        loading.close()
-        this.leavesList = []
-        this.leavesListF = JSON.parse(JSON.stringify(this.leavesList))
-        showAlertWin(this, null, e)
-      })
+    handleItemNodeClick(data, n, target) {
+      let node = this.$refs.itemTree.getNode(n)
+      if (node) {
+        node.loaded = false
+        node.expand()
+      }
+      // if (this.hasLeavesFlag !== 1) return
+      // this.isSelectAllItemData = false
+      // const loading = showLoading(this, '加载中，请稍候···')
+      // let itemNames = []
+      // extractDataItemValues(node, itemNames)
+      // let itemName = itemNames.reverse().join('!@')
+      // let dataSourceId = node.data.dataSourceId
+      // getNextAllItem(dataSourceId, itemName).then(res => {
+      //   loading.close()
+      //   let data = res.data
+      //
+      //   let leaves = []
+      //   if (data.leaves && data.leaves.length > 0) {
+      //     data.leaves.forEach((t) => {
+      //       t.label = t.itemName
+      //       t.value = t.itemReadName
+      //       t.checked = false
+      //       leaves.push(t)
+      //     })
+      //   }
+      //   this.filterItemText = ''
+      //   this.leavesList = leaves
+      //   console.log(22, this.leavesList)
+      //   this.leavesListF = JSON.parse(JSON.stringify(this.leavesList))
+      // }).catch((e) => {
+      //   loading.close()
+      //   this.leavesList = []
+      //   this.leavesListF = JSON.parse(JSON.stringify(this.leavesList))
+      //   showAlertWin(this, null, e)
+      // })
     },
     /** 根据数据源选择数据项 */
     getDataItemByDataSource() {
@@ -469,10 +518,14 @@ export default {
         let leaves = []
         if (data.leaves && data.leaves.length > 0) {
           data.leaves.forEach((t) => {
+            t.label = t.itemName
+            t.value = t.itemReadName
+            t.checked = false
             leaves.push(t)
           })
         }
         this.leavesList = leaves
+        console.log(33, this.leavesList)
         this.leavesListF = JSON.parse(JSON.stringify(this.leavesList))
         let items = []
         if (data.label && data.label.length > 0) {
@@ -516,7 +569,7 @@ export default {
           showAlertMsgWin(this, null, '请选择数据项！')
           return
         }
-        for (let i = 0; i < this.leavesChooseList.length; i ++) {
+        for (let i = 0; i < this.leavesChooseList.length; i++) {
           let temp = {
             'id': uuidv4(),
             'nodeIdentifier': null,
@@ -524,7 +577,9 @@ export default {
             'label': this.leavesChooseList[i].fullPath,
             'nodeIndex': this.leavesChooseList[i].nodeIndex,
             'itemName': this.leavesChooseList[i].itemName,
-            'itemReadName': this.leavesChooseList[i].itemReadName
+            'itemReadName': this.leavesChooseList[i].itemReadName,
+            'value': this.leavesChooseList[i].itemReadName,
+            'checked': false
           }
           chooseChannelNameList.push(temp)
         }
@@ -549,7 +604,9 @@ export default {
             'nodeIdentifier': checkedNode.nodeIdentifier,
             'nodeIndex': checkedNode.nodeIndex,
             'dataType': checkedNode.dataType,
-            'itemReadName': checkedNode.itemReadName
+            'itemReadName': checkedNode.itemReadName,
+            'value': checkedNode.itemReadName,
+            'checked': false
           }
           chooseChannelNameList.push(temp)
         }
@@ -577,33 +634,44 @@ export default {
           }
         }
       }
+      this.handleCheckAllChange(false)
       this.$nextTick(() => {
         this.chooseItemDataListByTree = arr
         this.leavesChooseList = []
         this.isSelectAllItem = false
         this.isSelectAllItemData = false
         this.$refs.itemTree.setCheckedKeys([])
-        this.$refs.chooseItemTree.setCheckedNodes([])
+        // this.$refs.chooseItemTree.setCheckedNodes([])
       })
     },
     /** 移除数据项 */
     removeCheckNodesBtnEvent() {
-      let checkedNodes = this.$refs.chooseItemTree.getCheckedNodes(false, true)
-      if (checkedNodes.length == 0) {
-        showAlertMsgWin(this, null, '请选择数据项！')
+      // let checkedNodes = this.$refs.chooseItemTree.getCheckedNodes(false, true)
+      // if (checkedNodes.length == 0) {
+      //   showAlertMsgWin(this, null, '请选择数据项！')
+      //   return
+      // }
+      // // 移除当前选择项
+      // for (let i in checkedNodes) {
+      //   let index = this.chooseItemDataListByTree.indexOf(checkedNodes[i])
+      //   if (index >= 0) {
+      //     this.chooseItemDataListByTree.splice(index, 1)
+      //   }
+      // }
+      let _temp = this.chooseItemDataListByTree
+      if (!_temp || _temp.length == 0) {
         return
       }
-      // 移除当前选择项
-      for (let i in checkedNodes) {
-        let index = this.chooseItemDataListByTree.indexOf(checkedNodes[i])
-        if (index >= 0) {
-          this.chooseItemDataListByTree.splice(index, 1)
+      for (let i = _temp.length - 1; i >= 0; i --) {
+        if (_temp[i].checked) {
+          this.chooseItemDataListByTree.splice(i, 1)
         }
       }
       // 重置选择
       this.isSelectAllItem = false
       this.$refs.itemTree.setCheckedKeys([])
-      this.$refs.chooseItemTree.setCheckedKeys([])
+      this.selectAllItem(false)
+      // this.$refs.chooseItemTree.setCheckedKeys([])
     },
     /** 移除全部数据项 */
     removeAllCheckNodesBtnEvent() {
@@ -680,7 +748,7 @@ export default {
             }
           }
         }
-        for (let i = 0; i < dataModelList.length; i ++) {
+        for (let i = 0; i < dataModelList.length; i++) {
           dataModelList[i].title = dataModelList[i].remark
               ? ('【' + dataModelList[i].remark + '】' + dataModelList[i].operationRule)
               : dataModelList[i].operationRule
@@ -755,7 +823,7 @@ export default {
     },
     /** 四则运算弹出层关闭事件 */
     dialogDataModelClose(done) {
-      if (typeof(done) === 'function') {
+      if (typeof (done) === 'function') {
         done()
       } else {
         this.dialogDataModelVisible = false
@@ -780,7 +848,7 @@ export default {
       if (this.groupDialogTitle == '修改数据组') {
         this.updateGroupItem()
       }
-      if (typeof(done) === 'function') {
+      if (typeof (done) === 'function') {
         done()
       } else {
         this.dataItemDialogVisible = false

chuanyi_client2/src/components/HeaderMain/index.vue

@@ -127,6 +127,7 @@
                 <el-input v-model='groupBasicForm.groupName'
                           type="text"
                           auto-complete="off"
+                          maxlength="20"
                           placeholder="请输入组名称"></el-input>
               </el-form-item>
               <el-form-item label='备注' prop="groupDescribe">
@@ -329,9 +330,13 @@
                 <el-checkbox v-model="isSelectAllItemData" @change="handleCheckAllChange"
                              style="margin-left: 5px;">全选</el-checkbox>
                 <div class="cy-leaves-div">
-                  <el-checkbox-group v-model="leavesChooseList" @change="handleCheckedCitiesChange">
-                    <el-checkbox v-for="leaves in leavesList" :label="leaves">{{ leaves.itemName }}</el-checkbox>
-                  </el-checkbox-group>
+<!--                  <el-checkbox-group v-model="leavesChooseList" @change="handleCheckedCitiesChange">-->
+<!--                    <el-checkbox v-for="leaves in leavesList" :label="leaves">{{ leaves.itemName }}</el-checkbox>-->
+<!--                  </el-checkbox-group>-->
+                  <p-virtual-check ref="pvc"
+                                   :data-sources="leavesList"
+                                   @check-change-all="checkChangeAll"
+                                   @check-change="checkChange"></p-virtual-check>
                 </div>
               </div>
             </div>
@@ -353,24 +358,28 @@
         <div class="cy-transform-data">
           <el-divider content-position="left">已选择数据项（{{ chooseItemDataListByTree.length }}）</el-divider>
           <div class="cy-line">
-            <div style="height: 100%; overflow: auto;">
-              <el-checkbox v-model="isSelectAllItem" @change="selectAllItem" style="margin-left: 24px;">全选</el-checkbox>
-              <el-tree :data="chooseItemDataListByTree"
-                       ref="chooseItemTree"
-                       :indent="0"
-                       node-key="id"
-                       show-checkbox
-                       :check-on-click-node="true"
-                       :highlight-current="true"
-                       :default-expand-all="true"
-                       @check-change="handleItemCheckChange">
-              <span class="custom-tree-node" slot-scope="{ node, data }">
-                <svg-icon v-if="!data.children" icon-class="file-bg"/>
-                <svg-icon v-else-if="node.expanded" icon-class="folder-open"/>
-                <svg-icon v-else icon-class="folder"/>
-                <span :title='node.label || data.itemName' style="margin-left: 2px;">{{ node.label || data.itemName }}</span>
-              </span>
-              </el-tree>
+            <el-checkbox v-model="isSelectAllItem" @change="selectAllItem" style="margin-left: 10px;">全选</el-checkbox>
+            <div style="height: calc(100% - 20px); overflow: auto;">
+<!--              <el-tree :data="chooseItemDataListByTree"-->
+<!--                       ref="chooseItemTree"-->
+<!--                       :indent="0"-->
+<!--                       node-key="id"-->
+<!--                       show-checkbox-->
+<!--                       :check-on-click-node="true"-->
+<!--                       :highlight-current="true"-->
+<!--                       :default-expand-all="true"-->
+<!--                       @check-change="handleItemCheckChange">-->
+<!--                <span class="custom-tree-node" slot-scope="{ node, data }">-->
+<!--                  <svg-icon v-if="!data.children" icon-class="file-bg"/>-->
+<!--                  <svg-icon v-else-if="node.expanded" icon-class="folder-open"/>-->
+<!--                  <svg-icon v-else icon-class="folder"/>-->
+<!--                  <span :title='node.label || data.itemName' style="margin-left: 2px;">{{ node.label || data.itemName }}</span>-->
+<!--                </span>-->
+<!--              </el-tree>-->
+              <p-virtual-check ref="pvcChoose"
+                               :data-sources="chooseItemDataListByTree"
+                               @check-change-all="checkChangeAllChoose"
+                               @check-change="checkChangeChoose"></p-virtual-check>
             </div>
           </div>
         </div>
@@ -524,9 +533,13 @@ import {
 import cqcyCode from "@/utils/cqcyCode";
 import {mapGetters} from "vuex";
 import { v4 as uuidv4 } from 'uuid'
+import PVirtualCheck from "@/components/PVirtualCheck"
 
 export default {
   name: "HeaderMain",
+  components: {
+    "p-virtual-check": PVirtualCheck,
+  },
   data() {
     return {
       roleCodeList: [],
@@ -760,22 +773,44 @@ export default {
       }
     },
     handleCheckAllChange(val) {
-      this.leavesChooseList = val ? this.leavesList : []
+      this.$refs.pvc.checkedAll(val)
+      // this.leavesChooseList = val ? this.leavesList : []
+    },
+    checkChangeAll(flag) {
+      this.isSelectAllItemData = flag
+    },
+    checkChangeAllChoose(flag) {
+      this.isSelectAllItem = flag
+    },
+    checkChange(datas) {
+      this.leavesChooseList = []
+      if (!datas || datas.length == 0) {
+        return
+      }
+      datas.forEach((data) => {
+        if (data.checked) {
+          this.leavesChooseList.push(data)
+        }
+      })
+    },
+    checkChangeChoose(datas) {
+      this.chooseItemDataListByTree = datas
     },
     handleCheckedCitiesChange(value) {
       let checkedCount = value.length
       this.isSelectAllItemData = checkedCount === this.leavesList.length
     },
     /** 数据项全选事件 */
-    selectAllItem() {
-      const data = traverseNode(this.$refs.chooseItemTree.store.root.childNodes)
-      if (this.isSelectAllItem) {
-        let arr = traverseVisible(data)
-        let ids = Array.from(arr, ({ id }) => id)
-        this.$refs.chooseItemTree.setCheckedKeys(ids)
-      } else {
-        this.$refs.chooseItemTree.setCheckedNodes([])
-      }
+    selectAllItem(val) {
+      // const data = traverseNode(this.$refs.chooseItemTree.store.root.childNodes)
+      // if (this.isSelectAllItem) {
+      //   let arr = traverseVisible(data)
+      //   let ids = Array.from(arr, ({ id }) => id)
+      //   this.$refs.chooseItemTree.setCheckedKeys(ids)
+      // } else {
+      //   this.$refs.chooseItemTree.setCheckedNodes([])
+      // }
+      this.$refs.pvcChoose.checkedAll(val)
     },
     /**数据项单项选择判断 */
     handleItemCheckChange(data, checked, indeterminate) {
@@ -1012,11 +1047,25 @@ export default {
         let leaveList = []
         if (leaves && leaves.length > 0) {
           leaves.forEach((t) => {
+            t.label = t.itemName
+            t.value = t.itemReadName
+            t.checked = false
             leaveList.push(t)
           })
         }
         this.filterItemText = ''
         this.leavesList = leaveList
+        // 模拟数据
+        // for (let i = 0;i < 1000;i ++) {
+        //   let t = {}
+        //   t.label = "t.itemName"+i
+        //   t.itemName = "t.itemName"+i
+        //   t.value = "t.itemReadName"+i
+        //   t.checked = false
+        //   leaveList.push(t)
+        // }
+        // 模拟数据
+        console.log(11, this.leavesList)
         this.leavesListF = JSON.parse(JSON.stringify(this.leavesList))
         let dataList = []
         if (datas && datas.length > 0) {
@@ -1560,10 +1609,14 @@ export default {
         let leaves = []
         if (data.leaves && data.leaves.length > 0) {
           data.leaves.forEach((t) => {
+            t.label = t.itemName
+            t.value = t.itemReadName
+            t.checked = false
             leaves.push(t)
           })
         }
         this.leavesList = leaves
+        console.log(22, this.leavesList)
         this.leavesListF = JSON.parse(JSON.stringify(this.leavesList))
         let items = []
         if (data.label && data.label.length > 0) {
@@ -1589,33 +1642,42 @@ export default {
       })
     },
     /** 数据项点击事件 */
-    handleItemNodeClick(data, node, target) {
-      if (this.hasLeavesFlag !== 1) return
-      this.isSelectAllItemData = false
-      const loading = showLoading(this, '加载中，请稍候···')
-      let itemNames = []
-      extractDataItemValues(node, itemNames)
-      let itemName = itemNames.reverse().join('!@')
-      let dataSourceId = node.data.dataSourceId
-      getNextAllItem(dataSourceId, itemName).then(res => {
-        loading.close()
-        let data = res.data
-
-        let leaves = []
-        if (data.leaves && data.leaves.length > 0) {
-          data.leaves.forEach((t) => {
-            leaves.push(t)
-          })
-        }
-        this.filterItemText = ''
-        this.leavesList = leaves
-        this.leavesListF = JSON.parse(JSON.stringify(this.leavesList))
-      }).catch((e) => {
-        loading.close()
-        this.leavesList = []
-        this.leavesListF = JSON.parse(JSON.stringify(this.leavesList))
-        showAlertWin(this, null, e)
-      })
+    handleItemNodeClick(data, n, target) {
+      let node = this.$refs.itemTree.getNode(n)
+      if (node) {
+        node.loaded = false
+        node.expand()
+      }
+      // if (this.hasLeavesFlag !== 1) return
+      // this.isSelectAllItemData = false
+      // const loading = showLoading(this, '加载中，请稍候···')
+      // let itemNames = []
+      // extractDataItemValues(node, itemNames)
+      // let itemName = itemNames.reverse().join('!@')
+      // let dataSourceId = node.data.dataSourceId
+      // getNextAllItem(dataSourceId, itemName).then(res => {
+      //   loading.close()
+      //   let data = res.data
+      //
+      //   let leaves = []
+      //   if (data.leaves && data.leaves.length > 0) {
+      //     data.leaves.forEach((t) => {
+      //       t.label = t.itemName
+      //       t.value = t.itemReadName
+      //       t.checked = false
+      //       leaves.push(t)
+      //     })
+      //   }
+      //   this.filterItemText = ''
+      //   this.leavesList = leaves
+      //   console.log(33, this.leavesList)
+      //   this.leavesListF = JSON.parse(JSON.stringify(this.leavesList))
+      // }).catch((e) => {
+      //   loading.close()
+      //   this.leavesList = []
+      //   this.leavesListF = JSON.parse(JSON.stringify(this.leavesList))
+      //   showAlertWin(this, null, e)
+      // })
     },
     /** 处理周期时间转秒 */
     withModeValueTime(type) {
@@ -1719,7 +1781,9 @@ export default {
             'label': this.leavesChooseList[i].fullPath,
             'nodeIndex': this.leavesChooseList[i].nodeIndex,
             'itemName': this.leavesChooseList[i].itemName,
-            'itemReadName': this.leavesChooseList[i].itemReadName
+            'itemReadName': this.leavesChooseList[i].itemReadName,
+            'value': this.leavesChooseList[i].itemReadName,
+            'checked': false
           }
           chooseChannelNameList.push(temp)
         }
@@ -1744,7 +1808,9 @@ export default {
             'nodeIdentifier': checkedNode.nodeIdentifier,
             'nodeIndex': checkedNode.nodeIndex,
             'dataType': checkedNode.dataType,
-            'itemReadName': checkedNode.itemReadName
+            'itemReadName': checkedNode.itemReadName,
+            'value': checkedNode.itemReadName,
+            'checked': false
           }
           chooseChannelNameList.push(temp)
         }
@@ -1772,13 +1838,14 @@ export default {
           }
         }
       }
+      this.handleCheckAllChange(false)
       this.$nextTick(() => {
         this.chooseItemDataListByTree = arr
         this.isSelectAllItem = false
         this.isSelectAllItemData = false
         this.leavesChooseList = []
         this.$refs.itemTree.setCheckedKeys([])
-        this.$refs.chooseItemTree.setCheckedNodes([])
+        // this.$refs.chooseItemTree.setCheckedNodes([])
       })
     },
     /** 移除全部数据项 */
@@ -1788,26 +1855,37 @@ export default {
       }
       this.isSelectAllItem = false
       this.chooseItemDataListByTree = []
-      this.$refs.itemTree.setCheckedKeys([])
     },
     /** 移除数据项 */
     removeCheckNodesBtnEvent() {
-      let checkedNodes = this.$refs.chooseItemTree.getCheckedNodes(false, true)
-      if (checkedNodes.length == 0) {
-        showAlertMsgWin(this, null, '请选择数据项！')
+      // let checkedNodes = this.$refs.chooseItemTree.getCheckedNodes(false, true)
+      // if (checkedNodes.length == 0) {
+      //   showAlertMsgWin(this, null, '请选择数据项！')
+      //   return
+      // }
+      // // 移除当前选择项
+      // for (let i in checkedNodes) {
+      //   let index = this.chooseItemDataListByTree.indexOf(checkedNodes[i])
+      //   if (index >= 0) {
+      //     this.chooseItemDataListByTree.splice(index, 1)
+      //   }
+      // }
+
+      let _temp = this.chooseItemDataListByTree
+      if (!_temp || _temp.length == 0) {
         return
       }
-      // 移除当前选择项
-      for (let i in checkedNodes) {
-        let index = this.chooseItemDataListByTree.indexOf(checkedNodes[i])
-        if (index >= 0) {
-          this.chooseItemDataListByTree.splice(index, 1)
+      for (let i = _temp.length - 1; i >= 0; i --) {
+        if (_temp[i].checked) {
+          this.chooseItemDataListByTree.splice(i, 1)
         }
       }
+
       // 重置选择
       this.isSelectAllItem = false
       this.$refs.itemTree.setCheckedKeys([])
-      this.$refs.chooseItemTree.setCheckedKeys([])
+      this.selectAllItem(false)
+      // this.$refs.chooseItemTree.setCheckedKeys([])
     },
     /** 选择数据项弹出层保存事件：第一步 */
     itemDialogSave1() {

chuanyi_client2/src/components/PVirtualCheck/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="p-check-virtual-list">
+    <virtual-list
+        class="check-virtual-list"
+        :keeps="40"
+        data-key="value"
+        :data-sources="dataSources"
+        :data-component="dataComponent"
+        :extra-props="extraProps"
+    />
+  </div>
+</template>
+
+<script>
+import VirtualList from "vue-virtual-scroll-list";
+import ListItem from "./listItem.vue";
+export default {
+  name: "p-virtual-check",
+  components: {
+    "virtual-list": VirtualList,
+  },
+  props: {
+    dataSources: Array,
+  },
+  data() {
+    return {
+      dataComponent: ListItem,
+      // 传入组件的额外参数
+      extraProps: {
+      },
+      checkMap: {},
+    };
+  },
+  mounted() {
+    // 订阅勾选事件
+    this.$on("virtual-check-change", (key, val) => {
+      let count = 0;
+      this.dataSources.forEach((t) => {
+        if (t.checked === val) {
+          count ++;
+        }
+      })
+      this.$emit("check-change-all", val && count == this.dataSources.length);
+      this.$emit("check-change", this.dataSources);
+    });
+  },
+  watch: {},
+  methods: {
+    checkedAll(flag) {
+      this.dataSources.forEach((t) => {
+        t.checked = flag;
+      })
+      this.$emit("check-change", this.dataSources);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.p-check-virtual-list {
+  height: 100%;
+  width: 100%;
+}
+
+.check-virtual-list {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  padding: 0 10px;
+}
+</style>

chuanyi_client2/src/components/PVirtualCheck/listItem.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="">
+    <el-checkbox v-model="source.checked" @change="change">
+      {{ source.label }}
+    </el-checkbox>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    source: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    // 列表的全部勾选情况
+    checkMap: Object,
+  },
+  data() {
+    return {
+      checked: false,
+    };
+  },
+  mounted() {
+    // 回显勾选状态
+    this.checkChange();
+  },
+  watch: {},
+  methods: {
+    // 勾选改变
+    change(val) {
+      // 通过全局混入函数，调用对应组件的函数
+      this.dispatch(
+          "p-virtual-check",
+          "virtual-check-change",
+          this.source.value,
+          val
+      );
+    },
+    // 选择改变
+    checkChange() {
+      this.checked = this.source.checked//this.checkMap[this.source.value] === true ? true : false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

chuanyi_client2/src/main.js

@@ -20,6 +20,28 @@ Vue.use(Element, {
   size: Cookies.get('size') || 'medium'
 })
 
+Vue.mixin({
+  data() {
+    return {}
+  },
+  methods: {
+    // 组件事件传递
+    dispatch(componentName, eventName, ...rest) {
+      let parent = this.$parent || this.$root
+      let name = parent.$options.name
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent
+        if (parent) {
+          name = parent.$options.name
+        }
+      }
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(rest))
+      }
+    }
+  }
+})
+
 Vue.config.productionTip = false
 
 new Vue({