6 changed files with 501 additions and 143 deletions
-
17src/assets/styles/mixin.scss
-
58src/assets/styles/yxk-admin.scss
-
2src/views/system/dept/index.vue
-
338src/views/system/groupManage/index.vue
-
76src/views/system/menu/index.vue
-
69src/views/system/role/index.vue
@ -0,0 +1,338 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="container-main" style="justify-content: flex-start;"> |
||||
|
<!--侧边部门数据--> |
||||
|
<div class="elect-cont-right"> |
||||
|
<!--工具栏--> |
||||
|
<div class="head-container"> |
||||
|
<div v-if="crud.props.searchToggle" class="head-search"> |
||||
|
<!-- 搜索 --> |
||||
|
<el-input v-model="query.blurry" size="small" clearable placeholder="输入全宗名称搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
||||
|
<date-range-picker v-model="query.createTime" class="date-item" /> |
||||
|
<rrOperation /> |
||||
|
</div> |
||||
|
<crudOperation :permission="permission" /> |
||||
|
</div> |
||||
|
<div class="container-right"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<!-- 表单渲染 --> |
||||
|
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" class="group-form"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="90px"> |
||||
|
<el-row> |
||||
|
<el-form-item label="全宗号" prop="groupNumber"> |
||||
|
<el-input v-model="form.groupNumber" /> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-form-item label="全宗名称" prop="groupName" class="form-item-style"> |
||||
|
<el-input v-model="form.groupName" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="全宗简称" prop="groupShort"> |
||||
|
<el-input v-model="form.groupShort" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="排序" prop="sort" class="form-item-style"> |
||||
|
<el-input-number |
||||
|
v-model.number="form.sort" |
||||
|
:min="0" |
||||
|
:max="999" |
||||
|
controls-position="right" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="状态" prop="enabled"> |
||||
|
<el-radio label="启用" /> |
||||
|
<el-radio label="停用" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="description"> |
||||
|
<el-input v-model="form.description" style="width: 586px;" rows="5" type="textarea" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="crud.cancelCU">取消</el-button> |
||||
|
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" :data="crud.data" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange"> |
||||
|
<el-table-column :selectable="checkboxT" type="selection" align="center" width="55" /> |
||||
|
<el-table-column prop="groupNumber" label="全宗号" /> |
||||
|
<el-table-column prop="groupName" label="全宗名称" /> |
||||
|
<el-table-column prop="dept" label="部门" /> |
||||
|
<el-table-column prop="sort" label="排序" /> |
||||
|
<el-table-column label="状态" align="center" prop="enabled" width="60"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-switch v-model="scope.row.enabled" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建日期"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="elect-cont-left role-cont-left" style="margin: 0 0 0 20px;"> |
||||
|
<div class="container-left"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<div slot="header" class="tree-tab"> |
||||
|
<el-tooltip class="item" effect="dark" content="选择门类关联" placement="top"> |
||||
|
<span class="role-span role-tab-active">门类关联</span> |
||||
|
</el-tooltip> |
||||
|
<el-button |
||||
|
v-permission="['admin','roles:edit']" |
||||
|
:disabled="!showButton" |
||||
|
:loading="menuLoading" |
||||
|
size="mini" |
||||
|
@click="saveMenu" |
||||
|
>保存</el-button> |
||||
|
</div> |
||||
|
<el-tree |
||||
|
ref="menu" |
||||
|
lazy |
||||
|
:data="menus" |
||||
|
:default-checked-keys="menuIds" |
||||
|
:load="getMenuDatas" |
||||
|
:props="defaultProps" |
||||
|
check-strictly |
||||
|
accordion |
||||
|
show-checkbox |
||||
|
node-key="id" |
||||
|
@check="menuChange" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudRoles from '@/api/system/role' |
||||
|
import { getDepts, getDeptSuperior } from '@/api/system/dept' |
||||
|
import { getMenusTree, getChild } from '@/api/system/menu' |
||||
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import DateRangePicker from '@/components/DateRangePicker' |
||||
|
|
||||
|
const defaultForm = { groupNumber: null, groupName: null, groupShort: null, description: null, enabled: 'true', sort: '' } |
||||
|
export default { |
||||
|
name: 'Group', |
||||
|
components: { pagination, crudOperation, rrOperation, DateRangePicker }, |
||||
|
cruds() { |
||||
|
return CRUD({ title: '全宗', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
||||
|
data() { |
||||
|
return { |
||||
|
defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' }, |
||||
|
currentId: 0, menuLoading: false, showButton: false, |
||||
|
menus: [], menuIds: [], depts: [], deptDatas: [], // 多选时使用 |
||||
|
permission: { |
||||
|
add: ['admin', 'roles:add'], |
||||
|
edit: ['admin', 'roles:edit'], |
||||
|
del: ['admin', 'roles:del'] |
||||
|
}, |
||||
|
rules: { |
||||
|
groupNumber: [ |
||||
|
{ required: true, message: '请输入全宗号', trigger: 'blur' } |
||||
|
], |
||||
|
groupName: [ |
||||
|
{ required: true, message: '请输入全宗名称', trigger: 'blur' } |
||||
|
], |
||||
|
groupShort: [ |
||||
|
{ required: true, message: '请输入全宗简称', trigger: 'blur' } |
||||
|
], |
||||
|
sort: [ |
||||
|
{ required: true, message: '请输入排序', trigger: 'blur' } |
||||
|
], |
||||
|
enabled: [ |
||||
|
{ required: true, message: '请选择状态', trigger: 'change' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
crudRoles.getLevel().then(data => { |
||||
|
this.level = data.level |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
getMenuDatas(node, resolve) { |
||||
|
setTimeout(() => { |
||||
|
getMenusTree(node.data.id ? node.data.id : 0).then(res => { |
||||
|
resolve(res) |
||||
|
}) |
||||
|
}, 100) |
||||
|
}, |
||||
|
[CRUD.HOOK.afterRefresh]() { |
||||
|
this.$refs.menu.setCheckedKeys([]) |
||||
|
}, |
||||
|
// 新增前初始化部门信息 |
||||
|
[CRUD.HOOK.beforeToAdd](crud, form) { |
||||
|
this.deptDatas = [] |
||||
|
form.menus = null |
||||
|
}, |
||||
|
// 编辑前初始化自定义数据权限的部门信息 |
||||
|
[CRUD.HOOK.beforeToEdit](crud, form) { |
||||
|
this.deptDatas = [] |
||||
|
if (form.dataScope === '自定义') { |
||||
|
this.getSupDepts(form.depts) |
||||
|
} |
||||
|
const _this = this |
||||
|
form.depts.forEach(function(dept) { |
||||
|
_this.deptDatas.push(dept.id) |
||||
|
}) |
||||
|
// 将角色的菜单清空，避免日志入库数据过长 |
||||
|
form.menus = null |
||||
|
}, |
||||
|
// 提交前做的操作 |
||||
|
[CRUD.HOOK.afterValidateCU](crud) { |
||||
|
if (crud.form.dataScope === '自定义' && this.deptDatas.length === 0) { |
||||
|
this.$message({ |
||||
|
message: '自定义数据权限不能为空', |
||||
|
type: 'warning' |
||||
|
}) |
||||
|
return false |
||||
|
} else if (crud.form.dataScope === '自定义') { |
||||
|
const depts = [] |
||||
|
this.deptDatas.forEach(function(data) { |
||||
|
const dept = { id: data } |
||||
|
depts.push(dept) |
||||
|
}) |
||||
|
crud.form.depts = depts |
||||
|
} else { |
||||
|
crud.form.depts = [] |
||||
|
} |
||||
|
return true |
||||
|
}, |
||||
|
// 触发单选 |
||||
|
handleCurrentChange(val) { |
||||
|
if (val) { |
||||
|
const _this = this |
||||
|
// 清空菜单的选中 |
||||
|
this.$refs.menu.setCheckedKeys([]) |
||||
|
// 保存当前的角色id |
||||
|
this.currentId = val.id |
||||
|
// 初始化默认选中的key |
||||
|
this.menuIds = [] |
||||
|
val.menus.forEach(function(data) { |
||||
|
_this.menuIds.push(data.id) |
||||
|
}) |
||||
|
this.showButton = true |
||||
|
} |
||||
|
}, |
||||
|
menuChange(menu) { |
||||
|
// 获取该节点的所有子节点，id 包含自身 |
||||
|
getChild(menu.id).then(childIds => { |
||||
|
// 判断是否在 menuIds 中，如果存在则删除，否则添加 |
||||
|
if (this.menuIds.indexOf(menu.id) !== -1) { |
||||
|
for (let i = 0; i < childIds.length; i++) { |
||||
|
const index = this.menuIds.indexOf(childIds[i]) |
||||
|
if (index !== -1) { |
||||
|
this.menuIds.splice(index, 1) |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
for (let i = 0; i < childIds.length; i++) { |
||||
|
const index = this.menuIds.indexOf(childIds[i]) |
||||
|
if (index === -1) { |
||||
|
this.menuIds.push(childIds[i]) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.$refs.menu.setCheckedKeys(this.menuIds) |
||||
|
}) |
||||
|
}, |
||||
|
// 保存菜单 |
||||
|
saveMenu() { |
||||
|
this.menuLoading = true |
||||
|
const role = { id: this.currentId, menus: [] } |
||||
|
// 得到已选中的 key 值 |
||||
|
this.menuIds.forEach(function(id) { |
||||
|
const menu = { id: id } |
||||
|
role.menus.push(menu) |
||||
|
}) |
||||
|
crudRoles.editMenu(role).then(() => { |
||||
|
this.crud.notify('保存成功', CRUD.NOTIFICATION_TYPE.SUCCESS) |
||||
|
this.menuLoading = false |
||||
|
this.update() |
||||
|
}).catch(err => { |
||||
|
this.menuLoading = false |
||||
|
console.log(err.response.data.message) |
||||
|
}) |
||||
|
}, |
||||
|
// 改变数据 |
||||
|
update() { |
||||
|
// 无刷新更新 表格数据 |
||||
|
crudRoles.get(this.currentId).then(res => { |
||||
|
for (let i = 0; i < this.crud.data.length; i++) { |
||||
|
if (res.id === this.crud.data[i].id) { |
||||
|
this.crud.data[i] = res |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取部门数据 |
||||
|
getDepts() { |
||||
|
getDepts({ enabled: true }).then(res => { |
||||
|
this.depts = res.content.map(function(obj) { |
||||
|
if (obj.hasChildren) { |
||||
|
obj.children = null |
||||
|
} |
||||
|
return obj |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
getSupDepts(depts) { |
||||
|
const ids = [] |
||||
|
depts.forEach(dept => { |
||||
|
ids.push(dept.id) |
||||
|
}) |
||||
|
getDeptSuperior(ids).then(res => { |
||||
|
const date = res.content |
||||
|
this.buildDepts(date) |
||||
|
this.depts = date |
||||
|
}) |
||||
|
}, |
||||
|
buildDepts(depts) { |
||||
|
depts.forEach(data => { |
||||
|
if (data.children) { |
||||
|
this.buildDepts(data.children) |
||||
|
} |
||||
|
if (data.hasChildren && !data.children) { |
||||
|
data.children = null |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
checkboxT(row) { |
||||
|
return row.level >= this.level |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.group-form{ |
||||
|
.el-form-item{ |
||||
|
&:nth-child(odd){ |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
&.form-item-style{ |
||||
|
margin-right: 40px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tree-tab span.role-span.role-tab-active{ |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue