Min5203
4 years ago
10 changed files with 307 additions and 71 deletions
@ -1,5 +1,189 @@ |
|||||
<template> |
<template> |
||||
<div> |
<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> |
</div> |
||||
</template> |
</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