diff --git a/src/views/table/element-plus/index.vue b/src/views/table/element-plus/index.vue index 31cef8b..e971fcd 100644 --- a/src/views/table/element-plus/index.vue +++ b/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,7 +184,7 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl <!-- 新增/修改 --> <el-dialog v-model="dialogVisible" - :title="currentUpdateId === undefined ? '新增用户' : '修改用户'" + :title="formData.id === undefined ? '新增用户' : '修改用户'" @closed="resetForm" width="30%" > @@ -198,7 +192,7 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl <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>