vue-super-crud 1.7.1

package/packages/crud/utils/index.js

@@ -0,0 +1,98 @@
+/**
+ * 查找并触发表单元素的聚焦
+ * @param {HTMLElement} dom - 要搜索的DOM元素
+ * @returns {Boolean} - 是否成功触发了聚焦
+ */
+export function focusFormElement(dom, isSelect = false) {
+  if (!dom) return false;
+
+  // 处理需要点击的组件
+  const clickSelectors = [
+    ".el-cascader .el-cascader__label, .el-cascader .el-input__inner",
+    ".el-select .el-input__inner",
+    ".el-date-editor.el-input__inner",
+    ".el-time-picker.el-input__inner",
+    ".el-color-picker .el-color-picker__trigger",
+  ].join(",");
+
+  const clickElement = dom.querySelector(clickSelectors);
+  if (clickElement) {
+    clickElement.click();
+    return true;
+  }
+
+  // 处理需要focus的组件
+  const focusElement = dom.querySelector(
+    ".el-rate .el-rate__item:not(.is-disabled)"
+  );
+  if (focusElement) {
+    focusElement.focus();
+    return true;
+  }
+
+  // 处理基础表单元素
+  const basicInput = dom.querySelector(`
+    input:not([type="hidden"]):not([readonly]):not([disabled]),
+    textarea:not([readonly]):not([disabled]),
+    [tabindex]:not([tabindex="-1"]):not([disabled])
+  `);
+
+  if (basicInput) {
+    basicInput.focus();
+    const shouldSelect =
+      isSelect &&
+      basicInput.tagName.toLowerCase() === "input" &&
+      ["text", "number", "password", "search", "email", "tel", "url"].includes(
+        basicInput.type
+      );
+
+    if (shouldSelect) {
+      basicInput.select();
+    }
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * 查找树形数据中指定节点的路径
+ * @param {Array} tree - 树形数据
+ * @param {Function} predicate - 判断条件函数
+ * @param {string} childrenKey - 子节点的键名，默认为 'children'
+ * @param {string} parentPath - 父节点路径（递归用）
+ * @returns {string|null} - 返回找到的路径或 null
+ */
+export function findTreeNodePath(
+  tree,
+  predicate,
+  childrenKey = "children",
+  parentPath = ""
+) {
+  if (!Array.isArray(tree)) return null;
+
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i];
+    const currentPath = parentPath ? `${parentPath}.${i}` : `${i}`;
+
+    // 判断当前节点是否符合条件
+    if (predicate(node)) {
+      return currentPath;
+    }
+
+    // 如果有子节点，递归查找
+    if (node[childrenKey] && Array.isArray(node[childrenKey])) {
+      const childPath = findTreeNodePath(
+        node[childrenKey],
+        predicate,
+        childrenKey,
+        `${currentPath}.${childrenKey}`
+      );
+      if (childPath) {
+        return childPath;
+      }
+    }
+  }
+
+  return null;
+}

package/packages/dialog/dialog.js

@@ -0,0 +1,233 @@
+import create from "core/create";
+import init from "core/init";
+import { omit, pick, mergeWith, isFunction } from "lodash-es";
+import { batchMerge } from "utils/mergeTemp";
+import Render from "core/components/render";
+import scButton from "pak/button";
+import { checkVisibility, setPx, resolveRender } from "utils";
+
+export const vnodes = {};
+export default (options = {}) => {
+  return create({
+    name: "dialog",
+    mixins: [init("dialogOptions", options)],
+    data() {
+      return {
+        fullscreen: false,
+        visible: false,
+        loading: false,
+        value: {},
+      };
+    },
+    created() {
+      this.$nextTick(() => {
+        if (isFunction(options.created)) {
+          options.created(this);
+        }
+      });
+    },
+    mounted() {
+      this.$nextTick(() => {
+        if (isFunction(options.mounted)) {
+          options.mounted(this);
+        }
+      });
+    },
+    computed: {
+      dialogOptions() {
+        let opt = this.resultOptions;
+        // init时已删除presetType
+        if (options.presetType) {
+          opt.presetType = options.presetType;
+        }
+        opt = batchMerge("render", [opt], this, {}, true)[0];
+        return opt;
+      },
+      dialogType() {
+        return this.dialogOptions.drawer ? "elDrawer" : "elDialog";
+      },
+      footerTemps() {
+        return {
+          confirm: {
+            icon: "el-icon-circle-check",
+            label: "确定",
+            type: "primary",
+            onClick: this.confirm,
+          },
+          cancel: {
+            icon: "el-icon-circle-close",
+            label: "取消",
+            onClick: this.cancel,
+          },
+          close: {
+            label: "关闭",
+            type: "primary",
+            onClick: this.hide,
+          },
+        };
+      },
+      footerButtons() {
+        const footer = { ...this.dialogOptions.footer };
+        return footer
+          ? batchMerge("btn.dialog", footer, { ctx: this }, this.footerTemps)
+          : [];
+      },
+      showFooter() {
+        return checkVisibility(
+          this.dialogOptions.footer,
+          null,
+          this.footerButtons.length > 0
+        );
+      },
+      omitProps() {
+        return omit(this.dialogOptions, ["size", "beforeClose", "title"]);
+      },
+    },
+    methods: {
+      async confirm(params) {
+        const cb = (p) => {
+          this.visible = false;
+          this.confirmCb(this, p);
+        };
+        if (typeof this.dialogOptions.confirm === "function") {
+          this.dialogOptions.confirm(cb, this, params);
+        } else {
+          cb();
+        }
+        return this;
+      },
+      cancel(params) {
+        const cb = (p) => {
+          this.visible = false;
+          this.cancelCb(this, p);
+        };
+        if (typeof this.dialogOptions.cancel === "function") {
+          this.dialogOptions.cancel(cb, this, params);
+        } else {
+          cb();
+        }
+        return this;
+      },
+      closed() {
+        if (!this.dialogOptions.cache) {
+          this.destroy();
+        }
+        if (isFunction(this.dialogOptions.closed)) {
+          this.dialogOptions.closed(this);
+        }
+      },
+      destroy() {
+        this.$destroy();
+        this.$el.remove();
+      },
+      hide() {
+        this.visible = false;
+        return this;
+      },
+      show(confirmCb = () => {}, cancelCb = () => {}) {
+        this.visible = true;
+        this.confirmCb = confirmCb;
+        this.cancelCb = cancelCb;
+        return this;
+      },
+    },
+    render(h) {
+      const on = {
+        ...this.dialogOptions,
+        "update:visible": (value) => {
+          this.visible = value;
+        },
+        closed: this.closed,
+      };
+      const title = () => {
+        return (
+          <div
+            class={[this.b("title")]}
+            style={{ height: this.dialogOptions.drawer ? "" : "50px" }}
+          >
+            <span>{this.dialogOptions.title}</span>
+            {this.dialogOptions.drawer ? null : (
+              <span>
+                <i
+                  title="最大化"
+                  onClick={() => (this.fullscreen = !this.fullscreen)}
+                  class={[
+                    this.fullscreen ? "el-icon-news" : "el-icon-full-screen",
+                  ]}
+                ></i>
+                {this.dialogOptions.drag ? (
+                  <i title="拖拽" class="el-icon-rank dialog-drag"></i>
+                ) : null}
+              </span>
+            )}
+          </div>
+        );
+      };
+      const content = (h) => {
+        return (
+          <Render
+            v-loading={this.loading}
+            prop="value"
+            props={this.dialogOptions}
+            item={this.dialogOptions}
+            scope={{
+              ref: this,
+              row: this,
+            }}
+            controlDefault={() => {
+              return null;
+            }}
+          ></Render>
+        );
+      };
+      const footer = (h) => {
+        if (this.showFooter === false) return;
+        const render = this.dialogOptions.footer.render;
+        const buttonRender = () => {
+          return this.footerButtons.map((item) => (
+            <scButton
+              props={item}
+              attrs={omit(item, ["onClick"])}
+              loading={this.loading}
+              size={this.dialogOptions.size}
+              onClick={() => item.onClick(this)}
+              scope={this}
+            ></scButton>
+          ));
+        };
+        return (
+          <div
+            class={this.b("footer", this.dialogOptions.footer.align || "right")}
+          >
+            {render
+              ? resolveRender(render, h, this, buttonRender)
+              : buttonRender()}
+          </div>
+        );
+      };
+      return (
+        <this.dialogType
+          v-scDialogDrag={this.dialogOptions.drag}
+          v-scDialogDragHeight={this.dialogOptions.dragSize}
+          class={[this.b(), this.dialogOptions.class]}
+          size={setPx(this.dialogOptions.width || "600px")}
+          width={setPx(this.dialogOptions.width || "600px")}
+          fullscreen={this.fullscreen}
+          visible={this.visible}
+          beforeClose={this.cancel}
+          close-on-click-modal={false}
+          props={this.omitProps}
+          on={on}
+          scopedSlots={{
+            title,
+          }}
+        >
+          <div class={[this.b("body"), this.showFooter ? "has-footer" : ""]}>
+            {content(h)}
+          </div>
+          {footer(h)}
+        </this.dialogType>
+      );
+    },
+  });
+};

package/packages/dialog/dialog.vue

@@ -0,0 +1,15 @@
+<script>
+export default {
+  mounted() {
+    this.vm = this.$scDialog({
+      ...this.$attrs,
+      render: () => this.$slots.default,
+    });
+  },
+  methods: {
+    show() {
+      return this.vm.show();
+    },
+  },
+};
+</script>

package/packages/dialog/index.js

@@ -0,0 +1,22 @@
+import DialogComponent from "./dialog.js";
+
+export default function (options) {
+  const caller = this || {};
+
+  let DialogConstructor = window.Vue.extend(DialogComponent(options));
+
+  // 注入路由根实例
+  const routerMixin = {
+    beforeCreate() {
+      this._routerRoot = caller._routerRoot;
+    },
+  };
+  if (caller._routerRoot) {
+    DialogConstructor.mixin(routerMixin);
+  }
+
+  let instance = new DialogConstructor();
+  instance.vm = instance.$mount();
+  document.body.appendChild(instance.vm.$el);
+  return instance.vm;
+}

package/packages/dict/cascadeFormat.vue

@@ -0,0 +1,179 @@
+<template>
+  <span>
+    <template v-if="multiple">
+      <div v-for="(Labels, Index) in multipleLabels" :key="Index">
+        <span v-for="(label, index) in Labels" :key="index">
+          <span v-if="index !== 0"> / </span>
+          <span>{{ label }}</span>
+        </span>
+      </div>
+    </template>
+    <template v-else>
+      <span v-for="(label, index) in labels" :key="index">
+        <span v-if="index !== 0"> / </span>
+        <span>{{ label }}</span>
+      </span>
+    </template>
+  </span>
+</template>
+
+<script>
+import { create } from "core";
+// 级联数据格式化组件
+export default create({
+  name: "cascade-format",
+  props: {
+    // 值<br/>
+    // 单选时 '1,2,3' 或 [1,2,3]<br/>
+    // 多选[[1,2,3],[4,5,6]]<br/>
+    value: {
+      type: [String, Array],
+      require: true,
+    },
+    // value的分隔符<br/>
+    // 多选时，如果value为string，则以该分隔符分割成多个展示<br/>
+    // 传入空字符串，表示不分割<br/>
+    separator: { default: ",", require: false },
+    // 是否多选
+    multiple: { type: Boolean, default: false },
+    scope: Object,
+    options: Array,
+    props: {
+      type: Object,
+      default() {
+        return {
+          value: "value",
+          label: "label",
+          children: "children",
+        };
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    labels() {
+      if (this.value == null) {
+        return [];
+      }
+      return this.buildValueItem(this.value);
+    },
+    multipleLabels() {
+      if (this.value == null) {
+        return [];
+      }
+      const arr = [];
+      for (const item of this.value) {
+        arr.push(this.buildValueItem(item));
+      }
+      return arr;
+    },
+    _options() {
+      return this.options || this.scope.dict;
+    },
+  },
+  methods: {
+    getValueArr(values) {
+      if (values == null) {
+        if (this.multiple) {
+          values = [];
+          for (const item of this.value) {
+            for (const sub of item) {
+              values.push(sub);
+            }
+          }
+        } else {
+          values = this.value;
+        }
+      }
+      if (values == null) {
+        return [];
+      }
+      let arr = null;
+      if (
+        typeof values === "string" &&
+        !this.multiple &&
+        this.separator != null &&
+        this.separator !== ""
+      ) {
+        arr = values.split(this.separator);
+      } else if (values instanceof Array) {
+        arr = values;
+      } else {
+        arr = [values];
+      }
+      return arr;
+    },
+    getDictItem(value, dict, deepMatch) {
+      let valueName = "value";
+      if (this.props.value) {
+        valueName = this.props.value;
+      }
+      if (deepMatch) {
+        let childrenName = "children";
+        if (this.props.children) {
+          childrenName = this.props.children;
+        }
+        return this.deepMatch(value, valueName, childrenName, dict);
+      } else {
+        for (const item of dict) {
+          if (item[valueName] === value) {
+            return item;
+          }
+        }
+      }
+    },
+    deepMatch(value, valueName, childrenName, dict) {
+      for (const item of dict) {
+        if (item[valueName] === value) {
+          return item;
+        }
+      }
+      for (const item of dict) {
+        if (item[childrenName]) {
+          const matched = this.deepMatch(
+            value,
+            valueName,
+            childrenName,
+            item[childrenName]
+          );
+          if (matched) {
+            return matched;
+          }
+        }
+      }
+    },
+    buildValueItem(values) {
+      const arr = this.getValueArr(values);
+      let labelName = "label";
+      if (this.props != null && this.props.label != null) {
+        labelName = this.props.label;
+      }
+
+      let childrenName = "children";
+      if (this.props != null && this.props.children != null) {
+        childrenName = this.props.children;
+      }
+      const labelArr = [];
+
+      if (this._options && this._options.length > 0) {
+        let dict = this._options;
+        const deepMatch = arr.length === 1;
+        for (const value of arr) {
+          if (dict != null) {
+            const dictItem = this.getDictItem(value, dict, deepMatch);
+            if (dictItem != null) {
+              dict = dictItem[childrenName];
+              labelArr.push(dictItem[labelName]);
+              continue;
+            }
+          }
+          labelArr.push(value);
+        }
+      }
+      return labelArr;
+    },
+  },
+});
+</script>

package/packages/dict/dateFormat.vue

@@ -0,0 +1,40 @@
+<template>
+  <span>{{ doFormat}}</span>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+// 日期格式化展示组件
+export default {
+  name: 'date-format',
+  props: {
+    // 日期时间值，支持long,string,date等，由dayjs转化
+    value: { required: true },
+    // 输入格式化，不传则由dayjs自动转化
+    valueFormat: { required: false },
+    // 输出格式化
+    format: { default: 'YYYY-MM-DD HH:mm:ss', required: false }
+  },
+  computed: {
+    doFormat () {
+      if (this.value == null || this.value === '') {
+        return ''
+      }
+      let date = null
+      if (this.valueFormat != null) {
+        date = dayjs(this.value, this.valueFormat)
+      } else {
+        date = dayjs(this.value)
+      }
+      return date.format(this.format)
+    }
+  },
+  data () {
+    return {
+      item: {}
+    }
+  },
+  created () {},
+  methods: {}
+}
+</script>

package/packages/dict/form/cascade.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-cascader
+    ref="target"
+    :value="currentValue"
+    v-bind="$attrs"
+    @input="onInput"
+    v-on="listeners"
+    :options="_options"
+  />
+</template>
+
+<script>
+import input from "./input";
+import { create } from "core";
+import { omit } from "lodash-es";
+import extendMethod from "./extendMethod";
+// 级联选择器
+export default create({
+  name: "cascader",
+  mixins: [input, extendMethod],
+  props: {
+    // 值
+    value: {
+      default: () => {
+        return [];
+      },
+      require: false,
+    },
+    scope: Object,
+    options: Array,
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    _options() {
+      return this.options || this.scope?.dict;
+    },
+    listeners() {
+      return omit(this.$listeners, ["input"]);
+    },
+  },
+  methods: {
+    setValue(value) {
+      if (value == null) {
+        this.currentValue = [];
+        return;
+      }
+      if (typeof this.value === "string") {
+        this.currentValue = value.split(",");
+        return;
+      }
+      if (value instanceof Array) {
+        this.currentValue = value;
+        return;
+      }
+      this.currentValue = [];
+    },
+  },
+});
+</script>