LK/income_payments_enterprise_terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

列表状态插槽

Browse Source
This commit is contained in:
zhaoxiao
2021-09-30 14:49:19 +08:00
parent 4b19f803e3
commit 060f17b704
8 changed files with 214 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/imgs/error.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 690 B

src/assets/imgs/finished.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 801 B

src/assets/imgs/half.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 689 B

src/assets/imgs/zero.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 457 B

src/components/tools/StatusSlot.vue
+171
View File
@@ -0,0 +1,171 @@
<template>
<div>
<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>
<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 ){
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
}
},
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 = ''
console.log(item)
// 来款
if(this.statusKey === 'paymentRecord') {
result = `${item.paymentDate}到账${item.amountReceived}`
} else if(this.statusKey === 'bill') {
result = `${item.billDate}新增发票，发票单号：${item.billNo}`
} else if(this.statusKey === 'mail') {
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;
}
</style>
src/views/mineContract/MineContract.vue
+3 -2
View File
@@ -27,7 +27,7 @@
<project-table :column-data="columns" :table-data="dataSource" @change="handlePageChange">
<!-- 打包、需要发票、到账、开票、邮寄-->
<template v-slot:status="{record, text}">
<div @click="d(record)">{{ text }}</div>
<status-slot :statu-obj="record" :status-no="text" :status-type="true" status-key="mail"></status-slot>
</template>
<!-- 项目名称-->
<template v-slot:projectName="{record, text}">
@@ -62,10 +62,11 @@
import { JeroListMixin } from '@/mixins/JeroListMixin'
import ProjectTable from '@comp/table/ProjectTable'
import MineContractModule from '@views/mineContract/modules/MineContractModule'
import StatusSlot from '@comp/tools/StatusSlot'
export default {
name: 'MineContract',
components: { ProjectTable, MineContractModule },
components: { ProjectTable, MineContractModule, StatusSlot },
mixins: [JeroListMixin],
data() {
return {
src/views/mineProject/MineProject.vue
+20 -7
View File
@@ -38,9 +38,21 @@
<div>
<a-spin :spinning="loading">
<project-table :column-data="columns" :table-data="dataSource" @change="handlePageChange">
<!-- 打包、需要发票、到账、开票、邮寄-->
<!-- 打包、需要发票-->
<template v-slot:status-pack="{record, text}">
<status-slot :statu-obj="record" :status-no="text"></status-slot>
</template>
<!-- 到账-->
<template v-slot:status="{record, text}">
<div @click="d(record)">{{ text }}</div>
<status-slot :statu-obj="record" :status-no="text" :status-type="true"></status-slot>
</template>
<!-- 开票-->
<template v-slot:status-bill="{record, text}">
<status-slot :statu-obj="record" :status-no="text" :status-type="true" status-key="bill"></status-slot>
</template>
<!-- 邮寄-->
<template v-slot:status-mail="{record, text}">
<status-slot :statu-obj="record" :status-no="text" :status-type="true" status-key="mail"></status-slot>
</template>
<!-- 项目名称-->
<template v-slot:projectName="{record}">
@@ -75,10 +87,11 @@
import { JeroListMixin } from '@/mixins/JeroListMixin'
import ProjectTable from '@comp/table/ProjectTable'
import ProjectDetailModal from '@views/MessagePage/ProjectDetailModal'
import StatusSlot from '@comp/tools/StatusSlot'
export default {
name: 'MineProject',
components: { ProjectTable, ProjectDetailModal },
components: { ProjectTable, ProjectDetailModal, StatusSlot },
mixins: [JeroListMixin],
data() {
return {
@@ -111,13 +124,13 @@ export default {
}, {
title: '打包',
dataIndex: 'pack',
scopedSlots: 'status',
scopedSlots: 'status-pack',
col: 2
}, {
title: '需要发票',
col: 2,
dataIndex: 'needInvoice',
scopedSlots: 'status',
scopedSlots: 'status-pack',
slot: 'status'
}, {
title: '到账',
@@ -127,12 +140,12 @@ export default {
}, {
title: '开票',
dataIndex: 'makeInvoice',
scopedSlots: 'status',
scopedSlots: 'status-bill',
col: 2
}, {
title: '邮寄',
dataIndex: 'mail',
scopedSlots: 'status',
scopedSlots: 'status-mail',
col: 2
}
],
src/views/workTeam/WorkTeam.vue
+20 -7
View File
@@ -38,9 +38,21 @@
<div>
<a-spin :spinning="loading">
<project-table :column-data="columns" :table-data="dataSource" show-meeting-btn button-text="工作组会议" @change="handlePageChange">
<!-- 打包、需要发票、到账、开票、邮寄-->
<!-- 打包、需要发票-->
<template v-slot:status-pack="{record, text}">
<status-slot :statu-obj="record" :status-no="text"></status-slot>
</template>
<!-- 到账-->
<template v-slot:status="{record, text}">
<div @click="d(record)">{{ text }}</div>
<status-slot :statu-obj="record" :status-no="text" :status-type="true"></status-slot>
</template>
<!-- 开票-->
<template v-slot:status-bill="{record, text}">
<status-slot :statu-obj="record" :status-no="text" :status-type="true" status-key="bill"></status-slot>
</template>
<!-- 邮寄-->
<template v-slot:status-mail="{record, text}">
<status-slot :statu-obj="record" :status-no="text" :status-type="true" status-key="mail"></status-slot>
</template>
<!-- 项目名称-->
<template v-slot:projectName="{record}">
@@ -71,10 +83,11 @@
import { JeroListMixin } from '@/mixins/JeroListMixin'
import ProjectTable from '@comp/table/ProjectTable'
import ProjectDetailModal from '@views/MessagePage/ProjectDetailModal'
import StatusSlot from '@comp/tools/StatusSlot'
export default {
name: 'WorkTeam',
components: { ProjectTable, ProjectDetailModal },
components: { ProjectTable, ProjectDetailModal, StatusSlot },
mixins: [JeroListMixin],
data() {
return {
@@ -102,13 +115,13 @@ export default {
}, {
title: '打包',
dataIndex: 'pack',
scopedSlots: 'text',
scopedSlots: 'status-pack',
col: 2
}, {
title: '需要发票',
col: 2,
dataIndex: 'needInvoice',
scopedSlots: 'status',
scopedSlots: 'status-pack',
slot: 'status'
}, {
title: '到账',
@@ -118,12 +131,12 @@ export default {
}, {
title: '开票',
dataIndex: 'makeInvoice',
scopedSlots: 'status',
scopedSlots: 'status-bill',
col: 2
}, {
title: '邮寄',
dataIndex: 'mail',
scopedSlots: 'status',
scopedSlots: 'status-mail',
col: 2
}
],