cofortest-frontend/src/components/project/ProjectSearch.vue

<template>
  <el-select v-model="selectedProjectCode" filterable :filter-method="projectDataFilter" @click.native="eqNoClick">
    <el-option
      v-for="project in searchProjects"
      :key="project.code"
      :label="project.name"
      :value="project.code"
    />
  </el-select>
</template>

<script>
import Api from '@/js/api'
import Http from '@/js/http'
import {notify} from '@/constants'
import {mapGetters} from 'vuex'

export default {
  name: 'ProjectSearch',
  data: function () {
    return {
      projects: [],
      searchProjects: [],
      selectedProjectCode: ''
    }
  },
  props: {
    firstSelectedProjectCode: {
      type: String,
      default: ''
    }
  },
  created () {
    this.selectedProjectCode = this.firstSelectedProjectCode
    this.getSimpleProjectDatas()
  },
  watch: {
    'selectedProjectCode': {
      immediate: true,
      handler: function () {
        if (this.getRefreshTaskListFunc()) {
          this.getRefreshTaskListFunc()(this.selectedProjectCode)
        }
      }
    }
  },
  methods: {
    ...mapGetters(['getRefreshTaskListFunc']),
    projectDataFilter (val) {
      if (val) {
        this.searchProjects = this.projects.filter(project => {
          return project.name.includes(val)
        })
      } else {
        this.searchProjects = this.projects
      }
    },
    eqNoClick () {
      this.searchProjects = this.projects
    },
    getSimpleProjectDatas () {
      Http.get(Api.PROJECT.GET_SIMPLE_DATAS).then((res) => {
        this.projects = res.data
        this.searchProjects = res.data
      }).catch((error) => {
        notify('error', '获取项目列表数据失败：系统异常')
      })
    }
  }
}
</script>

<style scoped>

</style>