dz-app/pages/ie/components/picker/college-picker.vue

<template>
  <u-popup :show="localShow" mode="bottom" @close="localShow=false" top="0px">
    <mx-filter-page title="选择院校" :filter-parms="queryParams" :local-data="filter"
                    requires-init-fill use-alias-mapping custom-nav-show custom-nav-back
                    @search="handleSearch" @navBack="localShow=false">
      <view class="fx-row fx-cen-cen px12 bg-white bd-b-1" style="height: 44px">
        <u-search v-model="keyword" @search="handleNameSearch2" @custom="handleNameSearch2"/>
      </view>
      <mx-scroll-empty ref="mescroll" :auto-load="false" :mescroll-ignore-height="44" @query="handleQuery">
        <view v-if="categoryNode" class="h44 bg-white fx-row ai-cen pl20">
          <u-text type="warning" prefix-icon="bell" :icon-style="{color: $u.color.warning}" :text="`仅显示包含[${categoryNode.name}]专业的院校`" />
        </view>
        <view class="pt5 pl10 pr10 pb40">
          <university-item v-for="item in dataList" :key="item.id" :item="item" class="mt5" @click.native="handleConfirm(item)"/>
        </view>
      </mx-scroll-empty>
    </mx-filter-page>
  </u-popup>
</template>

<script>
import CollegeLibrary from "@/pages/career/college-major/components/college-library.vue";
import {findTreeNode} from "@/common/tools/tree-helper";

export default {
  name: "college-picker",
  extends: CollegeLibrary,
  props: {
    show: {
      type: Boolean,
      default: false
    },
    excepts: {
      // 互拆选择的时候传入
      type: Array,
      default: () => []
    },
    majorCategory: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      majorTree: [],
      localShow: this.show || false
    }
  },
  computed: {
    categoryNode() {
      if (!this.majorCategory) return null
      return findTreeNode(this.majorTree, n => n.code == this.majorCategory)
    },
    extraParams() {
      if (!this.majorCategory) return null
      return  { majorCategory: this.majorCategory}
    }
  },
  watch: {
    show(val) {
      this.localShow = val
    },
    localShow(val) {
      this.$emit('update:show', val)
    }
  },
  mounted() {
    this.loadMajorTree()
  },
  methods: {
    async loadMajorTree() {
      this.majorTree = await this.$store.cache.dispatch('cachedData/GET_ALL_MAJORS')
    },
    handleNameSearch() {
      // override default action: watch keyword change.
      // do nothing here. break always searching mode.
    },
    handleNameSearch2() {
      // only do searching while `complete` or `search` button clicked
      this.$refs.mescroll.reset()
    },
    handleConfirm(item) {
      if (this.excepts.includes(item.code)) {
        this.$message.error('您已经选择过该院校了')
        return
      }
      // emit confirm event
      this.$emit('confirm', item)
      this.localShow = false
    }
  }
}
</script>

<style scoped>
</style>