From 8ce5f57a20cd219aa8659a20ceed43b773b42c6e Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 7 Apr 2020 14:38:12 +0800
Subject: [PATCH] =?UTF-8?q?[update]=20=E4=BF=AE=E6=94=B9select2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Select2/index.vue          | 73 ++++++++++++++++++-----
 src/views/users/UserCreateUpdate.vue      |  2 +-
 src/views/users/UserGroupDetail/index.vue | 36 +++++------
 3 files changed, 77 insertions(+), 34 deletions(-)

diff --git a/src/components/Select2/index.vue b/src/components/Select2/index.vue
index 244d98e9b..933acb3dd 100644
--- a/src/components/Select2/index.vue
+++ b/src/components/Select2/index.vue
@@ -1,11 +1,11 @@
 <template>
   <el-select
-    v-model="vaultOrDefault"
+    v-model="valueSafe"
     v-loadmore="loadMore"
-    :options="options"
+    :options="optionsSafe"
     :remote-method="filterOptions"
     :loading="loading"
-    multiple
+    :multiple="multiple"
     filterable
     remote
     v-bind="$attrs"
@@ -13,11 +13,12 @@
     v-on="$listeners"
   >
     <el-option
-      v-for="item in options"
+      v-for="item in optionsSafe"
       :key="item.value"
       :label="item.label"
       :value="item.value"
-    />
+    >
+    </el-option>
   </el-select>
 </template>
 
@@ -37,7 +38,7 @@ export default {
            * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
            * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
            */
-          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
+          const condition = this.scrollHeight - this.scrollTop - 30 <= this.clientHeight
           if (condition) {
             binding.value()
           }
@@ -58,13 +59,25 @@ export default {
       type: Function,
       default: null
     },
+    processSelected: {
+      type: Function,
+      default: null
+    },
     options: {
       type: Array,
-      default: () => []
+      default: () => ([])
     },
     value: {
       type: [Array, String, Number, Boolean],
-      default: () => []
+      default: () => ([])
+    },
+    initial: {
+      type: Array,
+      default: () => ([])
+    },
+    multiple: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -91,7 +104,13 @@ export default {
         const more = !!data.next
         return { results: results, pagination: more }
       },
-      vaultOrDefault: this.value || []
+      defaultProcessSelected: data => {
+        return data.map(item => {
+          return { label: item.name, value: item.id }
+        })
+      },
+      valueSafe: [...this.value],
+      optionsSafe: this.options || []
     }
   },
   computed: {
@@ -101,11 +120,35 @@ export default {
     processResultsOrDefault() {
       return this.processResults || this.defaultProcessResults
     },
-    optionsOrDefault() {
-      return this.options || []
+    processSelectedOrDefault() {
+      return this.processSelected || this.defaultProcessSelected
+    },
+    initialOptions() {
+      const options = this.processSelectedOrDefault(this.initial)
+      return options
+    },
+    optionsValues() {
+      return this.optionsSafe.map((v) => v.value)
+    },
+    initialValues() {
+      return this.initialOptions.map(v => v.value)
+    }
+  },
+  watch: {
+    initialOptions: (newValue) => {
+      const notInclude = newValue.filter(v => {
+        return this.optionsValues.indexOf(v.value) === -1
+      })
+      this.optionsSafe = [...notInclude, ...this.optionsSafe]
+      const notIncludeValues = notInclude.map(v => v.value)
+      this.valueSafe = [...notIncludeValues, ...this.valueSafe]
     }
   },
   mounted() {
+    if (this.initialOptions) {
+      this.valueSafe = [...this.initialValues, ...this.valueSafe]
+      this.optionsSafe = [...this.initialOptions, ...this.optionsSafe]
+    }
     if (this.url) {
       this.getOptions()
     }
@@ -128,14 +171,13 @@ export default {
     },
     filterOptions(query) {
       this.resetParams()
-      this.options = []
+      this.optionsSafe = []
       this.params.search = query
       this.getOptions()
     },
     getOptions() {
       this.loading = true
       const params = this.makeParamsOrDefault(this.params)
-      console.log(params)
       this.$axios.get(this.url, { params: params }).then(resp => {
         this.loading = false
         const data = this.processResultsOrDefault(resp)
@@ -143,11 +185,12 @@ export default {
           this.params.hasMore = false
         }
         data.results.forEach((v) => {
-          this.options.push(v)
+          if (this.optionsValues.indexOf(v.value) === -1) {
+            this.optionsSafe.push(v)
+          }
         })
       }).catch(err => {
         console.log(err)
-        this.options = []
       }).then(() => {
         this.loading = false
       })
diff --git a/src/views/users/UserCreateUpdate.vue b/src/views/users/UserCreateUpdate.vue
index 680a08130..780fc0adf 100644
--- a/src/views/users/UserCreateUpdate.vue
+++ b/src/views/users/UserCreateUpdate.vue
@@ -8,7 +8,7 @@
         <FormGroupHeader slot="id:phone" title="认证" :line="true" />
       </DataForm>
     </IBox>
-  </page>
+  </Page>
 </template>
 
 <script>
diff --git a/src/views/users/UserGroupDetail/index.vue b/src/views/users/UserGroupDetail/index.vue
index d0a65537b..40184055a 100644
--- a/src/views/users/UserGroupDetail/index.vue
+++ b/src/views/users/UserGroupDetail/index.vue
@@ -12,7 +12,7 @@
               <span>组下用户</span>
             </div>
             <div>
-              <Select2 v-model="value" :url="url" />
+              <Select2 v-model="select2.value" v-bind="select2" />
             </div>
           </el-card>
         </el-col>
@@ -52,23 +52,23 @@ export default {
         }
       ],
       cardTitle: '基本信息',
-      placeholder: '请选择',
-      url: '/api/v1/users/users/',
-      value: [
-        {
-          label: 'hello',
-          value: '1a775bbf-6861-4acb-8ae4-2f684794c8cc'
-        },
-        {
-          label: 'test',
-          value: '4dccdf84-7728-4de0-a507-67c905b3091b'
-        },
-        {
-          label: 'whold',
-          value: 'c5ec4b91-1fb2-478e-89bc-5a4abc0f9c6c'
-        }
-      ],
-      options: []
+      select2: {
+        url: '/api/v1/users/users/',
+        initial: [
+          {
+            name: 'hello',
+            id: '1a775bbf-6861-4acb-8ae4-2f684794c8cc'
+          },
+          {
+            name: 'test',
+            id: '4dccdf84-7728-4de0-a507-67c905b3091b'
+          },
+          {
+            name: 'whold',
+            id: 'c5ec4b91-1fb2-478e-89bc-5a4abc0f9c6c'
+          }
+        ]
+      },
     }
   },
   computed: {