oa-system/src/components/OP/CarTouristGuideGrounContent.vue

<template>
    <div class="car_add">
        <div>
            <div class="communal-title">
                <div>OP费用填写明细</div>
            </div>
        </div>
        <el-skeleton :rows="28" animated :loading="loading">
            <div style="display: flex;justify-content: space-between;">
                <div style="width: 80%;display: flex;">
                    <div style="width: 25%;">
                        <el-select v-model="diId" placeholder="团组选择" clearable filterable style="width: 100%;"
                            :disabled="true">
                            <el-option v-for="item in delegationInfoList" :key="item.id" :label="item.teamName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div style="width: 25%;">
                        <el-select v-model="currency" placeholder="币种选择" clearable filterable style="width: 80%;">
                            <el-option v-for="item in currencyList" :key="item.id"
                                :label="item.name + '(' + item.remark + ')'" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div style="margin:10px 0;color:#606266;font-size:12px;">
                <span style="font-weight: bold;font-size:12px;">团队名称：</span>
                <span style="color:#606266;">{{ delegationInfo.teamName }}&nbsp;&nbsp;&nbsp;</span>
                <span style="font-weight: bold;font-size:12px;">客户：</span>
                <span style="color:#606266;font-size:12px;">{{ delegationInfo.clientName }}&nbsp;&nbsp;&nbsp; </span>
                <span style="font-weight: bold;font-size:12px;">出访国家：</span>
                <span style="color:#606266;font-size:12px;">{{ delegationInfo.visitCountry }}&nbsp;&nbsp;&nbsp;</span>
                <span style="font-weight: bold;font-size:12px;">起止日期：</span>
                <span style="color:#606266;font-size:12px;">{{ delegationInfo.visitDate }}&nbsp;&nbsp;&nbsp;</span>
                <span style="font-weight: bold;font-size:12px;">天数/人数：</span>
                <span style="color:#606266;font-size:12px;">{{ delegationInfo.visitDays }}天/{{
                    delegationInfo.visitPNumber }}人</span>
            </div>
            <hr style='background-color:#5555; height:1px; border:none;' />
            <div>
                <template>
                    <el-table :data="ContentList" border style="width: 100%">
                        <el-table-column prop="num" label="序 号" width="55">
                            <template slot-scope="scope">
                                {{ scope.$index + 1 }}

                            </template>
                        </el-table-column>
                        <el-table-column prop="SIdName" label="费用项目" width="100">
                            <template slot-scope="scope">
                                <span style="display: none;">{{ scope.row.sId }}</span>{{ scope.row.sIdName }}
                            </template>
                        </el-table-column>
                        <el-table-column label="金额/币种" width="400">
                            <template slot-scope="scope">
                                <el-input placeholder="请输入金额" v-model="scope.row.price" clearable style="width:180px;"
                                    @change="PriceChange" />
                                <el-select v-model="currency" placeholder="币种选择" clearable filterable style="width:120px"
                                    :disabled="true">
                                    <el-option v-for="item in currencyList" :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 type="textarea" :rows="1" placeholder="费用明细"
                                    v-model="scope.row.priceContent"></el-input>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column label="备注">
                            <template slot-scope="scope">
                                <el-input type="textarea" :rows="1" placeholder="备注" v-model="scope.row.remark"></el-input>
                            </template>
                        </el-table-column> -->
                    </el-table>
                    <hr style='background-color:#5555; height:1px; border:none;' />
                    <el-form :model="OPContenData" ref="OPContenData" :rules="OPContenDataRules" label-width="100px"
                        class="demo-ruleForm">
                        <div style="display: flex;">

                            <div style="width: 25%;">
                                <el-form-item label="此次付款百分比:" prop="payPercentage" label-width="160px">
                                    <el-input placeholder="此次付款百分比" v-model="OPContenData.payPercentage">
                                        <template slot="append">%</template>
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div style="width: 25%;">
                                <el-form-item label="收款方:" prop="payee" label-width="160px">
                                    <el-input placeholder="收款方" v-model="OPContenData.payee">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div style="width: 25%;">
                                <el-form-item label="费用表示:" prop="orbitalPrivateTransfer" label-width="160px">
                                    <el-select v-model="OPContenData.orbitalPrivateTransfer" clearable filterable
                                        placeholder="费用标识" style="width: 220px;">
                                        <el-option :key=0 :value="0" label="公转"></el-option>
                                        <el-option :key=1 :value="1" label="私转"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div style="width: 25%;">
                                <el-form-item label="支付方式:" prop="payDId" label-width="160px">
                                    <el-select v-model="OPContenData.payDId" placeholder="支付方式" clearable filterable
                                        style="width:120px">
                                        <el-option v-for="item in payment" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>
                        <div style="display: flex;">

                            <div style="width: 50%;">
                                <el-form-item label="总金额:" label-width="160px">
                                    <el-input placeholder="金额" v-model="countCost" :disabled="true"
                                        style="width: 120px;"></el-input>
                                    <el-select v-model="currency" placeholder="币种选择" clearable filterable
                                        style="width:120px" :disabled="true">
                                        <el-option v-for="item in currencyList" :key="item.id" :label="item.name"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div style="width: 50%;text-align: right;">
                                <el-form-item>
                                    <div style="margin-right: 25%;">
                                        <el-button type="primary" @click="addBtn">保存</el-button>
                                        <el-button @click="EscAdd">取消</el-button>
                                    </div>
                                </el-form-item>
                            </div>

                        </div>

                    </el-form>

                </template>

            </div>
        </el-skeleton>
    </div>
</template>
<script>
import { dE } from '@fullcalendar/core/internal-common'
export default {
    data() {
        return {
            token: '',
            userId: 0,
            id: '',
            diId: '',
            loading: true,
            currency: 836,
            countCost: 0,
            delegationInfo: {},
            delegationInfoList: [],//团组下拉框
            currencyList: [],
            tableInitialization: [],
            payment: [],
            IsAuditGM: 0,
            ContentList: [],
            OPContenData: {
                diId: '',
                cTGGRId: '',
                orbitalPrivateTransfer: 0,
                payPercentage: '80',
                payee: '',
                payDId: '',
                currency: '',
                OPContentList: [],
                CreateUserId: 0
            },
            OPContenDataRules: {
                payPercentage: [
                    { required: true, message: '请输入付款百分比', trigger: ['blur', 'change'] },
                ],
                orbitalPrivateTransfer: [
                    { required: true, message: '请选择费用标识', trigger: ['blur', 'change'] },
                ],
                payee: [
                    { required: true, message: '请输入收款方', trigger: ['blur', 'change'] },
                ],
                payDId: [
                    { required: true, message: '请选择付款方式', trigger: ['blur', 'change'] },
                ]
            },
        }
    },
    methods: {
        //初始化下拉框
        initializeSelect() {
            //团组下拉框绑定
            var url = "/api/Groups/CarTouristGuideGroundContentInitialize"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    userId: that.userId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    debugger
                    that.delegationInfoList = res.data.data.delegations;
                    for (let index = 0; index < that.delegationInfoList.length; index++) {
                        debugger
                        if (that.delegationInfoList[index].id == that.diId) {
                            that.delegationInfo = that.delegationInfoList[index];

                            break;
                        }
                    }
                    that.currencyList = res.data.data.currencyList;
                    debugger
                    that.tableInitialization = res.data.data.tableInitialization;
                    that.tableInitialization.forEach(function (item) {
                        that.ContentList.push({
                            id: 0,
                            sId: item.id,
                            sIdName: item.name,
                            price: '0.00',
                            priceContent: '',
                            //remark: '',
                        })
                    });
                    that.payment = res.data.data.payment;
                    that.OpCarTouristGuideGroundContenById()
                }

            })

        },
        OpCarTouristGuideGroundContenById() {
            var url = "/api/Groups/OpCarTouristGuideGroundContentById"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    id: that.id
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    debugger
                    var CreditCardPayment = res.data.data.creditCardPayment;
                    if (CreditCardPayment != null) {
                        that.OPContenData.payDId = CreditCardPayment.payDId
                        that.OPContenData.payee = CreditCardPayment.payee
                        that.currency = CreditCardPayment.paymentCurrency
                        that.OPContenData.payPercentage = CreditCardPayment.payPercentage
                        that.countCost = CreditCardPayment.payMoney
                        that.OPContenData.orbitalPrivateTransfer = CreditCardPayment.orbitalPrivateTransfer
                    }
                    var CarTouristsContent = res.data.data.carTouristsContent;
                    if (CarTouristsContent.length != 0) {
                        CarTouristsContent.forEach(function (item) {
                            that.ContentList.forEach(function (item1) {
                                if (item.sId == item1.sId) {
                                    item1.id = item.id
                                    item1.price = item.price
                                    item1.priceContent = item.priceContent
                                    //item1.remark = item.remark
                                }

                            })
                        })
                    }

                    that.loading = false
                }
            })
        },
        addBtn() {
            if (this.IsAuditGM == 1) {
                this.$message.error('已通过审核，不可修改！');
            } else {
                debugger
                if (this.diId == null && this.diId == undefined && this.diId == "") {
                    this.$message.error("请选择团组名称");
                    return;
                } else {
                    var that = this
                    that.$refs.OPContenData.validate((valid) => {
                        if (valid) {
                            that.OPContenData.diId = that.diId
                            that.OPContenData.cTGGRId = that.id
                            that.OPContenData.currency = that.currency
                            that.OPContenData.CreateUserId = that.userId
                            that.ContentList.forEach(function (item) {
                                that.OPContenData.OPContentList.push({
                                    id: item.id,
                                    sId: item.sId,
                                    price: item.price,
                                    priceContent: item.priceContent,
                                    //remark: item.remark,
                                })
                            })

                            var url = "/api/Groups/OpCarTouristGuideGroundContent"
                            that.$axios({
                                method: 'post',
                                url: url,
                                headers: {
                                    Authorization: 'Bearer ' + that.token
                                },
                                data: that.OPContenData
                            }).then(function (res) {
                                if (res.data.code == 200) {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                } else {
                                    that.$message.error(res.data.msg);
                                }
                            })
                        } else {
                            this.$message.error('请完善信息在保存！');
                            return false;
                        }
                    })
                }
            }
        },
        EscAdd() {
            this.$router.push({
                path: "/home/CarTouristGuideGroundId",
                query: {
                    diId: this.diId
                }
            })
        },
        PriceChange() {
            var countCost = 0;
            this.ContentList.forEach(function (item) {
                if (item.price != '') {
                    countCost += parseFloat(item.price)
                }

            })

            this.countCost = countCost
        }
    },

    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.id = this.$route.query.id
        this.diId = parseInt(this.$route.query.diId)
        this.initializeSelect();
        //this.OpCarTouristGuideGroundContenById();

    }
}
</script>
<style>
.communal-list {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

.car_add .communal-title {
    display: flex;
    font-size: 17px;
    font-weight: 600;
    color: #555;
    margin-bottom: 20px;
    justify-content: space-between;
    align-items: center;
}

.appraise-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 50px 0;
}

.appraise-box>div {
    width: 30%;
}

.communal-box {
    display: flex;
}

.communal-box>button {
    margin-left: 10px;
    padding: 8px 20px;
}

.car_add {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
}

@media screen and (max-width: 1700px) {
    .appraise-box>div {
        width: 48%;
    }

    .appraise-box>div el-form-item__content {
        width: 260px !important;
    }
}
</style>