From dfb457d11da754865b7c4505d0cd45aa51ef6bc2 Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Tue, 25 Jan 2022 18:38:42 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E5=8F=91=E8=B5=B7=E7=94=B3=E8=AF=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/axios.js                  |   9 +-
 apis/finance.js                |  20 +-
 apis/member.js                 |   8 +
 apis/projectFinance.js         |  23 ++
 app.vue                        |  36 +--
 components/FinanceExamine.vue  |  38 ++-
 components/FinanceManage.vue   |   9 +-
 composables/state.ts           |   8 +
 hooks/useApplication.js        |  33 +++
 pages/Initiate-application.vue | 444 ++++++++++++++-------------------
 pages/applicant.vue            |  18 +-
 plugins/vant.js                |   4 +-
 12 files changed, 318 insertions(+), 332 deletions(-)
 create mode 100644 apis/member.js
 create mode 100644 apis/projectFinance.js
 create mode 100644 hooks/useApplication.js

diff --git a/apis/axios.js b/apis/axios.js
index ba04463..c5488db 100644
--- a/apis/axios.js
+++ b/apis/axios.js
@@ -1,7 +1,7 @@
 import Axios from 'axios';
 import { Toast } from 'vant';
-// import store from 'store';
 import { createApp } from 'vue';
+import { useToken } from '../composables/state'
 
 const app = createApp();
 app.use(Toast);
@@ -13,12 +13,13 @@ const instance = Axios.create({
   timeout: 20000,
 });
 
+
 // request
 instance.interceptors.request.use(
   config => {
-    const token = sessionStorage.getItem('token') || '';
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
+    const token = useToken()
+    if (token.value) {
+      config.headers.Authorization = `Bearer ${token.value}`;
     }
     // config.headers.deviceId = store.state.systemInfo.deviceId;
     config.headers.deviceId = '1';
diff --git a/apis/finance.js b/apis/finance.js
index 4e74a91..df55123 100644
--- a/apis/finance.js
+++ b/apis/finance.js
@@ -3,7 +3,6 @@ import http from 'apis/axios';
 const apiUrl = import.meta.env.VITE_API_URL;
 const ptccsens = `${apiUrl}/ptccsens/v1.0`;
 const finance = `${ptccsens}/finance`;
-const projectFinance = `${ptccsens}/projectFinance`;
 
 // 发起申请
 export const apply = params => http.post(`${finance}/apply`, params);
@@ -17,21 +16,8 @@ export const getApplyDetail = params => http.post(`${finance}/getApplyDetail`, p
 // 通过任务id查看任务关联的财务信息
 export const getByTask = params => http.post(`${finance}/getByTask`, params);
 
+// 查看当前用户的费用申请历史信息（奖金）
+export const personalHistory = params => http.post(`${finance}/personalHistory`, params);
+
 // 查询费用申请类型
 export const queryType = params => http.post(`${finance}/queryType`, params);
-
-
-// 追加预算
-export const addBudget = params => http.post(`${projectFinance}/addBudget`, params);
-
-// 查看项目下的财务信息
-export const queryFinanceOfProject = params => http.post(`${projectFinance}/queryFinanceOfProject`, params);
-
-// 查看项目下的所有任务对应的财务信息
-export const queryProjectFinance = params => http.post(`${projectFinance}/queryProjectFinance`, params);
-
-// 修改任务或项目的预算和奖金信息
-export const updateFinance = params => http.post(`${projectFinance}/updateFinance`, params);
-
-// 查看自己需要审批的申请
-export const queryNeedCheckByMe = params => http.post(`${projectFinance}/queryNeedCheckByMe`, params);
diff --git a/apis/member.js b/apis/member.js
new file mode 100644
index 0000000..6c56500
--- /dev/null
+++ b/apis/member.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 member = `${ptccsens}/member`;
+
+// 查询所有成员
+export const queryChecker = params => http.post(`${member}/queryChecker`, params);
diff --git a/apis/projectFinance.js b/apis/projectFinance.js
new file mode 100644
index 0000000..c597b1f
--- /dev/null
+++ b/apis/projectFinance.js
@@ -0,0 +1,23 @@
+import http from 'apis/axios';
+
+const apiUrl = import.meta.env.VITE_API_URL;
+const ptccsens = `${apiUrl}/ptccsens/v1.0`;
+const projectFinance = `${ptccsens}/projectFinance`;
+
+// 追加预算
+export const addBudget = params => http.post(`${projectFinance}/addBudget`, params);
+
+// 查看所有的费用申请
+export const queryAllMoneyApply = params => http.post(`${projectFinance}/queryAllMoneyApply`, params);
+
+// 查看项目下的财务信息
+export const queryFinanceOfProject = params => http.post(`${projectFinance}/queryFinanceOfProject`, params);
+
+// 查看自己需要审批的申请
+export const queryNeedCheckByMe = params => http.post(`${projectFinance}/queryNeedCheckByMe`, params);
+
+// 查看项目下的所有任务对应的财务信息
+export const queryProjectFinance = params => http.post(`${projectFinance}/queryProjectFinance`, params);
+
+// 修改任务或项目的预算和奖金信息
+export const updateFinance = params => http.post(`${projectFinance}/updateFinance`, params);
diff --git a/app.vue b/app.vue
index af56958..2a98fbd 100644
--- a/app.vue
+++ b/app.vue
@@ -5,49 +5,25 @@
 <script setup>
 import { reactive } from 'vue';
 import { useRouter } from 'vue-router';
-import { getToken } from 'apis/index'
 
 const router = useRouter();
 
+const token = useToken()
 const user = useUser()
 const userId = useUserId()
 const projectId = useProjectId()
 const taskId = useTaskId()
+const projectName = useProjectName()
+const taskName = useTaskName()
 
 // 获取路径上的参数
 const routeValue = router.currentRoute.value;
 console.log('routeValue: ', routeValue);
+token.value = routeValue && routeValue.query && routeValue.query.token ? routeValue.query.token : '';
 userId.value = routeValue && routeValue.query && routeValue.query.userId ? routeValue.query.userId : '';
 projectId.value = routeValue && routeValue.query && routeValue.query.projectId ? routeValue.query.projectId : '';
 taskId.value = routeValue && routeValue.query && routeValue.query.id ? routeValue.query.id : '';
+projectName.value = routeValue && routeValue.query && routeValue.query.pn ? routeValue.query.pn : '';
+taskName.value = routeValue && routeValue.query && routeValue.query.tn ? routeValue.query.tn : '';
 
-// const userString = sessionStorage.getItem('user') || null;
-// if (userString) {
-//   const userInfo = JSON.parse(userString);
-//   user.value = userInfo;
-// } else {
-  getTokenByUserId(userId.value)
-// }
-
-/**
- * 根据userId获取token级user信息
- * @param {*} param
- * @param {string} userId 用户id
- */
-async function getTokenByUserId(userId) {
-  try {
-    const data = await getToken(userId);
-    user.value = data || null;
-      console.log('data: ', data);
-    if (data) {
-      sessionStorage.setItem('token', data.token);
-      sessionStorage.setItem('user', JSON.stringify(data));
-    } else {
-      sessionStorage.removeItem('token');
-      sessionStorage.removeItem('user');
-    }
-  } catch (error) {
-    console.error('error: ', error);
-  }
-}
 </script>
diff --git a/components/FinanceExamine.vue b/components/FinanceExamine.vue
index 47b4a33..8690621 100644
--- a/components/FinanceExamine.vue
+++ b/components/FinanceExamine.vue
@@ -14,15 +14,9 @@
             <td>{{dayjs(item.submitTime - 0).format('YYYY-MM-DD')}}</td>
             <td>
               <div v-if="!item.applyType" class="flex flex-row justify-between">
-              <!-- <van-popover v-model:show="showPopover">
-                <div>侧司法所</div>
-                <template #reference>
-                  <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, 1)">驳回</van-button>
-                </template>
-              </van-popover> -->
+
                 <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, 1)">驳回</van-button>
+                <van-button type="danger" size="mini" class="rounded" @click="showRemark(item.financeCheckId, 2)">驳回</van-button>
               </div>
               <div class="text-center" v-else :class="item.applyType === 1 ? 'text-blue-500' : 'text-red-500'">{{ item.applyType === 1 ? '已完成' : '已驳回' }}</div>
             </td>
@@ -34,12 +28,17 @@
     </div>
   </div>
   <van-empty v-else description="暂无数据" />
+
+  <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>
 </template>
 
 <script setup>
 import dayjs from "dayjs";
 import {ref, reactive, onMounted, nextTick} from'vue';
-import { queryNeedCheckByMe, audit } from 'apis/finance';
+import { audit } from 'apis/finance';
+import { queryNeedCheckByMe } from 'apis/projectFinance';
 import { Toast } from 'vant';
 
 const data = reactive({
@@ -47,7 +46,10 @@ const data = reactive({
   pageNum: 1,
   pageSize: 10,
   pages: 0,
-  showPopover: false,
+  show: false,
+  remark: '',
+  auditInfo: {},
+  border: true
 })
 
 const taskId = useTaskId()
@@ -85,7 +87,8 @@ onMounted(() => {
 
 // 填写备注
 function showRemark(financeCheckId, checkStatus){
-  data.showPopover = true
+  data.show = true
+  data.auditInfo = { financeCheckId, checkStatus }
 }
 
 /**
@@ -96,16 +99,19 @@ function showRemark(financeCheckId, checkStatus){
  */
 async function handleAudit(financeCheckId, checkStatus){
   try {
+    const { auditInfo, remark } = data
+    const { financeCheckId, checkStatus } = data.auditInfo
     const params = {
       param:{
         financeCheckId,
         checkStatus,
-        remark: ''
+        remark: data.remark
       }
     }
-    // const res = await audit(params)
+    await audit(params)
     Toast('审批成功');
     handleFinanceOfProject()
+    data.remark = ''
   } catch (error) {
     console.error('error: ', error);
   }
@@ -126,4 +132,10 @@ table{
     border-bottom: 1px solid #ccc
 }
 
+.remark{
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin: 5%;
+    width: 90%;
+}
 </style>
diff --git a/components/FinanceManage.vue b/components/FinanceManage.vue
index 8f61d31..7fbc307 100644
--- a/components/FinanceManage.vue
+++ b/components/FinanceManage.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script setup>
-import { queryProjectFinance, updateFinance } from 'apis/finance'
+import { queryProjectFinance, updateFinance } from 'apis/projectFinance'
 import {ref, reactive, onMounted, nextTick} from'vue'
 
 const data = reactive({
@@ -48,11 +48,7 @@ const projectId = useProjectId()
 
 /**
  * 查看项目下的所有任务对应的财务信息
- * @param {
- *
-
-
-  Number } pageNum
+ * @param { Number } pageNum
  * @param { Number } pageSize
  * @param { String } projectId
  * @param { String } name
@@ -84,7 +80,6 @@ async function handleProjectFinance(){
  * @param { String } taskFinanceId 任务财务信息id
  */
 async function handleUpdateFinance(item){
-  console.log('item: ', item);
   try {
     const params = {
       param:{
diff --git a/composables/state.ts b/composables/state.ts
index 25199f8..dec005a 100644
--- a/composables/state.ts
+++ b/composables/state.ts
@@ -19,3 +19,11 @@ export const useUser = () => {
 export const useTaskId = () => {
   return useState('taskId', () => null);
 };
+
+export const useProjectName = () => {
+  return useState('projectName', () => null);
+};
+
+export const useTaskName = () => {
+  return useState('taskName', () => null);
+};
diff --git a/hooks/useApplication.js b/hooks/useApplication.js
new file mode 100644
index 0000000..0b2ca8e
--- /dev/null
+++ b/hooks/useApplication.js
@@ -0,0 +1,33 @@
+import { queryChecker } from 'apis/member'
+import { ref } from 'vue'
+
+export default function useApplication() {
+  const projectId = useProjectId()
+
+  const reviewerList = ref([])
+
+  /**
+   * 查询所有成员
+   * @param { String } projectId
+   */
+  async function handleQueryChecker(){
+    try {
+      const params = {
+        param:{
+          projectId: projectId.value
+        }
+      }
+      const res = await queryChecker(params)
+      reviewerList.value = res
+    } catch (error) {
+      console.error('error: ', error);
+    }
+  }
+
+  // handleQueryChecker()
+
+  return {
+    handleQueryChecker,
+    reviewerList,
+  };
+}
diff --git a/pages/Initiate-application.vue b/pages/Initiate-application.vue
index f031f8d..2ed1d86 100644
--- a/pages/Initiate-application.vue
+++ b/pages/Initiate-application.vue
@@ -11,37 +11,37 @@
       <div class="bg-white pb-3">
         <div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div>
         <!-- 是否上传票据 -->
-        <div v-show="isInvoice">
+        <div v-show="data.isInvoice">
             <div class="mx-4 pb-3 border-b">
-              <div class="flex pt-3 pb-2 justify-between" v-show="titleHidden">
+              <div class="flex pt-3 pb-2 justify-between" v-show="data.titleHidden">
                 <div>
                   <span class="text-red-500">*</span>
                   <span class="text-gray-500">上传票据凭证 </span>
                   <span class="text-gray-400 text-xs">(仅支持ipg格式)</span>
                 </div>
-                <van-button plain type="primary" size="mini" @click="isInvoice = false">手动输入</van-button>
+                <van-button plain type="primary" size="mini" @click="data.isInvoice = false">手动输入</van-button>
               </div>
-              <div class="text-center border-b w-52 h-24 bg-gray-100 border-dashed border-2" @click="uploadBill" v-show="!isSuccess">
+              <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>
               <!-- 上传票据成功后显示发票信息 -->
-              <div v-show="isSuccess">
+              <div v-show="data.isSuccess">
                   <van-field
-                      v-for="item in billList"
+                      v-for="item in data.billList"
                       required
                       v-model="item.values"
-                      :label=item.name
+                      :label="item.name"
                       input-align="right"
                   />
                 </div>
             </div>
         </div >
           <!-- 手动输入信息 -->
-        <div v-show="!isInvoice">
+        <div v-show="!data.isInvoice">
                 <van-field
                   required
-                  v-model="applyMoney"
+                  v-model="data.applyMoney"
                   label="申请金额"
                   placeholder="输入申请金额"
                   input-align="right"
@@ -51,7 +51,7 @@
         <div class="text-gray-500 py-4 pl-5">备注</div>
           <van-cell-group>
               <van-field
-                v-model="message"
+                v-model="data.message"
                 rows="2"
                 autosize
                 type="textarea"
@@ -73,11 +73,12 @@
               <van-button
                 class="button"
                 size="mini"
-                v-for="item in reviewerList"
-                :type="selected.find(checker => checker === item) ? 'primary' : 'default'"
-                @click="handleSelectChecker(item)"
+                v-for="item in data.reviewerList"
+                :key="item.userId"
+                :type="data.checkerList.find(checker => checker === item.userId) ? 'primary' : 'default'"
+                @click="handleSelectChecker(item.userId)"
               >
-                {{item}}
+                {{item.name}}
               </van-button>
             </div>
           </div>
@@ -87,21 +88,21 @@
         <div class="text-gray-500 p-4 font-semibold">其他信息</div>
         <!-- 申请类型 -->
         <!-- 普通票据申请 -->
-        <div v-show="isInvoice">
+        <div v-show="data.isInvoice">
             <van-field
-              v-model="applyType"
+              v-model="data.applyType"
               is-link
               readonly
               label="申请类型"
               placeholder="请选择申请类型"
-              @click="showType = true"
+              @click="data.showType = true"
               required
               input-align="right"
             />
-            <van-popup v-model:show="showType" round position="bottom">
+            <van-popup v-model:show="data.showType" round position="bottom">
               <van-cascader
-                :options="applyTypeOptions"
-                @close="showType = false"
+                :options="data.applyTypeOptions"
+                @close="data.showType = false"
                 @finish="finishApplyType"
                 active-color="#1989fa"
                 class="p-0"
@@ -109,59 +110,52 @@
             </van-popup>
             <!-- 所属项目 -->
             <van-field
-              v-model="applyProject"
+              v-model="data.projectName"
               is-link
               readonly
               label="所属项目"
               placeholder="请选择所属项目"
-              @click="showProject = true"
               required
               input-align="right"
+              disabled
             />
-            <van-popup v-model:show="showProject" round position="bottom">
+            <van-popup v-model:show="data.projectName" round position="bottom">
               <van-cascader
-                :options="applyProjectOptions"
-                @close="showProject = false"
-                @finish="finishApplyProject"
                 active-color="#1989fa"
                 class="p-0"
               />
             </van-popup>
             <!-- 所属任务的 -->
             <van-field
-              v-model="applyTask"
+              v-model="data.taskName"
               is-link
               readonly
               label="所属任务"
               placeholder="请选择所属任务"
-              @click="showTask = true"
               required
               input-align="right"
+              disabled
             />
-            <van-popup v-model:show="showTask" round position="bottom">
+            <van-popup v-model:show="data.taskName" round position="bottom">
               <van-cascader
-                :options="applyTaskOptions"
-                @close="showTask = false"
-                @finish="finishApplyTask"
                 active-color="#1989fa"
                 class="p-0"
               />
             </van-popup>
             <!-- 类目选择 -->
             <van-field
-                v-model="applyCategory"
+                v-model="data.applyCategory"
                 is-link
                 readonly
                 label="类目"
                 placeholder="请选择类目"
-                @click="showCategory = true"
-                required
+                @click="data.showCategory = true"
                 input-align="right"
               />
-            <van-popup v-model:show="showCategory" round position="bottom">
+            <van-popup v-model:show="data.showCategory" round position="bottom">
               <van-cascader
-                :options="applyCategoryOptions"
-                @close="showCategory = false"
+                :options="data.applyCategoryOptions"
+                @close="data.showCategory = false"
                 @finish="finishApplyCategory"
                 active-color="#1989fa"
                 class="p-0"
@@ -169,19 +163,18 @@
             </van-popup>
             <!-- 名目选择 -->
             <van-field
-                v-model="applyName"
+                v-model="data.applyName"
                 is-link
                 readonly
-                label="类目"
-                placeholder="请选择类目"
-                @click="showName = true"
-                required
+                label="名目"
+                placeholder="请选择名目"
+                @click="data.showName = true"
                 input-align="right"
               />
-            <van-popup v-model:show="showName" round position="bottom">
+            <van-popup v-model:show="data.showName" round position="bottom">
               <van-cascader
-                :options="applyNameOptions"
-                @close="showName = false"
+                :options="data.applyNameOptions"
+                @close="data.showName = false"
                 @finish="finishApplyName"
                 active-color="#1989fa"
                 class="p-0"
@@ -189,10 +182,10 @@
             </van-popup>
         </div>
         <!-- 个人手动申请 -->
-        <div v-show="!isInvoice">
+        <div v-show="!data.isInvoice">
         <div class="pl-2">
-          <van-cell title="单元格" is-link :value="personalType" required/>
-          <van-cell title="单元格" is-link :value="personalCategory" required/>
+          <van-cell title="单元格" is-link :value="data.personalType" required/>
+          <van-cell title="单元格" is-link :value="data.personalCategory" required/>
         </div>
 
         </div>
@@ -202,26 +195,26 @@
            <div class="text-gray-500 p-4 font-semibold">提交人信息</div>
            <van-field
               required
-              v-model="name"
+              v-model="data.name"
               label="姓名"
               placeholder="输入姓名"
               input-align="right"
             />
          <!-- 选择所属部门 -->
           <van-field
-            v-model="applyDepartment"
+            v-model="data.applyDepartment"
             is-link
             readonly
             label="所属部门"
             placeholder="请选择所属部门"
-            @click="showDepartment = true"
+            @click="data.showDepartment = true"
             required
             input-align="right"
           />
-        <van-popup v-model:show="showDepartment" round position="bottom">
+        <van-popup v-model:show="data.showDepartment" round position="bottom">
           <van-cascader
-            :options="applyDepartmentOptions"
-            @close="showDepartment = false"
+            :options="data.applyDepartmentOptions"
+            @close="data.showDepartment = false"
             @finish="finishApplyDepartment"
             active-color="#1989fa"
             class="p-0"
@@ -231,13 +224,10 @@
       <!-- 历史申请 -->
       <div class="bg-white mt-3 p-4">
             <div class="text-gray-500 font-semibold">历史申请</div>
-            <div v-if="showHistory">
+            <div>
               <Search />
               <FinanceManage />
             </div>
-            <div v-if="!showHistory" class="no-data">
-                暂无历史记录
-            </div>
       </div>
       <!-- 底部立即提交按钮 -->
       <NuxtLink to="/application-details">
@@ -249,213 +239,112 @@
   </div>
 </template>
 <script setup>
-import {ref} from 'vue'
-const isInvoice = ref(true); // 判断是否是手动输入
-const message = ref('');   // 备注的值
-const billList = ref([
-  {
-    name: '发票代码',
-    values:0
-  },
-  {
-    name: '发票号码',
-    values:1
-  },
-  {
-    name: '合计金额(元)',
-    values:2
-  },
-  {
-    name: '税额(元)',
-    values:3
-  },
-  {
-    name: '开票日期',
-    values:4
-  }
-]) // 识别后的发票信息
-const reviewerList = ref(['冯教授','周亮','李洪明','夏红','麦琪其','薇薇安','卫老师']);  //审核人数组
-const selected = ref(['冯教授']); //默认的审核人
-const showHistory = ref(true); // 根据数据判断是否有历史记录
-const applyData = ref([
-  {
-    applicant:'代用名1',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 1
-  },
-  {
-    applicant:'代用名2',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 2
-  },
-  {
-    applicant:'代用名1',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 3
-  },
-  {
-    applicant:'代用名2',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 3
-  },
-  {
-    applicant:'代用名1',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 1
-  },
-  {
-    applicant:'代用名2',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 2
-  }
-]);  //  申请的记录
-const isSuccess = ref(false)  // 上传票据是否成功
-const name = ref('')  // 提交人的姓名
-const applyMoney = ref(5000) // 手动输入时输入的申请的金额
-const titleHidden = ref(true) // 上传提示语隐藏
-const currentPage = ref(0) //当前显示页数
-const personalType = ref('个人申请')
-const personalCategory = ref('用款')
+import {ref, reactive} from 'vue'
+// import useApplication from 'hooks/useApplication';
+import { queryChecker } from 'apis/member'
+import { queryType } from 'apis/finance'
 
-// 其他信息的多个选择按钮
-  // 申请类型的
-  const showType = ref(false);
-  const applyProject = ref('');  // 选择的类型的值
-  const applyTypeOptions = [
-      {
-        text: '项目申请',
-        value: '330000',
-      },
-      {
-        text: '日常申请',
-        value: '320000',
-      }
-    ];
-    function finishApplyType({ selectedOptions }){
-      showType.value = false;
-      applyType.value = selectedOptions.map((option) => option.text);
-    }
-  // 所属项目的
-  const showProject = ref(false);
-  const applyType = ref('');  // 选择的项目的值
-  const applyProjectOptions = [
-      {
-        text: '项目一',
-        value: '330000',
-      },
-      {
-        text: '项目二',
-        value: '320000',
-      },
-      {
-        text: '项目三',
-        value: '310000',
-      }
-    ];
-    function finishApplyProject({ selectedOptions }){
-      showProject.value = false;
-      applyProject.value = selectedOptions.map((option) => option.text);
+// const getApplication = useApplication();
+const projectName = useProjectName()
+const taskName = useTaskName()
+const projectId = useProjectId()
+const data = reactive({
+  isInvoice: true,
+  message: '',
+  billList: [
+    {
+      name: '发票代码',
+      values:0
+    },
+    {
+      name: '发票号码',
+      values:1
+    },
+    {
+      name: '合计金额(元)',
+      values:2
+    },
+    {
+      name: '税额(元)',
+      values:3
+    },
+    {
+      name: '开票日期',
+      values:4
     }
+  ],
+  reviewerList: [], // 审核人数组
+  checkerList: [], // 默认的审核人
+  applyData: [
+    {
+      applicant:'代用名1',
+      money:100,
+      time:'2021/12/31 12:31',
+      type: 1
+    },
+    {
+      applicant:'代用名2',
+      money:100,
+      time:'2021/12/31 12:31',
+      type: 2
+    },
+  ], // 申请的记录
+  isSuccess: false, // 上传票据是否成功
+  name: '', // 提交人的姓名
+  pplyMoney: '5000', // 手动输入时输入的申请的金额
+  titleHidden: true, // 上传提示语隐藏
+  currentPage: 0, // 当前显示页数
+  personalType: '个人申请', // 上传提示语隐藏
+  personalCategory: '用款',
+  // 其他信息的多个选择按钮
+  showType: false, // 申请类型的
+  applyProject: '', // 选择的类型的值
+  applyTypeOptions: [],
+  showCategory: false, // 所属的类目
+  applyCategory: '', // 选择的类目的值
+  applyCategoryOptions: [],
+  showName: false, // 所属的名目
+  applyName: '', // 选择的名目的值
+  applyNameOptions: [],
+  showDepartment: false, // 所属的部门
+  applyDepartment: '', // 选择的部门的值
+  applyDepartmentOptions: [],
+})
 
-  // 所属任务的
-  const showTask = ref(false);
-  const applyTask = ref('');  // 选择的任务的值
-  const applyTaskOptions = [
-      {
-        text: '任务一',
-        value: '330000',
-      },
-      {
-        text: '任务二',
-        value: '320000',
-      },
-      {
-        text: '任务三',
-        value: '310000',
-      }
-    ];
-    function finishApplyTask({ selectedOptions }){
-      showTask.value = false;
-      applyTask.value = selectedOptions.map((option) => option.text);
-    }
-  // 所属的类目
-  const showCategory = ref(false);
-  const applyCategory = ref('');  // 选择的类目的值
-  const applyCategoryOptions = [
-      {
-        text: '报销',
-        value: '330000',
-      },
-      {
-        text: '奖金',
-        value: '320000',
-      },
-    ];
-    function finishApplyCategory({ selectedOptions }){
-      showCategory.value = false;
-      applyCategory.value = selectedOptions.map((option) => option.text);
-    }
+// 选择申请类型
+function finishApplyType({ selectedOptions }){
+  showType.value = false;
+  applyType.value = selectedOptions.map((option) => option.text);
+}
 
-  // 所属的名目
-  const showName = ref(false);
-  const applyName = ref('');  // 选择的名目的值
-  const applyNameOptions = [
-      {
-        text: '办公费',
-        value: '330000',
-      },
-      {
-        text: '车辆费用',
-        value: '320000',
-      },
-      {
-        text: '差旅费',
-        value: '310000',
-      }
-    ];
-    function finishApplyName({ selectedOptions }){
-      showName.value = false;
-      applyName.value = selectedOptions.map((option) => option.text);
-    }
+// 所属的类目
+function finishApplyCategory({ selectedOptions }){
+  showCategory.value = false;
+  applyCategory.value = selectedOptions.map((option) => option.text);
+}
 
-  // 所属部门
-  const showDepartment = ref(false);
-  const applyDepartment = ref('');  // 选择的部门的值
-  const applyDepartmentOptions = [
-      {
-        text: '软件部',
-        value: '330000',
-      },
-      {
-        text: '硬件部',
-        value: '320000',
-      },
-      {
-        text: '人事部',
-        value: '310000',
-      }
-    ];
-    function finishApplyDepartment({ selectedOptions }){
-      showDepartment.value = false;
-      applyDepartment.value = selectedOptions.map((option) => option.text);
-    }
+// 所属的名目
+function finishApplyName({ selectedOptions }){
+  showName.value = false;
+  applyName.value = selectedOptions.map((option) => option.text);
+}
 
+// 所属部门
+function finishApplyDepartment({ selectedOptions }){
+  showDepartment.value = false;
+  applyDepartment.value = selectedOptions.map((option) => option.text);
+}
 
 // 检查被选中的审核人的状态
-function handleSelectChecker(items){
-  const target = selected.value.find(item =>item === items)
+function handleSelectChecker(id){
+  const target = data.checkerList.find(item =>item === id)
   if(target){
-    selected.value = selected.value.filter(item =>item !== items)
+    data.checkerList = data.checkerList.filter(item =>item !== id)
   }else{
-    selected.value.push(items)
+    data.checkerList.push(id)
   }
 }
+
 // 上传票据事件
 function uploadBill(){
   //TODO:调取接口识别票据
@@ -465,6 +354,53 @@ function uploadBill(){
   },1000)
 }
 
+/**
+ * 查询所有成员
+ * @param { String } projectId
+ */
+async function handleQueryChecker(){
+  try {
+    const params = {
+      param:{
+        projectId: projectId.value
+      }
+    }
+    const res = await queryChecker(params)
+    data.reviewerList = res
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+
+/**
+ * 查询费用申请类型
+ * @param { String } parentId 上级类型ID，默认为0
+ * @param { Number } type 类型：0申请类型 1类目 2名目
+ */
+async function handleQueryType(parentId, type){
+  try {
+    const params = {
+      param:{
+        parentId,
+        type,
+      }
+    }
+    const res = await queryType(params)
+    res.forEach((item) => {
+      data.applyTypeOptions.push(item.name)
+    })
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+
+onMounted(() =>{
+  // 查询所有成员
+  handleQueryChecker()
+  // 查询费用申请类型
+  handleQueryType(0, 0)
+})
+
 </script>
 
 <style lang="less" scoped>
diff --git a/pages/applicant.vue b/pages/applicant.vue
index 9a239f9..b8af57b 100644
--- a/pages/applicant.vue
+++ b/pages/applicant.vue
@@ -9,7 +9,7 @@
     <!-- 搜索框与表格部分 -->
     <van-tabs v-model:active="active" shrink line-width="60px" color="#59B4FF" title-active-color="#59B4FF">
       <van-tab title="我的申请">
-        <div class="mt-8 bg-white">
+        <div class="mt-8 bg-white flex flex-col">
             <div class="p-4 pb-0 text-gray-500 font-semibold">历史申请</div>
             <Search class="px-4 pt-0"/>
             <FinanceManage class="px-4 mt-0"/>
@@ -26,14 +26,11 @@
 
         </div> -->
         <!-- 底部提交按钮部分 -->
-        <div class="mt-20">
-          <NuxtLink to="/Initiate-application">
-               <van-button type="primary" block>发起申请</van-button>
-          </NuxtLink>
+        <div class="mt-20" @click="toApplication">
+          <van-button type="primary" block>发起申请</van-button>
         </div>
       </van-tab>
 
-
       <van-tab title="我的奖金">
         <div class="mt-8 bg-white">
             <div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div>
@@ -63,6 +60,9 @@
 
 <script setup>
 import {ref} from 'vue'
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
 
 const active = ref(0);
 const isShow = ref(true);
@@ -72,6 +72,12 @@ function onClickLeft(){
   console.log('返回上一页')
 }
 
+function toApplication() {
+  const routeValue = router.currentRoute.value;
+  const query = routeValue.query
+  router.push({path: '/Initiate-application', query})
+}
+
 </script>
 
 
diff --git a/plugins/vant.js b/plugins/vant.js
index 64c80fd..8439da6 100644
--- a/plugins/vant.js
+++ b/plugins/vant.js
@@ -21,7 +21,8 @@ import {
   Cascader,
   Circle,
   Empty,
-  Popover
+  Popover,
+  Dialog
 } from 'vant';
 
 import { defineNuxtPlugin } from '#app';
@@ -48,4 +49,5 @@ export default defineNuxtPlugin(nuxtApp => {
     .use(Tabs)
     .use(Empty)
     .use(Popover)
+    .use(Dialog)
 });

From 7bc5def9b30cd23e88b55231654440ccb3d8bfbd Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Wed, 26 Jan 2022 11:40:31 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E5=8F=91=E8=B5=B7=E7=94=B3=E8=AF=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/Initiate-application.vue | 274 +++++++++++++++++++++++----------
 pages/application-details.vue  |  16 ++
 plugins/vant.js                |   6 +-
 3 files changed, 210 insertions(+), 86 deletions(-)

diff --git a/pages/Initiate-application.vue b/pages/Initiate-application.vue
index 4b7c0fb..77935cf 100644
--- a/pages/Initiate-application.vue
+++ b/pages/Initiate-application.vue
@@ -27,10 +27,11 @@
               <!-- 上传票据成功后显示发票信息 -->
               <div v-show="data.isSuccess">
                   <van-field
-                      v-for="item in data.billList"
+                      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"
                   />
                 </div>
@@ -40,7 +41,7 @@
         <div v-show="!data.isInvoice">
                 <van-field
                   required
-                  v-model="data.applyMoney"
+                  v-model="data.money"
                   label="申请金额"
                   placeholder="输入申请金额"
                   input-align="right"
@@ -50,7 +51,7 @@
         <div class="text-gray-500 py-4 pl-5">备注</div>
           <van-cell-group>
               <van-field
-                v-model="data.message"
+                v-model="data.remark"
                 rows="2"
                 autosize
                 type="textarea"
@@ -87,7 +88,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
@@ -99,13 +100,13 @@
               input-align="right"
             />
             <van-popup v-model:show="data.showType" round position="bottom">
-              <van-cascader
-                :options="data.applyTypeOptions"
-                @close="data.showType = false"
-                @finish="finishApplyType"
-                active-color="#1989fa"
-                class="p-0"
+              <van-picker
+                title="申请类型"
+                v-if="data.applyTypeOptions && data.applyTypeOptions.length"
+                :columns="data.applyTypeOptions"
+                @confirm="finishApplyType"
               />
+              <van-loading v-else type="spinner" class="text-center my-20" />
             </van-popup>
             <!-- 所属项目 -->
             <van-field
@@ -127,6 +128,7 @@
             <!-- 所属任务的 -->
             <van-field
               v-model="data.taskName"
+              v-show="data.isInvoice"
               is-link
               readonly
               label="所属任务"
@@ -148,77 +150,60 @@
                 readonly
                 label="类目"
                 placeholder="请选择类目"
+                required
                 @click="data.showCategory = true"
                 input-align="right"
               />
             <van-popup v-model:show="data.showCategory" round position="bottom">
-              <van-cascader
-                :options="data.applyCategoryOptions"
-                @close="data.showCategory = false"
-                @finish="finishApplyCategory"
-                active-color="#1989fa"
-                class="p-0"
+              <van-picker
+                title="请选择类目"
+                v-if="data.applyCategoryOptions && data.applyCategoryOptions.length"
+                :columns="data.applyCategoryOptions"
+                @confirm="finishApplyCategory"
               />
+              <van-loading v-else type="spinner" class="text-center my-20" />
             </van-popup>
             <!-- 名目选择 -->
             <van-field
                 v-model="data.applyName"
+                v-show="data.isInvoice"
                 is-link
                 readonly
                 label="名目"
                 placeholder="请选择名目"
+                required
                 @click="data.showName = true"
                 input-align="right"
               />
             <van-popup v-model:show="data.showName" round position="bottom">
-              <van-cascader
-                :options="data.applyNameOptions"
-                @close="data.showName = false"
-                @finish="finishApplyName"
-                active-color="#1989fa"
-                class="p-0"
+              <van-picker
+                title="请选择名目"
+                v-if="data.applyNameOptions && data.applyNameOptions.length"
+                :columns="data.applyNameOptions"
+                @confirm="finishApplyName"
               />
+              <van-loading v-else type="spinner" class="text-center my-20" />
             </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">
            <div class="text-gray-500 p-4 font-semibold">提交人信息</div>
            <van-field
               required
-              v-model="data.name"
+              v-model="data.submitName"
               label="姓名"
-              placeholder="输入姓名"
+              placeholder="请输入姓名"
               input-align="right"
             />
          <!-- 选择所属部门 -->
           <van-field
-            v-model="data.applyDepartment"
-            is-link
-            readonly
-            label="所属部门"
-            placeholder="请选择所属部门"
-            @click="data.showDepartment = true"
             required
+            v-model="data.department"
+            label="所属部门"
+            placeholder="请输入所属部门"
             input-align="right"
           />
-        <van-popup v-model:show="data.showDepartment" round position="bottom">
-          <van-cascader
-            :options="data.applyDepartmentOptions"
-            @close="data.showDepartment = false"
-            @finish="finishApplyDepartment"
-            active-color="#1989fa"
-            class="p-0"
-          />
-        </van-popup>
       </div>
       <!-- 历史申请 -->
       <div class="bg-white mt-3 p-4">
@@ -230,44 +215,53 @@
       </div>
       <!-- 底部立即提交按钮 -->
          <div class="mx-6 mt-10">
-          <van-button type="primary" size="small" block>立即提交</van-button>
+          <van-button type="primary" size="small" block @click="submit">立即提交</van-button>
         </div>
   </div>
 </template>
+
 <script setup>
 import {ref, reactive} from 'vue'
 // import useApplication from 'hooks/useApplication';
 import { queryChecker } from 'apis/member'
-import { queryType } from 'apis/finance'
+import { queryType, apply } from 'apis/finance'
+import { Toast } from 'vant';
 
 // const getApplication = useApplication();
 const projectName = useProjectName()
 const taskName = useTaskName()
 const projectId = useProjectId()
+const taskDetailId = useTaskId()
 const data = reactive({
   isInvoice: true,
-  message: '',
-  billList: [
+  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'
+    },
   ],
   reviewerList: [], // 审核人数组
   checkerList: [], // 默认的审核人
@@ -286,7 +280,9 @@ const data = reactive({
     },
   ], // 申请的记录
   isSuccess: false, // 上传票据是否成功
-  name: '', // 提交人的姓名
+  money: '', // 金额
+  submitName: '', // 提交人的姓名
+  department: '', // 选择的部门的值
   pplyMoney: '5000', // 手动输入时输入的申请的金额
   titleHidden: true, // 上传提示语隐藏
   currentPage: 0, // 当前显示页数
@@ -294,41 +290,53 @@ const data = reactive({
   personalCategory: '用款',
   // 其他信息的多个选择按钮
   showType: false, // 申请类型的
-  applyProject: '', // 选择的类型的值
+  applyTypes: [],
   applyTypeOptions: [],
+  applyType: '', // 选择的类型的值
+  typeId: '',
   showCategory: false, // 所属的类目
-  applyCategory: '', // 选择的类目的值
+  applyCategories: [],
   applyCategoryOptions: [],
+  applyCategory: '', // 选择的类目的值
+  categoryId: '',
   showName: false, // 所属的名目
-  applyName: '', // 选择的名目的值
+  applyNames: [],
   applyNameOptions: [],
-  showDepartment: false, // 所属的部门
-  applyDepartment: '', // 选择的部门的值
-  applyDepartmentOptions: [],
+  applyName: '', // 选择的名目的值
+  rowId: '',
 })
 
+// 发票信息
+function cahngeInvoiceList(e,item){
+  console.log('e: ', e.target.value,item);
+}
+
 // 选择申请类型
-function finishApplyType({ selectedOptions }){
-  showType.value = false;
-  applyType.value = selectedOptions.map((option) => option.text);
+function finishApplyType(e){
+  data.showType = false;
+  data.applyType = e;
+  const type = data.applyTypes.find((option) => option.name === e);
+  data.typeId = type.id;
+  // 类目
+  handleQueryType(data.typeId, 1)
 }
 
 // 所属的类目
-function finishApplyCategory({ selectedOptions }){
-  showCategory.value = false;
-  applyCategory.value = selectedOptions.map((option) => option.text);
+function finishApplyCategory(e){
+  data.showCategory = false;
+  data.applyCategory = e;
+  const category = data.applyCategories.find((option) => option.name === e);
+  data.categoryId = category.id;
+  // 名目
+  handleQueryType(data.categoryId, 2)
 }
 
 // 所属的名目
-function finishApplyName({ selectedOptions }){
-  showName.value = false;
-  applyName.value = selectedOptions.map((option) => option.text);
-}
-
-// 所属部门
-function finishApplyDepartment({ selectedOptions }){
-  showDepartment.value = false;
-  applyDepartment.value = selectedOptions.map((option) => option.text);
+function finishApplyName(e){
+  data.showName = false;
+  data.applyName = e;
+  const row = data.applyNames.find((option) => option.name === e);
+  data.rowId = row.id;
 }
 
 // 检查被选中的审核人的状态
@@ -345,8 +353,8 @@ function handleSelectChecker(id){
 function uploadBill(){
   //TODO:调取接口识别票据
   setTimeout(() =>{
-    titleHidden.value = false
-    isSuccess.value = true
+    data.titleHidden = false
+    data.isSuccess = true
   },1000)
 }
 
@@ -374,6 +382,7 @@ async function handleQueryChecker(){
  * @param { Number } type 类型：0申请类型 1类目 2名目
  */
 async function handleQueryType(parentId, type){
+  console.log('parentId: ', parentId);
   try {
     const params = {
       param:{
@@ -382,9 +391,24 @@ async function handleQueryType(parentId, type){
       }
     }
     const res = await queryType(params)
-    res.forEach((item) => {
-      data.applyTypeOptions.push(item.name)
-    })
+    if(type === 0){
+      data.applyTypes = res
+      res.forEach((item) => {
+        data.applyTypeOptions.push(item.name)
+      })
+    }
+    if(type === 1){
+      data.applyCategories = res
+      res.forEach((item) => {
+        data.applyCategoryOptions.push(item.name)
+      })
+    }
+    if(type === 2){
+      data.applyNames = res
+      res.forEach((item) => {
+        data.applyNameOptions.push(item.name)
+      })
+    }
   } catch (error) {
     console.error('error: ', error);
   }
@@ -401,6 +425,86 @@ function onClickLeft(){
   console.log(1)
 }
 
+/**
+ * 发起申请
+ * @param { Object } params
+ */
+async function submit(params) {
+  try {
+    if(!verification()) return
+    const params = {}
+    params.param = setParams()
+    await apply(params)
+    Toast.success('申请成功');
+  } catch (error) {
+    console.log('error: ', error);
+    Toast.fail(error || '申请失败');
+  }
+}
+// 验证必填
+function verification(){
+  const { isSuccess, categoryId, checkerList, department, money, rowId, submitName, typeId, isInvoice } = data
+  if(!isSuccess && isInvoice){
+    Toast.fail('请上传票据凭证');
+    return
+  }
+  if(!money && !isInvoice){
+    Toast.fail('请输入金额');
+    return
+  }
+  if(!checkerList || !checkerList.length){
+    Toast.fail('请选择审核人');
+    return
+  }
+  if(!typeId){
+    Toast.fail('请选择申请类型');
+    return
+  }
+  if(!categoryId){
+    Toast.fail('请选择类目');
+    return
+  }
+  if(!rowId && isInvoice){
+    Toast.fail('请选择名目');
+    return
+  }
+  if(!submitName){
+    Toast.fail('请输入提交人姓名');
+    return
+  }
+  if(!department){
+    Toast.fail('请输入所属部门');
+    return
+  }
+  return true
+}
+
+// 设置参数
+function setParams(){
+  const { remark, money, categoryId, checkerList, department, rowId, submitName, typeId, invoiceInfo, isInvoice } = 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
+    }
+  })
+  invoiceList.push(list)
+  if(isInvoice){
+    param = {
+      money: totleMoney,invoiceList, remark, checkerList, typeId, projectId: projectId.value,
+      taskDetailId: taskDetailId.value, categoryId, rowId, submitName, department
+    }
+  }else{
+    param = {
+      money, remark, checkerList, typeId, projectId: projectId.value, categoryId, submitName, department
+    }
+  }
+  return param
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/pages/application-details.vue b/pages/application-details.vue
index 287f69b..6ec9e22 100644
--- a/pages/application-details.vue
+++ b/pages/application-details.vue
@@ -64,6 +64,7 @@
 </template>
 
 <script setup>
+import { getApplyDetail } from 'apis/finance'
 // 审核人数据
 const checkerList = ref([
   {
@@ -156,6 +157,21 @@ const submitter = ref([
 function onClickLeft(){
   console.log("上一页")
 }
+
+/**
+ * 查询申请详情
+ * @param { Number } applyId 申请记录id
+ */
+async function handleApplyDetail(){
+  try {
+    const params = {param : { applyId: '1485797754654695424' }}
+    await getApplyDetail(params)
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+
+handleApplyDetail()
 </script>
 
 <style lang="less" scoped>
diff --git a/plugins/vant.js b/plugins/vant.js
index 8439da6..6bcb2c2 100644
--- a/plugins/vant.js
+++ b/plugins/vant.js
@@ -22,7 +22,9 @@ import {
   Circle,
   Empty,
   Popover,
-  Dialog
+  Dialog,
+  Picker,
+  Loading
 } from 'vant';
 
 import { defineNuxtPlugin } from '#app';
@@ -50,4 +52,6 @@ export default defineNuxtPlugin(nuxtApp => {
     .use(Empty)
     .use(Popover)
     .use(Dialog)
+    .use(Picker)
+    .use(Loading)
 });

From 3869ff242e358c8d7bf731bd2c32716acb0a26a5 Mon Sep 17 00:00:00 2001
From: aBin <binbin0314@126.com>
Date: Wed, 26 Jan 2022 14:21:04 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E6=88=91=E7=9A=84=E5=8E=86=E5=8F=B2?=
 =?UTF-8?q?=E7=94=B3=E8=AF=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/projectFinance.js               |  52 +-
 components/BonusCollection.vue       | 122 ++++
 components/HistoricalApplication.vue | 155 +++++
 pages/Initiate-application.vue       | 877 ++++++++++++++-------------
 pages/applicant.vue                  | 166 ++---
 plugins/vant.js                      | 108 ++--
 6 files changed, 899 insertions(+), 581 deletions(-)
 create mode 100644 components/BonusCollection.vue
 create mode 100644 components/HistoricalApplication.vue

diff --git a/apis/projectFinance.js b/apis/projectFinance.js
index c597b1f..f4d354b 100644
--- a/apis/projectFinance.js
+++ b/apis/projectFinance.js
@@ -1,23 +1,29 @@
-import http from 'apis/axios';
-
-const apiUrl = import.meta.env.VITE_API_URL;
-const ptccsens = `${apiUrl}/ptccsens/v1.0`;
-const projectFinance = `${ptccsens}/projectFinance`;
-
-// 追加预算
-export const addBudget = params => http.post(`${projectFinance}/addBudget`, params);
-
-// 查看所有的费用申请
-export const queryAllMoneyApply = params => http.post(`${projectFinance}/queryAllMoneyApply`, params);
-
-// 查看项目下的财务信息
-export const queryFinanceOfProject = params => http.post(`${projectFinance}/queryFinanceOfProject`, params);
-
-// 查看自己需要审批的申请
-export const queryNeedCheckByMe = params => http.post(`${projectFinance}/queryNeedCheckByMe`, params);
-
-// 查看项目下的所有任务对应的财务信息
-export const queryProjectFinance = params => http.post(`${projectFinance}/queryProjectFinance`, params);
-
-// 修改任务或项目的预算和奖金信息
-export const updateFinance = params => http.post(`${projectFinance}/updateFinance`, params);
+import http from 'apis/axios';
+
+const apiUrl = import.meta.env.VITE_API_URL;
+const ptccsens = `${apiUrl}/ptccsens/v1.0`;
+const projectFinance = `${ptccsens}/projectFinance`;
+
+// 追加预算
+export const addBudget = params =>
+  http.post(`${projectFinance}/addBudget`, params);
+
+// 查看所有的费用申请
+export const queryAllMoneyApply = params =>
+  http.post(`${projectFinance}/queryAllMoneyApply`, params);
+
+// 查看项目下的财务信息
+export const queryFinanceOfProject = params =>
+  http.post(`${projectFinance}/queryFinanceOfProject`, params);
+
+// 查看自己需要审批的申请
+export const queryNeedCheckByMe = params =>
+  http.post(`${projectFinance}/queryNeedCheckByMe`, params);
+
+// 查看项目下的所有任务对应的财务信息
+export const queryProjectFinance = params =>
+  http.post(`${projectFinance}/queryProjectFinance`, params);
+
+// 修改任务或项目的预算和奖金信息
+export const updateFinance = params =>
+  http.post(`${projectFinance}/updateFinance`, params);
diff --git a/components/BonusCollection.vue b/components/BonusCollection.vue
new file mode 100644
index 0000000..a5a4fa3
--- /dev/null
+++ b/components/BonusCollection.vue
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div
+      v-if="data.info.list && data.info.list.length"
+      class="w-full overflow-x-scroll"
+    >
+      <table class="text-gray-500 mt-4 text-ms">
+        <tr class="bg-gray-100 text-gray-400">
+          <td class="name">申请人</td>
+          <td class="money">金额(元)</td>
+          <td class="time">时间</td>
+          <td class="remark">备注</td>
+        </tr>
+        <tr v-for="item in data.info.list" class="text-gray-500">
+          <td>{{ item.submitName }}</td>
+          <td>
+            {{ (+item.money / 100).toFixed(2) }}
+          </td>
+          <td>
+            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }}
+          </td>
+          <td>
+            {{ item.remark }}
+          </td>
+        </tr>
+      </table>
+      <div class="w-1/2 mt-4 ml-48">
+        <van-pagination
+          v-model="data.pageNum"
+          :items-per-page="data.pageSize"
+          :page-count="data.pages"
+          mode="simple"
+        />
+      </div>
+    </div>
+    <van-empty v-else description="暂无数据" />
+  </div>
+</template>
+
+<script setup>
+import dayjs from 'dayjs';
+import { personalHistory } from 'apis/finance';
+import { ref, reactive, onMounted, nextTick } from 'vue';
+
+const data = reactive({
+  info: {},
+  pageNum: 1,
+  pageSize: 10,
+  pages: 0,
+});
+
+const projectId = useProjectId();
+const taskDetailId = useTaskId();
+const taskName = useTaskName();
+
+/**
+ * 查看当前用户的费用申请历史信息（奖金）
+ * @param { Number } pageNum
+ * @param { Number } pageSize
+ * @param { String } projectId
+ * @param { String } name
+ */
+async function handlePersonalHistory() {
+  try {
+    const params = {
+      param: {
+        pageNum: data.pageNum,
+        pageSize: data.pageSize,
+        projectId: projectId.value,
+        taskDetailId: taskDetailId.value,
+        taskName: taskName.value,
+        type: 1,
+      },
+    };
+    const res = await personalHistory(params);
+    data.info = res;
+    data.pageNum = res.pageNum ? +res.pageNum : 1;
+    data.pageSize = res.pageSize ? +res.pageSize : 10;
+    data.pages = res.pages ? +res.pages : 0;
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+
+function confirm() {
+  alert('确认放款');
+}
+
+onMounted(() => {
+  nextTick(() => {
+    handlePersonalHistory();
+  });
+});
+</script>
+
+<style scoped lang="less">
+table {
+  width: 500px;
+  td {
+    border: 0.5px solid #ccc;
+    padding: 0.85rem;
+    width: 5.9375rem;
+  }
+  .name {
+    width: 100px;
+  }
+  .money {
+    width: 100px;
+  }
+  .time {
+    width: 170px;
+  }
+  .remark {
+    width: 120px;
+  }
+}
+
+.input-box {
+  padding: 0 !important;
+  border-bottom: 1px solid #ccc;
+}
+</style>
diff --git a/components/HistoricalApplication.vue b/components/HistoricalApplication.vue
new file mode 100644
index 0000000..5ec705b
--- /dev/null
+++ b/components/HistoricalApplication.vue
@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <div
+      v-if="data.info.list && data.info.list.length"
+      class="w-full overflow-x-scroll"
+    >
+      <table class="text-gray-500 mt-4 text-ms">
+        <tr class="bg-gray-100 text-gray-400">
+          <td class="name">申请人</td>
+          <td class="money">金额(元)</td>
+          <td class="time">时间</td>
+          <td class="status">状态</td>
+        </tr>
+        <tr v-for="item in data.info.list" class="text-gray-500">
+          <td>{{ item.submitName }}</td>
+          <td>
+            <!-- v-if="!item.showBudgetEdit" -->
+            {{ (+item.money / 100).toFixed(2) }}
+            <!-- <van-field
+              v-else
+              v-model="item.budget"
+              type="number"
+              class="input-box"
+              @change="handleUpdateFinance(item)"
+              @blur="item.showBudgetEdit = false"
+            /> -->
+          </td>
+          <td>
+            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }}
+          </td>
+          <td>
+            <!-- <div v-if="!item.showBonusEdit" @click="item.showBonusEdit = true"> -->
+            <span v-if="item.applyType - 0 === 0" class="text-gray-500">
+              待审核
+            </span>
+            <span v-else-if="item.applyType - 0 === 1" class="text-gray-500">
+              已通过
+            </span>
+            <span v-else-if="item.applyType - 0 === 2" class="text-red-500">
+              已驳回
+            </span>
+            <span v-else-if="item.applyType - 0 === 3" class="text-gray-500">
+              待放款
+            </span>
+            <van-button
+              v-else-if="item.applyType - 0 === 4"
+              type="success"
+              size="mini"
+              class="rounded"
+              @click="confirm"
+            >
+              确认
+            </van-button>
+            <span v-else-if="item.applyType - 0 === 5" class="text-green-500">
+              已确认
+            </span>
+          </td>
+        </tr>
+      </table>
+      <div class="w-1/2 mt-4 ml-48">
+        <van-pagination
+          v-model="data.pageNum"
+          :items-per-page="data.pageSize"
+          :page-count="data.pages"
+          mode="simple"
+        />
+      </div>
+    </div>
+    <van-empty v-else description="暂无数据" />
+  </div>
+</template>
+
+<script setup>
+import dayjs from 'dayjs';
+import { personalHistory } from 'apis/finance';
+import { ref, reactive, onMounted, nextTick } from 'vue';
+
+const data = reactive({
+  info: {},
+  pageNum: 1,
+  pageSize: 10,
+  pages: 0,
+});
+
+const projectId = useProjectId();
+const taskDetailId = useTaskId();
+const taskName = useTaskName();
+
+/**
+ * 查看当前用户的费用申请历史信息（奖金）
+ * @param { Number } pageNum
+ * @param { Number } pageSize
+ * @param { String } projectId
+ * @param { String } name
+ */
+async function handlePersonalHistory() {
+  try {
+    const params = {
+      param: {
+        pageNum: data.pageNum,
+        pageSize: data.pageSize,
+        projectId: projectId.value,
+        taskDetailId: taskDetailId.value,
+        taskName: taskName.value,
+        type: 0,
+      },
+    };
+    const res = await personalHistory(params);
+    data.info = res;
+    data.pageNum = res.pageNum ? +res.pageNum : 1;
+    data.pageSize = res.pageSize ? +res.pageSize : 10;
+    data.pages = res.pages ? +res.pages : 0;
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+
+function confirm() {
+  alert('确认放款');
+}
+
+onMounted(() => {
+  nextTick(() => {
+    handlePersonalHistory();
+  });
+});
+</script>
+
+<style scoped lang="less">
+table {
+  width: 500px;
+  td {
+    border: 0.5px solid #ccc;
+    padding: 0.85rem;
+    width: 5.9375rem;
+  }
+  .name {
+    width: 100px;
+  }
+  .money {
+    width: 100px;
+  }
+  .time {
+    width: 170px;
+  }
+  .status {
+    width: 120px;
+  }
+}
+
+.input-box {
+  padding: 0 !important;
+  border-bottom: 1px solid #ccc;
+}
+</style>
diff --git a/pages/Initiate-application.vue b/pages/Initiate-application.vue
index 4b7c0fb..282ab5d 100644
--- a/pages/Initiate-application.vue
+++ b/pages/Initiate-application.vue
@@ -1,427 +1,450 @@
-<template>
-  <div>
-      <!-- 导航返回上一页 -->
-          <van-nav-bar
-          title="发起申请"
-          left-arrow
-          @click-left="onClickLeft"
-          />
-      <!-- 申请发票需要输入的数据 -->
-      <div class="bg-white pb-3">
-        <div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div>
-        <!-- 是否上传票据 -->
-        <div v-show="data.isInvoice">
-            <div class="mx-4 pb-3 border-b">
-              <div class="flex pt-3 pb-2 justify-between" v-show="data.titleHidden">
-                <div>
-                  <span class="text-red-500">*</span>
-                  <span class="text-gray-500">上传票据凭证 </span>
-                  <span class="text-gray-400 text-xs">(仅支持ipg格式)</span>
-                </div>
-                <van-button plain type="primary" size="mini" @click="data.isInvoice = false">手动输入</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>
-              <!-- 上传票据成功后显示发票信息 -->
-              <div v-show="data.isSuccess">
-                  <van-field
-                      v-for="item in data.billList"
-                      required
-                      v-model="item.values"
-                      :label="item.name"
-                      input-align="right"
-                  />
-                </div>
-            </div>
-        </div >
-          <!-- 手动输入信息 -->
-        <div v-show="!data.isInvoice">
-                <van-field
-                  required
-                  v-model="data.applyMoney"
-                  label="申请金额"
-                  placeholder="输入申请金额"
-                  input-align="right"
-                />
-        </div>
-        <!-- 备注信息 -->
-        <div class="text-gray-500 py-4 pl-5">备注</div>
-          <van-cell-group>
-              <van-field
-                v-model="data.message"
-                rows="2"
-                autosize
-                type="textarea"
-                maxlength="40"
-                placeholder="请输入备注"
-                show-word-limit
-                class="border rounded"
-              />
-          </van-cell-group>
-      </div>
-      <!-- 选择审核人 -->
-      <div class="mt-3">
-           <div class="flex bg-white p-4">
-              <div class="text-red-500">*</div>
-              <div class="text-gray-500 pl-1 font-semibold">审核人</div>
-           </div>
-          <div class="px-3 bg-white">
-            <div>
-              <van-button
-                class="button"
-                size="mini"
-                v-for="item in data.reviewerList"
-                :key="item.userId"
-                :type="data.checkerList.find(checker => checker === item.userId) ? 'primary' : 'default'"
-                @click="handleSelectChecker(item.userId)"
-              >
-                {{item.name}}
-              </van-button>
-            </div>
-          </div>
-      </div>
-      <!-- 其他信息 -->
-      <div class="bg-white mt-3">
-        <div class="text-gray-500 p-4 font-semibold">其他信息</div>
-        <!-- 申请类型 -->
-        <!-- 普通票据申请 -->
-        <div v-show="data.isInvoice">
-            <van-field
-              v-model="data.applyType"
-              is-link
-              readonly
-              label="申请类型"
-              placeholder="请选择申请类型"
-              @click="data.showType = true"
-              required
-              input-align="right"
-            />
-            <van-popup v-model:show="data.showType" round position="bottom">
-              <van-cascader
-                :options="data.applyTypeOptions"
-                @close="data.showType = false"
-                @finish="finishApplyType"
-                active-color="#1989fa"
-                class="p-0"
-              />
-            </van-popup>
-            <!-- 所属项目 -->
-            <van-field
-              v-model="data.projectName"
-              is-link
-              readonly
-              label="所属项目"
-              placeholder="请选择所属项目"
-              required
-              input-align="right"
-              disabled
-            />
-            <van-popup v-model:show="data.projectName" round position="bottom">
-              <van-cascader
-                active-color="#1989fa"
-                class="p-0"
-              />
-            </van-popup>
-            <!-- 所属任务的 -->
-            <van-field
-              v-model="data.taskName"
-              is-link
-              readonly
-              label="所属任务"
-              placeholder="请选择所属任务"
-              required
-              input-align="right"
-              disabled
-            />
-            <van-popup v-model:show="data.taskName" round position="bottom">
-              <van-cascader
-                active-color="#1989fa"
-                class="p-0"
-              />
-            </van-popup>
-            <!-- 类目选择 -->
-            <van-field
-                v-model="data.applyCategory"
-                is-link
-                readonly
-                label="类目"
-                placeholder="请选择类目"
-                @click="data.showCategory = true"
-                input-align="right"
-              />
-            <van-popup v-model:show="data.showCategory" round position="bottom">
-              <van-cascader
-                :options="data.applyCategoryOptions"
-                @close="data.showCategory = false"
-                @finish="finishApplyCategory"
-                active-color="#1989fa"
-                class="p-0"
-              />
-            </van-popup>
-            <!-- 名目选择 -->
-            <van-field
-                v-model="data.applyName"
-                is-link
-                readonly
-                label="名目"
-                placeholder="请选择名目"
-                @click="data.showName = true"
-                input-align="right"
-              />
-            <van-popup v-model:show="data.showName" round position="bottom">
-              <van-cascader
-                :options="data.applyNameOptions"
-                @close="data.showName = false"
-                @finish="finishApplyName"
-                active-color="#1989fa"
-                class="p-0"
-              />
-            </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">
-           <div class="text-gray-500 p-4 font-semibold">提交人信息</div>
-           <van-field
-              required
-              v-model="data.name"
-              label="姓名"
-              placeholder="输入姓名"
-              input-align="right"
-            />
-         <!-- 选择所属部门 -->
-          <van-field
-            v-model="data.applyDepartment"
-            is-link
-            readonly
-            label="所属部门"
-            placeholder="请选择所属部门"
-            @click="data.showDepartment = true"
-            required
-            input-align="right"
-          />
-        <van-popup v-model:show="data.showDepartment" round position="bottom">
-          <van-cascader
-            :options="data.applyDepartmentOptions"
-            @close="data.showDepartment = false"
-            @finish="finishApplyDepartment"
-            active-color="#1989fa"
-            class="p-0"
-          />
-        </van-popup>
-      </div>
-      <!-- 历史申请 -->
-      <div class="bg-white mt-3 p-4">
-            <div class="text-gray-500 font-semibold">历史申请</div>
-            <div>
-              <Search />
-              <FinanceExamine />
-            </div>
-      </div>
-      <!-- 底部立即提交按钮 -->
-         <div class="mx-6 mt-10">
-          <van-button type="primary" size="small" block>立即提交</van-button>
-        </div>
-  </div>
-</template>
-<script setup>
-import {ref, reactive} from 'vue'
-// import useApplication from 'hooks/useApplication';
-import { queryChecker } from 'apis/member'
-import { queryType } from 'apis/finance'
-
-// const getApplication = useApplication();
-const projectName = useProjectName()
-const taskName = useTaskName()
-const projectId = useProjectId()
-const data = reactive({
-  isInvoice: true,
-  message: '',
-  billList: [
-    {
-      name: '发票代码',
-      values:0
-    },
-    {
-      name: '发票号码',
-      values:1
-    },
-    {
-      name: '合计金额(元)',
-      values:2
-    },
-    {
-      name: '税额(元)',
-      values:3
-    },
-    {
-      name: '开票日期',
-      values:4
-    }
-  ],
-  reviewerList: [], // 审核人数组
-  checkerList: [], // 默认的审核人
-  applyData: [
-    {
-      applicant:'代用名1',
-      money:100,
-      time:'2021/12/31 12:31',
-      type: 1
-    },
-    {
-      applicant:'代用名2',
-      money:100,
-      time:'2021/12/31 12:31',
-      type: 2
-    },
-  ], // 申请的记录
-  isSuccess: false, // 上传票据是否成功
-  name: '', // 提交人的姓名
-  pplyMoney: '5000', // 手动输入时输入的申请的金额
-  titleHidden: true, // 上传提示语隐藏
-  currentPage: 0, // 当前显示页数
-  personalType: '个人申请', // 上传提示语隐藏
-  personalCategory: '用款',
-  // 其他信息的多个选择按钮
-  showType: false, // 申请类型的
-  applyProject: '', // 选择的类型的值
-  applyTypeOptions: [],
-  showCategory: false, // 所属的类目
-  applyCategory: '', // 选择的类目的值
-  applyCategoryOptions: [],
-  showName: false, // 所属的名目
-  applyName: '', // 选择的名目的值
-  applyNameOptions: [],
-  showDepartment: false, // 所属的部门
-  applyDepartment: '', // 选择的部门的值
-  applyDepartmentOptions: [],
-})
-
-// 选择申请类型
-function finishApplyType({ selectedOptions }){
-  showType.value = false;
-  applyType.value = selectedOptions.map((option) => option.text);
-}
-
-// 所属的类目
-function finishApplyCategory({ selectedOptions }){
-  showCategory.value = false;
-  applyCategory.value = selectedOptions.map((option) => option.text);
-}
-
-// 所属的名目
-function finishApplyName({ selectedOptions }){
-  showName.value = false;
-  applyName.value = selectedOptions.map((option) => option.text);
-}
-
-// 所属部门
-function finishApplyDepartment({ selectedOptions }){
-  showDepartment.value = false;
-  applyDepartment.value = selectedOptions.map((option) => option.text);
-}
-
-// 检查被选中的审核人的状态
-function handleSelectChecker(id){
-  const target = data.checkerList.find(item =>item === id)
-  if(target){
-    data.checkerList = data.checkerList.filter(item =>item !== id)
-  }else{
-    data.checkerList.push(id)
-  }
-}
-
-// 上传票据事件
-function uploadBill(){
-  //TODO:调取接口识别票据
-  setTimeout(() =>{
-    titleHidden.value = false
-    isSuccess.value = true
-  },1000)
-}
-
-/**
- * 查询所有成员
- * @param { String } projectId
- */
-async function handleQueryChecker(){
-  try {
-    const params = {
-      param:{
-        projectId: projectId.value
-      }
-    }
-    const res = await queryChecker(params)
-    data.reviewerList = res
-  } catch (error) {
-    console.error('error: ', error);
-  }
-}
-
-/**
- * 查询费用申请类型
- * @param { String } parentId 上级类型ID，默认为0
- * @param { Number } type 类型：0申请类型 1类目 2名目
- */
-async function handleQueryType(parentId, type){
-  try {
-    const params = {
-      param:{
-        parentId,
-        type,
-      }
-    }
-    const res = await queryType(params)
-    res.forEach((item) => {
-      data.applyTypeOptions.push(item.name)
-    })
-  } catch (error) {
-    console.error('error: ', error);
-  }
-}
-
-onMounted(() =>{
-  // 查询所有成员
-  handleQueryChecker()
-  // 查询费用申请类型
-  handleQueryType(0, 0)
-})
-
-function onClickLeft(){
-  console.log(1)
-}
-
-</script>
-
-<style lang="less" scoped>
-.van-cell-group{
-  padding:0 1rem;
-}
-.van-cell{
-  font-size: 15px;
-}
-.bill-name{
-  font-weight: 600;
-  color: #6F6F6F;
-  border-bottom: 1px solid #eee;
-  padding: 0.75rem 0px;
-}
-.van-button{
-  border-radius: 0.2rem;
-}
-.button{
-  border-radius: 1rem;
-  padding: 0 0.75rem;
-  margin: 0.5rem ;
-}
-</style>
+<template>
+  <div>
+      <!-- 导航返回上一页 -->
+          <van-nav-bar
+          title="发起申请"
+          left-arrow
+          @click-left="onClickLeft"
+          />
+      <!-- 申请发票需要输入的数据 -->
+      <div class="bg-white pb-3">
+        <div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div>
+        <!-- 是否上传票据 -->
+        <div v-show="data.isInvoice">
+            <div class="mx-4 pb-3 border-b">
+              <div class="flex pt-3 pb-2 justify-between" v-show="data.titleHidden">
+                <div>
+                  <span class="text-red-500">*</span>
+                  <span class="text-gray-500">上传票据凭证 </span>
+                  <span class="text-gray-400 text-xs">(仅支持ipg格式)</span>
+                </div>
+                <van-button plain type="primary" size="mini" @click="data.isInvoice = false">手动输入</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>
+              <!-- 上传票据成功后显示发票信息 -->
+              <div v-show="data.isSuccess">
+                  <van-field
+                      v-for="item in data.invoiceInfo"
+                      required
+                      v-model="item.values"
+                      :label="item.name"
+                      @change="cahngeInvoiceList($event, item)"
+                      input-align="right"
+                  />
+                </div>
+            </div>
+        </div >
+          <!-- 手动输入信息 -->
+        <div v-show="!data.isInvoice">
+                <van-field
+                  required
+                  v-model="data.applyMoney"
+                  label="申请金额"
+                  placeholder="输入申请金额"
+                  input-align="right"
+                />
+        </div>
+        <!-- 备注信息 -->
+        <div class="text-gray-500 py-4 pl-5">备注</div>
+          <van-cell-group>
+              <van-field
+                v-model="data.remark"
+                rows="2"
+                autosize
+                type="textarea"
+                maxlength="40"
+                placeholder="请输入备注"
+                show-word-limit
+                class="border rounded"
+              />
+          </van-cell-group>
+      </div>
+      <!-- 选择审核人 -->
+      <div class="mt-3">
+           <div class="flex bg-white p-4">
+              <div class="text-red-500">*</div>
+              <div class="text-gray-500 pl-1 font-semibold">审核人</div>
+           </div>
+          <div class="px-3 bg-white">
+            <div>
+              <van-button
+                class="button"
+                size="mini"
+                v-for="item in data.reviewerList"
+                :key="item.userId"
+                :type="data.checkerList.find(checker => checker === item.userId) ? 'primary' : 'default'"
+                @click="handleSelectChecker(item.userId)"
+              >
+                {{item.name}}
+              </van-button>
+            </div>
+          </div>
+      </div>
+      <!-- 其他信息 -->
+      <div class="bg-white mt-3">
+        <div class="text-gray-500 p-4 font-semibold">其他信息</div>
+        <!-- 申请类型 -->
+        <!-- 普通票据申请 -->
+        <div v-show="data.isInvoice">
+            <van-field
+              v-model="data.applyType"
+              is-link
+              readonly
+              label="申请类型"
+              placeholder="请选择申请类型"
+              @click="data.showType = true"
+              required
+              input-align="right"
+            />
+            <van-popup v-model:show="data.showType" round position="bottom">
+              <van-picker
+                title="申请类型"
+                :columns="data.applyTypeOptions"
+                @confirm="finishApplyType"
+              />
+            </van-popup>
+            <!-- 所属项目 -->
+            <van-field
+              v-model="data.projectName"
+              is-link
+              readonly
+              label="所属项目"
+              placeholder="请选择所属项目"
+              required
+              input-align="right"
+              disabled
+            />
+            <van-popup v-model:show="data.projectName" round position="bottom">
+              <van-cascader
+                active-color="#1989fa"
+                class="p-0"
+              />
+            </van-popup>
+            <!-- 所属任务的 -->
+            <van-field
+              v-model="data.taskName"
+              is-link
+              readonly
+              label="所属任务"
+              placeholder="请选择所属任务"
+              required
+              input-align="right"
+              disabled
+            />
+            <van-popup v-model:show="data.taskName" round position="bottom">
+              <van-cascader
+                active-color="#1989fa"
+                class="p-0"
+              />
+            </van-popup>
+            <!-- 类目选择 -->
+            <van-field
+                v-model="data.applyCategory"
+                is-link
+                readonly
+                label="类目"
+                placeholder="请选择类目"
+                @click="data.showCategory = true"
+                input-align="right"
+              />
+            <van-popup v-model:show="data.showCategory" round position="bottom">
+              <van-picker
+                title="请选择类目"
+                :columns="data.applyCategoryOptions"
+                @confirm="finishApplyCategory"
+              />
+            </van-popup>
+            <!-- 名目选择 -->
+            <van-field
+                v-model="data.applyName"
+                is-link
+                readonly
+                label="名目"
+                placeholder="请选择名目"
+                @click="data.showName = true"
+                input-align="right"
+              />
+            <van-popup v-model:show="data.showName" round position="bottom">
+              <van-picker
+                title="请选择名目"
+                :columns="data.applyNameOptions"
+                @confirm="finishApplyName"
+              />
+            </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">
+           <div class="text-gray-500 p-4 font-semibold">提交人信息</div>
+           <van-field
+              required
+              v-model="data.submitName"
+              label="姓名"
+              placeholder="请输入姓名"
+              input-align="right"
+            />
+         <!-- 选择所属部门 -->
+          <van-field
+            required
+            v-model="data.department"
+            label="所属部门"
+            placeholder="请输入所属部门"
+            input-align="right"
+          />
+      </div>
+      <!-- 历史申请 -->
+      <div class="bg-white mt-3 p-4">
+            <div class="text-gray-500 font-semibold">历史申请</div>
+            <div>
+              <Search />
+              <FinanceExamine />
+            </div>
+      </div>
+      <!-- 底部立即提交按钮 -->
+         <div class="mx-6 mt-10">
+          <van-button type="primary" size="small" block>立即提交</van-button>
+        </div>
+  </div>
+</template>
+<script setup>
+import {ref, reactive} from 'vue'
+// import useApplication from 'hooks/useApplication';
+import { queryChecker } from 'apis/member'
+import { queryType } from 'apis/finance'
+
+// const getApplication = useApplication();
+const projectName = useProjectName()
+const taskName = useTaskName()
+const projectId = useProjectId()
+const data = reactive({
+  isInvoice: true,
+  remark: '',
+  invoiceList: [],
+  invoiceInfo: [
+    {
+      name: '发票代码',
+      values:0,
+      label: 'invoiceCode'
+    },
+    {
+      name: '发票号码',
+      values:1,
+      label: 'invoiceNumber'
+    },
+    {
+      name: '合计金额(元)',
+      values:2,
+      label: 'money'
+    },
+    {
+      name: '税额(元)',
+      values:3,
+      label: 'taxMoney'
+    },
+    {
+      name: '开票日期',
+      values:4,
+      label: 'invoiceTime'
+    },
+    {
+      name: '发票备注信息',
+      values:5,
+      label: 'remark'
+    },
+  ],
+  reviewerList: [], // 审核人数组
+  checkerList: [], // 默认的审核人
+  applyData: [
+    {
+      applicant:'代用名1',
+      money:100,
+      time:'2021/12/31 12:31',
+      type: 1
+    },
+    {
+      applicant:'代用名2',
+      money:100,
+      time:'2021/12/31 12:31',
+      type: 2
+    },
+  ], // 申请的记录
+  isSuccess: false, // 上传票据是否成功
+  submitName: '', // 提交人的姓名
+  department: '', // 选择的部门的值
+  pplyMoney: '5000', // 手动输入时输入的申请的金额
+  titleHidden: true, // 上传提示语隐藏
+  currentPage: 0, // 当前显示页数
+  personalType: '个人申请', // 上传提示语隐藏
+  personalCategory: '用款',
+  // 其他信息的多个选择按钮
+  showType: false, // 申请类型的
+  applyTypes: [],
+  applyTypeOptions: [],
+  applyType: '', // 选择的类型的值
+  typeId: '',
+  showCategory: false, // 所属的类目
+  applyCategories: [],
+  applyCategoryOptions: [],
+  applyCategory: '', // 选择的类目的值
+  categoryId: '',
+  showName: false, // 所属的名目
+  applyNames: [],
+  applyNameOptions: [],
+  applyName: '', // 选择的名目的值
+  rowId: '',
+})
+
+// 发票信息
+function cahngeInvoiceList(e,item){
+  console.log('e: ', e.target.value,item);
+}
+
+// 选择申请类型
+function finishApplyType(e){
+  data.showType = false;
+  data.applyType = e;
+  const type = data.applyTypes.find((option) => option.name === e);
+  data.typeId = type.id;
+  // 类目
+  handleQueryType(data.typeId, 1)
+}
+
+// 所属的类目
+function finishApplyCategory(e){
+  data.showCategory = false;
+  data.applyCategory = e;
+  const category = data.applyCategories.find((option) => option.name === e);
+  data.categoryId = category.id;
+  // 名目
+  handleQueryType(data.categoryId, 2)
+}
+
+// 所属的名目
+function finishApplyName(e){
+  data.showName = false;
+  data.applyName = e;
+  const row = data.applyNames.find((option) => option.name === e);
+  data.rowId = row.id;
+}
+
+// 检查被选中的审核人的状态
+function handleSelectChecker(id){
+  const target = data.checkerList.find(item =>item === id)
+  if(target){
+    data.checkerList = data.checkerList.filter(item =>item !== id)
+  }else{
+    data.checkerList.push(id)
+  }
+}
+
+// 上传票据事件
+function uploadBill(){
+  //TODO:调取接口识别票据
+  setTimeout(() =>{
+    data.titleHidden = false
+    data.isSuccess = true
+  },1000)
+}
+
+/**
+ * 查询所有成员
+ * @param { String } projectId
+ */
+async function handleQueryChecker(){
+  try {
+    const params = {
+      param:{
+        projectId: projectId.value
+      }
+    }
+    const res = await queryChecker(params)
+    data.reviewerList = res
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+
+/**
+ * 查询费用申请类型
+ * @param { String } parentId 上级类型ID，默认为0
+ * @param { Number } type 类型：0申请类型 1类目 2名目
+ */
+async function handleQueryType(parentId, type){
+  console.log('parentId: ', parentId);
+  try {
+    const params = {
+      param:{
+        parentId,
+        type,
+      }
+    }
+    const res = await queryType(params)
+    if(type === 0){
+      data.applyTypes = res
+      res.forEach((item) => {
+        data.applyTypeOptions.push(item.name)
+      })
+    }
+    if(type === 1){
+      data.applyCategories = res
+      res.forEach((item) => {
+        data.applyCategoryOptions.push(item.name)
+      })
+    }
+    if(type === 2){
+      data.applyNames = res
+      res.forEach((item) => {
+        data.applyNameOptions.push(item.name)
+      })
+    }
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+
+onMounted(() =>{
+  // 查询所有成员
+  handleQueryChecker()
+  // 查询费用申请类型
+  handleQueryType(0, 0)
+})
+
+function onClickLeft(){
+  console.log(1)
+}
+
+</script>
+
+<style lang="less" scoped>
+.van-cell-group{
+  padding:0 1rem;
+}
+.van-cell{
+  font-size: 15px;
+}
+.bill-name{
+  font-weight: 600;
+  color: #6F6F6F;
+  border-bottom: 1px solid #eee;
+  padding: 0.75rem 0px;
+}
+.van-button{
+  border-radius: 0.2rem;
+}
+.button{
+  border-radius: 1rem;
+  padding: 0 0.75rem;
+  margin: 0.5rem ;
+}
+</style>
diff --git a/pages/applicant.vue b/pages/applicant.vue
index 3ac65aa..461b680 100644
--- a/pages/applicant.vue
+++ b/pages/applicant.vue
@@ -1,78 +1,88 @@
-<template>
-  <div>
-
-    <!-- 搜索框与表格部分 -->
-    <van-tabs v-model:active="active" shrink line-width="60px" color="#59B4FF" title-active-color="#59B4FF">
-      <van-tab title="我的申请">
-        <div class="mt-8 bg-white flex flex-col">
-            <div class="p-4 pb-0 text-gray-500 font-semibold">历史申请</div>
-            <Search class="px-4 pt-0"/>
-            <FinanceManage class="px-4 mt-0"/>
-        </div>
-        <!-- <div class="mt-8 bg-white">
-          <span class="p-4 pb-0 text-gray-500 font-semibold">历史申请</span>
-          <div v-if="isShow">
-            <Search />
-            <FinanceManage />
-          </div>
-          <div v-if="!isShow" class="no-data">
-              暂无历史记录
-          </div>
-        </div> -->
-        <!-- 底部提交按钮部分 -->
-        <div class="mt-20" @click="toApplication">
-          <van-button type="primary" block>发起申请</van-button>
-        </div>
-      </van-tab>
-
-      <van-tab title="我的奖金">
-        <div class="mt-8 bg-white">
-            <div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div>
-            <Search class="px-4 pt-0"/>
-            <FinanceManage class="px-4 mt-0"/>
-        </div>
-        <div class="my-4 bg-white">
-          <div class="text-gray-500 font-semibold m-4 py-3 border-b">待领取奖金</div>
-          <div class="text-ms text-gray-400 pl-4">可领取:</div>
-          <div class="w-full h-20 text-gray-400 font-semibold text-center leading-loose" v-if="!isBonus">
-            暂无可领取的奖金
-          </div>
-          <div class="w-full h-20 text-blue-500 font-semibold text-center leading-loose text-2xl" v-if="isBonus">
-            500元
-          </div>
-          <div class="px-8">
-              <van-button type="primary" size="small" block :disabled="!isBonus" >立即领取</van-button>
-          </div>
-        </div>
-      </van-tab>
-  </van-tabs>
-  </div>
-
-</template>
-
-<script setup>
-import {ref} from 'vue'
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const active = ref(0);
-const isShow = ref(true);
-const isBonus =ref(true)
-
-function onClickLeft(){
-  console.log('返回上一页')
-}
-
-function toApplication() {
-  const routeValue = router.currentRoute.value;
-  const query = routeValue.query
-  router.push({path: '/Initiate-application', query})
-}
-
-</script>
-
-
-<style lang="less" scoped>
-
-</style>
+<template>
+  <div>
+    <!-- 搜索框与表格部分 -->
+    <van-tabs
+      v-model:active="active"
+      shrink
+      line-width="60px"
+      color="#59B4FF"
+      title-active-color="#59B4FF"
+    >
+      <van-tab title="我的申请">
+        <div class="mt-8 bg-white flex flex-col">
+          <div class="p-4 pb-0 text-gray-500 font-semibold">历史申请</div>
+          <Search class="px-4 pt-0" />
+          <HistoricalApplication class="px-4 mt-0" />
+        </div>
+        <!-- <div class="mt-8 bg-white">
+          <span class="p-4 pb-0 text-gray-500 font-semibold">历史申请</span>
+          <div v-if="isShow">
+            <Search />
+            <FinanceManage />
+          </div>
+          <div v-if="!isShow" class="no-data">
+              暂无历史记录
+          </div>
+        </div> -->
+        <!-- 底部提交按钮部分 -->
+        <div class="mt-20" @click="toApplication">
+          <van-button type="primary" block>发起申请</van-button>
+        </div>
+      </van-tab>
+
+      <van-tab title="我的奖金">
+        <div class="mt-8 bg-white">
+          <div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div>
+          <Search class="px-4 pt-0" />
+          <BonusCollection class="px-4 mt-0" />
+        </div>
+        <div class="my-4 bg-white">
+          <div class="text-gray-500 font-semibold m-4 py-3 border-b">
+            待领取奖金
+          </div>
+          <div class="text-ms text-gray-400 pl-4">可领取:</div>
+          <div
+            class="w-full h-20 text-gray-400 font-semibold text-center leading-loose"
+            v-if="!isBonus"
+          >
+            暂无可领取的奖金
+          </div>
+          <div
+            class="w-full h-20 text-blue-500 font-semibold text-center leading-loose text-2xl"
+            v-if="isBonus"
+          >
+            500元
+          </div>
+          <div class="px-8">
+            <van-button type="primary" size="small" block :disabled="!isBonus"
+              >立即领取</van-button
+            >
+          </div>
+        </div>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const active = ref(0);
+const isShow = ref(true);
+const isBonus = ref(true);
+
+function onClickLeft() {
+  console.log('返回上一页');
+}
+
+function toApplication() {
+  const routeValue = router.currentRoute.value;
+  const query = routeValue.query;
+  router.push({ path: '/Initiate-application', query });
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/plugins/vant.js b/plugins/vant.js
index 8439da6..8f1edba 100644
--- a/plugins/vant.js
+++ b/plugins/vant.js
@@ -1,53 +1,55 @@
-// 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
-import 'vant/lib/index.css';
-
-import {
-  Button,
-  Cell,
-  CellGroup,
-  Col,
-  Icon,
-  Image,
-  Row,
-  NavBar,
-  Tabs,
-  Tab,
-  Search,
-  Pagination,
-  Field,
-  Uploader,
-  Form,
-  Popup,
-  Cascader,
-  Circle,
-  Empty,
-  Popover,
-  Dialog
-} from 'vant';
-
-import { defineNuxtPlugin } from '#app';
-
-export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp
-    .use(Row)
-    .use(Col)
-    .use(Image)
-    .use(Icon)
-    .use(Cell)
-    .use(Button)
-    .use(CellGroup)
-    .use(NavBar)
-    .use(Tab)
-    .use(Search)
-    .use(Pagination)
-    .use(Field)
-    .use(Uploader)
-    .use(Form)
-    .use(Cascader)
-    .use(Popup)
-    .use(Circle)
-    .use(Tabs)
-    .use(Empty)
-    .use(Popover)
-    .use(Dialog)
-});
+// 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
+import 'vant/lib/index.css';
+
+import {
+  Button,
+  Cell,
+  CellGroup,
+  Col,
+  Icon,
+  Image,
+  Row,
+  NavBar,
+  Tabs,
+  Tab,
+  Search,
+  Pagination,
+  Field,
+  Uploader,
+  Form,
+  Popup,
+  Cascader,
+  Circle,
+  Empty,
+  Popover,
+  Dialog,
+  Picker,
+} from 'vant';
+
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp
+    .use(Row)
+    .use(Col)
+    .use(Image)
+    .use(Icon)
+    .use(Cell)
+    .use(Button)
+    .use(CellGroup)
+    .use(NavBar)
+    .use(Tab)
+    .use(Search)
+    .use(Pagination)
+    .use(Field)
+    .use(Uploader)
+    .use(Form)
+    .use(Cascader)
+    .use(Popup)
+    .use(Circle)
+    .use(Tabs)
+    .use(Empty)
+    .use(Popover)
+    .use(Dialog)
+    .use(Picker);
+});