first commit
This commit is contained in:
commit
0858315c55
2
import/axios.min.js
vendored
Normal file
2
import/axios.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
import/element-icons.woff
Normal file
BIN
import/element-icons.woff
Normal file
Binary file not shown.
1
import/element-ui@2.15.14_lib_index.js
Normal file
1
import/element-ui@2.15.14_lib_index.js
Normal file
File diff suppressed because one or more lines are too long
1
import/element-ui@2.15.14_lib_theme-chalk_index.css
Normal file
1
import/element-ui@2.15.14_lib_theme-chalk_index.css
Normal file
File diff suppressed because one or more lines are too long
2
import/jsencrypt.min.js
vendored
Normal file
2
import/jsencrypt.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
11909
import/vue@2.7.14_dist_vue.js
Normal file
11909
import/vue@2.7.14_dist_vue.js
Normal file
File diff suppressed because it is too large
Load Diff
448
index.html
Normal file
448
index.html
Normal file
@ -0,0 +1,448 @@
|
||||
<!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>
|
||||
Loading…
Reference in New Issue
Block a user