From f5339314b8230717796b7d84b9bb18a3a79d9b5f Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Mon, 22 Jan 2024 22:38:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E5=86=99=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=20table=20=E7=A4=BA=E4=BE=8B=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=EF=BC=8C=E4=BD=BF=E9=80=BB=E8=BE=91=E6=9B=B4=E5=8A=A0=E6=B8=85?=
 =?UTF-8?q?=E6=99=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/table/index.ts                 |  4 +-
 src/api/table/types/table.ts           |  9 +---
 src/views/table/element-plus/index.vue | 59 +++++++++++---------------
 3 files changed, 29 insertions(+), 43 deletions(-)

diff --git a/src/api/table/index.ts b/src/api/table/index.ts
index 90eda40..0267c1e 100644
--- a/src/api/table/index.ts
+++ b/src/api/table/index.ts
@@ -2,7 +2,7 @@ import { request } from "@/utils/service"
 import type * as Table from "./types/table"
 
 /** 增 */
-export function createTableDataApi(data: Table.CreateTableRequestData) {
+export function createTableDataApi(data: Table.CreateOrUpdateTableRequestData) {
   return request({
     url: "table",
     method: "post",
@@ -19,7 +19,7 @@ export function deleteTableDataApi(id: string) {
 }
 
 /** 改 */
-export function updateTableDataApi(data: Table.UpdateTableRequestData) {
+export function updateTableDataApi(data: Table.CreateOrUpdateTableRequestData) {
   return request({
     url: "table",
     method: "put",
diff --git a/src/api/table/types/table.ts b/src/api/table/types/table.ts
index b42bcbe..7ab6345 100644
--- a/src/api/table/types/table.ts
+++ b/src/api/table/types/table.ts
@@ -1,10 +1,5 @@
-export interface CreateTableRequestData {
-  username: string
-  password: string
-}
-
-export interface UpdateTableRequestData {
-  id: string
+export interface CreateOrUpdateTableRequestData {
+  id?: string
   username: string
   password?: string
 }
diff --git a/src/views/table/element-plus/index.vue b/src/views/table/element-plus/index.vue
index fecfb30..31cef8b 100644
--- a/src/views/table/element-plus/index.vue
+++ b/src/views/table/element-plus/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { reactive, ref, watch } from "vue"
+import { reactive, ref, watch, nextTick } from "vue"
 import { createTableDataApi, deleteTableDataApi, updateTableDataApi, getTableDataApi } from "@/api/table"
 import { type GetTableData } from "@/api/table/types/table"
 import { type FormInstance, type FormRules, ElMessage, ElMessageBox } from "element-plus"
@@ -25,40 +25,28 @@ const formRules: FormRules = reactive({
   username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
   password: [{ required: true, trigger: "blur", message: "请输入密码" }]
 })
-const handleCreate = () => {
+const handleCreateOrUpdate = () => {
   formRef.value?.validate((valid: boolean, fields) => {
-    if (valid) {
-      if (currentUpdateId.value === undefined) {
-        createTableDataApi(formData)
-          .then(() => {
-            ElMessage.success("新增成功")
-            getTableData()
-          })
-          .finally(() => {
-            dialogVisible.value = false
-          })
-      } else {
-        updateTableDataApi({
-          id: currentUpdateId.value,
-          username: formData.username
-        })
-          .then(() => {
-            ElMessage.success("修改成功")
-            getTableData()
-          })
-          .finally(() => {
-            dialogVisible.value = false
-          })
-      }
-    } else {
-      console.error("表单校验不通过", fields)
-    }
+    if (!valid) return console.error("表单校验不通过", fields)
+    loading.value = true
+    const api = currentUpdateId.value === undefined ? createTableDataApi : updateTableDataApi
+    api({
+      id: currentUpdateId.value,
+      ...formData
+    })
+      .then(() => {
+        ElMessage.success("操作成功")
+        dialogVisible.value = false
+        getTableData()
+      })
+      .finally(() => {
+        loading.value = false
+      })
   })
 }
 const resetForm = () => {
   currentUpdateId.value = undefined
-  formData.username = ""
-  formData.password = ""
+  formRef.value?.resetFields()
 }
 //#endregion
 
@@ -80,9 +68,12 @@ const handleDelete = (row: GetTableData) => {
 //#region 改
 const currentUpdateId = ref<undefined | string>(undefined)
 const handleUpdate = (row: GetTableData) => {
-  currentUpdateId.value = row.id
-  formData.username = row.username
   dialogVisible.value = true
+  // 必须延迟赋值，防止 resetFields 方法将数据重置错误
+  nextTick(() => {
+    currentUpdateId.value = row.id
+    formData.username = row.username
+  })
 }
 //#endregion
 
@@ -200,7 +191,7 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
     <el-dialog
       v-model="dialogVisible"
       :title="currentUpdateId === undefined ? '新增用户' : '修改用户'"
-      @close="resetForm"
+      @closed="resetForm"
       width="30%"
     >
       <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
@@ -213,7 +204,7 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
       </el-form>
       <template #footer>
         <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleCreate">确认</el-button>
+        <el-button type="primary" @click="handleCreateOrUpdate" :loading="loading">确认</el-button>
       </template>
     </el-dialog>
   </div>