feat: 添加表格查询隐藏按钮

pull/18/MERGE
xingyu 2023-05-19 16:37:30 +08:00
parent 44deb06aaa
commit 8f0c2fa811
6 changed files with 60 additions and 14 deletions

View File

@ -4,7 +4,7 @@
ref="formRef"
submitOnReset
v-bind="getFormProps"
v-if="getBindValues.useSearchForm"
v-if="getShowForm() && getBindValues.useSearchForm"
:tableAction="tableAction"
@register="registerForm"
@submit="handleSearchInfoChange"
@ -203,7 +203,12 @@ const { getHeaderProps } = useTableHeader(getProps, slots, handlers)
const { getFooterProps } = useTableFooter(getProps, getScrollRef, tableElRef, getDataSourceRef)
const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } = useTableForm(getProps, slots, fetch, getLoading)
const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange, getShowForm, setShowForm } = useTableForm(
getProps,
slots,
fetch,
getLoading
)
const getBindValues = computed(() => {
const dataSource = unref(getDataSourceRef)
@ -295,7 +300,9 @@ const tableAction: TableActionType = {
getSize: () => {
return unref(getBindValues).size as SizeType
},
setCacheColumns
setCacheColumns,
setShowForm,
getShowForm
}
createTableContext({ ...tableAction, wrapRef, getBindValues })

View File

@ -0,0 +1,24 @@
<template>
<Tooltip placement="top">
<template #title>
<span>{{ t('common.searchText') }}</span>
</template>
<SearchOutlined @click="redo" />
</Tooltip>
</template>
<script lang="ts" setup>
import { Tooltip } from 'ant-design-vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useTableContext } from '../../hooks/useTableContext'
defineOptions({ name: 'FormSetting' })
const table = useTableContext()
const { t } = useI18n()
function redo() {
table.setShowForm(!table.getShowForm())
table.reload()
}
</script>

View File

@ -8,15 +8,15 @@
<ColumnHeightOutlined />
<template #overlay>
<Menu @click="handleTitleClick" selectable v-model:selectedKeys="selectedKeysRef">
<MenuItem key="default">
<Menu.Item key="default">
<span>{{ t('component.table.settingDensDefault') }}</span>
</MenuItem>
<MenuItem key="middle">
</Menu.Item>
<Menu.Item key="middle">
<span>{{ t('component.table.settingDensMiddle') }}</span>
</MenuItem>
<MenuItem key="small">
</Menu.Item>
<Menu.Item key="small">
<span>{{ t('component.table.settingDensSmall') }}</span>
</MenuItem>
</Menu.Item>
</Menu>
</template>
</Dropdown>
@ -31,8 +31,6 @@ import { useI18n } from '@/hooks/web/useI18n'
import { useTableContext } from '../../hooks/useTableContext'
import { getPopupContainer } from '@/utils'
const MenuItem = Menu.Item
defineOptions({ name: 'SizeSetting' })
const table = useTableContext()

View File

@ -1,6 +1,7 @@
<template>
<div class="table-settings">
<RedoSetting v-if="getSetting.redo" :getPopupContainer="getTableContainer" />
<FormSetting v-if="getSetting.form" :getPopupContainer="getTableContainer" />
<SizeSetting v-if="getSetting.size" :getPopupContainer="getTableContainer" />
<ColumnSetting v-if="getSetting.setting" @columns-change="handleColumnChange" :getPopupContainer="getTableContainer" />
<FullScreenSetting v-if="getSetting.fullScreen" :getPopupContainer="getTableContainer" />
@ -10,6 +11,7 @@
import type { TableSetting, ColumnChangeParam } from '../../types/table'
import { computed, unref } from 'vue'
import ColumnSetting from './ColumnSetting.vue'
import FormSetting from './FormSetting.vue'
import SizeSetting from './SizeSetting.vue'
import RedoSetting from './RedoSetting.vue'
import FullScreenSetting from './FullScreenSetting.vue'
@ -29,6 +31,7 @@ const table = useTableContext()
const getSetting = computed((): TableSetting => {
return {
redo: true,
form: true,
size: true,
setting: true,
fullScreen: false,

View File

@ -1,6 +1,5 @@
import type { ComputedRef, Slots } from 'vue'
import { ComputedRef, Slots, ref, unref, computed } from 'vue'
import type { BasicTableProps, FetchParams } from '../types/table'
import { unref, computed } from 'vue'
import type { FormProps } from '@/components/Form'
import { isFunction } from '@/utils/is'
@ -10,6 +9,8 @@ export function useTableForm(
fetch: (opt?: FetchParams | undefined) => Promise<void>,
getLoading: ComputedRef<boolean | undefined>
) {
const show = ref(true)
const getFormProps = computed((): Partial<FormProps> => {
const { formConfig } = unref(propsRef)
const { submitButtonOptions } = formConfig || {}
@ -39,10 +40,20 @@ export function useTableForm(
fetch({ searchInfo: info, page: 1 })
}
function getShowForm() {
return unref(show)
}
async function setShowForm(flag: boolean) {
show.value = flag
}
return {
getFormProps,
replaceFormSlotKey,
getFormSlotKeys,
handleSearchInfoChange
handleSearchInfoChange,
getShowForm,
setShowForm
}
}

View File

@ -117,6 +117,8 @@ export interface TableActionType {
getShowPagination: () => boolean
setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void
setCacheColumns?: (columns: BasicColumn[]) => void
setShowForm: (show: boolean) => Promise<void>
getShowForm: () => boolean
}
export interface FetchSetting {
@ -132,6 +134,7 @@ export interface FetchSetting {
export interface TableSetting {
redo?: boolean
form?: boolean
size?: boolean
setting?: boolean
fullScreen?: boolean