448 lines
20 KiB
HTML
448 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<!-- import CSS -->
|
||
<link rel="stylesheet" href="import/element-ui@2.15.14_lib_theme-chalk_index.css">
|
||
<script src="import/axios.min.js"></script>
|
||
<script src="import/jsencrypt.min.js"></script>
|
||
<style>
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
<el-container>
|
||
<el-header></el-header>
|
||
<el-container>
|
||
<el-aside width="400px">
|
||
<div>
|
||
<el-button type="primary" plain @click="dialogFormVisible1 = true">添加接口</el-button>
|
||
</div>
|
||
<div style="margin-top: 10px;">
|
||
<span>roleId:</span>
|
||
<el-select v-model="roleId" placeholder="请选择" @change="roleChange">
|
||
<el-option v-for="item in roleIdOptions" :key="item.value" :label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div style="margin-top: 10px;">
|
||
<span>baseUrl:</span>
|
||
<el-select v-model="baseUrlValue" placeholder="请选择" @change="baseUrlChange">
|
||
<el-option v-for="item in baseUrlOptions" :key="item.value" :label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div style="margin-top: 10px;">
|
||
<el-form ref="form" :model="form" label-width="80px">
|
||
<el-form-item label="账号">
|
||
<el-input v-model="loginForm.userName" style="width: 200px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="密码">
|
||
<el-input v-model="loginForm.passWord" style="width: 200px;"></el-input>
|
||
</el-form-item>
|
||
<el-button type="primary" @click="login">登录</el-button>
|
||
</el-form>
|
||
</div>
|
||
|
||
</el-aside>
|
||
<el-main>
|
||
<el-autocomplete :fetch-suggestions="querySearch" placeholder="请输入内容" v-model="searchValue"
|
||
clearable class="input-with-select">
|
||
<el-button slot="append" icon="el-icon-search" @click="selectSearch"></el-button>
|
||
</el-autocomplete>
|
||
|
||
<template>
|
||
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
|
||
style="width: 100%">
|
||
<el-table-column label="url" width="180">
|
||
<template slot-scope="scope">
|
||
<span style="margin-left: 10px">{{ scope.row.url }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="描述" width="180">
|
||
<template slot-scope="scope">
|
||
<span style="margin-left: 10px">
|
||
{{ scope.row.description }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="权限信息" align="center">
|
||
<template slot-scope="scope">
|
||
<span style="margin-left: 10px" v-for='role in scope.row.roleIds'>
|
||
<el-tag v-if="role === -1">超级管理员</el-tag>
|
||
<el-tag v-else-if="role === 0">校级管理员</el-tag>
|
||
<el-tag v-else-if="role === 1">教师</el-tag>
|
||
<el-tag v-else-if="role === 3">学生</el-tag>
|
||
<el-tag v-else>暂未设置</el-tag>
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||
<el-button size="mini" type="danger"
|
||
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="block">
|
||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||
:current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next"
|
||
:total="totalSize">
|
||
</el-pagination>
|
||
</div>
|
||
</template>
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
|
||
<el-dialog title="编辑接口权限" :visible.sync="dialogFormVisible2" :before-close="cancel">
|
||
<el-form ref="form" :model="form" label-width="80px">
|
||
<el-form ref="form" :model="form" label-width="80px">
|
||
<el-form-item label="url">
|
||
<el-input v-model="form.url"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="描述">
|
||
<el-input v-model="form.description"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="可访问角色">
|
||
<el-checkbox-group v-model="form.roleIds">
|
||
<el-checkbox :label="-1" name="type">超级管理员</el-checkbox>
|
||
<el-checkbox :label="0" name="type">校级管理员</el-checkbox>
|
||
<el-checkbox :label="1" name="type">教师</el-checkbox>
|
||
<el-checkbox :label="3" name="type">学生</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="submitEdit">保存</el-button>
|
||
<el-button @click="cancel">取消</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
|
||
|
||
<el-dialog title="添加接口权限" :visible.sync="dialogFormVisible1" :before-close="cancel">
|
||
<el-form ref="form" :model="form" label-width="80px">
|
||
<el-form ref="form" :model="form" label-width="80px">
|
||
<el-form-item label="url">
|
||
<el-input v-model="form.url"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="描述">
|
||
<el-input v-model="form.description"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="可访问角色">
|
||
<el-checkbox-group v-model="form.roleIds">
|
||
<el-checkbox :label="-1" name="type">超级管理员</el-checkbox>
|
||
<el-checkbox :label="0" name="type">校级管理员</el-checkbox>
|
||
<el-checkbox :label="1" name="type">教师</el-checkbox>
|
||
<el-checkbox :label="3" name="type">学生</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="submitInsert">添加</el-button>
|
||
<el-button @click="cancel">取消</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
</div>
|
||
</body>
|
||
<!-- import Vue before Element -->
|
||
<script src="import/vue@2.7.14_dist_vue.js"></script>
|
||
<!-- import JavaScript -->
|
||
<script src="import/element-ui@2.15.14_lib_index.js"></script>
|
||
<script>
|
||
let _this = null;
|
||
new Vue({
|
||
el: "#app",
|
||
data() {
|
||
return {
|
||
currentPage: 1, // 当前页码
|
||
totalSize: 20, // 总条数
|
||
pageSize: 10, // 每页的数据条数
|
||
loginForm: {
|
||
userName: '',
|
||
passWord: ''
|
||
},
|
||
form: {
|
||
url: '',
|
||
description: '',
|
||
roleIds: [],
|
||
},
|
||
tableData: [],
|
||
roleIdOptions: [{
|
||
value: null,
|
||
label: 'ALL'
|
||
}, {
|
||
value: '-1',
|
||
label: '超级管理员'
|
||
}, {
|
||
value: '0',
|
||
label: '校级管理员'
|
||
}, {
|
||
value: '1',
|
||
label: '教师'
|
||
}, {
|
||
value: '3',
|
||
label: '学生'
|
||
}],
|
||
baseUrlOptions: [{
|
||
value: 0,
|
||
baseUrl: 'https://anyview.gdut.edu.cn/api/user-service',
|
||
label: 'anyview.gdut.edu.cn'
|
||
}, {
|
||
value: 1,
|
||
baseUrl: 'https://dsvision.net/api/user-service',
|
||
label: 'dsvision.net'
|
||
}, {
|
||
value: 2,
|
||
baseUrl: 'https://res.dsvision.net/api/user-service',
|
||
label: 'res.dsvision.net'
|
||
}, {
|
||
value: 3,
|
||
baseUrl: 'http://localhost:9001/',
|
||
label: 'localhost'
|
||
}],
|
||
roleId: null,
|
||
baseUrlValue: 2,
|
||
dialogFormVisible2: false,
|
||
dialogFormVisible1: false,
|
||
searchValue: '',
|
||
allToken: [null, null, null, null],
|
||
token: null
|
||
}
|
||
},
|
||
created() {
|
||
_this = this
|
||
},
|
||
mounted() {
|
||
_this.baseUrlChange(3)
|
||
},
|
||
methods: {
|
||
roleChange: function (val) {
|
||
_this.selectSearch()
|
||
console.log(val)
|
||
},
|
||
baseUrlChange: function (val) {
|
||
delete axios.defaults.headers.common['token']
|
||
_this.baseUrlValue = val
|
||
axios.defaults.baseURL = _this.baseUrlOptions[val].baseUrl
|
||
if (_this.allToken[val] != null) {
|
||
axios.defaults.headers.common['token'] = _this.allToken[val]
|
||
}
|
||
_this.selectSearch()
|
||
console.log(val)
|
||
},
|
||
handleEdit(index, row) {
|
||
console.log(_this.form);
|
||
_this.dialogFormVisible2 = true
|
||
_this.form['accessId'] = row.accessId
|
||
_this.form.url = row.url
|
||
_this.form.description = row.description
|
||
_this.form.roleIds = [...row.roleIds]
|
||
//强制更新数组-视图
|
||
_this.form.roleIds.splice()
|
||
},
|
||
submitEdit() {
|
||
axios.post('/access/update', _this.form)
|
||
.then(function (response) {
|
||
_this.$notify({
|
||
title: '成功',
|
||
message: '编辑成功',
|
||
type: 'success'
|
||
});
|
||
_this.selectSearch()
|
||
}).catch(error => {
|
||
_this.$notify.error({
|
||
title: '错误',
|
||
message: '编辑失败'
|
||
});
|
||
console.log(error);
|
||
})
|
||
_this.cancel()
|
||
console.log(_this.form);
|
||
},
|
||
handleDelete(index, row) {
|
||
_this.$confirm('此操作将删除该url以及角色权限, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
console.log(row.accessId)
|
||
axios.get('/access/deleteAccess', { params: { accessId: row.accessId } })
|
||
.then(function (response) {
|
||
_this.$notify({
|
||
title: '成功',
|
||
message: '删除成功',
|
||
type: 'success'
|
||
});
|
||
_this.selectSearch()
|
||
}).catch(error => {
|
||
_this.$notify.error({
|
||
title: '错误',
|
||
message: '删除失败'
|
||
});
|
||
console.log(error);
|
||
})
|
||
}).catch(() => {
|
||
_this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
});
|
||
});
|
||
console.log(index, row);
|
||
},
|
||
submitInsert() {
|
||
console.log(_this.form);
|
||
axios.post('/access/addAccessToRoles', _this.form)
|
||
.then(function (response) {
|
||
_this.$notify({
|
||
title: '成功',
|
||
message: '添加成功',
|
||
type: 'success'
|
||
});
|
||
_this.selectSearch()
|
||
}).catch(error => {
|
||
_this.$notify.error({
|
||
title: '错误',
|
||
message: '添加失败'
|
||
});
|
||
console.log(error);
|
||
})
|
||
_this.cancel()
|
||
},
|
||
cancel() {
|
||
_this.dialogFormVisible1 = false
|
||
_this.dialogFormVisible2 = false
|
||
_this.form = _this.$options.data().form
|
||
},
|
||
handleSizeChange(val) {
|
||
_this.currentPage = 1;
|
||
_this.pageSize = val;
|
||
console.log(`每页 ${val} 条`);
|
||
},
|
||
handleCurrentChange(val) {
|
||
console.log(`当前页: ${val}`);
|
||
_this.currentPage = val;
|
||
},
|
||
|
||
//搜索
|
||
selectSearch() {
|
||
if (typeof axios.defaults.headers.common['token'] == "undefined") {
|
||
_this.tableData = []
|
||
return
|
||
}
|
||
const params = new URLSearchParams
|
||
if (_this.searchValue != null && _this.searchValue != '') params.append("url", _this.searchValue)
|
||
if (_this.roleId != null) params.append("roleId", _this.roleId)
|
||
axios.get('/access/list', {
|
||
params: params
|
||
}).then(function (response) {
|
||
_this.tableData = response.data.data
|
||
_this.totalSize = response.data.data.length
|
||
//强制更新数组-视图
|
||
_this.tableData.splice()
|
||
})
|
||
},
|
||
//搜索联想
|
||
querySearch(queryString, cb) {
|
||
let programs = _this.tableData;
|
||
let programList = [];
|
||
//从数据中拿出要联想的字段，并给它的名改成指定的{value：值}的格式才能正常显示
|
||
for (let i = 0; i < _this.tableData.length; i++) {
|
||
programList.push({ 'value': programs[i].url })
|
||
}
|
||
let results = queryString ? programList.filter(_this.createStateFilter(queryString)) : programList;
|
||
cb(results);//最后给到显示
|
||
},
|
||
//联想内容根据输入的搜索内容过滤
|
||
createStateFilter(queryString) {
|
||
return (program) => {
|
||
return (program.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
|
||
};
|
||
},
|
||
passwordEncryption(userPassword) {
|
||
// RSA加密
|
||
const publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCjmeQkUc/sljVd1ea2Z+PiFqab5zclbXWlE3ytvYx5ULPkeeMTmD0MiUZoU1MmulGoI0c8ogoSVV17qjbH8OFk8wr+BMhPa0XYrNKObqvxR1PtzabbVxBFp7Q8lULp14MeSOSFifdrj+zmiATHKBw2E1g3uDvZE9NzSOa9iFEv1QIDAQAB'; // 从后台获取公钥
|
||
const encryptor = new JSEncrypt(); // 新建JSEncrypt对象
|
||
encryptor.setPublicKey(publicKey); // 设置公钥
|
||
const passwordEncryp = encryptor.encrypt(userPassword); // 对密码进行加密
|
||
return passwordEncryp;
|
||
},
|
||
login() {
|
||
axios({
|
||
method: 'post',
|
||
url: '/login',
|
||
data: {
|
||
roleId: -1,
|
||
username: _this.loginForm.userName,
|
||
password: _this.loginForm.passWord,
|
||
debug: 1
|
||
},
|
||
transformRequest: [
|
||
function (data) {
|
||
// 将请求数据转换成功 formdata 接收格式
|
||
return _this.stringify(data)
|
||
}
|
||
],
|
||
headers: {
|
||
'Content-Type': 'multipart/form-data'
|
||
}
|
||
}).then(function (response) {
|
||
console.log(response);
|
||
_this.allToken[_this.baseUrlValue] = response.data.data.token
|
||
axios.defaults.headers.common['token'] = _this.allToken[_this.baseUrlValue]
|
||
_this.selectSearch()
|
||
}).catch(error => {
|
||
_this.$notify.error({
|
||
title: '错误',
|
||
message: '登录失败'
|
||
});
|
||
console.log(error);
|
||
})
|
||
},
|
||
stringify(data) {
|
||
const formData = new FormData()
|
||
for (const key in data) {
|
||
// eslint-disable-next-line no-prototype-builtins
|
||
if (data.hasOwnProperty(key)) {
|
||
if (data[key]) {
|
||
if (data[key].constructor === Array) {
|
||
if (data[key][0]) {
|
||
if (data[key][0].constructor === Object) {
|
||
formData.append(key, JSON.stringify(data[key]))
|
||
} else {
|
||
data[key].forEach((item, index) => {
|
||
formData.append(key + `[${index}]`, item)
|
||
})
|
||
}
|
||
} else {
|
||
formData.append(key + '[]', '')
|
||
}
|
||
} else if (data[key].constructor === Object) {
|
||
formData.append(key, JSON.stringify(data[key]))
|
||
} else {
|
||
formData.append(key, data[key])
|
||
}
|
||
} else {
|
||
if (data[key] === 0) {
|
||
formData.append(key, 0)
|
||
} else {
|
||
formData.append(key, '')
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return formData
|
||
},
|
||
log() {
|
||
console.log(this.tableData)
|
||
}
|
||
},
|
||
});
|
||
</script>
|
||
|
||
</html> |