WL/laws_weilai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zyx.net
2022-02-16 15:04:41 +08:00
parent ecd346a827
commit 091cc44429
1 changed files with 118 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/views/documentTools/searchCenter/index.vue
+118 -19
View File
@@ -3,27 +3,54 @@
<div class="search-center-wrap">
<div class="search-detail">
<div class="search-detail-wrap">
<div class="search-detail-title">搜索内容</div>
<a-input placeholder="请输入搜索内容" />
<a-button type="primary">搜索</a-button>
<a-button>清空</a-button>
<a href="javascript:;">结果中检索</a>
<!-- <div class="search-detail-title">搜索内容</div>-->
<!-- <a-input placeholder="请输入搜索内容" />-->
<!-- <a-button type="primary">搜索</a-button>-->
<!-- <a-button>清空</a-button>-->
<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-radius: 10px;
//border: 1px solid #000000;
//border-radius: 10px;
padding: 10px;
.text-header{
span{
@@ -427,6 +521,11 @@
}
}
}
.paginationbox{
position: absolute;
bottom: 0;
right: 0;
}
}
.ant-pagination{
margin-bottom: 10px;