修改文档工具-搜索中心布局

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

@@ -3,27 +3,54 @@
       <div class="search-center-wrap">
         <div class="search-detail">
           <div class="search-detail-wrap">
-            <div class="search-detail-title">搜索内容</div>
+<!--            <div class="search-detail-title">搜索内容</div>-->
-            <a-input placeholder="请输入搜索内容" />
+<!--            <a-input placeholder="请输入搜索内容" />-->
-            <a-button type="primary">搜索</a-button>
+<!--            <a-button type="primary">搜索</a-button>-->
-            <a-button>清空</a-button>
+<!--            <a-button>清空</a-button>-->
-            <a href="javascript:;">结果中检索</a>
+
+            <a-input-group compact v-if="showList" :style="{width:'500px',marginBottom:'15px'}">
+              <a-select default-value="Option1">
+                <a-select-option value="Option1">
+                  标题
+                </a-select-option>
+                <a-select-option value="Option2">
+                  Option2
+                </a-select-option>
+              </a-select>
+<!--              <a-input style="width: 70%" allowClear default-value="input content" />-->
+              <a-input-search
+                allowClear
+                style="width: 70%"
+                placeholder="请输入搜索内容"
+                @search="onSearch"
+              ></a-input-search>
+            </a-input-group>
+            <a-input-search
+              v-else
+              allowClear
+              :style="{width:'500px',marginBottom:'15px'}"
+              placeholder="请输入搜索内容"
+              @search="onSearch"
+            ></a-input-search>
+<!--            <a-button @click="searchReset(1)" style="margin-left: 20px" icon="redo">重置</a-button>-->
+<!--            <a href="javascript:;">结果中检索</a>-->
           </div>
         </div>
         <div class="search-center-content">
           <div class="search-con-header">
             <div class="search-header-left">
-              <span>搜索模块</span>
+<!--              <span>搜索模块</span>-->
               <span class="search-header-item" v-for="item in options"
                 :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">
-              <span v-for="item in listOption" class="header-list"
+<!--              <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)"
-              >{{item.value}}</span>
+              ></a-icon>
             </div>
           </div>
           <div class="search-con-text">
@@ -54,7 +81,22 @@
                   <span>纯电动</span>
                 </div>
                 <div class="search-text-list">
-                <ul>
+                  <a-table
+                    v-if="searchShow"
+                    ref="table"
+                    size="middle"
+                    bordered
+                    rowKey="id"
+                    :data-source="tableData"
+                    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+                    :columns="columns"
+                    >
+                    <!-- 字符串超长截取省略号显示-->
+                    <span slot="templateContent" slot-scope="text">
+                      <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">
                       <span>{{item.type}}</span>
@@ -66,7 +108,7 @@
                     </div>
                   </li>
                 </ul>
-                <a-pagination size="small" :total="50" :show-total="total => `总共 ${total} 条`" show-size-changer show-quick-jumper />
+                <a-pagination size="small" :total="50" class="paginationbox" :show-total="total => `总共 ${total} 条`" show-size-changer show-quick-jumper />
               </div>
               </div>
             </div>
@@ -81,6 +123,46 @@
     name: 'searchCenter',
     data(){
       return{
+        selectedRowKeys:[],
+        columns: [
+          {
+            title: '编号',
+            align: "center",
+            dataIndex: 'templateCode'
+          },
+          {
+            title: '标题',
+            align: "center",
+            dataIndex: 'templateName'
+          },
+          {
+            title: '文件名称',
+            align: "center",
+            dataIndex: 'templateContent',
+          },
+          {
+            title: '状态',
+            align: "center",
+            dataIndex: 'templateContent',
+            sorter: (a, b) => a.age - b.age,
+          },
+          {
+            title: '适用地区',
+            align: "center",
+            dataIndex: 'templateContent',
+            sorter: (a, b) => a.age - b.age,
+          },
+          {
+            title: '功能领域',
+            align: "center",
+            dataIndex: 'templateContent',
+          },
+          {
+            title: '技术领域',
+            align: "center",
+            dataIndex: 'templateContent',
+          },
+        ],
         options:[
           {
             label:'all',
@@ -107,10 +189,12 @@
           {
             label:'list',
             value:'列表',
+            type:'appstore'
           },
           {
             label:'graph',
-            value:'段落'
+            value:'段落',
+            type:'unordered-list'
           }
         ],
         selectList:'列表',
@@ -155,7 +239,7 @@
           {
             id:1,
             label:'categary',
-            value:'使用区域',
+            value:'适用区域',
             option:[
               {
                 label:'china',
@@ -215,7 +299,7 @@
           {
             id:5,
             label:'trial',
-            value:'试用范围',
+            value:'适用范围',
             option:[
               {
                 label:'china',
@@ -270,6 +354,9 @@
         }else{
           this.showList=false
         }
+      },
+      onSearch(){
+
       },
       selectListModel(value){
         this.selectList=value
@@ -295,7 +382,7 @@
       margin: 10px;
       .search-detail{
         display: flex;
-        justify-content: center;
+        //justify-content: center;
         .search-detail-wrap{
           min-width: 800px;
           display: flex;
@@ -351,6 +438,11 @@
             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;
             }
@@ -370,9 +462,9 @@
             background: #ffffff;
             height: 100%;
             display: flex;
-            justify-content: space-between;
+            justify-content: flex-start;
             .text-left{
-              border:1px solid #000;
+              //border:1px solid #000;
               min-width: 290px;
               .text-left-wrap{
                 padding: 5px;
@@ -402,7 +494,9 @@
               }
             }
             .text-right{
-              border: 1px solid #000;
+              width: 100%;
+              position: relative;
+              //border: 1px solid #000;
               margin-left: 10px;
               .search-text-title{
                 padding: 3px 5px;
@@ -415,8 +509,8 @@
                     list-style: none;
                     margin-bottom: 20px;
                     background: #f6f6f6;
-                    border: 1px solid #000000;
+                    //border: 1px solid #000000;
-                    border-radius: 10px;
+                    //border-radius: 10px;
                     padding: 10px;
                     .text-header{
                       span{
@@ -427,6 +521,11 @@
                     }
                   }
                 }
+                .paginationbox{
+                  position: absolute;
+                  bottom: 0;
+                  right: 0;
+                }
               }
               .ant-pagination{
                 margin-bottom: 10px;