centaline-data-driven 1.2.24 → 1.2.27

package/src/centaline/dynamicDetail/src/dynamicContactList.vue

@@ -1,41 +1,101 @@
 <template>
-    <div>
-        <!-- 联系人 -->
-        <div class="contacts-head">
-            <div class="title-l">联系人信息</div>
-            <component class="el-button contacts-but el-button--info el-button--mini max-info" 
-                v-if="apiRouter!==null && !flagLook" :is="apiRouter.is" :vmodel="apiRouter" 
-                @click="lookOwner(apiRouter,$event)"></component>
-            <div class="contacts-tips" v-else>
-                <!-- <button class="el-button el-button--primary el-button--mini max-btn-add">新增联系人</button>
-                <button class="el-button el-button--primary el-button--mini max-btn-add">通话记录</button>
-                <button class="el-button el-button--primary el-button--mini max-btn-add">查看历史号码</button> -->
-                <component class="el-button el-button--primary el-button--mini max-btn-add" 
-                v-if="model && model.buttons!==null && model.buttons.length>0" 
-                v-for="(col, index) in model.buttons" :key="index"
-                :is="col.is" :vmodel="col" 
-                @click="fieldClickHandler(col,$event)"></component>
-            </div>
-        </div>
-        <!-- 表格 -->
-        <div class="contacts-table" v-show="flagLook">
-            <el-table :data="tableData" stripe fit style="width: 100%" :header-cell-style="{background:'#f3f3f3',color:'#333333'}">
-                <el-table-column v-for="(item,index) in columnList" :key="index"
-                    :property="item.prop" :label="item.label" :min-width="item.width" >
-                    <template slot-scope="scope">
-                    <span v-if="scope.column.property=='phone'">{{scope.row.phone }}</span>
-                    <span v-else-if="scope.column.property=='tel'">{{scope.row.tel}}</span>
-                    <span v-else>
-                        {{scope.row[scope.column.property]}}
+    <div v-if="apiRouter!=={}">
+      <!-- 联系人 -->
+      <div class="contacts-head">
+          <div class="title-l">联系人信息</div>
+          <component class="el-button contacts-but el-button--info el-button--mini max-info" 
+              v-if="!flagLook" :is="apiRouter.is" :vmodel="apiRouter" 
+              @click="lookOwner(apiRouter,$event)"></component>
+          <div class="contacts-tips" v-else>
+              <component class="el-button el-button--primary el-button--mini max-btn-add" 
+              v-if="model && model.buttons!==null && model.buttons.length>0" 
+              v-for="(col, index) in model.buttons" :key="index"
+              :is="col.is" :vmodel="col" 
+              @click="fieldClickHandler(col,$event)"></component>
+          </div>
+      </div>
+      <!-- 表格 -->
+      <div class="contacts-table ct-tableParent ct-searchtable" v-if="flagLook">
+        <div class="ct-table-content">
+          <table border="0" cellpadding="0" cellspacing="0" :class="['ct-table',model.attrs.size?'ct-table-'+model.attrs.size:'']">
+            <!--表头-->
+            <thead ref="tableHead">
+              <tr class="ct-tr" ref="headTr" v-for="(columns,columnsIndex) in model.columnsArr" :key="columnsIndex">
+                <th v-if="model.isMulti && columnsIndex === 0" ref="headLeftThs" class="ct-td left-fixation-th checkbox-td" :class="[model.tdClass]">
+                  <label class="el-checkbox"><span class="el-checkbox__input" :class="model.selectAllType">
+                    <span class="el-checkbox__inner"></span>
+                    <input type="checkbox" @click="selectAll($event)" v-model="model.selectAll" class="el-checkbox__original checkbox-td-1" aria-hidden="false" />
                     </span>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
+                  </label>                  
+                </th>
+                <th :ref="column.fixed?(column.fixed==='left'?'headLeftThs':'headRightThs'):'headThs'" v-for="(column,colIndex) in columns" :key="colIndex"
+                    v-if="column.show" class="ct-td ct-searchtable-th"
+                    :rowspan="column.rowspan"
+                    :colspan="column.colspan"
+                    :class="[colHasWidth[colIndex],column.sortAction,model.tdClass,
+                    colIndex === leftShadow?'shadowLeft':null,
+                    colIndex === rightShadow?'shadowRight':null,
+                    column.fixed === 'left'?'left-fixation-th':null,
+                    column.fixed === 'right'?'right-fixation-th':null,
+                    column.width === undefined?'ct-table-auto':null,
+                    typeof column.fixed === 'undefined'?'right-no-fixation-th':null]"
+                    v-bind="column.attrs">
+                  <span>{{column.name}}</span>
+                </th>
+              </tr>
+            </thead>
+          <!--表体-->
+            <tbody>              
+              <!--可视区域的行数据-->
+              <tr v-for="(row,rowindex) in model.listData" :key="rowindex"
+                  v-if="pageRowMin <= rowindex && rowindex <= pageRowMax"
+                  :ref="'rows.'+rowindex" @click="rowClickHandle($event,rowindex)"
+                  class="ct-tr"
+                  :style="row.$style">
+                <td v-if="model.isMulti" class="ct-td tdFiexd left-fixation checkbox-td" :class="[model.tdClass]" align="center">
+                  <label v-if="!model.rightMulti || row[model.rightMulti] == 1" class="el-checkbox is-checked"><span class="el-checkbox__input" :class="rowCheckClass(row)">
+                    <span class="el-checkbox__inner"></span>
+                    <input  type="checkbox" v-model="row.$select" @change="selectOne($event)" class="el-checkbox__original checkbox-td-1" />
+                    </span>
+                  </label>
+                </td>
+                <td :ref="column.fixed?(column.fixed==='left'?'headLeftTds':'headRightTds'):null"
+                    v-for="(column,colIndex) in model.dataFieldcolumns" :key="colIndex"
+                    v-if="tdShow(column, row)"
+                    :rowspan="tdRowspan(column, row)"
+                    class="ct-td"
+                    :class="[colHasWidth[colIndex],model.tdClass,
+                    colIndex === leftShadow?'shadowLeft':null,
+                    colIndex === rightShadow?'shadowRight':null,
+                    column.fixed === 'left'?'left-fixation':null,
+                    column.width === undefined?'ct-table-auto':null,
+                    column.fixed === 'right'?'right-fixation':null]"
+                    v-bind="column.attrs">
+                  <!--操作列-->
+                  <div v-if="column.id==='operation'" class="div_allinline" :class="column.autoRowHeight ? 'lineFeedCell':'cell'">
+                    <ct-tablecurrency v-for="(router,rowRouterIndex) in model.rowRouter" :key="rowRouterIndex" v-if="!router.rightField || row[router.rightField] == 1" :isOperationalColumn="true"
+                                      :router="router" :colValue="router.label" :rowData="row" @click="rolRouterClickHandler">
+                    </ct-tablecurrency>
+                  </div>
+                  <!--可点击的列-->
+                  <ct-tablecurrency v-else-if="column.router" :align="column.attrs.align" :class="column.autoRowHeight ? 'lineFeedCell':'cell'" :router="column.router" :colValue="row[column.id]" :rowData="row"
+                                    @click="rolRouterClickHandler">
+                  </ct-tablecurrency>
+                  <!--正常的列-->
+                  <div v-else-if="typeof column.template === 'undefined'" :class="column.autoRowHeight ? 'lineFeedCell':'cell'">
+                    {{row[column.id]}}
+                  </div>
+                </td>
+              </tr>
+              <!--适配滚动条-->
+              <tr v-else v-bind:style="{ height: row.$heigth + 'px' }"></tr>
+            </tbody>
+          </table>
+      </div>
     </div>
+  </div>
 </template>
 
-
 <script>
   import dynamicElement from '../../mixins/dynamicElement';
   export default {
@@ -53,62 +113,12 @@
     data() {
       return {
         flagLook: false,
-        columnList: [
-        {
-          prop: 'name',
-          label: '联系人',
-          width: '80'
-        },
-        {
-          prop: 'type',
-          label: '类型',
-          width: '60'
-        },
-        {
-          prop: 'phone',
-          label: '手机',
-          width: '125'
-        },
-        {
-          prop: 'tel',
-          label: '座机',
-          width: '170'
-        },
-        {
-          prop: 'wx',
-          label: '微信',
-          width: '150'
-        },
-        {
-          prop: 'entTime',
-          label: '录入时间',
-          width: '150'
-        },
-        {
-          prop: 'entUser',
-          label: '录入人',
-          width: '80'
-        },
-        {
-          prop: 'remarks',
-          label: '操作',
-          // width:'180'
-        },
-        ],
-        tableData: [
-          {
-            name: '王建国先生',
-            type: '业主',
-            phone: '13866668888',
-            tel: '0275-55556666-5896',
-            wx: '555566665896',
-            entTime: '2021-10-26 29:27:25',
-            entUser: '王天',
-            remarks: '删除',
-            isIcon: true,
-          },
-        ],
-        opening:'first',      
+        leftShadow: -1,//左阴影个数
+        rightShadow: -1,//右阴影个数
+        currentRow: null,
+        colHasWidth: {},//有无列宽集合
+        pageRowMin: 0,//页面实际的第一行号
+        pageRowMax: 100,//页面实际的第后行号   
       }
     },
     mounted() {    
@@ -123,9 +133,23 @@
         var self = this;
         this.model = data;
         this.model.$vue = self;
-      },
-      loadFields() {
-        var self = this;        
+        self.model.columns.forEach((v, vi) => {
+          if (v.fixed === 'left') {
+            self.leftShadow = vi;
+          }
+          if (v.fixed === 'right' && self.rightShadow < 0) {
+            self.rightShadow = vi;
+          }
+          if (typeof v.width !== 'undefined') {
+            self.colHasWidth[vi] = '';
+          }
+          else {
+            self.colHasWidth[vi] = 'nowidth';
+          }
+        });
+        this.model.scripts.formData = this.model.formData;
+        this.model.scripts.formData.formTable = this.model;
+        console.log(this.model);
       },
       lookOwner(router) {
         var self = this; 
@@ -146,7 +170,66 @@
             this.model.detailHeight = detailHeight < 40 ? 350 : detailHeight;
           }
         });
-      }, 
+      },
+      rowClickHandle(ev, index) {
+        this.model.selectIndex = index;
+        this.rowColorChange();
+        ev.cancelBubble = true;
+        ev.stopPropagation();
+      },
+      rowColorChange() {
+        var index = this.model.selectIndex;
+        if (typeof this.$refs['rows.' + index] !== "undefined" && this.currentRow !== this.$refs['rows.' + index][0]) {
+          if (this.currentRow !== null) {
+            for (var i = 0; i < this.currentRow.children.length; i++) {
+              this.currentRow.children[i].classList.remove('select');
+            }
+          }
+          if (this.$refs['rows.' + index][0]) {
+            for (var j = 0; j < this.$refs['rows.' + index][0].children.length; j++) {
+              this.$refs['rows.' + index][0].children[j].classList.add('select');
+            }
+          }
+          this.currentRow = this.$refs['rows.' + index][0] || null;
+        }
+      },
+      tdRowspan(column, row) {
+        if (!column.show) {
+          return '';
+        }
+
+        //合并行
+        if (row.$rowspan !== 0 && this.model.rowMergedColumns.indexOf(column.id) > -1) {
+          return row.$rowspan;
+        }
+
+        return '';
+      },
+      tdShow(column, row) {
+        if (!column.show) {
+          return false;
+        }
+
+        //合并行
+        if (row.$rowspan === 0 && this.model.rowMergedColumns.indexOf(column.id) > -1) {
+          return false;
+        }
+
+        return true;
+      },
+      rolRouterClickHandler(field, rowData) {
+        var submitData = {};
+        field.submitListField.forEach((k) => {
+          submitData[k] = rowData[k];
+        });
+
+        let action = field.action;
+        if (field.actionField) {
+          action = rowData[field.actionField];
+        }
+
+        this.routerClickHandler(field, submitData, action);
+      },
       fieldClickHandler(field) {
         var self = this;
         var callBack=null;
@@ -307,602 +390,28 @@
   }
 </script>
 <style lang="scss" scoped>
-  .details-content{
-    font-size: 12px;
-    .title-l{
-                font-weight: Bold;
-                font-size: 16px;
-                color: #333333;
-            }
-    .details-head{
-      padding: 16px;
-      display: flex;
-      .head-type{
-          font-size: 20px;
-          background: #EE6B6B;
-          color: #FFFFFF;
-          padding: 0 14px;
-          border-radius: 6px;
-          max-height: 40px;
-          line-height: 40px;
-          font-weight: Bold;
-  
-        }   
-        .head-info{
-            margin-left: 10px;
-        }
-        .title{
-          font-weight: Bold;
-          font-size: 16px;
-          margin-bottom: 3px;
-
-        }
-        .head-line{
-          display: inline-block;
-          height: 16px;
-          width: 2px;
-          background: #333333;
-          margin: 0 4px;
-          position: relative;
-          top: 1.5px;
-        }
-        .collection{
-          font-size: 18px;
-          margin-left: 10px;
-          cursor: pointer;
-          vertical-align: -2.85px;
-        }
-        .title-other {
-          color: #999999;
-          margin-bottom: 14px;
-          font-size: 12px;
-          span {
-            margin-right: 20px;
-          }
-          .other-icon {
-            font-size: 16px;
-          }
-          .location{
-            font-size: 16px;
-            vertical-align: -2.85px;
-          }
-        }
-        .title-tags {
-          display: flex;
-          .t-tag {
-            color: #999999;
-            background: #F3F3F3;
-            border: 1px solid #d8d8d8;
-            padding: 2px 9px;
-            border-radius: 3px;
-            margin-right: 10px;
-          }
-        }
-        .head-but{
-          margin-left: auto;
-          font-size: 12px;
-          text-align: right;
-          .max-report{
-            height: 26px;
-            color: #333333;
-            background-color: #FFFFFF;
-            border: 1px solid #E0E0E0;
-            border-radius: 6px;
-            font-size: 12px;
-          }
-          .max-report:hover .report-cont{
-              display: block;
-              color: #333;
-          }
-          .report-cont{
-            display: none;
-            width: 115px;
-            background: #fff;
-            -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
-            box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);
-            border-radius: 5px;
-            list-style: none;
-            position: absolute;
-            left: -61px;
-            top: 26px;
-            padding: 5px 0;
-            color: #333;
-          }
-          .report-cont li{
-            padding: 5px 10px;
-          }
-        }
-        
-                
+.details-content{
+  font-size: 12px;
+  .title-l{
+    font-weight: Bold;
+    font-size: 16px;
+    color: #333333;
+  }
+  .contacts-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    .contacts-but {
+      height: 30px;
+      font-weight: Bold;
     }
-     .details-mid {
+    .contacts-tips {
       display: flex;
-      justify-content: space-between;
-      .mid-l {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-
-        .hous-info {
-          padding-bottom: 10px;
-          .base-clolr {
-            color: #EE6B6B;
-          }
-          .expand-f {
-            line-height: 15px;
-            font-size: 18px;
-            font-weight: bold;
-          }
-          .img-jsq{
-            width: 14px;
-            height: 14px;
-            display: inline-block;
-            margin-left: 10px;
-          }
-          .info-conten {
-            display: flex;
-            .info-row {
-              display: flex;
-            }
-           
-            .hous-t {
-              width: 260px;
-              .swiper-i {
-                position: relative;
-                width: 100%;
-                height: 100%;
-                img {
-                  width: 100%;
-                  height: 100%;
-                }
-                .hous-icon {
-                  width: 60px;
-                  height: 60px;
-                  position: absolute;
-                  top: 50%;
-                  left: 50%;
-                  transform: translate(-50%, -50%);
-                }
-              }
-          
-              .hous-img {
-                margin-top: 10px;
-                width: 100%;
-                overflow-x: hidden;
-                overflow-y: hidden;
-                white-space: nowrap;
-                .img-i {
-                  position: relative;
-                  width: 80px;
-                  height: 44px;
-                  margin-right: 10px;
-                  display: inline-block;
-                  img{
-                      width: 100%;
-                      height: 100%;
-                  
-                  }
-                  .img-bot {
-                    width: 100%;
-                    height: 16px;
-                    background: rgba(0, 0, 0, 0.5);
-                    color: #fff;
-                    position: absolute;
-                    bottom: 0;
-                    font-weight: Bold;
-                    .img-icon {
-                      width: 12px;
-                    height: 12px;
-                      margin: 0 5px;
-                      margin: 0 5px;
-                      vertical-align: -1.5px;
-                    }
-                  }
-                }
-              }
-            }
-            .hous-b {
-              position: relative;
-              margin-left: 16px;
-              margin-top: 20px;
-              flex: 1;
-              .code-ewm {
-                width: 32px;
-                height: 32px;
-                position: absolute;
-                top: -32px;
-                right: -12px;
-              }
-
-              .row-i {
-                width: 33.3%;
-                display: flex;
-              }
-              .info-mid {
-                margin: 35px 0 0 0;
-                padding: 20px;
-                border-top: 1px solid #e0e0e0;
-                border-bottom: 1px solid #e0e0e0;
-                display: flex;
-                justify-content: space-between;
-                .mid-i {
-                  text-align: center;
-                }
-                .mid-i div:nth-child(1) {
-                  margin-bottom: 10px;
-                }
-                .mid-i div:nth-child(2) {
-                  font-size: 14px;
-                  font-weight: bold;
-                }
-              }
-            }
-          }
-          .info-conten-b{
-             display: flex;
-             margin-top: 15px;
-            .info-row {
-              display: flex;
-              width: 100%;
-              padding-left: 9px;
-            }
-            .row-i{
-              width: 25%;
-            }
-            .row-i100{
-              width: 100%;
-            }
-          }
-          .open-mero{
-            text-align: center;
-            padding: 3px 0;
-          }
-          // .mero{
-              
-          //     vertical-align: 2px;
-          //     overflow: hidden;
-          //     margin-left: 5px;
-          // }
-          .more-colose{
-            background: url('../../../assets/mero-colose.png')no-repeat;
-            background-size: 100% 100%;
-            width: 18px;
-            height: 9px;
-            display: inline-block;
-          }
-          .mero-open{
-            background: url('../../../assets/more-open.png')no-repeat;
-            background-size: 100% 100%;
-            width: 18px;
-            height: 9px;
-            display: inline-block;
-          }
-          .hous-mero {
-            display: flex;
-            .mero-labe {
-              min-width: 60px;
-            }
-          }
-        }
-        
-        .contacts-info {
-          padding: 16px;
-          .contacts-head {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            
-            .contacts-but {
-              height: 30px;
-              font-weight: Bold;
-            }
-            .contacts-tips {
-              display: flex;
-            }
-          }
-          .contacts-table {
-            margin-top: 16px;
-            .table-icon {
-              font-size: 14px;
-              margin-left: 4px;
-            }
-            .el-table {
-              font-size: 12px;
-            }
-            .el-table th.el-table__cell > .cell {
-              padding-left: 16px;
-            }
-            .el-table .cell {
-              padding-left: 16px;
-            }
-            .el-table--striped
-              .el-table__body
-              tr.el-table__row--striped
-              td.el-table__cell {
-              background: 1px solid #E0E0E0;
-            }
-          }
-        }
-        
-        .tablist-info {
-          .details-tabs-box{
-            
-            .el-menu--horizontal > .el-menu-item{
-              height: 30px;
-              line-height: 30px;
-              border-radius: none;
-            }
-          }
-        }
-
-        .contribute-info {
-          .contribute-list {
-            width: 100%;
-            display: flex;
-            align-content: flex-start;
-            flex-flow: row wrap;
-            .contribute-i {
-              width: calc((100% - 16px * 3) / 4);
-              margin: 16px 16px 0 0;
-              padding: 16px 0 16px 16px;
-              border: 1px solid #e0e0e0;
-              border-radius: 6px;
-              display: flex;
-              img {
-                width: 50px;
-                height: 50px;
-                margin-right: 6px;
-              }
-              .user-title {
-                font-weight: Bold;
-                font-size: 14px;
-                margin-bottom: 8px;
-              }
-              .user-but{
-                  cursor: pointer;
-                  font-size: 12px;
-                  color: #FFFFFF;
-                  background: #FBD46D;
-                  height: 20px;
-                  line-height: 20px;
-                  border-radius: 3px;
-                  text-align: center;
-                  padding: 0 10px;
-
-              }
-
-            }
-            
-            .contribute-i:nth-child(4n) {
-              margin-right: 0;
-            }
-          }
-        }
-      }
-      .mid-l > div {
-        margin-bottom: 10px;
-        padding: 16px;
-      }
-      .mid-r > div {
-        margin-bottom: 10px;
-        padding: 16px;
-      }
-      .mid-r {
-        width: 26.666%;
-        margin-left: 10px;
-
-        display: flex;
-        flex-direction: column;
-         .tab-conten {
-            display: flex;
-            margin-bottom: 16px;
-            img {
-              width: 50px;
-              height: 50px;
-              margin-right: 10px;
-            }
-            .user-name {
-              display: flex;
-            }
-            .text {
-              font-size: 14px;
-              font-weight: Bold;
-              margin-right: 10px;
-            }
-            .user-other {
-              min-height: 200px;
-            }
-            .user-but{cursor: pointer;
-              font-size: 12px;
-              color: #FFFFFF;
-              background: #FBD46D;
-              height: 20px;
-              line-height: 20px;
-              border-radius: 3px;
-              text-align: center;
-              padding: 0 10px;
-          }
-          }
-        .take-info {
-          font-size: 16px;
-          .red-text {
-            font-size: 18px;
-            font-weight: bold;
-            color: #EE6B6B;
-          }
-        }
-        .staff-info {
-          padding-bottom: 10px;
-          .open-mero{
-            text-align: center;
-            padding: 3px 0;
-          }
-          .more-colose{
-            background: url('../../../assets/mero-colose.png')no-repeat;
-            background-size: 100% 100%;
-            width: 18px;
-            height: 9px;
-            display: inline-block;
-          }
-          .mero-open{
-            background: url('../../../assets/more-open.png')no-repeat;
-            background-size: 100% 100%;
-            width: 18px;
-            height: 9px;
-            display: inline-block;
-          }
-          .hous-mero {
-            display: flex;
-            .mero-labe {
-              min-width: 60px;
-            }
-          }
-         
-         
-        }
-        .operation-list {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          .list-item {
-            width: 33.3%;
-            height: 62px;
-            font-size: 14px;
-            text-align: center;
-            font-weight: bold;
-            border: none;
-          }
-          .list-item:hover {
-            color: #fff;
-            background: #FF9393;
-          }
-          .list-item:nth-child(2) {
-            margin: 0 10px;
-          }
-          .list-item:nth-child(3) {
-            margin-left: 0;
-          }
-        }
-
-        .operation-table {
-          padding: 0;
-          .table-box {
-            display: flex;
-            // align-items: center;
-            border-bottom: 1px solid #e0e0e0;
-            .t-item {
-              padding: 0 16px;
-              font-size: 14px;
-              flex: 1;
-              position: relative;
-              display: flex;
-              flex-flow: column;
-              align-items: flex-start;
-              border-right: 1px solid #e0e0e0;
-              .i {
-                position: absolute;
-                top: 50%;
-                // left: 50%;
-                transform: translateY(-50%);
-              }
-              .t-but {
-                font-size: 12px;
-                margin-left: 0;
-                width: 104px;
-                // height: 100%;
-                // margin: 12px 16px 0 16px;
-                margin-top: 12px;
-                padding: 0;
-              }
-              .t-but:nth-last-child(1) {
-                margin-bottom: 12px;
-              }
-            }
-            .t-item:nth-last-child(1) {
-              border-right: 0;
-            }
-          }
-          .table-box:nth-last-child(1) {
-            border-bottom: 0;
-          }
-        }
-
-        .customer{
-            background: #fff;
-            border-radius: 6px;
-            width: 100%;
-          .customer-title{
-              font-weight: Bold;
-              font-size: 16px;
-              color: #333;
-          }
-          .customre-line{
-              width: 100%;
-              height: 1px;
-              margin-top: 10px;
-              background: #E0E0E0;
-          }
-          .match-customre{
-            display: flex;
-            margin-top: 10px;
-              .customre-name{
-                font-weight: Bold;
-                font-size: 14px;
-                color: #333333;margin-right: 10px;
-              }
-              .t-tag{
-                width: 41px;
-                color: #999;
-                background: #f3f3f3;
-                border: 1px solid #d8d8d8;
-                padding: 2px 9px;
-                border-radius: 3px;
-                margin-right: 10px;
-              }
-              
-          }
-          .user-but{
-                  cursor: pointer;
-                  font-size: 12px;
-                  color: #FFFFFF;
-                  background: #FBD46D;
-                  height: 20px;
-                  line-height: 20px;
-                  border-radius: 3px;
-                  text-align: center;
-                  padding: 0 10px;
-
-              }
-              .customr-name{
-                position: absolute;
-                right: 0;
-              }
-              .clearfix{
-                  clear: both;
-              }
-          .customre-l{
-            float: left;
-            width: 50%;
-            margin-top: 10px;
-              .row-i{
-                padding: 5px 0;
-              }
-
-          }
-          
-          .customre-r{
-            float: right;
-            width: 50%;
-            margin-top: 10px;
-            .row-i{
-                padding: 5px 0;
-              }
-          }
-        }
-      }
     }
   }
-  // 按钮
+}
+// 按钮
 .max-info{
   height: 26px;
   color: #333333;
@@ -950,4 +459,168 @@
 .r{
   float: right;
 }
+
+.ct-tableParent {
+    overflow: auto;
+    border-bottom: 1px solid #ebeef5;
+    width: 100%;
+    outline: 0;
+  }
+  .ct-searchtable .ct-table {
+    min-width: 100%;
+    border-collapse: separate;
+  }
+    .ct-searchtable .ct-table th {
+      background-color: #f4f7fa !important;
+      border-top: 1px solid #ebeef5;
+    }
+  .ct-searchtable .ct-tr > .ct-td {
+    padding: 2px 20px;
+    cursor: default;
+    background-color: #ffffff;
+  }
+  .ct-searchtable .ct-tr > .ct-td1 {
+    border-right: 1px solid #e7e8eb;
+    border-left: 1px solid #e7e8eb;
+  }
+  .ct-searchtable .ct-tr:last-child > .ct-td1 {
+    border-bottom: 1px solid #e7e8eb;
+  }
+  .ct-searchtable .ct-tr > .ct-td2 {
+    border-bottom: 1px solid #e7e8eb;
+  }
+  .ct-searchtable .ct-tr > .ct-td3 {
+    border: 1px solid #e7e8eb;
+  }
+  .shadowLeft {
+    border-right: 1px solid #e7e8eb;
+    box-shadow: 2px 0 3px -1px rgba(0,0,0,0.1);
+  }
+  .shadowRight {
+    box-shadow: -2px 0 3px -1px rgba(0,0,0,0.1);
+  }
+  .ct-searchtable body:last-child > .ct-td {
+    border-bottom: 0px;
+  }
+  .ct-searchtable .ct-tr > .ct-td.nowidth {
+    white-space: nowrap;
+  }
+
+  .ct-table {
+    color: #606266;
+    font-size: 18px;
+    line-height: 40px;
+    min-height: 40px;
+  }
+  .ct-table-mini {
+    font-size: 12px;
+    line-height: 26px;
+    min-height: 28px;
+  }
+  .ct-table-small {
+    font-size: 14px;
+    line-height: 32px;
+    min-height: 32px;
+  }
+  .ct-table-medium {
+    font-size: 16px;
+    line-height: 36px;
+    min-height: 36px;
+  }
+  .ct-table .ct-td > .caret-wrapper {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    height: 34px;
+    width: 10px;
+    vertical-align: middle;
+    cursor: pointer;
+    overflow: initial;
+    position: relative;
+  }
+    .ct-table .ct-td > .caret-wrapper > .sort-caret {
+      width: 0;
+      height: 0;
+      border: 5px solid transparent;
+      position: absolute;
+      left: 7px;
+    }
+      .ct-table .ct-td > .caret-wrapper > .sort-caret.ascending {
+        border-bottom-color: #c0c4cc;
+        top: 5px;
+      }
+      .ct-table .ct-td > .caret-wrapper > .sort-caret.descending {
+        border-top-color: #c0c4cc;
+        bottom: 7px;
+      }
+
+  .ct-table .ct-td.select {
+    background-color: #ecf5ff !important;
+  }
+  .ct-table .ct-tr:hover .ct-td.select {
+    background-color: #ecf5ff !important;
+  }
+  .ct-table .ct-td.asc > .caret-wrapper > .sort-caret.ascending {
+    border-bottom-color: #409eff;
+    top: 5px;
+  }
+  .ct-table .ct-td.desc > .caret-wrapper > .sort-caret.descending {
+    border-top-color: #409eff;
+    bottom: 7px;
+  }
+  .ct-table .cell {
+    /*white-space: nowrap;*/
+    text-overflow: ellipsis;
+    /*min-width: 50px; todo 实际宽度-21即可*/
+    overflow: hidden;
+    /*padding-right: 10px;*/
+  }
+  /*强制换行 todo 可去掉改成强制不换行*/
+  .ct-table .cell {
+    /* 这两个在技术上是一样的, 为了兼容了浏览器两个都加上 */
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    /* 这个的使用在web-kit中有些危险，他可能会阶段所有东西 */
+    word-break: break-all;
+    /* Instead use this non-standard one: */
+    word-break: break-word;
+    /* 如果浏览器支持的话增加一个连接符(Blink不支持) */
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+  .ct-table .lineFeedCell {
+    min-width: 40px;
+  }
+  .ct-table .left-fixation {
+    position: sticky;
+  }
+  .ct-table .right-fixation {
+    position: sticky;
+  }
+  .ct-table .left-fixation-th {
+    position: sticky;
+    top: 0px;
+    z-index: 99;
+  }
+  .ct-table .right-fixation-th {
+    position: sticky;
+    top: 0px;
+    z-index: 99;
+  }
+  .ct-table .right-no-fixation-th {
+    position: sticky;
+    top: 0px;
+    z-index: 50;
+  }
+  .ct-table .checkbox-td {
+    min-width: 20px;
+    width: 20px;
+    left: 0px;
+  }
+    .ct-table .checkbox-td .checkbox-td-1 {
+      vertical-align: inherit;
+    }
 </style>