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

<template>
    <div v-loading.fullscreen.lock="fullscreenLoading">
        <div class="opltinerary-all">
            <div class="opltinerary-head">
                <div class="opltinerary-head-li">
                    <label>团组名称:</label>
                    <el-select @change="InitOpTravel" style="width:210px" size="medium" v-model="value" filterable placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.teamName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="opltinerary-head-li">
                    <el-button @click="DelTravel" size="medium" type="primary">删除本团行程</el-button>
                    <!-- <el-button size="medium" type="primary">导入数据</el-button> -->
                    <el-button @click="TravelSave" size="medium" type="primary">保存修改</el-button>
                    <el-button @click="dcwzxc" size="medium" type="primary">导出完整行程</el-button>
                    <!-- <el-button size="medium" type="primary">导出下拉所选表格</el-button> -->
                </div>
            </div>
            <!-- <div class="opname-box">
                <div class="opname-head-li">
                    <label>选择城市:</label>
                    <el-select style="width:210px" size="medium" 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="opname-head-li">
                    <el-button size="medium" type="primary">导出城市行程</el-button>
                </div>
            </div>
            <div class="opname-box">
                <div class="opname-head-li">
                    <label>选择行程单:</label>
                    <el-select style="width:210px" size="medium" 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="opname-head-li">
                    <el-button size="medium" type="primary">新增数据</el-button>
                    <el-button size="medium" type="primary">确定行程</el-button>
                </div>
            </div> -->
            <div class="itinerary-box">
                <div class="itinerary-title">
                    {{ itineraryinfo.teamName}}
                </div>
                <div class="itinerary-inif">
                    <div>途经城市:{{ itineraryinfo.city}}</div>
                    <div>天数：{{ itineraryinfo.visitDays}}</div>
                    <div>团号：{{ itineraryinfo.tourCode}}</div>
                    <div>人数：{{ itineraryinfo.visitPNumber}}</div>
                </div>
                <div class="itinerary-table">
                    <div class="table-title">
                        <div style="width: 100px;">天数</div>
                        <div style="width: 300px;">日期</div>
                        <div style="width: 200px;">交通</div>
                        <div style="width: 100%;">行程</div>
                    </div>
                    <div class="zwxcdxx" v-if="tablearrr.length<=0">
                        暂无行程单信息
                    </div>
                    <div v-else class="table-form" v-for="(item,index) in tablearrr" :key="index">
                        <div class="table-form-li" style="width: 100px;">
                            <el-input-number disabled style="width: 50px;" size="mini"  :controls="false" v-model="item.days"></el-input-number>
                        </div>
                        <div class="table-form-li"  style="width: 300px;">
                            <el-input disabled style="width: 120px;" size="mini" v-model="item.date"></el-input>
                            <br/>
                            <el-input v-if="item.weekDay=='星期六'||item.weekDay=='星期日'" class="daycolor" disabled style="width: 120px;color: red;" size="mini" v-model="item.weekDay"></el-input>
                            <el-input v-else disabled style="width: 120px;" size="mini" v-model="item.weekDay"></el-input>
                        </div>
                        <div class="table-form-li"  style="width: 200px;">
                            <el-input disabled style="width: 120px;" size="mini" v-model="item.traffic_First"></el-input>
                            <br/>
                            <el-input disabled style="width: 120px;" size="mini" v-model="item.traffic_Second"></el-input>
                        </div>
                        <div class="table-form-li"  style="width: 100%;">
                            <el-input
                            style="width: 90%;"
                            type="textarea"
                            :autosize="{ minRows: 4, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="item.trip">
                            </el-input>
                        </div>
                    </div>
                </div>
                <!-- <div class="briefly-box">
                    <div class="briefly-select">
                        <div class="briefly-select-li">
                            <label>下拉选择国家:</label>
                            <el-select style="width:150px" size="medium" 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="briefly-select-li">
                            <label>下拉选择城市:</label>
                            <el-select style="width:150px" size="medium" 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>
                    <div class="briefly-remark"  style="width: 100%;">
                        <label>国家简介:</label>
                        <el-input
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 4}"
                        placeholder="国家简介"
                        v-model="textarea2">
                        </el-input>
                    </div>
                    <div class="briefly-remark"  style="width: 100%;">
                        <label>城市简介:</label>
                        <el-input
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 4}"
                        placeholder="城市简介"
                        v-model="textarea2">
                        </el-input>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value:-1,
            options:[],
            values:'',
            textarea2:'',
            tablearrr:[
                
            ],
            itineraryinfo:{},
            userid:'',
            fullscreenLoading:false
        }
    },
    methods:{
        //行程单接口
        InitOpTravel() {
            this.fullscreenLoading=true;
            var url = "/api/Groups/InitOpTravel"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    diid: that.value
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.options=res.data.data.groupList;
                    if(that.value==-1){
                        that.value=that.options[0].id;
                    }
                    that.itineraryinfo=res.data.data.groupInfo;
                    that.tablearrr=res.data.data.opTravelList;
                    that.fullscreenLoading=false;
                }else{
                    that.$message.error(res.data.msg);
                    that.fullscreenLoading=false;
                }
            }).catch(function (error) {
                that.$message.error(error);
                that.fullscreenLoading=false;
            });
        },
        //删除本团行程
        DelTravel() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var url = "/api/Groups/DelTravel"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + this.token
                    },
                    data: {
                        diid: that.value,
                        userId: that.userid
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message({
                            message: res.data.msg,
                            type: 'success',
                            offset: 50
                        });
                        that.InitOpTravel();
                    } else {
                        that.$message.error(res.data.msg);
                    }
                }).catch(function (error) {
                    that.$message.error(error);
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            
        },
        //保存
        TravelSave() {
            var url = "/api/Groups/TravelSave"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    arr: that.tablearrr,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message:res.data.msg ,
                        type: 'success',
                        offset:50
                    });
                    that.InitOpTravel();
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        //导出完整行程
        dcwzxc(){
            var url = "/api/Groups/ExportTravel"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + that.token
                    },
                    data: {
                        diid: that.value,
                        isPDF:0
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message({
                            message: res.data.msg,
                            type: 'success',
                            offset: 50
                        });
                        window.open(res.data.data.replace('C:/Server/File/OA2023/','http://132.232.92.186:24/'));
                    } else {
                        that.$message.error(res.data.msg);
                    }
                }).catch(function (error) {
                    that.$message.error(error);
                });
        }
    },
    created(){
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.InitOpTravel();
    }
}
</script>
<style>
.opltinerary-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 830px;
}
.opltinerary-head-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.opltinerary-head{
    display: flex;
    justify-content: space-between;
}
.opname-box{
    display: flex;
    justify-content: flex-end;
}
.opname-head-li:nth-child(1){
    margin-right: 10px;
}
.opname-head-li{
    margin-top: 10px;
}
.opname-head-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.itinerary-box{
    margin-top: 20px;
}
.itinerary-title{
    text-align: center;
    font-size: 17px;
    font-weight: 600;
}
.itinerary-inif{
    display: flex;
    justify-content: center;
}
.itinerary-inif div{
    margin-top: 10px;
    font-size: 14px;
    margin-right: 28px;
}
.itinerary-table{
    margin-top: 10px;
}
.table-title{
    display: flex;
    border: 1px solid #ebeef5;
    text-align: center;
}
.table-title div{
    padding: 10px 0px;
}
.table-title div:not(:first-child){
    border-left: 1px solid #ebeef5;
}
.table-form{
    display: flex;
    align-items: stretch;
    border: 1px solid #ebeef5;
    text-align: center;
    border-top: transparent;
}
.table-form .table-form-li{
    padding: 10px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.table-form-li:not(:first-child){
    border-left: 1px solid #ebeef5;
}
.briefly-box{
    margin-top: 30px;
}
.briefly-select-li{
    margin-right: 20px;
}
.briefly-select{
    display: flex;
    color:red;
}
.briefly-remark{
    margin-top: 10px;
}
.briefly-remark label{
    display: inline-block;
    margin-bottom: 10px;
}
.itinerary-table .el-input.is-disabled .el-input__inner{
    color: #606266;
}
.opltinerary-all .itinerary-table .daycolor .el-input__inner{
    color: red;
}
.zwxcdxx{
    font-size: 14px;
    color: #606266;
    border-left:1px solid #ebeef5;
    border-bottom:1px solid #ebeef5;
    border-right:1px solid #ebeef5;
    text-align: center;
    padding: 30px;
}
</style>