[update] 选择用户增加全选所有复选框

src/components/selection/UserSelectByContactModal.vue

@@ -1,13 +1,18 @@
 <template>
   <j-modal
-    :title="$t('userSelect.selectUser')"
     :maskClosable="false"
     :width="1000"
     :closable="true"
+    centered
     @ok="handleOk"
     @cancel="handleCancel"
     switchFullscreen
     :visible="visible">
+    <template v-slot:title>
+      <!--  全选所有  -->
+      <a-checkbox v-if="type === 'checkbox'" v-model="isCheckedAll" class="modal-title-check" @change="checkedAllChange"/>
+      <span>{{ $t('userSelect.selectUser') }}</span>
+    </template>
     <div class="modal-search-wrapper table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
@@ -91,6 +96,19 @@ export default {
           this.getUserListByIds(val)
         }
       }
+    },
+    dataSourceRight: {
+      immediate: true,
+      deep: true,
+      handler (val) {
+        console.log(val.length, this.ipagination.total)
+        if (val.length !== 0 && val.length === this.ipagination.total) {
+          // 说明都选中了
+          this.isCheckedAll = true
+        } else {
+          this.isCheckedAll = false
+        }
+      }
     }
   },
   data () {
@@ -148,6 +166,7 @@ export default {
       selectedRowKeys: [],
       loadingLeft: false,
       dataSourceRight: [],
+      isCheckedAll: false, // 是否选中所有
       url: {
         userList: '/laws/system/lawsContactManage/pageMerge',
         userListByIds: '/sys/user/queryByIds'
@@ -166,6 +185,29 @@ export default {
         this.getUserListByIds(value)
       }
     },
+    // 全选所有
+    checkedAllChange (e) {
+      console.log(e.target.checked)
+      if (e.target.checked) {
+        this.loadingLeft = true
+        const params = {}
+        params.pageNo = 1
+        params.pageSize = this.ipagination.total + 10
+        params.column = 'createTime'
+        params.order = 'desc'
+        getAction(this.url.userList, params).then(res => {
+          if (res.success) {
+            this.dataSourceRight = res.result.records || []
+            this.selectedRowKeys = (res.result.records || []).map(item => item.contactId)
+          }
+        }).finally(() => {
+          this.loadingLeft = false
+        })
+      } else {
+        this.dataSourceRight = []
+        this.selectedRowKeys = []
+      }
+    },
     searchReset () {
       this.queryParam = {}
       this.loadData()
@@ -298,6 +340,9 @@ export default {
 </script>
 
 <style scoped lang="less">
+.modal-title-check {
+  margin-right: 10px;
+}
 .modal-content {
   width: 100%;
   display: flex;
@@ -324,6 +369,8 @@ export default {
 .name-content {
   display: flex;
   flex-wrap: wrap;
+  max-height: 200px;
+  overflow-y: auto;
   .name-div {
     width: auto;
     padding: 5px 16px;

src/components/selection/UserSelectByContactNoMergeModal.vue

@@ -1,13 +1,18 @@
 <template>
   <j-modal
-    :title="$t('userSelect.selectUser')"
     :maskClosable="false"
     :width="1000"
     :closable="true"
+    centered
     @ok="handleOk"
     @cancel="handleCancel"
     switchFullscreen
     :visible="visible">
+    <template v-slot:title>
+      <!--  全选所有  -->
+      <a-checkbox v-if="type === 'checkbox'" v-model="isCheckedAll" class="modal-title-check" @change="checkedAllChange"/>
+      <span>{{ $t('userSelect.selectUser') }}</span>
+    </template>
     <div class="modal-search-wrapper table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
@@ -118,6 +123,19 @@ export default {
           this.dataSourceRight = []
         }
       }
+    },
+    dataSourceRight: {
+      immediate: true,
+      deep: true,
+      handler (val) {
+        console.log(val.length, this.ipagination.total)
+        if (val.length !== 0 && val.length === this.ipagination.total) {
+          // 说明都选中了
+          this.isCheckedAll = true
+        } else {
+          this.isCheckedAll = false
+        }
+      }
     }
   },
   data () {
@@ -175,6 +193,7 @@ export default {
       selectedRowKeys: [],
       loadingLeft: false,
       dataSourceRight: [],
+      isCheckedAll: false, // 是否选中所有
       url: {
         userList: '/laws/system/lawsContactManage/page',
         userListByIds: '/laws/system/lawsContactManage/queryById'
@@ -197,6 +216,29 @@ export default {
         this.dataSourceRight = []
       }
     },
+    // 全选所有
+    checkedAllChange (e) {
+      console.log(e.target.checked)
+      if (e.target.checked) {
+        this.loadingLeft = true
+        const params = {}
+        params.pageNo = 1
+        params.pageSize = this.ipagination.total + 10
+        params.column = 'createTime'
+        params.order = 'desc'
+        getAction(this.url.userList, params).then(res => {
+          if (res.success) {
+            this.dataSourceRight = res.result.records || []
+            this.selectedRowKeys = (res.result.records || []).map(item => item.id)
+          }
+        }).finally(() => {
+          this.loadingLeft = false
+        })
+      } else {
+        this.dataSourceRight = []
+        this.selectedRowKeys = []
+      }
+    },
     searchReset () {
       this.queryParam = {}
       this.loadData()
@@ -322,6 +364,9 @@ export default {
 </script>
 
 <style scoped lang="less">
+.modal-title-check {
+  margin-right: 10px;
+}
 .modal-content {
   width: 100%;
   display: flex;
@@ -348,6 +393,8 @@ export default {
 .name-content {
   display: flex;
   flex-wrap: wrap;
+  max-height: 200px;
+  overflow-y: auto;
   .name-div {
     width: auto;
     padding: 5px 16px;

src/components/selection/UserSelectByWorkGroupModal.vue

@@ -1,13 +1,18 @@
 <template>
   <j-modal
-    :title="$t('userSelect.selectUser')"
     :maskClosable="false"
     :width="1200"
     :closable="true"
+    centered
     @ok="handleOk"
     @cancel="handleCancel"
     switchFullscreen
     :visible="visible">
+    <template v-slot:title>
+      <!--  全选所有  -->
+      <a-checkbox v-if="type === 'checkbox'" v-model="isCheckedAll" class="modal-title-check" @change="checkedAllChange"/>
+      <span>{{ $t('userSelect.selectUser') }}</span>
+    </template>
     <div class="modal-top-wrapper">
       <div class="modal-left-wrapper">
         <a-spin :spinning="treeLoading">
@@ -144,6 +149,19 @@ export default {
           this.getUserListByIds(val)
         }
       }
+    },
+    dataSourceRight: {
+      immediate: true,
+      deep: true,
+      handler (val) {
+        console.log(val.length, this.ipagination.total)
+        if (val.length !== 0 && val.length === this.ipagination.total) {
+          // 说明都选中了
+          this.isCheckedAll = true
+        } else {
+          this.isCheckedAll = false
+        }
+      }
     }
   },
   data () {
@@ -202,6 +220,7 @@ export default {
       loadingLeft: false,
       dataSourceRight: [],
       workingGroupTreeList: [], // 内部工作组下拉框数据
+      isCheckedAll: false, // 是否选中所有
       url: {
         userList: '/act/user/workGroupPage',
         userListByIds: '/sys/user/queryByIds'
@@ -265,6 +284,27 @@ export default {
         return item
       })
     },
+    // 全选所有
+    checkedAllChange (e) {
+      console.log(e.target.checked)
+      if (e.target.checked) {
+        this.loadingLeft = true
+        const params = {}
+        params.pageNo = 1
+        params.pageSize = this.ipagination.total + 10
+        getAction(this.url.userList, params).then(res => {
+          if (res.success) {
+            this.dataSourceRight = res.result.records || []
+            this.selectedRowKeys = (res.result.records || []).map(item => item.userId)
+          }
+        }).finally(() => {
+          this.loadingLeft = false
+        })
+      } else {
+        this.dataSourceRight = []
+        this.selectedRowKeys = []
+      }
+    },
     searchReset () {
       this.queryParam = {}
       this.loadData()
@@ -390,6 +430,9 @@ export default {
 
 <style scoped lang="less">
 @import '~@assets/less/common.less';
+.modal-title-check {
+  margin-right: 10px;
+}
 .modal-top-wrapper {
   display: flex;
   height: 480px;
@@ -430,6 +473,8 @@ export default {
 .name-content {
   display: flex;
   flex-wrap: wrap;
+  max-height: 200px;
+  overflow-y: auto;
   .name-div {
     width: auto;
     padding: 5px 16px;

src/components/selection/UserSelectModal.vue

@@ -1,13 +1,18 @@
 <template>
   <j-modal
-    :title="$t('userSelect.selectUser')"
     :maskClosable="false"
     :width="1000"
     :closable="true"
+    centered
     @ok="handleOk"
     @cancel="handleCancel"
     switchFullscreen
     :visible="visible">
+    <template v-slot:title>
+      <!--  全选所有  -->
+      <a-checkbox v-if="type === 'checkbox'" v-model="isCheckedAll" class="modal-title-check" @change="checkedAllChange"/>
+      <span>{{ $t('userSelect.selectUser') }}</span>
+    </template>
     <div class="modal-search-wrapper table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
@@ -119,6 +124,19 @@ export default {
           this.getUserListByIds(val)
         }
       }
+    },
+    dataSourceRight: {
+      immediate: true,
+      deep: true,
+      handler (val) {
+        console.log(val.length, this.ipagination.total)
+        if (val.length !== 0 && val.length === this.ipagination.total) {
+          // 说明都选中了
+          this.isCheckedAll = true
+        } else {
+          this.isCheckedAll = false
+        }
+      }
     }
   },
   data () {
@@ -174,6 +192,7 @@ export default {
       selectedRowKeys: [],
       loadingLeft: false,
       dataSourceRight: [],
+      isCheckedAll: false, // 是否选中所有
       url: {
         userList: '/sys/user/page',
         userListByIds: '/sys/user/queryByIds'
@@ -211,6 +230,30 @@ export default {
         }
       })
     },
+    // 全选所有
+    checkedAllChange (e) {
+      console.log(e.target.checked)
+      if (e.target.checked) {
+        this.loadingLeft = true
+        const params = {}
+        params.pageNo = 1
+        params.pageSize = this.ipagination.total + 10
+        params.field = 'id,avatar,username,realname,sex_dictText,phone,orgCodeTxt,roleTxt,status_dictText'
+        params.column = 'createTime'
+        params.order = 'desc'
+        getAction(this.url.userList, params).then(res => {
+          if (res.success) {
+            this.dataSourceRight = res.result.records || []
+            this.selectedRowKeys = (res.result.records || []).map(item => item.id)
+          }
+        }).finally(() => {
+          this.loadingLeft = false
+        })
+      } else {
+        this.dataSourceRight = []
+        this.selectedRowKeys = []
+      }
+    },
     searchReset () {
       this.queryParam = {}
       this.loadData(1)
@@ -342,6 +385,9 @@ export default {
 </script>
 
 <style scoped lang="less">
+.modal-title-check {
+  margin-right: 10px;
+}
 .modal-content {
   width: 100%;
   display: flex;
@@ -368,6 +414,8 @@ export default {
 .name-content {
   display: flex;
   flex-wrap: wrap;
+  max-height: 200px;
+  overflow-y: auto;
   .name-div {
     width: auto;
     padding: 5px 16px;