feat: 添加表格查询隐藏按钮
parent
44deb06aaa
commit
8f0c2fa811
|
@ -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 })
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -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()
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue