248 lines
8.4 KiB
Vue
248 lines
8.4 KiB
Vue
<template>
|
||
<div class="therapy-line-info">
|
||
<div class="line-info-section">
|
||
<div class="line-info-section-header">
|
||
<h3 class="line-info-section-title">
|
||
线路信息
|
||
</h3>
|
||
</div>
|
||
<dl class="line-info-fields">
|
||
<div class="line-info-field"><dt>年度</dt><dd>{{ viewData.year }}</dd></div>
|
||
<div class="line-info-field"><dt>编号</dt><dd>{{ viewData.serialNumber }}</dd></div>
|
||
<div class="line-info-field"><dt>线路名称</dt><dd>{{ viewData.lineName }}</dd></div>
|
||
<div class="line-info-field"><dt>区域性质</dt><dd>{{ viewData.regionalNature }}</dd></div>
|
||
<!-- <el-descriptions-item label="最少参与教工">{{ viewData.minimumGroupSize }}</el-descriptions-item>-->
|
||
<!-- （校工会创建AND自由模式） OR （分工会创建） -->
|
||
<!-- <template v-if="(viewData.createMode === 2 && viewData.signUpMode === 2 ) || viewData.createMode === 1">-->
|
||
|
||
<!-- <el-descriptions-item label="报名开始时间">{{ viewData.signUpStartTime }}</el-descriptions-item>
|
||
<el-descriptions-item label="报名结束时间">{{ viewData.signUpEndTime }}</el-descriptions-item>
|
||
<el-descriptions-item :span="2" label="变更截至时间">{{ viewData.changeEndTime }}</el-descriptions-item>
|
||
<el-descriptions-item label="出行开始时间">{{ viewData.playStartTime }}</el-descriptions-item>
|
||
<el-descriptions-item label="出行结束时间">{{ viewData.playEndTime }}</el-descriptions-item>-->
|
||
|
||
<!-- <el-descriptions-item label="交通工具">{{ viewData.trafficTools }}</el-descriptions-item>-->
|
||
<!-- <el-descriptions-item label="预计费用（元）">{{ viewData.estimatedCost }}</el-descriptions-item>-->
|
||
<!-- <el-descriptions-item label="预计人数（含家属）">{{ viewData.estimatedFamilyNumbers }}</el-descriptions-item>-->
|
||
<!-- <el-descriptions-item label=""></el-descriptions-item>-->
|
||
</dl>
|
||
</div>
|
||
|
||
<div class="line-info-section" v-if="showTravelTimePeriod">
|
||
<div class="line-info-section-header">
|
||
<h3 class="line-info-section-title">
|
||
出行时间段
|
||
</h3>
|
||
</div>
|
||
<el-table :data="times" border>
|
||
<el-table-column label="报名开始时间" prop="signUpStartTime" width="160"></el-table-column>
|
||
<el-table-column label="报名结束时间" prop="signUpEndTime" width="160"></el-table-column>
|
||
<el-table-column label="变更截至时间" prop="changeEndTime" width="160"></el-table-column>
|
||
<el-table-column label="出行开始时间" prop="playStartTime" width="160"></el-table-column>
|
||
<el-table-column label="出行结束时间" prop="playEndTime" width="160"></el-table-column>
|
||
<el-table-column label="旅行社" prop="travelAgencyName" width="150"></el-table-column>
|
||
<el-table-column label="联系人" prop="contact" width="100"></el-table-column>
|
||
<el-table-column label="联系电话" prop="contactPhone" width="120"></el-table-column>
|
||
<el-table-column label="负责人" prop="principal" width="100"></el-table-column>
|
||
<el-table-column label="联系方式" prop="principalContact" width="120"></el-table-column>
|
||
<el-table-column label="交通工具" prop="trafficTools" width="100"></el-table-column>
|
||
<el-table-column label="预计费用（元/人次）" prop="estimatedCost" width="140"></el-table-column>
|
||
<el-table-column label="最少成团人数(包括家属)" prop="estimatedFamilyNumbers" width="160"></el-table-column>
|
||
<el-table-column label="最多人数" prop="maxPeopleNumber" width="100"></el-table-column>
|
||
<el-table-column label="是否开启" width="80">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.enable ? '是' : '否' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="调剂报名截止时间" prop="adjustSignUpEndTime" width="160"></el-table-column>
|
||
</el-table>
|
||
|
||
</div>
|
||
|
||
<!--
|
||
<div class="panel panel-default mt20" style="border: none">
|
||
<div class="panel-heading" style="background: #fafafa;border:1px solid #ebeef5;border-bottom: none">
|
||
<h3 class="panel-title">
|
||
旅行社信息
|
||
</h3>
|
||
</div>
|
||
<el-descriptions :column="2" border class="viewTable">
|
||
<el-descriptions-item :span="2" label="旅行社名称">
|
||
旅行社表单已隐藏，查看页同步隐藏旅行社信息。
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
-->
|
||
<div class="line-info-section">
|
||
<div class="line-info-section-header">
|
||
<h3 class="line-info-section-title">
|
||
线路内容
|
||
</h3>
|
||
</div>
|
||
<div class="line-info-content">
|
||
<div v-html="viewData.content" v-if="viewData.content"></div>
|
||
<div class="line-info-empty" v-else>暂无线路内容</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
module.exports = {
|
||
name: "LineInfo",
|
||
data() {
|
||
return {
|
||
viewData: {
|
||
travelAgency:{}
|
||
},
|
||
//多个出行的时间段
|
||
times: [],
|
||
//分工会选择校工会的线路自己设置的时间信息等等。。。
|
||
unionSelectLineData: {},
|
||
//是否只看基本信息 因为出行时间针对每个分工会都不一样
|
||
showTravelTimePeriod: false
|
||
}
|
||
},
|
||
methods: {
|
||
openView(lineId, usUnionId, mode, year) {
|
||
this.findOne(lineId, usUnionId, mode, year)
|
||
},
|
||
async findOne(id, unionId, mode, year) {
|
||
const resp = await $.get('/platform/inclusiveTherapyV3/line/selectLineInfoById/' + id)
|
||
if (resp.code === 0) {
|
||
this.viewData = resp.data
|
||
//校工会创建 分工会选择 所以每个分工会的活动时间会不一样
|
||
if (unionId) {
|
||
this.showTravelTimePeriod = true
|
||
await this.findUnionSelectLineData(id, unionId, mode, year)
|
||
} else {
|
||
this.showTravelTimePeriod = false
|
||
}
|
||
}
|
||
},
|
||
async findUnionSelectLineData(lineId, unionId, mode, year) {
|
||
const resp = await $.post('/platform/inclusiveTherapyV3/lineFghSelect/selectLineInfo', {
|
||
lineId: lineId,
|
||
unionId: unionId,
|
||
mode: mode,
|
||
year: year
|
||
})
|
||
if (resp.code === 0 && resp.data) {
|
||
this.times = resp.data
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.therapy-line-info {
|
||
color: #303133;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.therapy-line-info .line-info-section {
|
||
margin-bottom: 24px;
|
||
overflow: hidden;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
}
|
||
|
||
.therapy-line-info .line-info-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.therapy-line-info .line-info-section-header {
|
||
padding: 14px 20px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
background: #fafafa;
|
||
}
|
||
|
||
.therapy-line-info .line-info-section-title {
|
||
margin: 0;
|
||
padding-left: 10px;
|
||
border-left: 3px solid var(--color-primary, #409eff);
|
||
color: #303133;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
line-height: 22px;
|
||
}
|
||
|
||
.therapy-line-info .line-info-fields {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
margin: 0;
|
||
}
|
||
|
||
.therapy-line-info .line-info-field {
|
||
display: grid;
|
||
grid-template-columns: 120px minmax(0, 1fr);
|
||
min-width: 0;
|
||
}
|
||
|
||
.therapy-line-info .line-info-field:nth-child(n + 3) {
|
||
border-top: 1px solid #ebeef5;
|
||
}
|
||
|
||
.therapy-line-info .line-info-field:nth-child(2n) {
|
||
border-left: 1px solid #ebeef5;
|
||
}
|
||
|
||
.therapy-line-info .line-info-field dt,
|
||
.therapy-line-info .line-info-field dd {
|
||
margin: 0;
|
||
padding: 14px 16px;
|
||
line-height: 24px;
|
||
text-align: left;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.therapy-line-info .line-info-field dt {
|
||
border-right: 1px solid #ebeef5;
|
||
background: #fafafa;
|
||
color: #606266;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.therapy-line-info .line-info-content {
|
||
padding: 20px 24px;
|
||
color: #303133;
|
||
line-height: 1.9;
|
||
overflow-wrap: anywhere;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.therapy-line-info .line-info-content p {
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
.therapy-line-info .line-info-content img,
|
||
.therapy-line-info .line-info-content video {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.therapy-line-info .line-info-empty {
|
||
padding: 12px 0;
|
||
color: #909399;
|
||
text-align: center;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.therapy-line-info .line-info-fields {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
}
|
||
|
||
.therapy-line-info .line-info-field + .line-info-field {
|
||
border-top: 1px solid #ebeef5;
|
||
border-left: 0;
|
||
}
|
||
|
||
.therapy-line-info .line-info-content {
|
||
padding: 16px;
|
||
}
|
||
}
|
||
</style>
|