发起申请界面信息选择和个人申请完善

layouts/default.vue

@@ -7,6 +7,6 @@
 <style lang="less">
 .container{
   background:#eee;
-  height:100vh;
+  height:100%;
 }
 </style>

pages/Initiate-application.vue

@@ -0,0 +1,568 @@
+<template>
+  <div>
+      <!-- 导航返回上一页 -->
+      <NuxtLink to="/applicant">
+          <van-nav-bar
+          title="发起申请"
+          left-arrow
+          />
+      </NuxtLink>
+      <!-- 申请发票需要输入的数据 -->
+      <div class="apply-message">
+        <van-cell-group>
+          <van-cell title="发票信息"  class="bill-name"/>
+        </van-cell-group>
+        <!-- 是否上传票据 -->
+        <div v-show="isInvoice">
+            <div class="bill">
+              <div class="flex px-3 pt-3 pb-2" v-show="titleHidden">
+                <div>
+                  <span class="red">*</span>
+                  <span class="grey">上传票据凭证 </span>
+                  <span class="shallow-grey">(仅支持ipg格式)</span>
+                </div>
+                <van-button plain type="primary" size="mini" @click="isInvoice = false">手动输入</van-button>
+              </div>
+              <div class="upload-window" @click="uploadBill" v-show="!isSuccess">
+                <p class="add-icon">+</p>
+                <p class="shallow-grey">上传并识别凭证</p>
+              </div>
+              <!-- 上传票据成功后显示发票信息 -->
+              <div v-show="isSuccess">
+                  <van-field
+                      v-for="item in billList"
+                      required
+                      v-model="item.values"
+                      :label=item.name
+                      input-align="right"
+                  />
+                </div>
+            </div>
+        </div >
+          <!-- 手动输入信息 -->
+        <div v-show="!isInvoice">
+                <van-field
+                  required
+                  v-model="applyMoney"
+                  label="申请金额"
+                  placeholder="输入申请金额"
+                  input-align="right"
+                  class="name-field"
+                />
+        </div>
+        <!-- 备注信息 -->
+        <div class="remarks-name">备注</div>
+        <van-cell-group>
+            <van-field
+              v-model="message"
+              rows="2"
+              autosize
+              type="textarea"
+              maxlength="40"
+              placeholder="请输入备注"
+              show-word-limit
+              class="textarea"
+            />
+        </van-cell-group>
+      </div>
+      <!-- 选择审核人 -->
+      <div class="reviewer">
+           <van-field label="审核人" required/>
+          <div class="px-3">
+            <div>
+              <van-button
+                class="button"
+                size="mini"
+                v-for="item in reviewerList"
+                :type="selected.find(checker => checker === item) ? 'primary' : 'default'"
+                @click="handleSelectChecker(item)"
+              >
+                {{item}}
+              </van-button>
+            </div>
+          </div>
+      </div>
+      <!-- 其他信息 -->
+      <div class="reviewer">
+        <div class="remarks-name">其他信息</div>
+        <!-- 申请类型 -->
+        <!-- 普通票据申请 -->
+        <div v-show="isInvoice">
+            <van-field
+              v-model="applyType"
+              is-link
+              readonly
+              label="申请类型"
+              placeholder="请选择申请类型"
+              @click="showType = true"
+              required
+              input-align="right"
+            />
+            <van-popup v-model:show="showType" round position="bottom">
+              <van-cascader
+                :options="applyTypeOptions"
+                @close="showType = false"
+                @finish="finishApplyType"
+                active-color="#1989fa"
+                class="p-0"
+              />
+            </van-popup>
+            <!-- 所属项目 -->
+            <van-field
+              v-model="applyProject"
+              is-link
+              readonly
+              label="所属项目"
+              placeholder="请选择所属项目"
+              @click="showProject = true"
+              required
+              input-align="right"
+            />
+            <van-popup v-model:show="showProject" 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"
+              is-link
+              readonly
+              label="所属任务"
+              placeholder="请选择所属任务"
+              @click="showTask = true"
+              required
+              input-align="right"
+            />
+            <van-popup v-model:show="showTask" 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"
+                is-link
+                readonly
+                label="类目"
+                placeholder="请选择类目"
+                @click="showCategory = true"
+                required
+                input-align="right"
+              />
+            <van-popup v-model:show="showCategory" round position="bottom">
+              <van-cascader
+                :options="applyCategoryOptions"
+                @close="showCategory = false"
+                @finish="finishApplyCategory"
+                active-color="#1989fa"
+                class="p-0"
+              />
+            </van-popup>
+            <!-- 名目选择 -->
+            <van-field
+                v-model="applyName"
+                is-link
+                readonly
+                label="类目"
+                placeholder="请选择类目"
+                @click="showName = true"
+                required
+                input-align="right"
+              />
+            <van-popup v-model:show="showName" round position="bottom">
+              <van-cascader
+                :options="applyNameOptions"
+                @close="showName = false"
+                @finish="finishApplyName"
+                active-color="#1989fa"
+                class="p-0"
+              />
+            </van-popup>
+        </div>
+        <!-- 个人手动申请 -->
+        <div v-show="!isInvoice">
+          <van-cell title="单元格" is-link :value="personalType" required/>
+          <van-cell title="单元格" is-link :value="personalCategory" required/>
+        </div>
+      </div>
+      <!-- 提交人信息 -->
+      <div class="reviewer">
+          <div class="remarks-name">提交人信息</div>
+           <van-field
+              required
+              v-model="name"
+              label="姓名"
+              placeholder="输入姓名"
+              input-align="right"
+            />
+         <!-- 选择所属部门 -->
+          <van-field
+            v-model="applyDepartment"
+            is-link
+            readonly
+            label="申请类型"
+            placeholder="请选择申请类型"
+            @click="showDepartment = true"
+            required
+            input-align="right"
+          />
+        <van-popup v-model:show="showDepartment" round position="bottom">
+          <van-cascader
+            :options="applyDepartmentOptions"
+            @close="showDepartment = false"
+            @finish="finishApplyDepartment"
+            active-color="#1989fa"
+            class="p-0"
+          />
+        </van-popup>
+      </div>
+      <!-- 历史申请 -->
+      <div class="reviewer">
+          <div class="financial-management">
+            <span class="title">历史申请</span>
+            <div v-if="showHistory">
+              <Search />
+              <table>
+                <tr class="table-header">
+                  <td>申请人</td>
+                  <td>金额(元)</td>
+                  <td class="apply-time">时间</td>
+                  <td>状态</td>
+                </tr>
+                <tr v-for="item in applyData">
+                  <td>{{item.applicant}}</td>
+                  <td>{{item.money}}</td>
+                  <td>{{item.time}}</td>
+                  <td
+                  :class="item.type === 1 ? 'green' : item.type === 2 ? 'red' : ''"
+                >
+                  {{item.type === 1 ? '已通过' : item.type === 2 ? '已驳回' : '待审批'}}
+                  </td>
+                </tr>
+              </table>
+              <div class="pagination">
+                <van-pagination v-model="currentPage" :page-count="12" mode="simple" />
+              </div>
+            </div>
+            <div v-if="!showHistory" class="no-data">
+                暂无历史记录
+            </div>
+        </div>
+      </div>
+      <!-- 底部立即提交按钮 -->
+      <NuxtLink to="/application-details">
+         <div class="foot">
+          <van-button type="primary" block>立即提交</van-button>
+        </div>
+      </NuxtLink>
+
+  </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('用款')
+
+// 其他信息的多个选择按钮
+  // 申请类型的
+  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 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);
+    }
+
+  // 所属的名目
+  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);
+    }
+
+  // 所属部门
+  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 handleSelectChecker(items){
+  const target = selected.value.find(item =>item === items)
+  if(target){
+    selected.value = selected.value.filter(item =>item !== items)
+  }else{
+    selected.value.push(items)
+  }
+}
+// 上传票据事件
+function uploadBill(){
+  //TODO:调取接口识别票据
+  setTimeout(() =>{
+    titleHidden.value = false
+    isSuccess.value = true
+  },1000)
+}
+
+</script>
+
+<style lang="less" scoped>
+.apply-message{
+  background-color:#fff;
+  padding-bottom: 0.7rem;
+}
+.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;
+}
+.flex{
+  display: flex;
+  justify-content: space-between;
+}
+.red{
+  color: red;
+  // margin: 0.2rem;
+}
+.green{
+  color: green;
+}
+.grey{
+  color: #737373;
+}
+.shallow-grey{
+  color: rgb(168, 168, 168);
+  font-size: 14px;
+}
+.upload-window{
+  text-align: center;
+  width:15rem;
+  height:6rem;
+  border: 1px dashed #ccc;
+  background-color:#eee;
+  margin-left: 1rem;
+}
+.add-icon{
+  color: rgb(168, 168, 168);
+  font-size: 25px;
+  margin-top: 1rem;
+}
+.van-button{
+  border-radius: 0.2rem;
+}
+.remarks-name{
+  color: #6F6F6F;
+  padding: 1rem;
+}
+.textarea{
+  border: 1px solid #ccc;
+  border-radius: 0.2rem;
+}
+input{
+  color: #6F6F6F;
+  text-align: right;
+}
+.button{
+  border-radius: 1rem;
+  padding: 0 0.75rem;
+  margin: 0.5rem ;
+}
+.reviewer{
+  background-color: #fff;
+  margin-top: 1.5rem;
+}
+.foot{
+  margin-top: 3rem;
+  padding:1rem 2rem;
+}
+.name-field{
+  padding-left: 0.75rem !important;
+}
+</style>

pages/applicant.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div>
     <!-- 头部选项卡部分 -->
      <van-nav-bar
       title="财务条"
@@ -42,7 +42,9 @@
         </div>
         <!-- 底部提交按钮部分 -->
         <div class="foot">
-            <van-button type="primary" block>发起申请</van-button>
+          <NuxtLink to="/Initiate-application">
+               <van-button type="primary" block>发起申请</van-button>
+          </NuxtLink>
         </div>
       </van-tab>
     <van-tab title="我的奖金">我的奖金</van-tab>
@@ -53,10 +55,11 @@
 
 
 <script setup>
-import {ref,computed} from 'vue'
+import {ref} from 'vue'
 
 const active = ref(0);
 const isShow = ref(true);
+const currentPage = ref(1)
 const applyData = ref([
   {
     applicant:'代用名1',
@@ -104,12 +107,6 @@ function onClickLeft(){
 
 
 <style lang="less" scoped>
-.van-nav-bar__content{
-  background-color:#eee
-}
-.van-icon-arrow-left:before{
-  color: #000;
-}
 .no-data{
   color: #A0A0A0;
   font-size: 18px;

pages/application-details.vue

@@ -0,0 +1,38 @@
+<template>
+<div>
+  <!-- 导航栏 -->
+   <van-nav-bar
+      title="申请详情"
+      left-arrow
+      @click-left="onClickLeft"
+  />
+  <!-- 审核结果 -->
+  <div class="bg-white">
+    <div class="text-gray-500 font-semibold p-3">审核结果</div>
+    <div>
+
+    </div>
+  </div>
+</div>
+</template>
+
+<script setup>
+// 审核的数据
+const checkerList = ref([
+  {
+    name: "冯教授",
+    advice: "",
+    checkedTime: "",
+    status: "0",
+  },
+  {
+    name: "冯教授",
+    advice: "",
+    checkedTime: "",
+    status: "0",
+  }
+])
+function onClickLeft(){
+  console.log("上一页")
+}
+</script>

pages/index.vue

@@ -4,7 +4,7 @@
       title="资源管理"
       left-arrow
       @click-left="onClickLeft"
-/>
+  />
   <van-tabs v-model:active="active" shrink line-width="60px" color="#59B4FF" title-active-color="#59B4FF">
   <van-tab title="财务管理">
     <!-- 财务管理页面 -->

plugins/vant.js

@@ -14,6 +14,11 @@ import {
   Tab,
   Search,
   Pagination,
+  Field,
+  Uploader,
+  Form,
+  Popup,
+  Cascader,
 } from 'vant';
 
 import { defineNuxtPlugin } from '#app';
@@ -31,5 +36,10 @@ export default defineNuxtPlugin(nuxtApp => {
     .use(Tab)
     .use(Search)
     .use(Pagination)
+    .use(Field)
+    .use(Uploader)
+    .use(Form)
+    .use(Cascader)
+    .use(Popup)
     .use(Tabs);
 });