From 7c575c01cfd8493bee47e170edfbd839fd0d94d6 Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Thu, 8 Jul 2021 23:13:51 +0800
Subject: [PATCH] UP

---
 src/views/setting/client/index.vue | 56 ++----------------
 src/views/setting/client/save.vue  | 92 +++++++++++++++++++-----------
 src/views/setting/task/index.vue   | 36 ++++--------
 src/views/setting/task/save.vue    | 76 +++++++++++++++++-------
 4 files changed, 131 insertions(+), 129 deletions(-)

diff --git a/src/views/setting/client/index.vue b/src/views/setting/client/index.vue
index bf49a82c..0c6063d4 100644
--- a/src/views/setting/client/index.vue
+++ b/src/views/setting/client/index.vue
@@ -32,13 +32,7 @@
 		</el-main>
 	</el-container>
 
-	<el-dialog :title="titleMap[saveMode]" v-model="saveDialogVisible" :width="500" 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>
+	<save-dialog ref="saveDialog"></save-dialog>
 
 </template>
 
@@ -53,40 +47,17 @@
 		data(){
 			return {
 				apiObj: this.$API.app.list,
-				selection: [],
-				saveDialogVisible: false,
-				saveMode: 'add',
-				titleMap: {
-					add: "新增",
-					edit: "编辑",
-					show: "查看"
-				},
-				isSaveing: false,
+				selection: []
 			}
 		},
 		methods: {
 			add(){
-				this.saveMode = 'add';
-				this.saveDialogVisible = true;
+				this.$refs.saveDialog.show()
 			},
 			//编辑
 			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)
-				})
+				this.$refs.saveDialog.show('edit')
+				this.$refs.saveDialog.setData(row)
 			},
 			//删除
 			async table_del(row, index){
@@ -119,25 +90,10 @@
 
 				})
 			},
-			//提交
-			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;
-			},
+			}
 		}
 	}
 </script>
diff --git a/src/views/setting/client/save.vue b/src/views/setting/client/save.vue
index f10b2cec..9f69c622 100644
--- a/src/views/setting/client/save.vue
+++ b/src/views/setting/client/save.vue
@@ -1,35 +1,43 @@
 <template>
-	<el-form :model="form" :rules="rules" :disabled="mode=='show'" 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>
-		<el-form-item label="应用名称" prop="appName">
-			<el-input v-model="form.appName" clearable></el-input>
-		</el-form-item>
-		<el-form-item label="秘钥" prop="secret">
-			<el-input v-model="form.secret" clearable></el-input>
-		</el-form-item>
-		<el-form-item label="类型范围" prop="type">
-			<el-checkbox-group v-model="form.type">
-				<el-checkbox-button label="ALL"></el-checkbox-button>
-				<el-checkbox-button label="UPDATA"></el-checkbox-button>
-				<el-checkbox-button label="QUERY"></el-checkbox-button>
-				<el-checkbox-button label="INSERT"></el-checkbox-button>
-			</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-form-item>
-	</el-form>
+	<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-item label="应用标识" prop="appId">
+				<el-input v-model="form.appId" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="应用名称" prop="appName">
+				<el-input v-model="form.appName" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="秘钥" prop="secret">
+				<el-input v-model="form.secret" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="类型范围" prop="type">
+				<el-checkbox-group v-model="form.type">
+					<el-checkbox-button label="ALL"></el-checkbox-button>
+					<el-checkbox-button label="UPDATA"></el-checkbox-button>
+					<el-checkbox-button label="QUERY"></el-checkbox-button>
+					<el-checkbox-button label="INSERT"></el-checkbox-button>
+				</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-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" }
-		},
 		data() {
 			return {
+				mode: "add",
+				titleMap: {
+					add: '新增APP',
+					edit: '编辑APP'
+				},
 				//表单数据
 				form: {
 					id:"",
@@ -57,30 +65,48 @@
 						{required: true, message: '请选择授权到期日期'}
 					]
 				},
+				visible: false,
+				isSaveing: false,
+				pData: {}
 			}
 		},
 		methods: {
+			//显示
+			show(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				this.form = this.$options.data().form
+			},
 			//表单提交方法
-			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.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'})
+						}
 					}
 				})
 			},
 			//表单注入数据
 			setData(data){
+				this.pData = data
 				this.form.id = data.id
 				this.form.appId = data.appId
 				this.form.appName = data.appName
 				this.form.secret = data.secret
 				this.form.type = data.type
 				this.form.exp = data.exp
-
-				//可以和上面一样单个注入，也可以像下面一样直接合并进去
-				//Object.assign(this.form, data)
 			}
 		}
 	}
diff --git a/src/views/setting/task/index.vue b/src/views/setting/task/index.vue
index 20a49947..eb9754d1 100644
--- a/src/views/setting/task/index.vue
+++ b/src/views/setting/task/index.vue
@@ -1,10 +1,10 @@
 <!--
  * @Descripttion: 系统计划任务配置
- * @version: 1.0
+ * @version: 1.1
  * @Author: sakuya
  * @Date: 2021年7月7日09:28:32
- * @LastEditors:
- * @LastEditTime:
+ * @LastEditors: sakuya
+ * @LastEditTime: 2021年7月8日22:15:13
 -->
 
 <template>
@@ -57,13 +57,7 @@
 		</el-row>
 	</el-main>
 
-	<el-dialog title="计划任务" v-model="saveDialogVisible" :width="400" destroy-on-close>
-		<save-dialog ref="saveDialog"></save-dialog>
-		<template #footer>
-			<el-button @click="saveDialogVisible=false" >取 消</el-button>
-			<el-button type="primary" @click="saveForm()" :loading="isSaveing">保 存</el-button>
-		</template>
-	</el-dialog>
+	<save-dialog ref="saveDialog"></save-dialog>
 
 	<el-drawer title="计划任务日志" v-model="logsVisible" :size="600" direction="rtl" destroy-on-close>
 		<logs></logs>
@@ -80,11 +74,14 @@
 			saveDialog,
 			logs
 		},
+		provide() {
+			return {
+				list: this.list
+			}
+		},
 		data() {
 			return {
-				saveDialogVisible: false,
 				logsVisible: false,
-				isSaveing: false,
 				list: [
 					{
 						id: "1",
@@ -115,13 +112,11 @@
 		},
 		methods: {
 			add(){
-				this.saveDialogVisible = true;
+				this.$refs.saveDialog.show()
 			},
 			edit(task){
-				this.saveDialogVisible = true;
-				this.$nextTick(() => {
-					this.$refs.saveDialog.setData(task)
-				})
+				this.$refs.saveDialog.show('edit')
+				this.$refs.saveDialog.setData(task)
 			},
 			del(task){
 				this.$confirm(`确认删除 ${task.title} 计划任务吗？`,'提示', {
@@ -139,13 +134,6 @@
 			},
 			run(task){
 				this.$message.success(`已成功执行计划任务：${task.title}`)
-			},
-			saveForm(){
-				this.$refs.saveDialog.submit((formData) => {
-					console.log(formData)
-					this.$message.success("操作成功")
-					this.saveDialogVisible = false;
-				})
 			}
 		}
 	}
diff --git a/src/views/setting/task/save.vue b/src/views/setting/task/save.vue
index 4891000d..bfa9992a 100644
--- a/src/views/setting/task/save.vue
+++ b/src/views/setting/task/save.vue
@@ -1,33 +1,45 @@
 <!--
  * @Descripttion: 系统计划任务配置
- * @version: 1.0
+ * @version: 1.1
  * @Author: sakuya
  * @Date: 2021年7月7日09:28:32
- * @LastEditors:
- * @LastEditTime:
+ * @LastEditors: sakuya
+ * @LastEditTime: 2021年7月8日22:15:13
 -->
 
 <template>
-	<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
-		<el-form-item label="描述" prop="title">
-			<el-input v-model="form.title" clearable></el-input>
-		</el-form-item>
-		<el-form-item label="执行类" prop="handler">
-			<el-input v-model="form.handler" clearable></el-input>
-		</el-form-item>
-		<el-form-item label="定时规则" prop="cron">
-			<el-input v-model="form.cron" clearable></el-input>
-		</el-form-item>
-		<el-form-item label="状态" prop="state">
-			<el-switch v-model="form.state" active-value="1" inactive-value="-1"></el-switch>
-		</el-form-item>
-	</el-form>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="400" destroy-on-close>
+		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
+			<el-form-item label="描述" prop="title">
+				<el-input v-model="form.title" placeholder="计划任务标题" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="执行类" prop="handler">
+				<el-input v-model="form.handler" placeholder="计划任务执行类名称" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="定时规则" prop="cron">
+				<el-input v-model="form.cron" placeholder="请输入Cron定时规则" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="是否启用" prop="state">
+				<el-switch v-model="form.state" active-value="1" inactive-value="-1"></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 {
+		inject: ['list'],
 		data() {
 			return {
+				mode: "add",
+				titleMap: {
+					add: '新增计划任务',
+					edit: '编辑计划任务'
+				},
 				form: {
 					id:"",
 					title: "",
@@ -45,20 +57,40 @@
 					cron:[
 						{required: true, message: '请填写定时规则'}
 					]
-				}
+				},
+				visible: false,
+				isSaveing: false,
 			}
 		},
 		mounted() {
 
 		},
 		methods: {
+			//显示
+			show(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				this.form = this.$options.data().form
+			},
 			//表单提交方法
-			submit(callback){
+			submit(){
 				this.$refs.dialogForm.validate((valid) => {
 					if (valid) {
-						callback(this.form)
-					}else{
-						return false;
+						this.isSaveing = true;
+						setTimeout(()=>{
+							this.isSaveing = false;
+							this.visible = false;
+							this.$message.success("操作成功")
+							if(this.mode == 'add'){
+								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)
 					}
 				})
 			},