|
@@ -0,0 +1,95 @@
|
|
|
+import {ref, computed, reactive, watch, Ref, defineComponent} from 'vue'
|
|
|
+import {VxeTable} from "vxe-table";
|
|
|
+import type {VxeTableProps} from "vxe-table";
|
|
|
+import {TablePublicMethods, VxeTableEventProps} from "vxe-table/types/table";
|
|
|
+import XEUtils from "xe-utils";
|
|
|
+import {stringNotBlank} from "@/utils/blank-utils";
|
|
|
+import {TableExportMethods} from "vxe-table/types/export";
|
|
|
+
|
|
|
+declare type SimplifiedConfiguration<D> = {
|
|
|
+ rowHeight?: number,
|
|
|
+ keyField?: string,
|
|
|
+ currentKey?: string | number,
|
|
|
+ tableProps?: VxeTableEventProps<D> & VxeTableProps<D>,
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function useVxeTable<D = any>(simplifiedConfiguration: SimplifiedConfiguration<D> = {}) {
|
|
|
+ const tableRef: Ref<TablePublicMethods<D> & TableExportMethods<D> | undefined> = ref()
|
|
|
+ const props: VxeTableProps<D> & VxeTableEventProps<D> & SimplifiedConfiguration<D> = reactive({
|
|
|
+ height: '100%',
|
|
|
+ rowConfig: {
|
|
|
+ isHover: true,
|
|
|
+ isCurrent: true,
|
|
|
+ height: simplifiedConfiguration?.rowHeight || 48,
|
|
|
+ useKey: true,
|
|
|
+ keyField: simplifiedConfiguration?.keyField || '',
|
|
|
+ },
|
|
|
+ scrollY: {
|
|
|
+ enabled: true,
|
|
|
+ gt: 0
|
|
|
+ },
|
|
|
+ scrollX: {
|
|
|
+ enabled: false,
|
|
|
+ },
|
|
|
+ exportConfig: {},
|
|
|
+ showOverflow: true,
|
|
|
+ })
|
|
|
+
|
|
|
+ watch(() => props.currentKey, () => {
|
|
|
+ if (stringNotBlank(defaultProps.value.rowConfig?.keyField)) {
|
|
|
+ const findData = XEUtils.find(defaultProps.value.data as [], (item) => {
|
|
|
+ // @ts-ignore
|
|
|
+ return item[defaultProps.value.rowConfig?.keyField] === props.currentKey;
|
|
|
+ })
|
|
|
+ if (!XEUtils.isEmpty(findData)) {
|
|
|
+ tableRef.value?.scrollToRow(findData)
|
|
|
+ tableRef.value?.setCurrentRow(findData)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {flush: 'post'})
|
|
|
+
|
|
|
+ const defaultProps = computed(() => {
|
|
|
+ return {
|
|
|
+ ...simplifiedConfiguration?.tableProps,
|
|
|
+ ...props
|
|
|
+ } as VxeTableProps<D>
|
|
|
+ })
|
|
|
+
|
|
|
+ const CyVxeTable = (props: VxeTableProps<D>, {slots}: any) => {
|
|
|
+ return <VxeTable
|
|
|
+ ref={tableRef}
|
|
|
+ {...defaultProps.value}
|
|
|
+ {...props}
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ default: () => {
|
|
|
+ return slots.default ? slots.default() : null;
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ </VxeTable>
|
|
|
+ }
|
|
|
+
|
|
|
+ function exportExcel(filename: string = '', sheetName: string = 'sheet1') {
|
|
|
+ if (!XEUtils.isString(filename)) {
|
|
|
+ filename = ''
|
|
|
+ }
|
|
|
+ tableRef.value?.openExport({
|
|
|
+ filename,
|
|
|
+ sheetName,
|
|
|
+ types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
|
|
|
+ type: 'xlsx',
|
|
|
+ useStyle: true,
|
|
|
+ original: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ tableRef,
|
|
|
+ CyVxeTable: CyVxeTable,
|
|
|
+ tableProps: props,
|
|
|
+ exportExcel
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default useVxeTable
|