yoonasy / vue3-virtual-scroller Goto Github PK

// table_utils.js
const Events = {
  Change: "change",
  CellChange: "cell-change",
  Error: "error",
  Delete: "delete",
  Operate: "Operate",
  Blur: "blur",
  Focus: "focus",
  UpdateModelValue: "update:modelValue",
  Expand: "expand",
};
const { h, defineComponent, ref } = Vue;
const { ElInput, ElButton, ElIcon, ElTooltip } = ElementPlus;
const { Close } = ElementPlusIconsVue;
const { cloneDeep, isNumber, isUndefined } = _;

const CustomInput = {
  name: "custom-input",
  emits: [
    Events.Change,
    Events.Error,
    Events.Focus,
    Events.Blur,
    Events.UpdateModelValue,
  ],
  components: { ElInput },
  props: {
    modelValue: {
      required: true,
      type: [String, Number, undefined],
    },
    config: {
      required: true,
      type: Object,
    },
  },
  template: /*html*/ `
    <el-input
      :class="getInputCss"
      ref="inputRef"
      v-model="value"
      @input="onInput"
      @change="onChange"
      @blur="onBlur"
      @focus="onFocus"
      @mouseover="onMouseOver"
      @mouseleave="onMouseLeave"
      size="small"
    >
    </el-input>
  `,
  data() {
    return {
      value: cloneDeep(this.modelValue),
      error: "",
    };
  },
  computed: {
    getInputCss() {
      return {
        "is-error": Boolean(this.error),
      };
    },
  },
  watch: {
    modelValue: {
      handler(new_value) {
        this.value = cloneDeep(new_value);
      },
    },
  },
  methods: {
    focus() {
      this.$refs.inputRef.focus();
    },
    onMouseOver() {
      console.log("custom input onMouseOver");
      if (this.error) this.$emit(Events.Error, this.error, this.$refs.inputRef);
    },
    onMouseLeave() {
      if (this.error) this.$emit(Events.Error); // 取消错误框的显示
    },
    onBlur() {
      this.validate();
      if (this.error) return;
      this.$emit(Events.Blur);
    },
    onFocus() {
      this.$emit(Events.Focus);
    },
    onInput() {
      this.validate();
    },
    onChange() {
      this.validate();
      if (this.error) return;
      const value = outFormatter(this.config.outType, this.value);
      this.value = value;
      this.$emit(Events.Change, value);
      this.$emit(Events.UpdateModelValue, value);
    },
    validate() {
      if (this.config.required) {
        this.error = requiredValidate(this.value);
        if (this.error) {
          this.$emit(Events.Error, this.error, this.$refs.inputRef);
          return;
        }
      }
      if (!this.config.validate) return;
      else {
        this.error = this.config.validate(this.value);
        this.$emit(Events.Error, this.error, this.$refs.inputRef);
        return;
      }
    },
  },
};

const EditableText = {
  name: "editable-text",
  emits: [Events.Change, Events.Error],
  components: { CustomInput },
  props: {
    rowData: {
      required: true,
      type: Object,
    },
    column: {
      required: true,
      type: Object,
    },
  },
  template: /*html*/ `
    <div class="editable-text">
      <custom-input
        v-if="isEdit"
        ref="inputRef"
        v-model="value"
        :config="column"
        @change="onChange"
        @blur="onExitEditMode"
        @focus="onEnterEditMode"
        @error="onError"
        @mouseover="onMouseOver"
        @mouseleave="onMouseLeave"
      >
      </custom-input>
      <div v-else @dblclick="onEnterEditMode" :title="value">
        {{formattedText}}
      </div>
    </div>
  `,
  data() {
    return {
      editing: false,
      value: cloneDeep(this.rowData[this.column.dataKey]),
      error: "",
    };
  },
  computed: {
    isEdit() {
      return this.rowData._creating || this.editing;
    },
    formattedText() {
      if (this.column.textFormatter)
        return this.column.textFormatter(this.value);
      else return this.value;
    },
  },
  watch: {
    rowData: {
      handler(new_value) {
        this.value = new_value[this.column.dataKey];
      },
    },
  },
  methods: {
    onMouseOver() {
      if (this.error) this.$emit(Events.Error, this.error, this.$refs.inputRef);
    },
    onMouseLeave() {
      if (this.error) this.$emit(Events.Error); // 取消错误框的显示
    },
    onExitEditMode() {
      this.editing = false;
    },
    onEnterEditMode() {
      if (!this.rowData._editable) return;
      this.editing = true;
      this.$nextTick(() => {
        this.$refs.inputRef.focus();
      });
    },
    onChange(value) {
      this.rowData[this.column.dataKey] = this.value;
      this.editing = false;
      this.$emit(Events.Change, value);
    },
    onError(...args) {
      this.$emit(Events.Error, ...args);
    },
  },
};

const DeleteIcon = {
  name: "delete-icon",
  emits: [Events.Delete],
  components: { Close, ElButton, ElIcon },
  template: /*html*/ `
    <el-button
      circle
      type="danger"
      size="small"
      class="delete_button"
      @click="$emit('${Events.Delete}')"
    >
      <el-icon>
        <Close />
      </el-icon>
    </el-button>
  `,
};

const createTextFormatter = (precision = 4) => {
  return (value) => {
    if (value === null) return "-";
    else {
      const num = Number(value);
      return Number.isNaN(num) ? value : num.toFixed(precision);
    }
  };
};

const outFormatter = (type, value) => {
  let _value;
  switch (type) {
    case "number":
      _value = Number(value);
      break;
    default:
      _value = value;
      break;
  }
  return _value;
};

const numberValidate = (value) => {
  const num = Number(value);
  if (Number.isNaN(num) || !isNumber(num)) return "please input number";
  else return "";
};

const requiredValidate = (value) => {
  if ([undefined, ""].includes(value)) {
    return "field required";
  } else return "";
};

const ExpandText = {
  name: "expand-text",
  emits: [Events.UpdateModelValue],
  props: {
    modelValue: {
      type: Boolean,
      required: true,
    },
  },
  template: /*html*/ `
        <div class="expand-icon" @click="onClick">
            <div :class="getEditableTextClass"></div>
            <div class="expand-icon-label">
                <slot></slot>
            </div>
        </div>
    `,
  data() {
    return {};
  },
  computed: {
    getEditableTextClass() {
      return {
        "expand-icon-box": true,
        expand: this.modelValue,
      };
    },
  },
  methods: {
    onClick() {
      this.$emit(Events.UpdateModelValue, !this.modelValue);
    },
  },
};

const TableCellComponent = {
  ExpandText: "expand-text",
  EditableText: "editable-text",
  DeleteIcon: "delete-icon",
  Text: "text",
  Input: "input",
};

const TableCell = defineComponent({
  name: "table-cell",
  emits: [Events.Change, Events.Expand, Events.Error],
  components: {
    ExpandText,
    EditableText,
    DeleteIcon,
    CustomInput,
  },
  props: {
    rowData: {
      type: Object,
      required: true,
    },
    column: {
      type: Object,
      required: true,
    },
  },
  template: /*html*/ `
    <div>
      <div v-if="getComponent === 'editable-text'">
        <editable-text
          :rowData="rowData"
          :column="column"
          @change="handleChange"
          @error="onError"
        >
      </editable-text>
      </div>
      <div v-else-if="getComponent === 'delete'">
        <delete-icon @delete="handleOperate('delete', rowData, column)"></delete-icon>
      </div>
      <div v-else-if="getComponent === 'expand-text'">
        <expand-text
          v-model="rowData.is_expand"
          @update:modelValue="handleExpand"
        >
          {{ rowData[column.dataKey] }}
        </expand-text>
      </div>
      <div v-else-if="getComponent === 'text'">
        {{ rowData[column.dataKey] }}
      </div>
      <div v-else-if="getComponent === 'input'">
        <custom-input v-model="rowData[column.dataKey]" :config="column" change="handleChange" @error="onError"></custom-input>
      </div>
    </div>
  `,
  computed: {
    getComponent() {
      if (this.column.component) return this.column.component;
      const component_index = isUndefined(this.rowData.children) ? 1 : 0;
      return this.column.components[component_index];
    },
  },
  methods: {
    handleChange(value) {
      this.$emit(Events.Change, value, this.rowData, this.column);
    },
    onError(msg, errorRef) {
      return this.$emit(Events.Error, msg, errorRef);
    },
    handleOperate(operation, rowData, column) {
      if (operation === "delete") {
        this.$parent.$parent.handleOperate(operation, rowData, column);
      }
    },
    handleExpand(value) {
      this.rowData.is_expand = value;
      this.$emit(Events.Expand, value);
    },
    isUndefined(value) {
      return typeof value === "undefined";
    },
  },
});

const popperOptions = {
  modifiers: [
    {
      name: "computeStyles",
      options: {
        adaptive: false,
        enabled: false,
      },
    },
  ],
};

const VirtualTable = defineComponent({
  name: "virtual-table",
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    maxTableHeight: {
      type: Number,
      default: 500,
    },
    columns: {
      type: Array,
      required: true,
    },
    addition: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    RecycleScroller: Vue3VirtualScroller.RecycleScroller,
    TableCell,
    ElTooltip,
    ElButton,
  },
  template: /*html*/ `
    <div class="virtual-table">
      <table class="fixed-header">
        <thead>
          <tr>
            <th v-for="column in getColumns" :style="{width: column.width}">{{column.title}}</th>
          </tr>
        </thead>
      </table>
      <div class="scroller-container">
        <recycle-scroller
          ref="scroller"
          class="scroller"
          :items="rows"
          :item-size="itemSize"
          key-field="id"
          :buffer="2000"
          :style="{height: getTableHeight}"
          v-slot="{ item, index }"
        >
          <tr >
            <td v-for="column in getColumns">
              <table-cell
                :row-data="item"
                :column="column"
                :style="{width: column.width}"
                @change="handleCellChange"
                @expand="handleExpandElement(item, index)"
                @error="handleInputError"
              >
              </table-cell>
            </td>
          </tr>
        </recycle-scroller>
      </div>
      <table class="addtion-table">
        <tr v-for="(item, index) in getAdditonData">
          <td v-for="column in getAdditonColumns">
            <table-cell
              :row-data="item"
              :column="column"
              :style="{width: column.width}"
              @change="handleCellChange"
              @error="handleInputError"
            >
            </table-cell>
          </td>
        </tr>
      </table>
      <div v-if="addition" class="addition-button">
          <el-button type="primary" @click="handlerAddRowClick" round> + </el-button>
          <el-button
              v-if="showSubmitButton"
              type="primary"
              @click="handlerSubmitRowClick"
              round
          >
              √
          </el-button>
        </div>
        <el-tooltip
          v-if="error"
          popper-class="property-error-popper"
          effect="light"
          :content="error"
          :visible="Boolean(error)"
          :virtual-ref="errorRef"
          virtual-triggering
          :popper-options="popperOptions"
          trigger="hover"
        ></el-tooltip>
    </div>
  `,
  data() {
    return {
      rows: this.initRows(),
      error: "",
      itemSize: 23,
      errorRef: ref(),
      temp_rows: {},
      popperOptions,
    };
  },
  computed: {
    getTableHeight() {
      const height = this.rows.length * this.itemSize;
      return `${Math.min(this.maxTableHeight, height)}px`;
    },
    element_map() {
      const element_map = {};
      this.tableData.forEach((element_row) => {
        element_map[element_row.name] = element_row.children;
      });
      return element_map;
    },
    getAdditonData() {
      return Object.values(this.temp_rows);
    },
    getAdditonColumns() {
      return this.getColumns.map((item) => {
        return {
          ...item,
          component: item.component ?? item.components[2],
        };
      });
    },
    getColumns() {
      return this.columns.map((item) => {
        if (item.textFormatter) {
          const _textFormatter = item.textFormatter;
          item.textFormatter = (...args) => _textFormatter(...args, this);
        }
        if (item.cellRenderer) {
          const _cellRenderer = item.cellRenderer;
          item.cellRenderer = (...args) => _cellRenderer(...args, this);
        }
        if (item.validate) {
          const _validate = item.validate;
          item.validate = (...args) => _validate(...args, this);
        }
        return item;
      });
    },
    getColumnsMap() {
      const maps = {};
      const columns = this.getColumns;
      Object.keys(columns).forEach((index) => {
        const value = columns[index];
        maps[value.dataKey] = columns[index];
      });
      return maps;
    },
    showSubmitButton() {
      return Boolean(Object.keys(this.temp_rows).length);
    },
  },
  mounted() {
    this.initRows();
    this.fixScrollEmptyBug();
  },
  methods: {
    initRows() {
      const rows = new Array(this.tableData.length);
      for (let i = 0; i < this.tableData.length; i += 1) {
        rows[i] = this.tableData[i];
      }
      return rows;
    },
    handleExpandElement(item, index) {
      if (item.is_expand) {
        this.rows[index].is_expand = true;

        // 计算新数组的大小
        let newSize = this.rows.length + this.element_map[item.name].length;

        // 创建一个新的具有正确大小的数组
        let newArray = new Array(newSize);

        // 复制插入点之前的数据
        for (let i = 0; i <= index; i++) {
          newArray[i] = this.rows[i];
        }

        // 插入新数据
        for (let i = 0; i < this.element_map[item.name].length; i++) {
          newArray[index + 1 + i] = this.element_map[item.name][i];
        }

        // 复制插入点之后的数据
        for (let i = index + 1; i < this.rows.length; i++) {
          newArray[this.element_map[item.name].length + i] = this.rows[i];
        }

        // 使用新数组替换旧数组
        this.rows = newArray;
      } else {
        this.rows[index].is_expand = false;

        // 计算新数组的大小
        let newSize = this.rows.length - this.element_map[item.name].length;

        // 创建一个新的具有正确大小的数组
        let newArray = new Array(newSize);

        // 复制删除点之前的数据
        for (let i = 0; i < index + 1; i++) {
          newArray[i] = this.rows[i];
        }

        // 复制删除点之后的数据，跳过要删除的元素
        for (
          let i = index + 1 + this.element_map[item.name].length;
          i < this.rows.length;
          i++
        ) {
          newArray[i - this.element_map[item.name].length] = this.rows[i];
        }

        // 使用新数组替换旧数组
        this.rows = newArray;
      }
    },
    handleInputError(msg, inputRef) {
      if (isUndefined(msg)) {
        // 取消错误提示框
        this.error = "";
        return;
      }
      this.error = msg;
      this.errorRef = inputRef;
    },
    handleCellChange(value, rowData, column) {
      if (rowData._creating) return;
      this.$emit(Events.CellChange, value, rowData, column);
    },
    handleOperate(op_type, rowData, column) {
      if (op_type === "delete" && rowData._creating) {
        this.clearSubmitItem(rowData.id);
        return;
      }
      this.$emit(Events.Operate, op_type, rowData, column);
    },
    clearSubmitItem(id) {
      delete this.temp_rows[id];
    },
    /**
     * @description 提交成功后的清理工作
     */
    clearSubmit(clear_all = false) {
      if (clear_all) {
        const temp_rows_keys = Object.keys(this.temp_rows);
        if (temp_rows_keys.length) {
          temp_rows_keys.forEach((key) => {
            this.clearSubmitItem(key);
          });
        }
      }
    },
    handlerAddRowClick() {
      const uuid = String(new Date().getTime());
      const new_row = {
        id: uuid,
        children: [],
        _creating: true,
      };
      this.temp_rows[new_row.id] = new_row;
      this.getColumns.forEach((column) => {
        if (column.dataKey) new_row[column.dataKey] = "";
      });
    },
    handlerSubmitRowClick() {
      let temp_rows = Object.values(cloneDeep(this.temp_rows));
      temp_rows = temp_rows.filter((row) => {
        const columnsMap = this.getColumnsMap;
        return Object.keys(row).every((key) => {
          const column = columnsMap[key];
          if (column) {
            const err_msg = column.validate && column.validate(row[key]);
            if (err_msg) return false;
            if (column.outType)
              row[key] = outFormatter(column.outType, row[key]);
          }
          return true;
        });
      });
      if (!temp_rows.length) return;
      this.$emit(Events.Operate, "create", temp_rows);
    },
    fixScrollEmptyBug() {
      let scrollTimeout;
      console.log(this);
      const handleScroll = (event) => {
        // 清除旧的定时器
        if (scrollTimeout) {
          clearTimeout(scrollTimeout);
        }

        // 设置新的定时器
        scrollTimeout = setTimeout(() => {
          console.log("滚动已停止，触发滚动键");

          // 在这里触发滚动键
          // 例如：模拟向下箭头键的按下
          const keyboardEvent = new KeyboardEvent("keydown", {
            key: "ArrowDown",
            code: "ArrowDown",
          });
          document.dispatchEvent(keyboardEvent);
        }, 1050);
      };

      // 监听滚动事件
      document
        .querySelector(".scroller")
        .addEventListener("scroll", handleScroll);
    },
  },
});

var TableUtils = {
  VirtualTable,
  createTextFormatter,
  numberValidate,
  TableCellComponent,
};