fs-admin/src/hooks/useTable.ts

import { ElMessage, ElMessageBox } from 'element-plus'

export const useTable = (props: any, emits: any) => {
  const loading = ref(false)
  const tableData = ref<any>([])
  const total = ref(0)
  const curPage = ref(1)
  /**
   * 获取表格数据
   * @param query - 查询参数
   */
  const getTableData = (query?: any) => {
    loading.value = true
    props.crud
      ?.getList({
        ...query,
        pageSize: props.pageSize,
        pageNo: curPage.value
      })
      .then((res: any) => {
        tableData.value = res.infos || res.list || res.rows
        total.value = res.total || res.totalCount
      })
      .finally(() => {
        loading.value = false
      })
  }
  watch(
    curPage,
    () => {
      getTableData()
    },
    {
      immediate: true
    }
  )

  const refresh = () => {
    curPage.value = 1
    getTableData()
  }

  // ============== crud部分开始 ===============
  const formRoute = ref<any>(props.formConfig.route)
  const formData = ref<any>({})
  const formVisible = ref(false)

  const doCreate = () => {
    emits('click-create')
    if (formRoute.value) {
      const router = useRouter()
      router.push(formRoute.value)
    } else {
      formData.value = {}
      props.formConfig.disabled = false
      formVisible.value = true
    }
  }
  const handleCreate = async () => {
    if (!props.beforeCreate) {
      return doCreate()
    }

    let result = true
    try {
      const beforeUploadPromise = props.beforeCreate(formData.value)
      result = await beforeUploadPromise
    } catch {
      result = false
    }

    if (result === false) {
      return
    }
    doCreate()
  }

  // 编辑、查看
  const useRecordData = (row: any, disabled: boolean) => {
    // 此函数用于获取记录数据并设置相应的表单配置
    if (formRoute.value) {
      const router = useRouter()
      router.push(formRoute.value)
    } else {
      if (props.crud?.getRecord) {
        props.crud.getRecord({ id: row.id }).then((res: any) => {
          formData.value = res.data
        })
      } else {
        formData.value = { ...row }
      }
      props.formConfig.disabled = disabled
      formVisible.value = true
    }
  }
  const handleUpdate = (row: any) => {
    emits('click-edit', row)
    useRecordData(row, false)
  }
  const handleView = (row: any) => {
    emits('click-view', row)
    useRecordData(row, true)
  }

  // 删除成功
  const deleteSuccess = (data: any) => {
    if (data.success || data.code === 200) {
      getTableData()
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    } else {
      ElMessage.error(data.msg)
    }
  }
  const handleDelete = (id: string | number) => {
    ElMessageBox.confirm('您确定要删除该项吗', '提示', {
      type: 'warning'
    }).then(async () => {
      const data = await props.crud?.delete({ id })
      deleteSuccess(data)
    })
  }

  const multipleSelection = ref<any[]>([])
  const handleBatchDelete = () => {
    ElMessageBox.confirm('您确定要删除吗', '提示', {
      type: 'warning'
    }).then(async () => {
      if (props.crud.deleteBatch) {
        const data = await props.crud?.deleteBatch({
          ids: multipleSelection.value.map(item => item.id).join(',')
        })
        deleteSuccess(data)
      } else {
        ElMessage({
          type: 'error',
          message: '未提供deleteBatch方法'
        })
      }
    })
  }
  // ============== crud部分结束 ===============

  const handleFormSuccess = () => {
    getTableData()
  }

  return {
    tableData,
    total,
    curPage,
    loading,
    formData,
    formVisible,
    multipleSelection,
    getTableData,
    refresh,
    handleCreate,
    handleDelete,
    handleBatchDelete,
    handleUpdate,
    handleView,
    handleFormSuccess
  }
}