13 changed files with 1000 additions and 889 deletions
-
15.env.development
-
230package.json
-
32src/views/archivesManage/archivesList/index.vue
-
2src/views/archivesManage/archivesList/mixins/archives.js
-
106src/views/archivesManage/fileImport/dataImport/index.vue
-
23src/views/archivesManage/fileImport/importLog/index.vue
-
92src/views/archivesManage/fileImport/module/detail.vue
-
22src/views/archivesManage/outInStorage/inStorage/index.vue
-
1src/views/archivesManage/outInStorage/outInHistory/index.vue
-
2src/views/system/logManage/loginLog/index.vue
-
530src/views/system/menu/index.vue
-
762src/views/system/role/index.vue
-
72src/views/system/user/index.vue
@ -1,115 +1,115 @@ |
|||
{ |
|||
"name": "yxk-storeroom-system", |
|||
"version": "1.0.0", |
|||
"description": "智能库房综合管理系统", |
|||
"author": "刘力", |
|||
"license": "", |
|||
"scripts": { |
|||
"dev": "vue-cli-service serve", |
|||
"build:prod": "vue-cli-service build", |
|||
"build:stage": "vue-cli-service build --mode staging", |
|||
"preview": "node build/index.js --preview", |
|||
"lint": "eslint --ext .js,.vue src", |
|||
"test:unit": "jest --clearCache && vue-cli-service test:unit", |
|||
"svgo": "svgo -f src/assets/icons/svg --config=src/assets/icons/svgo.yml", |
|||
"new": "plop" |
|||
}, |
|||
"husky": { |
|||
"hooks": { |
|||
"pre-commit": "lint-staged" |
|||
} |
|||
}, |
|||
"lint-staged": { |
|||
"src/**/*.{js,vue}": [ |
|||
"eslint --fix", |
|||
"git add" |
|||
] |
|||
}, |
|||
"dependencies": { |
|||
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", |
|||
"@babel/plugin-proposal-optional-chaining": "^7.18.9", |
|||
"@riophae/vue-treeselect": "^0.4.0", |
|||
"axios": "^0.21.1", |
|||
"clipboard": "2.0.4", |
|||
"codemirror": "^5.49.2", |
|||
"connect": "3.6.6", |
|||
"core-js": "^2.6.12", |
|||
"echarts": "^4.2.1", |
|||
"echarts-gl": "^1.1.1", |
|||
"echarts-wordcloud": "^1.1.3", |
|||
"element-ui": "^2.15.6", |
|||
"file-saver": "1.3.8", |
|||
"fuse.js": "3.4.4", |
|||
"highlight.js": "^11.5.1", |
|||
"html2canvas": "^1.4.1", |
|||
"js-beautify": "^1.10.2", |
|||
"js-cookie": "2.2.0", |
|||
"jsencrypt": "^3.0.0-rc.1", |
|||
"jszip": "^3.7.1", |
|||
"mavon-editor": "^2.9.1", |
|||
"normalize.css": "7.0.0", |
|||
"nprogress": "0.2.0", |
|||
"path-to-regexp": "2.4.0", |
|||
"print-js": "^1.6.0", |
|||
"qs": "^6.10.1", |
|||
"screenfull": "4.2.0", |
|||
"sortablejs": "1.8.4", |
|||
"vkbeautify": "^0.99.3", |
|||
"vue": "^2.6.14", |
|||
"vue-count-to": "^1.0.13", |
|||
"vue-cropper": "0.4.9", |
|||
"vue-echarts": "^5.0.0-beta.0", |
|||
"vue-highlightjs": "^1.3.3", |
|||
"vue-image-crop-upload": "^2.5.0", |
|||
"vue-router": "3.0.2", |
|||
"vue-splitpane": "1.0.4", |
|||
"vuedraggable": "2.20.0", |
|||
"vuex": "3.1.0", |
|||
"wangeditor": "^4.7.11", |
|||
"x2js": "^3.4.3", |
|||
"xlsx": "^0.17.4" |
|||
}, |
|||
"devDependencies": { |
|||
"@babel/parser": "^7.7.4", |
|||
"@babel/register": "7.0.0", |
|||
"@vue/babel-plugin-transform-vue-jsx": "^1.2.1", |
|||
"@vue/cli-plugin-babel": "3.5.3", |
|||
"@vue/cli-plugin-eslint": "^3.9.1", |
|||
"@vue/cli-plugin-unit-jest": "3.5.3", |
|||
"@vue/cli-service": "3.5.3", |
|||
"@vue/test-utils": "1.0.0-beta.29", |
|||
"autoprefixer": "^9.5.1", |
|||
"babel-core": "7.0.0-bridge.0", |
|||
"babel-eslint": "10.0.1", |
|||
"babel-jest": "23.6.0", |
|||
"babel-plugin-dynamic-import-node": "2.3.0", |
|||
"babel-plugin-transform-remove-console": "^6.9.4", |
|||
"chalk": "2.4.2", |
|||
"chokidar": "2.1.5", |
|||
"connect": "3.6.6", |
|||
"eslint": "5.15.3", |
|||
"eslint-plugin-vue": "5.2.2", |
|||
"html-webpack-plugin": "3.2.0", |
|||
"http-proxy-middleware": "^0.19.1", |
|||
"husky": "1.3.1", |
|||
"lint-staged": "8.1.5", |
|||
"plop": "2.3.0", |
|||
"sass": "1.32.13", |
|||
"sass-loader": "10.2.0", |
|||
"script-ext-html-webpack-plugin": "2.1.3", |
|||
"script-loader": "0.7.2", |
|||
"serve-static": "^1.13.2", |
|||
"svg-sprite-loader": "4.1.3", |
|||
"svgo": "1.2.0", |
|||
"tasksfile": "^5.1.1", |
|||
"vue-template-compiler": "2.6.14" |
|||
}, |
|||
"engines": { |
|||
"node": ">=8.9", |
|||
"npm": ">= 3.0.0" |
|||
}, |
|||
"browserslist": [ |
|||
"> 1%", |
|||
"last 2 versions" |
|||
] |
|||
} |
|||
{ |
|||
"name": "yxk-storeroom-system", |
|||
"version": "1.0.0", |
|||
"description": "智能库房综合管理系统", |
|||
"author": "刘力", |
|||
"license": "", |
|||
"scripts": { |
|||
"dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve", |
|||
"build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build", |
|||
"build:stage": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode staging", |
|||
"preview": "node build/index.js --preview", |
|||
"lint": "eslint --ext .js,.vue src", |
|||
"test:unit": "jest --clearCache && vue-cli-service test:unit", |
|||
"svgo": "svgo -f src/assets/icons/svg --config=src/assets/icons/svgo.yml", |
|||
"new": "plop" |
|||
}, |
|||
"husky": { |
|||
"hooks": { |
|||
"pre-commit": "lint-staged" |
|||
} |
|||
}, |
|||
"lint-staged": { |
|||
"src/**/*.{js,vue}": [ |
|||
"eslint --fix", |
|||
"git add" |
|||
] |
|||
}, |
|||
"dependencies": { |
|||
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", |
|||
"@babel/plugin-proposal-optional-chaining": "^7.18.9", |
|||
"@riophae/vue-treeselect": "^0.4.0", |
|||
"axios": "^0.21.1", |
|||
"clipboard": "2.0.4", |
|||
"codemirror": "^5.49.2", |
|||
"connect": "3.6.6", |
|||
"core-js": "^2.6.12", |
|||
"echarts": "^4.2.1", |
|||
"echarts-gl": "^1.1.1", |
|||
"echarts-wordcloud": "^1.1.3", |
|||
"element-ui": "^2.15.6", |
|||
"file-saver": "1.3.8", |
|||
"fuse.js": "3.4.4", |
|||
"highlight.js": "^11.5.1", |
|||
"html2canvas": "^1.4.1", |
|||
"js-beautify": "^1.10.2", |
|||
"js-cookie": "2.2.0", |
|||
"jsencrypt": "^3.0.0-rc.1", |
|||
"jszip": "^3.7.1", |
|||
"mavon-editor": "^2.9.1", |
|||
"normalize.css": "7.0.0", |
|||
"nprogress": "0.2.0", |
|||
"path-to-regexp": "2.4.0", |
|||
"print-js": "^1.6.0", |
|||
"qs": "^6.10.1", |
|||
"screenfull": "4.2.0", |
|||
"sortablejs": "1.8.4", |
|||
"vkbeautify": "^0.99.3", |
|||
"vue": "^2.6.14", |
|||
"vue-count-to": "^1.0.13", |
|||
"vue-cropper": "0.4.9", |
|||
"vue-echarts": "^5.0.0-beta.0", |
|||
"vue-highlightjs": "^1.3.3", |
|||
"vue-image-crop-upload": "^2.5.0", |
|||
"vue-router": "3.0.2", |
|||
"vue-splitpane": "1.0.4", |
|||
"vuedraggable": "2.20.0", |
|||
"vuex": "3.1.0", |
|||
"wangeditor": "^4.7.11", |
|||
"x2js": "^3.4.3", |
|||
"xlsx": "^0.17.4" |
|||
}, |
|||
"devDependencies": { |
|||
"@babel/parser": "^7.7.4", |
|||
"@babel/register": "7.0.0", |
|||
"@vue/babel-plugin-transform-vue-jsx": "^1.2.1", |
|||
"@vue/cli-plugin-babel": "3.5.3", |
|||
"@vue/cli-plugin-eslint": "^3.9.1", |
|||
"@vue/cli-plugin-unit-jest": "3.5.3", |
|||
"@vue/cli-service": "3.5.3", |
|||
"@vue/test-utils": "1.0.0-beta.29", |
|||
"autoprefixer": "^9.5.1", |
|||
"babel-core": "7.0.0-bridge.0", |
|||
"babel-eslint": "10.0.1", |
|||
"babel-jest": "23.6.0", |
|||
"babel-plugin-dynamic-import-node": "2.3.0", |
|||
"babel-plugin-transform-remove-console": "^6.9.4", |
|||
"chalk": "2.4.2", |
|||
"chokidar": "2.1.5", |
|||
"connect": "3.6.6", |
|||
"eslint": "5.15.3", |
|||
"eslint-plugin-vue": "5.2.2", |
|||
"html-webpack-plugin": "3.2.0", |
|||
"http-proxy-middleware": "^0.19.1", |
|||
"husky": "1.3.1", |
|||
"lint-staged": "8.1.5", |
|||
"plop": "2.3.0", |
|||
"sass": "1.32.13", |
|||
"sass-loader": "10.2.0", |
|||
"script-ext-html-webpack-plugin": "2.1.3", |
|||
"script-loader": "0.7.2", |
|||
"serve-static": "^1.13.2", |
|||
"svg-sprite-loader": "4.1.3", |
|||
"svgo": "1.2.0", |
|||
"tasksfile": "^5.1.1", |
|||
"vue-template-compiler": "2.6.14" |
|||
}, |
|||
"engines": { |
|||
"node": ">=8.9", |
|||
"npm": ">= 3.0.0" |
|||
}, |
|||
"browserslist": [ |
|||
"> 1%", |
|||
"last 2 versions" |
|||
] |
|||
} |
|||
@ -1,265 +1,265 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
<!--工具栏--> |
|||
<div class="head-container"> |
|||
<div v-if="crud.props.searchToggle" class="head-search"> |
|||
<!-- 搜索 --> |
|||
<el-input v-model="query.blurry" clearable size="small" 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> |
|||
<!--表单渲染--> |
|||
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title"> |
|||
<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="80px"> |
|||
<el-form-item label="菜单类型" prop="type"> |
|||
<el-radio-group v-model="form.type" size="mini" style="width: 178px"> |
|||
<el-radio-button label="0">目录</el-radio-button> |
|||
<el-radio-button label="1">菜单</el-radio-button> |
|||
<el-radio-button label="2">按钮</el-radio-button> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单图标" prop="icon"> |
|||
<el-popover |
|||
placement="bottom-start" |
|||
width="450" |
|||
trigger="click" |
|||
@show="$refs['iconSelect'].reset()" |
|||
> |
|||
<IconSelect ref="iconSelect" @selected="selected" /> |
|||
<el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly> |
|||
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 30px;width: 16px;" /> |
|||
<i v-else slot="prefix" class="el-icon-search el-input__icon" /> |
|||
</el-input> |
|||
</el-popover> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.type.toString() !== '2'" label="外链菜单" prop="iFrame"> |
|||
<el-radio-group v-model="form.iFrame" size="mini"> |
|||
<el-radio-button label="true">是</el-radio-button> |
|||
<el-radio-button label="false">否</el-radio-button> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache"> |
|||
<el-radio-group v-model="form.cache" size="mini"> |
|||
<el-radio-button label="true">是</el-radio-button> |
|||
<el-radio-button label="false">否</el-radio-button> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden"> |
|||
<el-radio-group v-model="form.hidden" size="mini"> |
|||
<el-radio-button label="false">是</el-radio-button> |
|||
<el-radio-button label="true">否</el-radio-button> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title"> |
|||
<el-input v-model="form.title" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title"> |
|||
<el-input v-model="form.title" placeholder="按钮名称" style="width: 178px;" /> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission"> |
|||
<el-input v-model="form.permission" :disabled="form.iFrame.toString() === 'true'" placeholder="权限标识" style="width: 178px;" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path"> |
|||
<el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" /> |
|||
</el-form-item> |
|||
<el-form-item label="菜单排序" prop="menuSort"> |
|||
<el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 178px;" /> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件名称" prop="componentName"> |
|||
<el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" /> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件路径" prop="component"> |
|||
<el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" /> |
|||
</el-form-item> |
|||
<el-form-item label="上级类目" prop="pid"> |
|||
<treeselect |
|||
v-model="form.pid" |
|||
:options="menus" |
|||
:load-options="loadMenus" |
|||
style="width: 450px;" |
|||
placeholder="选择上级类目" |
|||
/> |
|||
</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> |
|||
<!--表格渲染--> |
|||
<div class="app-container container-wrap" style="margin-top:0;min-height: calc(100vh - 292px);"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading" |
|||
lazy |
|||
:load="getMenus" |
|||
:data="crud.data" |
|||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
|||
row-key="id" |
|||
@select="crud.selectChange" |
|||
@select-all="crud.selectAllChange" |
|||
@selection-change="crud.selectionChangeHandler" |
|||
> |
|||
<el-table-column type="selection" align="center" width="55" /> |
|||
<el-table-column :show-overflow-tooltip="true" label="菜单标题" width="125px" prop="title" /> |
|||
<el-table-column prop="icon" label="图标" align="center" width="60px"> |
|||
<template slot-scope="scope"> |
|||
<svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="menuSort" align="center" label="排序"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.menuSort }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" /> |
|||
<el-table-column prop="iFrame" label="外链" width="75px"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.iFrame">是</span> |
|||
<span v-else>否</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="cache" label="缓存" width="75px"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.cache">是</span> |
|||
<span v-else>否</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="hidden" label="可见" width="75px"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.hidden">否</span> |
|||
<span v-else>是</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" label="创建日期" width="150px"> |
|||
<template slot-scope="scope"> |
|||
<div>{{ scope.row.createTime | parseTime }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column v-if="checkPer(['admin','menu:edit','menu:del'])" label="操作" width="130px" align="center" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<udOperation |
|||
:data="scope.row" |
|||
:permission="permission" |
|||
msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudMenu from '@/api/system/menu' |
|||
import IconSelect from '@/components/IconSelect' |
|||
import Treeselect from '@riophae/vue-treeselect' |
|||
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|||
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' |
|||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|||
import rrOperation from '@crud/RR.operation' |
|||
import crudOperation from '@crud/CRUD.operation' |
|||
import udOperation from '@crud/UD.operation' |
|||
import DateRangePicker from '@/components/DateRangePicker' |
|||
|
|||
// crud交由presenter持有 |
|||
const defaultForm = { id: null, title: null, menuSort: 999, path: null, component: null, componentName: null, iFrame: false, roles: [], pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null } |
|||
export default { |
|||
name: 'Menu', |
|||
components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation, DateRangePicker }, |
|||
cruds() { |
|||
return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }}) |
|||
}, |
|||
mixins: [presenter(), header(), form(defaultForm), crud()], |
|||
data() { |
|||
return { |
|||
menus: [], |
|||
permission: { |
|||
add: ['admin', 'menu:add'], |
|||
edit: ['admin', 'menu:edit'], |
|||
del: ['admin', 'menu:del'] |
|||
}, |
|||
rules: { |
|||
title: [ |
|||
{ required: true, message: '请输入标题', trigger: 'blur' } |
|||
], |
|||
path: [ |
|||
{ required: true, message: '请输入地址', trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 新增与编辑前做的操作 |
|||
[CRUD.HOOK.afterToCU](crud, form) { |
|||
this.menus = [] |
|||
if (form.id != null) { |
|||
if (form.pid === null) { |
|||
form.pid = 0 |
|||
} |
|||
this.getSupDepts(form.id) |
|||
} else { |
|||
this.menus.push({ id: 0, label: '顶级类目', children: null }) |
|||
} |
|||
}, |
|||
getMenus(tree, treeNode, resolve) { |
|||
const params = { pid: tree.id } |
|||
setTimeout(() => { |
|||
crudMenu.getMenus(params).then(res => { |
|||
resolve(res.content) |
|||
}) |
|||
}, 100) |
|||
}, |
|||
getSupDepts(id) { |
|||
crudMenu.getMenuSuperior(id).then(res => { |
|||
const children = res.map(function(obj) { |
|||
if (!obj.leaf && !obj.children) { |
|||
obj.children = null |
|||
} |
|||
return obj |
|||
}) |
|||
this.menus = [{ id: 0, label: '顶级类目', children: children }] |
|||
}) |
|||
}, |
|||
loadMenus({ action, parentNode, callback }) { |
|||
if (action === LOAD_CHILDREN_OPTIONS) { |
|||
crudMenu.getMenusTree(parentNode.id).then(res => { |
|||
parentNode.children = res.map(function(obj) { |
|||
if (!obj.leaf) { |
|||
obj.children = null |
|||
} |
|||
return obj |
|||
}) |
|||
setTimeout(() => { |
|||
callback() |
|||
}, 100) |
|||
}) |
|||
} |
|||
}, |
|||
// 选中图标 |
|||
selected(name) { |
|||
this.form.icon = name |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
::v-deep .el-input-number .el-input__inner { |
|||
text-align: left; |
|||
} |
|||
// ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value { |
|||
// height: 30px; |
|||
// line-height: 30px; |
|||
// } |
|||
</style> |
|||
<template> |
|||
<div> |
|||
|
|||
<!--工具栏--> |
|||
<div class="head-container"> |
|||
<div v-if="crud.props.searchToggle" class="head-search"> |
|||
<!-- 搜索 --> |
|||
<el-input v-model="query.blurry" clearable size="small" 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> |
|||
<!--表单渲染--> |
|||
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title"> |
|||
<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="80px"> |
|||
<el-form-item label="菜单类型" prop="type"> |
|||
<el-radio-group v-model="form.type" size="mini" style="width: 178px"> |
|||
<el-radio-button label="0">目录</el-radio-button> |
|||
<el-radio-button label="1">菜单</el-radio-button> |
|||
<el-radio-button label="2">按钮</el-radio-button> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单图标" prop="icon"> |
|||
<el-popover |
|||
placement="bottom-start" |
|||
width="450" |
|||
trigger="click" |
|||
@show="$refs['iconSelect'].reset()" |
|||
> |
|||
<IconSelect ref="iconSelect" @selected="selected" /> |
|||
<el-input slot="reference" v-model="form.icon" style="width: 450px;" placeholder="点击选择图标" readonly> |
|||
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 30px;width: 16px;" /> |
|||
<i v-else slot="prefix" class="el-icon-search el-input__icon" /> |
|||
</el-input> |
|||
</el-popover> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.type.toString() !== '2'" label="外链菜单" prop="iFrame"> |
|||
<el-radio-group v-model="form.iFrame" size="mini"> |
|||
<el-radio-button label="true">是</el-radio-button> |
|||
<el-radio-button label="false">否</el-radio-button> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.type.toString() === '1'" label="菜单缓存" prop="cache"> |
|||
<el-radio-group v-model="form.cache" size="mini"> |
|||
<el-radio-button label="true">是</el-radio-button> |
|||
<el-radio-button label="false">否</el-radio-button> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.type.toString() !== '2'" label="菜单可见" prop="hidden"> |
|||
<el-radio-group v-model="form.hidden" size="mini"> |
|||
<el-radio-button label="false">是</el-radio-button> |
|||
<el-radio-button label="true">否</el-radio-button> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-if="form.type.toString() !== '2'" label="菜单标题" prop="title"> |
|||
<el-input v-model="form.title" :style=" form.type.toString() === '0' ? 'width: 450px' : 'width: 178px'" placeholder="菜单标题" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="form.type.toString() === '2'" label="按钮名称" prop="title"> |
|||
<el-input v-model="form.title" placeholder="按钮名称" style="width: 178px;" /> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.type.toString() !== '0'" label="权限标识" prop="permission"> |
|||
<el-input v-model="form.permission" :disabled="form.iFrame.toString() === 'true'" placeholder="权限标识" style="width: 178px;" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="form.type.toString() !== '2'" label="路由地址" prop="path"> |
|||
<el-input v-model="form.path" placeholder="路由地址" style="width: 178px;" /> |
|||
</el-form-item> |
|||
<el-form-item label="菜单排序" prop="menuSort"> |
|||
<el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 178px;" /> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件名称" prop="componentName"> |
|||
<el-input v-model="form.componentName" style="width: 178px;" placeholder="匹配组件内Name字段" /> |
|||
</el-form-item> |
|||
<el-form-item v-show="form.iFrame.toString() !== 'true' && form.type.toString() === '1'" label="组件路径" prop="component"> |
|||
<el-input v-model="form.component" style="width: 178px;" placeholder="组件路径" /> |
|||
</el-form-item> |
|||
<el-form-item label="上级类目" prop="pid"> |
|||
<treeselect |
|||
v-model="form.pid" |
|||
:options="menus" |
|||
:load-options="loadMenus" |
|||
style="width: 450px;" |
|||
placeholder="选择上级类目" |
|||
/> |
|||
</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> |
|||
<!--表格渲染--> |
|||
<div class="app-container container-wrap" style="margin-top:0;min-height: calc(100vh - 292px);"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<el-table |
|||
ref="table" |
|||
v-loading="crud.loading" |
|||
lazy |
|||
:load="getMenus" |
|||
:data="crud.data" |
|||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" |
|||
row-key="id" |
|||
@select="crud.selectChange" |
|||
@select-all="crud.selectAllChange" |
|||
@selection-change="crud.selectionChangeHandler" |
|||
> |
|||
<el-table-column type="selection" align="center" width="55" /> |
|||
<el-table-column :show-overflow-tooltip="true" label="菜单标题" min-width="100px" prop="title" /> |
|||
<el-table-column prop="icon" label="图标" align="center" width="60px"> |
|||
<template slot-scope="scope"> |
|||
<svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="menuSort" align="center" label="排序" width="60px"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.menuSort }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" /> |
|||
<el-table-column prop="iFrame" label="外链" width="75px"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.iFrame">是</span> |
|||
<span v-else>否</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="cache" label="缓存" width="75px"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.cache">是</span> |
|||
<span v-else>否</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="hidden" label="可见" width="75px"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.hidden">否</span> |
|||
<span v-else>是</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" label="创建日期" width="150px"> |
|||
<template slot-scope="scope"> |
|||
<div>{{ scope.row.createTime | parseTime }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column v-if="checkPer(['admin','menu:edit','menu:del'])" label="操作" width="130px" align="center" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<udOperation |
|||
:data="scope.row" |
|||
:permission="permission" |
|||
msg="确定删除吗,如果存在下级节点则一并删除，此操作不能撤销！" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import crudMenu from '@/api/system/menu' |
|||
import IconSelect from '@/components/IconSelect' |
|||
import Treeselect from '@riophae/vue-treeselect' |
|||
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|||
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' |
|||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|||
import rrOperation from '@crud/RR.operation' |
|||
import crudOperation from '@crud/CRUD.operation' |
|||
import udOperation from '@crud/UD.operation' |
|||
import DateRangePicker from '@/components/DateRangePicker' |
|||
|
|||
// crud交由presenter持有 |
|||
const defaultForm = { id: null, title: null, menuSort: 999, path: null, component: null, componentName: null, iFrame: false, roles: [], pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null } |
|||
export default { |
|||
name: 'Menu', |
|||
components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation, DateRangePicker }, |
|||
cruds() { |
|||
return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }}) |
|||
}, |
|||
mixins: [presenter(), header(), form(defaultForm), crud()], |
|||
data() { |
|||
return { |
|||
menus: [], |
|||
permission: { |
|||
add: ['admin', 'menu:add'], |
|||
edit: ['admin', 'menu:edit'], |
|||
del: ['admin', 'menu:del'] |
|||
}, |
|||
rules: { |
|||
title: [ |
|||
{ required: true, message: '请输入标题', trigger: 'blur' } |
|||
], |
|||
path: [ |
|||
{ required: true, message: '请输入地址', trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 新增与编辑前做的操作 |
|||
[CRUD.HOOK.afterToCU](crud, form) { |
|||
this.menus = [] |
|||
if (form.id != null) { |
|||
if (form.pid === null) { |
|||
form.pid = 0 |
|||
} |
|||
this.getSupDepts(form.id) |
|||
} else { |
|||
this.menus.push({ id: 0, label: '顶级类目', children: null }) |
|||
} |
|||
}, |
|||
getMenus(tree, treeNode, resolve) { |
|||
const params = { pid: tree.id } |
|||
setTimeout(() => { |
|||
crudMenu.getMenus(params).then(res => { |
|||
resolve(res.content) |
|||
}) |
|||
}, 100) |
|||
}, |
|||
getSupDepts(id) { |
|||
crudMenu.getMenuSuperior(id).then(res => { |
|||
const children = res.map(function(obj) { |
|||
if (!obj.leaf && !obj.children) { |
|||
obj.children = null |
|||
} |
|||
return obj |
|||
}) |
|||
this.menus = [{ id: 0, label: '顶级类目', children: children }] |
|||
}) |
|||
}, |
|||
loadMenus({ action, parentNode, callback }) { |
|||
if (action === LOAD_CHILDREN_OPTIONS) { |
|||
crudMenu.getMenusTree(parentNode.id).then(res => { |
|||
parentNode.children = res.map(function(obj) { |
|||
if (!obj.leaf) { |
|||
obj.children = null |
|||
} |
|||
return obj |
|||
}) |
|||
setTimeout(() => { |
|||
callback() |
|||
}, 100) |
|||
}) |
|||
} |
|||
}, |
|||
// 选中图标 |
|||
selected(name) { |
|||
this.form.icon = name |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
::v-deep .el-input-number .el-input__inner { |
|||
text-align: left; |
|||
} |
|||
// ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value { |
|||
// height: 30px; |
|||
// line-height: 30px; |
|||
// } |
|||
</style> |
|||
@ -1,381 +1,381 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<!--工具栏--> |
|||
<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> |
|||
<!-- 表单渲染 --> |
|||
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title"> |
|||
<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="80px"> |
|||
<el-form-item label="角色名称" prop="name"> |
|||
<el-input v-model="form.name" style="width: 380px;" /> |
|||
</el-form-item> |
|||
<el-form-item label="角色级别" prop="level"> |
|||
<el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 145px;" /> |
|||
</el-form-item> |
|||
<el-form-item label="数据范围" prop="dataScope"> |
|||
<el-select v-model="form.dataScope" style="width: 140px" placeholder="请选择数据范围" @change="changeScope"> |
|||
<el-option |
|||
v-for="item in dateScopes" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts"> |
|||
<treeselect |
|||
v-model="deptDatas" |
|||
:load-options="loadDepts" |
|||
:options="depts" |
|||
multiple |
|||
style="width: 380px" |
|||
placeholder="请选择" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="描述信息" prop="description"> |
|||
<el-input v-model="form.description" style="width: 380px;" 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-row :gutter="15"> |
|||
<!--角色管理--> |
|||
<el-col :xs="15" :sm="17" :md="18" :lg="19" :xl="19"> |
|||
<el-card class="box-card" shadow="never"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<div slot="header" class="clearfix"> |
|||
<span class="role-span">角色列表</span> |
|||
</div> |
|||
<el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" height="calc(100vh - 400px)" :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="name" label="名称" /> |
|||
<el-table-column prop="dataScope" label="数据权限" /> |
|||
<el-table-column prop="level" label="角色级别" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="description" label="描述" /> |
|||
<el-table-column :show-overflow-tooltip="true" width="135px" prop="createTime" label="创建日期"> |
|||
<template slot-scope="scope"> |
|||
<div>{{ scope.row.createTime | parseTime }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column v-if="checkPer(['admin','roles:edit','roles:del'])" label="操作" width="130px" align="center" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<udOperation |
|||
v-if="scope.row.level >= level" |
|||
:data="scope.row" |
|||
:permission="permission" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination /> |
|||
</el-card> |
|||
</el-col> |
|||
<!-- 菜单授权 --> |
|||
<el-col :xs="9" :sm="7" :md="6" :lg="5" :xl="5"> |
|||
<el-card class="box-card" shadow="never" style="min-height:calc(100vh - 292px)"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<div slot="header" class="clearfix"> |
|||
<el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top"> |
|||
<span class="role-span">菜单分配</span> |
|||
</el-tooltip> |
|||
<el-button |
|||
v-permission="['admin','roles:edit']" |
|||
:disabled="!showButton" |
|||
:loading="menuLoading" |
|||
icon="el-icon-check" |
|||
size="mini" |
|||
style="float: right; padding: 6px 9px" |
|||
@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" |
|||
/> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</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 udOperation from '@crud/UD.operation' |
|||
import pagination from '@crud/Pagination' |
|||
import Treeselect from '@riophae/vue-treeselect' |
|||
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|||
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' |
|||
import DateRangePicker from '@/components/DateRangePicker' |
|||
|
|||
const defaultForm = { id: null, name: null, depts: [], description: null, dataScope: '全部', level: 3 } |
|||
export default { |
|||
name: 'Role', |
|||
components: { Treeselect, pagination, crudOperation, rrOperation, udOperation, 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' }, |
|||
dateScopes: ['全部', '本级', '自定义'], level: 3, |
|||
currentId: 0, menuLoading: false, showButton: false, |
|||
menus: [], menuIds: [], depts: [], deptDatas: [], // 多选时使用 |
|||
permission: { |
|||
add: ['admin', 'roles:add'], |
|||
edit: ['admin', 'roles:edit'], |
|||
del: ['admin', 'roles:del'] |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: '请输入名称', trigger: 'blur' } |
|||
], |
|||
permission: [ |
|||
{ required: true, message: '请输入权限', trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
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 |
|||
} |
|||
}) |
|||
}, |
|||
// 获取弹窗内部门数据 |
|||
loadDepts({ action, parentNode, callback }) { |
|||
if (action === LOAD_CHILDREN_OPTIONS) { |
|||
getDepts({ enabled: true, pid: parentNode.id }).then(res => { |
|||
parentNode.children = res.content.map(function(obj) { |
|||
if (obj.hasChildren) { |
|||
obj.children = null |
|||
} |
|||
return obj |
|||
}) |
|||
setTimeout(() => { |
|||
callback() |
|||
}, 200) |
|||
}) |
|||
} |
|||
}, |
|||
// 如果数据权限为自定义则获取部门数据 |
|||
changeScope() { |
|||
if (this.form.dataScope === '自定义') { |
|||
this.getDepts() |
|||
} |
|||
}, |
|||
checkboxT(row) { |
|||
return row.level >= this.level |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss"> |
|||
.role-span { |
|||
font-weight: bold;color: #303133; |
|||
font-size: 15px; |
|||
} |
|||
</style> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.head-container{ |
|||
padding: 0 0 20px 0; |
|||
} |
|||
::v-deep .el-input-number .el-input__inner { |
|||
text-align: left; |
|||
} |
|||
::v-deep .vue-treeselect__multi-value{ |
|||
margin-bottom: 0; |
|||
} |
|||
::v-deep .vue-treeselect__multi-value-item{ |
|||
border: 0; |
|||
padding: 0; |
|||
} |
|||
::v-deep .el-table__body tr.current-row > td{ |
|||
color: #fff; |
|||
background-color: #13439E; |
|||
} |
|||
::v-deep .el-table__header{ |
|||
border-top: 1px solid #113D72; |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="app-container"> |
|||
<!--工具栏--> |
|||
<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> |
|||
<!-- 表单渲染 --> |
|||
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title"> |
|||
<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="80px"> |
|||
<el-form-item label="角色名称" prop="name"> |
|||
<el-input v-model="form.name" style="width: 380px;" /> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="角色级别" prop="level"> |
|||
<el-input-number v-model.number="form.level" :min="1" controls-position="right" style="width: 145px;" /> |
|||
</el-form-item> |
|||
<el-form-item label="数据范围" prop="dataScope"> |
|||
<el-select v-model="form.dataScope" style="width: 140px" placeholder="请选择数据范围" @change="changeScope"> |
|||
<el-option |
|||
v-for="item in dateScopes" |
|||
:key="item" |
|||
:label="item" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> --> |
|||
<el-form-item v-if="form.dataScope === '自定义'" label="数据权限" prop="depts"> |
|||
<treeselect |
|||
v-model="deptDatas" |
|||
:load-options="loadDepts" |
|||
:options="depts" |
|||
multiple |
|||
style="width: 380px" |
|||
placeholder="请选择" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="描述信息" prop="description"> |
|||
<el-input v-model="form.description" style="width: 380px;" 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-row :gutter="15"> |
|||
<!--角色管理--> |
|||
<el-col :xs="15" :sm="17" :md="18" :lg="19" :xl="19"> |
|||
<el-card class="box-card" shadow="never"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<div slot="header" class="clearfix"> |
|||
<span class="role-span">角色列表</span> |
|||
</div> |
|||
<el-table ref="table" v-loading="crud.loading" highlight-current-row style="width: 100%;" height="calc(100vh - 400px)" :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="name" label="名称" /> |
|||
<el-table-column prop="dataScope" label="数据权限" /> |
|||
<el-table-column prop="level" label="角色级别" /> |
|||
<el-table-column :show-overflow-tooltip="true" prop="description" label="描述" /> |
|||
<el-table-column :show-overflow-tooltip="true" width="135px" prop="createTime" label="创建日期"> |
|||
<template slot-scope="scope"> |
|||
<div>{{ scope.row.createTime | parseTime }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column v-if="checkPer(['admin','roles:edit','roles:del'])" label="操作" width="130px" align="center" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<udOperation |
|||
v-if="scope.row.level >= level" |
|||
:data="scope.row" |
|||
:permission="permission" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!--分页组件--> |
|||
<pagination /> |
|||
</el-card> |
|||
</el-col> |
|||
<!-- 菜单授权 --> |
|||
<el-col :xs="9" :sm="7" :md="6" :lg="5" :xl="5"> |
|||
<el-card class="box-card" shadow="never" style="min-height:calc(100vh - 292px)"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<div slot="header" class="clearfix"> |
|||
<el-tooltip class="item" effect="dark" content="选择指定角色分配菜单" placement="top"> |
|||
<span class="role-span">菜单分配</span> |
|||
</el-tooltip> |
|||
<el-button |
|||
v-permission="['admin','roles:edit']" |
|||
:disabled="!showButton" |
|||
:loading="menuLoading" |
|||
icon="el-icon-check" |
|||
size="mini" |
|||
style="float: right; padding: 6px 9px" |
|||
@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" |
|||
/> |
|||
</el-card> |
|||
</el-col> |
|||
</el-row> |
|||
</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 udOperation from '@crud/UD.operation' |
|||
import pagination from '@crud/Pagination' |
|||
import Treeselect from '@riophae/vue-treeselect' |
|||
import '@riophae/vue-treeselect/dist/vue-treeselect.css' |
|||
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect' |
|||
import DateRangePicker from '@/components/DateRangePicker' |
|||
|
|||
const defaultForm = { id: null, name: null, depts: [], description: null, dataScope: '全部', level: 3 } |
|||
export default { |
|||
name: 'Role', |
|||
components: { Treeselect, pagination, crudOperation, rrOperation, udOperation, 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' }, |
|||
dateScopes: ['全部', '本级', '自定义'], level: 3, |
|||
currentId: 0, menuLoading: false, showButton: false, |
|||
menus: [], menuIds: [], depts: [], deptDatas: [], // 多选时使用 |
|||
permission: { |
|||
add: ['admin', 'roles:add'], |
|||
edit: ['admin', 'roles:edit'], |
|||
del: ['admin', 'roles:del'] |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: '请输入名称', trigger: 'blur' } |
|||
], |
|||
permission: [ |
|||
{ required: true, message: '请输入权限', trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
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 |
|||
} |
|||
}) |
|||
}, |
|||
// 获取弹窗内部门数据 |
|||
loadDepts({ action, parentNode, callback }) { |
|||
if (action === LOAD_CHILDREN_OPTIONS) { |
|||
getDepts({ enabled: true, pid: parentNode.id }).then(res => { |
|||
parentNode.children = res.content.map(function(obj) { |
|||
if (obj.hasChildren) { |
|||
obj.children = null |
|||
} |
|||
return obj |
|||
}) |
|||
setTimeout(() => { |
|||
callback() |
|||
}, 200) |
|||
}) |
|||
} |
|||
}, |
|||
// 如果数据权限为自定义则获取部门数据 |
|||
changeScope() { |
|||
if (this.form.dataScope === '自定义') { |
|||
this.getDepts() |
|||
} |
|||
}, |
|||
checkboxT(row) { |
|||
return row.level >= this.level |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss"> |
|||
.role-span { |
|||
font-weight: bold;color: #303133; |
|||
font-size: 15px; |
|||
} |
|||
</style> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.head-container{ |
|||
padding: 0 0 20px 0; |
|||
} |
|||
::v-deep .el-input-number .el-input__inner { |
|||
text-align: left; |
|||
} |
|||
::v-deep .vue-treeselect__multi-value{ |
|||
margin-bottom: 0; |
|||
} |
|||
::v-deep .vue-treeselect__multi-value-item{ |
|||
border: 0; |
|||
padding: 0; |
|||
} |
|||
::v-deep .el-table__body tr.current-row > td{ |
|||
color: #fff; |
|||
background-color: #13439E; |
|||
} |
|||
::v-deep .el-table__header{ |
|||
border-top: 1px solid #113D72; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue