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

<template>
    <div class="fesspage-box">
        <div class="fesspage-head">
            <el-form style="display: flex;justify-content: space-between;align-items: center;" :inline="true" :model="formInline" class="demo-form-inline">
                <div>
                    <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>
                </div>
                <div>
                    <el-button size="mini" type="primary" @click="goback()">返 回</el-button>
                </div>
            </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 v-for="(item,index) in classify" :key="index" :label="item.name" :name="item.id+''"></el-tab-pane>
            <!-- <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 height="600" 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="费用名称">
                    <template slot-scope="scope">
                        <el-popover
                        placement="top"
                        width="300"
                        trigger="hover">
                            {{scope.row.priceNameContent}}
                            <span v-if="activeName==98" style="display: -webkit-box; -webkit-box-orient: vertical; cursor: pointer;color: #48a2ff;" @click="open(scope.row.priceMsgContent,scope.row)" slot="reference" type="text">{{ scope.row.priceNameContent }}</span>
                            <span v-else style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;cursor: pointer;color: #48a2ff;" @click="open(scope.row.priceMsgContent,scope.row)" slot="reference" type="text">{{ scope.row.priceNameContent }}</span>
                            <!-- <span style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;cursor: pointer;color: #48a2ff;" slot="reference">{{scope.row.reason}}</span> -->
                        </el-popover>
                        
                        <!-- <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 v-if="activeName==79" prop="busName" label="Bus名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="waitPay" label="应付款金额" show-overflow-tooltip width="150">
                </el-table-column>
                <el-table-column prop="currPay" label="此次付款金额" show-overflow-tooltip width="150">
                </el-table-column>
                <el-table-column prop="balance" label="剩余尾款" show-overflow-tooltip width="150">
                </el-table-column>
                <el-table-column prop="operatorName" label="申请人" width="100">
                </el-table-column>
                <el-table-column prop="auditOperatorName" label="审核人" width="100" >
                </el-table-column>
                <el-table-column prop="overBudget" label="超预算比例" show-overflow-tooltip width="120">
                </el-table-column>
                <el-table-column prop="payType" label="支付方式" width="100" >
                </el-table-column>
                <el-table-column prop="cardType" label="卡类型" width="100" >
                    <template slot-scope="scope">
                        {{scope.row.payType!="刷卡"?'-':scope.row.cardType}}
                    </template>
                </el-table-column>
                <el-table-column v-if="activeName!=1015" 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'
                            @click="handleDelete(scope.$index, scope.row)">不通过</el-button>
                        <el-button size="mini" type="warning" v-if='scope.row.isAuditGM == 1|| scope.row.isAuditGM == 3'
                            @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>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageId:0,
            activeName: 0,
            diid: '',
            token: '',
            causetrue: false,
            formInline: {
                Status: -1,
                name: '',
                clientName: '',
                // clientPhone:'15884061115',
                CountriesVisited: '',
                StartTime: ' ',
                // EndTime:'2023-08-29',
                Number: 0,
                Days: 0,
                resource: '',
                cause: "",
            },
            AuditStatus: [
                {
                    id: -1,
                    title: '全部'
                },
                {
                    id: 0,
                    title: '未审核'
                },
                {
                    id: 1,
                    title: '审核通过'
                },
                {
                    id: 2,
                    title: '审核不通过'
                },
            ],
            tableData: [],
            multipleSelection: [],
            auditarr: '',
            userid: '',
            payable: '',
            classify:[],//分类
        }
    },
    methods: {
        //控制其他原因
        onSubmit() {
            console.log(this.formInline.resource);
            if (this.formInline.resource == '3、其他') {
                this.causetrue = true;
            } else {
                this.causetrue = false;
            }
        },
        //获取详情
        getPostSearchGrpCreditCardPayment() {
            console.log(this.activeName)
            var url = "/api/Groups/PostSearchGrpCreditCardPayment"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                    userId: that.userid,
                    pageId: 47,
                    diId: that.diid,
                    label: that.activeName,
                    auditStatus: that.formInline.Status
                }
            }).then(function (res) {
                console.log(res);
                if (res.data.code == 200) {
                    that.tableData = res.data.data.data.detailList;
                    document.querySelector('.payable').innerHTML = res.data.data.data.totalStr1;
                    document.querySelector('.payment').innerHTML =that.activeName==79?res.data.data.data.totalStr2:'';
                    document.querySelector('.remainder').innerHTML = res.data.data.data.totalStr3;
                    document.querySelector('.reviewed').innerHTML = res.data.data.data.totalStr4;
                }
            })
        },
         //获取分类
         PostGroupDirectionalClassificationInit() {
            var url = "/api/Business/PostGroupDirectionalClassificationInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
            }).then(function (res) {
                console.log(res);
                if (res.data.code == 200) {
                    that.classify=res.data.data;
                    that.classify = that.classify.filter(function(item) {
                        return item.name !== "文档下载"
                    });
                    that.activeName=res.data.data[0].id+''
                    that.getPostSearchGrpCreditCardPayment();
                }
            })
        },
        //获取团组详情
        PostShareGroupInfo(){
            var url = "/api/Business/PostShareGroupInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userid
                },
                data:{
                    portType:1,
                    id: that.diid
                }
            }).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.visitStartDate.split(' ')[0]+'~'+res.data.data.visitEndDate.split(' ')[0];
                    that.formInline.Days = res.data.data.visitDays;
                    that.formInline.Number = res.data.data.visitPNumber;
                }else{
                    that.$message.error('获取数据源失败！');
                }
            })
        },
        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.tableData =[];
            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: {
                    portType:1,
                    userId:that.userid,
                    pageId:that.pageId,
                    CreditIdStr: that.auditarr,
                    auditCode: val,//1审核通过，2审核未通过
                }
            }).then(function (res) {
                console.log(res);
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset: 50
                    });
                    that.getPostSearchGrpCreditCardPayment();
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                        offset: 50
                    });
                }
            })
        },
        //单独审批
        noPostAuditGrpCreditCardPayment(val, num) {
            console.log(val, num)
            var url = "/api/Groups/PostAuditGrpCreditCardPayment"
            var that = this
            var data= {
                    portType:1,
                    userId:that.userid,
                    pageId:that.pageId,
                    creditIdStr: val + '',
                    auditCode: num,//1审核通过，2审核未通过
                    
                }
                console.log(JSON.stringify(data))
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId:that.userid,
                    pageId:that.pageId,
                    CreditIdStr: val + '',
                    auditCode: num,//1审核通过，2审核未通过
                }
            }).then(function (res) {
                console.log(res);
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset: 50
                    });
                    that.getPostSearchGrpCreditCardPayment();
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                        offset: 50
                    });
                }
            })
        },
        childMethod() {
            this.$parent.fatherMethod();
        },
        ceshi() {
            console.log("tg")
        },
        open(val,text) {
            console.log(text)
            this.$alert(val, '费用名称', {
                customClass:'openBox',
                dangerouslyUseHTMLString: true,
                customClass:'message_box_alert'
            });
        }
    },
    mounted() {
        this.diid = this.$route.query.id;
        console.log(this.diid)
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.pageId=Number(localStorage.getItem('indexs').split('-')[1]);//页面id
        this.userid = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.PostGroupDirectionalClassificationInit();
        
        this.PostShareGroupInfo();
        // 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;
    min-height: 840px;
}

.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;
}
.fesspage-box .el-table .cell{
    text-align: center;
}
.el-popup-parent--hidden .el-message-box{
    width: 800px;
}
.message_box_alert .el-message-box__content{
    max-height: 500px;
    overflow-y: auto;
    
}
.message_box_alert .el-message-box__btns{
    padding: 15px 20px 10px 20px;
    
}
.message_box_alert .el-message-box__content::-webkit-scrollbar {
    width: 6px;
}
.message_box_alert .el-message-box__content::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
}
.message_box_alert .el-message-box__content::-webkit-scrollbar-thumb {
    background: #409EFF;
    border-radius: 10px;
}
.message_box_alert .el-message-box__content::-webkit-scrollbar-thumb:hover {
    background: #409EFF;
}
</style>