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

<template>
    <div>
        <div class="collection-all">
            <div class="collection-head">
                <div class="collection-head-li">
                    <label>团组名称:</label>
                    <el-select 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="collection-head-li">
                    <el-button 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="collection-info">
                <div class="collection-info-li">
                    <label>团 号：</label>
                    <span>{{groupInfo.tourCode}}</span>
                </div>
                <div class="collection-info-li">
                    <label>客 户：</label>
                    <span>{{groupInfo.clientName}}</span>
                </div>
                <div class="collection-info-li">
                    <label>出访国家：</label>
                    <span>{{groupInfo.visitCountry|filter_city}}</span>
                </div>
                <div class="collection-info-li">
                    <label>起止日期：</label>
                    <span> {{groupInfo.tontractTime|filter_time}}~{{groupInfo.visitDate|filter_time}}</span>
                </div>
                <div class="collection-info-li">
                    <label>天数/人数：</label>
                    <span>{{groupInfo.visitDays}}天/{{groupInfo.visitPNumber}}人</span>
                </div>
            </div>
            <div class="collection-checked">
                <div></div>
                <el-button type="primary">添加一行</el-button>
            </div>
            <div class="collection-form">
                <el-table
                :border="barderis"
                ref="multipleTable"
                :data="tableData"
                style="width: 100%"
                :expand-row-keys="expends"
                :row-key="getRowKeys"
                >
                    <!-- <el-table-column
                    type="selection"
                    width="40">
                    </el-table-column> -->
                    <el-table-column align="center" type="expand">
                        <!-- eslint-disable-next-line -->
                        <template slot-scope="scope">
                            <div class="paid-box">
                                <div class="paid-label">已收款项</div>
                                <div>
                                    <el-button type="primary">新 增</el-button>
                                </div>
                            </div>
                            <el-table
                            class="inside-li" 
                            :border="barderis"
                            :data="scope.row._ProceedsReceivedDatas"
                            style="width: 100%">
                            <el-table-column
                                label="付款时间"
                                width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.sectionTime"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="付款方信息"
                                width="230">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.client"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="付款方电话"
                                width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.customerTel"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="已收金额"
                                width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.price"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="到款时间"
                                width="180">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.customerName"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="币种"
                                width="180">
                                <template slot-scope="scope">
                                    <el-select 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="180">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.receivablesType">
                                        <el-option
                                                v-for="item in typeoptions"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="备注">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.remark"></el-input>
                                </template>
                            </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <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 class="editNum" type="number" oninput="value=value.replace(/[^\d.]/g,'')" v-model="scope.row.price"></el-input>
                        </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="80">
                        <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 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>
                        <!-- <template slot-scope="scope">
                            <el-input v-model="scope.row.currency"></el-input>
                        </template> -->
                    </el-table-column>
                    <el-table-column
                    label="汇 率"
                    width="100">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.rate"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="itemSumPrice"
                    label="应收金额"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="attention"
                    label="备注">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.attention" placeholder="请输入内容"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="尾 款"
                    width="100">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
      return {
        expends:[],
        barderis:true,
        options: [],
        value: '',
        currencyoptions:'',
        typeoptions:[],
        tableData: [],
        multipleSelection: [],
        groupInfo:{}
      }
    },
    methods:{
        GetForeignReceivablesDataSources(){
            var url = "/api/Financial/GetForeignReceivablesDataSources"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
            }).then(function (res) {
                    console.log(res)
                    that.options=res.data.data.groupNameData;
                    that.currencyoptions=res.data.data.currencyData;
                    that.typeoptions=res.data.data.remittanceMethodData;
                    if(that.value==""){
                        that.value=that.options[0].id;
                    }
                    that.GetGroupReceivablesInfoByDiId();
            })
        },
        GetGroupReceivablesInfoByDiId(){
            var url = "/api/Financial/GetGroupReceivablesInfoByDiId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType: 1,
                    diId: 2270
                }
            }).then(function (res) {
                    console.log(res)
                    that.groupInfo=res.data.data.groupInfo;
                    that.tableData=res.data.data.groupCollectionStatementData.receivedData;
                    that.getExpends();
            })
        },
        getExpends(){
            var Id=[]
            this.tableData.forEach(item=>{
                if(item._ProceedsReceivedDatas.length>0){
                    Id.push(item.id)
                }
            })
            this.expends=Id;
        },
        getRowKeys(row){
            return row.id
        }
    },
    filters:{
        filter_time(value){
            return value;
        },
        filter_city(value){
            return value
        }
    },
    mounted(){
        this.GetForeignReceivablesDataSources()
    }
}
</script>
<style>
.collection-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 840px;
}
.collection-head-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.collection-head{
    display: flex;
    justify-content: space-between;
}
.collection-info{
    display: flex;
    margin-top: 10px;
}
.collection-info-li{
    margin-right: 30px;
}
.collection-info-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.collection-info-li span{
    color: #606266;
    font-size: 14px;
}
.collection-form{
    margin-top: 10px;
}
.collection-checked{
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.paid-box{
    margin-left:40px;
    display: flex;
    align-items: center;
    justify-content:space-between;
    margin-bottom: 5px;
}
.paid-label{
    font-size: 14px;
    font-weight: 600;
}
.editNum input::-webkit-outer-spin-button,
.editNum input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.editNum input[type="number"] {
    -moz-appearance: textfield;
}
.inside-li{
    margin-left:40px;
}
</style>