precise_delivery_distribution_front/src/views/material/component/search.vue

<template>
  <div class="search-bar">
    <a-tabs v-model:activeKey="search.is_pubilc" @change="onSubmit">
      <a-tab-pane :key="1" tab="公共素材"></a-tab-pane>
      <a-tab-pane :key="0" tab="个人素材"></a-tab-pane>
    </a-tabs>
    <div class="search-item">
      <span class="label">{{
        type === "video" ? "视频名称：" : "图片名称："
      }}</span>
      <a-input
        v-model:value="search.videoName"
        v-if="type === 'video'"
        placeholder="请输入"
      />
      <a-input
        v-model:value="search.imageName"
        v-if="type === 'picture'"
        placeholder="请输入"
      />
    </div>
    <div class="search-item">
      <span class="label">{{
        type === "video" ? "视频类型：" : "图片类型："
      }}</span>
      <a-select
        placeholder="请选择"
        style="width: 200px"
        v-if="type === 'video'"
        v-model:value="search.videotype"
      >
        <a-select-option value="H">横板视频</a-select-option>
        <a-select-option value="S">竖板视频</a-select-option>
      </a-select>
      <a-select
        placeholder="请选择"
        style="width: 200px"
        v-if="type === 'picture'"
        v-model:value="search.imagetype"
      >
        <a-select-option value="H">横版大图</a-select-option>
        <a-select-option value="S">竖版大图</a-select-option>
        <a-select-option value="X">小图</a-select-option>
      </a-select>
    </div>
    <div class="search-item">
      <span class="label">推广书籍：</span>
      <a-select
        style="width: 200px"
        v-model:value="search.bookname"
        placeholder="请选择"
      >
        <a-select-option value="shanghai">Zone one</a-select-option>
        <a-select-option value="beijing">Zone two</a-select-option>
      </a-select>
    </div>
    <span class="flag" @click="openFlag = openFlag ? false : true"
      >{{ openFlag ? "收起" : "展开" }}
      <i v-if="openFlag" class="iconfont icon-shouqi"></i>
      <i v-else class="iconfont icon-zhankai"></i
    ></span>
    <div class="search-item" v-show="openFlag">
      <span class="label">需求方：</span>
      <a-input
        v-model:value="search.demander"
        type="text"
        placeholder="请输入"
      />
    </div>
    <div class="search-item" v-show="openFlag">
      <span class="label">文案：</span>
      <a-input v-model:value="search.editor" type="text" placeholder="请输入" />
    </div>
    <div class="search-item" v-show="openFlag">
      <span class="label">上传者：</span>
      <a-input
        v-model:value="search.uploader"
        type="text"
        placeholder="请输入"
      />
    </div>
    <div class="search-item">
      <span class="label"></span>
      <a-button type="primary" @click="onSubmit">搜索</a-button>
      <a-button style="margin-left: 10px" @click="reset">重置</a-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { message } from "ant-design-vue";
const PictureLibrary = defineComponent({
  components: {},
  props: ["materialType"],
  setup(props) {
    const state = reactive({
      type: "", // 组件类型： video:picture
      openFlag: true, // 展开/收起
      search: {
        is_pubilc: 1, // 1公共素材 0个人素材
        videoName: "", // 视频名称
        videotype: "", // 视频类型
        imageName: "", // 图片名称
        imagetype: "", // 图片类型
        bookname: "", // 推广书籍
        demander: "", // 需求方
        editor: "", // 文案
        uploader: "", // 上传者
      },
    });
    return { ...toRefs(state) };
  },

  mounted() {
    console.log("TYPE", this.$props.materialType);
    this.type = this.$props.materialType;
    this.onSubmit();
  },
  methods: {
    // 搜索
    onSubmit() {
      console.log(this.search);
      let param: any = {
        is_pubilc: this.search.is_pubilc,
        book_name: this.search.bookname,
        demander: this.search.demander,
        editor: this.search.editor,
        uploader: this.search.uploader,
      };
      if (this.type === "video") {
        param.video_name = this.search.videoName;
        param.video_type = this.search.videotype;
      }
      if (this.type === "picture") {
        param.image_name = this.search.imageName;
        param.image_type = this.search.imagetype;
      }
      console.log("上传搜索条件", param);
      this.$emit("search", param);
    },
    // 重置
    reset() {
      this.search = {
        is_pubilc: this.search.is_pubilc, // 1公共素材 0个人素材
        videoName: "", // 视频名称
        videotype: "", // 视频类型
        imageName: "", // 图片名称
        imagetype: "", // 图片类型
        bookname: "", // 推广书籍
        demander: "", // 需求方
        editor: "", // 文案
        uploader: "", // 上传者
      };
    },
  },
});

export default PictureLibrary;
</script>
<style lang="scss" scoped>
@import "@/assets/common-style/frame.scss";
.search-bar {
  background: white;
  overflow: hidden;
  width: 100%;
  border-bottom: 1px solid rgb(204, 203, 203);
  .search-item {
    width: 25%;
    margin-left: 20px;
    float: left;
    display: flex;
    // justify-content: center;
    align-items: center;
    height: 50px;
    line-height: 50px;
    .label {
      width: 100px;
      height: 30px;
      line-height: 30px;
      display: block;
      text-align: right;
    }
    .ant-input,
    .ant-select-selector {
      width: 200px;
    }
  }
  .flag {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    &:hover {
      color: rgb(6, 138, 190);
    }
  }
}
</style>