fix(工作台): 工作台我的关注缺陷列表增加loading展示

--bug=1025139 --user=宋天阳
【工作台】我创建的/我关注得-查看缺陷关联-先显示暂无数据
https://www.tapd.cn/55049933/s/1359571

workstation/frontend/src/business/component/CaseTableList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="card-container">
     <ms-table
-      :table-is-loading="page.result.loading"
+      :table-is-loading="loading"
       :data="page.data"
       :enableSelection="false"
       :condition="condition"
@@ -235,7 +235,6 @@ import { TEST_CASE_LIST } from "metersphere-frontend/src/utils/constants";
 
 import {
   getCustomFieldFilter,
-  getCustomFieldValue,
   getCustomTableHeader,
   getCustomTableWidth,
   getLastTableSortField,
@@ -248,7 +247,6 @@ import HeaderLabelOperate from "metersphere-frontend/src/components/head/HeaderL
 import {
   getCurrentProjectID,
   getCurrentUserId,
-  getCurrentWorkspaceId,
 } from "metersphere-frontend/src/utils/token";
 
 import { getProjectMember, getProjectMemberUserFilter } from "@/api/user";
@@ -258,7 +256,6 @@ import { SYSTEM_FIELD_NAME_MAP } from "metersphere-frontend/src/utils/table-cons
 import {
   editTestCaseOrder,
   getTestCaseListById,
-  getTestCasePages,
   getTestCaseStep,
   testCaseList,
 } from "@/api/test-case";
@@ -276,13 +273,8 @@ import { getAdvSearchCustomField } from "metersphere-frontend/src/components/sea
 import TestCaseReviewStatusTableItem from "@/business/othermodule/track/TestCaseReviewStatusTableItem";
 import TestPlanCaseStatusTableItem from "@/business/othermodule/track/TestPlanCaseStatusTableItem";
 import TestCasePreview from "@/business/othermodule/track/TestCasePreview";
-import { getUUID, parseTag } from "metersphere-frontend/src/utils";
-import { uuid } from "@/model/ApiTestModel";
-import {
-  getCustomFieldValueForTrack,
-  getCustomTableHeaderByXpack,
-  getTableHeaderWithCustomFieldsByXpack,
-} from "@/business/component/js/table-head-util";
+import { parseTag } from "metersphere-frontend/src/utils";
+import { getCustomFieldValueForTrack } from "@/business/component/js/table-head-util";
 
 export default {
   name: "TableList",
@@ -313,6 +305,7 @@ export default {
           },
         },
       },
+      loading: false,
       versionFilters: [],
       statusFilters: [
         { text: this.$t("test_track.case.status_prepare"), value: "Prepare" },

workstation/frontend/src/business/component/IssueTableList.vue

@@ -19,10 +19,11 @@
       @filter="search"
       @order="getIssues"
       @handlePageChange="getIssues"
-      ref="table">
-
+      ref="table"
+    >
       <ms-table-column
-        v-for="(item) in fields" :key="item.key"
+        v-for="item in fields"
+        :key="item.key"
         :label="item.label"
         :prop="item.id"
         :field="item"
@@ -33,57 +34,84 @@
         :filters="item.filters"
       >
         <template v-slot="scope">
-
           <span v-if="item.id === 'platformStatus'">
             <span v-if="scope.row.platform === 'Tapd'">
-              {{ scope.row.platformStatus ? tapdIssueStatusMap[scope.row.platformStatus] : '--' }}
+              {{
+                scope.row.platformStatus
+                  ? tapdIssueStatusMap[scope.row.platformStatus]
+                  : "--"
+              }}
             </span>
-            <span v-else-if="scope.row.platform ==='Local'">
-              {{ scope.row.platformStatus ? tapdIssueStatusMap[scope.row.platformStatus] : '--' }}
+            <span v-else-if="scope.row.platform === 'Local'">
+              {{
+                scope.row.platformStatus
+                  ? tapdIssueStatusMap[scope.row.platformStatus]
+                  : "--"
+              }}
             </span>
-            <span v-else-if="platformStatusMap && platformStatusMap.get(scope.row.platformStatus)">
+            <span
+              v-else-if="
+                platformStatusMap &&
+                platformStatusMap.get(scope.row.platformStatus)
+              "
+            >
               {{ platformStatusMap.get(scope.row.platformStatus) }}
             </span>
             <span v-else>
-              {{ scope.row.platformStatus ? scope.row.platformStatus : '--' }}
+              {{ scope.row.platformStatus ? scope.row.platformStatus : "--" }}
             </span>
           </span>
 
           <ms-review-table-item
             v-else-if="item.id === 'description'"
             :data="scope.row"
-            prop="description"/>
+            prop="description"
+          />
 
           <span v-else-if="item.id === 'resourceName'">
-             <el-link v-if="scope.row.resourceName"
-                      @click="$router.push('/track/plan/view/' + scope.row.resourceId)">
+            <el-link
+              v-if="scope.row.resourceName"
+              @click="$router.push('/track/plan/view/' + scope.row.resourceId)"
+            >
               {{ scope.row.resourceName }}
             </el-link>
-            <span v-else>
-              --
-             </span>
+            <span v-else> -- </span>
           </span>
 
           <span v-else-if="item.id === 'createTime'">
-                 {{ scope.row.createTime | datetimeFormat }}
+            {{ scope.row.createTime | datetimeFormat }}
           </span>
 
           <span v-else-if="item.id === 'updateTime'">
-                 {{ scope.row.updateTime | datetimeFormat }}
+            {{ scope.row.updateTime | datetimeFormat }}
           </span>
 
           <span v-else-if="item.id === 'caseCount'">
-             <router-link
-               :to="scope.row.caseCount > 0 ? {name: 'testCase', params: { projectId: 'all', ids: scope.row.caseIds }} : {}">
-               {{ scope.row.caseCount }}
-             </router-link>
-         </span>
+            <router-link
+              :to="
+                scope.row.caseCount > 0
+                  ? {
+                      name: 'testCase',
+                      params: { projectId: 'all', ids: scope.row.caseIds },
+                    }
+                  : {}
+              "
+            >
+              {{ scope.row.caseCount }}
+            </router-link>
+          </span>
 
           <!-- 自定义字段 -->
           <span v-else-if="item.isCustom">
-            <span v-if="item.type === 'richText' && scope.row.displayValueMap[item.id]">
-                 <ms-review-table-item
-                   :data="scope.row.displayValueMap" :prop="item.id"/>
+            <span
+              v-if="
+                item.type === 'richText' && scope.row.displayValueMap[item.id]
+              "
+            >
+              <ms-review-table-item
+                :data="scope.row.displayValueMap"
+                :prop="item.id"
+              />
             </span>
             <span v-else>
               {{ scope.row.displayValueMap[item.id] }}
@@ -93,14 +121,16 @@
           <span v-else>
             {{ scope.row[item.id] }}
           </span>
-
         </template>
       </ms-table-column>
-
     </ms-table>
 
-    <ms-table-pagination :change="getIssues" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize"
-                         :total="page.total"/>
+    <ms-table-pagination
+      :change="getIssues"
+      :current-page.sync="page.currentPage"
+      :page-size.sync="page.pageSize"
+      :total="page.total"
+    />
   </el-card>
 </template>
 
@@ -113,7 +143,7 @@ import MsTablePagination from "metersphere-frontend/src/components/pagination/Ta
 import {
   ISSUE_PLATFORM_OPTION,
   ISSUE_STATUS_MAP,
-  TAPD_ISSUE_STATUS_MAP
+  TAPD_ISSUE_STATUS_MAP,
 } from "metersphere-frontend/src/utils/table-constants";
 import MsTableHeader from "metersphere-frontend/src/components/MsTableHeader";
 
@@ -124,19 +154,24 @@ import {
   getPlatformOption,
 } from "@/api/issue";
 import {
+  getCustomFieldFilter,
   getCustomFieldValue,
   getCustomTableWidth,
-  getPageInfo, getTableHeaderWithCustomFields, getLastTableSortField, getCustomFieldFilter, parseCustomFilesForList
+  getLastTableSortField,
+  getPageInfo,
+  getTableHeaderWithCustomFields,
+  parseCustomFilesForList,
 } from "metersphere-frontend/src/utils/tableUtils";
 import MsContainer from "metersphere-frontend/src/components/MsContainer";
 import MsMainContainer from "metersphere-frontend/src/components/MsMainContainer";
-import {getCurrentProjectID, getCurrentWorkspaceId} from "metersphere-frontend/src/utils/token";
-import {getProjectMember, getProjectMemberUserFilter} from "@/api/user";
-import {LOCAL} from "metersphere-frontend/src/utils/constants";
-import {TEST_TRACK_ISSUE_LIST} from "metersphere-frontend/src/components/search/search-components";
 import {
-  getAdvSearchCustomField
-} from "metersphere-frontend/src/components/search/custom-component";
+  getCurrentProjectID,
+  getCurrentWorkspaceId,
+} from "metersphere-frontend/src/utils/token";
+import { getProjectMember, getProjectMemberUserFilter } from "@/api/user";
+import { LOCAL } from "metersphere-frontend/src/utils/constants";
+import { TEST_TRACK_ISSUE_LIST } from "metersphere-frontend/src/components/search/search-components";
+import { getAdvSearchCustomField } from "metersphere-frontend/src/components/search/custom-component";
 import MsMarkDownText from "metersphere-frontend/src/components/MsMarkDownText";
 import MsReviewTableItem from "@/business/component/MsReviewTableItem";
 import IssueDescriptionTableItem from "@/business/component/IssueDescriptionTableItem";
@@ -150,7 +185,11 @@ export default {
     MsContainer,
     IssueDescriptionTableItem,
     MsTableHeader,
-    MsTablePagination, MsTableButton, MsTableOperators, MsTableColumn, MsTable
+    MsTablePagination,
+    MsTableButton,
+    MsTableOperators,
+    MsTableColumn,
+    MsTable,
   },
   data() {
     return {
@@ -161,7 +200,7 @@ export default {
       fields: [],
       customFields: [], // 通过表头过滤后的自定义字段列表
       tableHeaderKey: "ISSUE_LIST",
-      fieldsWidth: getCustomTableWidth('ISSUE_LIST'),
+      fieldsWidth: getCustomTableWidth("ISSUE_LIST"),
       issueTemplate: {},
       members: [],
       userFilter: [],
@@ -176,7 +215,7 @@ export default {
       columns: {
         num: {
           sortable: true,
-          minWidth: 100
+          minWidth: 100,
         },
         title: {
           sortable: true,
@@ -184,34 +223,33 @@ export default {
         },
         platform: {
           minWidth: 80,
-          filters: this.platformFilters
+          filters: this.platformFilters,
         },
         platformStatus: {
           minWidth: 110,
         },
         creatorName: {
-          columnKey: 'creator',
+          columnKey: "creator",
           minWidth: 100,
-          filters: this.creatorFilters
+          filters: this.creatorFilters,
         },
         resourceName: {},
         createTime: {
           sortable: true,
-          minWidth: 180
+          minWidth: 180,
         },
         updateTime: {
           sortable: true,
-          minWidth: 180
+          minWidth: 180,
         },
-        caseCount: {}
-      }
+        caseCount: {},
+      },
     };
   },
   activated() {
-    getPlatformOption()
-      .then((r) => {
-        this.platformOptions = r.data;
-      });
+    getPlatformOption().then((r) => {
+      this.platformOptions = r.data;
+    });
   },
   props: {
     isFocus: {
@@ -237,8 +275,8 @@ export default {
     screenHeight: {
       type: [Number, String],
       default() {
-        return 'calc(100vh - 160px)';
-      }
+        return "calc(100vh - 160px)";
+      },
     }, //屏幕高度
   },
   computed: {
@@ -261,18 +299,17 @@ export default {
     },
     isToDo() {
       return !this.isFocus && !this.isCreation;
-    }
+    },
   },
   created() {
     this.getMaintainerOptions();
-    this.page.result.loading = true;
+    this.loading = true;
     this.$nextTick(() => {
       getProjectMember((data) => {
         this.members = data;
       });
       getIssuePartTemplateWithProject((template) => {
         this.initFields(template);
-        this.page.result.loading = false;
         this.getIssues();
       });
     });
@@ -291,36 +328,56 @@ export default {
       } else {
         this.isThirdPart = true;
       }
-      let fields = getTableHeaderWithCustomFields('ISSUE_LIST', template.customFields, this.members);
+      let fields = getTableHeaderWithCustomFields(
+        "ISSUE_LIST",
+        template.customFields,
+        this.members
+      );
       if (!this.isThirdPart) {
         for (let i = 0; i < fields.length; i++) {
-          if (fields[i].id === 'platformStatus') {
+          if (fields[i].id === "platformStatus") {
             fields.splice(i, 1);
             break;
           }
         }
         // 如果不是三方平台则移除备选字段中的平台状态
-        let removeField = {id: 'platformStatus', name: 'platformStatus', remove: true};
+        let removeField = {
+          id: "platformStatus",
+          name: "platformStatus",
+          remove: true,
+        };
         template.customFields.push(removeField);
       }
       this.issueTemplate = template;
-      fields.forEach(item => {
+      fields.forEach((item) => {
         if (this.columns[item.id]) {
           Object.assign(item, this.columns[item.id]);
           if (this.columns[item.id].filters) {
             item.filters = this.columns[item.id].filters;
           }
         }
-        if (this.isToDo && item.id === '状态') {
-          item.filters = item.filters.filter(i => (i.value !== 'closed' && i.value !== '已关闭' && i.value !== 'resolved' && i.value !== 'Done' && i.value !== 'verified'))
+        if (this.isToDo && item.id === "状态") {
+          item.filters = item.filters.filter(
+            (i) =>
+              i.value !== "closed" &&
+              i.value !== "已关闭" &&
+              i.value !== "resolved" &&
+              i.value !== "Done" &&
+              i.value !== "verified"
+          );
         }
       });
 
       this.fields = fields;
 
       // 过滤自定义字段
-      this.page.condition.components = this.page.condition.components.filter(item => item.custom !== true);
-      let comp = getAdvSearchCustomField(this.page.condition, template.customFields);
+      this.page.condition.components = this.page.condition.components.filter(
+        (item) => item.custom !== true
+      );
+      let comp = getAdvSearchCustomField(
+        this.page.condition,
+        template.customFields
+      );
       this.page.condition.components.push(...comp);
 
       this.initCustomFieldValue();
@@ -328,6 +385,7 @@ export default {
       if (this.$refs.table) {
         this.$refs.table.reloadTable();
       }
+      this.loading = false;
     },
     search() {
       // 添加搜索条件时，当前页设置成第一页
@@ -338,8 +396,11 @@ export default {
       this.initFields(this.issueTemplate);
     },
     handleEdit(resource) {
-      let issueData = this.$router.resolve({path: '/track/issue', query: {id: resource.id}});
-      window.open(issueData.href, '_blank');
+      let issueData = this.$router.resolve({
+        path: "/track/issue",
+        query: { id: resource.id },
+      });
+      window.open(issueData.href, "_blank");
     },
     getIssues() {
       if (this.isSelectAll === false) {
@@ -350,39 +411,44 @@ export default {
           followPeople: {
             operator: "current user",
             value: "current user",
-          }
-        }
+          },
+        };
       } else if (this.isCreation) {
         if (this.page.condition.filters) {
-          delete this.condition.filters['user_id']
+          delete this.condition.filters["user_id"];
         }
         this.page.condition.combine = {
           creator: {
             operator: "current user",
             value: "current user",
-          }
-
-        }
+          },
+        };
       } else {
         this.addDefaultStatusFilter();
       }
       this.page.condition.workspaceId = getCurrentWorkspaceId();
       this.page.condition.orders = getLastTableSortField(this.tableHeaderKey);
       if (this.isDashboard) {
-        this.page.result.loading = getDashboardIssues(this.page).then((response)=>{
-          let data = response.data;
-          this.page.total = data.itemCount;
-          this.page.data = data.listObject;
-          parseCustomFilesForList(this.page.data);
-          this.initCustomFieldValue();
-        });
+        this.loading = true;
+        this.page.result.loading = getDashboardIssues(this.page).then(
+          (response) => {
+            let data = response.data;
+            this.page.total = data.itemCount;
+            this.page.data = data.listObject;
+            parseCustomFilesForList(this.page.data);
+            this.initCustomFieldValue();
+            this.loading = false;
+          }
+        );
       } else {
+        this.loading = true;
         this.page.result.loading = getIssues(this.page).then((response) => {
           let data = response.data;
           this.page.total = data.itemCount;
           this.page.data = data.listObject;
           parseCustomFilesForList(this.page.data);
           this.initCustomFieldValue();
+          this.loading = false;
         });
       }
     },
@@ -391,42 +457,46 @@ export default {
         creator: {
           operator: "current user",
           value: "current user",
-        }
-      }
+        },
+      };
       if (this.isToDo) {
         this.page.condition.combine.doneStatus = {
           operator: "not in",
           value: [
-            'closed',
-            '已关闭',
-            '已完成',
-            '完成',
-            '拒绝',
-            '已拒绝',
-            'rejected',
-            'delete',
-            'resolved',
-            'Done',
-            'verified',
-            '已验证'
+            "closed",
+            "已关闭",
+            "已完成",
+            "完成",
+            "拒绝",
+            "已拒绝",
+            "rejected",
+            "delete",
+            "resolved",
+            "Done",
+            "verified",
+            "已验证",
           ],
-        }
+        };
       }
     },
     initCustomFieldValue() {
       if (this.fields.length <= 0) {
         return;
       }
-      this.page.data.forEach(item => {
+      this.page.data.forEach((item) => {
         let displayValueMap = {};
-        let fieldIdSet = new Set(this.fields.map(i => i.id));
-        this.issueTemplate.customFields.forEach(field => {
+        let fieldIdSet = new Set(this.fields.map((i) => i.id));
+        this.issueTemplate.customFields.forEach((field) => {
           let displayValue;
           if (!fieldIdSet.has(field.name)) {
             return;
           }
-          if (field.name === '状态') {
-            displayValue = this.getCustomFieldValue(item, field, this.issueStatusMap[item.status]);
+          if (field.name === "状态") {
+            displayValue = this.getCustomFieldValue(
+              item,
+              field,
+              this.issueStatusMap[item.status]
+            );
           } else {
             displayValue = this.getCustomFieldValue(item, field);
           }
@@ -441,7 +511,7 @@ export default {
         this.creatorFilters = data;
       });
     },
-  }
+  },
 };
 </script>
 
@@ -456,4 +526,3 @@ export default {
   cursor: pointer;
 }
 </style>
-