重构部分页面的弹窗逻辑

src/views/setting/client/index.vue

@@ -32,7 +32,7 @@
 		</el-main>
 	</el-container>
 
-	<save-dialog ref="saveDialog"></save-dialog>
+	<save-dialog ref="saveDialog" @success="handleSuccess"></save-dialog>
 
 </template>
 
@@ -51,6 +51,7 @@
 			}
 		},
 		methods: {
+			//增加
 			add(){
 				this.$refs.saveDialog.show()
 			},
@@ -93,6 +94,17 @@
 			//表格选择后回调事件
 			selectionChange(selection){
 				this.selection = selection;
+			},
+			//本地更新数据
+			handleSuccess(data, mode){
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					this.$refs.table.tableData.unshift(data)
+				}else if(mode=='edit'){
+					this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
+						Object.assign(item, data)
+					})
+				}
 			}
 		}
 	}

src/views/setting/client/save.vue

@@ -1,6 +1,6 @@
 <template>
 	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close>
-		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
+		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
 			<el-form-item label="应用标识" prop="appId">
 				<el-input v-model="form.appId" clearable></el-input>
 			</el-form-item>
@@ -19,7 +19,7 @@
 				</el-checkbox-group>
 			</el-form-item>
 			<el-form-item label="授权至" prop="exp">
-				<el-date-picker v-model="form.exp" type="datetime" placeholder="选择日期时间"></el-date-picker>
+				<el-date-picker v-model="form.exp" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
 			</el-form-item>
 		</el-form>
 		<template #footer>
@@ -31,6 +31,7 @@
 
 <script>
 	export default {
+		emits: ['success'],
 		data() {
 			return {
 				mode: "add",
@@ -38,7 +39,6 @@
 					add: '新增APP',
 					edit: '编辑APP'
 				},
-				//表单数据
 				form: {
 					id:"",
 					appId: "",
@@ -47,7 +47,6 @@
 					type: [],
 					exp: ""
 				},
-				//验证规则
 				rules: {
 					appId:[
 						{required: true, message: '请输入应用标识'}
@@ -59,15 +58,14 @@
 						{required: true, message: '请输入秘钥'}
 					],
 					type:[
-						{required: true, message: '请选择类型范围'}
+						{required: true, message: '请选择类型范围', trigger: 'change'}
 					],
 					exp:[
-						{required: true, message: '请选择授权到期日期'}
+						{required: true, message: '请选择授权到期日期', trigger: 'change'}
 					]
 				},
 				visible: false,
-				isSaveing: false,
+				isSaveing: false
-				pData: {}
 			}
 		},
 		methods: {
@@ -85,12 +83,8 @@
 						var res = await this.$API.user.save.post(this.form);
 						this.isSaveing = false;
 						if(res.code == 200){
+							this.$emit('success', this.form, this.mode)
 							this.visible = false;
-							if(this.mode == 'add'){
-								//
-							}else if(this.mode == 'edit'){
-								Object.assign(this.pData, this.form)
-							}
 							this.$message.success("操作成功")
 						}else{
 							this.$alert(res.message, "提示", {type: 'error'})
@@ -100,7 +94,6 @@
 			},
 			//表单注入数据
 			setData(data){
-				this.pData = data
 				this.form.id = data.id
 				this.form.appId = data.appId
 				this.form.appName = data.appName

src/views/setting/log/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-container>
 		<el-aside width="220px">
-			<el-tree ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false" @node-click="dicClick">
+			<el-tree ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false">
 			</el-tree>
 		</el-aside>
 		<el-container>

src/views/setting/role/index.vue

@@ -35,21 +35,9 @@
 		</el-main>
 	</el-container>
 
-	<el-dialog :title="titleMap[saveMode]" v-model="saveDialogVisible" :width="500" destroy-on-close>
+	<save-dialog ref="saveDialog" @success="handleSaveSuccess"></save-dialog>
-		<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>
 
-	<el-dialog title="角色权限设置" v-model="permissionDialogVisible" :width="500" 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>
 
@@ -69,45 +57,27 @@
 				selection: [],
 				search: {
 					keyword: null
-				},
+				}
-				saveDialogVisible: false,
-				saveMode: 'add',
-				titleMap: {
-					add: "新增",
-					edit: "编辑",
-					show: "查看"
-				},
-				isSaveing: false,
-
-				//权限
-				permissionDialogVisible: false,
-				isPermissionSaveing: false
 			}
 		},
 		methods: {
 			//添加
 			add(){
-				this.saveMode = 'add';
+				this.$refs.saveDialog.show()
-				this.saveDialogVisible = true;
 			},
 			//编辑
 			table_edit(row){
-				this.saveMode = 'edit';
+				this.$refs.saveDialog.show('edit')
-				this.saveDialogVisible = true;
-				this.$nextTick(() => {
-					//这里应该再次根据ID查询详情接口
 				this.$refs.saveDialog.setData(row)
-				})
-
 			},
 			//查看
 			table_show(row){
-				this.saveMode = 'show';
+				this.$refs.saveDialog.show('show')
-				this.saveDialogVisible = true;
-				this.$nextTick(() => {
-					//这里应该再次根据ID查询详情接口
 				this.$refs.saveDialog.setData(row)
-				})
+			},
+			//权限设置
+			permission(){
+				this.$refs.permissionDialog.show()
 			},
 			//删除
 			async table_del(row, index){
@@ -140,36 +110,40 @@
 
 				})
 			},
-			//提交
-			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;
 			},
-			//权限设置
-			permission(){
-				this.permissionDialogVisible = true;
-			},
-			savePermission(){
-				this.$message.success("操作成功")
-				this.permissionDialogVisible = false;
-			},
 			//搜索
 			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){
+				//这里新增或编辑后本地改变了值，当然也可以暴力直接刷新表格
+				//this.$refs.table.tableData.refresh()
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					this.$refs.table.tableData.unshift(data)
+				}else if(mode=='edit'){
+					Object.assign(this.filterTree(data.id), data)
+				}
 			}
 		}
 	}

src/views/setting/role/permission.vue

@@ -1,4 +1,5 @@
 <template>
+	<el-dialog title="角色权限设置" v-model="visible" :width="500" destroy-on-close>
 		<el-tabs tab-position="top">
 			<el-tab-pane label="菜单权限">
 				<div class="treeMain">
@@ -29,12 +30,20 @@
 				</el-form>
 			</el-tab-pane>
 		</el-tabs>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
 </template>
 
 <script>
 	export default {
+		emits: ['success'],
 		data() {
 			return {
+				visible: false,
+				isSaveing: false,
 				menu: {
 					list: [],
 					checked: ["test", "system", "user", "role"],
@@ -76,6 +85,19 @@
 			this.getType();
 		},
 		methods: {
+			show(){
+				this.visible = true;
+				this.form = this.$options.data().form
+			},
+			submit(){
+				this.isSaveing = true;
+				setTimeout(()=>{
+					this.isSaveing = false;
+					this.visible = false;
+					this.$message.success("操作成功")
+					this.$emit('success')
+				},1000)
+			},
 			async getMenu(){
 				var res = await this.$API.menu.list.get();
 				this.menu.list = res.data;

src/views/setting/role/save.vue

@@ -1,5 +1,6 @@
 <template>
-	<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="top">
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close>
+		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="top">
 			<el-row :gutter="20">
 				<el-col :span="12">
 					<el-form-item label="上级角色" prop="parentId">
@@ -25,15 +26,26 @@
 				</el-col>
 			</el-row>
 		</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 {
-		props: {
+		emits: ['success'],
-			mode: { type: String, default: "add" }
-		},
 		data() {
 			return {
+				mode: "add",
+				titleMap: {
+					add: '新增',
+					edit: '编辑',
+					show: '查看'
+				},
+				visible: false,
+				isSaveing: false,
 				//表单数据
 				form: {
 					id:"",
@@ -44,7 +56,7 @@
 				//验证规则
 				rules: {
 					sort: [
-						{required: true, message: '请输入排序'}
+						{required: true, message: '请输入排序', trigger: 'change'}
 					],
 					label: [
 						{required: true, message: '请输入角色名称'}
@@ -65,18 +77,31 @@
 			this.getGroup()
 		},
 		methods: {
+			//显示
+			show(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				this.form = this.$options.data().form
+			},
 			//加载树数据
 			async getGroup(){
 				var res = await this.$API.role.select.get();
 				this.groups = res.data;
 			},
 			//表单提交方法
-			submit(callback){
+			submit(){
-				this.$refs.dialogForm.validate((valid) => {
+				this.$refs.dialogForm.validate(async (valid) => {
 					if (valid) {
-						callback(this.form)
+						this.isSaveing = true;
+						var res = await this.$API.user.save.post(this.form);
+						this.isSaveing = false;
+						if(res.code == 200){
+							this.$emit('success', this.form, this.mode)
+							this.visible = false;
+							this.$message.success("操作成功")
 						}else{
-						return false;
+							this.$alert(res.message, "提示", {type: 'error'})
+						}
 					}
 				})
 			},

src/views/setting/task/index.vue

@@ -57,7 +57,7 @@
 		</el-row>
 	</el-main>
 
-	<save-dialog ref="saveDialog"></save-dialog>
+	<save-dialog ref="saveDialog" @success="handleSuccess"></save-dialog>
 
 	<el-drawer title="计划任务日志" v-model="logsVisible" :size="600" direction="rtl" destroy-on-close>
 		<logs></logs>
@@ -134,6 +134,17 @@
 			},
 			run(task){
 				this.$message.success(`已成功执行计划任务：${task.title}`)
+			},
+			//本地更新数据
+			handleSuccess(data, mode){
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					this.list.push(data)
+				}else if(mode=='edit'){
+					this.list.filter(item => item.id===data.id ).forEach(item => {
+						Object.assign(item, data)
+					})
+				}
 			}
 		}
 	}

src/views/setting/task/save.vue

@@ -32,7 +32,7 @@
 
 <script>
 	export default {
-		inject: ['list'],
+		emits: ['success'],
 		data() {
 			return {
 				mode: "add",
@@ -81,15 +81,7 @@
 							this.isSaveing = false;
 							this.visible = false;
 							this.$message.success("操作成功")
-							if(this.mode == 'add'){
+							this.$emit('success', this.form, this.mode)
-								var newItem = {...this.form}
-								newItem.id = new Date().getTime()
-								this.list.push(newItem)
-							}else if(this.mode == 'edit'){
-								this.list.filter(item => item.id===this.form.id ).forEach(item => {
-									Object.assign(item, this.form)
-								})
-							}
 						},1000)
 					}
 				})

src/views/setting/user/index.vue

@@ -55,13 +55,7 @@
 		</el-container>
 	</el-container>
 
-	<el-dialog :title="titleMap[saveMode]" v-model="saveDialogVisible" :width="500" destroy-on-close>
+	<save-dialog ref="saveDialog" @success="handleSuccess"></save-dialog>
-		<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>
 
@@ -75,14 +69,6 @@
 		},
 		data() {
 			return {
-				saveDialogVisible: false,
-				saveMode: 'add',
-				titleMap: {
-					add: "新增",
-					edit: "编辑",
-					show: "查看"
-				},
-				isSaveing: false,
 				showGrouploading: false,
 				groupFilterText: '',
 				group: [],
@@ -104,27 +90,17 @@
 		methods: {
 			//添加
 			add(){
-				this.saveMode = 'add';
+				this.$refs.saveDialog.show()
-				this.saveDialogVisible = true;
 			},
 			//编辑
 			table_edit(row){
-				this.saveMode = 'edit';
+				this.$refs.saveDialog.show('edit')
-				this.saveDialogVisible = true;
-				this.$nextTick(() => {
-					//这里应该再次根据ID查询详情接口
 				this.$refs.saveDialog.setData(row)
-				})
-
 			},
 			//查看
 			table_show(row){
-				this.saveMode = 'show';
+				this.$refs.saveDialog.show('show')
-				this.saveDialogVisible = true;
-				this.$nextTick(() => {
-					//这里应该再次根据ID查询详情接口
 				this.$refs.saveDialog.setData(row)
-				})
 			},
 			//删除
 			async table_del(row, index){
@@ -157,21 +133,6 @@
 
 				})
 			},
-			//提交
-			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;
@@ -199,6 +160,17 @@
 			//搜索
 			upsearch(){
 
+			},
+			//本地更新数据
+			handleSuccess(data, mode){
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					this.$refs.table.tableData.unshift(data)
+				}else if(mode=='edit'){
+					this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
+						Object.assign(item, data)
+					})
+				}
 			}
 		}
 	}

src/views/setting/user/save.vue

@@ -1,55 +1,65 @@
 <template>
-	<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="top">
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close>
+		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="top">
 			<el-row :gutter="20">
 				<el-col :span="24">
 					<el-form-item label="头像" prop="avatar">
-					<sc-upload v-model="form.avatar" title="上传头像" :action="uploadUrl"></sc-upload>
+						<sc-upload v-model="form.avatar" title="上传头像"></sc-upload>
 					</el-form-item>
 				</el-col>
 			</el-row>
 			<el-row :gutter="20">
 				<el-col :span="12">
 					<el-form-item label="登录账号" prop="userName">
-					<el-input v-model="form.userName" clearable></el-input>
+						<el-input v-model="form.userName" placeholder="用于登录系统" clearable></el-input>
 					</el-form-item>
 				</el-col>
 				<el-col :span="12">
 					<el-form-item label="姓名" prop="name">
-					<el-input v-model="form.name" clearable></el-input>
+						<el-input v-model="form.name" placeholder="请输入完整的真实姓名" clearable></el-input>
 					</el-form-item>
 				</el-col>
 			</el-row>
-		<el-row :gutter="20">
+			<el-row :gutter="20" v-if="mode=='add'">
 				<el-col :span="12">
 					<el-form-item label="登录密码" prop="password">
-					<el-input v-model="form.password" clearable></el-input>
+						<el-input type="password" v-model="form.password" clearable show-password></el-input>
-					<div v-if="mode=='edit'" class="el-form-item-msg">如不修改密码，可为空</div>
 					</el-form-item>
 				</el-col>
 				<el-col :span="12">
 					<el-form-item label="确认密码" prop="password2">
-					<el-input v-model="form.password2" clearable></el-input>
+						<el-input type="password" v-model="form.password2" clearable show-password></el-input>
 					</el-form-item>
 				</el-col>
 			</el-row>
 			<el-row :gutter="20">
-			<el-col :span="12">
+				<el-col :span="24">
 					<el-form-item label="所属角色" prop="group">
-					<el-cascader v-model="form.group" :options="groups" :props="groupsProps" :show-all-levels="false" clearable></el-cascader>
+						<el-cascader v-model="form.group" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
 					</el-form-item>
 				</el-col>
 			</el-row>
 		</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 {
-		props: {
+		emits: ['success'],
-			mode: { type: String, default: "add" }
-		},
 		data() {
 			return {
-				uploadUrl: this.$API.demo.upload.url,
+				mode: "add",
+				titleMap: {
+					add: '新增用户',
+					edit: '编辑用户',
+					show: '查看'
+				},
+				visible: false,
+				isSaveing: false,
 				//表单数据
 				form: {
 					id:"",
@@ -71,17 +81,20 @@
 					],
 					password: [
 						{required: true, message: '请输入登录密码'},
-						{validator: () => {
+						{validator: (rule, value, callback) => {
 							if (this.form.password2 !== '') {
 								this.$refs.dialogForm.validateField('password2');
 							}
+							callback();
 						}}
 					],
 					password2: [
 						{required: true, message: '请再次输入密码'},
-						{validator: (value, callback) => {
+						{validator: (rule, value, callback) => {
 							if (value !== this.form.password) {
 								callback(new Error('两次输入密码不一致!'));
+							}else{
+								callback();
 							}
 						}}
 					],
@@ -99,23 +112,34 @@
 			}
 		},
 		mounted() {
-			if(this.mode != 'add'){
-				this.rules.password = []
-				this.rules.password2 = []
-			}
 			this.getGroup()
 		},
 		methods: {
+			//显示
+			show(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				this.form = this.$options.data().form
+			},
 			//加载树数据
 			async getGroup(){
 				var res = await this.$API.role.select.get();
 				this.groups = res.data;
 			},
 			//表单提交方法
-			submit(callback){
+			submit(){
-				this.$refs.dialogForm.validate((valid) => {
+				this.$refs.dialogForm.validate(async (valid) => {
 					if (valid) {
-						callback(this.form)
+						this.isSaveing = true;
+						var res = await this.$API.user.save.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'})
+						}
 					}else{
 						return false;
 					}