@web-utils/component 2.7.36 → 2.8.0

package/dialog-filter/index.mjs

@@ -0,0 +1,246 @@
+import { d as u } from "../chunks/util.17330567.mjs";
+import { n as o } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var r = function() {
+  var e = this, l = e.$createElement, t = e._self._c || l;
+  return e.box ? t("div", [t("ElDrawer", {
+    staticClass: "avue-dialog",
+    class: ["avue-crud__dialog", "avue-crud__filter"],
+    attrs: {
+      "lock-scroll": "",
+      "append-to-body": "",
+      title: "过滤条件",
+      size: e.crud.isMobile ? "100%" : "60%",
+      visible: e.box
+    },
+    on: {
+      "update:visible": function(i) {
+        e.box = i;
+      }
+    }
+  }, [t("ElRow", {
+    attrs: {
+      span: 24
+    }
+  }, [t("div", {
+    staticClass: "avue-crud__filter-menu"
+  }, [t("ElButtonGroup", [t("ElButton", {
+    attrs: {
+      type: "primary",
+      size: e.crud.isMediumSize
+    },
+    on: {
+      click: e.handleAdd
+    }
+  }, [e._v(" 新增条件 ")]), t("ElButton", {
+    attrs: {
+      type: "primary",
+      size: e.crud.isMediumSize
+    },
+    on: {
+      click: e.handleClear
+    }
+  }, [e._v(" 清空条件 ")]), t("ElButton", {
+    attrs: {
+      type: "primary",
+      size: e.crud.isMediumSize
+    },
+    on: {
+      click: e.handleValueClear
+    }
+  }, [e._v(" 清空数据 ")])], 1)], 1), e._l(e.list, function(i, a) {
+    return t("ElCol", {
+      key: a,
+      staticClass: "avue-crud__filter-item",
+      attrs: {
+        md: 12,
+        xs: 24,
+        sm: 12
+      }
+    }, [t("FySelect", {
+      staticClass: "avue-crud__filter-label",
+      attrs: {
+        dic: e.columnOption,
+        clearable: !1,
+        size: e.crud.isMediumSize
+      },
+      on: {
+        change: function(s) {
+          return e.handleChange(a);
+        }
+      },
+      model: {
+        value: i.text,
+        callback: function(s) {
+          e.$set(i, "text", s);
+        },
+        expression: "column.text"
+      }
+    }), t("FySelect", {
+      staticClass: "avue-crud__filter-symbol",
+      attrs: {
+        dic: e.symbolDic,
+        clearable: !1,
+        size: e.crud.isMediumSize
+      },
+      model: {
+        value: i.symbol,
+        callback: function(s) {
+          e.$set(i, "symbol", s);
+        },
+        expression: "column.symbol"
+      }
+    }), t("FyInput", {
+      staticClass: "avue-crud__filter-value",
+      attrs: {
+        size: e.crud.isMediumSize
+      },
+      model: {
+        value: i.value,
+        callback: function(s) {
+          e.$set(i, "value", s);
+        },
+        expression: "column.value"
+      }
+    }), t("ElButton", {
+      staticClass: "avue-crud__filter-icon",
+      attrs: {
+        type: "danger",
+        size: "mini",
+        circle: "",
+        icon: "el-icon-minus"
+      },
+      on: {
+        click: function(s) {
+          return e.handleDelete(a);
+        }
+      }
+    })], 1);
+  }), t("ElCol", {
+    staticClass: "avue-form__menu avue-form__menu--right",
+    attrs: {
+      span: 24
+    }
+  }, [t("ElButton", {
+    attrs: {
+      type: "primary",
+      size: e.crud.isMediumSize
+    },
+    on: {
+      click: e.handleSubmit
+    }
+  }, [e._v(" 确 定 ")]), t("ElButton", {
+    attrs: {
+      size: e.crud.isMediumSize
+    },
+    on: {
+      click: function(i) {
+        e.box = !1;
+      }
+    }
+  }, [e._v(" 取 消 ")])], 1)], 2)], 1)], 1) : e._e();
+}, c = [];
+const d = {
+  name: "DialogFilter",
+  inject: ["crud"],
+  data() {
+    return {
+      box: !1,
+      columnObj: {},
+      symbolDic: [
+        {
+          label: "=",
+          value: "="
+        },
+        {
+          label: "≠",
+          value: "≠"
+        },
+        {
+          label: "like",
+          value: "like"
+        },
+        {
+          label: ">",
+          value: ">"
+        },
+        {
+          label: "≥",
+          value: "≥"
+        },
+        {
+          label: "<",
+          value: "<"
+        },
+        {
+          label: "≤",
+          value: "≤"
+        },
+        {
+          label: "∈",
+          value: "∈"
+        }
+      ],
+      list: [],
+      columnOption: {}
+    };
+  },
+  methods: {
+    handleShow() {
+      this.getColumnOption(), this.box = !0;
+    },
+    getColumnOption() {
+      const e = [];
+      u(this.crud.propOption).forEach((t) => {
+        t.showColumn !== !1 && e.push(Object.assign(t, {
+          value: t.prop
+        }));
+      }), this.columnOption = e, this.columnObj = this.columnOption[0];
+    },
+    handleDelete(e) {
+      this.list.splice(e, 1);
+    },
+    handleClear() {
+      this.list = [];
+    },
+    handleValueClear() {
+      this.list.forEach((e) => e.value = "");
+    },
+    handleSubmit() {
+      const e = [];
+      this.list.forEach((l) => {
+        e.push([l.text, l.symbol, l.value]);
+      }), this.crud.$emit("filter", e), this.box = !1;
+    },
+    handleChange(e) {
+      this.list[e].value = "";
+    },
+    handleAdd() {
+      const e = this.columnObj.prop;
+      this.list.push({
+        text: e,
+        value: "",
+        symbol: this.symbolDic[0].value
+      });
+    }
+  }
+}, n = {};
+var m = /* @__PURE__ */ o(
+  d,
+  r,
+  c,
+  !1,
+  v,
+  null,
+  null,
+  null
+);
+function v(e) {
+  for (let l in n)
+    this[l] = n[l];
+}
+const _ = /* @__PURE__ */ function() {
+  return m.exports;
+}();
+export {
+  _ as default
+};

package/dialog-form/index.mjs

@@ -0,0 +1,148 @@
+import { isEmpty as n } from "@web-utils/core";
+import { d as l } from "../chunks/util.17330567.mjs";
+import r from "vue";
+import { n as c } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var d = function() {
+  var e = this, t = e.$createElement, o = e._self._c || t;
+  return o(e.dialogType, e._b({
+    tag: "Component",
+    staticClass: "dialog-form",
+    attrs: {
+      visible: e.visible,
+      "destroy-on-close": "",
+      "before-close": e.beforeClose
+    },
+    on: {
+      "update:visible": function(s) {
+        e.visible = s;
+      }
+    }
+  }, "Component", e.dialog, !1), [o("FyForm", {
+    ref: "form",
+    attrs: {
+      option: Object.assign({}, e.deepClone(e.option), {
+        menuBtn: !1
+      }),
+      status: e.disabled
+    },
+    on: {
+      "update:status": function(s) {
+        e.disabled = s;
+      },
+      submit: e.handleSubmit,
+      "reset-change": e.close
+    },
+    model: {
+      value: e.data,
+      callback: function(s) {
+        e.data = s;
+      },
+      expression: "data"
+    }
+  }), e.isEmpty(e.option.menuBtn, !0) ? o("span", {
+    staticClass: "avue-dialog__footer",
+    class: `avue-dialog__footer--${e.menuPosition}`
+  }, [e.isEmpty(e.option.submitBtn, !0) ? o("ElButton", {
+    attrs: {
+      size: e.$AVUE.size,
+      icon: e.option.submitIcon,
+      loading: e.disabled,
+      type: "primary"
+    },
+    on: {
+      click: e.submit
+    }
+  }, [e._v(e._s(e.option.submitText))]) : e._e(), e.isEmpty(e.option.emptyBtn, !0) ? o("ElButton", {
+    attrs: {
+      disabled: e.disabled,
+      size: e.$AVUE.size,
+      icon: e.option.emptyIcon
+    },
+    on: {
+      click: e.reset
+    }
+  }, [e._v(e._s(e.option.emptyText))]) : e._e()], 1) : e._e()], 1);
+}, m = [];
+const i = {
+  name: "DialogForm",
+  data() {
+    return {
+      opt: {},
+      disabled: !1,
+      callback: null,
+      visible: !1,
+      dialog: {
+        closeOnClickModal: !1
+      },
+      isDrawer: !1,
+      option: {
+        submitText: "提交",
+        emptyText: "关闭",
+        submitIcon: "el-icon-check",
+        emptyIcon: "el-icon-close",
+        column: []
+      },
+      data: {}
+    };
+  },
+  computed: {
+    dialogType() {
+      return this.isDrawer ? "ElDrawer" : "ElementDialog";
+    },
+    menuPosition() {
+      return this.opt.menuPosition || "center";
+    }
+  },
+  methods: {
+    isEmpty: n,
+    deepClone: l,
+    submit() {
+      this.$refs.form.submit();
+    },
+    reset() {
+      this.$refs.form.resetForm();
+    },
+    beforeClose(e) {
+      e(), this.close();
+    },
+    show(e) {
+      this.opt = e, this.callback = e.callback;
+      const t = this.deepClone(e);
+      ["callback", "option", "data"].forEach((o) => delete t[o]), this.dialog = Object.assign(this.dialog, t), this.dialog.size = this.dialog.width, this.isDrawer = this.dialog.type === "drawer", this.option = Object.assign(this.option, e.option), this.data = e.data, this.visible = !0;
+    },
+    close() {
+      const e = () => {
+        this.visible = !1, this.$destroy(), this.$el.remove();
+      };
+      typeof this.dialog.beforeClose == "function" ? this.dialog.beforeClose(e) : e();
+    },
+    handleSubmit(e, t) {
+      this.callback && this.callback({ data: e, close: this.close, done: t });
+    }
+  }
+};
+i.showForm = (e) => {
+  const t = r.extend(i), o = new t().$mount();
+  return document.body.appendChild(o.$el), o.show(e), o;
+};
+const u = i, a = {};
+var p = /* @__PURE__ */ c(
+  u,
+  d,
+  m,
+  !1,
+  b,
+  null,
+  null,
+  null
+);
+function b(e) {
+  for (let t in a)
+    this[t] = a[t];
+}
+const v = /* @__PURE__ */ function() {
+  return p.exports;
+}();
+export {
+  v as default
+};

package/dialog-form/style.css

@@ -0,0 +1 @@
+.dialog-form .element-dialog.el-dialog.el-dialog-resizeable .el-dialog__body,.dialog-form .el-drawer__body{position:static;margin-bottom:53px}

package/dynamic-table/index.mjs

@@ -0,0 +1,195 @@
+import { fastClone as u, validateNumber as d, validateIdCard as c, validatePhoneNum as m } from "@web-utils/core";
+import { n as f } from "../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var h = function() {
+  var e = this, i = e.$createElement, t = e._self._c || i;
+  return t("div", {
+    staticClass: "dynamic-table"
+  }, [t("ElTable", {
+    key: e.key,
+    staticStyle: {
+      width: "100%"
+    },
+    attrs: {
+      data: e.value
+    }
+  }, [e._l(e.columns, function(a) {
+    return t("ElTableColumn", {
+      key: a.prop,
+      attrs: {
+        prop: a.prop,
+        label: a.label,
+        "min-width": "150"
+      },
+      scopedSlots: e._u([{
+        key: "default",
+        fn: function(l) {
+          var n = l.row, r = l.$index;
+          return [t("ElFormItem", {
+            style: {
+              marginBottom: e.inputDisabled ? "0px" : "16px"
+            },
+            attrs: {
+              prop: `${e.prop}.${r}.${a.prop}`,
+              size: "mini",
+              rules: e.getRules(a)
+            }
+          }, [t("ElInput", {
+            attrs: {
+              "prefix-icon": e.getIcon(a),
+              disabled: e.inputDisabled,
+              placeholder: e.inputDisabled ? "" : `请输入${a.label}！`
+            },
+            model: {
+              value: n[a.prop],
+              callback: function(s) {
+                e.$set(n, a.prop, s);
+              },
+              expression: "row[column.prop]"
+            }
+          })], 1)];
+        }
+      }], null, !0)
+    });
+  }), e.inputDisabled ? e._e() : t("ElTableColumn", {
+    attrs: {
+      label: "操作",
+      width: "60",
+      fixed: "right"
+    },
+    scopedSlots: e._u([{
+      key: "default",
+      fn: function(a) {
+        var l = a.row, n = a.column, r = a.$index;
+        return [t("i", {
+          staticClass: "el-icon-minus dynamic-table-action-icon",
+          staticStyle: {
+            position: "relative",
+            top: "-8px",
+            color: "#f00"
+          },
+          attrs: {
+            title: "删除"
+          },
+          on: {
+            click: function(s) {
+              return s.stopPropagation(), e.removeRow(l, r, n);
+            }
+          }
+        })];
+      }
+    }], null, !1, 410881950)
+  })], 2), e.inputDisabled ? e._e() : t("ElButton", {
+    staticStyle: {
+      color: "#08c108"
+    },
+    attrs: {
+      type: "text",
+      icon: "el-icon-plus"
+    },
+    on: {
+      click: e.addRow
+    }
+  }, [e._v(" 添加 ")])], 1);
+}, y = [];
+const o = {
+  number: "fa fa-superscript",
+  email: "el-icon-lx-mail",
+  phone: "fa fa-phone",
+  idCard: "el-icon-lx-news"
+}, v = {
+  name: "DynamicTable",
+  inject: {
+    elForm: {
+      default: ""
+    },
+    elFormItem: {
+      default: ""
+    }
+  },
+  props: {
+    prop: {
+      type: String,
+      default: "rows"
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    disabled: Boolean
+  },
+  data() {
+    return {
+      key: 1
+    };
+  },
+  computed: {
+    inputDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    }
+  },
+  watch: {
+    value: {
+      deep: !0,
+      handler(e) {
+        this.$emit("input", e);
+      }
+    },
+    columns: {
+      deep: !0,
+      handler() {
+        this.key++;
+      }
+    }
+  },
+  methods: {
+    getIcon(e) {
+      return o[e.type] ? o[e.type] : "";
+    },
+    addRow() {
+      const e = this.value;
+      e.push(this.newRow()), this.$emit("input", e);
+    },
+    removeRow(e, i) {
+      const t = this.value;
+      t.splice(i, 1), this.$emit("input", t);
+    },
+    newRow() {
+      const e = {};
+      return this.columns.forEach((i) => {
+        e[i.prop] = void 0;
+      }), e;
+    },
+    getRules(e) {
+      const i = e.rules;
+      if (["email", "idCard", "phone", "number"].includes(e.type)) {
+        const t = u(i || []);
+        return e.type === "number" && t.push({ validator: d, message: "请输入数字！" }), e.type === "email" && t.push({ type: "email", message: "请输入正确的邮箱地址！" }), e.type === "idCard" && t.push({ validator: c, message: "请输入正确的身份证号码！" }), e.type === "phone" && t.push({ validator: m, message: "请输入正确的手机号码！" }), t;
+      } else
+        return i;
+    }
+  }
+}, p = {};
+var b = /* @__PURE__ */ f(
+  v,
+  h,
+  y,
+  !1,
+  _,
+  null,
+  null,
+  null
+);
+function _(e) {
+  for (let i in p)
+    this[i] = p[i];
+}
+const g = /* @__PURE__ */ function() {
+  return b.exports;
+}();
+export {
+  g as default
+};

package/dynamic-table/style.css

@@ -0,0 +1 @@
+.dynamic-table{display:flex;flex-direction:column;align-items:center;width:100%}.dynamic-table .dynamic-table-action-icon{margin-left:10px;font-weight:700;cursor:pointer}.dynamic-table .el-form-item{margin-bottom:0}.dynamic-table .el-table{flex:1 1 auto}.dynamic-table .el-table td{padding:2px 0}.dynamic-table .el-input.is-disabled .el-input__inner{background-color:transparent;border:none}