general-basic-form 1.0.11 → 1.0.15

package/README.md

@@ -1,6 +1,6 @@
 # GeneralBasicForm
 
-一个兼容Vue2和Vue3的表单组件 <br/>
+一个兼容 Vue2 和 Vue3 的表单组件 <br/>
 示例:
 
     <GeneralBasicForm
@@ -16,12 +16,48 @@
 
 ![image-20210903165502942](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202109031655830.png)
 
+在单纯作为表单的时候可以这样使用：
+
+    <GeneralBasicForm
+        formOnly
+        :formItem="formItem"
+        size="small"
+        ref="generalBasicForm"
+        :labelWidth="formLabelWidth"
+        noUrlParameters
+      />
+
+      <style lang="scss" scoped>
+      :deep {
+        .el-form-item {
+          margin-bottom: 22px;
+        }
+      }
+      </style>
+
+![image-20211014191532067](https://raw.githubusercontent.com/Alan1034/PicturesServer/main/PicGo_imgs/202110141915657.png)
+
 数据示例:
 
     showSearch: true, // 显示搜索条件
-    getList(); //请求数据的函数
-    formItem: [ 
-        { label: "款式名称", prop: "bsName", type: "input", placeholder: "请输入图片名称/分类名称/图片标签", },
+    getList(); // 请求数据的函数
+    formOnly:true // 只展示表单不展示按钮
+    noUrlParameters:true // 不接受和不改变url的参数
+    formItem: [
+        { label: "款式名称",
+          prop: "bsName",
+          type: "input",
+          placeholder: "请输入图片名称/分类名称/图片标签",
+          rules: [
+            {
+              message: "请输入信息"
+            },
+            {
+              pattern: /^\w+[\,\，\-\w' '#]+$/,
+              message: "请输入正确的Invoice单号"
+            }
+          ],
+          maxlength: "3000"},
         {
           label: "二次工艺",
           prop: "spName",
@@ -32,7 +68,11 @@
             { value: "2", desc: "绣花" },
           ],
         },
-        { label: "创建时间", prop: "create_time", type: "date-picker"
+        { 
+          label: "创建时间",
+          prop: "create_time",
+          type: "date-picker",
+          "value-format": "yyyyMMdd"
         },
         {
           label: "分类",
@@ -104,6 +144,7 @@
       ],
       //分别支持input输入框，select单选框，date-picker日期选择器，cascader层级选择器 四种组件
       //date-picker可以传入'start-placeholder'和'end-placeholder'，其他组件支持placeholder传入
+      //rules为表单校验规则，每个组件都可以传入
 
 安装：npm i general-basic-form<br/>
 install: npm i general-basic-form

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "general-basic-form",
-  "version": "1.0.11",
+  "version": "1.0.15",
   "description": "",
   "main": "./src/index.js",
   "scripts": {

package/src/GeneralBasicForm.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: 陈德立*******419287484@qq.com
  * @Date: 2021-08-20 17:14:53
- * @LastEditTime: 2021-09-03 16:58:34
+ * @LastEditTime: 2021-10-16 15:06:06
  * @LastEditors: 陈德立*******419287484@qq.com
  * @Github: https://github.com/Alan1034
  * @Description: 
@@ -25,6 +25,7 @@
       :label="item.label"
       :prop="item.prop"
       :key="item.prop"
+      :rules="item.rules"
     >
       <el-input
         v-if="item.type === 'input'"
@@ -33,6 +34,7 @@
         :size="size"
         v-bind="inputSetting"
         :placeholder="item.placeholder || inputSetting.placeholder"
+        :maxlength="item.maxlength"
       ></el-input>
       <el-select
         filterable
@@ -69,9 +71,10 @@
         :end-placeholder="
           item['end-placeholder'] || datePackerSetting['end-placeholder']
         "
+        :value-format="item['value-format']"
       ></el-date-picker>
     </el-form-item>
-    <el-form-item>
+    <el-form-item v-if="!formOnly">
       <el-button
         type="primary"
         icon="el-icon-search"
@@ -92,14 +95,22 @@ export default {
   name: "GeneralBasicForm",
   props: {
     showSearch: {
+      // 是否展示所有元素
       type: Boolean,
       default: true,
     },
+    formOnly: {
+      // 是否只展示表单不展示按钮
+      type: Boolean,
+      default: false,
+    },
     getList: {
+      // 查找数据调用的函数
       type: Function,
       default: () => {},
     },
     formItem: {
+      // 定义表单的数据
       type: Array,
       default: [],
     },
@@ -113,10 +124,22 @@ export default {
       type: String,
       default: "90px",
     },
+    noUrlParameters: {
+      // 不接受和不改变url的参数
+      type: Boolean,
+      default: () => false,
+    },
+    formData: {
+      // 外部传入的表单数据，用于回填
+      type: Object,
+      default: {},
+    },
   },
   data() {
     return {
-      queryParams: { ...this.$route?.query },
+      queryParams: {
+        ...(this.noUrlParameters ? {} : this.$route?.query),
+      }, // form表单数据
       selectSetting: {
         placeholder: "请选择",
         clearable: true,
@@ -149,6 +172,14 @@ export default {
   //     queryParams,
   //   };
   // },
+  watch: {
+    formData(val) {
+      this.queryParams = {
+        ...(this.noUrlParameters ? {} : this.queryParams),
+        ...val,
+      };
+    },
+  },
   methods: {
     /** 搜索按钮操作 */
     handleQuery() {
@@ -158,20 +189,24 @@ export default {
         ...this.queryParams,
         ...params,
       };
-      this.$router.push({
-        query: { ...searchParams },
-      });
+      if (!this.noUrlParameters) {
+        this.$router.push({
+          query: { ...searchParams },
+        });
+      }
       this.getList({
         ...searchParams,
       });
     },
     /** 重置按钮操作 */
-    resetQuery() {
+    async resetQuery() {
       this.$refs.queryFormRef.resetFields();
       const params = { page: 1 };
-      this.$router.push({
-        query: { ...params },
-      });
+      if (!this.noUrlParameters) {
+        await this.$router.push({
+          query: { ...params },
+        });
+      }
       this.handleQuery();
     },
   },