Skip to content

O
openApi
Commit dd372aa5 authored by hangjun83's avatar hangjun83
Browse files
Options

前端： 1、调整样式页面

parent 9e49e6da
Hide whitespace changes
Inline Side-by-side
Showing with 684 additions and 782 deletions
front/src/assets/doc/setting.md
View file @ dd372aa5
...@@ -155,7 +155,7 @@ App running at: ...@@ -155,7 +155,7 @@ App running at:
``` ```
> <strong>注意：</strong> 如果需要打包进行正式环境的运行要执行： > <strong>注意：</strong> 如果需要打包进行正式环境的运行要执行：
```sh ```sh
npm build #运行结束会在dist文件生成html文件，将该dist文件夹打包上传至服务中。 npm run build #运行结束会在dist文件生成html文件，将该dist文件夹打包上传至服务中。
``` ```
......
front/src/styles/table-common.less
View file @ dd372aa5
...@@ -3,6 +3,11 @@ ...@@ -3,6 +3,11 @@
margin-bottom: 2vh; margin-bottom: 2vh;
} }
.operation button {
width: 150px;
height: 40px;
}
.select-count { .select-count {
font-weight: 600; font-weight: 600;
color: #40a9ff; color: #40a9ff;
......
front/src/styles/tree-common.less
View file @ dd372aa5
.search { .search {
.operation { .operation {
margin-bottom: 2vh; margin-bottom: 2vh;
height: 80vh;
}
.operation form input {
width: 550px;
height: 35px;
} }
.select-title { .select-title {
......
front/src/views/doc-manage/server.vue
View file @ dd372aa5
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<Menu active-name="1-1" theme="primary" width="auto" @on-select="currName = $event"> <Menu active-name="1-1" theme="primary" width="auto" @on-select="currName = $event">
<MenuItem name="1-1">安装配置</MenuItem> <MenuItem name="1-1">安装配置</MenuItem>
<MenuItem name="1-2">服务器端</MenuItem> <MenuItem name="1-2">服务器端</MenuItem>
<MenuItem name="1-3">前端</MenuItem> <MenuItem name="1-3">页面端</MenuItem>
</Menu> </Menu>
</Sider> </Sider>
<Content :style="{ <Content :style="{
......
front/src/views/main.less
View file @ dd372aa5
...@@ -356,4 +356,68 @@ ...@@ -356,4 +356,68 @@
right: 4px; right: 4px;
z-index: 100; z-index: 100;
top: 1px; top: 1px;
}
//表格公共样式
.tableInfoBox {
position: relative;
margin: 10px 0px 0px;
background-color: #fff;
border: 1px;
.ivu-table-wrapper {
border: 0px;
}
.ivu-table-border td {
border-color: #f9f9f9;
height: 65px;
}
.ivu-table-tip td {
border-bottom: 1px;
span {
width: 100%;
padding: 0px;
display: inline-block;
color: #aaaaaa;
background-repeat: no-repeat;
background-position: center 50%;
}
}
table th .ivu-table-cell {
position: relative;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: inherit;
padding-left: 10px;
padding-right: 10px;
}
/*头部th*/
.ivu-table-header th,
.ivu-table-fixed-header th {
color: #252b2d;
font-weight: bold;
background-color: #f9f9f9;
border:0px;
height: 105px;
}
.ivu-table table {
width: calc(~'100% - 0px') !important;
}
}
/*-弹窗居中显示-*/
.vertical-center-modal {
display: flex;
align-items: center;
justify-content: center;
.ivu-modal {
top: 0;
}
} }
\ No newline at end of file
front/src/views/sys/menu-manage/menuManage.vue
View file @ dd372aa5
...@@ -3,759 +3,625 @@ ...@@ -3,759 +3,625 @@
@import "./menuManage.less"; @import "./menuManage.less";
</style> </style>
<template> <template>
<div class="search"> <div class="search">
<Card> <Row type="flex" justify="start" :gutter="24" v-show="showType == 'tree'">
<Row class="operation" align="middle" justify="space-between"> <Col :sm="10" :md="10" :lg="10" :xl="8">
<div> <Card class="operation">
<Button <Row align="middle" justify="start">
@click="add" <div>
type="primary" <Button @click="add" type="primary" icon="md-add" v-show="showType == 'tree'">添加子节点</Button>
icon="md-add" <Button @click="delAll" icon="md-trash">批量删除</Button>
v-show="showType == 'tree'" <Dropdown @on-click="handleDropdown" v-show="showType == 'tree'">
>添加子节点</Button <Button>
> 更多操作
<Button @click="delAll" icon="md-trash">批量删除</Button> <Icon type="md-arrow-dropdown"></Icon>
<Dropdown @on-click="handleDropdown" v-show="showType == 'tree'"> </Button>
<Button> <DropdownMenu slot="list">
更多操作 <DropdownItem name="refresh">刷新</DropdownItem>
<Icon type="md-arrow-dropdown"></Icon> <DropdownItem name="expandOne">收合所有</DropdownItem>
</Button> <DropdownItem name="expandTwo">仅展开一级</DropdownItem>
<DropdownMenu slot="list"> <DropdownItem name="expandThree">仅展开两级</DropdownItem>
<DropdownItem name="refresh">刷新</DropdownItem> </DropdownMenu>
<DropdownItem name="expandOne">收合所有</DropdownItem> </Dropdown>
<DropdownItem name="expandTwo">仅展开一级</DropdownItem> </div>
<DropdownItem name="expandThree">仅展开两级</DropdownItem> </Row>
</DropdownMenu> <Divider />
</Dropdown> <Row type="flex" justify="start" :gutter="24" v-show="showType == 'tree'">
</div> <Col>
</Row> <Alert v-show="editTitle">
<Row type="flex" justify="start" :gutter="16" v-show="showType == 'tree'"> <template slot="desc">
<Col :sm="8" :md="8" :lg="8" :xl="6"> 当前选择编辑：
<Alert show-icon> <span class="select-title">{{ editTitle }}</span>
当前选择编辑： <a class="select-clear" v-show="form.id && editTitle" @click="cancelEdit">取消选择</a>
<span class="select-title">{{ editTitle }}</span> </template>
<a </Alert>
class="select-clear" <div style="position: relative">
v-show="form.id && editTitle" <div class="tree-bar" :style="{ maxHeight: maxHeight }">
@click="cancelEdit" <Tree ref="tree" :data="data" show-checkbox :render="renderContent" @on-select-change="selectTree" @on-check-change="changeSelect" :check-strictly="!strict"></Tree>
>取消选择</a </div>
> <Spin size="large" fix v-if="loading"></Spin>
</Alert> </div>
<div style="position: relative"> </Col>
<div class="tree-bar" :style="{ maxHeight: maxHeight }">
<Tree </Row>
ref="tree" </Card>
:data="data"
show-checkbox
:render="renderContent"
@on-select-change="selectTree"
@on-check-change="changeSelect"
:check-strictly="!strict"
></Tree>
</div>
<Spin size="large" fix v-if="loading"></Spin>
</div>
</Col> </Col>
<Col :sm="16" :md="16" :lg="16" :xl="9"> <Col :sm="18" :md="18" :lg="18" :xl="11">
<Form <Card class="operation" bordered shadow>
ref="form" <Row>
:model="form" <Icon type="ios-apps" style="display:inline-block;padding-top:5px;"/>
:label-width="110" <span style="display:inline-block;padding-left:15px;font-size:16px;font-weight:bold;color:#252b2d">菜单编辑</span>
:rules="formValidate" </Row>
> <Divider />
<Row align="middle" justify="start" v-show="editTitle">
<Form ref="form" :model="form" :label-width="110" :rules="formValidate">
<FormItem label="类型" prop="type">
<div v-show="form.menuType == 'top'">
<Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
<span>顶部菜单</span>
</div>
<div v-show="form.menuType == 'page'">
<Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
<span>页面菜单</span>
</div>
<div v-show="form.menuType == 'button'">
<Icon type="md-radio-button-on" size="16" style="margin-right: 5px"></Icon>
<span>操作按钮</span>
</div>
</FormItem>
<FormItem label="上级菜单" prop="parentTitle" class="form-noheight">
<div style="display: flex">
<Input v-model="form.parentTitle" readonly style="margin-right: 10px" />
<Poptip transfer trigger="click" placement="right-start" title="选择上级菜单" width="250">
<Button icon="md-list">选择菜单</Button>
<div slot="content" class="tree-bar tree-select">
<Tree :data="dataEdit" @on-select-change="selectTreeEdit"></Tree>
<Spin size="large" fix v-if="loading"></Spin>
</div>
</Poptip>
</div>
</FormItem>
<FormItem label="名称" prop="name" v-if="form.menuType == 'top' || form.menuType == 'page'">
<Input v-model="form.name" />
</FormItem>
<FormItem label="名称" prop="name" v-if="form.menuType == 'button'" class="block-tool">
<Tooltip placement="right" content="操作按钮名称不得重复">
<Input v-model="form.name" />
</Tooltip>
</FormItem>
<FormItem label="标题" prop="title">
<Input v-model="form.title" />
</FormItem>
<FormItem label="页面路径" prop="path">
<Input v-model="form.path" />
</FormItem>
<FormItem label="按钮权限类型" prop="buttonType" v-if="form.menuType == 'button'">
<dict dict="defaultButtonPermission" v-model="form.buttonType" placeholder="请选择或输入搜索" filterable clearable />
</FormItem>
<FormItem label="图标" prop="icon" v-if="form.menuType == 'top' || form.menuType == 'page'">
<icon-choose showCustom showInput v-model="form.icon"></icon-choose>
</FormItem>
<FormItem label="前端组件" prop="component" v-if="form.menuType == 'page'">
<Input v-model="form.component" />
</FormItem>
<FormItem label="排序值" prop="sortOrder">
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
<InputNumber :max="1000" :min="0" v-model="form.sort"></InputNumber>
</Tooltip>
</FormItem>
<FormItem label="是否启用" prop="status">
<i-switch size="large" v-model="form.status" :true-value="1" :false-value="0">
<span slot="open">启用</span>
<span slot="close">禁用</span>
</i-switch>
</FormItem>
<FormItem>
<Button style="margin-right: 5px" @click="submitEdit" :loading="submitLoading" :disabled="!form.id || !editTitle" type="primary" icon="ios-create-outline">修改并保存</Button>
<Button @click="handleReset">重置</Button>
</FormItem>
</Form>
</Row>
</Card>
</Col>
</Row>
</Card>
<Modal draggable class="operation" :title="modalTitle" v-model="menuModalVisible" :mask-closable="false" :width="800" :styles="{ top: '30px' }">
<Form ref="formAdd" :model="formAdd" :label-width="110" :rules="formValidate">
<div v-if="showParent">
<FormItem label="上级节点：">{{ parentTitle }}</FormItem>
</div>
<FormItem label="类型" prop="type"> <FormItem label="类型" prop="type">
<div v-show="form.menuType == 'top'"> <div v-show="formAdd.type == -1">
<Icon <Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
type="ios-navigate-outline" <span>顶部菜单</span>
size="16" </div>
style="margin-right: 5px" <div v-show="formAdd.type == 0">
></Icon> <Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
<span>顶部菜单</span> <span>页面菜单</span>
</div> </div>
<div v-show="form.menuType == 'page'"> <div v-show="formAdd.type == 1">
<Icon <Icon type="md-radio-button-on" size="16" style="margin-right: 5px"></Icon>
type="ios-list-box-outline" <span>操作按钮</span>
size="16" </div>
style="margin-right: 5px"
></Icon>
<span>页面菜单</span>
</div>
<div v-show="form.menuType == 'button'">
<Icon
type="md-radio-button-on"
size="16"
style="margin-right: 5px"
></Icon>
<span>操作按钮</span>
</div>
</FormItem> </FormItem>
<FormItem label="上级菜单" prop="parentTitle" class="form-noheight"> <FormItem label="名称" prop="name" v-if="formAdd.type == -1 || formAdd.type == 0">
<div style="display: flex"> <Input v-model="formAdd.name" />
<Input
v-model="form.parentTitle"
readonly
style="margin-right: 10px"
/>
<Poptip
transfer
trigger="click"
placement="right-start"
title="选择上级菜单"
width="250"
>
<Button icon="md-list">选择菜单</Button>
<div slot="content" class="tree-bar tree-select">
<Tree
:data="dataEdit"
@on-select-change="selectTreeEdit"
></Tree>
<Spin size="large" fix v-if="loading"></Spin>
</div>
</Poptip>
</div>
</FormItem>
<FormItem
label="名称"
prop="name"
v-if="form.menuType == 'top' || form.menuType == 'page'"
>
<Input v-model="form.name" />
</FormItem> </FormItem>
<FormItem <FormItem label="名称" prop="name" v-if="formAdd.type == 1" class="block-tool">
label="名称" <Tooltip placement="right" content="操作按钮名称不得重复">
prop="name" <Input v-model="formAdd.name" />
v-if="form.menuType == 'button'" </Tooltip>
class="block-tool"
>
<Tooltip placement="right" content="操作按钮名称不得重复">
<Input v-model="form.name" />
</Tooltip>
</FormItem> </FormItem>
<FormItem <FormItem label="标题" prop="title">
label="标题" <Input v-model="formAdd.title" />
prop="title"
>
<Input v-model="form.title" />
</FormItem> </FormItem>
<FormItem label="页面路径" prop="path"> <FormItem label="路径" prop="path" v-if="formAdd.type == 0 || formAdd.type == 1">
<Input v-model="form.path" /> <Input v-model="formAdd.path" />
</FormItem> </FormItem>
<FormItem <FormItem label="按钮权限类型" prop="buttonType" v-if="formAdd.type == 1">
label="按钮权限类型" <dict dict="defaultButtonPermission" v-model="formAdd.buttonType" placeholder="请选择或输入搜索" filterable clearable />
prop="buttonType"
v-if="form.menuType == 'button'"
>
<dict
dict="defaultButtonPermission"
v-model="form.buttonType"
placeholder="请选择或输入搜索"
filterable
clearable
/>
</FormItem> </FormItem>
<FormItem <FormItem label="图标" prop="icon" v-if="formAdd.type == -1 || formAdd.type == 0">
label="图标" <icon-choose showCustom showInput v-model="formAdd.icon"></icon-choose>
prop="icon"
v-if="form.menuType == 'top' || form.menuType == 'page'"
>
<icon-choose
showCustom
showInput
v-model="form.icon"
></icon-choose>
</FormItem> </FormItem>
<FormItem label="前端组件" prop="component" v-if="form.menuType == 'page'"> <FormItem label="前端组件" prop="component" v-if="formAdd.type == 0">
<Input v-model="form.component" /> <Input v-model="formAdd.component" />
</FormItem> </FormItem>
<FormItem label="排序值" prop="sortOrder"> <FormItem label="排序值" prop="sort">
<Tooltip <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
trigger="hover" <InputNumber :max="1000" :min="0" v-model="formAdd.sort"></InputNumber>
placement="right" </Tooltip>
content="值越小越靠前，支持小数"
>
<InputNumber
:max="1000"
:min="0"
v-model="form.sort"
></InputNumber>
</Tooltip>
</FormItem> </FormItem>
<FormItem label="是否启用" prop="status"> <FormItem label="是否启用" prop="status">
<i-switch <i-switch size="large" v-model="formAdd.status" :true-value="1" :false-value="0">
size="large" <span slot="open">启用</span>
v-model="form.status" <span slot="close">禁用</span>
:true-value="1" </i-switch>
:false-value="0"
>
<span slot="open">启用</span>
<span slot="close">禁用</span>
</i-switch>
</FormItem> </FormItem>
<FormItem> </Form>
<Button <div slot="footer">
style="margin-right: 5px" <Button type="text" @click="menuModalVisible = false">取消</Button>
@click="submitEdit" <Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
:loading="submitLoading"
:disabled="!form.id || !editTitle"
type="primary"
icon="ios-create-outline"
>修改并保存</Button
>
<Button @click="handleReset">重置</Button>
</FormItem>
</Form>
</Col>
</Row>
</Card>
<Modal
draggable
:title="modalTitle"
v-model="menuModalVisible"
:mask-closable="false"
:width="500"
:styles="{ top: '30px' }"
>
<Form
ref="formAdd"
:model="formAdd"
:label-width="110"
:rules="formValidate"
>
<div v-if="showParent">
<FormItem label="上级节点：">{{ parentTitle }}</FormItem>
</div> </div>
<FormItem label="类型" prop="type">
<div v-show="formAdd.type == -1">
<Icon
type="ios-navigate-outline"
size="16"
style="margin-right: 5px"
></Icon>
<span>顶部菜单</span>
</div>
<div v-show="formAdd.type == 0">
<Icon
type="ios-list-box-outline"
size="16"
style="margin-right: 5px"
></Icon>
<span>页面菜单</span>
</div>
<div v-show="formAdd.type == 1">
<Icon
type="md-radio-button-on"
size="16"
style="margin-right: 5px"
></Icon>
<span>操作按钮</span>
</div>
</FormItem>
<FormItem
label="名称"
prop="name"
v-if="formAdd.type == -1 || formAdd.type == 0"
>
<Input v-model="formAdd.name" />
</FormItem>
<FormItem
label="名称"
prop="name"
v-if="formAdd.type == 1"
class="block-tool"
>
<Tooltip placement="right" content="操作按钮名称不得重复">
<Input v-model="formAdd.name" />
</Tooltip>
</FormItem>
<FormItem
label="标题"
prop="title"
>
<Input v-model="formAdd.title" />
</FormItem>
<FormItem label="路径" prop="path" v-if="formAdd.type == 0 || formAdd.type == 1">
<Input v-model="formAdd.path" />
</FormItem>
<FormItem
label="按钮权限类型"
prop="buttonType"
v-if="formAdd.type == 1"
>
<dict
dict="defaultButtonPermission"
v-model="formAdd.buttonType"
placeholder="请选择或输入搜索"
filterable
clearable
/>
</FormItem>
<FormItem
label="图标"
prop="icon"
v-if="formAdd.type == -1 || formAdd.type == 0"
>
<icon-choose
showCustom
showInput
v-model="formAdd.icon"
></icon-choose>
</FormItem>
<FormItem label="前端组件" prop="component" v-if="formAdd.type == 0">
<Input v-model="formAdd.component" />
</FormItem>
<FormItem label="排序值" prop="sort">
<Tooltip
trigger="hover"
placement="right"
content="值越小越靠前，支持小数"
>
<InputNumber
:max="1000"
:min="0"
v-model="formAdd.sort"
></InputNumber>
</Tooltip>
</FormItem>
<FormItem label="是否启用" prop="status">
<i-switch
size="large"
v-model="formAdd.status"
:true-value="1"
:false-value="0"
>
<span slot="open">启用</span>
<span slot="close">禁用</span>
</i-switch>
</FormItem>
</Form>
<div slot="footer">
<Button type="text" @click="menuModalVisible = false">取消</Button>
<Button type="primary" :loading="submitLoading" @click="submitAdd"
>提交</Button
>
</div>
</Modal> </Modal>
</div> </div>
</template> </template>
<script> <script>
import { import {
getAllPermissionList, addSubMenus,
loadPermission, editMenus,
addSubMenus, deleteMenus,
editMenus,
deleteMenus,
} from "@/api/index"; } from "@/api/index";
import dict from "@/views/my-components/xboot/dict"; import dict from "@/views/my-components/xboot/dict";
import IconChoose from "@/views/my-components/xboot/icon-choose"; import IconChoose from "@/views/my-components/xboot/icon-choose";
import util from "@/libs/util.js"; import util from "@/libs/util.js";
export default { export default {
name: "menu-manage", name: "menu-manage",
components: { components: {
dict, dict,
IconChoose, IconChoose,
},
data() {
return {
showType: "tree",
loading: true,
strict: false,
maxHeight: "500px",
expandLevel: 3,
menuModalVisible: false,
iconModalVisible: false,
selectList: [],
showParent: false,
parentTitle: "",
editTitle: "",
modalTitle: "",
form: {
id: "",
name: "",
title: "",
icon: "",
path: "",
component: "",
parentId: "",
buttonType: "",
menuType: 0,
sort: 0,
level: 0,
status: 0,
url: "",
showAlways: true,
parentTitle: "",
},
formAdd: {
buttonType: "",
},
formValidate: {
title: [{ required: true, message: "标题不能为空", trigger: "change" }],
name: [
{ required: true, message: "名称不能为空", trigger: "change" },
],
icon: [{ required: true, message: "图标不能为空", trigger: "change" }],
path: [{ required: true, message: "路径不能为空", trigger: "change" }],
component: [
{ required: true, message: "前端组件不能为空", trigger: "change" },
],
sort: [
{
required: true,
type: "number",
message: "排序值不能为空",
trigger: "change",
},
],
},
submitLoading: false,
data: [],
dataEdit: [],
dictPermissions: [],
};
},
methods: {
init() {
this.getAllList();
}, },
renderContent(h, { root, node, data }) { data() {
let icon = ""; return {
if (data.level == 0) { showType: "tree",
icon = "ios-navigate"; loading: true,
} else if (data.level == 1) { strict: false,
icon = "md-list-box"; maxHeight: "500px",
} else if (data.level == 2) { expandLevel: 3,
icon = "md-list"; menuModalVisible: false,
} else if (data.level == 3) { iconModalVisible: false,
icon = "md-radio-button-on"; selectList: [],
} else { showParent: false,
icon = "md-radio-button-off"; parentTitle: "",
} editTitle: "",
return h("span", [ modalTitle: "",
h("span", [ form: {
h("Icon", { id: "",
props: { name: "",
type: icon, title: "",
size: "16", icon: "",
path: "",
component: "",
parentId: "",
buttonType: "",
menuType: 0,
sort: 0,
level: 0,
status: 0,
url: "",
showAlways: true,
parentTitle: "",
}, },
style: { formAdd: {
"margin-right": "8px", buttonType: "",
"margin-bottom": "3px",
}, },
}), formValidate: {
h("span", data.title), title: [{
]), required: true,
]); message: "标题不能为空",
}, trigger: "change"
handleDropdown(name) { }],
if (name == "expandOne") { name: [{
this.expandLevel = 1; required: true,
} else if (name == "expandTwo") { message: "名称不能为空",
this.expandLevel = 2; trigger: "change"
} else if (name == "expandThree") { }, ],
this.expandLevel = 3; icon: [{
} required: true,
this.getAllList(); message: "图标不能为空",
trigger: "change"
}],
path: [{
required: true,
message: "路径不能为空",
trigger: "change"
}],
component: [{
required: true,
message: "前端组件不能为空",
trigger: "change"
}, ],
sort: [{
required: true,
type: "number",
message: "排序值不能为空",
trigger: "change",
}, ],
},
submitLoading: false,
data: [],
dataEdit: [],
dictPermissions: [],
};
}, },
getAllList() { methods: {
this.loading = true; init() {
this.getRequest("/permission/menu/all").then((res) => { this.getAllList();
this.loading = false; },
if (res.status == 'success') { renderContent(h, {
// 仅展开指定级数 默认后端已展开所有 root,
let expandLevel = this.expandLevel; node,
res.data.list.forEach(function (e) { data
if (expandLevel == 1) { }) {
if (e.level == 0) { let icon = "";
e.expand = false; if (data.level == 0) {
} icon = "ios-navigate";
if (e.children && e.children.length > 0) { } else if (data.level == 1) {
e.children.forEach(function (c) { icon = "md-list-box";
if (c.level == 1) { } else if (data.level == 2) {
c.expand = false; icon = "md-list";
} } else if (data.level == 3) {
if (c.children && c.children.length > 0) { icon = "md-radio-button-on";
c.children.forEach(function (b) { } else {
if (b.level == 2) { icon = "md-radio-button-off";
b.expand = true; }
} return h("span", [
}); h("span", [
} h("Icon", {
}); props: {
} type: icon,
} else if (expandLevel == 2) { size: "16",
if (e.level == 0) { },
e.expand = true; style: {
} "margin-right": "8px",
if (e.children && e.children.length > 0) { "margin-bottom": "3px",
e.children.forEach(function (c) { },
if (c.level == 1) { }),
c.expand = false; h("span", data.title),
} ]),
if (c.children && c.children.length > 0) { ]);
c.children.forEach(function (b) { },
if (b.level == 2) { handleDropdown(name) {
b.expand = false; if (name == "expandOne") {
} this.expandLevel = 1;
} else if (name == "expandTwo") {
this.expandLevel = 2;
} else if (name == "expandThree") {
this.expandLevel = 3;
}
this.getAllList();
},
getAllList() {
this.loading = true;
this.getRequest("/permission/menu/all").then((res) => {
this.loading = false;
if (res.status == 'success') {
// 仅展开指定级数 默认后端已展开所有
let expandLevel = this.expandLevel;
res.data.list.forEach(function (e) {
if (expandLevel == 1) {
if (e.level == 0) {
e.expand = false;
}
if (e.children && e.children.length > 0) {
e.children.forEach(function (c) {
if (c.level == 1) {
c.expand = false;
}
if (c.children && c.children.length > 0) {
c.children.forEach(function (b) {
if (b.level == 2) {
b.expand = true;
}
});
}
});
}
} else if (expandLevel == 2) {
if (e.level == 0) {
e.expand = true;
}
if (e.children && e.children.length > 0) {
e.children.forEach(function (c) {
if (c.level == 1) {
c.expand = false;
}
if (c.children && c.children.length > 0) {
c.children.forEach(function (b) {
if (b.level == 2) {
b.expand = false;
}
});
}
});
}
} else if (expandLevel == 3) {
if (e.level == 0) {
e.expand = true;
}
if (e.children && e.children.length > 0) {
e.children.forEach(function (c) {
if (c.level == 1) {
c.expand = true;
}
if (c.children && c.children.length > 0) {
c.children.forEach(function (b) {
if (b.level == 2) {
b.expand = true;
}
if (b.children && b.children.length > 0) {
b.children.forEach(function (e) {
if (e.level == 3) {
e.expand = false;
}
});
}
});
}
});
}
}
}); });
} this.data = res.data.list;
}); let str = JSON.stringify(res.data.list);
} this.dataEdit = JSON.parse(str);
} else if (expandLevel == 3) { // 头部加入一级
if (e.level == 0) { let first = {
e.expand = true; id: "0",
} level: -1,
if (e.children && e.children.length > 0) { title: "一级菜单",
e.children.forEach(function (c) { };
if (c.level == 1) { this.dataEdit.unshift(first);
c.expand = true; }
} });
if (c.children && c.children.length > 0) { },
c.children.forEach(function (b) { selectTree(v) {
if (b.level == 2) { if (v.length > 0) {
b.expand = true; // 转换null为""
} for (let attr in v[0]) {
if (b.children && b.children.length > 0) { if (v[0][attr] == null) {
b.children.forEach(function (e) { v[0][attr] = "";
if (e.level == 3) { }
e.expand = false; }
} let str = JSON.stringify(v[0]);
let data = JSON.parse(str);
this.form = data;
this.editTitle = data.title;
} else {
this.cancelEdit();
}
},
selectTreeEdit(v) {
if (v.length > 0) {
// 转换null为""
for (let attr in v[0]) {
if (v[0][attr] == null) {
v[0][attr] = "";
}
}
let str = JSON.stringify(v[0]);
let data = JSON.parse(str);
if (this.form.id == data.id) {
this.$Message.warning("请勿选择自己作为父节点");
v[0].selected = false;
return;
}
if (data.level == 2) {
this.$Message.warning("请选择2级菜单节点");
v[0].selected = false;
return;
}
this.form.parentId = data.id;
let level = data.level + 1;
if (level < 0) {
level = 0;
}
this.form.level = level;
this.form.parentTitle = data.title;
}
},
cancelEdit() {
let data = this.$refs.tree.getSelectedNodes()[0];
if (data) {
data.selected = false;
}
this.$refs.form.resetFields();
this.form.id = "";
this.editTitle = "";
},
handleReset() {
let type = this.form.type;
this.$refs.form.resetFields();
this.form.icon = "";
this.form.component = "";
this.form.type = type;
},
submitEdit() {
this.$refs.form.validate((valid) => {
if (valid) {
if (!this.form.id) {
this.$Message.warning("请先点击选择要修改的菜单节点");
return;
}
this.submitLoading = true;
if (this.form.sort == null) {
this.form.sort = "";
}
if (this.form.buttonType == null) {
this.form.buttonType = "";
}
if (this.form.type == 1) {
this.form.name = "";
this.form.icon = "";
this.form.component = "";
}
editMenus(this.form).then((res) => {
this.submitLoading = false;
if (res.status == 'success') {
this.$Message.success("编辑成功");
// 标记重新获取菜单数据
this.$store.commit("setAdded", false);
util.initRouter(this);
this.init();
this.menuModalVisible = false;
}
}); });
} }
});
},
submitAdd() {
this.$refs.formAdd.validate((valid) => {
if (valid) {
this.submitLoading = true;
if (this.formAdd.type == 1) {
this.formAdd.icon = ""
this.formAdd.component = ""
this.formAdd.type = 'button'
} else if (this.formAdd.type == 0)(
this.formAdd.type = 'page'
)
addSubMenus(this.formAdd).then((res) => {
this.submitLoading = false;
if (res.status == 'success') {
this.$Message.success("添加成功");
// 标记重新获取菜单数据
this.$store.commit("setAdded", false);
util.initRouter(this);
this.init();
this.menuModalVisible = false;
}
}); });
} }
});
},
add() {
if (!this.form.id) {
this.$Message.warning("请先点击选择一个菜单权限节点");
return;
}
this.parentTitle = this.form.title;
this.modalTitle = "添加子菜单节点(可拖动)";
this.showParent = true;
let type = 0;
if (this.form.level == 1) {
type = 0;
} else if (this.form.level == 2) {
type = 1;
} else if (this.form.level == 3) {
this.$Modal.warning({
title: "抱歉，不能添加啦",
content: "左侧仅支持2级菜单目录",
}); });
} return;
} else {
type = 0;
} }
}); let component = "";
this.data = res.data.list; if (!this.form.children) {
let str = JSON.stringify(res.data.list); this.form.children = [];
this.dataEdit = JSON.parse(str);
// 头部加入一级
let first = {
id: "0",
level: -1,
title: "一级菜单",
};
this.dataEdit.unshift(first);
}
});
},
selectTree(v) {
if (v.length > 0) {
// 转换null为""
for (let attr in v[0]) {
if (v[0][attr] == null) {
v[0][attr] = "";
}
}
let str = JSON.stringify(v[0]);
let data = JSON.parse(str);
this.form = data;
this.editTitle = data.title;
} else {
this.cancelEdit();
}
},
selectTreeEdit(v) {
if (v.length > 0) {
// 转换null为""
for (let attr in v[0]) {
if (v[0][attr] == null) {
v[0][attr] = "";
}
}
let str = JSON.stringify(v[0]);
let data = JSON.parse(str);
if (this.form.id == data.id) {
this.$Message.warning("请勿选择自己作为父节点");
v[0].selected = false;
return;
}
if (data.level == 2) {
this.$Message.warning("请选择2级菜单节点");
v[0].selected = false;
return;
}
this.form.parentId = data.id;
let level = data.level + 1;
if (level < 0) {
level = 0;
}
this.form.level = level;
this.form.parentTitle = data.title;
}
},
cancelEdit() {
let data = this.$refs.tree.getSelectedNodes()[0];
if (data) {
data.selected = false;
}
this.$refs.form.resetFields();
this.form.id = "";
this.editTitle = "";
},
handleReset() {
let type = this.form.type;
this.$refs.form.resetFields();
this.form.icon = "";
this.form.component = "";
this.form.type = type;
},
submitEdit() {
this.$refs.form.validate((valid) => {
if (valid) {
if (!this.form.id) {
this.$Message.warning("请先点击选择要修改的菜单节点");
return;
}
this.submitLoading = true;
if (this.form.sort == null) {
this.form.sort = "";
}
if (this.form.buttonType == null) {
this.form.buttonType = "";
}
if (this.form.type == 1) {
this.form.name = "";
this.form.icon = "";
this.form.component = "";
}
editMenus(this.form).then((res) => {
this.submitLoading = false;
if (res.status == 'success') {
this.$Message.success("编辑成功");
// 标记重新获取菜单数据
this.$store.commit("setAdded", false);
util.initRouter(this);
this.init();
this.menuModalVisible = false;
} }
}); this.formAdd = {
} icon: "",
}); type: type,
}, parentId: this.form.id,
submitAdd() { level: Number(this.form.level) + 1,
this.$refs.formAdd.validate((valid) => { sort: this.form.children.length + 1,
if (valid) { buttonType: "",
this.submitLoading = true; status: 0,
if (this.formAdd.type == 1) { showAlways: true,
this.formAdd.icon = "" };
this.formAdd.component = "" if (this.form.level == 0) {
this.formAdd.type = 'button' this.formAdd.path = "/";
}else if(this.formAdd.type == 0)( this.formAdd.component = "Main";
this.formAdd.type = 'page'
)
addSubMenus(this.formAdd).then((res) => {
this.submitLoading = false;
if (res.status == 'success') {
this.$Message.success("添加成功");
// 标记重新获取菜单数据
this.$store.commit("setAdded", false);
util.initRouter(this);
this.init();
this.menuModalVisible = false;
} }
}); this.menuModalVisible = true;
} },
}); changeSelect(v) {
}, this.selectList = v;
add() { },
if (!this.form.id) { showSelect(e) {
this.$Message.warning("请先点击选择一个菜单权限节点"); this.selectList = e;
return; },
} clearSelectAll() {
this.parentTitle = this.form.title; this.$refs.table.selectAll(false);
this.modalTitle = "添加子节点(可拖动)"; },
this.showParent = true; remove(v) {
let type = 0; this.selectList = [];
if (this.form.level == 1) { this.selectList.push(v);
type = 0; this.delAll();
} else if (this.form.level == 2) { },
type = 1; delAll() {
} else if (this.form.level == 3) { if (this.selectList.length <= 0) {
this.$Modal.warning({ this.$Message.warning("您还未勾选要删除的数据");
title: "抱歉，不能添加啦", return;
content: "左侧仅支持2级菜单目录",
});
return;
} else {
type = 0;
}
let component = "";
if (!this.form.children) {
this.form.children = [];
}
this.formAdd = {
icon: "",
type: type,
parentId: this.form.id,
level: Number(this.form.level) + 1,
sort: this.form.children.length + 1,
buttonType: "",
status: 0,
showAlways: true,
};
if (this.form.level == 0) {
this.formAdd.path = "/";
this.formAdd.component = "Main";
}
this.menuModalVisible = true;
},
changeSelect(v) {
this.selectList = v;
},
showSelect(e) {
this.selectList = e;
},
clearSelectAll() {
this.$refs.table.selectAll(false);
},
remove(v) {
this.selectList = [];
this.selectList.push(v);
this.delAll();
},
delAll() {
if (this.selectList.length <= 0) {
this.$Message.warning("您还未勾选要删除的数据");
return;
}
this.$Modal.confirm({
title: "确认删除",
content:
"您确认要删除所选的 " +
this.selectList.length +
" 条数据及其下级所有数据?",
loading: true,
onOk: () => {
let ids = "";
this.selectList.forEach(function (e) {
ids += e.id + ",";
});
ids = ids.substring(0, ids.length - 1);
deleteMenus({ ids: ids }).then((res) => {
this.$Modal.remove();
if (res.status == 'success') {
this.$Message.success("删除成功");
// 标记重新获取菜单数据
this.$store.commit("setAdded", false);
util.initRouter(this);
this.selectList = [];
this.cancelEdit();
this.init();
} }
}); this.$Modal.confirm({
title: "确认删除",
content: "您确认要删除所选的 " +
this.selectList.length +
" 条数据及其下级所有数据?",
loading: true,
onOk: () => {
let ids = "";
this.selectList.forEach(function (e) {
ids += e.id + ",";
});
ids = ids.substring(0, ids.length - 1);
deleteMenus({
ids: ids
}).then((res) => {
this.$Modal.remove();
if (res.status == 'success') {
this.$Message.success("删除成功");
// 标记重新获取菜单数据
this.$store.commit("setAdded", false);
util.initRouter(this);
this.selectList = [];
this.cancelEdit();
this.init();
}
});
},
});
}, },
});
}, },
}, mounted() {
mounted() { // 计算高度
// 计算高度 let height = document.documentElement.clientHeight;
let height = document.documentElement.clientHeight; this.maxHeight = Number(height - 287) + "px";
this.maxHeight = Number(height - 287) + "px"; this.init();
this.init(); },
},
}; };
</script> </script>
\ No newline at end of file
front/src/views/sys/role-manage/roleManage.vue
View file @ dd372aa5
...@@ -11,14 +11,15 @@ ...@@ -11,14 +11,15 @@
<Button @click="delAll" icon="md-trash">批量删除</Button> <Button @click="delAll" icon="md-trash">批量删除</Button>
<Button @click="init" icon="md-refresh">刷新</Button> <Button @click="init" icon="md-refresh">刷新</Button>
</Row> </Row>
<Alert show-icon v-show="openTip"> <Divider />
<div>
已选择 已选择
<span class="select-count">{{ selectList.length }}</span> 项 <span class="select-count">{{ selectList.length }}</span> 项
<a class="select-clear" @click="clearSelectAll">清空</a> <a class="select-clear" @click="clearSelectAll">清空</a>
</Alert> </div>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table> <Table stripe border class="tableInfoBox" :loading="loading" :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
<Row type="flex" justify="end" class="page"> <Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator show-sizer></Page> <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" show-total show-sizer></Page>
</Row> </Row>
</Card> </Card>
......
front/src/views/sys/user-manage/userManage.vue
View file @ dd372aa5
...@@ -35,19 +35,23 @@ ...@@ -35,19 +35,23 @@
<DropdownItem name="refresh">刷新</DropdownItem> <DropdownItem name="refresh">刷新</DropdownItem>
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
</Col> </Col>
<Col span="12"> <Col span="12" style="text-align:right">
<div style="text-align:right;"> <Button icon="ios-search" type="dashed" @click="openSearch = !openSearch">开启/关闭搜索</Button>
<Button icon="ios-search" style="margin-top:10px" type="text" @click="openSearch = !openSearch">关闭/开启搜索</Button> </Col>
</div>
</Col>
</Row> </Row>
<Alert show-icon v-show="openTip">
已选择 <Divider />
<span class="select-count">{{ this.selectList.length }}</span> 项 <Row>
<a class="select-clear" @click="clearSelectAll">清空</a> <Col span="3">
</Alert> <div style="display:inline-block;vertical-align: middle;">
<Table :loading="loading" border :columns="columns" :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table> 已选择
<span class="select-count">{{ selectList.length }}</span> 项
<a class="select-clear" @click="clearSelectAll">清空</a>
</div>
</Col>
</Row>
<Table stripe border class="tableInfoBox" :loading="loading" :columns="columns" :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect"></Table>
<Row type="flex" justify="end" class="page"> <Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator show-sizer></Page> <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator show-sizer></Page>
</Row> </Row>
...@@ -64,8 +68,6 @@ import { ...@@ -64,8 +68,6 @@ import {
enableUser, enableUser,
disableUser, disableUser,
deleteUser, deleteUser,
getAllUserData,
resetUserPass,
} from "@/api/index"; } from "@/api/index";
import addEdit from "./addEdit.vue"; import addEdit from "./addEdit.vue";
import { import {
...@@ -115,27 +117,23 @@ export default { ...@@ -115,27 +117,23 @@ export default {
type: "selection", type: "selection",
width: 60, width: 60,
align: "center", align: "center",
fixed: "left",
}, },
{ {
type: "index", type: "index",
width: 60, width: 60,
align: "center", align: "center",
fixed: "left",
}, },
{ {
title: "登录账号", title: "登录账号",
key: "username", key: "username",
minWidth: 125, minWidth: 125,
sortable: true, sortable: true,
fixed: "left",
}, },
{ {
title: "用户名", title: "用户名",
key: "nickname", key: "nickname",
minWidth: 125, minWidth: 125,
sortable: true, sortable: true,
fixed: "left",
render: (h, params) => { render: (h, params) => {
return h( return h(
"a", { "a", {
...@@ -159,7 +157,7 @@ export default { ...@@ -159,7 +157,7 @@ export default {
title: "类型", title: "类型",
key: "type", key: "type",
align: "center", align: "center",
width: 110, width: 150,
render: (h, params) => { render: (h, params) => {
let re = "", let re = "",
color = ""; color = "";
...@@ -181,31 +179,12 @@ export default { ...@@ -181,31 +179,12 @@ export default {
), ),
]); ]);
}, },
filters: [{
label: "普通用户",
value: 0,
},
{
label: "管理员",
value: 1,
},
],
filterMultiple: false,
filterRemote: (e) => {
let v = "";
if (e.length > 0) {
v = e[0];
}
this.searchForm.type = v;
this.searchForm.pageNumber = 1;
this.getDataList();
},
}, },
{ {
title: "状态", title: "状态",
key: "status", key: "status",
align: "center", align: "center",
width: 100, width: 150,
render: (h, params) => { render: (h, params) => {
if (params.row.status == 1) { if (params.row.status == 1) {
return h("div", [ return h("div", [
...@@ -227,25 +206,6 @@ export default { ...@@ -227,25 +206,6 @@ export default {
]); ]);
} }
}, },
filters: [{
label: "启用",
value: 1,
},
{
label: "禁用",
value: 0,
},
],
filterMultiple: false,
filterRemote: (e) => {
let v = "";
if (e.length > 0) {
v = e[0];
}
this.searchForm.status = v;
this.searchForm.pageNumber = 1;
this.getDataList();
},
}, },
{ {
title: "所在角色组", title: "所在角色组",
...@@ -467,7 +427,7 @@ export default { ...@@ -467,7 +427,7 @@ export default {
onOk: () => { onOk: () => {
enableUser(v.id).then((res) => { enableUser(v.id).then((res) => {
this.$Modal.remove(); this.$Modal.remove();
if (res.success) { if (res.status == 'success') {
this.$Message.success("操作成功"); this.$Message.success("操作成功");
this.getDataList(); this.getDataList();
} }
......
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