fix: 选择器分页时先获取到全量数据进行回显 (#207)

* fix: 选择器分页时先获取到全量数据进行回显

src/mixins/DataSource.js

@@ -33,6 +33,9 @@ export default {
     // treeDisplay: { type: Boolean, default: false }, // 由组件自己定义
     parentField: { type: String, default: 'parentId' },
     childrenField: { type: String, default: 'children' },
+
+    // 其他
+    // needAllRemoteData: { type: Boolean, default: false }, // 由组件自己定义
   },
   data() {
     return {
@@ -48,6 +51,13 @@ export default {
     currentData() {
       return this.currentDataSource && this.currentDataSource.viewData;
     },
+    allRemoteData() {
+      if (this.currentDataSource.remote) {
+        return this.currentDataSource.allData;
+      }
+
+      return this.currentDataSource.data;
+    },
     paging() {
       if (this.pageable) {
         const paging = {};
@@ -134,6 +144,8 @@ export default {
         filtering: this.filtering,
         sorting: this.currentSorting,
 
+        needAllData: this.needAllRemoteData,
+
         getExtraParams: this.getExtraParams,
       };
 

src/pickerson/demo/index.vue

@@ -11,31 +11,33 @@
 
         title="标题"
         :show-toolbar="true"
-        labelField="左侧标题"
-        input-align="left"
         :pvalue.sync="pickerValue"
         :data-source="load"
-        :columnsprop="[1, 2, 3, 4]"
         :pageable="true"
         :pageSize="10"
         :filterable="true"
         @confirm="confirm111"
         @change="change111">
-        <template #title ref="template24">
+        <template #title>
             <van-text ref="text19" text="标题"></van-text>
         </template>
       </van-pickerson>
+    </demo-block>
 
+    <demo-block card title="列表静态数据">
       <van-pickerson
         :ref="`pickerson2`"
         title="标题"
         :show-toolbar="true"
-        :data-source="[1, 2, 3, 4, 5]"
+        :data-source="list"
+        :pvalue.sync="pickerValue"
+        :pageable="true"
+        :pageSize="10"
         :multiple="true"
         type="list"
         :enable-select-all="true"
         :enable-selected-count="true">
-          <template #title :ref="`template15`">
+          <template #title>
                 <van-text :ref="`text10`" text="标题"></van-text>
           </template>
       </van-pickerson>
@@ -89,8 +91,6 @@
 </template>
 
 <script>
-import { dateColumns, cascadeColumns } from './data';
-
 const data = [
   { 'text': '浙江省', 'value': '330000' },
   { 'text': '杭州市', 'value': '330100', 'parentId': '330000' },
@@ -122,50 +122,14 @@ const data = [
 ]
 
 export default {
-  i18n: {
-    'zh-CN': {
-      city: '城市',
-      cascade: '级联选择',
-      withPopup: '搭配弹出层使用',
-      chooseCity: '选择城市',
-      showToolbar: '展示顶部栏',
-      dateColumns: dateColumns['zh-CN'],
-      defaultIndex: '默认选中项',
-      disableOption: '禁用选项',
-      cascadeColumns: cascadeColumns['zh-CN'],
-      multipleColumns: '多列选择',
-      setColumnValues: '动态设置选项',
-      textColumns: JSON.stringify([
-        '杭州',
-        '宁波',
-        '温州',
-        '绍兴',
-        '湖州',
-        '嘉兴',
-        '金华',
-        '衢州',
-      ]),
-      disabledColumns: [
-        { text: '杭州', disabled: true },
-        { text: '宁波', value: 7777 },
-        { text: '温州' },
-      ],
-      column3: {
-        浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-        福建: ['福州', '厦门', '莆田', '三明', '泉州'],
-      },
-      toastContent: (value, index) => `当前值：${value}, 当前索引：${index}`,
-    },
-  },
-
   data() {
     return {
       son: '温州',
       showPicker: false,
       fieldValue: '',
       pupupd: true,
-
-      pickerValue: undefined,
+      list: data,
+      pickerValue: ['32001111100'],
     };
   },
 

src/pickerson/index.js

@@ -57,6 +57,7 @@ export default createComponent({
     pageable: { type: [Boolean, String], default: false },
     filterable: { type: Boolean, default: false },
     sorting: Object,
+    needAllRemoteData: { type: Boolean, default: true },
   },
 
   data() {
@@ -113,9 +114,9 @@ export default createComponent({
         return this.value ?? this.pvalue;
       }
 
-      let title =  this.multiple ? [] : '';
-      for (let i = 0; i < this.data.length; i++) {
-        const item = this.data[i];
+      let title = this.multiple ? [] : '';
+      for (let i = 0; i < this.allRemoteData.length; i++) {
+        const item = this.allRemoteData[i];
 
         let v;
         let t;

src/utils/DataSource/index.js

@@ -129,6 +129,10 @@ const VueDataSource = Vue.extend({
           queryChanged: false,
 
           treeDisplay: false,
+
+          // 选择项相关
+          needAllData: false, // 是否需要所有数据，比如分页时用于选择项回显
+          allData: [], // 所有数据，用于选择项回显
         };
     },
     computed: {
@@ -182,6 +186,10 @@ const VueDataSource = Vue.extend({
             this.initialLoaded = true;
             this.originTotal = this.data.length;
             this.arrange(this.data.slice(this.offset, this.offset + this.limit));
+        } else if (this.needAllData) {
+          this.loadAll().then((data) => {
+            this.allData = data;
+          });
         }
     },
     methods: {
@@ -477,6 +485,59 @@ const VueDataSource = Vue.extend({
 
             return tree;
         },
+        loadAll() {
+          const paging = {
+            offset: 0,
+            limit: Infinity,
+            number: 1,
+            size: Infinity,
+          };
+
+          const params = {
+            paging,
+            sorting: this.sorting,
+            filtering: this.filtering,
+            ...this._getExtraParams(), // 带上filterText
+          };
+
+          // 支持 JDL
+          if (params.paging) {
+            params.page = 1;
+            params.start = 0;
+            params.size = Infinity;
+          }
+
+          const extraParams = this._getExtraParams();
+
+          return this._load(params, extraParams).then((result) => {
+            const finalResult = {};
+
+            // 判断是否后端数据
+            if (getType(result) === 'Object') {
+              if (
+                result.hasOwnProperty('list') &&
+                result.hasOwnProperty('total')
+              ) {
+                finalResult.data = result.list;
+                finalResult.total = result.total;
+              } else if (
+                result.hasOwnProperty('totalElements') &&
+                result.hasOwnProperty('content')
+              ) {
+                finalResult.data = result.content;
+                finalResult.total = result.totalElements;
+              } else {
+                finalResult.data = result.data;
+                finalResult.total = result.total;
+              }
+            } else if (getType(result) === 'Array') {
+              finalResult.data = result;
+              finalResult.total = result.length;
+            }
+
+            return finalResult.data;
+          });
+        }
     },
 });