tianheng-ui 0.1.10 → 0.1.12

package/packages/FormMaking/styles/index.scss

@@ -1,7 +1,7 @@
 $primary-color: #409eff;
 $primary-background-color: #ecf5ff;
 
-.fm-container {
+.formMaking {
   height: 100%;
 
   *,
@@ -32,7 +32,7 @@ $primary-background-color: #ecf5ff;
     vertical-align: middle;
   }
 
-  .form-hideLabel {
+  .isHideFormLabel {
     .el-form-item__label {
       display: none;
     }
@@ -100,32 +100,11 @@ $primary-background-color: #ecf5ff;
     border-left: 1px solid #e0e0e0;
     border-right: 1px solid #e0e0e0;
 
-    .el-header {
-      display: flex;
-      align-items: center;
-      height: 45px !important;
-      line-height: 45px !important;
-      // font-size: 18px;
-      border-bottom: solid 2px #e4e7ed;
-      text-align: right;
-    }
-
     .el-main {
       padding: 0;
       position: relative;
       background: #fafafa;
     }
-
-    .client {
-      flex: 1;
-      text-align: left;
-      .el-button {
-        color: #333;
-      }
-      .active {
-        color: #409eff;
-      }
-    }
   }
 
   // 左侧字段区
@@ -160,17 +139,24 @@ $primary-background-color: #ecf5ff;
       margin: 1%;
       color: #333;
       border: 1px solid #f4f6fc;
+      transition: 0.25s;
 
       &:hover {
-        color: $primary-color;
+        color: $primary-color !important;
         border: 1px dashed $primary-color;
+
+        a {
+          color: $primary-color !important;
+        }
       }
 
       & > a {
+        color: #333;
         display: block;
         cursor: move;
         background: #f4f6fc;
         border: 1px solid #f4f6fc;
+        transition: 0.25s;
 
         .icon {
           margin-right: 6px;
@@ -209,12 +195,18 @@ $primary-background-color: #ecf5ff;
       }
     }
 
-    .widget-form-list {
-      // margin: 10px;
+    .draggable {
+      height: 100%;
+    }
+    .draggable-list {
       min-height: 100%;
       background: #fff;
       border: 1px dashed #999;
 
+      .widget-form-list-item {
+        position: relative;
+      }
+
       .widget-col-list {
         min-height: 50px;
         border: 1px dashed #ccc;
@@ -260,7 +252,7 @@ $primary-background-color: #ecf5ff;
         }
       }
 
-      .widget-view {
+      .widgetFormItem {
         padding-bottom: 18px;
         position: relative;
         border: 1px dashed rgba(170, 170, 170, 0.7);
@@ -271,7 +263,7 @@ $primary-background-color: #ecf5ff;
           position: unset;
         }
 
-        &.is_req {
+        &.isRequired {
           .el-form-item__label::before {
             content: "*";
             color: #f56c6c;
@@ -309,7 +301,7 @@ $primary-background-color: #ecf5ff;
         }
       }
 
-      .widget-col {
+      .isLayout {
         padding-bottom: 0;
         padding: 5px;
         margin-left: 2px !important;
@@ -333,10 +325,6 @@ $primary-background-color: #ecf5ff;
           }
         }
 
-        .el-col {
-          // min-height: 50px;
-        }
-
         &.ghost {
           background: #f56c6c;
           border: 2px solid #f56c6c;
@@ -354,215 +342,215 @@ $primary-background-color: #ecf5ff;
         }
       }
 
-      .widget-table {
-        padding-bottom: 0;
-        padding: 5px;
-        background-color: rgba(253, 246, 236, 0.3);
-
-        .widget-table-wrapper {
-          min-height: 50px;
-          background: #fff;
-          display: flex;
-          justify-content: flex-start;
-
-          .widget-table-row {
-            td {
-              border-bottom: 0;
-            }
-          }
-
-          .widget-table-left {
-            width: 51px;
-            border-left: 1px solid #ebeef5;
-            border-right: 1px solid #ebeef5;
-            border-top: 1px solid #ebeef5;
-            flex: none;
-          }
-
-          .widget-table-view {
-            border: 1px solid #ebeef5;
-            width: 200px;
-            float: left;
-            height: 100%;
-            position: relative;
-            display: block;
-
-            .el-table {
-              height: 100%;
-            }
-
-            &.is_req {
-              .el-form-item__label::before {
-                content: "*";
-                color: #f56c6c;
-                margin-right: 4px;
-              }
-            }
-
-            &::after {
-              position: absolute;
-              left: 0;
-              right: 0;
-              top: 0;
-              bottom: 0;
-              display: block;
-              content: "";
-            }
-
-            &::before {
-              display: none;
-            }
-
-            &:hover {
-              background: $primary-background-color;
-              outline: 1px solid $primary-color;
-              outline-offset: -1px;
-
-              &.active {
-                // outline: 1px solid $primary-color;
-                border: 1px solid $primary-color;
-                outline: 1px solid $primary-color;
-                outline-offset: -1px;
-              }
-
-              .widget-view-drag {
-                display: block;
-              }
-            }
-
-            &.active {
-              outline: 1px solid $primary-color;
-              border: 1px solid $primary-color;
-              outline-offset: -1px;
-            }
-
-            &.ghost {
-              background: #f56c6c;
-              outline-width: 0;
-              width: 5px !important;
-              box-sizing: border-box;
-              font-size: 0;
-              content: "";
-              overflow: hidden;
-              padding: 0;
-              position: relative;
-              outline: none !important;
-              border: 0 !important;
-
-              &::after {
-                background: #f56c6c;
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
-                z-index: 9999;
-                content: "";
-                outline: none;
-              }
-            }
-          }
-
-          .widget-table-content {
-            width: 100%;
-            // border: 1px dashed #ccc;
-            outline: 1px dashed #ccc;
-            background: #fff;
-            flex: 1;
-            margin: 0 1px;
-            overflow: auto;
-
-            & > div {
-              height: 100%;
-            }
-
-            .widget-table-col {
-              height: 100%;
-
-              .ghost {
-                background: #f56c6c;
-                // border: 2px solid #F56C6C;
-                position: relative;
-                content: "";
-                float: left;
-                height: 100%;
-                width: 5px !important;
-                list-style: none;
-                font-size: 0;
-                overflow: hidden;
-                outline: none;
-
-                &::after {
-                  background: #f56c6c;
-                  position: absolute;
-                  top: 0;
-                  left: 0;
-                  bottom: 0;
-                  right: 0;
-                  z-index: 9999;
-                  content: "";
-                  outline: none;
-                }
-              }
-            }
-          }
-        }
-
-        &.active {
-          outline: 2px solid #e6a23c;
-          border: 1px solid #e6a23c;
-        }
-
-        &:hover {
-          background: #fdf6ec;
-          outline: 1px solid #e6a23c;
-          outline-offset: 0px;
-
-          &.active {
-            outline: 2px solid #e6a23c;
-            border: 1px solid #e6a23c;
-            outline-offset: 0;
-          }
-        }
-
-        .widget-view-action.widget-col-action {
-          background: #e6a23c;
-        }
-
-        .widget-view-drag.widget-col-drag {
-          background: #e6a23c;
-        }
-
-        &::after {
-          display: none;
-        }
-
-        &.ghost {
-          background: #f56c6c;
-          outline-width: 0;
-          height: 5px;
-          box-sizing: border-box;
-          font-size: 0;
-          content: "";
-          overflow: hidden;
-          padding: 0;
-          position: relative;
-          outline: none;
-          border: 0;
-
-          &::after {
-            background: #f56c6c;
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            content: "";
-            display: block;
-            z-index: 999;
-          }
-        }
-      }
+      // .widget-table {
+      //   padding-bottom: 0;
+      //   padding: 5px;
+      //   background-color: rgba(253, 246, 236, 0.3);
+
+      //   .widget-table-wrapper {
+      //     min-height: 50px;
+      //     background: #fff;
+      //     display: flex;
+      //     justify-content: flex-start;
+
+      //     .widget-table-row {
+      //       td {
+      //         border-bottom: 0;
+      //       }
+      //     }
+
+      //     .widget-table-left {
+      //       width: 51px;
+      //       border-left: 1px solid #ebeef5;
+      //       border-right: 1px solid #ebeef5;
+      //       border-top: 1px solid #ebeef5;
+      //       flex: none;
+      //     }
+
+      //     .widget-table-view {
+      //       border: 1px solid #ebeef5;
+      //       width: 200px;
+      //       float: left;
+      //       height: 100%;
+      //       position: relative;
+      //       display: block;
+
+      //       .el-table {
+      //         height: 100%;
+      //       }
+
+      //       &.is_req {
+      //         .el-form-item__label::before {
+      //           content: "*";
+      //           color: #f56c6c;
+      //           margin-right: 4px;
+      //         }
+      //       }
+
+      //       &::after {
+      //         position: absolute;
+      //         left: 0;
+      //         right: 0;
+      //         top: 0;
+      //         bottom: 0;
+      //         display: block;
+      //         content: "";
+      //       }
+
+      //       &::before {
+      //         display: none;
+      //       }
+
+      //       &:hover {
+      //         background: $primary-background-color;
+      //         outline: 1px solid $primary-color;
+      //         outline-offset: -1px;
+
+      //         &.active {
+      //           // outline: 1px solid $primary-color;
+      //           border: 1px solid $primary-color;
+      //           outline: 1px solid $primary-color;
+      //           outline-offset: -1px;
+      //         }
+
+      //         .widget-view-drag {
+      //           display: block;
+      //         }
+      //       }
+
+      //       &.active {
+      //         outline: 1px solid $primary-color;
+      //         border: 1px solid $primary-color;
+      //         outline-offset: -1px;
+      //       }
+
+      //       &.ghost {
+      //         background: #f56c6c;
+      //         outline-width: 0;
+      //         width: 5px !important;
+      //         box-sizing: border-box;
+      //         font-size: 0;
+      //         content: "";
+      //         overflow: hidden;
+      //         padding: 0;
+      //         position: relative;
+      //         outline: none !important;
+      //         border: 0 !important;
+
+      //         &::after {
+      //           background: #f56c6c;
+      //           position: absolute;
+      //           top: 0;
+      //           left: 0;
+      //           bottom: 0;
+      //           right: 0;
+      //           z-index: 9999;
+      //           content: "";
+      //           outline: none;
+      //         }
+      //       }
+      //     }
+
+      //     .widget-table-content {
+      //       width: 100%;
+      //       // border: 1px dashed #ccc;
+      //       outline: 1px dashed #ccc;
+      //       background: #fff;
+      //       flex: 1;
+      //       margin: 0 1px;
+      //       overflow: auto;
+
+      //       & > div {
+      //         height: 100%;
+      //       }
+
+      //       .widget-table-col {
+      //         height: 100%;
+
+      //         .ghost {
+      //           background: #f56c6c;
+      //           // border: 2px solid #F56C6C;
+      //           position: relative;
+      //           content: "";
+      //           float: left;
+      //           height: 100%;
+      //           width: 5px !important;
+      //           list-style: none;
+      //           font-size: 0;
+      //           overflow: hidden;
+      //           outline: none;
+
+      //           &::after {
+      //             background: #f56c6c;
+      //             position: absolute;
+      //             top: 0;
+      //             left: 0;
+      //             bottom: 0;
+      //             right: 0;
+      //             z-index: 9999;
+      //             content: "";
+      //             outline: none;
+      //           }
+      //         }
+      //       }
+      //     }
+      //   }
+
+      //   &.active {
+      //     outline: 2px solid #e6a23c;
+      //     border: 1px solid #e6a23c;
+      //   }
+
+      //   &:hover {
+      //     background: #fdf6ec;
+      //     outline: 1px solid #e6a23c;
+      //     outline-offset: 0px;
+
+      //     &.active {
+      //       outline: 2px solid #e6a23c;
+      //       border: 1px solid #e6a23c;
+      //       outline-offset: 0;
+      //     }
+      //   }
+
+      //   .widget-view-action.widget-col-action {
+      //     background: #e6a23c;
+      //   }
+
+      //   .widget-view-drag.widget-col-drag {
+      //     background: #e6a23c;
+      //   }
+
+      //   &::after {
+      //     display: none;
+      //   }
+
+      //   &.ghost {
+      //     background: #f56c6c;
+      //     outline-width: 0;
+      //     height: 5px;
+      //     box-sizing: border-box;
+      //     font-size: 0;
+      //     content: "";
+      //     overflow: hidden;
+      //     padding: 0;
+      //     position: relative;
+      //     outline: none;
+      //     border: 0;
+
+      //     &::after {
+      //       background: #f56c6c;
+      //       position: absolute;
+      //       top: 0;
+      //       left: 0;
+      //       right: 0;
+      //       bottom: 0;
+      //       content: "";
+      //       display: block;
+      //       z-index: 999;
+      //     }
+      //   }
+      // }
 
       .ghost {
         background: #f56c6c;
@@ -734,6 +722,11 @@ $primary-background-color: #ecf5ff;
   .el-form-item__label {
     width: 100%;
   }
+
+  .flexView {
+    display: flex;
+    margin-bottom: 5px;
+  }
 }
 
 .widget-actions {

package/packages/FormMaking/util/generateCode.js

@@ -1,15 +1,15 @@
 function findRemoteFunc(list, funcList, tokenFuncList, blankList) {
   for (let i = 0; i < list.length; i++) {
     if (list[i].type == "grid") {
-      list[i].columns.forEach(item => {
+      list[i].options.columns.forEach(item => {
         findRemoteFunc(item.list, funcList, tokenFuncList, blankList);
       });
     } else if (list[i].type == "tabs") {
-      list[i].tabs.forEach(item => {
+      list[i].options.columns.forEach(item => {
         findRemoteFunc(item.list, funcList, tokenFuncList, blankList);
       });
     } else if (list[i].type == "table") {
-      // list[i].tabs.forEach(item => {
+      // list[i].options.columns.forEach(item => {
       findRemoteFunc(list[i].list, funcList, tokenFuncList, blankList);
       // })
     } else {

package/packages/FormMaking/util/index.js

@@ -1,33 +1,43 @@
-export const loadJs = (url) => {
+export const loadJs = url => {
   return new Promise((resolve, reject) => {
-    const script = document.createElement('script')
-    script.src = url
-    script.type = 'text/javascript'
-    document.body.appendChild(script)
+    const script = document.createElement("script");
+    script.src = url;
+    script.type = "text/javascript";
+    document.body.appendChild(script);
     script.onload = () => {
-      resolve()
-    }
-  }) 
-}
+      resolve();
+    };
+  });
+};
 
-export const loadCss = (url) => {
+export const loadCss = url => {
   return new Promise((resolve, reject) => {
-    const link = document.createElement('link')
-    link.rel = 'stylesheet'
-    link.href = url
-    document.head.appendChild(link)
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url;
+    document.head.appendChild(link);
     link.onload = () => {
-      resolve()
-    }
-  })
-}
+      resolve();
+    };
+  });
+};
 
 export const generateUUID = () => {
   var d = new Date().getTime();
-  var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-      var r = (d + Math.random()*16)%16 | 0;
-      d = Math.floor(d/16);
-      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+  var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(
+    c
+  ) {
+    var r = (d + Math.random() * 16) % 16 | 0;
+    d = Math.floor(d / 16);
+    return (c == "x" ? r : (r & 0x7) | 0x8).toString(16);
   });
   return uuid;
-}
+};
+
+export const inputTypeDict = val => {
+  const dict = {
+    email: "email",
+    url: "url"
+  };
+  return dict[val] || "text";
+};