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