财务统计图表数据对接及表格修改

components/BarEcharts.vue

@@ -1,5 +1,5 @@
 <template>
-<div id="barEcharts" style="width:370px;height:300px"></div>
+<div id="barEcharts" style="width:380px;height:350px"></div>
 </template>
 <script setup>
 import{onMounted} from 'vue';
@@ -10,27 +10,28 @@ onMounted(()=>{
   tooltip: {
     trigger: 'axis',
     axisPointer: {
-      // Use axis to trigger tooltip
-      type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+      type: 'shadow',
     },
   },
   legend: {
+    top:10,
+    right:0,
     icon: 'circle',
     orient: 'horizontal',
-    itemGap: 40,
-    itemWidth: 14,
+    itemGap: 10,
+    itemWidth: 10,
     itemHeight: 14,
     textStyle: {
       fontSize: 14,
       color: '#858585',
       fontWeight: 400,
-      padding: [4, 0, 0, 0],
     },
-    data: ['A', 'B', 'P', 'E'],
+
   },
+  data: ['任务一', '任务二', '任务三', '任务四'],
   color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'],
   grid: {
-    left: '3%',
+    left: '10%',
     right: '0',
     bottom: '5%',
     containLabel: false,
@@ -58,67 +59,49 @@ onMounted(()=>{
   },
   series: [
     {
-      name: 'E',
+      name: '任务四',
       type: 'bar',
       stack: 'total',
       label: {
-        show: true,
+        show: false,
         color: '#FFFFFF',
-        formatter: function (e) {
-          return e.value ? e.seriesName : '';
-        }
       },
       itemStyle: {
-        borderRadius: [0, 0, 4, 4],
-      },
-      barWidth: 20,
-      emphasis: {
-        focus: 'series',
+        borderRadius: [0, 0, 0, 0],
       },
+      barWidth: 12,
       data: [320, 80, 301, 334, 390, 330, 320, 390, 330, 320, 390, 390],
     },
     {
-      name: 'P',
+      name: '任务三',
       type: 'bar',
       stack: 'total',
       label: {
-        show: true,
+        show: false,
         color: '#FFFFFF',
-        formatter: '{a}',
-      },
-      emphasis: {
-        focus: 'series',
       },
       data: [120, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330],
     },
     {
-      name: 'B',
+      name: '任务二',
       type: 'bar',
       stack: 'total',
       label: {
-        show: true,
+        show: false,
         color: '#FFFFFF',
-        formatter: '{a}',
-      },
-      emphasis: {
-        focus: 'series',
       },
       data: [18, 66, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330],
     },
     {
-      name: 'A',
+      name: '任务一',
       type: 'bar',
       stack: 'total',
       label: {
-        show: true,
+        show: false,
         color: '#FFFFFF',
-        formatter: '{a}',
       },
       itemStyle: {
-        borderRadius: [4, 4, 0, 0],
-      },
-      emphasis: {
-        focus: 'series',
+        borderRadius: [0, 0, 0, 0],
       },
       data: [150, 212, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330],
     },

components/BonusCollection.vue

@@ -17,7 +17,7 @@
             {{ (+item.money / 100).toFixed(2) }}
           </td>
           <td>
-            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }}
+            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD') }}
           </td>
           <td>
             {{ item.remark }}

components/FinanceManage.vue

@@ -45,7 +45,6 @@ const data = reactive({
 
 const projectId = useProjectId()
 
-
 /**
  * 查看项目下的所有任务对应的财务信息
  * @param { Number } pageNum

components/HistoricalApplication.vue

@@ -26,7 +26,7 @@
             /> -->
           </td>
           <td>
-            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }}
+            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD') }}
           </td>
           <td>
             <!-- <div v-if="!item.showBonusEdit" @click="item.showBonusEdit = true"> -->

components/RingEcharts.vue

@@ -6,12 +6,9 @@
 <script setup>
 import { onMounted } from 'vue';
 import { taskExpense, rowExpense, memberFinance } from 'apis/finance';
-import { list } from 'postcss';
 const projectId = useProjectId();
+const props = defineProps({ id: { type: String, default: () => {} } });
 
-const props = defineProps({
-  id: { type: Object, default: () => {} },
-});
 let oData = [
   {
     name: '办公费',

pages/Initiate-application.vue

@@ -1,7 +1,5 @@
 <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>
@@ -278,20 +276,6 @@ const data = reactive({
   ],
   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: '', // 选择的部门的值
@@ -433,8 +417,85 @@ onMounted(() => {
   handleQueryType(0, 0);
 });
 
-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 * 100,invoiceList, remark, checkerList, typeId, projectId: projectId.value,
+      taskDetailId: taskDetailId.value, categoryId, rowId, submitName, department
+    }
+  }else{
+    param = {
+      money: money * 100, remark, checkerList, typeId, projectId: projectId.value, categoryId, submitName, department
+    }
+  }
+  return param
 }
 </script>
 

pages/application-details.vue

@@ -12,22 +12,22 @@
   <!-- 审核结果 -->
   <div class="bg-white px-3">
     <div class="text-gray-500 font-semibold px-1 py-3">审核结果</div>
-    <div v-for="item in checkerList" class="flex py-3 px-4 text-gray-400 text-base justify-between">
+    <div v-for="(item, checkerIndex) in checkerList" :key="checkerIndex" class="flex py-3 px-4 text-gray-400 text-base justify-between">
       <div>
-          <div>{{item.name}}</div>
-          <div class="text-sm pt-1">{{item.advice}}</div>
-          <div class="text-sm pt-1">{{item.checkedTime}}</div>
+          <div>{{item.checkerName}}</div>
+          <div class="text-sm pt-1">{{item.remark}}</div>
+          <div class="text-sm pt-1">{{item.time}}</div>
       </div>
       <div class="text-center">
-          <div :class="item.status === '1' ? 'text-green-500' : item.status === '2' ? 'text-red-500' : ''">
-            {{item.status === '1' ? '已通过' : item.status === '2' ? '已驳回' : '待审批'}}
+          <div :class="item.checkStatus == '1' ? 'text-green-500' : item.checkStatus == '2' ? 'text-red-500' : ''">
+            {{item.checkStatus == '1' ? '已通过' : item.checkStatus == '2' ? '已驳回' : '待审批'}}
           </div>
-          <div v-if="item.score>0" class="mt-1">
+          <div v-if="item.checkStatus == '1' || item.checkStatus == '2'" class="mt-1">
             <van-circle
-              v-model:current-rate="item.score"
-              :rate="item.score"
+              v-model:current-rate="currentRate"
+              :rate="100"
               :speed="100"
-              :text="item.score"
+              :text="100"
               class="w-12"
               color="#ff6700"
               :stroke-width="100"
@@ -37,9 +37,39 @@
     </div>
   </div>
   <!-- 发票信息 -->
-  <div class="bg-white px-3">
+  <div class="bg-white px-3" v-if="isInvoice">
     <div class="text-gray-500 font-semibold px-1 py-3 mt-5">发票信息</div>
-    <div v-for="item in billList" class="flex py-2 px-4 text-gray-400 text-base justify-between">
+    <div v-for="(item,invoiceIndex) in invoiceList" :key="invoiceIndex">
+      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
+          <div>发票代码</div>
+          <div>{{item.invoiceCode}}</div>
+      </div>
+      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
+          <div>发票号码</div>
+          <div>{{item.invoiceNumber}}</div>
+      </div>
+      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
+          <div>合计金额(元)</div>
+          <div>{{item.money}}</div>
+      </div>
+      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
+          <div>税额(元)</div>
+          <div>{{item.taxMoney}}</div>
+      </div>
+      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
+          <div>开票日期</div>
+          <div>{{dayjs(item.invoiceTime - 0).format('YYYY年MM月DD日')}}</div>
+      </div>
+      <div class="flex py-2 px-4 text-gray-400 text-base justify-between">
+          <div>备注</div>
+          <div>{{item.remark}}</div>
+      </div>
+    </div>
+  </div>
+  <!-- 金额信息 -->
+  <div class="bg-white px-3" v-else>
+    <div class="text-gray-500 font-semibold px-1 py-3 mt-5">发票信息</div>
+    <div v-for="(item,moneyIndex) in moneyInfo" :key="moneyIndex" class="flex py-2 px-4 text-gray-400 text-base justify-between">
         <div>{{item.name}}</div>
         <div>{{item.value}}</div>
     </div>
@@ -47,15 +77,15 @@
   <!-- 其他信息 -->
   <div class="bg-white px-3">
     <div class="text-gray-500 font-semibold px-1 py-3 mt-5">其他信息</div>
-    <div v-for="item in otherData" class="flex py-2 px-4 text-gray-400 text-base justify-between">
+    <div v-for="(item,otherIndex) in otherData" :key="otherIndex" class="flex py-2 px-4 text-gray-400 text-base justify-between">
         <div>{{item.name}}</div>
         <div>{{item.value}}</div>
     </div>
   </div>
   <!-- 提交人信息 -->
-  <div class="bg-white px-3">
+  <div class="bg-white px-3 mb-5">
     <div class="text-gray-500 font-semibold px-1 py-3 mt-5">提交人信息</div>
-    <div v-for="item in submitter" class="flex py-2 px-4 text-gray-400 text-base justify-between">
+    <div v-for="(item, index) in submitter" :key="index" class="flex py-2 px-4 text-gray-400 text-base justify-between">
         <div>{{item.name}}</div>
         <div>{{item.value}}</div>
     </div>
@@ -64,93 +94,73 @@
 </template>
 
 <script setup>
+import dayjs from "dayjs";
+import { ref, computed } from 'vue';
 import { getApplyDetail } from 'apis/finance'
 // 审核人数据
-const checkerList = ref([
-  {
-    name: "冯教授",
-    advice: "",
-    checkedTime: "",
-    status: "0",
-  },
-  {
-    name: "薇薇安",
-    advice: "很棒!",
-    checkedTime: "12/18 14:55",
-    status: "1",
-    score:100
-  },
-  {
-    name: "小明",
-    advice: "很棒!",
-    checkedTime: "12/18 14:55",
-    status: "1",
-    score:80
-  }
-])
+const currentRate = ref(0);
+const text = computed(() => currentRate.value.toFixed(0));
+const isInvoice = ref(false)
+const checkerList = ref([])
 // 发票信息数据
-const billList = ref([
-  {
-    name: "发票代码",
-    value: "4154153125646",
-  },
-  {
-    name: "发票号码",
-    value: "545648789",
-  },
-  {
-    name: "合计金额(元)",
-    value: "40",
-  },
+const invoiceList = ref([])
+// 没有发票信息得数据
+const moneyInfo = ref([
   {
-    name: "税额(元)",
-    value: "2",
-  },
-  {
-    name: "开票日期",
-    value: "2022年1月2日",
+    name: "申请金额",
+    value: "",
+    label: "money",
   },
   {
     name: "备注",
-    value: "业务支出",
+    value: "",
+    label: "remark",
   },
 ])
 // 其他信息数据
 const otherData = ref([
   {
     name: "申请类型",
-    value: "项目申请"
+    value: "",
+    label: "typeName",
   },
   {
     name: "所属项目",
-    value: "PT项目"
+    value: "",
+    label: "projectName",
   },
   {
     name: "所属任务",
-    value: "财务条界面设计"
+    value: "",
+    label: "taskDetailName",
   },
   {
     name: "类目",
-    value: "报销"
+    value: "",
+    label: "categoryName",
   },
   {
     name: "名目",
-    value: "业务招待费"
+    value: "",
+    label: "rowName",
   },
 ])
 // 提交人数据
 const submitter = ref([
   {
     name:'姓名',
-    value:'黛西'
+    value:'',
+    label: "submitName",
   },
   {
     name:'部门',
-    value:'软件部'
+    value:'软件部',
+    label: "department",
   },
   {
     name:'提交时间',
-    value:'2021/12/29 13:22'
+    value:'',
+    label: "applyTime",
   },
 ])
 
@@ -165,7 +175,35 @@ function onClickLeft(){
 async function handleApplyDetail(){
   try {
     const params = {param : { applyId: '1485797754654695424' }}
-    await getApplyDetail(params)
+    const res = await getApplyDetail(params)
+    // 检查人
+    checkerList.value = res.checkerList
+    // 发票信息
+    isInvoice.value = res.invoiceList && res.invoiceList.length ? true : false;
+    invoiceList.value = res.invoiceList
+    for(let key  in res){
+      moneyInfo.value.forEach(item => {
+        if(item.label === key){
+          item.value = res[key]
+        }
+      })
+    }
+    // 其他信息
+    for(let key  in res){
+      otherData.value.forEach(item => {
+        if(item.label === key){
+          item.value = res[key]
+        }
+      })
+    }
+    // 提交人信息
+    for(let key  in res){
+      submitter.value.forEach(item => {
+        if(item.label === key){
+          item.value = res[key]
+        }
+      })
+    }
   } catch (error) {
     console.error('error: ', error);
   }

pages/financial-approval.vue

@@ -9,12 +9,77 @@
         <FinanceExamine />
       </div>
       <!-- 财务统计页面 -->
-      <div class="bg-white p-4 mt-5 flex text-gray-500 flex-col d_jump">
+       <div class="bg-white p-4 mt-5 text-gray-500 flex-col">
           <div>
-          <span class="font-semibold" id="finance-statistical">财务统计</span> <span class="ml-2 text-xs">财务明细统计查看</span>
+            <span class="font-semibold" id="finance-statistical">财务统计</span>
+            <span class="ml-2">财务明细统计查看</span>
           </div>
-        <img src="public/statistics.png" class="w-full">
+            <!-- 任务支出统计 -->
+          <div class="h-64 overflow-hidden">
+            <div class="mt-5 flex justify-between">
+              <div>
+                <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
+                <span>任务支出统计</span>
+              </div>
+              <div>
+                <van-button :type="taskState ? 'primary' : 'default'" size="mini" @click="taskState = true">图表</van-button>
+                <van-button :type="!taskState ? 'primary' : 'default'" size="mini" @click="taskState = false">表格</van-button>
+              </div>
+            </div>
+            <!-- 任务支出统计的图表展示 -->
+            <div v-show="taskState">
+              <!-- <van-empty description="暂无图表数据信息" /> -->
+              <RingEcharts class="w-full h-full" id="taskEcharts"/>
+            </div>
+            <!-- 任务支出统计的表格展示 -->
+            <div v-show="!taskState">
+              <FinanceExamine />
+            </div>
+          </div>
+           <!-- 名目支出统计 -->
+          <div class="h-64 overflow-hidden">
+              <div class="mt-5 flex justify-between">
+                <div>
+                  <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
+                  <span>名目支出统计</span>
+                </div>
+                <div>
+                  <van-button :type="nameState ? 'primary' : 'default'" size="mini" @click="nameState = true">图表</van-button>
+                  <van-button :type="!nameState ? 'primary' : 'default'" size="mini" @click="nameState = false">表格</van-button>
+                </div>
+              </div>
+              <!-- 名目支出统计的图表展示 -->
+              <div v-show="nameState">
+                <!-- <van-empty description="暂无图表数据信息" /> -->
+                <RingEcharts class="w-full h-full" id="nameEcharts"/>
+              </div>
+              <!-- 名目支出统计的表格展示 -->
+              <div v-show="!nameState">
+                <FinanceExamine />
               </div>
+          </div>
+          <!-- 成员财务图 -->
+          <div class="h-64 overflow-hidden">
+            <div>
+              <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
+              <span>成员财务图</span>
+            </div>
+            <RingEcharts class="w-full h-full" id="memberEcharts"/>
+          </div>
+          <!-- 时间财务图 -->
+          <div class="overflow-hidden">
+              <div>
+                <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
+                <span>时间财务图</span>
+              </div>
+              <BarEcharts class="w-full h-full mt-5"  />
+
+              <!-- 没有数据展示空组件 -->
+              <!-- <van-empty description="暂无图表数据信息" /> -->
+          </div>
+        </div>
+
+
   <ul class="menu">
     <a href="#finance-audit">财务审批</a>
     <a href="#finance-statistical">财务统计</a>
@@ -31,8 +96,8 @@ export default {
 
 <script setup>
 import {ref} from 'vue'
-const active = ref(0);
-
+const taskState = ref(true);
+const nameState = ref(true);
 
 function onClickLeft(){
   console.log('返回上一页')
@@ -51,13 +116,7 @@ function jump(index) {
 }
 </script>
 
-<style lang="less">
-.van-nav-bar__content{
-  background-color:#eee
-}
-.van-icon-arrow-left:before{
-  color: #000;
-}
+<style lang="less" scoped>
 .menu{
   position: fixed;
   right: 0;
@@ -73,4 +132,10 @@ function jump(index) {
   border-radius: 30px 0 0 30px;
   margin-bottom: 15px;
 }
+.van-button--mini{
+  padding: 0.5rem 1rem;
+}
+.van-button--mini+.van-button--mini{
+  margin-left: 0px;
+}
 </style>