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

<template>
    <div>
        <div class="sendack-all">
            <div class="sendack-head">
                <div class="sendack-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 v-if="addAuth=1" class="sendack-head-li">
                    <el-button @click="addclick()" type="primary">新增数据</el-button>
                </div>
            </div>
            <div class="sendack-info">
                <div class="sendack-info-li">
                    <label>团 号：</label>
                    <span v-if="this.groupInfo.tourCode!=''">{{groupInfo=={}?'暂无':groupInfo.tourCode==""?'暂无':groupInfo.tourCode}}</span>
                </div>
                <div class="sendack-info-li">
                    <label>客 户：</label>
                    <span>{{groupInfo=={}?'暂无':groupInfo.clientName==""?'暂无':groupInfo.clientName}}</span>
                </div>
                <div class="sendack-info-li">
                    <label>出访国家：</label>
                    <span>{{groupInfo=={}?'暂无':groupInfo.visitCountry==""?'暂无':groupInfo.visitCountry}}</span>
                </div>
                <div class="sendack-info-li">
                    <label>起止日期：</label>
                    <span>{{groupInfo.visitStartDate|filter_time}}~{{groupInfo.visitEndDate|filter_time}}</span>
                </div>
                <div class="sendack-info-li">
                    <label>天数/人数：</label>
                    <span>{{groupInfo=={}?'暂无':groupInfo.visitDays+'天/'+groupInfo.visitPNumber+'人'}}</span>
                </div>
            </div>
            <template>
                <el-table
                :data="groupsendData"
                border
                style="width: 100%">
                    <el-table-column
                        type="index"
                        label="序 号"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        prop="priceName"
                        label="费用名称">
                    </el-table-column>
                    <el-table-column
                        width="120" 
                        label="费用">
                        <template slot-scope="scope">
                            {{ townum(scope.row.price) }} {{ scope.row.currencyCode }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="createUserName"
                        label="操作人"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="操作时间"
                        width="165">
                    </el-table-column>
                    <el-table-column
                        prop="auditGMName"
                        label="审核人"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="auditGMDate"
                        label="审核时间"
                        width="165">
                    </el-table-column>
                    <el-table-column
                        prop="remark"
                        label="备注"
                        >
                    </el-table-column>
                    <el-table-column label="操作" width="160">
                        <template slot-scope="scope">
                          <el-button
                            :disabled="scope.row.isAuditGM==1"
                            type="primary"
                            size="mini"
                            @click="Complete(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            :disabled="scope.row.isAuditGM==1"
                            type="danger"
                            size="mini"
                            @click="Delete(scope.$index, scope.row)"
                           >删除</el-button>
                        </template>
                      </el-table-column>
                </el-table>
            </template>
            <el-dialog class="sendack-dialog" width="900px" title="新增数据" :visible.sync="dialogFormVisible">
                <div class="sendack-info">
                    <div class="sendack-info-li">
                        <label>团 号：</label>
                        <span v-if="this.groupInfo.tourCode!=''">{{groupInfo=={}?'暂无':groupInfo.tourCode==""?'暂无':groupInfo.tourCode}}</span>
                    </div>
                    <div class="sendack-info-li">
                        <label>客 户：</label>
                        <span>{{groupInfo=={}?'暂无':groupInfo.clientName==""?'暂无':groupInfo.clientName}}</span>
                    </div>
                    <div class="sendack-info-li">
                        <label>出访国家：</label>
                        <span>{{groupInfo=={}?'暂无':groupInfo.visitCountry==""?'暂无':groupInfo.visitCountry}}</span>
                    </div>
                    <div class="sendack-info-li">
                        <label>起止日期：</label>
                        <span>{{groupInfo.visitStartDate|filter_time}}~{{groupInfo.visitEndDate|filter_time}}</span>
                    </div>
                    <div class="sendack-info-li">
                        <label>天数/人数：</label>
                        <span>{{groupInfo=={}?'暂无':groupInfo.visitDays+'天/'+groupInfo.visitPNumber+'人'}}</span>
                    </div>
                </div>
                <el-form :model="form" :rules="rules" ref="form">
                    <div style="display: flex;flex-wrap:wrap;">
                        <el-form-item label="费用名称" prop="priceName" :label-width="formLabelWidth">
                            <el-input v-model="form.priceName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="费用金额" prop="price" :label-width="formLabelWidth">
                            <el-input-number class="fyjeinput" :controls="false" :precision="2" v-model="form.price"></el-input-number>
                            <el-select filterable class="fyjeselect" v-model="form.currencyId" placeholder="请选择币种">
                                <el-option v-for="(item,index) in currencyDatas" :key="index" :label="item.currencyCode" :value="item.currencyId">
                                    <span>{{item.currencyCode}}</span>
                                    <span>{{item.currencyName}}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收款方" prop="payee" :label-width="formLabelWidth">
                            <el-input v-model="form.payee" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="支付方式" prop="payDId" :label-width="formLabelWidth">
                            <el-select v-model="form.payDId" placeholder="请选择活动区域">
                                <el-option v-for="(item,index) in payTypeDatas" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="费用标识" prop="orbitalPrivateTransfer" :label-width="formLabelWidth">
                            <el-select v-model="form.orbitalPrivateTransfer" placeholder="请选择活动区域">
                                <el-option v-for="(item,index) in orbitalPrivateTransferDatas" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="消费方式" prop="consumptionPatterns" :label-width="formLabelWidth">
                            <el-input v-model="form.consumptionPatterns" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="费用类型" prop="payType" :label-width="formLabelWidth">
                            <el-select v-model="form.payType" placeholder="请选择活动区域">
                                <el-option v-for="(item,index) in priceTypeDatas" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <el-form-item style="width:97%" label="备 注" :label-width="formLabelWidth">
                        <el-input style="width:100%" :rows="4" type="textarea" v-model="form.remark" autocomplete="off"></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button v-if="identify" type="primary" @click="submitForm('form','保存')">确 定</el-button>
                    <el-button v-if="revise" type="primary" @click="submitForm('form','修改')">修 改</el-button>
                    </div>
              </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            cTable:0,
            addAuth:1,
            userid:'',
            value:'',
            options:[],
            groupInfo:{},
            groupsendData:[],
            pageId:0,
            dialogFormVisible:false,
            form:{
                id:0,
                ccpId:0,
                priceName:'',//费用名称
                price:0,//费用
                currencyId:0,//币种Id
                currencyCode:'',//币种Code
                payee:'',//收款方
                payDId:72,//支付方式Id
                orbitalPrivateTransfer:0,//费用标识
                consumptionPatterns:'',//消费方式
                payType:0,//费用类型 0 其他 1 退多付款
                remark:'',//备注
            },
            rules: {
                priceName: [
                    { required: true, message: '请输入费用名称', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '请填写完此项', trigger: 'blur' }
                ],
                payee: [
                    { required: true, message: '请填写完此项', trigger: 'blur' }
                ],
                payDId: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                orbitalPrivateTransfer: [
                    {  required: true, message: '请选择', trigger: 'change' }
                ],
                consumptionPatterns: [
                    { required: true, message: '请填写完此项', trigger: 'blur' }
                ],
                payType: [
                    { required: true, message: '请选择', trigger: 'change' }
                ]
            },
            formLabelWidth:'100px',
            currencyDatas:[],
            payTypeDatas:[],
            priceTypeDatas:[],
            orbitalPrivateTransferDatas:[],
            identify:false,
            revise:false,
        }
    },
    methods:{
        //保留两位小数
        townum(val){
            return val.toFixed(2)
        },
        filteryear(val){
            let gstime=val.visitDate.split(' ')[0]
            return gstime;
        },
        //获取团组
        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)
                if(res.data.code==200){
                    that.options=res.data.data.groupNameData;
                    that.value=res.data.data.groupNameData[0].id;
                    that.PostShareGroupInfo();
                    setTimeout(function(){
                        that.PostPaymentRefundAndOtherMoneyItemByDiId();
                    },100)
                    setTimeout(function(){
                        that.PostGroupTeamRateByDiIdAndCTableId();
                    },500)
                    // that.PostGroupTeamRateByDiIdAndCTableId();
                    // that.PostPaymentRefundAndOtherMoneyItemByDiId();
                    // setTimeout(that.PostPaymentRefundAndOtherMoneyItemByDiId(),500)
                    // setTimeout(that.PostGroupTeamRateByDiIdAndCTableId(),10000)
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //获取数据源
        PostPaymentRefundAndOtherMoneyInfoDataSource(){
            var url = "/api/Financial/PostPaymentRefundAndOtherMoneyInfoDataSource"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userid
                },
                data:{
                    portType: 1
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.payTypeDatas=res.data.data.payTypeDatas;
                    that.priceTypeDatas=res.data.data.priceTypeDatas;
                    that.orbitalPrivateTransferDatas=res.data.data.orbitalPrivateTransferDatas;
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //获取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) {
                console.log(res)
                if(res.data.code==200){
                   that.cTable=res.data.data.cTable
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //获取币种数据源
        PostGroupTeamRateByDiIdAndCTableId(){
            var url = "/api/Business/PostGroupTeamRateByDiIdAndCTableId"
            var that = this
            var data={
                    portType: 1,
                    diId: that.value,
                    cTable:that.cTable
                }
                console.log(JSON.stringify(data))
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userid
                },
                data:{
                    portType: 1,
                    diId: that.value,
                    cTable:that.cTable
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.currencyDatas=res.data.data.teamRates;
                    if(res.data.data.teamRates.length==0){
                        that.$notify({
                            title: '警告',
                            message: '此团组其他款项未设置币种及汇率，请前往团组汇率设置！',
                            type: 'warning',
                            duration:0
                        });
                    }
                    that.form.currencyId=res.data.data.teamRates[0].currencyId
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //获取团组详情
        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.value
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.groupInfo=res.data.data;
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //获取团组收款退还与其他款项
        PostPaymentRefundAndOtherMoneyItemByDiId(){
            var url = "/api/Financial/PostPaymentRefundAndOtherMoneyItemByDiId"
            var that = this
            var data={
                    portType:1,
                    userId:that.userid,
                    pageId:that.pageId,
                    diId: that.value
                }
                console.log(JSON.stringify(data))
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userid
                },
                data:{
                    portType:1,
                    userId:that.userid,
                    pageId:that.pageId,
                    diId: that.value
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.groupsendData=res.data.data.data;
                    that.addAuth=res.data.data.pageFuncAuth.addAuth;
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //保存修改
        submitForm(formName,text) {
            console.log(this.form.currencyId)
            console.log(this.currencyDatas)
            this.$refs[formName].validate((valid) => {
            if (valid) {
                var status
                for(var i=0;i<this.currencyDatas.length;i++){
                    if(this.currencyDatas[i].currencyId==this.form.currencyId){
                        this.form.currencyCode=this.currencyDatas[i].currencyCode
                    }
                }
                if(text=='保存'){
                    status=1
                    this.PostPaymentRefundAndOtherMoneyAddOrEdit(status)
                }
                if(text=='修改'){
                    status=2
                    this.PostPaymentRefundAndOtherMoneyAddOrEdit(status)
                }
                console.log(this.form)
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //保存修改api
        PostPaymentRefundAndOtherMoneyAddOrEdit(status){
            var url = "/api/Financial/PostPaymentRefundAndOtherMoneyAddOrEdit"
            var that = this
            var data={
                    portType:1,
                    pageId:Number(that.pageId),
                    userId:that.userid,
                    status:status,//1 添加 2 修改
                    diId:that.value,
                    id:that.form.id,
                    ccpId:that.form.ccpId,
                    priceName:that.form.priceName,
                    price:that.form.price,
                    currencyId:that.form.currencyId,
                    currencyCode:that.form.currencyCode,
                    payee:that.form.payee,
                    payDId:that.form.payDId,
                    orbitalPrivateTransfer:that.form.orbitalPrivateTransfer,
                    consumptionPatterns:that.form.consumptionPatterns,
                    payType:that.form.payType,
                    remark:that.form.remark,
                }
                console.log(JSON.stringify(data))
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userid
                },
                data:{
                    portType:1,
                    pageId:that.pageId,
                    userId:that.userid,
                    status:status,//1 添加 2 修改
                    diId:that.value,
                    id:that.form.id,
                    ccpId:that.form.ccpId,
                    priceName:that.form.priceName,
                    price:that.form.price,
                    currencyId:that.form.currencyId,
                    currencyCode:that.form.currencyCode,
                    payee:that.form.payee,
                    payDId:that.form.payDId,
                    orbitalPrivateTransfer:that.form.orbitalPrivateTransfer,
                    consumptionPatterns:that.form.consumptionPatterns,
                    payType:that.form.payType,
                    remark:that.form.remark,
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    that.dialogFormVisible=false
                    that.PostPaymentRefundAndOtherMoneyItemByDiId()
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //编辑
        Complete(index,row){
            if (this.$refs.form){
                this.$nextTick(() => {
                    this.$refs['form'].clearValidate();
                })
            }
            this.identify=false;
            this.revise=true;
            //弹框
            this.dialogFormVisible=true;
            //初始化数据
            this.form={
                id:0,
                ccpId:0,
                priceName:'',//费用名称
                price:0,//费用
                currencyId:0,//币种Id
                currencyCode:'',//币种Code
                payee:'',//收款方
                payDId:72,//支付方式Id
                orbitalPrivateTransfer:0,//费用标识
                consumptionPatterns:'',//消费方式
                payType:0,//费用类型 0 其他 1 退多付款
                remark:'',//备注
            }
            var formobject={}
            var url = "/api/Financial/PostPaymentRefundAndOtherMoneyInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userid
                },
                data:{
                    portType:1,
                    id: row.id,
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    formobject=res.data.data;
                    that.form.id=formobject.id;
                    that.form.ccpId=formobject.ccpId;
                    that.form.priceName=formobject.priceName;
                    that.form.price=formobject.price;
                    that.form.currencyId=formobject.currencyId;
                    that.form.payee=formobject.payee;
                    that.form.payDId=formobject.payDId;
                    that.form.orbitalPrivateTransfer=formobject.orbitalPrivateTransfer;
                    that.form.consumptionPatterns=formobject.consumptionPatterns;
                    that.form.payType=formobject.payType;
                    that.form.remark=formobject.remark;
                }else{
                    that.$message.error('获取数据源失败！');
                }
            })
        },
        //表格保留两位小数
        rounding(row,column) {
            return parseFloat(row[column.property]).toFixed(2)
        },

        //删除
        Delete(index,row){
            this.$confirm('此操作将删除此条数据，是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var url = "/api/Financial/PostPaymentRefundAndOtherMoneyDel"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + that.userid
                    },
                    data:{
                        portType:1,
                        userId:that.userid,
                        pageId:that.pageId,
                        id: row.id
                    }
                }).then(function (res) {
                    console.log(res)
                    if(res.data.code==200){
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        that.PostPaymentRefundAndOtherMoneyItemByDiId()
                    }else{
                        that.$notify({
                            title: '警告',
                            message: res.data.msg,
                            type: 'warning',
                            duration:0
                        });
                        // that.$message.error(res.data.msg);
                    }
                })
            })
        },
        //新增
        addclick(){
            this.revise=false;
            this.identify=true;
            this.form={
                id:0,
                ccpId:0,
                priceName:'',//费用名称
                price:0,//费用
                currencyId:0,//币种Id
                currencyCode:'',//币种Code
                payee:'',//收款方
                payDId:72,//支付方式Id
                orbitalPrivateTransfer:0,//费用标识
                consumptionPatterns:'',//消费方式
                payType:0,//费用类型 0 其他 1 退多付款
                remark:'',//备注
            }
            this.dialogFormVisible=true;
            this.PostGroupTeamRateByDiIdAndCTableId()
        },
        changediid(){
            console.log(this.value)
            this.PostShareGroupInfo();
            this.PostPaymentRefundAndOtherMoneyItemByDiId();
        }
    },
    filters:{
        filter_time(value){
            if(value){
                return value.split(' ')[0];
            }
            return value
            
        },
        filter_city(value){
            return value
        }
    },
    mounted(){
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.pageId=Number(localStorage.getItem('indexs').split('-')[1]);//页面id
        console.log(this.pageId)
        this.PostPageLinkCTable();
        this.GetForeignReceivablesDataSources();
        // setTimeout(this.PostPaymentRefundAndOtherMoneyInfoDataSource(),500)
        this.PostPaymentRefundAndOtherMoneyInfoDataSource();
        // setTimeout(this.PostGroupTeamRateByDiIdAndCTableId(), 3000);
        // this.PostGroupTeamRateByDiIdAndCTableId();
    }
}
</script>
<style>
.sendack-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 840px;
}
.sendack-head-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.sendack-head{
    display: flex;
    justify-content: space-between;
}
.sendack-info{
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
}
.sendack-info-li{
    margin-right: 30px;
}
.sendack-info-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.sendack-info-li span{
    color: #606266;
    font-size: 14px;
}
.sendack-all .el-form-item{
    width: 50%;
}
.sendack-all .el-form-item input{
    width: 300px;
}
.sendack-all .fyjeinput{
    width: 148px;
}
.sendack-all .fyjeinput input{
    width: 100%;
}
.sendack-all .sendack-dialog .fyjeselect{
    width: 148px;
}
.sendack-all .fyjeselect input{
    width: 100%;
}
.sendack-all .el-dialog__body{
    padding-top: 10px;
}
.el-dialog__body .sendack-info{
    margin-left: 25px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.el-dialog__body .sendack-info-li{
    margin-bottom: 10px;
}
.sendack-dialog .el-select{
    width: 300px;
}
</style>