重构了用户权限体系

src/api/model/system.js

@@ -43,13 +43,22 @@ export default {
 	},
 	role: {
 		list: {
-			url: `${config.API_URL}/system/role/list`,
+			url: `${config.API_URL}/system/role/list2`,
 			name: "获取角色列表",
 			get: async function(params){
 				return await http.get(this.url, params);
 			}
 		}
 	},
+	dept: {
+		list: {
+			url: `${config.API_URL}/system/dept/list`,
+			name: "获取部门列表",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		}
+	},
 	user: {
 		list: {
 			url: `${config.API_URL}/system/user/list`,

src/assets/icons/Organization.vue

@@ -0,0 +1,3 @@
+<template>
+	<svg t="1652704649206" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="51974" width="200" height="200"><path d="M640 128a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666666a42.666667 42.666667 0 0 1-42.666667 42.666667h-85.333333v85.333333h170.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v128h85.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v170.666666a42.666667 42.666667 0 0 1-42.666667 42.666667h-256a42.666667 42.666667 0 0 1-42.666666-42.666667v-170.666666a42.666667 42.666667 0 0 1 42.666666-42.666667h85.333334v-85.333333H341.333333v85.333333h85.333334a42.666667 42.666667 0 0 1 42.666666 42.666667v170.666666a42.666667 42.666667 0 0 1-42.666666 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667v-170.666666a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333v-128a42.666667 42.666667 0 0 1 42.666667-42.666667h170.666666V384H384a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h256zM384 725.333333H213.333333v85.333334h170.666667v-85.333334z m426.666667 0h-170.666667v85.333334h170.666667v-85.333334zM597.333333 213.333333h-170.666666v85.333334h170.666666V213.333333z" p-id="51975"></path></svg>
+</template>

src/assets/icons/index.js

@@ -6,3 +6,4 @@ export { default as BugLine } from './BugLine.vue'
 export { default as FileWord } from './FileWord.vue'
 export { default as FileExcel } from './FileExcel.vue'
 export { default as FilePpt } from './FilePpt.vue'
+export { default as Organization } from './Organization.vue'

src/components/scTable/index.vue

@@ -9,7 +9,7 @@
 
 <template>
 	<div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading">
-		<div class="scTable-table">
+		<div class="scTable-table" :style="{'height':_table_height}">
 			<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
 				<slot></slot>
 				<template v-for="(item, index) in userColumn" :key="index">
@@ -27,7 +27,7 @@
 				</template>
 			</el-table>
 		</div>
-		<div class="scTable-page" v-if="!hidePagination&&!hideDo">
+		<div class="scTable-page" v-if="!hidePagination || !hideDo">
 			<div class="scTable-pagination">
 				<el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
 			</div>
@@ -108,6 +108,9 @@
 		computed: {
 			_height() {
 				return Number(this.height)?Number(this.height)+'px':this.height
+			},
+			_table_height() {
+				return this.hidePagination && this.hideDo ? "100%" : "calc(100% - 50px)"
 			}
 		},
 		data() {

src/config/iconSelect.js

@@ -295,7 +295,8 @@ export default {
 				'sc-icon-bug-line',
 				'sc-icon-file-word',
 				'sc-icon-file-excel',
-				'sc-icon-file-ppt'
+				'sc-icon-file-ppt',
+				'sc-icon-organization'
 			]
 		}
 	]

src/style/fix.scss

@@ -40,6 +40,7 @@
 .el-main > .scTable .el-table--border .el-table__inner-wrapper tr:first-child td:first-child {border-left: 0;}
 .el-main > .scTable .el-table--border .el-table__inner-wrapper tr:first-child th:first-child {border-left: 0;}
 .el-table.el-table--large {font-size: 14px;}
+.el-table.el-table--small {font-size: 12px;}
 .el-table {font-size: 12px;}
 
 .aminui-side-split li.active {background-color: var(--el-color-primary);}

src/views/setting/dept/index.vue

@@ -0,0 +1,153 @@
+<template>
+	<el-container>
+		<el-header>
+			<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>
+			</div>
+			<div class="right-panel">
+				<div class="right-panel-search">
+					<el-input v-model="search.keyword" placeholder="部门名称" clearable></el-input>
+					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
+				</div>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
+				<el-table-column type="selection" width="50"></el-table-column>
+				<el-table-column label="部门名称" prop="label" width="250"></el-table-column>
+				<el-table-column label="排序" prop="sort" width="150"></el-table-column>
+				<el-table-column label="状态" prop="status" width="150">
+					<template #default="scope">
+						<el-tag v-if="scope.row.status==1" type="success">启用</el-tag>
+						<el-tag v-if="scope.row.status==0" type="danger">停用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column label="创建时间" prop="date" width="180"></el-table-column>
+				<el-table-column label="备注" prop="remark" min-width="300"></el-table-column>
+				<el-table-column label="操作" fixed="right" align="right" width="170">
+					<template #default="scope">
+						<el-button-group>
+							<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
+							<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
+							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
+								<template #reference>
+									<el-button text type="primary" size="small">删除</el-button>
+								</template>
+							</el-popconfirm>
+						</el-button-group>
+					</template>
+				</el-table-column>
+
+			</scTable>
+		</el-main>
+	</el-container>
+
+	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
+
+</template>
+
+<script>
+	import saveDialog from './save'
+
+	export default {
+		name: 'dept',
+		components: {
+			saveDialog
+		},
+		data() {
+			return {
+				dialog: {
+					save: false
+				},
+				apiObj: this.$API.system.dept.list,
+				selection: [],
+				search: {
+					keyword: null
+				}
+			}
+		},
+		methods: {
+			//添加
+			add(){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open()
+				})
+			},
+			//编辑
+			table_edit(row){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open('edit').setData(row)
+				})
+			},
+			//查看
+			table_show(row){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open('show').setData(row)
+				})
+			},
+			//删除
+			async table_del(row){
+				var reqData = {id: row.id}
+				var res = await this.$API.demo.post.post(reqData);
+				if(res.code == 200){
+					this.$refs.table.refresh()
+					this.$message.success("删除成功")
+				}else{
+					this.$alert(res.message, "提示", {type: 'error'})
+				}
+			},
+			//批量删除
+			async batch_del(){
+				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					const loading = this.$loading();
+					this.$refs.table.refresh()
+					loading.close();
+					this.$message.success("操作成功")
+				}).catch(() => {
+
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			//搜索
+			upsearch(){
+
+			},
+			//根据ID获取树结构
+			filterTree(id){
+				var target = null;
+				function filter(tree){
+					tree.forEach(item => {
+						if(item.id == id){
+							target = item
+						}
+						if(item.children){
+							filter(item.children)
+						}
+					})
+				}
+				filter(this.$refs.table.tableData)
+				return target
+			},
+			//本地更新数据
+			handleSaveSuccess(data, mode){
+				if(mode=='add'){
+					this.$refs.table.refresh()
+				}else if(mode=='edit'){
+					this.$refs.table.refresh()
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/setting/dept/save.vue

@@ -0,0 +1,116 @@
+<template>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
+		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px">
+			<el-form-item label="上级部门" prop="parentId">
+				<el-cascader v-model="form.parentId" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
+			</el-form-item>
+			<el-form-item label="部门名称" prop="label">
+				<el-input v-model="form.label" placeholder="请输入部门名称" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="排序" prop="sort">
+				<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
+			</el-form-item>
+			<el-form-item label="是否有效" prop="status">
+				<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
+			</el-form-item>
+			<el-form-item label="备注" prop="remark">
+				<el-input v-model="form.remark" clearable type="textarea"></el-input>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		emits: ['success', 'closed'],
+		data() {
+			return {
+				mode: "add",
+				titleMap: {
+					add: '新增',
+					edit: '编辑',
+					show: '查看'
+				},
+				visible: false,
+				isSaveing: false,
+				//表单数据
+				form: {
+					id:"",
+					parentId: "",
+					label: "",
+					sort: 1,
+					status: "1",
+					remark: ""
+				},
+				//验证规则
+				rules: {
+					sort: [
+						{required: true, message: '请输入排序', trigger: 'change'}
+					],
+					label: [
+						{required: true, message: '请输入部门名称'}
+					]
+				},
+				//所需数据选项
+				groups: [],
+				groupsProps: {
+					value: "id",
+					emitPath: false,
+					checkStrictly: true
+				}
+			}
+		},
+		mounted() {
+			this.getGroup()
+		},
+		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this
+			},
+			//加载树数据
+			async getGroup(){
+				var res = await this.$API.system.dept.list.get();
+				this.groups = res.data;
+			},
+			//表单提交方法
+			submit(){
+				this.$refs.dialogForm.validate(async (valid) => {
+					if (valid) {
+						this.isSaveing = true;
+						var res = await this.$API.demo.post.post(this.form);
+						this.isSaveing = false;
+						if(res.code == 200){
+							this.$emit('success', this.form, this.mode)
+							this.visible = false;
+							this.$message.success("操作成功")
+						}else{
+							this.$alert(res.message, "提示", {type: 'error'})
+						}
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.id = data.id
+				this.form.label = data.label
+				this.form.status = data.status
+				this.form.sort = data.sort
+				this.form.parentId = data.parentId
+				this.form.remark = data.remark
+
+				//可以和上面一样单个注入，也可以像下面一样直接合并进去
+				//Object.assign(this.form, data)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/setting/role/index.vue

@@ -14,12 +14,19 @@
 			</div>
 		</el-header>
 		<el-main class="nopadding">
-			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
+			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
 				<el-table-column type="selection" width="50"></el-table-column>
 				<el-table-column label="#" type="index" width="50"></el-table-column>
-				<el-table-column label="角色名称" prop="label" width="250"></el-table-column>
+				<el-table-column label="角色名称" prop="label" width="150"></el-table-column>
-				<el-table-column label="别名" prop="alias" width="150"></el-table-column>
+				<el-table-column label="别名" prop="alias" width="200"></el-table-column>
-				<el-table-column label="排序" prop="sort" width="150"></el-table-column>
+				<el-table-column label="排序" prop="sort" width="80"></el-table-column>
+				<el-table-column label="状态" prop="status" width="80">
+					<template #default="scope">
+						<el-switch v-model="scope.row.status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" active-value="1" inactive-value="0"></el-switch>
+					</template>
+				</el-table-column>
+				<el-table-column label="创建时间" prop="date" width="180"></el-table-column>
+				<el-table-column label="备注" prop="remark" min-width="150"></el-table-column>
 				<el-table-column label="操作" fixed="right" align="right" width="170">
 					<template #default="scope">
 						<el-button-group>
@@ -124,6 +131,16 @@
 			selectionChange(selection){
 				this.selection = selection;
 			},
+			//表格内开关
+			changeSwitch(val, row){
+				row.status = row.status == '1'?'0':'1'
+				row.$switch_status = true;
+				setTimeout(()=>{
+					delete row.$switch_status;
+					row.status = val;
+					this.$message.success("操作成功")
+				}, 500)
+			},
 			//搜索
 			upsearch(){
 

src/views/setting/role/permission.vue

@@ -3,18 +3,30 @@
 		<el-tabs tab-position="top">
 			<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>
+					<el-tree ref="menu" node-key="name" :data="menu.list" :props="menu.props" show-checkbox></el-tree>
 				</div>
 			</el-tab-pane>
-			<el-tab-pane label="部门权限">
+			<el-tab-pane label="数据权限">
-				<div class="treeMain">
+				<el-form label-width="100px" label-position="left">
-					<el-tree ref="group" node-key="name" :data="group.list" :default-checked-keys="group.checked" :props="group.props" show-checkbox></el-tree>
+					<el-form-item label="规则类型">
-				</div>
+						<el-select v-model="data.dataType" placeholder="请选择">
-			</el-tab-pane>
+							<el-option label="全部可见" value="1"></el-option>
-			<el-tab-pane label="类型权限">
+							<el-option label="本人可见" value="2"></el-option>
-				<div class="treeMain">
+							<el-option label="所在部门可见" value="3"></el-option>
-					<el-tree ref="type" node-key="name" :data="type.list" :default-checked-keys="type.checked" :props="type.props" show-checkbox></el-tree>
+							<el-option label="所在部门及子级可见" value="4"></el-option>
+							<el-option label="选择的部门可见" value="5"></el-option>
+							<el-option label="自定义" value="6"></el-option>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="选择部门" v-show="data.dataType=='5'">
+						<div class="treeMain" style="width: 100%;">
+							<el-tree ref="dept" node-key="id" :data="data.list" :props="data.props" show-checkbox></el-tree>
 						</div>
+					</el-form-item>
+					<el-form-item label="规则值" v-show="data.dataType=='6'">
+						<el-input v-model="data.rule" clearable type="textarea" :rows="6" placeholder="请输入自定义规则代码"></el-input>
+					</el-form-item>
+				</el-form>
 			</el-tab-pane>
 			<el-tab-pane label="控制台">
 				<el-form label-width="100px" label-position="left">
@@ -46,22 +58,19 @@
 				isSaveing: false,
 				menu: {
 					list: [],
-					checked: ["test", "system", "user", "role"],
+					checked: [],
 					props: {
 						label: (data)=>{
 							return data.meta.title
 						}
 					}
 				},
-				group: {
+				data: {
+					dataType :"1",
 					list: [],
 					checked: [],
-					props: {}
+					props: {},
-				},
+					rule: ""
-				type: {
-					list: [],
-					checked: [],
-					props: {}
 				},
 				dashboard: "0",
 				dashboardOptions: [
@@ -80,9 +89,8 @@
 			}
 		},
 		mounted() {
-			this.getMenu();
+			this.getMenu()
-			this.getGroup();
+			this.getDept()
-			this.getType();
 		},
 		methods: {
 			open(){
@@ -90,6 +98,14 @@
 			},
 			submit(){
 				this.isSaveing = true;
+
+				//选中的和半选的合并后传值接口
+				var checkedKeys = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
+				console.log(checkedKeys)
+
+				var checkedKeys_dept = this.$refs.dept.getCheckedKeys().concat(this.$refs.dept.getHalfCheckedKeys())
+				console.log(checkedKeys_dept)
+
 				setTimeout(()=>{
 					this.isSaveing = false;
 					this.visible = false;
@@ -98,29 +114,24 @@
 				},1000)
 			},
 			async getMenu(){
-				var res = await this.$API.system.menu.list.get();
+				var res = await this.$API.system.menu.list.get()
-				this.menu.list = res.data;
+				this.menu.list = res.data
+
+				//获取接口返回的之前选中的和半选的合并，处理过滤掉有叶子节点的key
+				this.menu.checked = ["system", "user", "user.add", "user.edit", "user.del", "directive.edit", "other", "directive"]
+				this.$nextTick(() => {
+					let filterKeys = this.menu.checked.filter(key => this.$refs.menu.getNode(key).isLeaf)
+					this.$refs.menu.setCheckedKeys(filterKeys, true)
+				})
 			},
-			getGroup(){
+			async getDept(){
-				this.group.list = [
+				var res = await this.$API.system.dept.list.get();
-					{label: 'JL00'},
+				this.data.list = res.data
-					{label: 'LP01'},
+				this.data.checked = ["12", "2", "21", "22", "1"]
-					{label: 'LP07'},
+				this.$nextTick(() => {
-					{label: 'SL01'},
+					let filterKeys = this.data.checked.filter(key => this.$refs.dept.getNode(key).isLeaf)
-					{label: 'TL06'},
+					this.$refs.dept.setCheckedKeys(filterKeys, true)
-					{label: 'TL09'},
+				})
-					{label: 'YP07'}
-				];
-			},
-			getType(){
-				this.type.list = [
-					{label: '原料采购'},
-					{label: '厂内互供'},
-					{label: '炼销订单'},
-					{label: '化工统销订单'},
-					{label: '移库单'},
-					{label: '自销订单'},
-				];
 			}
 		}
 	}

src/views/setting/role/save.vue

@@ -1,9 +1,6 @@
 <template>
 	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
 		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
-			<el-form-item label="上级角色" prop="parentId">
-				<el-cascader v-model="form.parentId" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
-			</el-form-item>
 			<el-form-item label="角色名称" prop="label">
 				<el-input v-model="form.label" clearable></el-input>
 			</el-form-item>
@@ -13,6 +10,12 @@
 			<el-form-item label="排序" prop="sort">
 				<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
 			</el-form-item>
+			<el-form-item label="是否有效" prop="status">
+				<el-switch v-model="form.status" active-value="1" inactive-value="0"></el-switch>
+			</el-form-item>
+			<el-form-item label="备注" prop="remark">
+				<el-input v-model="form.remark" clearable type="textarea"></el-input>
+			</el-form-item>
 		</el-form>
 		<template #footer>
 			<el-button @click="visible=false" >取 消</el-button>
@@ -40,7 +43,8 @@
 					label: "",
 					alias: "",
 					sort: 1,
-					parentId: ""
+					status: 1,
+					remark: ""
 				},
 				//验证规则
 				rules: {
@@ -53,18 +57,11 @@
 					alias: [
 						{required: true, message: '请输入角色别名'}
 					]
-				},
-				//所需数据选项
-				groups: [],
-				groupsProps: {
-					value: "id",
-					emitPath: false,
-					checkStrictly: true
 				}
 			}
 		},
 		mounted() {
-			this.getGroup()
+
 		},
 		methods: {
 			//显示
@@ -73,11 +70,6 @@
 				this.visible = true;
 				return this
 			},
-			//加载树数据
-			async getGroup(){
-				var res = await this.$API.system.role.list.get();
-				this.groups = res.data;
-			},
 			//表单提交方法
 			submit(){
 				this.$refs.dialogForm.validate(async (valid) => {
@@ -101,7 +93,8 @@
 				this.form.label = data.label
 				this.form.alias = data.alias
 				this.form.sort = data.sort
-				this.form.parentId = data.parentId
+				this.form.status = data.status
+				this.form.remark = data.remark
 
 				//可以和上面一样单个注入，也可以像下面一样直接合并进去
 				//Object.assign(this.form, data)

src/views/setting/user/index.vue

@@ -152,7 +152,7 @@
 			//加载树数据
 			async getGroup(){
 				this.showGrouploading = true;
-				var res = await this.$API.system.role.list.get();
+				var res = await this.$API.system.dept.list.get();
 				this.showGrouploading = false;
 				var allNode ={id: '', label: '所有'}
 				res.data.unshift(allNode);

src/views/setting/user/save.vue

@@ -18,8 +18,13 @@
 					<el-input type="password" v-model="form.password2" clearable show-password></el-input>
 				</el-form-item>
 			</template>
+			<el-form-item label="所属部门" prop="dept">
+				<el-cascader v-model="form.dept" :options="depts" :props="deptsProps" clearable style="width: 100%;"></el-cascader>
+			</el-form-item>
 			<el-form-item label="所属角色" prop="group">
-				<el-cascader v-model="form.group" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
+				<el-select v-model="form.group" multiple filterable style="width: 100%">
+					<el-option v-for="item in groups" :key="item.id" :label="item.label" :value="item.id"/>
+				</el-select>
 			</el-form-item>
 		</el-form>
 		<template #footer>
@@ -48,7 +53,8 @@
 					userName: "",
 					avatar: "",
 					name: "",
-					group: ""
+					dept: "",
+					group: []
 				},
 				//验证规则
 				rules: {
@@ -80,8 +86,11 @@
 							}
 						}}
 					],
+					dept: [
+						{required: true, message: '请选择所属部门'}
+					],
 					group: [
-						{required: true, message: '请选择所属角色'}
+						{required: true, message: '请选择所属角色', trigger: 'change'}
 					]
 				},
 				//所需数据选项
@@ -90,11 +99,17 @@
 					value: "id",
 					multiple: true,
 					checkStrictly: true
+				},
+				depts: [],
+				deptsProps: {
+					value: "id",
+					checkStrictly: true
 				}
 			}
 		},
 		mounted() {
 			this.getGroup()
+			this.getDept()
 		},
 		methods: {
 			//显示
@@ -106,7 +121,11 @@
 			//加载树数据
 			async getGroup(){
 				var res = await this.$API.system.role.list.get();
-				this.groups = res.data;
+				this.groups = res.data.rows;
+			},
+			async getDept(){
+				var res = await this.$API.system.dept.list.get();
+				this.depts = res.data;
 			},
 			//表单提交方法
 			submit(){
@@ -134,6 +153,7 @@
 				this.form.avatar = data.avatar
 				this.form.name = data.name
 				this.form.group = data.group
+				this.form.dept = data.dept
 
 				//可以和上面一样单个注入，也可以像下面一样直接合并进去
 				//Object.assign(this.form, data)