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

修改搜索中心的细节

Browse Source
This commit is contained in:
qq787203167
2022-02-21 11:19:50 +08:00
parent b6f2cb6909
commit 5865b6a3b5
1 changed files with 326 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/views/documentTools/searchCenter/index.vue
+121 -65
View File
@@ -9,7 +9,7 @@
<!-- <a-button type="primary">搜索</a-button>--> <!-- <a-button type="primary">搜索</a-button>-->
<!-- <a-button>清空</a-button>--> <!-- <a-button>清空</a-button>-->
<a-input-group compact v-if="showList" :style="{width:'500px',marginBottom:'15px'}"> <a-input-group compact v-if="showList">
<a-select default-value="Option1"> <a-select default-value="Option1">
<a-select-option value="Option1"> <a-select-option value="Option1">
标题 标题
@@ -18,7 +18,6 @@
Option2 Option2
</a-select-option> </a-select-option>
</a-select> </a-select>
<!-- <a-input style="width: 70%" allowClear default-value="input content" />-->
<a-input-search <a-input-search
allowClear allowClear
style="width: 70%" style="width: 70%"
@@ -29,7 +28,6 @@
<a-input-search <a-input-search
v-else v-else
allowClear allowClear
:style="{width:'500px',marginBottom:'15px'}"
placeholder="请输入搜索内容" placeholder="请输入搜索内容"
@search="onSearch" @search="onSearch"
></a-input-search> ></a-input-search>
@@ -40,29 +38,15 @@
<div class="search-center-content"> <div class="search-center-content">
<div class="search-con-header"> <div class="search-con-header">
<div class="search-header-left"> <div class="search-header-left">
<!-- <span>搜索模块</span>--> <a-tabs default-active-key="全部" @change="callback">
<a-tabs style="width:1276px" default-active-key="1" @change="callback">
<a-tab-pane key="全部" tab="全部"></a-tab-pane> <a-tab-pane key="全部" tab="全部"></a-tab-pane>
<a-tab-pane key="文档库" tab="文档库" force-render> <a-tab-pane key="文档库" tab="文档库" force-render>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="知识问题库" tab="知识问题库"></a-tab-pane> <a-tab-pane key="知识问题库" tab="知识问题库"></a-tab-pane>
<a-tab-pane key="文档对比库" tab="文档对比库"></a-tab-pane> <a-tab-pane key="文档对比库" tab="文档对比库"></a-tab-pane>
<a-tab-pane key="周报" tab="周报"></a-tab-pane> <a-tab-pane key="周报" tab="周报"></a-tab-pane>
</a-tabs> </a-tabs>
<!-- <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>
<!-- <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>
<div class="search-con-text"> <div class="search-con-text">
<div class="search-text-wrap"> <div class="search-text-wrap">
@@ -70,7 +54,8 @@
<div class="text-left-wrap"> <div class="text-left-wrap">
<div class="text-left-select" v-for="item in searchOption" :key="item.id"> <div class="text-left-select" v-for="item in searchOption" :key="item.id">
<span class="text-sel">{{item.value}}</span> <span class="text-sel">{{item.value}}</span>
<a-select class="text-select" :default-value="item.option[0].value" style="width: 120px" @change="handleChange"> <a-select class="text-select" :default-value="item.option[0].value" style="width: 120px"
@change="handleChange">
<a-select-option v-for="opt in item.option" :value="opt.value"> <a-select-option v-for="opt in item.option" :value="opt.value">
{{opt.value}} {{opt.value}}
</a-select-option> </a-select-option>
@@ -116,9 +101,15 @@
</a-table> </a-table>
<ul v-if="!searchShow"> <ul v-if="!searchShow">
<a-checkbox-group v-model="checkboxText" style="margin-top: 20px;">
<li v-for="item in conList" :key="item.id"> <li v-for="item in conList" :key="item.id">
<a-checkbox @change="onChangecheck" style="margin-top: 20px;"> <div style="margin-top: -67px;
<div :class="{ 'null-input':isNullInput, 'no-null-input':!isNullInput}" style="margin-top: -67px;margin-left: 45px;padding: 24px;"> margin-bottom: 10px;
padding: 24px 24px 24px 0;position: relative">
<a-checkbox :value="item.id" class="checkbox-left"></a-checkbox>
<div class="text-text-right"
@click="checkedClick(item)"
:class="{ 'null-input':item.checked }">
<div class="text-header"> <div class="text-header">
<span>{{item.type}}</span> <span>{{item.type}}</span>
<span>{{item.number}}</span> <span>{{item.number}}</span>
@@ -128,11 +119,12 @@
{{item.content}} {{item.content}}
</div> </div>
</div> </div>
</a-checkbox> </div>
</li> </li>
</a-checkbox-group>
</ul> </ul>
<a-pagination size="small" :total="50" class="paginationbox" :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> </div>
</div> </div>
@@ -153,41 +145,41 @@
columns: [ columns: [
{ {
title: '编号', title: '编号',
align: "center", align: 'center',
dataIndex: 'templateCode' dataIndex: 'templateCode'
}, },
{ {
title: '标题', title: '标题',
align: "center", align: 'center',
dataIndex: 'templateName' dataIndex: 'templateName'
}, },
{ {
title: '文件名称', title: '文件名称',
align: "center", align: 'center',
dataIndex: 'templateContent', dataIndex: 'templateContent'
}, },
{ {
title: '状态', title: '状态',
align: "center", align: 'center',
dataIndex: 'templateContent', dataIndex: 'templateContent',
sorter: (a, b) => a.age - b.age, sorter: (a, b) => a.age - b.age
}, },
{ {
title: '适用地区', title: '适用地区',
align: "center", align: 'center',
dataIndex: 'templateContent', dataIndex: 'templateContent',
sorter: (a, b) => a.age - b.age, sorter: (a, b) => a.age - b.age
}, },
{ {
title: '功能领域', title: '功能领域',
align: "center", align: 'center',
dataIndex: 'templateContent', dataIndex: 'templateContent'
}, },
{ {
title: '技术领域', title: '技术领域',
align: "center", align: 'center',
dataIndex: 'templateContent', dataIndex: 'templateContent'
}, }
], ],
options: [ options: [
{ {
@@ -270,7 +262,7 @@
option: [ option: [
{ {
label: 'china', label: 'china',
value:'中国', value: '中国'
}, },
{ {
label: 'english', label: 'english',
@@ -285,7 +277,7 @@
option: [ option: [
{ {
label: 'china', label: 'china',
value:'中国', value: '中国'
}, },
{ {
label: 'english', label: 'english',
@@ -300,7 +292,7 @@
option: [ option: [
{ {
label: 'china', label: 'china',
value:'中国', value: '中国'
}, },
{ {
label: 'english', label: 'english',
@@ -315,7 +307,7 @@
option: [ option: [
{ {
label: 'china', label: 'china',
value:'中国', value: '中国'
}, },
{ {
label: 'english', label: 'english',
@@ -330,7 +322,7 @@
option: [ option: [
{ {
label: 'china', label: 'china',
value:'中国', value: '中国'
}, },
{ {
label: 'english', label: 'english',
@@ -345,7 +337,7 @@
option: [ option: [
{ {
label: 'china', label: 'china',
value:'中国', value: '中国'
}, },
{ {
label: 'english', label: 'english',
@@ -360,7 +352,7 @@
option: [ option: [
{ {
label: 'china', label: 'china',
value:'中国', value: '中国'
}, },
{ {
label: 'english', label: 'english',
@@ -370,18 +362,36 @@
} }
], ],
searchShow: false, searchShow: false,
checkboxText: []
}
},
watch: {
checkboxText: function(value) {
this.conList.forEach(val => {
val.checked = false
})
if (value.length > 0) {
this.conList.forEach(val => {
value.forEach(res => {
if (res === val.id) {
val.checked = true
}
})
})
}
this.conList = [...this.conList]
} }
}, },
methods: { methods: {
onChangecheck(value){ checkedClick(item) {
console.log(value) if (item.checked){
console.log(`checked = ${value.target.checked}`) this.checkboxText = this.checkboxText.filter(res=>{
if(`checked = ${value.target.checked}` == 'checked = true'){ return res !== item.id
this.isNullInput = true; })
}else{ }else{
this.isNullInput = false; this.checkboxText.push(item.id)
} }
console.log(this.checkboxText)
}, },
selectModel(value) { selectModel(value) {
this.selectOption = value this.selectOption = value
@@ -427,94 +437,111 @@
}, },
onChange(date, dateString) { onChange(date, dateString) {
// console.log(date, dateString); // console.log(date, dateString);
}, }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.search-center { .search-center {
background-color: #ffffff; /*background-color: #ffffff;*/
.null-input { .null-input {
background-color: #F2F4F8; background-color: #F2F4F8;
} }
.no-null-input { .no-null-input {
/*background-color: rgba(255, 255, 255, 0.8);*/
background-color: rgba(255, 255, 255, 0.8);
} }
.search-center-wrap { .search-center-wrap {
margin: 10px; margin: 10px;
.search-detail { .search-detail {
display: flex; display: flex;
//justify-content: center; //justify-content: center;
.search-detail-wrap { .search-detail-wrap {
margin-top: 30px;
min-width: 800px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.search-detail-title { .search-detail-title {
width: 120px; width: 120px;
margin-right: 10px; margin-right: 10px;
line-height: 32px; line-height: 32px;
} }
input { input {
min-width: 300px; min-width: 300px;
margin-right: 30px; margin-right: 30px;
} }
button { button {
margin-right: 20px; margin-right: 20px;
} }
a { a {
width: 140px; width: 140px;
line-height: 32px; line-height: 32px;
} }
} }
} }
.search-center-content { .search-center-content {
.search-con-header { .search-con-header {
width: 100%;
padding: 10px 0; padding: 10px 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.search-header-left { .search-header-left {
width: 100%;
span { span {
margin-right: 10px; margin-right: 10px;
padding: 4px 20px; padding: 4px 20px;
} }
.search-header-item:hover { .search-header-item:hover {
color: #1890FF; color: #1890FF;
cursor: pointer; cursor: pointer;
} }
.search-header-item-active { .search-header-item-active {
background: #1890FF; background: #1890FF;
border-radius: 15px; border-radius: 15px;
color: #ffffff; color: #ffffff;
} }
.search-header-item-active:hover { .search-header-item-active:hover {
color: #ffffff; color: #ffffff;
} }
} }
} }
.search-con-text { .search-con-text {
.search-text-wrap { .search-text-wrap {
margin-top: -27px; margin-top: -27px;
background: #ffffff; /*background: #ffffff;*/
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
.text-left { .text-left {
//border:1px solid #000; border-right: 1px solid #e8e8e8;
min-width: 290px; min-width: 310px;
padding: 0 10px;
box-sizing: border-box;
.text-left-wrap { .text-left-wrap {
padding: 5px; padding: 5px;
.text-left-select { .text-left-select {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 23px 0; margin: 23px 0;
line-height: 32px; line-height: 32px;
.text-sel { .text-sel {
//span{ //span{
// float: right; // float: right;
@@ -523,16 +550,19 @@
margin-right: 27px; margin-right: 27px;
min-width: 83px; min-width: 83px;
} }
.text-select { .text-select {
flex: 1; flex: 1;
//margin-top: 10px; //margin-top: 10px;
} }
} }
.text-left-date { .text-left-date {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
line-height: 32px; line-height: 32px;
margin: 23px 0; margin: 23px 0;
span.data-fb { span.data-fb {
text-align: right; text-align: right;
margin-right: 26px; margin-right: 26px;
@@ -541,16 +571,19 @@
} }
} }
} }
.text-right { .text-right {
width: 100%; width: 100%;
position: relative; position: relative;
//border: 1px solid #000; margin-left: 16px;
margin-left: 10px;
.search-text-title { .search-text-title {
padding: 16px 5px; padding: 16px 5px;
.search-header-right { .search-header-right {
float: right; float: right;
margin-top: -2px; margin-top: -2px;
a-icon { a-icon {
border: 1px solid rgba(0, 0, 0, 0.65); border: 1px solid rgba(0, 0, 0, 0.65);
@@ -558,39 +591,46 @@
padding: 2px 5px; padding: 2px 5px;
border-right: none; border-right: none;
} }
a-icon:last-child { a-icon:last-child {
border-right: 1px solid rgba(0, 0, 0, 0.65); border-right: 1px solid rgba(0, 0, 0, 0.65);
} }
.header-list { .header-list {
font-size: 20px; font-size: 20px;
border: 1px solid gray; border: 1px solid gray;
border-radius: 3px; border-radius: 3px;
padding: 3px; padding: 3px;
} }
.header-list:hover { .header-list:hover {
color: #00B3BE; color: #00B3BE;
} }
.header-list-active { .header-list-active {
border: 1px solid #00B3BE; border: 1px solid #00B3BE;
color: #00B3BE; color: #00B3BE;
} }
.header-list-active:hover { .header-list-active:hover {
color: gray; color: gray;
} }
} }
} }
.search-text-list { .search-text-list {
ul { ul {
padding: 10px; padding: 10px;
margin: 0; margin: 0;
li { li {
list-style: none; list-style: none;
margin-bottom: 20px;
//background: #f6f6f6; //background: #f6f6f6;
//border: 1px solid #000000; //border: 1px solid #000000;
//border-radius: 10px; //border-radius: 10px;
padding: 10px; padding: 10px;
.text-header { .text-header {
span { span {
margin-right: 20px; margin-right: 20px;
@@ -600,12 +640,14 @@
} }
} }
} }
.paginationbox { .paginationbox {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
} }
} }
.ant-pagination { .ant-pagination {
margin-bottom: 10px; margin-bottom: 10px;
} }
@@ -615,4 +657,18 @@
} }
} }
} }
.checkbox-left {
float: left;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.text-text-right {
padding: 12px 20px;
box-sizing: border-box;
margin-left: 35px;
}
</style> </style>