oa-system/src/components/Finance/FeesPage.vue

<template>
    <div class="fesspage-box">
        <div class="fesspage-head">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <el-select v-model="formInline.Status" @change="shStatus()" placeholder="审核状态">
                        <el-option v-for="(item, index) in AuditStatus" :key="index" :label="item.title"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="团队名称:">
                    {{ formInline.name }}
                </el-form-item>
                <el-form-item label="客户:">
                    {{ formInline.clientName }}
                </el-form-item>
                <el-form-item label="出访国家:">
                    {{ formInline.CountriesVisited }}
                </el-form-item>
                <el-form-item label="起止日期:">
                    {{ formInline.StartTime }}
                </el-form-item>
                <el-form-item label="天数/人数:">
                    {{ formInline.Days }}天 / {{ formInline.Number }}人
                </el-form-item>
            </el-form>
            <el-form v-if="formInline.Status == 0" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <el-button type="primary" @click="PostAuditGrpCreditCardPayment(1)">通 过(多选)</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="PostAuditGrpCreditCardPayment(2)">拒 绝(多选)</el-button>
                </el-form-item>
                <el-form-item label="审核未通过原因:">
                    <el-radio-group @change="onSubmit" v-model="formInline.resource">
                        <el-radio label="1、成本太高"></el-radio>
                        <el-radio label="2、金额填写错误 "></el-radio>
                        <el-radio label="3、其他"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-show="causetrue">
                    <el-input v-model="formInline.cause"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="所有" name="-1"></el-tab-pane>
            <el-tab-pane label="酒店预订" name="76"></el-tab-pane>
            <el-tab-pane label="车导地接" name="79"></el-tab-pane>
            <el-tab-pane label="签证" name="80"></el-tab-pane>
            <el-tab-pane label="邀请公务" name="81"></el-tab-pane>
            <el-tab-pane label="机票预订" name="85"></el-tab-pane>
            <el-tab-pane label="团组增减款项" name="98"></el-tab-pane>
        </el-tabs>
        <div>
            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40" v-if="formInline.Status == 0">
                </el-table-column>
                <el-table-column prop="priceNameContent" label="费用所属" width="200">
                    <template slot-scope="scope">
                        <span @click="open(scope.row.priceMsgContent)" slot="reference">{{ scope.row.priceNameContent }}</span>
                        <!-- <el-popover style="white-space: pre-wrap;" placement="top-start" width="200" trigger="click">
                            <p>{{scope.row.priceMsgContent.replace(/<br\s*\/?>/,"</p><p>")}}</p>
                            <span @click="open(scope.row.priceMsgContent)" slot="reference">{{ scope.row.priceNameContent }}</span>
                        </el-popover> -->
                    </template>
                </el-table-column>
                <el-table-column prop="priceName" label="费用模块" width="120">
                </el-table-column>
                <el-table-column prop="busName" label="Bus名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="waitPay" label="应付款金额" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="currPay" label="此次付款金额" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="balance" label="剩余尾款" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="operatorName" label="申请人" width="100" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="auditOperatorName" label="审核人" width="100" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="overBudget" label="超预算比例" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="审核操作">
                    <template slot-scope="scope">
                        <el-button size="mini" v-if='scope.row.isAuditGM == 0 || scope.row.isAuditGM == 2'
                            @click="handleEdit(scope.$index, scope.row)">通 过</el-button>
                        <el-button size="mini" type="danger" v-if='scope.row.isAuditGM == 0 || scope.row.isAuditGM == 1'
                            @click="handleDelete(scope.$index, scope.row)">不通过</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="payments">
            <div class="statistics">该申请团组款项费用统计如下:</div>
            <div class="payable"></div>
            <div class="payment"></div>
            <div class="remainder"></div>
            <div class="reviewed"></div>
        </div>
        <el-row>
            <el-button size="mini" type="primary" @click="goback()">返 回</el-button>
        </el-row>
    </div>
</template>

<script>
import { co } from '@fullcalendar/core/internal-common';
export default {
    data() {
        return {
            activeName: '-1',
            diid: '',
            token: '',
            causetrue: false,
            formInline: {
                Status: -1,
                name: '甘孜州州长团赴瑞士、希腊、奥地利10日团',
                clientName: '兰卡彬真',
                // clientPhone:'15884061115',
                CountriesVisited: '瑞士 希腊 奥地利',
                StartTime: ' 2023-08-20',
                // EndTime:'2023-08-29',
                Number: 5,
                Days: 10,
                resource: '',
                cause: "",
            },
            AuditStatus: [
                {
                    id: -1,
                    title: '全部'
                },
                {
                    id: 0,
                    title: '未审核'
                },
                {
                    id: 1,
                    title: '审核通过'
                },
                {
                    id: 2,
                    title: '审核不通过'
                },
            ],
            tableData: [],
            multipleSelection: [],
            auditarr: '',
            userid: '',
            payable: '',
        }
    },
    methods: {
        //控制其他原因
        onSubmit() {
            console.log(this.formInline.resource);
            if (this.formInline.resource == '3、其他') {
                this.causetrue = true;
            } else {
                this.causetrue = false;
            }
        },
        //获取详情
        getPostSearchGrpCreditCardPayment() {
            var url = "/api/Groups/PostSearchGrpCreditCardPayment"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    diId: 2270,
                    label: that.activeName,
                    auditStatus: that.formInline.Status
                }
            }).then(function (res) {
                console.log(res);
                if (res.data.code == 200) {
                    that.formInline.name = res.data.data.teamName;
                    that.formInline.clientName = res.data.data.clientName;
                    that.formInline.CountriesVisited = res.data.data.visitCountry;
                    that.formInline.StartTime = res.data.data.visitDate;
                    that.formInline.Days = res.data.data.visitDays;
                    that.formInline.Number = res.data.data.visitPNumber;
                    that.tableData = res.data.data.detailList;
                    document.querySelector('.payable').innerHTML = res.data.data.totalStr1;
                    document.querySelector('.payment').innerHTML = res.data.data.totalStr2;
                    document.querySelector('.remainder').innerHTML = res.data.data.totalStr3;
                    document.querySelector('.reviewed').innerHTML = res.data.data.totalStr4;
                }
            })
        },
        handleSelectionChange(val) {
            this.auditarr = "";
            this.multipleSelection = val;
            for (var i = 0; i < this.multipleSelection.length; i++) {
                this.auditarr += this.multipleSelection[i].id + ','
            }
            console.log(this.auditarr.substring(0, this.auditarr.length - 1))
            this.auditarr = this.auditarr.substring(0, this.auditarr.length - 1)
        },
        handleClick(tab, event) {
            this.activeName = tab.name;
            this.getPostSearchGrpCreditCardPayment();
        },
        shStatus() {
            this.getPostSearchGrpCreditCardPayment();
        },
        handleEdit(index, row) {
            this.noPostAuditGrpCreditCardPayment(row.id, 1)
        },
        handleDelete(index, row) {
            this.noPostAuditGrpCreditCardPayment(row.id, 2)
        },
        //多选审批
        PostAuditGrpCreditCardPayment(val) {
            var url = "/api/Groups/PostAuditGrpCreditCardPayment"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    CreditIdStr: that.auditarr,
                    auditCode: val,//1审核通过，2审核未通过
                    user: that.userid//userid
                }
            }).then(function (res) {
                console.log(res);
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                        offset: 50
                    });
                    that.getPostSearchGrpCreditCardPayment();
                }
            })
        },
        //单独审批
        noPostAuditGrpCreditCardPayment(val, num) {
            console.log(val, num)
            var url = "/api/Groups/PostAuditGrpCreditCardPayment"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    CreditIdStr: val + '',
                    auditCode: num,//1审核通过，2审核未通过
                    user: that.userid//userid
                }
            }).then(function (res) {
                console.log(res);
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                        offset: 50
                    });
                    that.getPostSearchGrpCreditCardPayment();
                }
            })
        },
        childMethod() {
            this.$parent.fatherMethod();
        },
        ceshi() {
            console.log("tg")
        },
        open(val) {
            this.$alert(val, '费用所属', {
            dangerouslyUseHTMLString: true
            });
        }
    },
    mounted() {
        this.diid = this.$route.query.id;
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userid = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.getPostSearchGrpCreditCardPayment();
        // this.getTime('是否通过该条费用？',this.ceshi(),'通过') 
        // this.randomString()
        this.test();
    }
}
</script>
<style>
.fesspage-box {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

.fesspage-head .el-form-item__label {
    font-weight: 600;
}

.fesspage-head .el-form--inline .el-form-item__content {
    color: #606266;
}

.fesspage-head .el-form-item {
    margin-bottom: 10px;
}

.payments {
    margin-top: 10px;
}

.payments>div {
    margin: 2px 0;
    font-size: 14px;
}

.payments .statistics {
    font-size: 17px;
    font-weight: 600;
}

.payment {
    color: #008000;
}

.remainder {
    color: #ff0000;
}

.reviewed {
    color: #1D5DA4;
}
.fesspage-box .el-row{
    margin-top: 10px;
    text-align: end;
}
</style>