green-valley-admin/src/components/Banner/BannerSearch.vue

<template>
  <div class="d-flex flex-wrap pb-3">
    <div>
      <!-- 启用 -->
      <a-select
        @change="getUse($event, 'recStatus')"
        allow-clear
        class="ml-3"
        default-value="启用"
        style="width: 150px"
      >
        <a-select-option :key="item" :value="index" v-for="(item, index) in enable">{{ item }}</a-select-option>
      </a-select>
      <!-- 跳转类型 -->
      <a-select
        @change="getUse($event, 'jumpType')"
        allow-clear
        class="ml-3"
        default-value="不跳转"
        style="width: 150px"
      >
        <a-select-option :key="item" :value="index" v-for="(item, index) in enable1">{{ item }}</a-select-option>
      </a-select>
      <!-- 页面显示位置 -->
      <a-select
        @change="getUse($event, 'showPage')"
        allow-clear
        class="ml-3"
        placeholder="查询全部"
        style="width: 250px"
      >
        <a-select-option :key="item.name" :value="item.page" v-for="item in enable2">{{ item.name }}</a-select-option>
      </a-select>
      <a-button @click="handleTableChange" class="mx-2" type="primary">搜索</a-button>
    </div>

    <div class="flex-1"></div>

    <a-button @click="showModal" class="editable-add-btn" type="primary">增加</a-button>

    <!-- 添加 -->
    <banner-add :visible="visible" @closeModal="closeModal" @handleTableChange="handleTableChange" />
  </div>
</template>

<script>
import BannerAdd from 'components/Banner/BannerAdd.vue';
// import { selLikeTeam } from 'config/api';

export default {
  name: 'BannerSearch',
  components: { BannerAdd },
  data() {
    return {
      visible: false,
      enable: ['启用', '禁用'],
      enable1: ['不跳转', 'H5'],
      enable2: [
        {
          name: '首页',
          page: 0,
        },
        {
          name: '关于我们-公司介绍',
          page: 11,
        },
        {
          name: '关于我们-组织机构',
          page: 12,
        },
        {
          name: '创新平台-创新资源平台',
          page: 32,
        },
        {
          name: '创新平台-科技创新服务',
          page: 33,
        },
        {
          name: ':孵化平台-众创空间',
          page: 41,
        },
        {
          name: '孵化平台-公共实验室',
          page: 42,
        },
        {
          name: '孵化平台-中试基地',
          page: 43,
        },
        {
          name: '孵化平台-创业导师',
          page: 44,
        },
        {
          name: '孵化平台-孵化场所',
          page: 45,
        },
        {
          name: '孵化平台-创业服务',
          page: 46,
        },
        {
          name: '孵化平台-众创空间-虚拟众创空间',
          page: 48,
        },
        {
          name: '孵化平台-众创空间-实体众创空间',
          page: 49,
        },
        {
          name: '产业平台-产业服务',
          page: 52,
        },
      ],
      paramData: {
        jumpType: 0, // 跳转类型
        recStatus: 0, // 状态
        showPage: '', // 显示位置
      },
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },

    closeModal() {
      this.visible = false;
    },

    // 改变搜索条件
    getUse(value, str) {
      this.paramData[str] = value;
      console.log(this.paramData[str]);
    },

    handleTableChange() {
      this.$emit('getListData', this.paramData);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus"></style>