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%;margin-right: 10px;">
                        <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.currencyId"
                                :label="item.currencyName + '(' + item.currencyCode + ')'" :value="item.currencyId">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div style="display: flex;justify-content: space-between;margin: 10px 0;" class="checkbox-style">
                <el-checkbox-group v-model="checkList" @change="checkBoxChange">
                    <el-checkbox v-for="(item, index) in checkItems" :key="index" :label=item></el-checkbox>
                </el-checkbox-group>
            </div>
            <div style="margin:10px 0;color:#606266;font-size:16px;">
                <span style="font-weight: bold;">团队名称：</span>
                <span style="color:#606266;">{{ delegationInfo.teamName }}&nbsp;&nbsp;&nbsp;</span>
                <span style="font-weight: bold;">客户：</span>
                <span style="color:#606266;">{{ delegationInfo.clientName }}&nbsp;&nbsp;&nbsp; </span>
                <span style="font-weight: bold;">出访国家：</span>
                <span style="color:#606266;">{{ delegationInfo.visitCountry }}&nbsp;&nbsp;&nbsp;</span>
                <span style="font-weight: bold;">起止日期：</span>
                <span style="color:#606266;">{{ delegationInfo.visitDate }}&nbsp;&nbsp;&nbsp;</span>
                <span style="font-weight: bold;">天数/人数：</span>
                <span style="color:#606266;">{{ delegationInfo.visitDays }}天/{{
            delegationInfo.visitPNumber }}人</span>
            </div>
            <hr style='background-color:#5555; height:1px; border:none;' />
            <div>
                <template>
                    <el-table :data="ContentList" :border=true style="width: 100%" :span-method="objectSpanMethod">
                        <el-table-column prop="num" label="序 号" width="55">
                            <template slot-scope="scope">
                                {{ scope.$index + 1 }}

                            </template>
                        </el-table-column>
                        <el-table-column :align="'center'" prop="SIdName" label="费用项目" width="120">
                            <template slot-scope="scope">
                                <span style="display: none;">{{ scope.row.sId }}</span>{{ scope.row.sidName }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="datePrice" label="日期" width="160">
                            <template slot-scope="scope">
                                <el-date-picker style="width: 100%;" v-model="scope.row.datePrice" type="date"
                                    :picker-options="startPickerOptions" value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </template>
                        </el-table-column>
                        <el-table-column label="金额/币种" width="400">
                            <template slot-scope="scope">
                                <div class="el-input-number-style pice-ys">
                                    <el-input-number size="small" placeholder="请输入金额" v-model="scope.row.price"
                                        :controls="false" @change="PriceChange"></el-input-number>

                                    <!-- <el-input placeholder="请输入金额" v-model="scope.row.price" clearable style="width:180px;"
                                    @change="PriceChange" /> -->
                                    <el-select size="small" v-model="currency" placeholder="币种选择" clearable filterable
                                        style="width:120px" :disabled="true">
                                        <el-option v-for="item in currencyList" :key="item.currencyId"
                                            :label="item.currencyCode" :value="item.currencyId">
                                        </el-option>
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" width="100">
                            <template slot-scope="scope">
                                <el-input size="small" style="width: 100%;" placeholder="选择单位" v-model="scope.row.count"
                                    @change="PriceChange">
                                </el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="单位" width="200">
                            <template slot-scope="scope">
                                <!-- <el-input size="small" style="width: 100%;" placeholder="选择单位" v-model="scope.row.units"
                                    @change="PriceChange"></el-input> -->
                                <el-select v-model="scope.row.units" filterable placeholder="选择单位">
                                    <el-option v-for="item in unitsArr" :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: 100%;">
                                        <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:100%">
                                        <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: 25%;">
                                <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:100px" :disabled="true">
                                        <el-option v-for="item in currencyList" :key="item.currencyId"
                                            :label="item.currencyCode" :value="item.currencyId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                            <div style="width: 75%;text-align: right;">
                                <el-form-item>
                                    <el-button type="primary" @click="addBtn">保存</el-button>
                                    <el-button @click="EscAdd">取消</el-button>
                                </el-form-item>
                            </div>

                        </div>

                    </el-form>

                </template>

            </div>
        </el-skeleton>
    </div>
</template>
<script>
export default {
    data() {
        return {
            startPickerOptions: {
            },
            pageId: '',
            token: '',
            cTable: '',
            userId: 0,
            id: '',
            diId: '',
            loading: true,
            currency: 836,
            countCost: 0,
            delegationInfo: {},
            delegationInfoList: [],//团组下拉框
            currencyList: [],
            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'] },
                ]
            },
            unitsArr: [],
            checkItems: ["车费", "导游费", "客户午餐费用", "导游景点费", "导游小费", "接送机费", "其他费用", "司机工资", "司机小费", "司机餐补", "车超时费", "导游餐补", "导游房补", "导游交通", "客户早餐费用", "客户晚餐费用", "景点门票费", "饮料/零食/水果", "住补费用", "翻译费"],
            checkList: [],
            sourceList: [],
            ListCount: 1,
        }
    },
    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,
                    id: that.id,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    console.log(res)
                    that.delegationInfoList = res.data.data.delegations;
                    for (let index = 0; index < that.delegationInfoList.length; index++) {
                        if (that.delegationInfoList[index].id == that.diId) {
                            that.delegationInfo = that.delegationInfoList[index];
                            break;
                        }
                    }

                    //that.ContentList = res.data.data.carTouristGuides;
                    that.sourceList = res.data.data.carTouristGuides;
                    that.payment = res.data.data.payment;

                    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
                        that.IsAuditGM = CreditCardPayment.isAuditGM;
                    }

                    that.unitsArr = res.data.data.ssdv;

                    var start = new Date(res.data.data.start).getTime();
                    var end = new Date(res.data.data.end).getTime();

                    that.startPickerOptions.disabledDate = (time) => {
                        return time.getTime() < start || time.getTime() > end;
                    }

                    that.checkList = res.data.data.checkedItem;
                    that.checkBoxChange();

                    that.loading = false;
                    //that.OpCarTouristGuideGroundContenById()
                } else {
                    this.$message.error('初始化失败' + res.data.msg);
                }

            })

        },
        //获取ctable
        PostPageLinkCTable() {
            var url = "/api/Business/PostPageLinkCTable"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    pageId: that.pageId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.cTable = res.data.data.cTable
                    that.PostGroupTeamRateByDiIdAndCTableId();
                }
            })
        },
        //获取团组币种
        PostGroupTeamRateByDiIdAndCTableId() {
            var url = "/api/Business/PostGroupTeamRateByDiIdAndCTableId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    diId: that.diId,
                    cTable: that.cTable,
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.currencyList = res.data.data.teamRates;
                    that.currency = that.currencyList[0].currencyId;
                }
            })
        },
        // 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) {

        //             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 {
                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.OPContenData.selectCheck = that.checkList;
                            that.OPContenData.OPContentList = [];
                            that.ContentList.forEach(function (item) {
                                that.OPContenData.OPContentList.push({
                                    id: item.id,
                                    sId: item.sId,
                                    price: item.price,
                                    priceContent: item.priceContent,
                                    datePrice: item.datePrice,
                                    count: item.count,
                                    units: item.units,
                                    //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'
                                    });
                                    that.EscAdd();
                                } 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
        },
        checkBoxChange() {
            this.ContentList = [];
            for (var soure = 0; soure < this.sourceList.length; soure++) {
                for (var item = 0; item < this.checkList.length; item++) {
                    if (this.sourceList[soure].sidName == this.checkList[item]) {
                        this.ContentList.push(this.sourceList[soure]);
                    }
                }
            }
            this.PriceChange();
            var count = 1;
            if (this.ContentList.length > 0) {
                var sid = this.ContentList[0].sId;
                count = this.ContentList.filter(x => x.sId == sid).length;
            }
            this.ListCount = count;
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 1) {

                if (rowIndex % this.ListCount === 0) {
                    return {
                        rowspan: this.ListCount,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }

                // if (columnIndex === 1) {
                //     if (rowIndex % 2 === 0) {
                //         return {
                //             rowspan: 2,
                //             colspan: 1
                //         };
                //     } else {
                //         return {
                //             rowspan: 0,
                //             colspan: 0
                //         };
                //     }
                // }

            }
        }
    },

    mounted() {
        this.pageId = localStorage.getItem('indexs').split('-')[1];
        console.log(this.pageId)
        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.PostPageLinkCTable();
        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;
}

.el-input-number-style .el-input input {
    text-align: left;
}

.pice-ys .el-input-number {
    width: 250px;
}

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

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

.checkbox-style .el-checkbox {
    width: 120px;
    margin: 10px 10px;
}
</style>