types: 优化表格数据类型

This commit is contained in:
pany 2023-02-28 14:13:45 +08:00
parent 5d641ace1f
commit 4a58eb8e03
3 changed files with 20 additions and 16 deletions

View File

@ -14,20 +14,23 @@ export interface IGetTableRequestData {
currentPage: number currentPage: number
/** 查询条数 */ /** 查询条数 */
size: number size: number
/** 查询参数 */ /** 查询参数:用户名 */
username?: string username?: string
/** 查询参数:手机号 */
phone?: string phone?: string
} }
export interface IGetTableData {
createTime: string
email: string
id: string
phone: string
roles: string
status: boolean
username: string
}
export type GetTableResponseData = IApiResponseData<{ export type GetTableResponseData = IApiResponseData<{
list: { list: IGetTableData[]
createTime: string
email: string
id: string
phone: string
roles: string
status: boolean
username: string
}[]
total: number total: number
}> }>

View File

@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref, watch } from "vue" import { reactive, ref, watch } from "vue"
import { createTableDataApi, deleteTableDataApi, updateTableDataApi, getTableDataApi } from "@/api/table" import { createTableDataApi, deleteTableDataApi, updateTableDataApi, getTableDataApi } from "@/api/table"
import { type IGetTableData } from "@/api/table/types/table"
import { type FormInstance, type FormRules, ElMessage, ElMessageBox } from "element-plus" import { type FormInstance, type FormRules, ElMessage, ElMessageBox } from "element-plus"
import { Search, Refresh, CirclePlus, Delete, Download, RefreshRight } from "@element-plus/icons-vue" import { Search, Refresh, CirclePlus, Delete, Download, RefreshRight } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination" import { usePagination } from "@/hooks/usePagination"
@ -58,7 +59,7 @@ const resetForm = () => {
//#endregion //#endregion
//#region //#region
const handleDelete = (row: any) => { const handleDelete = (row: IGetTableData) => {
ElMessageBox.confirm(`正在删除用户:${row.username},确认删除?`, "提示", { ElMessageBox.confirm(`正在删除用户:${row.username},确认删除?`, "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
@ -74,16 +75,15 @@ const handleDelete = (row: any) => {
//#region //#region
const currentUpdateId = ref<undefined | string>(undefined) const currentUpdateId = ref<undefined | string>(undefined)
const handleUpdate = (row: any) => { const handleUpdate = (row: IGetTableData) => {
currentUpdateId.value = row.id currentUpdateId.value = row.id
formData.username = row.username formData.username = row.username
formData.password = row.password
dialogVisible.value = true dialogVisible.value = true
} }
//#endregion //#endregion
//#region //#region
const tableData = ref<any[]>([]) const tableData = ref<IGetTableData[]>([])
const searchFormRef = ref<FormInstance | null>(null) const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({ const searchData = reactive({
username: "", username: "",
@ -212,7 +212,7 @@ watch([() => paginationData.currentPage, () => paginationData.pageSize], getTabl
<el-form-item prop="username" label="用户名"> <el-form-item prop="username" label="用户名">
<el-input v-model="formData.username" placeholder="请输入" /> <el-input v-model="formData.username" placeholder="请输入" />
</el-form-item> </el-form-item>
<el-form-item prop="password" label="密码"> <el-form-item prop="password" label="密码" v-if="currentUpdateId === undefined">
<el-input v-model="formData.password" placeholder="请输入" /> <el-input v-model="formData.password" placeholder="请输入" />
</el-form-item> </el-form-item>
</el-form> </el-form>

View File

@ -2,6 +2,7 @@
import { nextTick, reactive, ref } from "vue" import { nextTick, reactive, ref } from "vue"
import { type ElMessageBoxOptions, ElMessageBox, ElMessage } from "element-plus" import { type ElMessageBoxOptions, ElMessageBox, ElMessage } from "element-plus"
import { deleteTableDataApi, getTableDataApi } from "@/api/table" import { deleteTableDataApi, getTableDataApi } from "@/api/table"
import { type GetTableResponseData } from "@/api/table/types/table"
import RoleColumnSolts from "./tsx/RoleColumnSolts" import RoleColumnSolts from "./tsx/RoleColumnSolts"
import StatusColumnSolts from "./tsx/StatusColumnSolts" import StatusColumnSolts from "./tsx/StatusColumnSolts"
import { import {
@ -142,7 +143,7 @@ const xGridOpt: VxeGridProps = reactive({
let total = 0 let total = 0
let result: IRowMeta[] = [] let result: IRowMeta[] = []
/** 加载数据 */ /** 加载数据 */
const callback = (res: any) => { const callback = (res: GetTableResponseData) => {
if (res && res.data) { if (res && res.data) {
const resData = res.data const resData = res.data
// //