precise_delivery_distribution_front/src/views/put/component/direction-exclusion.vue

<template>
  <div class="direction-exclusion">
    <a-input-search
      v-model:value="search"
      :placeholder="
        type === 'crowd' ? '请输入人群包名称或ID' : '请输入媒体包名称或ID'
      "
      style="width: 200px"
      @input="onSearch"
    />
    <br />
    <div class="common-box list-box">
      <div class="title-box">
        <!-- 人群定向 -->
        <h3 style="width: 120px" v-if="type === 'crowd'">人群包</h3>
        <h3 style="width: 184px" v-else>定向包</h3>
        <h3 style="width: 100px" v-if="type === 'crowd'">创建时间</h3>
        <h3 :style="type === 'crowd' ? 'width: 70px' : 'width: 90px'">操作</h3>
      </div>
      <div class="list">
        <a-empty v-show="list.length == 0"></a-empty>
        <!-- 人群定向循环列表 -->
        <p v-for="item in list" :key="item.id">
          <span
            v-if="type === 'crowd'"
            :title="item.name"
            style="width: 110px"
            class="item-name"
            >{{ item.name }}</span
          >
          <span
            v-else
            :title="item.name"
            style="width: 180px"
            class="item-name"
            >{{ item.name }}</span
          >
          <span
            style="width: 100px; margin: 0 20px 0 10px"
            v-if="type === 'crowd'"
            >{{ item.time }}</span
          >
          <span :style="'width:' + type === 'crowd' ? '70px' : '90px'">
            <a-button
              style="padding: 4px"
              type="link"
              @click="addDirection(item)"
              :disabled="directionList.idList.includes(item.id)"
              >定向</a-button
            >
            <a-button
              style="padding: 0"
              type="link"
              @click="addExclusion(item)"
              :disabled="exclusionList.idList.includes(item.id)"
              >排除</a-button
            >
          </span>
        </p>
      </div>
    </div>
    <div class="common-box selected-box">
      <div class="title-box">
        <span
          style="
            display: block;
            font-weight: bold;
            line-height: 30px;
            float: left;
            font-size: 13px;
          "
          >已选</span
        >
        <h3 class="clear-all" @click="clearAll">全部清空</h3>
      </div>
      <div class="tabs">
        <span
          :class="selectedKey === 'direction' ? 'tabs-active' : ''"
          @click="selectedKey = 'direction'"
          >定向({{ directionList.itemList.length }})</span
        >
        <span
          :class="selectedKey === 'exclusion' ? 'tabs-active' : ''"
          @click="selectedKey = 'exclusion'"
          >排除({{ exclusionList.itemList.length }})</span
        >
      </div>
      <div class="selected-item">
        <div v-show="selectedKey === 'direction'">
          <p v-for="item in directionList.itemList" :key="item.id">
            <span>{{ item.name }}</span>
            <i
              class="iconfont icon-guanbi"
              @click="deleteDirectionItem(item.id)"
            ></i>
          </p>
        </div>
        <div v-show="selectedKey === 'exclusion'">
          <p v-for="item in exclusionList.itemList" :key="item.id">
            <span>{{ item.name }}</span>
            <i
              class="iconfont icon-guanbi"
              @click="deleteExclusionItem(item.id)"
            ></i>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { getMediaPackage } from "@/api";
import { message } from "ant-design-vue";
// 1691995913023502
const DirectionExclusion = defineComponent({
  props: ["compType"],
  setup() {
    const state = reactive({
      search: "", // 过滤
      selectedKey: "direction",
      type: "crowd", // 人群组件/媒体组件
      list: ref<any[]>([]),
      originList: [
        {
          name: "测试人群包A测试人群包A测试人群包A",
          time: "2020-01-10",
          id: 1,
        },
        {
          name: "测试人群包B",
          time: "2020-01-10",
          id: 2,
        },
        {
          name: "测试人群包B",
          time: "2020-01-10",
          id: 3,
        },
        {
          name: "测试人群包B",
          time: "2020-01-10",
          id: 4,
        },
        {
          name: "测试人群包B",
          time: "2020-01-10",
          id: 5,
        },
        {
          name: "测试人群包B",
          time: "2020-01-10",
          id: 6,
        },
        {
          name: "测试人群包B",
          time: "2020-01-10",
          id: 7,
        },
        {
          name: "测试人群包B",
          time: "2020-01-10",
          id: 8,
        },
      ],
      directionList: {
        itemList: ref<any[]>([]), // 渲染数组
        idList: ref<any[]>([]), // 传参数组
      },
      exclusionList: {
        itemList: ref<any[]>([]), // 渲染数组
        idList: ref<any[]>([]), // 传参数组
      },
    });
    return { ...toRefs(state) };
  },
  mounted() {
    this.type = this.$props.compType === "media" ? "media" : "crowd";
    this.list = JSON.parse(JSON.stringify(this.originList));
    this.getList();
  },
  methods: {
    async getList() {
      this.list = [];
      let { data } = await getMediaPackage({
        advertiser_id: this.$route.query.advertiser_id,
        page: 1,
        page_size: 99,
      });
      console.log("定向包数据", data);
      if (data.list.length > 0) {
        data.list.forEach((item: any) => {
          this.list.push({ name: item.name, id: item.flow_package_id });
        });
      }
    },
    // 添加定向
    addDirection(val: any) {
      this.directionList.itemList.push(val);
      this.directionList.idList.push(val.id);
      if (this.exclusionList.idList.includes(val.id)) {
        this.deleteExclusionItem(val.id);
      }
      this.selectedKey = "direction";
    },
    // 添加排除
    addExclusion(val: any) {
      this.exclusionList.itemList.push(val);
      this.exclusionList.idList.push(val.id);
      if (this.directionList.idList.includes(val.id)) {
        this.deleteDirectionItem(val.id);
      }
      this.selectedKey = "exclusion";
    },
    // 全部删除
    clearAll() {
      this.directionList.itemList = [];
      this.directionList.idList = [];
      this.exclusionList.itemList = [];
      this.exclusionList.idList = [];
    },
    // 根据id删除定向项
    deleteDirectionItem(id: any) {
      this.directionList.idList.splice(
        this.directionList.idList.indexOf(id),
        1
      );
      this.directionList.itemList.forEach((item: any) => {
        if (item.id === id) {
          this.directionList.itemList.splice(
            this.directionList.itemList.indexOf(item),
            1
          );
        }
      });
    },
    // 根据id删除排除项
    deleteExclusionItem(id: any) {
      this.exclusionList.idList.splice(
        this.exclusionList.idList.indexOf(id),
        1
      );
      this.exclusionList.itemList.forEach((item: any) => {
        if (item.id === id) {
          this.exclusionList.itemList.splice(
            this.exclusionList.itemList.indexOf(item),
            1
          );
        }
      });
    },
    // 返回过滤结果
    onSearch() {
      this.list = this.originList.filter((item: any) => {
        return (
          item.name.indexOf(this.search) > -1 ||
          item.id.indexOf(this.search) > -1
        );
      });
    },

    // 获取父组件数据回显
    showData(directionArr: any, exclusionArr: any) {
      if (directionArr.length > 0) {
        this.list.forEach((item) => {
          if (directionArr.includes(item.value)) {
            this.directionList.idList.push(item.value);
            this.directionList.itemList.push(item);
          }
        });
      }
      if (exclusionArr.length > 0) {
        this.list.forEach((item) => {
          if (exclusionArr.includes(item.value)) {
            this.exclusionList.idList.push(item.value);
            this.exclusionList.itemList.push(item);
          }
        });
      }
    },
    // 返回给父组件数据
    backData() {
      console.log(this.directionList);
      let data = {
        direction: this.directionList.idList,
        exclusion: this.exclusionList.idList,
      };
      return data;
    },
  },
});

export default DirectionExclusion;
</script>
<style lang="scss" scoped>
.direction-exclusion {
  width: 560px;
  overflow: hidden;
  .common-box {
    height: 210px;
    float: left;
    border: 1px solid rgb(210, 210, 210);
    border-radius: 2px;
    .title-box {
      padding: 0 10px;
      height: 30px;
      border-bottom: 1px solid rgb(210, 210, 210);
      h3 {
        font-size: 13px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        float: left;
        margin-bottom: 0;
      }
      .clear-all {
        font-size: 13px;
        font-weight: normal;
        color: gray;
        float: right;
        cursor: pointer;
      }
    }
    .list {
      height: 180px;
      padding: 4px 10px;
      overflow: auto;
      p {
        height: 28px;
        line-height: 28px;
        .item-name {
          display: block;
          float: left;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
        }
      }
    }
  }
  .list-box {
    width: 320px;
  }
  .selected-box {
    width: 200px;
    margin-left: 20px;
    .tabs {
      width: 100%;
      display: flex;
      justify-content: space-around;
      span {
        cursor: pointer;
        display: inline-block;
        line-height: 30px;
      }
      .tabs-active {
        color: rgb(80, 138, 245);
        border-bottom: 3px solid rgb(80, 138, 245);
      }
    }
    .selected-item {
      height: 140px;
      padding: 0px 10px;
      overflow: auto;
      p {
        background: rgb(240, 240, 240);
        height: 26px;
        line-height: 26px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 6px;
        font-size: 13px;
        span {
          display: inline-block;
          width: 130px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          border-radius: 2px;
        }
        i {
          cursor: pointer;
          font-size: 13px;
          &:hover {
            color: skyblue;
          }
        }
      }
    }
  }
}
</style>