yuang-framework-ui-pc 1.1.44 → 1.1.46

package/es/ele-virtual-table/components/body-cell.js

@@ -0,0 +1,386 @@
+import { defineComponent, computed, resolveComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode, createBlock, Fragment, withModifiers, createVNode, withCtx, normalizeProps, mergeProps, createTextVNode, toDisplayString } from "vue";
+import { ElIcon } from "element-plus";
+import { getValue } from "../../utils/core";
+import { LoadingDotOutlined, ArrowDown } from "../../icons";
+import CellCheckbox from "./cell-checkbox";
+import { CellRender, getCellSpan, getIndexValue } from "../util";
+const _sfc_main = defineComponent({
+  name: "BodyCell",
+  components: {
+    ElIcon,
+    ArrowDown,
+    LoadingDotOutlined,
+    CellCheckbox,
+    CellRender
+  },
+  props: {
+    /** 列配置 */
+    column: {
+      type: Object,
+      required: true
+    },
+    /** 列索引 */
+    columnIndex: {
+      type: Number,
+      required: true
+    },
+    /** 行索引 */
+    rowIndex: {
+      type: Number,
+      required: true
+    },
+    /** 行数据 */
+    rowData: {
+      type: Object,
+      required: true
+    },
+    /** 所有列的列宽 */
+    colSizes: {
+      type: Array,
+      required: true
+    },
+    /** 单元格类名自定义 */
+    bodyCellClass: [String, Function],
+    /** 单元格样式自定义 */
+    bodyCellStyle: [Object, Function],
+    /** 单元格合并行列方法 */
+    spanMethod: Function,
+    /** 溢出提示组件全局属性 */
+    tableTooltipProps: [Boolean, Object],
+    /** 序号列起始编号 */
+    pageIndex: Number,
+    /** 表格行高 */
+    rowHeight: Number,
+    /** 多选当前行是否选中 */
+    isChecked: Boolean,
+    /** 多选当前行是否禁用 */
+    isDisabled: Boolean,
+    /** 表格尺寸 */
+    tableSize: String,
+    /** 树表格展开图标的列 */
+    expandColumnKey: String,
+    /** 树表格当前行是否有子级 */
+    hasChildren: Boolean,
+    /** 树表格当前行缩进 */
+    rowIndent: String,
+    /** 树表格当前行是否折叠 */
+    isCollapse: Boolean,
+    /** 树表格子级加载状态 */
+    loading: Boolean,
+    /** 是否需要固定单元格高度 */
+    fixedCellHeight: Boolean,
+    /** 表格是否是自适应行高 */
+    autoRowHeight: Boolean
+  },
+  emits: {
+    /** 多选框选中改变事件 */
+    checkedChange: (_checked) => true,
+    /** 展开状态改变事件 */
+    expandChange: (_expanded) => true,
+    /** 点击事件 */
+    click: (_col, _e) => true,
+    /** 双击事件 */
+    dblclick: (_col, _e) => true,
+    /** 右键事件 */
+    contextmenu: (_col, _e) => true,
+    /** 鼠标移入事件 */
+    mouseenter: (_col, _e) => true,
+    /** 鼠标移出事件 */
+    mouseleave: (_col, _e) => true
+  },
+  setup(props, { emit, slots }) {
+    const originalCol = computed(() => props.column.originalCol);
+    const colType = computed(() => originalCol.value.type ?? "");
+    const cellParam = computed(() => {
+      return {
+        column: originalCol.value,
+        columnIndex: props.columnIndex,
+        rowIndex: props.rowIndex,
+        row: props.rowData
+      };
+    });
+    const cellSpan = computed(() => {
+      const span = getCellSpan(cellParam.value, props.spanMethod);
+      if (["indedx", "selection", "expand"].includes(colType.value)) {
+        span.rowspan = 1;
+      }
+      return span;
+    });
+    const isEllipsis = computed(() => {
+      if (colType.value === "selection" || colType.value === "expand") {
+        return true;
+      }
+      const col = originalCol.value;
+      if (col && col.showOverflowTooltip != null) {
+        return col.showOverflowTooltip !== false;
+      }
+      return !!props.tableTooltipProps;
+    });
+    const cellClass = computed(() => {
+      const classes = ["el-table-v2__row-cell", "ele-table-td"];
+      if (!cellSpan.value.colspan) {
+        classes.push("is-none");
+      } else if (cellSpan.value.colspan > 1) {
+        classes.push("is-multi-cell");
+      }
+      if (!cellSpan.value.rowspan) {
+        classes.push("is-placeholder");
+      } else if (cellSpan.value.rowspan > 1) {
+        classes.push("is-multi-row");
+      }
+      if (colType.value === "index") {
+        classes.push("is-index");
+      }
+      if (colType.value === "selection") {
+        classes.push("is-selection");
+      }
+      if (colType.value === "expand") {
+        classes.push("is-expand");
+      }
+      const col = originalCol.value;
+      if (col) {
+        if (col.align) {
+          classes.push("is-align-" + col.align);
+        }
+        if (isEllipsis.value) {
+          classes.push("is-ellipsis");
+        }
+        if (col.fixed === "right") {
+          classes.push("is-fixed-right");
+        } else if (col.fixed === "left" || col.fixed === true) {
+          classes.push("is-fixed-left");
+        }
+        if (props.column) {
+          if (props.column.isFixedLeftLast) {
+            classes.push("is-fixed-left-last");
+          }
+          if (props.column.isFixedRightFirst) {
+            classes.push("is-fixed-right-first");
+          }
+        }
+        if (typeof props.bodyCellClass === "function") {
+          const temp = props.bodyCellClass(cellParam.value);
+          if (temp) {
+            classes.push(temp);
+          }
+        } else if (props.bodyCellClass) {
+          classes.push(props.bodyCellClass);
+        }
+        if (col.className) {
+          classes.push(col.className);
+        }
+      }
+      return classes.join(" ");
+    });
+    const cellWidth = computed(() => {
+      const colspan = cellSpan.value.colspan;
+      if (colspan === 0) {
+        return "0px";
+      }
+      let width = props.colSizes[props.columnIndex].width || 0;
+      if (colspan && colspan > 1) {
+        const end = props.columnIndex + colspan;
+        for (let i = props.columnIndex; i < end; i++) {
+          if (props.colSizes[i] && props.colSizes[i].width != null) {
+            width += props.colSizes[i].width;
+          }
+        }
+      }
+      return width + "px";
+    });
+    const cellHeight = computed(() => {
+      if (props.fixedCellHeight && props.rowHeight != null) {
+        return props.rowHeight + "px";
+      }
+      const rowspan = cellSpan.value.rowspan;
+      if (props.rowHeight == null || rowspan == null || rowspan <= 1) {
+        return;
+      }
+      return rowspan * props.rowHeight + "px";
+    });
+    const cellMinHeight = computed(() => {
+      if (!props.autoRowHeight || !props.rowHeight) {
+        return;
+      }
+      return props.rowHeight + "px";
+    });
+    const colSize = computed(() => {
+      if (!props.colSizes || props.columnIndex == null) {
+        return;
+      }
+      return props.colSizes[props.columnIndex];
+    });
+    const cellStyle = computed(() => {
+      const userStyle = props.bodyCellStyle;
+      const param = cellParam.value;
+      return [
+        {
+          width: cellWidth.value,
+          height: cellHeight.value,
+          minHeight: cellMinHeight.value,
+          left: colSize.value ? colSize.value.fixedLeft : void 0,
+          right: colSize.value ? colSize.value.fixedRight : void 0
+        },
+        (typeof userStyle === "function" ? userStyle(param) : userStyle) || {}
+      ];
+    });
+    const cellText = computed(() => {
+      const col = originalCol.value;
+      if (col && col.type === "index") {
+        if (typeof col.index === "function") {
+          return;
+        }
+        return getIndexValue(props.rowIndex, col.index, props.pageIndex);
+      }
+      const prop = props.column ? props.column.dataKey : void 0;
+      const { rowspan, colspan } = cellSpan.value;
+      if (rowspan === 0 || colspan === 0 || prop == null || !props.rowData) {
+        return;
+      }
+      return getValue(props.rowData, prop);
+    });
+    const isExpandCol = computed(() => {
+      return props.column != null && props.expandColumnKey != null && props.expandColumnKey === props.column.key;
+    });
+    const renderOpt = computed(() => {
+      const col = originalCol.value;
+      const { rowspan, colspan } = cellSpan.value;
+      if (col && rowspan !== 0 && colspan !== 0) {
+        const { rowIndex, rowData } = props;
+        if (col.type === "index") {
+          if (typeof col.index === "function") {
+            return { render: col.index, params: [rowIndex] };
+          }
+          return {};
+        }
+        if (col.slot && typeof slots[col.slot] === "function") {
+          return {
+            render: slots[col.slot],
+            params: [{ row: rowData, column: col, $index: rowIndex }]
+          };
+        }
+        if (typeof col.formatter === "function") {
+          return {
+            render: col.formatter,
+            params: [rowData, col, cellText.value, rowIndex]
+          };
+        }
+      }
+      return {};
+    });
+    const handleTextClick = (e) => {
+      if (colType.value === "selection") {
+        e.stopPropagation();
+      }
+    };
+    const handleCheckedChange = (checked) => {
+      emit("checkedChange", checked);
+    };
+    const handleExpandChange = () => {
+      if (!props.loading) {
+        emit("expandChange", props.isCollapse);
+      }
+    };
+    const handleClick = (e) => {
+      emit("click", originalCol.value, e);
+    };
+    const handleDblclick = (e) => {
+      emit("dblclick", originalCol.value, e);
+    };
+    const handleContextmenu = (e) => {
+      emit("contextmenu", originalCol.value, e);
+    };
+    const handleMouseenter = (e) => {
+      emit("mouseenter", originalCol.value, e);
+    };
+    const handleMouseleave = (e) => {
+      emit("mouseleave", originalCol.value, e);
+    };
+    return {
+      colType,
+      cellClass,
+      cellStyle,
+      cellText,
+      isExpandCol,
+      renderOpt,
+      handleTextClick,
+      handleCheckedChange,
+      handleExpandChange,
+      handleClick,
+      handleDblclick,
+      handleContextmenu,
+      handleMouseenter,
+      handleMouseleave
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 2,
+  class: "ele-table-placeholder"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_LoadingDotOutlined = resolveComponent("LoadingDotOutlined");
+  const _component_ArrowDown = resolveComponent("ArrowDown");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_CellCheckbox = resolveComponent("CellCheckbox");
+  const _component_CellRender = resolveComponent("CellRender");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.cellClass),
+    style: normalizeStyle(_ctx.cellStyle),
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    onDblclick: _cache[3] || (_cache[3] = (...args) => _ctx.handleDblclick && _ctx.handleDblclick(...args)),
+    onContextmenu: _cache[4] || (_cache[4] = (...args) => _ctx.handleContextmenu && _ctx.handleContextmenu(...args)),
+    onMouseenter: _cache[5] || (_cache[5] = (...args) => _ctx.handleMouseenter && _ctx.handleMouseenter(...args)),
+    onMouseleave: _cache[6] || (_cache[6] = (...args) => _ctx.handleMouseleave && _ctx.handleMouseleave(...args))
+  }, [
+    createElementVNode("div", {
+      class: "ele-table-cell",
+      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
+    }, [
+      _ctx.isExpandCol ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        _ctx.rowIndent ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "ele-table-indent",
+          style: normalizeStyle({ width: _ctx.rowIndent })
+        }, null, 4)) : createCommentVNode("", true),
+        _ctx.hasChildren ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(["ele-table-expand", { "is-collapse": _ctx.isCollapse }]),
+          onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleExpandChange && _ctx.handleExpandChange(...args), ["stop"]))
+        }, [
+          createVNode(_component_ElIcon, {
+            class: normalizeClass({ "is-loading": _ctx.loading })
+          }, {
+            default: withCtx(() => [
+              _ctx.loading ? (openBlock(), createBlock(_component_LoadingDotOutlined, { key: 0 })) : (openBlock(), createBlock(_component_ArrowDown, { key: 1 }))
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ], 2)) : (openBlock(), createElementBlock("div", _hoisted_1))
+      ], 64)) : createCommentVNode("", true),
+      _ctx.colType === "selection" ? (openBlock(), createBlock(_component_CellCheckbox, {
+        key: 1,
+        checked: _ctx.isChecked,
+        disabled: _ctx.isDisabled,
+        size: _ctx.tableSize,
+        onChange: _ctx.handleCheckedChange
+      }, null, 8, ["checked", "disabled", "size", "onChange"])) : _ctx.colType !== "expand" ? (openBlock(), createBlock(_component_CellRender, normalizeProps(mergeProps({ key: 2 }, _ctx.renderOpt)), {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.cellText), 1)
+        ]),
+        _: 1
+      }, 16)) : createCommentVNode("", true)
+    ])
+  ], 38);
+}
+const bodyCell = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  bodyCell as default
+};