<!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>