general-basic-form 1.0.25 → 2.0.0

package/README.md

@@ -1,191 +1,216 @@
-# GeneralBasicForm
-
-一个兼容 Vue2 和 Vue3 的表单组件 <br/>
-示例:
-
-    <GeneralBasicForm
-      :showSearch="showSearch"
-      :getList="getList"
-      :formItem="formItem"
-      :size="size"
-      ref="generalBasicForm"
-      labelWidth="90px"
-    >
-     ...一些传入插槽的内容
-    </GeneralBasicForm>
-
-![image-20210903165502942](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202109031655830.png)
-
-在单纯作为表单的时候可以这样使用：
-
-    <GeneralBasicForm
-        formOnly
-        :formItem="formItem"
-        size="small"
-        ref="generalBasicForm"
-        :labelWidth="formLabelWidth"
-        :formData: {
-          // 外部传入的表单数据，用于回填
-        }
-        noUrlParameters
-      />
-    
-      <style lang="scss" scoped>
-      :deep {
-        .el-form-item {
-          margin-bottom: 22px;
-        }
-      }
-      </style>
-
-表单数据校验需要拿到内部表单的ref
-
-    this.$refs["generalBasicForm"].$refs["queryFormRef"]    
-      .validate(
-        async (valid) => {
-          if (valid) { 
-            console.log(this.$refs["generalBasicForm"]["queryParams"]);
-          }
-        }
-      );
-
-![image-20211014191532067](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202110141915657.png)
-
-数据示例:
-
-    showSearch: true, // 显示搜索条件
-    getList(); // 请求数据的函数
-    formOnly:true // 只展示表单不展示按钮
-    noUrlParameters:true // 不接受和不改变url的参数
-    formItem: [
-        { label: "款式名称",
-          prop: "bsName",
-          type: "input",
-          placeholder: "请输入图片名称/分类名称/图片标签",
-          rules: [
-            {
-              message: "请输入信息"
-            },
-            {
-              pattern: /^\w+[\,\，\-\w' '#]+$/,
-              message: "请输入正确的Invoice单号"
-            }
-          ],
-          template: {
-            suffix: () => {
-              return <svg-icon icon-class="baifenbi" />;
-            },
-          },
-          maxlength: "3000"},
-        {
-          label: "二次工艺",
-          prop: "spName",
-          type: "select",
-          multiple:true, //多选
-          option: [
-            { value: "3", desc: "满印" },
-            { value: "1", desc: "区域印花" },
-            { value: "2", desc: "绣花" },
-          ],
-        },
-        { 
-          label: "创建时间",
-          prop: "create_time",
-          type: "date-picker",
-          "value-format": "yyyyMMdd"
-        },
-        {
-          label: "二次工艺成本价格（人民币分）",
-          prop: "spCost",
-          type: "input-number",
-          "controls-position": "right",
-          min: 0,
-          rules: [
-            {
-              required: true,
-              message: "请输入二次工艺成本价格",
-              trigger: "blur",
-            },
-          ],
-        },
-        {
-          label: "分类",
-          prop: "分类",
-          type: "cascader",
-          options: [
-            {
-              value: "zhinan",
-              label: "指南",
-              children: [
-                {
-                  value: "shejiyuanze",
-                  label: "设计原则",
-                  children: [
-                    {
-                      value: "yizhi",
-                      label: "一致",
-                    },
-                    {
-                      value: "fankui",
-                      label: "反馈",
-                    },
-                    {
-                      value: "xiaolv",
-                      label: "效率",
-                    },
-                    {
-                      value: "kekong",
-                      label: "可控",
-                    },
-                  ],
-                },
-                {
-                  value: "daohang",
-                  label: "导航",
-                  children: [
-                    {
-                      value: "cexiangdaohang",
-                      label: "侧向导航",
-                    },
-                    {
-                      value: "dingbudaohang",
-                      label: "顶部导航",
-                    },
-                  ],
-                },
-              ],
-            },
-            {
-              value: "ziyuan",
-              label: "资源",
-              children: [
-                {
-                  value: "axure",
-                  label: "Axure Components",
-                },
-                {
-                  value: "sketch",
-                  label: "Sketch Templates",
-                },
-                {
-                  value: "jiaohu",
-                  label: "组件交互文档",
-                },
-              ],
-            },
-          ],
-        },
-      ],
-      //分别支持input输入框，select单选框，date-picker日期选择器，cascader层级选择器 四种组件
-      
-      //date-picker可以传入'start-placeholder'和'end-placeholder'，其他组件支持placeholder传入
-    
-      //rules为表单校验规则，每个组件都可以传入
-    
-      //input支持template,支持以下几个属性：
-      //prefix	输入框头部内容，只对 type="text"（默认） 有效
-      //suffix	输入框尾部内容，只对 type="text" 有效
-      //prepend	输入框前置内容，只对 type="text" 有效
-      //append	输入框后置内容，只对 type="text" 有效
-安装：npm i general-basic-form<br/>
-install: npm i general-basic-form
+# GeneralBasicForm
+
+一个兼容 Vue2 和 Vue3 的表单组件 <br/>
+
+示例:
+
+因为兼容性问题，目前只能使用完整引入
+
+```
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+app.use(ElementPlus)
+```
+
+```
+import GeneralBasicForm from 'general-basic-form'
+```
+
+    <GeneralBasicForm
+      :showSearch="showSearch"
+      :getList="getList"
+      :formItem="formItem"
+      :size="size"
+      ref="generalBasicForm"
+      labelWidth="90px"
+    >
+     ...一些传入插槽的内容
+    </GeneralBasicForm>
+
+![image-20210903165502942](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202109031655830.png)
+
+在单纯作为表单的时候可以这样使用：
+
+    <GeneralBasicForm
+        formOnly
+        :formItem="formItem"
+        size="small"
+        ref="generalBasicForm"
+        :labelWidth="formLabelWidth"
+        :formData: {
+          // 外部传入的表单数据，用于回填
+        }
+        noUrlParameters
+        :afterReset="afterReset"
+      />
+    
+      <style lang="scss" scoped>
+      :deep {
+        .el-form-item {
+          margin-bottom: 22px;
+        }
+      }
+      </style>
+
+getList会传出默认的参数,首次请求时会有页数和分页大小,重置后会传出默认页数1
+
+    async getList(
+       params = {
+         page: Number(this.$route.query.page) || 1,
+         limit: Number(this.$route.query.limit) || 10,
+       }
+     ) {}
+
+表单数据校验需要拿到内部表单的ref
+
+    this.$refs["generalBasicForm"].$refs["queryFormRef"]    
+      .validate(
+        async (valid) => {
+          if (valid) { 
+            console.log(this.$refs["generalBasicForm"]["queryParams"]);
+          }
+        }
+      );
+
+
+![image-20211014191532067](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202110141915657.png)
+
+数据示例:
+
+    showSearch: true, // 显示搜索条件
+    getList(); // 请求数据的函数
+    afterReset(); // 在重置按钮点击完后但还没重新请求时触发的的函数
+    formOnly:true // 只展示表单不展示按钮
+    noUrlParameters:true // 不接受和不改变url的参数
+    formItem: [
+        { label: "款式名称",
+          prop: "bsName",
+          type: "input",
+          placeholder: "请输入图片名称/分类名称/图片标签",
+          rules: [
+            {
+              message: "请输入信息"
+            },
+            {
+              pattern: /^\w+[\,\，\-\w' '#]+$/,
+              message: "请输入正确的Invoice单号"
+            }
+          ],
+          template: {
+            suffix: () => {
+              return <svg-icon icon-class="baifenbi" />;
+            },
+          },
+          maxlength: "3000"},
+        {
+          label: "二次工艺",
+          prop: "spName",
+          type: "select",
+          multiple:true, //多选
+          option: [
+            { value: "3", desc: "满印" },
+            { value: "1", desc: "区域印花" },
+            { value: "2", desc: "绣花" },
+          ],
+        },
+        { 
+          label: "创建时间",
+          prop: "create_time",
+          type: "date-picker",
+          "value-format": "yyyyMMdd"
+        },
+        {
+          label: "二次工艺成本价格（人民币分）",
+          prop: "spCost",
+          type: "input-number",
+          "controls-position": "right",
+          min: 0,
+          rules: [
+            {
+              required: true,
+              message: "请输入二次工艺成本价格",
+              trigger: "blur",
+            },
+          ],
+        },
+        {
+          label: "分类",
+          prop: "分类",
+          type: "cascader",
+          options: [
+            {
+              value: "zhinan",
+              label: "指南",
+              children: [
+                {
+                  value: "shejiyuanze",
+                  label: "设计原则",
+                  children: [
+                    {
+                      value: "yizhi",
+                      label: "一致",
+                    },
+                    {
+                      value: "fankui",
+                      label: "反馈",
+                    },
+                    {
+                      value: "xiaolv",
+                      label: "效率",
+                    },
+                    {
+                      value: "kekong",
+                      label: "可控",
+                    },
+                  ],
+                },
+                {
+                  value: "daohang",
+                  label: "导航",
+                  children: [
+                    {
+                      value: "cexiangdaohang",
+                      label: "侧向导航",
+                    },
+                    {
+                      value: "dingbudaohang",
+                      label: "顶部导航",
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              value: "ziyuan",
+              label: "资源",
+              children: [
+                {
+                  value: "axure",
+                  label: "Axure Components",
+                },
+                {
+                  value: "sketch",
+                  label: "Sketch Templates",
+                },
+                {
+                  value: "jiaohu",
+                  label: "组件交互文档",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      //分别支持input输入框，select单选框，date-picker日期选择器，cascader层级选择器 四种组件
+      
+      //date-picker可以传入'start-placeholder'和'end-placeholder'，其他组件支持placeholder传入
+    
+      //rules为表单校验规则，每个组件都可以传入
+    
+      //input支持template,支持以下几个属性：
+      //prefix	输入框头部内容，只对 type="text"（默认） 有效
+      //suffix	输入框尾部内容，只对 type="text" 有效
+      //prepend	输入框前置内容，只对 type="text" 有效
+      //append	输入框后置内容，只对 type="text" 有效
+安装：npm i general-basic-form<br/>
+install: npm i general-basic-form

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+/*
+ * @Author: 陈德立*******419287484@qq.com
+ * @Date: 2023-11-07 17:55:59
+ * @LastEditTime: 2023-11-08 10:24:14
+ * @LastEditors: 陈德立*******419287484@qq.com
+ * @Github: https://github.com/Alan1034
+ * @Description: 
+ * @FilePath: \GeneralBasicForm\public\index.d.ts
+ * 
+ */
+/// <reference types="vite/client" />
+declare module "*.vue" {
+  import { DefineComponent } from "vue"
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+declare module "general-basic-form";

package/dist/index.mjs

@@ -0,0 +1,266 @@
+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",
+  components: {
+    InputArchive: (r) => {
+      const { templateEle: n } = r;
+      return n();
+    }
+  },
+  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: {
+      // 不接受和不改变url的参数
+      type: Boolean,
+      default: () => !1
+    },
+    formData: {
+      // 外部传入的表单数据，用于回填
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    var r;
+    return {
+      queryParams: {
+        ...this.noUrlParameters ? {} : (r = this.$route) == null ? void 0 : r.query
+      },
+      // form表单数据
+      selectSetting: {
+        placeholder: "请选择",
+        clearable: !0,
+        style: "width: 200px"
+      },
+      inputSetting: {
+        placeholder: "请输入",
+        style: "width: 200px",
+        clearable: !0
+      },
+      datePackerSetting: {
+        style: "width: 227px",
+        "start-placeholder": "开始日期",
+        "end-placeholder": "结束日期",
+        type: "daterange"
+      }
+    };
+  },
+  // setup(props) {
+  //设置默认值
+  //   console.log(props);
+  //   // const { formItem } = toRefs(props);
+  //   const { formItem } = props;
+  //   console.log(formItem);
+  //   const queryParams = {};
+  //   formItem.forEach((item) => {
+  //     queryParams[item.prop] = "";
+  //   });
+  //   return {
+  //     queryParams,
+  //   };
+  // },
+  watch: {
+    formData(r) {
+      this.queryParams = {
+        ...this.noUrlParameters ? {} : this.queryParams,
+        ...r
+      };
+    }
+  },
+  methods: {
+    /** 搜索按钮操作 */
+    handleQuery() {
+      var t;
+      const r = { page: 1, limit: 10 }, n = {
+        ...(t = this.$route) == null ? void 0 : t.query,
+        ...this.queryParams,
+        ...r
+      };
+      this.noUrlParameters || this.$router.push({
+        query: { ...n }
+      }), this.getList({
+        ...n
+      });
+    },
+    /** 重置按钮操作 */
+    async resetQuery() {
+      var n;
+      this.$refs.queryFormRef.resetFields();
+      const r = { page: 1 };
+      this.noUrlParameters || await this.$router.push({
+        query: { ...r }
+      }), this.queryParams = {
+        ...this.noUrlParameters ? {} : (n = this.$route) == null ? void 0 : n.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,
+    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
+      }, {
+        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({
+            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
+              }, null, 8, ["label", "value"]))), 128))
+            ]),
+            _: 2
+          }, 1040, ["modelValue", "onUpdate:modelValue", "size", "multiple", "placeholder"])) : e.type === "cascader" ? (a(), s(S, 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({
+            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({
+            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)
+        ]),
+        _: 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(_, {
+            type: "primary",
+            icon: "el-icon-search",
+            size: t.size,
+            onClick: d.handleQuery
+          }, {
+            default: p(() => [
+              V("查询")
+            ]),
+            _: 1
+          }, 8, ["size", "onClick"]),
+          k(_, {
+            icon: "el-icon-refresh",
+            size: t.size,
+            onClick: d.resetQuery
+          }, {
+            default: p(() => [
+              V("重置")
+            ]),
+            _: 1
+          }, 8, ["size", "onClick"])
+        ]),
+        _: 1
+      }))
+    ]),
+    _: 3
+  }, 16, ["model", "label-width"])), [
+    [Q, t.showSearch]
+  ]);
+}
+const O = /* @__PURE__ */ D(G, [["render", L], ["__scopeId", "data-v-279f95d9"]]), E = O;
+export {
+  E as VGeneralBasicForm
+};

package/dist/index.umd.js

@@ -0,0 +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"})});

package/dist/style.css

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

package/package.json

@@ -1,32 +1,48 @@
-{
-  "name": "general-basic-form",
-  "version": "1.0.25",
-  "description": "",
-  "main": "./src/index.js",
-  "scripts": {
-    "serve": "webpack-dev-server --config config/webpack.dev.js",
-    "build": "webpack --config config/webpack.prod.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "general-basic-form",
-    "form",
-    "vue",
-    "vue2",
-    "vue3",
-    "element-plus",
-    "element-plus"
-  ],
-  "author": "chendeli419287484@qq.com",
-  "license": "ISC",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Alan1034/GeneralBasicForm"
-  },
-  "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^7.14.0"
-  },
-  "dependencies": {}
-}
+{
+  "name": "general-basic-form",
+  "version": "2.0.0",
+  "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": "https://github.com/Alan1034/GeneralBasicForm"
+  },
+  "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"
+  }
+}

package/config/webpack.common.js

@@ -1,98 +0,0 @@
-const path = require("path");
-const webpack = require("webpack");
-const { VueLoaderPlugin } = require('vue-loader')
-
-module.exports = {
-    entry: "./src/index.js",
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                exclude: file => (
-                    /node_modules/.test(file) &&
-                    !/\.vue\.js/.test(file)
-                ),
-                use: [
-                    // "thread-loader",// 多线程编译，可能会导致报错
-                    {
-                        loader: 'babel-loader',
-                        options: {
-                            presets: ['@babel/preset-env']
-                        }
-                    }
-                ],
-            },
-
-            {
-                test: /\.css$/,
-                use: ['vue-style-loader', 'css-loader']
-            },
-            {
-                test: /\.less$/,
-                use: ['vue-style-loader', 'css-loader', 'less-loader']
-            },
-            {
-                test: /\.scss$/,
-                use: [
-                    'vue-style-loader',
-                    'css-loader',
-                    'sass-loader'
-                ]
-            },
-            {
-                test: /\.(eot|svg|ttf|woff|woff2)$/,
-                use: {
-                    loader: 'file-loader',
-                    options: {
-                        outputPath: 'fonts/',
-                        esModule: false
-                    }
-                }
-            },
-            {
-                test: /\.(png|jpg|gif)$/,
-                use: {
-                    loader: 'file-loader',
-                    options: {
-                        outputPath: 'assets/',
-                        esModule: false
-                    }
-                }
-            },
-            {
-                test: /\.vue$/,
-                loader: 'vue-loader',
-                options: {
-                    use: [
-                        // "thread-loader",// 多线程编译，可能会导致报错
-                        {
-                            loader: 'babel-loader',
-                            options: {
-                                presets: ['@babel/preset-env']
-                            }
-                        }
-                    ],
-                }
-            },
-        ]
-    },
-    resolve: {
-        extensions: ['\*', '.js', '.jsx', '.vue'],// 能够使用户在引入模块时不带扩展
-        alias: {
-            "@": path.resolve(__dirname, '../src'),
-        },
-    },
-    output: {
-        path: path.resolve(__dirname, "../dist/"),
-        publicPath: "/",
-        filename: "bundle.js"
-    },
-    //why:https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags
-    plugins: [
-        new webpack.HotModuleReplacementPlugin(),
-        new VueLoaderPlugin(),
-        new webpack.DefinePlugin({
-            "__VUE_OPTIONS_API__": true,
-            "__VUE_PROD_DEVTOOLS__": false,
-        })]
-};

package/config/webpack.dev.js

@@ -1,15 +0,0 @@
-const path = require("path");
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
-  mode: 'development',
-  devtool: 'inline-source-map',
-  devServer: {
-    contentBase: path.join(__dirname, "dist"),
-    port: 3000,
-    hot: true,
-    open: true, //自动打开浏览器
-    // host: '0.0.0.0',//开启项目本地服务
-  },
-});

package/config/webpack.prod.js

@@ -1,16 +0,0 @@
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-
-module.exports = merge(common, {
-  mode: 'production',
-  plugins: [
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        comments: "some", //去掉部分注释
-      }
-    }),
-    new CleanWebpackPlugin(),// 构筑前清理dist文件夹
-  ]
-});

package/src/GeneralBasicForm.vue

@@ -1,252 +0,0 @@
-<!--
- * @Author: 陈德立*******419287484@qq.com
- * @Date: 2021-08-20 17:14:53
- * @LastEditTime: 2021-11-23 17:49:55
- * @LastEditors: 陈德立*******419287484@qq.com
- * @Github: https://github.com/Alan1034
- * @Description: 
- * @FilePath: \GeneralBasicForm\src\GeneralBasicForm.vue
- * 
--->
-/** 通用基本表单。用在表单页面搜索栏 */
-
-<template>
-  <el-form
-    :model="queryParams"
-    ref="queryFormRef"
-    v-show="showSearch"
-    inline
-    label-position="left"
-    :label-width="labelWidth"
-    v-bind="$attrs"
-  >
-    <el-form-item
-      v-for="item in formItem"
-      :label="item.label"
-      :prop="item.prop"
-      :key="item.prop"
-      :rules="item.rules"
-    >
-      <el-input
-        v-if="item.type === 'input'"
-        @keydown.enter="getList"
-        v-model="queryParams[item.prop]"
-        :size="size"
-        v-bind="inputSetting"
-        :placeholder="item.placeholder || inputSetting.placeholder"
-        :maxlength="item.maxlength"
-      >
-        <template v-for="(templateEle, name) in item.template" #[name]>
-          <component
-            :key="name"
-            v-if="templateEle"
-            :is="currentInputComponent()"
-            :templateEle="templateEle"
-          />
-        </template>
-      </el-input>
-      <el-select
-        filterable
-        v-else-if="item.type === 'select'"
-        v-model="queryParams[item.prop]"
-        :size="size"
-        v-bind="selectSetting"
-        :multiple="item.multiple"
-        :placeholder="item.placeholder || selectSetting.placeholder"
-      >
-        <el-option
-          v-for="dict in item.option || []"
-          :key="dict.value"
-          :label="dict.desc"
-          :value="dict.value"
-        />
-      </el-select>
-      <el-cascader
-        filterable
-        v-else-if="item.type === 'cascader'"
-        v-model="queryParams[item.prop]"
-        :size="size"
-        v-bind="selectSetting"
-        :options="item.options || []"
-        :placeholder="item.placeholder || selectSetting.placeholder"
-      ></el-cascader>
-      <el-date-picker
-        v-else-if="item.type === 'date-picker'"
-        v-model="queryParams[item.prop]"
-        :size="size"
-        v-bind="datePackerSetting"
-        :start-placeholder="
-          item['start-placeholder'] || datePackerSetting['start-placeholder']
-        "
-        :end-placeholder="
-          item['end-placeholder'] || datePackerSetting['end-placeholder']
-        "
-        :value-format="item['value-format']"
-      ></el-date-picker>
-      <el-input-number
-        v-if="item.type === 'input-number'"
-        v-model="queryParams[item.prop]"
-        :size="size"
-        v-bind="inputSetting"
-        :min="item.min"
-        :max="item.max"
-        :controls-position="item['controls-position']"
-        :step-strictly="item['step-strictly']"
-      />
-    </el-form-item>
-    <slot></slot>
-    <el-form-item v-if="!formOnly">
-      <el-button
-        type="primary"
-        icon="el-icon-search"
-        :size="size"
-        @click="handleQuery"
-        >查询</el-button
-      >
-      <el-button icon="el-icon-refresh" :size="size" @click="resetQuery"
-        >重置</el-button
-      >
-    </el-form-item>
-  </el-form>
-</template>
-
-<script>
-export default {
-  name: "GeneralBasicForm",
-  components: {
-    InputArchive: (props) => {
-      const { templateEle } = props;
-      return templateEle();
-    },
-  },
-  props: {
-    showSearch: {
-      // 是否展示所有元素
-      type: Boolean,
-      default: true,
-    },
-    formOnly: {
-      // 是否只展示表单不展示按钮
-      type: Boolean,
-      default: false,
-    },
-    getList: {
-      // 查找数据调用的函数
-      type: Function,
-      default: () => {},
-    },
-    formItem: {
-      // 定义表单的数据
-      type: Array,
-      default: [],
-    },
-    size: {
-      // 控制按钮大小
-      type: String,
-      default: "medium",
-    },
-    labelWidth: {
-      // 表单文字宽度
-      type: String,
-      default: "90px",
-    },
-    noUrlParameters: {
-      // 不接受和不改变url的参数
-      type: Boolean,
-      default: () => false,
-    },
-    formData: {
-      // 外部传入的表单数据，用于回填
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      queryParams: {
-        ...(this.noUrlParameters ? {} : this.$route?.query),
-      }, // form表单数据
-      selectSetting: {
-        placeholder: "请选择",
-        clearable: true,
-        style: "width: 200px",
-      },
-      inputSetting: {
-        placeholder: "请输入",
-        style: "width: 200px",
-        clearable: true,
-      },
-      datePackerSetting: {
-        style: "width: 227px",
-        "start-placeholder": "开始日期",
-        "end-placeholder": "结束日期",
-        type: "daterange",
-      },
-    };
-  },
-  // setup(props) {
-  //设置默认值
-  //   console.log(props);
-  //   // const { formItem } = toRefs(props);
-  //   const { formItem } = props;
-  //   console.log(formItem);
-  //   const queryParams = {};
-  //   formItem.forEach((item) => {
-  //     queryParams[item.prop] = "";
-  //   });
-  //   return {
-  //     queryParams,
-  //   };
-  // },
-  watch: {
-    formData(val) {
-      this.queryParams = {
-        ...(this.noUrlParameters ? {} : this.queryParams),
-        ...val,
-      };
-    },
-  },
-  methods: {
-    /** 搜索按钮操作 */
-    handleQuery() {
-      const params = { page: 1, limit: 10 };
-      const searchParams = {
-        ...this.$route?.query,
-        ...this.queryParams,
-        ...params,
-      };
-      if (!this.noUrlParameters) {
-        this.$router.push({
-          query: { ...searchParams },
-        });
-      }
-      this.getList({
-        ...searchParams,
-      });
-    },
-    /** 重置按钮操作 */
-    async resetQuery() {
-      this.$refs.queryFormRef.resetFields();
-      const params = { page: 1 };
-      if (!this.noUrlParameters) {
-        await this.$router.push({
-          query: { ...params },
-        });
-      }
-      this.queryParams = {
-        ...(this.noUrlParameters ? {} : this.$route?.query),
-      };
-      this.handleQuery();
-    },
-    currentInputComponent() {
-      return "input-archive";
-    },
-  },
-};
-</script>
-
-<style scoped>
-.el-form-item {
-  margin-bottom: 2px !important;
-}
-</style>

package/src/index.js

@@ -1,12 +0,0 @@
-/*
- * @Author: 陈德立*******419287484@qq.com
- * @Date: 2021-08-20 17:05:30
- * @LastEditTime: 2021-08-20 17:15:27
- * @LastEditors: 陈德立*******419287484@qq.com
- * @Github: https://github.com/Alan1034
- * @Description: 
- * @FilePath: \GeneralBasicForm\src\index.js
- * 
- */
-import GeneralBasicForm from './GeneralBasicForm.vue';
-export default GeneralBasicForm