income_payments_client/src/components/tools/StatusSlot.vue

<template>
  <div>
    <template v-if="statusType && statusNo">
<!--      placement="topLeft"-->
      <a-tooltip
        overlay-class-name="status-tooltip"
        :title="currentTitle"
        arrow-point-at-center
        :mouse-enter-delay="0.1"
        @visibleChange="visibleChange">
        <img :src="status" @click="s"/>
      </a-tooltip>
    </template>
    <template v-else>
      <img :src="status" @click="s"/>
    </template>
  </div>
</template>

<script>
import zero from '../../assets/imgs/zero.png'
import finished from '../../assets/imgs/finished.png'
import half from '../../assets/imgs/half.png'
import error from '../../assets/imgs/error.png'
// 获得当前行数据的方法，默认写的是 普通项目获得数据的方法，其他模块需要以传参的方式修改相应的方法
import { queryCommonProjectById } from '../../api/incomePaymentsApi'

export default {
  name: 'StatusSlot',
  data() {
    return {
      currentTitle: ' ', // 气泡中显示的文字,必须有内容，否则dom选择时不会解析
      hasInfo: false // 是否有详情信息可以显示，即是否通过接口请求过数据
    }
  },
  props: {
    /*
    *  表格行对象
    * */
    statuObj: {
      type: Object,
      required: false
    },
    /*
    *  false 代表是打包 和需要发票
    *  true 代表其他三个
    * */
    statusType: {
      type: Boolean,
      required: false,
      default: false
    },
    /*
    *  具体的状态值
    * */
    statusNo: {
      type: Number,
      required: false
    },
    // 当前需要转换key的属性, 悬浮显示实际具体内容信息时需要
    // paymentRecord 来款  mail -- 邮寄 bill--开票
    statusKey: {
      type: String,
      required: false,
      default: 'paymentRecord'
    },
    // 获得tooltip详情信息的方法
    getInfoFunc: {
      type: Function,
      required: false,
      default: queryCommonProjectById
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    status() {
      if (this.statuObj.amountReceivable === '0.00' || this.statuObj.receivableAmount === '0.00') {
        if (this.statusType) {
          // 应收金额为0  未到账 未邮寄 未开票的状态
          return zero
        } else {
          // 应收金额为0  打包 与需要开票的状态
          if (this.statusNo === 0) {
            return error
          } else if (this.statusNo === 1) {
            return finished
          } else if (this.statusNo === 2) {
            return half
          }
        }

      } else {
        // 应收金额不为0 都正常判断
        if (this.statusNo === 0) {
          // 开票或邮寄时，不需要发票
          if ((this.statusKey === 'bill' || this.statusKey === 'mail') && this.statuObj.needInvoice === 0) {
            return zero
          } else {
            return error
          }
        } else if (this.statusNo === 1) {
          return finished
        } else if (this.statusNo === 2) {
          // 如果不是打包和需要发票
          if (this.statusType) {
            return half
          } else {
            return finished
          }
        }
      }
    },
    // 操作返回数据的key值，此处是根据业务逻辑处理的
    opeStatusKey() {
      let result = this.statusKey
      if (this.statusKey === 'mail' || this.statusKey === 'bill') {
        result = 'mailBill'
      }
      return result
    }
  },
  created() {

  },
  methods: {
    s() {
      console.log(this.statuObj)
    },
    visibleChange(visible) {
      // 到账、开票、邮寄 的时候，请求接口获得相应的数据
      // 判断条件  tooltip显示、 有不同的统计状态，统计状态值不为0 没有请求过详情数据
      if (visible && this.statusType && this.statusNo && !this.hasInfo) {
        this.getInfoFunc({ id: this.statuObj.id }).then(res => {
          if (res.success) {
            let arr = res.result[this.opeStatusKey] || []
            let result = []
            arr.map(tt => {
              result.push(this.showTemplate(tt))
            })
            // 对tooltip中的文字进行替换
            this.currentTitle = result.join('\n')
            this.hasInfo = true
          }
        })
      }
    },
    /**
     * 显示的模板数据，即根据返回值怎么处理数据
     * 判断是否存在一句话里所有变量为null，存在就不显示那句话了
     * @param item -传入的item的值
     * @return 返回一个模板字符串用于后续显示，可按照需求进行更改
     */
    showTemplate(item) {
      let result = ''
      console.log(item)
      // 来款
      if (this.statusKey === 'paymentRecord') {
        if (item.paymentDate || item.amountReceived) {
          result = `${ item.paymentDate }到账${ item.amountReceived }元`
        }
      } else if (this.statusKey === 'bill') {
        if (item.billDate || item.billNo) {
          result = `${ item.billDate }新增发票，发票单号：${ item.billNo }`
        }
      } else if (this.statusKey === 'mail') {
        if (item.sendDate || item.postNo) {
          result = `${ item.sendDate }新增邮寄信息，邮寄单号：${ item.postNo }`
        }
      }
      return result
    }
  }
}
</script>

<style scoped lang="less">

</style>
<style>
/* 自定义tooltip下样式问题*/
.status-tooltip .ant-tooltip-inner {
  white-space: pre-wrap !important;
}

.ant-tooltip {
  max-width: 16rem;
}
</style>