<template>
|
<div>
|
<div
|
v-show="!$route.query.searchOptionHidden"
|
class="wrap"
|
v-loading="tabLoading"
|
>
|
<div class="arrangement e7f9ef">
|
<div class="primaryBack title">{{ arrangement.name }}:</div>
|
<div class="classification">
|
<div :class="arrangement.openTag ? 'txtBox show' : 'txtBox'">
|
<span
|
:class="
|
selectListKey.indexOf(cval.value) > -1
|
? 'txt primaryTxt'
|
: 'txt'
|
"
|
v-for="(cval, ckey) in arrangement.child"
|
:key="ckey"
|
@click="selectTxt(arrangement.name, cval.value, cval.name, ckey)"
|
>{{ cval.name }}</span
|
>
|
</div>
|
<span
|
v-if="Object.keys(arrangement.child).length > 12"
|
class="more"
|
@click="showList(arrangement)"
|
>{{ arrangement.openTag ? "收起" : "展开" }}
|
<img
|
src="@/assets/images/packUp.png"
|
v-if="arrangement.openTag"
|
alt=""
|
srcset=""
|
/>
|
<img src="@/assets/images/packDown.png" alt="" v-else srcset="" />
|
</span>
|
</div>
|
</div>
|
<div class="arrangement">
|
<div class="flex">
|
<span class="title">{{ catalogue.name }}:</span>
|
<div :class="catalogue.openTag ? 'txtBox show' : 'txtBox'">
|
<span
|
:class="
|
selectListKey.indexOf(cval.value) > -1
|
? 'txt primaryTxt'
|
: 'txt'
|
"
|
v-for="(cval, ckey) in catalogue.child"
|
:key="ckey"
|
@click="selectTxt(catalogue.name, cval.value, cval.name)"
|
>{{ cval.name }}</span
|
>
|
</div>
|
<span
|
v-if="Object.keys(catalogue.child).length > 12"
|
class="more"
|
@click="showList(catalogue)"
|
>{{ catalogue.openTag ? "收起" : "展开" }}
|
<img
|
src="@/assets/images/packUp.png"
|
v-if="catalogue.openTag"
|
alt=""
|
srcset=""
|
/>
|
<img src="@/assets/images/packDown.png" alt="" v-else srcset="" />
|
</span>
|
</div>
|
</div>
|
<div class="arrangement dashedBorder">
|
<div class="flex">
|
<span class="title">{{ projectTitle.name }}:</span>
|
<div :class="projectTitle.openTag ? 'txtBox show' : 'txtBox'">
|
<span
|
:class="
|
selectListKey.indexOf(cval.value) > -1
|
? 'txt primaryTxt'
|
: 'txt'
|
"
|
v-for="(cval, ckey) in projectTitle.child"
|
:key="ckey"
|
@click="selectTxt(projectTitle.name, cval.value, cval.name)"
|
>{{ cval.name }}</span
|
>
|
</div>
|
<span
|
v-if="Object.keys(projectTitle.child).length > 12"
|
class="more"
|
@click="showList(projectTitle)"
|
>{{ projectTitle.openTag ? "收起" : "展开" }}
|
<img
|
src="@/assets/images/packUp.png"
|
v-if="projectTitle.openTag"
|
alt=""
|
srcset=""
|
/>
|
<img src="@/assets/images/packDown.png" alt="" v-else srcset="" />
|
</span>
|
</div>
|
</div>
|
</div>
|
|
<div v-show="!$route.query.searchOptionHidden" class="wrap retrieval">
|
<div>
|
层次：{{ selectListName[0] }}
|
<img
|
v-show="selectListName[0] != '全部'"
|
src="@/assets/images/delete.png"
|
class="deleteImg"
|
@click="deleteOption(0)"
|
alt=""
|
/>
|
<el-divider direction="vertical"></el-divider>分类：{{
|
selectListName[1]
|
}}
|
<img
|
v-show="selectListName[1] != '全部'"
|
src="@/assets/images/delete.png"
|
class="deleteImg"
|
@click="deleteOption(1)"
|
alt=""
|
/>
|
<el-divider direction="vertical"></el-divider>立项冠名：
|
{{ selectListName[2] }}
|
<img
|
v-show="selectListName[2] != '全部'"
|
src="@/assets/images/delete.png"
|
class="deleteImg"
|
@click="deleteOption(2)"
|
alt=""
|
/>
|
</div>
|
<div>共计：{{ totalCount }}本</div>
|
</div>
|
<div class="crumbs" v-show="$route.query.searchOptionHidden">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<DataList
|
ref="dataList"
|
:channel="channel"
|
:selectListKey="selectListKey"
|
@gainTotalCount="gainTotalCount"
|
:detailRoute="detailRoute"
|
></DataList>
|
</div>
|
</template>
|
<script>
|
import DataList from "@/components/list/data.vue";
|
export default {
|
components: {
|
DataList
|
},
|
props: {
|
channel: {
|
type: String
|
},
|
detailRoute: {
|
type: String
|
}
|
},
|
data() {
|
return {
|
arrangement: {
|
name: "层次",
|
openTag: false,
|
child: []
|
},
|
catalogue: {
|
name: "分类",
|
openTag: false,
|
child: []
|
},
|
projectTitle: {
|
name: "立项冠名",
|
openTag: false,
|
child: []
|
},
|
totalCount: 0,
|
selectListKey: ["All", "arrangementAll", "projectTitleAll"],
|
selectListName: ["全部", "全部", "全部"]
|
};
|
},
|
created() {
|
this.getHierarchyType();
|
this.getProjectTitle();
|
},
|
methods: {
|
// 获取层次类型一级分类
|
getHierarchyType() {
|
this.tabLoading = true;
|
let query = {
|
refCodes: ["caupress_catalogue"]
|
};
|
this.MG.store.getProductTypeField(query).then((res) => {
|
this.arrangement.child = JSON.parse(res[0].config).option;
|
let allChild = [
|
{
|
name: "全部",
|
value: "arrangementAll",
|
checked: ""
|
}
|
];
|
this.arrangement.child.map((item) => {
|
if (item.child) {
|
allChild = allChild.concat(item.child);
|
}
|
if (item.child) {
|
item.child.unshift({
|
name: "全部",
|
value: "arrangementAll",
|
checked: ""
|
});
|
} else {
|
item.child = [
|
{
|
name: "全部",
|
value: "arrangementAll",
|
checked: ""
|
}
|
];
|
}
|
});
|
this.arrangement.child.unshift({
|
name: "全部",
|
value: "All",
|
child: allChild,
|
checked: ""
|
});
|
this.catalogue.child = this.arrangement.child[0].child;
|
this.tabLoading = false;
|
console.log(this.arrangement);
|
});
|
},
|
// 获取立项冠名
|
getProjectTitle() {
|
this.tabLoading = true;
|
let query = {
|
refCodes: ["caupress_projectTitle"]
|
};
|
this.MG.store.getProductTypeField(query).then((res) => {
|
this.projectTitle.child = JSON.parse(res[0].config).option;
|
this.projectTitle.child.unshift({
|
name: "全部",
|
value: "projectTitleAll",
|
checked: ""
|
});
|
this.tabLoading = false;
|
});
|
},
|
// 控制标签列表展开
|
showList(data) {
|
data.openTag = !data.openTag;
|
this.$forceUpdate();
|
},
|
// 选择条件
|
selectTxt(key, cval, cname, ckey) {
|
console.log(cval,"cval");
|
console.log(key,"key");
|
console.log(cname,"cname");
|
console.log(ckey,"ckey");
|
switch (key) {
|
case "层次":
|
this.$set(this.selectListKey, 0, cval);
|
this.selectListName[0] = cname;
|
this.catalogue.child = this.arrangement.child[ckey].child;
|
// 重置分类
|
this.deleteOption(1);
|
break;
|
case "分类":
|
this.$set(this.selectListKey, 1, cval);
|
this.selectListName[1] = cname;
|
this.$refs.dataList.paginationData.page = 1;
|
console.log(this.selectListKey,"this.selectListKey");
|
this.$refs.dataList.getData();
|
break;
|
case "立项冠名":
|
this.$set(this.selectListKey, 2, cval);
|
this.selectListName[2] = cname;
|
this.$refs.dataList.paginationData.page = 1;
|
this.$refs.dataList.getData();
|
break;
|
}
|
},
|
// 删除标签
|
deleteOption(index) {
|
this.selectListName[index] = "全部";
|
switch (index) {
|
case 0:
|
this.$set(this.selectListKey, 0, "All");
|
// 重置分类
|
this.deleteOption(1);
|
break;
|
case 1:
|
this.$set(this.selectListKey, 1, "arrangementAll");
|
break;
|
case 2:
|
this.$set(this.selectListKey, 2, "projectTitleAll");
|
}
|
// 重新获取数据
|
this.$refs.dataList.paginationData.page = 1;
|
this.$refs.dataList.getData();
|
},
|
// 更新查询总数量
|
gainTotalCount(total) {
|
this.totalCount = total;
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.crumbs {
|
padding: 35px 0;
|
line-height: 70px;
|
}
|
.wrap {
|
padding: 20px;
|
margin-bottom: 10px;
|
background-color: #fff;
|
.e7f9ef {
|
background-color: #e7f9ef;
|
border: 1px solid #ededed;
|
border-radius: 4px;
|
}
|
.arrangement {
|
width: 100%;
|
line-height: 60px;
|
display: flex;
|
.title {
|
font-size: 16px;
|
font-weight: bold;
|
width: 80px;
|
text-align: center;
|
border-top-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
}
|
.txtBox {
|
overflow: hidden;
|
height: 60px;
|
display: flex;
|
flex: 1;
|
flex-wrap: wrap;
|
.txt {
|
line-height: 60px;
|
padding: 0 20px;
|
cursor: pointer;
|
}
|
}
|
.show {
|
height: auto;
|
}
|
.more {
|
width: 50px;
|
color: #999999;
|
cursor: pointer;
|
}
|
}
|
.dashedBorder {
|
border-top: 1px dashed #ededed;
|
}
|
}
|
.retrieval {
|
display: flex;
|
justify-content: space-between;
|
color: #999999;
|
> div {
|
line-height: 21px;
|
}
|
:deep(.el-divider--vertical) {
|
width: 0;
|
border: 1px dashed #dcdfe6;
|
height: 21px;
|
margin: 0 30px;
|
}
|
:deep(.el-divider) {
|
background-color: #fff;
|
}
|
.deleteImg {
|
display: inline-block;
|
width: 9px;
|
height: 9px;
|
margin-left: 10px;
|
cursor: pointer;
|
}
|
}
|
</style>
|
