general-basic-form 2.0.1 → 2.0.3

package/README.md

@@ -1,6 +1,6 @@
 # GeneralBasicForm
 
-一个兼容 Vue2 和 Vue3 的表单组件 <br/>
+一个兼容 Vue3 和 React(未来实现) 的表单组件 <br/>
 
 示例:
 
@@ -45,10 +45,11 @@ import GeneralBasicForm from 'general-basic-form'
       />
     
       <style lang="scss" scoped>
-      :deep {
-        .el-form-item {
-          margin-bottom: 22px;
-        }
+      :deep(.el-form-item) {
+        margin-bottom: 16px;
+      }
+      :deep(.el-divider--horizontal) {
+        margin: 8px 0px;
       }
       </style>
 
@@ -63,14 +64,29 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
 
 表单数据校验需要拿到内部表单的ref
 
-    this.$refs["generalBasicForm"].$refs["queryFormRef"]    
-      .validate(
-        async (valid) => {
-          if (valid) { 
-            console.log(this.$refs["generalBasicForm"]["queryParams"]);
+    async getSmscode() {
+      const VGeneralBasicFormRef = this.$refs['VGeneralBasicFormRef'] as any
+      const state = await new Promise<boolean>((resolve, reject) => {
+        VGeneralBasicFormRef.$refs['queryFormRef']?.validateField(
+          'user_phone',
+          async (valid: FormValidateCallback | undefined) => {
+            if (valid) {
+              const { user_phone } = VGeneralBasicFormRef['queryParams']
+              const res: any = await SmscodeList({ user_phone })
+              if (res) {
+                console.log(res)
+                resolve(true)
+              } else {
+                resolve(false)
+              }
+            } else {
+              resolve(false)
+            }
           }
-        }
-      );
+        )
+      })
+      return state
+    },
 
 
 ![image-20211014191532067](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202110141915657.png)
@@ -83,10 +99,25 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
     formOnly:true // 只展示表单不展示按钮
     noUrlParameters:true // 不接受和不改变url的参数
     formItem: [
+    	{
+          label: '',
+          prop: 'bsName35',
+          type: 'divider',
+          dividerSetting: {
+          },
+          template: {
+            default: () => {
+              return "123123123";
+            },
+          },
+        },
         { label: "款式名称",
           prop: "bsName",
           type: "input",
-          placeholder: "请输入图片名称/分类名称/图片标签",
+       	  inputSetting: {
+            placeholder: '请输入手机验证码',
+            style: 'width: 100%'
+          },
           rules: [
             {
               message: "请输入信息"
@@ -101,7 +132,7 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
               return <svg-icon icon-class="baifenbi" />;
             },
           },
-          maxlength: "3000"},
+    	},
         {
           label: "二次工艺",
           prop: "spName",
@@ -133,6 +164,40 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
             },
           ],
         },
+        {
+          label: '',
+          prop: 'bsName2',
+          type: 'input-graphic-verification',
+          inputSetting: {
+            placeholder: '请输入图形验证码',
+            style: 'width: 100%'
+          },
+          rules: [
+            {
+              message: '请输入图形验证码',
+              trigger: 'blur'
+            }
+          ],
+          graphicSrc, // 请求图像的URL
+          getGraphic, // 重新请求图像的函数
+          key:Math.random(),  // 必传，图像更新后必须更新。如果URL会变化也可以用URL代替
+        },
+        {
+          label: '',
+          prop: 'bsName3',
+          type: 'input-mobile-verification',
+          inputSetting: {
+            placeholder: '请输入手机验证码',
+            style: 'width: 100%'
+          },
+          rules: [
+            {
+              message: '请输入手机验证码',
+              trigger: 'blur'
+            }
+          ]
+          getSmscode,// 获取验证码的回调函数,获取失败必须返回false,否则计时器不会重新计算
+        },
         {
           label: "分类",
           prop: "分类",
@@ -201,9 +266,6 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
           ],
         },
       ],
-      //分别支持input输入框，select单选框，date-picker日期选择器，cascader层级选择器 四种组件
-      
-      //date-picker可以传入'start-placeholder'和'end-placeholder'，其他组件支持placeholder传入
     
       //rules为表单校验规则，每个组件都可以传入
     
@@ -212,5 +274,74 @@ getList会传出默认的参数,首次请求时会有页数和分页大小,重
       //suffix	输入框尾部内容，只对 type="text" 有效
       //prepend	输入框前置内容，只对 type="text" 有效
       //append	输入框后置内容，只对 type="text" 有效
+      
+      //divider支持template：
+      //default
+支持组件:
+
+ /**
+
+  \* @description: 输入框
+
+  */
+
+ 'input' = 'input',
+
+ /**
+
+  \* @description: 输入框/图像验证码
+
+  */
+
+ 'input-graphic-verification' = 'input-graphic-verification',
+
+ /**
+
+  \* @description: 输入框/手机验证码
+
+  */
+
+ 'input-mobile-verification' = 'input-mobile-verification',
+
+ /**
+
+  \* @description: 分割线
+
+  */
+
+ 'divider' = 'divider',
+
+ /**
+
+  \* @description: 选择器
+
+  */
+
+ 'select' = 'select',
+
+ /**
+
+  \* @description: 级联选择器
+
+  */
+
+ 'cascader' = 'cascader',
+
+ /**
+
+  \* @description: 日期选择器
+
+  */
+
+ 'date-picker' = 'date-picker',
+
+ /**
+
+  \* @description: 数字输入框
+
+  */
+
+ 'input-number' = 'input-number',
+
 安装：npm i general-basic-form<br/>
-install: npm i general-basic-form
+install: npm i general-basic-form

package/dist/index.mjs

@@ -1,17 +1,73 @@
-import { resolveComponent as u, withDirectives as x, openBlock as a, createBlock as s, mergeProps as c, withCtx as p, createElementBlock as g, Fragment as P, renderList as m, withKeys as B, createSlots as C, resolveDynamicComponent as F, createCommentVNode as i, renderSlot as I, createVNode as k, createTextVNode as V, vShow as Q } from "vue";
-const D = (r, n) => {
-  const t = r.__vccOpts || r;
-  for (const [h, l] of n)
-    t[h] = l;
-  return t;
-}, G = {
-  name: "GeneralBasicForm",
+import { defineComponent as v, resolveComponent as u, openBlock as n, createBlock as s, mergeProps as c, withKeys as C, createSlots as F, renderList as g, withCtx as i, resolveDynamicComponent as B, createCommentVNode as d, withDirectives as I, createElementBlock as _, Fragment as z, renderSlot as L, createVNode as k, createTextVNode as V, vShow as O } from "vue";
+const Q = v({
   components: {
-    InputArchive: (r) => {
-      const { templateEle: n } = r;
-      return n();
+    InputArchive: (e) => {
+      const { templateEle: l } = e;
+      return l();
+    }
+  },
+  props: {
+    item: null,
+    // null就是any
+    queryParams: { type: [Object, String], required: !0 },
+    getList: { type: Function, required: !0 },
+    size: { type: String, required: !0 }
+  },
+  data() {
+    return {
+      inputSetting: {
+        placeholder: "请输入",
+        style: "width: 200px",
+        clearable: !0
+      }
+    };
+  },
+  created() {
+    console.log("new");
+  },
+  methods: {
+    currentInputComponent() {
+      return "input-archive";
     }
   },
+  watch: {
+    item(e) {
+      console.log(e);
+    },
+    size(e) {
+      console.log(e);
+    }
+  }
+}), S = (e, l) => {
+  const r = e.__vccOpts || e;
+  for (const [y, o] of l)
+    r[y] = o;
+  return r;
+};
+function D(e, l, r, y, o, h) {
+  const f = u("el-input");
+  return n(), s(f, c({
+    onKeydown: C(e.getList, ["enter"]),
+    modelValue: e.queryParams[e.item.prop],
+    "onUpdate:modelValue": l[0] || (l[0] = (p) => e.queryParams[e.item.prop] = p),
+    size: e.size
+  }, e.item.inputSetting || e.inputSetting), F({ _: 2 }, [
+    g(e.item.template, (p, m) => ({
+      name: m,
+      fn: i(() => [
+        p ? (n(), s(B(e.currentInputComponent()), {
+          key: m,
+          templateEle: p
+        }, null, 8, ["templateEle"])) : d("", !0)
+      ])
+    }))
+  ]), 1040, ["onKeydown", "modelValue", "size"]);
+}
+const R = /* @__PURE__ */ S(Q, [["render", D]]), G = {
+  name: "GeneralBasicForm",
+  components: {
+    Input: R
+  },
   props: {
     showSearch: {
       // 是否展示所有元素
@@ -63,10 +119,10 @@ const D = (r, n) => {
     }
   },
   data() {
-    var r;
+    var e;
     return {
       queryParams: {
-        ...this.noUrlParameters ? {} : (r = this.$route) == null ? void 0 : r.query
+        ...this.noUrlParameters ? {} : (e = this.$route) == null ? void 0 : e.query
       },
       // form表单数据
       selectSetting: {
@@ -74,11 +130,6 @@ const D = (r, n) => {
         clearable: !0,
         style: "width: 200px"
       },
-      inputSetting: {
-        placeholder: "请输入",
-        style: "width: 200px",
-        clearable: !0
-      },
       datePackerSetting: {
         style: "width: 227px",
         "start-placeholder": "开始日期",
@@ -102,151 +153,115 @@ const D = (r, n) => {
   //   };
   // },
   watch: {
-    formData(r) {
+    formData(e) {
       this.queryParams = {
         ...this.noUrlParameters ? {} : this.queryParams,
-        ...r
+        ...e
       };
     }
   },
   methods: {
     /** 搜索按钮操作 */
     handleQuery() {
-      var t;
-      const r = { page: 1, limit: 10 }, n = {
-        ...(t = this.$route) == null ? void 0 : t.query,
+      var r;
+      const e = { page: 1, limit: 10 }, l = {
+        ...(r = this.$route) == null ? void 0 : r.query,
         ...this.queryParams,
-        ...r
+        ...e
       };
       this.noUrlParameters || this.$router.push({
-        query: { ...n }
+        query: { ...l }
       }), this.getList({
-        ...n
+        ...l
       });
     },
     /** 重置按钮操作 */
     async resetQuery() {
-      var n;
+      var l;
       this.$refs.queryFormRef.resetFields();
-      const r = { page: 1 };
+      const e = { page: 1 };
       this.noUrlParameters || await this.$router.push({
-        query: { ...r }
+        query: { ...e }
       }), this.queryParams = {
-        ...this.noUrlParameters ? {} : (n = this.$route) == null ? void 0 : n.query
+        ...this.noUrlParameters ? {} : (l = this.$route) == null ? void 0 : l.query
       }, this.afterReset(), this.handleQuery();
-    },
-    currentInputComponent() {
-      return "input-archive";
     }
   }
-};
-function L(r, n, t, h, l, d) {
-  const q = u("el-input"), z = u("el-option"), b = u("el-select"), S = u("el-cascader"), v = u("el-date-picker"), U = u("el-input-number"), y = u("el-form-item"), _ = u("el-button"), w = u("el-form");
-  return x((a(), s(w, c({
-    model: l.queryParams,
+}, K = { key: 0 };
+function N(e, l, r, y, o, h) {
+  const f = u("el-option"), p = u("el-select"), m = u("el-cascader"), b = u("el-date-picker"), w = u("el-input-number"), P = u("el-form-item"), q = u("el-button"), U = u("el-form");
+  return I((n(), s(U, c({
+    model: o.queryParams,
     ref: "queryFormRef",
     inline: "",
     "label-position": "left",
-    "label-width": t.labelWidth
-  }, r.$attrs), {
-    default: p(() => [
-      (a(!0), g(P, null, m(t.formItem, (e) => (a(), s(y, {
-        label: e.label,
-        prop: e.prop,
-        key: e.prop,
-        rules: e.rules
+    "label-width": r.labelWidth
+  }, e.$attrs), {
+    default: i(() => [
+      (n(!0), _(z, null, g(r.formItem, (t) => (n(), s(P, {
+        label: t.label,
+        prop: t.prop,
+        key: t.prop,
+        rules: t.rules
       }, {
-        default: p(() => [
-          e.type === "input" ? (a(), s(q, c({
-            key: 0,
-            onKeydown: B(t.getList, ["enter"]),
-            modelValue: l.queryParams[e.prop],
-            "onUpdate:modelValue": (o) => l.queryParams[e.prop] = o,
-            size: t.size
-          }, l.inputSetting, {
-            placeholder: e.placeholder || l.inputSetting.placeholder,
-            maxlength: e.maxlength
-          }), C({ _: 2 }, [
-            m(e.template, (o, f) => ({
-              name: f,
-              fn: p(() => [
-                o ? (a(), s(F(d.currentInputComponent()), {
-                  key: f,
-                  templateEle: o
-                }, null, 8, ["templateEle"])) : i("", !0)
-              ])
-            }))
-          ]), 1040, ["onKeydown", "modelValue", "onUpdate:modelValue", "size", "placeholder", "maxlength"])) : e.type === "select" ? (a(), s(b, c({
+        default: i(() => [
+          t.type === "input" ? (n(), _("div", K)) : t.type === "select" ? (n(), s(p, c({
             key: 1,
             filterable: "",
-            modelValue: l.queryParams[e.prop],
-            "onUpdate:modelValue": (o) => l.queryParams[e.prop] = o,
-            size: t.size
-          }, l.selectSetting, {
-            multiple: e.multiple,
-            placeholder: e.placeholder || l.selectSetting.placeholder
-          }), {
-            default: p(() => [
-              (a(!0), g(P, null, m(e.option || [], (o) => (a(), s(z, {
-                key: o.value,
-                label: o.desc,
-                value: o.value
+            modelValue: o.queryParams[t.prop],
+            "onUpdate:modelValue": (a) => o.queryParams[t.prop] = a,
+            size: r.size
+          }, t.selectSetting || o.selectSetting), {
+            default: i(() => [
+              (n(!0), _(z, null, g(t.option || [], (a) => (n(), s(f, {
+                key: a.value,
+                label: a.desc,
+                value: a.value
               }, null, 8, ["label", "value"]))), 128))
             ]),
             _: 2
-          }, 1040, ["modelValue", "onUpdate:modelValue", "size", "multiple", "placeholder"])) : e.type === "cascader" ? (a(), s(S, c({
+          }, 1040, ["modelValue", "onUpdate:modelValue", "size"])) : t.type === "cascader" ? (n(), s(m, c({
             key: 2,
             filterable: "",
-            modelValue: l.queryParams[e.prop],
-            "onUpdate:modelValue": (o) => l.queryParams[e.prop] = o,
-            size: t.size
-          }, l.selectSetting, {
-            options: e.options || [],
-            placeholder: e.placeholder || l.selectSetting.placeholder
-          }), null, 16, ["modelValue", "onUpdate:modelValue", "size", "options", "placeholder"])) : e.type === "date-picker" ? (a(), s(v, c({
+            modelValue: o.queryParams[t.prop],
+            "onUpdate:modelValue": (a) => o.queryParams[t.prop] = a,
+            size: r.size,
+            options: t.options || []
+          }, t.selectSetting || o.selectSetting), null, 16, ["modelValue", "onUpdate:modelValue", "size", "options"])) : t.type === "date-picker" ? (n(), s(b, c({
             key: 3,
-            modelValue: l.queryParams[e.prop],
-            "onUpdate:modelValue": (o) => l.queryParams[e.prop] = o,
-            size: t.size
-          }, l.datePackerSetting, {
-            "start-placeholder": e["start-placeholder"] || l.datePackerSetting["start-placeholder"],
-            "end-placeholder": e["end-placeholder"] || l.datePackerSetting["end-placeholder"],
-            "value-format": e["value-format"]
-          }), null, 16, ["modelValue", "onUpdate:modelValue", "size", "start-placeholder", "end-placeholder", "value-format"])) : i("", !0),
-          e.type === "input-number" ? (a(), s(U, c({
+            modelValue: o.queryParams[t.prop],
+            "onUpdate:modelValue": (a) => o.queryParams[t.prop] = a,
+            size: r.size
+          }, t.datePackerSetting || o.datePackerSetting), null, 16, ["modelValue", "onUpdate:modelValue", "size"])) : d("", !0),
+          t.type === "input-number" ? (n(), s(w, c({
             key: 4,
-            modelValue: l.queryParams[e.prop],
-            "onUpdate:modelValue": (o) => l.queryParams[e.prop] = o,
-            size: t.size
-          }, l.inputSetting, {
-            min: e.min,
-            max: e.max,
-            "controls-position": e["controls-position"],
-            "step-strictly": e["step-strictly"]
-          }), null, 16, ["modelValue", "onUpdate:modelValue", "size", "min", "max", "controls-position", "step-strictly"])) : i("", !0)
+            modelValue: o.queryParams[t.prop],
+            "onUpdate:modelValue": (a) => o.queryParams[t.prop] = a,
+            size: r.size
+          }, t.inputSetting || e.inputSetting), null, 16, ["modelValue", "onUpdate:modelValue", "size"])) : d("", !0)
         ]),
         _: 2
       }, 1032, ["label", "prop", "rules"]))), 128)),
-      I(r.$slots, "default", {}, void 0, !0),
-      t.formOnly ? i("", !0) : (a(), s(y, { key: 0 }, {
-        default: p(() => [
-          k(_, {
+      L(e.$slots, "default"),
+      r.formOnly ? d("", !0) : (n(), s(P, { key: 0 }, {
+        default: i(() => [
+          k(q, {
             type: "primary",
             icon: "el-icon-search",
-            size: t.size,
-            onClick: d.handleQuery
+            size: r.size,
+            onClick: h.handleQuery
           }, {
-            default: p(() => [
+            default: i(() => [
               V("查询")
             ]),
             _: 1
           }, 8, ["size", "onClick"]),
-          k(_, {
+          k(q, {
             icon: "el-icon-refresh",
-            size: t.size,
-            onClick: d.resetQuery
+            size: r.size,
+            onClick: h.resetQuery
           }, {
-            default: p(() => [
+            default: i(() => [
               V("重置")
             ]),
             _: 1
@@ -257,10 +272,10 @@ function L(r, n, t, h, l, d) {
     ]),
     _: 3
   }, 16, ["model", "label-width"])), [
-    [Q, t.showSearch]
+    [O, r.showSearch]
   ]);
 }
-const O = /* @__PURE__ */ D(G, [["render", L], ["__scopeId", "data-v-279f95d9"]]), E = O;
+const j = /* @__PURE__ */ S(G, [["render", N]]), E = j;
 export {
   E as VGeneralBasicForm
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.Index={},s.Vue))})(this,function(s,e){"use strict";const q="",u=(r,a)=>{const l=r.__vccOpts||r;for(const[p,o]of a)l[p]=o;return l},h={name:"GeneralBasicForm",components:{InputArchive:r=>{const{templateEle:a}=r;return a()}},props:{showSearch:{type:Boolean,default:!0},formOnly:{type:Boolean,default:!1},getList:{type:Function,default:()=>{}},afterReset:{type:Function,default:()=>{}},formItem:{type:Array,default:[]},size:{type:String,default:"medium"},labelWidth:{type:String,default:"90px"},noUrlParameters:{type:Boolean,default:()=>!1},formData:{type:Object,default:()=>{}}},data(){var r;return{queryParams:{...this.noUrlParameters?{}:(r=this.$route)==null?void 0:r.query},selectSetting:{placeholder:"请选择",clearable:!0,style:"width: 200px"},inputSetting:{placeholder:"请输入",style:"width: 200px",clearable:!0},datePackerSetting:{style:"width: 227px","start-placeholder":"开始日期","end-placeholder":"结束日期",type:"daterange"}}},watch:{formData(r){this.queryParams={...this.noUrlParameters?{}:this.queryParams,...r}}},methods:{handleQuery(){var l;const r={page:1,limit:10},a={...(l=this.$route)==null?void 0:l.query,...this.queryParams,...r};this.noUrlParameters||this.$router.push({query:{...a}}),this.getList({...a})},async resetQuery(){var a;this.$refs.queryFormRef.resetFields();const r={page:1};this.noUrlParameters||await this.$router.push({query:{...r}}),this.queryParams={...this.noUrlParameters?{}:(a=this.$route)==null?void 0:a.query},this.afterReset(),this.handleQuery()},currentInputComponent(){return"input-archive"}}};function y(r,a,l,p,o,c){const _=e.resolveComponent("el-input"),k=e.resolveComponent("el-option"),g=e.resolveComponent("el-select"),P=e.resolveComponent("el-cascader"),B=e.resolveComponent("el-date-picker"),V=e.resolveComponent("el-input-number"),i=e.resolveComponent("el-form-item"),d=e.resolveComponent("el-button"),C=e.resolveComponent("el-form");return e.withDirectives((e.openBlock(),e.createBlock(C,e.mergeProps({model:o.queryParams,ref:"queryFormRef",inline:"","label-position":"left","label-width":l.labelWidth},r.$attrs),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.formItem,t=>(e.openBlock(),e.createBlock(i,{label:t.label,prop:t.prop,key:t.prop,rules:t.rules},{default:e.withCtx(()=>[t.type==="input"?(e.openBlock(),e.createBlock(_,e.mergeProps({key:0,onKeydown:e.withKeys(l.getList,["enter"]),modelValue:o.queryParams[t.prop],"onUpdate:modelValue":n=>o.queryParams[t.prop]=n,size:l.size},o.inputSetting,{placeholder:t.placeholder||o.inputSetting.placeholder,maxlength:t.maxlength}),e.createSlots({_:2},[e.renderList(t.template,(n,m)=>({name:m,fn:e.withCtx(()=>[n?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(c.currentInputComponent()),{key:m,templateEle:n},null,8,["templateEle"])):e.createCommentVNode("",!0)])}))]),1040,["onKeydown","modelValue","onUpdate:modelValue","size","placeholder","maxlength"])):t.type==="select"?(e.openBlock(),e.createBlock(g,e.mergeProps({key:1,filterable:"",modelValue:o.queryParams[t.prop],"onUpdate:modelValue":n=>o.queryParams[t.prop]=n,size:l.size},o.selectSetting,{multiple:t.multiple,placeholder:t.placeholder||o.selectSetting.placeholder}),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.option||[],n=>(e.openBlock(),e.createBlock(k,{key:n.value,label:n.desc,value:n.value},null,8,["label","value"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue","size","multiple","placeholder"])):t.type==="cascader"?(e.openBlock(),e.createBlock(P,e.mergeProps({key:2,filterable:"",modelValue:o.queryParams[t.prop],"onUpdate:modelValue":n=>o.queryParams[t.prop]=n,size:l.size},o.selectSetting,{options:t.options||[],placeholder:t.placeholder||o.selectSetting.placeholder}),null,16,["modelValue","onUpdate:modelValue","size","options","placeholder"])):t.type==="date-picker"?(e.openBlock(),e.createBlock(B,e.mergeProps({key:3,modelValue:o.queryParams[t.prop],"onUpdate:modelValue":n=>o.queryParams[t.prop]=n,size:l.size},o.datePackerSetting,{"start-placeholder":t["start-placeholder"]||o.datePackerSetting["start-placeholder"],"end-placeholder":t["end-placeholder"]||o.datePackerSetting["end-placeholder"],"value-format":t["value-format"]}),null,16,["modelValue","onUpdate:modelValue","size","start-placeholder","end-placeholder","value-format"])):e.createCommentVNode("",!0),t.type==="input-number"?(e.openBlock(),e.createBlock(V,e.mergeProps({key:4,modelValue:o.queryParams[t.prop],"onUpdate:modelValue":n=>o.queryParams[t.prop]=n,size:l.size},o.inputSetting,{min:t.min,max:t.max,"controls-position":t["controls-position"],"step-strictly":t["step-strictly"]}),null,16,["modelValue","onUpdate:modelValue","size","min","max","controls-position","step-strictly"])):e.createCommentVNode("",!0)]),_:2},1032,["label","prop","rules"]))),128)),e.renderSlot(r.$slots,"default",{},void 0,!0),l.formOnly?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(i,{key:0},{default:e.withCtx(()=>[e.createVNode(d,{type:"primary",icon:"el-icon-search",size:l.size,onClick:c.handleQuery},{default:e.withCtx(()=>[e.createTextVNode("查询")]),_:1},8,["size","onClick"]),e.createVNode(d,{icon:"el-icon-refresh",size:l.size,onClick:c.resetQuery},{default:e.withCtx(()=>[e.createTextVNode("重置")]),_:1},8,["size","onClick"])]),_:1}))]),_:3},16,["model","label-width"])),[[e.vShow,l.showSearch]])}const f=u(h,[["render",y],["__scopeId","data-v-279f95d9"]]);s.VGeneralBasicForm=f,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.Index={},s.Vue))})(this,function(s,e){"use strict";const h=e.defineComponent({components:{InputArchive:t=>{const{templateEle:l}=t;return l()}},props:{item:null,queryParams:{type:[Object,String],required:!0},getList:{type:Function,required:!0},size:{type:String,required:!0}},data(){return{inputSetting:{placeholder:"请输入",style:"width: 200px",clearable:!0}}},created(){console.log("new")},methods:{currentInputComponent(){return"input-archive"}},watch:{item(t){console.log(t)},size(t){console.log(t)}}}),u=(t,l)=>{const r=t.__vccOpts||t;for(const[p,n]of l)r[p]=n;return r};function k(t,l,r,p,n,m){const d=e.resolveComponent("el-input");return e.openBlock(),e.createBlock(d,e.mergeProps({onKeydown:e.withKeys(t.getList,["enter"]),modelValue:t.queryParams[t.item.prop],"onUpdate:modelValue":l[0]||(l[0]=i=>t.queryParams[t.item.prop]=i),size:t.size},t.item.inputSetting||t.inputSetting),e.createSlots({_:2},[e.renderList(t.item.template,(i,c)=>({name:c,fn:e.withCtx(()=>[i?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.currentInputComponent()),{key:c,templateEle:i},null,8,["templateEle"])):e.createCommentVNode("",!0)])}))]),1040,["onKeydown","modelValue","size"])}const _={name:"GeneralBasicForm",components:{Input:u(h,[["render",k]])},props:{showSearch:{type:Boolean,default:!0},formOnly:{type:Boolean,default:!1},getList:{type:Function,default:()=>{}},afterReset:{type:Function,default:()=>{}},formItem:{type:Array,default:[]},size:{type:String,default:"medium"},labelWidth:{type:String,default:"90px"},noUrlParameters:{type:Boolean,default:()=>!1},formData:{type:Object,default:()=>{}}},data(){var t;return{queryParams:{...this.noUrlParameters?{}:(t=this.$route)==null?void 0:t.query},selectSetting:{placeholder:"请选择",clearable:!0,style:"width: 200px"},datePackerSetting:{style:"width: 227px","start-placeholder":"开始日期","end-placeholder":"结束日期",type:"daterange"}}},watch:{formData(t){this.queryParams={...this.noUrlParameters?{}:this.queryParams,...t}}},methods:{handleQuery(){var r;const t={page:1,limit:10},l={...(r=this.$route)==null?void 0:r.query,...this.queryParams,...t};this.noUrlParameters||this.$router.push({query:{...l}}),this.getList({...l})},async resetQuery(){var l;this.$refs.queryFormRef.resetFields();const t={page:1};this.noUrlParameters||await this.$router.push({query:{...t}}),this.queryParams={...this.noUrlParameters?{}:(l=this.$route)==null?void 0:l.query},this.afterReset(),this.handleQuery()}}},g={key:0};function B(t,l,r,p,n,m){const d=e.resolveComponent("el-option"),i=e.resolveComponent("el-select"),c=e.resolveComponent("el-cascader"),V=e.resolveComponent("el-date-picker"),q=e.resolveComponent("el-input-number"),y=e.resolveComponent("el-form-item"),f=e.resolveComponent("el-button"),C=e.resolveComponent("el-form");return e.withDirectives((e.openBlock(),e.createBlock(C,e.mergeProps({model:n.queryParams,ref:"queryFormRef",inline:"","label-position":"left","label-width":r.labelWidth},t.$attrs),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.formItem,o=>(e.openBlock(),e.createBlock(y,{label:o.label,prop:o.prop,key:o.prop,rules:o.rules},{default:e.withCtx(()=>[o.type==="input"?(e.openBlock(),e.createElementBlock("div",g)):o.type==="select"?(e.openBlock(),e.createBlock(i,e.mergeProps({key:1,filterable:"",modelValue:n.queryParams[o.prop],"onUpdate:modelValue":a=>n.queryParams[o.prop]=a,size:r.size},o.selectSetting||n.selectSetting),{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.option||[],a=>(e.openBlock(),e.createBlock(d,{key:a.value,label:a.desc,value:a.value},null,8,["label","value"]))),128))]),_:2},1040,["modelValue","onUpdate:modelValue","size"])):o.type==="cascader"?(e.openBlock(),e.createBlock(c,e.mergeProps({key:2,filterable:"",modelValue:n.queryParams[o.prop],"onUpdate:modelValue":a=>n.queryParams[o.prop]=a,size:r.size,options:o.options||[]},o.selectSetting||n.selectSetting),null,16,["modelValue","onUpdate:modelValue","size","options"])):o.type==="date-picker"?(e.openBlock(),e.createBlock(V,e.mergeProps({key:3,modelValue:n.queryParams[o.prop],"onUpdate:modelValue":a=>n.queryParams[o.prop]=a,size:r.size},o.datePackerSetting||n.datePackerSetting),null,16,["modelValue","onUpdate:modelValue","size"])):e.createCommentVNode("",!0),o.type==="input-number"?(e.openBlock(),e.createBlock(q,e.mergeProps({key:4,modelValue:n.queryParams[o.prop],"onUpdate:modelValue":a=>n.queryParams[o.prop]=a,size:r.size},o.inputSetting||t.inputSetting),null,16,["modelValue","onUpdate:modelValue","size"])):e.createCommentVNode("",!0)]),_:2},1032,["label","prop","rules"]))),128)),e.renderSlot(t.$slots,"default"),r.formOnly?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(y,{key:0},{default:e.withCtx(()=>[e.createVNode(f,{type:"primary",icon:"el-icon-search",size:r.size,onClick:m.handleQuery},{default:e.withCtx(()=>[e.createTextVNode("查询")]),_:1},8,["size","onClick"]),e.createVNode(f,{icon:"el-icon-refresh",size:r.size,onClick:m.resetQuery},{default:e.withCtx(()=>[e.createTextVNode("重置")]),_:1},8,["size","onClick"])]),_:1}))]),_:3},16,["model","label-width"])),[[e.vShow,r.showSearch]])}const P=u(_,[["render",B]]);s.VGeneralBasicForm=P,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,48 +1,57 @@
-{
-  "name": "general-basic-form",
-  "version": "2.0.1",
-  "description": "",
-  "files": [
-    "/dist"
-  ],
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.mjs",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.umd.js"
-    }
-  },
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "build": "cross-env CURRENT_ENV=prod run-p type-check build-only",
-    "test:e2e": "playwright test",
-    "build-only": "vite build",
-    "type-check": "tsc --noEmit -p tsconfig.json --composite false"
-  },
-  "keywords": [
-    "general-basic-form",
-    "form",
-    "vue",
-    "vue2",
-    "vue3",
-    "element-plus"
-  ],
-  "author": "chendeli419287484@qq.com",
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Alan1034/GeneralBasicForm.git"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.36.1",
-    "@types/node": "^20.8.10",
-    "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "cross-env": "^7.0.3",
-    "npm-run-all": "^4.1.5",
-    "typescript": "^5.2.2",
-    "vite-plugin-image-optimizer": "^1.1.6"
-  }
-}
+{
+  "name": "general-basic-form",
+  "version": "2.0.3",
+  "description": "",
+  "main": "./dist/index.umd.js",
+  "scripts": {
+    "build": "cross-env CURRENT_ENV=prod run-p type-check build-only",
+    "test:e2e": "playwright test",
+    "build-only": "vite build",
+    "type-check": "tsc --noEmit -p tsconfig.json --composite false",
+    "link": "tsx script/link.ts && yarn link",
+    "unlink": "tsx script/unlink.ts && yarn unlink"
+  },
+  "keywords": [
+    "general-basic-form",
+    "form",
+    "vue",
+    "vue2",
+    "vue3",
+    "element-plus"
+  ],
+  "author": "chendeli419287484@qq.com",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Alan1034/GeneralBasicForm.git"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.36.1",
+    "@types/node": "^20.8.10",
+    "@vitejs/plugin-legacy": "^4.1.1",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "cross-env": "^7.0.3",
+    "chalk": "^2.4.2",
+    "npm-run-all": "^4.1.5",
+    "tsx": "^4.0.0",
+    "typescript": "^5.2.2",
+    "vite-plugin-image-optimizer": "^1.1.6"
+  },
+  "peerDependencies": {
+    "element-plus": ">=2.4.2",
+    "vue": ">=3.3.4",
+    "vue-router": ">=4.2.4"
+  },
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "typings": "./dist/index.d.ts",
+  "files": [
+    "/dist"
+  ]
+}

package/dist/style.css

@@ -1 +0,0 @@
-.el-form-item[data-v-279f95d9]{margin-bottom:2px!important}