tianheng-ui 0.1.37 → 0.1.39

package/packages/FormMaking/styles/index.scss

@@ -1,7 +1,7 @@
 $primary-color: #409eff;
 $primary-background-color: #ecf5ff;
 
-.formMaking {
+.th-formMaking {
   height: 100%;
 
   *,
@@ -22,16 +22,6 @@ $primary-background-color: #ecf5ff;
     padding: 0;
   }
 
-  .fa-icon {
-    width: auto;
-    height: 1em; /* 或任意其它字体大小相对值 */
-
-    /* 要在 Safari 中正常工作，需要再引入如下两行代码 */
-    max-width: 100%;
-    max-height: 100%;
-    vertical-align: middle;
-  }
-
   .isHideFormLabel {
     .el-form-item__label {
       display: none;
@@ -41,160 +31,7 @@ $primary-background-color: #ecf5ff;
     }
   }
 
-  .container-box {
-    background: #fff;
-    height: 100%;
-    border: 1px solid #e0e0e0;
-
-    .el-container {
-      height: 100% !important;
-    }
-
-    & > .el-container {
-      background: #fff;
-    }
-    .fm2-main {
-      position: relative;
-
-      & > .el-container {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-      }
-    }
-    main {
-      padding: 0;
-    }
-
-    footer {
-      height: 30px;
-      line-height: 30px;
-      border-top: 1px solid #e0e0e0;
-      font-size: 12px;
-      text-align: right;
-      color: $primary-color;
-      background: #fafafa;
-
-      a {
-        color: $primary-color;
-      }
-    }
-
-    .codeDialog {
-      .el-tabs {
-        height: 100%;
-      }
-      .el-tabs__content {
-        height: calc(100% - 40px);
-      }
-      .el-tab-pane {
-        height: 100%;
-      }
-    }
-  }
-
-  // 顶部操作区
-  .center-container {
-    border-left: 1px solid #e0e0e0;
-    border-right: 1px solid #e0e0e0;
-
-    .el-main {
-      padding: 0;
-      position: relative;
-      background: #fafafa;
-    }
-  }
-
-  // 左侧字段区
-  .components-list {
-    padding: 8px 0;
-    width: 100%;
-    height: 100%;
-
-    .widget-cate {
-      padding: 8px 12px;
-      font-size: 13px;
-    }
-
-    ul {
-      position: relative;
-      overflow: hidden;
-      padding: 0 10px 10px;
-      margin: 0;
-    }
-
-    .form-edit-widget-label {
-      font-size: 12px;
-      display: block;
-      width: 48%;
-      line-height: 26px;
-      position: relative;
-      float: left;
-      left: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      margin: 1%;
-      color: #333;
-      border: 1px solid #f4f6fc;
-      transition: 0.25s;
-
-      &:hover {
-        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;
-          margin-left: 8px;
-          font-size: 14px;
-          display: inline-block;
-          vertical-align: middle;
-        }
-
-        span {
-          display: inline-block;
-          vertical-align: middle;
-        }
-      }
-    }
-  }
-
   .widget-form-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    .form-empty {
-      position: absolute;
-      text-align: center;
-      width: 400px;
-      top: 200px;
-      left: 50%;
-      margin-left: -200px;
-      color: #ccc;
-
-      .th-empty-description {
-        font-size: 20px;
-      }
-    }
-
     .draggable {
       height: 100%;
     }
@@ -589,88 +426,10 @@ $primary-background-color: #ecf5ff;
     }
   }
 
-  .config-container {
-    position: relative;
-
-    .el-header {
-      border-bottom: solid 2px #e4e7ed;
-      padding: 0 2px;
-
-      .config-tab {
-        height: 45px;
-        line-height: 45px;
-        display: inline-block;
-        width: 145px;
-        text-align: center;
-        font-size: 14px;
-        font-weight: 500;
-        position: relative;
-        cursor: pointer;
-
-        &.active {
-          border-bottom: solid 2px $primary-color;
-        }
-      }
-    }
-
-    .config-container-content {
-      // padding: 10px;
-
-      // .el-form-item__label {
-      //   padding: 0;
-      //   font-weight: 500;
-      // }
-
-      // .el-form-item {
-      //   border-bottom: solid 1px #e1e1e1;
-      //   padding-bottom: 10px;
-      // }
-
-      .config-pattern-input {
-        .el-input-group__prepend,
-        .el-input-group__append {
-          padding: 0 8px;
-        }
-      }
-    }
-
-    .ghost {
-      background: #fff;
-      border: 1px dashed $primary-color;
-
-      &::after {
-        background: #fff;
-        display: block;
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-      }
-    }
-
-    ul {
-      margin: 0;
-      padding: 0;
-    }
-
-    li.ghost {
-      list-style: none;
-      font-size: 0;
-      display: block;
-      position: relative;
-    }
-  }
-
   .widget-divider {
     display: flex;
     align-items: center;
   }
-
-  // .filler {
-  //   margin-bottom: 0 !important;
-  // }
 }
 
 .configComponents {

package/packages/TableMaking/WidgetTools.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="widgetTools">
+  <div class="widgetTools th-sticky_top">
     <div class="left">
       <slot> </slot>
     </div>
@@ -123,6 +123,7 @@
     <th-dialog
       v-model="dialog.show"
       :title="dialogTitles[dialog.action]"
+      :modal="dialog.action !== 'previewPc'"
       :modal-append-to-body="false"
       :showFooter="['importJson', 'importTemplate'].includes(dialog.action)"
       @on-fullscreen="handleDialogFullscreen"
@@ -244,7 +245,7 @@ export default {
   width: 100%;
   height: 45px;
   padding: 0 15px;
-  border-bottom: solid 2px #e4e7ed;
+  z-index: 999;
 
   .left {
   }

package/packages/TableMaking/generateTable.vue

@@ -53,6 +53,7 @@
       v-model="dialog.show"
       :title="dialog.action.name"
       :modal-append-to-body="false"
+      :z-index="9999"
       @on-affirm="handleDialogAffirm"
       @on-close="handleDialogClose"
     >

package/packages/TableMaking/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="th-table-making th-flex_box">
+  <div class="th-tableMaking th-flex_box">
     <div class="th-fiex_content">
       <widget-tools
         :config="tableConfig"
@@ -164,21 +164,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.th-table-making {
+.th-tableMaking {
   height: 100%;
   background-color: white;
   border: 1px solid #dcdfe6;
 
-  .client {
-    flex: 1;
-    .el-button {
-      color: #333;
-    }
-    .active {
-      color: #409eff;
-    }
-  }
-
   .el-container {
     height: 100%;
   }

package/packages/TableMaking/widgetConfig.vue

@@ -1,49 +1,53 @@
 <template>
-  <div class="widgetConfig">
-    <div class="tabs">
+  <div class="tableWidgetConfig">
+    <div class="tabs ">
       <div
         v-for="(item, index) in tabsMenus"
         :key="index"
         class="tabs-item"
         :class="{ 'tabs-item__active': activeTab.value === item.value }"
-        @click="handleTabsSelect(item)"
+        @click="activeTab = item"
       >
         {{ item.title }}
       </div>
     </div>
-    <div v-if="activeTab.value === 0" class="fields">
-      <el-checkbox
-        v-model="searchField.isCheckAll"
-        :indeterminate="searchField.isIndeterminate"
-        @change="val => handleCheckAllChange(val, 'searchField')"
-        >全选</el-checkbox
-      >
-      <el-checkbox
-        v-for="item in fields"
-        :label="item.prop"
-        :key="`searchField-${item.prop}-${item.isSearch}`"
-        :checked="item.isSearch"
-        @change="val => handleCheckboxChange(val, 'searchField', item)"
-        >{{ item.label }}</el-checkbox
-      >
-    </div>
-    <div v-if="activeTab.value === 1" class="fields">
-      <el-checkbox
-        v-model="tableField.isCheckAll"
-        :indeterminate="tableField.isIndeterminate"
-        @change="val => handleCheckAllChange(val, 'tableField')"
-        >全选</el-checkbox
-      >
-      <el-checkbox
-        v-for="item in fields"
-        :label="item.prop"
-        :key="`tableField-${item.prop}-${item.isTable}`"
-        :checked="item.isTable"
-        @change="val => handleCheckboxChange(val, 'tableField', item)"
-        >{{ item.label }}</el-checkbox
-      >
+    <div v-if="activeTab.value === 'field'" class="configItem fieldsView">
+      <el-collapse v-model="collapseValue">
+        <el-collapse-item title="查询字段" name="group-fields_search">
+          <el-checkbox
+            v-model="searchField.isCheckAll"
+            :indeterminate="searchField.isIndeterminate"
+            @change="val => handleCheckAllChange(val, 'searchField')"
+            >全选</el-checkbox
+          >
+          <el-checkbox
+            v-for="item in fields"
+            :label="item.prop"
+            :key="`searchField-${item.prop}-${item.isSearch}`"
+            :checked="item.isSearch"
+            @change="val => handleCheckboxChange(val, 'searchField', item)"
+            >{{ item.label }}</el-checkbox
+          >
+        </el-collapse-item>
+        <el-collapse-item title="列表字段" name="group-fields_list">
+          <el-checkbox
+            v-model="tableField.isCheckAll"
+            :indeterminate="tableField.isIndeterminate"
+            @change="val => handleCheckAllChange(val, 'tableField')"
+            >全选</el-checkbox
+          >
+          <el-checkbox
+            v-for="item in fields"
+            :label="item.prop"
+            :key="`tableField-${item.prop}-${item.isTable}`"
+            :checked="item.isTable"
+            @change="val => handleCheckboxChange(val, 'tableField', item)"
+            >{{ item.label }}</el-checkbox
+          >
+        </el-collapse-item>
+      </el-collapse>
     </div>
-    <div v-if="activeTab.value === 2 && config.table" class="tableConfig">
+    <div v-if="activeTab.value === 'table' && config.table" class="configItem">
       <el-form
         :model="config"
         label-position="left"
@@ -174,9 +178,7 @@
                 ></el-input>
               </el-form-item>
               <el-form-item label="对齐方式">
-                <el-radio-group
-                  v-model="config.table.pageInfo.style.align"
-                >
+                <el-radio-group v-model="config.table.pageInfo.style.align">
                   <el-radio-button
                     v-for="item in pageInfoAlign"
                     :key="item.value"
@@ -247,6 +249,19 @@
               <i class="el-icon-set-up" @click="handleActionConfig(item)"></i>
             </div>
           </el-collapse-item>
+        </el-collapse>
+      </el-form>
+    </div>
+    <div v-if="activeTab.value === 'css' && config.table" class="configItem">
+      <el-form
+        :model="config"
+        label-position="left"
+        label-width="80px"
+        size="small"
+        :rules="formRules"
+        ref="formRef"
+      >
+        <el-collapse v-model="collapseValue">
           <el-collapse-item name="group-style_table">
             <el-tooltip slot="title" effect="light" placement="top">
               <div slot="content">
@@ -254,7 +269,7 @@
                 <span>高度: height</span><br />
                 <!-- <span>自定义: 可自定义填写css样式</span><br /> -->
               </div>
-              <span style="color: #409EFF;">table 样式配置（电脑端）</span>
+              <span style="color: #409EFF;">table 样式（电脑端）</span>
             </el-tooltip>
             <el-form-item label="显示边框">
               <el-switch v-model="config.table.style.table.border"> </el-switch>
@@ -275,6 +290,26 @@
               ></el-input>
             </el-form-item>
           </el-collapse-item>
+          <el-collapse-item name="group-style_pageInfo">
+            <el-tooltip slot="title" effect="light" placement="top">
+              <div slot="content">
+                <span>外边框: margin</span><br />
+                <span>内边框: padding</span><br />
+                <span>自定义: 可自定义填写css样式</span><br />
+              </div>
+              <span style="color: #409EFF;">分页控件 样式（电脑端）</span>
+            </el-tooltip>
+          </el-collapse-item>
+          <el-collapse-item name="group-style_list">
+            <el-tooltip slot="title" effect="light" placement="top">
+              <div slot="content">
+                <span>外边框: margin</span><br />
+                <span>内边框: padding</span><br />
+                <span>自定义: 可自定义填写css样式</span><br />
+              </div>
+              <span style="color: #409EFF;">list 样式（移动端）</span>
+            </el-tooltip>
+          </el-collapse-item>
           <el-collapse-item name="group-style_cell">
             <el-tooltip slot="title" effect="light" placement="top">
               <div slot="content">
@@ -283,7 +318,7 @@
                 <span>分割线: border-bottom</span><br />
                 <span>自定义: 可自定义填写css样式</span><br />
               </div>
-              <span style="color: #409EFF;">cell 样式配置（移动端）</span>
+              <span style="color: #409EFF;">cell 样式（移动端）</span>
             </el-tooltip>
             <el-form-item label="外边距">
               <el-input
@@ -326,7 +361,7 @@
                 <span>颜色: color</span><br />
                 <span>自定义: 可自定义填写css样式</span><br />
               </div>
-              <span style="color: #409EFF;">title 样式配置（移动端）</span>
+              <span style="color: #409EFF;">title 样式（移动端）</span>
             </el-tooltip>
             <el-form-item label="外边距">
               <el-input
@@ -383,7 +418,7 @@
                 <span>颜色: color</span><br />
                 <span>自定义: 可自定义填写css样式</span><br />
               </div>
-              <span style="color: #409EFF;">value 样式配置（移动端）</span>
+              <span style="color: #409EFF;">value 样式（移动端）</span>
             </el-tooltip>
             <el-form-item label="外边距">
               <el-input
@@ -576,11 +611,11 @@ export default {
   data() {
     return {
       tabsMenus: [
-        { title: "查询字段", value: 0 },
-        { title: "列表字段", value: 1 },
-        { title: "列表属性", value: 2 }
+        { title: "字段配置", value: "field" },
+        { title: "列表属性", value: "table" },
+        { title: "样式设置", value: "css" }
       ],
-      activeTab: { title: "列表属性", value: 2 },
+      activeTab: { title: "列表属性", value: "table" },
       fields: [],
       searchField: {
         isCheckAll: false,
@@ -674,9 +709,6 @@ export default {
           this.tableActiveFields.length !== this.fields.length
       };
     },
-    handleTabsSelect(val) {
-      this.activeTab = val;
-    },
     handleCheckAllChange(bool, action) {
       if (action === "searchField") {
         this.fields.forEach(item => {
@@ -769,7 +801,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.widgetConfig {
+.tableWidgetConfig {
   background-color: white;
   .tabs {
     position: sticky;
@@ -793,25 +825,14 @@ export default {
     }
   }
 
-  .fields {
-    height: calc(100% - 45px);
-    .fields-item {
-      padding: 0 10px;
-      height: 30px;
-      margin-right: 0;
-      line-height: 30px;
-    }
-
+  .fieldsView {
     .el-checkbox {
-      padding: 0 10px;
-      margin-right: 0;
       width: 100%;
       height: 30px;
       line-height: 30px;
     }
   }
-
-  .tableConfig {
+  .configItem {
     height: calc(100% - 45px);
 
     .collapse-title {
@@ -848,7 +869,7 @@ export default {
 </style>
 
 <style lang="scss">
-.tableConfig {
+.tableWidgetConfig {
   .el-collapse-item__header {
     padding: 0 10px;
     height: 40px;