cloudfile-ui/src/views/collect/index.vue

<template>
  <div class="container">
    <!-- 标签 -->
    <div class="tags">
      <!-- TODO 标签可以拖动位置 -->
      <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"
          @contextmenu.prevent="checkRight($event, item)"
        ></el-tab-pane>
      </el-tabs>
      <!-- 添加标签 -->
      <div class="addCollect">
        <div v-if="!isAddCollect">
          <el-icon color="#2E6BC8">
            <Plus />
          </el-icon>
          <span @click="toAddCollectFn">添加标签</span>
        </div>
        <div v-else>
          <el-input
            v-model="tabName"
            size="mini"
            @blur="addCollectFn"
            maxlength="32"
            :autofocus="true"
          ></el-input>
        </div>
      </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>
  <!-- 右键唤出的菜单 -->
  <div
    class="right_menu"
    v-show="visible"
    :style="{ left: left + 'px', top: top + 'px' }"
  >
    <div class="menu_item">
      <img src="@/assets/images/textbox.png" alt="" />
      <span>重命名</span>
    </div>
    <div class="menu_item">
      <img src="@/assets/images/trash.png" alt="" />
      <span>删除</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { listLabel, addLabel, delLabel } from "@/api/biz/label.js";
import { listFavorite } from "@/api/biz/favorite.js";
const activeNames = ref(["folder", "file"]);
const clickCollect = ref("first"); //当前标签
const isAddCollect = ref(false); //是否在添加标签
const tabName = ref(""); //新增的标签名
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",
  },
];
const visible = ref(false); //显示右键菜单
const top = ref(0);
const left = ref(0);
onMounted(async () => {
  await getList();
  await getCollectList();
});
// tab右键事件
const checkRight = (e, item) => {
  console.log('11');
  // TODO 唤出右键菜单，思路：获取鼠标位置来定位菜单
  this.visible = true;
  top.value = e.pageY;
  left.value = e.pageX;
};
// 关闭右键菜单
const closeMenu = () => {
  visible.value = false;
};
//添加标签
const toAddCollectFn = async () => {
  isAddCollect.value = true;
  // const res = await addLabel({
  //   labelName: "tab1",
  //   params: {},
  // });
  // if (res.code == 200) {
  //   getList();
  // }
};
const addCollectFn = async () => {
  if (!tabName.value) {
    isAddCollect.value = false;
    return;
  }
  const res = await addLabel({
    labelName: tabName.value,
  });
  if (res.code == 200) {
    isAddCollect.value = false;
    tabName.value = "";
    getList();
  }
};
//获取标签数据
const getList = async () => {
  const res = await listLabel();
  console.log("tabList =", res);
  if (res.rows.length > 0) {
    tabList.value = res.rows;
  }
};
// 删除标签
const delTabs = async () => {
  const res = await delLabel("7"); //直接传id
  console.log("delres = ", res);
  getList();
};
//获取收藏数据
const getCollectList = async () => {
  const res = await listFavorite();
  //   console.log("collectres = ", res);
  if (res.code === 200 && res.rows.length > 0) {
    tableData.value = res.rows;
  }
};

watch(
  () => visible.value,
  (nv, ov) => {
    if (nv) {
      console.log('r',nv);
      document.body.addEventListener("click", closeMenu());
    } else {
      document.body.removeEventListener("click",closeMenu());
    }
  }
);
</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;
    vertical-align: middle;
  }
}
.right_menu {
  width: 100px;
  padding: 8px;
  box-shadow: 0px 2px 10px 1px rgba(199, 203, 216, 0.4);
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #c1cce3;
  .menu_item {
    width: 100%;
    height: 40px;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    align-items: center;
    &:hover {
      background-color: #f5f7f9;
    }
    span {
      margin-left: 4px;
    }
  }
}

// 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>