新增：授权应用界面
This commit is contained in:
jmal
parent
da67d9298b
commit
a381678f2e
@ -21,7 +21,28 @@ export default {
|
||||
method: 'put',
|
||||
params
|
||||
})
|
||||
}
|
||||
},
|
||||
getAccessTokenList(params) {
|
||||
return request({
|
||||
url: '/user/setting/accessTokenList',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
},
|
||||
generateAccessToken(params) {
|
||||
return request({
|
||||
url: '/user/setting/generateAccessToken',
|
||||
method: 'put',
|
||||
params
|
||||
})
|
||||
},
|
||||
deleteAccessToken(params) {
|
||||
return request({
|
||||
url: '/user/setting/deleteAccessToken',
|
||||
method: 'delete',
|
||||
params
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
export function getSetting(params) {
|
||||
|
||||
@ -5,9 +5,21 @@
|
||||
|
||||
import { Icon } from 'ant-design-vue'
|
||||
const IconFont = Icon.createFromIconfontCN({
|
||||
scriptUrl: '//at.alicdn.com/t/font_2024484_enjqo8y5nla.js'
|
||||
scriptUrl: '//at.alicdn.com/t/font_2024484_a3e60q05qwc.js'
|
||||
})
|
||||
|
||||
// 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表
|
||||
|
||||
// const nodeArray = Array.from(document.querySelectorAll('.block-icon-list .icon-item .icon-code.icon-code-show'));
|
||||
// const iconNames = nodeArray.map(item => item.outerText.replace('icon-',''))
|
||||
// console.log(iconNames.slice(0,80))
|
||||
// console.log(iconNames.slice(80,160))
|
||||
|
||||
export const iconFonts = {
|
||||
list: ["zuijinhuoyue","key", "shouquan", "sort", "grid", "list", "emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui",
|
||||
"maren", "zhutou", "qie", "youling", "apple-fill", "attachment", "android-fill", "apple", "download", "arrow-up-circle", "arrow-right-circle", "arrow-down", "ashbin", "add", "file_music", "menu", "role", "jiaoseguanli", "yemianshezhi", "drop_down", "yuandian", "tag", "service-directory", "fabu", "wailian", "bianji-", "WEBSITE", "wangzhanguanli", "Up", "up", "fenlei", "guanlizhuanjiawenzhang", "pifu", "tuichudenglu", "shezhi", "wangzhan", "huaban", "yunshezhi", "UserSettings", "blogger", "biaoqian", "myself", "guidang", "quxiaoyulan1-copy", "yulan-copy", "quxiaoyulan1", "yulan"]
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Icon',
|
||||
components: {
|
||||
|
||||
@ -44,13 +44,12 @@
|
||||
|
||||
<script>
|
||||
import icons from './requireIcons'
|
||||
import {icon} from '@/utils/iconfont-find'
|
||||
import NewComponent from "@/components/select/iconList";
|
||||
import {iconFonts} from '@/components/Icon/Icon'
|
||||
import IconList from "@/components/select/iconList";
|
||||
|
||||
export default {
|
||||
name: 'IconSelect',
|
||||
components: {IconList, NewComponent},
|
||||
components: {IconList},
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
@ -60,7 +59,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
iconList: icons,
|
||||
iconfontList: icon.list,
|
||||
iconfontList: iconFonts.list,
|
||||
currentValue: this.value,
|
||||
hasValue: true,
|
||||
pickerOpen: false,
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
// 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表
|
||||
|
||||
// const nodeArray = Array.from(document.querySelectorAll('.block-icon-list .icon-item .icon-code.icon-code-show'));
|
||||
// const iconNames = nodeArray.map(item => item.outerText.replace('icon-',''))
|
||||
// console.log(iconNames.slice(0,80))
|
||||
// console.log(iconNames.slice(80,130))
|
||||
|
||||
export const icon = {
|
||||
list: ["emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui", "maren", "zhutou", "qie", "youling",
|
||||
"apple-fill", "attachment", "android-fill", "apple", "download", "arrow-up-circle", "arrow-right-circle", "arrow-down", "ashbin", "add", "file_music", "menu", "role", "jiaoseguanli", "yemianshezhi", "drop_down", "yuandian", "tag", "service-directory", "fabu", "wailian", "bianji-", "WEBSITE", "wangzhanguanli", "Up", "up", "fenlei", "guanlizhuanjiawenzhang", "pifu", "tuichudenglu", "shezhi", "wangzhan", "huaban", "yunshezhi", "UserSettings", "blogger", "biaoqian", "myself", "guidang", "quxiaoyulan1-copy", "yulan-copy", "quxiaoyulan1", "yulan"]
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-wechat-title="title">
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:fullscreen="true"
|
||||
@ -447,6 +447,7 @@ export default {
|
||||
this.closeDialog()
|
||||
},
|
||||
closeDialog(){
|
||||
this.title = this.pageTitle
|
||||
this.$router.replace({path: this.$route.path})
|
||||
window.onbeforeunload = null
|
||||
this.hasChange = false
|
||||
|
||||
193
src/views/setting/authAPP.vue
Normal file
193
src/views/setting/authAPP.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-alert
|
||||
v-if="accessToken"
|
||||
title="新的操作令牌生成成功！您必须立即复制到一个安全的地方, 因为该令牌只会显示一次!"
|
||||
type="success"
|
||||
center
|
||||
:closable="false">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
v-if="accessToken"
|
||||
:title="accessToken"
|
||||
center
|
||||
type="info"
|
||||
:closable="false">
|
||||
</el-alert>
|
||||
<el-dialog class="dialog-cm" width="500px" :title="dialogTitle" :close-on-click-modal="false" :visible.sync="dialogVisible">
|
||||
<el-form ref="managerForm" size="medium" :model="form" label-position="left" :rules="rules" label-width="95px" @submit.native.prevent>
|
||||
<el-form-item label="令牌名称:" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入令牌名称" @keyup.enter.native="onSave"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="small" @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" :loading="saveLoading"
|
||||
@click="onSave">保 存
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-card class="box-card">
|
||||
<div slot="header">
|
||||
<div class="box-card-header">
|
||||
<div class="clearfix card-header-back">
|
||||
<span>管理个人操作令牌</span>
|
||||
<el-button class="card-button" size="mini" type="primary" @click="newAccessToken">新增令牌</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="token-title-desc">您可以使用这些以生成的令牌来操作 JmalCloud API。</div>
|
||||
<el-divider></el-divider>
|
||||
<div>
|
||||
<ul v-if="accessTokenList.length > 0">
|
||||
<li v-for="token in accessTokenList" :key="token.id">
|
||||
<div class="token-item">
|
||||
<div class="item-icon">
|
||||
<svg-icon icon-class="key"></svg-icon>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="item-title">{{ token.name }}</div>
|
||||
<div class="item-desc">
|
||||
<span>增加于</span> <span>{{ token.createTime }}</span>
|
||||
<i> <svg-icon v-if="token.lastActiveTime" icon-class="zuijinhuoyue"></svg-icon><i v-if="!token.lastActiveTime" class="el-icon-info"></i>{{ token.lastActiveTime ? '最近活动于 '+token.lastActiveTime : '没有最近活动'}}
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-active">
|
||||
<el-button type="danger" size="small" @click="deleteToken(token.id)">删除令牌</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="empty-text">暂无令牌</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import settingApi from "@/api/setting-api";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogTitle: '新增令牌',
|
||||
accessTokenList: [],
|
||||
accessToken: undefined,
|
||||
form: {
|
||||
name: '',
|
||||
createTime: '',
|
||||
lastActiveTime: ''
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入令牌名称', trigger: 'blur'},
|
||||
]
|
||||
},
|
||||
saveLoading: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getAccessTokenList()
|
||||
},
|
||||
methods: {
|
||||
getAccessTokenList(){
|
||||
settingApi.getAccessTokenList().then((res) => {
|
||||
this.accessTokenList = res.data
|
||||
})
|
||||
},
|
||||
newAccessToken(){
|
||||
this.dialogVisible = true
|
||||
},
|
||||
onSave() {
|
||||
this.$refs.managerForm.validate((valid) => {
|
||||
this.valid = valid
|
||||
if (valid) {
|
||||
this.saveLoading = true
|
||||
settingApi.generateAccessToken({tokenName: this.form.name}).then((res) => {
|
||||
this.accessToken = res.data
|
||||
this.saveLoading = false
|
||||
this.dialogVisible = false
|
||||
this.getAccessTokenList();
|
||||
}).catch(() => {
|
||||
this.saveLoading = false
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
deleteToken(id) {
|
||||
this.$confirm('您确定要删除此令牌吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
settingApi.deleteAccessToken({id: id}).then(()=>{
|
||||
this.getAccessTokenList()
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 1000
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "src/styles/setting";
|
||||
/deep/.el-divider--horizontal {
|
||||
margin: 0;
|
||||
}
|
||||
/deep/.el-alert {
|
||||
margin-bottom: 15px;
|
||||
.el-alert__content {
|
||||
padding: 5px 8px;
|
||||
}
|
||||
.el-alert__title{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
.token-title-desc {
|
||||
padding: 5px 0 20px 0;
|
||||
}
|
||||
.token-item {
|
||||
display: flex;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
.item-icon {
|
||||
font-size: 2.5rem;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.item-content {
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
.item-title {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.item-desc {
|
||||
color: #888;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.item-active {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
.empty-text {
|
||||
text-align: center;
|
||||
padding: 20px 0 10px 0;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user