vue-super-crud 1.7.1

package/packages/group/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    v-if="!hidden"
+    :class="[b({ header: !isHeader, arrow: disabled, border: border })]"
+  >
+    <slot name="tabs" />
+    <el-collapse v-model="activeName" :value="text" @change="handleChange">
+      <el-collapse-item :name="1" :disabled="disabled">
+        <template #title>
+          <div v-if="$slots.header && !hiddenHeader" :class="[b('header')]">
+            <slot name="header" />
+          </div>
+          <div
+            v-else-if="(label || icon) && !hiddenHeader"
+            :class="[b('header')]"
+          >
+            <i v-if="icon" :class="[icon, b('icon')]" />
+            <h1 v-if="label" :class="[b('title'), tag ? b('tag') : '']">
+              {{ label }}
+            </h1>
+          </div>
+        </template>
+        <slot />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script>
+import create from "core/create";
+
+export default create({
+  name: "group",
+  data() {
+    return {
+      activeName: "",
+    };
+  },
+  props: {
+    border: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    hiddenHeader: {
+      type: Boolean,
+      default: false,
+    },
+    collapse: {
+      type: Boolean,
+      default: true,
+    },
+    icon: {
+      type: String,
+    },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+    },
+    tag: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  watch: {
+    text(val) {
+      this.activeName = [val];
+    },
+  },
+  computed: {
+    text() {
+      return this.collapse ? 1 : 0;
+    },
+    isHeader() {
+      return (
+        (this.$slots.header && !this.hiddenHeader) ||
+        ((this.label || this.icon) && !this.hiddenHeader)
+      );
+    },
+  },
+  created() {
+    this.activeName = [this.text];
+  },
+  methods: {
+    handleChange(activeNames) {
+      this.$emit("change", activeNames);
+    },
+  },
+});
+</script>

package/packages/tabs/index.vue

@@ -0,0 +1,290 @@
+<template>
+  <div :class="[b(), { [b('border')]: border || $attrs.type === 'card' }]">
+    <!-- 标签页头部 -->
+    <el-tabs
+      v-model="activeName"
+      v-if="tabList.length"
+      v-bind="$attrs"
+      v-on="omitListeners"
+      @tab-click="handleTabClick"
+    >
+      <!-- 全部标签页 -->
+      <el-tab-pane v-if="all" :label="allConfig.label" name="all" />
+
+      <!-- 动态标签页 -->
+      <el-tab-pane
+        v-for="(item, index) in tabList"
+        :key="getItemKey(item, index)"
+        :label="getItemLabel(item)"
+        :name="getItemName(item, index)"
+        v-bind="getItem(item)"
+      >
+        <template #label>
+          <i v-if="item.icon" :class="item.icon"></i>
+          <slot
+            v-if="$scopedSlots[getItemName(item, index) + '-label']"
+            :name="getItemName(item, index) + '-label'"
+            v-bind="item"
+          />
+          <template v-else>{{ getItemLabel(item) }}</template>
+          <i
+            v-if="refresh && cache && activeName === getItemName(item, index)"
+            class="el-icon-refresh"
+            :class="{ rotating: isRefreshing }"
+            title="刷新"
+            @click.stop="refreshTab(item, index)"
+          />
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 插槽内容 -->
+    <slot />
+
+    <!-- 标签页内容区 -->
+    <div :class="[b('content'), { [b('is-refresh')]: isRefreshing }]">
+      <transition-group name="fade-transform" mode="out-in">
+        <template v-for="(item, index) in tabList">
+          <div
+            v-if="shouldRenderTab(item, index)"
+            :key="getItemKey(item, index)"
+            v-show="currentTab === getItemName(item, index)"
+            class="tab-pane"
+            :class="{ 'is-active': currentTab === getItemName(item, index) }"
+          >
+            <slot
+              v-if="$scopedSlots[getItemName(item, index)]"
+              :name="getItemName(item, index)"
+            />
+            <Render
+              v-else
+              v-bind="item"
+              :item="item"
+              :scope="{
+                row: item.value,
+              }"
+            />
+          </div>
+        </template>
+      </transition-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { create } from "core";
+import { isPlainObject, omit } from "lodash-es";
+import Render from "core/components/render";
+
+export default create({
+  name: "tabs",
+
+  props: {
+    value: {},
+    tabList: {
+      type: Array,
+      default: () => [],
+    },
+    cache: {
+      type: Boolean,
+      default: true,
+    },
+    all: [Boolean, Object],
+    border: Boolean,
+    cacheActive: {
+      type: Boolean,
+      default: true,
+    },
+    refresh: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    Render,
+  },
+
+  data() {
+    return {
+      activeName: "",
+      renderedTabs: new Set(),
+      currentTab: "",
+      isRefreshing: false,
+      scope: { row: {} },
+    };
+  },
+
+  computed: {
+    omitListeners() {
+      return omit(this.$listeners, ["tab-click", "input"]);
+    },
+
+    allConfig() {
+      const defaultConfig = {
+        label: "全部",
+        name: null,
+      };
+      return isPlainObject(this.all)
+        ? { ...defaultConfig, ...this.all }
+        : defaultConfig;
+    },
+  },
+
+  watch: {
+    value: {
+      handler(val) {
+        this.initActiveName(val);
+      },
+      immediate: true,
+    },
+
+    activeName: {
+      handler(val) {
+        if (!val) return;
+
+        this.handleTabTransition(val);
+        this.renderedTabs.add(val);
+
+        const emitValue = this.all && val === "all" ? this.allConfig.name : val;
+        this.$emit("input", emitValue);
+      },
+      immediate: true,
+    },
+
+    tabList: {
+      handler() {
+        this.initActiveName(this.value);
+      },
+    },
+  },
+
+  mounted() {
+    // 从路由中恢复激活的标签
+    if (this.cacheActive && this.$route?.query.tabActive) {
+      this.activeName = this.$route.query.tabActive;
+    }
+    this.$nextTick(this.updateContentHeight);
+
+    // 创建 ResizeObserver 实例
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateContentHeight();
+    });
+
+    // 观察活动面板
+    this.observeActivePane();
+  },
+  updated() {
+    this.$nextTick(this.updateContentHeight);
+  },
+
+  beforeDestroy() {
+    // 清理 ResizeObserver
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  },
+
+  methods: {
+    handleTabClick(tab) {
+      this.$nextTick(() => {
+        if (this.cacheActive) {
+          this.updateRouteQuery(this.activeName);
+        }
+        this.$emit(
+          "tab-click",
+          tab,
+          this.tabList.find(
+            (item) => this.getItemName(item) === this.activeName
+          )
+        );
+      });
+    },
+
+    initActiveName(val) {
+      if (!this.tabList.length) return;
+
+      this.activeName =
+        val || (this.all && "all") || this.getItemName(this.tabList[0], 0);
+    },
+
+    getItem(item) {
+      return isPlainObject(item) ? item : {};
+    },
+
+    getItemKey(item, index) {
+      return `${item?.label || index}`;
+    },
+
+    getItemLabel(item) {
+      return item?.label || item;
+    },
+
+    getItemName(item, index) {
+      return `${item?.name || item?.value || index}`;
+    },
+
+    shouldRenderTab(item, index) {
+      const tabName = this.getItemName(item, index);
+      const shouldCache = item.cache === undefined ? this.cache : item.cache;
+      return shouldCache
+        ? this.renderedTabs.has(tabName)
+        : this.currentTab === tabName;
+    },
+
+    updateRouteQuery(val) {
+      if (!this.$route) return;
+
+      this.$router.replace({
+        path: this.$route.path,
+        query: {
+          ...this.$route.query,
+          tabActive: val,
+        },
+      });
+    },
+
+    async refreshTab(item, index) {
+      if (this.isRefreshing) return;
+
+      this.$emit("refresh", item, index);
+      const tabName = this.getItemName(item, index);
+      this.isRefreshing = true;
+
+      // 移除缓存
+      this.renderedTabs.delete(tabName);
+      await this.$nextTick();
+
+      // 重新渲染
+      setTimeout(() => {
+        this.renderedTabs.add(tabName);
+        this.isRefreshing = false;
+      }, 300);
+    },
+    updateContentHeight() {
+      // 获取当前激活的面板
+      const activePane = this.$el.querySelector(".tab-pane.is-active");
+      if (activePane) {
+        // 获取面板实际高度并设置给容器
+        const height = activePane.offsetHeight;
+        const content = this.$el.querySelector(".sc-tabs__content");
+        if (content) {
+          content.style.height = `${height}px`;
+        }
+      }
+    },
+    observeActivePane() {
+      const activePane = this.$el.querySelector(".tab-pane.is-active");
+      if (activePane && this.resizeObserver) {
+        this.resizeObserver.disconnect(); // 先断开之前的观察
+        this.resizeObserver.observe(activePane); // 观察新的活动面板
+      }
+    },
+
+    async handleTabTransition(val) {
+      this.currentTab = val;
+      await this.$nextTick();
+      this.observeActivePane(); // 切换标签页时重新观察
+    },
+  },
+});
+</script>

package/packages/tooltip/index.js

@@ -0,0 +1,9 @@
+import tooltipComponent from "./tooltipComponent.js";
+
+export default function (options) {
+  let DialogConstructor = window.Vue.extend(tooltipComponent(options));
+  let instance = new DialogConstructor();
+  instance.vm = instance.$mount();
+  document.body.appendChild(instance.vm.$el);
+  return instance.vm;
+}

package/packages/tooltip/tooltip.vue

@@ -0,0 +1,32 @@
+<script>
+import tooltip from "./index";
+export default {
+  props: {
+    hide: {},
+  },
+  render(h) {
+    return !this.hide ? (
+      <span
+        class="tooltip-wrapper"
+        on={{
+          mouseenter: (e) => {
+            this.vm = tooltip({
+              placement: "top",
+              ...this.$attrs,
+              target: e.target,
+            });
+            this.vm.show();
+          },
+          mouseleave: (e) => {
+            this.vm && this.vm.hide();
+          },
+        }}
+      >
+        {this.$slots.default}
+      </span>
+    ) : (
+      this.$slots.default
+    );
+  },
+};
+</script>

package/packages/tooltip/tooltipComponent.js

@@ -0,0 +1,38 @@
+import create from "core/create";
+export default (options = {}) => {
+  return create({
+    name: "tooltip",
+    methods: {
+      show() {
+        if (!options.content) return;
+        const tooltip = this.$refs.tooltip;
+        tooltip.referenceElm = options.target;
+        if (options.overflow) {
+          const dom = options.target;
+          const range = document.createRange();
+          range.setStart(dom, 0);
+          range.setEnd(dom, dom.childNodes.length);
+          const rangeWidth = range.getBoundingClientRect().width;
+          const selfWidth = dom.getBoundingClientRect().width;
+          const isOverflowing =
+            rangeWidth > selfWidth || dom.scrollWidth > dom.offsetWidth;
+          if (!isOverflowing) return;
+        }
+        tooltip.setExpectedState(true);
+        tooltip.handleShowPopper();
+      },
+      hide() {
+        const tooltip = this.$refs.tooltip;
+        tooltip.setExpectedState(false);
+        tooltip.handleClosePopper();
+        this.$destroy();
+        this.$el.remove();
+      },
+    },
+    render(h) {
+      return (
+        <el-tooltip ref="tooltip" props={options} attrs={options}></el-tooltip>
+      );
+    },
+  });
+};

package/packages/verifyInput/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <div :class="[b(), inputSize ? 'sc-verify-input--' + inputSize : '']">
+    <input
+      v-for="(code, index) in codes"
+      :key="index"
+      type="number"
+      min="0"
+      max="9"
+      required
+      ref="codeInput"
+      v-model="codes[index]"
+      @keydown="handleKeyDown(index, $event)"
+      @paste="handlePaste($event)"
+      :disabled="inputDisabled"
+      placeholder=""
+      v-bind="$attrs"
+      v-on="omitListeners"
+    />
+  </div>
+</template>
+
+<script>
+import { create } from "core";
+import { omit } from "lodash-es";
+export default create({
+  name: "verify-input",
+  inject: {
+    elForm: {
+      default: "",
+    },
+    elFormItem: {
+      default: "",
+    },
+  },
+  props: {
+    length: {
+      type: Number,
+      default: 6,
+    },
+    size: String,
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    allowLetters: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      codes: Array.from({ length: this.length }, () => ""),
+      timer: null,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.codeInput[0].focus();
+    });
+  },
+  watch: {
+    value(val) {
+      this.codes = val.split("");
+    },
+    codes(val) {
+      this.$emit("input", val.join(""));
+    },
+  },
+  computed: {
+    omitListeners() {
+      return omit(this.$listeners, ["input"]);
+    },
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+    inputSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+    },
+    inputDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    },
+  },
+  methods: {
+    handleKeyDown(index, event) {
+      if (event.key >= 0 && event.key <= 9) {
+        this.codes.splice(index, 1, "");
+        this.timer = setTimeout(() => {
+          if (index < this.codes.length - 1) {
+            this.$refs.codeInput[index + 1].focus();
+          }
+        }, 10);
+      } else if (event.key === "Backspace") {
+        this.timer = setTimeout(() => {
+          if (index > 0) {
+            this.$refs.codeInput[index - 1].focus();
+          }
+        }, 10);
+      }
+    },
+    handlePaste(event) {
+      event.preventDefault();
+      const pastedText = event.clipboardData.getData("text");
+      const numbers = pastedText
+        .replace(/[^\d]/g, "")
+        .split("")
+        .slice(0, this.length);
+
+      if (numbers.length > 0) {
+        this.codes = Array.from(
+          { length: this.length },
+          (_, index) => numbers[index] || ""
+        );
+
+        // 如果输入完成，聚焦到最后一个输入框
+        if (numbers.length >= this.length) {
+          this.$refs.codeInput[this.length - 1].focus();
+        } else {
+          // 否则聚焦到下一个空输入框
+          this.$refs.codeInput[numbers.length].focus();
+        }
+      }
+    },
+    focus(index = 0) {
+      this.$refs.codeInput[index].focus();
+    },
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer); // 清除定时器
+  },
+});
+</script>

package/src/config/common.js

@@ -0,0 +1,88 @@
+export const renderItem = {
+  show: [Boolean, Function],
+  hidden: [Boolean, Function], // 是否隐藏
+  prop: String, // 绑定字段
+  label: String, // 列标题
+  presetType: {
+    // 预设类型
+    type: String,
+  },
+  dict: {
+    strict: true,
+    type: [String, Object],
+    properties: {
+      request: Function,
+      label: String, // 数据字典中label字段的属性名
+      value: String, // 数据字典中value字段的属性名
+      color: String, // 数据字典中color字段的属性名
+      children: String, // 数据字典中children字段的属性名
+      params: [Object, Function], // 请求参数，支持函数形式监听响应式数据变化
+      immediate: Boolean, // 是否立即加载，默认为懒加载，即使用时才加载
+      cache: Boolean, // 是否启用缓存
+      dataPath: String, // 字典数组的路径
+      transform: Function, // 数据转换函数
+      otherPath: [String, Array], // 需要额外获取的数据路径
+      debounceTime: Number, // 防抖时间（毫秒）
+      enhanceDict: Object, // 自定义增强方法
+      local: Boolean, // 是否启用局部字典
+    },
+  }, // 字典配置
+  comp: {
+    type: [Object, Function],
+    properties: {
+      name: [String, Object], // 组件名称或组件对象
+      on: Object, // 事件
+      bind: [Object, Function], // 属性
+    },
+  },
+  formatter: Function, // 格式化函数
+  html: Boolean, // 是否开启HTML渲染
+  render: Function, // 渲染函数
+  required: [Boolean, Object, Function], // 是否必填
+  rules: {
+    type: [Array, Function],
+    arrayOf: {
+      strict: true,
+      type: [Object, String],
+      properties: {
+        validator: Function,
+        message: String,
+        trigger: String,
+        regular: RegExp,
+        msg: String,
+      },
+    },
+  }, // 验证规则
+  position: Boolean, // 是否开启位置渲染
+};
+
+export const buttonItem = {
+  type: [Object, String, Boolean],
+  strict: true,
+  properties: {
+    label: [String, Function],
+    type: {
+      type: String,
+      enum: ["primary", "success", "warning", "danger", "info", "text"],
+    },
+    icon: [String, Function],
+    disabled: [Boolean, Function],
+    onClick: Function,
+    size: {
+      type: String,
+      enum: ["medium", "small", "mini"],
+    },
+    loading: [Boolean, Function],
+    plain: [Boolean, Function],
+    round: [Boolean, Function],
+    circle: [Boolean, Function],
+    children: [Array, Function],
+    hidden: [Boolean, Function],
+    show: [Boolean, Function],
+    hasPermi: Array,
+    confirm: [String, Function], // 操作确认
+    successBack: Function, // 操作成功回调
+  },
+};
+
+export const presetButtonType = [Object, Boolean];