wzp/v3-admin-vite
Template
1
0
Fork 0
mirror of https://github.com/un-pany/v3-admin-vite.git synced 2025-04-20 19:09:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
pany 2024-02-03 16:07:17 +08:00
parent 7f067b111b
commit 47e83913e1
1 changed files with 20 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/table/element-plus/index.vue
View File

@ -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>