import { ElMessage, ElMessageBox } from 'element-plus' export const useTable = (props: any, emits: any) => { const loading = ref(false) const tableData = ref([]) 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(props.formConfig.route) const formData = ref({}) 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([]) 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 } }