yiliangyiyun-pc-jj/src/components/base/BaseShipDropdown/index.vue

<template>
  <div class="base_ship_dropdown">
    <span class="dropdown vesselDefault"
          v-if="vesselBankFlag">{{ getShip }}</span>
    <BaseDropdown v-else
                  trigger="click"
                  class="dropdown"
                  @visible-change="(val)=>changeIcon = val"
                  @command="shipOperation">
      <span class="el-dropdown-link">
        <BaseLink class="total"
                  :underline="false"
                  style="font-size:12px;"
                  type="primary">{{ getShip }}</BaseLink>
        <!-- {{ getShip }} -->
        <i class="iconfont"
           :class="changeIcon?'iconshangjiantou':'iconxiajiantou'" />
      </span>
      <BaseDropdownMenu slot="dropdown">
        <BaseDropdownItem v-for="(item, value) in options"
                          :key="item.vesselId+value"
                          :command="item.vesselId">
          {{ $t(item.vesselName) }}
        </BaseDropdownItem>
        <BaseDropdownItem v-if="(options||[]).length===0">
        </BaseDropdownItem>
      </BaseDropdownMenu>
    </BaseDropdown>
  </div>
</template>
<script>
/**
 * @Author lihui
 * @Date 2020-11-19
 * @description 【船舶选择器】 岸基  船端  岸基+船端 规则： 全部> 岸基> 船端 默认请求船端船舶接口
 * @param {boolean} showAll - 是否显示 全部船舶
 * @param {boolean} landAndShipBased - 是否为岸基+船端船舶
 * @event emit('on-mounted', val) - 初始化后回调函数 val 加载回来具体的值
 * @event emit('input', val) - 双向数据绑定的值 可以直接使用 v-model
 * @event emit('change', val,val2) - 数据改变是触发 change 事件 val 选中的值 val2 当前选中object 节点值
 */

import { mapActions, mapGetters, mapState } from 'vuex'
import { findIndex, cloneDeep, find, get } from 'lodash';
import { firstLetterToUpperCase } from 'base-core-lib'
export default {
  name: 'BaseShipDropdown',
  props: {
    // 是否显示全部筛选项
    showAll: {
      type: Boolean,
      default: true
    },
    // 加载全部船舶
    landAndShipBased: {
      type: Boolean,
      default: false,
    },
    // 是否使用船上系统
    clientFlag: {
      type: Boolean,
      default: true,
    },
    // 双向数据绑定
    value: ''
  },
  data () {
    return {
      allShip: 'bj.qualityFeedback.allShipName',
      vesselBankFlag: localStorage.getItem('ws-pf_vesselBankFlag') === 'V' && localStorage.getItem('ws-pf_dutyId') !== '1', //船岸端判断
      options: [],
      value2: '',
      changeIcon: false,
    }
  },
  computed: {
    ...mapGetters(['language']),
    ...mapState('common', ['vesselList']),
    getShip () {
      return this.$t(this.allShip[`vesselName${firstLetterToUpperCase(this.language)}`])
    },
  },
  watch: {
    value (val) {
      this.value2 = val;
      this.changeValue()
    }
  },
  created () {
    this.init()
  },
  methods: {
    ...mapActions('common', ['getVesselsByStatistics']),
    async init () {
      // this.options = cloneDeep(this.vesselList)
      this.options = cloneDeep(this.landAndShipBased ? await this.getVesselsByStatistics() : this.vesselList)
      if (!this.clientFlag) {
        this.options = this.options.filter(item => {
          return item.clientFlag == '1'
        })
      }
      console.log(this.options, 'this.options')
      if (this.showAll) {
        this.options.unshift({
          vesselId: '',
          vesselName: 'bj.qualityFeedback.allShipName',
          vesselNameEn: 'bj.qualityFeedback.allShipName',
          vesselNameZh: 'bj.qualityFeedback.allShipName'
        })
      }
      this.changeValue()
      this.$emit('on-mounted', this.options);
    },
    // 船舶筛选
    shipOperation (val) {
      const boo = findIndex(this.options, (o) => o.vesselId === val);
      this.allShip = this.options[boo]
      this.$emit('input', val);
      this.$emit('change', val, this.options[boo]);
    },
    /**
     * 动态绑定值的时候赋值
     */
    changeValue () {
      this.allShip = find(this.options, (o) => o.vesselId === this.value2) || get(this.options, '[0]', {});
    }
  }
}
</script>
<style lang="scss" scoped>
.base_ship_dropdown {
  line-height: 20px;
  height: 20px;
  .vesselDefault {
    margin-left: 10px;
  }
  .dropdown {
    font-size: 12px;
  }
  >>> .el-dropdown {
    font-size: 14px;
    .el-dropdown-link {
      font-size: 12px;
      display: flex;
      .iconxiajiantou,
      .iconshangjiantou {
        margin-left: 2px;
        font-size: 12px !important;
      }
    }
  }
}
</style>