优化项目(PC后台)

一、优化表格

基本上每个PC后台项目都有非常多的这种表格，而这种表格一般都会带有分页功能，如果每个页面都要写一遍分页所需的数据那会非常麻烦，这里我封装了一些js文件方便复用。

// 表格hook
export const useTablePagination = (onRefresh) => {
    const total = ref(0)
    const currentPage = ref(1)
    const pageSize = ref(10)
    const selected = ref([])

    function handleSizeChange(val) {
        pageSize.value = val
        onRefresh()
    }

    function handleCurrentChange(val) {
        currentPage.value = val
        onRefresh()
    }

    function handleSelectionChange(selection) {
        selected.value = selection
    }

    return {
        total,
        currentPage,
        pageSize,
        handleSizeChange,
        handleCurrentChange,
        handleSelectionChange,
        selected
    }
}
export const useLoading = () => {
    const loading = ref(false)
    const toggleLoading = (val) => {
        loading.value = val
    }
    return {
        loading,
        toggleLoading
    }
}

使用：

import { useLoading, useTablePagination } from "@/hooks/useTable";
import { useUpload, useDownload } from "@/hooks/useUpload";
const { currentPage, pageSize, total, handleSizeChange, handleCurrentChange } = useTablePagination(onRefresh)
const { loading } = useLoading()

二、弹窗

import {ref} from 'vue'
// 弹窗hook
const title = ref('')

export const useDialogVisible = () => {
    const visible = ref(false)
    const open = (row) => {
        visible.value = true
        if (row && row.roleId) {
            title.value = '编辑'
        } else {
            title.value = '新增'
        }

    }
    const close = () => {
        visible.value = false
    }
    return {
        visible,
        title,
        open,
        close
    }
}
export const useDialogLoading = () => {
    const loading = ref(false)
    const open = () => {
        loading.value = true
    }
    const close = () => {
        loading.value = false
    }
    return {
        loading,
        open,
        close
    }
}

使用：

import { useDialogVisible, useDialogLoading } from '@/hooks/useDialog'
const { visible, title, open, close } = useDialogVisible()
const { loading: dialogLoading, open: dialogLoadingOpen, close: dialogLoadingClose } = useDialogLoading()