From ef37c59e055a990ce247b265b27d3fcef430a243 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期五, 15 八月 2025 10:19:18 +0800
Subject: [PATCH] first submit
---
src/components/list/index.vue | 387 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 387 insertions(+), 0 deletions(-)
diff --git a/src/components/list/index.vue b/src/components/list/index.vue
new file mode 100644
index 0000000..f00e87e
--- /dev/null
+++ b/src/components/list/index.vue
@@ -0,0 +1,387 @@
+<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>
--
Gitblit v1.9.1