From a2eea0fd65092315d4f75e87616cef5b8aeb253e Mon Sep 17 00:00:00 2001 From: zhangdaiscott Date: Sun, 15 Oct 2023 19:53:23 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8D=87=E7=BA=A7vxe-table=E5=88=B0=E6=9C=80?= =?UTF-8?q?=E6=96=B0=E7=89=884.5.12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 6 ++-- .../src/components/cells/JVxeInputCell.vue | 3 +- .../src/hooks/cells/useJVxeUploadCell.ts | 4 ++- .../jeecg/JVxeTable/src/hooks/useColumns.ts | 4 ++- .../jeecg/JVxeTable/src/hooks/useData.ts | 5 ++- .../JVxeTable/src/hooks/useDataSource.ts | 4 +-- .../JVxeTable/src/hooks/useFinallyProps.ts | 9 ++++- .../JVxeTable/src/hooks/useJVxeComponent.ts | 19 +++++++++-- .../jeecg/JVxeTable/src/hooks/useMethods.ts | 34 +++++++++++++------ .../jeecg/JVxeTable/src/vxe.data.ts | 8 ++++- src/components/jeecg/JVxeTable/utils.ts | 7 +++- src/design/index.less | 17 ++++++++++ .../demo/jeecg/JVxeTableDemo/JVxeDemo1.vue | 17 ++++++++-- 13 files changed, 109 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 1421803..eed926e 100644 --- a/package.json +++ b/package.json @@ -72,9 +72,9 @@ "vue-router": "^4.2.4", "vue-types": "^5.1.1", "vuedraggable": "^4.1.0", - "vxe-table": "4.1.0", - "vxe-table-plugin-antd": "3.0.5", - "xe-utils": "3.3.1", + "vxe-table": "4.5.12", + "vxe-table-plugin-antd": "3.1.0", + "xe-utils": "3.5.13", "vue-json-pretty": "^2.2.4", "xss": "^1.0.14" }, diff --git a/src/components/jeecg/JVxeTable/src/components/cells/JVxeInputCell.vue b/src/components/jeecg/JVxeTable/src/components/cells/JVxeInputCell.vue index 7ce591e..0231f11 100644 --- a/src/components/jeecg/JVxeTable/src/components/cells/JVxeInputCell.vue +++ b/src/components/jeecg/JVxeTable/src/components/cells/JVxeInputCell.vue @@ -13,7 +13,7 @@ name: 'JVxeInputCell', props: useJVxeCompProps(), setup(props: JVxeComponent.Props) { - const { innerValue, cellProps, handleChangeCommon } = useJVxeComponent(props); + const { innerValue, cellProps, handleChangeCommon, handleBlurCommon } = useJVxeComponent(props); /** 处理change事件 */ function handleChange(event) { @@ -50,6 +50,7 @@ } } handleChangeCommon(target.value, true); + handleBlurCommon(target.value); } return { diff --git a/src/components/jeecg/JVxeTable/src/hooks/cells/useJVxeUploadCell.ts b/src/components/jeecg/JVxeTable/src/hooks/cells/useJVxeUploadCell.ts index 707d89d..c3a7979 100644 --- a/src/components/jeecg/JVxeTable/src/hooks/cells/useJVxeUploadCell.ts +++ b/src/components/jeecg/JVxeTable/src/hooks/cells/useJVxeUploadCell.ts @@ -1,6 +1,6 @@ import { ref, computed, watch } from 'vue'; -import { getToken } from '/@/utils/auth'; +import {getTenantId, getToken} from '/@/utils/auth'; import { getFileAccessHttpUrl } from '/@/utils/common/compUtils'; import { JVxeComponent } from '../../types/JVxeComponent'; import { useJVxeComponent } from '../useJVxeComponent'; @@ -22,6 +22,8 @@ export function useJVxeUploadCell(props: JVxeComponent.Props, options?) { if ((originColumn.value.token ?? options?.token ?? false) === true) { headers['X-Access-Token'] = getToken(); } + let tenantId = getTenantId(); + headers['X-Tenant-Id'] = tenantId ? tenantId : '0'; return headers; }); diff --git a/src/components/jeecg/JVxeTable/src/hooks/useColumns.ts b/src/components/jeecg/JVxeTable/src/hooks/useColumns.ts index cba07a2..b525f47 100644 --- a/src/components/jeecg/JVxeTable/src/hooks/useColumns.ts +++ b/src/components/jeecg/JVxeTable/src/hooks/useColumns.ts @@ -110,7 +110,9 @@ function handleInnerColumn(args: HandleArgs, col: JVxeColumn, handler: (args: Ha * 处理隐藏列 */ function handleHiddenColumn({ col, columns }: HandleArgs) { + col!.params = cloneDeep(col); delete col!.type; + col!.field = col!.key col!.visible = false; columns.push(col!); } @@ -142,7 +144,7 @@ function handleSeqColumn({ props, col, columns }: HandleArgs) { function handleSelectionColumn({ props, data, col, columns }: HandleArgs) { // 判断是否开启了可选择行 if (props.rowSelection) { - let width = 40; + let width = 45; if (data.statistics.has && !props.rowExpand && !props.dragSort) { width = 60; } diff --git a/src/components/jeecg/JVxeTable/src/hooks/useData.ts b/src/components/jeecg/JVxeTable/src/hooks/useData.ts index a3847d1..47f7ca5 100644 --- a/src/components/jeecg/JVxeTable/src/hooks/useData.ts +++ b/src/components/jeecg/JVxeTable/src/hooks/useData.ts @@ -30,7 +30,10 @@ export function useData(props: JVxeTableProps): JVxeDataProps { editConfig: { trigger: 'click', mode: 'cell', - activeMethod: () => !props.disabled, + // update-begin--author:liaozhiyang---date:20231013---for：【QQYUN-5133】JVxeTable 行编辑升级 + //activeMethod: () => !props.disabled, + beforeEditMethod: () => !props.disabled, + // update-end--author:liaozhiyang---date:20231013---for：【QQYUN-5133】JVxeTable 行编辑升级 }, expandConfig: { iconClose: 'ant-table-row-expand-icon ant-table-row-expand-icon-collapsed', diff --git a/src/components/jeecg/JVxeTable/src/hooks/useDataSource.ts b/src/components/jeecg/JVxeTable/src/hooks/useDataSource.ts index eeb9328..3810e53 100644 --- a/src/components/jeecg/JVxeTable/src/hooks/useDataSource.ts +++ b/src/components/jeecg/JVxeTable/src/hooks/useDataSource.ts @@ -8,9 +8,9 @@ export function useDataSource(props, data: JVxeDataProps, methods: JVxeTableMeth async () => { data.disabledRowIds = []; data.vxeDataSource.value = cloneDeep(props.dataSource); - data.vxeDataSource.value.forEach((row) => { + data.vxeDataSource.value.forEach((row, rowIndex) => { // 判断是否是禁用行 - if (methods.isDisabledRow(row)) { + if (methods.isDisabledRow(row, rowIndex)) { data.disabledRowIds.push(row.id); } // 处理联动回显数据 diff --git a/src/components/jeecg/JVxeTable/src/hooks/useFinallyProps.ts b/src/components/jeecg/JVxeTable/src/hooks/useFinallyProps.ts index 11db9f7..9d00a55 100644 --- a/src/components/jeecg/JVxeTable/src/hooks/useFinallyProps.ts +++ b/src/components/jeecg/JVxeTable/src/hooks/useFinallyProps.ts @@ -55,6 +55,10 @@ export function useFinallyProps(props: JVxeTableProps, data: JVxeDataProps, meth editRules: unref(vxeEditRules), height: props.height === 'auto' ? null : props.height, maxHeight: props.maxHeight, + // update-begin--author:liaozhiyang---date:20231013---for：【QQYUN-5133】JVxeTable 行编辑升级 + scrollY: props.scrollY, + scrollX: props.scrollX, + // update-end--author:liaozhiyang---date:20231013---for：【QQYUN-5133】JVxeTable 行编辑升级 border: props.bordered, footerMethod: methods.handleFooterMethod, // 展开行配置 @@ -63,7 +67,10 @@ export function useFinallyProps(props: JVxeTableProps, data: JVxeDataProps, meth }, // 可编辑配置 editConfig: { - activeMethod: methods.handleActiveMethod, + // update-begin--author:liaozhiyang---date:20231013---for：【QQYUN-5133】JVxeTable 行编辑升级 + //activeMethod: methods.handleActiveMethod, + beforeEditMethod: methods.handleActiveMethod, + // update-end--author:liaozhiyang---date:20231013---for：【QQYUN-5133】JVxeTable 行编辑升级 }, radioConfig: { checkMethod: methods.handleCheckMethod, diff --git a/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts b/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts index 0f7c794..ff47204 100644 --- a/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts +++ b/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts @@ -54,7 +54,7 @@ export function useJVxeComponent(props: JVxeComponent.Props) { // 判断是否是禁用的列 cellProps['disabled'] = isBoolean(col['disabled']) ? col['disabled'] : cellProps['disabled']; // 判断是否禁用行 - if (renderOptions.isDisabledRow(row.value)) { + if (renderOptions.isDisabledRow(row.value, rowIndex.value)) { cellProps['disabled'] = true; } // 判断是否禁用所有组件 @@ -159,8 +159,21 @@ export function useJVxeComponent(props: JVxeComponent.Props) { } /** 通用处理 blur 事件 */ - function handleBlurCommon(value) { - trigger('blur', { value }); + function handleBlurCommon($value) { + // update-begin--author:liaozhiyang---date:20230817---for：【issues/636】JVxeTable加上blur事件 + const newValue = enhanced.getValue($value, ctx); + const oldValue = value.value; + //trigger('blur', { value }); + // 触发blur事件 + parentTrigger('blur', { + type: props.type, + value: newValue, + oldValue: oldValue, + col: originColumn.value, + rowIndex: rowIndex.value, + columnIndex: columnIndex.value, + }); + // update-end--author:liaozhiyang---date:20230817---for：【issues/636】JVxeTable加上blur事件 } /** diff --git a/src/components/jeecg/JVxeTable/src/hooks/useMethods.ts b/src/components/jeecg/JVxeTable/src/hooks/useMethods.ts index a2b80e2..8083c3f 100644 --- a/src/components/jeecg/JVxeTable/src/hooks/useMethods.ts +++ b/src/components/jeecg/JVxeTable/src/hooks/useMethods.ts @@ -9,6 +9,7 @@ import { isArray, isEmpty, isNull, isString } from '/@/utils/is'; import { useLinkage } from './useLinkage'; import { useWebSocket } from './useWebSocket'; import { getPrefix, getJVxeAuths } from '../utils/authUtils'; +import { excludeKeywords } from '../componentMap'; export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps, refs: JVxeRefs, instanceRef: Ref) { let xTableTemp: VxeTableInstance & VxeTablePrivateMethods; @@ -201,9 +202,14 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps, /** * 判断是否是禁用行 * @param row 行数据 + * @param rowIndex 行号 * @param force 是否强制判断 */ - function isDisabledRow(row, force = true) { + function isDisabledRow(row, rowIndex: number | boolean = -1, force = true) { + if(typeof rowIndex === 'boolean'){ + force = rowIndex; + rowIndex = -1; + } if (!force) { return !data.disabledRowIds.includes(row.id); } @@ -215,12 +221,17 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps, for (const key of keys) { // 判断是否有该属性 if (row.hasOwnProperty(key)) { + let value = row[key]; let temp: any = props.disabledRows![key]; - // 禁用规则可以是一个数组 - if (isArray(temp)) { - disabled = temp.includes(row[key]); + // 禁用规则可以是一个函数 + if (typeof temp === 'function') { + disabled = temp(value, row, rowIndex); + } else if (isArray(temp)) { + // 禁用规则可以是一个数组 + disabled = temp.includes(value); } else { - disabled = temp === row[key]; + // 禁用规则可以是一个具体值 + disabled = temp === value; } if (disabled) { break; @@ -235,9 +246,9 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps, let xTable = getXTable(); data.disabledRowIds = []; const { tableFullData } = xTable.internalData; - tableFullData.forEach((row) => { + tableFullData.forEach((row, rowIndex) => { // 判断是否是禁用行 - if (isDisabledRow(row)) { + if (isDisabledRow(row, rowIndex)) { data.disabledRowIds.push(row.id); } }); @@ -308,7 +319,8 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps, // 添加默认值 xTable.internalData.tableFullColumn.forEach((column) => { let col = column.params; - if (col) { + // 不能被注册的列不获取增强 + if (col && !excludeKeywords.includes(col.type)) { if (col.key && (record[col.key] == null || record[col.key] === '')) { // 设置默认值 let createValue = getEnhanced(col.type).createValue; @@ -682,10 +694,12 @@ export function useMethods(props: JVxeTableProps, { emit }, data: JVxeDataProps, let sortKey = props.sortKey ?? 'orderNum'; let sortBegin = props.sortBegin ?? 0; xTable.internalData.tableFullData.forEach((data) => (data[sortKey] = sortBegin++)); + // update-begin--author:liaozhiyang---date:20231011---for：【QQYUN-5133】JVxeTable 行编辑升级 // 4.1.0 - await xTable.updateCache(); + //await xTable.updateCache(); // 4.1.1 - // await xTable.cacheRowMap() + await xTable.cacheRowMap() + // update-end--author:liaozhiyang---date:20231011---for：【QQYUN-5133】JVxeTable 行编辑升级 return await xTable.updateData(); } } diff --git a/src/components/jeecg/JVxeTable/src/vxe.data.ts b/src/components/jeecg/JVxeTable/src/vxe.data.ts index 8a109c2..2e1a6fb 100644 --- a/src/components/jeecg/JVxeTable/src/vxe.data.ts +++ b/src/components/jeecg/JVxeTable/src/vxe.data.ts @@ -88,6 +88,12 @@ export const vxeProps = () => ({ addSetActive: propTypes.bool.def(true), // 是否开启键盘编辑 keyboardEdit: propTypes.bool.def(false), + // update-begin--author:liaozhiyang---date:20231013---for：【QQYUN-5133】JVxeTable 行编辑升级 + // 横向虚拟滚动配置（不支持展开行） + scrollX: propTypes.object.def(() => ({ enabled: true })), + // 纵向虚拟滚动配置（不支持展开行） + scrollY: propTypes.object.def(() => ({ enabled: true })), + // update-end--author:liaozhiyang---date:20231013---for：【QQYUN-5133】JVxeTable 行编辑升级 }); -export const vxeEmits = ['save', 'added', 'removed', 'inserted', 'dragged', 'selectRowChange', 'pageChange', 'valueChange']; +export const vxeEmits = ['save', 'added', 'removed', 'inserted', 'dragged', 'selectRowChange', 'pageChange', 'valueChange', 'blur']; diff --git a/src/components/jeecg/JVxeTable/utils.ts b/src/components/jeecg/JVxeTable/utils.ts index e629528..8a6029f 100644 --- a/src/components/jeecg/JVxeTable/utils.ts +++ b/src/components/jeecg/JVxeTable/utils.ts @@ -11,7 +11,7 @@ type dispatchEventOptions = { row?; column?; // JVxeTable的vue3实例 - instance?: ComponentInternalInstance; + instance?: ComponentInternalInstance | any; // 要寻找的className className: string; // 重写找到dom后的处理方法 @@ -36,6 +36,11 @@ export function dispatchEvent(options: dispatchEventOptions) { 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); + // -update-begin--author:liaozhiyang---date:20230830---for：【QQYUN-6390】解决online新增字段警告（兼容下） + if (!cellDom) { + cellDom = instance!.$el?.querySelector(selector); + } + // -update-begin--author:liaozhiyang---date:20230830---for：【QQYUN-6390】解决online新增字段警告（兼容下） if (cellDom) { paths.unshift(cellDom); } diff --git a/src/design/index.less b/src/design/index.less index 6798a92..6012be4 100644 --- a/src/design/index.less +++ b/src/design/index.less @@ -65,3 +65,20 @@ img, video { white-space: nowrap; } // update-end--author:liaozhiyang---date:20230925---for：【issues/5407】字段信息校验是多行提示会被遮挡 + +// update-begin--author:liaozhiyang---date:20231013---for：【QQYUN-5133】升级之后提示样式跟之前一致 +.vxe-table--render-default.vaild-msg--single .vxe-body--row:last-child .vxe-cell--valid { + top: auto; +} +.vxe-cell--valid { + top: 100%; +} +.vxe-cell--valid-msg { + display: inline-block; + border-radius: 4px !important; + padding: 8px 12px !important; + color: #fff !important; + background-color: #f56c6c !important; + +} +// update-end--author:liaozhiyang---date:20231013---for：【QQYUN-5133】升级之后提示样式跟之前一致 diff --git a/src/views/demo/jeecg/JVxeTableDemo/JVxeDemo1.vue b/src/views/demo/jeecg/JVxeTableDemo/JVxeDemo1.vue index 949a10a..536b27d 100644 --- a/src/views/demo/jeecg/JVxeTableDemo/JVxeDemo1.vue +++ b/src/views/demo/jeecg/JVxeTableDemo/JVxeDemo1.vue @@ -3,7 +3,7 @@ 切换加载 切换禁用 - +