general-basic-form 1.0.12 → 1.0.16

package/README.md

@@ -16,10 +16,33 @@
 
 ![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(); //请求数据的函数
+    getList(); // 请求数据的函数
+    formOnly:true // 只展示表单不展示按钮
+    noUrlParameters:true // 不接受和不改变url的参数
     formItem: [
         { label: "款式名称",
           prop: "bsName",
@@ -34,6 +57,11 @@
               message: "请输入正确的Invoice单号"
             }
           ],
+          template: {
+            suffix: () => {
+              return <svg-icon icon-class="baifenbi" />;
+            },
+          },
           maxlength: "3000"},
         {
           label: "二次工艺",
@@ -120,8 +148,15 @@
         },
       ],
       //分别支持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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "general-basic-form",
-  "version": "1.0.12",
+  "version": "1.0.16",
   "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-30 18:21:47
+ * @LastEditTime: 2021-10-19 19:23:15
  * @LastEditors: 陈德立*******419287484@qq.com
  * @Github: https://github.com/Alan1034
  * @Description: 
@@ -35,7 +35,19 @@
         v-bind="inputSetting"
         :placeholder="item.placeholder || inputSetting.placeholder"
         :maxlength="item.maxlength"
-      ></el-input>
+      >
+        <template
+          v-for="(templateEle, name) in item.template"
+          :key="name"
+          #[name]
+        >
+          <component
+            v-if="templateEle"
+            :is="currentInputComponent()"
+            :templateEle="templateEle"
+          />
+        </template>
+      </el-input>
       <el-select
         filterable
         v-else-if="item.type === 'select'"
@@ -74,7 +86,7 @@
         :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"
@@ -93,16 +105,30 @@
 <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: [],
     },
@@ -116,10 +142,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,
@@ -152,6 +190,14 @@ export default {
   //     queryParams,
   //   };
   // },
+  watch: {
+    formData(val) {
+      this.queryParams = {
+        ...(this.noUrlParameters ? {} : this.queryParams),
+        ...val,
+      };
+    },
+  },
   methods: {
     /** 搜索按钮操作 */
     handleQuery() {
@@ -161,22 +207,29 @@ 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();
     },
+    currentInputComponent() {
+      return "input-archive";
+    },
   },
 };
 </script>