cyber-narrator-cn-ui/src/mixins/relatedServer.js

import { get } from '@/utils/http'
export default {
  data () {
    return {
      relationshipDataOne: [], // 数据
      relationshipDataTow: [], // 数据
      relationshipShowOne: false, // 控制 ... 的展示隐藏
      relationshipShowTow: false, // 控制 ... 的展示隐藏
      relationshipShowMoreOne: false, // 控制弹框的展示隐藏
      relationshipShowMoreTow: false, // 控制弹框的展示隐藏
      relationshipMoreDataOne: [], // 展示所有
      relationshipMoreDataTow: [] // 展示所有
    }
  },
  methods: {
    // 请求数据 relationshipUrlOne => 路由 refOne => ref
    getRelatedServerDataOne (relationshipUrlOne, refOne) {
      get(relationshipUrlOne, this.getQueryParams()).then(response => {
        if (response.code === 200) {
          this.relationshipDataOne = response.data.result
          // 将请求数据 传入方法中
          this.relatedServerWidth(this.relationshipDataOne, refOne, 1)
        }
      })
    },
    getRelatedServerDataTow (relationshipUrlTow, refTow) {
      get(relationshipUrlTow, this.getQueryParams()).then(response => {
        if (response.code === 200) {
          this.relationshipDataTow = response.data.result
          // 将请求数据 传入方法中
          this.relatedServerWidth(this.relationshipDataTow, refTow, 2)
        }
      })
    },
    // data => 数据， value => ref
    relatedServerWidth (data, value, num) {
      // 最大宽度
      const relatedServerWidth = this.$refs.relationship.offsetWidth
      let sum = 0
      let flag = true
      data.map((item, index) => {
        if (this.$refs[value + index]) {
          // 每条数据的宽度
          const width = this.$refs[value + index].offsetWidth + 35
          if (width) {
            sum += width
            if (flag && sum >= relatedServerWidth && num === 1) {
              flag = false
              this.relationshipShowOne = true
            } else if (flag && sum >= relatedServerWidth && num === 2) {
              flag = false
              this.relationshipShowTow = true
            }
          }
          item.show = flag
        }
        return item
      })
    },
    // 点击事件 控制弹框的展示隐藏，展示全部的数据
    more (data, showMore, index) {
      if (index === 1) {
        // 展示数据
        this.relationshipMoreDataOne = data
        // 弹框的显示隐藏
        this.relationshipShowMoreOne = !showMore
        // 展示当前弹框是，隐藏其他弹框
        this.relationshipShowMoreTow = false
      }
      if (index === 2) {
        // 展示数据
        this.relationshipMoreDataTow = data
        // 弹框的显示隐藏
        this.relationshipShowMoreTow = !showMore
        // 展示当前弹框是，隐藏其他弹框
        this.relationshipShowMoreOne = false
      }
    }
  }
}