topicForm.vue

broker分组取消全部选项，选取分组后可以进一步选择broker
jd-opensource · Nov 10, 2020 · 5aa30dc · 5aa30dc
1 parent 2a17384
commit 5aa30dc
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 36 deletions.
diff --git a/joyqueue-console/joyqueue-portal/src/views/topic/addBroker.vue b/joyqueue-console/joyqueue-portal/src/views/topic/addBroker.vue
@@ -129,6 +129,60 @@ export default {
         this.onBrokerLoadComplete(this.tableData.rowData)
       })
     },
+    getBrokerByQueryGroup (brokerGroupId, brokerGroup) {
+      let query = {}
+      if (!brokerGroupId) {
+        query = {
+          keyword: this.searchData.keyword
+        }
+      } else {
+        this.searchData.brokerGroupId = brokerGroupId
+        query = {
+          keyword: this.searchData.keyword,
+          brokerGroupId: this.searchData.brokerGroupId
+        }
+        if (brokerGroup.length > 0) {
+          query.group = {
+            id: brokerGroup[0].id,
+            code: brokerGroup[0].code,
+            name: brokerGroup[0].name
+          }
+        }
+      }
+
+      let data = {
+        pagination: {
+          page: this.page.page,
+          size: this.page.size
+        },
+        query: query
+      }
+      apiRequest.post(this.urls.search, {}, data).then((data) => {
+        if (data === '') {
+          return
+        }
+        data.data = data.data || []
+        data.pagination = data.pagination || {
+          totalRecord: data.data.length
+        }
+        this.page.total = data.pagination.totalRecord
+        this.page.page = data.pagination.page
+        this.page.size = data.pagination.size
+        this.tableData.rowData = data.data
+        this.tableData.rowData.forEach(element => {
+          element['isChecked'] = false
+          if (brokers && brokers.length > 0) {
+            for (let broker of brokers) {
+              if (broker.id === element.id) {
+                element['isChecked'] = true
+                break
+              }
+            }
+          }
+        })
+        this.onBrokerLoadComplete(this.tableData.rowData)
+      })
+    },
     getBrokerStatus (rowData, i) {
       apiRequest.get(this.startInfo + '/' + rowData[i].id).then((data) => {
         if (data.code === 200) {

diff --git a/joyqueue-console/joyqueue-portal/src/views/topic/topicForm.vue b/joyqueue-console/joyqueue-portal/src/views/topic/topicForm.vue
@@ -2,7 +2,7 @@
   <div>
     <d-steps :current='current'>
       <d-step title="步骤1" description="填写主题信息"></d-step>
-      <d-step v-if="formData.brokerGroup.id <= 0" title="步骤2" description="选择Broker"></d-step>
+      <d-step title="步骤2" description="选择Broker"></d-step>
     </d-steps>
     <div class="steps-content" style="margin-top: 15px; border: 1px solid #e9e9e9; border-radius: 6px;background-color:
     #fafafa; text-align: left; padding: 20px 30px 40px 50px; height: 100%">
@@ -57,8 +57,8 @@
           </d-form>
         </div>
         <div class="step-actions" style="text-align: center">
-          <d-button v-if="formData.brokerGroup.id <= 0" type="primary" @click="next">下一步</d-button>
-          <d-button v-else type="primary" @click="confirm()">确定</d-button>
+          <d-button  type="primary" @click="next">下一步</d-button>
+<!--          <d-button v-else type="primary" @click="confirm()">确定</d-button>-->
         </div>
       </div>
       <div class="step2" v-show="current===1">
@@ -207,34 +207,8 @@ export default {
       }
     },
     handlerBrokerGroupChange (data) {
-      if (this.formData.brokerGroup.id === 0) {
-        this.$refs.brokers.getListByGroup(data)
-      } else {
         let brokers = this.brokerGroupList.filter(group => group.id === this.formData.brokerGroup.id)
-        let query = {
-          keyword: ''
-        }
-        if (brokers.length > 0) {
-          query.group = {
-            id: brokers[0].id,
-            code: brokers[0].code,
-            name: brokers[0].name
-          }
-        }
-        let data = {
-          pagination: {
-            page: 0,
-            size: 1000
-          },
-          query: query
-        }
-        apiRequest.post(this.urls.searchBroker, {}, data).then((data) => {
-          if (data === '') {
-            return
-          }
-          this.formData.brokers = data.data || []
-        })
-      }
+        this.$refs.brokers.getBrokerByQueryGroup(data,brokers)
     },
     getNamespaces () {
       apiRequest.get(this.urls.findAllNamespace).then((data) => {
@@ -255,16 +229,16 @@ export default {
     },
     getBrokerGroups () {
       apiRequest.get(this.urls.findAllBrokerGroup).then((data) => {
-        this.brokerGroupList = []
-        let allItem = {id: 0, code: '全部', name: '全部'}
-        this.brokerGroupList.push(allItem);
+        this.brokerGroupList = [];
         (data.data || []).forEach(item => {
           this.brokerGroupList.push(item)
         })
         // set default value
-        this.formData.brokerGroup.id = this.brokerGroupList[0].id
-        this.formData.brokerGroup.code = this.brokerGroupList[0].code
-        this.formData.brokerGroup.name = this.brokerGroupList[0].name
+        if(this.brokerGroupList.length > 0){
+          this.formData.brokerGroup.id = this.brokerGroupList[0].id
+          this.formData.brokerGroup.code = this.brokerGroupList[0].code
+          this.formData.brokerGroup.name = this.brokerGroupList[0].name
+        }
         this.handlerBrokerGroupChange(this.formData.brokerGroup.id)
       })
     },