three-trees-ui 1.0.22 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-trees-ui",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "publicPath": "/ui",
   "author": "hotent",
   "private": false,

package/packages/DimensionSelector/src/main.vue

@@ -106,6 +106,7 @@
           @reset="reset"
           @row-click="(row) => $emit('row-click', row)"
           @page-change="(page) => $emit('page-change', page)"
+          @size-change="(size) => $emit('size-change', size)"
         >
           <template #detail="{ item }">
             <ht-icon
@@ -128,9 +129,17 @@
             />
             <p
               class="selector-selected__label"
-              :title="`${select[selectLabel]}(${select['code']})`"
+              :title="
+                `${select[selectLabel]}${
+                  select['code'] ? `(${select['code']})` : ''
+                }`
+              "
             >
-              {{ `${select[selectLabel]}(${select['code']})` }}
+              {{
+                `${select[selectLabel]}${
+                  select['code'] ? `(${select['code']})` : ''
+                }`
+              }}
             </p>
           </template>
         </ht-list-selector>

package/packages/DimensionSelectorInput/src/main.vue

@@ -28,6 +28,7 @@
       @search="handleSearch"
       @reset="handleReset"
       @page-change="handlePageChange"
+      @size-change="handleSizeChange"
       @row-click="(row) => $emit('row-click', row)"
       @select-data="(data) => $emit('select-data', data)"
     ></ht-dimension-selector>
@@ -150,6 +151,10 @@
         // 搜索模式下或者未进行过滤时，查询所有数据
         this.handleLoad(page)
       },
+      handleSizeChange(size) {
+        this.pagination.pageSize = size
+        this.handlePageChange(this.pagination.page)
+      },
       // 获取查询参数中的分页信息(不传page时默认查询第一页)
       getPageBean(page) {
         const pageBean = { ...this.pagination }

package/packages/JobSelector/src/JobSelectorDialog.vue

@@ -41,6 +41,7 @@
         @reset="reset"
         @row-click="(row) => $emit('row-click', row)"
         @page-change="(page) => $emit('page-change', page)"
+        @size-change="(size) => $emit('size-change', size)"
       >
         <template #detail="{ item }">
           <ht-icon
@@ -63,9 +64,17 @@
           />
           <p
             class="selector-selected__label"
-            :title="`${select[selectLabel]}(${select['code']})`"
+            :title="
+              `${select[selectLabel]}${
+                select['code'] ? `(${select['code']})` : ''
+              }`
+            "
           >
-            {{ `${select[selectLabel]}(${select['code']})` }}
+            {{
+              `${select[selectLabel]}${
+                select['code'] ? `(${select['code']})` : ''
+              }`
+            }}
           </p>
         </template>
       </ht-list-selector>

package/packages/JobSelector/src/main.vue

@@ -103,6 +103,7 @@
       @row-click="(row) => $emit('row-click', row)"
       @select-data="(data) => $emit('select-data', data)"
       @page-change="(page) => $emit('page-change', page)"
+      @size-change="(size) => $emit('size-change', size)"
     />
   </div>
 </template>

package/packages/JobSelectorInput/src/main.vue

@@ -30,6 +30,7 @@
       @search="handleSearch"
       @reset="handleReset"
       @page-change="handlePageChange"
+      @size-change="handleSizeChange"
       @row-click="(row) => $emit('row-click', row)"
       @select-data="(data) => $emit('select-data', data)"
     ></ht-job-selector>
@@ -155,6 +156,10 @@
         // 搜索模式下或者未进行过滤时，查询所有数据
         this.handleLoad(page)
       },
+      handleSizeChange(size) {
+        this.pagination.pageSize = size
+        this.handlePageChange(this.pagination.page)
+      },
       // 获取查询参数中的分页信息(不传page时默认查询第一页)
       getPageBean(page) {
         const pageBean = { ...this.pagination }

package/packages/ListSelector/src/ListSelector.vue

@@ -14,6 +14,15 @@
         </div>
         <div class="selector-main__body">
           <el-scrollbar v-if="data.length > 0" class="selector-list__scroll">
+            <el-checkbox
+              v-if="!single"
+              v-model="checkAll"
+              class="check-all"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAllChange"
+            >
+              全选
+            </el-checkbox>
             <ul
               class="selector-main__list"
               :class="{ 'two-columns': isSearchMode }"
@@ -44,7 +53,7 @@
           </div>
           <div v-if="data.length > 0" class="selector-main__pager">
             <el-pagination
-              layout="prev, pager, next"
+              layout="sizes,prev, pager, next"
               :disabled="loading"
               :page-sizes="pageSizeArr"
               :page-size="pagination.pageSize"
@@ -52,6 +61,7 @@
               :total="pagination.total"
               :current-page="pagination.page"
               @current-change="handleCurrentChange"
+              @size-change="handleSizeChange"
             ></el-pagination>
           </div>
         </div>
@@ -112,7 +122,8 @@
 <script>
   import Locale from '@/mixins/locale'
   import mobileMode from '@/mixins/mobileMode.js'
-  import { debounce } from 'lodash'
+  import { debounce, cloneDeep } from 'lodash'
+  import utils from '@/utils.js'
   const draggable = require('vuedraggable')
 
   export default {
@@ -171,7 +182,9 @@
         selects: [],
         currentSelectData: [],
         noDataImg: require('@/assets/no-data.png'),
-        pageSizeArr: [10, 50, 100, 200, 300],
+        pageSizeArr: [10, 20, 50, 100, 200, 300],
+        checkAll: false,
+        isIndeterminate: false,
       }
     },
     computed: {
@@ -204,10 +217,10 @@
         }
       },
       rangeSpan() {
-        return this.isSearchMode ? 0 : 7
+        return this.isSearchMode ? 0 : 6
       },
       mainSpan() {
-        return this.isSearchMode ? 17 : 10
+        return this.isSearchMode ? 17 : 11
       },
       currentPageSelectedCount() {
         return this.single
@@ -239,6 +252,19 @@
         },
         deep: true,
       },
+      currentPageSelectedCount(val) {
+        this.checkAll = val === this.data.length
+        this.isIndeterminate = val > 0 && val < this.data.length
+      },
+      data: {
+        handler(val) {
+          this.checkAll = this.currentPageSelectedCount === val.length
+          this.isIndeterminate =
+            this.currentPageSelectedCount > 0 &&
+            this.currentPageSelectedCount < val.length
+        },
+        deep: true,
+      },
     },
     methods: {
       getSelectedData() {
@@ -288,12 +314,35 @@
       handleCurrentChange(currentPage) {
         this.$emit('page-change', currentPage)
       },
+      handleSizeChange(size) {
+        this.$emit('size-change', size)
+      },
       removeSelected(item) {
         this.selects.remove(item)
       },
       clearAllSelects() {
         this.selects = []
       },
+      handleCheckAllChange(val) {
+        if (val) {
+          const currentPageData = cloneDeep(this.data)
+          this.selects = this.selects.length
+            ? utils.uniqueArrayObject(
+                [...this.selects, ...currentPageData],
+                this.primaryFieldProp
+              )
+            : currentPageData
+        } else {
+          if (this.selects.length > this.data.length) {
+            const cancelSelectedIds = this.data.map((it) => it.id)
+            this.selects = this.selects.filter(
+              (item) => !cancelSelectedIds.includes(item.id)
+            )
+          } else {
+            this.selects = []
+          }
+        }
+      },
     },
   }
 </script>
@@ -356,7 +405,9 @@
         .selector-list__scroll {
           height: calc(100% - 42px);
         }
-
+        .check-all {
+          padding: 16px 20px 2px 20px;
+        }
         .selector-main__list {
           list-style: none;
           padding: 10px 20px;
@@ -425,6 +476,27 @@
               .el-pager {
                 line-height: 25px;
               }
+              .el-select .el-input {
+                width: 86px;
+
+                .el-input__inner {
+                  text-align: left;
+                  padding-left: 10px;
+                  padding-right: 0;
+                  border-radius: 2px;
+                  color: #333;
+                  background: #f4f4f5;
+                  border: none;
+                }
+                .el-select__caret {
+                  color: #333;
+                }
+              }
+              .el-pagination__sizes {
+                .el-icon-arrow-up:before {
+                  content: '\e78f';
+                }
+              }
             }
           }
         }

package/packages/OrgSelector/src/OrgSelectorDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    width="900px"
+    width="1060px"
     :title="title"
     class="orgdialog-selector__wrapper"
     :visible.sync="dialogVisible"
@@ -41,6 +41,7 @@
         @reset="reset"
         @row-click="(row) => $emit('row-click', row)"
         @page-change="(page) => $emit('page-change', page)"
+        @size-change="(size) => $emit('size-change', size)"
       >
         <el-card slot="range" class="selector-range__card" shadow="hover">
           <el-tabs v-model="activeRange">
@@ -84,9 +85,17 @@
           />
           <p
             class="selector-selected__label"
-            :title="`${select[selectLabel]}(${select['code']})`"
+            :title="
+              `${select[selectLabel]}${
+                select['code'] ? `(${select['code']})` : ''
+              }`
+            "
           >
-            {{ `${select[selectLabel]}(${select['code']})` }}
+            {{
+              `${select[selectLabel]}${
+                select['code'] ? `(${select['code']})` : ''
+              }`
+            }}
           </p>
         </template>
       </ht-list-selector>

package/packages/OrgSelector/src/main.vue

@@ -86,6 +86,7 @@
       @row-click="(row) => $emit('row-click', row)"
       @select-data="(data) => $emit('select-data', data)"
       @page-change="(page) => $emit('page-change', page)"
+      @size-change="(size) => $emit('size-change', size)"
       @contact-group-change="(group) => $emit('contact-group-change', group)"
       @load-org="(org) => $emit('load-org', org)"
       @load-policy-org="(policy) => $emit('load-policy-org', policy)"

package/packages/OrgSelectorInput/src/OrgSelectorInput.vue

@@ -32,6 +32,7 @@
       @search="handleSearch"
       @reset="handleReset"
       @page-change="handlePageChange"
+      @size-change="handleSizeChange"
       @load-org="loadOrg"
       @load-policy-org="loadPolicyOrg"
       @row-click="(row) => $emit('row-click', row)"
@@ -146,6 +147,10 @@
           }
         }
       },
+      handleSizeChange(size) {
+        this.pagination.pageSize = size
+        this.handlePageChange(this.pagination.page)
+      },
       // 处理过滤类型变化的事件
       handleFilterTypeChange(type) {
         this.filterType = type

package/packages/PostSelector/src/PostSelectorDialog.vue

@@ -41,6 +41,7 @@
         @reset="reset"
         @row-click="(row) => $emit('row-click', row)"
         @page-change="(page) => $emit('page-change', page)"
+        @size-change="(size) => $emit('size-change', size)"
       >
         <el-card slot="range" class="selector-range__card" shadow="hover">
           <el-tabs v-model="activeRange">
@@ -87,9 +88,17 @@
           />
           <p
             class="selector-selected__label"
-            :title="`${select[selectLabel]}(${select['code']})`"
+            :title="
+              `${select[selectLabel]}${
+                select['code'] ? `(${select['code']})` : ''
+              }`
+            "
           >
-            {{ `${select[selectLabel]}(${select['code']})` }}
+            {{
+              `${select[selectLabel]}${
+                select['code'] ? `(${select['code']})` : ''
+              }`
+            }}
           </p>
         </template>
       </ht-list-selector>

package/packages/PostSelector/src/main.vue

@@ -84,6 +84,7 @@
       @row-click="(row) => $emit('row-click', row)"
       @select-data="(data) => $emit('select-data', data)"
       @page-change="(page) => $emit('page-change', page)"
+      @size-change="(size) => $emit('size-change', size)"
       @load-org-post="(org) => $emit('load-org-post', org)"
       @load-policy-post="(policy) => $emit('load-policy-post', policy)"
     />

package/packages/PostSelectorInput/src/PostSelectorInput.vue

@@ -35,6 +35,7 @@
       @search="handleSearch"
       @reset="handleReset"
       @page-change="handlePageChange"
+      @size-change="handleSizeChange"
       @load-org-post="loadOrgPost"
       @load-policy-post="loadPolicyPost"
       @change="handleChange"
@@ -174,6 +175,10 @@
           }
         }
       },
+      handleSizeChange(size) {
+        this.pagination.pageSize = size
+        this.handlePageChange(this.pagination.page)
+      },
       // 处理过滤类型变化的事件
       handleFilterTypeChange(type) {
         this.filterType = type

package/packages/RoleSelector/src/RoleSelectorDialog.vue

@@ -41,6 +41,7 @@
         @reset="reset"
         @row-click="(row) => $emit('row-click', row)"
         @page-change="(page) => $emit('page-change', page)"
+        @size-change="(size) => $emit('size-change', size)"
       >
         <template #detail="{ item }">
           <ht-icon
@@ -63,9 +64,17 @@
           />
           <p
             class="selector-selected__label"
-            :title="`${select[selectLabel]}(${select['code']})`"
+            :title="
+              `${select[selectLabel]}${
+                select['code'] ? `(${select['code']})` : ''
+              }`
+            "
           >
-            {{ `${select[selectLabel]}(${select['code']})` }}
+            {{
+              `${select[selectLabel]}${
+                select['code'] ? `(${select['code']})` : ''
+              }`
+            }}
           </p>
         </template>
       </ht-list-selector>

package/packages/RoleSelector/src/main.vue

@@ -104,6 +104,7 @@
       @row-click="(row) => $emit('row-click', row)"
       @select-data="(data) => $emit('select-data', data)"
       @page-change="(page) => $emit('page-change', page)"
+      @size-change="(size) => $emit('size-change', size)"
     />
   </div>
 </template>

package/packages/RoleSelectorInput/src/main.vue

@@ -30,6 +30,7 @@
       @search="handleSearch"
       @reset="handleReset"
       @page-change="handlePageChange"
+      @size-change="handleSizeChange"
       @row-click="(row) => $emit('row-click', row)"
       @select-data="(data) => $emit('select-data', data)"
     ></ht-role-selector>
@@ -155,6 +156,10 @@
         // 搜索模式下或者未进行过滤时，查询所有数据
         this.handleLoad(page)
       },
+      handleSizeChange(size) {
+        this.pagination.pageSize = size
+        this.handlePageChange(this.pagination.page)
+      },
       // 获取查询参数中的分页信息(不传page时默认查询第一页)
       getPageBean(page) {
         const pageBean = { ...this.pagination }

package/packages/UserSelector/src/UserSelectorDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-    width="900px"
+    width="1060px"
     :title="title"
     class="userdialog-selector__wrapper"
     :visible.sync="dialogVisible"
@@ -41,6 +41,7 @@
         @reset="reset"
         @row-click="(row) => $emit('row-click', row)"
         @page-change="(page) => $emit('page-change', page)"
+        @size-change="(size) => $emit('size-change', size)"
       >
         <el-card slot="range" class="selector-range__card" shadow="hover">
           <el-tabs v-model="activeRange">
@@ -111,9 +112,17 @@
           />
           <p
             class="selector-selected__label"
-            :title="`${select[selectLabel]}(${select['account']})`"
+            :title="
+              `${select[selectLabel]}${
+                select['account'] ? `(${select['account']})` : ''
+              }`
+            "
           >
-            {{ `${select[selectLabel]}(${select['account']})` }}
+            {{
+              `${select[selectLabel]}${
+                select['account'] ? `(${select['account']})` : ''
+              }`
+            }}
           </p>
         </template>
       </ht-list-selector>

package/packages/UserSelector/src/main.vue

@@ -99,6 +99,7 @@
       @row-click="(row) => $emit('row-click', row)"
       @select-data="(data) => $emit('select-data', data)"
       @page-change="(page) => $emit('page-change', page)"
+      @size-change="(size) => $emit('size-change', size)"
       @contact-group-change="(group) => $emit('contact-group-change', group)"
       @load-org-user="(org) => $emit('load-org-user', org)"
       @load-policy-user="(policy) => $emit('load-policy-user', policy)"

package/packages/UserSelectorInput/src/main.vue

@@ -31,6 +31,7 @@
       @search="handleSearch"
       @reset="handleReset"
       @page-change="handlePageChange"
+      @size-change="handleSizeChange"
       @contact-group-change="loadContactUser"
       @load-org-user="loadOrgUser"
       @load-policy-user="loadPolicyUser"
@@ -145,6 +146,10 @@
           }
         }
       },
+      handleSizeChange(size) {
+        this.pagination.pageSize = size
+        this.handlePageChange(this.pagination.page)
+      },
       // 处理过滤类型变化的事件
       handleFilterTypeChange(type) {
         this.filterType = type

package/src/utils.js

@@ -51,6 +51,20 @@ var utils = {
     })
     return result
   },
+  /**
+   *数组对象去重
+   *
+   * @export
+   * @param {any[]} array 要去重的数组
+   * @param {string} key 要去重的对象属性值
+   * @return {*}  {any[]}
+   */
+  uniqueArrayObject(array, key) {
+    return array.reduce((pre, cur) => {
+      const keys = pre.map((item) => item[key])
+      return keys.includes(cur[key]) ? pre : [...pre, cur]
+    }, [])
+  },
   // 获取随机的名称
   getName: () => {
     return Math.random()