<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="开始 2023-11-09 13:30:54" desc="张芬创建了审批">
|
</u-steps-item>
|
<u-steps-item title="部门经理审核 2023-11-09 13:31:42" desc="部门经理张芬审批通过">
|
</u-steps-item>
|
<u-steps-item title="俞晓审核" desc="">
|
</u-steps-item>
|
<u-steps-item title="周春松审核" desc="">
|
</u-steps-item>
|
<u-steps-item title="罗萍审核" desc="">
|
</u-steps-item>
|
<u-steps-item title="俞晓审核" desc="">
|
</u-steps-item>
|
</u-steps>
|
</view>
|
</view>
|
|
<view style="height: 70rpx;">
|
|
</view>w
|
|
<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 {
|
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'
|
}
|
]
|
}
|
},
|
methods: {
|
modiReimburse() {
|
uni.navigateTo({
|
url: '/pages/business/goBusiness/modiReimburseOnlineDetl'
|
})
|
},
|
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>
|
