30-更新用户信息并且刷新表格

下面我们需要实现的功能是，点击编辑弹框的确定就调用更新接口，然后成功之后刷新列表获取新数据

首先我们把公共抽离的用户数据类型补充完整

interface AdminObjItf {
    id?: number
    username?: string
    nickName?: string
    email?: string
    password?: string
    note?: string
    status?: number
}

然后我们新增接口

import request from './request'

interface ManageResponse<T = null> {
    code: number
    message: string
    data: T
}

type PromiseResponse<T = {}> = Promise<ManageResponse<T>>

interface AdminListParams {
    keyword: string
    pageNum: number
    pageSize: number
}

interface AdminListResponse {
    list: {}[]
    pageNum: number
    pageSize: number
    total: number
    totalPage: number
}

// 获取用户数据列表
export const getAdminListApi = (data: AdminListParams):PromiseResponse<AdminListResponse> => {
    return request.get('/admin/list', {
        params: data
    })
}
// 修改指定用户信息
export const updateAdmin = (id: number, data: AdminObjItf):PromiseResponse => {
    return request.post('/admin/update/' + id, data)
}

接着对这个接口进行实现，我们抽离一下列表的数据到 mock/data/admin-list.json

[
  {
    "createTime": "2018-09-29T05:55:39.000+00:00",
    "email": "kaimo313@foxmail.com",
    "icon": "",
    "id": 1,
    "loginTime": "2018-09-29T05:55:39.000+00:00",
    "nickName": "超级管理员",
    "note": "超级管理员",
    "password": "123456",
    "status": 1,
    "username": "admin"
  },
  {
    "createTime": "2018-09-29T05:55:39.000+00:00",
    "email": "112@qq.com",
    "icon": "",
    "id": 2,
    "loginTime": "2018-09-29T05:55:39.000+00:00",
    "nickName": "凯小默",
    "note": "凯小默的笔记666",
    "password": "123456",
    "status": 0,
    "username": "kaimo313"
  }
]

我们通过去读取这个json文件，然后去修改这个json文件实现数据的更新，接口的mock实现如下，

import { type MockMethod } from 'vite-plugin-mock'
import fs from 'fs'
import path from 'path'

import { validateToken } from '../utils'

const dataFile = path.join(process.cwd(), 'src/mock/data/admin-list.json')

const readAdmins = () => {
    try {
        const raw = fs.readFileSync(dataFile, 'utf-8')
        return JSON.parse(raw) as Array<Record<string, any>>
    } catch (e) {
        console.error('读取用户数据失败', e)
        return []
    }
}

const writeAdmins = (list: Array<Record<string, any>>) => {
    fs.writeFileSync(dataFile, JSON.stringify(list, null, 2), 'utf-8')
}

export default [
    {
        url: '/api/admin/list',
        method: 'get',
        response: ({ headers }: { headers: Record<string, string> }) => {
            const tokenCheck = validateToken(headers)
            if (!tokenCheck.valid) {
                return tokenCheck.response
            }

            const adminList = readAdmins()
            const pageSize = 10
            const pageNum = 1
            const total = adminList.length
            const totalPage = Math.max(1, Math.ceil(total / pageSize))

            return {
                code: 200,
                message: '获取用户数据列表',
                data: {
                    list: adminList,
                    pageNum,
                    pageSize,
                    total,
                    totalPage
                }
            }
        }
    },
    {
        url: '/api/admin/update/:id',
        method: 'post',
        response: (options: {
            headers: Record<string, string>
            body: Record<string, unknown>
            url: string
        }) => {
            const { headers, body, url } = options
            const tokenCheck = validateToken(headers)
            if (!tokenCheck.valid) {
                return tokenCheck.response
            }

            const adminList = readAdmins()
            const id = Number((url.match(/\/api\/admin\/update\/(\d+)/) || [])[1])
            const target = adminList.find(item => item.id === id)

            if (!target) {
                return {
                    code: 404,
                    message: '未找到对应的用户',
                    data: null
                }
            }

            // 合并更新，同时保留原有的 id
            Object.assign(target, body, { id: target.id })
            writeAdmins(adminList)

            return {
                code: 200,
                message: '修改用户信息成功',
                data: target
            }
        }
    }
] as MockMethod[]

最后在页面里实现这个效果

<template>
    <div class=''>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号"/>
            <el-table-column prop="username" label="账号"/>
            <el-table-column prop="nickName" label="姓名"/>
            <el-table-column prop="email" label="邮箱"/>
            <el-table-column label="添加时间">
                <template v-slot:default="scope">
                    {{ formateDate(scope.row.createTime) }}
                </template>
            </el-table-column>
            <el-table-column label="最后登录">
                <template v-slot:default="scope">
                    {{ formateDate(scope.row.loginTime) }}
                </template>
            </el-table-column>
            <el-table-column label="是否启用">
                <template v-slot:default="scope">
                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{row}">
                    <el-button type="text">分配角色</el-button>
                    <el-button type="text" @click="editAdmin(row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 编辑 -->
        <EditAdmin v-model:visible="visible" :form="rowData" @sure="getTableData"></EditAdmin>
    </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs } from 'vue'
import { getAdminListApi } from '@/api/ums'
import { ElMessage } from 'element-plus'
import EditAdmin from './components/EditAdmin.vue'

const state = reactive<{
    tableData: {}[]
    visible: boolean,
    rowData: AdminObjItf
}>({
    tableData: [],
    visible: false,
    rowData: {}
})

let { tableData, visible, rowData } = toRefs(state)
const getTableData = () => {
    getAdminListApi({
        keyword: '',
        pageNum: 1,
        pageSize: 10
    }).then((res) => {
        if(res.code === 200) {
            tableData.value = res.data.list
        } else {
            ElMessage.error('获取用户数据列表失败')
        }
    })
}
getTableData();

const addZero = (num: number) => {
    return num > 9 ? num : '0' + num
}

// 格式化时间
const formateDate = (time: string | undefined) => {
    if (!time) return '';
    const date = new Date(time);
    const year = date.getFullYear();
    let month = addZero(date.getMonth() + 1);
    let day = addZero(date.getDate());
    let hour = addZero(date.getHours());
    let min = addZero(date.getMinutes());
    let sec = addZero(date.getSeconds());
    return  `${year}-${month}-${day} ${hour}:${min}:${sec}`
}

// 点击编辑按钮
const editAdmin = (row: AdminObjItf) => {
    visible.value = true
    rowData.value = row
}

</script>

<style lang='less' scoped>

</style>

<template>
    <el-dialog v-model="dialogVisible" title="编辑用户信息" width="500" :before-close="close">
        <el-form :model="newForm" label-width="120px">
            <el-form-item label="账号">
                <el-input v-model="newForm.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="newForm.nickName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="newForm.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="newForm.password" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="newForm.note" type="textarea" autocomplete="off" />
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio v-model="newForm.status" :label="1">是</el-radio>
                <el-radio v-model="newForm.status" :label="0">否</el-radio>
            </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="modifyAdmin">确定</el-button>
        </div>
        </template>
    </el-dialog>
</template>

<script lang='ts' setup>
import { computed, reactive, toRefs, watch } from 'vue'
import { updateAdmin } from '@/api/ums'
import { ElMessage } from 'element-plus'

const props = defineProps<{
    visible: boolean,
    form: AdminObjItf
}>()

const state = reactive<{
    newForm: AdminObjItf
}>({
    newForm: {}
})

const { newForm } = toRefs(state)
// 拷贝form
watch(() => props.form, () => {
    newForm.value = { ...props.form }
})

const emit = defineEmits<{
    (event: 'update:visible', value: boolean): void
    (event: 'sure'): void
}>()

// 双向绑定 dialog 显示状态（emit 更新父组件）
const dialogVisible = computed({
    get: () => props.visible,
    set: (val: boolean) => emit('update:visible', val)
})
// 点击关闭
const close = () => {
    dialogVisible.value = false
}
// 确定
const modifyAdmin = () => {
    if(!newForm.value.id) return
    updateAdmin(newForm.value.id, newForm.value).then((res) => {
    if(res.code === 200) {
        close()
        emit('sure')
        ElMessage.success('修改指定用户信息成功')
    } else {
        ElMessage.error('修改指定用户信息失败')
    }
})
}

</script>

<style lang='less' scoped>

</style>