vue-super-crud 1.7.1

package/packages/crud/menuBar.vue

@@ -0,0 +1,298 @@
+<template>
+  <div :class="b()">
+    <div v-if="showHandleRow" :class="b('handleRow')" style="flex: 1;">
+      <position
+        slotName="handleRow"
+        :slots="ctx.$scopedSlots"
+        :scope="ctx.crudOptions"
+        style="width: 100%;"
+        ><div
+          style="display: flex; width: 100%;"
+          v-if="handleRowButtons.length > 0"
+        >
+          <button_
+            v-for="(btn, index) in handleRowButtons"
+            :type="btn.type"
+            v-bind="btn"
+            :key="btn.key || btn.title || index"
+            :scope="btn.key === 'batchDelete' ? ctx.selectionRow : null"
+            :loading="ctx.loadingStatus"
+            :disabled="
+              btn.disabled === undefined
+                ? ctx.crudOptions.disabled
+                : btn.disabled
+            "
+          /></div
+      ></position>
+    </div>
+    <div v-if="showToolbar" :class="b('toolbar')">
+      <position
+        slotName="toolbar"
+        :slots="ctx.$scopedSlots"
+        :scope="ctx.crudOptions"
+        ><button_
+          v-for="(btn, index) in toolbarButtons"
+          :type="btn.type"
+          v-bind="btn"
+          :key="btn.key || btn.title || index"
+          :loading="ctx.loadingStatus"
+      /></position>
+    </div>
+    <drawerColumn v-if="showDrawer" ref="drawerColumn" />
+  </div>
+</template>
+
+<script>
+import create from "core/create";
+import { batchMerge } from "utils/mergeTemp";
+import drawerColumn from "./drawerColumn.vue";
+import button_ from "pak/button";
+import position from "core/components/position";
+import { checkVisibility } from "utils";
+export default create({
+  name: "crud-menuBar",
+  inject: ["ctx"],
+  components: { drawerColumn, button_, position },
+  data() {
+    return {
+      isBatchEdit: false,
+      showDrawer: false,
+    };
+  },
+  mounted() {
+    // 订阅编辑状态变更事件
+    if (this.ctx.editState) {
+      this.ctx.editState.on("edit-status-change", () => {
+        if (!this.ctx.editConfig.batch) return;
+        const editRowKeys = this.ctx.editState.getEditingRowKeys();
+        if (editRowKeys.length === 0) {
+          this.isBatchEdit = false;
+        }
+        if (editRowKeys.length === this.ctx.list.length) {
+          this.isBatchEdit = true;
+        }
+      });
+    }
+  },
+  computed: {
+    showHandleRow() {
+      return checkVisibility(this.handleRow, null, true);
+    },
+    showToolbar() {
+      return checkVisibility(this.toolbar, null, true);
+    },
+    handleRow() {
+      const handleRow = { ...(this.ctx.crudOptions.handleRow || {}) };
+      const editConfig = this.ctx.editConfig;
+      return {
+        add: editConfig.add,
+        rowAdd: editConfig.rowAdd,
+        batchDelete: editConfig.batchDelete,
+        ...handleRow,
+      };
+    },
+    toolbar() {
+      const toolbar = { ...(this.ctx.crudOptions.toolbar || {}) };
+      const editConfig = this.ctx.editConfig;
+      return {
+        batchEdit: editConfig.batch,
+        batchSave: editConfig.batch,
+        batchCancel: editConfig.batch,
+        search: this.hasSearch,
+        // excelImport: true,
+        // excelExport: true,
+        zoom: true,
+        refresh: true,
+        reset: true,
+        column: true,
+        ...toolbar,
+      };
+    },
+    hasSearch() {
+      return this.ctx.trueRenderColumns.some((i) => i.search);
+    },
+    handleRowButtons() {
+      const handleRow = this.handleRow;
+      if (!handleRow) return;
+      let buttons = [];
+
+      const merges = batchMerge(
+        "btn.crud.handleRow",
+        handleRow,
+        {
+          ctx: this.ctx,
+        },
+        this.handleRowTemps
+      );
+      buttons.push(...merges);
+      buttons = this.ctx.checkHiddenButtons("handleRow", buttons);
+      return buttons;
+    },
+    toolbarButtons() {
+      const toolbar = this.toolbar;
+      if (!toolbar) return;
+      let buttons = [];
+      const merges = batchMerge(
+        "btn.crud.toolbar",
+        toolbar,
+        {
+          ctx: this.ctx,
+          self: this,
+        },
+        this.toolbarTemps
+      );
+      buttons.push(...merges);
+      buttons = this.ctx.checkHiddenButtons("toolbar", buttons);
+      return buttons;
+    },
+    handleRowTemps() {
+      return {
+        add: {
+          icon: "el-icon-plus",
+          label: "新增",
+          type: "primary",
+          onClick: () => {
+            this.ctx.handleAdd(this.ctx.editConfig.add?.addType || "last");
+          },
+        },
+        batchDelete: {
+          icon: "el-icon-delete",
+          label: "删除",
+          type: "danger",
+          disabled: this.ctx.selectionRow.length === 0,
+          onClick: () => {
+            this.ctx.handleBatchDelete();
+          },
+        },
+        rowAdd: {
+          icon: "el-icon-plus",
+          label: "新增",
+          type: "primary",
+          onClick: () => {
+            const editConfig = this.ctx.editConfig;
+            this.ctx.handleRowAdd(editConfig.rowAdd?.addType);
+          },
+        },
+      };
+    },
+    toolbarTemps() {
+      return {
+        batchEdit: {
+          label: "批量编辑",
+          type: "primary",
+          innerHide: this.isBatchEdit,
+          disabled:
+            this.ctx.list.length === 0 ||
+            (this.ctx.editConfig.batch?.isSelect &&
+              this.ctx.selectionRow.length === 0),
+          onClick: () => {
+            this.isBatchEdit = true;
+            this.ctx.handleBatchRowEdit();
+          },
+        },
+        batchSave: {
+          type: "primary",
+          label: "保存",
+          style: {
+            marginLeft: "auto",
+          },
+          innerHide: !this.isBatchEdit,
+          onClick: () => {
+            this.ctx.handleBatchRowSave(() => {
+              this.isBatchEdit = false;
+            });
+          },
+        },
+        batchCancel: {
+          label: "取消",
+          style: {
+            marginRight: "10px",
+          },
+          innerHide: !this.isBatchEdit,
+          onClick: () => {
+            this.resetBatchEdit();
+          },
+        },
+        excelImport: {
+          icon: "el-icon-upload",
+          title: "导入",
+          circle: true,
+          onClick: () => {
+            this.ctx.showExcelImportDialog();
+          },
+        },
+        excelExport: {
+          icon: "el-icon-download",
+          title: "导出",
+          circle: true,
+          onClick: () => {
+            this.ctx.exportToExcel();
+          },
+        },
+        zoom: {
+          icon: "el-icon-full-screen",
+          title: "最大化",
+          circle: true,
+          onClick: () => {
+            this.ctx.isMaximize = !this.ctx.isMaximize;
+            this.ctx.$emit("zoom");
+          },
+        },
+        refresh: {
+          icon: "el-icon-refresh",
+          title: "刷新",
+          circle: true,
+          onClick: () => {
+            this.ctx.getList();
+            this.ctx.$emit("refresh");
+          },
+        },
+        reset: {
+          icon: "el-icon-refresh-right",
+          title: "重置",
+          circle: true,
+          onClick: () => {
+            this.ctx.handleReset();
+          },
+        },
+        search: {
+          icon: "el-icon-search",
+          title: "查询",
+          circle: true,
+          onClick: () => {
+            this.ctx.showSearch = !this.ctx.showSearch;
+            this.ctx.loadingStatus = true;
+            this.ctx.isChangeShowSearch = true;
+            setTimeout(() => {
+              this.ctx.loadingStatus = false;
+            }, 300);
+            setTimeout(() => {
+              this.ctx.isChangeShowSearch = false;
+            }, 500);
+          },
+        },
+        column: {
+          icon: "el-icon-set-up",
+          title: "列设置",
+          circle: true,
+          onClick: () => {
+            this.showDrawerColumn();
+          },
+        },
+      };
+    },
+  },
+  methods: {
+    showDrawerColumn() {
+      this.showDrawer = true;
+      this.$nextTick(() => {
+        this.$refs.drawerColumn.showDrawer();
+      });
+    },
+    resetBatchEdit() {
+      this.isBatchEdit = false;
+      this.ctx.handleBatchRowCancel();
+    },
+  },
+});
+</script>

package/packages/crud/mixins/cacheHandler.js

@@ -0,0 +1,36 @@
+import cache from "utils/cache.js";
+export default {
+  data() {
+    return {
+      setOptions: {
+        fixed: {},
+        sort: {},
+        hidden: [],
+        pageSize: 10,
+      },
+    };
+  },
+  methods: {
+    getLocalCache() {
+      if (!this.$route) return;
+      const cacheData = cache.local.getJSON("tableOptions") || {};
+      this.setOptions = Object.assign(
+        this.setOptions,
+        cacheData[this.$route.path]
+      );
+    },
+    resetLocalCache() {
+      this.setOptions.fixed = {};
+      this.setOptions.sort = {};
+      this.setOptions.hidden = [];
+      this.saveLocalCache();
+    },
+    saveLocalCache(refresh = true) {
+      if (!this.$route) return;
+      let cacheData = cache.local.getJSON("tableOptions") || {};
+      cacheData[this.$route.path] = this.setOptions;
+      cache.local.setJSON("tableOptions", cacheData);
+      refresh && this.refreshTable();
+    },
+  },
+};

package/packages/crud/mixins/calcColumnWidth.js

@@ -0,0 +1,79 @@
+export default {
+  data() {
+    return {
+      curIndex: 0,
+    };
+  },
+  created() {
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+  },
+  methods: {
+    getCharacterWidth(char, font = "12px Arial") {
+      this.context.font = font;
+      return Math.ceil(this.context.measureText(char).width);
+    },
+
+    // 获取最大宽度
+    getMaxContentWidth(tableData, property, font, padding) {
+      let maxWidth = 0;
+      for (let index = 0; index < tableData.length; index++) {
+        const row = tableData[index];
+        if (row[property] != null) {
+          const contentWidth = this.getCharacterWidth(
+            String(row[property]),
+            font
+          );
+          if (contentWidth > maxWidth) {
+            maxWidth = contentWidth;
+            this.curIndex = index;
+          }
+        }
+      }
+      return maxWidth + padding;
+    },
+
+    // 获取第一个内容不为空的宽度
+    getFirstContentWidth(tableData, property, font, padding) {
+      for (let index = 0; index < tableData.length; index++) {
+        const row = tableData[index];
+        if (row[property] != null && row[property].toString().length > 0) {
+          this.curIndex = index;
+          return this.getCharacterWidth(String(row[property]), font) + padding;
+        }
+      }
+      return 0;
+    },
+
+    calcColumnWidth(property, tableData, type = "first", font, padding = 20) {
+      if (!property || !Array.isArray(tableData) || tableData.length === 0) {
+        return "80px";
+      }
+
+      let contentWidth;
+      if (type === "first") {
+        contentWidth = this.getFirstContentWidth(
+          tableData,
+          property,
+          font,
+          padding
+        );
+      } else {
+        contentWidth = this.getMaxContentWidth(
+          tableData,
+          property,
+          font,
+          padding
+        );
+      }
+      let flexWidth = contentWidth < 80 ? 80 : contentWidth;
+      return `${flexWidth}px`;
+    },
+    getColumnWidth(width, prop, data, type, font, padding) {
+      if (width === "auto") {
+        return this.calcColumnWidth(prop, data, type, font, padding);
+      }
+      return width;
+    },
+  },
+};

package/packages/crud/mixins/calcHeight.js

@@ -0,0 +1,105 @@
+import { debounce } from "lodash-es";
+import { checkVisibility } from "utils";
+export default {
+  data() {
+    return {
+      tableTop: 0,
+      wrapperTop: 0,
+      innerHeight: innerHeight,
+      observer: new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (this.visibilityCallback) {
+            this.visibilityCallback(entry.isIntersecting);
+          }
+        });
+      }),
+      visibilityCallback: null,
+    };
+  },
+  created() {
+    this.handleResize = debounce(this.handleResize, 200);
+  },
+  mounted() {
+    window.addEventListener("resize", this.handleResize);
+    this.getClientTop();
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.handleResize);
+  },
+  computed: {
+    defaultHeight() {
+      return this.crudOptions.defaultHeight || 200;
+    },
+    isAutoHeight() {
+      return this.crudOptions.height === "auto";
+    },
+    tableHeight() {
+      if (!this.isAutoHeight) return this.crudOptions.height;
+      const calc = (this.crudOptions.calcHeight || 0) + this.footerHeight;
+      const defaultHeight =
+        this.defaultHeight -
+        (this.tableTop - this.wrapperTop) -
+        this.footerHeight;
+      return (
+        Math.max(
+          Math.ceil(this.innerHeight - this.tableTop - calc),
+          defaultHeight
+        ) + "px"
+      );
+    },
+    wrapperHeight() {
+      if (!this.isAutoHeight) return "auto";
+      const calc = this.crudOptions.calcHeight || 0;
+      return (
+        Math.max(
+          Math.ceil(this.innerHeight - this.wrapperTop - calc),
+          this.defaultHeight
+        ) + "px"
+      );
+    },
+    footerHeight() {
+      if (
+        checkVisibility(this.crudOptions.pagination, null, this.total > 0) ===
+        false
+      )
+        return 0;
+      return 50;
+    },
+  },
+  updated() {
+    this.getClientTop();
+  },
+  activated() {
+    this.getClientTop();
+  },
+  methods: {
+    getClientTop() {
+      if (this.isAutoHeight) {
+        this.$nextTick(() => {
+          const tableRef = this.$refs.tableRef?.$el;
+          this.observeVisibility(tableRef, (isVisible) => {
+            if (isVisible) {
+              const tableTop = tableRef?.getBoundingClientRect().top;
+              if (this.tableTop !== tableTop) this.tableTop = tableTop;
+              const wrapperTop = this.$refs.wrapper?.getBoundingClientRect()
+                .top;
+              if (this.wrapperHeight !== wrapperTop)
+                this.wrapperTop = wrapperTop;
+            }
+            this.$nextTick(() => {
+              this.observer.disconnect();
+            });
+          });
+        });
+      }
+    },
+    observeVisibility(element, callback) {
+      this.visibilityCallback = callback;
+      this.observer.observe(element);
+    },
+    handleResize() {
+      this.innerHeight = innerHeight;
+      this.getClientTop();
+    },
+  },
+};

package/packages/crud/mixins/columnHandler.js

@@ -0,0 +1,128 @@
+import { isPlainObject, get, merge, cloneDeep, pick } from "lodash-es";
+import { mergeTemp, singleMerge } from "utils";
+export default {
+  methods: {
+    initColumn(item, index) {
+      if (
+        (item.form || this.isEdit || item.isEdit) &&
+        item.form !== false &&
+        item.isEdit !== false
+      ) {
+        item.form = this.extendsOption(
+          item,
+          item.form,
+          pick(item, ["label", "prop", "required", "regular", "rules"])
+        );
+      }
+      if ((item.form || item.add) && item.add !== false) {
+        item.add = this.extendsOption(item, item.add, item.form);
+      }
+      if ((item.form || item.edit) && item.edit !== false) {
+        item.edit = this.extendsOption(item, item.edit, item.form);
+      }
+      if ((item.form || item.view) && item.view !== false) {
+        item.view = this.extendsOption(item, item.view, item.form);
+      }
+      if (item.search) {
+        item.search = this.extendsOption(item, item.search, {});
+      }
+      if ((item.search || item.searchHeader) && item.searchHeader !== false) {
+        item.searchHeader = this.extendsOption(
+          item,
+          item.searchHeader,
+          item.search
+        );
+      }
+      const order = this.setOptions?.sort[item.prop];
+      item.order = order === 0 || order ? order : index;
+
+      // 行合并
+      const span = item.spanProp || item.sameRowSpan;
+      if (span) {
+        if (typeof span === "string") {
+          this.sameRowSpans.push(span);
+        } else {
+          this.sameRowSpans.push(item.prop);
+        }
+      }
+      // 统计
+      if (item.summary) {
+        this._showSummary = true;
+      }
+      if (!item.minWidth && !item.width) {
+        item.minWidth = this.getDefaultColumnMinWidth(item);
+      }
+    },
+    extendsOption(item, current, extendsObj) {
+      if (current === false) return;
+      // current 可能为 undefined || true 转换为 {}
+      current = isPlainObject(current) ? current : {};
+      current = mergeTemp("render", current.presetType, current);
+      const formatData = get(current, "formatData.type") || current.formatData;
+      if (typeof formatData === "string") {
+        current.formatData = Object.assign(
+          {},
+          current.formatData,
+          singleMerge("formatData", formatData, current)
+        );
+      }
+      extendsObj = cloneDeep(extendsObj);
+      if (current.hidden !== true) {
+        return merge(
+          {
+            label: item.label,
+            prop: item.prop,
+            dict: item.dict,
+            ...extendsObj,
+          },
+          current
+        );
+      }
+    },
+    isDefaultColumn(col) {
+      return this._runWithoutDeps(() => {
+        if (
+          col.comp ||
+          col.render ||
+          col.html ||
+          col.isEdit ||
+          this.extendsScopedSlots[col.prop] ||
+          col.position ||
+          col.formatData
+        ) {
+          return false;
+        }
+        if (this.editConfig.mode && col.isEdit !== false) {
+          return false;
+        }
+        return true;
+      });
+    },
+    getDefaultColumnMinWidth(col) {
+      if (this.labelMinWidthMap.has(col.label)) {
+        return this.labelMinWidthMap.get(col.label);
+      }
+      const labelSpan = document.createElement("span");
+      labelSpan.innerText = col.label;
+      document.body.appendChild(labelSpan);
+      let labelMinWidth = labelSpan.getBoundingClientRect().width + 20;
+      col.search && (labelMinWidth += 20);
+      col.sortable && (labelMinWidth += 25);
+      document.body.removeChild(labelSpan);
+      labelMinWidth = Math.max(Math.round(labelMinWidth), 80);
+      this.labelMinWidthMap.set(col.label, labelMinWidth);
+      return labelMinWidth;
+    },
+    extendsSlots(slots, name, extendsName) {
+      Object.keys(slots).forEach((slot) => {
+        if (slot.endsWith(`-${extendsName}`)) {
+          const baseName = slot.slice(0, -(extendsName.length + 1));
+          const searchSlotName = `${baseName}-${name}`;
+          if (!slots[searchSlotName]) {
+            slots[searchSlotName] = slots[slot];
+          }
+        }
+      });
+    },
+  },
+};