tianheng-ui 0.0.45 → 0.0.48

package/package.json

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

package/packages/formMaking/Container.vue

@@ -80,9 +80,6 @@
                     sort: false,
                     ghostClass: 'ghost'
                   }"
-                  @end="handleMoveEnd"
-                  @start="handleMoveStart"
-                  :move="handleMove"
                 >
                   <template v-for="(item, index) in layoutComponents">
                     <li
@@ -150,7 +147,8 @@
                 ref="widgetForm"
                 :data="widgetForm"
                 :select.sync="widgetFormSelect"
-              ></widget-form>
+              >
+              </widget-form>
             </el-main>
           </el-container>
 
@@ -200,19 +198,11 @@
               :data="widgetForm"
               :value="widgetModels"
               :remote="remoteFuncs"
+              :slotKeys="slotKeys"
               ref="generateForm"
             >
-              <template v-slot:blank="scope">
-                Width
-                <el-input
-                  v-model="scope.model.blank.width"
-                  style="width: 100px"
-                ></el-input>
-                Height
-                <el-input
-                  v-model="scope.model.blank.height"
-                  style="width: 100px"
-                ></el-input>
+              <template v-for="name in slotKeys" :slot="name">
+                <slot :name="name" />
               </template>
             </generate-form>
 
@@ -302,7 +292,7 @@
 import ace from "ace-builds";
 import "ace-builds/src-min-noconflict/mode-json";
 import "ace-builds/src-min-noconflict/mode-html";
-import htmlWorkerUrl from  "file-loader!ace-builds/src-min-noconflict/worker-html";
+import htmlWorkerUrl from "file-loader!ace-builds/src-min-noconflict/worker-html";
 ace.config.setModuleUrl("ace/mode/html_worker", htmlWorkerUrl);
 import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";
 ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl);
@@ -316,8 +306,8 @@ import CusDialog from "./CusDialog";
 import GenerateForm from "./GenerateForm";
 import {
   basicComponents,
-  layoutComponents,
-  advanceComponents
+  advanceComponents,
+  layoutComponents
 } from "./componentsConfig.js";
 // import {loadJs, loadCss} from '../util/index.js'
 import request from "./util/request";
@@ -374,11 +364,11 @@ export default {
     },
     advanceFields: {
       type: Array,
-      default: () => ["blank", "imgupload", "editor", "cascader"]
+      default: () => ["blank", "imgupload", "editor", "cascader", "table"]
     },
     layoutFields: {
       type: Array,
-      default: () => ["grid"]
+      default: () => ["grid", "tabs", "divider"]
     },
     remoteApis: {
       type: Array,
@@ -428,7 +418,7 @@ export default {
           console.log("callback", response, file, fileList);
         }
       },
-      widgetModels: {},
+      widgetModels: {table:[{name:'这是'}]},
       blank: "",
       htmlTemplate: "",
       vueTemplate: "",
@@ -445,7 +435,8 @@ export default {
     "size": "small"
   }
 }`,
-      codeActiveName: "vue"
+      codeActiveName: "vue",
+      slotKeys: []
     };
   },
   mounted() {
@@ -472,9 +463,6 @@ export default {
     //     };
     //   });
     // },
-    handleGoGithub() {
-      window.location.href = "https://github.com/GavinZhuLei/vue-form-making";
-    },
     handleConfigSelect(value) {
       this.configTab = value;
     },
@@ -489,6 +477,7 @@ export default {
     },
     handlePreview() {
       // console.log(this.widgetForm);
+      this.slotKeys = Object.keys(this.$slots);
       this.previewVisible = true;
     },
     handleTest() {

package/packages/formMaking/GenerateForm.vue

@@ -9,62 +9,20 @@
       :label-position="data.config.labelPosition"
       :label-width="data.config.labelWidth + 'px'"
     >
-      <template v-for="item in data.list">
-        <template v-if="item.type == 'grid'">
-          <el-row
-            :key="item.key"
-            type="flex"
-            :gutter="item.options.gutter ? item.options.gutter : 0"
-            :justify="item.options.justify"
-            :align="item.options.align"
-          >
-            <el-col
-              v-for="(col, colIndex) in item.columns"
-              :key="colIndex"
-              :span="col.span"
-            >
-              <template v-for="citem in col.list">
-                <el-form-item
-                  v-if="citem.type == 'blank'"
-                  :label="citem.name"
-                  :prop="citem.model"
-                  :key="citem.key"
-                >
-                  <slot :name="citem.model" :model="models"></slot>
-                </el-form-item>
-                <genetate-form-item
-                  v-else
-                  :key="citem.key"
-                  :models.sync="models"
-                  :remote="remote"
-                  :rules="rules"
-                  :widget="citem"
-                  @input-change="onInputChange"
-                >
-                </genetate-form-item>
-              </template>
-            </el-col>
-          </el-row>
+      <genetate-form-item
+        v-for="item in data.list"
+        :key="item.key"
+        :models.sync="models"
+        :rules="rules"
+        :widget="item"
+        :slotKeys="slotKeys"
+        @input-change="onInputChange"
+        :remote="remote"
+      >
+        <template v-for="name in slotKeys" :slot="name">
+          <slot :name="name" />
         </template>
-
-        <template v-else-if="item.type == 'blank'">
-          <el-form-item :label="item.name" :prop="item.model" :key="item.key">
-            <slot :name="item.model" :model="models"></slot>
-          </el-form-item>
-        </template>
-
-        <template v-else>
-          <genetate-form-item
-            :key="item.key"
-            :models.sync="models"
-            :rules="rules"
-            :widget="item"
-            @input-change="onInputChange"
-            :remote="remote"
-          >
-          </genetate-form-item>
-        </template>
-      </template>
+      </genetate-form-item>
     </el-form>
   </div>
 </template>
@@ -75,13 +33,13 @@ import GenetateFormItem from "./GenerateFormItem";
 export default {
   name: "fm-generate-form",
   components: {
-    GenetateFormItem,
+    GenetateFormItem
   },
-  props: ["data", "remote", "value", "insite"],
+  props: ["data", "remote", "value", "insite", "slotKeys"],
   data() {
     return {
       models: {},
-      rules: {},
+      rules: {}
     };
   },
   created() {
@@ -89,66 +47,100 @@ export default {
   },
   mounted() {},
   methods: {
-    generateModle(genList) {
-      for (let i = 0; i < genList.length; i++) {
-        if (genList[i].type === "grid") {
-          genList[i].columns.forEach((item) => {
-            this.generateModle(item.list);
+    generateModle(genList, obj) {
+      genList.map(item => {
+        if (item.type === "grid") {
+          item.columns.forEach(item => {
+            this.generateModle(item.list, obj);
           });
+        } else if (item.type === "tabs") {
+          if (obj) {
+            obj[item.model] = {};
+            item.tabs.forEach(item2 => {
+              obj[item.model][item2.value] = {};
+              this.generateModle(
+                item2.list,
+                obj[item.model][item2.value]
+              );
+            });
+          } else {
+            this.models[item.model] = {};
+            item.tabs.forEach(item2 => {
+              this.models[item.model][item2.value] = {};
+              this.generateModle(
+                item2.list,
+                this.models[item.model][item2.value]
+              );
+            });
+          }
+        } else if (obj) {
+          obj[item.model] = JSON.parse(
+            JSON.stringify(item.options.defaultValue || "")
+          );
         } else {
-          if (
-            this.value &&
-            Object.keys(this.value).indexOf(genList[i].model) >= 0
-          ) {
-            this.models[genList[i].model] = this.value[genList[i].model];
+          if (this.value && Object.keys(this.value).indexOf(item.model) >= 0) {
+            this.models[item.model] = this.value[item.model];
           } else {
-            if (genList[i].type === "blank") {
+            if (item.type === "blank") {
               this.$set(
                 this.models,
-                genList[i].model,
-                genList[i].options.defaultType === "String"
+                item.model,
+                item.options.defaultType === "String"
                   ? ""
-                  : genList[i].options.defaultType === "Object"
+                  : item.options.defaultType === "Object"
                   ? {}
                   : []
               );
             } else {
-              this.models[genList[i].model] = genList[i].options.defaultValue;
+              this.models[item.model] = JSON.parse(
+                JSON.stringify(item.options.defaultValue || "")
+              );
             }
           }
 
-          if (this.rules[genList[i].model]) {
-            this.rules[genList[i].model] = [
-              ...this.rules[genList[i].model],
-              ...genList[i].rules.map((item) => {
-                if (item.pattern) {
-                  return { ...item, pattern: new RegExp(item.pattern) };
-                } else {
-                  return { ...item };
-                }
-              }),
-            ];
+          if (item.type === "table") {
+            this.generateRules(item);
+            item.list.forEach(item2 => {
+              this.generateRules(item2);
+            });
           } else {
-            this.rules[genList[i].model] = [
-              ...genList[i].rules.map((item) => {
-                if (item.pattern) {
-                  return { ...item, pattern: new RegExp(item.pattern) };
-                } else {
-                  return { ...item };
-                }
-              }),
-            ];
+            this.generateRules(item);
           }
         }
+      });
+      console.log(this.models)
+    },
+    generateRules(item) {
+      if (this.rules[item.model]) {
+        this.rules[item.model] = [
+          ...this.rules[item.model],
+          ...item.rules.map(rule => {
+            if (rule.pattern) {
+              return { ...rule, pattern: new RegExp(rule.pattern) };
+            } else {
+              return { ...rule };
+            }
+          })
+        ];
+      } else {
+        this.rules[item.model] = [
+          ...item.rules.map(rule => {
+            if (rule.pattern) {
+              return { ...rule, pattern: new RegExp(rule.pattern) };
+            } else {
+              return { ...rule };
+            }
+          })
+        ];
       }
     },
     getData() {
       return new Promise((resolve, reject) => {
-        this.$refs.generateForm.validate((valid) => {
+        this.$refs.generateForm.validate(valid => {
           if (valid) {
             resolve(this.models);
           } else {
-            reject(new Error('表单数据校验失败').message);
+            reject(new Error("表单数据校验失败").message);
           }
         });
       });
@@ -159,23 +151,23 @@ export default {
     onInputChange(value, field) {
       this.$emit("on-change", field, value, this.models);
     },
-    refresh() {},
+    refresh() {}
   },
   watch: {
     data: {
       deep: true,
       handler(val) {
-        this.generateModle(val.list);
-      },
+        // this.generateModle(val.list);
+      }
     },
     value: {
       deep: true,
       handler(val) {
         console.log(JSON.stringify(val));
         this.models = { ...this.models, ...val };
-      },
-    },
-  },
+      }
+    }
+  }
 };
 </script>