tianheng-ui 0.0.56 → 0.0.57

package/packages/{formMaking → FormMaking}/FormConfig.vue

@@ -1,16 +1,19 @@
 <template>
   <div class="form-config-container">
     <el-form label-position="top">
+      <el-form-item label="UI">
+        <el-radio-group v-model="data.ui">
+          <el-radio-button label="element">Element</el-radio-button>
+          <el-radio-button label="vant" disabled>Vant</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
       <el-form-item label="表单标题">
         <el-input v-model="data.title"></el-input>
       </el-form-item>
 
-      <el-form-item label="标签对齐方式">
-        <el-radio-group v-model="data.labelPosition">
-          <el-radio-button label="left">左对齐</el-radio-button>
-          <el-radio-button label="right">右对齐</el-radio-button>
-          <el-radio-button label="top">顶部对齐</el-radio-button>
-        </el-radio-group>
+      <el-form-item label="表单宽度">
+        <el-input v-model="data.width"></el-input>
       </el-form-item>
 
       <el-form-item label="表单标签宽度">
@@ -22,6 +25,14 @@
         ></el-input-number>
       </el-form-item>
 
+      <el-form-item label="标签对齐方式">
+        <el-radio-group v-model="data.labelPosition">
+          <el-radio-button label="left">左对齐</el-radio-button>
+          <el-radio-button label="right">右对齐</el-radio-button>
+          <el-radio-button label="top">顶部对齐</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
       <el-form-item label="组件尺寸">
         <el-radio-group v-model="data.size">
           <el-radio-button label="medium">medium</el-radio-button>
@@ -29,6 +40,11 @@
           <el-radio-button label="mini">mini</el-radio-button>
         </el-radio-group>
       </el-form-item>
+
+      <el-form-item label="操作属性">
+        <el-checkbox v-model="data.disabled">禁用 </el-checkbox>
+        <el-checkbox v-model="data.hideLabel">隐藏标签 </el-checkbox>
+      </el-form-item>
     </el-form>
   </div>
 </template>

package/packages/FormMaking/GenerateForm.vue

@@ -0,0 +1,246 @@
+<template>
+  <div>
+    <el-form
+      class="generateForm"
+      :class="{ 'form-hideLabel': data.config.hideLabel }"
+      :style="{ width: formWidth }"
+      :label-suffix="data.config.labelSuffix"
+      :size="data.config.size"
+      :model="models"
+      :label-position="data.config.labelPosition"
+      :label-width="data.config.labelWidth + 'px'"
+      ref="generateForm"
+    >
+      <genetate-form-item
+        v-for="item in data.list"
+        :key="item.key"
+        :models.sync="models"
+        :widget="item"
+        :slotKeys="slotKeys"
+        :remote="remote"
+        :config="data.config"
+        :prop="item.type === 'grid' ? '' : item.model"
+        :componentsData="componentsData"
+        @input-change="onInputChange"
+      >
+        <template v-for="name in slotKeys" :slot="name">
+          <slot :name="name" />
+        </template>
+      </genetate-form-item>
+    </el-form>
+    <!-- <van-form
+      v-else
+      class="generateForm"
+      :class="{ 'form-hideLabel': data.config.hideLabel }"
+      :style="{ width: formWidth }"
+      style="margin: 0 auto;"
+      :label-align="data.config.labelPosition"
+      :label-width="data.config.labelWidth + 'px'"
+      ref="generateForm"
+    >
+      <genetate-form-item-h5
+        v-for="item in data.list"
+        :key="item.key"
+        :models.sync="models"
+        :widget="item"
+        :slotKeys="slotKeys"
+        :remote="remote"
+        :config="data.config"
+        :prop="item.type === 'grid' ? '' : item.model"
+        :componentsData="componentsData"
+        @input-change="onInputChange"
+      >
+        <template v-for="name in slotKeys" :slot="name">
+          <slot :name="name" />
+        </template>
+      </genetate-form-item-h5>
+    </van-form> -->
+  </div>
+</template>
+
+<script>
+import GenetateFormItem from "./GenerateFormItem";
+import GenetateFormItemH5 from "./GenerateFormItemH5";
+import Vue from "vue";
+import { Form } from "vant";
+Vue.use(Form);
+
+export default {
+  name: "th-generate-form",
+  components: { GenetateFormItem, GenetateFormItemH5 },
+  props: ["data", "remote", "value", "insite", "slotKeys", "client"],
+  data() {
+    return {
+      models: {},
+      componentsData: []
+    };
+  },
+  computed: {
+    formWidth() {
+      if (this.data.config.width) return this.data.config.width;
+      if (this.client === "mobile") return "375px";
+
+      return "";
+    }
+  },
+  created() {
+    this.generateModle(this.data.list);
+  },
+  mounted() {},
+  methods: {
+    generateModle(genList, modelObj) {
+      genList.map(item => {
+        if (item.type === "grid") {
+          item.columns.forEach(item => {
+            this.generateModle(item.list, modelObj);
+          });
+        } else if (item.type === "tabs") {
+          if (modelObj) {
+            this.$set(modelObj, item.model, {});
+            item.tabs.forEach(item2 => {
+              this.$set(modelObj[item.model], item2.value, {});
+              this.generateModle(item2.list, modelObj[item.model][item2.value]);
+            });
+          } else {
+            this.$set(this.models, item.model, {});
+            item.tabs.forEach(item2 => {
+              this.$set(this.models[item.model], item2.value, {});
+              this.generateModle(
+                item2.list,
+                this.models[item.model][item2.value]
+              );
+            });
+          }
+        } else if (item.type === "table" || item.type === "table_h5") {
+          if (modelObj) {
+            this.$set(
+              modelObj,
+              item.model,
+              JSON.parse(item.options.defaultValue || "[]")
+            );
+            this.generateModle(item.list, modelObj[item.model]);
+          } else {
+            this.$set(
+              this.models,
+              item.model,
+              JSON.parse(item.options.defaultValue || "[]")
+            );
+            this.generateModle(item.list, this.models[item.model]);
+          }
+        } else if (modelObj) {
+          if (!modelObj[item.model]) {
+            this.$set(modelObj, item.model, item.options.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))
+              );
+            }
+          }
+
+          this.generateRules(item);
+        }
+      });
+    },
+    generateRules(item) {
+      item.rules.forEach(rule => {
+        if (rule.pattern) {
+          rule.pattern = new RegExp(rule.pattern);
+        }
+      });
+    },
+    getData() {
+      return new Promise((resolve, reject) => {
+        this.$refs.generateForm.validate(valid => {
+          if (valid) {
+            resolve(this.models);
+          } else {
+            reject(new Error("表单数据校验失败").message);
+          }
+        });
+      });
+    },
+    reset() {
+      this.$refs.generateForm.resetFields();
+    },
+    onInputChange(value, field) {
+      this.$emit("on-change", field, value, this.models);
+    },
+    refresh() {}
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler(val) {
+        // this.generateModle(val.list);
+      }
+    },
+    value: {
+      deep: true,
+      handler(val) {
+        this.models = { ...this.models, ...val };
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.generateForm {
+  margin: 0 auto;
+  /deep/ .widget-form-list-table > .el-form-item__content {
+    .el-form-item__label {
+      display: none;
+    }
+    .el-form-item__content {
+      margin-left: 0 !important;
+    }
+  }
+
+  .form-hideLabel {
+    .el-form-item__label {
+      display: none;
+    }
+    .el-form-item__content {
+      margin-left: 0 !important;
+    }
+  }
+
+  .widget-form-list-filler {
+    margin-bottom: 0 !important;
+  }
+  .widget-form-list-image {
+    margin-bottom: 0 !important;
+  }
+
+  .tableH5 {
+    // 操作按钮布局
+    .tableH5-item > div {
+      display: flex;
+
+      .actions {
+        align-items: center;
+        justify-content: right;
+      }
+    }
+  }
+}
+</style>