From 9a3097ba22326f01583dd3ab87f0680f15600165 Mon Sep 17 00:00:00 2001
From: Min5203 <2318556978@qq.com>
Date: Tue, 25 Jan 2022 15:56:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A2=E5=8A=A1=E4=BA=BA=E5=91=98=E7=9A=84?=
 =?UTF-8?q?=E8=B4=A2=E5=8A=A1=E5=AE=A1=E6=89=B9=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/FinanceExamine.vue        |  26 ++--
 components/FinanceManage.vue         |  22 ++--
 layouts/default.vue                  |   1 +
 pages/Initiate-application.vue       |  11 +-
 pages/applicant.vue                  |  15 +--
 pages/application-details.vue        |  15 ++-
 pages/financial-approval-details.vue | 186 ++++++++++++++++++++++++++-
 pages/financial-approval.vue         |  75 +++++++++++
 pages/index.vue                      |  25 +---
 plugins/vant.js                      |   2 +
 10 files changed, 307 insertions(+), 71 deletions(-)
 create mode 100644 pages/financial-approval.vue

diff --git a/components/FinanceExamine.vue b/components/FinanceExamine.vue
index cb3fd0d..8c51e35 100644
--- a/components/FinanceExamine.vue
+++ b/components/FinanceExamine.vue
@@ -1,19 +1,19 @@
 <template>
   <div>
     <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 arrayData">
+          <tr v-for="item in arrayData" @click="viewDetails">
             <td>{{item.submitName}}</td>
             <td>{{item.money}}</td>
-            <td>{{dayjs(item.submitTime - 0).format('YYYY-MM-DD hh:mm')}}</td>
+            <td>{{dayjs(item.submitTime - 0).format('YYYY-MM-DD')}}</td>
             <td>
-              <div v-if="item.applyType === 0" class="flex flex-row justify-between">
+              <div v-if="item.applyType === 0" class="flex flex-row justify-around">
                 <van-button type="success" size="mini" class="rounded">通过</van-button>
                 <van-button type="danger" size="mini" class="rounded">驳回</van-button>
               </div>
@@ -30,8 +30,8 @@
 
 <script setup>
 import dayjs from "dayjs";
-import {ref, reactive} from'vue';
-
+import {ref} from'vue';
+const props = defineProps({ routeUrl : { type: Object, default: () => {} } });
 const arrayData = ref([
   {
     applyId: '001',
@@ -90,12 +90,11 @@ const arrayData = ref([
     applyType: 0,
   }
 ]);
-const sumBudget = arrayData.value.reduce((sum, e) => sum + e.budget, 0);
-const sumBonus = arrayData.value.reduce((sum, e) => sum + e.bonus, 0);
 const currentPage = ref(1);
-const data = reactive({
 
-})
+function viewDetails(){
+  console.log(props.routeUrl)
+}
 </script>
 
 <style scoped lang="less">
@@ -103,10 +102,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
diff --git a/components/FinanceManage.vue b/components/FinanceManage.vue
index daa33d3..42f9385 100644
--- a/components/FinanceManage.vue
+++ b/components/FinanceManage.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <table class="w-full text-gray-500 mt-4 text-ms">
+    <table class="w-full text-gray-500 mt-4 text-xs">
         <tr class="bg-gray-100">
-          <td class="">任务名称</td>
-          <td class="">预算(元)</td>
-          <td class="">奖金(元)</td>
+          <td class="40">任务名称</td>
+          <td class="25">预算(元)</td>
+          <td class="25">奖金(元)</td>
         </tr>
-        <tr v-for="item in arrayData">
+        <tr v-for="item in arrayData" @click="dataDetails">
           <td>{{item.name}}</td>
           <td>
             <div v-if="!item.showBudgetEdit" @click="item.showBudgetEdit = true">{{item.budget}}</div>
@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import {ref, reactive} from'vue'
+import {ref} from'vue'
 const arrayData = ref([
   {
     name:'财务条插件界面设计',
@@ -92,18 +92,16 @@ const arrayData = ref([
 const sumBudget = arrayData.value.reduce((sum, e) => sum + e.budget, 0);
 const sumBonus = arrayData.value.reduce((sum, e) => sum + e.bonus, 0);
 const currentPage = ref(1);
-const data = reactive({
-
-})
 </script>
 
 <style scoped lang="less">
 td{
     border: 0.5px solid #ccc;
-    padding: 0.85rem;
+    padding: 0.7rem;
 }
 .input-box{
-    padding: 0!important;
-    border-bottom: 1px solid #ccc
+  width:45px;
+  padding: 0!important;
+  border-bottom: 1px solid #ccc
 }
 </style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 1ee8b60..9918f0f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -9,5 +9,6 @@
   background:#eee;
   height:100%;
   width:100%;
+  overflow:hidden;
 }
 </style>
diff --git a/pages/Initiate-application.vue b/pages/Initiate-application.vue
index f031f8d..601e5b3 100644
--- a/pages/Initiate-application.vue
+++ b/pages/Initiate-application.vue
@@ -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>
@@ -233,7 +232,7 @@
             <div class="text-gray-500 font-semibold">历史申请</div>
             <div v-if="showHistory">
               <Search />
-              <FinanceManage />
+              <FinanceExamine />
             </div>
             <div v-if="!showHistory" class="no-data">
                 暂无历史记录
@@ -242,7 +241,7 @@
       <!-- 底部立即提交按钮 -->
       <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>
 
@@ -465,6 +464,10 @@ function uploadBill(){
   },1000)
 }
 
+function onClickLeft(){
+  console.log(1)
+}
+
 </script>
 
 <style lang="less" scoped>
diff --git a/pages/applicant.vue b/pages/applicant.vue
index 9a239f9..15d6a23 100644
--- a/pages/applicant.vue
+++ b/pages/applicant.vue
@@ -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,12 +18,11 @@
           <div v-if="!isShow" class="no-data">
               暂无历史记录
           </div>
-
         </div> -->
         <!-- 底部提交按钮部分 -->
-        <div class="mt-20">
+        <div class="mt-20 px-10">
           <NuxtLink to="/Initiate-application">
-               <van-button type="primary" block>发起申请</van-button>
+               <van-button type="primary" size="small" block>发起申请</van-button>
           </NuxtLink>
         </div>
       </van-tab>
@@ -50,9 +44,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>
diff --git a/pages/application-details.vue b/pages/application-details.vue
index c9caab5..287f69b 100644
--- a/pages/application-details.vue
+++ b/pages/application-details.vue
@@ -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>
diff --git a/pages/financial-approval-details.vue b/pages/financial-approval-details.vue
index 828e178..cf7ee49 100644
--- a/pages/financial-approval-details.vue
+++ b/pages/financial-approval-details.vue
@@ -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>
diff --git a/pages/financial-approval.vue b/pages/financial-approval.vue
new file mode 100644
index 0000000..eaab55f
--- /dev/null
+++ b/pages/financial-approval.vue
@@ -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>
diff --git a/pages/index.vue b/pages/index.vue
index 5c07149..ca67f1b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,10 +1,5 @@
 <template>
 <div class="mb-60">
-    <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="财务管理">
       <!-- 财务管理页面 -->
@@ -21,7 +16,7 @@
           <span class="font-semibold">财务审批</span> <span class="ml-2">对员工提交的申请进行审批</span>
         </div>
         <Search />
-        <FinanceExamine />
+        <FinanceExamine :routeUrl="'financial-approval-details'" />
       </div>
       <!-- 财务统计页面 -->
       <div class="bg-white p-4 mt-5 flex text-gray-500 flex-col d_jump">
@@ -54,8 +49,6 @@ export default {
 <script setup>
 import {ref} from 'vue'
 const active = ref(0);
-
-
 function onClickLeft(){
   console.log('返回上一页')
 }
@@ -71,6 +64,7 @@ function jump(index) {
     // Safari
     window.pageYOffset = total
 }
+
 </script>
 
 <style lang="less">
@@ -80,21 +74,6 @@ function jump(index) {
 .van-icon-arrow-left:before{
   color: #000;
 }
-.financial-management{
-  // background-color:#ffffff;
-  // padding: 1rem;
-  // margin-top: 1rem;
-  // color: #555252;
-  // .title{
-  // font-weight: 600;
-  // }
-  // .title-describe{
-  //   font-size: 12px;
-  //   margin-left: 0.5rem;
-  //   color: #A0A0A0;
-  // }
-}
-
 .menu{
   position: fixed;
   right: 0;
diff --git a/plugins/vant.js b/plugins/vant.js
index 5787054..648ecb3 100644
--- a/plugins/vant.js
+++ b/plugins/vant.js
@@ -20,6 +20,7 @@ import {
   Popup,
   Cascader,
   Circle,
+  Sticky,
 } from 'vant';
 
 import { defineNuxtPlugin } from '#app';
@@ -43,5 +44,6 @@ export default defineNuxtPlugin(nuxtApp => {
     .use(Cascader)
     .use(Popup)
     .use(Circle)
+    .use(Sticky)
     .use(Tabs);
 });