Min5203
4 years ago
10 changed files with 307 additions and 71 deletions
@ -1,5 +1,189 @@ |
|||
<template> |
|||
<div> |
|||
财务审批详情 |
|||
<van-nav-bar |
|||
title="财务审批详情" |
|||
left-arrow |
|||
@click-left="onClickLeft" |
|||
/> |
|||
|
|||
<!-- 发票信息 --> |
|||
<div class="bg-white px-3"> |
|||
<div class="text-gray-500 font-semibold px-1 py-3 mt-5">发票信息</div> |
|||
<div v-for="item in billList" class="flex p-2 text-gray-400 text-base justify-between"> |
|||
<div>{{item.name}}</div> |
|||
<div>{{item.value}}</div> |
|||
</div> |
|||
</div> |
|||
<!-- 其他信息 --> |
|||
<div class="bg-white px-3"> |
|||
<div class="text-gray-500 font-semibold px-1 py-3 mt-5">其他信息</div> |
|||
<div v-for="item in otherData" class="flex p-2 text-gray-400 text-base justify-between"> |
|||
<div>{{item.name}}</div> |
|||
<div>{{item.value}}</div> |
|||
</div> |
|||
</div> |
|||
<!-- 提交人信息 --> |
|||
<div class="bg-white px-3"> |
|||
<div class="text-gray-500 font-semibold px-1 py-3 mt-5">提交人信息</div> |
|||
<div v-for="item in submitter" class="flex p-2 text-gray-400 text-base justify-between"> |
|||
<div>{{item.name}}</div> |
|||
<div>{{item.value}}</div> |
|||
</div> |
|||
</div> |
|||
<!-- 审核人信息 --> |
|||
<div class="bg-white px-3"> |
|||
<div class="text-gray-500 font-semibold px-1 py-3 mt-5">审核结果</div> |
|||
<div v-for="item in checkerList" class="flex p-3 text-gray-400 text-base justify-between"> |
|||
<!-- 遍历的审核人的姓名，建议和时间 --> |
|||
<div> |
|||
<div>{{item.name}}</div> |
|||
<div class="text-sm pt-1">{{item.advice}}</div> |
|||
<div class="text-sm pt-1">{{item.checkedTime}}</div> |
|||
</div> |
|||
<!--其他审核人 --> |
|||
<div class="text-center" v-show="!item.isMine"> |
|||
<div :class="item.status === '1' ? 'text-green-500' : item.status === '2' ? 'text-red-500' : ''"> |
|||
{{item.status === '1' ? '已通过' : item.status === '2' ? '已驳回' : '待审批'}} |
|||
</div> |
|||
<div v-if="item.score>0" class="mt-1 text-yellow-500"> |
|||
<van-circle |
|||
v-model:current-rate="item.score" |
|||
:rate="item.score" |
|||
:speed="100" |
|||
:text="item.score" |
|||
color="#ff6700" |
|||
:stroke-width="100" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<!-- 当前审核人已审核完毕 --> |
|||
<div class="text-center" v-show="item.isMine && item.status !== '0'"> |
|||
<div :class="item.status === '1' ? 'text-green-500' : item.status === '2' ? 'text-red-500' : ''"> |
|||
{{item.status === '1' ? '已通过' : item.status === '2' ? '已驳回' : '待审批'}} |
|||
</div> |
|||
<div v-if="item.score>0" class="mt-1 text-yellow-500"> |
|||
<van-circle |
|||
v-model:current-rate="item.score" |
|||
:rate="item.score" |
|||
:speed="100" |
|||
:text="item.score" |
|||
color="#ff6700" |
|||
:stroke-width="100" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<!-- 当前审核人未审批状态 --> |
|||
<div class="text-center" v-show="item.isMine && item.status === '0'"> |
|||
<van-button type="success" round size="mini" class="button ml-5">通过</van-button> |
|||
<van-button type="danger" round size="mini" class="button">驳回</van-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import {ref} from 'vue' |
|||
// 发票信息 |
|||
const billList = ref([ |
|||
{ |
|||
name: "发票代码", |
|||
value: "4154153125646", |
|||
}, |
|||
{ |
|||
name: "发票号码", |
|||
value: "545648789", |
|||
}, |
|||
{ |
|||
name: "合计金额(元)", |
|||
value: "40", |
|||
}, |
|||
{ |
|||
name: "税额(元)", |
|||
value: "2", |
|||
}, |
|||
{ |
|||
name: "开票日期", |
|||
value: "2022年1月2日", |
|||
}, |
|||
{ |
|||
name: "备注", |
|||
value: "业务支出", |
|||
}, |
|||
]) |
|||
// 其他信息数据 |
|||
const otherData = ref([ |
|||
{ |
|||
name: "申请类型", |
|||
value: "项目申请" |
|||
}, |
|||
{ |
|||
name: "所属项目", |
|||
value: "PT项目" |
|||
}, |
|||
{ |
|||
name: "所属任务", |
|||
value: "财务条界面设计" |
|||
}, |
|||
{ |
|||
name: "类目", |
|||
value: "报销" |
|||
}, |
|||
{ |
|||
name: "名目", |
|||
value: "业务招待费" |
|||
}, |
|||
]) |
|||
// 提交人数据 |
|||
const submitter = ref([ |
|||
{ |
|||
name:'姓名', |
|||
value:'黛西' |
|||
}, |
|||
{ |
|||
name:'部门', |
|||
value:'软件部' |
|||
}, |
|||
{ |
|||
name:'提交时间', |
|||
value:'2021/12/29 13:22' |
|||
}, |
|||
]); |
|||
// 审核人员 |
|||
const checkerList = ref([ |
|||
{ |
|||
name: "冯教授", |
|||
advice: "", |
|||
checkedTime: "", |
|||
status: "0", |
|||
isMine: "1", |
|||
}, |
|||
{ |
|||
name: "薇薇安", |
|||
advice: "很棒!", |
|||
checkedTime: "12/18 14:55", |
|||
status: "0", |
|||
score:'' |
|||
}, |
|||
{ |
|||
name: "小明", |
|||
advice: "很棒!", |
|||
checkedTime: "12/18 14:55", |
|||
status: "1", |
|||
score:'80' |
|||
} |
|||
]); |
|||
|
|||
function onClickLeft(){ |
|||
console.log('返回') |
|||
} |
|||
|
|||
</script> |
|||
<style lang="less" scoped> |
|||
.van-circle{ |
|||
width: 2.5rem !important; |
|||
height: 2.5rem !important; |
|||
} |
|||
.button{ |
|||
padding: 0 0.75rem; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<div class="mb-60"> |
|||
<!-- 财务审批页面 --> |
|||
<div class="bg-white p-4 flex text-gray-500 flex-col d_jump"> |
|||
<div> |
|||
<span class="font-semibold">财务审批</span> <span class="ml-2 text-xs">对员工提交的申请进行审批</span> |
|||
</div> |
|||
<Search /> |
|||
<FinanceExamine /> |
|||
</div> |
|||
<!-- 财务统计页面 --> |
|||
<div class="bg-white p-4 mt-5 flex text-gray-500 flex-col d_jump"> |
|||
<div> |
|||
<span class="font-semibold">财务统计</span> <span class="ml-2 text-xs">财务明细统计查看</span> |
|||
</div> |
|||
<img src="public/statistics.png" class="w-full"> |
|||
</div> |
|||
<ul class="menu"> |
|||
<li @click="jump(0)">财务审批</li> |
|||
<li @click="jump(1)">财务统计</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
layout: 'default', |
|||
}; |
|||
</script> |
|||
|
|||
<script setup> |
|||
import {ref} from 'vue' |
|||
const active = ref(0); |
|||
|
|||
|
|||
function onClickLeft(){ |
|||
console.log('返回上一页') |
|||
} |
|||
|
|||
function jump(index) { |
|||
let jump = document.querySelectorAll('.d_jump') |
|||
// 获取需要滚动的距离 |
|||
let total = jump[index].offsetTop |
|||
// Chrome |
|||
document.body.scrollTop = total |
|||
// Firefox |
|||
document.documentElement.scrollTop = total |
|||
// Safari |
|||
window.pageYOffset = total |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.van-nav-bar__content{ |
|||
background-color:#eee |
|||
} |
|||
.van-icon-arrow-left:before{ |
|||
color: #000; |
|||
} |
|||
.menu{ |
|||
position: fixed; |
|||
right: 0; |
|||
bottom: 15px; |
|||
z-index: 99 |
|||
} |
|||
.menu li{ |
|||
width: 72px; |
|||
color: #fff; |
|||
background: rgba(25, 137, 250, 0.6); |
|||
padding: 8px 20px; |
|||
border-radius: 30px 0 0 30px; |
|||
margin-bottom: 15px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue