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

<template>
    <div>
        <div class="overspend-all">
            <div class="overspend-head">
                <div class="head-ipt">
                    <div class="name-ipt">
                        <label>团组名称:</label>
                        <el-select @change="changegroup" style="width:250px" v-model="diId" filterable
                            placeholder="请选择">
                            <el-option v-for="item in options" :key="item.id" :label="item.teamName" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="preserve-btn">
                        <el-button class="preserve" @click="ExportOverspendExcel" type="primary">超支明细表</el-button>
                        <!-- <el-button class="preserve" @click="PostGroupExtraCost_OutputExcel" type="primary">导出超支明细</el-button> -->
                        <el-button class="preserve" @click="addlist()" type="primary">新增数据</el-button>
                    </div>
                </div>
                <div class="overspend-info">
                    <div class="overspend-info-li">
                        <label>团 号：</label>
                        <span>{{ headtitle.tourCode }}</span>
                    </div>
                    <div class="overspend-info-li">
                        <label>客 户：</label>
                        <span>{{ headtitle.clientName }}</span>
                    </div>
                    <div class="overspend-info-li">
                        <label>出访国家：</label>
                        <span>{{ headtitle.visitCountry }}</span>
                    </div>
                    <div class="overspend-info-li">
                        <label>起止日期：</label>
                        <span>{{ headtitle.visitStartDate }} ~ {{ headtitle.visitStartDate }}</span>
                    </div>
                    <div class="overspend-info-li">
                        <label>天数/人数：</label>
                        <span>{{ headtitle.visitDays }}天/{{ headtitle.visitPNumber }}人</span>
                    </div>
                </div>
            </div>
            <div>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="rowNumber" label="序号" width="60">
                    </el-table-column>
                    <el-table-column prop="priceName" label="费用名称" width="180">
                    </el-table-column>
                    <el-table-column prop="priceTypeStr" label="费用类型">
                    </el-table-column>
                    <el-table-column prop="priceSumStr" label="费用" width="120">
                    </el-table-column>
                    <el-table-column prop="priceStr" label="单价" width="120">
                    </el-table-column>
                    <el-table-column prop="priceCount" label="数量" width="80">
                    </el-table-column>
                    <!-- <el-table-column prop="filePath" label="附件" width="180">
                    </el-table-column> -->
                    <el-table-column prop="createUserIdStr" label="操作人" width="90">
                    </el-table-column>
                    <el-table-column prop="priceDt" label="产生日期" width="100">
                    </el-table-column>
                    <el-table-column prop="supervisorConfirmStr" label="OP主管退费确认" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.supervisorConfirmStr != '已确认'">
                                -
                            </span>
                            <span style="color: green;font-size:20px;" v-else>
                                ✓
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sYsupervisorConfirmStr" label="商邀主管退费确认" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.sYsupervisorConfirmStr != '已确认'">
                                -
                            </span>
                            <span style="color: green;font-size:20px;" v-else>
                                ✓
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="managerConfirmStr" label="经理退费确认" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.managerConfirmStr != '已确认'">
                                -
                            </span>
                            <span style="color: green;font-size:20px;" v-else>
                                ✓
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isAuditGMStr" label="是否审核" width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isAuditGMStr != '已通过'">
                                -
                            </span>
                            <span style="color: green;font-size:20px;" v-else>
                                ✓
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" width="100">
                        <template slot-scope="scope">
                            <el-popover v-if="scope.row.remark != ''" placement="top" width="500" trigger="hover">
                                {{ scope.row.remark.split('[TuT]')[0] }}
                                <span style="color: red"> {{ scope.row.remark.split('[TuT]')[0].length > 1 ?
                                    scope.row.remark.split('[TuT]')[1] : ''
                                    }} </span>
                                <span
                                    style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;cursor: pointer;color: #48a2ff;"
                                    slot="reference">查看</span>
                            </el-popover>
                            <span v-else>{{ scope.row.remark | filter_emptyAcquiesce }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="revisionbtn(scope.$index, scope.row, tableData)"
                                type="primary" size="small">
                                编 辑
                            </el-button>
                            <el-button type="danger"
                                @click.native.prevent="deleteRow(scope.$index, scope.row, tableData)" size="small">
                                删 除
                            </el-button>
                            <div v-if="priceNameExists.some(element => scope.row.priceName.includes(element))">
                                <br />
                                <el-button v-show="existsUser() == 2"
                                    @click.native.prevent="changeStatus(2, scope.row.id)" type="primary" size="small">
                                    OP主管退费确认
                                </el-button>
                                <el-button v-show="existsUser() == 3"
                                    @click.native.prevent="changeStatus(3, scope.row.id)" type="primary" size="small">
                                    商邀主管退费确认
                                </el-button>
                                <el-button v-show="existsUser() == 1"
                                    @click.native.prevent="changeStatus(1, scope.row.id)" type="primary" size="small">
                                    经理退费确认
                                </el-button>

                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div v-if="dataCount >= 10" class="block" style="margin-top: 15px;">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageIndex" :page-sizes="[10, 12, 15, 20]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="dataCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pageId: '',
            token: '',
            userId: '',
            pageIndex: 1,
            pageSize: 10,
            dataCount: 0,
            gname: '',
            cTable: '',
            DiId: 0,
            diId: 0,
            tableData: [],
            options: [],
            headtitle: {},
            priceNameExists: [
                '退餐费(地接导入)',
                '车超时费用(地接导入)',
                '酒店超支费用-酒店导入'
            ]
        }
    },
    methods: {
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.pageIndex = 1;
            this.pageSize = val;
            this.PostGroupExtraCost_Search()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.pageIndex = val;
            this.PostGroupExtraCost_Search()
        },
        //获取CTable
        PostPageLinkCTable() {
            var url = "/api/Business/PostPageLinkCTable"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data: {
                    pageId: that.pageId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.cTable = res.data.data.cTable;
                    //调用可操作的团
                    that.PostGroupListByCTableAndUserId();
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //获取头部描述
        getheadtitle() {
            for (let i = 0; i < this.options.length; i++) {
                if (this.diId == this.options[i].id) {
                    this.headtitle = this.options[i]
                }
            }
        },
        //切换数组
        changegroup() {
            //调用getheadtitle
            this.getheadtitle();
            //调用获取超支列表
            this.PostGroupExtraCost_Search();
        },
        //获取可操作的团
        PostGroupListByCTableAndUserId() {
            var url = "/api/Business/PostGroupListByCTableAndUserId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data: {
                    portType: 1,
                    pageIndex: 1,
                    pageSize: 100000,
                    cTable: that.cTable,
                    userId: that.userId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.options = res.data.data;
                    if (that.diId == 0) {
                        if (that.DiId != that.DiId) {
                            that.diId = that.options[0].id;
                        } else {
                            that.diId = that.DiId;
                        }
                    }
                    //调用getheadtitle
                    that.getheadtitle();
                    //调用获取超支列表
                    that.PostGroupExtraCost_Search();
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //获取超支列表
        PostGroupExtraCost_Search() {
            var url = "/api/Financial/PostGroupExtraCost_Search"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data: {
                    portType: 1,
                    pageIndex: that.pageIndex,
                    pageSize: that.pageSize,
                    diId: that.diId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.dataCount = res.data.data.dataCount
                    that.tableData = res.data.data.dataList;
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //新增
        addlist() {
            this.$router.push({
                path: "/home/Overspendedit",
                query: {
                    DiId: this.diId,
                }
            })
        },
        //删除
        deleteRow(index, row, rows) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.PostGroupExtraCost_Operator(row.id);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

            // rows.splice(index, 1);
        },
        //生成
        PostGroupExtraCost_OutputExcel() {
            var url = "/api/Financial/PostGroupExtraCost_OutputExcel"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                    diId: that.diId
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    window.open(res.data.data.url)
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //生成2
        ExportOverspendExcel() {
            var url = "/api/Financial/ExportOverspendExcel"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                    diId: that.diId
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    window.open(res.data.data.url)
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //超支费用api
        PostGroupExtraCost_Operator(id) {
            var url = "/api/Financial/PostGroupExtraCost_Operator"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data: {
                    portType: 1,
                    editType: 3,
                    id: id,
                    diId: that.diId,
                    priceName: '',
                    price: 0,
                    priceType: 0,
                    priceDetailType: 0,
                    coefficient: 0,
                    currency: 0,
                    payee: '',
                    costSign: 0,
                    payType: 0,
                    payCardId: 0,
                    filePath: '',
                    remark: '',
                    createUser: that.userId,
                    priceDt: '',
                    priceCount: 0
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    that.PostGroupExtraCost_Search()
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        },
        //编辑
        revisionbtn(index, row, rows) {
            this.$router.push({
                path: "/home/Overspendedit",
                query: {
                    DiId: this.diId,
                    Id: row.id
                }
            })
        },
        existsUser() {
            var userid = this.userId;
            // 王鸽商邀主管  朱琳OP主管  刘淇经理
            var jinli = [330];
            var zhuguan = [334];
            var syzhuguan = [149];
            jinli.push(235);
            var biaoshi = -1;
            if (userid) {
                if (jinli.indexOf(userid) != -1) {
                    biaoshi = 1;
                } else if (zhuguan.indexOf(userid) != -1) {
                    biaoshi = 2;
                } else if (syzhuguan.indexOf(userid) != -1) {
                    biaoshi = 3;
                }
            }
            return biaoshi;
        },
        changeStatus(status, id) {
            var url = "/api/Financial/ReturnPremiumConfirm"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    DataId: id,
                    ConfirmId: status,
                    status: 1
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message.success("操作成功！");
                    //调用获取CTable
                    that.PostPageLinkCTable();
                    //调用获取超支列表
                    that.PostGroupExtraCost_Search();
                } else {
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                    });
                }
            })
        }
    },
    mounted() {
        this.DiId = Number(this.$route.query.DiId);
        this.pageId = localStorage.getItem('indexs').split('-')[1];
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        //调用获取CTable
        this.PostPageLinkCTable();
        //调用获取超支列表
        this.PostGroupExtraCost_Search();
    },
    filters: {
        //空默认值
        filter_emptyAcquiesce(value) {
            let fhz = value == "" ? "-" : value
            return fhz
        },
    },
}
</script>
<style>
.overspend-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 830px;
}

.overspend-info {
    display: flex;
}

.overspend-info-li {
    margin-right: 30px;
}

.overspend-info-li label {
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}

.overspend-info-li span {
    color: #606266;
    font-size: 14px;
}

.name-ipt label {
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}

.head-ipt {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.overspend-head {
    margin-bottom: 10px;
}
</style>