fix: 日常支出统计，新功能增加。

2024-07-16 15:15:55 +08:00
parent f4bb7c4fef
commit b6fb4c62b2
4 changed files with 483 additions and 1 deletions
--- a/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue
+++ b/src/pages/statistic/accounts/dailyExpensesAnalysis/index.vue
@@ -0,0 +1,466 @@
+<template>
+    <view class="container">
+      <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+         
+         <view class="search-view">
+          <u-input v-model="queryParams.accountName" border="false" type="select"  @click="handleAccount" placeholder="请选择记账账户" suffixIcon="search"
+          suffixIconStyle="color: #909399" class="search-input">
+          </u-input>
+       </view>
+       </u-sticky>
+        <u-sticky offsetTop="8rpx" customNavHeight="8rpx">
+        <view class="search-view">
+          <u-input v-model="queryParams.time" border="false" type="select" readonly suffixIcon="calendar"
+          suffixIconStyle="color: #909399" class="search-input">
+          </u-input>
+          <u-icon :name="filterPanel ? 'arrow-up-fill' : 'arrow-down-fill'" color="#666666" size="28" label="筛选"
+          labelPos="left" labelSize="32rpx" labelColor="#666666" @click="filterPanel = !filterPanel"></u-icon>
+        <u-transition :show="filterPanel" mode="fade">
+          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
+            <view class="filter-panel-content">
+             
+              <view class="select-header">交易时间</view>
+            <view class="selcet-content" style="padding: 0 24rpx">
+              <u-input
+                :disabled="true"
+                :disabledColor="'#fff'"
+                class="dateInput"
+                border="surround"
+                v-model="queryParams.startTime"
+                placeholder="请选择开始时间"
+              >
+                <template v-slot:suffix>
+                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+                </template>
+              </u-input>
+              <u-input
+                :disabled="true"
+                :disabledColor="'#fff'"
+                class="dateInput"
+                border="surround"
+                v-model="queryParams.endTime"
+                placeholder="请选择结束时间"
+              >
+                <template v-slot:suffix>
+                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+                </template>
+              </u-input>
+            </view>
+            </view>
+            <view class="btn-box">
+              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+            </view>
+            <u-datetime-picker
+              :closeOnClickOverlay="true"
+              :show="timeShow"
+              v-model="time"
+              mode="date"
+              @close="openOrCloseDate"
+              @cancel="openOrCloseDate"
+              @confirm="confirm"
+            ></u-datetime-picker>
+          </view>
+        </u-transition>
+      </view>
+      </u-sticky>
+        <div class="app-container" style="overflow: auto">
+    <div></div>
+  </div>
+      <u-list  :spaceHeight="116" lowerThreshold="100">
+        <u-list-item v-for="(item, index) in listData" :key="index">
+          <view class="list-item">
+            <view class="item-header">
+              <u--text  lines="1" 
+                :text="item.time+' 支出金额：'+item.value" size="30rpx" color="#333333" ></u--text>
+            </view>
+          </view>
+        </u-list-item>
+        <view>
+        </view>
+      </u-list>
+      <u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
+        @confirm="settingConfirm" @cancel="settingCancel"></u-picker>
+        <u-picker itemHeight="88" :show="showAccount" :columns="accountList" keyName="typeNameCodeAvailableLimit" @cancel="handleAccountCancel"
+          @confirm="handleAccountConfirm"></u-picker>
+    </view>
+  </template>
+  
+  <script setup>
+  import { getDailyExpensesAnalysis } from '@/api/invest/statisticAnalysis'
+    import dayjs from 'dayjs'
+  import { timeHandler } from '@/utils/common.ts'
+  import { listAccounts } from '@/api/invest/accounts'
+  import {onLoad,onShow} from "@dcloudio/uni-app";
+      // 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
+  import {reactive ,toRefs,ref,computed }from "vue";
+  const pageNum = ref(1)
+  const listData = ref([])
+  const isShow = ref(false)
+  const accountList = ref([])
+  const accountTypeList = ref([])
+  const settingPickShow = ref(false)
+  const settingColumns = ref([])
+  const showAccount = ref(false)
+  const timeShow= ref(false)
+  const time =ref( Number(new Date()))
+  const  flag= ref(true)
+  const account = ref({
+    amount: '',
+  income: '',
+  expenses: '',
+  incomeCount: '',
+  expensesCount: '',
+  posExpensesCount: '',
+  posExpenses: '',
+  realExpenses: '',
+  realExpensesCount: '',
+  otherExpensesCount: '',
+  acccountsList: []
+})
+  const data = reactive({
+    filterPanel: false,
+    queryAccountParams: {
+    pageNum: 1,
+    state: '1',
+    pageSize: 100
+  },
+    queryParams: {
+    type: 1,
+    time: null,
+    dataType: '2',
+    id: null
+     } 
+  })
+
+  const { filterPanel, queryAccountParams, queryParams} = toRefs(data)
+  const windowHeight = computed(() => {
+              uni.getSystemInfoSync().windowHeight - 50
+          })	
+  onLoad(() => {
+      getDict()
+      getList()
+    });
+  
+   onShow(() => {
+      if (isShow.value) {
+        getList()
+        isShow.value = false
+      }
+    });
+
+    function formatMultiLineData(data) {
+  if (data != null) {
+    return data.replace(/<br\/>/g, '')
+  }
+}
+function  openOrCloseDate(data) {
+      timeShow.value = !timeShow.value
+      flag.value = data
+    }
+    function confirm(e) {
+      const date = timeHandler(new Date(e.value), '-', ':')
+            let formatValue = 'YYYY-MM-DD'
+            dayjs(date).format(formatValue)
+      if (flag.value) {
+        queryParams.value.startTime =  dayjs(date).format(formatValue)
+      } else {
+        queryParams.value.endTime =  dayjs(date).format(formatValue)
+      }
+      timeShow.value = false
+    }
+function searchSubmit() {
+  queryParams.value.time = queryParams.value.startTime+'-'+queryParams.value.endTime 
+      pageNum.value = 1
+      listData.value = []
+      getList()
+      filterPanel.value = false
+    }
+    function resetQuery() {
+        queryParams.value.id = ''
+        queryParams.value.type = '1'
+        let formatValue = 'YYYY-MM-DD'
+    const today = new Date()
+const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
+const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-01'
+       queryParams.value.startTime =  dayjs(start).format(formatValue)
+      queryParams.value.endTime =  dayjs(end).format(formatValue)
+      queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
+        queryParams.value.accountName = ''
+    }
+  function getList() {
+    getDailyExpensesAnalysis({...queryParams.value }).then(res => {
+            account.value = { ...res.data }
+          listData.value = listData.value.concat(res.data.tableAccountsList)
+        }).catch(() => {
+        })
+      }
+  function   getDict() {
+      let formatValue = 'YYYY-MM-DD'
+    const today = new Date()
+const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
+const start = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-01'
+       queryParams.value.startTime =  dayjs(start).format(formatValue)
+      queryParams.value.endTime =  dayjs(end).format(formatValue)
+      queryParams.value.time = dayjs(start).format(formatValue)+'-'+dayjs(end).format(formatValue)
+    listAccounts(queryAccountParams.value).then((response) => {
+        accountList.value = [response.rows] 
+      })
+        
+      }
+  function settingConfirm(e) {
+        queryParams.value.settingId = e.value[0].settingId
+        queryParams.value.settingName = e.value[0].settingName
+        settingPickShow.value = false
+      }
+  function settingCancel() {
+        settingPickShow.value = false
+      }
+      function handleAccount() {
+          if (accountList.value[0].length === 0) {
+            proxy.$refs['uToast'].show({
+              message: '记账账户为空  ', type: 'warning'
+            })
+          } else {
+            showAccount.value = true
+          }
+       }
+    function   handleAccountConfirm(e) {
+      queryParams.value.accountName = e.value[0].typeNameCodeAvailableLimit
+      queryParams.value.id= e.value[0].id
+          showAccount.value = false
+          pageNum.value = 1
+        listData.value = []
+        getList()
+    }
+   function handleAccountCancel() {
+    queryParams.value.accountName = ''
+      queryParams.value.id=''
+
+         showAccount.value = false
+         listData.value = []
+        getList()
+        filterPanel.value = false
+    }
+    
+
+  </script>
+  
+  <style lang="scss" scoped>
+
+.app-container {
+  .header-con {
+    width: 100%;
+    height: 100px;
+    background-color: #ffffff;
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .item {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      position: relative;
+      align-items: center;
+      margin: 5px 10px 5px 10px;
+      .title {
+        margin-left: 5px;
+        color: rgb(133, 133, 148);
+        margin-bottom: 5px;
+        font-size: 14px;
+      }
+      .num {
+        margin-left: 5px;
+        font-weight: bold;
+        font-size: 14px;
+      }
+    }
+    img {
+      height: 30px;
+      width: 30px;
+    }
+  }
+  .header-title {
+    width: 100%;
+    height: 30px;
+    background-color: #ffffff;
+    margin-bottom: 3px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+  }
+}
+  .btnAdd {
+        width: 146rpx;
+        height: 56rpx;
+        line-height: 56rpx;
+        border-radius: 8rpx;
+        display:float;
+        text-align: center;
+      }
+  
+  .search-view {
+    padding: 12rpx 32rpx;
+    background-color: #ffffff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+
+  
+    .search-input {
+      background: #F5F5F5;
+      color: #333333;
+      margin-right: 36rpx;
+    }
+  
+    .filter-panel {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 96rpx;
+      background-color: rgba(0, 0, 0, 0.5);
+  
+      .filter-panel-content {
+        background-color: #ffff;
+        padding: 0 30rpx 30rpx;
+  
+        .filter-title {
+          color: #000000;
+          font-size: 30rpx;
+          font-weight: 500;
+          padding: 30rpx 0;
+        }
+  
+        .state-list {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: flex-start;
+  
+          .state-item {
+            width: 210rpx;
+            height: 72rpx;
+            border: 1rpx solid rgba(0, 0, 0, 0.25);
+            border-radius: 72rpx;
+            text-align: center;
+            line-height: 72rpx;
+            margin: 0 20rpx 20rpx 0;
+            font-size: 28rpx;
+            color: #000000;
+          }
+  
+          .active {
+            background-color: rgba(222, 241, 255, 1);
+            border: 1rpx solid rgba(22, 119, 255, 1);
+          }
+        }
+      }
+  
+      .btn-box {
+        display: flex;
+        padding: 24rpx 30rpx;
+        background-color: #fff;
+        box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      }
+    }
+  }
+  
+  .list-item {
+    margin: 0 24rpx 24rpx;
+    padding: 32rpx;
+    background-color: #fff;
+  
+    .item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 16rpx;
+  
+      .status {
+        .status-item {
+          width: 120rpx;
+          height: 44rpx;
+          text-align: center;
+          line-height: 44rpx;
+          border-radius: 4rpx;
+          font-size: 24rpx;
+        }
+  
+        .status1 {
+          background: #F0F0F0;
+          color: #8C8C8C;
+        }
+  
+        .status2 {
+          background: rgba(38, 129, 255, 0.2);
+          color: #2681FF;
+        }
+  
+        .status3 {
+          background: #F7F7F7;
+          color: #2681FF;
+        }
+  
+        .status4 {
+          background: rgba(255, 85, 51, 0.2);
+          color: #FF5533;
+        }
+  
+        .status5 {
+          background: #F7F7F7;
+          color: rgba(0, 0, 0, 0.85);
+        }
+  
+        .status7 {
+          background: rgba(255, 129, 51, 0.2);
+          color: #FF8133;
+        }
+  
+        .status8 {
+          background: rgba(65, 217, 165, 0.2);
+          color: #41D9A5;
+        }
+      }
+    }
+  
+    .item-row {
+      padding: 16rpx 0;
+  
+      .row-label {
+        color: rgba(0, 0, 0, 0.55);
+      }
+  
+      .row-value {
+        color: rgba(0, 0, 0, 0.85)
+      }
+    }
+  
+    .operate {
+      display: flex;
+      justify-content: flex-end;
+  
+      .btn {
+        width: 146rpx;
+        height: 56rpx;
+        line-height: 56rpx;
+        border-radius: 8rpx;
+        margin-left: 5rpx;
+        text-align: center;
+      }
+  
+      .circulation {
+        background: rgba(0, 0, 0, 0.04);
+        margin-right: 24rpx;
+        color: rgba(0, 0, 0, 0.85);
+      }
+  
+      .filling {
+        background: #2681FF;
+        border-radius: 8rpx;
+        color: #FFFFFF;
+      }
+    }
+  }
+  </style>
--- a/src/pages/statistic/index.vue
+++ b/src/pages/statistic/index.vue
@@ -46,6 +46,7 @@
  import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
  const commonGridList=ref([
        { path: '/pages/statistic/accounts/accountsBalance/index', text: '记账账户统计', icon: 'staff-filled' , permission: 'invest:accountsBalance:list' },
+        { path: '/pages/statistic/accounts/dailyExpensesAnalysis/index', text: '日常支出统计', icon: 'wallet' , permission: 'invest:dailyExpensesAnalysis:list' },
        { path: '/pages/statistic/accounts/posAnalysis/index', text: 'POS机刷卡统计', icon: 'shop-filled' , permission: 'invest:posAnalysis:list' },
        { path: '/pages/statistic/accounts/creditCardDealAnalysis/index', text: '信用卡收支统计', icon: 'wallet' , permission: 'invest:creditCard' },
        { path: '/pages/statistic/bill/creditBillAnalysis/index', text: '信用卡账单统计', icon: 'map', permission: 'invest:creditAnalysis:list'  },
@@ -73,7 +74,8 @@
        { path: '/pages/statistic/accounts/debitDealAnalysis/index', text: '储蓄卡收支统计', icon: 'wallet-filled', permission: 'invest:accountDealRecord:list'  },
        { path: '/pages/statistic/accounts/creditCardDealAnalysis/index', text: '信用卡收支统计', icon: 'wallet' , permission: 'invest:creditCard' },
        { path: '/pages/statistic/accounts/investDealAnalysis/index', text: '投资收益统计', icon: 'arrow-down', permission: 'invest:investDealAnalysis:list'  },
-        { path: '/pages/statistic/accounts/accountDealAnalysis/index', text: '账户收支统计', icon: 'person', permission: 'invest:accountDealAnalysis:list'  }
+        { path: '/pages/statistic/accounts/accountDealAnalysis/index', text: '账户收支统计', icon: 'person', permission: 'invest:accountDealAnalysis:list'  },
+        { path: '/pages/statistic/accounts/dailyExpensesAnalysis/index', text: '日常支出统计', icon: 'wallet' , permission: 'invest:dailyExpensesAnalysis:list' },
      ])

 	function navigateTo(path) {