vue-super-crud 1.7.1 → 1.7.4

package/packages/crud/menuBar.vue

@@ -1,298 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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];
-          }
-        }
-      });
-    },
-  },
-};