2024-10-04 23:05:28 +08:00
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import type { VbenFormProps } from '@vben-core/form-ui';
|
|
|
|
|
import type {
|
|
|
|
|
VxeGridInstance,
|
|
|
|
|
VxeGridProps as VxeTableGridProps,
|
|
|
|
|
} from 'vxe-table';
|
|
|
|
|
|
|
|
|
|
import type { ExtendedVxeGridApi, VxeGridProps } from './types';
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
computed,
|
|
|
|
|
nextTick,
|
|
|
|
|
onMounted,
|
|
|
|
|
toRaw,
|
|
|
|
|
useSlots,
|
|
|
|
|
useTemplateRef,
|
2024-10-08 22:43:02 +08:00
|
|
|
|
watch,
|
2024-10-04 23:05:28 +08:00
|
|
|
|
} from 'vue';
|
|
|
|
|
|
|
|
|
|
import { usePriorityValues } from '@vben/hooks';
|
|
|
|
|
import { EmptyIcon } from '@vben/icons';
|
|
|
|
|
import { $t } from '@vben/locales';
|
2024-10-05 22:00:11 +08:00
|
|
|
|
import { usePreferences } from '@vben/preferences';
|
2024-10-04 23:05:28 +08:00
|
|
|
|
import { cloneDeep, cn, mergeWithArrayOverride } from '@vben/utils';
|
|
|
|
|
import { VbenLoading } from '@vben-core/shadcn-ui';
|
|
|
|
|
|
|
|
|
|
import { VxeGrid, VxeUI } from 'vxe-table';
|
|
|
|
|
|
2024-10-10 22:48:25 +08:00
|
|
|
|
import { extendProxyOptions } from './extends';
|
2024-10-04 23:05:28 +08:00
|
|
|
|
import { useTableForm } from './init';
|
|
|
|
|
|
|
|
|
|
import 'vxe-table/styles/cssvar.scss';
|
|
|
|
|
import 'vxe-pc-ui/styles/cssvar.scss';
|
|
|
|
|
import './theme.css';
|
|
|
|
|
|
|
|
|
|
interface Props extends VxeGridProps {
|
|
|
|
|
api: ExtendedVxeGridApi;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
|
|
|
|
2024-10-10 22:48:25 +08:00
|
|
|
|
const FORM_SLOT_PREFIX = 'form-';
|
|
|
|
|
|
2024-10-04 23:05:28 +08:00
|
|
|
|
const gridRef = useTemplateRef<VxeGridInstance>('gridRef');
|
|
|
|
|
|
|
|
|
|
const state = props.api?.useStore?.();
|
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
|
gridOptions,
|
|
|
|
|
class: className,
|
|
|
|
|
gridClass,
|
|
|
|
|
gridEvents,
|
|
|
|
|
formOptions,
|
|
|
|
|
} = usePriorityValues(props, state);
|
|
|
|
|
|
2024-10-05 22:00:11 +08:00
|
|
|
|
const { isMobile } = usePreferences();
|
|
|
|
|
|
2024-10-04 23:05:28 +08:00
|
|
|
|
const slots = useSlots();
|
|
|
|
|
|
2024-10-08 22:43:02 +08:00
|
|
|
|
const [Form, formApi] = useTableForm({
|
|
|
|
|
handleSubmit: async () => {
|
|
|
|
|
const formValues = formApi.form.values;
|
|
|
|
|
props.api.reload(formValues);
|
|
|
|
|
},
|
|
|
|
|
handleReset: async () => {
|
|
|
|
|
await formApi.resetForm();
|
|
|
|
|
const formValues = formApi.form.values;
|
|
|
|
|
props.api.reload(formValues);
|
|
|
|
|
},
|
|
|
|
|
commonConfig: {
|
|
|
|
|
componentProps: {
|
|
|
|
|
class: 'w-full',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
showCollapseButton: true,
|
|
|
|
|
submitButtonOptions: {
|
|
|
|
|
content: $t('common.query'),
|
|
|
|
|
},
|
2024-10-18 07:47:40 +08:00
|
|
|
|
// enter提交
|
|
|
|
|
submitOnEnter: true,
|
2024-10-08 22:43:02 +08:00
|
|
|
|
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
|
|
|
|
});
|
2024-10-04 23:05:28 +08:00
|
|
|
|
|
|
|
|
|
const showToolbar = computed(() => {
|
|
|
|
|
return !!slots['toolbar-actions']?.() || !!slots['toolbar-tools']?.();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const options = computed(() => {
|
|
|
|
|
const slotActions = slots['toolbar-actions']?.();
|
|
|
|
|
const slotTools = slots['toolbar-tools']?.();
|
|
|
|
|
|
2024-10-05 22:30:13 +08:00
|
|
|
|
const globalGridConfig = VxeUI?.getConfig()?.grid ?? {};
|
|
|
|
|
|
2024-10-04 23:05:28 +08:00
|
|
|
|
const forceUseToolbarOptions = showToolbar.value
|
|
|
|
|
? {
|
|
|
|
|
toolbarConfig: {
|
|
|
|
|
slots: {
|
|
|
|
|
...(slotActions ? { buttons: 'toolbar-actions' } : {}),
|
|
|
|
|
...(slotTools ? { tools: 'toolbar-tools' } : {}),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
: {};
|
|
|
|
|
|
|
|
|
|
const mergedOptions: VxeTableGridProps = cloneDeep(
|
|
|
|
|
mergeWithArrayOverride(
|
|
|
|
|
{},
|
|
|
|
|
forceUseToolbarOptions,
|
|
|
|
|
toRaw(gridOptions.value),
|
2024-10-05 22:30:13 +08:00
|
|
|
|
globalGridConfig,
|
2024-10-04 23:05:28 +08:00
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (mergedOptions.proxyConfig) {
|
|
|
|
|
const { ajax } = mergedOptions.proxyConfig;
|
|
|
|
|
mergedOptions.proxyConfig.enabled = !!ajax;
|
|
|
|
|
// 不自动加载数据, 由组件控制
|
|
|
|
|
mergedOptions.proxyConfig.autoLoad = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!showToolbar.value && mergedOptions.toolbarConfig) {
|
|
|
|
|
mergedOptions.toolbarConfig.enabled = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (mergedOptions.pagerConfig) {
|
2024-10-05 22:00:11 +08:00
|
|
|
|
const mobileLayouts = [
|
|
|
|
|
'PrevJump',
|
|
|
|
|
'PrevPage',
|
|
|
|
|
'Number',
|
|
|
|
|
'NextPage',
|
|
|
|
|
'NextJump',
|
|
|
|
|
] as any;
|
|
|
|
|
const layouts = [
|
|
|
|
|
'Total',
|
|
|
|
|
'Sizes',
|
|
|
|
|
'Home',
|
|
|
|
|
...mobileLayouts,
|
|
|
|
|
'End',
|
|
|
|
|
] as readonly string[];
|
2024-10-04 23:05:28 +08:00
|
|
|
|
mergedOptions.pagerConfig = mergeWithArrayOverride(
|
|
|
|
|
{},
|
|
|
|
|
mergedOptions.pagerConfig,
|
|
|
|
|
{
|
|
|
|
|
pageSize: 20,
|
|
|
|
|
background: true,
|
|
|
|
|
pageSizes: [10, 20, 30, 50, 100, 200],
|
|
|
|
|
className: 'mt-2 w-full',
|
2024-10-05 22:00:11 +08:00
|
|
|
|
layouts: isMobile.value ? mobileLayouts : layouts,
|
2024-10-04 23:05:28 +08:00
|
|
|
|
size: 'mini' as const,
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
if (mergedOptions.formConfig) {
|
|
|
|
|
mergedOptions.formConfig.enabled = false;
|
|
|
|
|
}
|
|
|
|
|
return mergedOptions;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const events = computed(() => {
|
|
|
|
|
return {
|
|
|
|
|
...gridEvents.value,
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const delegatedSlots = computed(() => {
|
|
|
|
|
const resultSlots: string[] = [];
|
|
|
|
|
|
|
|
|
|
for (const key of Object.keys(slots)) {
|
|
|
|
|
if (!['empty', 'form', 'loading'].includes(key)) {
|
|
|
|
|
resultSlots.push(key);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return resultSlots;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const delegatedFormSlots = computed(() => {
|
|
|
|
|
const resultSlots: string[] = [];
|
|
|
|
|
|
|
|
|
|
for (const key of Object.keys(slots)) {
|
2024-10-10 22:48:25 +08:00
|
|
|
|
if (key.startsWith(FORM_SLOT_PREFIX)) {
|
2024-10-04 23:05:28 +08:00
|
|
|
|
resultSlots.push(key);
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-10-10 22:48:25 +08:00
|
|
|
|
return resultSlots.map((key) => key.replace(FORM_SLOT_PREFIX, ''));
|
2024-10-04 23:05:28 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
async function init() {
|
|
|
|
|
await nextTick();
|
|
|
|
|
const globalGridConfig = VxeUI?.getConfig()?.grid ?? {};
|
|
|
|
|
const defaultGridOptions: VxeTableGridProps = mergeWithArrayOverride(
|
|
|
|
|
{},
|
|
|
|
|
toRaw(gridOptions.value),
|
|
|
|
|
toRaw(globalGridConfig),
|
|
|
|
|
);
|
|
|
|
|
// 内部主动加载数据,防止form的默认值影响
|
|
|
|
|
const autoLoad = defaultGridOptions.proxyConfig?.autoLoad;
|
|
|
|
|
const enableProxyConfig = options.value.proxyConfig?.enabled;
|
|
|
|
|
if (enableProxyConfig && autoLoad) {
|
2024-10-10 22:48:25 +08:00
|
|
|
|
props.api.reload(formApi.form?.values ?? {});
|
2024-10-04 23:05:28 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// form 由 vben-form代替,所以不适配formConfig,这里给出警告
|
2024-10-05 22:30:13 +08:00
|
|
|
|
const formConfig = gridOptions.value?.formConfig;
|
2024-10-05 17:09:42 +08:00
|
|
|
|
if (formConfig) {
|
2024-10-04 23:05:28 +08:00
|
|
|
|
console.warn(
|
|
|
|
|
'[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props',
|
|
|
|
|
);
|
|
|
|
|
}
|
2024-10-13 23:44:45 +08:00
|
|
|
|
props.api?.setState?.({ gridOptions: defaultGridOptions });
|
2024-10-10 22:48:25 +08:00
|
|
|
|
// form 由 vben-form 代替,所以需要保证query相关事件可以拿到参数
|
2024-10-11 17:34:56 +08:00
|
|
|
|
extendProxyOptions(props.api, defaultGridOptions, () =>
|
|
|
|
|
// 这里默认是readonly的 需要深拷贝才能进行修改操作
|
|
|
|
|
cloneDeep(formApi.form.values),
|
|
|
|
|
);
|
2024-10-04 23:05:28 +08:00
|
|
|
|
}
|
2024-10-08 22:43:02 +08:00
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
formOptions,
|
|
|
|
|
() => {
|
|
|
|
|
formApi.setState((prev) => {
|
|
|
|
|
const finalFormOptions: VbenFormProps = mergeWithArrayOverride(
|
|
|
|
|
{},
|
|
|
|
|
formOptions.value,
|
|
|
|
|
prev,
|
|
|
|
|
);
|
|
|
|
|
return {
|
|
|
|
|
...finalFormOptions,
|
|
|
|
|
collapseTriggerResize: !!finalFormOptions.showCollapseButton,
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
immediate: true,
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
2024-10-04 23:05:28 +08:00
|
|
|
|
onMounted(() => {
|
2024-10-07 13:32:37 +08:00
|
|
|
|
props.api?.mount?.(gridRef.value, formApi);
|
2024-10-04 23:05:28 +08:00
|
|
|
|
init();
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div :class="cn('bg-card h-full rounded-md', className)">
|
|
|
|
|
<VxeGrid
|
|
|
|
|
ref="gridRef"
|
|
|
|
|
:class="
|
|
|
|
|
cn(
|
|
|
|
|
'p-2',
|
|
|
|
|
{
|
|
|
|
|
'pt-0': showToolbar && !formOptions,
|
|
|
|
|
},
|
|
|
|
|
gridClass,
|
|
|
|
|
)
|
|
|
|
|
"
|
|
|
|
|
v-bind="options"
|
|
|
|
|
v-on="events"
|
|
|
|
|
>
|
|
|
|
|
<template
|
|
|
|
|
v-for="slotName in delegatedSlots"
|
|
|
|
|
:key="slotName"
|
|
|
|
|
#[slotName]="slotProps"
|
|
|
|
|
>
|
|
|
|
|
<slot :name="slotName" v-bind="slotProps"></slot>
|
|
|
|
|
</template>
|
|
|
|
|
<template #form>
|
2024-10-07 16:22:57 +08:00
|
|
|
|
<div v-if="formOptions" class="relative rounded py-3 pb-4">
|
2024-10-04 23:05:28 +08:00
|
|
|
|
<slot name="form">
|
2024-10-08 22:43:02 +08:00
|
|
|
|
<Form>
|
2024-10-04 23:05:28 +08:00
|
|
|
|
<template
|
|
|
|
|
v-for="slotName in delegatedFormSlots"
|
|
|
|
|
:key="slotName"
|
|
|
|
|
#[slotName]="slotProps"
|
|
|
|
|
>
|
2024-10-13 23:44:45 +08:00
|
|
|
|
<slot
|
|
|
|
|
:name="`${FORM_SLOT_PREFIX}${slotName}`"
|
|
|
|
|
v-bind="slotProps"
|
|
|
|
|
></slot>
|
2024-10-04 23:05:28 +08:00
|
|
|
|
</template>
|
2024-10-14 22:35:01 +08:00
|
|
|
|
<template #reset-before="slotProps">
|
|
|
|
|
<slot name="reset-before" v-bind="slotProps"></slot>
|
|
|
|
|
</template>
|
|
|
|
|
<template #submit-before="slotProps">
|
|
|
|
|
<slot name="submit-before" v-bind="slotProps"></slot>
|
|
|
|
|
</template>
|
|
|
|
|
<template #expand-before="slotProps">
|
|
|
|
|
<slot name="expand-before" v-bind="slotProps"></slot>
|
|
|
|
|
</template>
|
|
|
|
|
<template #expand-after="slotProps">
|
|
|
|
|
<slot name="expand-after" v-bind="slotProps"></slot>
|
|
|
|
|
</template>
|
2024-10-04 23:05:28 +08:00
|
|
|
|
</Form>
|
|
|
|
|
</slot>
|
|
|
|
|
<div
|
2024-10-05 22:00:11 +08:00
|
|
|
|
class="bg-background-deep z-100 absolute -left-2 bottom-1 h-2 w-[calc(100%+1rem)] overflow-hidden md:bottom-2 md:h-3"
|
2024-10-04 23:05:28 +08:00
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template #loading>
|
|
|
|
|
<slot name="loading">
|
|
|
|
|
<VbenLoading :spinning="true" />
|
|
|
|
|
</slot>
|
|
|
|
|
</template>
|
|
|
|
|
<template #empty>
|
|
|
|
|
<slot name="empty">
|
|
|
|
|
<EmptyIcon class="mx-auto" />
|
|
|
|
|
<div class="mt-2">{{ $t('common.noData') }}</div>
|
|
|
|
|
</slot>
|
|
|
|
|
</template>
|
|
|
|
|
</VxeGrid>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|