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

<template>
    <div class="car_add">
        <div>
            <div class="communal-title">
                <div>{{ title }}</div>
            </div>
        </div>
        <hr style='background-color:#5555; height:1px; border:none;' />
        <div>
            <el-form :model="delegationInfo" label-width="100px" class="demo-ruleForm">
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="团组名称:" label-width="160px">
                            <el-select v-model="OpCarTouristGuideGroundData.diId" clearable filterable placeholder="团组选择"
                                :disabled="isShow"  @change="DiIdSelectChange">
                                <el-option v-for="item in delegationInfoList" :key="item.id" :label="item.teamName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="团 号:" prop="tourCode" label-width="160px">
                            <el-input placeholder="团号" v-model="delegationInfo.tourCode" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="客户:" prop="clientName" label-width="160px">
                            <el-input placeholder="客户" v-model="delegationInfo.clientName" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="出访国家:" prop="visitCountry" label-width="160px">
                            <el-input placeholder="出访国家" v-model="delegationInfo.visitCountry" :disabled="true">
                            </el-input>
                        </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="VisitDate" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="出访人数:" label-width="160px">
                            <el-input placeholder="出访人数" v-model="delegationInfo.visitPNumber" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="出访天数:" label-width="160px">
                            <el-input placeholder="出访天数" v-model="delegationInfo.visitDays" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="OP提成等级:" prop="tourCode" label-width="160px">
                            <el-select v-model="delegationInfo.opRoyaltyLv" clearable filterable placeholder="等级"
                                :disabled="true">
                                <el-option v-for="item in opRoyaltyLvList" :key="item.id" :label="item.name + '元'"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="width: 75%;">
                        <el-form-item label="Op提成等级说明:" prop="opRoyaltyRemark" label-width="160px">
                            <el-input placeholder="Op提成等级说明" v-model="delegationInfo.opRoyaltyRemark" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </div>

                </div>
            </el-form>
            <el-form :model="OpCarTouristGuideGroundData" ref="OpCarTouristGuideGroundData"
                :rules="OpCarTouristGuideGroundDataRules" label-width="100px" class="demo-ruleForm">
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="地区:" prop="area" label-width="160px">
                            <!-- <el-autocomplete
                            popper-class="el-autocomplete-suggestion"
                            :popper-append-to-body="false"
                            class="inline-input"
                            size="medium"
                            v-model.trim="OpCarTouristGuideGroundData.area"
                            :fetch-suggestions="querySearch"
                            @select="selectarea"
                            ></el-autocomplete> -->
                            <el-select v-model="OpCarTouristGuideGroundData.area" clearable filterable
                                placeholder="地区" >
                                <el-option v-for="(item,index) in restaurants" :key=index :value="item.id" :label="item.value"></el-option>
                            </el-select>
                            <!-- <el-input placeholder="地区" v-model="OpCarTouristGuideGroundData.area">
                            </el-input> -->
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="服务时间起:" prop="serviceStartTime" label-width="160px">
                            <el-date-picker v-model="OpCarTouristGuideGroundData.serviceStartTime" type="date"
                                value-format="yyyy-MM-dd" placeholder="服务时间起">
                            </el-date-picker>

                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="服务时间止:" prop="serviceEndTime" label-width="160px">
                            <el-date-picker v-model="OpCarTouristGuideGroundData.serviceEndTime" type="date"
                                value-format="yyyy-MM-dd" placeholder="服务时间止">
                            </el-date-picker>

                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="服务公司:" prop="serviceCompany" label-width="160px">
                            <el-input placeholder="服务公司" v-model="OpCarTouristGuideGroundData.serviceCompany">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="地接导游:" prop="serviceGuide" label-width="160px">
                            <el-input placeholder="地接导游" v-model="OpCarTouristGuideGroundData.serviceGuide">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="联系电话:" prop="serviceTel" label-width="160px">
                            <el-input placeholder="联系电话" v-model="OpCarTouristGuideGroundData.serviceTel">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="Bus名称:" prop="busName" label-width="160px">
                            <el-input placeholder="Bus名称" v-model="OpCarTouristGuideGroundData.busName">
                            </el-input>
                        </el-form-item>
                    </div>
                    <div style="width: 25%;">
                        <el-form-item label="联系电话:" prop="busTel" label-width="160px">
                            <el-input placeholder="联系电话" v-model="OpCarTouristGuideGroundData.busTel">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 25%;">
                        <el-form-item label="费用表示:" prop="orbitalPrivateTransfer" label-width="160px">
                            <el-select v-model="OpCarTouristGuideGroundData.orbitalPrivateTransfer" clearable filterable
                                placeholder="费用标识" >
                                <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>
                <div style="display: flex;">
                    <div style="width: 100%;">
                        <el-form-item label="Bus描述:" prop="busDescription" label-width="160px">
                            <el-input type="textarea" :rows="2" placeholder="Bus描述"
                                v-model="OpCarTouristGuideGroundData.busDescription"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 100%;">
                        <el-form-item label="服务描述:" prop="serviceDescription" label-width="160px">
                            <el-input type="textarea" :rows="2" placeholder="服务描述"
                                v-model="OpCarTouristGuideGroundData.serviceDescription"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div style="display: flex;">
                    <div style="width: 100%;">
                        <el-form-item label="备 注:" prop="remark" label-width="160px">
                            <el-input type="textarea" :rows="5" placeholder="备注"
                                v-model="OpCarTouristGuideGroundData.remark"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <el-form-item>
                    <div style="text-align: right;">
                        <el-button type="primary" @click="addBtn">保存</el-button>
                        <el-button @click="EscAdd">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { dE } from '@fullcalendar/core/internal-common';
export default {
    data() {
        return {
            title: "新增Op费用",
            token: '',
            userId: 0,
            isShow: false,
            delegationInfo: {},
            delegationInfoList: [],//团组下拉框
            OpCarTouristGuideGroundData: {
                status: 0,
                id: 0,
                diId: 0,
                area: '',
                serviceCompany: '',
                serviceGuide: '',
                serviceTel: '',
                busName: '',
                busDescription: '',
                busTel: '',
                serviceStartTime: '',
                serviceEndTime: '',
                serviceDescription: '',
                orbitalPrivateTransfer: 0,
                createUserId: 0,
                remark: ''
            },
            IsAuditGM: 0,
            VisitDate: '',
            opRoyaltyLvList: [],
            transformDateFormat: function (value) {

                // 将value转换为Date对象
                var date = new Date(value);
                // 获取年、月、日
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                // 将月份和日期转换为两位数的格式

                if (month < 10) {
                    month = '0' + month;
                }
                if (day < 10) {
                    day = '0' + day;
                }
                // 返回格式化后的日期字符串
                return year + '-' + month + '-' + day;
            },
            OpCarTouristGuideGroundDataRules: {
                area: [
                    { required: true, message: '请输入地区', trigger: ['blur', 'change'] },
                ],
                serviceCompany: { required: true, message: '请输入服务公司', trigger: ['blur', 'change'] },
                serviceGuide: { required: true, message: '请输入服务导游', trigger: ['blur', 'change'] },
                serviceTel: { required: true, message: '请输入导游地接联系电话', trigger: ['blur', 'change'] },
                busName: { required: true, message: '请输入Bus名称', trigger: ['blur', 'change'] },
                busTel: { required: true, message: '请输入车公司联系电话', trigger: ['blur', 'change'] },
                serviceStartTime: { required: true, message: '请输入服务时间起', trigger: ['blur', 'change'] },
                serviceEndTime: { required: true, message: '请输入服务时间止', trigger: ['blur', 'change'] },
                orbitalPrivateTransfer: { required: true, message: '请选择费用表示', trigger: ['blur', 'change'] },
            },
        }
    },
    methods: {
        //地区提示
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return restaurant.value.replace("  ", "").toLowerCase().match(queryString.toLowerCase());
            };
        },
        //获取地区
        OpCarCityResult() {
            var url = "/api/Groups/OpCarCityResult"
            var that = this
            this.$axios({
                method: 'get',
                url: url,
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.restaurants=res.data.data;
                    that.restaurants= that.restaurants.map((terminal) => {
                        return {
                            id:terminal.id,
                            value:terminal.country +'  '+ terminal.city,
                        };
                    });
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        ///
        selectarea(val){
            console.log(this.OpCarTouristGuideGroundData.area);
            console.log(val);
        },
        //初始化下拉框
        initializeSelect() {
            var url = "/api/System/QuerySetData"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    dataType: 70,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.opRoyaltyLvList = res.data.data;
                    var url = "/api/Groups/DecreasePaymentsSelect"
                    that.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + that.token
                        },
                        data: {
                            userId: that.userId,
                            ctId: 79
                        }
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            that.delegationInfoList = res.data.data.groupName;
                            for (let index = 0; index < that.delegationInfoList.length; index++) {
                                if (that.delegationInfoList[index].id == that.OpCarTouristGuideGroundData.diId) {
                                    that.delegationInfo = that.delegationInfoList[index];
                                    that.VisitDate = that.transformDateFormat(that.delegationInfo.visitStartDate) + '至' + that.transformDateFormat(that.delegationInfo.visitEndDate);
                                    that.delegationInfo.opRoyaltyLv = that.delegationInfo.opRoyaltyLv
                                    break;
                                }
                            }
                        }
                    })
                }
            })
            //团组下拉框绑定


        },
        DiIdSelectChange() {
            var that = this;
            for (let index = 0; index < that.delegationInfoList.length; index++) {
                if (that.delegationInfoList[index].id == that.OpCarTouristGuideGroundData.diId) {
                    that.delegationInfo = that.delegationInfoList[index];

                    that.VisitDate = that.transformDateFormat(that.delegationInfo.visitStartDate) + '至' + that.transformDateFormat(that.delegationInfo.visitEndDate);
                    break;
                }
            }
        },
        //根据Id获取单挑数据及C表数据
        QueryCarTouristGuideGroundById() {
            var url = "/api/Groups/QueryCarTouristGuideGroundById"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    id: that.OpCarTouristGuideGroundData.id
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var CreditCardPayment = res.data.data.creditCardPayment;
                    var carTouristGuideGround = res.data.data.carTouristGuideGround;
                    if (CreditCardPayment != null) {
                        that.IsAuditGM = CreditCardPayment.isAuditGM;
                    }

                    that.OpCarTouristGuideGroundData.area = carTouristGuideGround.area
                    that.OpCarTouristGuideGroundData.serviceCompany = carTouristGuideGround.serviceCompany
                    that.OpCarTouristGuideGroundData.serviceGuide = carTouristGuideGround.serviceGuide
                    that.OpCarTouristGuideGroundData.serviceTel = carTouristGuideGround.serviceTel
                    that.OpCarTouristGuideGroundData.busName = carTouristGuideGround.busName
                    that.OpCarTouristGuideGroundData.busDescription = carTouristGuideGround.busDescription
                    that.OpCarTouristGuideGroundData.busTel = carTouristGuideGround.busTel
                    that.OpCarTouristGuideGroundData.serviceStartTime = carTouristGuideGround.serviceStartTime
                    that.OpCarTouristGuideGroundData.serviceEndTime = carTouristGuideGround.serviceEndTime
                    that.OpCarTouristGuideGroundData.serviceDescription = carTouristGuideGround.serviceDescription
                    that.OpCarTouristGuideGroundData.orbitalPrivateTransfer = carTouristGuideGround.orbitalPrivateTransfer
                    that.OpCarTouristGuideGroundData.remark = carTouristGuideGround.remark
                }
            })
        },
        addBtn() {
            if (this.IsAuditGM == 1) {
                this.$message.error('已通过审核，不可修改！');
            } else {
                if (this.OpCarTouristGuideGroundData.diId == null && this.OpCarTouristGuideGroundData.diId == undefined && this.OpCarTouristGuideGroundData.diId == "") {
                    this.$message.error("请选择团组名称");
                    return;
                } else {
                    const that = this;
                    that.$refs.OpCarTouristGuideGroundData.validate((valid) => {
                        if (valid) {
                            var url = "/api/Groups/OpCarTouristGuideGround"
                            that.$axios({
                                method: 'post',
                                url: url,
                                headers: {
                                    Authorization: 'Bearer ' + that.token
                                },
                                data: that.OpCarTouristGuideGroundData
                            }).then(function (res) {
                                if (res.data.code == 200) {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    setTimeout(() => {
                                        that.$router.push('/home/CarTouristGuideGroundId?diId='+that.OpCarTouristGuideGroundData.diId+'')
                                    }, 3000);
                                } else {
                                    that.$message.error(res.data.msg);
                                }
                            })
                        } else {
                            this.$message.error('请完善信息在保存！');
                            return false;
                        }
                    })
                }
            }
        },
        EscAdd() {
            this.$router.push({
                path: "/home/CarTouristGuideGroundId",
                query: {
                    diId: this.OpCarTouristGuideGroundData.diId
                }
            })
        }
    },
    created(){
        this.OpCarCityResult()
    },
    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.initializeSelect();
        this.OpCarTouristGuideGroundData.diId = parseInt(this.$route.query.DiId)
        this.OpCarTouristGuideGroundData.id = this.$route.query.id
        this.OpCarTouristGuideGroundData.createUserId = this.userId
        
        if (this.OpCarTouristGuideGroundData.id != null && this.OpCarTouristGuideGroundData.id != undefined && this.OpCarTouristGuideGroundData.id != 0) {
            this.QueryCarTouristGuideGroundById();
            this.title = "修改Op费用";
            this.OpCarTouristGuideGroundData.status = 2
            this.isShow = true
        } else {
            this.OpCarTouristGuideGroundData.status = 1
            this.title = "新增Op费用"
            this.isShow = false
        }

    }
}
</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;
}
.car_add .el-date-editor.el-input{
    width: 100%;
}
.car_add .el-select{
    width: 100%;
}
@media screen and (max-width: 1700px) {
    .appraise-box>div {
        width: 48%;
    }

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