refactor: 重构逻辑

Author: dream2023

README.md

@@ -49,7 +49,7 @@
 
 f-render 是基于 [vue-ele-form](https://github.com/dream2023/vue-ele-form) 开发的可视化表单设计工具, 适用于 各种流程引擎和动态表单项目，大大节省你的开发时间；
 
-[![f-render 演示图](https://s1.ax1x.com/2020/08/23/d0T976.gif)](https://dream2023.gitee.io/f-render/)
+[![f-render 演示图](./demo.webp)](https://dream2023.gitee.io/f-render/)
 
 ## 注意
 
@@ -58,21 +58,25 @@ f-render 是基于 [vue-ele-form](https://github.com/dream2023/vue-ele-form) 开
 ## 特性
 
 - 组件方式：以组件方式接入，1 分钟轻松接入；
-- 体积小：Gzip 压缩后 `200k` 以内；
+- 体积小：Gzip 压缩后 `100k` 左右；
 - 易扩展：可以在`不更改源码`的情况下增删改属性、组件；
 
 ## Demo
 
 [https://dream2023.gitee.io/f-render/](https://dream2023.gitee.io/f-render/)
 
-## 安装 & 注册
+## 1 分钟快速接入
+
+#### 第 1 步：安装
 
 ```bash
 yarn add element-ui  # npm install element-ui
 yarn add vue-ele-form # npm install vue-ele-form
 yarn add f-render # npm install f-render
 ```
 
+#### 第 2 步：注册
+
 ```js
 // vue-ele-form 的注册可参考：https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd
 import EleForm from "vue-ele-form";
@@ -85,11 +89,7 @@ Vue.use(EleForm);
 Vue.component("f-render", FRender);
 ```
 
-## 使用简介
-
-使用分为两个部分，首先是进行表单拖拽设计，然后再已纯表单的形式使用
-
-### 表单设计
+#### 第 3 步：使用
 
 ```html
 <template>
@@ -128,9 +128,16 @@ Vue.component("f-render", FRender);
 </script>
 ```
 
-### 表单使用
+## 用户模式
+
+我们把动态表单分为两个阶段：
+
+- 首先是设计阶段：通过拖拽设计表单；
+- 然后是用户阶段：将设计好的表单以纯表单的形式让用户填写。
+
+我们别分称这两个阶段的表单为设计模式和用户模式。设计模式的表单配置我们已经讲了，下面看用户模式下的表单配置：
 
-#### 基于 f-render 使用
+#### 基于 f-render 的配置
 
 通过属性 `pure`, 可以直接做为表单使用，其数据提交方式同 `vue-ele-form` 一样，具体可查看[文档](https://www.yuque.com/chaojie-vjiel/vbwzgu/zbu9mn)。
 
@@ -175,7 +182,7 @@ Vue.component("f-render", FRender);
 </script>
 ```
 
-#### 基于 vue-ele-form 使用
+#### 基于 vue-ele-form 的配置
 
 如果你的可视化设计和表单使用，不再一个系统，可以直接使用 `vue-ele-form`，不必安装 `f-render`，具体如下：
 
@@ -310,14 +317,8 @@ export default {
         }
         // ....
       },
-      // 默认值
-      // 如果在保存时，默认值未更改，则会被剔除，保持数据的简洁性
-      defaultData: {
-        max: 255
-      },
-      // 必须值
-      // 在保存时，必填值无论是否更改，都会保留，用作一些属性是必填的
-      requiredData: {
+      // 默认值，如果在配置文件里设置了，则每个组件都会携带
+      data: {
         name: "url"
       }
     },
@@ -331,9 +332,7 @@ export default {
           label: "默认值"
         }
       },
-      // 这两个和上面一个意思，分别是 common 的默认值和必填值
-      defaultData: {},
-      requiredData: {}
+      data: {}
     }
   }
 };
@@ -380,6 +379,32 @@ export default {
 />
 ```
 
+具体而言，如果想让每个 `input` 组件都携带 `clearable: true` 的属性，我们可以这样操作：
+
+```html
+<template>
+  <!-- 其它属性省略 -->
+  <!-- 将更改后的 comps 传递过去即可 -->
+  <f-render :comps="comps" />
+</template>
+
+<script>
+  import comps from "f-render/src/fixtures/comps";
+  // 查找 input 组件，当然你也可以看源码，直接查看索引
+  const inputIndex = comps.findIndex(item => item.type === "input");
+  // 更改 config.attrs.data 值即可
+  comps[inputIndex].config.attrs.data = { clearable: true };
+
+  export default {
+    data() {
+      return {
+        comps
+      };
+    }
+  };
+</script>
+```
+
 ### 样式定制化
 
 直接进行样式覆盖即可，注意不要加 `scoped`，否则覆盖不成功
@@ -440,7 +465,7 @@ props: {
   // 操作配置
   operations: {
     type: Array,
-    default: () => ["preview", "data", "code", "batch", "clear"]
+    default: () => ["preview", "data", "code", "batch", "clear", "save"]
   },
   // 是否在加载
   loading: Boolean,

demo.webp

@@ -1,6 +1,6 @@
 {
   "name": "f-render",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "private": false,
   "license": "MIT",
   "description": "f-render | 基于 ElementUI 的表单设计器",
@@ -17,7 +17,6 @@
   "dependencies": {
     "clipboard-copy": "^3.1.0",
     "clone": "^2.1.2",
-    "fast-deep-equal": "^3.1.3",
     "fuzzy": "^0.1.3",
     "indent-string": "^4.0.0",
     "lodash": "^4.17.20",
@@ -50,7 +49,7 @@
     "prettier": "^1.19.1",
     "standard-version": "^9.0.0",
     "vue": "^2.6.11",
-    "vue-ele-form": "^0.8.46",
+    "vue-ele-form": "^0.8.49",
     "vue-template-compiler": "^2.6.11"
   },
   "repository": {

package.json

@@ -35,7 +35,6 @@
 
 <script>
 const fuzzy = require("fuzzy");
-import { addFormItem } from "../../utils";
 
 export default {
   inject: ["frender"],
@@ -54,22 +53,22 @@ export default {
     };
   },
   methods: {
-    // 获取数据
-    getFormItem(config) {
-      return addFormItem({
-        config,
-        commonData: this.frender.formItemCommon.data
-      });
+    getFormItemByConfig({ type, label }) {
+      const formItemData = this.frender.getFormItemByType(type);
+      return {
+        label,
+        field: "key_" + Date.now(),
+        ...formItemData
+      };
     },
     // 双击添加表单
     handleDoubleClick(config) {
-      this.frender.updateFormItemList(
-        this.frender.formItemList.concat(this.getFormItem(config))
-      );
+      const formItemData = this.getFormItemByConfig(config);
+      this.frender.formItemList = [...this.frender.formItemList, formItemData];
     },
     // 拖拽后新增表单项
     handleAddFormItem(config) {
-      return this.getFormItem(config);
+      return this.getFormItemByConfig(config);
     }
   }
 };

src/components/left/index.vue

@@ -1,23 +1,22 @@
 <template>
   <ele-form-dialog
     v-model="formData"
-    :formDesc="batchFormDesc"
+    :formDesc="formDesc"
     labelPosition="left"
     width="800px"
     :dialogAttrs="{
       'close-on-click-modal': false,
       'append-to-body': true
     }"
-    :request-fn="handleAdd"
+    @request="handleAdd"
     :visible="visible"
-    @update:visible="$emit('change', $event)"
+    @update:visible="$emit('change')"
     title="批量添加表单项"
   ></ele-form-dialog>
 </template>
 
 <script>
 import _ from "lodash";
-import { addFormItem } from "../../../utils";
 
 export default {
   inject: ["frender"],
@@ -27,12 +26,22 @@ export default {
       default: false
     }
   },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.formData = {
+          type: "dynamic",
+          formItems: []
+        };
+      }
+    }
+  },
   computed: {
     // 字段出现的次数
     fieldCountObj() {
-      return _.countBy(this.frender.formItemList, o => o.field);
+      return _.countBy(this.frender.formItemList, o => String(o.field).trim());
     },
-    batchFormDesc() {
+    formDesc() {
       return {
         type: {
           type: "radio",
@@ -94,11 +103,26 @@ export default {
             validator: (rule, value, callback) => {
               let errorArr = [];
               if (Array.isArray(value) && value.length) {
+                // 当前输入表单的字段统计个数
+                const currentFieldCountObj = _.countBy(value, o =>
+                  String(o.field).trim()
+                );
+
+                // 合并后的字段统计个数
+                const mergedCountObj = Object.assign(
+                  {},
+                  currentFieldCountObj,
+                  _.mapValues(this.fieldCountObj, (val, field) => {
+                    return currentFieldCountObj[field]
+                      ? val + currentFieldCountObj[field]
+                      : val;
+                  })
+                );
+
                 // 字段不可重复
                 errorArr = value
                   .map((item, index) =>
-                    this.frender.formDesc[item.field] ||
-                    this.fieldCountObj[item.field] > 1
+                    mergedCountObj[item.field] > 1
                       ? `第${index + 1}行的 field 重复`
                       : null
                   )
@@ -140,23 +164,22 @@ export default {
   methods: {
     handleAdd({ formItems }) {
       try {
-        const newFormItems = formItems.map(item =>
-          addFormItem({
-            ...item,
-            config: this.frender.compsMap.get(item.type),
-            commonData: this.frender.formItemCommon.data
-          })
-        );
+        const newFormItems = formItems.map(({ field, label, type }) => ({
+          ...this.frender.getFormItemByType(type),
+          field: String(field).trim(),
+          label: String(label).trim()
+        }));
 
-        this.frender.updateFormItemList(
-          this.frender.formItemList.concat(newFormItems)
-        );
+        this.frender.formItemList = [
+          ...this.frender.formItemList,
+          ...newFormItems
+        ];
 
-        // 回复数据
         this.$message.success("添加成功");
+        // 回复数据
         this.formData = {
           type: "dynamic",
-          data: []
+          formItems: []
         };
 
         this.$emit("change", false);