秘钥展示优化

src/components/LineField/index.vue

@@ -1,5 +1,4 @@
 <template>
-
   <div class="line-field">
     <div class="label">
       {{label}}
@@ -39,6 +38,7 @@ export default {
   justify-content: space-between;
   .label {
     width: fit-content;
+    margin-right: 2em;
   }
   .right-box {
     flex: 1;

src/views/mch/access/index.vue

@@ -64,21 +64,22 @@
     />
 
     <!-- 添加或修改第三方API秘钥对对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :visible.sync="open" width="500px" append-to-body center :close-on-click-modal="false">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-result icon="success" :title="title" subTitle="仅展示一次，请妥善保管您的秘钥，请勿泄露"/>
-        <el-form-item label="申请用户ID" prop="userId">
+      <div>
-          <el-input v-model="form.userId" placeholder="请输入申请用户ID" />
+        <line-field v-if="accessKey" label="秘钥键" :value="accessKey">
-        </el-form-item>
+          <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="accessKey" v-clipboard:success="clipboardSuccess">
-        <el-form-item label="秘钥键" prop="accessKey">
+            {{accessKey}}
-          <el-input v-model="form.accessKey" placeholder="请输入秘钥键" />
+          </el-link>
-        </el-form-item>
+        </line-field>
-        <el-form-item label="秘钥" prop="accessSecret">
+        <line-field v-if="secret" label="秘钥" :value="secret">
-          <el-input v-model="form.accessSecret" placeholder="请输入秘钥" />
+          <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="secret" v-clipboard:success="clipboardSuccess" >
-        </el-form-item>
+            {{secret}}
-      </el-form>
+          </el-link>
+        </line-field>
+      </div>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="open = false" type="primary">关 闭</el-button>
-        <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
 
@@ -90,9 +91,11 @@
 import { listAccess, getAccess, delAccess, addAccess, updateAccess } from "@/api/ss/access";
 import { $view } from '@/utils/mixins'
 import { appAddAccess, appListAccess, appResetAccess, mchDelAccess } from '@/api/app/access'
+import LineField from '@/components/LineField/index.vue'
 
 export default {
   name: "MchAccess",
+  components: { LineField },
   mixins: [$view],
   props: {
     query: {
@@ -146,7 +149,10 @@ export default {
         createTime: [
           { required: true, message: "创建时间不能为空", trigger: "blur" }
         ]
-      }
+      },
+      accessKey: null,
+      secret: null,
+      showAccess: false,
     };
   },
   created() {
@@ -157,11 +163,15 @@ export default {
     this.getList();
   },
   methods: {
+    clipboardSuccess() {
+      this.$message.success("复制成功");
+    },
     /** 申请按钮操作 */
     handleAdd() {
       appAddAccess().then(res => {
         if (res.code === 200) {
-          this.showSecret(res.data.accessSecret)
+          this.showSecret(res.data.accessKey, res.data.accessSecret, "申请成功")
+          this.getList();
         }
       })
     },
@@ -174,14 +184,18 @@ export default {
       }).then(() => {
         appResetAccess(row.accessId).then(res => {
           if (res.code === 200) {
-            this.showSecret(res.data)
+            this.showSecret(null, res.data, "重置成功")
+            this.getList();
           }
         })
       })
     },
-    // TODO 展示秘钥
+    // 展示秘钥
-    showSecret(secret) {
+    showSecret(key, secret, title) {
-      this.$alert(`您的秘钥：${secret}`, '申请成功', {})
+      this.accessKey = key;
+      this.secret = secret;
+      this.title = title;
+      this.open = true;
     },
     /** 查询第三方API秘钥对列表 */
     getList() {