开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详情

写在前面

上篇文章介绍了如何在vite+vue项目的后台系统中写编辑，本篇文章介绍如何在vite+vue项目的后台系统中写删除和查看详情

账号：admin
密码：admin

删除

点击删除按钮，显示删除的提示框，提示内容为：“是否确定删除用户：姓名（用户名）？”，点击确定则删除该用户，点击取消则取消删除，提示框使用element-plus的组件，在src\views\SystemSet\UserManage\index.vue中的相关代码如下：

import { getUser, postUser, putUser, deleteUser } from '@/api/SystemSet/UserManage'
import { ElMessage, ElMessageBox } from "element-plus";

...
const handleDel = (row: any) => {
    ElMessageBox.confirm(
        `确定删除用户：${row.realName}（${row.userName}）?`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteUser(row).then((res: any) => {
                getTableData()
                ElMessage({
                    type: 'success',
                    message: res.msg,
                })
            })
        })
}

同样，是在src\api\SystemSet\UserManage.ts中模拟的删除接口，简单的js代码实现的前端删除，和后端对接后走接口就可以了：

/**
 * 删除用户
 * @method deleteUser
 */

export const deleteUser = (data: any) => {
    //模拟接口
    return new Promise((resolve, reject) => {
        let findIndex = userList.findIndex(el => el.id === data.id)
        if (findIndex !== -1) {
            userList.splice(findIndex, 1)
            resolve({
                code: 0,
                msg: '删除成功！'
            })
        }
    })
};

查看详情

查看详情用el-dialog组件做，定义一个lookInfoShow来控制详情页的打开和关闭，lookItem传递到详情页用于查看详情接口传参，src\views\SystemSet\UserManage\index.vue相关代码如下：

    <el-dialog v-model="lookInfoShow" v-if="lookInfoShow" title="用户详情" width="960px">
        <look-info :lookItem="lookItem"></look-info>
    </el-dialog>
    ...
import LookInfo from './LookInfo.vue'
...
const handleLook = (row: any) => {
    lookInfoShow.value = true
    lookItem.value = row
}

上面引入了LookInfo组件，所以我们新建一个LookInfo.vue文件，在该文件内写用户详情的代码，依旧是走查看详情的接口（getUserDetail）获取用户信息，获取后将用户信息展示出来即可：

<template>
    <div class="info_ul">
        <div class="info_li" v-for="(item, index) in userInfo" :key="index">
            <div class="label">{{ item.label }}：</div>
            <div class="val">{{ item.val}}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getUserDetail } from '@/api/SystemSet/UserManage'
import { onMounted, reactive, ref } from 'vue';

const props = defineProps({
    lookItem: {}
})

onMounted(() => {
    if (props.lookItem) {
        getLookInfo()
    }
})

let userInfo = ref([{ label: '用户名', val: '' },
{ label: '姓名', val: '' },
{ label: '部门', val: '' },
{ label: '手机号', val: '' },
{ label: '性别', val: '' },
{ label: '岗位', val: '' },
{ label: '角色', val: '' },])

const getLookInfo = () => {
    getUserDetail(props.lookItem).then((res: any) => {
        userInfo.value = [
            { label: '用户名', val: res.data.userName },
            { label: '姓名', val: res.data.realName },
            { label: '部门', val: res.data.orgName },
            { label: '手机号', val: res.data.mobile },
            { label: '性别', val: res.data.gender === 1 ? '女' : '男' },
            { label: '岗位', val: res.data.post },
            { label: '角色', val: res.data.roleNameList.join(',') },
        ]
    })
}

</script>

<style lang="less" scoped>
.info_ul {
    display: flex;
    flex-wrap: wrap;

    .info_li {
        flex: 0 0 300px;
        display: flex;
        padding-bottom: 20px;

        .label {
            width: 80px;
            text-align: right;
            color: #999;
        }

        .val {
            width: 220px;
            color: #333;
        }
    }
}
</style>

写在最后

以上就是在后台系统中写删除和查看详情的代码和说明

vite+vue项目之后台系统写删除和查看详情

写在前面

删除

查看详情

写在最后