tianheng-ui 0.1.69 → 0.1.71

package/packages/FormMaking/index.vue

@@ -13,24 +13,20 @@
           name="group-basic"
         >
           <draggable
-            tag="ul"
             :list="getBasicComponents"
             v-bind="{
               group: { name: 'people', pull: 'clone', put: false },
               sort: false
             }"
           >
-            <li
+            <div
               v-for="(item, index) in getBasicComponents"
-              class="fields-label"
-              :class="[[item.type]]"
+              :class="`fields-label ${item.type}`"
               :key="index"
             >
-              <a>
-                <i class="icon iconfont" :class="item.icon"></i>
-                <span>{{ item.name }}</span>
-              </a>
-            </li>
+              <i class="iconfont" :class="item.icon"></i>
+              <span>{{ item.name }}</span>
+            </div>
           </draggable>
         </el-collapse-item>
         <el-collapse-item
@@ -39,24 +35,20 @@
           name="group-advance"
         >
           <draggable
-            tag="ul"
             :list="getAdvanceComponents"
             v-bind="{
               group: { name: 'people', pull: 'clone', put: false },
               sort: false
             }"
           >
-            <li
+            <div
               v-for="(item, index) in getAdvanceComponents"
-              class="fields-label no-put"
-              :class="[[item.type]]"
+              :class="`fields-label ${item.type} no-put`"
               :key="index"
             >
-              <a>
-                <i class="icon iconfont" :class="item.icon"></i>
-                <span>{{ item.name }}</span>
-              </a>
-            </li>
+              <i class="iconfont" :class="item.icon"></i>
+              <span>{{ item.name }}</span>
+            </div>
           </draggable>
         </el-collapse-item>
         <el-collapse-item
@@ -65,27 +57,23 @@
           name="group-layout"
         >
           <draggable
-            tag="ul"
             :list="getLayoutComponents"
             v-bind="{
               group: { name: 'people', pull: 'clone', put: false },
               sort: false
             }"
           >
-            <li
+            <div
               v-for="(item, index) in getLayoutComponents"
-              class="fields-label"
-              :class="{
-                'no-put': ['alliance'].includes(item.type),
-                [item.type]: true
-              }"
+              :class="
+                `fields-label ${item.type} 
+                ${['alliance'].includes(item.type) ? 'no-put' : ''}`
+              "
               :key="index"
             >
-              <a>
-                <i class="icon iconfont" :class="item.icon"></i>
-                <span>{{ item.name }}</span>
-              </a>
-            </li>
+              <i class="iconfont" :class="item.icon"></i>
+              <span>{{ item.name }}</span>
+            </div>
           </draggable>
         </el-collapse-item>
         <el-collapse-item
@@ -94,31 +82,27 @@
           name="group-business"
         >
           <draggable
-            tag="ul"
             :list="getBusinessComponents"
             v-bind="{
               group: { name: 'people', pull: 'clone', put: false },
               sort: false
             }"
           >
-            <li
+            <div
               v-for="(item, index) in getBusinessComponents"
-              class="fields-label"
-              :class="[[item.type]]"
+              :class="`fields-label ${item.type}`"
               :key="index"
             >
-              <a>
-                <i class="icon iconfont" :class="item.icon"></i>
-                <span>{{ item.name }}</span>
-              </a>
-            </li>
+              <i class="iconfont" :class="item.icon"></i>
+              <span>{{ item.name }}</span>
+            </div>
           </draggable>
         </el-collapse-item>
       </el-collapse>
     </div>
 
     <!-- 中间视图区 -->
-    <div class="formMaking-drawing th-fiex_content">
+    <div class="th-fiex_content">
       <!-- 操作区 -->
       <widget-tools
         :baseConfig="baseConfig"
@@ -154,6 +138,10 @@
       >
       </widget-config>
     </div>
+
+    <!-- <th-dialog v-model="showGuide" title="配置" :showFooter="false">
+      <widget-guide></widget-guide>
+    </th-dialog> -->
   </div>
 </template>
 
@@ -163,6 +151,7 @@ import WidgetConfig from "./WidgetConfig";
 import WidgetTools from "./WidgetTools";
 import WidgetForm from "./WidgetForm";
 import GenerateForm from "./GenerateForm";
+import WidgetGuide from "./WidgetGuide.vue";
 import {
   basicComponents,
   advanceComponents,
@@ -181,7 +170,8 @@ export default {
     WidgetConfig,
     WidgetTools,
     WidgetForm,
-    GenerateForm
+    GenerateForm,
+    WidgetGuide
   },
   props: {
     config: Object,
@@ -229,7 +219,7 @@ export default {
     },
     advanceFields: {
       type: Array,
-      default: () => ["table", "tableH5", "list", "tabs"]
+      default: () => ["table", "list", "tabs"]
     },
     layoutFields: {
       type: Array,
@@ -238,7 +228,8 @@ export default {
     businessFields: {
       type: Array,
       default: () => ["blank", "descriptions", "workflow"]
-    }
+    },
+    guide: Boolean
   },
   data() {
     this.basicComponents = basicComponents;
@@ -256,7 +247,8 @@ export default {
         "group-advance",
         "group-layout",
         "group-business"
-      ]
+      ],
+      showGuide: this.guide
     };
   },
   computed: {
@@ -292,6 +284,12 @@ export default {
     },
     apiOptions(val) {
       this.handleNetworkConfig(true);
+    },
+    guide(val) {
+      this.showGuide = val;
+    },
+    showGuide(val) {
+      this.$emit("update:guide", val);
     }
   },
   created() {
@@ -353,7 +351,7 @@ export default {
             item.options.columns.forEach(e => {
               initList(e.list);
             });
-          } else if (item.type === "table" || item.type === "tableH5") {
+          } else if (item.type === "table" || item.type === "list") {
             initList(item.options.columns);
           } else if (item.type === "workflow") {
             initList(item.options.buttons);
@@ -497,14 +495,8 @@ export default {
       padding: 0 15px;
       z-index: 99;
     }
-    ul {
-      position: relative;
-      overflow: hidden;
-      padding: 5px;
-      margin: 0;
-    }
     .fields-label {
-      margin: 0 3px;
+      margin: 2px 3px;
       width: calc(50% - 6px);
       line-height: 26px;
       font-size: 12px;
@@ -513,9 +505,23 @@ export default {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      background: #f4f6fc;
       border: 1px solid #f4f6fc;
       box-sizing: border-box;
       transition: 0.25s;
+      cursor: move;
+
+      i {
+        margin-right: 6px;
+        margin-left: 8px;
+        font-size: 14px;
+        display: inline-block;
+        vertical-align: middle;
+      }
+      span {
+        display: inline-block;
+        vertical-align: middle;
+      }
 
       &:hover {
         color: $color-parimary-active !important;
@@ -525,32 +531,8 @@ export default {
           color: $color-parimary-active !important;
         }
       }
-
-      & > a {
-        color: #333;
-        display: block;
-        cursor: move;
-        background: #f4f6fc;
-        border: 1px solid #f4f6fc;
-        transition: 0.25s;
-
-        .icon {
-          margin-right: 6px;
-          margin-left: 8px;
-          font-size: 14px;
-          display: inline-block;
-          vertical-align: middle;
-        }
-
-        span {
-          display: inline-block;
-          vertical-align: middle;
-        }
-      }
     }
   }
-  .formMaking-drawing {
-  }
 }
 </style>
 
@@ -562,5 +544,9 @@ export default {
     line-height: 40px;
     background-color: #f5f7f9;
   }
+  .el-collapse-item__content {
+    padding: 2px 3px;
+    line-height: normal;
+  }
 }
 </style>

package/packages/FormMaking/styles/index.scss

@@ -66,7 +66,7 @@
     overflow: hidden;
     content: "";
     // 隐藏内容
-    a {
+    i {
       display: none;
     }
   }