|
|
@@ -0,0 +1,352 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <!-- 标签 -->
|
|
|
+ <div class="tags">
|
|
|
+ <el-tabs
|
|
|
+ v-model="clickCollect"
|
|
|
+ class="demo-tabs"
|
|
|
+ @tab-click="changeSearchFor"
|
|
|
+ >
|
|
|
+ <el-tab-pane label="常用" name="first"></el-tab-pane>
|
|
|
+ <el-tab-pane label="默认" name="second"></el-tab-pane>
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="item in tabList"
|
|
|
+ :key="item.labelId"
|
|
|
+ :label="item.labelName"
|
|
|
+ :name="item.labelId"
|
|
|
+ ></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <!-- 添加标签 -->
|
|
|
+ <div class="addCollect">
|
|
|
+ <el-icon color="#2E6BC8">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ <span @click="addCollectFn">添加标签</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-collapse v-model="activeNames" @change="handleChange">
|
|
|
+ <div v-if="isList">
|
|
|
+ <el-collapse-item name="folder">
|
|
|
+ <template #title>
|
|
|
+ <span class="collapseItem_title">文件夹</span>
|
|
|
+ </template>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ height="250"
|
|
|
+ :scrollbar-always-on="true"
|
|
|
+ >
|
|
|
+ <el-table-column fixed prop="date" label="名称" width="500">
|
|
|
+ <template #default="scope">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ class="table_icon"
|
|
|
+ src="@/assets/images/fileBox.png"
|
|
|
+ alt=""
|
|
|
+ style=""
|
|
|
+ />
|
|
|
+ {{ scope.row.date }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="时间" width="200" />
|
|
|
+ <el-table-column prop="state" label="类型" width="180" />
|
|
|
+ <el-table-column prop="city" label="大小" width="160" />
|
|
|
+ </el-table>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="file">
|
|
|
+ <template #title>
|
|
|
+ <span class="collapseItem_title">文件</span>
|
|
|
+ </template>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ height="250"
|
|
|
+ :scrollbar-always-on="true"
|
|
|
+ >
|
|
|
+ <el-table-column fixed prop="date" label="名称" width="500">
|
|
|
+ <template #default="scope">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ class="table_icon"
|
|
|
+ src="@/assets/images/fileBox.png"
|
|
|
+ alt=""
|
|
|
+ style=""
|
|
|
+ />
|
|
|
+ {{ scope.row.date }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="时间" width="200" />
|
|
|
+ <el-table-column prop="state" label="类型" width="180" />
|
|
|
+ <el-table-column prop="city" label="大小" width="160" />
|
|
|
+ </el-table>
|
|
|
+ </el-collapse-item>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-collapse-item name="folder">
|
|
|
+ <template #title>
|
|
|
+ <span class="collapseItem_title">文件夹</span>
|
|
|
+ </template>
|
|
|
+ <!-- 平铺 -->
|
|
|
+ <el-scrollbar height="360px">
|
|
|
+ <div class="tile_box">
|
|
|
+ <div class="file_box" v-for="item in 20" :key="item">
|
|
|
+ <img
|
|
|
+ class="big_file_img"
|
|
|
+ src="@/assets/images/fileBox.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span>Inceptos</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item name="file">
|
|
|
+ <template #title>
|
|
|
+ <span class="collapseItem_title">文件</span>
|
|
|
+ </template>
|
|
|
+ <!-- 平铺 -->
|
|
|
+ <el-scrollbar height="360px">
|
|
|
+ <div class="tile_box">
|
|
|
+ <div class="file_box" v-for="item in 20" :key="item">
|
|
|
+ <img
|
|
|
+ class="big_file_img"
|
|
|
+ src="@/assets/images/fileType//file／DOC.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span>Inceptos</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </el-collapse-item>
|
|
|
+ </div>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
+import { listLabel, addLabel } from "@/api/biz/label.js";
|
|
|
+import { listFavorite } from "@/api/biz/favorite.js";
|
|
|
+const activeNames = ref(["folder", "file"]);
|
|
|
+const clickCollect = ref("first"); //当前标签
|
|
|
+const tabList = ref([]);
|
|
|
+const tableData = [
|
|
|
+ {
|
|
|
+ date: "2016-05-03",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-02",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-04",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-01",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-08",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-06",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-07",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+];
|
|
|
+onMounted(async () => {
|
|
|
+ await getList();
|
|
|
+ await getCollectList()
|
|
|
+});
|
|
|
+//添加标签
|
|
|
+const addCollectFn = async () => {
|
|
|
+ const res = await addLabel({
|
|
|
+ labelName: "tab1",
|
|
|
+ params: {},
|
|
|
+ });
|
|
|
+ if (res.code == 200) {
|
|
|
+ getList();
|
|
|
+ }
|
|
|
+};
|
|
|
+//获取标签数据
|
|
|
+const getList = async () => {
|
|
|
+ const res = await listLabel();
|
|
|
+ console.log("tabList =", res);
|
|
|
+ if (res.rows.length > 0) {
|
|
|
+ tabList.value = res.rows;
|
|
|
+ }
|
|
|
+};
|
|
|
+//获取收藏数据
|
|
|
+const getCollectList = async () => {
|
|
|
+ const res = await listFavorite();
|
|
|
+// console.log("collectres = ", res);
|
|
|
+ if(res.code === 200 && res.rows.length>0){
|
|
|
+ tableData.value = res.rows
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.container {
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ .tags {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-top: 1px solid #c1cce3;
|
|
|
+ border-bottom: 1px solid #c1cce3;
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ }
|
|
|
+ .addCollect {
|
|
|
+ margin-left: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2e6bc8;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// tag间距
|
|
|
+::v-deep .el-tabs__item {
|
|
|
+ padding: 0 16px !important;
|
|
|
+ color: #505870 !important;
|
|
|
+ font-weight: 400 !important;
|
|
|
+}
|
|
|
+::v-deep .el-tabs--top .el-tabs__item.is-top:last-child {
|
|
|
+ padding-right: 0 !important;
|
|
|
+}
|
|
|
+// tag选中颜色
|
|
|
+::v-deep .el-tabs__item.is-active {
|
|
|
+ color: #2e6bc8 !important;
|
|
|
+ font-weight: normal;
|
|
|
+ font-family: Inter-SemiBold;
|
|
|
+}
|
|
|
+::v-deep .el-tabs__active-bar {
|
|
|
+ background-color: #2e6bc8;
|
|
|
+}
|
|
|
+
|
|
|
+.table_icon {
|
|
|
+ height: 27px;
|
|
|
+ width: 27px;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+::v-deep .el-collapse-item__content {
|
|
|
+ padding-bottom: 0;
|
|
|
+}
|
|
|
+::v-deep .el-collapse-item__header {
|
|
|
+ background-color: #ebeff6 !important;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 24px !important;
|
|
|
+}
|
|
|
+::v-deep .el-collapse-item__arrow {
|
|
|
+ position: relative;
|
|
|
+ color: #2e6bc8;
|
|
|
+ right: 97%;
|
|
|
+}
|
|
|
+::v-deep .el-table td.el-table__cell {
|
|
|
+ border: none;
|
|
|
+ font-size: 14px !important;
|
|
|
+ font-weight: 400 !important;
|
|
|
+ color: #000 !important;
|
|
|
+}
|
|
|
+::v-deep .el-table__row {
|
|
|
+ height: 35px !important;
|
|
|
+}
|
|
|
+::v-deep .el-table .el-table__header-wrapper th {
|
|
|
+ border-bottom: none;
|
|
|
+ border-right: 1px solid #c1cce3;
|
|
|
+ background-color: #fff !important;
|
|
|
+ color: #505870;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.collapseItem_title {
|
|
|
+ position: relative;
|
|
|
+ left: 40px;
|
|
|
+ color: #2e6bc8;
|
|
|
+ font-family: Inter-Medium;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+// 表格右边3个靠右对齐
|
|
|
+::v-deep .el-table__header thead tr th {
|
|
|
+ font-family: Inter-Medium;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #505870;
|
|
|
+ text-align: right;
|
|
|
+ &:nth-child(1) {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .el-table__body tbody [class*="column_"] {
|
|
|
+ text-align: right;
|
|
|
+ &:nth-child(4n + 1) {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+}
|
|
|
+//平铺
|
|
|
+.tile_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .file_box {
|
|
|
+ width: 116px;
|
|
|
+ min-height: 138px;
|
|
|
+ // border: 1px solid #000;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .big_file_img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
liuQiang
