manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/financeAudit/financeAudit.vue

<template>
    <div class='financeAudit'>
        <div class="fAd_hrader">
            <div class="items">
                <div class="label">{{ $t('nianYue') }}</div>
                <div class="value">
                    <el-date-picker v-model="tableForm.dates" type="monthrange" :range-separator="$t('other.to')" :start-placeholder="$t('time.startDate')"
                        @change="getFinanceAuditTableData()" size="small" value-format="yyyy-MM" :end-placeholder="$t('time.endDate')" :clearable="false">
                    </el-date-picker>
                </div>
            </div>
            <div class="items">
                <div class="label">{{ $t('shenHeZhuangTai') }}</div>
                <div class="value">
                    <el-select v-model="tableForm.status" :placeholder="$t('defaultText.pleaseChoose')" size="small"
                        @change="getFinanceAuditTableData()">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
        <div class="fAd_content">
            <el-table :data="financeAuditTableData" border style="width: 100%;height: 100%;"
                v-loading="allLoading.tableLoading">
                <el-table-column prop="reportYrmnth" :label="$t('riBaoNianYue')" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="toDetail(scope.row)">{{ scope.row.reportYrmnth }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="reviewerName" :label="$t('other.reviewer')" align="center"></el-table-column>
                <el-table-column prop="reviewTime" :label="$t('AuditTime')" align="center"></el-table-column>
                <el-table-column prop="reviewStatus" :label="$t('state.states')" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.reviewStatus == 1 ? $t('weiShenHe') : $t('yiShenHe') }}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('operation')" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="undo(scope.row)" type="text" v-if="scope.row.reviewStatus == 2" style="color: red;">{{ $t('other.undo') }}</el-button>
                        <el-button @click="audit(scope.row)" type="text" v-if="scope.row.reviewStatus == 1">{{ $t('other.audit') }}</el-button>
                        <el-button type="text" @click="toDetail(scope.row)">{{ $t('Checkthedetails') }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="fAd_footer">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="paging.pageIndex" :page-sizes="[50, 100, 200, 500]" :page-size="paging.pageSize"
                layout="total, prev, pager, next, sizes" :total="paging.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {
            tableForm: {
                dates: [],
                status: 0,
            },
            financeAuditTableData: [],
            statusOptions: [
                { value: 0, label: this.$t('all') },
                { value: 1, label: this.$t('weiShenHe') },
                { value: 2, label: this.$t('yiShenHe') },
            ],
            paging: {
                pageSize: 50,
                pageIndex: 1,
                total: 0
            },
            allLoading: {
                tableLoading: false
            }
        }
    },
    computed: {},
    watch: {},
    created() { },
    mounted() {
        let firstMonth = this.dayjs().startOf('year').format('YYYY-MM')
        let currentMonth = this.dayjs().format('YYYY-MM')
        this.tableForm.dates = [firstMonth, currentMonth]
        this.getFinanceAuditTableData()
    },
    methods: {
        toDetail(item) {
            this.$router.push({
                path: '/cost',
                query: {
                    startDate: item.reportYrmnth,
                    endDate: item.reportYrmnth,
                    financeAudit: 1
                }
            })
        },
        
        undo(item) {
            this.$confirm(`${this.$t('ninQueDingYaoCheXiao')}${item.reportYrmnth} ${this.$t('yueDeGongShiBaoGaoMa')}`, this.$t('caiWuShenHeTiShi'), {
                confirmButtonText: this.$t('btn.determine'),
                cancelButtonText: this.$t('btn.cancel'),
                type: 'warning'
            }).then(() => {
                this.postData('/financial-audit/undo', { id: item.id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: this.$t('chexiaoChengGong')
                    });
                    this.getFinanceAuditTableData();
                });
            }).catch(() => {});
        },
        audit(item) {
            this.$confirm(`${this.$t('ninQueDingYaoShenHeTongGuo')}${item.reportYrmnth} ${this.$t('yueDeGongShiBaoGaoMa')}`, this.$t('caiWuShenHeTiShi'), {
                confirmButtonText: this.$t('btn.determine'),
                cancelButtonText: this.$t('btn.cancel'),
                type: 'warning'
            }).then(() => {
                this.postData('/financial-audit/audit', { id: item.id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: this.$t('shenHeChengGong')
                    });
                    this.getFinanceAuditTableData();
                });
            }).catch(() => {});
        },
        getFinanceAuditTableData() {
            this.allLoading.tableLoading = true
            let param = {
                pageSize: this.paging.pageSize,
                pageIndex: this.paging.pageIndex,
                startDate: this.tableForm.dates[0] + '-01' || '',
                endDate: this.tableForm.dates[1] + '-01' || '',
                status: this.tableForm.status,
            }
            this.postData('/financial-audit/list', param).then(({ data }) => {
                const { total, records } = data
                this.financeAuditTableData = records
                this.paging.total = total
            }).finally(() => {
                this.allLoading.tableLoading = false
            })
        },
        handleSizeChange(val) {
            this.paging.pageSize = val
            this.paging.pageIndex = 1
            this.getFinanceAuditTableData()
        },
        handleCurrentChange(val) {
            this.paging.pageIndex = val
            this.getFinanceAuditTableData()
        },
        // 单独封装请求
        async postData(urls, param) {
            return new Promise((resolve, reject) => {
                this.http.post(urls, { ...param },
                    res => {
                        if (res.code == 'ok') {
                            resolve(res)
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            })
                            reject(res)
                        }
                        resolve(res)
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                        reject(error)
                    }
                )
            });
        }
    },
}
</script>
<style scoped lang='scss'>
* {
    box-sizing: border-box;
}

.financeAudit {
    height: 100%;
    display: flex;
    flex-direction: column;

    .fAd_hrader {
        background-color: #F2F2F2;
        padding: 10px 15px;
        display: flex;

        .items {
            display: flex;
            align-items: center;
            margin-right: 20px;

            &:last-child {
                margin-right: 0;
            }

            .label {
                margin-right: 10px;
            }
        }
    }

    .fAd_content {
        flex: 1;
    }

    .fAd_footer {
        background: #F2F2F2;
        padding: 10px 20px;
        display: flex;
        justify-content: flex-end;
    }
}
</style>