fix: 处理 options 相关问题

Author: dream2023

.eslintrc.js

@@ -1,3 +1,4 @@
+const isProd = process.env.NODE_ENV === "production";
 module.exports = {
   root: true,
   env: {
@@ -8,12 +9,9 @@ module.exports = {
     parser: "babel-eslint"
   },
   rules: {
-    "vue/no-unused-components":
-      process.env.NODE_ENV === "production" ? "error" : "warn",
-    "no-console":
-      process.env.NODE_ENV === "production"
-        ? ["error", { allow: ["warn", "error"] }]
-        : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+    "no-unused-vars": isProd ? "error" : "warn",
+    "vue/no-unused-components": isProd ? "error" : "warn",
+    "no-console": isProd ? ["error", { allow: ["warn", "error"] }] : "off",
+    "no-debugger": isProd ? "warn" : "off"
   }
 };

README.md

@@ -10,7 +10,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [交流群](#%E4%BA%A4%E6%B5%81%E7%BE%A4)
 - [介绍](#%E4%BB%8B%E7%BB%8D)
 - [注意](#%E6%B3%A8%E6%84%8F)
@@ -394,12 +393,10 @@ export default {
 
 如果你或者你的公司需要`付费`源码讲解和答疑，可加我微信：`dream10nian`。当然也有也有免费的交流群，也是加这个微信。
 
-## f-render 不能做什么？
-
-由于 `vue-ele-form` 原因，
+## f-render 问答集锦
 
-- f-render 不支持嵌套的子表单
-- 布局由于使用了 `el-row` 和 `el-col`，所以仅支持行布局
+- [1、f-render 不能做什么？](https://www.yuque.com/chaojie-vjiel/vbwzgu/adz8q8#0nlfc)
+- [2、怎么实现 options URL 配置？](https://www.yuque.com/chaojie-vjiel/vbwzgu/adz8q8#gvS8c)
 
 ## Props 说明
 
@@ -449,11 +446,11 @@ props: {
   loading: Boolean,
 
   // 表单相关（pure 为 true 时）, 同 vue-ele-form
-  // https://www.yuque.com/chaojie-vjiel/vbwzgu/zbu9mn
-  value: Object,
+  // https://www.yuque.com/chaojie-vjiel/vbwzgu/dyw8a7
   requestFn: Function,
   isLoading: Boolean,
-  formError: Object
+  formError: Object,
+  // ....
 },
 ```
 

example/main.js

@@ -6,7 +6,13 @@ import EleForm from "vue-ele-form";
 import EleDynamic from "vue-ele-form-dynamic";
 import "element-ui/lib/theme-chalk/index.css";
 import "normalize.css";
+import axios from "axios";
 
+axios.interceptors.response.use(response => {
+  // 将响应结果返回
+  return response.data;
+});
+Vue.prototype.$axios = axios;
 Vue.config.productionTip = false;
 Vue.use(ElementUI);
 Vue.use(EleForm, {

package.json

@@ -23,7 +23,7 @@
     "lodash": "^4.17.20",
     "prismjs": "^1.21.0",
     "serialize-javascript": "^4.0.0",
-    "vue-ele-form-data-editor": "^0.1.5",
+    "vue-ele-form-data-editor": "^0.1.6",
     "vue-ele-form-dynamic": "^0.4.2",
     "vue-multipane": "^0.9.5",
     "vue-prism-editor": "^1.2.2",
@@ -35,6 +35,7 @@
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-prettier": "^6.0.0",
+    "axios": "^0.20.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-lodash": "^3.3.4",
     "core-js": "^3.6.5",
@@ -51,7 +52,7 @@
     "sass-loader": "^8.0.2",
     "standard-version": "^9.0.0",
     "vue": "^2.6.11",
-    "vue-ele-form": "^0.8.35",
+    "vue-ele-form": "^0.8.36",
     "vue-template-compiler": "^2.6.11"
   },
   "repository": {

src/components/left/index.vue

@@ -93,6 +93,7 @@ export default {
     color: #606266;
     border: 1px solid #ebeef5;
     overflow: hidden;
+    cursor: move;
     white-space: nowrap;
     display: inline-block;
     text-overflow: ellipsis;

src/components/main/main-content.vue

@@ -6,7 +6,7 @@
       @request-success="handleSuccess"
       ref="ele-form"
       :formDesc="frender.formDesc"
-      v-bind="frender.formConfig"
+      v-bind="frender.formBindConfig"
     >
       <template v-slot:form-content="{ props, formDesc, formErrorObj }">
         <vue-draggable

src/components/right/form-item-common.vue

@@ -1,18 +1,23 @@
 <template>
   <div>
-    <template v-if="currentFormItem">
+    <template v-if="currentFormItem && currentIndex !== null">
       <attrs-header
         url="https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf"
         title="通用配置"
         v-model="keyword"
       />
+      <!-- 这里不能用 v-model 会产生循环引用 -->
       <ele-form
-        v-model="formItemList[currentIndex]"
+        :formData="formItemList[currentIndex]"
         :formDesc="filteredFormDesc"
         :formAttrs="{ size: 'small' }"
         :isShowBackBtn="false"
         :isShowSubmitBtn="false"
         :rules="rules"
+        :options-fn="
+          frender.formBindConfig['options-fn'] ||
+            frender.formBindConfig['optionsFn']
+        "
         :span="20"
         labelPosition="top"
       >
@@ -85,6 +90,23 @@ export default {
       return changeFormDescLabel(formDesc);
     }
   },
+  watch: {
+    currentIndex: {
+      // 默认值在保存后会被删除
+      // 所以在回显的时候就会有问题，这里需要重新赋值
+      handler(currentIndex) {
+        if (currentIndex === null) return;
+        const currentFormItem = Object.assign(
+          {},
+          this.frender.formItemCommon.data,
+          this.currentFormItem
+        );
+
+        this.frender.updateCurrentFormItem(currentFormItem);
+      },
+      immediate: true
+    }
+  },
   data() {
     return {
       rules: {
@@ -125,15 +147,6 @@ export default {
         console.error(error);
       }
     }
-  },
-  watch: {
-    // 对 layout 特殊处理
-    // 如果发现 layout 为 undefined，则赋值为 24
-    "currentFormItem.layout"(val) {
-      if (!val) {
-        this.frender.updateCurrentFormItem({ layout: 24 });
-      }
-    }
   }
 };
 </script>

src/f-render.vue

@@ -17,11 +17,8 @@
 
   <!-- 2.使用 -->
   <ele-form
-    v-bind="formConfig"
+    v-bind="formBindConfig"
     :formData="value"
-    :requestFn="requestFn"
-    :isLoading="isLoading"
-    :formError="formError"
     v-on="$listeners"
     @input="$emit('input', value)"
     v-else-if="isShowPure"
@@ -30,7 +27,7 @@
 
 <script>
 // 全局组件
-import "./extends";
+import "./global-components";
 
 import FRenderLeft from "./components/left/index";
 import FRenderMain from "./components/main/index";
@@ -110,10 +107,7 @@ export default {
 
     // 表单相关（pure 为 true 时）, 同 vue-ele-form
     // https://www.yuque.com/chaojie-vjiel/vbwzgu/zbu9mn
-    value: Object,
-    requestFn: Function,
-    isLoading: Boolean,
-    formError: Object
+    value: Object
   },
   watch: {
     config: {
@@ -139,11 +133,21 @@ export default {
         }
         this.formConfig = formConfig;
         this.formItemList = objectToArr(formConfig.formDesc, "field");
+
+        // 当有数据时，选中第一个
+        if (this.formItemList.length) {
+          this.currentIndex = 0;
+        }
       },
       immediate: true
     }
   },
   computed: {
+    // 表单绑定的配置
+    // 融合了 $attrs
+    formBindConfig() {
+      return { ...this.changedFormConfig, ...this.$attrs };
+    },
     // 最终的返回结果
     changedFormConfig() {
       return {
@@ -196,7 +200,7 @@ export default {
       // formDesc 的数组形态（provide）
       formItemList: [],
       // 当前 formItem的 index 值（provide）
-      currentIndex: 0
+      currentIndex: null
     };
   },
   methods: {