UP

src/style/fix.less

@@ -15,5 +15,5 @@
 .el-drawer__body {overflow: auto;}
 .el-popconfirm__main {margin: 14px 0;}
 .el-card__header {border-bottom: 0}
-.el-tree-node__content {height:36px;}
+.el-tree.menu .el-tree-node__content {height:36px;}
 .el-input-number__decrease, .el-input-number__increase {top:2px;}

src/views/home/components/C2.vue

@@ -22,6 +22,14 @@
 		data() {
 			return {
 				activities: [
+					{
+						content: [
+							"[优化] 控制台自由布局开关",
+							"[优化] 增加菜单管理新增和删除",
+							'[优化] 角色管理增加权限配置'
+						],
+						timestamp: '2021-05-17'
+					},
 					{
 						content: [
 							"[新增] 组件sortablejs",

src/views/home/gridLayout.vue

@@ -1,14 +1,17 @@
 <template>
+	<div class="diy-grid-setting" @click.stop="setting">
+		<i class="el-icon-setting"></i>
+	</div>
 	<div class="diy-grid-layout">
 		<el-row :gutter="15">
 			<el-col v-for="(item, index) in grid.layout" v-bind:key="index" :md="item" :xs="24">
-				<draggable v-model="grid.copmsList[index]" :disabled="false" animation="200" handle=".el-card__header" group="people" @end="end" item-key="com">
+				<draggable v-model="grid.copmsList[index]" :disabled="!isDiy" animation="200" handle=".el-card__header" group="people" @end="end" item-key="com">
 					<template #item="{ element }">
 						<div>
-							<el-card shadow="hover" style="margin-bottom:15px;">
+							<el-card shadow="hover" style="margin-bottom:15px;" :class="isDiy?'move':''">
 								<template #header>
 									<span>{{element.title}}</span>
-									<el-dropdown trigger="click">
+									<el-dropdown trigger="click" v-if="isDiy">
 										<span class="el-dropdown-link">
 											<i class="el-icon-menu"></i>
 										</span>
@@ -86,6 +89,15 @@
 		</template>
 	</el-dialog>
 
+	<el-drawer title="布局设置" v-model="settingDialog" :size="300" destroy-on-close>
+		<el-form ref="form" label-width="120px" label-position="left" style="padding:0 20px;">
+			<el-form-item label="自由拖拽">
+				<el-switch v-model="isDiy"></el-switch>
+			</el-form-item>
+			<el-divider></el-divider>
+		</el-form>
+	</el-drawer>
+
 </template>
 
 
@@ -102,6 +114,8 @@
 		},
 		data() {
 			return {
+				settingDialog: false,
+				isDiy: false,
 				allComps: allComps,
 				allCompsList: [],
 				showPush: false,
@@ -211,17 +225,24 @@
 			backDefaul(){
 				this.grid =  JSON.parse(JSON.stringify(this.defaultGrid));
 				this.$TOOL.data.remove("grid");
+			},
+			//设置
+			setting(){
+				this.settingDialog = true;
 			}
 		}
 	}
 </script>
 
 <style>
+	.diy-grid-setting {position: fixed;width:40px;height:40px;border-radius: 3px 0 0 3px;bottom:40px;right:0px;z-index: 100;background: #409EFF;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;}
+	.diy-grid-setting i {font-size: 18px;color: #fff;}
+
+	.diy-grid-layout .el-card.move .el-card__header {cursor: move;}
 	.diy-grid-layout .el-card__header {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		cursor: move;
 	}
 	.diy-grid-layout .el-card__header .el-dropdown-link {
 		color: #999;

src/views/setting/dic/index.vue

@@ -6,7 +6,7 @@
 					<el-input placeholder="输入关键字进行过滤" v-model="dicFilterText" clearable></el-input>
 				</el-header>
 				<el-main class="nopadding">
-					<el-tree ref="dic" node-key="id" :data="dicList" :props="dicProps" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode" @node-click="dicClick">
+					<el-tree ref="dic" class="menu" node-key="id" :data="dicList" :props="dicProps" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode" @node-click="dicClick">
 						<template #default="{node, data}">
 							<span class="custom-tree-node">
 								<span class="label">{{ node.label }}</span>

src/views/setting/menu/index.vue

@@ -6,7 +6,7 @@
 					<el-input placeholder="输入关键字进行过滤" v-model="menuFilterText" clearable></el-input>
 				</el-header>
 				<el-main class="nopadding">
-					<el-tree ref="menu" node-key="name" :data="menuList" :props="menuProps" highlight-current :expand-on-click-node="false" check-strictly show-checkbox :filter-node-method="menuFilterNode" @node-click="menuClick">
+					<el-tree ref="menu" class="menu" node-key="name" :data="menuList" :props="menuProps" highlight-current :expand-on-click-node="false" check-strictly show-checkbox :filter-node-method="menuFilterNode" @node-click="menuClick">
 
 						<template #default="{node, data}">
 							<span class="custom-tree-node">
@@ -19,6 +19,10 @@
 
 					</el-tree>
 				</el-main>
+				<el-footer style="height:51px;">
+					<el-button type="primary" size="mini" icon="el-icon-plus" @click="add()"></el-button>
+					<el-button type="danger" size="mini" plain icon="el-icon-delete" @click="delMenu"></el-button>
+				</el-footer>
 			</el-container>
 		</el-aside>
 		<el-container>
@@ -30,6 +34,7 @@
 </template>
 
 <script>
+	let newMenuIndex = 1;
 	import save from './save'
 
 	export default {
@@ -74,8 +79,41 @@
 				return targetText.indexOf(value) !== -1;
 			},
 			//增加
-			add(node, data){
+			add(node){
-				console.log(node, data);
+				var newMenuName = "未命名" + newMenuIndex++;
+				var newMenuData = {
+					name: newMenuName,
+					path: "",
+					component: "",
+					meta:{
+						title: newMenuName,
+						type: "menu"
+					}
+				}
+				if(node){
+					this.$refs.menu.append(newMenuData, node)
+					var lastNode = node.childNodes[node.childNodes.length-1]
+					this.$refs.menu.setCurrentKey(lastNode.data.name)
+					var pid = node.data.name;
+					this.$refs.save.setData(newMenuData, pid)
+				}else{
+					this.$refs.menu.append(newMenuData)
+					var newNode = this.menuList[this.menuList.length-1]
+					this.$refs.menu.setCurrentKey(newNode.name)
+					this.$refs.save.setData(newMenuData)
+				}
+
+			},
+			//删除菜单
+			delMenu(){
+				var CheckedNodes = this.$refs.menu.getCheckedNodes()
+				if(CheckedNodes.length == 0){
+					this.$message.warning("请选择需要删除的项")
+					return false;
+				}
+				CheckedNodes.forEach(item => {
+					this.$refs.menu.remove(item)
+				})
 			}
 		}
 	}
@@ -83,6 +121,8 @@
 
 <style scoped>
 	.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 24px;height:100%;}
+	.custom-tree-node .label {display: flex;align-items: center;;height: 100%;}
+	.custom-tree-node .label .el-tag {margin-left: 5px;}
 	.custom-tree-node .do {display: none;}
 	.custom-tree-node .do i {margin-left:5px;color: #999;padding:5px;}
 	.custom-tree-node .do i:hover {color: #333;}

src/views/setting/role/index.vue

@@ -4,7 +4,7 @@
 			<div class="left-panel">
 				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
 				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
-				<el-button type="primary" plain :disabled="selection.length==0">权限设置</el-button>
+				<el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button>
 			</div>
 			<div class="right-panel">
 				<div class="right-panel-search">
@@ -43,15 +43,25 @@
 		</template>
 	</el-dialog>
 
+	<el-dialog title="角色权限设置" v-model="permissionDialogVisible" :width="400" destroy-on-close>
+		<permission-dialog ref="permissionDialog"></permission-dialog>
+		<template #footer>
+			<el-button @click="permissionDialogVisible=false" >取 消</el-button>
+			<el-button type="primary" @click="savePermission()" :loading="isPermissionSaveing">保 存</el-button>
+		</template>
+	</el-dialog>
+
 </template>
 
 <script>
 	import saveDialog from './save'
+	import permissionDialog from './permission'
 
 	export default {
 		name: 'role',
 		components: {
-			saveDialog
+			saveDialog,
+			permissionDialog
 		},
 		data() {
 			return {
@@ -69,6 +79,9 @@
 				},
 				isSaveing: false,
 
+				//权限
+				permissionDialogVisible: false,
+				isPermissionSaveing: false
 			}
 		},
 		methods: {
@@ -146,6 +159,14 @@
 			selectionChange(selection){
 				this.selection = selection;
 			},
+			//权限设置
+			permission(){
+				this.permissionDialogVisible = true;
+			},
+			savePermission(){
+				this.$message.success("操作成功")
+				this.permissionDialogVisible = false;
+			},
 			//搜索
 			upsearch(){
 

src/views/setting/role/permission.vue

@@ -0,0 +1,83 @@
+<template>
+	<el-tabs tab-position="left" style="height: 280px;">
+		<el-tab-pane label="菜单权限">
+			<div class="treeMain">
+				<el-tree ref="menu" node-key="name" :data="menu.list" :default-checked-keys="menu.checked" :props="menu.props" show-checkbox></el-tree>
+			</div>
+		</el-tab-pane>
+		<el-tab-pane label="部门权限">
+			<div class="treeMain">
+				<el-tree ref="group" node-key="name" :data="group.list" :default-checked-keys="group.checked" :props="group.props" show-checkbox></el-tree>
+			</div>
+		</el-tab-pane>
+		<el-tab-pane label="类型权限">
+			<div class="treeMain">
+				<el-tree ref="type" node-key="name" :data="type.list" :default-checked-keys="type.checked" :props="type.props" show-checkbox></el-tree>
+			</div>
+		</el-tab-pane>
+	</el-tabs>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				menu: {
+					list: [],
+					checked: ["test", "system", "user", "role"],
+					props: {
+						label: (data)=>{
+							return data.meta.title
+						}
+					}
+				},
+				group: {
+					list: [],
+					checked: [],
+					props: {}
+				},
+				type: {
+					list: [],
+					checked: [],
+					props: {}
+				}
+			}
+		},
+		mounted() {
+			this.getMenu();
+			this.getGroup();
+			this.getType();
+		},
+		methods: {
+			async getMenu(){
+				var res = await this.$API.menu.list.get();
+				this.menu.list = res.data;
+			},
+			getGroup(){
+				this.group.list = [
+					{label: 'JL00'},
+					{label: 'LP01'},
+					{label: 'LP07'},
+					{label: 'SL01'},
+					{label: 'TL06'},
+					{label: 'TL09'},
+					{label: 'YP07'}
+				];
+			},
+			getType(){
+				this.type.list = [
+					{label: '原料采购'},
+					{label: '厂内互供'},
+					{label: '炼销订单'},
+					{label: '化工统销订单'},
+					{label: '移库单'},
+					{label: '自销订单'},
+				];
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.treeMain {height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
+</style>

src/views/setting/user/index.vue

@@ -6,7 +6,7 @@
 					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
 				</el-header>
 				<el-main class="nopadding">
-					<el-tree ref="group" node-key="id" :data="group" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
+					<el-tree ref="group" class="menu" node-key="id" :data="group" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
 				</el-main>
 			</el-container>
 		</el-aside>