Skip to content

C
confucius
Commit 667d676b authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 6f08a49d
Hide whitespace changes
Inline Side-by-side
Showing with 136 additions and 186 deletions
src/api/system/index.js
View file @ 667d676b
......@@ -80,13 +80,12 @@ export function getMenuList(data) {
* 获取菜单详情
* @param {JSON参数} data
*/
export function getMenuInfo(data)
{
return request({
url: '/Public/GetMenu',
method: 'post',
data
})
export function getMenuInfo(data) {
return request({
url: '/Public/GetMenu',
method: 'post',
data
})
}
/**
......@@ -100,3 +99,52 @@ export function saveMenu(data) {
data
})
}
/**
* 获取树形结构菜单
* @param {JSON参数} data
*/
export function queryTreeMenu(data) {
return request({
url: '/Public/GetTreeMenu',
method: 'post',
data
})
}
/**
* 获取角色分页列表
* @param {JSON参数} data
*/
export function queryRolePage(data) {
return request({
url: '/Public/GetRolePageList',
method: 'post',
data
})
}
/**
* 获取角色详情
* @param {JSON参数} data
*/
export function queryRoleInfo(data) {
return request({
url: '/Public/GetRole',
method: 'post',
data
})
}
/**
* 保存角色
* @param {JSON参数} data
*/
export function saveRoleInfo(data) {
return request({
url: '/Public/SetRole',
method: 'post',
data
})
}
src/components/system/role-form.vue
View file @ 667d676b
......@@ -2,30 +2,19 @@
<q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
<q-card style="width: 800px;max-width:900px;">
<q-card-section>
<div class="text-h6">{{objOption.MenuId==0?'新增菜单信息':'修改菜单信息'}}</div>
<div class="text-h6">{{objOption.MenuId==0?'新增角色信息':'修改角色信息'}}</div>
</q-card-section>
<q-card-section class="q-pt-none scroll" style="max-height: 70vh">
<div class="text-caption q-mb-lg q-px-md text-grey-6">菜单信息</div>
<div class="text-caption q-mb-lg q-px-md text-grey-6">角色信息</div>
<div class="row wrap">
<q-input filled stack-label maxlength="20" :dense="false" v-model="objOption.MenuName" ref="MenuName"
class="col-6 q-pr-lg q-pb-lg" label="菜单名称" :rules="[val => !!val || '请填写菜单名称']" />
<q-input filled stack-label maxlength="50" :dense="false" v-model="objOption.MenuUrl" ref="MenuUrl"
class="col-6 q-pr-lg q-pb-lg" label="菜单地址" />
<q-select class="col-6 q-pb-lg" v-model="objOption.MenuType" :options="MenuTypeOpts" emit-value map-options
label="菜单类型" @input="queryMenuList()" />
<q-select class="col-6 q-pb-lg" v-model="objOption.MenuLevel" :options="MenuLevelOpts" emit-value map-options
label="菜单等级" @input="queryMenuList()" />
<q-select :option-value="(item) => item === null ? null : item.MenuId" option-label="MenuName"
v-model="objOption.ParentId" :options="MenuList" label="上级菜单" :dense="false" emit-value map-options
class="col-6 q-pb-lg" />
<q-input stack-label maxlength="50" :dense="false" v-model="objOption.MenuIcon" class="col-6 q-pr-lg q-pb-lg"
label="图标" />
<q-input filled stack-label maxlength="50" :dense="false" v-model="objOption.SortNum"
class="col-6 q-pr-lg q-pb-lg" label="排序" />
<q-input filled stack-label maxlength="50" :dense="false" v-model="objOption.RoleName" ref="RoleName"
class="col-6 q-pr-lg q-pb-lg" label="角色名称" :rules="[val => !!val || '请填写角色名称']" />
<q-input filled stack-label maxlength="100" :dense="false" v-model="objOption.RoleIntro" ref="RoleIntro"
class="col-6 q-pr-lg q-pb-lg" label="角色介绍" />
<div class="col-6 q-pr-lg q-pb-lg q-pt-lg">
<q-toggle size="md" label="状态" color="primary" :false-value="1" :true-value="0"
v-model="objOption.Status" />
<div class="text-grey-6 text-caption">注意：关闭后，菜单将无法正常使用.</div>
<div class="text-grey-6 text-caption">注意：关闭后，角色将无法正常使用.</div>
</div>
</div>
</q-card-section>
......@@ -33,7 +22,7 @@
<q-card-actions align="right" class="bg-white">
<q-btn label="取消" color="dark" style="font-weight:400 !important" @click="closeSaveForm" />
<q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
@click="saveSystemMenu" />
@click="saveRole" />
</q-card-actions>
</q-card>
</q-dialog>
......@@ -41,11 +30,9 @@
<script>
import {
getMenuList,
saveMenu,
getMenuTypeList,
getMenuLevelList,
getMenuInfo
queryTreeMenu,
queryRoleInfo,
saveRoleInfo,
} from '../../api/system/index'
export default {
props: {
......@@ -56,20 +43,12 @@
},
data() {
return {
//菜单等级
MenuLevelOpts: [],
//菜单类型
MenuTypeOpts: [],
persistent: true,
objOption: {
MenuId: 0, //菜单编号
ParentId: 0, //父级节点编号
MenuName: "", //菜单名称
MenuUrl: "", //菜单地址
MenuIcon: "", //菜单图标
MenuLevel: -1, //菜单等级
MenuType: -1, //菜单类型
SortNum: 0, //排序
RoleId: 0, //角色编号
RoleName: "", //角色名称
RoleIntro: "", //角色介绍
RoleAuth: "", //角色权限
Status: 0, //状态(0-正常,1-禁用)},
},
optionTitle: "",
......@@ -79,7 +58,7 @@
}
},
mounted() {
this.initData();
this.queryMenuList();
this.initObj()
},
methods: {
......@@ -87,61 +66,32 @@
queryMenuList() {
this.MenuList = [];
var qMsg = {
MenuLevel: Number(this.objOption.MenuLevel - 1),
MenuType: this.objOption.MenuType
}
getMenuList(qMsg).then(res => {
var tempArray = [];
if (res.Data && res.Data.length > 0) {
res.Data.forEach(item => {
var obj = {
MenuId: item.MenuId.toString(),
MenuName: item.MenuName
};
tempArray.push(obj);
});
}
this.MenuList = tempArray;
this.$forceUpdate();
queryTreeMenu(qMsg).then(res => {
console.log("res", res);
})
},
//初始化下拉框
initData() {
this.MenuTypeOpts = getMenuTypeList();
this.MenuLevelOpts = getMenuLevelList();
},
//初始化表单
initObj() {
if (this.saveObj && this.saveObj.MenuId > 0) {
if (this.saveObj.MenuType > 0 || this.saveObj.MenuLevel > 0) {
this.objOption.MenuType = this.saveObj.MenuType;
this.objOption.MenuLevel = this.saveObj.MenuLevel;
this.queryMenuList();
}
getMenuInfo({
MenuId: this.saveObj.MenuId
if (this.saveObj && this.saveObj.RoleId > 0) {
queryRoleInfo({
RoleId: this.saveObj.RoleId
}).then(res => {
this.objOption.MenuId = res.Data.MenuId;
this.objOption.ParentId = res.Data.ParentId.toString();
this.objOption.MenuName = res.Data.MenuName;
this.objOption.MenuUrl = res.Data.MenuUrl;
this.objOption.MenuIcon = res.Data.MenuIcon;
this.objOption.MenuLevel = res.Data.MenuLevel;
this.objOption.MenuType = res.Data.MenuType;
this.objOption.SortNum = res.Data.SortNum;
this.objOption.RoleId = res.Data.RoleId;
this.objOption.RoleName = res.Data.RoleName;
this.objOption.RoleIntro = res.Data.RoleIntro;
this.objOption.RoleAuth = res.Data.RoleAuth;
this.objOption.Status = res.Data.Status;
})
this.optionTitle = "修改菜单信息"
this.optionTitle = "修改角色信息"
} else {
this.optionTitle = "新增菜单"
this.objOption.MenuId = 0;
this.objOption.ParentId = 0;
this.objOption.MenuName = "";
this.objOption.MenuUrl = "";
this.objOption.MenuIcon = "";
this.objOption.MenuLevel = -1;
this.objOption.MenuType = -1;
this.objOption.SortNum = 0;
this.optionTitle = "新增角色"
this.objOption.RoleId = 0;
this.objOption.RoleName = "";
this.objOption.RoleIntro = "";
this.objOption.RoleAuth = "";
this.objOption.Status = 0;
}
},
......@@ -151,9 +101,9 @@
this.persistent = false
},
//保存菜单
saveSystemMenu() {
saveRole() {
this.saveLoading = true
saveMenu(this.objOption).then(res => {
saveRoleInfo(this.objOption).then(res => {
this.saveLoading = false
this.$q.notify({
icon: 'iconfont icon-chenggong',
......
src/pages/system/role.vue
View file @ 667d676b
......@@ -3,20 +3,8 @@
<div class="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md">
<div class="col-3">
<q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.MenuName"
label="菜单名称" />
</div>
<div class="col-3">
<q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.MenuUrl"
label="菜单地址" />
</div>
<div class="col-3">
<q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.MenuType" :options="MenuTypeOpts"
emit-value map-options label="菜单类型" />
</div>
<div class="col-3">
<q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.MenuLevel"
:options="MenuLevelOpts" emit-value map-options label="菜单等级" />
<q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.RoleName"
label="角色名称" />
</div>
<div class="col-3">
<q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.Status" :options="ShowOpts"
......@@ -24,12 +12,12 @@
</div>
</div>
<div class="page-option">
<q-btn color="accent" class="q-mr-md" icon="add" label="新增菜单" @click="EditMenu(null)" />
<q-btn color="accent" class="q-mr-md" icon="add" label="新增角色" @click="EditRole(null)" />
</div>
</div>
<div class="page-content">
<q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
separator="none" title="菜单信息" :data="data" :columns="columns" row-key="name">
separator="none" title="角色信息" :data="data" :columns="columns" row-key="name">
<template v-slot:body-cell-Status="props">
<q-td :props="props">
<q-badge :color="props.value==1?'negative':'primary'" :label="props.value==0?'正常':'禁用'" />
......@@ -42,80 +30,60 @@
<template v-slot:body-cell-optioned="props">
<q-td :props="props">
<q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
@click="EditMenu(props.row)" />
@click="EditRole(props.row)" />
</q-td>
</template>
</q-table>
<menu-form v-if="persistent_menu" :save-obj="menuObjOption" @close="closeMenuSaveForm" @success="refreshPage">
</menu-form>
<role-form v-if="persistent_role" :save-obj="roleObjOption" @close="closeroleSaveForm" @success="refreshPage">
</role-form>
</div>
</div>
</template>
<script>
import {
getMenuPage,
getMenuTypeList,
getMenuLevelList
queryRolePage
} from '../../api/system/index'
import menuForm from '../../components/system/menu-form'
import roleForm from '../../components/system/role-form'
export default {
meta: {
title: "菜单管理"
title: "角色管理"
},
components: {
menuForm,
roleForm,
},
data() {
return {
currentUrl: "",
columns: [{
name: 'MenuId',
label: '菜单编号',
field: 'MenuId',
name: 'RoleId',
label: '角色编号',
field: 'RoleId',
align: 'left'
},
{
name: 'MenuName',
name: 'RoleName',
required: true,
label: '菜单名称',
label: '角色名称',
align: 'left',
field: row => row.MenuName
},
{
name: 'MenuUrl',
label: '菜单地址',
field: 'MenuUrl',
align: 'left'
},
{
name: 'MenuTypeStr',
label: '菜单类型',
field: 'MenuTypeStr',
align: 'left'
field: row => row.RoleName
},
{
name: 'MenuLevel',
label: '菜单等级',
field: 'MenuLevel',
name: 'RoleIntro',
label: '描述',
field: 'RoleIntro',
align: 'left'
},
{
name: 'MenuIcon',
label: '图标',
field: 'MenuIcon',
name: 'CreateByName',
label: '创建人',
field: 'CreateByName',
align: 'left'
},
{
name: 'SortNum',
label: '排序',
field: 'SortNum',
align: 'left'
},
{
name: 'CreateTimeStr',
name: 'CreateDateStr',
label: '创建时间',
field: 'CreateTimeStr',
field: 'CreateDateStr',
align: 'left'
},
{
......@@ -127,7 +95,7 @@
{
name: 'optioned',
label: '操作',
field: 'MenuId'
field: 'RoleId'
}
],
data: [],
......@@ -145,51 +113,38 @@
value: '1'
}
],
//菜单等级
MenuLevelOpts: [],
//菜单类型
MenuTypeOpts: [],
msg: {
pageIndex: 1,
pageSize: 12,
rowsPerPage: 12,
MenuName: "",
MenuUrl: "",
MenuLevel: -1,
MenuType: -1,
RoleName: "",
Status: "-1",
},
pageCount: 0,
persistent_menu: false,
menuObjOption: null,
persistentExamine_menu: false
persistent_role: false,
roleObjOption: null,
persistentExamine_role: false
}
},
mounted() {
this.initData();
this.currentUrl = this.$route.path
this.getmenulist()
this.getRolelist()
},
methods: {
//初始化下拉框
initData() {
this.MenuTypeOpts = getMenuTypeList();
this.MenuLevelOpts = getMenuLevelList();
},
//重新查询
resetSearch() {
this.msg.pageIndex = 1;
this.getmenulist();
this.getRolelist();
},
//翻页
changePage(val) {
this.msg.pageIndex = val;
this.getmenulist()
this.getRolelist()
},
//获取菜单分页列表
getmenulist() {
getRolelist() {
this.loading = true;
getMenuPage(this.msg).then(res => {
queryRolePage(this.msg).then(res => {
this.loading = false
this.data = res.Data.PageData
this.pageCount = res.Data.PageCount
......@@ -199,29 +154,26 @@
},
//刷新页面
refreshPage() {
if (!this.menuObjOption) {
if (!this.roleObjOption) {
this.msg.pageIndex = 1;
this.msg.MenuName = "";
this.msg.MenuUrl = "";
this.msg.MenuLevel = -1;
this.msg.MenuType = -1;
this.msg.RoleName = "";
this.msg.Status = "-1";
}
this.getmenulist()
this.getRolelist()
},
//新增修改菜单
EditMenu(obj) {
//新增修改角色
EditRole(obj) {
if (obj) {
this.menuObjOption = obj
this.roleObjOption = obj
} else {
this.menuObjOption = null
this.roleObjOption = null
}
this.persistent_menu = true
this.persistent_role = true
},
//关闭弹窗
closeMenuSaveForm() {
this.persistent_menu = false
this.persistentExamine_menu = false
closeroleSaveForm() {
this.persistent_role = false
this.persistentExamine_role = false
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment