1. #692 async button add loading; 2.#702 cmdb-model-management reduce…

… form item margin
WeBankPartners · Feb 26, 2020 · 912e778 · 912e778
1 parent 7bc9e7c
commit 912e778
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 44 deletions.
diff --git a/cmdb-ui/src/pages/admin/components/enum-group-modal.vue b/cmdb-ui/src/pages/admin/components/enum-group-modal.vue
@@ -30,7 +30,7 @@
             </FormItem>
           </Col>
           <Col offset="1" span="5">
-            <Button type="primary" @click="saveCategoryHandler">{{ $t('save') }}</Button>
+            <Button type="primary" @click="saveCategoryHandler" :loading="buttonLoading">{{ $t('save') }}</Button>
           </Col>
         </Row>
       </Form>
@@ -65,7 +65,8 @@ export default {
           value: 3
         }
       ],
-      isVisible: this.enumGroupVisible
+      isVisible: this.enumGroupVisible,
+      buttonLoading: false
     }
   },
   watch: {
@@ -103,6 +104,7 @@ export default {
   computed: {},
   methods: {
     async saveCategoryHandler () {
+      this.buttonLoading = true
       const type = this.allEnumCategoryTypes.find(_ => _.ciTypeId === this.currentCiType.ciTypeId)
       if (this.category) {
         // update
@@ -113,6 +115,7 @@ export default {
           groupTypeId: this.form.catGroupId
         }
         const { message, statusCode } = await updateEnumCategory(payload)
+        this.buttonLoading = false
         if (statusCode === 'OK') {
           this.$Notice.success({
             title: this.$t('update_category_success_message'),
@@ -129,6 +132,7 @@ export default {
           groupTypeId: this.form.catGroupId
         }
         const { message, data, statusCode } = await createEnumCategory(payload)
+        this.buttonLoading = false
         if (statusCode === 'OK') {
           this.$Notice.success({
             title: this.$t('add_category_success_message'),

diff --git a/cmdb-ui/src/pages/admin/permission-management.vue b/cmdb-ui/src/pages/admin/permission-management.vue
@@ -53,6 +53,7 @@
       <Card>
         <p slot="title">{{ $t('menus_management') }}</p>
         <div class="tagContainers">
+          <Spin size="large" fix v-if="spinShow"></Spin>
           <Tree :data="menus" show-checkbox @on-check-change="handleMenuTreeCheck"></Tree>
         </div>
       </Card>
@@ -61,6 +62,7 @@
       <Card>
         <p slot="title">{{ $t('data_management') }}</p>
         <div class="tagContainers">
+          <Spin size="large" fix v-if="spinShow"></Spin>
           <div class="data-permissions" v-for="ci in ciTypePermissions" :key="ci.ciTypeId">
             <span class="ciTypes" :title="ci.ciTypeName">{{ ci.ciTypeName }}</span>
             <div class="ciTypes-options">
@@ -320,7 +322,8 @@ export default {
         }
       ],
       seletedRows: [],
-      addedUser: {}
+      addedUser: {},
+      spinShow: false
     }
   },
   methods: {
@@ -671,6 +674,7 @@ export default {
     async getPermissions (queryAfterEditing, checked, roleOrUser, byUser = false) {
       if (checked) {
         let permissions = byUser ? await getPermissionsByUser(roleOrUser) : await getPermissionsByRole(roleOrUser)
+        this.spinShow = false
         this.ciTypePermissions = permissions.data.ciTypePermissions
         if (queryAfterEditing) {
           this.permissionEntryPointsForEdit = []
@@ -690,6 +694,7 @@ export default {
       }
     },
     async handleUserClick (checked, name) {
+      this.spinShow = true
       this.currentRoleName = null
       this.dataPermissionDisabled = true
       this.users.forEach(_ => {
@@ -745,6 +750,7 @@ export default {
     },
 
     async handleRoleClick (checked, rolename) {
+      this.spinShow = true
       // this.currentRoleId = id;
       this.currentRoleName = rolename
       this.dataPermissionDisabled = false

diff --git a/cmdb-ui/src/pages/components/auto-fill.js b/cmdb-ui/src/pages/components/auto-fill.js
@@ -35,7 +35,8 @@ export default {
         { code: 'notNull', value: 'NotNull' },
         { code: 'null', value: 'Null' }
       ],
-      enumCodes: ['id', 'code', 'value', 'groupCodeId']
+      enumCodes: ['id', 'code', 'value', 'groupCodeId'],
+      spinShow: false
     }
   },
   computed: {
@@ -91,15 +92,18 @@ export default {
     renderOptions () {
       return (
         <div slot="content" class="auto-fill-options">
-          {this.options.map(_ =>
-            _.type === 'option' ? (
-              <div class={_.class} onClick={_.fn}>
-                {_.nodeName}
-              </div>
-            ) : (
-              <hr />
-            )
-          )}
+          {[
+            this.options.map(_ =>
+              _.type === 'option' ? (
+                <div class={_.class} onClick={_.fn}>
+                  {_.nodeName}
+                </div>
+              ) : (
+                <hr />
+              )
+            ),
+            this.spinShow ? <Spin fix /> : null
+          ]}
         </div>
       )
     },
@@ -270,10 +274,12 @@ export default {
       this.optionsDisplay = true
     },
     async getRefData (ruleIndex, attrIndex, ciTypeId) {
+      this.spinShow = true
       this.currentRule = ruleIndex
       this.currentAttr = attrIndex
       const promiseArray = [getRefCiTypeFrom(ciTypeId), getCiTypeAttr(ciTypeId)]
       const [refFroms, ciAttrs] = await Promise.all(promiseArray)
+      this.spinShow = false
       if (refFroms.statusCode === 'OK' && ciAttrs.statusCode === 'OK') {
         // 下拉框添加被引用的CI的选项
         refFroms.data.length &&
@@ -305,32 +311,37 @@ export default {
             type: 'line'
           })
         this.options = this.options.concat(
-          ciAttrs.data.map(_ => {
-            const isRef = _.inputType === 'ref' || _.inputType === 'multiRef'
-            const ciTypeName = isRef ? this.ciTypesObj[_.referenceId].name : this.ciTypesObj[_.ciTypeId].name
-            const attrName = this.ciTypeAttrsObj[_.ciTypeAttrId].name
-            const nodeName = isRef ? `->(${ciTypeName})${attrName}` : `.${attrName}`
-            const nodeObj = {
-              ciTypeId: isRef ? _.referenceId : _.ciTypeId,
-              parentRs: {
-                attrId: _.ciTypeAttrId,
-                isReferedFromParent: 1
+          ciAttrs.data
+            .filter(_ => _.inputType !== 'password')
+            .map(_ => {
+              const isRef = _.inputType === 'ref' || _.inputType === 'multiRef'
+              const ciTypeName = isRef ? this.ciTypesObj[_.referenceId].name : this.ciTypesObj[_.ciTypeId].name
+              const attrName = this.ciTypeAttrsObj[_.ciTypeAttrId].name
+              const nodeName = isRef ? `->(${ciTypeName})${attrName}` : `.${attrName}`
+              const nodeObj = {
+                ciTypeId: isRef ? _.referenceId : _.ciTypeId,
+                parentRs: {
+                  attrId: _.ciTypeAttrId,
+                  isReferedFromParent: 1
+                }
               }
-            }
-            return {
-              type: 'option',
-              class: 'auto-fill-li auto-fill-li-ref auto-fill-li-ref-to',
-              nodeName,
-              fn: () => this.addNode(ruleIndex, attrIndex, nodeObj)
-            }
-          })
+              return {
+                type: 'option',
+                class: 'auto-fill-li auto-fill-li-ref auto-fill-li-ref-to',
+                nodeName,
+                fn: () => this.addNode(ruleIndex, attrIndex, nodeObj)
+              }
+            })
         )
       }
     },
     // 显示枚举属性下拉框
     showEnumOptions (ruleIndex, attrIndex) {
       this.currentRule = ruleIndex
       this.currentAttr = attrIndex
+      this.options.push({
+        type: 'line'
+      })
       this.options = this.options.concat(
         this.enumCodes.map(_ => {
           return {

diff --git a/cmdb-ui/src/pages/components/table.js b/cmdb-ui/src/pages/components/table.js
@@ -281,6 +281,7 @@ export default {
 
         let columnsTitles = this.tableColumns.filter(_ => _.isDisplayed || _.displaySeqNo).map(column => column.title)
 
+        console.log(JSON.parse(JSON.stringify(this.tableOuterActions)))
         return this.tableOuterActions.map(_ => {
           if (_.actionType === 'filterColumns') {
             return (

diff --git a/cmdb-ui/src/pages/designing/application-architecture.vue b/cmdb-ui/src/pages/designing/application-architecture.vue
@@ -20,12 +20,20 @@
               </Option>
             </OptionGroup>
           </Select>
-          <Button style="margin: 0 10px;" @click="onArchChange(false)" :disabled="!allowArch">{{
-            $t('architecture_change')
-          }}</Button>
-          <Button style="margin-right: 10px;" @click="querySysTree" :disabled="!allowFixVersion">{{
-            $t('fix_version')
-          }}</Button>
+          <Button
+            style="margin: 0 10px;"
+            @click="onArchChange(false)"
+            :loading="buttonLoading.fixVersionModal"
+            :disabled="!allowArch"
+            >{{ $t('architecture_change') }}</Button
+          >
+          <Button
+            style="margin-right: 10px;"
+            @click="querySysTree"
+            :loading="buttonLoading.fixVersion"
+            :disabled="!allowFixVersion"
+            >{{ $t('fix_version') }}</Button
+          >
           <Button @click="onArchChange(true)" :disabled="!systemDesignVersion || allowFixVersion">{{
             $t('query')
           }}</Button>
@@ -35,7 +43,9 @@
             </div>
             <div slot="footer">
               <Button @click="cancelFixVersion">{{ $t('cancel') }}</Button>
-              <Button type="info" @click="onArchFixVersion">{{ $t('confirm') }}</Button>
+              <Button type="info" @click="onArchFixVersion" :loading="buttonLoading.fixVersionModal">{{
+                $t('confirm')
+              }}</Button>
             </div>
           </Modal>
         </Row>
@@ -272,7 +282,11 @@ export default {
       isTableViewOnly: true,
       systemDesignFixedDate: 0,
       linkTypes: [],
-      allUnitDesign: []
+      allUnitDesign: [],
+      buttonLoading: {
+        fixVersion: false,
+        fixVersionModal: false
+      }
     }
   },
   computed: {
@@ -373,6 +387,7 @@ export default {
     },
     async onArchFixVersion () {
       if (this.systemDesignVersion === '') return
+      this.buttonLoading.fixVersionModal = true
       const { statusCode, message } = await saveAllDesignTreeFromSystemDesign(this.systemDesignVersion)
       if (statusCode === 'OK') {
         this.queryCiData()
@@ -382,6 +397,9 @@ export default {
         })
         this.getSystemDesigns()
         this.fixVersionTreeModal = false
+        this.buttonLoading.fixVersionModal = false
+      } else {
+        this.buttonLoading.fixVersionModal = false
       }
     },
     cancelFixVersion () {
@@ -589,13 +607,17 @@ export default {
       this.physicalSpin = false
     },
     async querySysTree () {
+      this.buttonLoading.fixVersion = true
       if (this.systemDesignVersion === '') return
       this.spinShow = true
       const { statusCode, data } = await getAllDesignTreeFromSystemDesign(this.systemDesignVersion)
       if (statusCode === 'OK') {
         this.spinShow = false
         this.deployTree = this.formatTree(data).array
         this.fixVersionTreeModal = true
+        this.buttonLoading.fixVersion = false
+      } else {
+        this.buttonLoading.fixVersion = false
       }
     },
     formatTree (data) {

diff --git a/cmdb-ui/src/pages/designing/ci-integrated-query-management.vue b/cmdb-ui/src/pages/designing/ci-integrated-query-management.vue
@@ -39,11 +39,13 @@
       </Col>
       <Col span="6" offset="1">
         <Button :disabled="!isNewIntQuery" @click="newGraphNameModalVisible = true">{{ $t('create') }}</Button>
-        <Button :disabled="saveBtnDisable || isNewIntQuery" @click="saveGraph">{{ $t('update') }}</Button>
+        <Button :disabled="saveBtnDisable || isNewIntQuery" @click="saveGraph('update')" :loading="updateLoading">{{
+          $t('update')
+        }}</Button>
         <Modal
           v-model="newGraphNameModalVisible"
           :title="$t('add_integrated_query_name')"
-          @on-ok="saveGraph"
+          @on-ok="saveGraph('create')"
           @on-cancel="() => {}"
         >
           <Input v-model="newGraphName" :placeholder="$t('input_placeholder')" />
@@ -98,7 +100,8 @@ export default {
       saveBtnDisable: true,
       newGraphNameModalVisible: false,
       newGraphName: '',
-      ciGraphResult: null
+      ciGraphResult: null,
+      updateLoading: false
     }
   },
   created () {
@@ -267,7 +270,7 @@ export default {
       })
       document.querySelector('.ivu-modal-mask').click()
     },
-    async createIntQuery () {
+    createIntQuery () {
       if (this.selectedCI.id) {
         const found = this.allCiTypes.find(_ => _.ciTypeId === this.selectedCI.id)
         this.ciGraphData = {
@@ -276,20 +279,25 @@ export default {
           children: []
         }
         this.isNewIntQuery = true
+        this.attrs = []
       }
       document.querySelector('.content-container').click()
     },
-    async saveGraph () {
+    async saveGraph (type) {
       const reqData = this.treeifyCiTypes()
       if (!reqData) {
         this.$Notice.warning({
           title: 'Warning',
           desc: this.$t('unreasonable_delete_integrated_tips')
         })
       } else {
+        if (type === 'update') {
+          this.updateLoading = true
+        }
         const { statusCode, message } = this.isNewIntQuery
           ? await saveIntQuery(this.selectedCI.id, this.newGraphName, reqData)
           : await updateIntQuery(this.selectedQuery.id, reqData)
+        this.updateLoading = false
         if (statusCode === 'OK') {
           this.$Notice.success({
             title: 'Success',