升级vxe-table到最新版4.5.12

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": "4.5.12",
-    "vxe-table-plugin-antd": "3.0.5",
+    "vxe-table-plugin-antd": "3.1.0",
-    "xe-utils": "3.3.1",
+    "xe-utils": "3.5.13",
     "vue-json-pretty": "^2.2.4",
     "xss": "^1.0.14"
   },

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 {

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

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

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

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

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,

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) {
+  function handleBlurCommon($value) {
-    trigger('blur', { 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事件
   }
 
   /**

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 (typeof temp === 'function') {
+          disabled = temp(value, row, rowIndex);
+        } else if (isArray(temp)) {
           // 禁用规则可以是一个数组
-        if (isArray(temp)) {
+          disabled = temp.includes(value);
-          disabled = temp.includes(row[key]);
         } 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();
     }
   }

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

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

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

src/views/demo/jeecg/JVxeTableDemo/JVxeDemo1.vue

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