修改搜索中心布局

jero-web/src/views/documentTools/searchCenter/index.vue

@@ -40,18 +40,28 @@
           <div class="search-con-header">
             <div class="search-header-left">
 <!--              <span>搜索模块</span>-->
-              <span class="search-header-item" v-for="item in options"
+              <a-tabs default-active-key="1" @change="callback">
-                :class="{'search-header-item-active':selectOption.indexOf(item.value) !== -1 }"
+                <a-tab-pane key="全部" tab="全部"></a-tab-pane>
-                @click="selectModel(item.value)"
+                <a-tab-pane key="文档库" tab="文档库" force-render>
-              >{{item.value}}</span>
+
-            </div>
+                </a-tab-pane>
-            <div class="search-header-right" v-if="showList">
+                <a-tab-pane key="知识问题库" tab="知识问题库"></a-tab-pane>
-<!--              <a-icon type="appstore" />-->
+                <a-tab-pane key="文档对比库" tab="文档对比库"></a-tab-pane>
-              <a-icon   :type="item.type" v-for="item in listOption" class="header-list"
+                <a-tab-pane key="周报" tab="周报"></a-tab-pane>
-                :class="{'header-list-active':selectList.indexOf(item.value) !== -1 }"
+              </a-tabs>
-                @click="selectListModel(item.value)"
+<!--              <span class="search-header-item" v-for="item in options"-->
-              ></a-icon>
+<!--                :class="{'search-header-item-active':selectOption.indexOf(item.value) !== -1 }"-->
+<!--                @click="selectModel(item.value)"-->
+<!--              >{{item.value}}</span>-->
             </div>
+
+<!--            <div class="search-header-right" v-if="showList">-->
+<!--&lt;!&ndash;              <a-icon type="appstore" />&ndash;&gt;-->
+<!--              <a-icon :type="item.type" v-for="item in listOption" class="header-list"-->
+<!--                :class="{'header-list-active':selectList.indexOf(item.value) !== -1 }"-->
+<!--                @click="selectListModel(item.value)"-->
+<!--              ></a-icon>-->
+<!--            </div>-->
           </div>
           <div class="search-con-text">
             <div class="search-text-wrap">
@@ -79,6 +89,13 @@
                 <div class="search-text-title">
                   <span>检索范围：</span>
                   <span>纯电动</span>
+                  <div class="search-header-right" v-if="showList">
+                    <!--              <a-icon type="appstore" />-->
+                    <a-icon :type="item.type" v-for="item in listOption" class="header-list"
+                            :class="{'header-list-active':selectList.indexOf(item.value) !== -1 }"
+                            @click="selectListModel(item.value)"
+                    ></a-icon>
+                  </div>
                 </div>
                 <div class="search-text-list">
                   <a-table
@@ -96,16 +113,22 @@
                       <j-ellipsis :value="text" :length="25" />
                     </span>
                   </a-table>
+
                 <ul v-if="!searchShow">
                   <li v-for="item in conList" :key="item.id">
-                    <div class="text-header">
+                    <a-checkbox @change="onChangecheck"  style="margin-top: 20px;">
-                      <span>{{item.type}}</span>
+                      <div :class="{ 'null-input':isNullInput, 'no-null-input':!isNullInput}" style="margin-top: -67px;margin-left: 45px;padding: 24px;">
-                      <span>{{item.number}}</span>
+                        <div class="text-header">
-                      <span>{{item.title}}</span>
+                          <span>{{item.type}}</span>
-                    </div>
+                          <span>{{item.number}}</span>
-                    <div class="text-content">
+                          <span>{{item.title}}</span>
-                      {{item.content}}
+                        </div>
-                    </div>
+                        <div class="text-content">
+                          {{item.content}}
+                        </div>
+                      </div>
+                    </a-checkbox>
+
                   </li>
                 </ul>
                 <a-pagination size="small" :total="50" class="paginationbox" :show-total="total => `总共 ${total} 条`" show-size-changer show-quick-jumper />
@@ -124,6 +147,7 @@
     data(){
       return{
         selectedRowKeys:[],
+        isNullInput:false,
         columns: [
           {
             title: '编号',
@@ -185,6 +209,7 @@
         ],
         selectOption:'全部',
         showList:false,
+        showbox:false,
         listOption:[
           {
             label:'list',
@@ -347,6 +372,14 @@
       }
     },
     methods:{
+      onChangecheck(value){
+        console.log(`checked = ${value.target.checked}`)
+        if(`checked = ${value.target.checked}` == 'checked = true'){
+          this.isNullInput = true;
+        }else{
+          this.isNullInput = false;
+        }
+      },
       selectModel(value){
         this.selectOption=value
         if(value=='文档库'){
@@ -355,6 +388,26 @@
           this.showList=false
         }
       },
+      callback(key){
+        console.log(key)
+        this.selectOption=key
+        // if(key =='全部' || key =='知识问题库' || key =='文档对比库' || key =='周报') {
+        //   this.showbox = true
+        // }else{
+        //   this.showbox = false
+        //   this.showList=true
+        // }
+        if(key=='文档库'){
+          this.showList=true
+        }else{
+          this.showList=false
+        }
+        if(key=='段落'){
+          this.searchShow=true
+        }else{
+          this.searchShow=false
+        }
+      },
       onSearch(){
 
       },
@@ -378,12 +431,22 @@
 
 <style lang="less" scoped>
   .search-center{
+    background-color: #ffffff;
+    .null-input{
+      background-color: #F2F4F8;
+    }
+
+    .no-null-input{
+
+      background-color: rgba(255, 255, 255, 0.8);
+    }
     .search-center-wrap{
       margin: 10px;
       .search-detail{
         display: flex;
         //justify-content: center;
         .search-detail-wrap{
+          margin-top: 30px;
           min-width: 800px;
           display: flex;
           justify-content: space-between;
@@ -391,6 +454,7 @@
             width: 120px;
             margin-right: 10px;
             line-height: 32px;
+
           }
           input{
             min-width: 300px;
@@ -428,37 +492,12 @@
               color:#ffffff;
             }
           }
-          .search-header-right{
-            span{
-              border: 1px solid rgba(0,0,0,0.65);
-              cursor: pointer;
-              padding: 2px 5px;
-              border-right: none;
-            }
-            span:last-child{
-              border-right: 1px solid rgba(0,0,0,0.65) ;
-            }
-            .header-list{
-              font-size: 20px;
-              border: 1px solid gray;
-              padding: 5px;
-            }
-            .header-list:hover{
-              color:#1890FF;
-            }
-            .header-list-active{
-              background: #1890FF;
-              color: #ffffff;
-            }
-            .header-list-active:hover{
-              color: #ffffff;
-            }
 
-          }
         }
         .search-con-text{
-          .search-text-wrap{
 
+          .search-text-wrap{
+            margin-top: -27px;
             background: #ffffff;
             height: 100%;
             display: flex;
@@ -471,24 +510,30 @@
                 .text-left-select{
                   display: flex;
                   justify-content: space-between;
-                  margin: 10px 0;
+                  margin: 23px 0;
                   line-height: 32px;
                   .text-sel{
-                    margin-right: 10px;
+                    //span{
-                    min-width: 70px;
+                    //  float: right;
+                    //}
+                    text-align: right;
+                    margin-right: 27px;
+                    min-width: 83px;
                   }
                   .text-select{
                     flex: 1;
+                    //margin-top: 10px;
                   }
                 }
                 .text-left-date{
                   display: flex;
                   justify-content: space-between;
                   line-height: 32px;
-                  margin: 10px 0;
+                  margin: 23px 0;
                   span.data-fb{
+                    text-align: right;
                     margin-right: 10px;
-                    min-width: 70px;
+                    min-width: 83px;
                   }
                 }
               }
@@ -499,7 +544,38 @@
               //border: 1px solid #000;
               margin-left: 10px;
               .search-text-title{
-                padding: 3px 5px;
+                padding: 16px 5px;
+                .search-header-right{
+                  float: right;
+                  margin-top: -2px;
+                  a-icon{
+
+                    border: 1px solid rgba(0,0,0,0.65);
+                    cursor: pointer;
+                    padding: 2px 5px;
+                    border-right: none;
+                  }
+                  a-icon:last-child{
+                    border-right: 1px solid rgba(0,0,0,0.65) ;
+                  }
+                  .header-list{
+                    font-size: 20px;
+                    border: 1px solid gray;
+                    border-radius: 3px;
+                    padding: 3px;
+                  }
+                  .header-list:hover{
+                    color:#00B3BE;
+                  }
+                  .header-list-active{
+                    border:1px solid #00B3BE;
+                    color:#00B3BE;
+                  }
+                  .header-list-active:hover{
+                    color: gray;
+                  }
+
+                }
               }
               .search-text-list{
                 ul {
@@ -508,7 +584,7 @@
                   li{
                     list-style: none;
                     margin-bottom: 20px;
-                    background: #f6f6f6;
+                    //background: #f6f6f6;
                     //border: 1px solid #000000;
                     //border-radius: 10px;
                     padding: 10px;