DIGITAL_MANAGEMENT
/
finance
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

发起申请

apply
song 4 years ago
parent
dfb457d11d 984b0bc112
commit
baede98c02
8 changed files with 285 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      components/FinanceExamine.vue
  2. 1
      layouts/default.vue
  3. 14
      pages/Initiate-application.vue
  4. 12
      pages/applicant.vue
  5. 15
      pages/application-details.vue
  6. 186
      pages/financial-approval-details.vue
  7. 76
      pages/financial-approval.vue
  8. 1
      pages/index.vue

9
components/FinanceExamine.vue
View File

@ -1,12 +1,12 @@
<template>
<div v-if="data.info.list && data.info.list.length">
<div class="w-full overflow-x-scroll">
<table class="text-gray-500 mt-4 text-ms">
<table class="text-gray-500 mt-4 text-xs">
<tr class="bg-gray-100">
<td width="15%">申请人</td>
<td width="16%">金额(元)</td>
<td width="30%">时间</td>
<td width="20%">操作</td>
<td width="20%">时间</td>
<td width="10%">操作</td>
</tr>
<tr v-for="item in data.info.list">
<td>{{item.submitName}}</td>
@ -123,10 +123,9 @@ table{
width: 120%;
td{
border: 0.5px solid #ccc;
padding: 0.85rem;
padding: 0.5rem;
}
}
.input-box{
padding: 0!important;
border-bottom: 1px solid #ccc

1
layouts/default.vue
View File

@ -9,5 +9,6 @@
background:#eee;
height:100%;
width:100%;
overflow:hidden;
}
</style>

14
pages/Initiate-application.vue
View File

@ -1,12 +1,11 @@
<template>
<div>
<!-- 导航返回上一页 -->
<NuxtLink to="/applicant">
<van-nav-bar
title="发起申请"
left-arrow
@click-left="onClickLeft"
/>
</NuxtLink>
<!-- 申请发票需要输入的数据 -->
<div class="bg-white pb-3">
<div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div>
@ -226,16 +225,13 @@
<div class="text-gray-500 font-semibold">历史申请</div>
<div>
<Search />
<FinanceManage />
<FinanceExamine />
</div>
</div>
<!-- 底部立即提交按钮 -->
<NuxtLink to="/application-details">
<div class="mx-6 mt-10">
<van-button type="primary" block>立即提交</van-button>
<van-button type="primary" size="small" block>立即提交</van-button>
</div>
</NuxtLink>
</div>
</template>
<script setup>
@ -401,6 +397,10 @@ onMounted(() =>{
handleQueryType(0, 0)
})
function onClickLeft(){
console.log(1)
}
</script>
<style lang="less" scoped>

12
pages/applicant.vue
View File

@ -1,11 +1,6 @@
<template>
<div>
<!-- 头部选项卡部分 -->
<van-nav-bar
title="财务条"
left-arrow
@click-left="onClickLeft"
/>
<!-- 搜索框与表格部分 -->
<van-tabs v-model:active="active" shrink line-width="60px" color="#59B4FF" title-active-color="#59B4FF">
<van-tab title="我的申请">
@ -23,7 +18,6 @@
<div v-if="!isShow" class="no-data">
暂无历史记录
</div>
</div> -->
<!-- 底部提交按钮部分 -->
<div class="mt-20" @click="toApplication">
@ -47,9 +41,8 @@
500元
</div>
<div class="px-8">
<van-button type="primary" block :disabled="!isBonus" >立即领取</van-button>
<van-button type="primary" size="small" block :disabled="!isBonus" >立即领取</van-button>
</div>
</div>
</van-tab>
</van-tabs>
@ -57,7 +50,6 @@
</template>
<script setup>
import {ref} from 'vue'
import { useRouter } from 'vue-router';

15
pages/application-details.vue
View File

@ -1,15 +1,18 @@
<template>
<div>
<!-- 导航栏 -->
<van-nav-bar
<NuxtLink to="Initiate-application">
<van-nav-bar
title="申请详情"
left-arrow
@click-left="onClickLeft"
/>
/>
</NuxtLink>
<!-- 审核结果 -->
<div class="bg-white px-3">
<div class="text-gray-500 font-semibold px-1 py-3">审核结果</div>
<div v-for="item in checkerList" class="flex p-3 text-gray-400 text-base justify-between">
<div v-for="item in checkerList" class="flex py-3 px-4 text-gray-400 text-base justify-between">
<div>
<div>{{item.name}}</div>
<div class="text-sm pt-1">{{item.advice}}</div>
@ -36,7 +39,7 @@
<!-- 发票信息 -->
<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 v-for="item in billList" class="flex py-2 px-4 text-gray-400 text-base justify-between">
<div>{{item.name}}</div>
<div>{{item.value}}</div>
</div>
@ -44,7 +47,7 @@
<!-- 其他信息 -->
<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 v-for="item in otherData" class="flex py-2 px-4 text-gray-400 text-base justify-between">
<div>{{item.name}}</div>
<div>{{item.value}}</div>
</div>
@ -52,7 +55,7 @@
<!-- 提交人信息 -->
<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 v-for="item in submitter" class="flex py-2 px-4 text-gray-400 text-base justify-between">
<div>{{item.name}}</div>
<div>{{item.value}}</div>
</div>

186
pages/financial-approval-details.vue
View File

@ -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>

76
pages/financial-approval.vue
View File

@ -0,0 +1,76 @@
<template>
<div class="mb-60">
<!-- 财务审批页面 -->
<div class="bg-white p-4 flex text-gray-500 flex-col d_jump">
<div>
<span class="font-semibold" id="finance-audit">财务审批</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" id="finance-statistical">财务统计</span> <span class="ml-2 text-xs">财务明细统计查看</span>
</div>
<img src="public/statistics.png" class="w-full">
</div>
<ul class="menu">
<a href="#finance-audit">财务审批</a>
<a href="#finance-statistical">财务统计</a>
</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 a {
display: block;
width: 72px;
color: #fff;
background: rgba(25, 137, 250, 0.6);
padding: 8px 20px;
border-radius: 30px 0 0 30px;
margin-bottom: 15px;
}
</style>

1
pages/index.vue
View File

@ -77,6 +77,7 @@ async function scrollToElementByHash() {
function onClickLeft() {
console.log('返回上一页');
}
</script>
<style lang="less">

Write Preview
Loading…
Cancel
Save