cnhis-design-vue 0.3.2-beta → 0.3.5-beta

package/packages/big-table/src/BigTable.vue

@@ -0,0 +1,2514 @@
+<template>
+  <div
+    class="big-table"
+    :class="{
+      mt: state.visibleCheckAllWrap || state.visibleTreeCheck || state.hasRefresh,
+      'expand-padding': !props.isNestTable,
+    }"
+    :style="{ height: state.tableHeight }"
+  >
+    <div v-if="state.hasRefresh && !props.isNestTable" class="check-wrap">
+      <p class="check-wrap-title">
+        <span>系统检测到有数据更新,</span>
+        <span class="check-wrap-btn" @click="refreshTable">点击查看</span>
+      </p>
+    </div>
+    <!-- 全选 选择框 -->
+    <div
+      v-show="state.visibleCheckAllWrap && !props.isInlineOperating && !props.isNestTable"
+      class="check-wrap"
+    >
+      <p class="check-wrap-title">
+        <span>已勾选数据共{{ allSelectedLength }}条</span>
+        <span v-show="state.visibleCheckAllWrapMore">
+          （当前页{{ state.currentPageSelectedLength }}条）
+        </span>
+      </p>
+      <template v-if="state.visibleCheckAllWrapMore && !props.asyncCount">
+        <p v-if="!visibleCancelCheckAllBtn" class="check-wrap-btn" @click="handleCheckAll">
+          <span v-if="pageVO.total > MAX_CHECK_SIZE">
+            <!-- {{ `最大勾选“${tableName}” ${MAX_CHECK_SIZE}条数据` }} -->
+            {{ `勾选全部页 ${MAX_CHECK_SIZE}条数据` }}
+          </span>
+          <span v-else>
+            <!-- {{ $t("1.9.598", { name: tableName, total }) }} -->
+            {{ `勾选全部页 ${pageVO.total}条数据` }}
+          </span>
+        </p>
+        <p v-else class="check-wrap-btn" @click="handleCancelAllCheck">取消全部勾选</p>
+      </template>
+    </div>
+    <!-- 树状表格已选 -->
+    <div
+      v-show="state.visibleTreeCheck && !props.isInlineOperating && !props.isNestTable"
+      class="check-wrap"
+    >
+      <p class="check-wrap-title">
+        <span>已勾选数据共{{ state.treeTableLength }}条</span>
+      </p>
+    </div>
+
+    <CGrid
+      ref="xGrid"
+      border
+      show-overflow
+      show-header-overflow
+      highlight-hover-row
+      highlight-current-row
+      show-footer-overflow="title"
+      keep-source
+      height="auto"
+      resizable
+      auto-resize
+      :seq-config="handleSeqConfig"
+      :tree-config="treeConfig"
+      :row-id="handleRowId"
+      :row-class-name="getRowClassName"
+      :show-footer="showFooter && !props.isInlineOperating"
+      :footer-method="footerMethod"
+      :sort-config="{ trigger: 'cell', remote: true }"
+      :span-method="colspanMethod"
+      :footer-span-method="footerRowspanMethod"
+      :tooltip-config="{ enterable: false }"
+      :checkbox-config="{
+        checkField: 'checked',
+        labelField: 'checked',
+        checkMethod: checkMethod,
+        trigger: 'cell',
+        reserve: true,
+        highlight: true,
+      }"
+      :radio-config="{
+        checkField: 'checked',
+        trigger: 'cell',
+        reserve: true,
+        highlight: true,
+      }"
+      :scroll-x="{ enabled: false }"
+      :scroll-y="{ gt: 50 }"
+      :row-style="getRowStyle"
+      :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showIcon: false }"
+      :expand-config="{
+        lazy: true,
+        accordion: columnConfig && columnConfig.accordion,
+        loadMethod: loadExpandMethod,
+        toggleMethod: toggleExpandMethod,
+        iconOpen: 'iconfont icon-a-xitongtubiaozhediejian',
+        iconClose: 'iconfont icon-a-xitongtubiaotianjia',
+      }"
+      @cell-dblclick="rowdblclick"
+      @cell-click="handlerClickRow"
+      @checkbox-change="selectionChange"
+      @checkbox-all="selectionChangeAll"
+      @radio-change="radioOnChange"
+      @sort-change="sortChange"
+      @scroll="handlerScroll"
+      @cell-mouseenter="handleCellMouseenter"
+    >
+      <template #empty>
+        <div v-if="state.isShowEmpty">
+          <NoData
+            :no-data-img="props.emptyItems.noDataImg"
+            :no-data-tip="props.emptyItems.noDataTip"
+            :show-img="!props.isNestTable"
+          ></NoData>
+        </div>
+      </template>
+      <!-- 修复 vxe-table升级3.x版本 原自定义checkbox样式失效 -->
+      <template #tooltip_checkbox="{ row, checked }">
+        <n-tooltip v-if="row.forbiddenBatchSelect" trigger="hover" placement="right">
+          <template #trigger>
+            <i class="disabled-checked-tips"></i>
+          </template>
+          {{ row.forbiddenBatchSelectReason }}
+        </n-tooltip>
+        <n-checkbox v-else class="tooltip-checkbox-item" :checked="checked"></n-checkbox>
+      </template>
+      <template #tooltip_footer="{ column }">
+        <!-- 分组统计 -->
+        <template v-if="groupCountFields && groupCountFields.length">
+          <span v-html="state.groupText"></span>
+        </template>
+        <!-- 一般统计 -->
+        <n-tooltip v-else trigger="hover">
+          <template #trigger>
+            {{ getFooterTitle(column) }}
+          </template>
+          <div v-html="getFooterTooltipTitle(column)"></div>
+        </n-tooltip>
+      </template>
+      <!-- 子列表嵌套 -->
+      <template #nest_table_content="{ row, rowIndex, $rowIndex, column }">
+        <slot name="content" :data="{ row, rowIndex, $rowIndex, column }"></slot>
+      </template>
+    </CGrid>
+    <!-- `${refreshRow}条更新` -->
+    <div
+      v-show="props.refreshRow > 0 && !props.isNestTable"
+      class="refresh"
+      @click="hanldeClickRefresh"
+    >
+      <NIcon size="14" :component="SyncOutline" />
+      <p class="refresh-row">{{ refreshRow }}条更新</p>
+    </div>
+  </div>
+</template>
+
+<script lang="tsx">
+import create from '@/core/create';
+export default create({
+  name: "BigTable"
+})
+</script>
+
+<script lang="tsx" setup>
+import { computed, nextTick, onMounted, reactive, ref, useAttrs, watch, h, resolveComponent, onActivated, onUnmounted } from "vue";
+import { useRoute } from 'vue-router';
+import bigTableState from "./bigTableState";
+import bigTableProps from "./bigTableProps";
+import bigTableEmits from "./bigTableEmits";
+import { useFormat } from "./hooks/useFormat";
+import { useTableParse } from "./hooks/useTableParse";
+import { useBatchEditing } from "./hooks/useBatchEditing";
+import { useNestTable } from "./hooks/useNestTable";
+import { SettingsSharp, SyncOutline, CopyOutline, CaretDown, CaretForward } from "@vicons/ionicons5";
+import NoData from "./components/NoData.vue";
+import TextOverTooltip from "./components/TextOverTooltip.vue";
+// import SvgIcon from '@/component/svg/index.vue';
+import SvgIcon from "./components/SvgIcon.vue";
+// import EditForm from './components/edit-form/EditForm.vue';
+import {
+  NButton,
+  NCheckbox,
+  NCheckboxGroup,
+  NSpin,
+  NTooltip,
+  NInputGroup,
+  NInput,
+  NSpace,
+  NIcon,
+  NProgress,
+  NSwitch,
+  NPopover,
+  NDropdown,
+  NPopconfirm
+} from "naive-ui";
+import { useMessage } from 'naive-ui'
+import CGrid from '~/grid';
+import vexutils from '@/utils/vexutils';
+import {
+  getEvaluate,
+  getMapVal,
+  getageShowType,
+  reScrollFilterWrap,
+  showFilter,
+  handleGroupColums,
+  handlerInitSearchItem,
+  generateEditRender,
+  getFooterGroup,
+  checkMethod,
+  flattenRow,
+  intersectRow,
+  removeCheckedDisabledRows,
+  setFilterStatus,
+  getRowStyle,
+  handleTableHeight,
+  handleName,
+  handleImgArr,
+  handleImgSrc,
+  modalDetailImage,
+  getCandidateComponents,
+  handleQrCodeContent,
+  getInlineEditBtn,
+  isCopy,
+  handleTableImageSize,
+  setDefaultFormData,
+  hideFilterWrap,
+  mergeConObjFn,
+  isLink,
+  setTableConfig,
+  setTreeGroupTitle,
+  setVisibleCheckAllWrap
+} from './utils'
+
+import xb_big from './assets/img/xb_big.png'
+import qr from './assets/img/qr.png'
+import { PROPERTY_TYPES } from '@babel/types';
+
+let _hideAllWrap: any = null;
+let _beforeSearchConvert: any = [];
+let addInlineEditPrimaryKey: any = '';
+
+const GROUP_TITLE_KEY = "group-show-title";
+
+const route = useRoute();
+
+(window as any).$message = useMessage()
+
+const xGrid: any = ref(null);
+
+const state: any = reactive(bigTableState);
+
+const emit = defineEmits(bigTableEmits);
+
+const props = defineProps(bigTableProps);
+
+const { formatData, htmlToText, getBtnStyle }: any = useFormat(state);
+const { imgs2imgArr, parseDurationValue, parseCombinationValue, formatFieldText } = useTableParse(formatData);
+const {
+  allSelectedLength,
+  checkOperateCurrentTable,
+  setRowStatus,
+  resetBatchOperationRowStatus,
+  checkListFormUnionSettingParamsList,
+  handleClickCancelBtnByInline,
+  setAllRowInlineStatus,
+  hideSelectCloumns,
+  handleEditFormLength,
+  resetOperationRowStatus,
+  recordClickBtnInfo,
+  getInlineOpreateRow
+}: any = useBatchEditing(props, state, emit, xGrid);
+
+const { 
+  isAboutNestTable,
+  isExpandTable,
+  handleRowId,
+  toggleExpandMethod,
+  loadExpandMethod,
+  nestHandleClickRow
+} = useNestTable(props, state, emit);
+
+const attr = useAttrs();
+
+/**
+ * computed
+ */
+const currentCheckedKeys = computed(() => {
+  return state.checkedRows?.map((row: any) => row[props.primaryKey]) || [];
+});
+const visibleCancelCheckAllBtn = computed(() => {
+  let isCurrentPageAllCheck = state.currentPageSelectedLength === state.curAbleCheckedLen;
+  let isMaxChecked = currentCheckedKeys.value.length === props.MAX_CHECK_SIZE;
+  let isCheckedTotal = currentCheckedKeys.value.length === props.pageVO.total;
+
+  return isMaxChecked || !isCurrentPageAllCheck || isCheckedTotal;
+});
+const singleCheckedKey = computed(() => {
+  const checkedKeys: any = currentCheckedKeys.value || [];
+  return checkedKeys.length == 1 ? checkedKeys[0] : "";
+});
+const tableNoSetting = computed(() => {
+  let { noSetting } = getOtherConfigInit() || {};
+  return noSetting || props.showSettings?.hideSettingBtn == 1;
+});
+const isScanMultiTable = computed(() => {
+  return props.columnConfig?.isScanMultiTable;
+});
+//来自batchEditing.js
+const configuration = computed(() => {
+  return {
+    userInfo: props.userInfo || {},
+    sysImageSize: props.sysImageSize || {},
+    // switchConfig: this.switchConfig || {},
+    // hospitalConfigData: this.iconObj || {}
+  };
+});
+const handlePrimaryKey = computed(() => {
+  return state.isTree > 0 ? props.primaryKey || "theUniqueKey" : "theUniqueKey";
+});
+const handleSeqConfig = computed(() => {
+  if (props.isNestTable) return { startIndex: 0 };
+  if (props.isBatchEditing) {
+    return { startIndex: 0 };
+  }
+  let startIndex = (props.pageVO.pageIndex - 1) * props.pageVO.pageSize;
+  return { startIndex: startIndex < 0 ? 0 : startIndex };
+});
+const treeConfig = computed(() => {
+  let result = null;
+  switch (Number(state.isTree)) {
+    case 1:
+    case 3:
+      result = {
+        children: "childrenList",
+        accordion: state.openOnly > 0,
+        reserve: true,
+      };
+      break;
+    case 2:
+      result = {
+        lazy: true,
+        reserve: true,
+        children: "childrenList",
+        hasChild: "hasChildren",
+        loadMethod: loadChildrenMethod,
+        accordion: state.openOnly > 0,
+      };
+      break;
+    default:
+      break;
+  }
+  return result;
+});
+const hideAllWrap = (e: any) => {
+  const path = e.path || (e.composedPath && e.composedPath());
+  const noWrap = (className: string) => {
+    return !path.some((p: any) => {
+      return p.className && p.className.includes && p.className.includes(className);
+    });
+  };
+
+  let notFilterWrap = noWrap('big-table-filter-wrap');
+  if (notFilterWrap) {
+    hideFilterWrap(state, props);
+  }
+}
+const bindDocumentClick = () => {
+  _hideAllWrap = hideAllWrap.bind(this);
+  window.document.addEventListener('click', _hideAllWrap, true);
+}
+const unBindDocumentClick = () => {
+  window.document.removeEventListener('click', _hideAllWrap, true);
+}
+onMounted(() => {
+  bindDocumentClick();
+  state.tableHeight = handleTableHeight(state, props);
+
+  // // 子列表在mounted后初始化 直接watch无法触发
+  if (!props.isNestTable) return;
+  loadColumn(props.columnConfig);
+  loadData(props.data);
+});
+onUnmounted(() => {
+  unBindDocumentClick();
+})
+onActivated(() => {
+  // 行编辑状态下 切换tab 再切回 需要重置页面样式
+  removeInsert();
+})
+const removeInsert = async () => {
+  if (state.isTree != 0) return false;
+
+  const vxeTable = xGrid.value;
+  // let { row } = this.getInlineOpreateRow();
+  let { tableData } = vxeTable.getTableData();
+  if (tableData && tableData.length) {
+    tableData.forEach((row: any) => {
+      if (row?.__isInsertRow) {
+        vxeTable.remove(row);
+      }
+    });
+  }
+  if (!state.originFormatList?.length) return;
+
+  await vxeTable.loadData(state.originFormatList);
+  resetBatchOperationRowStatus();
+}
+// 加载表格头部
+const loadColumn = (config: any) => {
+  setTableConfig(config, state);
+  // this.hasOnlyIcon = config.hasOnlyIcon;
+  let columns = formatColumns(config);
+  columns = handleGroupColums(columns, props);
+  console.log("columns--------------", columns);
+  xGrid.value && xGrid.value.reloadColumn(columns);
+
+  setGroupTreeExpand();
+  resetTableInlineEditStatus();
+};
+// 加载表格内容
+const loadData = async (data: any) => {
+  state.isShowEmpty = !data?.length;
+
+  const list = JSON.parse(JSON.stringify(data));
+  console.log("list--------------", list);
+  let table = xGrid.value;
+  if (!table) return;
+  let formatList = setChecklist(list);
+  state.originFormatList = formatList;
+
+  setGroupTitleToFristColumnFieldData(formatList);
+  console.log("formatList--------------", formatList);
+  state.curAbleCheckedLen = list.filter((item: any) => checkMethod({ row: item })).length;
+
+  // 非子列表触发
+  if (!props.isNestTable) {
+    await handleFormTheUniqueKey();
+  }
+
+  // reloadData 替换 loadData 保存setting之后需要表格重新reload
+  // loadData 加载数据
+  // reloadData 加载数据并清除所有状态
+  // 暂时 不知道是否影响其它????
+  // 还是用loadData较好，树表展开需要在更新数据后保留上一次的状态
+  // table.clearSort(); // <-- table.loadData 不会清空sort选项，导致sortChange重复触发
+  console.log("table--------------", formatList);
+  await table.loadData(formatList);
+
+  table.setCurrentRow({});
+  setCurrentPageRowChecked();
+
+  setGroupTreeExpand();
+  resetTableInlineEditStatus();
+};
+const setGroupTitleToFristColumnFieldData = (formatList: any) => {
+  if (state.isTree != 3) return;
+  let table = xGrid.value;
+  let key = table.getTableColumn().tableColumn?.find((column: any) => {
+    return !!column.property;
+  }).property;
+
+  setTreeGroupTitle(formatList, key, GROUP_TITLE_KEY);
+};
+const setCurrentPageRowChecked = () => {
+  let table = xGrid.value;
+  if (!table) return;
+  let currentPageTableData = table.getTableData()?.tableData;
+  let currentPageSelectedRows = currentPageTableData.filter((row: any) => {
+    return currentCheckedKeys.value.includes(row[props.primaryKey]);
+  });
+  setCurrentCheckedLength();
+  if (!currentPageSelectedRows || !currentPageSelectedRows.length) {
+    table.setAllCheckboxRow(false);
+    return;
+  }
+  table.setCheckboxRow(currentPageSelectedRows, true);
+};
+const setCurrentCheckedLength = () => {
+  let table = xGrid.value;
+  let currentPageTableData = table.getTableData().fullData;
+  let currentPageSelectedRows = currentPageTableData.filter((row: any) => {
+    return currentCheckedKeys.value.includes(row[props.primaryKey]);
+  });
+
+  state.currentPageSelectedLength = currentPageSelectedRows.length;
+};
+// 列数据解析逻辑
+const formatColumns = (map: any) => {
+  /**
+   * 针对 bigTable 的设置列
+   * type: 列的类型
+   * field: 列字段名（注：属性层级越深，渲染性能将直线下降）
+   * title: 列标题（支持开启国际化）
+   * width: 列宽度（如果为空则均匀分配剩余宽度，如果全部列固定了，可能会存在宽屏下不会铺满，可以配合 "%" 或者 "min-width" 布局）
+   * minWidth: 最小列宽度；会自动将剩余空间按比例分配
+   * resizable: 列是否允许拖动列宽调整大小
+   * visible: 列是否显示
+   * fixed: 将列固定在左侧或者右侧（注意：固定列应该放在左右两侧的位置）
+   * align: 列对齐方式
+   * headerAlign: 表头列的对齐方式
+   * footerAlign: 表尾列的对齐方式
+   * formatter: 格式化显示内容 Function({cellValue, row, column})
+   * sortable: 是否允许列排序
+   */
+  // 配置列表
+  let { selectType } = getOtherConfigInit() || {};
+  let { isBatchSelect, fieldList, showButtonTop, isScanMultiTable } = map;
+  if (selectType) {
+    // 有设置 selectType 强制可选。
+    isBatchSelect = 1;
+  }
+  selectType = selectType || "checkbox";
+  // 扫码弹框 设置为radio
+  let { listType } = props.tableOptions;
+  if (listType == "scanList") {
+    selectType = "radio";
+  }
+  state.selectType = selectType;
+  let tableHeight = props.styleSetting?.tableHeight || "table-simple";
+  let checkMinWidth = state.checkWidth[tableHeight] || "30";
+  const checkboxSlot = {
+    default: (data: any) => {
+      return checkMethod(data) ? null : (
+        <NTooltip placement="right" trigger="hover"
+        >
+        {{
+          default: () => data.row.forbiddenBatchSelectReason,
+          trigger: () => <i class="disabled-checked-tips"></i>
+        }}
+        </NTooltip>
+      );
+    }
+  };
+  let checkVisible = (isBatchSelect == 1 && !props.isNestTable && !isScanMultiTable) || false;
+  let columns = [
+    {
+      fixed: "left",
+      align: "center",
+      visible: isScanMultiTable || false,
+      width: "50",
+      slots: {
+        header: () => {
+          return "操作";
+        },
+        default: scanMultiOperate,
+      },
+    },
+    {
+      type: "seq",
+      fixed: props.isNestTable ? "" : "left",
+      align: "center",
+      resizable: true,
+      width: "34",
+      showOverflow: true,
+      slots: {
+        header: () => {
+          return [
+            tableNoSetting.value ? null : <NIcon size="14" color="#0e7a0d" component={SettingsSharp} onClick={() => showDrawer()} />
+          ];
+        },
+      },
+    },
+    {
+      type: selectType,
+      fixed: props.isNestTable ? "" : "left",
+      align: "center",
+      visible: checkVisible,
+      resizable: false,
+      width: checkMinWidth,
+      // slots: selectType === 'checkbox' ? checkboxSlot : null,
+      // 修复 vxe-table升级3.x版本 原自定义checkbox样式失效
+      slots:
+        selectType === "checkbox"
+          ? {
+              checkbox: "tooltip_checkbox",
+            }
+          : null,
+      showOverflow: true,
+    },
+  ];
+  // let showOperatorColumn = true;
+  // if (showButtonTop == 1) {
+  //   showOperatorColumn = hasOnlyIcon;
+  // }
+
+  const currentColumns = fieldList.map((item: any, index: number) => {
+    let filterField = item?.fieldSetting?.mapping?.type === "manual" && item.isMerge != 1;
+    // 是否排序 1 不可排序
+    let notParticipatingSort = item?.fieldSetting?.notParticipatingSort || "";
+    // 有子列表fixed会遮盖 所以主表不设置fixed
+    let fixed = isAboutNestTable.value
+      ? ""
+      : item.isFixed
+      ? item.isFixed == 1
+        ? "left"
+        : "right"
+      : "";
+    let sortable = props.isNestTable
+      ? false
+      : !filterField && item.isSort == 1 && notParticipatingSort != 1 && item.isMerge != 1;
+    let treeNode = props.isNestTable ? false : state.isTree != 0 ? index === 0 : false;
+    let type = index === 0 && props.showNestTable ? "expand" : "";
+
+    // 扫码打开的table只展示
+    if (isScanMultiTable) {
+      fixed = "";
+      sortable = false;
+      treeNode = false;
+      type = "";
+    }
+
+    const col = Object.assign(item, {
+      visible: item.columnName == "operatorColumn" ? showButtonTop == 0 : item.isShow == 1,
+      field: item.columnName,
+      title: handleName(item, "title"),
+      minWidth: item.colWidth,
+      fixed: fixed,
+
+      sortable: sortable,
+      // 参数 "column.remote-sort" 已废弃，请使用 "sort-config.remote"
+      // remoteSort: !filterField && item.isSort == 1 && notParticipatingSort != 1,
+
+      headerClassName: "mycolumn", // 文本溢出处理('tooltip' vxe-table当前版本存在bug)
+      // showHeaderOverflow: "title",
+      showOverflow: "title",
+      treeNode: treeNode,
+      type: type,
+      slots: {
+        default: (params: any) => {
+          return formatter(params, item);
+        },
+      },
+      editRender: generateEditRender(item),
+    });
+
+    if (filterField && !props.isNestTable && !isScanMultiTable) {
+      state.filterFields[item.columnName] = Object.assign(
+        {},
+        vexutils.clone(item, true),
+        {
+          visible: false,
+          left: "initial",
+          right: "initial",
+          top: "initial",
+          indeterminate: false,
+          checkAll: false,
+          searchFilterText: "",
+          searchFilterCONVERT: [],
+          filterSort: "",
+        }
+      );
+      let field = state.filterFields[item.columnName];
+      handlerInitSearchItem([field]);
+      col.slots.header = formatterHeader(item);
+    } else {
+      col.slots.header = toolTipTitle(item);
+    }
+
+    if (!isScanMultiTable) {
+      col.slots.footer = "tooltip_footer";
+    }
+
+    // 主表设置expand
+    if (props.showNestTable && state.isTree == 0 && props.curNestColumnConfig?.isTree == 0) {
+      col.slots.content = "nest_table_content";
+    }
+
+    return col;
+  });
+  columns.push(...currentColumns);
+  state.columnLen = currentColumns.filter((item: any) => item.visible).length;
+  return columns;
+};
+// 表格渲染逻辑
+const formatter = (params: any, col: any) => {
+  let { row, column, $rowIndex } = params;
+  let own = column?._own || column?.own || col;
+  let attrType = own?.attrType || "";
+
+  // 批量行编辑
+  let formUnionItem = showEditForm(row, column, $rowIndex);
+  if (formUnionItem) {
+    let dynamicProps = initBatchDynamicProps(formUnionItem, row, column, $rowIndex);
+    if (dynamicProps) {
+      // console.log(dynamicProps);
+      // loading 使用
+      emit("setWaitEditKeys", column.property);
+      return null
+      // return [
+      //   <EditForm class={`js-inlineEditForm`} key={row[props.primaryKey] + $rowIndex + column.property} data-key={row[props.primaryKey] + $rowIndex + column.property} {...dynamicProps}></EditForm>
+      // ];
+    }
+  }
+
+  if (vexutils.has(row, GROUP_TITLE_KEY)) {
+    return row[GROUP_TITLE_KEY];
+  }
+  if (attrType == "PICTURE" || attrType == "HEADPORTRAIT") {
+    return getPicture(row, own, attrType);
+  }
+  if (attrType == "COLOR") {
+    return getColor(row, own);
+  }
+  if (attrType == "EVALUATE") {
+    return getEvaluate(row, own);
+  }
+  if (attrType == "MAP") {
+    return getMapVal(row, own);
+  }
+  if (attrType == "DATE" || attrType == "TASKDATE") {
+    return getDate(row, own);
+  }
+  if (attrType == "PERCENTAGE") {
+    return getPercentage(row, own);
+  }
+  if (attrType == "VIDEO") {
+    return getvideoList(row, own);
+  }
+  // 选人组件数据展示解析
+  if (attrType == "CANDIDATE_COMPONENTS") {
+    return getCandidateComponents(row, own);
+  }
+  if (attrType == "AGE") {
+    return getageShowType(row, own);
+  }
+  if (attrType === "COUNTDOWN") {
+    return <NTooltip>
+            {{
+              trigger: () => <span innerHTML={row[own.columnName + "_countdown"] || ""} />,
+              default: () => row[own.columnName + "_countdownTip"]
+            }}
+            </NTooltip>
+  }
+  // 时长
+  if (attrType === "DURATION") {
+    const value = row[own.columnName];
+    const duration = own?.fieldSetting?.duration;
+    return parseDurationValue(value, duration);
+  }
+  // 组合组件
+  if (attrType === "COMBINATION") {
+    const value = row[own.columnName];
+    const params = own.fieldSetting || {};
+    const data = parseCombinationValue(value, params);
+    return data ? [<span title={data}>{data}</span>] : "";
+  }
+  if (attrType === "PASSWORD") {
+    const value = row[own.columnName];
+    return [<password-com value={value} styleSetting={props.styleSetting} />];
+  }
+  // 二维码
+  if (attrType === "QR_CODE") {
+    return getOrCode(row, own, attrType);
+  }
+
+  if (column.property === "operatorColumn") {
+    if (state.showButtonTop != 0 || props.isBatchEditing) return;
+    const inlineBtnList = generateInlineBtnList(row, $rowIndex);
+    const tileBtnList = getTileBtnList(row, $rowIndex);
+    const foldBtnList = getFoldBtnList(row, $rowIndex);
+    return [
+      <span>
+        {tileBtnList}
+        {foldBtnList}
+        {inlineBtnList}
+      </span>,
+    ];
+  }
+
+  if (isLink(props, own, row) && !isScanMultiTable.value) {
+    if (own.btnLinkSwitch) {
+      let disabled = false;
+      let curBtn = row.btnList?.find((v: any) => v.name == own.columnName);
+      if (curBtn && "authorizedMark" in curBtn) {
+        if (!curBtn.authorizedMark) {
+          disabled = true;
+        }
+      }
+      return getBtnLinkSwitch(row, own, disabled, $rowIndex);
+    } else {
+      return getField(row, own, $rowIndex, true);
+    }
+  } else {
+    return getField(row, own, $rowIndex, false);
+  }
+};
+// 表头渲染逻辑
+const formatterHeader = (item: any) => {
+  let field = state.filterFields[item.columnName];
+  return () => {
+    return [
+      <div class="filter-box">
+        {toolTipTitle(item, "format")}
+        <i
+          class={[
+            "vxe-filter--icon",
+            "vxe-filter--btn",
+            "vxe-icon--funnel",
+            { active: field.visible || field.filterSort },
+            { checked: field.CONVERT?.length },
+          ]}
+          onClick={event => showFilter(field, item.columnName, event, props, state)}
+        />
+        {field.visible ? (
+          <teleport to={props.filterDomPortal}>
+            <div
+              class="big-table-filter-wrap"
+              style={{
+                left: field.left,
+                right: field.right,
+                top: field.top,
+                width: state.filterWidth + state.distance + "px",
+              }}
+            >
+              <div class="sort-list" style={{ display: field.isSort ? "block" : "none" }}>
+                <div
+                  class={["sort-item", { active: field.filterSort === "asc" }]}
+                  onClick={() => handlefilterBoxClickSort("asc", field)}
+                >
+                  <i class="sort-icon sort-icon-asc" />
+                  <span class="sort-text">升序 A to Z</span>
+                </div>
+                <div
+                  class={["sort-item", { active: field.filterSort === "desc" }]}
+                  onClick={() => handlefilterBoxClickSort("desc", field)}
+                >
+                  <i class="sort-icon sort-icon-asc" />
+                  <span class="sort-text">降序 Z to A</span>
+                </div>
+              </div>
+
+              <div class="filter-header">
+                <i class="filter-header-icon vxe-filter--btn vxe-icon--funnel" />
+                <span class="filter-header-text">筛选</span>
+              </div>
+
+              {field.setting.showSetting.length > 5 ? (
+                <div class="checkbox-wrap checkbox-wrap--search">
+                  <div class="check-search-wrap">
+                    <NInputGroup>
+                      <NInput
+                        style={{ width: "50%" }}
+                        placeholder="字段搜索"
+                        class="check-seach-input"
+                      />
+                      <NButton
+                        type="primary"
+                        onClick={(val: any) => {
+                          handleFilterSeach(val, field);
+                        }}
+                      >
+                        搜索
+                      </NButton>
+                    </NInputGroup>
+                  </div>
+                </div>
+              ) : (
+                ""
+              )}
+              <div class="checkbox-box">
+                <div
+                  class="checkbox-wrap js-checkbox-wrap"
+                  style={{ height: state.filterHeight + state.distance + "px" }}
+                >
+                  {!field.searchFilterText ? (
+                    <div class="ant-checkbox-group">
+                      <NCheckbox
+                        indeterminate={field.indeterminate}
+                        checked={field.checkAll}
+                        onUpdateChecked={(val: any) => {
+                          handleFilterChangeAll(val, field);
+                        }}
+                      >
+                        全选
+                      </NCheckbox>
+                    </div>
+                  ) : (
+                    ""
+                  )}
+
+                  {!field.searchFilterText ? (
+                    <NCheckboxGroup
+                      value={field.CONVERT}
+                      onUpdateValue={(val: any) => handleFilterChange(val, item.columnName, field)}
+                    >
+                      <NSpace item-style="display: flex;">
+                        {field.setting.showSetting.map((item: any) => {
+                          return <NCheckbox value={item.value} label={item.label} />;
+                        })}
+                      </NSpace>
+                    </NCheckboxGroup>
+                  ) : (
+                    <NCheckboxGroup
+                      value={field.searchFilterCONVERT}
+                      onUpdateValue={(val: any) =>
+                        handleFilterSearchChange(val, item.columnName, field)
+                      }
+                    >
+                      <NSpace item-style="display: flex;">
+                        {field.setting.showSetting
+                          .filter((item: any) => {
+                            if (!field.searchFilterText) return item;
+                            let reg = new RegExp(field.searchFilterText);
+                            return reg.test(item.label);
+                          })
+                          .map((item: any) => {
+                            return <NCheckbox value={item.value} label={item.label} />;
+                          })}
+                      </NSpace>
+                    </NCheckboxGroup>
+                  )}
+                </div>
+              </div>
+
+              <div
+                class="checkbox-btn-wrap"
+                style={{ justifyContent: field.CONVERT.length ? "space-between" : "flex-end" }}
+              >
+                {field.CONVERT.length ? (
+                  <div class="checkbox-btn-status">
+                    <span>已选择{field.CONVERT.length}项</span>
+                    <NButton
+                      class="checkbox-btn checkbox-btn-clear"
+                      text
+                      onClick={() => handleFilterClearAll(field)}
+                    >
+                      清空
+                    </NButton>
+                  </div>
+                ) : null}
+                <div>
+                  <NButton class="checkbox-btn" onClick={() => handleCancelFilter()}>
+                    取消
+                  </NButton>
+                  <NButton class="checkbox-btn" type="primary" onClick={() => handleFilter(field)}>
+                    确定
+                  </NButton>
+                </div>
+              </div>
+              <div
+                class="arrows-icon"
+                // onmousedown={(e: any) => {
+                //   onmousedownFunc(e);
+                // }}
+              ></div>
+            </div>
+          </teleport>
+        ) : (
+          ""
+        )}
+      </div>,
+    ];
+  };
+};
+const handlefilterBoxClickSort = (sort: any, field: any) => {
+  if (field.filterSort === sort) {
+    sort = null;
+  } else {
+    xGrid.value.clearSort();
+  }
+
+  field.filterSort = sort;
+  emit("sortChange", { prop: field.columnName, order: sort });
+};
+const handleFilterSeach = (val: any, field: any) => {
+  field.searchFilterText = val;
+
+  if (val === "") {
+    field.checkAll = field.CONVERT.length === field.setting.showSetting.length;
+    field.indeterminate =
+      !!field.CONVERT.length && field.CONVERT.length !== field.setting.showSetting.length;
+    return;
+  }
+
+  field.searchFilterCONVERT = field.setting.showSetting
+    .filter((item: any) => {
+      return field.searchFilterText === item.label && field.CONVERT.includes(item.value);
+    })
+    .map((item: any) => item.value);
+
+  _beforeSearchConvert = field.searchFilterCONVERT;
+};
+const handleFilterChangeAll = (e: any, field: any) => {
+  reScrollFilterWrap();
+  let checked = e.target.checked;
+  field.indeterminate = false;
+  field.checkAll = checked;
+
+  state.filterFields[field.columnName].CONVERT = checked
+    ? field.setting.showSetting.map((item: any) => {
+        return item.value;
+      })
+    : [];
+};
+const handleFilterChange = (value: any, name: any, field: any) => {
+  reScrollFilterWrap();
+  state.filterFields[name].CONVERT = value;
+
+  field.checkAll = value.length === field.setting.showSetting.length;
+  field.indeterminate = !!value.length && value.length !== field.setting.showSetting.length;
+};
+const handleFilterSearchChange = (value: any, columnName: any, field: any) => {
+  reScrollFilterWrap();
+  /* filter-check-group value更新 触发 主check-group value同步更新 */
+  let isAdd = _beforeSearchConvert.length < value.length;
+  if (isAdd) {
+    let addItems = value.filter((item: any) => {
+      return !_beforeSearchConvert.includes(item);
+    });
+    state.filterFields[columnName].CONVERT.push(...addItems);
+  } else {
+    let removeItems = _beforeSearchConvert.filter((item: any) => {
+      return !value.includes(item);
+    });
+    state.filterFields[columnName].CONVERT = state.filterFields[columnName].CONVERT.filter(
+      (item: any) => {
+        return !removeItems.includes(item);
+      }
+    );
+  }
+
+  field.searchFilterCONVERT = value;
+  _beforeSearchConvert = vexutils.clone(value, true);
+};
+const handleFilterClearAll = (field: any) => {
+  field.indeterminate = false;
+  field.checkAll = false;
+  state.filterFields[field.columnName].CONVERT = [];
+  if (field.searchFilterCONVERT) {
+    state.filterFields[field.columnName].searchFilterCONVERT = [];
+  }
+  handleFilter(field);
+};
+const handleCancelFilter = () => {
+  hideFilterWrap(state, props);
+};
+const handleFilter = (field: any) => {
+  let conObj = mergeConObjFn(state, props);
+  emit("onSave", conObj, false, [], [], { isBigTable: true });
+  field.visible = false;
+};
+const onmousedownFunc = (e: any) => {
+  state.startX = e.screenX;
+  maskInsert();
+};
+const maskInsert = () => {
+  let mask = state.mask || maskCreate();
+  document.body.appendChild(mask);
+};
+const maskCreate = () => {
+  if (state.mask) return state.mask;
+  const mask: any = document.createElement("div");
+  mask.style = "position:fixed;top:0;bottom:0;left:0;right:0;z-index:99999;cursor:nw-resize";
+  mask.addEventListener("mousemove", maskMove);
+  mask.addEventListener("mouseup", maskUp);
+  state.mask = mask;
+  return mask;
+};
+const maskMove = (e: any) => {
+  state.distance = e.screenX - state.startX;
+};
+const maskUp = (e: any) => {
+  state.filterHeight = state.filterHeight + state.distance;
+  state.filterWidth = state.filterWidth + state.distance;
+  state.distance = 0;
+  state.startX = 0;
+  const mask = state.mask;
+  if (!mask) return;
+  mask.parentNode && mask.parentNode.removeChild(mask);
+  mask.removeEventListener("mousemove", maskMove);
+  mask.removeEventListener("mouseup", maskUp);
+  state.mask = null;
+};
+const setGroupTreeExpand = () => {
+  let isExpand = state.isTree == 1 && state.isExpand == 1 && state.total < 1001;
+  if (state.isTree == 3 || isExpand) {
+    let table = xGrid.value;
+    nextTick(() => {
+      table.setAllTreeExpand(true);
+    });
+  }
+};
+const resetTableInlineEditStatus = () => {
+  if (!checkOperateCurrentTable()) return false;
+  handleClickCancelBtnByInline();
+};
+const toolTipTitle = (item: any, type?: any) => {
+  // let feildDescribe =
+  //   (item.fieldSetting && this.$t(item.fieldSetting?.feildDescribeI18n)) ||
+  //   item.fieldSetting?.feildDescribe ||
+  //   "";
+  let name = item.formTitle || item.alias || item.title;
+  // let tooltipTitle = feildDescribe || item.alias;
+  let tooltipTitle = item.alias;
+  let isAlias = false;
+  if (props.tableOptions?.dataSourceType == "guage") {
+    tooltipTitle = item.alias || item.title;
+  }
+  if (name && tooltipTitle && name !== tooltipTitle) {
+    isAlias = !!tooltipTitle;
+  }
+
+  if (type === "format") return <TextOverTooltip tooltipTitle={tooltipTitle} content={name} isAlias={isAlias} />
+  return () => {
+    return [
+      <TextOverTooltip tooltipTitle={tooltipTitle} content={name} isAlias={isAlias}>
+        {item.treeNode && state.isTree == 1 ? <NIcon component={state.isExpand && state.total < 1001 ? CaretDown : CaretForward} onClick={(e: any) => triggerExpand(e, state.isExpand)} /> : ''}
+      </TextOverTooltip>
+    ];
+  };
+};
+// 针对非异步加载的树
+const triggerExpand = (e: any, isExpand: any) => {
+  e.preventDefault();
+  e.stopPropagation();
+  let table = xGrid.value;
+  if (state.total > 1000) {
+    (window as any).$message.warning("当前数据量超过1000条，无法全部展开！");
+  } else {
+    state.isExpand = !isExpand;
+    if (isExpand) {
+      table.clearTreeExpand();
+    } else {
+      emit("triggerSpinning", true);
+      setTimeout(() => {
+        table.setAllTreeExpand(true).then(() => {
+          emit("triggerSpinning", false);
+        });
+      }, 100);
+    }
+  }
+};
+const getOtherConfigInit = () => {
+  let tableOptions: any = attr?.tableOptions || props.tableOptions || {};
+  const config = tableOptions?.config || {};
+  return config || undefined;
+};
+//刷新列表
+const refreshTable = () => {
+  state.hasRefresh = false;
+  emit("refreshTable");
+  // this.DELETE_TABLE_REFRESH_CACHE(this.tableParams.tableId);
+};
+/* 全选相关 */
+const handleCheckAll = () => {
+  if (props.pageVO.total > props.MAX_CHECK_SIZE) {
+    let text = `当前列表共${props.pageVO.total}条数据，为了确保系统安全，只能单次操作${props.MAX_CHECK_SIZE}条，你可以通过高级筛选过滤再次尝试`;
+    (window as any).$message.warning(text);
+    // return false;
+  }
+  emit("selectionChangeAll");
+};
+const handleCancelAllCheck = () => {
+  emit("selectionChangeAllCancel");
+};
+const getRowClassName = () => {
+  return state.selectType === "checkbox"
+    ? ({ row }: { row: any }) => {
+        const k = singleCheckedKey.value;
+        return k && k === row[props.primaryKey] ? "single--checked" : "";
+      }
+    : () => {};
+};
+// 统计
+const footerMethod = ({ columns, data }: { columns: any; data: any }) => {
+  // 原统计逻辑
+  if (!props.groupCountFields || !props.groupCountFields.length) {
+    return [
+      columns.map((column: any, index: number) => {
+        if (index === 0) {
+          // return that.$root.$t('1.1.8.2.5');
+          return null;
+          // return demo();
+        }
+        return null;
+        // return demo();
+      }),
+    ];
+  }
+  // 分组统计
+  let groupText = getFooterGroup(columns, data, props);
+  let groupColumns = columns.map((column: any, index: number) => {
+    if (index === 0) {
+      // return that.$root.$t('1.1.8.2.5');
+      // return demo();
+      return null;
+    } else if (index === 1) {
+      return groupText;
+    }
+    return null;
+    // return demo();
+  });
+  emit("setGroupText", groupText);
+  state.groupText = groupText;
+  return [groupColumns];
+};
+// 懒加载树子节点
+const loadChildrenMethod = ({ row }: { row: any }) => {
+  // vxe-table v2.x 未根据 checkMethod 禁用逻辑 直接根据父级决定子级checked状态
+  // 所以先设置 父级 checked false 再 恢复原状 顺便选中子级
+  const fixCheckedStatus = (children: any) => {
+    const needFix =
+      state.selectType == "checkbox" &&
+      row.checked &&
+      children.findIndex((item: any) => !checkMethod({ row: item })) >= 0;
+    if (needFix) {
+      needFix && (row.checked = false);
+      setTimeout(() => {
+        xGrid.value?.setCheckboxRow(row, true);
+      }, 0);
+    }
+  };
+  if (state.isTree == 2) {
+    const { tableId, page, pageSize, autograph, isTreeOrList } = props.tableParams;
+    const params = {
+      levelLazyLoadPrimaryKeyValue: row[props.primaryKey],
+      tableId,
+      page,
+      pageSize,
+      autograph,
+      isTreeOrList,
+    };
+
+    return getAsyncTableData(params).then(({ data }: any) => {
+      if (data.result == "SUCCESS") {
+        let cloneRows = JSON.parse(JSON.stringify(data.map.rows));
+        let { fieldList, btnList, showButtonTop } = props.columnConfig;
+        let rowNodes = formatData({
+          tableList: data.map.rows,
+          fieldList,
+          btnList,
+          oldtableData: cloneRows,
+          showButtonTop,
+        });
+        rowNodes = setChecklist(rowNodes);
+        emit("refreshOldTableData", cloneRows);
+        fixCheckedStatus(rowNodes);
+        return rowNodes;
+      }
+    });
+  } else {
+    fixCheckedStatus(row.childrenList);
+    return Promise.resolve(row.childrenList);
+  }
+};
+// 懒加载请求子集
+const getAsyncTableData = (params: any) => {
+  return Promise.resolve();
+  // return this.axios.post('/tableReader/getTableData', this.$qs.stringify(params));
+};
+const setChecklist = (list: any) => {
+  return list.map((i: any) => {
+    // this.$set(i, 'checked', false);
+    i["checked"] = false;
+    if (state.isTree == 2) {
+      const treeNodeKey = state.levelLazyLoadSetting.childCountKey;
+      const { isTreeOrList = "" } = props.tableParams;
+      if (treeNodeKey && Number(i[treeNodeKey]) > 0) {
+        // isTreeOrList != 'LIST' && this.$set(i, 'hasChildren', true);
+        isTreeOrList != "LIST" && (i["hasChildren"] = true);
+      }
+    }
+    if (i.childrenList && i.childrenList.length) {
+      i.childrenList = setChecklist(i.childrenList);
+    }
+    // 处理富文本字段，转为字符串,判断是否为富文本,中转标志_temp+id，/<[^>]+>/g.test(i[item].replace(/<span (.*?)>(.*?)<\/span>$/g, ""))处理过大文本会卡住，replace的问题，直接判断有没有p元素就行
+    Object.keys(i).map(item => {
+      if (
+        i[item] &&
+        typeof i[item] == "string" &&
+        i[item].indexOf("<p") !== -1 &&
+        item.indexOf("_temp_" + i.id) === -1
+      ) {
+        i[item + "_temp_" + i.id] = i[item] || "";
+        i[item] = htmlToText(i[item]);
+      }
+    });
+    return {
+      ...i,
+    };
+  });
+};
+// 分组列表，合并分组标题单元格
+const colspanMethod = ({ row, column, _rowIndex, _columnIndex }: any) => {
+  if (state.isTree != 3) {
+    return {
+      rowspan: 1,
+      colspan: 1,
+    };
+  }
+
+  let xTree = xGrid.value;
+  let fristKeyIndex = xTree.getTableColumn().tableColumn.findIndex((column: any) => {
+    return !!column.property;
+  });
+  let colspan = xTree.getTableColumn().tableColumn.length - fristKeyIndex;
+  if (row.childrenList && row.childrenList.length && xTree) {
+    if (column.treeNode) {
+      return {
+        rowspan: 1,
+        colspan: colspan,
+      };
+    } else if (!column.property) {
+      return {
+        rowspan: 1,
+        colspan: 1,
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0,
+      };
+    }
+  }
+};
+// 表尾合并
+const footerRowspanMethod = (obj: any) => {
+  // 不是分组统计 不需要合并col
+  if (!props.groupCountFields || !props.groupCountFields.length) return { rowspan: 1, colspan: 1 };
+  let { $rowIndex, _columnIndex, column } = obj;
+  let len = state.columnLen || 99;
+  let { isBatchSelect } = props.columnConfig;
+  if ($rowIndex === 0) {
+    // 有 checkbox radio
+    if (isBatchSelect == 1) {
+      if (_columnIndex === 0) {
+        return { rowspan: 1, colspan: 2 };
+      } else if (_columnIndex === 1) {
+        return { rowspan: 1, colspan: 0 };
+      } else if (_columnIndex === 2) {
+        return { rowspan: 1, colspan: len };
+      }
+      return { rowspan: 1, colspan: 0 };
+    }
+    if (_columnIndex === 0) {
+      return { rowspan: 1, colspan: 1 };
+    } else if (_columnIndex === 1) {
+      return { rowspan: 1, colspan: len };
+    }
+    return { rowspan: 1, colspan: 0 };
+  }
+};
+// 行双击
+const rowdblclick = ({ row, column }: any) => {
+  if (isScanMultiTable.value || !!props.isInlineOperating) return false;
+  if (vexutils.has(row, GROUP_TITLE_KEY)) return false;
+  emit("setNestTableClick", props.isNestTable);
+  emit("rowdblclick", row, column, true, true);
+};
+const pubCheckChange = (rows: any[] = []) => {
+  state.treeTableLength = rows.filter(item => {
+    let isGroupRow = vexutils.has(item, GROUP_TITLE_KEY);
+    return !isGroupRow;
+  }).length;
+  state.visibleTreeCheck = rows.length > 1;
+  emit('selectionChange', rows);
+}
+const updateAddCheckedRows = (rows: any, isTree: boolean = false) => {
+  let obj = {
+    isUpdate: true,
+    updateRows: rows,
+    isTree
+  };
+  if (isTree) {
+    Object.assign(obj, {
+      isTree,
+      isCheckedChange: true,
+      checkedRows: state.checkedRows
+    });
+  }
+  emit('selectionChangeLocal', obj);
+}
+const removeCheckedRows = (rows: any, isCheckedChange?: any) => {
+  removeCheckedDisabledRows(state);
+  let checkedRows = state.checkedRows;
+  let needRemoveIndexs = [];
+
+  for (let i = 0; i < rows.length; i++) {
+    let row = rows[i];
+    let removeIndex = currentCheckedKeys.value.findIndex((item: any) => {
+      return item === row[props.primaryKey];
+    });
+
+    removeIndex >= 0 && needRemoveIndexs.push(removeIndex);
+  }
+
+  needRemoveIndexs.sort((a, b) => b - a); // 从后往前删除
+
+  emit('selectionChangeLocal', {
+    isAdd: false,
+    isCheckedChange,
+    needRemoveIndexs,
+    newCheckedRows: [], // 防止报错
+    checkedRows
+  });
+}
+const setCheckedMehod = (setChecked: any, row: any) => {
+  if (setChecked) {
+    updateAddCheckedRows(row);
+    return;
+  }
+  // 跨页时 清空之前
+  if (props.pageVO.pageIndex != state.lastPageIndex) {
+    updateAddCheckedRows(row);
+    return;
+  }
+  if (currentCheckedKeys.value.includes(row[props.primaryKey])) {
+    removeCheckedRows([row]);
+    return;
+  }
+  updateAddCheckedRows(row);
+}
+//行点击
+const handlerClickRow = (data: any) => {
+  console.log("data");
+  if (isScanMultiTable.value || props.isInlineOperating) return false;
+  if (vexutils.has(data?.row, GROUP_TITLE_KEY)) return false;
+  if (state.isTriggerSelectionChange && state.isTree == 0) return false;
+  let table = xGrid.value;
+  // 嵌套表与主表click切换时需要清除上次的选中
+  isAboutNestTable.value && emit('resetNestLastClickTable', table);
+
+  let { row, $event = {}, $rowIndex } = data;
+  // 点击主表格展开行按钮 不需要触发选中行
+  let { className } = $event.target || {};
+  if (className && vexutils.isString(className) && className.includes('vxe-table--expand-btn')) return;
+
+  // 记录上次点击table信息 用于清除
+  isAboutNestTable.value && emit('setNestLastClickTable', table, props.isNestTable, row[handleRowId.value], row);
+
+  emit('setNestTableClick', false);
+
+  // 子列表中点击行 需要特别处理行级按钮
+  if (props.isNestTable) {
+    table?.setAllCheckboxRow(false);
+    nestHandleClickRow(table, data);
+    return;
+  }
+
+  let forbiddenBatchSelect = !checkMethod(data);
+  // 如果该行禁止批量多选，则选择/取消单行 并触发单击事件
+  if (state.selectType == 'checkbox' && forbiddenBatchSelect) {
+    table?.setAllCheckboxRow(false);
+    const value = getRowClassName()({ row }) == 'single--checked' ? [] : [row];
+    state.checkedRows = value;
+    pubCheckChange(value);
+    emit('handlerClickRow', row, $rowIndex);
+    return;
+  }
+  state.visibleCheckAllWrap = false;
+  state.visibleCheckAllWrapMore = false;
+
+  let checked = false;
+  if (state.selectType == 'radio') {
+    checked = table.isCheckedByRadioRow(row);
+  } else {
+    checked = table.isCheckedByCheckboxRow(row);
+  }
+  // 如果是点击 radio 选中的，处理冲突。先执行 radioOnChange 再 handlerClickRow
+  if (state.isradioChange) {
+    checked = false;
+    state.isradioChange = false;
+  }
+  let checkedRow = table.getCheckboxRecords();
+  let rowLen = state.checkedRows.filter((item: any) => !vexutils.has(item, GROUP_TITLE_KEY)).length;
+  let newRow: any[] = [];
+  if (state.isTree != 0) {
+    // 点击树形表格的按钮 不需要触发选中行
+    let { className } = $event.target || {};
+    if (className && className.includes('vxe-tree--node-btn')) return;
+    // 树表格，点击行无需选中复选框
+    if (state.selectType === 'checkbox') {
+      let rowVal = {};
+      if (!state.isTriggerSelectionChange) {
+        table.setAllCheckboxRow(false);
+        state.checkedRows = [row];
+        pubCheckChange([row]);
+        rowVal = row;
+      } else {
+        if (checkedRow.length > 1) return false;
+        rowVal = checked || (checkedRow.length === 1 && !checked) ? checkedRow[0] : {};
+        state.checkedRows = [rowVal];
+      }
+      updateAddCheckedRows(rowVal, true);
+      // 需要选中行
+      emit('handlerClickRow', rowVal);
+      return;
+    }
+    let newTheUniqueKeyArr: any[] = [];
+    flattenRow(row, newRow, newTheUniqueKeyArr, handleRowId.value);
+    let res = intersectRow(checkedRow, newTheUniqueKeyArr, handleRowId.value);
+    if (!res) {
+      rowLen = 1;
+    } else {
+      rowLen = checkedRow.filter((item: any) => !vexutils.has(item, GROUP_TITLE_KEY)).length;
+    }
+  }
+  table.setAllCheckboxRow(false);
+  // 全选后/数据大于一条 单击行只剩这一行 取消其他
+  // 只有一条选中 单击行 取消选中
+  let setChecked = checked;
+  if (rowLen > 1) {
+    state.selectType != 'radio' && table.setCheckboxRow([row], true);
+    state.isTree != 0 && state.selectType != 'radio' && pubCheckChange(newRow);
+    state.selectType != 'radio' && emit('handlerClickRow', row, $rowIndex);
+  } else {
+    setChecked = !setChecked;
+    if (!setChecked) {
+      table.clearCurrentRow();
+      state.selectType == 'radio' && table.clearRadioRow();
+      state.isTree != 0 && state.selectType != 'radio' && pubCheckChange([]);
+    } else {
+      state.selectType == 'radio' && table.setRadioRow(row);
+      state.isTree != 0 && state.selectType != 'radio' && pubCheckChange(newRow);
+    }
+    state.selectType != 'radio' && table.setCheckboxRow([row], setChecked);
+  }
+  if (state.isTree != 0) {
+    setChecked && emit('handlerClickRow', row, $rowIndex);
+    return;
+  }
+
+  setCheckedMehod(setChecked, row);
+  if (setChecked || rowLen > 1 || !rowLen) {
+    state.checkedRows = [row];
+  }
+  if (!setChecked && rowLen === 1) {
+    state.checkedRows = [];
+  }
+  setCurrentCheckedLength();
+  state.lastPageIndex = props.pageVO.pageIndex;
+  setChecked && emit('handlerClickRow', row, $rowIndex);
+};
+const addCheckedRows = (rows: any) => {
+  removeCheckedDisabledRows(state);
+  let checkedRows = state.checkedRows;
+
+  if (currentCheckedKeys.value.length + rows.length > props.MAX_CHECK_SIZE) {
+    (window as any).$message.warning(`为了保证系统安全，单次操作数据量限额为${props.MAX_CHECK_SIZE}条，你可以通过高级筛选过滤后再次尝试`);
+    return false;
+  }
+
+  let newCheckedRows = rows.filter((row: any) => {
+    return !currentCheckedKeys.value.includes(row[props.primaryKey]);
+  });
+  checkedRows.push(...newCheckedRows);
+
+  emit('selectionChangeLocal', {
+    isAdd: true,
+    isCheckedChange: true,
+    newCheckedRows,
+    checkedRows
+  });
+}
+const treeTableSelectionChange = (records: any) => {
+  if (state.isTree == 0) {
+    return false;
+  }
+
+  pubCheckChange(records);
+  return true;
+}
+const selectionChange = ({ checked, row, records }: any) => {
+  // HACK: 防止点击多选框时，触发cell-click(行选中)事件
+  // $event.stopPropagation、$event.preventDefault，点击多选框列的空白处触发多选事件，无法阻止事件冒泡触发cell-click事件
+  let table = xGrid.value;
+  table.clearCurrentRow();
+  state.isTriggerSelectionChange = true;
+  setTimeout(() => {
+    state.isTriggerSelectionChange = false;
+  }, 0);
+
+  if (treeTableSelectionChange(records)) return;
+
+  if (checked) {
+    addCheckedRows([row]);
+  } else {
+    removeCheckedRows([row], true);
+  }
+
+  setCurrentCheckedLength();
+};
+const selectionChangeAll = ({ checked, records }: any) => {
+  if (treeTableSelectionChange(records)) return;
+  if (checked) {
+    addCheckedRows(records);
+  } else {
+    removeCheckedRows(props.data);
+  }
+  setCurrentCheckedLength();
+};
+// 单选
+const radioOnChange = (rowData: any = {}) => {
+  let { data, row, $rowIndex } = rowData;
+  emit("selectionChange", [{ ...row }]);
+  // this.isradioChange = true;
+};
+// 排序
+const sortChange = ({ property, order }: any) => {
+  if (props.isInlineOperating) return false;
+  // 重置自定义表头排序
+  Object.values(state.filterFields).forEach((item: any) => (item.filterSort = null));
+
+  emit("sortChange", { prop: property, order });
+};
+const showDrawer = () => {
+  const theads =
+    xGrid.value.$el.childNodes[0].childNodes[1].childNodes[0].getElementsByClassName("mycolumn");
+  emit("setNestTableClickSetting", props.isNestTable);
+  emit("showDrawer", theads);
+};
+const handlerScroll = (params: any) => {
+  if (params.isX) {
+    hideFilterWrap(state, props);
+  }
+};
+const handleCellMouseenter = ({ column, $event }: any) => {
+  // vxe-table@2.10+  触发tooltip给vxe-cell父节点设置了title 导致显示有误
+  if (column.showOverflow === 'title') {
+    const target = $event?.currentTarget;
+    const cls = target?.className;
+    const bodyCls = ' vxe-body--column ';
+    if (cls && ` ${cls} `.includes(bodyCls) && target && target.hasAttribute('title')) {
+      const cellElem = target.querySelector('.vxe-cell');
+      if (cellElem && cellElem.hasAttribute('title')) {
+        cellElem.removeAttribute('title');
+      }
+      // 行编辑时 去掉tooltip title
+      if (props.isInlineOperating) {
+        if (target && target.hasAttribute('title')) {
+          target.removeAttribute('title');
+        }
+      }
+    }
+  }
+};
+const getFooterTooltipTitle = (column: any) => {
+  let t = "";
+
+  if (vexutils.has(props.sumData, column.property)) {
+    t += `<p class="table-footer-tooltip-label-wrap">
+      <span class="table-footer-tooltip-label">求和：</span>
+      ${vexutils.round(Number(props.sumData[column.property]), 4)}
+    </p>`;
+  }
+  if (vexutils.has(props.avgData, column.property)) {
+    t += `<p class="table-footer-tooltip-label-wrap">
+      <span class="table-footer-tooltip-label">平均值：</span>
+      ${vexutils.round(Number(props.avgData[column.property]), 4)}</p>`;
+  }
+
+  return t;
+};
+const getFooterTitle = (column: any) => {
+  if (vexutils.has(props.sumData, column.property)) {
+    return vexutils.round(Number(props.sumData[column.property]), 2);
+  }
+  if (vexutils.has(props.avgData, column.property)) {
+    return vexutils.round(Number(props.avgData[column.property]), 2);
+  }
+  // return demo();
+};
+const hanldeClickRefresh = () => {
+  emit("pubTableRefresh");
+};
+/**
+ * 删除选中scan数据
+ */
+const confirmScanMulti = (params: any) => {
+  let{row, $rowIndex} = params || {}
+  if(!row) return;
+  emit("scanMultiRemove", $rowIndex, params)
+  let vxeTable = xGrid.value;
+  vxeTable.remove(row);
+}
+const scanMultiOperate = (params: any) => {
+  return <NPopconfirm
+            onPositiveClick={() =>confirmScanMulti(params)}>
+            {{
+              trigger: () => <SvgIcon class="scan-multi-delete" iconClass="shanchu" />,
+              default: () => '是否确认删除？'
+            }}
+          </NPopconfirm>
+};
+/**
+ * 判断是否渲染EditForm
+ * @param {*} row
+ * @param {*} column
+ * @returns
+ */
+const showEditForm = (row: any, column: any, $rowIndex: any) => {
+  if (!props.isMatchComponent || props.isNestTable || isScanMultiTable.value) return false;
+  if (props.isBatchEditing || props.isInlineEditing || props.isInlineAdding) {
+    let matchObj = state.editColumnMap[column.property];
+    if (!matchObj || !matchObj.matchItem || !matchObj.fieldItem) return false;
+    // 批量编辑 未选择全部行编辑
+    if (props.isBatchEditing && !props.isEditAllRow) {
+      let matchIndex = state.checkedRows.findIndex(
+        (v: any) => v[props.primaryKey] == row[props.primaryKey]
+      );
+      if (matchIndex < 0) return false;
+    }
+    if (props.isInlineEditing || props.isInlineAdding) {
+      if ($rowIndex !== 0) return false;
+    }
+    return matchObj.matchItem;
+  }
+  return false;
+};
+/**
+ * 初始化props
+ * @param {*} unionItem
+ * @param {*} row
+ * @param {*} column
+ * @param {*} $rowIndex
+ * @returns
+ */
+const initBatchDynamicProps = (unionItem: any, row: any, column: any, $rowIndex: any) => {
+  let id = row[props.primaryKey];
+  let dynamicPropsCache = props.batchDynamicPropsCache[id];
+  if (dynamicPropsCache && dynamicPropsCache[unionItem.tableField]) {
+    return dynamicPropsCache[unionItem.tableField];
+  }
+  let matchObj = state.editColumnMap[column.property];
+  let { fieldItem = {} } = matchObj || {};
+  let defaultCombinationForm = {};
+  if (!props.isInlineAdding) {
+    let originalRow = props.pageIndexOldtableData.find(
+      (item: any) => item[props.primaryKey] == row[props.primaryKey]
+    );
+    defaultCombinationForm = setDefaultFormData(column.property, fieldItem, originalRow);
+  }
+  let tempFieldItem = JSON.parse(JSON.stringify(fieldItem));
+  let defaultForm = {
+    fieldList: [tempFieldItem],
+    defaultCombinationForm,
+  };
+  let dynamicProps = {
+    props: {
+      formPrimaryKey: id,
+      defaultForm,
+      banRequest: true,
+      propsFormBtn: true,
+      propsDelSetting: true,
+      parentConfig: {
+        is_edit: "1",
+      },
+      configuration: configuration.value,
+      isPure: true,
+      isOpenShortcut: false,
+      cacheUniqueKey: state.cacheUniqueKey,
+      styleSetting: {},
+    },
+    on: {
+      handleSubmit: handleSubmitEditForm,
+      banSubmit: banSubmit,
+    },
+  };
+  emit("setBatchDynamicPropsCache", {
+    primaryKey: row[props.primaryKey],
+    tableField: unionItem.tableField,
+    dynamicProps,
+  });
+  return dynamicProps;
+};
+/**
+ * 单个form提交成功数据
+ * @param {*} obj formData
+ */
+const handleSubmitEditForm = (obj: any = {}) => {
+  // 单行编辑
+  if (props.isInlineEditing || props.isInlineAdding) {
+    emit("submitEditFormSuccess", obj);
+    return;
+  }
+
+  // 批量编辑
+  if (props.isBatchEditing) {
+    emit("submitEditFormSuccessBatch", obj);
+    return;
+  }
+};
+/**
+ * 单个form提交失败
+ * @param {*} obj
+ */
+const banSubmit = (obj: any) => {
+  // 单行编辑
+  if (props.isInlineEditing || props.isInlineAdding) {
+    emit("submitEditFormError");
+    return;
+  }
+  // 批量编辑
+  if (props.isBatchEditing) {
+    emit("submitEditFormErrorBatch", obj);
+    return;
+  }
+};
+/**
+ * 避免每次点击都查询
+ * 初始化查一次 行编辑 表单search用
+ */
+// 避免每次点击都查询
+const handleFormTheUniqueKey = async () => {
+  emit("initInlineEditFormConfig", {
+    listFormUnionSetting: props.listFormUnionSetting,
+    inlineEditFormConfig: props.inlineEditFormConfig,
+  });
+  let hasEditRow = props.btnList?.find((item: any) => {
+    let trigger_type = item.settingObj && item.settingObj[0]?.trigger_type;
+    if (item.isShow == 1 && trigger_type == "EDIT_ROW") return true;
+    return false;
+  });
+  if (!hasEditRow) return;
+  // await this.handleFieldTheUniqueKey();
+};
+const handlePreView = (data: any, i: any, e: any) => {
+  e.preventDefault();
+  e.stopPropagation();
+  if (!data) data = xb_big;
+  emit("handlePreView", data, i);
+};
+/**
+ * tsx渲染表格
+ */
+// 图片jsx：当图片类型为头像时，显示的是圆形
+const getPicture = (row: any, item: any, type: any) => {
+  return [
+    <div class={["img-wrap", type === "HEADPORTRAIT" ? "img-circle" : ""]}>
+      {handleImgArr(row[item.columnName], type, imgs2imgArr).map((v: any, i: any) => (
+        <img
+          key={i}
+          src={handleImgSrc(v, props.sysImageSize, "LIST_FIELD_SMALL")}
+          style={modalDetailImage(props.sysImageSize, "LIST_FIELD_SMALL", "36px")}
+          onClick={(e: any) => handlePreView(row[item.columnName], i, e)}
+        />
+      ))}
+    </div>,
+  ];
+};
+// 字段颜色jsx
+const getColor = (row: any, item: any) => {
+  let color = row[item.columnName];
+  // color = row.color;
+  if (color?.includes("-")) {
+    let colorName = color.split("-")[1];
+    color = vexutils.oldColorMap(colorName);
+  }
+  return [
+    <div class="color-wrap" style="height: 100%; padding: 4px;">
+      <div style={{ background: color, height: "100%" }} />
+    </div>,
+  ];
+};
+// 日期显示格式化
+const getDate = (row: any, item: any) => {
+  let obj: any = row[item.columnName] || "";
+  if (!vexutils.isEmpty(obj)) {
+    if (vexutils.isObject(obj) && "tooltip" in obj) {
+      return [
+        <n-tooltip>
+          {{
+            trigger: () => <span>{(obj as any).value}</span>
+          }}
+          <span innerHTML={(obj as any).tooltip} />
+        </n-tooltip>
+      ];
+    }
+  }
+  return [<span innerHTML={obj}></span>];
+};
+// 百分数格式化
+const getPercentage = (row: any, item: any) => {
+  let value = row[item.columnName];
+  if (!value && value !== 0) return;
+  let percentValue = value;
+
+  let SPANTAG_REGEXP = /<\/?span.*?>/g;
+  if (SPANTAG_REGEXP.test(value)) {
+    let d = document.createElement("span");
+    d.innerHTML = value;
+    value = d.textContent;
+    percentValue = value;
+  }
+
+  if (value && vexutils.isString(value) && value.includes("%")) {
+    percentValue = Number(value.replace("%", ""));
+  }
+  let strokeColor = "#52c41a";
+  if (percentValue < 15) {
+    strokeColor = "#ff5500";
+  } else if (percentValue < 50) {
+    strokeColor = "#ff8b01";
+  } else if (percentValue < 90) {
+    strokeColor = "#1890ff";
+  }
+  if (percentValue > 100) {
+    percentValue = 100;
+  } else if (percentValue < 0) {
+    percentValue = 0;
+  }
+  return [
+    <div class="percent-wrap">
+      <span class="percent-value">{percentValue}%</span>
+      <NProgress percentage={percentValue} showIndicator={false} color={strokeColor} />
+    </div>,
+  ];
+};
+const getvideoList = (row: any, item: any) => {
+  let res = row[item.columnName];
+  if (Array.isArray(res)) {
+    res = JSON.stringify(res);
+  }
+  /** string */
+  return null;
+  // return [<video-list columnName={item.columnName} stlist={res} />];
+};
+const getOrCode = (row: any, item: any, type: any) => {
+  let src = qr;
+  return [
+    <span class="bigTable-qr-span" onClick={(e: any) => qrCodeEvent(e, row, item)}>
+      <img class="bigTable-qr-img" src={src} />
+      <span>
+        <SvgIcon iconClass="fangda" />
+      </span>
+    </span>,
+  ];
+};
+const qrCodeEvent = (e: any, row: any, item: any) => {
+  e.preventDefault();
+  e.stopPropagation();
+  let data = handleQrCodeContent(row, item);
+  emit("qrCodeEvent", data);
+};
+// 行内编辑对应生成的（保存、取消）按钮
+const generateInlineBtnList = (row: any, index: any) => {
+  if (props.isNestTable) return;
+  /*
+        操作列，存在行内编辑的情况
+        前端插入【保存、取消】按钮
+      */
+  let inlineEditBtnList = [];
+  inlineEditBtnList.push(...getInlineEditBtn(row, "tileBtnList"));
+  inlineEditBtnList.push(...getInlineEditBtn(row, "foldBtnList"));
+  if (!inlineEditBtnList?.length) return;
+
+  return [
+    <span>
+      <NButton
+        style={{ display: row.__isInlineEditing ? "inline-block" : "none" }}
+        onClick={(e: any) => {
+          e.stopPropagation();
+          emit("SET_SAVE_ROW_STATUS", true);
+          // this.SET_SAVE_ROW_STATUS(true);
+        }}
+        class="btn-custom-class row-btn"
+        size="small"
+        text
+      >
+        保存
+      </NButton>
+      <NButton
+        style={{ display: row.__isInlineEditing ? "inline-block" : "none" }}
+        onClick={(e: any) => {
+          e.stopPropagation();
+          emit("SET_CANCEL_ROW_STATUS", true);
+          // this.SET_CANCEL_ROW_STATUS(true);
+        }}
+        class="btn-custom-class row-btn"
+        size="small"
+        text
+      >
+        取消
+      </NButton>
+    </span>,
+  ];
+};
+// 按钮 jsx
+const getTileBtnList = (row: any, index: any) => {
+  return [
+    (row.tileBtnList?.length &&
+      row.tileBtnList.map((btn: any, j: any) => {
+        return (
+          btn.isShow == "1" &&
+          btn.type != "LINK" && (
+            <NButton
+              key={btn.sid}
+              onClick={(e: any) => clickBtn(row, btn, index, e, j)}
+              class="btn-custom-class row-btn"
+              style={{
+                ...getBtnStyle(btn),
+                ...{
+                  display: !row.__isInlineEditing ? "inline-block" : "none",
+                },
+              }}
+              disabled={row.__isDisableInlineEdit}
+              // type={
+              //   btn.showStyle == "none_bg" || btn.showStyle === "only_icon" ? "link" : "primary"
+              // }
+              ghost={btn.showStyle == "white_bg"}
+              size="small"
+              // title={handleName(btn)}
+              //               {getBtnIcon(btn)}
+              // {btn.showStyle === "only_icon" ? "" : handleName(btn)}
+            >
+              {getBtnIcon(btn)}
+              {btn.showStyle === 'only_icon' ? '' : handleName(btn)}
+            </NButton>
+          )
+        );
+      })) ||
+      "",
+  ];
+};
+// 按钮事件
+const clickBtn = (row: any, btn: any, index: any, e: any, j: any) => {
+  e.preventDefault();
+  e.stopPropagation();
+  recordClickBtnInfo(row, index);
+  emit("setNestTableClick", props.isNestTable);
+  emit("setCurRowIndex", index);
+  emit("clickBtn", row, btn, row[handlePrimaryKey.value], index);
+  // this.handleTopBtnTracher(btn, j);
+};
+// 按钮 jsx
+const getBtnIcon = (btn: any, mr = "8px") => {
+  let icon;
+  if (btn.icon) {
+    if (state.btnIcons[btn.icon]) {
+      icon = <a-icon type={state.btnIcons[btn.icon]} />;
+    } else {
+      icon = (
+        <NTooltip
+        >
+        {{
+          trigger: () => <SvgIcon iconClass={btn.icon} style={{ marginRight: mr}} />,
+          default: () => handleName(btn)
+        }}
+        </NTooltip>
+      );
+    }
+  } else if (btn.iconSetting) {
+    icon = (
+      <SvgIcon
+        iconClass={JSON.parse(btn.iconSetting).icon}
+        style={{
+          marginRight: mr,
+        }}
+      />
+    );
+  }
+  return [icon];
+};
+// 按钮 jsx
+const getFoldBtnList = (row: any, index: any) => {
+  const getOptions = () => {
+    return row.foldBtnList.map((b: any, j: any) => {
+      return {
+        label: `${handleName(b)}${getBtnIcon(b, "0")}`,
+        key: b.sid,
+        props: {
+          onClick: (e: any) => {
+            clickBtn(row, b, index, e.domEvent, j)
+          }
+        }
+      }
+    })
+  }
+  return [
+    (row.foldBtnList?.length && (
+      <NDropdown
+        style={{ display: !row.__isInlineEditing ? "inline-block" : "none" }}
+        disabled={props.isInlineOperating}
+        options={getOptions()}
+      >
+        <NButton size="small" style="margin-left: 8px">
+          更多 ...
+        </NButton>
+      </NDropdown>
+    )) ||
+      "",
+  ];
+};
+const switchBtnOnChange = (e: any, r: any, i: any, index: any) => {
+  emit('switchBtnOnChange', e, r, i, index);
+}
+const getBtnLinkSwitch = (row: any, item: any, disabled: any, index: any) => {
+  // 树表不能用索引取值,注意：row 是解析后的值。
+  let cur = state.isTree !== 0 ? row : props.oldtableData[index];
+  let key = cur[item.columnName];
+  if (typeof key === "string") {
+    if (key && key.startsWith("###{")) {
+      let temp = JSON.parse(key.replace("###", ""));
+      key = temp.tooltip || temp.value; // temp.tooltip 日期的处理
+    }
+  }
+  return [<NSwitch value={key == item.btnLinkSwitchDefVal} disabled={disabled} onUpdateValue={(e: boolean) => switchBtnOnChange(e, row, item, index)} />];
+};
+// 字段显示 jsx
+const getField = (row: any, item: any, index: any, isLink: boolean) => {
+  const html = formatFieldText(row, item, props.columnConfig.fieldList, props.fieldListOriginal);
+
+  const content = [
+    isLink && html ? (
+      <a onClick={(e: any) => linkDetail(row, item, index, e)} innerHTML={html} />
+    ) : (
+      <span class="domPropsInnerHTML-span" innerHTML={html} />
+    ),
+  ];
+
+  if (isCopy(item, row)) {
+    return [
+      <NPopover
+        placement="right"
+        trigger="hover"
+        arrowPointToCenter
+      >
+        {{
+          trigger: () => content
+        }}
+        <NIcon component={CopyOutline} onClick={(e: any) => hanldeCopyContent(e, row[item.columnName])} />
+      </NPopover>,
+    ];
+  } else {
+    return [content];
+  }
+};
+// 链接按钮详情
+const linkDetail = (row: any, col: any, index: any, e: any) => {
+  if (props.isInlineOperating) return false;
+  let vxeTable = xGrid.value;
+  e.preventDefault();
+  // e.stopPropagation();
+  // 方晶晶验收2.5.12需求, 要求link字段第一次可选中checkbox, 第二次点击不取消选中
+  let isCheckedByCheckboxRow = vxeTable.isCheckedByCheckboxRow(row);
+  if (isCheckedByCheckboxRow) {
+    e.stopPropagation();
+  }
+  vxeTable.setCurrentRow(row);
+  emit("setNestTableClick", props.isNestTable);
+  emit("setCurRowIndex", index);
+  emit("linkDetail", row, col, row[handlePrimaryKey.value], null, false, index);
+};
+const hanldeCopyContent = (e: any, value: any) => {
+  e.preventDefault();
+  e.stopPropagation();
+  emit("hanldeCopyContent", e, value);
+};
+// 获取checkbox已选行
+const getCheckboxRecords = () => {
+  let res = [];
+  if (xGrid.value) {
+    res = xGrid.value.getCheckboxRecords();
+  }
+  return res;
+}
+const handleClickEditBtnByInline = async () => {
+  if (!checkListFormUnionSettingParamsList()) {
+    handleClickCancelBtnByInline();
+    return false;
+  }
+
+  let vxeTable = xGrid.value;
+
+  let { row, rowIndex } = getInlineOpreateRow();
+  recordClickBtnInfo(row, rowIndex);
+
+  // HACK: 重置非当前表单的行内编辑状态（多列表场景）
+
+  await (props as any).resetInlineEdit();
+  await vxeTable.loadData([row]);
+  emit('handleClickBtnByInline', {
+    type: 'EDIT',
+    listFormUnionSetting: props.listFormUnionSetting,
+    inlineEditFormConfig: props.inlineEditFormConfig,
+    inlineEditOriginalTableRow: props.oldtableData[rowIndex]
+  });
+  // vxeTable.setActiveRow(row);
+  setAllRowInlineStatus(true);
+  row['__isInlineEditing'] = true;
+
+  setRowStatus(vxeTable.$el, 0, '66');
+}
+/* 多选相关 */
+const setAllCheckedRows = (rows: any) =>  {
+  if (props.isNestTable) return;
+  if (rows && rows.length) {
+    const copy = vexutils.handleBigArrayCopy(rows);
+    state.checkedRows = Object.freeze(copy);
+
+    let table = xGrid.value;
+    table.setAllCheckboxRow(true);
+  }
+}
+const setTalbeScrollTo = () => {
+  let table = xGrid.value;
+  if (!table) return;
+  table.scrollTo(table.getScroll().scrollLeft, 0);
+}
+const submitInlineForm = () => {
+  let error = props.inlineError;
+  if (error) {
+    (props as any).resetEditRowStatus();
+    emit('triggerSpinning', false);
+    return false;
+  }
+
+  let { formId } = props.listFormUnionSetting;
+  let { id } = props.inlineOriginalTableRow;
+  if (!formId) {
+    console.log('缺少formId');
+    emit('triggerSpinning', false);
+    return;
+  }
+  if (state.isSaveForm) return false;
+  state.isSaveForm = true;
+
+  let params = Object.assign({}, props.inlineFormData, {
+    formId,
+    id,
+    editMode: 'row'
+  });
+  params = JSON.parse(JSON.stringify(params));
+
+  let noChangePrimaryKey = params[handleRowId.value] === addInlineEditPrimaryKey;
+  if (props.isInlineAdding && noChangePrimaryKey) {
+    delete params[handleRowId.value];
+  }
+
+  (props as any).submitForm(params)
+    .then(async ({ data }: any) => {
+      emit('triggerSpinning', false);
+      if (data.result !== 'SUCCESS') {
+        state.isSaveForm = false;
+        (window as any).$message.error(data.resultMsg);
+        (props as any).resetEditRowStatus();
+        return false;
+      }
+
+      await (props as any).resetInlineEdit();
+      resetOperationRowStatus();
+      emit('pubTableReload');
+    })
+    .finally(() => {
+      state.isSaveForm = false;
+      emit('triggerSpinning', false);
+      (props as any).resetEditRowStatus();
+    });
+}
+const handleClickAddBtnByInline = async () => {
+  if (!checkListFormUnionSettingParamsList()) {
+    handleClickCancelBtnByInline();
+    return false;
+  }
+  // 去掉更新后台时间
+  // let userInfo = await this.GetRealtimeSysParams();
+  // userInfo &&
+  //   Object.assign(this.configuration, {
+  //     userInfo
+  //   });
+
+  await (props as any).resetInlineEdit();
+  emit('handleClickBtnByInline', {
+    type: 'ADD',
+    listFormUnionSetting: props.listFormUnionSetting,
+    inlineEditFormConfig: props.inlineEditFormConfig
+  });
+
+  addInlineEditPrimaryKey = Date.now();
+  let formData = {
+    [handleRowId.value]: addInlineEditPrimaryKey,
+    __isInsertRow: true
+  };
+  let { paramsList } = props.listFormUnionSetting;
+  paramsList.forEach((item: any) => {
+    formData[item.tableField] = undefined;
+  });
+
+  let vxeTable = xGrid.value;
+  await vxeTable.insert(formData);
+  await vxeTable.loadData([formData]);
+  setAllRowInlineStatus(true);
+  setRowStatus(vxeTable.$el, 0, '66');
+}
+const handleClickSaveBtnByInline = () => {
+  if (props.spinning) return false;
+  emit('handleClickBtnByInline', { type: 'SAVE' });
+
+  let formDom: any = document.querySelectorAll('.js-inlineEditForm');
+  let sliceLen = handleEditFormLength();
+  // HACK: vxeTable行内编辑时复制的DOM节点，无需触发提交
+  formDom = [...formDom].slice(0, sliceLen);
+  formDom.forEach((item: any) => {
+    item.__vue__.handleSubmitForm();
+  });
+}
+const removeInlineAddRow = () => {
+  if (!props.isInlineAdding) return false;
+
+  const vxeTable = xGrid.value;
+  let { tableData } = vxeTable.getTableData();
+  vxeTable.remove(tableData[0]);
+}
+
+/**
+ * wacth
+ */
+watch(
+  () => props.columnConfig,
+  (config: any) => {
+    nextTick(() => {
+      if (!config || !Object.keys(config).length) return;
+      loadColumn(config);
+    });
+  },
+  { immediate: true }
+);
+watch(
+  () => props.data,
+  value => {
+    nextTick(() => {
+      loadData(value);
+    });
+  },
+  { immediate: true }
+);
+watch(
+  () => currentCheckedKeys,
+  val => {
+    setVisibleCheckAllWrap(state, props, currentCheckedKeys.value);
+  }
+)
+watch(
+  () => props.quickSearchConfig,
+  val => {
+    setFilterStatus(state, props);
+  },
+  { deep: true }
+)
+watch(
+  () => props.tableDataCache,
+  val => {
+    setAllCheckedRows(val);
+  },
+  { deep: true }
+)
+watch(
+  () => props.pageVO.pageSize,
+  val => {
+    if (props.isNestTable) return;
+    setVisibleCheckAllWrap(state, props, currentCheckedKeys.value);
+    resetTableInlineEditStatus();
+  }
+)
+watch(
+  () => props.pageVO.pageIndex,
+  val => {
+    if (props.isNestTable) return;
+    setTalbeScrollTo();
+    resetTableInlineEditStatus();
+  }
+)
+watch(
+  () => props.styleSetting.tableHeight,
+  val => {
+    if (props.isNestTable) return;
+    if (Object.keys(props.columnConfig).length > 0) {
+      loadColumn(props.columnConfig);
+      loadData(props.data);
+      setTalbeScrollTo();
+    }
+  }
+)
+watch(
+  () => props.sysImageSize,
+  val => {
+    const v = props.styleSetting?.tableHeight === 'table-simple' ? '26' : '22';
+    nextTick(() => {
+      handleTableImageSize(val, 'LIST_FIELD_SMALL', v + 'px');
+    });
+  },
+  { deep: true, immediate: true }
+)
+// 监听行内编辑表单，是否已校验并组装数据完毕
+watch(
+  () => props.inlineEditFormSubmitDone,
+  val => {
+    if (!val || props.isNestTable) return;
+    if (state.isTree != 0 || !props.isMatchComponent) return false;
+    if (!checkOperateCurrentTable()) return false;
+    submitInlineForm()
+  }
+)
+// 监听行内编辑按钮的触发状态
+watch(
+  () => props.isInlineEditing,
+  val => {
+    if (!val || props.isNestTable) return;
+    if (state.isTree != 0 || !props.isMatchComponent) return false;
+    if (!checkOperateCurrentTable()) return false;
+    submitInlineForm()
+  }
+)
+// 监听行内新增按钮的触发状态
+watch(
+  () => props.isInlineAdding,
+  val => {
+    if (!val || props.isNestTable) return false;
+    if (state.isTree != 0 || !props.isMatchComponent) return false;
+    if (!checkOperateCurrentTable()) {
+      resetOperationRowStatus();
+      return false;
+    }
+
+    hideSelectCloumns();
+    handleClickAddBtnByInline();
+  }
+)
+watch(
+  () => props.isInlineSave,
+  val => {
+    if (!val || props.isNestTable) return false;
+    if (state.isTree != 0 || !props.isMatchComponent) return false;
+    if (!checkOperateCurrentTable()) return false;
+    handleClickSaveBtnByInline();
+  }
+)
+watch(
+  () => props.isInlineCancel,
+  val => {
+    if (!val || props.isNestTable) return false;
+    if (state.isTree != 0 || !props.isMatchComponent) return false;
+    if (!checkOperateCurrentTable()) return false;
+
+    removeInlineAddRow();
+    handleClickCancelBtnByInline();
+  }
+)
+watch(
+  () => route,
+  val => {
+    resetTableInlineEditStatus();
+  }
+)
+watch(
+  () => props.tableRefreshCache,
+  (val, oldVal) => {
+    if (props.isNestTable) return;
+    const { orgId } = props?.userInfo?.map?.sysParams || {};
+    // 增加判断老旧数据是否相同,判断orgId是否相等
+    if (val != oldVal && props.tableParams && val[props.tableParams.tableId] && orgId == val[props.tableParams.tableId]) {
+      state.hasRefresh = true;
+    }
+  },
+  { immediate: true, deep: true }
+)
+watch(
+  () => props.tableParams.tableId,
+  val => {
+    nextTick(() => {
+      if (val && props.tableRefreshCache[val]) {
+        state.hasRefresh = true;
+      }
+    });
+  }
+)
+
+// defineExpose
+const setCurrentRow = (row:any) => {
+  xGrid.value.setCurrentRow(row);
+}
+// loadColumnAndData
+const loadColumnAndData = (data: any, config: any) => {
+  setTableConfig(config, state);
+  let columns = formatColumns(config);
+  columns = handleGroupColums(columns, props);
+  const list = setChecklist(data);
+  state.curAbleCheckedLen = list.filter((item: any) => checkMethod({ row: item })).length;
+
+  if (!xGrid.value) return;
+
+  Promise.all([xGrid.value.loadData(list), xGrid.value.reloadColumn(columns)]).then(() => {
+    console.log('列表加载完成');
+    setGroupTitleToFristColumnFieldData(list);
+    setGroupTreeExpand();
+  });
+}
+// 清除多选
+const clearChecked = () => {
+  state.checkedRows = [];
+  xGrid.value.clearCheckboxReserve();
+  xGrid.value.clearCheckboxRow();
+  xGrid.value.clearRadioReserve();
+  xGrid.value.clearRadioRow();
+  state.visibleTreeCheck = false;
+  state.treeTableLength = 0;
+}
+defineExpose({
+  loadColumnAndData,
+  getCheckboxRecords,
+  clearChecked,
+  setCurrentRow,
+  loadColumn,
+  removeInsert
+})
+
+</script>
+<style lang="less" scoped>
+@import "./assets/style/table-base.less";
+</style>
+
+<style lang="less">
+@import "./assets/style/table-global.less";
+</style>