mirror of
https://gitee.com/orangeform/orange-admin.git
synced 2026-01-18 11:06:36 +08:00
commit：微服务工程目录
This commit is contained in:
Jerry
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<el-container class="advance-query-form">
|
||||
<el-aside width="300px">
|
||||
<el-card class="base-card" shadow="never" :body-style="{ padding: '0px' }" style="border: none;">
|
||||
<div slot="header" class="base-card-header">
|
||||
<span>字典列表</span>
|
||||
</div>
|
||||
<el-scrollbar :style="{'height': (getMainContextHeight - 51) + 'px'}" class="custom-scroll">
|
||||
<el-tree :data="dictList" :props="{label: 'name'}" node-key="variableName" :highlight-current="true"
|
||||
:current-node-key="(dictList[0] || {}).variableName" @node-click="onDictChange">
|
||||
<div class="module-node-item" slot-scope="{ data }">
|
||||
<span style="padding-left: 24px;">{{data.name}}</span>
|
||||
</div>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-aside>
|
||||
<el-main style="margin-left: 15px; background-color: white; padding: 20px;">
|
||||
<el-form label-width="120px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item v-if="dirtyCount > 0" label="失效缓存数量：">
|
||||
<span style="color: #F56C6C;">{{dirtyCount}}</span>
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" size="mini" :plain="true"
|
||||
:disabled="!checkPermCodeExist('formSysDict:fragmentSysDict:reloadCache') || currentDict == null"
|
||||
@click="onRefreshCacheData">
|
||||
同步缓存
|
||||
</el-button>
|
||||
<el-button slot="operator" type="primary" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysDict:fragmentSysDict:add') || currentDict == null"
|
||||
@click="onAddDictData">
|
||||
添加数据
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="getCurrentDictData" size="mini" header-cell-class-name="table-header-gray"
|
||||
:row-style="tableRowStyle"
|
||||
:height="(getMainContextHeight - 90) + 'px'" row-key="id">
|
||||
<el-table-column label="ID" prop="id" />
|
||||
<el-table-column label="字典名称" prop="name">
|
||||
<template slot-scope="scope">
|
||||
<span>{{scope.row.name}}</span>
|
||||
<el-tag v-if="scope.row.dirty" size="mini" effect="dark" type="warning"
|
||||
style="margin-left: 15px;">
|
||||
缓存失效
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="mini" :disabled="!checkPermCodeExist('formSysDict:fragmentSysDict:update')" @click="onUpdateDictDataClick(scope.row)">编辑</el-button>
|
||||
<el-button type="text" size="mini" :disabled="!checkPermCodeExist('formSysDict:fragmentSysDict:delete')" @click="onDeleteDictDataClick(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { treeDataTranslate, findItemFromList } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DictionaryController } from '@/api';
|
||||
import editDict from '@/views/upms/formEditDict';
|
||||
|
||||
export default {
|
||||
name: 'formDictManagement',
|
||||
data () {
|
||||
return {
|
||||
dictList: [
|
||||
{
|
||||
variableName: 'grade',
|
||||
name: '年级',
|
||||
nameKey: 'gradeName',
|
||||
idKey: 'gradeId',
|
||||
deletedKey: 'gradeIds',
|
||||
parentKey: '',
|
||||
treeFlag: false,
|
||||
listApi: DictionaryController.dictGradeAll,
|
||||
addApi: DictionaryController.dictAddGrade,
|
||||
deleteApi: DictionaryController.dictDeleteGrade,
|
||||
updateApi: DictionaryController.dictUpdateGrade,
|
||||
reloadCachedDataApi: DictionaryController.dictReloadGradeCachedData
|
||||
}
|
||||
],
|
||||
dirtyCount: 0,
|
||||
currentDict: undefined,
|
||||
currentDictDataList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tableRowStyle ({row, rowIndex}) {
|
||||
if (row.dirty) {
|
||||
return {
|
||||
background: '#FFE1E1'
|
||||
}
|
||||
}
|
||||
},
|
||||
updateDictData () {
|
||||
this.currentDictDataList = [];
|
||||
this.dirtyCount = 0;
|
||||
this.currentDict.listApi(this).then(res => {
|
||||
let cachedMap = new Map();
|
||||
if (Array.isArray(res.cachedResultList)) {
|
||||
res.cachedResultList.forEach(item => {
|
||||
cachedMap.set(item.id, item);
|
||||
});
|
||||
}
|
||||
if (Array.isArray(res.fullResultList)) {
|
||||
res.fullResultList.forEach(item => {
|
||||
let cachedItem = cachedMap.get(item.id);
|
||||
if (cachedItem == null || cachedItem.name !== item.name) {
|
||||
item.dirty = true;
|
||||
this.dirtyCount++;
|
||||
}
|
||||
});
|
||||
}
|
||||
cachedMap = null;
|
||||
if (this.currentDict.treeFlag) {
|
||||
this.currentDictDataList = treeDataTranslate(res.fullResultList, 'id', 'parentId');
|
||||
} else {
|
||||
this.currentDictDataList = res.fullResultList;
|
||||
}
|
||||
}).catch(e => {});
|
||||
},
|
||||
onDictChange (data) {
|
||||
if (this.currentDict === data) return;
|
||||
this.currentDict = findItemFromList(this.dictList, (data || {}).variableName, 'variableName');
|
||||
this.currentDictDataList = [];
|
||||
if (this.currentDict == null) {
|
||||
this.$message.error('没有找到相关字典');
|
||||
return;
|
||||
}
|
||||
this.updateDictData();
|
||||
},
|
||||
onRefreshCacheData () {
|
||||
this.$confirm('是否同步缓存？').then(res => {
|
||||
return this.currentDict.reloadCachedDataApi(this);
|
||||
}).then(res => {
|
||||
this.$message.success('同步成功');
|
||||
this.updateDictData();
|
||||
}).catch(e => {});
|
||||
},
|
||||
onAddDictData () {
|
||||
this.$dialog.show(`新建字典数据 - [${this.currentDict.name}]`, editDict, {
|
||||
area: '500px'
|
||||
}, {
|
||||
dictInfo: this.currentDict,
|
||||
dictData: this.currentDict.treeFlag ? this.currentDictDataList : []
|
||||
}).then(res => {
|
||||
this.updateDictData();
|
||||
}).catch(e => {});
|
||||
},
|
||||
onUpdateDictDataClick (row) {
|
||||
this.$dialog.show(`编辑字典数据 - [${this.currentDict.name}]`, editDict, {
|
||||
area: '500px'
|
||||
}, {
|
||||
dictInfo: this.currentDict,
|
||||
currentData: row,
|
||||
dictData: this.currentDict.treeFlag ? this.currentDictDataList : []
|
||||
}).then(res => {
|
||||
this.updateDictData();
|
||||
}).catch(e => {});
|
||||
},
|
||||
onDeleteDictDataClick (row) {
|
||||
this.$confirm('是否删除此字典数据？').then(res => {
|
||||
let params = {};
|
||||
params[this.currentDict.idKey] = row.id;
|
||||
return this.currentDict.deleteApi(this, params);
|
||||
}).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.updateDictData();
|
||||
}).catch(e => {});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getCurrentDictData () {
|
||||
return this.currentDictDataList;
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
mounted () {
|
||||
this.onDictChange(this.dictList[0]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
>>> .el-tree-node__content {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
>>> .el-tree-node__content .is-leaf {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.module-node-item {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="80px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-form-item v-if="dictInfo.treeFlag" label="父字典">
|
||||
<el-cascader style="width: 100%;"
|
||||
:options="dictData" v-model="parentPath"
|
||||
:props="{label: 'name', value: 'id'}" placeholder="请选择所属父字典"
|
||||
:clearable="true" :change-on-select="true"
|
||||
@change="onParentChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="字典名称" clearable />
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="end" class="dialog-btn-layer">
|
||||
<el-button size="mini" @click="onCancel(false)" >取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="onSubmit">确定</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { findTreeNodePath } from '@/utils';
|
||||
|
||||
export default {
|
||||
name: 'DictEdit',
|
||||
props: {
|
||||
dictInfo: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
currentData: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
dictData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
parentPath: [],
|
||||
formData: {
|
||||
name: undefined,
|
||||
id: undefined
|
||||
},
|
||||
rules: {
|
||||
name: [{required: true, message: '字典数据名称不能为空', trigger: 'blur'}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onParentChange (values) {
|
||||
if (Array.isArray(values) && values.length > 0) {
|
||||
this.formData.parentId = values[values.length - 1];
|
||||
} else {
|
||||
this.formData.parentId = undefined;
|
||||
}
|
||||
},
|
||||
onCancel (isSuccess = false) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {};
|
||||
params[this.dictInfo.variableName + 'Dto'] = {};
|
||||
params[this.dictInfo.variableName + 'Dto'][this.dictInfo.nameKey] = this.formData.name;
|
||||
params[this.dictInfo.variableName + 'Dto'][this.dictInfo.parentKey] = this.formData.parentId;
|
||||
|
||||
if (this.formData.id == null) {
|
||||
this.dictInfo.addApi(this, params).then(res => {
|
||||
this.$message.success('操作成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
|
||||
});
|
||||
} else {
|
||||
params[this.dictInfo.variableName + 'Dto'][this.dictInfo.idKey] = this.formData.id;
|
||||
this.dictInfo.updateApi(this, params).then(res => {
|
||||
this.$message.success('操作成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.currentData != null) {
|
||||
this.formData.id = this.currentData.id;
|
||||
this.formData.name = this.currentData.name;
|
||||
if (this.dictInfo.treeFlag && this.currentData.parentId != null && this.currentData.parentId !== '') {
|
||||
this.formData.parentId = this.currentData.parentId;
|
||||
this.parentPath = findTreeNodePath(this.dictData, this.formData.parentId, 'id');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="110px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20" class="full-width-input">
|
||||
<el-col :span="24" >
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input v-model="formData.menuName" placeholder="菜单名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="显示顺序" prop="showOrder">
|
||||
<el-input-number v-model="formData.showOrder" controls-position="right"
|
||||
:min="1" :max="99999" placeholder="请输入显示顺序"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 弹窗按钮 -->
|
||||
<el-row type="flex" justify="end" class="dialog-btn-layer mt20">
|
||||
<el-button size="mini" @click="onCancel(false)" >取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="onSubmit">确定</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
columnId: {
|
||||
type: String
|
||||
},
|
||||
columnName: {
|
||||
type: String
|
||||
},
|
||||
showOrder: {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 是否自动用上级菜单的名称过滤权限字列表，当这个开关打开后，会使用getAutoFilterString返回的字符串当做过滤字符串
|
||||
autoFilter: false,
|
||||
permCodeNameFilter: undefined,
|
||||
allowParentList: [],
|
||||
formData: {
|
||||
menuId: this.columnId,
|
||||
parentId: undefined,
|
||||
menuName: this.columnName,
|
||||
showOrder: this.showOrder,
|
||||
menuType: this.SysMenuType.DIRECTORY,
|
||||
icon: undefined,
|
||||
formRouterName: undefined
|
||||
},
|
||||
rules: {
|
||||
menuName: [{required: true, message: '请输入栏目名称', trigger: 'blur'}],
|
||||
showOrder: [{required: true, message: '请输入栏目显示顺序', trigger: 'blur'}]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {};
|
||||
params.sysMenuDto = {...this.formData};
|
||||
|
||||
if (this.isEdit) {
|
||||
SystemController.updateMenu(this, params).then(res => {
|
||||
resolve(res);
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
} else {
|
||||
SystemController.addMenu(this, params).then(res => {
|
||||
resolve(res);
|
||||
this.$message.success('添加成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
initData () {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit () {
|
||||
return this.formData.menuId != null;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="110px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20" class="full-width-input">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="上级菜单">
|
||||
<el-cascader :options="menuTree" v-model="parentMenuPath" :props="menuProps" placeholder="选择父菜单"
|
||||
:disabled="!canEditParent || isEdit" :clearable="true" :change-on-select="true" size="mini"
|
||||
@change="onParentMenuChange" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" >
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input v-model="formData.menuName" placeholder="菜单名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单类型" prop="menuType">
|
||||
<el-select v-model="formData.menuType" :disabled="isEdit" placeholder="菜单类型" @change="onMenuTypeChange">
|
||||
<el-option v-for="item in getValidMenuType" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示顺序" prop="showOrder">
|
||||
<el-input-number v-model="formData.showOrder" controls-position="right"
|
||||
:min="1" :max="99999" placeholder="请输入显示顺序"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单路由">
|
||||
<el-input v-model="formData.formRouterName" placeholder="菜单路由"
|
||||
:disabled="formData.menuType !== 1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="菜单图标" prop="icon">
|
||||
<icon-select v-model="formData.icon" :height="28" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-card shadow="never">
|
||||
<div slot="header" class="card-header">
|
||||
<span>权限字列表</span>
|
||||
<el-input size="mini" v-model="permCodeNameFilter" placeholder="输入权限字名称过滤" style="width: 250px;" clearable suffix-icon="el-icon-search" />
|
||||
</div>
|
||||
<el-scrollbar style="height: 210px;" wrap-class="scrollbar_dropdown__wrap">
|
||||
<el-tree ref="permCodeTree" :check-strictly="true"
|
||||
v-show="formData.menuType"
|
||||
:props="treeProps" node-key="permCodeId" :default-expanded-keys="defaultExpandedKeys"
|
||||
show-checkbox :data="getPermCodeTree" :filter-node-method="filterPermCodeNode"></el-tree>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 弹窗按钮 -->
|
||||
<el-row type="flex" justify="end" class="dialog-btn-layer mt20">
|
||||
<el-button size="mini" @click="onCancel(false)" >取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="onSubmit"
|
||||
:disabled="!(checkPermCodeExist('formSysMenu:fragmentSysMenu:add') || checkPermCodeExist('formSysMenu:fragmentSysMenu:update'))">
|
||||
确定
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { treeDataTranslate, findTreeNodePath, findTreeNode, findItemFromList } from '@/utils';
|
||||
import { SystemController } from '@/api';
|
||||
import IconSelect from '@/components/IconSelect/index.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
menuId: {
|
||||
type: String
|
||||
},
|
||||
parentId: {
|
||||
type: String
|
||||
},
|
||||
menuList: {
|
||||
type: Array,
|
||||
default: undefined
|
||||
},
|
||||
rowData: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
components: {
|
||||
IconSelect
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 是否自动用上级菜单的名称过滤权限字列表，当这个开关打开后，会使用getAutoFilterString返回的字符串当做过滤字符串
|
||||
autoFilter: false,
|
||||
permCodeNameFilter: undefined,
|
||||
allowParentList: [],
|
||||
formData: {
|
||||
menuId: undefined,
|
||||
parentId: undefined,
|
||||
menuName: undefined,
|
||||
showOrder: undefined,
|
||||
menuType: undefined,
|
||||
icon: undefined,
|
||||
formRouterName: undefined
|
||||
},
|
||||
menuProps: {
|
||||
label: 'menuName',
|
||||
value: 'menuId'
|
||||
},
|
||||
parentMenuType: undefined,
|
||||
parentMenuPath: [],
|
||||
menuTree: [],
|
||||
permCodeList: [],
|
||||
defaultExpandedKeys: [],
|
||||
rules: {
|
||||
menuName: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
|
||||
showOrder: [{required: true, message: '请输入菜单显示顺序', trigger: 'blur'}],
|
||||
formRouterName: [{required: true, message: '请输入菜单路由名称', trigger: 'blur'}]
|
||||
},
|
||||
treeProps: {
|
||||
label: 'showName'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getAutoFilterString () {
|
||||
let node = findTreeNode(this.menuTree, this.parentMenuPath[this.parentMenuPath.length - 1], 'menuId');
|
||||
return node ? node.menuName : undefined;
|
||||
},
|
||||
onMenuTypeChange (value) {
|
||||
if (this.autoFilter && value === this.SysMenuType.BUTTON && (this.permCodeNameFilter == null || this.permCodeNameFilter === '')) {
|
||||
this.permCodeNameFilter = this.getAutoFilterString();
|
||||
}
|
||||
},
|
||||
filterPermCodeNode (value, data) {
|
||||
if (!value) return true;
|
||||
if (data.showName.indexOf(value) !== -1) {
|
||||
this.allowParentList.push(data.permCodeId);
|
||||
return true;
|
||||
} else {
|
||||
return this.allowParentList.indexOf(data.parentId) !== -1;
|
||||
}
|
||||
},
|
||||
onParentMenuChange (value, isInit) {
|
||||
if (!isInit) this.formData.menuType = undefined;
|
||||
this.parentMenuType = undefined;
|
||||
if (Array.isArray(value) && value.length > 0) {
|
||||
let node = findTreeNode(this.menuTree, value[value.length - 1], 'menuId');
|
||||
if (node) this.parentMenuType = node.menuType;
|
||||
}
|
||||
},
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let params = {};
|
||||
params.sysMenuDto = {...this.formData};
|
||||
if (this.parentMenuPath.length > 0) {
|
||||
params.sysMenuDto.parentId = this.parentMenuPath[this.parentMenuPath.length - 1];
|
||||
}
|
||||
if ([this.SysMenuType.MENU, this.SysMenuType.BUTTON, this.SysMenuType.FRAGMENT].indexOf(params.sysMenuDto.menuType) !== -1) {
|
||||
let tempList = this.$refs.permCodeTree.getHalfCheckedKeys();
|
||||
tempList = tempList.concat(this.$refs.permCodeTree.getCheckedKeys());
|
||||
params.permCodeIdListString = tempList.join(',');
|
||||
}
|
||||
if (this.isEdit) {
|
||||
SystemController.updateMenu(this, params).then(res => {
|
||||
resolve(res);
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
} else {
|
||||
SystemController.addMenu(this, params).then(res => {
|
||||
resolve(res);
|
||||
this.$message.success('添加成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
formatMenuTree () {
|
||||
this.menuTree = [];
|
||||
if (Array.isArray(this.menuList)) {
|
||||
this.menuTree = this.menuList.filter((item) => {
|
||||
return item.menuType !== this.SysMenuType.BUTTON && item.menuId !== this.formData.menuId;
|
||||
});
|
||||
}
|
||||
this.menuTree = treeDataTranslate(this.menuTree, 'menuId', 'parentId');
|
||||
},
|
||||
initData () {
|
||||
this.defaultExpandedKeys = [];
|
||||
this.formatMenuTree();
|
||||
this.parentMenuPath = findTreeNodePath(this.menuTree, this.formData.parentId, 'menuId');
|
||||
this.onParentMenuChange(this.parentMenuPath, true);
|
||||
this.onMenuTypeChange(this.formData.menuType);
|
||||
SystemController.getPermCodeList(this, {}).then(res => {
|
||||
this.permCodeList = res.data;
|
||||
if (Array.isArray(this.formData.permCodeIdList) && this.formData.permCodeIdList.length > 0) {
|
||||
let tempList = [];
|
||||
this.permCodeList.forEach((item) => {
|
||||
if (findItemFromList(this.formData.permCodeIdList, item.permCodeId) != null) {
|
||||
tempList.push(item.permCodeId);
|
||||
}
|
||||
});
|
||||
this.defaultExpandedKeys = tempList;
|
||||
this.$refs.permCodeTree.setCheckedKeys(tempList);
|
||||
this.$nextTick(() => {
|
||||
this.allowParentList = [];
|
||||
if (this.permCodeNameFilter != null && this.permCodeNameFilter !== '') this.$refs.permCodeTree.filter(this.permCodeNameFilter);
|
||||
});
|
||||
}
|
||||
}).catch(e => {});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getValidMenuType () {
|
||||
let allList = this.SysMenuType.getList();
|
||||
if (this.parentMenuType == null) {
|
||||
return allList.filter((item) => {
|
||||
return [this.SysMenuType.MENU, this.SysMenuType.DIRECTORY].indexOf(item.id) !== -1;
|
||||
});
|
||||
} else {
|
||||
return allList.filter((item) => {
|
||||
switch (Number.parseInt(this.parentMenuType)) {
|
||||
case this.SysMenuType.DIRECTORY: return [this.SysMenuType.MENU, this.SysMenuType.DIRECTORY].indexOf(item.id) !== -1;
|
||||
case this.SysMenuType.MENU: return [this.SysMenuType.FRAGMENT, this.SysMenuType.BUTTON].indexOf(item.id) !== -1;
|
||||
case this.SysMenuType.FRAGMENT: return item.id === this.SysMenuType.BUTTON;
|
||||
default: return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
isEdit () {
|
||||
return this.formData.menuId != null;
|
||||
},
|
||||
// 判断是否新建一个目录
|
||||
isNew () {
|
||||
return this.formData.parentId == null && this.formData.menuId == null;
|
||||
},
|
||||
canEditParent () {
|
||||
return this.parentId == null;
|
||||
},
|
||||
getPermCodeTree () {
|
||||
if (this.permCodeList != null) {
|
||||
return treeDataTranslate(this.permCodeList, 'permCodeId', 'parentId');
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.rowData != null) {
|
||||
this.formData = {...this.formData, ...this.rowData};
|
||||
if (Array.isArray(this.formData.sysMenuPermCodeList)) {
|
||||
this.formData.permCodeIdList = this.formData.sysMenuPermCodeList.map(item => item.permCodeId);
|
||||
}
|
||||
}
|
||||
if (this.parentId != null) this.formData.parentId = this.parentId;
|
||||
this.initData();
|
||||
},
|
||||
watch: {
|
||||
permCodeNameFilter (val) {
|
||||
this.allowParentList = [];
|
||||
this.$refs.permCodeTree.filter(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="form-single-fragment" style="position: relative;">
|
||||
<el-form ref="formCreatePerm" :model="formData" class="full-width-input" :rules="rules" style="width: 100%;"
|
||||
label-width="100px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="权限名称" prop="SysPerm.permName">
|
||||
<el-input class="input-item" v-model="formData.SysPerm.permName"
|
||||
:clearable="true" placeholder="权限名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="所属模块" prop="SysPerm.moduleId">
|
||||
<el-cascader class="input-item" :options="permModuleList" v-model="formData.SysPerm.moduleId"
|
||||
placeholder="选择所属模块" :clearable="true" size="mini" :props="{value: 'moduleId', label: 'moduleName'}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="关联的url" prop="SysPerm.url">
|
||||
<el-input class="input-item" v-model="formData.SysPerm.url"
|
||||
:clearable="true" placeholder="关联的url" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="显示顺序" prop="SysPerm.showOrder">
|
||||
<el-input-number class="input-item" v-model="formData.SysPerm.showOrder"
|
||||
:clearable="true" controls-position="right" placeholder="权限在当前模块下的顺序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end">
|
||||
<el-button type="primary" size="mini" :plain="true"
|
||||
@click="onCancel(false)">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="onAddClick()"
|
||||
:disabled="!(checkPermCodeExist('formSysPerm:fragmentSysPerm:updatePerm') || checkPermCodeExist('formSysPerm:fragmentSysPerm:addPerm'))">
|
||||
保存
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { findTreeNodePath } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'formEditSysPerm',
|
||||
props: {
|
||||
permId: {
|
||||
default: undefined
|
||||
},
|
||||
moduleId: {
|
||||
default: undefined
|
||||
},
|
||||
rowData: {
|
||||
type: Object
|
||||
},
|
||||
currentPermGroupId: String,
|
||||
permModuleList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachedPageChildMixin],
|
||||
data () {
|
||||
return {
|
||||
formData: {
|
||||
SysPerm: {
|
||||
permId: undefined,
|
||||
moduleId: this.currentPermGroupId,
|
||||
permName: undefined,
|
||||
url: undefined,
|
||||
showOrder: undefined,
|
||||
deletedFlag: undefined
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
'SysPerm.permName': [
|
||||
{required: true, message: '请输入权限名称', trigger: 'blur'}
|
||||
],
|
||||
'SysPerm.url': [
|
||||
{required: true, message: '请输入关联的url', trigger: 'blur'}
|
||||
],
|
||||
'SysPerm.showOrder': [
|
||||
{required: true, message: '请输入显示顺序', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
formCreatePerm: {
|
||||
formFilter: {
|
||||
},
|
||||
formFilterCopy: {
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 更新新建权限
|
||||
*/
|
||||
refreshFormCreatePerm (reloadData = false) {
|
||||
if (!this.formCreatePerm.isInit) {
|
||||
this.formData.SysPerm.moduleId = findTreeNodePath(this.permModuleList, this.formData.SysPerm.moduleId, 'moduleId');
|
||||
}
|
||||
this.formCreatePerm.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
onAddClick () {
|
||||
this.$refs.formCreatePerm.validate((valid) => {
|
||||
if (!valid) return;
|
||||
let params = {
|
||||
sysPermDto: {
|
||||
permId: this.permId,
|
||||
showOrder: this.formData.SysPerm.showOrder,
|
||||
moduleId: Array.isArray(this.formData.SysPerm.moduleId) ? this.formData.SysPerm.moduleId[this.formData.SysPerm.moduleId.length - 1] : undefined,
|
||||
url: this.formData.SysPerm.url,
|
||||
permName: this.formData.SysPerm.permName
|
||||
}
|
||||
};
|
||||
|
||||
if (this.isEdit) {
|
||||
SystemController.updatePerm(this, params).then(res => {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
} else {
|
||||
SystemController.addPerm(this, params).then(res => {
|
||||
this.$message.success('新增成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
}
|
||||
});
|
||||
},
|
||||
initFormData () {
|
||||
if (this.rowData != null) this.formData.SysPerm = {...this.formData.SysPerm, ...this.rowData};
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormCreatePerm();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit () {
|
||||
return this.permId != null;
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="110px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20" class="full-width-input">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="所属权限字">
|
||||
<el-cascader :options="permCodeTree" v-model="parentPermCodePath" :props="permCodeProps" filterable
|
||||
:disabled="formData.permCodeId != null || formData.parenId == null" placeholder="选择父权限字" :clearable="true" :change-on-select="true" size="mini" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="权限字名称" prop="showName">
|
||||
<el-input v-model="formData.showName" placeholder="权限字名称" clearable ></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="权限字标识" prop="permCode">
|
||||
<el-input v-model="formData.permCode" placeholder="权限字标识" clearable ></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="权限字类型" prop="permCode">
|
||||
<el-select v-model="formData.permCodeType" placeholder="权限字类型" :disabled="true">
|
||||
<el-option v-for="item in SysPermCodeType.getList()" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="显示顺序" prop="showOrder">
|
||||
<el-input-number v-model="formData.showOrder" controls-position="right"
|
||||
:min="1" :max="99999" placeholder="请输入显示顺序"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-card shadow="never">
|
||||
<div slot="header" class="card-header">
|
||||
<span>权限列表</span>
|
||||
<el-input size="mini" v-model="permNameFilter" placeholder="输入权限名称过滤" style="width: 250px;" clearable suffix-icon="el-icon-search" />
|
||||
</div>
|
||||
<el-scrollbar style="height: 215px;" wrap-class="scrollbar_dropdown__wrap">
|
||||
<el-tree ref="permTree" :data="formData.permCodeType === SysPermCodeType.FORM ? [] : getPermTree" :props="treeProps" show-checkbox
|
||||
node-key="id" empty-text="暂无权限资源" :filter-node-method="filterPermNode"
|
||||
:default-expanded-keys="defaultExpandedKeys">
|
||||
<div slot-scope="{ data }" style="display: flex; justify-content: space-between; width: 100%">
|
||||
<span>{{ data.name }}</span>
|
||||
<span style="margin-right: 10px;">{{ data.url }}</span>
|
||||
</div>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 弹窗按钮 -->
|
||||
<el-row type="flex" justify="end" class="dialog-btn-layer mt20">
|
||||
<el-button size="mini" @click="onCancel(false)" >取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="onSubmit"
|
||||
:disabled="!(checkPermCodeExist('formSysPermCode:fragmentSysPermCode:add') || checkPermCodeExist('formSysPermCode:fragmentSysPermCode:update'))">
|
||||
确定
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { treeDataTranslate, findTreeNodePath } from '@/utils'
|
||||
import { SystemController } from '@/api'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
permCodeTree: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
permCodeType: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
},
|
||||
rowData: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
permNameFilter: undefined,
|
||||
allowParentList: [],
|
||||
formData: {
|
||||
permCodeId: undefined,
|
||||
parentId: undefined,
|
||||
permCode: undefined,
|
||||
permCodeType: this.permCodeType || this.SysPermCodeType.FORM,
|
||||
showName: undefined,
|
||||
showOrder: undefined
|
||||
},
|
||||
parentPermCodePath: [],
|
||||
permList: [],
|
||||
defaultExpandedKeys: [],
|
||||
treeProps: {
|
||||
label: 'name',
|
||||
isLeaf: function (data, node) {
|
||||
return data.isPerm;
|
||||
}
|
||||
},
|
||||
permCodeProps: {
|
||||
label: 'showName',
|
||||
value: 'permCodeId'
|
||||
},
|
||||
rules: {
|
||||
showName: [{required: true, message: '权限字名称不能为空', trigger: 'blur'}],
|
||||
permCode: [{required: true, message: '权限字标识不能为空', trigger: 'blur'}],
|
||||
showOrder: [{required: true, message: '请输入权限字显示顺序', trigger: 'blur'}],
|
||||
permCodeType: [{required: true, message: '请选择权限字类型', trigger: 'blur'}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterPermNode (value, data) {
|
||||
if (!value) return true;
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
this.allowParentList.push(data.id);
|
||||
return true;
|
||||
} else {
|
||||
return this.allowParentList.indexOf(data.parentId) !== -1;
|
||||
}
|
||||
},
|
||||
getTreeLeafKeys () {
|
||||
let selectPermNodeList = this.$refs.permTree.getCheckedNodes();
|
||||
let tempList = [];
|
||||
selectPermNodeList.forEach((item) => {
|
||||
if (item.isPerm) {
|
||||
tempList.push(item.id);
|
||||
}
|
||||
});
|
||||
|
||||
return tempList;
|
||||
},
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let selectedPermList = this.getTreeLeafKeys();
|
||||
let params = {};
|
||||
params.sysPermCodeDto = {...this.formData};
|
||||
delete params.sysPermCodeDto.children;
|
||||
params.sysPermCodeDto.permCodeType = (this.permCodeType == null) ? this.SysPermCodeType.FORM : this.permCodeType;
|
||||
if (this.parentPermCodePath.length > 0) {
|
||||
params.sysPermCodeDto.parentId = this.parentPermCodePath[this.parentPermCodePath.length - 1];
|
||||
}
|
||||
params.permIdListString = selectedPermList.join(',');
|
||||
if (params.sysPermCodeDto.permCodeId != null) {
|
||||
SystemController.updatePermCode(this, params).then(res => {
|
||||
resolve(res);
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
} else {
|
||||
SystemController.addPermCode(this, params).then(res => {
|
||||
resolve(res);
|
||||
this.$message.success('添加成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
initData () {
|
||||
SystemController.getAllPermList(this, {}).then(res => {
|
||||
res.data.forEach((item) => {
|
||||
item.id = item.id + '';
|
||||
item.parentId = item.parentId + '';
|
||||
});
|
||||
this.permList = res.data;
|
||||
this.defaultExpandedKeys = this.formData.permIdList;
|
||||
if (Array.isArray(this.formData.permIdList)) {
|
||||
this.$refs.permTree.setCheckedKeys(this.formData.permIdList, true);
|
||||
}
|
||||
}).catch(e => {});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getPermTree () {
|
||||
return treeDataTranslate(this.permList.map((item) => {
|
||||
return {...item};
|
||||
}), 'id', 'parentId');
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.rowData != null) {
|
||||
this.formData = {...this.formData, ...this.rowData};
|
||||
if (Array.isArray(this.formData.sysPermCodePermList)) {
|
||||
this.formData.permIdList = this.formData.sysPermCodePermList.map(item => item.permId);
|
||||
}
|
||||
if (this.formData.parentId != null && this.permCodeTree != null && Array.isArray(this.permCodeTree)) {
|
||||
this.parentPermCodePath = findTreeNodePath(this.permCodeTree, this.formData.parentId, 'permCodeId');
|
||||
} else {
|
||||
this.parentPermCodePath = [];
|
||||
}
|
||||
}
|
||||
|
||||
this.initData();
|
||||
},
|
||||
watch: {
|
||||
permNameFilter (val) {
|
||||
this.allowParentList = [];
|
||||
this.$refs.permTree.filter(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div class="form-single-fragment" style="position: relative;">
|
||||
<el-form ref="formCreatePermModule" :model="formData" class="full-width-input" :rules="rules" style="width: 100%;"
|
||||
label-width="120px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="模块名称" prop="SysPermModule.moduleName">
|
||||
<el-input class="input-item" v-model="formData.SysPermModule.moduleName"
|
||||
:clearable="true" placeholder="权限模块名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="模块类型">
|
||||
<el-select class="input-item" v-model="formData.SysPermModule.moduleType"
|
||||
placeholder="模块类型" :clearable="true" size="mini" :disabled="isEdit">
|
||||
<el-option v-for="item in SysPermModuleType.getList()" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="所属模块">
|
||||
<el-cascader class="input-item" :options="getPermGroupTree" v-model="formData.SysPermModule.parentId"
|
||||
placeholder="选择所属模块" :clearable="true" size="mini"
|
||||
:props="{value: 'moduleId', label: 'moduleName', checkStrictly: true}" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="显示顺序" prop="SysPermModule.showOrder">
|
||||
<el-input-number class="input-item" v-model="formData.SysPermModule.showOrder"
|
||||
:clearable="true" controls-position="right" placeholder="权限模块在当前层级下的顺序" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end">
|
||||
<el-button type="primary" size="mini" :plain="true" @click="onCancel(false)">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="onAddClick()"
|
||||
:disabled="!(checkPermCodeExist('formSysPerm:fragmentSysPerm:addPermModule') || checkPermCodeExist('formSysPerm:fragmentSysPerm:updatePermModule'))">
|
||||
保存
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { treeDataTranslate, findTreeNodePath } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { DictionaryController, SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'formEditSysPermModule',
|
||||
props: {
|
||||
parentId: {
|
||||
default: undefined
|
||||
},
|
||||
moduleType: {
|
||||
default: undefined
|
||||
},
|
||||
moduleId: {
|
||||
default: undefined
|
||||
},
|
||||
rowData: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
},
|
||||
moduleList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachedPageChildMixin],
|
||||
data () {
|
||||
return {
|
||||
formData: {
|
||||
SysPermModule: {
|
||||
moduleId: undefined,
|
||||
parentId: undefined,
|
||||
moduleName: undefined,
|
||||
moduleType: undefined,
|
||||
level: undefined,
|
||||
showOrder: undefined
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
'SysPermModule.moduleName': [
|
||||
{required: true, message: '请输入模块名称', trigger: 'blur'}
|
||||
],
|
||||
'SysPermModule.showOrder': [
|
||||
{required: true, message: '请输入显示顺序', trigger: 'blur'}
|
||||
]
|
||||
},
|
||||
formCreatePermModule: {
|
||||
formFilter: {
|
||||
},
|
||||
formFilterCopy: {
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCancel (isSuccess) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 更新新建权限模块
|
||||
*/
|
||||
refreshFormCreatePermModule (reloadData = false) {
|
||||
if (!this.formCreatePermModule.isInit) {
|
||||
this.formData.SysPermModule.parentId = findTreeNodePath(this.getPermGroupTree, this.formData.SysPermModule.parentId, 'moduleId')
|
||||
}
|
||||
this.formCreatePermModule.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
onAddClick () {
|
||||
this.$refs.formCreatePermModule.validate((valid) => {
|
||||
if (!valid) return;
|
||||
let params = {
|
||||
sysPermModuleDto: {
|
||||
moduleId: this.moduleId,
|
||||
moduleName: this.formData.SysPermModule.moduleName,
|
||||
showOrder: this.formData.SysPermModule.showOrder,
|
||||
moduleType: this.formData.SysPermModule.moduleType,
|
||||
parentId: Array.isArray(this.formData.SysPermModule.parentId) ? this.formData.SysPermModule.parentId[this.formData.SysPermModule.parentId.length - 1] : undefined
|
||||
}
|
||||
};
|
||||
|
||||
if (this.isEdit) {
|
||||
SystemController.updatePermGroup(this, params).then(res => {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
} else {
|
||||
SystemController.addPermGroup(this, params).then(res => {
|
||||
this.$message.success('新增成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
}
|
||||
});
|
||||
},
|
||||
initFormData () {
|
||||
if (this.rowData != null) {
|
||||
this.formData.SysPermModule = {...this.formData.SysPermModule, ...this.rowData};
|
||||
}
|
||||
if (this.parentId != null) this.formData.SysPermModule.parentId = this.parentId;
|
||||
if (this.moduleType != null) this.formData.SysPermModule.moduleType = this.moduleType;
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormCreatePermModule();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit () {
|
||||
return this.moduleId != null;
|
||||
},
|
||||
getPermGroupTree () {
|
||||
let tempList = this.moduleList.map((item) => {
|
||||
if (item.moduleType === this.SysPermModuleType.GROUP) {
|
||||
return {...item, children: undefined};
|
||||
}
|
||||
}).filter((item) => {
|
||||
return item != null;
|
||||
});
|
||||
return treeDataTranslate(tempList, 'moduleId');
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="80px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="角色名称" prop="roleName">
|
||||
<el-input v-model="formData.roleName" placeholder="角色名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="false" label="角色类型" :required="true">
|
||||
<el-radio-group v-model="formData.adminRole">
|
||||
<el-radio :label="1">管理员</el-radio>
|
||||
<el-radio :label="0">其他</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-card shadow="never">
|
||||
<div slot="header" class="card-header">
|
||||
<span>菜单权限</span>
|
||||
<el-input size="mini" v-model="menuNameFilter" placeholder="输入菜单名称过滤" style="width: 250px;" clearable suffix-icon="el-icon-search" />
|
||||
</div>
|
||||
<el-scrollbar style="height: 230px;" wrap-class="scrollbar_dropdown__wrap">
|
||||
<el-tree ref="authTree" :data="authData" :props="treeProps" :check-strictly="false"
|
||||
show-checkbox node-key="menuId" :filter-node-method="filterMneuNode">
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 弹窗下发按钮栏，必须设置class为dialog-btn-layer -->
|
||||
<el-row type="flex" justify="end" class="dialog-btn-layer" style="margin-top: 20px;">
|
||||
<el-button size="mini" @click="onCancel(false)" >取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="onSubmit"
|
||||
:disabled="!(checkPermCodeExist('formSysRole:fragmentSysRole:update') || checkPermCodeExist('formSysRole:fragmentSysRole:add'))">
|
||||
确定
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { treeDataTranslate, findItemFromList } from '@/utils'
|
||||
import { SystemController } from '@/api'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menuNameFilter: undefined,
|
||||
formData: {
|
||||
roleId: undefined,
|
||||
roleName: undefined,
|
||||
adminRole: false,
|
||||
menuIdListString: undefined
|
||||
/*
|
||||
permsJsonData: {
|
||||
checked: [],
|
||||
halfChecked: [],
|
||||
},
|
||||
*/
|
||||
},
|
||||
rules: {
|
||||
roleName: [{required: true, message: '角色名称不能为空', trigger: 'blur'}]
|
||||
},
|
||||
treeProps: {
|
||||
label: 'menuName'
|
||||
},
|
||||
authData: [],
|
||||
allowParentList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterMneuNode (value, data) {
|
||||
if (!value) return true;
|
||||
if (data.menuName.indexOf(value) !== -1) {
|
||||
this.allowParentList.push(data.menuId);
|
||||
return true;
|
||||
} else {
|
||||
return this.allowParentList.indexOf(data.parentId) !== -1;
|
||||
}
|
||||
},
|
||||
onCancel (isSuccess = false) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
let selectMenu = [];
|
||||
selectMenu = this.$refs.authTree.getHalfCheckedKeys();
|
||||
selectMenu = selectMenu.concat(this.$refs.authTree.getCheckedKeys());
|
||||
|
||||
if (selectMenu.length <= 0) {
|
||||
this.$message.error({message: '请选择角色的菜单权限', showClose: true});
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
sysRoleDto: {...this.formData}
|
||||
}
|
||||
params.menuIdListString = selectMenu.join(',');
|
||||
if (this.isEdit) {
|
||||
SystemController.updateRole(this, params).then(res => {
|
||||
this.$message.success('编辑成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
} else {
|
||||
SystemController.addRole(this, params).then(res => {
|
||||
this.$message.success('添加成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
loadAuthData () {
|
||||
SystemController.getMenuPermList(this, {}).then(res => {
|
||||
this.authData = treeDataTranslate(res.data, 'menuId', 'parentId');
|
||||
if (Array.isArray(this.formData.menuIdList)) {
|
||||
let tempList = [];
|
||||
this.formData.menuIdList.forEach((item) => {
|
||||
let tempMenu = findItemFromList(res.data, item, 'menuId');
|
||||
// 判断是否为叶子节点
|
||||
if (tempMenu != null && (!Array.isArray(tempMenu.children) || tempMenu.children.length <= 0)) {
|
||||
tempList.push(item);
|
||||
}
|
||||
});
|
||||
this.$refs.authTree.setCheckedKeys(tempList);
|
||||
}
|
||||
}).catch(e => {});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit () {
|
||||
return this.formData.roleId != null;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.rowData) {
|
||||
this.formData = {...this.formData, ...this.rowData};
|
||||
if (Array.isArray(this.formData.sysRoleMenuList)) {
|
||||
this.formData.menuIdList = this.formData.sysRoleMenuList.map(item => item.menuId);
|
||||
}
|
||||
}
|
||||
this.loadAuthData();
|
||||
},
|
||||
watch: {
|
||||
menuNameFilter (val) {
|
||||
this.allowParentList = [];
|
||||
this.$refs.authTree.filter(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="110px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<el-row :gutter="20" class="full-width-input">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="登录名称" prop="loginName">
|
||||
<el-input v-model="formData.loginName" placeholder="用户登录名称" clearable :disabled="isEdit" />
|
||||
</el-form-item>
|
||||
<el-form-item label="登录密码" v-if="!isEdit" prop="password">
|
||||
<el-input v-model="formData.password" type="password" placeholder="用户登录密码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="再次输入密码" v-if="!isEdit" prop="passwordRepeat">
|
||||
<el-input v-model="formData.passwordRepeat" type="password" placeholder="再次输入用户密码" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户昵称" prop="showName">
|
||||
<el-input v-model="formData.showName" placeholder="用户昵称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="账号类型" prop="userType">
|
||||
<el-select v-model="formData.userType">
|
||||
<el-option v-for="item in SysUserType.getList()" :key="item.id"
|
||||
:label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户状态" prop="userStatus" v-if="isEdit">
|
||||
<el-radio-group v-model="formData.userStatus">
|
||||
<el-radio v-for="item in SysUserStatus.getList()" :key="item.id" :label="item.id">
|
||||
{{item.name}}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户角色" prop="roleIdList">
|
||||
<el-select v-model="formData.roleIdList" multiple placeholder="用户角色">
|
||||
<el-option v-for="role in roleList" :key="role.roleId"
|
||||
:label="role.roleName" :value="role.roleId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 弹窗下发按钮栏，必须设置class为dialog-btn-layer -->
|
||||
<el-row type="flex" justify="end" class="dialog-btn-layer">
|
||||
<el-button size="mini" type="primary" :plain="true" @click="onCancel(false)" >取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="onSubmit"
|
||||
:disabled="!(checkPermCodeExist('formSysUser:fragmentSysUser:update') || checkPermCodeExist('formSysUser:fragmentSysUser:add'))">
|
||||
确定
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable-next-line */
|
||||
import { findTreeNodePath } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
import { SystemController } from '@/api';
|
||||
import { uploadMixin } from '@/core/mixins';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
rowData: Object
|
||||
},
|
||||
mixins: [uploadMixin],
|
||||
data () {
|
||||
return {
|
||||
formData: {
|
||||
userId: undefined,
|
||||
loginName: undefined,
|
||||
password: undefined,
|
||||
showName: undefined,
|
||||
userType: 2,
|
||||
userStatus: 0,
|
||||
roleIdList: []
|
||||
},
|
||||
params: {
|
||||
userId: undefined,
|
||||
loginName: undefined,
|
||||
password: undefined,
|
||||
showName: undefined,
|
||||
|
||||
userType: 2,
|
||||
userStatus: 0,
|
||||
roleIdListString: undefined
|
||||
},
|
||||
rules: {
|
||||
loginName: [{required: true, message: '用户名称不能为空', trigger: 'blur'}],
|
||||
password: [{required: true, message: '用户密码不能为空', trigger: 'blur'}],
|
||||
passwordRepeat: [{required: true, message: '重输密码不能为空', trigger: 'blur'}],
|
||||
showName: [{required: true, message: '用户昵称不能为空', trigger: 'blur'}],
|
||||
roleIdList: [{required: true, message: '用户角色不能为空', trigger: 'change'}]
|
||||
},
|
||||
showHeaderSelect: false,
|
||||
roleList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCancel (isSuccess = false) {
|
||||
if (this.observer != null) {
|
||||
this.observer.cancel(isSuccess);
|
||||
}
|
||||
},
|
||||
onSubmit () {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.formData.userId == null && (this.formData.password !== this.formData.passwordRepeat)) {
|
||||
this.$message.error({message: '两次密码输入不一致，请重新输入', showClose: true});
|
||||
return;
|
||||
}
|
||||
|
||||
let params = {
|
||||
sysUserDto: {
|
||||
userId: this.formData.userId,
|
||||
loginName: this.formData.loginName,
|
||||
password: this.formData.password,
|
||||
showName: this.formData.showName,
|
||||
userType: this.formData.userType,
|
||||
|
||||
userStatus: this.formData.userStatus
|
||||
},
|
||||
roleIdListString: Array.isArray(this.formData.roleIdList) ? this.formData.roleIdList.join(',') : undefined
|
||||
}
|
||||
|
||||
let operation = null;
|
||||
if (this.formData.userId != null) {
|
||||
operation = SystemController.updateUser(this, params);
|
||||
} else {
|
||||
operation = SystemController.addUser(this, params);
|
||||
}
|
||||
|
||||
operation.then(res => {
|
||||
this.$message.success(this.formData.userId != null ? '编辑成功' : '添加成功');
|
||||
this.onCancel(true);
|
||||
}).catch(e => {
|
||||
//
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
loadRole () {
|
||||
SystemController.getRoleList(this, {}).then(res => {
|
||||
this.roleList = res.data.dataList;
|
||||
}).catch(e => {});
|
||||
},
|
||||
loadRowData (id) {
|
||||
var params = {
|
||||
userId: id
|
||||
}
|
||||
return SystemController.getUser(this, params);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit () {
|
||||
return (this.formData.userId != null);
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.rowData != null) {
|
||||
this.formData = {...this.rowData, roleIdList: []};
|
||||
if (Array.isArray(this.formData.sysUserRoleList)) {
|
||||
this.formData.roleIdList = this.formData.sysUserRoleList.map(item => item.roleId);
|
||||
}
|
||||
}
|
||||
this.loadRole();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="75px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="关联URL">
|
||||
<el-input class="filter-item" v-model="formMenuPerm.formFilter.url"
|
||||
:clearable="true" placeholder="权限字名称" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" size="mini" :plain="true" @click="refreshFormMenuPerm(true)">
|
||||
查询
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="getPermList" size="mini" height="459px"
|
||||
@sort-change="formMenuPerm.SysPerm.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px" :index="formMenuPerm.SysPerm.impl.getTableIndex" />
|
||||
<el-table-column label="权限字名称" prop="showName" width="150px">
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字类型" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="getPermCodeType(scope.row.permCodeType)">
|
||||
{{SysPermCodeType.getValue(scope.row.permCodeType)}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字标识" prop="permCode" width="300px" />
|
||||
<el-table-column label="权限名称" prop="permName" width="150px" />
|
||||
<el-table-column label="关联URL" prop="url" min-width="300px">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'formMenuPerm',
|
||||
props: {
|
||||
menuId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formMenuPerm: {
|
||||
formFilter: {
|
||||
menuId: this.menuId,
|
||||
url: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
menuId: this.menuId,
|
||||
url: undefined
|
||||
},
|
||||
SysPerm: {
|
||||
impl: new TableWidget(this.loadSysPermData, this.loadSysPermVerify, false)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPermCodeType (permCodeType) {
|
||||
switch (permCodeType) {
|
||||
case this.SysPermCodeType.FORM: return 'primary';
|
||||
case this.SysPermCodeType.FRAGMENT: return 'warning';
|
||||
case this.SysPermCodeType.OPERATION: return 'success';
|
||||
default: return 'info';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 权限数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysPermData (params) {
|
||||
params = {
|
||||
...params,
|
||||
menuId: this.formMenuPerm.formFilterCopy.menuId
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listMenuPerm(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 权限数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysPermVerify () {
|
||||
this.formMenuPerm.formFilterCopy.url = this.formMenuPerm.formFilter.url;
|
||||
this.formMenuPerm.formFilterCopy.menuId = this.formMenuPerm.formFilter.menuId;
|
||||
if (this.formMenuPerm.formFilterCopy.menuId == null || this.formMenuPerm.formFilterCopy.menuId === '') {
|
||||
this.$message.error('所属菜单不能为空！');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新权限管理
|
||||
*/
|
||||
refreshFormMenuPerm (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formMenuPerm.SysPerm.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formMenuPerm.SysPerm.impl.refreshTable();
|
||||
}
|
||||
this.formMenuPerm.isInit = true;
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormMenuPerm();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormMenuPerm();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getPermList () {
|
||||
return this.formMenuPerm.SysPerm.impl.dataList.filter((item) => {
|
||||
return (this.formMenuPerm.formFilterCopy.url == null || this.formMenuPerm.formFilterCopy.url === '') ||
|
||||
(item.url.indexOf(this.formMenuPerm.formFilterCopy.url) !== -1);
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="75px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="325">
|
||||
<el-form-item label="用户状态">
|
||||
<el-select class="filter-item" v-model="formSysUser.formFilter.sysUserStatus" :clearable="true"
|
||||
placeholder="用户状态" :loading="formSysUser.sysUserStatus.impl.loading"
|
||||
@visible-change="onSysUserStatusVisibleChange">
|
||||
<el-option v-for="item in formSysUser.sysUserStatus.impl.dropdownList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名">
|
||||
<el-input class="filter-item" v-model="formSysUser.formFilter.sysUserLoginName"
|
||||
:clearable="true" placeholder="用户名" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFormSysUser(true)">查询</el-button>
|
||||
<el-button slot="operator" size="mini" type="primary" :plain="false" @click="onSetUser"
|
||||
:disabled="selectUsers == null || selectUsers.length <= 0">授权人员</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="formSysUser.SysUser.impl.dataList" size="mini" row-key="userId" ref="userTable"
|
||||
header-cell-class-name="table-header-gray" height="395px" @selection-change="onTableSelectionChange">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px" :index="formSysUser.SysUser.impl.getTableIndex" />
|
||||
<el-table-column header-align="center" align="center" type="selection" width="50px" :reserve-selection="true" />
|
||||
<el-table-column label="用户名" prop="loginName">
|
||||
</el-table-column>
|
||||
<el-table-column label="昵称" prop="showName">
|
||||
</el-table-column>
|
||||
<el-table-column label="账号类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{SysUserType.getValue(scope.row.userType)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getUserStatusType(scope.row.userStatus)" size="mini">{{SysUserStatus.getValue(scope.row.userStatus)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="formSysUser.SysUser.impl.totalCount"
|
||||
:current-page="formSysUser.SysUser.impl.currentPage"
|
||||
:page-size="formSysUser.SysUser.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="formSysUser.SysUser.impl.onCurrentPageChange"
|
||||
@size-change="formSysUser.SysUser.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
roleId: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formSysUser: {
|
||||
formFilter: {
|
||||
sysUserStatus: undefined,
|
||||
sysUserLoginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
sysUserStatus: undefined,
|
||||
sysUserLoginName: undefined
|
||||
},
|
||||
sysUserStatus: {
|
||||
impl: new DropdownWidget(this.loadSysUserStatusDropdownList)
|
||||
},
|
||||
SysUser: {
|
||||
impl: new TableWidget(this.loadSysUserData, this.loadSysUserVerify, true, false)
|
||||
},
|
||||
isInit: false
|
||||
},
|
||||
selectUsers: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 用户状态下拉数据获取函数
|
||||
*/
|
||||
loadSysUserStatusDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
DictionaryController.dictSysUserStatus(this, params).then(res => {
|
||||
resolve(res.getList());
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户状态下拉框显隐
|
||||
*/
|
||||
onSysUserStatusVisibleChange (show) {
|
||||
this.formSysUser.sysUserStatus.impl.onVisibleChange(show).catch(e => {});
|
||||
},
|
||||
getUserStatusType (status) {
|
||||
if (status === this.SysUserStatus.NORMAL) {
|
||||
return 'success';
|
||||
} else if (status === this.SysUserStatus.LOCKED) {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'info';
|
||||
}
|
||||
},
|
||||
onTableSelectionChange (values) {
|
||||
this.selectUsers = values;
|
||||
},
|
||||
onSetUser () {
|
||||
let params = {
|
||||
roleId: this.roleId,
|
||||
userIdListString: this.selectUsers.map((item) => {
|
||||
return item.userId
|
||||
}).join(',')
|
||||
}
|
||||
|
||||
SystemController.addRoleUser(this, params).then(res => {
|
||||
this.$message.success('授权成功');
|
||||
this.refreshFormSysUser(true);
|
||||
this.$refs.userTable.clearSelection();
|
||||
this.selectUsers = [];
|
||||
}).catch(e => {});
|
||||
},
|
||||
onCancel () {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
loadSysUserData (params) {
|
||||
params.roleId = this.roleId;
|
||||
params.sysUserDtoFilter = {
|
||||
loginName: this.formSysUser.formFilterCopy.sysUserLoginName,
|
||||
userStatus: this.formSysUser.formFilterCopy.sysUserStatus
|
||||
}
|
||||
this.$refs.userTable.clearSelection();
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listNotInUserRole(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserVerify () {
|
||||
this.formSysUser.formFilterCopy.sysUserLoginName = this.formSysUser.formFilter.sysUserLoginName;
|
||||
this.formSysUser.formFilterCopy.sysUserStatus = this.formSysUser.formFilter.sysUserStatus;
|
||||
return true;
|
||||
},
|
||||
refreshFormSysUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formSysUser.SysUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formSysUser.SysUser.impl.refreshTable();
|
||||
}
|
||||
this.formSysUser.sysUserStatus.impl.onVisibleChange(true).catch(e => {});
|
||||
this.formSysUser.isInit = true;
|
||||
},
|
||||
initData () {
|
||||
this.refreshFormSysUser();
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData();
|
||||
},
|
||||
computed: {
|
||||
getContextHeightStyle () {
|
||||
return [
|
||||
{'height': (this.getClientHeight - 142) + 'px'}
|
||||
]
|
||||
},
|
||||
...mapGetters(['getClientHeight'])
|
||||
},
|
||||
watch: {
|
||||
currentPage: function (value, oldValue) {
|
||||
this.loadDatasource(false).catch(e => {
|
||||
this.currentPage = oldValue;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div style="position: relative;">
|
||||
<el-form label-width="100px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="登录名称">
|
||||
<el-input class="filter-item" v-model="formSysLoginUser.formFilter.loginName" :clearable="true" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFormOperationType(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table ref="teacher" :data="formSysLoginUser.loginUser.impl.dataList" size="mini" @sort-change="formSysLoginUser.loginUser.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="formSysLoginUser.loginUser.impl.getTableIndex" />
|
||||
<el-table-column label="登录名称" prop="loginName" />
|
||||
<el-table-column label="用户昵称" prop="showName" />
|
||||
<el-table-column label="登录 IP" prop="loginIp" />
|
||||
<el-table-column label="登录时间" prop="loginTime" />
|
||||
<el-table-column label="操作" fixed="right" width="150px" >
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.stop="onDeleteLoginUserClick(scope.row)" type="text" size="mini">
|
||||
强退
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="formSysLoginUser.loginUser.impl.totalCount"
|
||||
:current-page="formSysLoginUser.loginUser.impl.currentPage"
|
||||
:page-size="formSysLoginUser.loginUser.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="formSysLoginUser.loginUser.impl.onCurrentPageChange"
|
||||
@size-change="formSysLoginUser.loginUser.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable-next-line */
|
||||
import { TableWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'formSysLoginUser',
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formSysLoginUser: {
|
||||
formFilter: {
|
||||
loginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
loginName: undefined
|
||||
},
|
||||
loginUser: {
|
||||
impl: new TableWidget(this.loadLoginUserWidgetData, this.loadLoginUserVerify, true, false)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 登录用户数据数据获取函数，返回Promise
|
||||
*/
|
||||
loadLoginUserWidgetData (params) {
|
||||
if (params == null) params = {};
|
||||
params = {
|
||||
...params,
|
||||
loginName: this.formSysLoginUser.formFilterCopy.loginName
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysLoginUser(this, params).then(res => {
|
||||
console.log(res);
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 登录用户数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadLoginUserVerify () {
|
||||
this.formSysLoginUser.formFilterCopy = { ...this.formSysLoginUser.formFilter };
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 强制踢出登录用户
|
||||
*/
|
||||
onDeleteLoginUserClick (row) {
|
||||
this.$confirm('是否删除此用户？').then(res => {
|
||||
SystemController.deleteSysLoginUser(this, {
|
||||
sessionId: row.sessionId
|
||||
}).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formSysLoginUser.loginUser.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 更新操作日志
|
||||
*/
|
||||
refreshFormOperationType (reloadData = false) {
|
||||
if (reloadData) {
|
||||
this.formSysLoginUser.loginUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formSysLoginUser.loginUser.impl.refreshTable();
|
||||
}
|
||||
if (!this.formSysLoginUser.isInit) {
|
||||
// 初始化下拉数据
|
||||
}
|
||||
this.formSysLoginUser.isInit = true;
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormOperationType();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.refreshFormOperationType();
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 初始化页面数据
|
||||
this.formInit();
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative;">
|
||||
<el-tabs v-model="activeFragment">
|
||||
<el-tab-pane label="栏目管理" name="fragmentSysColumn" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<el-row type="flex" justify="end" style="margin-bottom: 18px;">
|
||||
<el-button type="primary" size="mini" :plain="true"
|
||||
@click="initFormData()">
|
||||
刷新
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" :disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:add')"
|
||||
@click="onCreateSysColumnClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="columnList" size="mini" :height="getTabPaneHeight + 'px'"
|
||||
header-cell-class-name="table-header-gray" row-key="menuId">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
|
||||
<el-table-column label="栏目名称" prop="columnName" />
|
||||
<el-table-column label="显示顺序" prop="showOrder" />
|
||||
<el-table-column label="操作" width="200px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditSysColumnClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:delete')">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="菜单管理" name="fragmentSysMenu" style="width: 100%;">
|
||||
<el-form label-width="80px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="所属栏目" style="flex-grow: 1">
|
||||
<el-select class="filter-item" v-model="currentColumnId" filterable
|
||||
placeholder="所属栏目">
|
||||
<el-option v-for="item in columnList" :key="item.columnId" :value="item.columnId" :label="item.columnName" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row type="flex" justify="end">
|
||||
<el-button type="primary" size="mini" :plain="true"
|
||||
@click="initFormData(true)">
|
||||
刷新
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" :disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:add')"
|
||||
@click="onCreateSysMenuClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="currentMenuTree" size="mini" :height="getTabPaneHeight + 'px'"
|
||||
header-cell-class-name="table-header-gray" row-key="menuId">
|
||||
<el-table-column label="菜单名称" prop="menuName" width="300px">
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单图标" prop="icon" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<i :class="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单顺序" prop="showOrder" width="100px">
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="menuType" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单路由" prop="formRouterName" min-width="250px">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditSysMenuClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onAddChildSysMenuClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:add') || scope.row.menuType === SysMenuType.BUTTON">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:delete')">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button @click="onShowPermList(scope.row)" type="text" size="mini"
|
||||
v-if="checkPermCodeExist('formSysMenu:fragmentSysMenu:listSysMenuPermDetail')"
|
||||
:disabled="scope.row.menuType === SysMenuType.DIRECTORY">
|
||||
权限详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { treeDataTranslate } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { DictionaryController, SystemController } from '@/api';
|
||||
import formEditSysMenu from '@/views/upms/formEditSysMenu';
|
||||
import formMenuPerm from './formSysMenuPerm';
|
||||
import formEditColumn from '@/views/upms/formEditSysMenu/editColumn.vue';
|
||||
|
||||
export default {
|
||||
name: 'formSysMenu',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
activeFragment: 'fragmentSysColumn',
|
||||
allMenuList: [],
|
||||
menuTree: [],
|
||||
currentColumnId: undefined,
|
||||
formSysMenu: {
|
||||
currentColumnId: {
|
||||
impl: new DropdownWidget(this.loadCurrentColumnDropdownList, false, 'columnId', 'columnName'),
|
||||
value: []
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMenuType (row) {
|
||||
if (row.menuType === 0) {
|
||||
return 'primary'
|
||||
} else if (row.menuType === 1) {
|
||||
return 'success';
|
||||
} else if (row.menuType === 2) {
|
||||
return 'danger';
|
||||
} else if (row.menuType === 3) {
|
||||
return 'warning';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 新建栏目
|
||||
*/
|
||||
onCreateSysColumnClick () {
|
||||
this.$dialog.show('新建', formEditColumn, {
|
||||
area: ['500px']
|
||||
}, {}).then(res => {
|
||||
this.initFormData();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑栏目
|
||||
*/
|
||||
onEditSysColumnClick (row) {
|
||||
this.$dialog.show('编辑', formEditColumn, {
|
||||
area: ['500px']
|
||||
}, {
|
||||
...row
|
||||
}).then(res => {
|
||||
this.initFormData();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 新建菜单
|
||||
*/
|
||||
onCreateSysMenuClick () {
|
||||
let params = {
|
||||
parentId: this.currentColumnId,
|
||||
menuList: this.allMenuList
|
||||
};
|
||||
this.$dialog.show('新建', formEditSysMenu, {
|
||||
area: ['800px']
|
||||
}, params).then(res => {
|
||||
this.initFormData();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑菜单
|
||||
*/
|
||||
onEditSysMenuClick (row) {
|
||||
SystemController.viewMenu(this, {menuId: row.menuId}).then(res => {
|
||||
let params = {
|
||||
rowData: res.data,
|
||||
menuId: row.menuId,
|
||||
menuList: this.allMenuList
|
||||
};
|
||||
|
||||
this.$dialog.show('编辑', formEditSysMenu, {
|
||||
area: ['800px']
|
||||
}, params).then(res => {
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 添加子菜单
|
||||
*/
|
||||
onAddChildSysMenuClick (row) {
|
||||
let params = {
|
||||
parentId: row.menuId,
|
||||
menuList: this.allMenuList
|
||||
};
|
||||
|
||||
this.$dialog.show('添加子菜单', formEditSysMenu, {
|
||||
area: ['800px']
|
||||
}, params).then(res => {
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteClick (row) {
|
||||
let params = {
|
||||
menuId: row.menuId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此菜单项？').then(res => {
|
||||
SystemController.deleteMenu(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 权限详情
|
||||
*/
|
||||
onShowPermList (row) {
|
||||
let params = {
|
||||
menuId: row.menuId
|
||||
};
|
||||
|
||||
this.$dialog.show('权限详情 - ' + row.menuName, formMenuPerm, {
|
||||
area: '1200px',
|
||||
offset: '30px'
|
||||
}, params).catch(e => {
|
||||
});
|
||||
},
|
||||
onResume () {
|
||||
this.initFormData();
|
||||
},
|
||||
initFormData () {
|
||||
SystemController.getMenuPermList(this, {}).then(res => {
|
||||
this.allMenuList = res.data.map((item) => {
|
||||
return {...item};
|
||||
});
|
||||
this.menuTree = treeDataTranslate(res.data, 'menuId');
|
||||
// 获取默认的栏目
|
||||
this.currentColumnId = undefined;
|
||||
for (let i = 0; i < this.menuTree.length; i++) {
|
||||
if (this.menuTree[i].menuType === this.SysMenuType.DIRECTORY) {
|
||||
this.currentColumnId = this.menuTree[i].menuId;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}).catch(e => {});
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
},
|
||||
computed: {
|
||||
getTabPaneHeight () {
|
||||
return (this.getMainContextHeight - 150);
|
||||
},
|
||||
currentMenuTree () {
|
||||
if (this.currentColumnId == null || this.currentColumnId === '') return [];
|
||||
for (let i = 0; i < this.menuTree.length; i++) {
|
||||
if (this.menuTree[i].menuId === this.currentColumnId) return this.menuTree[i].children;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
columnList () {
|
||||
return this.menuTree.map((item) => {
|
||||
return {
|
||||
menuId: item.menuId,
|
||||
columnId: item.menuId,
|
||||
columnName: item.menuName,
|
||||
showOrder: item.showOrder
|
||||
};
|
||||
});
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative; margin-top: -15px;">
|
||||
<el-tabs v-model="activeFragmentId">
|
||||
<el-tab-pane label="权限资源" name="fragmentSysMenuPerm" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="URL">
|
||||
<el-input class="filter-item" v-model="fragmentSysMenuPerm.formFilter.url" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshfragmentSysMenuPerm(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysMenuPerm.SysMenuPerm.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysMenuPerm.SysMenuPerm.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysMenuPerm.SysMenuPerm.impl.getTableIndex" />
|
||||
<el-table-column label="权限字名称" prop="showName" width="150px">
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字类型" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="getPermCodeType(scope.row.permCodeType)">
|
||||
{{SysPermCodeType.getValue(scope.row.permCodeType)}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字标识" prop="permCode" width="300px" />
|
||||
<el-table-column label="权限名称" prop="permName" width="150px" />
|
||||
<el-table-column label="关联URL" prop="url" min-width="300px">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="用户查询" name="fragmentSysMenuUser" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="用户名">
|
||||
<el-input class="filter-item" v-model="fragmentSysMenuUser.formFilter.loginName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFragmentSysMenuUser(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysMenuUser.SysMenuUser.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysMenuUser.SysMenuUser.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysMenuUser.SysMenuUser.impl.getTableIndex" />
|
||||
<el-table-column label="用户名" prop="loginName" />
|
||||
<el-table-column label="用户昵称" prop="showName" />
|
||||
<el-table-column label="用户角色" prop="roleName" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'SysMenuPerm',
|
||||
props: {
|
||||
menuId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: 'fragmentSysMenuPerm',
|
||||
fragmentSysMenuPerm: {
|
||||
formFilter: {
|
||||
url: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
url: undefined
|
||||
},
|
||||
SysMenuPerm: {
|
||||
impl: new TableWidget(this.loadSysMenuPermData, this.loadSysMenuPermVerify, false, false)
|
||||
}
|
||||
},
|
||||
fragmentSysMenuUser: {
|
||||
formFilter: {
|
||||
loginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
loginName: undefined
|
||||
},
|
||||
SysMenuUser: {
|
||||
impl: new TableWidget(this.loadSysMenuUserData, this.loadSysMenuUserVerify, false, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取菜单权限资源函数，返回Promise
|
||||
*/
|
||||
loadSysMenuPermData (params) {
|
||||
params.menuId = this.menuId;
|
||||
params.url = this.fragmentSysMenuPerm.formFilterCopy.url;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysPermByMenuIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 菜单权限资源获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysMenuPermVerify () {
|
||||
this.fragmentSysMenuPerm.formFilterCopy.url = this.fragmentSysMenuPerm.formFilter.url;
|
||||
return true;
|
||||
},
|
||||
getPermCodeType (permCodeType) {
|
||||
switch (permCodeType) {
|
||||
case this.SysPermCodeType.FORM: return 'primary';
|
||||
case this.SysPermCodeType.FRAGMENT: return 'warning';
|
||||
case this.SysPermCodeType.OPERATION: return 'success';
|
||||
default: return 'info';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 更新菜单权限资源
|
||||
*/
|
||||
refreshfragmentSysMenuPerm (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysMenuPerm.SysMenuPerm.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysMenuPerm.SysMenuPerm.impl.refreshTable();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取菜单用户函数，返回Promise
|
||||
*/
|
||||
loadSysMenuUserData (params) {
|
||||
params.menuId = this.menuId;
|
||||
params.loginName = this.fragmentSysMenuUser.formFilterCopy.loginName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysUserByMenuIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 菜单用户获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysMenuUserVerify () {
|
||||
if (this.fragmentSysMenuUser.formFilter.loginName == null || this.fragmentSysMenuUser.formFilter.loginName === '') {
|
||||
this.$message.error('请输入用户名！');
|
||||
return false;
|
||||
}
|
||||
this.fragmentSysMenuUser.formFilterCopy.loginName = this.fragmentSysMenuUser.formFilter.loginName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新菜单用户
|
||||
*/
|
||||
refreshFragmentSysMenuUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysMenuUser.SysMenuUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysMenuUser.SysMenuUser.impl.refreshTable();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 150);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
mounted () {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="100px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-button slot="operator" type="primary" size="mini" :plain="true"
|
||||
@click="refreshFormSysMenu(true)">
|
||||
刷新
|
||||
</el-button>
|
||||
<el-button slot="operator" type="primary" size="mini" :disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:add')"
|
||||
@click="onCreateSysMenuClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="formSysMenu.SysMenu.impl.dataList" size="mini"
|
||||
header-cell-class-name="table-header-gray" row-key="menuId">
|
||||
<el-table-column label="菜单名称" prop="menuName" width="300px">
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单图标" prop="icon" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<i :class="scope.row.icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单顺序" prop="showOrder" width="100px">
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="menuType" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单路由" prop="formRouterName" min-width="250px">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="200px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditSysMenuClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onAddChildSysMenuClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:add') || scope.row.menuType === SysMenuType.BUTTON">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysMenu:fragmentSysMenu:delete')">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button @click="onShowPermList(scope.row)" type="text" size="mini"
|
||||
v-if="checkPermCodeExist('formSysMenu:fragmentSysMenu:listSysMenuPermDetail')"
|
||||
:disabled="scope.row.menuType === SysMenuType.DIRECTORY">
|
||||
权限详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { treeDataTranslate } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { DictionaryController, SystemController } from '@/api';
|
||||
import formEditSysMenu from '@/views/upms/formEditSysMenu';
|
||||
import formMenuPerm from './formSysMenuPerm';
|
||||
|
||||
export default {
|
||||
name: 'formSysMenu',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formSysMenu: {
|
||||
formFilter: {
|
||||
},
|
||||
formFilterCopy: {
|
||||
},
|
||||
SysMenu: {
|
||||
impl: new TableWidget(this.loadSysMenuData, this.loadSysMenuVerify, false)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMenuType (row) {
|
||||
if (row.menuType === this.SysMenuType.DIRECTORY) {
|
||||
return 'primary'
|
||||
} else if (row.menuType === this.SysMenuType.MENU) {
|
||||
return 'success';
|
||||
} else if (row.menuType === this.SysMenuType.FRAGMENT) {
|
||||
return 'danger';
|
||||
} else if (row.menuType === this.SysMenuType.BUTTON) {
|
||||
return 'warning';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 菜单数据数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysMenuData (params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getMenuPermList(this, params).then(res => {
|
||||
this.allMenuList = res.data.map((item) => {
|
||||
return {...item};
|
||||
});
|
||||
resolve({
|
||||
dataList: treeDataTranslate(res.data, 'menuId'),
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 菜单数据数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysMenuVerify () {
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 菜单数据当前页变化函数
|
||||
*/
|
||||
onSysMenuCurrentPageChange (newPage) {
|
||||
this.formSysMenu.SysMenu.impl.onCurrentPageChange(newPage);
|
||||
},
|
||||
/**
|
||||
* 菜单数据每页显示数量变化函数（跳转回第一页）
|
||||
*/
|
||||
onSysMenuPageSizeChange (newPage) {
|
||||
this.formSysMenu.SysMenu.impl.onPageSizeChange(newPage);
|
||||
},
|
||||
/**
|
||||
* 更新菜单管理
|
||||
*/
|
||||
refreshFormSysMenu (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formSysMenu.SysMenu.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}
|
||||
this.formSysMenu.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 新建
|
||||
*/
|
||||
onCreateSysMenuClick () {
|
||||
let params = {
|
||||
menuList: this.allMenuList
|
||||
};
|
||||
this.$dialog.show('新建', formEditSysMenu, {
|
||||
area: ['800px']
|
||||
}, params).then(res => {
|
||||
this.refreshFormSysMenu();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
onEditSysMenuClick (row) {
|
||||
SystemController.viewMenu(this, {menuId: row.menuId}).then(res => {
|
||||
let params = {
|
||||
rowData: res.data,
|
||||
menuId: row.menuId,
|
||||
menuList: this.allMenuList
|
||||
};
|
||||
|
||||
this.$dialog.show('编辑', formEditSysMenu, {
|
||||
area: ['800px']
|
||||
}, params).then(res => {
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 添加子菜单
|
||||
*/
|
||||
onAddChildSysMenuClick (row) {
|
||||
let params = {
|
||||
parentId: row.menuId,
|
||||
menuList: this.allMenuList
|
||||
};
|
||||
|
||||
this.$dialog.show('添加子菜单', formEditSysMenu, {
|
||||
area: ['800px']
|
||||
}, params).then(res => {
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteClick (row) {
|
||||
let params = {
|
||||
menuId: row.menuId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此菜单项？').then(res => {
|
||||
SystemController.deleteMenu(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formSysMenu.SysMenu.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 权限详情
|
||||
*/
|
||||
onShowPermList (row) {
|
||||
let params = {
|
||||
menuId: row.menuId
|
||||
};
|
||||
|
||||
this.$dialog.show('权限详情 - ' + row.menuName, formMenuPerm, {
|
||||
area: '1200px',
|
||||
offset: '30px'
|
||||
}, params).catch(e => {
|
||||
});
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormSysMenu();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormSysMenu();
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative; margin-top: -15px;">
|
||||
<el-tabs v-model="activeFragmentId">
|
||||
<el-tab-pane label="用户查询" name="fragmentSysPermUser" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="用户名">
|
||||
<el-input class="filter-item" v-model="fragmentSysPermUser.formFilter.loginName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFragmentSysPermUser(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysPermUser.SysUser.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysPermUser.SysUser.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysPermUser.SysUser.impl.getTableIndex" />
|
||||
<el-table-column label="用户名" prop="loginName" />
|
||||
<el-table-column label="用户昵称" prop="showName" />
|
||||
<el-table-column label="用户角色" prop="roleName" />
|
||||
<el-table-column label="权限字" prop="permCode" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="角色查询" name="fragmentSysPermRole" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input class="filter-item" v-model="fragmentSysPermRole.formFilter.roleName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFragmentSysPermRole(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysPermRole.SysRole.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysPermRole.SysRole.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysPermRole.SysRole.impl.getTableIndex" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="permCodeType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角色名称" prop="roleName" />
|
||||
<el-table-column label="权限字" prop="permCode" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="菜单查询" name="fragmentSysPermMenu" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input class="filter-item" v-model="fragmentSysPermMenu.formFilter.menuName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFragmentSysPermMenu(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysPermMenu.SysMenu.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysPermMenu.SysMenu.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysPermMenu.SysMenu.impl.getTableIndex" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="menuType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字" prop="permCode" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'SysMenuPerm',
|
||||
props: {
|
||||
permId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: 'fragmentSysPermUser',
|
||||
menuMap: new Map(),
|
||||
fragmentSysPermUser: {
|
||||
formFilter: {
|
||||
loginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
loginName: undefined
|
||||
},
|
||||
SysUser: {
|
||||
impl: new TableWidget(this.loadSysUserData, this.loadSysUserVerify, false, false)
|
||||
}
|
||||
},
|
||||
fragmentSysPermRole: {
|
||||
formFilter: {
|
||||
roleName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
roleName: undefined
|
||||
},
|
||||
SysRole: {
|
||||
impl: new TableWidget(this.loadSysRoleData, this.loadSysRoleVerify, false, false)
|
||||
}
|
||||
},
|
||||
fragmentSysPermMenu: {
|
||||
formFilter: {
|
||||
menuName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
menuName: undefined
|
||||
},
|
||||
SysMenu: {
|
||||
impl: new TableWidget(this.loadPermSysMenuData, this.loadPermSysMenuVerify, false, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMenuType (row) {
|
||||
if (row.menuType === 0) {
|
||||
return 'primary'
|
||||
} else if (row.menuType === 1) {
|
||||
return 'success';
|
||||
} else if (row.menuType === 2) {
|
||||
return 'danger';
|
||||
} else if (row.menuType === 3) {
|
||||
return 'warning';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取所有菜单项
|
||||
*/
|
||||
loadSysMenuData () {
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getMenuPermList(this, {}).then(res => {
|
||||
res.data.forEach(item => {
|
||||
this.menuMap.set(item.menuId, item);
|
||||
});
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
getMenuPathById (menuId) {
|
||||
if (menuId == null || menuId === '') return null;
|
||||
let menuPath = [];
|
||||
do {
|
||||
let menuItem = this.menuMap.get(menuId);
|
||||
if (menuItem != null) {
|
||||
menuPath.unshift(menuItem);
|
||||
menuId = menuItem.parentId;
|
||||
} else {
|
||||
menuId = null;
|
||||
}
|
||||
} while (menuId != null);
|
||||
|
||||
return menuPath;
|
||||
},
|
||||
getMenuPathString (menuPath) {
|
||||
if (Array.isArray(menuPath) && menuPath.length > 0) {
|
||||
return menuPath.map(item => item.menuName).join(' / ');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取用户函数，返回Promise
|
||||
*/
|
||||
loadSysUserData (params) {
|
||||
params.permId = this.permId;
|
||||
params.loginName = this.fragmentSysPermUser.formFilterCopy.loginName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysUserByPermIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserVerify () {
|
||||
if (this.fragmentSysPermUser.formFilter.loginName == null || this.fragmentSysPermUser.formFilter.loginName === '') {
|
||||
this.$message.error('请输入用户名！');
|
||||
return false;
|
||||
}
|
||||
this.fragmentSysPermUser.formFilterCopy.loginName = this.fragmentSysPermUser.formFilter.loginName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新用户
|
||||
*/
|
||||
refreshFragmentSysPermUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysPermUser.SysUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysPermUser.SysUser.impl.refreshTable();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取角色函数，返回Promise
|
||||
*/
|
||||
loadSysRoleData (params) {
|
||||
params.permId = this.permId;
|
||||
params.roleName = this.fragmentSysPermRole.formFilterCopy.roleName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysRoleByPermIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 角色获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysRoleVerify () {
|
||||
this.fragmentSysPermRole.formFilterCopy.roleName = this.fragmentSysPermRole.formFilter.roleName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新角色
|
||||
*/
|
||||
refreshFragmentSysPermRole (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysPermRole.SysRole.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysPermRole.SysRole.impl.refreshTable();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取菜单函数，返回Promise
|
||||
*/
|
||||
loadPermSysMenuData (params) {
|
||||
params.permId = this.permId;
|
||||
params.menuName = this.fragmentSysPermMenu.formFilterCopy.menuName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysMenuByPermIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 角色获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadPermSysMenuVerify () {
|
||||
this.fragmentSysPermMenu.formFilterCopy.menuName = this.fragmentSysPermMenu.formFilter.menuName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新角色
|
||||
*/
|
||||
refreshFragmentSysPermMenu (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysPermMenu.SysMenu.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysPermMenu.SysMenu.impl.refreshTable();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 150);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
mounted () {
|
||||
this.loadSysMenuData().catch(e => {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<el-container class="advance-query-form">
|
||||
<el-aside width="300px">
|
||||
<el-card class="base-card" shadow="never" :body-style="{ padding: '0px' }" style="border: none;">
|
||||
<div slot="header" class="base-card-header">
|
||||
<span style="font-size: 16px; font-weight: 500; color: #282828;">权限模块</span>
|
||||
<div class="base-card-operation">
|
||||
<el-button type="text"
|
||||
:disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:addPermModule')"
|
||||
icon="el-icon-circle-plus-outline" @click="onCreatePermModuleClick()" />
|
||||
</div>
|
||||
</div>
|
||||
<el-scrollbar :style="{height: (getMainContextHeight - 56) + 'px'}" class="custom-scroll">
|
||||
<el-tree ref="moduleTree" :data="getModuleTreeData" :props="{label: 'moduleName'}"
|
||||
node-key="moduleId" @node-click="onModuleNodeClick" :default-expanded-keys="formPerm.expandedModule"
|
||||
:highlight-current="true" @node-expand="onModuleNodeExpand" @node-collapse="onModuleNodeCollapse">
|
||||
<div class="module-node-item" slot-scope="{ data }">
|
||||
<div class="module-node-menu" :class="{group: data.moduleType === SysPermModuleType.GROUP}" v-if="!data.isAll">
|
||||
<el-button type="text" size="mini" @click.stop="onEditpermModuleClick(data)" icon="el-icon-edit-outline"
|
||||
:disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:updatePermModule')"></el-button>
|
||||
<el-button type="text" size="mini" v-show="data.moduleType === SysPermModuleType.GROUP"
|
||||
:disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:addPermModule')" icon="el-icon-circle-plus-outline"
|
||||
@click.stop="onAddChildPermModuleClick(data)"></el-button>
|
||||
<el-button type="text" size="mini" @click.stop="onDeleteModuleClick(data)" icon="el-icon-delete"
|
||||
:disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:deletePermModule')"></el-button>
|
||||
</div>
|
||||
<div class="module-node-text" :class="{group: data.moduleType === SysPermModuleType.GROUP}">
|
||||
<div class="text">{{ data.moduleName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-aside>
|
||||
<el-main style="margin-left: 15px; background-color: white; padding: 20px;">
|
||||
<el-form label-width="75px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="关联URL">
|
||||
<el-input class="filter-item" placeholder="URL模糊搜索" v-model="formPerm.formFilter.url"
|
||||
size="mini" clearable />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFormPerm(true)">查询</el-button>
|
||||
<el-button slot="operator" type="primary" size="mini" :disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:addPerm')"
|
||||
@click="onCreatePermClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="formPerm.SysPerm.impl.dataList" size="mini" @sort-change="formPerm.SysPerm.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray" :height="(getMainContextHeight - 132) + 'px'">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px" :index="formPerm.SysPerm.impl.getTableIndex" />
|
||||
<el-table-column label="权限名称" prop="permName" width="150px">
|
||||
</el-table-column>
|
||||
<el-table-column label="权限模块" prop="moduleIdDictMap.name" width="100px">
|
||||
</el-table-column>
|
||||
<el-table-column label="关联URL" prop="url" min-width="250px">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditPermModuleClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:updatePerm')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysPerm:fragmentSysPerm:deletePerm')">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button class="btn-table-primary" type="text" size="mini"
|
||||
v-if="checkPermCodeExist('formSysPerm:fragmentSysPerm:listSysPermPermDetail')"
|
||||
@click="onSysPermDetailClick(scope.row)">
|
||||
权限详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="formPerm.SysPerm.impl.totalCount"
|
||||
:current-page="formPerm.SysPerm.impl.currentPage"
|
||||
:page-size="formPerm.SysPerm.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="formPerm.SysPerm.impl.onCurrentPageChange"
|
||||
@size-change="formPerm.SysPerm.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
import formEditSysPerm from '../formEditSysPerm';
|
||||
import formEditSysPermModule from '../formEditSysPermModule';
|
||||
import FormSysPermDetail from './formSysPermDetail.vue';
|
||||
|
||||
export default {
|
||||
name: 'formSysPerm',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formPerm: {
|
||||
formFilter: {
|
||||
permModuleId: undefined,
|
||||
url: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
permModuleId: undefined,
|
||||
url: undefined
|
||||
},
|
||||
permModuleId: {
|
||||
impl: new DropdownWidget(this.loadPermModuleIdDropdownList, true, 'moduleId', 'parentId')
|
||||
},
|
||||
SysPerm: {
|
||||
impl: new TableWidget(this.loadSysPermData, this.loadSysPermVerify, true)
|
||||
},
|
||||
permModuleList: [],
|
||||
expandedModule: [],
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 权限数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysPermData (params) {
|
||||
params.sysPermDtoFilter = {
|
||||
url: this.formPerm.formFilterCopy.url === '' ? undefined : this.formPerm.formFilterCopy.url,
|
||||
moduleId: this.formPerm.formFilterCopy.permModuleId === '' ? undefined : this.formPerm.formFilterCopy.permModuleId
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getPermList(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 权限数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysPermVerify () {
|
||||
this.formPerm.formFilterCopy.url = this.formPerm.formFilter.url;
|
||||
this.formPerm.formFilterCopy.permModuleId = this.formPerm.formFilter.permModuleId;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 所属权限模块下拉数据获取函数
|
||||
*/
|
||||
loadPermModuleIdDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
SystemController.getPermGroupList(this, params).then(res => {
|
||||
this.formPerm.permModuleList = res.data;
|
||||
resolve(res.data);
|
||||
}).catch(e => {
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 所属权限模块下拉框显隐
|
||||
*/
|
||||
onPermModuleIdVisibleChange (show) {
|
||||
this.formPerm.permModuleId.impl.onVisibleChange(show).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 所属权限模块选中值改变
|
||||
*/
|
||||
onPermModuleIdValueChange (value) {
|
||||
},
|
||||
onSysPermDetailClick (row) {
|
||||
this.$dialog.show('权限详情', FormSysPermDetail, {
|
||||
area: '1200px',
|
||||
offset: '30px'
|
||||
}, {
|
||||
permId: row.permId
|
||||
}).then(res => {}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 更新权限管理
|
||||
*/
|
||||
refreshFormPerm (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formPerm.SysPerm.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formPerm.SysPerm.impl.refreshTable();
|
||||
}
|
||||
this.formPerm.permModuleId.impl.onVisibleChange(true).catch(e => {});
|
||||
this.formPerm.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 新建
|
||||
*/
|
||||
onCreatePermClick () {
|
||||
let params = {
|
||||
currentPermGroupId: this.formPerm.formFilterCopy.permModuleId,
|
||||
permModuleList: this.formPerm.permModuleId.impl.dropdownList
|
||||
};
|
||||
|
||||
this.$dialog.show('新建', formEditSysPerm, {
|
||||
area: ['600px']
|
||||
}, params).then(res => {
|
||||
this.refreshFormPerm();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
onEditPermModuleClick (row) {
|
||||
let params = {
|
||||
moduleId: row.moduleId,
|
||||
permId: row.permId,
|
||||
rowData: row,
|
||||
permModuleList: this.formPerm.permModuleId.impl.dropdownList
|
||||
};
|
||||
|
||||
this.$dialog.show('编辑', formEditSysPerm, {
|
||||
area: ['600px']
|
||||
}, params).then(res => {
|
||||
this.formPerm.SysPerm.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteClick (row) {
|
||||
let params = {
|
||||
permId: row.permId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此权限？').then(res => {
|
||||
SystemController.deletePerm(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formPerm.SysPerm.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormPerm();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormPerm();
|
||||
},
|
||||
onModuleNodeClick (data) {
|
||||
if (data.moduleType === this.SysPermModuleType.CONTROLLER) {
|
||||
this.formPerm.formFilter.permModuleId = data.moduleId;
|
||||
this.refreshFormPerm(true);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 新建模块
|
||||
*/
|
||||
onCreatePermModuleClick () {
|
||||
let params = {
|
||||
moduleType: this.SysPermModuleType.GROUP,
|
||||
moduleList: this.formPerm.permModuleList
|
||||
};
|
||||
|
||||
this.$dialog.show('新建模块', formEditSysPermModule, {
|
||||
area: ['600px']
|
||||
}, params).then(res => {
|
||||
this.formPerm.permModuleId.impl.reloadDropdownData().catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑模块
|
||||
*/
|
||||
onEditpermModuleClick (row) {
|
||||
let params = {
|
||||
moduleId: row.moduleId,
|
||||
moduleType: row.moduleType,
|
||||
rowData: row,
|
||||
moduleList: this.formPerm.permModuleList
|
||||
};
|
||||
|
||||
this.$dialog.show('编辑模块', formEditSysPermModule, {
|
||||
area: ['600px']
|
||||
}, params).then(res => {
|
||||
this.formPerm.permModuleId.impl.reloadDropdownData().catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteModuleClick (row) {
|
||||
let params = {
|
||||
moduleId: row.moduleId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此模块？').then(res => {
|
||||
SystemController.deletePermGroup(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formPerm.permModuleId.impl.reloadDropdownData(true).catch(e => {});
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
onAddChildPermModuleClick (row) {
|
||||
let params = {
|
||||
parentId: row.moduleId,
|
||||
moduleType: this.SysPermModuleType.CONTROLLER,
|
||||
moduleList: this.formPerm.permModuleList
|
||||
};
|
||||
|
||||
this.$dialog.show('添加子模块', formEditSysPermModule, {
|
||||
area: ['600px']
|
||||
}, params).then(res => {
|
||||
this.formPerm.permModuleId.impl.reloadDropdownData(true).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
onModuleNodeCollapse (data, node) {
|
||||
let pos = this.formPerm.expandedModule.indexOf(data.moduleId);
|
||||
if (pos !== -1) {
|
||||
this.formPerm.expandedModule.splice(pos, 1);
|
||||
}
|
||||
},
|
||||
onModuleNodeExpand (data, node) {
|
||||
let pos = this.formPerm.expandedModule.indexOf(data.moduleId);
|
||||
if (pos === -1) {
|
||||
this.formPerm.expandedModule.push(data.moduleId);
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getModuleTreeData () {
|
||||
let tempList = [{
|
||||
moduleId: undefined,
|
||||
moduleName: '全部',
|
||||
moduleType: this.SysPermModuleType.CONTROLLER,
|
||||
isAll: true
|
||||
}];
|
||||
return tempList.concat(this.formPerm.permModuleId.impl.dropdownList);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
>>> .el-tree-node__content {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
>>> .el-tree-node__content .is-leaf {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.module-node-item {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.module-node-menu {
|
||||
float: right;
|
||||
width: 56px;
|
||||
}
|
||||
|
||||
.module-node-menu.group {
|
||||
width: 84px;
|
||||
}
|
||||
|
||||
.module-node-text {
|
||||
width: 100%;
|
||||
margin-right: 56px;
|
||||
}
|
||||
|
||||
.module-node-text.group {
|
||||
margin-right: 84px;
|
||||
}
|
||||
|
||||
.el-tree-node__content .is-leaf + .module-node-item .module-node-text {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.module-node-text .text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative; margin-top: -15px;">
|
||||
<el-tabs v-model="activeFragmentId">
|
||||
<el-tab-pane label="用户查询" name="fragmentSysPermCodeUser" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="用户名">
|
||||
<el-input class="filter-item" v-model="fragmentSysPermCodeUser.formFilter.loginName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFragmentSysPermCodeUser(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysPermCodeUser.SysUser.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysPermCodeUser.SysUser.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysPermCodeUser.SysUser.impl.getTableIndex" />
|
||||
<el-table-column label="用户名" prop="loginName" />
|
||||
<el-table-column label="用户昵称" prop="showName" />
|
||||
<el-table-column label="用户角色" prop="roleName" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="permCodeType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="角色查询" name="fragmentSysPermCodeRole" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input class="filter-item" v-model="fragmentSysPermCodeRole.formFilter.roleName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFragmentSysPermCodeRole(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysPermCodeRole.SysRole.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysPermCodeRole.SysRole.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysPermCodeRole.SysRole.impl.getTableIndex" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="permCodeType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角色名称" prop="roleName" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'SysMenuPerm',
|
||||
props: {
|
||||
permCodeId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: 'fragmentSysPermCodeUser',
|
||||
menuMap: new Map(),
|
||||
fragmentSysPermCodeUser: {
|
||||
formFilter: {
|
||||
loginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
loginName: undefined
|
||||
},
|
||||
SysUser: {
|
||||
impl: new TableWidget(this.loadSysUserData, this.loadSysUserVerify, false, false)
|
||||
}
|
||||
},
|
||||
fragmentSysPermCodeRole: {
|
||||
formFilter: {
|
||||
roleName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
roleName: undefined
|
||||
},
|
||||
SysRole: {
|
||||
impl: new TableWidget(this.loadSysRoleData, this.loadSysRoleVerify, false, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMenuType (row) {
|
||||
if (row.menuType === 0) {
|
||||
return 'primary'
|
||||
} else if (row.menuType === 1) {
|
||||
return 'success';
|
||||
} else if (row.menuType === 2) {
|
||||
return 'danger';
|
||||
} else if (row.menuType === 3) {
|
||||
return 'warning';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取所有菜单项
|
||||
*/
|
||||
loadSysMenuData () {
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getMenuPermList(this, {}).then(res => {
|
||||
res.data.forEach(item => {
|
||||
this.menuMap.set(item.menuId, item);
|
||||
});
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
getMenuPathById (menuId) {
|
||||
if (menuId == null || menuId === '') return null;
|
||||
let menuPath = [];
|
||||
do {
|
||||
let menuItem = this.menuMap.get(menuId);
|
||||
if (menuItem != null) {
|
||||
menuPath.unshift(menuItem);
|
||||
menuId = menuItem.parentId;
|
||||
} else {
|
||||
menuId = null;
|
||||
}
|
||||
} while (menuId != null);
|
||||
|
||||
return menuPath;
|
||||
},
|
||||
getMenuPathString (menuPath) {
|
||||
if (Array.isArray(menuPath) && menuPath.length > 0) {
|
||||
return menuPath.map(item => item.menuName).join(' / ');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取用户函数，返回Promise
|
||||
*/
|
||||
loadSysUserData (params) {
|
||||
params.permCodeId = this.permCodeId;
|
||||
params.loginName = this.fragmentSysPermCodeUser.formFilterCopy.loginName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysUserByPermCodeIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserVerify () {
|
||||
if (this.fragmentSysPermCodeUser.formFilter.loginName == null || this.fragmentSysPermCodeUser.formFilter.loginName === '') {
|
||||
this.$message.error('请输入用户名！');
|
||||
return false;
|
||||
}
|
||||
this.fragmentSysPermCodeUser.formFilterCopy.loginName = this.fragmentSysPermCodeUser.formFilter.loginName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新用户
|
||||
*/
|
||||
refreshFragmentSysPermCodeUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysPermCodeUser.SysUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysPermCodeUser.SysUser.impl.refreshTable();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取角色函数，返回Promise
|
||||
*/
|
||||
loadSysRoleData (params) {
|
||||
params.permCodeId = this.permCodeId;
|
||||
params.roleName = this.fragmentSysPermCodeRole.formFilterCopy.roleName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysRoleByPermCodeIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 角色获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysRoleVerify () {
|
||||
this.fragmentSysPermCodeRole.formFilterCopy.roleName = this.fragmentSysPermCodeRole.formFilter.roleName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新角色
|
||||
*/
|
||||
refreshFragmentSysPermCodeRole (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysPermCodeRole.SysRole.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysPermCodeRole.SysRole.impl.refreshTable();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 150);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
mounted () {
|
||||
this.loadSysMenuData().catch(e => {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="100px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="权限字名称">
|
||||
<el-input class="filter-item" v-model="formPermCode.formFilter.showName"
|
||||
:clearable="true" placeholder="权限字名称" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" size="mini" :plain="true" @click="refreshFormPermCode(true)">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button slot="operator" type="primary" size="mini" :disabled="!checkPermCodeExist('formSysPermCode:fragmentSysPermCode:add')"
|
||||
@click="onCreatePermCodeClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="getPermCodeList" size="mini" @sort-change="formPermCode.SysPermCode.impl.onSortChange"
|
||||
row-key="permCodeId" header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="权限字名称" prop="showName" width="250px">
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字类型" prop="permCodeType" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="getPermCodeType(scope.row.permCodeType)">{{SysPermCodeType.getValue(scope.row.permCodeType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="显示顺序" prop="showOrder" width="100px">
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字标识" prop="permCode" min-width="200px">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="200px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditPermCodeClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysPermCode:fragmentSysPermCode:update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onAddChildPermCodeClick(scope.row)" type="text" size="mini"
|
||||
:disabled="scope.row.permCodeType === 2 || !checkPermCodeExist('formSysPermCode:fragmentSysPermCode:add')">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysPermCode:fragmentSysPermCode:delete')">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button class="btn-table-primary" type="text" size="mini"
|
||||
v-if="checkPermCodeExist('formSysPermCode:fragmentSysPermCode:listSysPermCodePermDetail')"
|
||||
@click="onSysPermCodeDetailClick(scope.row)">
|
||||
权限详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { treeDataTranslate } from '@/utils';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
import formEditSysPermCode from '@/views/upms/formEditSysPermCode';
|
||||
import FormSysPermCodeDetail from '@/views/upms/formSysPermCode/formSysPermCodeDetail.vue';
|
||||
|
||||
export default {
|
||||
name: 'formSysPermCode',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formPermCode: {
|
||||
formFilter: {
|
||||
showName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
showName: undefined
|
||||
},
|
||||
SysPermCode: {
|
||||
impl: new TableWidget(this.loadSysPermCodeData, this.loadSysPermCodeVerify, false, false, 'showOrder', 1),
|
||||
totalCount: 0,
|
||||
sortInfo: {
|
||||
orderField: 'showOrder',
|
||||
asc: 1
|
||||
}
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPermCodeType (permCodeType) {
|
||||
switch (permCodeType) {
|
||||
case this.SysPermCodeType.FORM: return 'primary';
|
||||
case this.SysPermCodeType.FRAGMENT: return 'warning';
|
||||
case this.SysPermCodeType.OPERATION: return 'success';
|
||||
default: return 'info';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 权限资源数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysPermCodeData (params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getPermCodeList(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: treeDataTranslate(res.data, 'permCodeId'),
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 权限资源数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysPermCodeVerify () {
|
||||
this.formPermCode.formFilterCopy.showName = this.formPermCode.formFilter.showName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 权限资源当前页变化函数
|
||||
*/
|
||||
onSysPermCodeCurrentPageChange (newPage) {
|
||||
this.formPermCode.SysPermCode.impl.onCurrentPageChange(newPage);
|
||||
},
|
||||
/**
|
||||
* 权限资源每页显示数量变化函数（跳转回第一页）
|
||||
*/
|
||||
onSysPermCodePageSizeChange (newPage) {
|
||||
this.formPermCode.SysPermCode.impl.onPageSizeChange(newPage);
|
||||
},
|
||||
/**
|
||||
* 权限资源列排序变化函数
|
||||
*/
|
||||
onSysPermCodeSortChange ({ column, prop, order }) {
|
||||
this.formPermCode.SysPermCode.sortInfo.orderField = prop;
|
||||
this.formPermCode.SysPermCode.sortInfo.asc = (order === 'ascending');
|
||||
this.formPermCode.SysPermCode.impl.refreshTable();
|
||||
},
|
||||
onSysPermCodeDetailClick (row) {
|
||||
this.$dialog.show('权限详情', FormSysPermCodeDetail, {
|
||||
area: '1200px',
|
||||
offset: '30px'
|
||||
}, {
|
||||
permCodeId: row.permCodeId
|
||||
}).then(res => {}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 更新权限资源管理
|
||||
*/
|
||||
refreshFormPermCode (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formPermCode.SysPermCode.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formPermCode.SysPermCode.impl.refreshTable();
|
||||
}
|
||||
this.formPermCode.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 添加
|
||||
*/
|
||||
onCreatePermCodeClick () {
|
||||
let params = {
|
||||
permCodeTree: this.formPermCode.SysPermCode.impl.dataList
|
||||
};
|
||||
|
||||
this.$dialog.show('添加', formEditSysPermCode, {
|
||||
area: ['800px', '583px']
|
||||
}, params).then(res => {
|
||||
this.refreshFormPermCode();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
onEditPermCodeClick (row) {
|
||||
SystemController.viewPermCode(this, {
|
||||
permCodeId: row.permCodeId
|
||||
}).then(res => {
|
||||
let params = {
|
||||
permCodeTree: this.formPermCode.SysPermCode.impl.dataList,
|
||||
permCodeType: row.permCodeType,
|
||||
rowData: res.data
|
||||
};
|
||||
return this.$dialog.show('编辑', formEditSysPermCode, {
|
||||
area: ['800px', '583px']
|
||||
}, params).then(res => {
|
||||
this.formPermCode.SysPermCode.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).then(res => {
|
||||
this.loadPermCodeData().catch(e => {});
|
||||
}).catch(e => {
|
||||
//
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 添加权限字
|
||||
*/
|
||||
onAddChildPermCodeClick (row) {
|
||||
let params = {
|
||||
permCodeTree: this.formPermCode.SysPermCode.impl.dataList,
|
||||
permCodeType: row.permCodeType + 1,
|
||||
rowData: {
|
||||
parentId: row.permCodeId
|
||||
}
|
||||
};
|
||||
|
||||
this.$dialog.show('添加权限字', formEditSysPermCode, {
|
||||
area: ['800px', '583px']
|
||||
}, params).then(res => {
|
||||
this.formPermCode.SysPermCode.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteClick (row) {
|
||||
let params = {
|
||||
permCodeId: row.permCodeId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此权限字？').then(res => {
|
||||
SystemController.deletePermCode(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.formPermCode.SysPermCode.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormPermCode();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormPermCode();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getPermCodeList () {
|
||||
try {
|
||||
if (Array.isArray(this.formPermCode.SysPermCode.impl.dataList)) {
|
||||
let temp = this.formPermCode.SysPermCode.impl.dataList.filter((item) => {
|
||||
if (this.formPermCode.formFilterCopy.showName == null || this.formPermCode.formFilterCopy.showName === '') return true;
|
||||
return (item.showName.indexOf(this.formPermCode.formFilterCopy.showName) !== -1);
|
||||
});
|
||||
return temp;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
return [];
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative; margin-top: -15px;">
|
||||
<el-tabs v-model="activeFragmentId">
|
||||
<el-tab-pane label="权限资源" name="fragmentSysRolePerm" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="URL">
|
||||
<el-input class="filter-item" v-model="fragmentSysRolePerm.formFilter.url" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshfragmentSysRolePerm(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysRolePerm.SysRolePerm.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysRolePerm.SysRolePerm.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysRolePerm.SysRolePerm.impl.getTableIndex" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属权限字" prop="permCode" />
|
||||
<el-table-column label="URL" prop="url" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="权限字" name="fragmentSysRolePermCode" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="权限字">
|
||||
<el-input class="filter-item" v-model="fragmentSysRolePermCode.formFilter.permCode" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshfragmentSysRolePermCode(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysRolePermCode.SysRolePermCode.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysRolePermCode.SysRolePermCode.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysRolePermCode.SysRolePermCode.impl.getTableIndex" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字" prop="permCode" />
|
||||
<el-table-column label="权限字类型" prop="permCodeType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="getPermCodeType(scope.row.permCodeType)">{{SysPermCodeType.getValue(scope.row.permCodeType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'SysRolePerm',
|
||||
props: {
|
||||
roleId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: 'fragmentSysRolePerm',
|
||||
menuMap: new Map(),
|
||||
fragmentSysRolePerm: {
|
||||
formFilter: {
|
||||
url: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
url: undefined
|
||||
},
|
||||
SysRolePerm: {
|
||||
impl: new TableWidget(this.loadSysRolePermData, this.loadSysRolePermVerify, false, false)
|
||||
},
|
||||
isInit: false
|
||||
},
|
||||
fragmentSysRolePermCode: {
|
||||
formFilter: {
|
||||
permCode: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
permCode: undefined
|
||||
},
|
||||
SysRolePermCode: {
|
||||
impl: new TableWidget(this.loadSysRolePermCodeData, this.loadSysRolePermCodeVerify, false, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMenuType (row) {
|
||||
if (row.menuType === 0) {
|
||||
return 'primary'
|
||||
} else if (row.menuType === 1) {
|
||||
return 'success';
|
||||
} else if (row.menuType === 2) {
|
||||
return 'danger';
|
||||
} else if (row.menuType === 3) {
|
||||
return 'warning';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取所有菜单项
|
||||
*/
|
||||
loadSysMenuData () {
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getMenuPermList(this, {}).then(res => {
|
||||
res.data.forEach(item => {
|
||||
this.menuMap.set(item.menuId, item);
|
||||
});
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
getMenuPathById (menuId) {
|
||||
if (menuId == null || menuId === '') return null;
|
||||
let menuPath = [];
|
||||
do {
|
||||
let menuItem = this.menuMap.get(menuId);
|
||||
if (menuItem != null) {
|
||||
menuPath.unshift(menuItem);
|
||||
menuId = menuItem.parentId;
|
||||
} else {
|
||||
menuId = null;
|
||||
}
|
||||
} while (menuId != null);
|
||||
|
||||
return menuPath;
|
||||
},
|
||||
getMenuPathString (menuPath) {
|
||||
if (Array.isArray(menuPath) && menuPath.length > 0) {
|
||||
return menuPath.map(item => item.menuName).join(' / ');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取角色权限资源列表函数，返回Promise
|
||||
*/
|
||||
loadSysRolePermData (params) {
|
||||
params.roleId = this.roleId;
|
||||
params.url = this.fragmentSysRolePerm.formFilterCopy.url;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysPermByRoleIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 角色权限资源获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysRolePermVerify () {
|
||||
this.fragmentSysRolePerm.formFilterCopy.url = this.fragmentSysRolePerm.formFilter.url;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新角色权限资源
|
||||
*/
|
||||
refreshfragmentSysRolePerm (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysRolePerm.SysRolePerm.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysRolePerm.SysRolePerm.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysRolePerm.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 获取角色权限字列表函数，返回Promise
|
||||
*/
|
||||
loadSysRolePermCodeData (params) {
|
||||
params.roleId = this.roleId;
|
||||
params.permCode = this.fragmentSysRolePermCode.formFilterCopy.permCode;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysPermCodeByRoleIdWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 角色权限资源获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysRolePermCodeVerify () {
|
||||
this.fragmentSysRolePermCode.formFilterCopy.permCode = this.fragmentSysRolePermCode.formFilter.permCode;
|
||||
return true;
|
||||
},
|
||||
getPermCodeType (permCodeType) {
|
||||
switch (permCodeType) {
|
||||
case this.SysPermCodeType.FORM: return 'primary';
|
||||
case this.SysPermCodeType.FRAGMENT: return 'warning';
|
||||
case this.SysPermCodeType.OPERATION: return 'success';
|
||||
default: return 'info';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 更新角色权限资源
|
||||
*/
|
||||
refreshfragmentSysRolePermCode (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysRolePermCode.SysRolePermCode.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysRolePermCode.SysRolePermCode.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysRolePermCode.isInit = true;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 150);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
mounted () {
|
||||
this.loadSysMenuData().catch(e => {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,473 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative;">
|
||||
<el-tabs v-model="activeFragmentId" :before-leave="onFragmentChange">
|
||||
<el-tab-pane label="角色管理" name="fragmentSysRole" style="width: 100%;"
|
||||
v-if="checkPermCodeExist('formSysRole:fragmentSysRole')">
|
||||
<el-form label-width="75px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="角色名称">
|
||||
<el-input class="filter-item" v-model="fragmentSysRole.formFilter.sysRoleName"
|
||||
:clearable="true" placeholder="角色名称" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFragmentSysRole(true)">查询</el-button>
|
||||
<el-button slot="operator" type="primary" size="mini" :disabled="!checkPermCodeExist('formSysRole:fragmentSysRole:add')"
|
||||
@click="onAddSysRoleClick()">
|
||||
新建
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysRole.SysRole.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysRole.SysRole.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px"
|
||||
:index="fragmentSysRole.SysRole.impl.getTableIndex" />
|
||||
<el-table-column label="角色名称" prop="roleName">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="150px">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="onEditSysRoleClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysRole:fragmentSysRole:update')">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="onDeleteClick(scope.row)" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysRole:fragmentSysRole:delete')">
|
||||
删除
|
||||
</el-button>
|
||||
<el-button class="btn-table-primary" type="text" size="mini"
|
||||
v-if="checkPermCodeExist('formSysRole:fragmentSysRole:listSysRolePermDetail')"
|
||||
@click="onSysRolePermClick(scope.row)">
|
||||
权限详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="fragmentSysRole.SysRole.impl.totalCount"
|
||||
:current-page="fragmentSysRole.SysRole.impl.currentPage"
|
||||
:page-size="fragmentSysRole.SysRole.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="fragmentSysRole.SysRole.impl.onCurrentPageChange"
|
||||
@size-change="fragmentSysRole.SysRole.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="用户授权" name="fragmentSysRoleUser" style="width: 100%;"
|
||||
v-if="checkPermCodeExist('formSysRole:fragmentSysRoleUser')">
|
||||
<el-form label-width="75px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="用户角色">
|
||||
<el-select class="filter-item" v-model="fragmentSysRoleUser.formFilter.sysRoleId" clearable
|
||||
placeholder="用户角色" :loading="fragmentSysRoleUser.sysRole.impl.loading"
|
||||
@visible-change="fragmentSysRoleUser.sysRole.impl.onVisibleChange"
|
||||
@change="onRoleChange">
|
||||
<el-option v-for="item in fragmentSysRoleUser.sysRole.impl.dropdownList" :key="item.roleId" :value="item.roleId" :label="item.roleName" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名">
|
||||
<el-input class="filter-item" v-model="fragmentSysRoleUser.formFilter.sysUserLoginName"
|
||||
:clearable="true" placeholder="输入用户名 / 昵称查询" @change="refreshFragmentSysRoleUser(true)" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFragmentSysRoleUser(true)">
|
||||
查询
|
||||
</el-button>
|
||||
<el-button slot="operator" type="primary" size="mini" @click="onAddRow()"
|
||||
:disabled="!checkPermCodeExist('formSysRole:fragmentSysRoleUser:addUserRole') ||
|
||||
fragmentSysRoleUser.formFilter.sysRoleId == null || fragmentSysRoleUser.formFilter.sysRoleId === ''">
|
||||
添加用户
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysRoleUser.SysUser.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysRoleUser.SysUser.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px" :index="fragmentSysRoleUser.SysUser.impl.getTableIndex" />
|
||||
<el-table-column label="用户名" prop="loginName">
|
||||
</el-table-column>
|
||||
<el-table-column label="昵称" prop="showName">
|
||||
</el-table-column>
|
||||
<el-table-column label="账号类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{SysUserType.getValue(scope.row.userType)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getUserStatusType(scope.row.userStatus)" size="mini">{{SysUserStatus.getValue(scope.row.userStatus)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="80px">
|
||||
<template slot-scope="scope">
|
||||
<el-button class="btn-table-delete" type="text" size="mini"
|
||||
:disabled="!checkPermCodeExist('formSysRole:fragmentSysRoleUser:deleteUserRole')"
|
||||
@click="onDeleteRow(scope.row)">
|
||||
移除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="fragmentSysRoleUser.SysUser.impl.totalCount"
|
||||
:current-page="fragmentSysRoleUser.SysUser.impl.currentPage"
|
||||
:page-size="fragmentSysRoleUser.SysUser.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="fragmentSysRoleUser.SysUser.impl.onCurrentPageChange"
|
||||
@size-change="fragmentSysRoleUser.SysUser.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
import formEditSysRole from '../formEditSysRole';
|
||||
import formSetRoleUsers from '@/views/upms/formSetRoleUsers';
|
||||
import FormSysRolePerm from './formSysRolePerm.vue';
|
||||
|
||||
export default {
|
||||
name: 'formSysRole',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: undefined,
|
||||
fragmentSysRole: {
|
||||
formFilter: {
|
||||
sysRoleName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
sysRoleName: undefined
|
||||
},
|
||||
SysRole: {
|
||||
impl: new TableWidget(this.loadSysRoleData, this.loadSysRoleVerify, true, false)
|
||||
},
|
||||
isInit: false
|
||||
},
|
||||
fragmentSysRoleUser: {
|
||||
formFilter: {
|
||||
sysRoleId: undefined,
|
||||
sysUserLoginName: undefined
|
||||
},
|
||||
sysRole: {
|
||||
impl: new DropdownWidget(this.loadSysRoleDropdownList)
|
||||
},
|
||||
SysUser: {
|
||||
impl: new TableWidget(this.loadSysUserData, this.loadSysUserVerify, true, false)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 用户角色数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysRoleData (params) {
|
||||
params.sysRoleDtoFilter = {
|
||||
roleName: this.fragmentSysRole.formFilterCopy.sysRoleName
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getRoleList(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户角色数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysRoleVerify () {
|
||||
this.fragmentSysRole.formFilterCopy.sysRoleName = this.fragmentSysRole.formFilter.sysRoleName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新角色列表
|
||||
*/
|
||||
refreshFragmentSysRole (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysRole.SysRole.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysRole.SysRole.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysRole.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 新建
|
||||
*/
|
||||
onAddSysRoleClick () {
|
||||
let params = {};
|
||||
|
||||
this.$dialog.show('新建', formEditSysRole, {
|
||||
area: ['800px', '500px'],
|
||||
offset: '100px'
|
||||
}, params).then(res => {
|
||||
this.fragmentSysRoleUser.sysRole.impl.dirty = true;
|
||||
this.refreshFragmentSysRole();
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
onEditSysRoleClick (row) {
|
||||
this.loadRowData(row).then(rowData => {
|
||||
return this.$dialog.show('编辑角色', formEditSysRole, {
|
||||
area: ['600px', '500px']
|
||||
}, {
|
||||
rowData
|
||||
});
|
||||
}).then(res => {
|
||||
if (row.roleId === this.fragmentSysRoleUser.formFilter.sysRoleId) {
|
||||
this.fragmentSysRoleUser.formFilter.sysRoleId = undefined;
|
||||
this.fragmentSysRoleUser.SysUser.impl.clearTable();
|
||||
}
|
||||
this.fragmentSysRoleUser.sysRole.impl.dirty = true;
|
||||
this.fragmentSysRole.SysRole.impl.refreshTable();
|
||||
}).catch((e) => {});
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
onDeleteClick (row) {
|
||||
let params = {
|
||||
roleId: row.roleId
|
||||
};
|
||||
|
||||
this.$confirm('是否删除此角色？').then(res => {
|
||||
SystemController.deleteRole(this, params).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
if (row.roleId === this.fragmentSysRoleUser.formFilter.sysRoleId) {
|
||||
this.fragmentSysRoleUser.formFilter.sysRoleId = undefined;
|
||||
this.fragmentSysRoleUser.SysUser.impl.clearTable();
|
||||
}
|
||||
this.fragmentSysRoleUser.sysRole.impl.dirty = true;
|
||||
this.fragmentSysRole.SysRole.impl.refreshTable();
|
||||
}).catch(e => {});
|
||||
}).catch(e => {});
|
||||
},
|
||||
loadRowData (row) {
|
||||
return new Promise((resolve, reject) => {
|
||||
var params = {
|
||||
roleId: row.roleId
|
||||
}
|
||||
SystemController.getRole(this, params).then(res => {
|
||||
if (typeof res.data.permsJsonData === 'string') {
|
||||
res.data.permsJsonData = JSON.parse(res.data.permsJsonData);
|
||||
}
|
||||
resolve(res.data);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
buildFragmentPermCodeMap () {
|
||||
this.permCodeList = [
|
||||
{
|
||||
key: 'fragmentSysRole',
|
||||
permCode: 'formSysRole:fragmentSysRole',
|
||||
refresh: this.refreshFragmentSysRole
|
||||
},
|
||||
{
|
||||
key: 'fragmentSysRoleUser',
|
||||
permCode: 'formSysRole:fragmentSysRoleUser',
|
||||
refresh: this.refreshFragmentSysRoleUser
|
||||
}
|
||||
];
|
||||
},
|
||||
onFragmentChange (fragmentId) {
|
||||
for (let i = 0; i < this.permCodeList.length; i++) {
|
||||
if (this.permCodeList[i].key === fragmentId) {
|
||||
this.activeFragmentId = fragmentId;
|
||||
// if (this.permCodeList[i].refresh) this.permCodeList[i].refresh();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getActiveFragment () {
|
||||
for (let i = 0; i < this.permCodeList.length; i++) {
|
||||
if (this.permCodeList[i].key === this.activeFragmentId) {
|
||||
return this.permCodeList[i];
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 根据权限获取默认显示的fragment
|
||||
*/
|
||||
getDefaultFragment () {
|
||||
for (let i = 0; i < this.permCodeList.length; i++) {
|
||||
if (this.checkPermCodeExist(this.permCodeList[i].permCode)) {
|
||||
this.activeFragmentId = this.permCodeList[i].key;
|
||||
return this.permCodeList[i];
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
onRoleChange (value) {
|
||||
this.refreshFragmentSysRoleUser(true);
|
||||
},
|
||||
getUserStatusType (status) {
|
||||
if (status === this.SysUserStatus.NORMAL) {
|
||||
return 'success';
|
||||
} else if (status === this.SysUserStatus.LOCKED) {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'info';
|
||||
}
|
||||
},
|
||||
onAddRow () {
|
||||
if (this.fragmentSysRoleUser.formFilter.sysRoleId == null || this.fragmentSysRoleUser.formFilter.sysRoleId === '') {
|
||||
this.$message.error('请选择角色');
|
||||
return false;
|
||||
}
|
||||
this.$dialog.show('角色用户授权', formSetRoleUsers, {
|
||||
area: ['1100px', '600px']
|
||||
}, {
|
||||
roleId: this.fragmentSysRoleUser.formFilter.sysRoleId
|
||||
}).catch(e => {
|
||||
this.refreshFragmentSysRoleUser(true);
|
||||
});
|
||||
},
|
||||
onDeleteRow (row) {
|
||||
this.$confirm('是否移除此用户?').then(res => {
|
||||
let params = {
|
||||
roleId: this.fragmentSysRoleUser.formFilter.sysRoleId,
|
||||
userId: row.userId
|
||||
}
|
||||
return SystemController.deleteRoleUser(this, params);
|
||||
}).then(res => {
|
||||
this.$message.success('移除成功');
|
||||
this.refreshFragmentSysRoleUser(true);
|
||||
}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 用户管理数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysUserData (params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (this.fragmentSysRoleUser.formFilter.sysRoleId == null || this.fragmentSysRoleUser.formFilter.sysRoleId === '') {
|
||||
this.$message.error('请选择角色');
|
||||
resolve({
|
||||
dataList: [],
|
||||
totalCount: 0
|
||||
});
|
||||
return;
|
||||
}
|
||||
params.roleId = this.fragmentSysRoleUser.formFilter.sysRoleId;
|
||||
params.sysUserDtoFilter = {
|
||||
loginName: this.fragmentSysRoleUser.formFilter.sysUserLoginName
|
||||
}
|
||||
SystemController.listRoleUser(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户管理数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserVerify () {
|
||||
if (this.fragmentSysRoleUser.formFilter.sysRoleId == null || this.fragmentSysRoleUser.formFilter.sysRoleId === '') {
|
||||
this.$message.error('请选择角色');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 角色下拉数据获取函数
|
||||
*/
|
||||
loadSysRoleDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
SystemController.getRoleList(this, params).then(res => {
|
||||
resolve(res.data.dataList);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
onRuleChange (value) {
|
||||
this.refreshFragmentSysRoleUser(true);
|
||||
},
|
||||
/**
|
||||
* 权限详情
|
||||
*/
|
||||
onSysRolePermClick (row) {
|
||||
this.$dialog.show('权限详情', FormSysRolePerm, {
|
||||
area: '1200px',
|
||||
offset: '30px'
|
||||
}, {
|
||||
roleId: row.roleId
|
||||
}).then(res => {}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 更新用户管理
|
||||
*/
|
||||
refreshFragmentSysRoleUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysRoleUser.SysUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysRoleUser.SysUser.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysRoleUser.sysRole.impl.onVisibleChange(true).catch(e => {});
|
||||
this.fragmentSysRoleUser.isInit = true;
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFragmentSysRole();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.buildFragmentPermCodeMap();
|
||||
let defaultFragment = this.getDefaultFragment();
|
||||
if (defaultFragment == null) {
|
||||
this.$message.error('您没有访问这个页面的权限，请与系统管理员联系！');
|
||||
} else {
|
||||
if (defaultFragment.refresh) defaultFragment.refresh();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 192);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<div class="tab-dialog-box" style="position: relative; margin-top: -15px;">
|
||||
<el-tabs v-model="activeFragmentId">
|
||||
<el-tab-pane label="权限资源" name="fragmentSysUserPerm" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="URL">
|
||||
<el-input class="filter-item" v-model="fragmentSysUserPerm.formFilter.url" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFragmentSysUserPerm(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysUserPerm.SysUserPerm.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysUserPerm.SysUserPerm.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysUserPerm.SysUserPerm.impl.getTableIndex" />
|
||||
<el-table-column label="所属角色" prop="roleName" width="150px" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属权限字" prop="permCode" />
|
||||
<el-table-column label="URL" prop="url" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="权限字" name="fragmentSysUserPermCode" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="权限字">
|
||||
<el-input class="filter-item" v-model="fragmentSysUserPermCode.formFilter.permCode" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFragmentSysUserPermCode(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysUserPermCode.SysUserPermCode.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysUserPermCode.SysUserPermCode.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysUserPermCode.SysUserPermCode.impl.getTableIndex" />
|
||||
<el-table-column label="所属角色" prop="roleName" width="150px" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="权限字" prop="permCode" />
|
||||
<el-table-column label="权限字类型" prop="permCodeType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="getPermCodeType(scope.row.permCodeType)">{{SysPermCodeType.getValue(scope.row.permCodeType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="菜单权限" name="fragmentSysUserMenu" style="width: 100%;">
|
||||
<el-form label-width="100px" size="mini" label-position="left" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input class="filter-item" v-model="fragmentSysUserMenu.formFilter.menuName" clearable
|
||||
placeholder="" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFragmentSysUserMenu(true)">查询</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="fragmentSysUserMenu.SysUserMenu.impl.dataList" size="mini" :height="getTableHeight + 'px'"
|
||||
@sort-change="fragmentSysUserMenu.SysUserMenu.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="55px"
|
||||
:index="fragmentSysUserPermCode.SysUserPermCode.impl.getTableIndex" />
|
||||
<el-table-column label="所属角色" prop="roleName" width="150px" />
|
||||
<el-table-column label="菜单">
|
||||
<template slot-scope="scope">
|
||||
<span>{{getMenuPathString(getMenuPathById(scope.row.menuId)) || scope.row.menuName}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜单类型" prop="menuType">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="getMenuType(scope.row)">{{SysMenuType.getValue(scope.row.menuType)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
import { SystemController } from '@/api';
|
||||
|
||||
export default {
|
||||
name: 'SysUserPerm',
|
||||
props: {
|
||||
userId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeFragmentId: 'fragmentSysUserPerm',
|
||||
menuMap: new Map(),
|
||||
fragmentSysUserPerm: {
|
||||
formFilter: {
|
||||
url: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
url: undefined
|
||||
},
|
||||
SysUserPerm: {
|
||||
impl: new TableWidget(this.loadSysUserPermData, this.loadSysUserPermVerify, false, false)
|
||||
},
|
||||
isInit: false
|
||||
},
|
||||
fragmentSysUserPermCode: {
|
||||
formFilter: {
|
||||
permCode: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
permCode: undefined
|
||||
},
|
||||
SysUserPermCode: {
|
||||
impl: new TableWidget(this.loadSysUserPermCodeData, this.loadSysUserPermCodeVerify, false, false)
|
||||
}
|
||||
},
|
||||
fragmentSysUserMenu: {
|
||||
formFilter: {
|
||||
menuName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
menuName: undefined
|
||||
},
|
||||
SysUserMenu: {
|
||||
impl: new TableWidget(this.loadSysUserMenuData, this.loadSysUserMenuVerify, false, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMenuType (row) {
|
||||
if (row.menuType === 0) {
|
||||
return 'primary'
|
||||
} else if (row.menuType === 1) {
|
||||
return 'success';
|
||||
} else if (row.menuType === 2) {
|
||||
return 'danger';
|
||||
} else if (row.menuType === 3) {
|
||||
return 'warning';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取所有菜单项
|
||||
*/
|
||||
loadSysMenuData () {
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getMenuPermList(this, {}).then(res => {
|
||||
res.data.forEach(item => {
|
||||
this.menuMap.set(item.menuId, item);
|
||||
});
|
||||
resolve();
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
getMenuPathById (menuId) {
|
||||
if (menuId == null || menuId === '') return null;
|
||||
let menuPath = [];
|
||||
do {
|
||||
let menuItem = this.menuMap.get(menuId);
|
||||
if (menuItem != null) {
|
||||
menuPath.unshift(menuItem);
|
||||
menuId = menuItem.parentId;
|
||||
} else {
|
||||
menuId = null;
|
||||
}
|
||||
} while (menuId != null);
|
||||
|
||||
return menuPath;
|
||||
},
|
||||
getMenuPathString (menuPath) {
|
||||
if (Array.isArray(menuPath) && menuPath.length > 0) {
|
||||
return menuPath.map(item => item.menuName).join(' / ');
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取用户权限资源列表函数，返回Promise
|
||||
*/
|
||||
loadSysUserPermData (params) {
|
||||
params.userId = this.userId;
|
||||
params.url = this.fragmentSysUserPerm.formFilterCopy.url;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysPermWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户权限资源获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserPermVerify () {
|
||||
this.fragmentSysUserPerm.formFilterCopy.url = this.fragmentSysUserPerm.formFilter.url;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新用户权限资源
|
||||
*/
|
||||
refreshFragmentSysUserPerm (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysUserPerm.SysUserPerm.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysUserPerm.SysUserPerm.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysUserPerm.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 获取用户权限字列表函数，返回Promise
|
||||
*/
|
||||
loadSysUserPermCodeData (params) {
|
||||
params.userId = this.userId;
|
||||
params.permCode = this.fragmentSysUserPermCode.formFilterCopy.permCode;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysPermCodeWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户权限资源获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserPermCodeVerify () {
|
||||
this.fragmentSysUserPermCode.formFilterCopy.permCode = this.fragmentSysUserPermCode.formFilter.permCode;
|
||||
return true;
|
||||
},
|
||||
getPermCodeType (permCodeType) {
|
||||
switch (permCodeType) {
|
||||
case this.SysPermCodeType.FORM: return 'primary';
|
||||
case this.SysPermCodeType.FRAGMENT: return 'warning';
|
||||
case this.SysPermCodeType.OPERATION: return 'success';
|
||||
default: return 'info';
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 更新用户权限资源
|
||||
*/
|
||||
refreshFragmentSysUserPermCode (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysUserPermCode.SysUserPermCode.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysUserPermCode.SysUserPermCode.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysUserPermCode.isInit = true;
|
||||
},
|
||||
/**
|
||||
* 获取用户权限资源列表函数，返回Promise
|
||||
*/
|
||||
loadSysUserMenuData (params) {
|
||||
params.userId = this.userId;
|
||||
params.menuName = this.fragmentSysUserMenu.formFilterCopy.menuName;
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.listSysMenuWithDetail(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data,
|
||||
totalCount: res.data.length
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户权限资源获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserMenuVerify () {
|
||||
this.fragmentSysUserMenu.formFilterCopy.menuName = this.fragmentSysUserMenu.formFilter.menuName;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 更新用户权限资源
|
||||
*/
|
||||
refreshFragmentSysUserMenu (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.fragmentSysUserMenu.SysUserMenu.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.fragmentSysUserMenu.SysUserMenu.impl.refreshTable();
|
||||
}
|
||||
this.fragmentSysUserMenu.isInit = true;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTableHeight () {
|
||||
return (this.getMainContextHeight - 150);
|
||||
},
|
||||
...mapGetters(['getMainContextHeight'])
|
||||
},
|
||||
mounted () {
|
||||
this.loadSysMenuData().catch(e => {});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-width="75px" size="mini" label-position="right" @submit.native.prevent>
|
||||
<filter-box :item-width="350">
|
||||
<el-form-item label="用户状态">
|
||||
<el-select class="filter-item" v-model="formSysUser.formFilter.sysUserStatus" :clearable="true"
|
||||
placeholder="用户状态" :loading="formSysUser.sysUserStatus.impl.loading"
|
||||
@visible-change="formSysUser.sysUserStatus.impl.onVisibleChange"
|
||||
@change="onSysUserStatusValueChange">
|
||||
<el-option v-for="item in formSysUser.sysUserStatus.impl.dropdownList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录名称">
|
||||
<el-input class="filter-item" v-model="formSysUser.formFilter.sysUserLoginName"
|
||||
:clearable="true" placeholder="登录名称" />
|
||||
</el-form-item>
|
||||
<el-button slot="operator" type="primary" :plain="true" size="mini" @click="refreshFormSysUser(true)">查询</el-button>
|
||||
<el-button slot="operator" type="primary" size="mini" :disabled="!checkPermCodeExist('formSysUser:fragmentSysUser:add')"
|
||||
@click="onAddRow()">
|
||||
新建
|
||||
</el-button>
|
||||
</filter-box>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table :data="formSysUser.SysUser.impl.dataList" size="mini" @sort-change="formSysUser.SysUser.impl.onSortChange"
|
||||
header-cell-class-name="table-header-gray">
|
||||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50px" :index="formSysUser.SysUser.impl.getTableIndex" />
|
||||
<el-table-column label="用户名" prop="loginName" sortable="custom">
|
||||
</el-table-column>
|
||||
<el-table-column label="昵称" prop="showName">
|
||||
</el-table-column>
|
||||
<el-table-column label="账号类型" prop="userTypeDictMap.name" />
|
||||
<el-table-column label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getUserStatusType(scope.row.userStatus)" size="mini">{{SysUserStatus.getValue(scope.row.userStatus)}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间">
|
||||
<template slot-scope="scope">
|
||||
<span>{{formatDateByStatsType(scope.row.createTime, 'day')}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="220px">
|
||||
<template slot-scope="scope">
|
||||
<el-button class="btn-table-edit" type="text" size="mini" @click="onEditRow(scope.row)"
|
||||
:disabled="isAdmin(scope.row) || !checkPermCodeExist('formSysUser:fragmentSysUser:update')"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button class="btn-table-delete" type="text" size="mini" @click="onDeleteRow(scope.row)"
|
||||
:disabled="isAdmin(scope.row) || !checkPermCodeExist('formSysUser:fragmentSysUser:delete')"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<el-button class="btn-table-delete" type="text" size="mini" @click="onResetPassword(scope.row)"
|
||||
:disabled="!checkPermCodeExist('formSysUser:fragmentSysUser:resetPassword')"
|
||||
>
|
||||
重置密码
|
||||
</el-button>
|
||||
<el-button class="btn-table-primary" type="text" size="mini"
|
||||
v-if="checkPermCodeExist('formSysUser:fragmentSysUser:listSysUserPermDetail')"
|
||||
@click="onSysUserPermClick(scope.row)">
|
||||
权限详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-col :span="24">
|
||||
<el-row type="flex" justify="end" style="margin-top: 10px;">
|
||||
<el-pagination
|
||||
:total="formSysUser.SysUser.impl.totalCount"
|
||||
:current-page="formSysUser.SysUser.impl.currentPage"
|
||||
:page-size="formSysUser.SysUser.impl.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@current-change="formSysUser.SysUser.impl.onCurrentPageChange"
|
||||
@size-change="formSysUser.SysUser.impl.onPageSizeChange">
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable-next-line */
|
||||
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
|
||||
/* eslint-disable-next-line */
|
||||
import { uploadMixin, statsDateRangeMixin, cachePageMixin, cachedPageChildMixin } from '@/core/mixins';
|
||||
/* eslint-disable-next-line */
|
||||
import { SystemController, DictionaryController } from '@/api';
|
||||
import editUser from '@/views/upms/formEditSysUser';
|
||||
import FormSysUserPerm from './formSysUserPerm.vue';
|
||||
|
||||
export default {
|
||||
name: 'formSysUser',
|
||||
props: {
|
||||
},
|
||||
mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
|
||||
data () {
|
||||
return {
|
||||
formSysUser: {
|
||||
formFilter: {
|
||||
sysUserStatus: undefined,
|
||||
sysUserLoginName: undefined
|
||||
},
|
||||
formFilterCopy: {
|
||||
sysUserStatus: undefined,
|
||||
sysUserLoginName: undefined
|
||||
},
|
||||
sysUserStatus: {
|
||||
impl: new DropdownWidget(this.loadSysUserStatusDropdownList)
|
||||
},
|
||||
SysUser: {
|
||||
impl: new TableWidget(this.loadSysUserData, this.loadSysUserVerify, true, false, 'createTime', 1)
|
||||
},
|
||||
isInit: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isAdmin (row) {
|
||||
return (row.userType === this.SysUserType.ADMIN);
|
||||
},
|
||||
getUserStatusType (status) {
|
||||
if (status === this.SysUserStatus.NORMAL) {
|
||||
return 'success';
|
||||
} else if (status === this.SysUserStatus.LOCKED) {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'info';
|
||||
}
|
||||
},
|
||||
onAddRow () {
|
||||
this.$dialog.show('新建用户', editUser, {
|
||||
area: '600px'
|
||||
}).then((res) => {
|
||||
this.refreshFormSysUser();
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
onEditRow (row) {
|
||||
this.loadRowData(row).then(rowData => {
|
||||
this.$dialog.show('编辑用户', editUser, {
|
||||
area: '600px'
|
||||
}, {
|
||||
rowData: rowData
|
||||
}).then((res) => {
|
||||
this.refreshFormSysUser();
|
||||
}).catch(e => {
|
||||
});
|
||||
}).catch(e => {
|
||||
//
|
||||
});
|
||||
},
|
||||
onDeleteRow (row) {
|
||||
let params = {
|
||||
userId: row.userId
|
||||
}
|
||||
this.$confirm('是否删除用户？').then(res => {
|
||||
return SystemController.deleteUser(this, params);
|
||||
}).then(res => {
|
||||
this.$message.success('删除成功');
|
||||
this.refreshFormSysUser(true);
|
||||
}).catch(e => {
|
||||
//
|
||||
});
|
||||
},
|
||||
onResetPassword (row) {
|
||||
this.$confirm('是否重置用户密码？').then(res => {
|
||||
return SystemController.resetUserPassword(this, {userId: row.userId});
|
||||
}).then(res => {
|
||||
this.$message.success('重置密码成功');
|
||||
}).catch(e => {
|
||||
//
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户管理数据获取函数，返回Primise
|
||||
*/
|
||||
loadSysUserData (params) {
|
||||
params.sysUserDtoFilter = {
|
||||
loginName: this.formSysUser.formFilterCopy.sysUserLoginName,
|
||||
userStatus: this.formSysUser.formFilterCopy.sysUserStatus
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
SystemController.getUserList(this, params).then(res => {
|
||||
resolve({
|
||||
dataList: res.data.dataList,
|
||||
totalCount: res.data.totalCount
|
||||
});
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户管理数据获取检测函数，返回true正常获取数据，返回false停止获取数据
|
||||
*/
|
||||
loadSysUserVerify () {
|
||||
this.formSysUser.formFilterCopy.sysUserLoginName = this.formSysUser.formFilter.sysUserLoginName;
|
||||
this.formSysUser.formFilterCopy.sysUserStatus = this.formSysUser.formFilter.sysUserStatus;
|
||||
return true;
|
||||
},
|
||||
/**
|
||||
* 用户状态下拉数据获取函数
|
||||
*/
|
||||
loadSysUserStatusDropdownList () {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params = {};
|
||||
DictionaryController.dictSysUserStatus(this, params).then(res => {
|
||||
resolve(res.getList());
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 用户状态下拉框显隐
|
||||
*/
|
||||
onSysUserStatusVisibleChange (show) {
|
||||
this.formSysUser.sysUserStatus.impl.onVisibleChange(show).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 用户状态选中值改变
|
||||
*/
|
||||
onSysUserStatusValueChange (value) {
|
||||
},
|
||||
/**
|
||||
* 权限详情
|
||||
*/
|
||||
onSysUserPermClick (row) {
|
||||
this.$dialog.show('权限详情', FormSysUserPerm, {
|
||||
area: '1200px',
|
||||
offset: '30px'
|
||||
}, {
|
||||
userId: row.userId
|
||||
}).then(res => {}).catch(e => {});
|
||||
},
|
||||
/**
|
||||
* 更新用户管理
|
||||
*/
|
||||
refreshFormSysUser (reloadData = false) {
|
||||
// 重新获取数据组件的数据
|
||||
if (reloadData) {
|
||||
this.formSysUser.SysUser.impl.refreshTable(true, 1);
|
||||
} else {
|
||||
this.formSysUser.SysUser.impl.refreshTable();
|
||||
}
|
||||
this.formSysUser.sysUserStatus.impl.onVisibleChange(true).catch(e => {});
|
||||
this.formSysUser.isInit = true;
|
||||
},
|
||||
loadRowData (row) {
|
||||
return new Promise((resolve, reject) => {
|
||||
var params = {
|
||||
userId: row.userId
|
||||
}
|
||||
|
||||
SystemController.getUser(this, params).then(res => {
|
||||
resolve(res.data);
|
||||
}).catch(e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
},
|
||||
onResume () {
|
||||
this.refreshFormSysUser();
|
||||
},
|
||||
initFormData () {
|
||||
},
|
||||
formInit () {
|
||||
this.initFormData();
|
||||
this.refreshFormSysUser();
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.formInit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user