zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

重构了用户权限体系

This commit is contained in:
sakuya 2022-05-16 23:36:50 +08:00
parent 93ebbc6333
commit 4f92f024b4
13 changed files with 403 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/model/system.js
View File

@ -43,13 +43,22 @@ export default {
},
role: {
list: {
url: `${config.API_URL}/system/role/list`,
url: `${config.API_URL}/system/role/list2`,
name: "获取角色列表",
get: async function(params){
return await http.get(this.url, params);
}
}
},
dept: {
list: {
url: `${config.API_URL}/system/dept/list`,
name: "获取部门列表",
get: async function(params){
return await http.get(this.url, params);
}
}
},
user: {
list: {
url: `${config.API_URL}/system/user/list`,

3
src/assets/icons/Organization.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<svg t="1652704649206" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="51974" width="200" height="200"><path d="M640 128a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666666a42.666667 42.666667 0 0 1-42.666667 42.666667h-85.333333v85.333333h170.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v128h85.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666666a42.666667 42.666667 0 0 1-42.666667 42.666667h-256a42.666667 42.666667 0 0 1-42.666666-42.666667v-170.666666a42.666667 42.666667 0 0 1 42.666666-42.666667h85.333334v-85.333333H341.333333v85.333333h85.333334a42.666667 42.666667 0 0 1 42.666666 42.666667v170.666666a42.666667 42.666667 0 0 1-42.666666 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667v-170.666666a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333v-128a42.666667 42.666667 0 0 1 42.666667-42.666667h170.666666V384H384a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h256zM384 725.333333H213.333333v85.333334h170.666667v-85.333334z m426.666667 0h-170.666667v85.333334h170.666667v-85.333334zM597.333333 213.333333h-170.666666v85.333334h170.666666V213.333333z" p-id="51975"></path></svg>
</template>

3
src/assets/icons/index.js
View File

@ -5,4 +5,5 @@ export { default as BugFill } from './BugFill.vue'
export { default as BugLine } from './BugLine.vue'
export { default as FileWord } from './FileWord.vue'
export { default as FileExcel } from './FileExcel.vue'
export { default as FilePpt } from './FilePpt.vue'
export { default as FilePpt } from './FilePpt.vue'
export { default as Organization } from './Organization.vue'

7
src/components/scTable/index.vue
View File

@ -9,7 +9,7 @@
<template>
<div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading">
<div class="scTable-table">
<div class="scTable-table" :style="{'height':_table_height}">
<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
<slot></slot>
<template v-for="(item, index) in userColumn" :key="index">
@ -27,7 +27,7 @@
</template>
</el-table>
</div>
<div class="scTable-page" v-if="!hidePagination&&!hideDo">
<div class="scTable-page" v-if="!hidePagination || !hideDo">
<div class="scTable-pagination">
<el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
</div>
@ -108,6 +108,9 @@
computed: {
_height() {
return Number(this.height)?Number(this.height)+'px':this.height
},
_table_height() {
return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)"
}
},
data() {

3
src/config/iconSelect.js
View File

@ -295,7 +295,8 @@ export default {
'sc-icon-bug-line',
'sc-icon-file-word',
'sc-icon-file-excel',
'sc-icon-file-ppt'
'sc-icon-file-ppt',
'sc-icon-organization'
]
}
]

1
src/style/fix.scss
View File

@ -40,6 +40,7 @@
.el-main > .scTable .el-table--border .el-table__inner-wrapper tr:first-child td:first-child {border-left: 0;}
.el-main > .scTable .el-table--border .el-table__inner-wrapper tr:first-child th:first-child {border-left: 0;}
.el-table.el-table--large {font-size: 14px;}
.el-table.el-table--small {font-size: 12px;}
.el-table {font-size: 12px;}
.aminui-side-split li.active {background-color: var(--el-color-primary);}

153
src/views/setting/dept/index.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<el-container>
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
</div>
<div class="right-panel">
<div class="right-panel-search">
<el-input v-model="search.keyword" placeholder="部门名称" clearable></el-input>
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
</div>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="部门名称" prop="label" width="250"></el-table-column>
<el-table-column label="排序" prop="sort" width="150"></el-table-column>
<el-table-column label="状态" prop="status" width="150">
<template #default="scope">
<el-tag v-if="scope.row.status==1" type="success">启用</el-tag>
<el-tag v-if="scope.row.status==0" type="danger">停用</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="date" width="180"></el-table-column>
<el-table-column label="备注" prop="remark" min-width="300"></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="170">
<template #default="scope">
<el-button-group>
<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
<template #reference>
<el-button text type="primary" size="small">删除</el-button>
</template>
</el-popconfirm>
</el-button-group>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
import saveDialog from './save'
export default {
name: 'dept',
components: {
saveDialog
},
data() {
return {
dialog: {
save: false
},
apiObj: this.$API.system.dept.list,
selection: [],
search: {
keyword: null
}
}
},
methods: {
//添加
add(){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open()
})
},
//编辑
table_edit(row){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('edit').setData(row)
})
},
//查看
table_show(row){
this.dialog.save = true
this.$nextTick(() => {
this.$refs.saveDialog.open('show').setData(row)
})
},
//删除
async table_del(row){
var reqData = {id: row.id}
var res = await this.$API.demo.post.post(reqData);
if(res.code == 200){
this.$refs.table.refresh()
this.$message.success("删除成功")
}else{
this.$alert(res.message, "提示", {type: 'error'})
}
},
//批量删除
async batch_del(){
this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
type: 'warning'
}).then(() => {
const loading = this.$loading();
this.$refs.table.refresh()
loading.close();
this.$message.success("操作成功")
}).catch(() => {
})
},
//表格选择后回调事件
selectionChange(selection){
this.selection = selection;
},
//搜索
upsearch(){
},
//根据ID获取树结构
filterTree(id){
var target = null;
function filter(tree){
tree.forEach(item => {
if(item.id == id){
target = item
}
if(item.children){
filter(item.children)
}
})
}
filter(this.$refs.table.tableData)
return target
},
//本地更新数据
handleSaveSuccess(data, mode){
if(mode=='add'){
this.$refs.table.refresh()
}else if(mode=='edit'){
this.$refs.table.refresh()
}
}
}
}
</script>
<style>
</style>

116
src/views/setting/dept/save.vue Normal file
View File

@ -0,0 +1,116 @@
<template>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px">
<el-form-item label="上级部门" prop="parentId">
<el-cascader v-model="form.parentId" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
</el-form-item>
<el-form-item label="部门名称" prop="label">
<el-input v-model="form.label" placeholder="请输入部门名称" clearable></el-input>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
</el-form-item>
<el-form-item label="是否有效" prop="status">
<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" clearable type="textarea"></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="visible=false" >取 消</el-button>
<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
</template>
</el-dialog>
</template>
<script>
export default {
emits: ['success', 'closed'],
data() {
return {
mode: "add",
titleMap: {
add: '新增',
edit: '编辑',
show: '查看'
},
visible: false,
isSaveing: false,
//表单数据
form: {
id:"",
parentId: "",
label: "",
sort: 1,
status: "1",
remark: ""
},
//验证规则
rules: {
sort: [
{required: true, message: '请输入排序', trigger: 'change'}
],
label: [
{required: true, message: '请输入部门名称'}
]
},
//所需数据选项
groups: [],
groupsProps: {
value: "id",
emitPath: false,
checkStrictly: true
}
}
},
mounted() {
this.getGroup()
},
methods: {
//显示
open(mode='add'){
this.mode = mode;
this.visible = true;
return this
},
//加载树数据
async getGroup(){
var res = await this.$API.system.dept.list.get();
this.groups = res.data;
},
//表单提交方法
submit(){
this.$refs.dialogForm.validate(async (valid) => {
if (valid) {
this.isSaveing = true;
var res = await this.$API.demo.post.post(this.form);
this.isSaveing = false;
if(res.code == 200){
this.$emit('success', this.form, this.mode)
this.visible = false;
this.$message.success("操作成功")
}else{
this.$alert(res.message, "提示", {type: 'error'})
}
}
})
},
//表单注入数据
setData(data){
this.form.id = data.id
this.form.label = data.label
this.form.status = data.status
this.form.sort = data.sort
this.form.parentId = data.parentId
this.form.remark = data.remark
//可以和上面一样单个注入，也可以像下面一样直接合并进去
//Object.assign(this.form, data)
}
}
}
</script>
<style>
</style>

25
src/views/setting/role/index.vue
View File

@ -14,12 +14,19 @@
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column label="角色名称" prop="label" width="250"></el-table-column>
<el-table-column label="别名" prop="alias" width="150"></el-table-column>
<el-table-column label="排序" prop="sort" width="150"></el-table-column>
<el-table-column label="角色名称" prop="label" width="150"></el-table-column>
<el-table-column label="别名" prop="alias" width="200"></el-table-column>
<el-table-column label="排序" prop="sort" width="80"></el-table-column>
<el-table-column label="状态" prop="status" width="80">
<template #default="scope">
<el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" active-value="1" inactive-value="0"></el-switch>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="date" width="180"></el-table-column>
<el-table-column label="备注" prop="remark" min-width="150"></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="170">
<template #default="scope">
<el-button-group>
@ -124,6 +131,16 @@
selectionChange(selection){
this.selection = selection;
},
//表格内开关
changeSwitch(val, row){
row.status = row.status == '1'?'0':'1'
row.$switch_status = true;
setTimeout(()=>{
delete row.$switch_status;
row.status = val;
this.$message.success("操作成功")
}, 500)
},
//搜索
upsearch(){

97
src/views/setting/role/permission.vue
View File

@ -3,18 +3,30 @@
<el-tabs tab-position="top">
<el-tab-pane label="菜单权限">
<div class="treeMain">
<el-tree ref="menu" node-key="name" :data="menu.list" :default-checked-keys="menu.checked" :props="menu.props" show-checkbox></el-tree>
<el-tree ref="menu" node-key="name" :data="menu.list" :props="menu.props" show-checkbox></el-tree>
</div>
</el-tab-pane>
<el-tab-pane label="部门权限">
<div class="treeMain">
<el-tree ref="group" node-key="name" :data="group.list" :default-checked-keys="group.checked" :props="group.props" show-checkbox></el-tree>
</div>
</el-tab-pane>
<el-tab-pane label="类型权限">
<div class="treeMain">
<el-tree ref="type" node-key="name" :data="type.list" :default-checked-keys="type.checked" :props="type.props" show-checkbox></el-tree>
</div>
<el-tab-pane label="数据权限">
<el-form label-width="100px" label-position="left">
<el-form-item label="规则类型">
<el-select v-model="data.dataType" placeholder="请选择">
<el-option label="全部可见" value="1"></el-option>
<el-option label="本人可见" value="2"></el-option>
<el-option label="所在部门可见" value="3"></el-option>
<el-option label="所在部门及子级可见" value="4"></el-option>
<el-option label="选择的部门可见" value="5"></el-option>
<el-option label="自定义" value="6"></el-option>
</el-select>
</el-form-item>
<el-form-item label="选择部门" v-show="data.dataType=='5'">
<div class="treeMain" style="width: 100%;">
<el-tree ref="dept" node-key="id" :data="data.list" :props="data.props" show-checkbox></el-tree>
</div>
</el-form-item>
<el-form-item label="规则值" v-show="data.dataType=='6'">
<el-input v-model="data.rule" clearable type="textarea" :rows="6" placeholder="请输入自定义规则代码"></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="控制台">
<el-form label-width="100px" label-position="left">
@ -46,22 +58,19 @@
isSaveing: false,
menu: {
list: [],
checked: ["test", "system", "user", "role"],
checked: [],
props: {
label: (data)=>{
return data.meta.title
}
}
},
group: {
data: {
dataType :"1",
list: [],
checked: [],
props: {}
},
type: {
list: [],
checked: [],
props: {}
props: {},
rule: ""
},
dashboard: "0",
dashboardOptions: [
@ -80,9 +89,8 @@
}
},
mounted() {
this.getMenu();
this.getGroup();
this.getType();
this.getMenu()
this.getDept()
},
methods: {
open(){
@ -90,6 +98,14 @@
},
submit(){
this.isSaveing = true;
//选中的和半选的合并后传值接口
var checkedKeys = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
console.log(checkedKeys)
var checkedKeys_dept = this.$refs.dept.getCheckedKeys().concat(this.$refs.dept.getHalfCheckedKeys())
console.log(checkedKeys_dept)
setTimeout(()=>{
this.isSaveing = false;
this.visible = false;
@ -98,29 +114,24 @@
},1000)
},
async getMenu(){
var res = await this.$API.system.menu.list.get();
this.menu.list = res.data;
var res = await this.$API.system.menu.list.get()
this.menu.list = res.data
//获取接口返回的之前选中的和半选的合并，处理过滤掉有叶子节点的key
this.menu.checked = ["system", "user", "user.add", "user.edit", "user.del", "directive.edit", "other", "directive"]
this.$nextTick(() => {
let filterKeys = this.menu.checked.filter(key => this.$refs.menu.getNode(key).isLeaf)
this.$refs.menu.setCheckedKeys(filterKeys, true)
})
},
getGroup(){
this.group.list = [
{label: 'JL00'},
{label: 'LP01'},
{label: 'LP07'},
{label: 'SL01'},
{label: 'TL06'},
{label: 'TL09'},
{label: 'YP07'}
];
},
getType(){
this.type.list = [
{label: '原料采购'},
{label: '厂内互供'},
{label: '炼销订单'},
{label: '化工统销订单'},
{label: '移库单'},
{label: '自销订单'},
];
async getDept(){
var res = await this.$API.system.dept.list.get();
this.data.list = res.data
this.data.checked = ["12", "2", "21", "22", "1"]
this.$nextTick(() => {
let filterKeys = this.data.checked.filter(key => this.$refs.dept.getNode(key).isLeaf)
this.$refs.dept.setCheckedKeys(filterKeys, true)
})
}
}
}

29
src/views/setting/role/save.vue
View File

@ -1,9 +1,6 @@
<template>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
<el-form-item label="上级角色" prop="parentId">
<el-cascader v-model="form.parentId" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
</el-form-item>
<el-form-item label="角色名称" prop="label">
<el-input v-model="form.label" clearable></el-input>
</el-form-item>
@ -13,6 +10,12 @@
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
</el-form-item>
<el-form-item label="是否有效" prop="status">
<el-switch v-model="form.status" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" clearable type="textarea"></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="visible=false" >取 消</el-button>
@ -40,7 +43,8 @@
label: "",
alias: "",
sort: 1,
parentId: ""
status: 1,
remark: ""
},
//验证规则
rules: {
@ -53,18 +57,11 @@
alias: [
{required: true, message: '请输入角色别名'}
]
},
//所需数据选项
groups: [],
groupsProps: {
value: "id",
emitPath: false,
checkStrictly: true
}
}
},
mounted() {
this.getGroup()
},
methods: {
//显示
@ -73,11 +70,6 @@
this.visible = true;
return this
},
//加载树数据
async getGroup(){
var res = await this.$API.system.role.list.get();
this.groups = res.data;
},
//表单提交方法
submit(){
this.$refs.dialogForm.validate(async (valid) => {
@ -101,7 +93,8 @@
this.form.label = data.label
this.form.alias = data.alias
this.form.sort = data.sort
this.form.parentId = data.parentId
this.form.status = data.status
this.form.remark = data.remark
//可以和上面一样单个注入，也可以像下面一样直接合并进去
//Object.assign(this.form, data)

2
src/views/setting/user/index.vue
View File

@ -152,7 +152,7 @@
//加载树数据
async getGroup(){
this.showGrouploading = true;
var res = await this.$API.system.role.list.get();
var res = await this.$API.system.dept.list.get();
this.showGrouploading = false;
var allNode ={id: '', label: '所有'}
res.data.unshift(allNode);

28
src/views/setting/user/save.vue
View File

@ -18,8 +18,13 @@
<el-input type="password" v-model="form.password2" clearable show-password></el-input>
</el-form-item>
</template>
<el-form-item label="所属部门" prop="dept">
<el-cascader v-model="form.dept" :options="depts" :props="deptsProps" clearable style="width: 100%;"></el-cascader>
</el-form-item>
<el-form-item label="所属角色" prop="group">
<el-cascader v-model="form.group" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
<el-select v-model="form.group" multiple filterable style="width: 100%">
<el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
@ -48,7 +53,8 @@
userName: "",
avatar: "",
name: "",
group: ""
dept: "",
group: []
},
//验证规则
rules: {
@ -80,8 +86,11 @@
}
}}
],
dept: [
{required: true, message: '请选择所属部门'}
],
group: [
{required: true, message: '请选择所属角色'}
{required: true, message: '请选择所属角色', trigger: 'change'}
]
},
//所需数据选项
@ -90,11 +99,17 @@
value: "id",
multiple: true,
checkStrictly: true
},
depts: [],
deptsProps: {
value: "id",
checkStrictly: true
}
}
},
mounted() {
this.getGroup()
this.getDept()
},
methods: {
//显示
@ -106,7 +121,11 @@
//加载树数据
async getGroup(){
var res = await this.$API.system.role.list.get();
this.groups = res.data;
this.groups = res.data.rows;
},
async getDept(){
var res = await this.$API.system.dept.list.get();
this.depts = res.data;
},
//表单提交方法
submit(){
@ -134,6 +153,7 @@
this.form.avatar = data.avatar
this.form.name = data.name
this.form.group = data.group
this.form.dept = data.dept
//可以和上面一样单个注入，也可以像下面一样直接合并进去
//Object.assign(this.form, data)