添加loading

src/components/BugAddDrawer.vue

@@ -42,7 +42,7 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="submitAdd">创建</el-button>
+        <el-button type="primary" v-loading="confirmLoading" @click="submitAdd">创建</el-button>
         <el-button @click="showDrawer = false">取消</el-button>
       </el-form-item>
     </el-form>
@@ -77,6 +77,7 @@ export default {
           required: true, massage: '请选择类型', trigger: 'change',
         }],
       },
+      confirmLoading: false,
     };
   },
   computed: {
@@ -89,6 +90,7 @@ export default {
       this.showDrawer = true;
     },
     submitAdd() {
+      this.confirmLoading = true;
       const param = { projectId: this.$store.state.workspace.currentProjectId, ...this.param };
       BugListAPI.createBugRecord(param).then(
         (res) => {
@@ -96,6 +98,7 @@ export default {
           this.showDrawer = false;
         },
       );
+      this.confirmLoading = false;
     },
   },
 };

src/components/BugEditDrawer.vue

@@ -120,7 +120,7 @@
                 </el-col>
               </el-row>
               <el-row v-if="isEditing" class="entry-row" style="margin-top: 15px">
-                <el-button @click="submitEdit" size="mini" type="primary">提交</el-button>
+                <el-button @click="submitEdit" size="mini" v-loading="confirmLoading" type="primary">提交</el-button>
                 <el-button @click="cancelEdit" size="mini">取消</el-button>
               </el-row>
             </el-tab-pane>
@@ -201,6 +201,7 @@ export default {
         processorId: null,
         processorName: null,
       },
+      confirmLoading: false,
       stateOptions,
       priorityOptions,
     };
@@ -225,11 +226,13 @@ export default {
       this.editedBugRecord.processorName = this.processorName;
     },
     submitEdit() {
+      this.confirmLoading = true;
       const param = { id: this.id, ...this.editedBugRecord };
       BugListAPI.updateBugRecord(param).then((res) => {
         this.isEditing = false;
         this.$emit('bug-record-update');
       });
+      this.confirmLoading = false;
     },
     cancelEdit() {
       this.isEditing = false;

src/components/GeneralTable.vue

@@ -8,6 +8,7 @@
   <ElTable
     ref="tableRef"
     :data="data"
+    v-loading="loading"
     @row-click="rowClick"
   >
     <ElTableColumn
@@ -112,6 +113,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['row-click', 'add'],
   setup(props, { emit }) {

src/components/RequirementDrawer.vue

@@ -141,7 +141,7 @@
               </template>
               </template>
               <el-row v-if="isEditing" class="entry-row" style="margin-top: 15px">
-                <el-button @click="submitEdit" size="mini" type="primary">提交</el-button>
+                <el-button @click="submitEdit" v-loading="confirmLoading" size="mini" type="primary">提交</el-button>
                 <el-button @click="cancelEdit" size="mini">取消</el-button>
               </el-row>
             </el-tab-pane>
@@ -229,6 +229,7 @@ export default {
         processorId: null,
         processorName: null,
       },
+      confirmLoading: false,
       stateOptions,
       priorityOptions,
     };
@@ -253,6 +254,7 @@ export default {
       this.editedRequirement.processorName = this.processorName;
     },
     submitEdit() {
+      this.confirmLoading = true;
       const param = {
         id: this.id,
         title: this.editedRequirement.title,
@@ -267,6 +269,7 @@ export default {
         this.$emit('requirement-update');
         this.showDrawer = false;
       });
+      this.confirmLoading = false;
     },
     cancelEdit() {
       this.isEditing = false;

src/element-plus.ts

@@ -35,7 +35,7 @@ import {
   ElRadioGroup,
   ElTooltip,
   ElMessage,
-  ElMessageBox,
+  ElMessageBox, ElLoading,
 } from 'element-plus';
 
 import ZH_CN from 'element-plus/lib/locale/lang/zh-cn';
@@ -84,4 +84,5 @@ export const Components = [
 export const Plugins = [
   ElMessage,
   ElMessageBox,
+  ElLoading,
 ];

src/main.ts

@@ -8,7 +8,6 @@ const app = createApp(App);
 
 app.use(router);
 app.use(store, key);
-
 Components.forEach((component) => {
   app.component(component.name, component);
 });

src/views/Project/BugList.vue

@@ -3,6 +3,7 @@
   <GeneralTable
     :data="bugList"
     :showAdd="true"
+    :loading="loading"
     @add="addBugRecord"
     @row-click="openDrawer"
   />
@@ -26,6 +27,7 @@ export default {
   components: { BugEditDrawer, BugAddDrawer, GeneralTable },
   data() {
     return {
+      loading: false,
       bugList: [],
       showAddBugDrawer: false,
       selectedBug: null,
@@ -36,7 +38,9 @@ export default {
   },
   methods: {
     async fetch() {
+      this.loading = true;
       this.bugList = await BugListAPI.getBugListByProjectId(this.$store.state.workspace.currentProjectId);
+      this.loading = false;
     },
     openDrawer(row) {
       this.selectedBug = Array.prototype.find.call(this.bugList, (bug) => bug.id === row.id);

src/views/Project/Pipeline.vue

@@ -1,5 +1,5 @@
 <template>
-  <ElTabs class="tabs" v-model="activeTab">
+  <ElTabs class="tabs" v-model="activeTab"  v-loading.lock="loading">
     <ElTabPane label="流水线" name="pipeline">
       <ElTable :data="pipelines" width="100%" :default-sort="{prop: 'id', order: 'descending'}">
         <ElTableColumn
@@ -79,11 +79,11 @@
           </template>
         </ElTableColumn>
       </ElTable>
-      <ElDialog v-model="showPipelineDetailModal" destroy-on-close>
+      <ElDialog v-loading="diaLogLoading" v-model="showPipelineDetailModal" destroy-on-close>
         <template #title>历史执行结果详情</template>
         <pre class="pipeline-detail">{{detail}}</pre>
       </ElDialog>
-      <ElDialog v-model="showPipelineHistoryModal" destroy-on-close>
+      <ElDialog v-loading="diaLogLoading" v-model="showPipelineHistoryModal" destroy-on-close>
         <template #title>流水线构建历史</template>
         <ElTable
           :data="pipelineHistory"
@@ -120,6 +120,7 @@
         </ElTable>
       </ElDialog>
       <ElDialog
+        v-loading="diaLogLoading"
         v-model="showPipelineEditModal"
         :before-close="(done) => {
           jsonValid=true;
@@ -148,6 +149,7 @@
         </template>
       </ElDialog>
       <ElDialog
+        v-loading="diaLogLoading"
         v-model="showPipelineCreateModal"
         :before-close="(done) => {
           $refs['createPipelineForm'].resetFields();
@@ -183,7 +185,7 @@
         </ElForm>
         <template #footer>
           <span class="dialog-footer">
-            <el-button type="primary" @click="handlePipelineCreateConfirm">确 定</el-button>
+            <el-button type="primary" v-loading="confirmLoading" @click="handlePipelineCreateConfirm">确 定</el-button>
           </span>
         </template>
       </ElDialog>
@@ -258,6 +260,9 @@ import { formatter } from '@/utils/time';
 export default {
   data() {
     return {
+      loading: false,
+      dialogLoading: false,
+      confirmLoading: false,
       activeTab: 'pipeline',
       pipelines: [],
       productions: [],
@@ -278,9 +283,11 @@ export default {
     };
   },
   async mounted() {
+    this.loading = true;
     this.pipelines = await PipelineAPI.getPipelinesByProjectId(this.$store.state.workspace.currentProjectId);
     this.productions = await PipelineAPI.getDeploymentsByProjectId(this.$store.state.workspace.currentProjectId);
     this.templates = await PipelineAPI.getPipelineTemplates();
+    this.loading = false;
   },
   methods: {
     formatter,
@@ -291,40 +298,50 @@ export default {
           break;
         }
         case 'trigger': {
+          this.loading = true;
           await PipelineAPI.triggerDeployment({
             projectId: this.$store.state.workspace.currentProjectId,
             pipelineId: id,
           });
           this.productions = await PipelineAPI.getDeploymentsByProjectId(this.$store.state.workspace.currentProjectId);
+          this.loading = false;
           break;
         }
         case 'detail': {
           this.showPipelineDetailModal = true;
+          this.dialogLoading = true;
           this.detail = await PipelineAPI.getPipelineHistoryDetail(id);
+          this.dialogLoading = false;
           break;
         }
         case 'history': {
           this.showPipelineHistoryModal = true;
+          this.dialogLoading = true;
           this.pipelineHistory = await PipelineAPI.getPipelineHistory({
             projectId: this.$store.state.workspace.currentProjectId,
             pipelineId: id,
           });
+          this.dialogLoading = false;
           break;
         }
         case 'edit': {
           this.showPipelineEditModal = true;
+          this.dialogLoading = true;
           this.editingPipelineId = id;
           this.pipelineConfig = await PipelineAPI.getPipeline({
             projectId: this.$store.state.workspace.currentProjectId,
             pipelineId: id,
           }).configJson || '{}';
+          this.dialogLoading = false;
           break;
         }
         case 'delete': {
+          this.loading = true;
           PipelineAPI.deletePipeline({
             projectId: this.$store.state.workspace.currentProjectId,
             pipelineId: id,
           });
+          this.loading = false;
           break;
         }
         default: {
@@ -344,14 +361,17 @@ export default {
       }
     }, 500),
     async handlePipelineUpdateConfirm() {
+      this.confirmLoading = true;
       await PipelineAPI.updatePipeline({
         projectId: this.$store.state.workspace.currentProjectId,
         pipelineId: this.editingPipelineId,
         configJson: JSON.stringify(JSON.parse(this.pipelineConfig)),
       });
+      this.confirmLoading = false;
       this.showPipelineEditModal = false;
     },
     async handlePipelineCreateConfirm() {
+      this.confirmLoading = true;
       this.$refs.createPipelineForm.validate(async (valid) => {
         if (valid) {
           await PipelineAPI.createPipeline({
@@ -363,12 +383,15 @@ export default {
           this.showPipelineCreateModal = false;
         }
       });
+      this.confirmLoading = false;
     },
     open(url, target) {
       window.open(url, target);
     },
     async deleteProduction(id) {
+      this.loading = true;
       await PipelineAPI.deleteInstance(id);
+      this.loading = false;
     },
   },
 };

src/views/Project/Schedule.vue

@@ -1,11 +1,11 @@
 <template>
-  <el-row style="display: flex;flex-direction: row;align-items: center;margin-bottom: 10px;color: #333333">
+  <el-row  style="display: flex;flex-direction: row;align-items: center;margin-bottom: 10px;color: #333333">
     <h4>项目规划</h4>
     <el-tooltip class="item" effect="dark" :content="scheduleGuide" placement="right-end">
       <i class="el-icon-question"></i>
     </el-tooltip>
   </el-row>
-  <Tree :data="requirements" @change="handleTreeChange" @nodeClick="handleNodeClick" ref="tree"></Tree>
+  <Tree :data="requirements" v-loading="loading" @change="handleTreeChange" @nodeClick="handleNodeClick" ref="tree"></Tree>
   <RequirementDrawer
     ref="drawer"
     v-bind="requirementInDrawer"
@@ -27,6 +27,7 @@ export default {
   data() {
     return {
       scheduleGuide,
+      loading: false,
       requirements: [],
       showRequirementDrawer: false,
       addRequirementDrawer: false,
@@ -39,11 +40,13 @@ export default {
   },
   methods: {
     async getTreeData() {
+      this.loading = true;
       try {
         this.requirements = this.addChild2Node(await RequirementAPI.getTreeNodesByProjectId(this.$store.state.workspace.currentProjectId));
       } catch (e) {
         console.error(e);
       }
+      this.loading = false;
     },
     addChild2Node(array) {
       const nodeMap = new Map();

src/views/Project/TaskList.vue

@@ -2,6 +2,7 @@
   <div class="table-container">
     <GeneralTable
       :data="taskList"
+      :loading="loading"
       @row-click="openDrawer"
     />
   </div>
@@ -23,6 +24,7 @@ export default {
   components: { GeneralTable, RequriementDrawer },
   data() {
     return {
+      loading: false,
       taskList: [],
       requirementInDrawer: {},
       stateOptions: [{ value: '已完成' }, { value: '进行中' }, { value: '已创建' }],
@@ -34,7 +36,9 @@ export default {
   },
   methods: {
     async fetch() {
+      this.loading = true;
       this.taskList = await RequirementAPI.getTasksByProjectId(this.$store.state.workspace.currentProjectId);
+      this.loading = false;
     },
     openDrawer(row) {
       this.requirementInDrawer = row;