tianheng-ui 0.1.44 → 0.1.46

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/FormMaking/GenerateForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="formConfig.config">
+  <div v-if="formConfig.config && showForm">
     <el-form
       class="generateForm"
       :class="{ isHideLabel: formConfig.config.hideLabel }"
@@ -14,11 +14,15 @@
       <genetate-form-item
         v-for="item in formConfig.list"
         :key="item.key"
-        :models.sync="models"
         :widget="item"
+        :model.sync="
+          item.type === 'grid' && !item.options.isEntity
+            ? models
+            : models[item.model]
+        "
+        :models="models"
         :slotKeys="slotKeys"
         :config="formConfig.config"
-        :prop="item.type === 'grid' ? '' : item.model"
         :componentsData="componentsData"
         @input-change="onInputChange"
         @button-submit="handleButtonSubmit"
@@ -97,7 +101,8 @@ export default {
       models: {},
       query: {},
       componentsData: [],
-      axios: null
+      axios: null,
+      showForm: false
     };
   },
   computed: {
@@ -128,113 +133,117 @@ export default {
     this.query = this.$route.query || {};
     localStorage.setItem("_TH_OauthConfig", JSON.stringify(this.oauthConfig));
     this.axios = Axios.init(this.oauthConfig);
-    this.generateModle(this.formConfig.list);
   },
-  mounted() {},
+  mounted() {
+    this.generateModle(this.formConfig.list, this.models);
+    console.log("models =>", this.models);
+    this.showForm = true;
+  },
   methods: {
     generateModle(genList, modelObj) {
       if (!genList) return;
       genList.map(item => {
         if (item.type === "grid") {
-          item.options.columns.forEach(item => {
-            this.generateModle(item.list, modelObj);
-          });
-        } else if (item.type === "tabs") {
-          if (modelObj) {
-            this.$set(modelObj, item.model, {});
-            item.options.columns.forEach(item2 => {
-              this.$set(modelObj[item.model], item2.value, {});
-              this.generateModle(item2.list, modelObj[item.model][item2.value]);
+          if (item.options.isEntity) {
+            const dic = {};
+            modelObj[item.model] = dic;
+
+            item.options.columns.forEach(item => {
+              this.generateModle(item.list, dic);
             });
           } else {
-            this.$set(this.models, item.model, {});
-            item.options.columns.forEach(item2 => {
-              this.$set(this.models[item.model], item2.value, {});
-              this.generateModle(
-                item2.list,
-                this.models[item.model][item2.value]
-              );
+            item.options.columns.forEach(item => {
+              this.generateModle(item.list, modelObj);
             });
           }
+        } else if (item.type === "tabs") {
+          const dic = {};
+          modelObj[item.model] = dic;
+
+          item.options.columns.forEach(item2 => {
+            dic[item2.value] = {};
+            this.generateModle(item2.list, dic[item2.value]);
+          });
         } else if (item.type === "table" || item.type === "tableH5") {
-          if (modelObj) {
-            this.$set(
-              modelObj,
-              item.model,
-              JSON.parse(item.options.defaultValue || "[]")
-            );
-            this.generateModle(item.options.columns, modelObj[item.model]);
-          } else {
-            this.$set(
-              this.models,
-              item.model,
-              JSON.parse(item.options.defaultValue || "[]")
-            );
-            this.generateModle(item.options.columns, this.models[item.model]);
-          }
-        } else if (modelObj) {
-          if (!modelObj[item.model]) {
-            this.$set(modelObj, item.model, item.options.defaultValue);
-          }
+          const arr = item.options.defaultValue
+            ? JSON.parse(item.options.defaultValue)
+            : "";
+          const dic = {};
+          modelObj[item.model] = arr || [dic];
 
+          this.generateModle(item.options.columns, dic);
+        }
+        // else if (modelObj) {
+        //   if (!modelObj[item.model]) {
+        //     this.$set(modelObj, item.model, item.options.defaultValue);
+        //   }
+        //   this.generateRules(item);
+        // }
+        else if (item.type === "blank") {
+          const value = eval(`this.value.${item.model}`);
+          const defaultValue = { String: "", Object: {}, Array: [] }[
+            item.options.defaultType
+          ];
+          modelObj[item.model] = value || defaultValue;
           this.generateRules(item);
         } else {
-          if (this.value && Object.keys(this.value).indexOf(item.model) >= 0) {
-            this.$set(this.models, item.model, this.value[item.model]);
-          } else {
-            if (item.type === "blank") {
-              this.$set(
-                this.models,
-                item.model,
-                item.options.defaultType === "String"
-                  ? ""
-                  : item.options.defaultType === "Object"
-                  ? {}
-                  : []
-              );
-            } else {
-              this.$set(
-                this.models,
-                item.model,
-                JSON.parse(JSON.stringify(item.options.defaultValue))
-              );
-            }
-          }
-
+          // const value = this.value ? eval(`this.value.${item.model}`) : "";
+          const value = this.value[item.model];
+          const defaultValue = JSON.parse(
+            JSON.stringify(item.options.defaultValue)
+          );
+          this.$set(modelObj, item.model, value || defaultValue);
           this.generateRules(item);
         }
       });
     },
     generateRules(item) {
-      if (!item.rules) item.rules = [];
-      item.rules.forEach(rule => {
-        if (rule.patternStr) {
-          rule.pattern = new RegExp(rule.patternStr);
-        }
-      });
+      // 配置正则校验
+      if (item.rules) {
+        item.rules.forEach(rule => {
+          if (rule.patternStr) {
+            rule.pattern = new RegExp(rule.patternStr);
+          }
+        });
+      } else {
+        item.rules = [];
+      }
+      // 配置必填项校验
+      if (item.options.required) {
+        item.rules.push({
+          required: true,
+          message: "必需项",
+          trigger: "change"
+        });
+      }
       this.hendleRemoteData(item);
     },
     hendleRemoteData(item) {
       if (!item.options.remote) return;
       if (item.type === "upload" || item.type === "button") return;
-      const func = this.formConfig.config.network[item.options.remoteFunc];
-      if (!func) return this.$message.warning("未知的请求接口，请检查配置信息");
+      const api = this.formConfig.config.network[item.options.remoteFunc];
+      if (!api) return this.$message.warning("未知的请求接口，请检查配置信息");
 
-      const remoteFunc = deepClone(func);
-      for (let key of Object.keys(remoteFunc.params)) {
-        remoteFunc.params[key] = this.models[key] || this.query[key] || null;
+      const requestConfig = {
+        url: api.url,
+        method: api.method,
+        headers: api.headers
+      };
+      const params = {};
+      for (let e of api.inParams) {
+        params[e.alias] =
+          eval(`this.models.${e.pAlias}`) ||
+          eval(`this.query.${e.pAlias}`) ||
+          null;
       }
-      if (remoteFunc.needPage) {
-        remoteFunc.params.pageNum = 1;
-        remoteFunc.params.pageSize = 20;
+      if (api.needPage) {
+        params.pageNum = 1;
+        params.pageSize = 20;
       }
+      if (["POST", "PUT"].includes(api.method)) requestConfig.data = params;
+      else requestConfig.params = requestConfig;
 
-      this.axios({
-        url: remoteFunc.url,
-        method: remoteFunc.method,
-        headers: remoteFunc.headers,
-        data: remoteFunc.params
-      }).then(res => {
+      this.axios(requestConfig).then(res => {
         const resultData = res.data.records ? res.data.records : res.data;
         item.options.remoteOptions = resultData.map(element => {
           return {
@@ -267,7 +276,7 @@ export default {
     },
     setConfig(json) {
       this.formConfig = json;
-      this.generateModle(this.formConfig.list);
+      this.generateModle(this.formConfig.list, this.models);
     }
   }
 };

package/packages/FormMaking/GenerateFormItem.vue

@@ -7,24 +7,17 @@
     }"
     :label="widget.options.hideLabel ? '' : widget.name"
     :label-width="labelWidth"
-    :prop="prop ? prop : widget.model"
-    :rules="
-      widget.options.required
-        ? [
-            ...widget.rules,
-            { required: true, message: '必需项', trigger: 'change' }
-          ]
-        : widget.rules
-    "
+    :prop="pModel ? `${pModel}.${widget.model}` : widget.model"
+    :rules="widget.rules"
     :ref="widget.model"
   >
     <component
       :is="compsData[widget.type].content"
-      :value.sync="dataModel"
       :widget="widget"
-      :config="config"
+      :model.sync="dataModel"
       :models="models"
-      :prop="prop"
+      :config="config"
+      :pModel="pModel"
       :slotKeys="slotKeys"
       :componentsData="componentsData"
       @button-submit="handleButtonSubmit"
@@ -37,39 +30,56 @@
 </template>
 
 <script>
-import { inputTypeDict, deepClone } from "./util/index";
+import { deepClone } from "./util/index";
 import { VueEditor } from "vue2-editor";
 import compsData from "./custom/register";
 import FmUpload from "./Upload";
 
 export default {
   name: "generate-form-item",
-  props: ["widget", "models", "prop", "slotKeys", "config", "componentsData"],
+  props: [
+    "widget",
+    "model",
+    "models",
+    "pModel",
+    "slotKeys",
+    "config",
+    "componentsData"
+  ],
   components: { FmUpload, VueEditor },
   data() {
     return {
       compsData: deepClone(compsData),
-      dataModel: this.models[this.widget.model]
+      dataModel: this.model
+      // dataModel: this.models[this.widget.model]
     };
   },
   watch: {
-    dataModel: {
-      deep: true,
-      handler(val) {
-        this.models[this.widget.model] = val;
-        this.$emit("update:models", {
-          ...this.models,
-          [this.widget.model]: val
-        });
-        this.$emit("input-change", val, this.widget.model);
-      }
+    model(val) {
+      this.dataModel = val;
     },
-    models: {
-      deep: true,
-      handler(val) {
-        this.dataModel = val[this.widget.model];
-      }
-    }
+    dataModel(val) {
+      this.$emit("update:model", val);
+    },
+    // dataModel: {
+    //   deep: true,
+    //   handler(val) {
+    //     console.log("watch dataModel =>", val);
+    //     this.models[this.widget.model] = val;
+    //     this.$emit("update:models", {
+    //       ...this.models,
+    //       [this.widget.model]: val
+    //     });
+    //     this.$emit("input-change", val, this.widget.model);
+    //   }
+    // },
+    // models: {
+    //   deep: true,
+    //   handler(val) {
+    //     console.log("watch models =>", val);
+    //     this.dataModel = val[this.widget.model];
+    //   }
+    // }
   },
   computed: {
     labelWidth() {
@@ -103,108 +113,8 @@ export default {
     });
   },
   methods: {
-    inputTypeDict,
-    handleTimePicker(vals) {
-      this.dataModel = [];
-      this.dataModel[0] = vals;
-      this.widget.options.endTimePickerOptions.minTime = vals;
-    },
-    handleRemove(file, fileList) {
-      this.dataModel = {
-        data: fileList,
-        remoteApi: this.widget.options.remoteApi
-      };
-    },
-    handleAvatar(res, file) {
-      this.dataModel = {
-        data: file,
-        remoteApi: this.widget.options.remoteApi
-      };
-    },
-    handleAvatarError() {
-      console.log("上传失败！");
-    },
-    handleTableAdd() {
-      let dic = {};
-      this.widget.list.forEach(item => {
-        if (item.type === "grid") {
-          for (let i = 0; i < item.options.columns.length; i++) {
-            const element = item.options.columns[i];
-            for (let j = 0; j < element.list.length; j++) {
-              const element2 = element.list[j];
-              dic[element2.model] = element2.options.defaultValue;
-            }
-          }
-        } else {
-          dic[item.model] = item.options.defaultValue;
-        }
-      });
-      this.dataModel.push(dic);
-    },
-    handleTableDelete(index) {
-      this.dataModel.splice(index, 1);
-    },
     handleButtonSubmit(val) {
       this.$emit("button-submit", val);
-    },
-
-    // 支撑 JavaScript 动态编译
-    handleEventAction(key) {
-      if (!key) return;
-
-      const eventScript = this.config.eventScript;
-      for (let i = 0; i < eventScript.length; i++) {
-        const element = eventScript[i];
-        if (element.key === key) {
-          const func = `(item,value)=>{${element.value}}`;
-          eval(func)(this.widget, this.dataModel);
-        }
-      }
-    },
-    // 显示组件
-    display(keys) {
-      if (!keys || keys.length === 0) return;
-      for (let i = 0; i < keys.length; i++) {
-        const key = keys[i];
-        if (this.componentsData[key]) {
-          // this.componentsData[key].options.hidden = false;
-          this.$set(this.componentsData[key].options, "hidden", false);
-          console.log("display =>", keys, this.componentsData);
-        }
-      }
-    },
-    // 隐藏组件
-    hide(keys) {
-      if (!keys || keys.length === 0) return;
-      for (let i = 0; i < keys.length; i++) {
-        const key = keys[i];
-        if (this.componentsData[key]) {
-          // this.componentsData[key].options.hidden = true;
-          this.$set(this.componentsData[key].options, "hidden", true);
-          console.log("hide =>", keys, this.componentsData);
-        }
-      }
-    },
-    // 设置数据，仅支持修改当前组件节点下的数据
-    setData(obj) {
-      const keys = Object.keys(obj);
-      for (let i = 0; i < keys.length; i++) {
-        const arr = keys[i].split(".");
-        if (arr.length === 1) {
-          const key = keys[i];
-          const value = obj[key];
-          this.$set(this.models, key, value);
-        } else {
-          const key = arr.pop();
-          const value = obj[keys[i]];
-          const path = arr.join(".");
-          this.$set(eval(`this.models.${path}`), key, value);
-        }
-      }
-    },
-    // 获取数据，仅支持获取当前组件节点下的数据
-    getData(obj) {
-      return this.models;
     }
   }
 };