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 @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="sendack-head-li">
                    <el-button @click="dialogFormVisible=true;" 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>
                    <!-- <span>{{groupInfo?'暂无':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" 
                        prop="price"
                        label="费用">
                    </el-table-column>
                    <el-table-column
                        prop="createUserName"
                        label="操作人"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="操作时间"
                        width="160">
                    </el-table-column>
                    <el-table-column
                        prop="remark"
                        label="备注"
                        width="600">
                    </el-table-column>
                    <el-table-column label="操作" width="110">
                        <template slot-scope="scope">
                          <el-button
                            type="text"
                            size="mini"
                            @click="Complete(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            type="text"
                            size="mini"
                            @click="Delete(scope.$index, scope.row)"
                           >删除</el-button>
                        </template>
                      </el-table-column>
                </el-table>
            </template>
            <el-dialog width="900px" title="新增数据" :visible.sync="dialogFormVisible">
                <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.name" :value="item.id"></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 type="primary" @click="submitForm('form','保存')">确 定</el-button>
                    <el-button type="primary" @click="submitForm('form','修改')">修 改</el-button>
                    </div>
              </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userid:'',
            value:'',
            options:[],
            groupInfo:{},
            groupsendData:[],
            pageId:0,
            dialogFormVisible:false,
            form:{
                id:0,
                ccpId:0,
                priceName:'',//费用名称
                price:0,//费用
                currencyId:807,//币种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:[],
        }
    },
    methods:{
        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();
                    that.PostPaymentRefundAndOtherMoneyItemByDiId();
                }else{
                    that.$message.error('获取数据源失败！');
                }
            })
        },
        //获取数据源
        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.currencyDatas=res.data.data.currencyDatas;
                    that.payTypeDatas=res.data.data.payTypeDatas;
                    that.priceTypeDatas=res.data.data.priceTypeDatas;
                    that.orbitalPrivateTransferDatas=res.data.data.orbitalPrivateTransferDatas;
                }else{
                    that.$message.error('获取数据源失败！');
                }
            })
        },
        //获取团组详情
        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('获取数据源失败！');
                }
            })
        },
        //获取团组收款退还与其他款项
        PostPaymentRefundAndOtherMoneyItemByDiId(){
            var url = "/api/Financial/PostPaymentRefundAndOtherMoneyItemByDiId"
            var that = this
            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
                }else{
                    that.$message.error('获取数据源失败！');
                }
            })
        },
        //保存修改
        submitForm(formName,text) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                var status
                var id
                var ccpId
                for(var i=0;i<this.currencyDatas.length;i++){
                    if(this.currencyDatas[i].id==this.form.currencyId){
                        this.form.currencyCode=this.currencyDatas[i].name
                    }
                }
                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,
                    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.price,
                    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,
                    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'
                    });
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //编辑
        Complete(index,row){
            if (this.$refs.form){
                this.$nextTick(() => {
                    this.$refs['form'].clearValidate();
                })
            }
            //弹框
            this.dialogFormVisible=true;
            //初始化数据
            this.form={
                id:0,
                ccpId:0,
                priceName:'',//费用名称
                price:0,//费用
                currencyId:807,//币种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[0];
                    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('获取数据源失败！');
                }
            })
        },
        //删除
        Delete(index,row){
            this.$confirm('此操作将删除此条数据，是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var url = "/api/Financial/PostPaymentRefundAndOtherMoneyItemByDiId"
                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){
                        that.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        that.PostPaymentRefundAndOtherMoneyItemByDiId()
                    }else{
                        that.$message.error('获取数据源失败！');
                    }
                })
            })
        },
        changediid(){
            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=localStorage.getItem('indexs').split('-')[1];//页面id
        console.log(this.pageId)
        this.GetForeignReceivablesDataSources();
        this.PostPaymentRefundAndOtherMoneyInfoDataSource();
    }
}
</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 .fyjeselect{
    width: 148px;
}
.sendack-all .fyjeselect input{
    width: 100%;
}
</style>