| | |
| | | v-if="getSetting.setting" |
| | | @columns-change="handleColumnChange" |
| | | :getPopupContainer="getTableContainer" |
| | | :cache="getSetting.settingCache" |
| | | /> |
| | | <FullScreenSetting v-if="getSetting.fullScreen" :getPopupContainer="getTableContainer" /> |
| | | </div> |
| | | </template> |
| | | <script lang="ts"> |
| | | <script lang="ts" setup> |
| | | import type { PropType } from 'vue'; |
| | | import type { TableSetting, ColumnChangeParam } from '../../types/table'; |
| | | import { defineComponent, computed, unref } from 'vue'; |
| | | import { computed, unref } from 'vue'; |
| | | import ColumnSetting from './ColumnSetting.vue'; |
| | | import SizeSetting from './SizeSetting.vue'; |
| | | import RedoSetting from './RedoSetting.vue'; |
| | | import FullScreenSetting from './FullScreenSetting.vue'; |
| | | import { useI18n } from '/@/hooks/web/useI18n'; |
| | | import { useTableContext } from '../../hooks/useTableContext'; |
| | | |
| | | export default defineComponent({ |
| | | name: 'TableSetting', |
| | | components: { |
| | | ColumnSetting, |
| | | SizeSetting, |
| | | RedoSetting, |
| | | FullScreenSetting, |
| | | }, |
| | | props: { |
| | | setting: { |
| | | type: Object as PropType<TableSetting>, |
| | | default: () => ({}), |
| | | }, |
| | | }, |
| | | emits: ['columns-change'], |
| | | setup(props, { emit }) { |
| | | const { t } = useI18n(); |
| | | const table = useTableContext(); |
| | | defineOptions({ name: 'TableSetting' }); |
| | | |
| | | const getSetting = computed((): TableSetting => { |
| | | return { |
| | | redo: true, |
| | | size: true, |
| | | setting: true, |
| | | fullScreen: false, |
| | | ...props.setting, |
| | | }; |
| | | }); |
| | | |
| | | function handleColumnChange(data: ColumnChangeParam[]) { |
| | | emit('columns-change', data); |
| | | } |
| | | |
| | | function getTableContainer() { |
| | | return table ? unref(table.wrapRef) : document.body; |
| | | } |
| | | |
| | | return { getSetting, t, handleColumnChange, getTableContainer }; |
| | | const props = defineProps({ |
| | | setting: { |
| | | type: Object as PropType<TableSetting>, |
| | | default: () => ({}), |
| | | }, |
| | | }); |
| | | |
| | | const emit = defineEmits(['columns-change']); |
| | | |
| | | const table = useTableContext(); |
| | | |
| | | const getSetting = computed((): TableSetting => { |
| | | return { |
| | | redo: true, |
| | | size: true, |
| | | setting: true, |
| | | settingCache: false, |
| | | fullScreen: false, |
| | | ...props.setting, |
| | | }; |
| | | }); |
| | | |
| | | function handleColumnChange(data: ColumnChangeParam[]) { |
| | | emit('columns-change', data); |
| | | } |
| | | |
| | | function getTableContainer() { |
| | | return table ? unref(table.wrapRef) : document.body; |
| | | } |
| | | </script> |
| | | <style lang="less"> |
| | | .table-settings { |