[Update] 级别完成relaction card

src/components/RelationCard/index.vue

@@ -28,7 +28,7 @@
           <td colspan="2">
             <el-button type="primary" size="small" style="width: 100%" @click="loadMore">
               <i class="fa fa-arrow-down" />
-              {{ $tc('More') }} ({{ iHasObjects.length }}/{{ totalHasObjectsLength }})
+              {{ $tc('More') }}
             </el-button>
           </td>
         </tr>
@@ -84,8 +84,15 @@ export default {
     onDeleteSuccess: {
       type: Function,
       default(obj, that) {
+        // 从hasObjects中移除这个object
         const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
         that.iHasObjects.splice(theRemoveIndex, 1)
+        // 从disabled values中移除这个value
+        while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
+          const i = that.select2.disabledValues.indexOf(obj.value)
+          this.$log.debug('disabled values remove index: ', i)
+          that.select2.disabledValues.splice(i, 1)
+        }
       }
     },
     performAdd: {
@@ -95,9 +102,9 @@ export default {
     onAddSuccess: {
       type: Function,
       default(objects, that) {
-        for (const obj of objects) {
-          that.iHasObjects.push(obj)
-        }
+        this.$log.debug('Select value', that.select2.value)
+        that.iHasObjects = [...that.iHasObjects, ...objects]
+        that.$refs.select2.clearSelected()
       }
     }
   },
@@ -134,11 +141,23 @@ export default {
     hasObjectsId(iNew, iOld) {
       this.$log.debug('hasObject id change')
       this.select2.disabledValues = iNew
-      if (iNew.length !== 0) {
-        setTimeout(() => {
-          this.getHasObjectsByIds()
-        }, 50)
+    },
+    iHasObjects(iNew, iOld) {
+      const newValues = iNew.map(v => v.value)
+      const oldValues = iOld.map(v => v.value)
+      const addValues = _.difference(newValues, oldValues)
+      const removeValues = _.difference(oldValues, newValues)
+      this.$log.debug('hasObjects change, add ', addValues, 'remove ', removeValues)
+      let disabledValues = this.select2.disabledValues
+      if (removeValues.length > 0) {
+        disabledValues = disabledValues.filter((v) => {
+          return removeValues.indexOf(v) === -1
+        })
       }
+      if (addValues.length > 0) {
+        disabledValues = [...disabledValues, ...addValues]
+      }
+      this.select2.disabledValues = disabledValues
     }
   },
   mounted() {

src/components/Select2/index.vue

@@ -7,7 +7,6 @@
     :multiple="multiple"
     filterable
     remote
-    :reserve-keyword="true"
     popper-append-to-body
     class="select2"
     v-bind="$attrs"
@@ -20,7 +19,7 @@
       :key="item.value"
       :label="item.label"
       :value="item.value"
-      :disabled="item.disabled === undefined ? false : item.disabled"
+      :disabled="checkDisabled(item)"
     />
   </el-select>
 </template>
@@ -116,11 +115,12 @@ export default {
       makeParams: defaultMakeParams,
       processResults: defaultProcessResults
     }
+    const iAjax = Object.assign(defaultAjax, this.ajax, this.url ? { url: this.url } : {})
     return {
       loading: false,
       initialized: false,
-      iAjax: Object.assign(defaultAjax, this.ajax, this.url ? { url: this.url } : {}),
-      iValue: this.multiple ? [] : '',
+      iAjax: iAjax,
+      iValue: this.value ? this.value : [],
       defaultParams: _.cloneDeep(defaultParams),
       params: _.cloneDeep(defaultParams),
       iOptions: this.options || [],
@@ -133,8 +133,7 @@ export default {
     }
   },
   mounted() {
-    this.$log.debug('Select is: ', this.iAjax.url)
-    this.$log.debug('Select url: ', this.url)
+    this.$log.debug('Select2 url is: ', this.iAjax.url)
     if (!this.initialized) {
       this.initialSelect()
       this.initialized = true
@@ -174,17 +173,6 @@ export default {
       this.params.search = query
       this.getOptions()
     },
-    reFresh() {
-      this.resetParams()
-      this.iOptions = []
-      this.getOptions()
-    },
-    addOption(option) {
-      if (this.disabledValues.indexOf(option.value) !== -1) {
-        option.disabled = true
-      }
-      this.iOptions.push(option)
-    },
     async getInitialOptions() {
       const params = this.safeMakeParams(this.params)
       this.$log.debug('Get initial options: ', params)
@@ -232,6 +220,14 @@ export default {
       }
       this.iValue = this.value
     },
+    refresh() {
+      this.resetParams()
+      this.iOptions = []
+      this.getOptions()
+    },
+    addOption(option) {
+      this.iOptions.push(option)
+    },
     getOptionsByValues(values) {
       return this.iOptions.filter((v) => {
         return values.indexOf(v.value) !== -1
@@ -243,6 +239,12 @@ export default {
         return values.indexOf(v.value) !== -1
       })
     },
+    clearSelected() {
+      this.iValue = []
+    },
+    checkDisabled(item) {
+      return item.disabled === undefined ? this.disabledValues.indexOf(item.value) !== -1 : item.disabled
+    },
     onChange(values) {
       const options = this.getSelectedOptions()
       this.$log.debug('Current select options: ', options)
@@ -250,7 +252,7 @@ export default {
     },
     onVisibleChange(visible) {
       if (!visible && this.params.search) {
-        this.reFresh()
+        this.refresh()
         this.$log.debug('Visible change, refresh select2')
       }
     }