From 741a54b6a5e57ae3859d5530b348e5481b2bd652 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Fri, 14 May 2021 15:57:58 +0800
Subject: [PATCH] UP

---
 public/json/dic_info.json        |  43 +++++++
 public/json/dic_list.json        |  39 +++++++
 public/json/login.json           |  16 +--
 src/api/index.js                 |  16 +++
 src/components/scTable/index.vue |  15 ++-
 src/style/fix.less               |   3 +-
 src/views/setting/dic/dic.vue    |  88 +++++++++++++++
 src/views/setting/dic/index.vue  | 186 +++++++++++++++++++++++++++++++
 src/views/setting/role/index.vue | 111 ++++++++++++++++--
 src/views/setting/role/save.vue  |  99 ++++++++++++++++
 src/views/setting/user/index.vue |  23 +++-
 11 files changed, 613 insertions(+), 26 deletions(-)
 create mode 100644 public/json/dic_info.json
 create mode 100644 public/json/dic_list.json
 create mode 100644 src/views/setting/dic/dic.vue
 create mode 100644 src/views/setting/dic/index.vue
 create mode 100644 src/views/setting/role/save.vue

diff --git a/public/json/dic_info.json b/public/json/dic_info.json
new file mode 100644
index 00000000..5c74f05f
--- /dev/null
+++ b/public/json/dic_info.json
@@ -0,0 +1,43 @@
+{
+	"code": 200,
+	"count": 4,
+	"data": [
+		{
+			"id": "100",
+			"key": "1",
+			"name": "发布通知",
+			"yx": 1
+		},
+		{
+			"id": "101",
+			"key": "2",
+			"name": "批转通知",
+			"yx": 1
+		},
+		{
+			"id": "102",
+			"key": "3",
+			"name": "转发通知",
+			"yx": 1
+		},
+		{
+			"id": "103",
+			"key": "4",
+			"name": "指示通知",
+			"yx": 0
+		},
+		{
+			"id": "104",
+			"key": "5",
+			"name": "任免通知",
+			"yx": 0
+		},
+		{
+			"id": "105",
+			"key": "6",
+			"name": "事务通知",
+			"yx": 1
+		}
+	],
+	"message": ""
+}
diff --git a/public/json/dic_list.json b/public/json/dic_list.json
new file mode 100644
index 00000000..09b423c9
--- /dev/null
+++ b/public/json/dic_list.json
@@ -0,0 +1,39 @@
+{
+	"code": 200,
+	"count": 4,
+	"data": [
+		{
+			"id": "1",
+			"code": "notice",
+			"name": "通知类型"
+		},
+		{
+			"id": "2",
+			"code": "sex",
+			"name": "性别"
+		},
+		{
+			"id": "3",
+			"code": "menuCategory",
+			"name": "菜单类型"
+		},
+		{
+			"id": "4",
+			"code": "userType",
+			"name": "用户类型",
+			"children": [
+				{
+					"id": "41",
+					"code": "userTypePC",
+					"name": "Desktop"
+				},
+				{
+					"id": "42",
+					"code": "userTypeAPP",
+					"name": "Mobile"
+				}
+			]
+		}
+	],
+	"message": ""
+}
diff --git a/public/json/login.json b/public/json/login.json
index 0ceced5f..e1523ed8 100644
--- a/public/json/login.json
+++ b/public/json/login.json
@@ -199,14 +199,6 @@
 						},
 						"component": "setting/role"
 					},
-					{
-						"path": "/setting/menu",
-						"name": "menu",
-						"meta": {
-							"title": "菜单管理"
-						},
-						"component": "setting/menu"
-					},
 					{
 						"path": "/setting/dic",
 						"name": "dic",
@@ -215,6 +207,14 @@
 						},
 						"component": "setting/dic"
 					},
+					{
+						"path": "/setting/menu",
+						"name": "menu",
+						"meta": {
+							"title": "菜单管理"
+						},
+						"component": "setting/menu"
+					},
 					{
 						"path": "/setting/client",
 						"name": "client",
diff --git a/src/api/index.js b/src/api/index.js
index 843aef5e..ad846f69 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -56,6 +56,22 @@ const api = {
 			}
 		}
 	},
+	dic: {
+		list: {
+			url: `${config.API_URL}/json/dic_list.json`,
+			name: "字典列表",
+			get: async function(){
+				return await http.get(this.url);
+			}
+		},
+		info: {
+			url: `${config.API_URL}/json/dic_info.json`,
+			name: "字典明细",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		}
+	},
 	demo: {
 		select: {
 			url: `${config.API_URL}/json/select.json`,
diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index e1689588..ba973a13 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="scTable" ref="scTableMain" v-loading="loading">
 		<div class="scTable-table">
-			<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" stripe  @selection-change="selectionChange">
+			<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow"  @selection-change="selectionChange" @current-change="currentChange">
 				<slot></slot>
 				<el-table-column v-for="(item, index) in userColumn" :key="index" :label="item.label" :prop="item.prop" :width="item.width">
 					<template #default="scope">
@@ -19,8 +19,8 @@
 			</el-table>
 		</div>
 		<div class="scTable-page">
-			<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
-			<div class="scTable-do">
+			<el-pagination background :small="true" :layout="paginationLayout" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
+			<div class="scTable-do" v-if="!hideDo">
 				<el-button @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
 				<el-popover placement="top" title="设置" :width="500" trigger="click">
 					<template #reference>
@@ -45,7 +45,11 @@
 			apiObj: { type: Object, default: () => {} },
 			data: { type: Object, default: () => {} },
 			rowKey: { type: String, default: "" },
-			column: { type: Object, default: () => {} }
+			column: { type: Object, default: () => {} },
+			hideDo: { type: Boolean, default: false },
+			stripe: { type: Boolean, default: false },
+			highlightCurrentRow: { type: Boolean, default: false },
+			paginationLayout: { type: String, default: "total, prev, pager, next, jumper" },
 		},
 		watch: {
 			//监听从props里拿到值了
@@ -134,6 +138,9 @@
 			//转发原装方法&事件
 			selectionChange(selection){
 				this.$emit('selection-change', selection)
+			},
+			currentChange(selection){
+				this.$emit('current-change', selection)
 			}
 		}
 	}
diff --git a/src/style/fix.less b/src/style/fix.less
index abfed14f..133b25c0 100644
--- a/src/style/fix.less
+++ b/src/style/fix.less
@@ -15,4 +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;}
\ No newline at end of file
+.el-tree-node__content {height:36px;}
+.el-input-number__decrease, .el-input-number__increase {top:2px;}
\ No newline at end of file
diff --git a/src/views/setting/dic/dic.vue b/src/views/setting/dic/dic.vue
new file mode 100644
index 00000000..9aa4b55c
--- /dev/null
+++ b/src/views/setting/dic/dic.vue
@@ -0,0 +1,88 @@
+<template>
+	<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
+		<el-row :gutter="20">
+			<el-col :span="24">
+				<el-form-item label="编码" prop="code">
+					<el-input v-model="form.code" clearable></el-input>
+				</el-form-item>
+			</el-col>
+		</el-row>
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item label="字典名称" prop="name">
+					<el-input v-model="form.name" clearable></el-input>
+				</el-form-item>
+			</el-col>
+			<el-col :span="12">
+				<el-form-item label="上级字典" prop="parentId">
+					<el-cascader v-model="form.parentId" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
+				</el-form-item>
+			</el-col>
+		</el-row>
+	</el-form>
+</template>
+
+<script>
+	export default {
+		props: {
+			mode: { type: String, default: "add" }
+		},
+		data() {
+			return {
+				form: {
+					id:"",
+					name: "",
+					code: "",
+					parentId: ""
+				},
+				rules: {
+					code: [
+						{required: true, message: '请输入编码'}
+					],
+					name: [
+						{required: true, message: '请输入字典名称'}
+					]
+				},
+				dic: [],
+				dicProps: {
+					value: "id",
+					label: "name",
+					checkStrictly: true
+				}
+			}
+		},
+		mounted() {
+			this.getDic()
+		},
+		methods: {
+			//获取字典列表
+			async getDic(){
+				var res = await this.$API.dic.list.get();
+				this.dic = res.data;
+			},
+			//表单提交方法
+			submit(callback){
+				this.$refs.dialogForm.validate((valid) => {
+					if (valid) {
+						callback(this.form)
+					}else{
+						return false;
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.id = data.id
+				this.form.name = data.name
+				this.form.code = data.code
+				this.form.parentId = data.parentId
+			
+				//可以和上面一样单个注入，也可以像下面一样直接合并进去
+				//Object.assign(this.form, data)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/views/setting/dic/index.vue b/src/views/setting/dic/index.vue
new file mode 100644
index 00000000..04218add
--- /dev/null
+++ b/src/views/setting/dic/index.vue
@@ -0,0 +1,186 @@
+<template>
+	<el-container>
+		<el-aside width="300px" v-loading="showDicloading">
+			<el-container>
+				<el-header>
+					<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" :current-node-key="''" :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>
+								<span class="code">{{ data.code }}</span>
+								<span class="do">
+									<i class="el-icon-edit" @click.stop="dicEdit(data)"></i>
+									<i class="el-icon-delete" @click.stop="dicDel(node, data)"></i>
+								</span>
+							</span>
+						</template>
+					</el-tree>
+				</el-main>
+				<el-footer style="height:51px;">
+					<el-button type="primary" size="mini" icon="el-icon-plus" style="width: 100%;" @click="addDic">字典分类</el-button>
+				</el-footer>
+			</el-container>
+		</el-aside>
+		<el-container class="is-vertical">
+			<el-header>
+				<div class="left-panel">
+					<el-button type="primary" icon="el-icon-plus"></el-button>
+					<el-button type="danger" plain icon="el-icon-delete" disabled></el-button>
+				</div>
+			</el-header>
+			<el-main class="nopadding">
+				<scTable ref="table" :apiObj="listApi" stripe :paginationLayout="'prev, pager, next'">
+					<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="name" width="150"></el-table-column>
+					<el-table-column label="键值" prop="key" width="150"></el-table-column>
+					<el-table-column label="是否有效" prop="yx" width="100">
+						<template #default="scope">
+							<i v-if="scope.row.yx==1" class="el-icon-success" style="color: #67C23A;"></i>
+							<i v-if="scope.row.yx==0" class="el-icon-remove" style="color: #DCDFE6;"></i>
+						</template>
+					</el-table-column>
+				</scTable>
+			</el-main>
+		</el-container>
+	</el-container>
+
+	<el-dialog :title="titleMap[dicMode]" v-model="dicDialogVisible" :width="600" destroy-on-close>
+		<dic-dialog ref="dicDialog" :mode="dicMode"></dic-dialog>
+		<template #footer>
+			<el-button @click="dicDialogVisible=false" >取 消</el-button>
+			<el-button type="primary" @click="saveDic()" :loading="isDicSaveing">保 存</el-button>
+		</template>
+	</el-dialog>
+
+</template>
+
+<script>
+	import dicDialog from './dic'
+
+	export default {
+		name: 'dic',
+		components: {
+			dicDialog
+		},
+		data() {
+			return {
+				showDicloading: true,
+				dicDialogVisible: false,
+				isDicSaveing: false,
+				dicMode: 'add',
+				titleMap: {
+					add: "新增",
+					edit: "编辑",
+					show: "查看"
+				},
+				dicList: [],
+				dicFilterText: '',
+				dicProps: {
+					label: 'name'
+				},
+				nowDic: null,
+				listApi: this.$API.dic.info,
+			}
+		},
+		watch: {
+			dicFilterText(val) {
+				this.$refs.dic.filter(val);
+			}
+		},
+		mounted() {
+			this.getDic()
+		},
+		methods: {
+			//加载树数据
+			async getDic(){
+				var res = await this.$API.dic.list.get();
+				this.showDicloading = false;
+				this.dicList = res.data;
+			},
+			//树过滤
+			dicFilterNode(value, data){
+				if (!value) return true;
+				var targetText = data.name + data.code;
+				return targetText.indexOf(value) !== -1;
+			},
+			//树增加
+			addDic(){
+				this.dicMode = 'add';
+				this.dicDialogVisible = true;
+			},
+			//编辑树
+			dicEdit(data){
+				this.dicMode = 'edit';
+				this.dicDialogVisible = true;
+				this.$nextTick(() => {
+					//这里应该再次根据ID查询详情接口
+					this.$refs.dicDialog.setData(data)
+				})
+			},
+			saveDic(){
+				this.$refs.dicDialog.submit(async (formData) => {
+					this.isDicSaveing = true;
+					var res = await this.$API.user.save.post(formData);
+					this.isDicSaveing = false;
+					if(res.code == 200){
+						//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+						if(this.dicMode == 'add'){
+							var demoID = (Math.random() * (500 - 400 + 1) | 0) + 400;
+							formData.id = demoID;
+							this.dicList.push(formData);
+						}
+						if(this.dicMode == 'edit'){
+							//
+						}
+						this.dicDialogVisible = false;
+						this.$message.success("操作成功")
+					}else{
+						this.$alert(res.message, "提示", {type: 'error'})
+					}
+				})
+			},
+			//树点击事件
+			dicClick(data){
+				this.nowDic = data;
+				var params = {
+					code: data.code
+				}
+				this.$refs.table.upData(params)
+			},
+			//删除树
+			dicDel(node, data){
+				this.$confirm(`确定删除 ${data.name} 项吗？`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					this.showDicloading = true;
+
+					//这里应该改为异步请求接口
+					const parent = node.parent;
+					const children = parent.data.children || parent.data;
+					const index = children.findIndex(d => d.id === data.id);
+					children.splice(index, 1);
+					this.dicList = [...this.dicList]
+
+					this.showDicloading = false;
+					this.$message.success("操作成功")
+				}).catch(() => {
+
+				})
+			}
+		}
+	}
+</script>
+
+<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 .code {font-size: 12px;color: #409eff;background: #ecf5ff;padding: 2px 5px;border-radius: 3px;}
+	.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;}
+	.custom-tree-node:hover .code {display: none;}
+	.custom-tree-node:hover .do {display: inline-block;}
+</style>
diff --git a/src/views/setting/role/index.vue b/src/views/setting/role/index.vue
index a364f600..1cf5abe3 100644
--- a/src/views/setting/role/index.vue
+++ b/src/views/setting/role/index.vue
@@ -2,8 +2,8 @@
 	<el-container>
 		<el-header>
 			<div class="left-panel">
-				<el-button type="primary" icon="el-icon-plus"></el-button>
-				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
+				<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>
 			</div>
 			<div class="right-panel">
@@ -15,33 +15,44 @@
 		</el-header>
 		<el-main class="nopadding">
 			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange">
-
 				<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="alias" width="150"></el-table-column>
-
 				<el-table-column label="排序" prop="progress" width="150"></el-table-column>
-
 				<el-table-column label="操作" fixed="right" align="right" width="140">
 					<template #default="scope">
 						<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
-						<el-button type="text" size="small">编辑</el-button>
-						<el-button type="text" size="small">删除</el-button>
+						<el-button type="text" 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 type="text" size="small">删除</el-button>
+							</template>
+						</el-popconfirm>
 					</template>
 				</el-table-column>
 
 			</scTable>
 		</el-main>
 	</el-container>
+
+	<el-dialog :title="titleMap[saveMode]" v-model="saveDialogVisible" :width="600" destroy-on-close>
+		<save-dialog ref="saveDialog" :mode="saveMode"></save-dialog>
+		<template #footer>
+			<el-button @click="saveDialogVisible=false" >取 消</el-button>
+			<el-button v-if="saveMode!='show'" type="primary" @click="saveForm()" :loading="isSaveing">保 存</el-button>
+		</template>
+	</el-dialog>
+
 </template>
 
 <script>
+	import saveDialog from './save'
+
 	export default {
 		name: 'role',
+		components: {
+			saveDialog
+		},
 		data() {
 			return {
 				apiObj: this.$API.role.list,
@@ -49,10 +60,88 @@
 				search: {
 					keyword: null
 				},
+				saveDialogVisible: false,
+				saveMode: 'add',
+				titleMap: {
+					add: "新增",
+					edit: "编辑",
+					show: "查看"
+				},
+				isSaveing: false,
 
 			}
 		},
 		methods: {
+			//添加
+			add(){
+				this.saveMode = 'add';
+				this.saveDialogVisible = true;
+			},
+			//编辑
+			table_edit(row){
+				this.saveMode = 'edit';
+				this.saveDialogVisible = true;
+				this.$nextTick(() => {
+					//这里应该再次根据ID查询详情接口
+					this.$refs.saveDialog.setData(row)
+				})
+
+			},
+			//查看
+			table_show(row){
+				this.saveMode = 'show';
+				this.saveDialogVisible = true;
+				this.$nextTick(() => {
+					//这里应该再次根据ID查询详情接口
+					this.$refs.saveDialog.setData(row)
+				})
+			},
+			//删除
+			async table_del(row, index){
+				var reqData = {id: row.id}
+				var res = await this.$API.user.del.post(reqData);
+				if(res.code == 200){
+					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+					this.$refs.table.tableData.splice(index, 1);
+					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.selection.forEach(item => {
+						this.$refs.table.tableData.forEach((itemI, indexI) => {
+							if (item.id === itemI.id) {
+								this.$refs.table.tableData.splice(indexI, 1)
+							}
+						})
+					})
+					loading.close();
+					this.$message.success("操作成功")
+				}).catch(() => {
+
+				})
+			},
+			//提交
+			saveForm(){
+				this.$refs.saveDialog.submit(async (formData) => {
+					this.isSaveing = true;
+					var res = await this.$API.user.save.post(formData);
+					this.isSaveing = false;
+					if(res.code == 200){
+						//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+						this.saveDialogVisible = false;
+						this.$message.success("操作成功")
+					}else{
+						this.$alert(res.message, "提示", {type: 'error'})
+					}
+				})
+			},
 			//表格选择后回调事件
 			selectionChange(selection){
 				this.selection = selection;
diff --git a/src/views/setting/role/save.vue b/src/views/setting/role/save.vue
new file mode 100644
index 00000000..71f6bb75
--- /dev/null
+++ b/src/views/setting/role/save.vue
@@ -0,0 +1,99 @@
+<template>
+	<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="top">
+		<el-row :gutter="20">
+			<el-col :span="12">
+				<el-form-item label="上级角色" prop="parentId">
+					<el-cascader v-model="form.parentId" :options="groups" :props="groupsProps" :show-all-levels="false" clearable></el-cascader>
+					<div class="el-form-item-msg">如不选择任意上级，系统默认为最顶级角色</div>
+				</el-form-item>
+			</el-col>
+			<el-col :span="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-col>
+		</el-row>
+		<el-row :gutter="20">
+			<el-col :span="24">
+				<el-form-item label="角色名称" prop="label">
+					<el-input v-model="form.label" clearable></el-input>
+				</el-form-item>
+			</el-col>
+			<el-col :span="24">
+				<el-form-item label="角色别名" prop="alias">
+					<el-input v-model="form.alias" clearable></el-input>
+				</el-form-item>
+			</el-col>
+		</el-row>
+	</el-form>
+</template>
+
+<script>
+	export default {
+		props: {
+			mode: { type: String, default: "add" }
+		},
+		data() {
+			return {
+				//表单数据
+				form: {
+					id:"",
+					label: "",
+					alias: "",
+					parentId: ""
+				},
+				//验证规则
+				rules: {
+					sort: [
+						{required: true, message: '请输入排序'}
+					],
+					label: [
+						{required: true, message: '请输入角色名称'}
+					],
+					alias: [
+						{required: true, message: '请输入角色别名'}
+					]
+				},
+				//所需数据选项
+				groups: [],
+				groupsProps: {
+					value: "id",
+					checkStrictly: true
+				}
+			}
+		},
+		mounted() {
+			this.getGroup()
+		},
+		methods: {
+			//加载树数据
+			async getGroup(){
+				var res = await this.$API.role.select.get();
+				this.groups = res.data;
+			},
+			//表单提交方法
+			submit(callback){
+				this.$refs.dialogForm.validate((valid) => {
+					if (valid) {
+						callback(this.form)
+					}else{
+						return false;
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.id = data.id
+				this.form.label = data.label
+				this.form.alias = data.alias
+				this.form.parentId = data.parentId
+
+				//可以和上面一样单个注入，也可以像下面一样直接合并进去
+				//Object.assign(this.form, data)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/views/setting/user/index.vue b/src/views/setting/user/index.vue
index a4b8529d..3470c635 100644
--- a/src/views/setting/user/index.vue
+++ b/src/views/setting/user/index.vue
@@ -14,7 +14,7 @@
 				<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"></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==0">密码重置</el-button>
 					</div>
@@ -26,7 +26,7 @@
 					</div>
 				</el-header>
 				<el-main class="nopadding">
-					<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
+					<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe>
 						<el-table-column type="selection" width="50"></el-table-column>
 						<el-table-column label="ID" prop="id" width="50"></el-table-column>
 						<el-table-column label="登录账号" prop="userName" width="150"></el-table-column>
@@ -133,6 +133,25 @@
 					this.$alert(res.message, "提示", {type: 'error'})
 				}
 			},
+			//批量删除
+			async batch_del(){
+				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					const loading = this.$loading();
+					this.selection.forEach(item => {
+						this.$refs.table.tableData.forEach((itemI, indexI) => {
+							if (item.id === itemI.id) {
+								this.$refs.table.tableData.splice(indexI, 1)
+							}
+						})
+					})
+					loading.close();
+					this.$message.success("操作成功")
+				}).catch(() => {
+					
+				})
+			},
 			//提交
 			saveForm(){
 				this.$refs.saveDialog.submit(async (formData) => {