oa-system/src/components/Resource/VisitSchedule.vue

<template>
    <div class="VisitSchedule-all" v-loading.fullscreen.lock="fullscreenLoading">
        <div class="VisitSchedule-search-head">
            <el-form ref="form" label-width="75px">
                <el-form-item style="width: 340px;" label="团组名称:">
                    <el-select @change="ApprovalJourneyInit" filterable v-model="diid" placeholder="请选择团组名称">
                        <el-option v-for="(item, index) in groupList" :key="index" :label="item.teamName"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div style="display: flex;gap: 5px;">
                <div style="flex: 1">
                    <el-select filterable v-model="blackCodeId" placeholder="请选择黑屏代码">
                        <el-option v-for="(item, index) in blackCodeList" :key="index" :label="item.title"
                            :value="item.id"></el-option>
                    </el-select>
                </div>
                <div>
                    <el-button style="margin-left: 0px;" @click="CreateApprovalJourney"
                        type="primary">导入机票信息</el-button>
                    <el-button style="margin-left: 0px;" @click="SaveApprovalJourney" type="primary">保存</el-button>
                    <el-button style="margin-left: 0px;" @click="DeleteApprovalJourney" type="primary">删除</el-button>
                    <el-select style="width: auto;" filterable v-model="fileIndex" placeholder="请选择文件类型">
                        <el-option v-for="(item, index) in fileTempList" :key="index" :label="item.fileName"
                            :value="item.index"></el-option>
                    </el-select>
                    <el-button @click="ExportApprovalJourneyWord" type="primary">导出word</el-button>
                </div>
            </div>
        </div>
        <div class="VisitSchedule-content">
            <div class="VisitSchedule-content-title">出访行程</div>
            <div class="VisitSchedule-content-info">
                团组名:{{ groupInfo.teamName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;团组号:{{ groupInfo.tourCode
                }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出访日期:{{ groupInfo.visitStartDate + '~' + groupInfo.visitEndDate
                }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ groupInfo.visitDays + '天/' + groupInfo.visitPNumber + '人' }}
            </div>
            <div class="VisitSchedule-content-table">
                <div v-for="(item, index) in tablearr" :key="index" class="VisitSchedule-content-ul">
                    <div class="content-ul-title">{{ item.date }}</div>
                    <div v-for="(items, index) in item.chiList" :key="index" class="VisitSchedule-content-li">
                        <div class="VisitSchedule-content-time">
                            <el-time-picker is-range format='HH:mm' value-format='HH:mm' v-model="items.timeInterval"
                                :default-value="value1" range-separator="至" start-placeholder="开始时间"
                                end-placeholder="结束时间" placeholder="选择时间范围">
                            </el-time-picker>
                        </div>
                        <div class="VisitSchedule-content-remark">
                            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="items.details">
                            </el-input>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            diid: '',
            groupList: [],
            tablearr: [],
            userId: '',
            value1: ['', ''],
            textarea: '',
            ss: [0, 0],
            groupInfo: {},
            fullscreenLoading: false,
            blackCodeId: '',
            blackCodeList: [],
            fileTempList: [],
            fileIndex: 1,
        }
    },
    methods: {
        //报批行程初始化
        ApprovalJourneyInit() {
            this.groupInfo = {};
            this.tablearr = [];
            this.fullscreenLoading = true;
            this.blackCodeId = '';
            this.blackCodeList = [];

            var url = "/api/Groups/ApprovalJourneyInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    diid: that.diid == '' ? -1 : that.diid,
                    userId: that.userId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.groupList = res.data.data.groupList;
                    if (that.diid == '') {
                        that.diid = that.groupList[0].id;
                    }
                    that.tablearr = res.data.data.content;
                    for (let i = 0; i < that.tablearr.length; i++) {
                        for (let a = 0; a < that.tablearr[i].chiList.length; a++) {
                            if (that.tablearr[i].chiList[a].timeInterval.length == 1) {
                                that.tablearr[i].chiList[a].timeInterval = that.value1;
                            }
                        }
                    }
                    that.groupInfo = res.data.data.groupInfo;
                    that.fullscreenLoading = false;
                    that.blackCodeList = res.data.data.blackCodeList;
                    that.fileTempList = res.data.data.fileTempList;
                } else {
                    that.$message({
                        message: res.data.msg,
                        duration: 1000,
                        type: "error"
                    });
                    that.fullscreenLoading = false;
                }
            }).catch(function (error) {
                that.$message.error('请联系信息部！');
            });
        },
        //报批行程保存
        SaveApprovalJourney() {
            var url = "/api/Groups/SaveApprovalJourney"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    userId: that.userId,
                    arr: that.tablearr
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    that.ApprovalJourneyInit();
                } else {
                    that.$message({
                        message: res.data.msg,
                        duration: 1000,
                        type: "error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('请联系信息部！');
            });
        },
        //报批行程删除
        DeleteApprovalJourney() {
            var url = "/api/Groups/DeleteApprovalJourney"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    diid: that.diid,
                    userId: that.userId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    that.ApprovalJourneyInit();
                } else {
                    that.$message({
                        message: res.data.msg,
                        duration: 1000,
                        type: "error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('请联系信息部！');
            });
        },
        //报批行程导入机票信息
        CreateApprovalJourney() {

            if (!this.blackCodeId) {
                this.$message({
                    message: '请选择黑屏代码',
                    duration: 1000,
                    type: "error"
                });
                return;
            }

            var url = "/api/Groups/CreateApprovalJourney"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    diid: that.diid,
                    userid: that.userId,
                    BlackCodeId: that.blackCodeId
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    that.tablearr = res.data.data;
                    for (let i = 0; i < that.tablearr.length; i++) {
                        for (let a = 0; a < that.tablearr[i].chiList.length; a++) {
                            if (that.tablearr[i].chiList[a].timeInterval.length == 1) {
                                that.tablearr[i].chiList[a].timeInterval = that.value1;
                            }
                        }
                    }
                } else {
                    that.$message({
                        message: res.data.msg,
                        duration: 1000,
                        type: "error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('请联系信息部！');
            });
        },
        //报批行程导出
        ExportApprovalJourneyWord() {

            if (!this.fileIndex) {
                this.$message({
                    message: '请选择文件类型',
                    duration: 1000,
                    type: "error"
                });
                return;
            }

            var url = "/api/Groups/ExportApprovalJourneyWord"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data: {
                    diid: that.diid,
                    fileIndex: this.fileIndex
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: "导出成功！",
                        type: 'success'
                    });
                    window.open(res.data.data)
                } else {
                    that.$message({
                        message: res.data.msg,
                        duration: 1000,
                        type: "error"
                    });
                }
            }).catch(function (error) {
                that.$message.error('请联系信息部！');
            });
        },
    },
    mounted() {
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.ApprovalJourneyInit();
    }
}
</script>
<style>
.VisitSchedule-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
}

.VisitSchedule-search-head {
    display: flex;
    justify-content: space-between;
}

.VisitSchedule-search-head .el-select {
    width: 100%;
}

.VisitSchedule-content-table {
    padding: 10px 0;
    border: 1px solid #DCDFE6;
}

.VisitSchedule-content-li {
    border-top: 1px solid #DCDFE6;
    display: flex;
    align-items: center;
}

.VisitSchedule-content-time {
    padding: 10px;
    width: 25%;
}

.VisitSchedule-content-remark {
    width: 75%;
    padding: 10px;
}

.VisitSchedule-content-time .el-range-editor.el-input__inner {
    width: 100%;
}

.content-ul-title {
    padding: 10px;
}

.VisitSchedule-content-ul .VisitSchedule-content-li:last-child {
    border-bottom: 1px solid #DCDFE6;
}

.VisitSchedule-content-title {
    text-align: center;
    margin-bottom: 10px;
    color: #555;
    font-size: 17px;
    font-weight: 600;
}

.VisitSchedule-content-info {
    text-align: center;
    color: #555;
    font-size: 15px;
    margin-bottom: 20px;
}
</style>