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

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

@@ -115,9 +115,7 @@
         :header-cell-style="{background:'#E8E9E8'}"
         border
         ref="table"
-        row-key="id"
         @selection-change="handleSelectionChange"
-        @select-all="selectAll"
       >
         <el-table-column align="center" type="selection" width="55"/>
         <el-table-column align="center" label="序号" min-width="80" show-overflow-tooltip type="index"/>
@@ -294,7 +292,7 @@ export default {
      */
     async changeTableSelect(notIncludeIds = []) {
       // 获取反选的数据
-      // 需要一个可以根据条件和params.notIncludeIds排除部分数据的不分页查询的接口
+      //需要一个可以根据条件和params.notIncludeIds排除部分数据的不分页查询的接口
       const { data } = await listAllArticle({
         ...this.queryParams,
         params: {

src/views/service-management/registration-queue/registration-queue.vue

@@ -93,7 +93,7 @@
           class="fourWordsBtn"
           icon="el-icon-right"
           size="mini"
-          @click="selectAll"
+          @click="checkAll"
         >选择全部
         </el-button>
         <!--反向选择-->
@@ -101,7 +101,7 @@
           class="fourWordsBtn"
           icon="el-icon-back"
           size="mini"
-          @click="reverseSelect"
+          @click="reverseSelection"
         >反向选择
         </el-button>
         <!--批量导出-->
@@ -120,9 +120,8 @@
         v-loading="loading"
         :data="registerList"
         ref="table"
-        row-key="id"
+        @select="selectChange"
         @selection-change="handleSelectionChange"
-        @select-all="selectAll"
       >
         <el-table-column align="center"  reserve-selection  type="selection" width="55" />
         <el-table-column align="center" label="序号" min-width="55" prop="index" show-overflow-tooltip type="index" />
@@ -196,7 +195,7 @@
 </template>
 
 <script>
-import { listRegister, getRegister, delRegister, addRegister, updateRegister, checkPet } from '@/api/business/register'
+import { listRegister, checkPet } from '@/api/business/register'
 
 export default {
   name: 'Register',
@@ -204,6 +203,12 @@ export default {
   dicts: ['payment_status', 'register_type', 'pet_insure'],
   data() {
     return {
+      // 所有挂号信息ID(选择全部-临时表)
+      registerIds: [],
+      // 所有挂号信息ID(在不点击选择全部时-临时表)
+      registerEmptyIds: [],
+      // 所有挂号信息ID(用于辅助, 里面的数据永远不变, 除了 新增/删除 数据时)
+      registerIdsForever: [],
       // 挂号方式下拉框字典写死
       registerTypeList: [
         {
@@ -335,7 +340,8 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {}
+      rules: {},
+      isCheckAll: false
     }
   },
   created() {
@@ -347,7 +353,10 @@ export default {
       this.loading = true
       listRegister(this.queryParams).then(response => {
         console.log('这是挂号列表页的数据：', response)
-        this.registerList = response.rows
+        this.registerList = response.rows.rows
+        // 获取全部挂号的id
+        this.registerIds = response.rows.idList
+        this.registerIdsForever = response.rows.idList
         console.log('这是我要调的挂号列表内容：', this.registerList)
         this.total = response.total
         this.loading = false
@@ -414,49 +423,67 @@ export default {
     handleAdd() {
       this.$router.push('/service-management/registration-add')
     },
-    /**
-     * 全部选择
-     * @param selection 已选择内容
-     * @param all 是否永远进行全选操作
-     */
-    async selectAll(selection = [], all = true) {
-      // 如果已经全选并且是非一直全选操作则清空选择
-      if (this.registerList.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() {
+      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 listRegister({
-        ...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)