From 6a05e2f8b5f7f44cac08ace901fee80b57d84ace Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Wed, 26 Jan 2022 19:02:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=A5=A8=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/ocr.js                          |   8 +
 components/FinanceExamine.vue        |  29 ++-
 components/HistoricalApplication.vue |  21 +-
 pages/Initiate-application.vue       | 181 +++++++++++------
 pages/application-details.vue        |  13 +-
 pages/financial-approval-details.vue | 280 +++++++++++++++++----------
 plugins/vant.js                      |   4 +-
 7 files changed, 356 insertions(+), 180 deletions(-)
 create mode 100644 apis/ocr.js

diff --git a/apis/ocr.js b/apis/ocr.js
new file mode 100644
index 0000000..82a3d54
--- /dev/null
+++ b/apis/ocr.js
@@ -0,0 +1,8 @@
+import http from 'apis/axios';
+
+const apiUrl = import.meta.env.VITE_API_URL;
+const ptccsens = `${apiUrl}/ptccsens/v1.0`;
+const ocr = `${ptccsens}/ocr`;
+
+// 发起申请
+export const bill = `${ocr}/bill`;
diff --git a/components/FinanceExamine.vue b/components/FinanceExamine.vue
index 14bc41e..8106927 100644
--- a/components/FinanceExamine.vue
+++ b/components/FinanceExamine.vue
@@ -1,19 +1,19 @@
 <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-xs">
+      <table class="text-gray-500 mt-4">
           <tr class="bg-gray-100">
-            <td width="15%">申请人</td>
-            <td width="16%">金额(元)</td>
-            <td width="20%">时间</td>
-            <td width="10%">操作</td>
+            <td width="20%">申请人</td>
+            <td width="25%">金额(元)</td>
+            <td width="30%">时间</td>
+            <td width="25%">操作</td>
           </tr>
           <tr v-for="item in data.info.list">
-            <td>{{item.submitName}}</td>
-            <td>{{item.money}}</td>
-            <td>{{dayjs(item.submitTime - 0).format('YYYY-MM-DD')}}</td>
+            <td @click="openDetails(item.applyId)">{{item.submitName}}</td>
+            <td @click="openDetails(item.applyId)">{{item.money}}</td>
+            <td @click="openDetails(item.applyId)">{{dayjs(item.submitTime - 0).format('YYYY-MM-DD')}}</td>
             <td>
-              <div v-if="!item.applyType" class="flex flex-row justify-between">
+              <div v-if="!item.applyType" class="flex flex-row justify-around">
 
                 <van-button type="success" size="mini" class="rounded" @click="showRemark(item.financeCheckId, 1)">通过</van-button>
                 <van-button type="danger" size="mini" class="rounded" @click="showRemark(item.financeCheckId, 2)">驳回</van-button>
@@ -40,6 +40,9 @@ import {ref, reactive, onMounted, nextTick} from'vue';
 import { audit } from 'apis/finance';
 import { queryNeedCheckByMe } from 'apis/projectFinance';
 import { Toast } from 'vant';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
 
 const data = reactive({
   info: {},
@@ -116,6 +119,14 @@ async function handleAudit(financeCheckId, checkStatus){
     console.error('error: ', error);
   }
 }
+
+// 详情
+function openDetails(applyId){
+  const routeValue = router.currentRoute.value;
+  const query = routeValue.query;
+  query.applyId = applyId;
+  router.push({ path: '/financial-approval-details', query });
+}
 </script>
 
 <style scoped lang="less">
diff --git a/components/HistoricalApplication.vue b/components/HistoricalApplication.vue
index 5ec705b..2300d84 100644
--- a/components/HistoricalApplication.vue
+++ b/components/HistoricalApplication.vue
@@ -12,8 +12,8 @@
           <td class="status">状态</td>
         </tr>
         <tr v-for="item in data.info.list" class="text-gray-500">
-          <td>{{ item.submitName }}</td>
-          <td>
+          <td @click="openDetails(item.applyId)">{{ item.submitName }}</td>
+          <td @click="openDetails(item.applyId)">
             <!-- v-if="!item.showBudgetEdit" -->
             {{ (+item.money / 100).toFixed(2) }}
             <!-- <van-field
@@ -25,8 +25,8 @@
               @blur="item.showBudgetEdit = false"
             /> -->
           </td>
-          <td>
-            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }}
+          <td @click="openDetails(item.applyId)">
+            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD') }}
           </td>
           <td>
             <!-- <div v-if="!item.showBonusEdit" @click="item.showBonusEdit = true"> -->
@@ -74,6 +74,9 @@
 import dayjs from 'dayjs';
 import { personalHistory } from 'apis/finance';
 import { ref, reactive, onMounted, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
 
 const data = reactive({
   info: {},
@@ -124,6 +127,14 @@ onMounted(() => {
     handlePersonalHistory();
   });
 });
+
+// 详情
+function openDetails(applyId){
+  const routeValue = router.currentRoute.value;
+  const query = routeValue.query;
+  query.applyId = applyId;
+  router.push({ path: '/application-details', query });
+}
 </script>
 
 <style scoped lang="less">
@@ -141,7 +152,7 @@ table {
     width: 100px;
   }
   .time {
-    width: 170px;
+    width: 120px;
   }
   .status {
     width: 120px;
diff --git a/pages/Initiate-application.vue b/pages/Initiate-application.vue
index 767e129..1e73fbb 100644
--- a/pages/Initiate-application.vue
+++ b/pages/Initiate-application.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 导航返回上一页 -->
-    <van-nav-bar title="发起申请" left-arrow @click-left="onClickLeft" />
+    <van-nav-bar title="发起申请" left-arrow />
     <!-- 申请发票需要输入的数据 -->
     <div class="bg-white pb-3">
       <div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div>
@@ -22,20 +22,26 @@
               >手动输入</van-button
             >
           </div>
-          <div
-            class="text-center border-b w-52 h-24 bg-gray-100 border-dashed border-2"
-            @click="uploadBill"
-            v-show="!data.isSuccess"
-          >
-            <p class="text-gray-400 text-xl pt-3">+</p>
-            <p class="text-gray-400 text-xs">上传并识别凭证</p>
-          </div>
+          <!-- <van-overlay :show="data.showUploading"> -->
+            <div
+              class="text-center border-b w-52 h-24 border-dashed border-2 upload-box"
+              v-show="!data.isSuccess"
+            >
+              <van-uploader v-model="data.fileList" multiple :max-count="1" :after-read="afterRead" class="z-50 opacity-0" />
+              <div class="upload-txt">
+                <p class="text-gray-400 text-xl pt-3">+</p>
+                <p class="text-gray-400 text-xs">上传并识别凭证</p>
+              </div>
+              <!-- <van-loading type="spinner" v-if="data.showUploading" class="upload-txt z-50" /> -->
+            </div>
+          <!-- </van-overlay> -->
+
           <!-- 上传票据成功后显示发票信息 -->
           <div v-show="data.isSuccess">
             <van-field
               v-for="item in data.invoiceInfo"
               required
-              v-model="item.values"
+              v-model="item.value"
               :label="item.name"
               @change="cahngeInvoiceList($event, item)"
               input-align="right"
@@ -47,7 +53,7 @@
       <div v-show="!data.isInvoice">
         <van-field
           required
-          v-model="data.applyMoney"
+          v-model="data.money"
           label="申请金额"
           placeholder="输入申请金额"
           input-align="right"
@@ -80,13 +86,13 @@
             class="button"
             size="mini"
             v-for="item in data.reviewerList"
-            :key="item.userId"
+            :key="item.memberId"
             :type="
-              data.checkerList.find(checker => checker === item.userId)
+              data.checkerList.find(checker => checker === item.memberId)
                 ? 'primary'
                 : 'default'
             "
-            @click="handleSelectChecker(item.userId)"
+            @click="handleSelectChecker(item.memberId)"
           >
             {{ item.name }}
           </van-button>
@@ -98,7 +104,7 @@
       <div class="text-gray-500 p-4 font-semibold">其他信息</div>
       <!-- 申请类型 -->
       <!-- 普通票据申请 -->
-      <div v-show="data.isInvoice">
+      <div>
         <van-field
           v-model="data.applyType"
           is-link
@@ -112,9 +118,11 @@
         <van-popup v-model:show="data.showType" round position="bottom">
           <van-picker
             title="申请类型"
+            v-if="data.applyTypeOptions && data.applyTypeOptions.length"
             :columns="data.applyTypeOptions"
             @confirm="finishApplyType"
           />
+          <van-loading v-else class="my-20 text-center" />
         </van-popup>
         <!-- 所属项目 -->
         <van-field
@@ -133,6 +141,7 @@
         <!-- 所属任务的 -->
         <van-field
           v-model="data.taskName"
+          v-show="data.isInvoice"
           is-link
           readonly
           label="所属任务"
@@ -157,13 +166,16 @@
         <van-popup v-model:show="data.showCategory" round position="bottom">
           <van-picker
             title="请选择类目"
+            v-if="data.applyCategoryOptions && data.applyCategoryOptions.length"
             :columns="data.applyCategoryOptions"
             @confirm="finishApplyCategory"
           />
+          <van-loading v-else class="my-20 text-center" />
         </van-popup>
         <!-- 名目选择 -->
         <van-field
           v-model="data.applyName"
+          v-show="data.isInvoice"
           is-link
           readonly
           label="名目"
@@ -174,28 +186,13 @@
         <van-popup v-model:show="data.showName" round position="bottom">
           <van-picker
             title="请选择名目"
+            v-if="data.applyNameOptions && data.applyNameOptions.length"
             :columns="data.applyNameOptions"
             @confirm="finishApplyName"
           />
+          <van-loading v-else class="my-20 text-center" />
         </van-popup>
       </div>
-      <!-- 个人手动申请 -->
-      <div v-show="!data.isInvoice">
-        <div class="pl-2">
-          <van-cell
-            title="单元格"
-            is-link
-            :value="data.personalType"
-            required
-          />
-          <van-cell
-            title="单元格"
-            is-link
-            :value="data.personalCategory"
-            required
-          />
-        </div>
-      </div>
     </div>
     <!-- 提交人信息 -->
     <div class="bg-white mt-3">
@@ -221,58 +218,62 @@
       <div class="text-gray-500 font-semibold">历史申请</div>
       <div>
         <Search />
-        <FinanceExamine />
+        <HistoricalApplication />
       </div>
     </div>
     <!-- 底部立即提交按钮 -->
     <div class="mx-6 mt-10">
-      <van-button type="primary" size="small" block>立即提交</van-button>
+      <van-button @click="submit" type="primary" size="small" block>立即提交</van-button>
     </div>
   </div>
 </template>
 <script setup>
+import axios from 'axios';
 import { ref, reactive } from 'vue';
-// import useApplication from 'hooks/useApplication';
 import { queryChecker } from 'apis/member';
-import { queryType } from 'apis/finance';
-
-// const getApplication = useApplication();
+import { queryType, apply } from 'apis/finance';
+import { bill } from 'apis/ocr';
+import { Toast } from 'vant';
+const token = useToken()
 const projectName = useProjectName();
 const taskName = useTaskName();
 const projectId = useProjectId();
+const taskDetailId = useTaskId();
 const data = reactive({
   isInvoice: true,
+  fileList: [],
+  showUploading: false,
   remark: '',
   invoiceList: [],
   invoiceInfo: [
     {
       name: '发票代码',
-      values: 0,
+      value: 0,
       label: 'invoiceCode',
     },
     {
       name: '发票号码',
-      values: 1,
+      value: 0,
       label: 'invoiceNumber',
     },
     {
       name: '合计金额(元)',
-      values: 2,
+      value: 0,
       label: 'money',
     },
     {
       name: '税额(元)',
-      values: 3,
+      value: 0,
       label: 'taxMoney',
     },
     {
       name: '开票日期',
-      values: 4,
+      value: 0,
       label: 'invoiceTime',
     },
     {
-      name: '发票备注信息',
-      values: 5,
+      name: '备注信息',
+      value: '无',
       label: 'remark',
     },
   ],
@@ -286,6 +287,7 @@ const data = reactive({
   currentPage: 0, // 当前显示页数
   personalType: '个人申请', // 上传提示语隐藏
   personalCategory: '用款',
+  money: '',
   // 其他信息的多个选择按钮
   showType: false, // 申请类型的
   applyTypes: [],
@@ -304,9 +306,64 @@ const data = reactive({
   rowId: '',
 });
 
+// 上传文件
+function upLoaderImg(file, url) { //file为 你读取成功的回调文件信息
+  //new 一个FormData格式的参数
+  let params = new FormData()
+  params.append('part', file)
+  let config = {
+      headers: { //添加请求头
+        'Content-Type': 'multipart/form-data',
+        Authorization: 'Bearer ' + token.value
+      }
+  }
+  return new Promise((resolve, reject) => {
+      //把 uploadUrl 换成自己的 上传路径
+      axios.post(`${bill}`, params, config).then(res => {
+          resolve(res)
+      }).catch(err => {
+          reject(err)
+      });
+  })
+}
+// 图像识别
+async function afterRead(file){
+  data.showUploading = true
+  // 此时可以自行将文件上传至服务器
+  upLoaderImg(file.file, 'upload').then(res => {
+    data.showUploading = false
+    if (res.data.code == 200) {
+      for(let key  in res.data.data){
+        data.invoiceInfo.forEach(item => {
+          if(item.label === key){
+            if(item.label === 'money' || item.label === 'taxMoney'){
+              item.value = (+res.data.data[key] / 100).toFixed(2)
+            }
+            item.value = res.data.data[key]
+            console.log('item: ', item);
+          }
+        })
+      }
+      console.log('data.invoiceInfo: ', data.invoiceInfo);
+      data.invoiceList.push(res.data.data)
+      data.titleHidden = false;
+      data.isSuccess = true;
+    } else {
+      Toast.fail(res.data.msg || '上传失败')
+    }
+  })
+}
+
 // 发票信息
 function cahngeInvoiceList(e, item) {
   console.log('e: ', e.target.value, item);
+  data.invoiceList.forEach(invoice => {
+    for(let key  in data.invoiceList){
+      if(item.label === key){
+        invoice[key] = item.value
+      }
+    }
+  })
 }
 
 // 选择申请类型
@@ -347,15 +404,6 @@ function handleSelectChecker(id) {
   }
 }
 
-// 上传票据事件
-function uploadBill() {
-  //TODO:调取接口识别票据
-  setTimeout(() => {
-    data.titleHidden = false;
-    data.isSuccess = true;
-  }, 1000);
-}
-
 /**
  * 查询所有成员
  * @param { String } projectId
@@ -380,7 +428,6 @@ async function handleQueryChecker() {
  * @param { Number } type 类型：0申请类型 1类目 2名目
  */
 async function handleQueryType(parentId, type) {
-  console.log('parentId: ', parentId);
   try {
     const params = {
       param: {
@@ -423,7 +470,7 @@ onMounted(() => {
  * 发起申请
  * @param { Object } params
  */
-async function submit(params) {
+async function submit() {
   try {
     if(!verification()) return
     const params = {}
@@ -437,7 +484,8 @@ async function submit(params) {
 }
 // 验证必填
 function verification(){
-  const { isSuccess, categoryId, checkerList, department, money, rowId, submitName, typeId, isInvoice } = data
+  const { isSuccess, invoiceInfo, categoryId, checkerList, department, money, rowId, submitName, typeId, isInvoice } = data
+  // 判断发票信息
   if(!isSuccess && isInvoice){
     Toast.fail('请上传票据凭证');
     return
@@ -475,18 +523,14 @@ function verification(){
 
 // 设置参数
 function setParams(){
-  const { remark, money, categoryId, checkerList, department, rowId, submitName, typeId, invoiceInfo, isInvoice } = data
+  const { remark, money, categoryId, checkerList, department, rowId, submitName, typeId, invoiceInfo, isInvoice, invoiceList } = data
   let param = {}
-  let invoiceList = []
-  let list = {url: 'https://cdn.nlark.com/yuque/0/2022/png/413990/1642482454748-931b2e93-8964-492b-b06b-b8db42733c02.png'}
   let totleMoney = 0
   invoiceInfo.forEach(item => {
-    list[item.label] = item.value
     if(item.label === 'money'){
-      totleMoney += item.value - 0
+      totleMoney += ((item.value - 0)/100).toFixed(2)
     }
   })
-  invoiceList.push(list)
   if(isInvoice){
     param = {
       money: totleMoney * 100,invoiceList, remark, checkerList, typeId, projectId: projectId.value,
@@ -522,4 +566,15 @@ function setParams(){
   padding: 0 0.75rem;
   margin: 0.5rem;
 }
+
+.upload-box{
+  background: #f7f8fa;
+  position: relative;
+}
+
+.upload-txt{
+    position: absolute;
+    width: 100%;
+    bottom: 22px;
+}
 </style>
diff --git a/pages/application-details.vue b/pages/application-details.vue
index fbd60c8..55b88e4 100644
--- a/pages/application-details.vue
+++ b/pages/application-details.vue
@@ -50,11 +50,11 @@
       </div>
       <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
           <div>合计金额(元)</div>
-          <div>{{item.money}}</div>
+          <div>{{ (+item.money / 100).toFixed(2) }}</div>
       </div>
       <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
           <div>税额(元)</div>
-          <div>{{item.taxMoney}}</div>
+          <div>{{ (+item.taxMoney / 100).toFixed(2) }}</div>
       </div>
       <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
           <div>开票日期</div>
@@ -96,7 +96,10 @@
 <script setup>
 import dayjs from "dayjs";
 import { ref, computed } from 'vue';
-import { getApplyDetail } from 'apis/finance'
+import { getApplyDetail } from 'apis/finance';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
 // 审核人数据
 const currentRate = ref(0);
 const text = computed(() => currentRate.value.toFixed(0));
@@ -174,7 +177,9 @@ function onClickLeft(){
  */
 async function handleApplyDetail(){
   try {
-    const params = {param : { applyId: '1485797754654695424' }}
+    const routeValue = router.currentRoute.value;
+    const applyId = routeValue.query.applyId;
+    const params = {param : { applyId }}
     const res = await getApplyDetail(params)
     // 检查人
     checkerList.value = res.checkerList
diff --git a/pages/financial-approval-details.vue b/pages/financial-approval-details.vue
index cf7ee49..015304b 100644
--- a/pages/financial-approval-details.vue
+++ b/pages/financial-approval-details.vue
@@ -6,10 +6,40 @@
       @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 class="bg-white px-3" v-if="isInvoice">
+    <div class="text-gray-500 font-semibold px-1 py-3">发票信息</div>
+    <div v-for="(item,invoiceIndex) in invoiceList" :key="invoiceIndex">
+      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
+          <div>发票代码</div>
+          <div>{{item.invoiceCode}}</div>
+      </div>
+      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
+          <div>发票号码</div>
+          <div>{{item.invoiceNumber}}</div>
+      </div>
+      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
+          <div>合计金额(元)</div>
+          <div>{{ (+item.money / 100).toFixed(2) }}</div>
+      </div>
+      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
+          <div>税额(元)</div>
+          <div>{{ (+item.taxMoney / 100).toFixed(2) }}</div>
+      </div>
+      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
+          <div>开票日期</div>
+          <div>{{dayjs(item.invoiceTime - 0).format('YYYY年MM月DD日')}}</div>
+      </div>
+      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
+          <div>备注</div>
+          <div>{{item.remark}}</div>
+      </div>
+    </div>
+  </div>
+  <!-- 金额信息 -->
+  <div class="bg-white px-3" v-else>
+    <div class="text-gray-500 font-semibold px-1 py-3">发票信息</div>
+    <div v-for="(item,moneyIndex) in moneyInfo" :key="moneyIndex" class="flex py-2 px-4 text-gray-400 text-base justify-between">
         <div>{{item.name}}</div>
         <div>{{item.value}}</div>
     </div>
@@ -17,167 +47,221 @@
   <!-- 其他信息 -->
   <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,otherIndex) in otherData" :key="otherIndex" class="flex py-2 px-4 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="bg-white px-3 mb-5">
     <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, index) in submitter" :key="index" class="flex py-2 px-4 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 class="bg-white px-3 mb-5">
+    <div class="text-gray-500 font-semibold px-1 py-3">审核结果</div>
+    <div v-for="(item, checkerIndex) in checkerList" :key="checkerIndex" 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>
-          <div class="text-sm pt-1">{{item.checkedTime}}</div>
+          <div>{{item.checkerName}}</div>
+          <div class="text-sm pt-1">{{item.remark}}</div>
+          <div class="text-sm pt-1">{{item.time}}</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 class="text-center">
+          <div v-if="item.checkStatus == '1' || item.checkStatus == '2'" :class="item.checkStatus == '1' ? 'text-green-500' : item.checkStatus == '2' ? 'text-red-500' : ''">
+            {{item.checkStatus == '1' ? '已通过' : item.checkStatus == '2' ? '已驳回' : '待审批'}}
           </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 class="text-center" v-else>
+            <van-button type="success" round size="mini" class="button ml-5" @click="showRemark(item.financeCheckId, 1)">通过</van-button>
+            <van-button type="danger" round size="mini" class="button" @click="showRemark(item.financeCheckId, 2)">驳回</van-button>
           </div>
-          <div v-if="item.score>0" class="mt-1 text-yellow-500">
+          <div v-if="item.checkStatus == '1' || item.checkStatus == '2'" class="mt-1">
             <van-circle
-              v-model:current-rate="item.score"
-              :rate="item.score"
+              v-model:current-rate="currentRate"
+              :rate="100"
               :speed="100"
-              :text="item.score"
+              :text="100"
+              class="w-12"
               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>
+
+  <van-dialog v-model:show="data.show" title="备注" show-cancel-button @confirm="handleAudit">
+    <van-field :border="data.border" v-model="data.remark" type="textarea" class="remark" placeholder="请输入备注" />
+  </van-dialog>
 </div>
 </template>
+
 <script setup>
-import {ref} from 'vue'
-// 发票信息
-const billList = ref([
-  {
-    name: "发票代码",
-    value: "4154153125646",
-  },
-  {
-    name: "发票号码",
-    value: "545648789",
-  },
-  {
-    name: "合计金额(元)",
-    value: "40",
-  },
-  {
-    name: "税额(元)",
-    value: "2",
-  },
+import dayjs from "dayjs";
+import { ref, computed } from 'vue';
+import { getApplyDetail, audit } from 'apis/finance';
+import { useRouter } from 'vue-router';
+import { Toast } from 'vant';
+
+const router = useRouter();
+
+const data = reactive({
+  show: false,
+  remark: '',
+  auditInfo: {},
+  border: true
+})
+// 审核人数据
+const currentRate = ref(0);
+const text = computed(() => currentRate.value.toFixed(0));
+const isInvoice = ref(false)
+const checkerList = ref([])
+// 发票信息数据
+const invoiceList = ref([])
+// 没有发票信息得数据
+const moneyInfo = ref([
   {
-    name: "开票日期",
-    value: "2022年1月2日",
+    name: "申请金额",
+    value: "",
+    label: "money",
   },
   {
     name: "备注",
-    value: "业务支出",
+    value: "",
+    label: "remark",
   },
 ])
 // 其他信息数据
 const otherData = ref([
   {
     name: "申请类型",
-    value: "项目申请"
+    value: "",
+    label: "typeName",
   },
   {
     name: "所属项目",
-    value: "PT项目"
+    value: "",
+    label: "projectName",
   },
   {
     name: "所属任务",
-    value: "财务条界面设计"
+    value: "",
+    label: "taskDetailName",
   },
   {
     name: "类目",
-    value: "报销"
+    value: "",
+    label: "categoryName",
   },
   {
     name: "名目",
-    value: "业务招待费"
+    value: "",
+    label: "rowName",
   },
 ])
 // 提交人数据
 const submitter = ref([
   {
     name:'姓名',
-    value:'黛西'
+    value:'',
+    label: "submitName",
   },
   {
     name:'部门',
-    value:'软件部'
+    value:'软件部',
+    label: "department",
   },
   {
     name:'提交时间',
-    value:'2021/12/29 13:22'
-  },
-]);
-// 审核人员
-const checkerList = ref([
-  {
-    name: "冯教授",
-    advice: "",
-    checkedTime: "",
-    status: "0",
-    isMine: "1",
+    value:'',
+    label: "applyTime",
   },
-  {
-    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('返回')
+  console.log("上一页")
+}
+
+/**
+ * 查询申请详情
+ * @param { Number } applyId 申请记录id
+ */
+async function handleApplyDetail(){
+  try {
+    const routeValue = router.currentRoute.value;
+    const applyId = routeValue.query.applyId;
+    const params = {param : { applyId }}
+    const res = await getApplyDetail(params)
+    // 检查人
+    checkerList.value = res.checkerList
+    // 发票信息
+    isInvoice.value = res.invoiceList && res.invoiceList.length ? true : false;
+    invoiceList.value = res.invoiceList
+    for(let key  in res){
+      moneyInfo.value.forEach(item => {
+        if(item.label === key){
+          item.value = res[key]
+        }
+      })
+    }
+    // 其他信息
+    for(let key  in res){
+      otherData.value.forEach(item => {
+        if(item.label === key){
+          item.value = res[key]
+        }
+      })
+    }
+    // 提交人信息
+    for(let key  in res){
+      submitter.value.forEach(item => {
+        if(item.label === key){
+          item.value = res[key]
+        }
+      })
+    }
+  } catch (error) {
+    console.error('error: ', error);
+  }
 }
 
+handleApplyDetail()
+
+// 填写备注
+function showRemark(financeCheckId, checkStatus){
+  data.show = true
+  data.auditInfo = { financeCheckId, checkStatus }
+}
+
+/**
+ * 审批
+ * @param { Number } checkStatus 审核状态 1已通过 2驳回
+ * @param { String } financeCheckId 审核id
+ * @param { String } remark 备注
+ */
+async function handleAudit(financeCheckId, checkStatus){
+  try {
+    const { auditInfo, remark } = data
+    const { financeCheckId, checkStatus } = data.auditInfo
+    const params = {
+      param:{
+        financeCheckId,
+        checkStatus,
+        remark: data.remark
+      }
+    }
+    await audit(params)
+    Toast('审批成功');
+    handleFinanceOfProject()
+    data.remark = ''
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
 </script>
+
 <style lang="less" scoped>
 .van-circle{
   width: 2.5rem !important;
diff --git a/plugins/vant.js b/plugins/vant.js
index 6464f8d..0ab3865 100644
--- a/plugins/vant.js
+++ b/plugins/vant.js
@@ -25,6 +25,7 @@ import {
   Dialog,
   Picker,
   Loading,
+  Overlay
 } from 'vant';
 
 import { defineNuxtPlugin } from '#app';
@@ -53,5 +54,6 @@ export default defineNuxtPlugin(nuxtApp => {
     .use(Popover)
     .use(Dialog)
     .use(Picker)
-    .use(Loading);
+    .use(Loading)
+    .use(Overlay)
 });