处理合格证按钮加载问题

src/views/inspectionWork/components/Certificate.vue

@@ -20,21 +20,26 @@
         :toolkit="[]"
       >
         <template v-slot:toolbar>
-          <el-button :loading="loading" type="primary" @click="addBank">添加</el-button>
+          <el-button :loading="loading" type="primary" @click="addBank"
+            >添加</el-button
+          >
         </template>
         <template v-slot:headerNumber="{ column }">
           <span class="is-required">{{ column.label }}</span>
         </template>
-        <template v-slot:certificateNumber="{ row,$index }">
+        <template v-slot:certificateNumber="{ row, $index }">
           <el-form-item
             :prop="`tableList.${$index}.certificateNumber`"
             :rules="{
-                  required: true,
-                  message: '请输入合格证号',
-                  trigger: 'change'
-                }"
+              required: true,
+              message: '请输入合格证号',
+              trigger: 'change'
+            }"
           >
-            <el-input v-model="row.certificateNumber" placeholder="请输入"></el-input>
+            <el-input
+              v-model="row.certificateNumber"
+              placeholder="请输入"
+            ></el-input>
           </el-form-item>
         </template>
         <template v-slot:remark="{ row }">
@@ -46,9 +51,15 @@
           <fileMain v-model="row.certificateAttachments"></fileMain>
         </template>
         <template v-slot:action="{ $index }">
-          <el-popconfirm class="ele-action" title="确定要删除当前数据吗？" @confirm="delSon($index)">
+          <el-popconfirm
+            class="ele-action"
+            title="确定要删除当前数据吗？"
+            @confirm="delSon($index)"
+          >
             <template v-slot:reference>
-              <el-link type="danger" :underline="false" icon="el-icon-delete">删除</el-link>
+              <el-link type="danger" :underline="false" icon="el-icon-delete"
+                >删除</el-link
+              >
             </template>
           </el-popconfirm>
         </template>
@@ -62,144 +73,144 @@
 </template>
 
 <script>
-import {
-  updateCertificateNumber,
-  qualityWorkOrderCertificate
-} from '@/api/inspectionWork';
-import fileMain from '@/components/addDoc/index.vue';
-export default {
-  data() {
-    return {
-      form: {
-        tableList: [],
+  import {
+    updateCertificateNumber,
+    qualityWorkOrderCertificate
+  } from '@/api/inspectionWork';
+  import fileMain from '@/components/addDoc/index.vue';
+  export default {
+    data() {
+      return {
+        form: {
+          tableList: []
+        },
         loading: false
-      }
-    };
-  },
-  components: { fileMain },
-  props: {
-    addOpen: {
-      type: Boolean,
-      default: false
+      };
     },
-    rowData: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  computed: {
-    columns() {
-      return [
-        {
-          type: 'index',
-          label: '序号',
-          align: 'center',
-          width: 60
-        },
-        {
-          label: '合格证号',
-          prop: 'certificateNumber',
-          slot: 'certificateNumber',
-          headerSlot: 'headerNumber',
-          align: 'center',
-          width: 250
-        },
-        {
-          prop: 'remark',
-          slot: 'remark',
-          label: '备注',
-          align: 'center'
-        },
-        {
-          prop: 'certificateAttachments',
-          slot: 'certificateAttachments',
-          label: '合格证附件',
-          align: 'center',
-          width: 120
-        },
-        {
-          columnKey: 'action',
-          label: '操作',
-          width: 150,
-          align: 'center',
-          resizable: false,
-          slot: 'action'
-        }
-      ];
-    }
-  },
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    handleClose() {
-      this.$emit('closeModel');
+    components: { fileMain },
+    props: {
+      addOpen: {
+        type: Boolean,
+        default: false
+      },
+      rowData: {
+        type: Object,
+        default: () => {}
+      }
     },
-    getList() {
-      let params = {
-        pageNum: 1,
-        qualityWorkOrderId: this.rowData.id,
-        size: 1000
-      };
-      this.loading = true;
-      qualityWorkOrderCertificate(params)
-        .then((res) => {
-          this.loading = false;
-          if (res.list.length > 0) {
-            this.form.tableList = res.list;
+    computed: {
+      columns() {
+        return [
+          {
+            type: 'index',
+            label: '序号',
+            align: 'center',
+            width: 60
+          },
+          {
+            label: '合格证号',
+            prop: 'certificateNumber',
+            slot: 'certificateNumber',
+            headerSlot: 'headerNumber',
+            align: 'center',
+            width: 250
+          },
+          {
+            prop: 'remark',
+            slot: 'remark',
+            label: '备注',
+            align: 'center'
+          },
+          {
+            prop: 'certificateAttachments',
+            slot: 'certificateAttachments',
+            label: '合格证附件',
+            align: 'center',
+            width: 120
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 150,
+            align: 'center',
+            resizable: false,
+            slot: 'action'
           }
-        })
-        .catch((err) => {
-          this.loading = true;
-        });
-    },
-    addBank() {
-      this.form.tableList.push({
-        certificateNumber: '',
-        remark: ''
-      });
+        ];
+      }
     },
-    delSon(index) {
-      this.form.tableList.splice(index, 1);
+    mounted() {
+      this.getList();
     },
-    submitAdd() {
-      if (this.form.tableList.length == 0) {
-        return this.$message.warning('至少需要保留一条数据');
-      }
-      this.$refs.certificateForm.validate((valid) => {
-        if (valid) {
-          let certificates = this.form.tableList.map((el) => {
-            return {
-              ...el,
-              qualityWorkOrderCode: this.rowData.code,
-              qualityWorkOrderId: this.rowData.id,
-              qualityWorkOrderName: this.rowData.name
-            };
-          });
-          let data = {
-            certificates,
-            id: this.rowData.id
-          };
-          updateCertificateNumber(data).then((res) => {
-            if (res) {
-              this.$message.success('操作成功');
-              this.handleClose();
-              this.$emit('search');
+    methods: {
+      handleClose() {
+        this.$emit('closeModel');
+      },
+      getList() {
+        let params = {
+          pageNum: 1,
+          qualityWorkOrderId: this.rowData.id,
+          size: 1000
+        };
+        this.loading = true;
+        qualityWorkOrderCertificate(params)
+          .then((res) => {
+            this.loading = false;
+            if (res.list.length > 0) {
+              this.form.tableList = res.list;
             }
+          })
+          .catch((err) => {
+            this.loading = true;
           });
+      },
+      addBank() {
+        this.form.tableList.push({
+          certificateNumber: '',
+          remark: ''
+        });
+      },
+      delSon(index) {
+        this.form.tableList.splice(index, 1);
+      },
+      submitAdd() {
+        if (this.form.tableList.length == 0) {
+          return this.$message.warning('至少需要保留一条数据');
         }
-      });
+        this.$refs.certificateForm.validate((valid) => {
+          if (valid) {
+            let certificates = this.form.tableList.map((el) => {
+              return {
+                ...el,
+                qualityWorkOrderCode: this.rowData.code,
+                qualityWorkOrderId: this.rowData.id,
+                qualityWorkOrderName: this.rowData.name
+              };
+            });
+            let data = {
+              certificates,
+              id: this.rowData.id
+            };
+            updateCertificateNumber(data).then((res) => {
+              if (res) {
+                this.$message.success('操作成功');
+                this.handleClose();
+                this.$emit('search');
+              }
+            });
+          }
+        });
+      }
     }
-  }
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.certificate_form {
-  min-height: 500px;
+  .certificate_form {
+    min-height: 500px;
 
-  :deep(.el-form-item) {
-    margin: 16px 0;
-  }
-}
-</style>>
+    :deep(.el-form-item) {
+      margin: 16px 0;
+    }
+  }</style
+>>