Newer
Older
dxCard-admin / src / components / jeecg / JVxeTable / src / install.ts
YFJ on 23 Sep 2 KB 项目推送
import type { App } from 'vue';
// 引入 vxe-table
import 'xe-utils';
import VxeUIAll from 'vxe-pc-ui';
import VXETable /*Grid*/ from 'vxe-table';
import VXETablePluginAntd from 'vxe-table-plugin-antd';
import 'vxe-pc-ui/lib/style.css';
import 'vxe-table/lib/style.css';

import JVxeTable from './JVxeTable';
import { getEventPath } from '/@/utils/common/compUtils';
import { registerAllComponent } from './utils/registerUtils';
import { getEnhanced } from './utils/enhancedUtils';

export function registerJVxeTable(app: App) {
  // VXETable 全局配置
  const VXETableSettings = {
    // z-index 起始值
    zIndex: 1000,
    table: {},
  };

  // 添加事件拦截器 event.clearActived
  // 比如点击了某个组件的弹出层面板之后,此时被激活单元格不应该被自动关闭,通过返回 false 可以阻止默认的行为。
  VXETable.interceptor.add('event.clearActived', preventClosingPopUp);
  VXETable.interceptor.add('event.clearEdit', preventClosingPopUp);
  // 注册插件
  VXETable.use(VXETablePluginAntd);
  // 注册自定义组件
  registerAllComponent();
  // 执行注册方法
  app.use(VxeUIAll);
  app.use(VXETable, VXETableSettings);
  app.component('JVxeTable', JVxeTable);
}


/**
 * 阻止行编辑中关闭弹窗
 * @param params
 */
function preventClosingPopUp(this: any, params) {
  // 获取组件增强
  let col = params.column.params;
  // update-begin--author:liaozhiyang---date:20250429---for:【issues/8178】使用原生vxe-table组件编辑模式下失去焦点报错
  if (col === undefined) {
    // 说明使用的是纯原生的vxe-table
    return;
  }
  // update-end--author:liaozhiyang---date:20250429---for:【issues/8178】使用原生vxe-table组件编辑模式下失去焦点报错
  let { $event } = params;
  const interceptor = getEnhanced(col.type).interceptor;
  // 执行增强
  let flag = interceptor['event.clearActived']?.call(this, ...arguments);
  if (flag === false) {
    return false;
  }

  let path = getEventPath($event);
  for (let p of path) {
    let className: any = p.className || '';
    className = typeof className === 'string' ? className : className.toString();

    /* --- 特殊处理以下组件,点击以下标签时不清空编辑状态 --- */

    // 点击的标签是JInputPop
    if (className.includes('j-input-pop')) {
      return false;
    }
    // 点击的标签是JPopup的弹出层、部门选择、用户选择
    if (className.includes('j-popup-modal') || className.includes('j-depart-select-modal') || className.includes('j-user-select-modal')) {
      return false;
    }
    // 点击的是日期选择器
    if (className.includes('j-vxe-date-picker')) {
      return false;
    }
    // 执行增强
    let flag = interceptor['event.clearActived.className']?.call(this, className, ...arguments);
    if (flag === false) {
      return false;
    }
  }
}