Skip to content

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

角色页面转化crud

parent fe96effb
Hide whitespace changes
Inline Side-by-side
Showing with 274 additions and 293 deletions
src/config/env.js
View file @ 5f92671a
......@@ -2,7 +2,8 @@
const env = process.env
let baseUrl = '';
let iconfontVersion = ['667895_5lt01cjobo7']
// 图表库为avue和pig2套地址
let iconfontVersion = ['667895_5lt01cjobo7', '567566_qo5lxgtishg']
let iconfontUrl = `//at.alicdn.com/t/font_$key.css`;
let codeUrl = `/code`
let actUrl = `${window.origin}/act/modeler.html?modelId=`;
......@@ -20,4 +21,4 @@ export {
iconfontVersion,
codeUrl,
env
}
}
\ No newline at end of file
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 = {
solt: true,
search: true,
span: 24,
rules: [{
required: true,
message: "请输入账户",
trigger: "blur"
},
{
min: 3,
max: 20,
message: "长度在 3 到 20 个字符",
trigger: "blur"
}
]
}, {
label: '密码',
prop: 'password',
type: 'password',
hide: true,
span: 24,
rules: [{
required: true,
message: "请输入密码",
trigger: "blur"
},
{
min: 6,
max: 20,
message: "长度在 6 到 20 个字符",
trigger: "blur"
}
]
}, {
label: '所属部门',
prop: 'deptId',
search: true,
formsolt: true,
solt: true,
span: 24,
rules: [{
required: true,
message: "请选择部门",
trigger: "blur"
}]
}, {
label: '角色',
prop: 'role',
formsolt: true,
solt: true,
search: true,
span: 24,
rules: [{
required: true,
message: "请选择角色",
trigger: "blur"
}],
}, {
label: '状态',
prop: 'delFlag',
type: "select",
solt: true,
search: true,
span: 24,
rules: [{
required: true,
message: "请选择状态",
trigger: "blur"
}],
dicData: [{
label: '有效',
value: '0'
......@@ -79,6 +121,8 @@ export const tableOption = {
type: 'datetime',
format: 'yyyy-MM-dd HH:mm',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
search: true,
more: true,
editDisabled: true,
addVisdiplay: false,
span: 24,
......
src/views/admin/role/index.vue
View file @ 5f92671a
......@@ -18,161 +18,63 @@
<template>
<div class="app-container calendar-list-container">
<basic-container>
<div class="filter-container">
<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"
v-loading="listLoading"
element-loading-text="给我一点时间"
border
fit
highlight-current-row
style="width: 99%">
<el-table-column align="center"
label="序号">
<template slot-scope="scope">
<span>{{scope.row.roleId}}</span>
</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"
label="角色描述">
<template slot-scope="scope">
<span>{{scope.row.roleDesc }}</span>
</template>
</el-table-column>
<el-table-column align="center"
label="所属部门">
<template slot-scope="scope">
<span>{{scope.row.deptName }}</span>
</template>
</el-table-column>
<el-table-column align="center"
label="创建时间">
<template slot-scope="scope">
<span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
</template>
</el-table-column>
<el-table-column label="操作"
width="220">
<template slot-scope="scope">
<el-button size="mini"
type="success"
v-if="roleManager_btn_edit"
@click="handleUpdate(scope.row)">编辑
</el-button>
<el-button size="mini"
type="danger"
v-if="roleManager_btn_del"
@click="handleDelete(scope.row)">删除
</el-button>
<el-button size="mini"
type="info"
plain
@click="handlePermission(scope.row)"
v-if="roleManager_btn_perm">权限
</el-button>
</template>
</el-table-column>
<avue-crud :option="tableOption"
:data="list"
ref="crud"
:page="page"
v-model="form"
:table-loading="listLoading"
:before-open="handleOpenBefore"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
@search-change="handleFilter"
@refresh-change="handleRefreshChange"
@row-update="update"
@row-save="create">
</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>
<template slot="menuLeft">
<el-button v-if="roleManager_btn_add"
class="filter-item"
@click="handleCreate"
size="small"
type="primary"
icon="el-icon-edit">添加</el-button>
</template>
<template slot="roleDeptId"
slot-scope="scope">
<el-tag>{{scope.row.deptName}}</el-tag>
</template>
<template slot="roleDeptIdForm"
slot-scope="scope">
<avue-crud-input v-model="form.roleDeptId"
type="tree"
placeholder="请选择所属部门"
:node-click="getNodeData"
:dic="treeDeptData"
:props="defaultProps"></avue-crud-input>
</template>
<template slot="menu"
slot-scope="scope">
<el-button size="mini"
type="success"
v-if="roleManager_btn_edit"
@click="handleUpdate(scope.row,scope.index)">编辑
</el-button>
<el-button size="mini"
type="danger"
v-if="roleManager_btn_del"
@click="handleDelete(scope.row,scope.index)">删除
</el-button>
<el-button size="mini"
type="info"
plain
@click="handlePermission(scope.row,scope.index)"
v-if="roleManager_btn_perm">权限
</el-button>
</template>
</avue-crud>
</basic-container>
<el-dialog :title="textMap[dialogStatus]"
: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]"
<el-dialog title="分配权限"
:visible.sync="dialogPermissionVisible">
<el-tree class="filter-tree"
:data="treeData"
......@@ -208,88 +110,36 @@ import {
} from '@/api/role'
import { fetchTree } from '@/api/menu'
import { mapGetters } from 'vuex'
import { tableOption } from '@/const/crud/role'
export default {
name: 'table_role',
data () {
return {
tableOption: tableOption,
treeData: [],
treeDeptData: [],
checkedKeys: [],
defaultProps: {
children: 'children',
label: 'name'
label: "name",
value: 'id'
},
page: {
total: 0, // 总页数
currentPage: 1, // 当前页数
pageSize: 20 // 每页显示多少条
},
menuIds: '',
list: null,
total: null,
list: [],
listLoading: true,
listQuery: {
page: 1,
limit: 20
},
form: {
roleName: undefined,
roleCode: undefined,
roleDesc: undefined,
deptName: undefined,
roleDeptId: undefined
},
form: {},
roleId: 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,
dialogFormVisible: false,
dialogDeptVisible: false,
dialogPermissionVisible: false,
dialogStatus: '',
textMap: {
update: '编辑',
create: '创建',
permission: '分配权限'
},
tableKey: 0,
roleManager_btn_add: false,
roleManager_btn_edit: false,
roleManager_btn_del: false,
......@@ -311,10 +161,18 @@ export default {
this.listLoading = true
fetchList(this.listQuery).then(response => {
this.list = response.data.records
this.total = response.data.total
this.page.total = response.data.total
this.listLoading = false
})
},
handleRefreshChange () {
this.getList()
},
handleFilter (param) {
this.listQuery = Object.assign(this.listQuery, param)
this.listQuery.page = 1;
this.getList();
},
handleSizeChange (val) {
this.listQuery.limit = val
this.getList()
......@@ -324,18 +182,14 @@ export default {
this.getList()
},
handleCreate () {
this.resetTemp()
this.dialogStatus = 'create'
this.dialogFormVisible = true
this.$refs.crud.rowAdd();
},
handleUpdate (row) {
getObj(row.roleId).then(response => {
this.form = response.data
this.form.deptName = row.deptName
this.form.roleDeptId = row.roleDeptId
this.dialogFormVisible = true
this.dialogStatus = 'update'
})
handleOpenBefore (show, type) {
this.handleDept();
show();
},
handleUpdate (row, index) {
this.$refs.crud.rowEdit(row, index);
},
handlePermission (row) {
fetchRoleTree(row.roleId)
......@@ -375,22 +229,19 @@ export default {
handleDept () {
fetchDeptTree().then(response => {
this.treeDeptData = response.data
this.dialogDeptVisible = true
})
},
filterNode (value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
getNodeData (data) {
this.dialogDeptVisible = false
this.form.roleDeptId = data.id
getNodeData (data, done) {
this.form.deptName = data.name
done();
},
handleDelete (row) {
handleDelete (row, index) {
delObj(row.roleId).then(response => {
this.dialogFormVisible = false
this.getList()
this.list.splice(index, 1);
this.$notify({
title: '成功',
message: '删除成功',
......@@ -399,48 +250,33 @@ export default {
})
})
},
create (formName) {
const set = this.$refs
set[formName].validate(valid => {
if (valid) {
addObj(this.form).then(() => {
this.dialogFormVisible = false
this.getList()
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
})
})
} else {
return false
}
})
},
cancel (formName) {
this.dialogFormVisible = false
this.$refs[formName].resetFields()
create (row, done, loading) {
addObj(this.form).then(() => {
this.getList()
done();
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
})
}).catch(() => {
loading();
});
},
update (formName) {
const set = this.$refs
set[formName].validate(valid => {
if (valid) {
this.dialogFormVisible = false
putObj(this.form).then(() => {
this.dialogFormVisible = false
this.getList()
this.$notify({
title: '成功',
message: '修改成功',
type: 'success',
duration: 2000
})
})
} else {
return false
}
})
update (row, index, done, loading) {
putObj(this.form).then(() => {
this.getList()
done();
this.$notify({
title: '成功',
message: '修改成功',
type: 'success',
duration: 2000
})
}).catch(() => {
loading();
});
},
updatePermession (roleId, roleCode) {
this.menuIds = ''
......@@ -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 @@
<el-button v-if="sys_user_edit"
size="small"
type="success"
@click="handleUpdate(scope.row,scope.id)">编辑
@click="handleUpdate(scope.row,scope.index)">编辑
</el-button>
<el-button v-if="sys_user_del"
size="small"
type="danger"
@click="deletes(scope.row,scope.id)">删除
@click="deletes(scope.row,scope.index)">删除
</el-button>
</template>
<template slot="deptIdForm"
slot-scope="scope">
<avue-crud-input v-model="form.deptId"
type="tree"
placeholder="请选择所属部门"
:node-click="getNodeData"
:dic="treeDeptData"
:props="defaultProps"></avue-crud-input>
......@@ -87,6 +88,7 @@
slot-scope="scope">
<avue-crud-select v-model="role"
multiple
placeholder="请选择角色，要先选择部门"
:dic="rolesOptions"
:props="roleProps"></avue-crud-select>
</template>
......@@ -180,7 +182,7 @@ export default {
});
},
handleFilter (param) {
this.listQuery.username = param.username;
this.listQuery = Object.assign(this.listQuery, param)
this.listQuery.page = 1;
this.getList();
},
......@@ -228,10 +230,7 @@ export default {
});
}).catch(() => {
loading();
});;
},
cancel (formName) {
this.$refs[formName].resetFields();
});
},
update (row, index, done, loading) {
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