wang_zhuang_daping/src.mobile/views/mobile-page/components/historical-filling.vue

<template>
    <div class="page-body">
        <van-row style="margin-top: 10px">
            <van-col :span="22" :offset="1" style="background-color: white">
                <van-cell
                    :title="listQuery.yf"
                    @click="setYearBoxStatus(true)"
                    is-link
                    arrow-direction="down"
                ></van-cell>
            </van-col>
        </van-row>
        <van-row style="margin-top: 10px">
            <van-col :span="22" :offset="1" style="background-color: white">
                <div class="itemBox" v-for="(item, index) in dataList" :key="index">
                    <div class="timeBox">
                        <div class="time">{{ item.yf }}</div>
                        <div class="subTime">{{ item.tbsj }}</div>
                    </div>
                    <div v-if="!isCf">
                        <div>本月营业收入<span class="Company">(万元)</span>：</div>
                        <div class="value">{{ item.yysr }}</div>
                    </div>
                    <div v-if="isCf">
                        <div>本月餐费收入<span class="Company">(万元)</span>：</div>
                        <div class="value">{{ item.cfsr }}</div>
                    </div>
                    <div>
                        <div>本月总薪资<span class="Company">(万元)</span>：</div>
                        <div class="value">{{ item.xzze }}</div>
                    </div>
                    <!-- <div>
                        <div>本月餐费收入<span class="Company">(万元)</span>：</div>
                        <div class="value">{{ item.cfsr }}</div>
                    </div> -->
                </div>
            </van-col>
        </van-row>
        <!-- 弹框 -->
        <van-popup v-model="show" position="bottom">
            <van-picker
                show-toolbar
                :columns="yearColumns"
                :default-index="yearColumns.length"
                @confirm="getYear"
                @cancel="cancel"
            />
        </van-popup>
    </div>
</template>
<script>
import common from '@.mobile/plugin/axios/common'
import apis from '@.mobile/api/apis'
import { Toast } from 'vant'

export default {
    data() {
        return {
            currentDate: '',
            show: false,
            yearColumns: [],
            dataList: [],
            isCf: false,
            listQuery: {
                yf: '',
                tblx: '预估填报',
                shxydm: '',
                qymc: '',
                pageNum: 1,
                pageSize: 20,
                controller: 'EcCompanyPredictController'
            }
        }
    },
    mounted() {
        const user = common.currUser()
        this.listQuery.shxydm = user.shxydm
        this.listQuery.qymc = user.qymc
        this.yearData()
        this.list()

        this.isCf = user.hymc === '住宿餐饮'
    },
    methods: {
        list() {
            apis.requestData('EcCompanyPredictController', 'list', this.listQuery).then(res => {
                this.dataList = res.data.rows
            })
        },
        setYearBoxStatus(e) {
            this.show = e
        },
        yearData() {
            const year = new Date().getFullYear()
            const yearColumns = []
            for (let i = 2000; i <= year; i++) {
                yearColumns.push(i)
            }
            this.yearColumns = yearColumns
            this.listQuery.yf = this.yearColumns.find(e => e === Number(year))
        },
        getYear(e) {
            this.listQuery.yf = e
            this.list()
            this.setYearBoxStatus(false)
        },
        cancel() {
            this.setYearBoxStatus(false)
        }
    }
}
</script>
<style scoped>
.itemBox {
    background: white;
    border-radius: 1vw;
    display: flex;
    flex-direction: column;
    padding: 1vw 4vw;
}

.itemBox > div {
    margin: 2vw 0;
    display: flex;
    font-size: 3vw;
}

.timeBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time {
    font-size: 4vw;
    font-weight: 600;
    color: #333333;
}

.subTime {
    color: #cccccc;
    font-size: 2.5vw;
}

.Company {
    color: #999999;
}

.value {
    color: #1a4cda;
    font-weight: 600;
}
</style>