tianheng-ui 0.1.5 → 0.1.6

package/package.json

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

package/packages/TableMaking/widgetTable.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="widgetTable">
     <div class="table-title">查询字段</div>
-    <div class="searchList">
-      <div class="table-header">
-        <div>拖动</div>
+    <div class="tableList searchList">
+      <div class="table-item table-header">
+        <div class="table-item-custom">拖动</div>
         <div>列名</div>
         <!-- <div>字段</div> -->
         <div>类型</div>
         <div>默认值</div>
-        <div>数据来源</div>
+        <!-- <div>数据来源</div> -->
+        <div class="table-item-custom"></div>
+        <div class="table-item-custom">隐藏</div>
       </div>
       <draggable
-        class="table-content"
+        class="search-content"
         v-model="searchData"
         v-bind="{
           group: 'people',
@@ -21,12 +23,8 @@
         }"
         @end="handleSearchMoveEnd"
       >
-        <div
-          v-for="item in searchData"
-          :key="item.key"
-          class="table-content-item"
-        >
-          <div class="drag">
+        <div v-for="item in searchData" :key="item.prop" class="table-item">
+          <div class="table-item-custom drag">
             <i class="iconfont icon-drag drag-widget"></i>
           </div>
           <div>{{ item.label }}</div>
@@ -52,29 +50,34 @@
               v-model="item.defaultValue"
               placeholder="请输入内容"
               size="mini"
+              clearable
             ></el-input>
           </div>
-          <div>
+          <!-- <div>
             <template v-if="item.type === 'select'">
               <el-button type="text" size="mini" @click="handleStaticData(item)"
                 >静态</el-button
               >
               <el-button type="text" size="mini" disabled>远端</el-button>
             </template>
+          </div> -->
+          <div class="table-item-custom"></div>
+          <div class="table-item-custom">
+            <el-checkbox v-model="item.hide"></el-checkbox>
           </div>
         </div>
       </draggable>
     </div>
     <div class="table-title">列表字段</div>
-    <div class="tableList">
-      <div class="table-header">
+    <div class="tableList" style="height: calc(100% - 240px);">
+      <div class="table-item table-header">
         <div class="table-item-custom">拖动</div>
         <div>列名</div>
         <!-- <div>字段</div> -->
         <div>对齐</div>
         <div>宽度</div>
         <div class="table-item-custom">排序</div>
-        <div class="table-item-custom" style="width:50px">隐藏</div>
+        <div class="table-item-custom">隐藏</div>
       </div>
       <draggable
         class="table-content"
@@ -87,11 +90,7 @@
         }"
         @end="handleTableMoveEnd"
       >
-        <div
-          v-for="item in tableData"
-          :key="item.prop"
-          class="table-content-item"
-        >
+        <div v-for="item in tableData" :key="item.prop" class="table-item">
           <div class="table-item-custom drag">
             <i class="iconfont icon-drag drag-widget"></i>
           </div>
@@ -230,42 +229,39 @@ export default {
     margin: 10px 0;
     border: 1px solid #dcdfe6;
     box-sizing: border-box;
-
-    .table-content {
+    .search-content {
       height: 120px;
       overflow-y: overlay;
     }
   }
   .tableList {
     margin-top: 10px;
-    height: calc(100% - 240px);
     border: 1px solid #dcdfe6;
 
+    .table-header {
+      background-color: #f5f7f9;
+      div {
+        flex: 1;
+        padding: 0 10px;
+        height: 40px;
+        line-height: 40px;
+      }
+    }
+
     .table-content {
       height: calc(100% - 40px);
       overflow-y: overlay;
     }
-    .el-input-number--mini {
-      width: 100%;
-    }
-  }
 
-  .table-header {
-    display: flex;
-    align-items: center;
-    background-color: #f5f7f9;
-    div {
-      flex: 1;
-      padding: 0 10px;
-      height: 40px;
-      line-height: 40px;
-    }
-  }
-  .table-content {
-    .table-content-item {
+    .table-item {
       display: flex;
       align-items: center;
-
+      > div {
+        flex: 1;
+        height: 40px;
+        line-height: 40px;
+        padding: 0 10px;
+      }
       .drag {
         i {
           font-size: 14px;
@@ -273,19 +269,21 @@ export default {
           cursor: move;
         }
       }
-      > div {
-        flex: 1;
-        height: 40px;
-        line-height: 40px;
-        padding: 0 10px;
+      .table-item-custom {
+        flex: none !important;
+        width: 60px !important;
+        text-align: center;
       }
     }
+
+    .el-input-number--mini {
+      width: 100%;
+    }
+    .el-select {
+      width: 100%;
+    }
   }
-  .table-item-custom {
-    flex: none !important;
-    width: 60px !important;
-    text-align: center;
-  }
+
   // .table-content:hover::-webkit-scrollbar-thumb {
   //   background-color: rgba(69, 90, 100, 0.2);
   // }