[Update] stash card

src/components/RelationCard/index.vue

@@ -8,7 +8,7 @@
       <table style="width: 100%">
         <tr>
           <td colspan="2">
-            <Select2 v-model="select2.value" v-bind="select2" @loadInitialOptionsDone="handleLoadInitialDone" />
+            <Select2 ref="select2" v-model="select2.value" v-bind="select2" />
           </td>
         </tr>
         <tr>
@@ -16,8 +16,8 @@
             <el-button type="primary" size="small">{{ $tc('Add') }}</el-button>
           </td>
         </tr>
-        <tr v-for="obj of validObjects" :key="obj.id" style="width: 100%" class="item">
-          <td><b>{{ obj.name }}</b></td>
+        <tr v-for="obj of iHasObjects" :key="obj.value" style="width: 100%" class="item">
+          <td><b>{{ obj.label }}</b></td>
           <td>
             <el-button size="mini" type="danger" style="float: right">
               <i class="fa fa-minus" />
@@ -31,6 +31,7 @@
 
 <script>
 import Select2 from '@/components/Select2'
+import { createSourceIdCache } from '@/api/common'
 
 export default {
   name: 'RelationCard',
@@ -46,7 +47,7 @@ export default {
       type: String,
       default: ''
     },
-    // 地址，发送给select2的，查询所有的objects
+    // 地址，发送给select2的，查询所有的objects, 和select2 ajax一样
     objectsAjax: {
       type: Object,
       default: () => ({})
@@ -55,35 +56,86 @@ export default {
       type: [Array, null],
       default: null
     },
-    // 已选择的objects Id, 会转换成select2的value, 作为默认选择项
+    // 已选择的objects Id, 会转换成select2的value, 作为默认选择项, 和objectsAjax类似
     hasObjectsId: {
       type: Array,
       default: () => []
     },
     hasObjects: {
-      type: [Array, null],
-      default: null
+      type: Array,
+      default: () => []
     },
     value: {
       type: [Array, Number, String],
-      default: ''
+      default: () => []
     }
   },
   data() {
     return {
-      validObjects: this.objects ? this.objects : [],
+      iHasObjects: this.hasObjects || [],
+      params: {
+        page: 1,
+        hasMore: false,
+        pageSize: 10
+      },
       select2: {
-        ajax: { url: '/api/v1/users/users/' },
+        ajax: this.objectsAjax,
+        options: this.objects,
         value: this.value,
         isSelectedValue: false
       }
     }
   },
-  methods: {
-    handleLoadInitialDone(initialOptions) {
-      if (this.objects === null) {
-        this.validObjects = initialOptions
+  computed: {
+    iAjax() {
+      this.$log.debug('iAjax', this.$refs.select2)
+      return this.$refs.select2.iAjax
     }
+  },
+  mounted() {
+    if (this.hasObjectsId.length !== 0) {
+      setTimeout(() => {
+        this.getHasObjectsByIds()
+      }, 500)
+    }
+  },
+  methods: {
+    safeMakeParams(params) {
+      this.$log.debug('safeMakeParams', this.$refs.select2)
+      return this.$refs.select2.safeMakeParams(params)
+    },
+    async loadMore() {
+      if (this.loading) {
+        return
+      }
+      if (!this.params.hasMore) {
+        return
+      }
+      this.params.page = this.params.page ? this.params.page + 1 : 1
+      try {
+        this.loading = true
+        await this.loadHasObjects()
+      } finally {
+        this.loading = false
+      }
+    },
+    async loadHasObjects() {
+      this.$log.debug('Start loadHasObject: ', this.params)
+      const params = this.safeMakeParams(this.params)
+      let data = await this.$axios.get(this.iAjax.url, { params: params })
+      data = this.iAjax.processResults.bind(this)(data)
+      data.results.forEach((v) => {
+        this.hasObjects.push(v)
+      })
+      // 如果还有其它页，继续获取, 如果没有就停止
+      if (!data.pagination) {
+        this.params.hasMore = false
+      }
+    },
+    async getHasObjectsByIds() {
+      const resp = await createSourceIdCache(this.hasObjectsId)
+      this.params.spm = resp.spm
+      await this.loadHasObjects()
     }
   }
 }

src/components/Select2/index.vue

@@ -160,6 +160,7 @@ export default {
       this.params.search = query
       this.getOptions()
     },
+
     async getInitialOptions() {
       const params = this.safeMakeParams(this.params)
       this.$log.debug('Get initial options: ', params)

src/views/users/UserGroupDetail/index.vue

@@ -7,7 +7,7 @@
             <DetailCard :title="cardTitle" :items="detailItems" />
           </el-col>
           <el-col :md="10" :sm="24">
-            <RelationCard v-if="!relationConfig.loading" v-bind="relationConfig" />
+            <RelationCard v-bind="relationConfig" />
           </el-col>
         </el-row>
       </div>
@@ -16,7 +16,6 @@
 </template>
 
 <script>
-import { getUserGroupMembers } from '@/api/user'
 import { GenericDetailPage } from '@/layout/components'
 import { DetailCard, RelationCard } from '@/components'
 
@@ -50,21 +49,23 @@ export default {
       relationConfig: {
         icon: 'fa-user',
         title: this.$tc('Members'),
-        url: '/api/v1/users/users/?fields_size=mini',
-        objectsId: [],
-        objects: [
-          {
-            id: '1',
-            name: '周杰伦'
+        objectsAjax: {
+          url: '/api/v1/users/users/?fields_size=mini'
         },
-          {
-            id: '2',
-            name: '昆凌'
-          },
-          {
-            id: '3',
-            name: '周杰伦'
-          }
+        hasObjectsId: ['938b47a3-db34-40be-b732-ee0125a4857c', '3e3b75a9-11fd-4b97-ad04-17a50a72507c'],
+        hasObjects: [
+          // {
+          //   id: '1',
+          //   name: '周杰伦'
+          // },
+          // {
+          //   id: '2',
+          //   name: '昆凌'
+          // },
+          // {
+          //   id: '3',
+          //   name: '周杰伦'
+          // }
         ],
         loading: true
       },
@@ -94,14 +95,14 @@ export default {
     }
   },
   mounted() {
-    getUserGroupMembers(this.$route.params.id).then(data => {
-      for (const i of data) {
-        this.relationConfig.objectsId.push(i.user)
-      }
-      console.log(this.relationConfig.objectsId)
-    }).finally(() => {
-      this.relationConfig.loading = false
-    })
+    // getUserGroupMembers(this.$route.params.id).then(data => {
+    //   for (const i of data) {
+    //     this.relationConfig.objectsId.push(i.user)
+    //   }
+    //   console.log(this.relationConfig.objectsId)
+    // }).finally(() => {
+    //   this.relationConfig.loading = false
+    // })
   },
   methods: {
   }