refactor: 重写部分 table 示例代码，使逻辑更加清晰

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",

src/api/table/types/table.ts

@@ -1,10 +1,5 @@
-export interface CreateTableRequestData {
+export interface CreateOrUpdateTableRequestData {
-  username: string
+  id?: string
-  password: string
-}
-
-export interface UpdateTableRequestData {
-  id: string
   username: string
   password?: string
 }

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 (!valid) return console.error("表单校验不通过", fields)
-      if (currentUpdateId.value === undefined) {
+    loading.value = true
-        createTableDataApi(formData)
+    const api = currentUpdateId.value === undefined ? createTableDataApi : updateTableDataApi
-          .then(() => {
+    api({
-            ElMessage.success("新增成功")
-            getTableData()
-          })
-          .finally(() => {
-            dialogVisible.value = false
-          })
-      } else {
-        updateTableDataApi({
       id: currentUpdateId.value,
-          username: formData.username
+      ...formData
     })
       .then(() => {
-            ElMessage.success("修改成功")
+        ElMessage.success("操作成功")
+        dialogVisible.value = false
         getTableData()
       })
       .finally(() => {
-            dialogVisible.value = false
+        loading.value = false
       })
-      }
-    } else {
-      console.error("表单校验不通过", fields)
-    }
   })
 }
 const resetForm = () => {
   currentUpdateId.value = undefined
-  formData.username = ""
+  formRef.value?.resetFields()
-  formData.password = ""
 }
 //#endregion
 
@@ -80,9 +68,12 @@ const handleDelete = (row: GetTableData) => {
 //#region 改
 const currentUpdateId = ref<undefined | string>(undefined)
 const handleUpdate = (row: GetTableData) => {
+  dialogVisible.value = true
+  // 必须延迟赋值，防止 resetFields 方法将数据重置错误
+  nextTick(() => {
     currentUpdateId.value = row.id
     formData.username = row.username
-  dialogVisible.value = true
+  })
 }
 //#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>