ylst-pc/src/views/Creative/Material.vue

<template>
  <a-spin :spinning="loading">
    <div class="material">
      <div class="search">
        <a-menu v-model:selectedKeys="current" mode="horizontal">
          <a-menu-item :key="0">全部</a-menu-item>
          <a-menu-item v-for="(item) in THREE_D_TYPE_S" :key="item.type">{{item.name}}</a-menu-item>
        </a-menu>
        <a-input v-model:value="title" placeholder="请输入" style="width: 200px; margin-right: 5px;">
          <template v-slot:prefix>
            <SearchOutlined style="color: #BFBFBF;"/>
          </template>
          <template v-slot:suffix>
            <span @click="query" class="searchBtn">
              搜索
            </span>
          </template>
        </a-input>
        <a-button :disabled="!current.find(x => x)" type="primary" @click="createMaterialRef.show(current.find(x => x))">
          <PlusOutlined/> 新增
        </a-button>
      </div>
      <div v-if="rows.length" class="result">
        <div v-for="(row, index) in rows" :key="index" class="page-item">
          <div v-if="row" class="page-item-content">
            <div class="page-item-logo">
              <span v-if="!row.cover">暂无图片</span>
              <img v-else :src="row.cover" alt="">
            </div>
            <div class="page-item-title">
              <div class="pit-row" style="color: #262626;">
                {{row.title}}
                <div class="pit-tag" style="color: #0CC126; ">
                  {{THREE_D_TYPE_S.find(x => x.type == row.type)?.name}}
                </div>
              </div>
              <div class="pit-row" style="color: #8A8A8A;">
                <!-- 2022-08-08 -->
                --
                <div class="pit-more">
                  <a-dropdown placement="bottomCenter">
                    <a class="ant-dropdown-link" @click.prevent>
                      <i class="iconfont" style="color: #262626;">&#xe7ac;</i>
                    </a>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <a href="javascript:;" @click="previewerCreationRef.show()">预览</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a href="javascript:;" @click="renameMeterialRef.show(row)">重命名</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a href="javascript:;" style="color: red;" @click="del(row)">删除</a>
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <PreviewerCreation ref="previewerCreationRef" />
      <RenameMeterial ref="renameMeterialRef" @complete="query" />
      <CreateMaterial ref="createMaterialRef" @complete="query" />
    </div>
  </a-spin>
</template>

<script setup>

import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue"
import { computed, ref, watch } from "@vue/runtime-core";
import { Modal } from "ant-design-vue";
import PreviewerCreation from "./components/PreviewerCreation/Index.vue";
import RenameMeterial from "./components/RenameMeterial.vue";
import CreateMaterial from "./components/CreateMaterial.vue";
import { THREE_D_TYPE, THREE_D_TYPE_S } from "./components/CreateMaterial.constant";
import { getMaterialLibrary, delMaterialLibrary } from "./api";

const previewerCreationRef = ref();
const renameMeterialRef = ref();
const createMaterialRef = ref();

const current = ref([0]);

const title = ref("");

const rows = ref([]);

const loading = ref(true);


const query = async () => {
  loading.value = true;
  const res = await getMaterialLibrary({
    type: current.value[0] || "",
    title: title.value
  });

  loading.value = false;

  var left = res.data.length % 5;
  if(left) {
    res.data.push(...Array(5 - left).fill(null));
  }

  rows.value = res.data;
}

const del = (row) => {
  Modal.confirm({
    title: "确认删除",
    content: "删除素材后将不能找回，是否确认删除？",
    async onOk () { 
      await delMaterialLibrary(row.id);
      await query();
    },
    onCancel () { },
  });
}

watch(
  () => current.value,
  async () => {
    await query();
  },
  { immediate: true }
);

</script>

<style lang="scss" scoped>
.material{
  padding: 24px 33px;
  .search{
    display: flex;
    .searchBtn{
      cursor: pointer; 
      border-left: solid 1px #E8E8E8; 
      line-height: 16px;
      padding-left: 5px;
      color: #434343;
    }
  }
  :deep(.ant-menu-horizontal){
    line-height: 32px;
    border-bottom: 0;
    flex: 1;
  }
  :deep(.ant-menu-item:first-child){
    padding-left: 0;
  }
  :deep(.ant-menu-item:first-child::after){
    left: 0;
  }
  :deep(.ant-menu-item:last-child){
    padding-right: 0;
  }
  .result{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .page-item{
      width: 19%;
      height: 12vw;
      min-height: 100px;
      margin-top: 20px;
      .page-item-content{
        height: 100%;
        background: #FFFFFF;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        border: 1px solid #D3D3D3;
        display: flex;
        flex-direction: column;
      }
      .page-item-logo{
        flex: 10;
        text-align: center;
        overflow: hidden;
        span{
          display: block;
          margin-top: 3vw;
        }
        img{
          width: 100%;
          height: 100%;
        }
      }
      .page-item-title{
        flex: 5;
        border-top: solid 1px #D3D3D3;
        padding: 0.8vw 1vw 0 1vw;
        display: flex;
        flex-direction: column;
        .pit-row{
          flex: 1;
          display: block;
        }
        .pit-tag{
          width: 64px;
          height: 20px;
          line-height: 20px;
          border-radius: 3px 3px 3px 3px;
          opacity: 1;
          border: 1px solid;
          text-align: center;
          float: right;
          padding: 0 2px;
          box-sizing: content-box;
        }
        .pit-more{
          float: right;
          cursor: pointer;
        }
      }
    }
  }
}
</style>