[update] 列表页 图标显示组件 方法的优化

src/api/incomePaymentsApi.js

@@ -40,6 +40,8 @@ const payBillList = (param) => postAction(`/paymentRecord/payPaymentRecord/payBi
 const addPayBill = (projectId, projectType, param) => postAction(`/paymentRecord/payPaymentRecord/addPayBill?projectIds=${projectId}&projectTypes=${projectType}`, param)
 // 编辑开票阶段
 const editPayBill = (param) => postAction('/paymentRecord/payPaymentRecord/editPayBill', param)
+// 普通项目管理-通过项目id查询其他的信息
+const queryCommonProjectById = (param) => getAction('/project/payCommonProject/queryById', param)
 
 export {
 	getWorkingGroupById,
@@ -61,5 +63,6 @@ export {
   amountReceivedList,
   payBillList,
   addPayBill,
-  editPayBill
+  editPayBill,
-}
+  queryCommonProjectById
+}

src/components/tools/StatusSlot.vue

@@ -1,6 +1,21 @@
 <template>
   <div>
-    <img :src="status" @click="s"/>
+    <template v-if="statusType && statusNo">
+      <a-tooltip
+        overlay-class-name="status-tooltip"
+        placement="topLeft"
+        :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>
 
@@ -9,9 +24,17 @@ 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: {
     /*
     *  表格行对象
@@ -35,9 +58,23 @@ export default {
     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) {
         if(this.statusType){
@@ -49,7 +86,7 @@ export default {
             return error
           }else if(this.statusNo === 1){
             return finished
-          }else if(this.statusNo == 2){
+          }else if(this.statusNo === 2){
             return half
           }
         }
@@ -60,7 +97,7 @@ export default {
           return error
         }else if(this.statusNo === 1){
           return finished
-        }else if(this.statusNo == 2){
+        }else if(this.statusNo === 2){
           // 如果不是打包和需要发票
           if(this.statusType){
             return half
@@ -69,11 +106,54 @@ export default {
           }
         }
       }
+    },
+    // 操作返回数据的key值，此处是根据业务逻辑处理的
+    opeStatusKey() {
+      let result = this.statusKey
+      if(this.statusKey === 'mail' || this.statusKey === 'bill') {
+        result = 'mailBill'
+      }
+      return result
     }
   },
   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
+          }
+        })
+      }
+    },
+    /**
+     * 显示的模板数据，即根据返回值怎么处理数据
+     * @param item -传入的item的值
+     * @return 返回一个模板字符串用于后续显示，可按照需求进行更改
+     */
+    showTemplate(item) {
+      let result = ''
+      // 来款
+      if(this.statusKey === 'paymentRecord') {
+        result = `${item.paymentDate}到账${item.amountReceived}`
+      } else if(this.statusKey === 'mail') {
+        result = `${item.billDate}新增发票，发票单号：${item.billNo}`
+      } else if(this.statusKey === 'bill') {
+        result = `${item.sendDate}新增邮寄信息，邮寄单号：${item.postNo}`
+      }
+      return result
     }
   }
 }
@@ -82,3 +162,9 @@ export default {
 <style scoped lang="less">
 
 </style>
+<style>
+/* 自定义tooltip下样式问题*/
+.status-tooltip .ant-tooltip-inner{
+  white-space: pre-wrap!important;
+}
+</style>