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

<template>
    <div>
        <div class="lncomingbill-all">
            <div class="lncomingbill-head">
                <div class="lncomingbill-head-li">
                    <label>团组名称:</label>
                    <el-select style="width:250px" @change="changediid()" v-model="value" filterable placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.groupName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="lncomingbill-head-li">
                    <el-button @click="Saveition()" type="primary">保存数据</el-button>
                    <el-button type="primary">生成收款单(四川)</el-button>
                    <el-button type="primary">生成收款单(北京)</el-button>
                    <el-button type="primary">汇款账单</el-button>
                </div>
            </div>
            <div class="lncomingbill-info">
                <div class="lncomingbill-info-li">
                    <label>团 号：</label>
                    <span>{{groupInfo.tourCode}}</span>
                </div>
                <div class="lncomingbill-info-li">
                    <label>客 户：</label>
                    <span>{{groupInfo.clientName}}</span>
                </div>
                <div class="lncomingbill-info-li">
                    <label>出访国家：</label>
                    <span>{{groupInfo.visitCountry|filter_city}}</span>
                </div>
                <div class="lncomingbill-info-li">
                    <label>起止日期：</label>
                    <span>{{groupInfo.tontractTime|filter_time}}~{{groupInfo.visitDate|filter_time}}</span>
                </div>
                <div class="lncomingbill-info-li">
                    <label>天数/人数：</label>
                    <span>{{groupInfo.visitDays}}天/{{groupInfo.visitPNumber}}人</span>
                </div>
            </div>
            <div class="lncomingbill-checked">
                <div class="checked-label">收款账单</div>
                <el-button @click="addition" type="primary">添加一行</el-button>
            </div>
            <div class="lncomingbill-form">
                <el-table
                :border="true"
                ref="multipleTable"
                :data="tableData"
                style="width: 100%;"
                >
                    <el-table-column
                    prop="addingModeName"
                    label="增加方式"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="createTime"
                    label="时间"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    label="费用名称"
                    width="240">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.priceName"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="单 价"
                    width="140">
                        <template slot-scope="scope">
                            <el-input-number :controls="false" :precision="2" class="editNum" v-model="scope.row.price"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="数 量"
                    width="80">
                        <template slot-scope="scope">
                            <el-input  v-model="scope.row.count"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="单 位"
                    width="90">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.unit"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="币 种"
                    width="100">
                        <template slot-scope="scope">
                            <el-select filterable v-model="scope.row.currency">
                                <el-option
                                        v-for="item in currencyoptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="汇 率"
                    width="100">
                        <template slot-scope="scope">
                            <el-input-number  :controls="false" :precision="2" v-model="scope.row.rate"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="应收金额"
                    width="120">
                    <template slot-scope="scope">
                        <div class="sub-box">{{scope.row.itemSumPrice=(scope.row.price*scope.row.count*scope.row.rate).toFixed(2)}}</div>
                    </template>
                    </el-table-column>
                    <el-table-column    
                    prop="remark"
                    label="备注">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.remark" placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="操 作"
                    width="100">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row,tableData)"><i class="el-icon-delete"></i></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userid:'',
            value:"",
            options:[],
            tableData:[
                {
                    addingModeName:"",
                    createTime:"",
                    priceName:"",
                    price:"",
                    count:"",
                    unit:"",
                    currency:"",
                    rate:"",
                    itemSumPrice:"",
                    remark:"",
                }
            ],
            currencyoptions:[],
            groupInfo:{},

        }
    },
    methods:{
        //获取团组
        GetForeignReceivablesDataSources(){
            var url = "/api/Financial/GetForeignReceivablesDataSources"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userid
                },
            }).then(function (res) {
                console.log(res)
                that.options=res.data.data.groupNameData;
                that.currencyoptions=res.data.data.currencyData;
                that.typeoptions=res.data.data.remittanceMethodData;
                that.value=res.data.data.groupNameData[0].id;
                that.PostGroupReceivablesInfoByDiId();
            })
        },
        //获取收款账单详情
        PostGroupReceivablesInfoByDiId(){
            var url = "/api/Financial/PostGroupReceivablesInfoByDiId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userid
                },
                data:{
                    portType: 1,
                    diId: that.value
                }
            }).then(function (res) {
                console.log(res)
                that.tableData=res.data.data.groupCollectionStatementData
                that.groupInfo=res.data.data.groupInfo
            })
        },
        //切换团组
        changediid(){
            this.PostGroupReceivablesInfoByDiId()
        },
        //添加一行
        addition(){
            var newinif={
                id: 0,
                priceName: "",//费用名称
                price: 0,//费用
                count: 0,//数量
                unit:'',//单位
                itemSumPrice:0,// 单项总和
                rate:1,// 汇率
                currency:836,//币种
                addingWay:0,//添加方式
                remark:""//备注
            }
            var url = "/api/Financial/PostReceivablesSave"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType: 1,
                    diId: that.value,
                    userId:that.userid,
                    foreignReceivablesInfos:[newinif]
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    console.log(res)
                    that.PostGroupReceivablesInfoByDiId()
                }else{
                    that.$message.error('添加失败!数据异常');
                }
            })
        },
        //对外收款账单删除
        handleDelete(index, row,rows) {
            this.$confirm('此操作将删除此条数据，是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var url = "/api/Financial/PostGroupReceivablesDel"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data:{
                        userId:that.userid,
                        id:row.id
                    }
                }).then(function (res) {
                    if(res.data.code==200){
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        rows.splice(index, 1);
                    }else{
                        that.$message.error('删除失败!数据异常');
                    }
                })
            })
        },
        //保存收款单
        Saveition(){
            console.log(this.tableData)
            //提取参数
            var arrnew = this.tableData.map((item,index) => {
                return Object.assign({},{
                    'id':item.id,
                    'priceName':item.priceName,
                    'price':item.price,
                    'count':item.count,
                    'unit':item.unit,
                    'itemSumPrice':item.itemSumPrice,
                    'rate':item.rate,
                    'currency':item.currency,
                    'addingWay':item.addingWay,
                    'remark':item.remark,
                })
            })
            console.log(arrnew)
            var Savedecides=true
            for(let g=0;g<arrnew.length;g++){
                if(arrnew[g].count==""||arrnew[g].currency==""||arrnew[g].itemSumPrice==""||arrnew[g].price==""||arrnew[g].priceName==""||arrnew[g].rate==""||arrnew[g].unit==""){
                    Savedecides=false
                    break
                }
            }
            if(Savedecides==true){
                var url = "/api/Financial/PostReceivablesOperate"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data:{
                        portType: 1,
                        diId: that.value,
                        userId:that.userid,
                        foreignReceivablesInfos:arrnew
                    }
                }).then(function (res) {
                    if(res.data.code==200){
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        console.log(res)
                        that.PostGroupReceivablesInfoByDiId()
                    }else{
                        that.$message.error('保存失败!数据异常');
                    }
                })
            }else{
                this.$message.error('请检查数据是否完整！');
            }
        },
    },
    mounted(){
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.GetForeignReceivablesDataSources();
        
    },
    filters:{
        filter_time(value){
            return value;
        },
        filter_city(value){
            return value
        }
    },
}
</script>
<style>
.lncomingbill-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 840px;
}
.lncomingbill-head-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.lncomingbill-head{
    display: flex;
    justify-content: space-between;
}
.lncomingbill-info{
    display: flex;
    margin-top: 10px;
}
.lncomingbill-info-li{
    margin-right: 30px;
}
.lncomingbill-info-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.lncomingbill-info-li span{
    color: #606266;
    font-size: 14px;
}
.lncomingbill-all .el-input-number{
    width: 100%;
}
.lncomingbill-checked{
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lncomingbill-form{
    margin-top: 10px;
}
</style>