yiliangyiyun-pc-jj/src/components/shipDrop/index.vue

<template>
  <ws-dropdown @command="selectOptions"
               v-if="showType">
    <span class="ws-dropdown-link">
      {{ selectOption.vesselName }}
      <i class="el-icon-caret-bottom el-icon--right" />
    </span>
    <ws-dropdown-menu slot="dropdown"
                      class="myDropdown">
      <ws-dropdown-item v-for="item in shipGather"
                        :key="item.vesselId"
                        :command="item.vesselId">
        {{ item.vesselName }}
      </ws-dropdown-item>
      <!-- 其他选项 -->
      <ws-dropdown-item v-show="showOtherOption"
                        divided
                        command>{{
        otherOption
      }}</ws-dropdown-item>
    </ws-dropdown-menu>
  </ws-dropdown>
  <span v-else>{{ selectOption.vesselName }}</span>
</template>
<script>
export default {
  name: 'shipDrop',
  props: [
    'showOtherOption',
    'otherOption',
    'defaultShowOption',
    'setShowType',
    'setDefaultShipId'
  ],
  data () {
    return {
      selectOption: {},
      showType: true,
      defaultShipId: '',
      shipGather: []
    }
  },
  watch: {
    setShowType (val) {
      this.showType = val
    },
    setDefaultShipId (val) {
      this.defaultShipId = val
    }
  },
  created () {
    this.shipGather = JSON.parse(localStorage.getItem('ws-pf_vessels'))
    this.shipGather.unshift({ vesselId: '', vesselName: '全部船舶' })
    // this.selectOption.vesselName = this.shipGather[0].vesselName;
    this.selectOption.vesselName = this.defaultShowOption
    if (localStorage.getItem('ws-pf_vesselBankFlag') === 'V') {
      // 当为V时是船端，当为B时是岸端
      this.showType = false
      this.defaultShipId = localStorage.getItem('ws-pf_vesselId')
      this.$emit('command', this.defaultShipId)
      this.getOptions()
    } else {
      if (typeof this.setShowType === 'boolean') {
        this.showType = this.setShowType
      }
      this.defaultShipId = this.setDefaultShipId
      this.getOptions()
    }
  },
  methods: {
    //  选择
    selectOptions (id) {
      if (id) {
        for (const k in this.shipGather) {
          if (this.shipGather[k].vesselId == id) {
            this.selectOption.vesselName = this.shipGather[k].vesselName
          }
        }
      } else {
        // this.selectOption.vesselName = this.otherOption;
        this.selectOption.vesselName = this.shipGather[0].vesselName
      }
      this.$forceUpdate()
      this.$emit('command', id)
    },
    // 数据获取
    getOptions () {
      if (this.showType) {
        this.selectOption.vesselName = this.shipGather[0].vesselName
        if (!this.showOtherOption) {
          this.selectOptions(this.shipGather[0].vesselId)
        } else {
          this.selectOption.vesselName = this.otherOption
        }
      } else {
        for (const k in this.shipGather) {
          if (this.shipGather[k].vesselId === this.defaultShipId) {
            this.selectOption.vesselName = this.shipGather[k].vesselName
          } else {
            this.selectOption.vesselName = this.shipGather[0].vesselName
          }
        }
        this.$forceUpdate()
      }
      // getAppShips({
      //   compId: compId
      // }).then(succ => {
      //   this.options = succ.data;
      //   if (this.showType) {
      //     this.selectOption = this.options[0];
      //     if (!this.showOtherOption) {
      //       this.selectOption.vesselName = this.options[
      //         this.options.length - 1
      //       ].vesselName;
      //       this.selectOptions(this.options[0].vesselId);
      //     } else {
      //       this.selectOption.vesselName = this.otherOption;
      //     }
      //   } else {
      //     for (const k in this.options) {
      //       if (this.options[k].vesselId === this.defaultShipId) {
      //         this.selectOption.vesselName = this.options[k].vesselName;
      //       }
      //     }
      //     this.$forceUpdate();
      //   }
      // });
    }
  }
}
</script>

<style lang="scss" scoped>
.allShips {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
.myDropdown {
  border: 0px solid red;
  overflow: auto;
}
</style>