<template>
|
<view>
|
<view class="status_bar">
|
<!-- 这里是状态栏 -->
|
</view>
|
<uni-nav-bar left-icon="left" title="详情" @clickLeft="back" @clickRight="scan" :fixed="true" :border="false"
|
rightWidth="160rpx" leftWidth="160rpx">
|
</uni-nav-bar>
|
|
<view class="main-box">
|
<view class="box" v-for="item in list">
|
<view class="box-single-row flex-row" v-for="rule in listRule">
|
<view style="flex: 1;">{{rule.label}}</view>
|
<view style="flex: 4;">{{item[rule.attribute]}}</view>
|
</view>
|
</view>
|
</view>
|
|
|
|
<view class="main-box">
|
<view class="box" v-for="item in list">
|
<view class="box-title">报销明细</view>
|
<view style="width: 100%; overflow-x: scroll;border: 1px solid #bebebe;">
|
<table cellpadding="0" cellspacing="0">
|
<thead>
|
<tr style="background-color: #949494;color: #FFF;">
|
<td class="scroll-item">
|
<view class="item-content">事由</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">费用类型</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">税率</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">未税本币金额</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">未税金额</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">税额</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">发票金额</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">发票本币金额</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">报销比例</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">报销金额</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">报销本币金额</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">出纳确认金额</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">列支人员</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">列支部门</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">更新日期</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content-last">更新人员名字</view>
|
</td>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item,index) in onlineDetl">
|
<td class="scroll-item">
|
<view class="item-content">{{item.occupation}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.expenseType$}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.taxRate}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.untaxedAmountInLocalCurrency}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.untaxedAmount}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.taxAmount}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.invoiceValue}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.invoiceAmountInLocalCurrency}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.reimbursementRatio}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.reimbursementAmount}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.reimbursementAmountInLocalCurrency}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.cashierConfirmationAmount}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.userId$}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.deptId$}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content">{{item.updateTime}}</view>
|
</td>
|
<td class="scroll-item">
|
<view class="item-content-last">{{item.updateUserName}}</view>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
</view>
|
</view>
|
</view>
|
|
<view class="main-box">
|
<view class="box">
|
<view class="box-title">流程动态</view>
|
<u-steps :current="1" direction="column">
|
<u-steps-item :title="`${item.title} ${item.time ? item.time : ''}`" :desc="item.msg" v-for="item in steps" />
|
</u-steps>
|
</view>
|
</view>
|
|
<view style="height: 100rpx;">
|
|
</view>
|
|
<view class="floor">
|
<view class="wran">删除</view>
|
<view class="default" @click="modiReimburse()">编辑</view>
|
<view class="primary" @click="submit()">审批</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
steps: [],
|
list: [{
|
templateName: '项目未完成',
|
checkData: '否',
|
orderNum: 'CRMREIMBURSE1699507854268',
|
itemId: '10',
|
name$: '浙江天成自控股份有限公司',
|
status$: '未完成',
|
settle$: '等待节点3审核',
|
// detl: '报销明细',
|
updateUserId$: '张芬',
|
updateTime$: '2023-11-09 13:31:42'
|
}, ],
|
listRule: [{
|
label: "报销类型",
|
attribute: "templateName",
|
},
|
{
|
label: "是否冲账",
|
attribute: "checkData",
|
},
|
{
|
label: "报销单号",
|
attribute: "orderNum",
|
},
|
{
|
label: "项目号",
|
attribute: "itemId",
|
},
|
{
|
label: "客户信息",
|
attribute: "name$",
|
},
|
{
|
label: "状态",
|
attribute: "status$",
|
},
|
|
{
|
label: "进度",
|
attribute: "settle$",
|
},
|
// {
|
// label: "报销明细",
|
// attribute: "detl",
|
// },
|
{
|
label: "更新人员",
|
attribute: "updateUserId$",
|
},
|
{
|
label: "更新时间",
|
attribute: "updateTime$",
|
},
|
],
|
onlineDetl: [
|
{
|
occupation: 'CRMREIMBURSE1699507854268',
|
expenseType$: '1',
|
taxRate: '0.0',
|
untaxedAmountInLocalCurrency: '1.1',
|
untaxedAmount: '1.3',
|
taxAmount: 'aaa',
|
invoiceValue: '213',
|
invoiceAmountInLocalCurrency: '123213',
|
reimbursementRatio: '0.0',
|
reimbursementAmount: 11,
|
reimbursementAmountInLocalCurrency:12,
|
cashierConfirmationAmount: 123,
|
userId$: '123',
|
deptId$: '财务部',
|
updateTime: '2023-11-11',
|
updateUserName: 'name'
|
}
|
]
|
}
|
},
|
onLoad(option) {
|
let _this = this
|
_this.list = []
|
const eventChannel = this.getOpenerEventChannel();
|
eventChannel.on('busunessDetl', function(data) {
|
_this.list.push(data.data)
|
_this.getTableData(data.data.id)
|
_this.getSetps(data.data.id)
|
})
|
|
},
|
methods: {
|
// 审批
|
submit() {
|
let _this = this,param = {planld: 13}
|
|
uni.request({
|
url: `${_this.baseUrl}/reimburseOnline/approval2/auth`,
|
header: {
|
'token': uni.getStorageSync('token'),
|
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
},
|
method: 'POST',
|
sslVerify: false,
|
data: { planId: 13 },
|
success(res) {
|
res = res.data
|
if (res.code === 200) {
|
|
} else if (res.code === 500) {
|
uni.showToast({title: res.msg, icon: "none", position: 'top'})
|
}
|
}
|
})
|
|
},
|
getSetps(id) {
|
let _this = this
|
uni.request({
|
url: `${_this.baseUrl}/reimburseOnline/${id}/auth`,
|
header: { 'token': uni.getStorageSync('token') },
|
success(res) {
|
res = res.data
|
_this.steps = JSON.parse(res.data.settleMsg)
|
}
|
})
|
},
|
getTableData(id) {
|
let _this = this
|
uni.request({
|
url: `${_this.baseUrl}/reimburseOnlineDetl/list/auth`,
|
header: { 'token': uni.getStorageSync('token') },
|
data: {order_id: id},
|
success(res) {
|
res = res.data
|
if (res.code === 200) {
|
_this.onlineDetl = res.data.records
|
|
}
|
}
|
})
|
},
|
modiReimburse() {
|
let _this = this
|
_this.list[0]['detl'] = _this.onlineDetl
|
uni.navigateTo({
|
url: '/pages/business/goBusiness/modiReimburseOnlineDetl',
|
success: function(res) {
|
res.eventChannel.emit('reimburseOnlineDetl', {
|
data: 'modi',
|
detl: {list: _this.list[0]}
|
})
|
}
|
})
|
},
|
back() {
|
uni.navigateBack({})
|
},
|
scan() {
|
uni.navigateTo({
|
url: '/pages/authority/authority'
|
})
|
},
|
}
|
}
|
</script>
|
|
<style>
|
.main-box {
|
border-radius: 20rpx;
|
padding: 8rpx;
|
}
|
|
.box {
|
margin: 16rpx 8rpx;
|
/* height: 200px; */
|
box-shadow: 0 0 5px #dddddd;
|
background-color: #FFF;
|
padding: 16rpx 32rpx;
|
position: relative;
|
border-radius: 20rpx;
|
font-size: 24rpx;
|
/* color: #bdbdbd; */
|
}
|
|
.box-single-row {
|
display: flex;
|
}
|
|
.box-title {
|
font-size: 28rpx;
|
font-weight: bold;
|
color: #000;
|
}
|
|
.floor {
|
height: 100rpx;
|
line-height: 100rpx;
|
width: 100%;
|
background-color: #fff;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
display: flex;
|
align-items: center;
|
text-align: center;
|
letter-spacing: 10rpx;
|
}
|
|
.default {
|
flex: 2;
|
}
|
|
.default:active {
|
background-color: #eff0f1;
|
}
|
|
.wran {
|
flex: 1;
|
background-color: #ff5722;
|
color: #fff;
|
}
|
|
.primary {
|
flex: 2;
|
background-color: #2d8cf0;
|
color: #fff;
|
}
|
|
.primary:active {
|
background-color: #007dea;
|
}
|
.box-scroll {
|
width: 100%;
|
white-space: nowrap;
|
border: 1px solid #c5c5c5;
|
margin-top: 10rpx;
|
margin-bottom: 10rpx;
|
}
|
.scroll-head {
|
background-color: #949494;
|
color: #fff;
|
width: auto;
|
}
|
.scroll-item {
|
width: 150rpx;
|
padding: 10rpx;
|
text-align: center;
|
}
|
|
.item-content {
|
min-width: 150rpx;
|
height: 30rpx;
|
line-height: 30rpx;
|
padding-right: 10rpx;
|
border-right: 1px solid #d3d3d3;
|
}
|
.item-content-last {
|
height: 30rpx;
|
min-width: 150rpx;
|
line-height: 30rpx;
|
}
|
|
</style>
|
