vue-super-crud 1.7.1

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "vue-super-crud",
+  "version": "1.7.1",
+  "main": "lib/super-crud.min.js",
+  "private": false,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs",
+    "lib": "vue-cli-service build --target lib --dest lib src/index.js",
+    "dev": "cross-env TARGET=dev gulp watch",
+    "build": "cross-env TARGET=prod gulp build",
+    "deploy": "deploy.bat",
+    "release": "standard-version",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.13",
+    "el-table-virtual-scroll": "^1.4.6",
+    "element-ui": "^2.15.14",
+    "lodash-es": "^4.17.21",
+    "mockjs": "^1.1.0",
+    "vue": "^2.6.11",
+    "vue-contextmenujs": "^1.4.11",
+    "vue-highlight.js": "^3.1.0",
+    "vue-router": "^3.2.0",
+    "vuedraggable": "^2.24.3",
+    "vuepress": "^1.9.10",
+    "vuepress-plugin-code-copy": "^1.0.6",
+    "xe-utils": "^3.5.28",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.13.14",
+    "@babel/preset-env": "^7.13.12",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+    "@vue/babel-preset-jsx": "^1.4.0",
+    "@vue/cli-plugin-babel": "~4.5.19",
+    "@vue/cli-plugin-router": "~4.5.19",
+    "@vue/cli-plugin-vuex": "~4.5.19",
+    "@vue/cli-service": "~4.5.19",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-jsx-v-model": "^2.0.3",
+    "cache-loader": "^4.1.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.0",
+    "gulp": "^4.0.0",
+    "gulp-autoprefixer": "^4.0.0",
+    "gulp-cssmin": "^0.1.7",
+    "gulp-postcss": "^6.1.1",
+    "gulp-sass": "^5.1.0",
+    "jest": "^29.7.0",
+    "progress-bar-webpack-plugin": "^2.1.0",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "standard-version": "^9.5.0",
+    "vue-loader": "^15.9.6",
+    "vue-template-compiler": "^2.6.11",
+    "vuepress-plugin-fulltext-search": "^2.2.1",
+    "vuepress-theme-reco": "^1.6.17",
+    "webpack": "^4.27.0",
+    "webpack-merge": "^4.1.4"
+  }
+}

package/packages/button/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <el-button
+    v-if="getIsShow() && !attrs.children"
+    :disabled="isDebounce || attrs.disabled"
+    v-bind="attrs"
+    :size="size"
+    :class="b()"
+    @click="handleClick()"
+  >
+    <span v-if="attrs.label">{{ attrs.label }}</span>
+    <slot v-if="$slots.default"></slot>
+  </el-button>
+  <el-dropdown
+    v-else-if="getIsShow()"
+    v-bind="attrs"
+    trigger="click"
+    :size="size"
+    :disabled="isDebounce || attrs.disabled"
+  >
+    <el-button
+      :class="b()"
+      :size="size"
+      :disabled="isDebounce || attrs.disabled"
+      v-bind="attrs"
+      ><span v-if="attrs.label">{{ attrs.label }}</span
+      ><slot v-if="$slots.default"></slot
+      ><i class="el-icon-arrow-down el-icon--right"></i
+    ></el-button>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item
+        v-for="(child, idx) in attrs.children"
+        @click.native="handleClick(child)"
+        :key="idx"
+        v-bind="child"
+        >{{ child.label }}</el-dropdown-item
+      >
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+<script>
+import { create } from "core";
+import { isFunction } from "lodash-es";
+export default create({
+  inheritAttrs: false,
+  name: "button",
+  props: {
+    time: {
+      type: Number,
+      default: 300,
+    },
+    size: String,
+    scope: {},
+    onClick: {},
+    confirm: {},
+    customConfirm: {},
+    successBack: {},
+    textSubmit: {},
+    batchConfirm: {},
+  },
+  data() {
+    return {
+      isDebounce: false,
+      attrs: {},
+    };
+  },
+  watch: {
+    $attrs() {
+      this.attrs = this.getBindAttrs();
+    },
+  },
+  created() {
+    this.attrs = this.getBindAttrs();
+  },
+  methods: {
+    getBindAttrs() {
+      const attrs = {};
+      Object.keys(this.$attrs).forEach((key) => {
+        if (isFunction(this.$attrs[key])) {
+          attrs[key] = this.$attrs[key](this.scope);
+        } else {
+          attrs[key] = this.$attrs[key];
+        }
+      });
+      return attrs;
+    },
+    getIsShow() {
+      const bindAttrs = this.attrs;
+      if (bindAttrs.hidden) return false;
+      if (bindAttrs.show === false) return false;
+      return true;
+    },
+    handleClick(item = this) {
+      this.beforeClick((...args) => {
+        if (item.onClick) {
+          item.onClick(this.scope, ...args);
+        } else {
+          this.$emit("click", ...args);
+        }
+        this.isDebounce = true;
+        setTimeout(() => {
+          this.isDebounce = false;
+        }, this.time);
+      }, item);
+    },
+    beforeClick(cb, item) {
+      if (item.confirm) {
+        this.handleConfirm(item.confirm, cb);
+      } else if (item.customConfirm) {
+        this.handleCustomConfirm(item.customConfirm, cb);
+      } else if (item.successBack) {
+        this.handleSuccessBack(item.successBack, cb);
+      } else if (item.textSubmit) {
+        this.handleFormSubmit(item.textSubmit, cb);
+      } else if (item.batchConfirm) {
+        this.$scDialog({
+          presetType: "batchConfirm",
+          ...item.batchConfirm,
+        }).show(cb);
+      } else {
+        cb();
+      }
+    },
+    handleConfirm(confirm, cb) {
+      if (isFunction(confirm)) confirm = confirm(this.scope);
+      // 处理字符串和布尔值配置
+      if (confirm === true || typeof confirm === "string") {
+        const message = confirm === true ? "确定要执行此操作吗？" : confirm;
+        this.$confirm(message, "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          cb();
+        });
+        return;
+      }
+      // 处理对象配置
+      const {
+        label,
+        title = "提示",
+        confirmButtonText = "确定",
+        cancelButtonText = "取消",
+        type = "warning",
+      } = confirm;
+      this.$confirm(label || "确定要执行此操作吗？", title, {
+        confirmButtonText,
+        cancelButtonText,
+        type,
+      }).then(() => {
+        cb();
+      });
+    },
+    handleCustomConfirm(customConfirm, cb) {
+      if (isFunction(customConfirm)) customConfirm = customConfirm(this.scope);
+      this.$scDialog({
+        presetType: "confirmTip",
+        label: customConfirm.label,
+        content: customConfirm.content,
+        title: customConfirm.title,
+      }).show(cb);
+    },
+    handleSuccessBack(successBack, cb) {
+      const vm = this.$scDialog({
+        presetType: "successBack",
+        onClick: () => {
+          if (isFunction(successBack)) {
+            successBack(this.scope);
+            vm.hide();
+          } else {
+            setTimeout(() => {
+              this.$router.go(-1);
+              vm.hide();
+            }, 50);
+          }
+        },
+      });
+      cb(() => vm.show());
+    },
+    handleFormSubmit(textSubmit, clickCb) {
+      if (isFunction(textSubmit)) textSubmit = textSubmit(this.scope);
+      this.$scDialog({
+        presetType: "textSubmit",
+        ...textSubmit,
+        submit: clickCb,
+      }).show();
+    },
+  },
+});
+</script>

package/packages/core/components/comp.vue

@@ -0,0 +1,223 @@
+<script>
+import { set, omit, isArray, isFunction, isPlainObject } from "lodash-es";
+import { isVNode } from "utils";
+import Comp from "./comp.vue";
+
+// 获取组件名称
+function getCompName(name, isChildren, children, comp) {
+  if (isChildren || children) return name;
+  const nameMap = {
+    "el-select": "sc-select",
+    "el-checkbox-group": "sc-checkbox",
+    "el-radio-group": "sc-radio",
+    "el-switch": "sc-switch",
+    "el-cascader": "sc-cascader",
+  };
+  if (comp.options && name === "el-input") {
+    return "sc-select";
+  }
+  return nameMap[name] || name;
+}
+
+// 获取事件处理函数
+function getOn(on, comp, scope, parent, props) {
+  const events = {};
+  if (on) {
+    Object.entries(on).forEach(([key, handler]) => {
+      events[key] = (...args) => handler?.(...args, scope);
+    });
+  }
+
+  // 处理以 on 开头的事件配置
+  Object.entries(comp)
+    .filter(([key, value]) => /^on[A-Z]/.test(key) && isFunction(value))
+    .forEach(([key, handler]) => {
+      const eventName = key.slice(2).toLowerCase();
+      events[eventName] = (...args) => handler?.(...args, scope);
+    });
+
+  return {
+    ...events,
+    input: (event) => {
+      parent.$value = event;
+      events.input && events.input(event);
+    },
+    change: (event) => {
+      parent.$value = event;
+      events.change && events.change(event);
+    },
+    "hook:mounted": () => {
+      const instance = parent.$vnode.componentInstance.$children[0];
+      if (props.mounted) {
+        props.mounted(scope, instance);
+      }
+      if (props.ref) {
+        props.ref(scope, instance);
+      }
+    },
+  };
+}
+
+// 获取插槽
+function getScopedSlots(scopedSlots, slots, h, scope) {
+  const result = {};
+  const allSlots = { ...scopedSlots, ...slots };
+
+  for (const key in allSlots) {
+    result[key] = () => allSlots[key](h, scope);
+  }
+
+  return result;
+}
+
+// 获取placeholder
+function getPlaceholder(comp, name, scope) {
+  if (comp.placeholder) {
+    return comp.placeholder;
+  }
+  if (name === "el-input") {
+    return "请输入" + scope.item.label;
+  }
+  return "请选择" + scope.item.label;
+}
+
+// 获取clearable
+function getClearable(comp) {
+  if (comp.clearable !== undefined) {
+    return comp.clearable;
+  }
+  return true;
+}
+
+// 获取组件尺寸
+function getCompSize(comp, size, ELEMENT) {
+  return comp.size || size || (ELEMENT || {}).size;
+}
+
+// 渲染子元素
+function renderChildren(children, h, scope) {
+  if (!children) return null;
+
+  if (isFunction(children)) {
+    if (children.length === 2) {
+      children = children(h, scope);
+      if (isVNode(children)) return children;
+    } else {
+      children = children(scope);
+    }
+  }
+
+  if (isArray(children)) {
+    return children.map((child) => {
+      if (isPlainObject(child)) {
+        return h(Comp, {
+          props: { ...child, comp: child, scope, isChildren: true },
+        });
+      }
+      return child;
+    });
+  }
+
+  return children;
+}
+
+// 生成假插槽
+function fakeSlot(h, scopedSlots, slots) {
+  const allSlots = { ...scopedSlots, ...slots };
+  return Object.keys(allSlots).map((slot) => h("i", { slot }));
+}
+
+export default {
+  name: "comp",
+  functional: true,
+  props: {
+    value: {},
+    prop: {},
+    name: {
+      default: "el-input",
+    },
+    comp: Object,
+    bind: [Object, Function],
+    on: Object,
+    scopedSlots: Object,
+    slots: Object,
+    children: {},
+    scope: Object,
+    size: {},
+    isChildren: Boolean,
+    nativeOn: Object,
+    directives: {
+      type: Object,
+      default: () => ({}),
+    },
+    created: Function,
+    mounted: Function,
+  },
+  render(h, context) {
+    const { props, data, parent } = context;
+    const { name, comp, scope, isChildren, children, bind } = props;
+
+    // 获取组件props
+    const getComponentProps = (compName) => {
+      const component = parent.$options.components[compName];
+      return component?.options?.props || {};
+    };
+
+    // 处理bind属性
+    let processedComp = comp;
+    if (isFunction(bind)) {
+      processedComp = { ...comp, ...bind(scope) };
+    } else if (bind) {
+      processedComp = { ...comp, ...bind };
+    }
+
+    // 获取组件名称
+    const compName = getCompName(name, isChildren, children, processedComp);
+
+    // 获取组件声明的props
+    const componentProps = getComponentProps(compName);
+
+    // 分离props和attrs
+    const propsToPass = {};
+    const attrsToPass = {};
+
+    Object.entries(processedComp).forEach(([key, value]) => {
+      if (componentProps[key]) {
+        propsToPass[key] = value;
+      } else if (!(key in props)) {
+        attrsToPass[key] = value;
+      }
+    });
+
+    // 生命周期钩子
+    if (props.created) {
+      props.created(scope);
+    }
+    return h(
+      compName,
+      {
+        props: {
+          ...propsToPass,
+          value: props.value || parent.$value,
+          scope,
+        },
+        attrs: {
+          ...attrsToPass,
+          size: getCompSize(processedComp, props.size, parent.$ELEMENT),
+          placeholder: getPlaceholder(processedComp, compName, scope),
+          clearable: getClearable(processedComp),
+          disabled: processedComp.disabled ? true : false,
+        },
+        on: getOn(props.on, processedComp, scope, parent, props),
+        nativeOn: props.nativeOn,
+        scopedSlots: getScopedSlots(props.scopedSlots, props.slots, h, scope),
+        directives: props.directives,
+      },
+      [
+        renderChildren(children, h, scope),
+        ...fakeSlot(h, props.scopedSlots, props.slots),
+      ]
+    );
+  },
+};
+</script>

package/packages/core/components/position.vue

@@ -0,0 +1,135 @@
+<script>
+import create from "core/create";
+import { resolveRender } from "utils";
+export default create({
+  name: "position",
+  props: {
+    inline: {
+      type: Boolean,
+      default: true,
+    },
+    slotName: String,
+    slotSuffixes: {
+      type: Array,
+      default: () => [],
+    },
+    render: Function,
+    slots: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    scope: {},
+    ellipsis: Boolean,
+  },
+  computed: {
+    slotNames() {
+      if (!this.slotName) return;
+      // 如果没有后缀，直接返回原始slotName
+      if (!this.slotSuffixes.length) return this.slotName;
+
+      // 将所有后缀用'-'连接
+      const suffix = this.slotSuffixes
+        .filter(Boolean) // 过滤掉空值
+        .join("-");
+
+      // 如果有后缀，返回 slotName-suffix 格式
+      return suffix ? `${this.slotName}-${suffix}` : this.slotName;
+    },
+    leftSlot() {
+      return this.slots[`${this.slotNames}-left`] || this.$scopedSlots.left;
+    },
+    rightSlot() {
+      return this.slots[`${this.slotNames}-right`] || this.$scopedSlots.right;
+    },
+    topSlot() {
+      return this.slots[`${this.slotNames}-top`] || this.$scopedSlots.top;
+    },
+    bottomSlot() {
+      return this.slots[`${this.slotNames}-bottom`] || this.$scopedSlots.bottom;
+    },
+    hasPosition() {
+      return this.topSlot || this.bottomSlot || this.leftSlot || this.rightSlot;
+    },
+    contentStyle() {
+      if (!this.ellipsis) return {};
+      return {
+        "white-space": "nowrap",
+        overflow: "hidden",
+        "text-overflow": "ellipsis",
+      };
+    },
+    // 动态计算grid布局样式
+    gridStyle() {
+      const areas = [];
+      if (this.topSlot) {
+        areas.push('"top top top"');
+      }
+      const middleRow = [
+        this.leftSlot ? "left" : ".",
+        "content",
+        this.rightSlot ? "right" : ".",
+      ].join(" ");
+      areas.push(`"${middleRow}"`);
+
+      if (this.bottomSlot) {
+        areas.push('"bottom bottom bottom"');
+      }
+      const columns = [
+        this.leftSlot ? "auto" : "0",
+        "1fr",
+        this.rightSlot ? "auto" : "0",
+      ].join(" ");
+      return {
+        display: this.inline ? "inline-grid" : "grid",
+        "grid-template-areas": areas.join("\n"),
+        "grid-template-columns": columns,
+        "align-items": "center",
+      };
+    },
+  },
+  render(h) {
+    const renderContent = () => {
+      if (this.slots[`${this.slotNames}`]) {
+        return this.slots[`${this.slotNames}`](this.scope);
+      }
+      if (this.render) {
+        return resolveRender(this.render, h, this.scope);
+      }
+      if (this.$scopedSlots.default) {
+        return this.$scopedSlots.default(this.scope);
+      }
+    };
+    const content = renderContent();
+    if (
+      !content &&
+      !this.topSlot &&
+      !this.leftSlot &&
+      !this.rightSlot &&
+      !this.bottomSlot
+    )
+      return null;
+    return (
+      <div
+        class={[this.b([this.slotNames || "position"])]}
+        style={this.gridStyle}
+      >
+        {this.topSlot && <div class="top">{this.topSlot(this.scope)}</div>}
+        {this.leftSlot && <div class="left">{this.leftSlot(this.scope)}</div>}
+        {content && (
+          <div class="content" style={this.contentStyle}>
+            {content}
+          </div>
+        )}
+        {this.rightSlot && (
+          <div class="right">{this.rightSlot(this.scope)}</div>
+        )}
+        {this.bottomSlot && (
+          <div class="bottom">{this.bottomSlot(this.scope)}</div>
+        )}
+      </div>
+    );
+  },
+});
+</script>