github
/
jeecg-boot-vue3
mirror of https://github.com/jeecgboot/jeecgboot-vue3
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

升级vxe-table到最新版4.5.12

pull/824/head
zhangdaiscott 2023-10-15 19:53:23 +08:00
parent 373ce30cf9
commit a2eea0fd65
13 changed files with 109 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -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"
},

3
src/components/jeecg/JVxeTable/src/components/cells/JVxeInputCell.vue
View File

@ -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 {

4
src/components/jeecg/JVxeTable/src/hooks/cells/useJVxeUploadCell.ts
View File

@ -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;
});

4
src/components/jeecg/JVxeTable/src/hooks/useColumns.ts
View File

@ -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;
}

5
src/components/jeecg/JVxeTable/src/hooks/useData.ts
View File

@ -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',

4
src/components/jeecg/JVxeTable/src/hooks/useDataSource.ts
View File

@ -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);
}
// 处理联动回显数据

9
src/components/jeecg/JVxeTable/src/hooks/useFinallyProps.ts
View File

@ -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,

19
src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts
View File

@ -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事件
}
/**

34
src/components/jeecg/JVxeTable/src/hooks/useMethods.ts
View File

@ -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();
}
}

8
src/components/jeecg/JVxeTable/src/vxe.data.ts
View File

@ -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'];

7
src/components/jeecg/JVxeTable/utils.ts
View File

@ -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);
}

17
src/design/index.less
View File

@ -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】升级之后提示样式跟之前一致

17
src/views/demo/jeecg/JVxeTableDemo/JVxeDemo1.vue
View File

@ -3,7 +3,7 @@
<a-button @click="onToggleLoading">切换加载</a-button>
<a-button @click="onToggleDisabled">切换禁用</a-button>
</a-space>
<!--这种使用场景得用height，用maxHeight底层有问题-->
<JVxeTable
ref="tableRef"
stripe
@ -14,7 +14,7 @@
resizable
asyncRemove
clickSelectRow
:maxHeight="480"
:height="480"
:checkboxConfig="{ range: true }"
:disabledRows="{ input: ['text--16', 'text--18'] }"
:loading="loading"
@ -23,6 +23,7 @@
:dataSource="dataSource"
@removed="onJVxeRemove"
@valueChange="handleValueChange"
@blur="handleBlur"
>
<template #toolbarSuffix>
<a-button @click="handleTableCheck">表单验证</a-button>
@ -302,6 +303,11 @@
console.log('handleValueChange.event: ', event);
}
// update-begin--author:liaozhiyang---date:20230817---for：【issues/636】JVxeTable加上blur事件
function handleBlur(event){
console.log("blur",event);
}
// update-end--author:liaozhiyang---date:20230817---for：【issues/636】JVxeTable加上blur事件
/** 表单验证 */
function handleTableCheck() {
tableRef.value!.validateTable().then((errMap) => {
@ -356,7 +362,12 @@
function doDelete(deleteRows) {
return new Promise((resolve) => {
let rowId = deleteRows.map((row) => row.id);
let rowId;
if (Object.prototype.toString.call(deleteRows) === '[object Array]') {
rowId = deleteRows.map((row) => row.id);
} else {
rowId = deleteRows.id;
}
console.log('删除 rowId: ', rowId);
setTimeout(() => resolve(true), 1500);
});