refactor: 增强 element plus table 示例代码的通用性

src/views/table/element-plus/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { reactive, ref, watch, nextTick } from "vue"
+import { reactive, ref, watch } from "vue"
 import { createTableDataApi, deleteTableDataApi, updateTableDataApi, getTableDataApi } from "@/api/table"
-import { type GetTableData } from "@/api/table/types/table"
+import { type CreateOrUpdateTableRequestData, type GetTableData } from "@/api/table/types/table"
 import { type FormInstance, type FormRules, ElMessage, ElMessageBox } from "element-plus"
 import { Search, Refresh, CirclePlus, Delete, Download, RefreshRight } from "@element-plus/icons-vue"
 import { usePagination } from "@/hooks/usePagination"
@@ -15,25 +15,24 @@ const loading = ref<boolean>(false)
 const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
 
 //#region 增
-const dialogVisible = ref<boolean>(false)
-const formRef = ref<FormInstance | null>(null)
-const formData = reactive({
+const DEFAULT_FORM_DATA: CreateOrUpdateTableRequestData = {
+  id: undefined,
   username: "",
   password: ""
-})
-const formRules: FormRules = reactive({
+}
+const dialogVisible = ref<boolean>(false)
+const formRef = ref<FormInstance | null>(null)
+const formData = ref<CreateOrUpdateTableRequestData>(JSON.parse(JSON.stringify(DEFAULT_FORM_DATA)))
+const formRules: FormRules<CreateOrUpdateTableRequestData> = {
   username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
   password: [{ required: true, trigger: "blur", message: "请输入密码" }]
-})
+}
 const handleCreateOrUpdate = () => {
   formRef.value?.validate((valid: boolean, fields) => {
     if (!valid) return console.error("表单校验不通过", fields)
     loading.value = true
-    const api = currentUpdateId.value === undefined ? createTableDataApi : updateTableDataApi
-    api({
-      id: currentUpdateId.value,
-      ...formData
-    })
+    const api = formData.value.id === undefined ? createTableDataApi : updateTableDataApi
+    api(formData.value)
       .then(() => {
         ElMessage.success("操作成功")
         dialogVisible.value = false
@@ -45,8 +44,8 @@ const handleCreateOrUpdate = () => {
   })
 }
 const resetForm = () => {
-  currentUpdateId.value = undefined
-  formRef.value?.resetFields()
+  formRef.value?.clearValidate()
+  formData.value = JSON.parse(JSON.stringify(DEFAULT_FORM_DATA))
 }
 //#endregion
 
@@ -66,14 +65,9 @@ const handleDelete = (row: GetTableData) => {
 //#endregion
 
 //#region 改
-const currentUpdateId = ref<undefined | string>(undefined)
 const handleUpdate = (row: GetTableData) => {
   dialogVisible.value = true
-  // 必须延迟赋值，防止 resetFields 方法将数据重置错误
-  nextTick(() => {
-    currentUpdateId.value = row.id
-    formData.username = row.username
-  })
+  formData.value = JSON.parse(JSON.stringify(row))
 }
 //#endregion
 
@@ -92,9 +86,9 @@ const getTableData = () => {
     username: searchData.username || undefined,
     phone: searchData.phone || undefined
   })
-    .then((res) => {
-      paginationData.total = res.data.total
-      tableData.value = res.data.list
+    .then(({ data }) => {
+      paginationData.total = data.total
+      tableData.value = data.list
     })
     .catch(() => {
       tableData.value = []
@@ -190,15 +184,15 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
     <!-- 新增/修改 -->
     <el-dialog
       v-model="dialogVisible"
-      :title="currentUpdateId === undefined ? '新增用户' : '修改用户'"
+      :title="formData.id === undefined ? '新增用户' : '修改用户'"
       @closed="resetForm"
       width="30%"
     >
       <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
         <el-form-item prop="username" label="用户名">
           <el-input v-model="formData.username" placeholder="请输入" />
         </el-form-item>
-        <el-form-item prop="password" label="密码" v-if="currentUpdateId === undefined">
+        <el-form-item prop="password" label="密码" v-if="formData.id === undefined">
           <el-input v-model="formData.password" placeholder="请输入" />
         </el-form-item>
       </el-form>