From 424d9e1199520109362a8f29ab32dfc7c63e22be Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Mon, 12 Jul 2021 15:48:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AD=97=E5=85=B8=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=BC=B9=E7=AA=97=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/setting/dic/dic.vue   |  62 +++++++++-----
 src/views/setting/dic/index.vue | 140 ++++++++++++++------------------
 src/views/setting/dic/list.vue  |  69 ++++++++++------
 3 files changed, 150 insertions(+), 121 deletions(-)

diff --git a/src/views/setting/dic/dic.vue b/src/views/setting/dic/dic.vue
index 40f93124..13ba94e6 100644
--- a/src/views/setting/dic/dic.vue
+++ b/src/views/setting/dic/dic.vue
@@ -1,24 +1,35 @@
 <template>
-	<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
-		<el-form-item label="编码" prop="code">
-			<el-input v-model="form.code" clearable></el-input>
-		</el-form-item>
-		<el-form-item label="字典名称" prop="name">
-			<el-input v-model="form.name" clearable></el-input>
-		</el-form-item>
-		<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-form>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="330" destroy-on-close @closed="$emit('closed')">
+		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
+			<el-form-item label="编码" prop="code">
+				<el-input v-model="form.code" clearable placeholder="字典编码"></el-input>
+			</el-form-item>
+			<el-form-item label="字典名称" prop="name">
+				<el-input v-model="form.name" clearable placeholder="字典显示名称"></el-input>
+			</el-form-item>
+			<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-form>
+		<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 {
-		props: {
-			mode: { type: String, default: "add" }
-		},
+		emits: ['success', 'closed'],
 		data() {
 			return {
+				mode: "add",
+				titleMap: {
+					add: '新增字典',
+					edit: '编辑字典'
+				},
+				visible: false,
+				isSaveing: false,
 				form: {
 					id:"",
 					name: "",
@@ -45,18 +56,31 @@
 			this.getDic()
 		},
 		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this;
+			},
 			//获取字典列表
 			async getDic(){
 				var res = await this.$API.dic.list.get();
 				this.dic = res.data;
 			},
 			//表单提交方法
-			submit(callback){
-				this.$refs.dialogForm.validate((valid) => {
+			submit(){
+				this.$refs.dialogForm.validate(async (valid) => {
 					if (valid) {
-						callback(this.form)
-					}else{
-						return false;
+						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'})
+						}
 					}
 				})
 			},
diff --git a/src/views/setting/dic/index.vue b/src/views/setting/dic/index.vue
index 0565d11a..2b7eecab 100644
--- a/src/views/setting/dic/index.vue
+++ b/src/views/setting/dic/index.vue
@@ -61,21 +61,9 @@
 		</el-container>
 	</el-container>
 
-	<el-dialog :title="titleMap[dicMode]" v-model="dicDialogVisible" :width="330" 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>
+	<dic-dialog v-if="dialog.dic" ref="dicDialog" @success="handleDicSuccess" @closed="dialog.dic=false"></dic-dialog>
 
-	<el-dialog :title="titleMap[listMode]" v-model="listDialogVisible" :width="330" destroy-on-close>
-		<list-dialog ref="listDialog" :mode="listMode" :params="listDialogParams"></list-dialog>
-		<template #footer>
-			<el-button @click="listDialogVisible=false" >取 消</el-button>
-			<el-button type="primary" @click="saveList()" :loading="isListSaveing">保 存</el-button>
-		</template>
-	</el-dialog>
+	<list-dialog v-if="dialog.list" ref="listDialog" @success="handleListSuccess" @closed="dialog.list=false"></list-dialog>
 
 </template>
 
@@ -92,15 +80,11 @@
 		},
 		data() {
 			return {
-				showDicloading: true,
-				dicDialogVisible: false,
-				isDicSaveing: false,
-				dicMode: 'add',
-				titleMap: {
-					add: "新增",
-					edit: "编辑",
-					show: "查看"
+				dialog: {
+					dic: false,
+					info: false
 				},
+				showDicloading: true,
 				dicList: [],
 				dicFilterText: '',
 				dicProps: {
@@ -108,10 +92,6 @@
 				},
 				listApi: null,
 				listApiParams: {},
-				listDialogVisible: false,
-				listDialogParams: {},
-				isListSaveing: false,
-				listMode: 'add',
 				selection: []
 			}
 		},
@@ -150,59 +130,19 @@
 			},
 			//树增加
 			addDic(){
-				this.dicMode = 'add';
-				this.dicDialogVisible = true;
+				this.dialog.dic = true
+				this.$nextTick(() => {
+					this.$refs.dicDialog.open()
+				})
 			},
 			//编辑树
 			dicEdit(data){
-				this.dicMode = 'edit';
-				this.dicDialogVisible = true;
+				this.dialog.dic = true
 				this.$nextTick(() => {
 					var editNode = this.$refs.dic.getNode(data.id);
 					var editNodeParentId =  editNode.level==1?undefined:editNode.parent.data.id
 					data.parentId = editNodeParentId
-					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'){
-							formData.id = (Math.random() * (500 - 400 + 1) | 0) + 400;
-							if(this.dicList.length > 0){
-								this.$refs.table.upData({
-									code: formData.code
-								})
-							}else{
-								this.listApiParams = {
-									code: formData.code
-								}
-								this.listApi = this.$API.dic.info;
-							}
-							this.$refs.dic.append(formData, formData.parentId[0])
-							this.$refs.dic.setCurrentKey(formData.id)
-						}
-						if(this.dicMode == 'edit'){
-							var editNode = this.$refs.dic.getNode(formData.id);
-							//判断是否移动？
-							var editNodeParentId =  editNode.level==1?undefined:editNode.parent.data.id
-							if(editNodeParentId != formData.parentId){
-								var obj = editNode.data;
-								this.$refs.dic.remove(formData.id)
-								this.$refs.dic.append(obj, formData.parentId[0])
-							}
-							Object.assign(editNode.data, formData)
-						}
-						this.dicDialogVisible = false;
-						this.$message.success("操作成功")
-					}else{
-						this.$alert(res.message, "提示", {type: 'error'})
-					}
+					this.$refs.dicDialog.open('edit').setData(data)
 				})
 			},
 			//树点击事件
@@ -258,17 +198,20 @@
 			},
 			//添加明细
 			addInfo(){
-				var dicCurrentKey = this.$refs.dic.getCurrentKey();
-				this.listDialogParams = {code: dicCurrentKey};
-				this.listMode = 'add';
-				this.listDialogVisible = true;
+				this.dialog.list = true
+				this.$nextTick(() => {
+					var dicCurrentKey = this.$refs.dic.getCurrentKey();
+					const data = {
+						dic: dicCurrentKey
+					}
+					this.$refs.listDialog.open().setData(data)
+				})
 			},
 			//编辑明细
 			table_edit(row){
-				this.listMode = 'edit';
-				this.listDialogVisible = true;
+				this.dialog.list = true
 				this.$nextTick(() => {
-					this.$refs.listDialog.setData(row)
+					this.$refs.listDialog.open('edit').setData(row)
 				})
 			},
 			//删除明细
@@ -332,6 +275,45 @@
 					row.yx = val;
 					this.$message.success(`操作成功id:${row.id} val:${val}`)
 				}, 500)
+			},
+			//本地更新数据
+			handleDicSuccess(data, mode){
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					if(this.dicList.length > 0){
+						this.$refs.table.upData({
+							code: data.code
+						})
+					}else{
+						this.listApiParams = {
+							code: data.code
+						}
+						this.listApi = this.$API.dic.info;
+					}
+					this.$refs.dic.append(data, data.parentId[0])
+					this.$refs.dic.setCurrentKey(data.id)
+				}else if(mode=='edit'){
+					var editNode = this.$refs.dic.getNode(data.id);
+					//判断是否移动？
+					var editNodeParentId =  editNode.level==1?undefined:editNode.parent.data.id
+					if(editNodeParentId != data.parentId){
+						var obj = editNode.data;
+						this.$refs.dic.remove(data.id)
+						this.$refs.dic.append(obj, data.parentId[0])
+					}
+					Object.assign(editNode.data, data)
+				}
+			},
+			//本地更新数据
+			handleListSuccess(data, mode){
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					this.$refs.table.tableData.push(data)
+				}else if(mode=='edit'){
+					this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
+						Object.assign(item, data)
+					})
+				}
 			}
 		}
 	}
diff --git a/src/views/setting/dic/list.vue b/src/views/setting/dic/list.vue
index 121cea5d..d0c11e12 100644
--- a/src/views/setting/dic/list.vue
+++ b/src/views/setting/dic/list.vue
@@ -1,28 +1,38 @@
 <template>
-	<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
-		<el-form-item label="所属字典" prop="dic">
-			<el-cascader v-model="form.dic" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
-		</el-form-item>
-		<el-form-item label="项名称" prop="name">
-			<el-input v-model="form.name" clearable></el-input>
-		</el-form-item>
-		<el-form-item label="键值" prop="key">
-			<el-input v-model="form.key" clearable></el-input>
-		</el-form-item>
-		<el-form-item label="是否有效" prop="yx">
-			<el-switch v-model="form.yx" active-value="1" inactive-value="0"></el-switch>
-		</el-form-item>
-	</el-form>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="330" destroy-on-close @closed="$emit('closed')">
+		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
+			<el-form-item label="所属字典" prop="dic">
+				<el-cascader v-model="form.dic" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
+			</el-form-item>
+			<el-form-item label="项名称" prop="name">
+				<el-input v-model="form.name" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="键值" prop="key">
+				<el-input v-model="form.key" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="是否有效" prop="yx">
+				<el-switch v-model="form.yx" active-value="1" inactive-value="0"></el-switch>
+			</el-form-item>
+		</el-form>
+		<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 {
-		props: {
-			mode: { type: String, default: "add" },
-			params: { type: Object, default: () => {} }
-		},
+		emits: ['success', 'closed'],
 		data() {
 			return {
+				mode: "add",
+				titleMap: {
+					add: '新增项',
+					edit: '编辑项'
+				},
+				visible: false,
+				isSaveing: false,
 				form: {
 					id: "",
 					dic: "",
@@ -56,18 +66,31 @@
 			this.getDic()
 		},
 		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this;
+			},
 			//获取字典列表
 			async getDic(){
 				var res = await this.$API.dic.list.get();
 				this.dic = res.data;
 			},
 			//表单提交方法
-			submit(callback){
-				this.$refs.dialogForm.validate((valid) => {
+			submit(){
+				this.$refs.dialogForm.validate(async (valid) => {
 					if (valid) {
-						callback(this.form)
-					}else{
-						return false;
+						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'})
+						}
 					}
 				})
 			},