vue-super-crud 1.7.1

package/packages/dict/form/checkbox.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-checkbox-group
+    ref="target"
+    :value="currentValue"
+    v-bind="$attrs"
+    style="width: 100%;"
+    @input="onInput"
+    @change="onChange"
+    v-on="listeners"
+  >
+    <component
+      :is="type"
+      v-for="option in _options"
+      :key="option[props.value]"
+      :label="option[props.value]"
+      v-bind="option"
+      >{{ option[props.label] }}</component
+    >
+  </el-checkbox-group>
+</template>
+
+<script>
+import input from "./input";
+import { create } from "core";
+import { omit } from "lodash-es";
+import extendMethod from "./extendMethod";
+// 字典radio选择器
+export default create({
+  name: "checkbox",
+  mixins: [input, extendMethod],
+  props: {
+    value: { type: [Number, String, Boolean, Array], require: false },
+    // value的分隔符<br/>
+    // 如果value为string，则以该分隔符分割成多个展示<br/>
+    // 传入空字符串，表示不分割<br/>
+    separator: { default: ",", require: false },
+    // 按钮类型 [el-checkbox,el-checkbox-button]
+    type: {
+      type: String,
+      default: "el-checkbox",
+    },
+    scope: Object,
+    options: Array,
+    props: {
+      type: Object,
+      default() {
+        return {
+          value: "value",
+          label: "label",
+        };
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    _options() {
+      return this.options || this.scope?.dict;
+    },
+    listeners() {
+      return omit(this.$listeners, ["input", "change"]);
+    },
+  },
+  methods: {
+    setValue(newVal) {
+      if (newVal == null) {
+        this.currentValue = [];
+        return;
+      }
+      if (
+        typeof newVal === "string" &&
+        this.separator != null &&
+        this.separator !== ""
+      ) {
+        this.currentValue = newVal.split(this.separator);
+        return;
+      }
+      this.currentValue = newVal;
+    },
+    onChange(value) {
+      this.$emit(
+        "objectChange",
+        this._options.filter((i) => value.includes(i[this.props.value]))
+      );
+      this.$emit("change", value);
+    },
+  },
+});
+</script>

package/packages/dict/form/extendMethod.js

@@ -0,0 +1,22 @@
+import { isFunction } from "lodash-es";
+
+export default {
+  mounted() {
+    this.extendMethod(this.$refs.target);
+  },
+  methods: {
+    extendMethod(ref, exclude = []) {
+      const refMethod = Object.entries(ref);
+      for (const [key, value] of refMethod) {
+        if (
+          !(key.includes("$") || key.includes("_")) &&
+          isFunction(value) &&
+          !this[key] &&
+          !exclude.includes(key)
+        ) {
+          this[key] = value;
+        }
+      }
+    },
+  },
+};

package/packages/dict/form/input-base.js

@@ -0,0 +1,31 @@
+export default {
+  props: {
+    // 值
+    value: {
+      required: false,
+    },
+  },
+  data() {
+    return {
+      // 本组件的实际value值
+      // 由于value值是props参数，是不允许修改的，需要用别的值存起来
+      currentValue: undefined,
+    };
+  },
+  mounted() {
+    // this.$emit('ready')
+  },
+  methods: {
+    isValueChanged(value) {
+      return this.currentValue !== value;
+    },
+    setValue(value) {
+      // 在这里对 传入的value值做处理
+      this.currentValue = value;
+      this.onInput(value);
+    },
+    onInput(value) {
+      this.$emit("input", value);
+    },
+  },
+};

package/packages/dict/form/input.js

@@ -0,0 +1,20 @@
+import inputBase from './input-base'
+export default {
+  mixins: [inputBase],
+  watch: {
+    value (value, oldValue) {
+      // 父组件收到input事件后会通过v-model改变value参数的值
+      // 然后此处会watch到value的改变，发出change事件
+      // change事件放在此处发射的好处是，当外部修改value值时，也能够触发form-data-change事件
+      if (!this.isValueChanged(value)) {
+        return
+      }
+      // 如果值是被外部改变的，则修改本组件的currentValue
+      this.setValue(value)
+    }
+  },
+  created () {
+    // 给currentValue设置初始值
+    this.setValue(this.value)
+  }
+}

package/packages/dict/form/radio.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-radio-group
+    ref="target"
+    :value="currentValue"
+    @input="onInput"
+    @change="onChange"
+    v-bind="$attrs"
+    v-on="listeners"
+    style="width: 100%;"
+  >
+    <component
+      :is="type"
+      v-for="option in _options"
+      :key="option[props.value]"
+      :label="option[props.value]"
+      v-bind="option"
+      >{{ option[props.label] }}</component
+    >
+  </el-radio-group>
+</template>
+
+<script>
+import input from "./input";
+import { create } from "core";
+import { omit } from "lodash-es";
+import extendMethod from "./extendMethod";
+// 字典radio选择器
+export default create({
+  name: "radio",
+  mixins: [input, extendMethod],
+  props: {
+    // 值
+    value: { require: false },
+    // 按钮类型 [el-radio,el-radio-button]
+    type: {
+      type: String,
+      default: "el-radio",
+    },
+    scope: Object,
+    options: Array,
+    props: {
+      type: Object,
+      default() {
+        return {
+          value: "value",
+          label: "label",
+        };
+      },
+    },
+  },
+  computed: {
+    _options() {
+      return this.options || this.scope?.dict;
+    },
+    listeners() {
+      return omit(this.$listeners, ["input", "change"]);
+    },
+  },
+  methods: {
+    onChange(value) {
+      this.$emit(
+        "objectChange",
+        this._options.find((i) => i[this.props.value] === value)
+      );
+      this.$emit("change", value);
+    },
+  },
+});
+</script>

package/packages/dict/form/select.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-select
+    ref="target"
+    :value="currentValue"
+    filterable
+    v-bind="$attrs"
+    :value-key="props.value"
+    :multiple="multiple"
+    @input="onInput"
+    @change="onChange"
+    v-on="listeners"
+    style="width: 100%;"
+  >
+    <el-option
+      v-for="option in _options"
+      :key="option[props.value]"
+      :value="option[props.value]"
+      :label="option[props.label]"
+      v-bind="option"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import input from "./input";
+import { create } from "core";
+import { omit } from "lodash-es";
+import extendMethod from "./extendMethod";
+// 字典选择器
+export default create({
+  name: "select",
+  mixins: [input, extendMethod],
+  props: {
+    // 值
+    value: { type: [Number, String, Boolean, Array], require: false },
+    // value的分隔符<br/>
+    // 多选时，如果value为string，则以该分隔符分割成多个展示<br/>
+    // 传入空字符串，表示不分割<br/>
+    separator: { default: ",", require: false },
+    multiple: { default: false },
+    scope: Object,
+    options: Array,
+    props: {
+      type: Object,
+      default() {
+        return {
+          value: "value",
+          label: "label",
+        };
+      },
+    },
+  },
+  computed: {
+    _options() {
+      return this.options || this.scope?.dict || [];
+    },
+    listeners() {
+      return omit(this.$listeners, ["input", "change"]);
+    },
+  },
+  methods: {
+    setValue(newVal) {
+      if (!this.multiple) {
+        // 单选
+        if (newVal === this.currentValue) {
+          return;
+        }
+        this.currentValue = newVal;
+        return;
+      }
+      // 多选
+      if (newVal == null) {
+        this.currentValue = [];
+        return;
+      }
+      if (
+        typeof newVal === "string" &&
+        this.separator != null &&
+        this.separator !== ""
+      ) {
+        this.currentValue = newVal.split(this.separator);
+        return;
+      }
+      if (!(newVal instanceof Array)) {
+        this.currentValue = [newVal];
+        return;
+      }
+
+      //  TODO 重置表单时，多选的value会重置为[null]
+      const val = [];
+      for (const item of newVal) {
+        if (item != null) {
+          val.push(item);
+        }
+      }
+      this.currentValue = val;
+      if (newVal.length === 1 && newVal[0] == null) {
+        this.onInput(val);
+      }
+    },
+    onChange(value) {
+      if (value instanceof Array) {
+        this.$emit(
+          "objectChange",
+          this._options.filter((i) => value.includes(i[this.props.value]))
+        );
+      } else {
+        this.$emit(
+          "objectChange",
+          this._options.find((i) => i[this.props.value] === value)
+        );
+      }
+      this.$emit("change", value);
+    },
+  },
+});
+</script>

package/packages/dict/form/switch.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-switch
+    ref="target"
+    :value="value"
+    @input="onElInput"
+    :active-color="_active[props.color]"
+    :active-value="_active[props.value]"
+    :active-text="showText ? _active[props.label] : ''"
+    :inactive-color="_inActive[props.color]"
+    :inactive-value="_inActive[props.value]"
+    :inactive-text="showText ? _inActive[props.label] : ''"
+    v-bind="$attrs"
+    v-on="listeners"
+  >
+  </el-switch>
+</template>
+
+<script>
+import inputBase from "./input-base";
+import { create } from "core";
+import { omit } from "lodash-es";
+import extendMethod from "./extendMethod";
+// 字典switch
+export default create({
+  name: "switch",
+  mixins: [inputBase, extendMethod],
+  props: {
+    value: { require: false },
+    scope: Object,
+    options: Array,
+    props: {
+      type: Object,
+      default() {
+        return {
+          value: "value",
+          label: "label",
+          color: "color",
+        };
+      },
+    },
+    showText: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    _options() {
+      return this.options || this.scope?.dict;
+    },
+    _active() {
+      if (this._options?.length > 0) {
+        return this._options[0];
+      }
+      return {};
+    },
+    _inActive() {
+      if (this._options?.length > 1) {
+        return this._options[1];
+      }
+      return {};
+    },
+    listeners() {
+      return omit(this.$listeners, ["input"]);
+    },
+  },
+  methods: {
+    onElInput(value) {
+      this.onInput(value);
+    },
+  },
+});
+</script>

package/packages/dict/valueFormat.vue

@@ -0,0 +1,188 @@
+<template>
+  <span>
+    <template v-for="(item, index) in options">
+      <el-tag
+        v-if="item[props.color]"
+        :key="item[props.value]"
+        size="small"
+        :type="item[props.color]"
+        @click="onClick(item)"
+        :effect="item.effect"
+        disable-transitions
+        v-bind="$attrs"
+      >
+        {{ item[props.label] }}
+      </el-tag>
+      <span v-else :key="item[props.value]">{{
+        item[props.label] + (index === options.length - 1 ? "" : "、")
+      }}</span>
+    </template>
+  </span>
+</template>
+
+<script>
+import { create } from "core";
+const COLOR_LIST = ["primary", "success", "warning", "danger"];
+const EFFECT_LIST = ["plain", "light"];
+
+// value格式化展示组件
+export default create({
+  name: "value-format",
+  props: {
+    // 值
+    value: {
+      require: false,
+    },
+    // 是否多选
+    multiple: { default: true, require: false },
+    // value的分隔符<br/>
+    // 多选时，如果value为string，则以该分隔符分割成多个展示<br/>
+    // 传入空字符串，表示不分割<br/>
+    separator: { default: ",", require: false },
+    // 颜色，【auto, primary, success, warning, danger ,info】
+    // 配置auto，则自动根据value值hashcode分配颜色值
+    color: {
+      require: false,
+    },
+    effect: {
+      require: false,
+    },
+
+    // 自动颜色列表，【 primary, success, warning, danger 】
+    autoColors: {
+      type: Array,
+    },
+    // 自动主题列表，【 light, plain 】
+    autoEffects: {
+      type: Array,
+    },
+    scope: Object,
+    props: {
+      type: Object,
+      default() {
+        return {
+          value: "value",
+          label: "label",
+          color: "color",
+        };
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    options() {
+      if (this.value == null || this.value === "") {
+        return [];
+      }
+      if (this.loading) return [];
+      const dictDataMap = this.dictDataMap;
+      const valueArr = this.getValueArr();
+      const options = [];
+      const dict = this.props;
+      // 没有字典，直接显示值
+      if (dictDataMap == null || Object.keys(dictDataMap).length === 0) {
+        for (const str of valueArr) {
+          const item = {};
+          item[dict.value] = str;
+          item[dict.label] = str;
+          this.setColor(item, dict);
+          options.push(item);
+        }
+        return options;
+      }
+      // 根据字典展示
+      for (const str of valueArr) {
+        let item = dictDataMap[str];
+        if (item != null) {
+          this.setColor(item, dict);
+          options.push(item);
+        } else {
+          item = {};
+          item[dict.value] = str;
+          item[dict.label] = str;
+          this.setColor(item, dict);
+          options.push(item);
+        }
+      }
+      return options;
+    },
+    dictDataMap() {
+      if (this.$attrs.options) {
+        return this.formatMap(this.$attrs.options);
+      }
+      return this.scope.dict?.toMap();
+    },
+  },
+  methods: {
+    formatMap(data) {
+      const dataMap = {};
+      data.forEach((item) => {
+        dataMap[item.value] = item;
+        if (item.children) {
+          this.formatMap(item.children, dataMap);
+        }
+      });
+      return dataMap;
+    },
+    getValueArr() {
+      let valueArr = [];
+      if (
+        typeof this.value === "string" &&
+        this.multiple &&
+        this.separator != null &&
+        this.separator !== ""
+      ) {
+        valueArr = this.value.split(this.separator);
+      } else if (this.value instanceof Array) {
+        // 本来就是数组的
+        valueArr = this.value;
+      } else {
+        valueArr = [this.value];
+      }
+      return valueArr;
+    },
+    onClick(item) {
+      this.$emit("click", { item: item });
+    },
+    setColor(item, dict) {
+      if (!item.effect && this.effect) {
+        item.effect = this.effect;
+      }
+      if (item[dict.color]) {
+        return;
+      }
+      if (this.color === "auto") {
+        const hashcode = this.hashcode(item[dict.value]);
+        const colors = this.autoColors ? this.autoColors : COLOR_LIST;
+        item[dict.color] = colors[hashcode % colors.length];
+        const effects = this.autoEffects ? this.autoEffects : EFFECT_LIST;
+        item.effect =
+          effects[Math.floor(hashcode / colors.length) % effects.length];
+      } else {
+        item[dict.color] = this.color;
+      }
+    },
+    hashcode(str) {
+      if (str == null) {
+        return 0;
+      }
+      if (typeof str !== "string") {
+        str = JSON.stringify(str);
+      }
+      let hash = 0;
+      let i;
+      let chr;
+      let len;
+      if (str.length === 0) return hash;
+      for (i = 0, len = str.length; i < len; i++) {
+        chr = str.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+      }
+      return hash;
+    },
+  },
+});
+</script>

package/packages/directive/dialog/drag.js

@@ -0,0 +1,86 @@
+export default {
+  // v-dialog-drag: 弹窗拖拽
+  bind(el, binding, vnode, oldVnode) {
+    const value = binding.value;
+    if (value == false) return;
+    // 获取拖拽内容头部
+    const dialogHeaderEl = el.querySelector(".el-dialog__header");
+    const dragEl = el.querySelector(".dialog-drag");
+    const dragDom = el.querySelector(".el-dialog");
+
+    if (!dragDom & !dialogHeaderEl) return;
+    dragEl.style.cursor = "move";
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
+
+    // dragDom.style.position = 'absolute';
+    // dragDom.style.top = `${dragDom.style.marginTop}`;
+    // dragDom.style.marginTop = 0;
+    let width = dragDom.style.width;
+    if (width.includes("%")) {
+      width = +document.body.clientWidth * (+width.replace(/\%/g, "") / 100);
+    } else {
+      width = +width.replace(/\px/g, "");
+    }
+    ``;
+    // dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;
+    // 鼠标按下事件
+    dragEl.onmousedown = (e) => {
+      dragDom.style["user-select"] = "none";
+      // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
+      const disX = e.clientX - dialogHeaderEl.offsetLeft;
+      const disY = e.clientY - dialogHeaderEl.offsetTop;
+
+      // 获取到的值带px 正则匹配替换
+      let styL, styT;
+
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes("%")) {
+        styL =
+          +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
+        styT =
+          +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
+      } else {
+        styL = +sty.left.replace(/\px/g, "");
+        styT = +sty.top.replace(/\px/g, "");
+      }
+
+      // 鼠标拖拽事件
+      document.onmousemove = function (e) {
+        // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
+        const l = e.clientX - disX;
+        const t = e.clientY - disY;
+
+        let finallyL = l + styL;
+        let finallyT = t + styT;
+
+        // // 边界值判定 注意clientWidth scrollWidth区别 要减去之前的top left值
+        // // dragDom.offsetParent表示弹窗阴影部分
+        // if (finallyL < 0) {
+        //   finallyL = 0
+        // } else if (finallyL > dragDom.offsetParent.clientWidth - dragDom.clientWidth - dragDom.offsetParent.offsetLeft) {
+        //   finallyL = dragDom.offsetParent.clientWidth - dragDom.clientWidth - dragDom.offsetParent.offsetLeft
+        // }
+
+        // if (finallyT < 0) {
+        //   finallyT = 0
+        // } else if (finallyT > dragDom.offsetParent.clientHeight - dragDom.clientHeight - dragDom.offsetParent.offsetLeft) (
+        //   finallyT = dragDom.offsetParent.clientHeight - dragDom.clientHeight - dragDom.offsetParent.offsetLeft
+        // )
+
+        // 移动当前元素
+        dragDom.style.left = `${finallyL}px`;
+        dragDom.style.top = `${finallyT}px`;
+
+        //将此时的位置传出去
+        //binding.value({x:e.pageX,y:e.pageY})
+      };
+
+      document.onmouseup = function (e) {
+        dragDom.style["user-select"] = "auto";
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
+  },
+};