diff --git a/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts b/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts index 567d8b1..0f7c794 100644 --- a/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts +++ b/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts @@ -1,7 +1,8 @@ import { computed, nextTick, ref, unref, watch } from 'vue'; import { propTypes } from '/@/utils/propTypes'; import { useDesign } from '/@/hooks/web/useDesign'; -import { getEnhanced, replaceProps, vModel } from '../utils/enhancedUtils'; +import { getEnhanced, replaceProps } from '../utils/enhancedUtils'; +import { vModel } from '/@/components/jeecg/JVxeTable/utils'; import { JVxeRenderType } from '../types/JVxeTypes'; import { isBoolean, isFunction, isObject, isPromise } from '/@/utils/is'; import { JVxeComponent } from '../types/JVxeComponent'; diff --git a/src/components/jeecg/JVxeTable/src/utils/enhancedUtils.ts b/src/components/jeecg/JVxeTable/src/utils/enhancedUtils.ts index 18b360a..32c3466 100644 --- a/src/components/jeecg/JVxeTable/src/utils/enhancedUtils.ts +++ b/src/components/jeecg/JVxeTable/src/utils/enhancedUtils.ts @@ -1,5 +1,3 @@ -import type { Ref, ComponentInternalInstance } from 'vue'; -import { unref, isRef } from 'vue'; import { useDefaultEnhanced } from '../hooks/useJVxeComponent'; import { isFunction, isObject, isString } from '/@/utils/is'; import { JVxeTypes } from '../types'; @@ -54,102 +52,4 @@ export function replaceProps(col, value) { return value; } -type dispatchEventOptions = { - // JVxeTable 的 props - props; - // 触发的 event 事件对象 - $event; - // 行、列 - row?; - column?; - // JVxeTable的vue3实例 - instance?: ComponentInternalInstance; - // 要寻找的className - className: string; - // 重写找到dom后的处理方法 - handler?: Fn; - // 是否直接执行click方法而不是模拟click事件 - isClick?: boolean; -}; -/** 模拟触发事件 */ -export function dispatchEvent(options: dispatchEventOptions) { - const { props, $event, row, column, instance, className, handler, isClick } = options; - if ((!$event || !$event.path) && !instance) { - return; - } - // alwaysEdit 下不模拟触发事件,否者会导致触发两次 - if (props && props.alwaysEdit) { - return; - } - let getCell = () => { - let paths: HTMLElement[] = [...($event?.path ?? [])]; - // 通过 instance 获取 cell dom对象 - if (row && column) { - let selector = `table.vxe-table--body tbody tr[rowid='${row.id}'] td[colid='${column.id}']`; - let cellDom = instance!.vnode?.el?.querySelector(selector); - if (cellDom) { - paths.unshift(cellDom); - } - } - for (const el of paths) { - if (el.classList?.contains('vxe-body--column')) { - return el; - } - } - return null; - }; - let cell = getCell(); - if (cell) { - window.setTimeout(() => { - let getElement = () => { - let classList = className.split(' '); - if (classList.length > 0) { - const getClassName = (cls: string) => { - if (cls.startsWith('.')) { - return cls.substring(1, cls.length); - } - return cls; - }; - let get = (target, className, idx = 0) => { - let elements = target.getElementsByClassName(getClassName(className)); - if (elements && elements.length > 0) { - return elements[idx]; - } - return null; - }; - let element: HTMLElement = get(cell, classList[0]); - for (let i = 1; i < classList.length; i++) { - if (!element) { - break; - } - element = get(element, classList[i]); - } - return element; - } - return null; - }; - let element = getElement(); - if (element) { - if (isFunction(handler)) { - handler(element); - } else { - // 模拟触发点击事件 - if (isClick) { - element.click(); - } else { - element.dispatchEvent($event); - } - } - } - }, 10); - } else { - console.warn('【JVxeTable】dispatchEvent 获取 cell 失败'); - } -} - -/** 绑定 VxeTable 数据 */ -export function vModel(value, row, column: Ref | string) { - let property = isRef(column) ? column.value.property : column; - unref(row)[property] = value; -} diff --git a/src/components/jeecg/JVxeTable/utils.ts b/src/components/jeecg/JVxeTable/utils.ts index edd3e2c..e629528 100644 --- a/src/components/jeecg/JVxeTable/utils.ts +++ b/src/components/jeecg/JVxeTable/utils.ts @@ -1 +1,104 @@ -export { dispatchEvent, vModel } from './src/utils/enhancedUtils'; +import type { Ref, ComponentInternalInstance } from 'vue'; +import { unref, isRef } from 'vue'; +import { isFunction } from '/@/utils/is'; + +type dispatchEventOptions = { + // JVxeTable 的 props + props; + // 触发的 event 事件对象 + $event; + // 行、列 + row?; + column?; + // JVxeTable的vue3实例 + instance?: ComponentInternalInstance; + // 要寻找的className + className: string; + // 重写找到dom后的处理方法 + handler?: Fn; + // 是否直接执行click方法而不是模拟click事件 + isClick?: boolean; +}; + +/** 模拟触发事件 */ +export function dispatchEvent(options: dispatchEventOptions) { + const { props, $event, row, column, instance, className, handler, isClick } = options; + if ((!$event || !$event.path) && !instance) { + return; + } + // alwaysEdit 下不模拟触发事件,否者会导致触发两次 + if (props && props.alwaysEdit) { + return; + } + let getCell = () => { + let paths: HTMLElement[] = [...($event?.path ?? [])]; + // 通过 instance 获取 cell dom对象 + if (row && column) { + let selector = `table.vxe-table--body tbody tr[rowid='${row.id}'] td[colid='${column.id}']`; + let cellDom = instance!.vnode?.el?.querySelector(selector); + if (cellDom) { + paths.unshift(cellDom); + } + } + for (const el of paths) { + if (el.classList?.contains('vxe-body--column')) { + return el; + } + } + return null; + }; + let cell = getCell(); + if (cell) { + window.setTimeout(() => { + let getElement = () => { + let classList = className.split(' '); + if (classList.length > 0) { + const getClassName = (cls: string) => { + if (cls.startsWith('.')) { + return cls.substring(1, cls.length); + } + return cls; + }; + let get = (target, className, idx = 0) => { + let elements = target.getElementsByClassName(getClassName(className)); + if (elements && elements.length > 0) { + return elements[idx]; + } + return null; + }; + let element: HTMLElement = get(cell, classList[0]); + for (let i = 1; i < classList.length; i++) { + if (!element) { + break; + } + element = get(element, classList[i]); + } + return element; + } + return null; + }; + let element = getElement(); + if (element) { + if (isFunction(handler)) { + handler(element); + } else { + // 模拟触发点击事件 + if (isClick) { + element.click(); + } else { + element.dispatchEvent($event); + } + } + } + }, 10); + } else { + console.warn('【JVxeTable】dispatchEvent 获取 cell 失败'); + } +} + +/** 绑定 VxeTable 数据 */ +export function vModel(value, row, column: Ref | string) { + // @ts-ignore + let property = isRef(column) ? column.value.property : column; + unref(row)[property] = value; +}