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

<template>
    <div class="VisitSchedule-all">
        <div class="VisitSchedule-search-head">
            <el-form ref="form" label-width="75px">
                <el-form-item style="width: 340px;" label="团组名称:">
                    <el-select filterable v-model="companyname" placeholder="请选择团组名称">
                        <el-option v-for="(item,index) in companynamearr" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div>
                <el-button size="small" type="primary">删除</el-button>
                <el-button size="small" type="primary">导入机票信息</el-button>
                <el-button size="small" type="primary">导出word</el-button>
            </div>
        </div>
        <div class="VisitSchedule-content">
            <div class="VisitSchedule-content-title">出访行程</div>
            <div class="VisitSchedule-content-table">
                <div class="VisitSchedule-content-ul">
                    <div class="content-ul-title">6月26日(星期三)第一天</div>
                    <div class="VisitSchedule-content-li">
                        <div class="VisitSchedule-content-time">
                            <el-time-picker
                                is-range
                                v-model="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="textarea">
                            </el-input>
                        </div>
                    </div>
                    <div class="VisitSchedule-content-li">
                        <div class="VisitSchedule-content-time">
                            <el-time-picker
                                is-range
                                v-model="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="textarea">
                            </el-input>
                        </div>
                    </div>
                </div>
                <div class="VisitSchedule-content-ul">
                    <div class="content-ul-title">6月26日(星期三)第一天</div>
                    <div class="VisitSchedule-content-li">
                        <div class="VisitSchedule-content-time">
                            <el-time-picker
                                is-range
                                v-model="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="textarea">
                            </el-input>
                        </div>
                    </div>
                    <div class="VisitSchedule-content-li">
                        <div class="VisitSchedule-content-time">
                            <el-time-picker
                                is-range
                                v-model="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="textarea">
                            </el-input>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            companyname:'',
            companynamearr:[],
            value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
            textarea:'',
        }
    }
}
</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;
    align-items: center;
}
.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;
}
</style>