进度信息模块封装ui代码优化2

src/views/medical-record-management/medical-record-management.vue

@@ -115,6 +115,7 @@
         :data="recordList"
         :header-cell-style="{background:'#E8E9E8'}"
         border
+        @select="selectChange"
         @selection-change="handleSelectionChange"
       >
         <el-table-column align="center" type="selection" width="55"/>
@@ -190,6 +191,12 @@ export default {
   dicts: ['pet_insure'],
   data() {
     return {
+      // 所有挂号信息ID(选择全部-临时表)
+      registerIds: [],
+      // 所有挂号信息ID(在不点击选择全部时-临时表)
+      registerEmptyIds: [],
+      // 所有挂号信息ID(用于辅助, 里面的数据永远不变, 除了 新增/删除 数据时)
+      registerIdsForever: [],
       doctorNameList: [],
       deptIdList: [],
       departIdList: [],
@@ -269,49 +276,72 @@ export default {
         name: 'MedicalDetail', params: { id: row.id }
       })
     },
-    /**
-     * 全部选择
-     * @param selection 已选择内容
-     * @param all 是否永远进行全选操作
-     */
-    async selectAll(selection = [], all = true) {
-      // 如果已经全选并且是非一直全选操作则清空选择
-      if (this.recordList.length !== selection.length && !all) {
-        this.effectTableSelect([])
+
+    // 选择全部
+    checkAll() {
+      this.registerIds = this.registerIdsForever
+      // 标志位, 使得@select回调函数判断往哪个临时集合里添加
+      this.isCheckAll = true
+      // 调用手动勾选
+      this.manualCheck()
+      console.log('全部选择', this.isCheckAll)
+    },
+    // 手动勾选
+    manualCheck() {
+      // 在下一个dom触发
+      this.$nextTick().then(() => {
+        // 当前页结合数据的id只要在临时集合里，就使得复选框勾选
+        this.registerList.forEach(item => {
+          if (this.isCheckAll) {
+            if (this.registerIds.includes(item.id)) {
+              this.$refs.table.toggleRowSelection(item, true)
+            }
+          } else {
+            if (this.registerEmptyIds.includes(item.id)) {
+              this.$refs.table.toggleRowSelection(item, true)
+            }
+          }
+        })
+      })
+    },
+    // 反向选择(把永久临时集合和变化的临时集合做减法重新赋给变化的临时集合赋给)
+    reverseSelection() {
+      console.log('永久的集合', this.registerIdsForever)
+      console.log('临时集合', this.registerEmptyIds)
+      if (this.isCheckAll) {
+        this.registerEmptyIds = this.registerIdsForever.filter(id => !this.registerIds.includes(id))
       } else {
-        await this.changeTableSelect()
+        this.registerEmptyIds = this.registerIdsForever.filter(id => !this.registerEmptyIds.includes(id))
       }
+      this.isCheckAll = false
+      this.getList()
     },
-    // 反向选择
-    reverseSelect() {
-      this.changeTableSelect(this.ids)
-    },
-    /**
-     * 改变table选择项
-     * @param notIncludeIds 需要排除的id列表
-     */
-    async changeTableSelect(notIncludeIds = []) {
-      // 获取反选的数据
-      // 需要一个可以根据条件和params.notIncludeIds排除部分数据的不分页查询的接口
-      const { data } = await listAllArticle({
-        ...this.queryParams,
-        params: {
-          notIncludeIds,
-          sort: this.queryParams.params.sort
+    // 表格当前手动勾选的
+    selectChange(selection, row) {
+      console.log('selectChange', selection, '----', row)
+      if (this.isCheckAll) {
+        // 判断当前选中的存不存在，存在删除;不存在添加
+        if (this.registerIds.includes(row.id)) {
+          this.registerIds = this.registerIds.filter(id => id !== row.id)
+          console.log('filter', this.registerIds.filter(id => id !== row.id))
+        } else {
+          this.registerIds.push(row.id)
         }
-      })
-      this.effectTableSelect(data)
-    },
-    /**
-     * 控制table的选择项
-     * @param data
-     */
-    effectTableSelect(data = []) {
-      this.$refs.table.store.states.selection = data
-      this.$refs.table.store.updateSelectionByRowKey()
-      this.$refs.table.store.updateAllSelected()
-      this.$refs.table.$emit('selection-change', data)
+      } else {
+        if (this.registerEmptyIds.includes(row.id)) {
+          this.registerEmptyIds = this.registerEmptyIds.filter(id => id !== row.id)
+        } else {
+          this.registerEmptyIds.push(row.id)
+        }
+      }
     },
+
+
+
+
+
+
+
     /** 功能按钮--导出按钮操作 */
     handleExport() {
       console.log('queryParams', this.queryParams)
@@ -325,10 +355,10 @@ export default {
         // 重置选择
         .then(_ => this.effectTableSelect([]))
     },
-    /** 列表区--多选框选中数据 */
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-    },
+    // /** 列表区--多选框选中数据 */
+    // handleSelectionChange(selection) {
+    //   this.ids = selection.map(item => item.id)
+    // },
     /** 查询病例管理列表 */
     getList() {
       this.loading = true
@@ -336,8 +366,12 @@ export default {
         console.log('病历列表的数据：', response)
         this.recordList = response.rows.rows
         console.log('这是病历，我要开始取字段了！', this.recordList)
+        // 获取全部挂号的id
+        this.registerIds = response.rows.idList
+        this.registerIdsForever = response.rows.idList
         this.total = response.total
         this.loading = false
+        this.manualCheck()
         // 取消按钮
       })
     },