|
|
@@ -0,0 +1,167 @@
|
|
|
+<template>
|
|
|
+ <van-tabs v-model:active="active">
|
|
|
+ <van-tab title="按费用类型">
|
|
|
+ <van-cell-group>
|
|
|
+ <van-cell is-link title="筛选条件" @click="feeScreenShow = true" size="large">
|
|
|
+ <template #value>
|
|
|
+ <van-row justify="end">
|
|
|
+ <van-col @click.stop="resetFeeDetail">
|
|
|
+ <van-text-ellipsis content="重置"/>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-collapse v-model="activeType" style="margin-top: 0.5rem">
|
|
|
+ <van-collapse-item
|
|
|
+ size="large"
|
|
|
+ v-for="(item,index) in feeList"
|
|
|
+ :key="item.ID"
|
|
|
+ :title="item.projectFeeGenre.name"
|
|
|
+ :name="index">
|
|
|
+ <van-row justify="space-around">
|
|
|
+ <van-col>
|
|
|
+ <van-text-ellipsis :content="expenditure(item.totalDeposit)"/>
|
|
|
+ </van-col>
|
|
|
+ <van-col>
|
|
|
+ <van-text-ellipsis :content="expenditures(item.totalExpenditure)"/>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </van-collapse-item>
|
|
|
+ </van-collapse>
|
|
|
+ </van-tab>
|
|
|
+ <van-tab title="按部门">
|
|
|
+ <van-collapse v-model="activeNames" style="margin-top: 0.5rem">
|
|
|
+ <van-collapse-item
|
|
|
+ size="large"
|
|
|
+ v-for="(item,index) in expensesList"
|
|
|
+ :key="item.ID"
|
|
|
+ :title="item.department.name"
|
|
|
+ :name="index">
|
|
|
+ <van-row justify="space-around">
|
|
|
+ <van-col>
|
|
|
+ <van-text-ellipsis :content="expenditure(item.totalDeposit)"/>
|
|
|
+ </van-col>
|
|
|
+ <van-col>
|
|
|
+ <van-text-ellipsis :content="expenditures(item.totalExpenditure)"/>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </van-collapse-item>
|
|
|
+ </van-collapse>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ <van-popup
|
|
|
+ v-model:show="feeScreenShow"
|
|
|
+ position="bottom"
|
|
|
+ >
|
|
|
+ <van-row style="margin-top: 0.5rem" class="feeScreenBox">
|
|
|
+ <van-col :span="22" :offset="1">
|
|
|
+ <el-form label-width="90" label-position="left" size="large">
|
|
|
+ <el-form-item label="年份：">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="monthFee.yearTime"
|
|
|
+ type="year"
|
|
|
+ placeholder="请选择年份"
|
|
|
+ format="YYYY"
|
|
|
+ value-format="YYYY"
|
|
|
+ clearable
|
|
|
+ @clear="monthFee.yearTime = ''"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="月份:"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="monthFee.monthTime"
|
|
|
+ type="month"
|
|
|
+ placeholder="请选择月份"
|
|
|
+ format="YYYY-MM"
|
|
|
+ value-format="YYYY-MM"
|
|
|
+ clearable
|
|
|
+ @clear="monthFee.monthTime = ''"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <van-row style="margin-top: 1rem">
|
|
|
+ <van-col :span="24">
|
|
|
+ <van-button type="primary" size="large">查询</van-button>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </van-popup>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { queryProjectMonthFee, queryMonthExpenses } from '@/api/project'
|
|
|
+defineOptions({
|
|
|
+ name: 'DataStat',
|
|
|
+})
|
|
|
+onMounted(() => {
|
|
|
+ getProjectMonthFee()
|
|
|
+ getMonthExpenses()
|
|
|
+})
|
|
|
+const active = ref(0);
|
|
|
+const activeType = ref(['1'])
|
|
|
+const activeNames = ref(['1']);
|
|
|
+const monthFee = reactive({
|
|
|
+ monthTime: '',
|
|
|
+ yearTime: '',
|
|
|
+ code: ''
|
|
|
+})
|
|
|
+const monthExpenses = reactive({
|
|
|
+ monthTime: '',
|
|
|
+ yearTime: '',
|
|
|
+ genre: 0
|
|
|
+})
|
|
|
+// 费用类型搜索、重置
|
|
|
+const feeScreenShow = ref(false)
|
|
|
+const resetFeeDetail = () => {
|
|
|
+ console.log('重置')
|
|
|
+}
|
|
|
+const feeList = reactive([])
|
|
|
+const getProjectMonthFee = () => {
|
|
|
+ queryProjectMonthFee(monthFee).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ console.log('费用类型', res.data)
|
|
|
+ feeList.length = 0
|
|
|
+ feeList.push(...res.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const expensesList = reactive([])
|
|
|
+const getMonthExpenses = () => {
|
|
|
+ queryMonthExpenses(monthExpenses).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ console.log('部门', res.data)
|
|
|
+ expensesList.length = 0
|
|
|
+ expensesList.push(...res.data)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const openCondition = () => {
|
|
|
+ console.log('打开')
|
|
|
+}
|
|
|
+// 计算属性
|
|
|
+const expenditure = computed(() => {
|
|
|
+ return (amount) => '支入：' + amount
|
|
|
+})
|
|
|
+const expenditures = computed(() => {
|
|
|
+ return (amount) => '支出：' + amount
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.cellBox{
|
|
|
+ height: 50px;
|
|
|
+}
|
|
|
+.conditionBox{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.feeScreenBox{
|
|
|
+ height: 300px;
|
|
|
+}
|
|
|
+</style>
|
