发起申请

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
+              <van-picker
-                :options="data.applyTypeOptions"
+                title="申请类型"
-                @close="data.showType = false"
+                v-if="data.applyTypeOptions && data.applyTypeOptions.length"
-                @finish="finishApplyType"
+                :columns="data.applyTypeOptions"
-                active-color="#1989fa"
+                @confirm="finishApplyType"
-                class="p-0"
               />
+              <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
+              <van-picker
-                :options="data.applyCategoryOptions"
+                title="请选择类目"
-                @close="data.showCategory = false"
+                v-if="data.applyCategoryOptions && data.applyCategoryOptions.length"
-                @finish="finishApplyCategory"
+                :columns="data.applyCategoryOptions"
-                active-color="#1989fa"
+                @confirm="finishApplyCategory"
-                class="p-0"
               />
+              <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
+              <van-picker
-                :options="data.applyNameOptions"
+                title="请选择名目"
-                @close="data.showName = false"
+                v-if="data.applyNameOptions && data.applyNameOptions.length"
-                @finish="finishApplyName"
+                :columns="data.applyNameOptions"
-                active-color="#1989fa"
+                @confirm="finishApplyName"
-                class="p-0"
               />
+              <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: '',
+  remark: '',
-  billList: [
+  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, // 所属的部门
+  applyName: '', // 选择的名目的值
-  applyDepartment: '', // 选择的部门的值
+  rowId: '',
-  applyDepartmentOptions: [],
 })
 
+// 发票信息
+function cahngeInvoiceList(e,item){
+  console.log('e: ', e.target.value,item);
+}
+
 // 选择申请类型
-function finishApplyType({ selectedOptions }){
+function finishApplyType(e){
-  showType.value = false;
+  data.showType = false;
-  applyType.value = selectedOptions.map((option) => option.text);
+  data.applyType = e;
+  const type = data.applyTypes.find((option) => option.name === e);
+  data.typeId = type.id;
+  // 类目
+  handleQueryType(data.typeId, 1)
 }
 
 // 所属的类目
-function finishApplyCategory({ selectedOptions }){
+function finishApplyCategory(e){
-  showCategory.value = false;
+  data.showCategory = false;
-  applyCategory.value = selectedOptions.map((option) => option.text);
+  data.applyCategory = e;
+  const category = data.applyCategories.find((option) => option.name === e);
+  data.categoryId = category.id;
+  // 名目
+  handleQueryType(data.categoryId, 2)
 }
 
 // 所属的名目
-function finishApplyName({ selectedOptions }){
+function finishApplyName(e){
-  showName.value = false;
+  data.showName = false;
-  applyName.value = selectedOptions.map((option) => option.text);
+  data.applyName = e;
-}
+  const row = data.applyNames.find((option) => option.name === e);
-
+  data.rowId = row.id;
-// 所属部门
-function finishApplyDepartment({ selectedOptions }){
-  showDepartment.value = false;
-  applyDepartment.value = selectedOptions.map((option) => option.text);
 }
 
 // 检查被选中的审核人的状态
@@ -345,8 +353,8 @@ function handleSelectChecker(id){
 function uploadBill(){
   //TODO:调取接口识别票据
   setTimeout(() =>{
-    titleHidden.value = false
+    data.titleHidden = false
-    isSuccess.value = true
+    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) => {
+    if(type === 0){
-      data.applyTypeOptions.push(item.name)
+      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>

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>

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)
 });