Skip to content

G
Guten-PigxUI
Commit 5f92671a authored by smallwei's avatar smallwei
Browse files
Options

角色页面转化crud

parent fe96effb
Show whitespace changes
Inline Side-by-side
Showing with 274 additions and 293 deletions
src/config/env.js
View file @ 5f92671a
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
const env = process.env const env = process.env
let baseUrl = ''; let baseUrl = '';
let iconfontVersion = ['667895_5lt01cjobo7'] // 图表库为avue和pig2套地址
let iconfontVersion = ['667895_5lt01cjobo7', '567566_qo5lxgtishg']
let iconfontUrl = `//at.alicdn.com/t/font_$key.css`; let iconfontUrl = `//at.alicdn.com/t/font_$key.css`;
let codeUrl = `/code` let codeUrl = `/code`
let actUrl = `${window.origin}/act/modeler.html?modelId=`; let actUrl = `${window.origin}/act/modeler.html?modelId=`;
......
src/const/crud/role.js 0 → 100644
View file @ 5f92671a
/*
* Copyright (c) 2018-2025, lengleng All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice,
* this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
* Neither the name of the pig4cloud.com developer nor the names of its
* contributors may be used to endorse or promote products derived from
* this software without specific prior written permission.
* Author: lengleng (wangiegie@gmail.com)
*/
export const tableOption = {
border: true,
index: true,
indexLabel: '序号',
stripe: true,
menuAlign: 'center',
editBtn: false,
delBtn: false,
align: 'center',
addBtn: false,
column: [{
fixed: true,
label: 'id',
prop: 'roleId',
span: 24,
editDisabled: true,
addVisdiplay: false,
}, {
fixed: true,
label: '角色名称',
prop: 'roleName',
search: true,
span: 24,
rules: [{
required: true,
message: '角色名称不能为空',
trigger: 'blur'
},
{
min: 3,
max: 20,
message: '长度在 3 到 20 个字符',
trigger: 'blur'
}
]
}, {
label: '角色标识',
prop: 'roleCode',
search: true,
span: 24,
rules: [{
required: true,
message: '角色标识不能为空',
trigger: 'blur'
},
{
min: 3,
max: 20,
message: '长度在 3 到 20 个字符',
trigger: 'blur'
}
]
}, {
label: '所属部门',
prop: 'roleDeptId',
formsolt: true,
search: true,
solt: true,
span: 24,
rules: [{
required: true,
message: '所属部门不能为空',
trigger: 'blur'
},
{
min: 3,
max: 20,
message: '长度在 3 到 20 个字符',
trigger: 'blur'
}
]
}, {
width: 180,
label: '角色描述',
prop: 'roleDesc',
overHidden: true,
type: 'textarea',
minRows: 6,
span: 24,
}, {
width: 180,
label: '创建时间',
prop: 'createTime',
search: true,
more: true,
type: 'datetime',
format: 'yyyy-MM-dd HH:mm',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
editDisabled: true,
addVisdiplay: false,
span: 24,
}]
}
\ No newline at end of file
src/const/crud/user.js
View file @ 5f92671a
...@@ -38,30 +38,72 @@ export const tableOption = { ...@@ -38,30 +38,72 @@ export const tableOption = {
solt: true, solt: true,
search: true, search: true,
span: 24, span: 24,
rules: [{
required: true,
message: "请输入账户",
trigger: "blur"
},
{
min: 3,
max: 20,
message: "长度在 3 到 20 个字符",
trigger: "blur"
}
]
}, { }, {
label: '密码', label: '密码',
prop: 'password', prop: 'password',
type: 'password', type: 'password',
hide: true, hide: true,
span: 24, span: 24,
rules: [{
required: true,
message: "请输入密码",
trigger: "blur"
},
{
min: 6,
max: 20,
message: "长度在 6 到 20 个字符",
trigger: "blur"
}
]
}, { }, {
label: '所属部门', label: '所属部门',
prop: 'deptId', prop: 'deptId',
search: true,
formsolt: true, formsolt: true,
solt: true, solt: true,
span: 24, span: 24,
rules: [{
required: true,
message: "请选择部门",
trigger: "blur"
}]
}, { }, {
label: '角色', label: '角色',
prop: 'role', prop: 'role',
formsolt: true, formsolt: true,
solt: true, solt: true,
search: true,
span: 24, span: 24,
rules: [{
required: true,
message: "请选择角色",
trigger: "blur"
}],
}, { }, {
label: '状态', label: '状态',
prop: 'delFlag', prop: 'delFlag',
type: "select", type: "select",
solt: true, solt: true,
search: true,
span: 24, span: 24,
rules: [{
required: true,
message: "请选择状态",
trigger: "blur"
}],
dicData: [{ dicData: [{
label: '有效', label: '有效',
value: '0' value: '0'
...@@ -79,6 +121,8 @@ export const tableOption = { ...@@ -79,6 +121,8 @@ export const tableOption = {
type: 'datetime', type: 'datetime',
format: 'yyyy-MM-dd HH:mm', format: 'yyyy-MM-dd HH:mm',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
search: true,
more: true,
editDisabled: true, editDisabled: true,
addVisdiplay: false, addVisdiplay: false,
span: 24, span: 24,
......
src/views/admin/role/index.vue
View file @ 5f92671a
...@@ -18,161 +18,63 @@ ...@@ -18,161 +18,63 @@
<template> <template>
<div class="app-container calendar-list-container"> <div class="app-container calendar-list-container">
<basic-container> <basic-container>
<div class="filter-container"> <avue-crud :option="tableOption"
<el-button class="filter-item"
style="margin-left: 10px;"
@click="handleCreate"
type="primary"
icon="edit"
v-if="roleManager_btn_add">添加
</el-button>
</div>
<el-table :key='tableKey'
:data="list" :data="list"
v-loading="listLoading" ref="crud"
element-loading-text="给我一点时间" :page="page"
border v-model="form"
fit :table-loading="listLoading"
highlight-current-row :before-open="handleOpenBefore"
style="width: 99%"> @current-change="handleCurrentChange"
@size-change="handleSizeChange"
<el-table-column align="center" @search-change="handleFilter"
label="序号"> @refresh-change="handleRefreshChange"
<template slot-scope="scope"> @row-update="update"
<span>{{scope.row.roleId}}</span> @row-save="create">
</template>
</el-table-column>
<el-table-column label="角色名称">
<template slot-scope="scope">
<span>{{scope.row.roleName}}</span>
</template>
</el-table-column>
<el-table-column align="center"
label="角色标识">
<template slot-scope="scope">
<span>{{scope.row.roleCode}}</span>
</template>
</el-table-column>
<el-table-column align="center" <template slot="menuLeft">
label="角色描述"> <el-button v-if="roleManager_btn_add"
<template slot-scope="scope"> class="filter-item"
<span>{{scope.row.roleDesc }}</span> @click="handleCreate"
size="small"
type="primary"
icon="el-icon-edit">添加</el-button>
</template> </template>
</el-table-column> <template slot="roleDeptId"
slot-scope="scope">
<el-table-column align="center" <el-tag>{{scope.row.deptName}}</el-tag>
label="所属部门">
<template slot-scope="scope">
<span>{{scope.row.deptName }}</span>
</template> </template>
</el-table-column> <template slot="roleDeptIdForm"
slot-scope="scope">
<el-table-column align="center" <avue-crud-input v-model="form.roleDeptId"
label="创建时间"> type="tree"
<template slot-scope="scope"> placeholder="请选择所属部门"
<span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span> :node-click="getNodeData"
:dic="treeDeptData"
:props="defaultProps"></avue-crud-input>
</template> </template>
</el-table-column> <template slot="menu"
slot-scope="scope">
<el-table-column label="操作"
width="220">
<template slot-scope="scope">
<el-button size="mini" <el-button size="mini"
type="success" type="success"
v-if="roleManager_btn_edit" v-if="roleManager_btn_edit"
@click="handleUpdate(scope.row)">编辑 @click="handleUpdate(scope.row,scope.index)">编辑
</el-button> </el-button>
<el-button size="mini" <el-button size="mini"
type="danger" type="danger"
v-if="roleManager_btn_del" v-if="roleManager_btn_del"
@click="handleDelete(scope.row)">删除 @click="handleDelete(scope.row,scope.index)">删除
</el-button> </el-button>
<el-button size="mini" <el-button size="mini"
type="info" type="info"
plain plain
@click="handlePermission(scope.row)" @click="handlePermission(scope.row,scope.index)"
v-if="roleManager_btn_perm">权限 v-if="roleManager_btn_perm">权限
</el-button> </el-button>
</template> </template>
</el-table-column> </avue-crud>
</el-table>
<div v-show="!listLoading"
class="pagination-container">
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
:page-sizes="[10,20,30, 50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</basic-container> </basic-container>
<el-dialog :title="textMap[dialogStatus]" <el-dialog title="分配权限"
:visible.sync="dialogFormVisible">
<el-form :model="form"
:rules="rules"
ref="form"
label-width="100px">
<el-form-item label="角色名称"
prop="roleName">
<el-input v-model="form.roleName"
placeholder="角色名称"></el-input>
</el-form-item>
<el-form-item label="角色标识"
prop="roleCode">
<el-input v-model="form.roleCode"
placeholder="角色标识"></el-input>
</el-form-item>
<el-form-item label="描述"
prop="roleDesc">
<el-input v-model="form.roleDesc"
placeholder="描述"></el-input>
</el-form-item>
<el-form-item label="所属部门"
prop="roleDept">
<el-input v-model="form.deptName"
placeholder="选择部门"
@focus="handleDept()"
readonly></el-input>
<el-input type="hidden"
v-model="form.roleDeptId"></el-input>
</el-form-item>
</el-form>
<div slot="footer"
class="dialog-footer">
<el-button @click="cancel('form')">取 消</el-button>
<el-button v-if="dialogStatus=='create'"
type="primary"
@click="create('form')">确 定</el-button>
<el-button v-else
type="primary"
@click="update('form')">修 改</el-button>
</div>
</el-dialog>
<el-dialog :title="textMap[dialogStatus]"
:visible.sync="dialogDeptVisible">
<el-tree class="filter-tree"
:data="treeDeptData"
:default-checked-keys="checkedKeys"
node-key="id"
highlight-current
ref="deptTree"
@node-click="getNodeData"
:props="defaultProps"
:filter-node-method="filterNode"
default-expand-all>
</el-tree>
</el-dialog>
<el-dialog :title="textMap[dialogStatus]"
:visible.sync="dialogPermissionVisible"> :visible.sync="dialogPermissionVisible">
<el-tree class="filter-tree" <el-tree class="filter-tree"
:data="treeData" :data="treeData"
...@@ -208,88 +110,36 @@ import { ...@@ -208,88 +110,36 @@ import {
} from '@/api/role' } from '@/api/role'
import { fetchTree } from '@/api/menu' import { fetchTree } from '@/api/menu'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { tableOption } from '@/const/crud/role'
export default { export default {
name: 'table_role', name: 'table_role',
data () { data () {
return { return {
tableOption: tableOption,
treeData: [], treeData: [],
treeDeptData: [], treeDeptData: [],
checkedKeys: [], checkedKeys: [],
defaultProps: { defaultProps: {
children: 'children', label: "name",
label: 'name' value: 'id'
},
page: {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 20 // 每页显示多少条
}, },
menuIds: '', menuIds: '',
list: null, list: [],
total: null,
listLoading: true, listLoading: true,
listQuery: { listQuery: {
page: 1, page: 1,
limit: 20 limit: 20
}, },
form: { form: {},
roleName: undefined,
roleCode: undefined,
roleDesc: undefined,
deptName: undefined,
roleDeptId: undefined
},
roleId: undefined, roleId: undefined,
roleCode: undefined, roleCode: undefined,
rules: {
roleName: [
{
required: true,
message: '角色名称',
trigger: 'blur'
},
{
min: 3,
max: 20,
message: '长度在 3 到 20 个字符',
trigger: 'blur'
}
],
roleCode: [
{
required: true,
message: '角色标识',
trigger: 'blur'
},
{
min: 3,
max: 20,
message: '长度在 3 到 20 个字符',
trigger: 'blur'
}
],
roleDesc: [
{
required: true,
message: '角色标识',
trigger: 'blur'
},
{
min: 3,
max: 20,
message: '长度在 3 到 20 个字符',
trigger: 'blur'
}
]
},
statusOptions: ['0', '1'],
rolesOptions: undefined, rolesOptions: undefined,
dialogFormVisible: false,
dialogDeptVisible: false,
dialogPermissionVisible: false, dialogPermissionVisible: false,
dialogStatus: '',
textMap: {
update: '编辑',
create: '创建',
permission: '分配权限'
},
tableKey: 0,
roleManager_btn_add: false, roleManager_btn_add: false,
roleManager_btn_edit: false, roleManager_btn_edit: false,
roleManager_btn_del: false, roleManager_btn_del: false,
...@@ -311,10 +161,18 @@ export default { ...@@ -311,10 +161,18 @@ export default {
this.listLoading = true this.listLoading = true
fetchList(this.listQuery).then(response => { fetchList(this.listQuery).then(response => {
this.list = response.data.records this.list = response.data.records
this.total = response.data.total this.page.total = response.data.total
this.listLoading = false this.listLoading = false
}) })
}, },
handleRefreshChange () {
this.getList()
},
handleFilter (param) {
this.listQuery = Object.assign(this.listQuery, param)
this.listQuery.page = 1;
this.getList();
},
handleSizeChange (val) { handleSizeChange (val) {
this.listQuery.limit = val this.listQuery.limit = val
this.getList() this.getList()
...@@ -324,18 +182,14 @@ export default { ...@@ -324,18 +182,14 @@ export default {
this.getList() this.getList()
}, },
handleCreate () { handleCreate () {
this.resetTemp() this.$refs.crud.rowAdd();
this.dialogStatus = 'create'
this.dialogFormVisible = true
}, },
handleUpdate (row) { handleOpenBefore (show, type) {
getObj(row.roleId).then(response => { this.handleDept();
this.form = response.data show();
this.form.deptName = row.deptName },
this.form.roleDeptId = row.roleDeptId handleUpdate (row, index) {
this.dialogFormVisible = true this.$refs.crud.rowEdit(row, index);
this.dialogStatus = 'update'
})
}, },
handlePermission (row) { handlePermission (row) {
fetchRoleTree(row.roleId) fetchRoleTree(row.roleId)
...@@ -375,22 +229,19 @@ export default { ...@@ -375,22 +229,19 @@ export default {
handleDept () { handleDept () {
fetchDeptTree().then(response => { fetchDeptTree().then(response => {
this.treeDeptData = response.data this.treeDeptData = response.data
this.dialogDeptVisible = true
}) })
}, },
filterNode (value, data) { filterNode (value, data) {
if (!value) return true if (!value) return true
return data.label.indexOf(value) !== -1 return data.label.indexOf(value) !== -1
}, },
getNodeData (data) { getNodeData (data, done) {
this.dialogDeptVisible = false
this.form.roleDeptId = data.id
this.form.deptName = data.name this.form.deptName = data.name
done();
}, },
handleDelete (row) { handleDelete (row, index) {
delObj(row.roleId).then(response => { delObj(row.roleId).then(response => {
this.dialogFormVisible = false this.list.splice(index, 1);
this.getList()
this.$notify({ this.$notify({
title: '成功', title: '成功',
message: '删除成功', message: '删除成功',
...@@ -399,48 +250,33 @@ export default { ...@@ -399,48 +250,33 @@ export default {
}) })
}) })
}, },
create (formName) { create (row, done, loading) {
const set = this.$refs
set[formName].validate(valid => {
if (valid) {
addObj(this.form).then(() => { addObj(this.form).then(() => {
this.dialogFormVisible = false
this.getList() this.getList()
done();
this.$notify({ this.$notify({
title: '成功', title: '成功',
message: '创建成功', message: '创建成功',
type: 'success', type: 'success',
duration: 2000 duration: 2000
}) })
}) }).catch(() => {
} else { loading();
return false });
}
})
}, },
cancel (formName) { update (row, index, done, loading) {
this.dialogFormVisible = false
this.$refs[formName].resetFields()
},
update (formName) {
const set = this.$refs
set[formName].validate(valid => {
if (valid) {
this.dialogFormVisible = false
putObj(this.form).then(() => { putObj(this.form).then(() => {
this.dialogFormVisible = false
this.getList() this.getList()
done();
this.$notify({ this.$notify({
title: '成功', title: '成功',
message: '修改成功', message: '修改成功',
type: 'success', type: 'success',
duration: 2000 duration: 2000
}) })
}) }).catch(() => {
} else { loading();
return false });
}
})
}, },
updatePermession (roleId, roleCode) { updatePermession (roleId, roleCode) {
this.menuIds = '' this.menuIds = ''
...@@ -462,14 +298,6 @@ export default { ...@@ -462,14 +298,6 @@ export default {
}) })
}) })
}) })
},
resetTemp () {
this.form = {
id: undefined,
roleName: undefined,
roleCode: undefined,
roleDesc: undefined
}
} }
} }
} }
......
src/views/admin/user/index.vue
View file @ 5f92671a
...@@ -67,18 +67,19 @@ ...@@ -67,18 +67,19 @@
<el-button v-if="sys_user_edit" <el-button v-if="sys_user_edit"
size="small" size="small"
type="success" type="success"
@click="handleUpdate(scope.row,scope.id)">编辑 @click="handleUpdate(scope.row,scope.index)">编辑
</el-button> </el-button>
<el-button v-if="sys_user_del" <el-button v-if="sys_user_del"
size="small" size="small"
type="danger" type="danger"
@click="deletes(scope.row,scope.id)">删除 @click="deletes(scope.row,scope.index)">删除
</el-button> </el-button>
</template> </template>
<template slot="deptIdForm" <template slot="deptIdForm"
slot-scope="scope"> slot-scope="scope">
<avue-crud-input v-model="form.deptId" <avue-crud-input v-model="form.deptId"
type="tree" type="tree"
placeholder="请选择所属部门"
:node-click="getNodeData" :node-click="getNodeData"
:dic="treeDeptData" :dic="treeDeptData"
:props="defaultProps"></avue-crud-input> :props="defaultProps"></avue-crud-input>
...@@ -87,6 +88,7 @@ ...@@ -87,6 +88,7 @@
slot-scope="scope"> slot-scope="scope">
<avue-crud-select v-model="role" <avue-crud-select v-model="role"
multiple multiple
placeholder="请选择角色，要先选择部门"
:dic="rolesOptions" :dic="rolesOptions"
:props="roleProps"></avue-crud-select> :props="roleProps"></avue-crud-select>
</template> </template>
...@@ -180,7 +182,7 @@ export default { ...@@ -180,7 +182,7 @@ export default {
}); });
}, },
handleFilter (param) { handleFilter (param) {
this.listQuery.username = param.username; this.listQuery = Object.assign(this.listQuery, param)
this.listQuery.page = 1; this.listQuery.page = 1;
this.getList(); this.getList();
}, },
...@@ -228,10 +230,7 @@ export default { ...@@ -228,10 +230,7 @@ export default {
}); });
}).catch(() => { }).catch(() => {
loading(); loading();
});; });
},
cancel (formName) {
this.$refs[formName].resetFields();
}, },
update (row, index, done, loading) { update (row, index, done, loading) {
putObj(this.form).then(() => { putObj(this.form).then(() => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment