vue3后台管理系统封装增删改查操作 欢迎大家提意见(vue3也是边用边学)

在view里面调用

import { defineComponent, ref, reactive } from 'vue'
import Table from '@/components/table/index.vue'
import Layer from './layer.vue'
import {base} from "@/utils/base";
import { Plus, Search, Delete } from '@element-plus/icons'
export default defineComponent({
    name: 'crudTable',
    components: {
        Table,
        Layer
    },
    setup() {
        const baseData = base('user')
        const page = baseData.page
        const layer = baseData.layer
        const query = baseData.query
        const loading = baseData.loading
        const chooseData = baseData.chooseData
        const tableData = baseData.tableData
        const handleSelectionChange = baseData.handleSelectionChange
  const getTableData = baseData.getTableData
  const handleDel = baseData.handleDel
  const handleAdd = baseData.handleAdd
  const handleEdit = baseData.handleEdit
  return{
            Plus,
            Search,
            Delete,
            query,
            layer,
            page,
            loading,
            tableData,
            chooseData,
            handleSelectionChange,
            getTableData,
            handleDel,
            handleAdd,
            handleEdit
        }
    }
})

封装的base.js

import {ref, reactive } from 'vue'
import http from '../utils/http.js'
import {radioData, selectData} from "../views/pages/crudTable/enum";
import {ElMessage} from "element-plus";

export const base = (siteName,pageData = []) =>{
    const site = siteName
    const query = reactive({
        input: ''
    })
    // 弹窗控制器
    const layer = reactive({
        show: false,
        title: '新增',
        showButton: true
    })

    const page = reactive({
        index: pageData.index?pageData.index:1,
        size: pageData.size?pageData.size:10,
        total: 0
    })
    const loading = ref(true)
    const tableData = ref([])
    const chooseData = ref([])
    const handleSelectionChange = (val) => {
        chooseData.value = val
    }
    const getTableData = (init) => {
        loading.value = true
        if (init) {
            page.index = 1
        }
        let params = {
            page: page.index,
            limit: page.size,
            ...query
        }
        let uri = typeof(url) === 'string' && url !== '' ? url : site;
        http.get(uri,params).then(res => {
            let data = res.data.list
            if (Array.isArray(data)) {
                data.forEach(d => {
                    const select = selectData.find(select => select.value === d.choose)
                    select ? d.chooseName = select.label : d.chooseName = d.choose
                    const radio = radioData.find(select => select.value === d.radio)
                    radio ? d.radioName = radio.label : d.radio
                })
            }
            tableData.value = res.data.list
            page.total = Number(res.data.total)
        }).catch(error => {
            tableData.value = []
            page.index = 1
            page.total = 0
        }).finally(() => {
            loading.value = false
        })
    }
    // 删除功能
    const handleDel = (data) => {
        let params = {
            ids: data.map((e)=> {
                return e.id
            }).join(',')
        }
        let uri = typeof(url) === 'string' && url !== '' ? url : site;
        http.post(uri+'/batch',params).then(res => {
            if(res.code === 200){
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                getTableData(tableData.value.length === 1 ? true : false)
            }
        })
    }
    // 新增弹窗功能
    const handleAdd = () => {
        layer.title = '新增数据'
        layer.show = true
        delete layer.row
    }
    // 编辑弹窗功能
    const handleEdit = (row) => {
        layer.title = '编辑数据'
        layer.row = row
        layer.show = true
    }
    getTableData(false)
    return{
        site,
        layer,
        query,
        page,
        loading,
        tableData,
        chooseData,
        handleSelectionChange,
        getTableData,
        handleDel,
        handleAdd,
        handleEdit
    }
}

本作品采用《CC 协议》，转载必须注明作者和本文链接