2 changed files with 204 additions and 0 deletions
@ -0,0 +1,27 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
// 编辑oauth2.0授权
|
||||
|
export function add(data) { |
||||
|
return request({ |
||||
|
url: 'api/oauthClient/editOauthClient', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function del(data) { |
||||
|
return request({ |
||||
|
url: 'api/oauthClient/delOauthClient', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function edit(data) { |
||||
|
return request({ |
||||
|
url: 'api/oauthClient/editOauthClient', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
export default { add, edit, del } |
||||
@ -0,0 +1,177 @@ |
|||||
|
<template> |
||||
|
<div class="app-container row-container"> |
||||
|
<div class="head-container"> |
||||
|
<div class="head-search"> |
||||
|
<el-input v-model="query.search" clearable size="small" placeholder="输入名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @clear="crud.toQuery" @keyup.enter.native="crud.toQuery" /> |
||||
|
<rrOperation> |
||||
|
<template v-slot:right> |
||||
|
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button> |
||||
|
</template> |
||||
|
</rrOperation> |
||||
|
</div> |
||||
|
<crudOperation> |
||||
|
<template v-slot:middle> |
||||
|
<el-button slot="reference" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</crudOperation> |
||||
|
</div> |
||||
|
<!--表格渲染--> |
||||
|
<div class="container-wrap"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
v-loading="crud.loading" |
||||
|
:data="crud.data" |
||||
|
height="calc(100vh - 380px)" |
||||
|
style="width: 100%;" |
||||
|
@selection-change="crud.selectionChangeHandler" |
||||
|
> |
||||
|
<el-table-column type="selection" align="center" width="55" /> |
||||
|
<el-table-column prop="name" label="名称" /> |
||||
|
<el-table-column prop="tokenDuration" label="Token时长"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div v-if="scope.row.tokenDuration===1">1小时</div> |
||||
|
<div v-if="scope.row.tokenDuration===2">12小时</div> |
||||
|
<div v-if="scope.row.tokenDuration===3">1天</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="appKey" label="AppKey" /> |
||||
|
<el-table-column prop="appSecret" label="AppSecret" /> |
||||
|
<el-table-column prop="remarks" label="备注" /> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination v-if="crud.data.length !== 0" /> |
||||
|
</div> |
||||
|
|
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" :rules="rules" :model="form" size="small" label-width="100px"> |
||||
|
<el-form-item v-if="crud.status.edit===1" label="AppKey" prop="appKey"> |
||||
|
<el-input v-model="form.appKey" style="width: 580px;" readonly /> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="crud.status.edit===1" label="AppSecret" prop="appSecret"> |
||||
|
<el-input v-model="form.appSecret" placeholder="请输入" style="width: 580px;" readonly /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="名称" prop="name"> |
||||
|
<el-input v-model="form.name" placeholder="请输入" style="width: 580px;" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="Token时长" prop="tokenDuration"> |
||||
|
<el-select v-model="form.tokenDuration" placeholder="请选择" style="width: 580px;"> |
||||
|
<el-option v-for="item in timeOptions" :key="item.id" :label="item.name" :value="item.id" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="remarks"> |
||||
|
<el-input v-model="form.remarks" placeholder="请输入" style="width: 580px;" type="textarea" :rows="3" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudAuth from '@/api/system/auth2' |
||||
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
|
||||
|
const defaultForm = { appKey: null, appSecret: null, name: null, tokenDuration: null, remarks: null } |
||||
|
|
||||
|
export default { |
||||
|
name: 'AuthorizeManage', |
||||
|
components: { crudOperation, pagination, rrOperation }, |
||||
|
cruds() { |
||||
|
return CRUD({ |
||||
|
title: '授权管理', |
||||
|
url: 'api/oauthClient/initOauthClient', |
||||
|
idField: 'appKey', |
||||
|
crudMethod: { ...crudAuth }, |
||||
|
sort: [], |
||||
|
optShow: { |
||||
|
add: true, |
||||
|
edit: true, |
||||
|
del: false, |
||||
|
download: false, |
||||
|
group: false, |
||||
|
reset: false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
||||
|
data() { |
||||
|
return { |
||||
|
timeOptions: [{ id: 1, name: '1小时' }, { id: 2, name: '12小时' }, { id: 3, name: '1天' }], |
||||
|
rules: { |
||||
|
name: [ |
||||
|
{ required: true, message: '名称不可为空', trigger: 'blur' } |
||||
|
], |
||||
|
tokenDuration: [ |
||||
|
{ required: true, message: '请选择', trigger: 'change' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
}, |
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
resetQuery() { |
||||
|
this.crud.query.search = null |
||||
|
this.crud.toQuery() |
||||
|
}, |
||||
|
[CRUD.HOOK.afterValidateCU](crud) { |
||||
|
console.log('crud.form', crud.form) |
||||
|
return true |
||||
|
}, |
||||
|
toDelete(datas) { |
||||
|
this.$confirm('此操作将删除当前所选数据' + '<span>你是否还要继续？</span>', '提示', { |
||||
|
confirmButtonText: '继续', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
this.crud.delAllLoading = true |
||||
|
const ids = [] |
||||
|
datas.forEach(val => { |
||||
|
ids.push(val.appKey) |
||||
|
}) |
||||
|
crudAuth.del(ids).then((res) => { |
||||
|
console.log(res) |
||||
|
if (res.code !== 500) { |
||||
|
this.$message({ message: '删除成功', type: 'success', offset: 8 }) |
||||
|
} else { |
||||
|
this.$message({ message: res.message, type: 'error', offset: 8 }) |
||||
|
} |
||||
|
this.crud.delAllLoading = false |
||||
|
this.crud.refresh() |
||||
|
}).catch(err => { |
||||
|
console.log(err) |
||||
|
this.crud.delAllLoading = false |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/mixin.scss"; |
||||
|
@import "~@/assets/styles/variables.scss"; |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue