秘钥展示优化

This commit is contained in:
墨大叔 2024-08-09 10:20:20 +08:00
parent 0e96a9be41
commit 5dfef8cf5c
2 changed files with 36 additions and 22 deletions

View File

@ -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;
@ -53,7 +53,7 @@ export default {
margin: 0 0.5em;
}
}
.line-field:nth-child(n +2) {
.line-field:nth-child(n + 2) {
border-top: 1px solid #ededed;
}
.line-field:hover {

View File

@ -64,21 +64,22 @@
/>
<!-- 添加或修改第三方API秘钥对对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="申请用户ID" prop="userId">
<el-input v-model="form.userId" placeholder="请输入申请用户ID" />
</el-form-item>
<el-form-item label="秘钥键" prop="accessKey">
<el-input v-model="form.accessKey" placeholder="请输入秘钥键" />
</el-form-item>
<el-form-item label="秘钥" prop="accessSecret">
<el-input v-model="form.accessSecret" placeholder="请输入秘钥" />
</el-form-item>
</el-form>
<el-dialog :visible.sync="open" width="500px" append-to-body center :close-on-click-modal="false">
<el-result icon="success" :title="title" subTitle="仅展示一次,请妥善保管您的秘钥,请勿泄露"/>
<div>
<line-field v-if="accessKey" label="秘钥键" :value="accessKey">
<el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="accessKey" v-clipboard:success="clipboardSuccess">
{{accessKey}}
</el-link>
</line-field>
<line-field v-if="secret" label="秘钥" :value="secret">
<el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="secret" v-clipboard:success="clipboardSuccess" >
{{secret}}
</el-link>
</line-field>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
<el-button @click="open = false" type="primary"> </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) {
this.$alert(`您的秘钥:${secret}`, '申请成功', {})
//
showSecret(key, secret, title) {
this.accessKey = key;
this.secret = secret;
this.title = title;
this.open = true;
},
/** 查询第三方API秘钥对列表 */
getList() {