tianheng-ui 0.0.96 → 0.0.99

package/package.json

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

package/packages/FormMaking/GenerateFormItem.vue

@@ -388,7 +388,8 @@
         :style="{
           width: widget.options.width,
           height: widget.options.height,
-          borderRadius: widget.options.borderRadius
+          borderRadius: widget.options.borderRadius,
+          verticalAlign:'middle'
         }"
         :src="item.url"
         :fit="widget.options.fit"

package/packages/FormMaking/WidgetFormItem.vue

@@ -2,7 +2,7 @@
   <el-form-item
     class="widget-view"
     :class="{
-      active: selectWidget.key == widget.key,
+      active: selectWidget.model == widget.model,
       is_req: widget.options.required,
       hideLabel: widget.options.hideLabel,
       'widget-col': ['grid', 'tabs', 'table', 'table_h5', 'alliance'].includes(
@@ -25,7 +25,7 @@
     ></component>
 
     <div
-      v-if="selectWidget.key == widget.key"
+      v-if="selectWidget.model == widget.model"
       class="widget-actions"
       :class="{
         'widget-actions-col': [
@@ -117,36 +117,66 @@ export default {
     },
 
     handleWidgetClone(index) {
-      const key =
-        Date.parse(new Date().toString()) +
-        "_" +
-        Math.ceil(Math.random() * 99999);
-      let cloneData = {
-        ...this.widgetArray.list[index],
-        options: {
-          ...this.widgetArray.list[index].options,
-          remoteFunc: "func_" + key
-        },
-        key,
-        model: this.widgetArray.list[index].type + "_" + key,
-        rules: this.widgetArray.list[index].rules || []
+      const data = JSON.parse(JSON.stringify(this.widgetArray.list[index]));
+
+      const initKey = item => {
+        const key =
+          Date.parse(new Date().toString()) +
+          "_" +
+          Math.ceil(Math.random() * 99999);
+
+        item.options.remoteFunc = `func__${key}`;
+        item.key = key;
+        item.model = item.type + "_" + key;
+
+        if (["table", "table_h5"].includes(item.type)) {
+          item.list.forEach(element => {
+            initKey(element);
+          });
+        }
+        if (["tabs"].includes(item.type)) {
+          item.tabs.forEach(tab => {
+            tab.forEach(element => {
+              initKey(element);
+            });
+          });
+        }
+        if (["grid"].includes(item.type)) {
+          item.columns.forEach(column => {
+            column.list.forEach(element => {
+              initKey(element);
+            });
+          });
+        }
       };
+      initKey(data);
 
-      if (
-        this.widgetArray.list[index].type === "radio" ||
-        this.widgetArray.list[index].type === "checkbox" ||
-        this.widgetArray.list[index].type === "select"
-      ) {
-        cloneData = {
-          ...cloneData,
-          options: {
-            ...cloneData.options,
-            options: cloneData.options.options.map(item => ({ ...item }))
-          }
-        };
-      }
+      // let cloneData = {
+      //   ...JSON.parse(JSON.stringify(this.widgetArray.list[index])),
+      //   options: {
+      //     ...this.widgetArray.list[index].options,
+      //     remoteFunc: "func_" + key
+      //   },
+      //   key,
+      //   model: this.widgetArray.list[index].type + "_" + key,
+      //   rules: this.widgetArray.list[index].rules || []
+      // };
+
+      // if (
+      //   this.widgetArray.list[index].type === "radio" ||
+      //   this.widgetArray.list[index].type === "checkbox" ||
+      //   this.widgetArray.list[index].type === "select"
+      // ) {
+      //   cloneData = {
+      //     ...cloneData,
+      //     options: {
+      //       ...cloneData.options,
+      //       options: cloneData.options.options.map(item => ({ ...item }))
+      //     }
+      //   };
+      // }
 
-      this.widgetArray.list.splice(index, 0, cloneData);
+      this.widgetArray.list.splice(index, 0, data);
 
       this.$nextTick(() => {
         this.selectWidget = this.widgetArray.list[index + 1];

package/packages/FormMaking/custom/config.js

@@ -442,16 +442,6 @@ export const basicComponents = [
       onChange: ""
     }
   },
-  {
-    name: "填充物",
-    type: "filler",
-    icon: "icon-ic",
-    options: {
-      defaultValue: "",
-      width: "100%",
-      height: "20px"
-    }
-  },
   {
     name: "图片",
     type: "image",
@@ -715,7 +705,20 @@ export const layoutComponents = [
       hideLabel: true
     }
   },
-
+  {
+    name: "填充物",
+    type: "filler",
+    icon: "icon-ic",
+    options: {
+      defaultValue: "",
+      width: "100%",
+      height: "20px",
+      labelWidth: 100,
+      isLabelWidth: false,
+      hideLabel: true,
+      hidden: false,
+    }
+  },
   {
     name: "分割线",
     type: "divider",

package/packages/FormMaking/custom/configs/filler.vue

@@ -31,6 +31,11 @@
       <el-form-item label="高度">
         <el-input v-model="widget.options.height"></el-input>
       </el-form-item>
+
+      <el-form-item label="操作属性">
+        <el-checkbox v-model="widget.options.hidden">隐藏组件 </el-checkbox>
+        <el-checkbox v-model="widget.options.hideLabel">隐藏标签 </el-checkbox>
+      </el-form-item>
     </el-form>
   </div>
 </template>

package/packages/FormMaking/custom/index.js

@@ -15,7 +15,6 @@ const basicComponents = [
   "slider",
   "number",
   "rate",
-  "filler",
   "image",
   "upload",
   "editor",
@@ -24,7 +23,7 @@ const basicComponents = [
 
 const advanceComponents = ["table", "table_h5", "tabs", "blank"];
 
-const layoutComponents = ["grid", "alliance", "divider"];
+const layoutComponents = ["grid", "alliance", "filler", "divider"];
 
 module.exports = {
   basicComponents,

package/packages/FormMaking/custom/items/grid.vue

@@ -1,6 +1,7 @@
 <template>
+  <!-- widget.key -->
   <th-row
-    :class="{ active: selectWidget.key == widget.key }"
+    :class="{ active: selectWidget.model == widget.model }"
     :gutter="widget.options.gutter ? widget.options.gutter : 0"
     :justify="widget.options.justify"
     :align="widget.options.align"

package/packages/FormMaking/custom/items/image.vue

@@ -34,7 +34,7 @@
       :style="selfStyle"
       :src="item.url"
       :fit="widget.options.fit"
-      :preview-src-list="widget.options.defaultValue"
+      :preview-src-list="imagePreviewList"
       :lazy="widget.options.isLazy"
     ></el-image>
   </div>
@@ -53,7 +53,15 @@ export default {
       style.width = this.widget.options.width;
       style.height = this.widget.options.height;
       style.borderRadius = `${this.widget.options.borderRadius || 0}`;
+      style.verticalAlign = "middle";
       return style;
+    },
+    imagePreviewList() {
+      const list = [];
+      this.widget.options.defaultValue.forEach(item => {
+        list.push(item.url);
+      });
+      return list;
     }
   }
 };

package/packages/FormMaking/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="fm-container">
-    <el-container v-if="Object.keys(widgetFormData.config).length" class="container-box">
+    <el-container
+      v-if="Object.keys(widgetFormData.config).length"
+      class="container-box"
+    >
       <el-main>
         <el-container>
           <!-- 左侧字段区 -->
@@ -441,7 +444,6 @@ export default {
         "slider",
         "text",
         "button",
-        "filler",
         "image",
         "upload",
         "editor",
@@ -454,7 +456,7 @@ export default {
     },
     layoutFields: {
       type: Array,
-      default: () => ["grid", "alliance", "divider"]
+      default: () => ["grid", "filler", "divider"]
     },
     remoteApis: {
       type: Array,
@@ -463,8 +465,8 @@ export default {
   },
   data() {
     this.basicComponents = basicComponents;
-    this.layoutComponents = layoutComponents;
     this.advanceComponents = advanceComponents;
+    this.layoutComponents = layoutComponents;
     this.baseConfig = JSON.parse(JSON.stringify(baseConfig));
     return {
       widgetFormData: this.data,
@@ -547,13 +549,10 @@ export default {
       this.baseConfig,
       this.widgetFormData.config
     );
-    if (
-      this.widgetFormData.list &&
-      this.widgetFormData.list.length
-    ) {
+    if (this.widgetFormData.list && this.widgetFormData.list.length) {
       this.widgetFormSelect = this.widgetFormData.list[0];
-    }else {
-      this.widgetFormData.list = []
+    } else {
+      this.widgetFormData.list = [];
     }
   },
   mounted() {},