fix(环境管理): 修复证书上传后不显示问题

--bug=1021588 --user=赵勇 [项目设置]github#21094环境配置中上传pfx证书没反应，上传失败 https://www.tapd.cn/55049933/s/1323042

framework/sdk-parent/frontend/src/components/environment/EnvironmentSSLConfig.vue

@@ -1,95 +1,159 @@
 <template>
-
   <div>
-    <div style="float: right;">
+    <div style="float: right">
-      <el-button size="mini" @click="open" :disabled="isReadOnly">{{ $t('test_track.case.import.click_upload') }}
+      <el-button size="mini" @click="open" :disabled="isReadOnly"
+        >{{ $t("test_track.case.import.click_upload") }}
       </el-button>
     </div>
-    <div class="tip">{{ this.$t('commons.ssl.files') }}
+    <div class="tip">{{ this.$t("commons.ssl.files") }}</div>
-    </div>
 
     <div class="ms-border">
       <el-table :data="sslConfig.files" highlight-current-row>
-        <el-table-column prop="name" :label="$t('load_test.file_name')" show-overflow-tooltip width="180"/>
+        <el-table-column
-        <el-table-column prop="type" :label="$t('api_test.definition.request.esb_table.type')" show-overflow-tooltip
+          prop="name"
-                         min-width="100px"/>
+          :label="$t('load_test.file_name')"
-        <el-table-column prop="password" show-overflow-tooltip min-width="120px" :label="$t('commons.password')">
+          show-overflow-tooltip
-          <template v-slot:default="{row}">
+          width="180"
-            <el-input size="small" v-model="row.password" clearable show-password/>
+        />
+        <el-table-column
+          prop="type"
+          :label="$t('api_test.definition.request.esb_table.type')"
+          show-overflow-tooltip
+          min-width="100px"
+        />
+        <el-table-column
+          prop="password"
+          show-overflow-tooltip
+          min-width="120px"
+          :label="$t('commons.password')"
+        >
+          <template v-slot:default="{ row }">
+            <el-input
+              size="small"
+              v-model="row.password"
+              clearable
+              show-password
+            />
           </template>
         </el-table-column>
-        <el-table-column prop="updateTime" show-overflow-tooltip min-width="120px"
+        <el-table-column
-                         :label="$t('load_test.last_modify_time')">
+          prop="updateTime"
-          <template v-slot:default="{row}">
+          show-overflow-tooltip
+          min-width="120px"
+          :label="$t('load_test.last_modify_time')"
+        >
+          <template v-slot:default="{ row }">
             <span>{{ row.updateTime | datetimeFormat }}</span>
           </template>
         </el-table-column>
         <el-table-column :label="$t('commons.operating')" width="100px">
-          <template v-slot:default="{row}">
+          <template v-slot:default="{ row }">
             <div>
-              <ms-table-operator-button :tip="$t('commons.update')" icon="el-icon-edit"
+              <ms-table-operator-button
-                                        type="primary" @exec="edit(row)"/>
+                :tip="$t('commons.update')"
-              <ms-table-operator-button :tip="$t('api_test.automation.remove')"
+                icon="el-icon-edit"
-                                        icon="el-icon-delete" @exec="remove(row)" type="danger"/>
+                type="primary"
+                @exec="edit(row)"
+              />
+              <ms-table-operator-button
+                :tip="$t('api_test.automation.remove')"
+                icon="el-icon-delete"
+                @exec="remove(row)"
+                type="danger"
+              />
             </div>
           </template>
         </el-table-column>
       </el-table>
     </div>
-    <p class="tip">{{ this.$t('commons.ssl.entry') }} </p>
+    <p class="tip">{{ this.$t("commons.ssl.entry") }}</p>
     <div class="ms-border">
       <el-table :data="sslConfig.entry" highlight-current-row v-if="!loading">
-        <el-table-column prop="originalAsName" :label="$t('commons.ssl.original_as_name')" show-overflow-tooltip
+        <el-table-column
-                         width="180"/>
+          prop="originalAsName"
-        <el-table-column prop="newAsName" :label="$t('commons.ssl.new_as_name')" show-overflow-tooltip
+          :label="$t('commons.ssl.original_as_name')"
-                         min-width="100px">
+          show-overflow-tooltip
-          <template v-slot:default="{row}">
+          width="180"
+        />
+        <el-table-column
+          prop="newAsName"
+          :label="$t('commons.ssl.new_as_name')"
+          show-overflow-tooltip
+          min-width="100px"
+        >
+          <template v-slot:default="{ row }">
             <el-input size="mini" v-model="row.newAsName"></el-input>
           </template>
         </el-table-column>
-        <el-table-column prop="type" show-overflow-tooltip min-width="120px"
+        <el-table-column
-                         :label="$t('api_test.definition.request.esb_table.type')"/>
+          prop="type"
-        <el-table-column prop="password" show-overflow-tooltip min-width="120px" :label="$t('commons.password')">
+          show-overflow-tooltip
-          <template v-slot:default="{row}">
+          min-width="120px"
-            <el-input size="mini" v-model="row.password" show-password></el-input>
+          :label="$t('api_test.definition.request.esb_table.type')"
+        />
+        <el-table-column
+          prop="password"
+          show-overflow-tooltip
+          min-width="120px"
+          :label="$t('commons.password')"
+        >
+          <template v-slot:default="{ row }">
+            <el-input
+              size="mini"
+              v-model="row.password"
+              show-password
+            ></el-input>
           </template>
         </el-table-column>
 
-        <el-table-column prop="sourceName" show-overflow-tooltip min-width="120px" :label="$t('commons.ssl.source')"/>
+        <el-table-column
+          prop="sourceName"
+          show-overflow-tooltip
+          min-width="120px"
+          :label="$t('commons.ssl.source')"
+        />
         <el-table-column :label="$t('commons.ssl.default')" width="100px">
-          <template v-slot:default="{row}">
+          <template v-slot:default="{ row }">
-            <el-checkbox v-model="row.default" @change="changeCheck(row)"/>
+            <el-checkbox v-model="row.default" @change="changeCheck(row)" />
           </template>
         </el-table-column>
       </el-table>
     </div>
-    <ms-s-s-l-file-upload :config="fileConfig" :sslConfig="sslConfig" :callback="addConfig" ref="sslConfigUpload"/>
+    <ms-s-s-l-file-upload
+      :config="fileConfig"
+      :sslConfig="sslConfig"
+      :callback="addConfig"
+      ref="sslConfigUpload"
+    />
   </div>
 </template>
 
 <script>
-import {environmentEntry} from "../../api/environment";
+import { environmentEntry } from "../../api/environment";
-import {SSLConfig} from "../../model/EnvironmentModel";
+import { SSLConfig } from "../../model/EnvironmentModel";
 import MsApiKeyValue from "./commons/ApiKeyValue";
-import {REQUEST_HEADERS} from "../../utils/constants";
 import MsSelectTree from "../select-tree/SelectTree";
 import MsTableOperatorButton from "../MsTableOperatorButton";
-import {getUUID} from "../../utils";
+import { getUUID } from "../../utils";
 import MsSSLFileUpload from "./SSLFileUpload";
 
 export default {
   name: "MsEnvironmentSSLConfig",
-  components: {MsApiKeyValue, MsSelectTree, MsTableOperatorButton, MsSSLFileUpload},
+  components: {
+    MsApiKeyValue,
+    MsSelectTree,
+    MsTableOperatorButton,
+    MsSSLFileUpload,
+  },
   props: {
     sslConfig: new SSLConfig(),
     projectId: String,
     isReadOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
   },
-  created() {
+  created() {},
-  },
   data() {
     return {
       loading: false,
@@ -97,8 +161,7 @@ export default {
     };
   },
   watch: {
-    projectId() {
+    projectId() {},
-    },
   },
   methods: {
     open() {
@@ -111,7 +174,7 @@ export default {
         type: file.type,
         updateTime: new Date().getTime(),
         password: config.password,
-        file: file
+        file: file,
       };
       if (!sslFile.type && sslFile.name) {
         let type = sslFile.name.substr(sslFile.name.lastIndexOf(".") + 1);
@@ -125,18 +188,19 @@ export default {
       this.$refs.sslConfigUpload.open(row);
     },
     reload() {
-      this.loading = true
+      this.loading = true;
       this.$nextTick(() => {
-        this.loading = false
+        this.loading = false;
       });
     },
     getEntry(sslFile) {
-      environmentEntry(sslFile.file, null, sslFile.password).then(response => {
+      environmentEntry(sslFile.file, null, sslFile.password).then(
-        let data = response.data;
+        (response) => {
+          let data = response.data.data;
           if (data) {
             if (!sslFile.id) {
               sslFile.id = getUUID();
-            data.forEach(item => {
+              data.forEach((item) => {
                 if (item) {
                   item.id = getUUID();
                   item.sourceId = sslFile.id;
@@ -146,12 +210,12 @@ export default {
                 item.default = false;
 
                 this.sslConfig.entry.unshift(item);
-            })
+              });
               this.sslConfig.files.unshift(sslFile);
             } else {
               // 更新条目
               this.remove(sslFile);
-            data.forEach(item => {
+              data.forEach((item) => {
                 if (item) {
                   item.id = getUUID();
                   item.sourceId = sslFile.id;
@@ -160,11 +224,12 @@ export default {
                 item.password = "";
                 item.default = false;
                 this.sslConfig.entry.unshift(item);
-            })
+              });
               this.sslConfig.files.unshift(sslFile);
             }
           }
-      });
+        }
+      );
     },
     remove(row) {
       const index = this.sslConfig.files.findIndex((d) => d.id === row.id);
@@ -172,22 +237,24 @@ export default {
       // 同时删除条目
       if (this.sslConfig.entry) {
         let removeKeys = [];
-        this.sslConfig.entry.forEach(item => {
+        this.sslConfig.entry.forEach((item) => {
           if (item && item.sourceId === row.id) {
-            const index = this.sslConfig.entry.findIndex((d) => d.sourceId === row.id);
+            const index = this.sslConfig.entry.findIndex(
+              (d) => d.sourceId === row.id
+            );
             removeKeys.push(index);
           }
         });
-        removeKeys.forEach(index => {
+        removeKeys.forEach((index) => {
           if (index !== -1) {
             this.sslConfig.entry.splice(index, 1);
           }
-        })
+        });
       }
     },
     changeCheck(row) {
       if (row.default) {
-        this.sslConfig.entry.forEach(item => {
+        this.sslConfig.entry.forEach((item) => {
           if (item && item.sourceId !== row.id) {
             item.default = false;
           }
@@ -195,8 +262,8 @@ export default {
         row.default = true;
       }
     },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>