sl-sfy-safety/src/views/page-config/component/PageMain.vue

<template>
  <div>
    <div class="add-page-box">
      <div class="add-config">
        <div class="add-box" @click="handleAddPage">
          <div>
            <el-icon class="add-icon" size="24px"><Plus /></el-icon>
          </div>
          <div class="add-content">新建主页</div>
        </div>
      </div>

      <div
        v-for="item in companyLayoutList"
        :key="item.id"
        class="content-show"
        :class="{ 'content-active': item.id === IconId }"
        @mouseover="showDeleteIcon(item)"
        @mouseleave="hideDeleteIcon(item)"
      >
        <div class="pic-box" @click="handleClick(item)">
          <MapContainerSmall
            ref="mapContainerRef"
            :bg-image-url="(item.layout as any).bgInfo.img"
            :show-shops="(item.layout as any).shopList"
            class="content-pic"
          />
        </div>

        <div class="pic-word">
          <el-checkbox @change="toSend(item.id, $event)" />
          <img src="~@/assets/icons/file.png" alt="" style="margin-left: 5px" />
          <div class="pic-name">{{ item.name }}</div>
          <img
            v-show="item.id === IconId"
            src="~@/assets/icons/del.png"
            alt=""
            style="margin-left: 20px"
            @click.stop="deleteItem(item)"
          />
        </div>
      </div> </div
  ></div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { Plus } from '@element-plus/icons-vue';
  import { getCompanyLayoutList, delCompanyLayout } from '@/api/scene/scene';
  import MapContainerSmall from './mapContainer/MapContainerSmall.vue';

  interface companyLayoutType {
    createdAt: string;
    id: number;
    isDelete: number;
    labelId: number;
    layout: string;
    name: string;
    status: number;
    targetId: number;
    updatedAt: string;
    version: string;
    viewType: number;
  }
  const companyLayoutList = ref<companyLayoutType[]>([]);

  onMounted(() => {
    getCompanyLayoutList().then((res) => {
      companyLayoutList.value = res;
      companyLayoutList.value = companyLayoutList.value.map((item) => {
        item.layout = JSON.parse(item.layout);
        return item;
      });
      console.log('companyLayoutList.value', companyLayoutList.value);
    });
  });

  const router = useRouter();

  const handleAddPage = () => {
    router.push('/page-config/config');
  };

  const IconId = ref<number>();
  const showDeleteIcon = (item) => {
    IconId.value = item.id;
  };

  const hideDeleteIcon = (_item) => {
    IconId.value = undefined;
  };

  const handleClick = (item) => {
    router.push({
      path: '/page-config/config',
      query: { companyId: item.targetId, labelId: item.labelId },
    });
  };

  let sendId = new Set();
  const toSend = (id, v) => {
    if (v) {
      sendId.add(id);
    } else {
      if (sendId.has(id)) {
        sendId.delete(id);
      }
    }
  };

  const deleteItem = (item) => {
    // 处理删除逻辑
    delCompanyLayout(item.id).then(() => {
      getCompanyLayoutList().then((res) => {
        companyLayoutList.value = res;
        companyLayoutList.value = companyLayoutList.value.map((item) => {
          item.layout = JSON.parse(item.layout);
          return item;
        });
      });
    });
  };

  // const label = ref('');
</script>

<style lang="scss" sctep>
  .search-btn {
    width: 340px;
    height: 32px;
    background: #f0f2f5;
    border-radius: 6px;
  }

  .add-page-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 24px;
    align-content: flex-start;
  }

  .add-config {
    width: 216px;
    height: 191px;
    margin-right: 26px;
  }

  .add-box {
    width: 104px;
    height: 104px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 5px;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    margin-left: 56px;
    margin-top: 43px;
  }

  .add-icon {
    margin-left: 40px;
    margin-top: 24px;
  }

  .add-content {
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
  }

  .config-box {
    height: 700px;
  }

  .label-select {
    margin-right: 17px;
    border-radius: 4px;
    // border: 1px solid rgba(0, 0, 0, 0.15);
  }

  .content-show {
    // display: flex;
    width: 216px;
    height: 191px;
    margin-left: 26px;
    border: 1px solid #e8ecf2;
    margin-bottom: 24px;
    cursor: pointer;
    border-radius: 5px;
  }

  .content-active {
    box-shadow: 0px 1px 10px 1px rgba(24, 144, 255, 0.5);
  }

  .pic-box {
    height: 146px;
    width: 216px;
    background: #e8ecf2;
    padding-left: 17px;
    padding-top: 17px;
  }

  .content-pic {
    // margin-left: 17px;
    // margin-top: 17px;
    width: 182px;
    height: 114px;
  }

  .pic-word {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px 15px;
  }
  .pic-name {
    margin-left: 8px;
    margin-top: 2px;
    font-size: 12px;
  }

  // .del-icon {
  //   position: absolute;
  //   right: 17px;
  //   bottom: 3px;
  // }
</style>