From 64ac1a2621a0c2e0b47b38d05429b993b7b6e515 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=A3=E4=BA=9B=E8=8A=B1=E5=84=BF?= <1156921458@qq.com>
Date: Thu, 19 Jun 2025 02:49:21 +0800
Subject: [PATCH] ..

---
 .../theRapyRecuperation/signUp/index.html     | 419 +++++++++-
 .../theRapyRecuperation/signUp/lineSignUp.js  | 729 ++++++++++++++++++
 2 files changed, 1143 insertions(+), 5 deletions(-)
 create mode 100644 src/main/resources/views/platform/theRapyRecuperation/signUp/lineSignUp.js

diff --git a/src/main/resources/views/platform/theRapyRecuperation/signUp/index.html b/src/main/resources/views/platform/theRapyRecuperation/signUp/index.html
index 491e07a..36282d9 100644
--- a/src/main/resources/views/platform/theRapyRecuperation/signUp/index.html
+++ b/src/main/resources/views/platform/theRapyRecuperation/signUp/index.html
@@ -2,34 +2,396 @@
 layout("/layouts/platform.html"){
 #-->
 
+<style>
+    .therapy-page {
+        background: #ffffff;
+    }
+
+    .therapy-content {
+        position: relative;
+        padding: 10px 20px;
+    }
+
+    .category-nav {
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+        margin-bottom: 30px;
+        overflow: hidden;
+    }
+
+    .category-nav .category-list {
+        display: flex;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    .category-nav .category-item {
+        flex: 1;
+        text-align: center;
+        padding: 20px 0;
+        font-size: 16px;
+        color: #606266;
+        cursor: pointer;
+        transition: all 0.3s;
+        position: relative;
+    }
+
+    .category-nav .category-item:hover {
+        color: #1890ff;
+        background-color: #f5f7fa;
+    }
+
+    .category-nav .category-item.active {
+        color: #1890ff;
+        font-weight: 600;
+        background-color: #ecf5ff;
+    }
+
+    .category-nav .category-item.active::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 3px;
+        background: #1890ff;
+    }
+
+    .route-cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 20px;
+        margin-bottom: 20px;
+    }
+
+    .route-card {
+        border-radius: 8px;
+        overflow: hidden;
+        transition: all 0.3s;
+        background: white;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .route-card:hover {
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+    }
+
+    /* 卡片图片区域 */
+    .route-image {
+        height: 160px;
+        background-size: cover;
+        background-position: center;
+        position: relative;
+    }
+
+    .route-image::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
+    }
+
+    .route-image-title {
+        position: absolute;
+        bottom: 15px;
+        left: 15px;
+        right: 15px;
+        color: white;
+        font-size: 18px;
+        font-weight: 600;
+        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+        z-index: 2;
+    }
+
+    .route-header {
+        padding: 15px 15px 10px;
+        border-bottom: 1px solid #f0f0f0;
+    }
+
+    .route-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+        margin: 0 0 8px;
+        line-height: 1.4;
+    }
+
+    .route-date {
+        font-size: 13px;
+        color: #909399;
+        display: flex;
+        align-items: center;
+    }
+
+    .route-date i {
+        margin-right: 5px;
+    }
+
+    .route-body {
+        padding: 15px;
+        flex: 1;
+    }
+
+    .route-info-item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        font-size: 14px;
+    }
+
+    .route-info-label {
+        color: #909399;
+    }
+
+    .route-info-value {
+        color: #606266;
+        font-weight: 500;
+    }
+
+    .route-footer {
+        padding: 15px;
+        background: #f9f9f9;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .route-status {
+        font-size: 13px;
+    }
+
+    .route-signup-btn {
+        border-radius: 20px;
+        border: none;
+        color: white;
+        font-size: 13px;
+    }
+
+    .hotel-phone {
+        color: #1890ff;
+        display: flex;
+        align-items: center;
+    }
+
+    .hotel-phone i {
+        margin-right: 5px;
+    }
+
+    .badge {
+        display: inline-block;
+        padding: 3px 8px;
+        border-radius: 12px;
+        font-size: 12px;
+        line-height: 1;
+    }
+
+    .badge-primary {
+        background: rgba(24, 144, 255, 0.1);
+        color: #1890ff;
+    }
+
+    .empty-data {
+        padding: 60px 0;
+        text-align: center;
+    }
+
+    .empty-data i {
+        font-size: 60px;
+        color: #e0e0e0;
+        margin-bottom: 20px;
+    }
+
+    .empty-data p {
+        color: #909399;
+        font-size: 14px;
+    }
+</style>
+
 <div id="app" v-cloak>
     <guava>
+        <div class="therapy-page">
+            <div class="therapy-content">
+                <!-- 分类导航 -->
+                <div class="category-nav">
+                    <div class="category-list">
+                        <div
+                                v-for="item in categoryOptions"
+                                :key="item.value"
+                                class="category-item"
+                                :class="{active: pageForm.theRapyRecuperationType === item.value}"
+                                @click="switchCategory(item.value)">
+                            <i :class="getCategoryIcon(item.value)" style="margin-right: 8px;"></i>
+                            {{ item.label }}
+                        </div>
+                    </div>
+                </div>
 
+                <!-- 加载提示 -->
+                <div v-if="loading" style="text-align: center; padding: 40px 0;">
+                    <i class="el-icon-loading" style="font-size: 30px; color: #1890ff;"></i>
+                    <p style="margin-top: 10px; color: #909399;">正在加载数据...</p>
+                </div>
+
+                <!-- 无数据提示 -->
+                <div v-else-if="tableData.length === 0" class="empty-data">
+                    <i class="el-icon-warning-outline"></i>
+                    <p>暂无可报名的疗休养线路</p>
+                </div>
+
+                <!-- 卡片网格布局 - 省内/省外线路 -->
+                <div v-else-if="pageForm.theRapyRecuperationType !== '3'" class="route-cards">
+                    <div class="route-card" v-for="(item, index) in tableData" :key="index">
+                        <!-- 卡片图片区域 -->
+                        <div
+                                class="route-image"
+                                :style="item.fileId ? 'background-image: url(/file_server/fileStreamPreview?id=' + item.fileId + ')' : ''">
+                            <div class="route-image-title">{{ item.lineName }}</div>
+                        </div>
+
+                        <div class="route-header">
+                            <div class="route-date">
+                                <i class="el-icon-date"></i> {{ item.lotName }}
+                            </div>
+                        </div>
+                        <div class="route-body">
+                            <div class="route-info-item">
+                                <span class="route-info-label">组织机构</span>
+                                <span class="route-info-value">
+                                    <span class="badge badge-primary">
+                                        {{ item.signUpMode === 2 ? '校工会' : item.usUnionName }}
+                                    </span>
+                                </span>
+                            </div>
+                        </div>
+                        <div class="route-footer">
+                            <el-button
+                                    type="text"
+                                    size="small"
+                                    @click="viewDetails(item)">
+                                <i class="el-icon-view"></i> 查看详情
+                            </el-button>
+                            <el-button
+                                    class="route-signup-btn"
+                                    type="primary"
+                                    size="mini"
+                                    @click="handleSignUp(item)">
+                                立即报名
+                            </el-button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 卡片网格布局 - 定点疗休养 -->
+                <div v-else class="route-cards">
+                    <div class="route-card" v-for="(item, index) in tableData" :key="index">
+                        <!-- 卡片图片区域 -->
+                        <div
+                                class="route-image"
+                                :style="item.fileId ? 'background-image: url(/file_server/fileStreamPreview?id=' + item.fileId + ')' : ''">
+                            <div class="route-image-title">{{ item.baseName }}</div>
+                        </div>
+
+                        <!--                        <div class="route-header">-->
+                        <!--                            <div class="route-date">-->
+                        <!--                                <i class="el-icon-location"></i> {{ item.baseAddress || '暂无地址信息' }}-->
+                        <!--                            </div>-->
+                        <!--                        </div>-->
+                        <div class="route-body">
+                            <div class="route-info-item">
+                                <span class="route-info-label">联系人</span>
+                                <span class="route-info-value">{{ item.baseContactPerson }}</span>
+                            </div>
+                            <div class="route-info-item">
+                                <span class="route-info-label">联系方式</span>
+                                <span class="route-info-value hotel-phone">
+                                    <i class="el-icon-phone"></i>
+                                    {{ item.baseContactNumber }}
+                                </span>
+                            </div>
+                            <div class="route-info-item">
+                                <span class="route-info-label">已报名人数</span>
+                                <span class="route-info-value">
+                                    <span class="badge badge-primary">{{ item.signUpUserNum }}</span>
+                                </span>
+                            </div>
+                            <div class="route-info-item" v-if="item.baseRemark">
+                                <span class="route-info-label">酒店说明</span>
+                                <span class="route-info-value">{{ item.baseRemark }}</span>
+                            </div>
+                        </div>
+                        <div class="route-footer">
+                            <el-button
+                                    type="text"
+                                    size="small"
+                                    @click="viewDetails(item)">
+                                <i class="el-icon-view"></i> 查看详情
+                            </el-button>
+                            <el-button
+                                    class="route-signup-btn"
+                                    type="primary"
+                                    size="mini"
+                                    @click="handleSignUp(item)">
+                                立即报名
+                            </el-button>
+                        </div>
+                    </div>
+                </div>
+                <!--#include("/layouts/pagination.html"){}#-->
+
+            </div>
+        </div>
     </guava>
+
+    <line-sign-up ref="lineSignUpRef"></line-sign-up>
+
 </div>
 
 <script>
+    <!--#include('lineSignUp.js'){}#-->
+
     new Vue({
         el: '#app',
         mixins: [initTableMixins],
+        components: {
+            'line-sign-up': LineSignUp
+        },
         data() {
             return {
-                modifyConfig: {},
+                config: {},
                 categoryOptions: [],
+                tableData: [],
+                loading: false,
                 pageForm: {
-                    theRapyRecuperationType: 0,
+                    theRapyRecuperationType: '0', // 默认使用字符串类型
                     lineUnionType: 3,
                     unionId: "${@shiro.getPrincipalProperty('union').getId()}",
-                    year: null
+                    pageNumber: 1,
+                    pageSize: 20,
+                    totalCount: 0
                 },
             }
         },
         methods: {
+            // 获取数据
             pageData() {
-                $.post('/platform/theRapyRecuperation/line/enroll/pageData', this.pageForm).then(res => {
+                this.loading = true;
+                const params = {...this.pageForm};
+                params.theRapyRecuperationType = parseInt(params.theRapyRecuperationType);
+
+                $.post('/platform/theRapyRecuperation/line/enroll/pageData', params).then(res => {
+                    this.loading = false;
                     if (res.code === 0) {
                         this.tableData = res.data.list;
                         this.pageForm.totalCount = res.data.totalCount;
+                    } else {
+                        this.$message.error(res.msg || '获取数据失败');
                     }
                 })
             },
@@ -37,14 +399,61 @@ layout("/layouts/platform.html"){
             async getConfig() {
                 const res = await $.post('/platform/theRapyRecuperation/TheRapyConfig/findOne')
                 if (res.code === 0) {
-                    this.modifyConfig = res.data
+                    this.config = res.data
                 }
             },
             // 获取分类 （线路、旅行社）
             getCategory() {
                 getEnumOptions('TheRapyRecuperationType').then(res => {
+                    // 过滤并转换为字符串类型
                     this.categoryOptions = res.filter(item => item.value !== 2)
+                        .map(item => ({
+                            ...item,
+                            value: item.value.toString()
+                        }));
+
+                    console.log('分类选项:', this.categoryOptions);
                 })
+            },
+            // 获取分类图标
+            getCategoryIcon(value) {
+                const icons = {
+                    '0': 'el-icon-map-location',        // 省内线路
+                    '1': 'el-icon-location-information', // 省外线路
+                    '3': 'el-icon-house'                // 定点疗休养
+                };
+                return icons[value] || 'el-icon-location-outline';
+            },
+            // 切换分类
+            switchCategory(value) {
+                this.pageForm.theRapyRecuperationType = value;
+                this.pageForm.pageNumber = 1;
+                this.pageData();
+            },
+            // 查看详情
+            viewDetails(item) {
+
+            },
+            // 处理报名
+            async handleSignUp(row) {
+                const {code,data,msg} = await $.post('/platform/theRapyRecuperation/line/enroll/validSignUpInfo',{
+                    enroll: JSON.stringify({
+                        isNormal: true,
+                        takePartInLineId: row.usId,
+                        takePartInUnionId: row.takePartInUnionId,
+                    }),
+                })
+                if (code !== 0) {
+                    this.$message.error(msg);
+                    return;
+                }
+
+                if (["0", "1"].includes(this.pageForm.theRapyRecuperationType)) {
+                    // 线路
+                    this.$refs.lineSignUpRef.onOpen(row, this.pageForm, this.config);
+                } else if (this.pageForm.theRapyRecuperationType === 3) {
+                    // 定点疗休养
+                }
             }
         },
         created() {
diff --git a/src/main/resources/views/platform/theRapyRecuperation/signUp/lineSignUp.js b/src/main/resources/views/platform/theRapyRecuperation/signUp/lineSignUp.js
new file mode 100644
index 0000000..951717d
--- /dev/null
+++ b/src/main/resources/views/platform/theRapyRecuperation/signUp/lineSignUp.js
@@ -0,0 +1,729 @@
+const LineSignUp = {
+    template: /*language=HTML*/ `
+        <el-dialog title="报名" :visible.sync="visible" width="70%" :close-on-click-modal="false"
+                   top="50px"
+                   class="line-sign-up-dialog">
+            <div class="play-times-container">
+                <div v-if="playTimes.length > 0">
+                    <div class="section-title">请选择出行时间</div>
+                    <el-table :data="playTimes" highlight-current-row @current-change="handleCurrentChange"
+                              class="time-table" :row-class-name="tableRowClassName">
+                        <el-table-column
+                                label="序号"
+                                width="70"
+                                align="center">
+                            <template slot-scope="scope">
+                                <div class="sequence-number">{{ scope.$index + 1 }}</div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                                label="出行时间"
+                                prop="playStartTime"
+                                min-width="120">
+                            <template slot-scope="scope">
+                                {{ moment(scope.row.playStartTime).format('YYYY-MM-DD') }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                                label="报名截止时间"
+                                prop="signUpEndTime"
+                                min-width="150">
+                            <template slot-scope="scope">
+                                {{ moment(scope.row.signUpEndTime).format('YYYY-MM-DD HH:mm') }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                                label="报名限制人数"
+                                prop="maxApplyNum"
+                                width="120"
+                                align="center">
+                        </el-table-column>
+                        <el-table-column
+                                label="已报人数"
+                                min-width="150">
+                            <template slot-scope="scope">
+                                <template v-if="config.familyInfo == 2">
+                                    {{ (scope.row.signUpUserNum + scope.row.signUpUserFamilyNum) }}人
+                                    （家属{{ scope.row.signUpUserFamilyNum }}人）
+                                </template>
+                                <template v-else>
+                                    {{ (scope.row.signUpUserNum + scope.row.signUpUserFamilyNum) }}人
+                                    （家属{{ scope.row.familyNumber }}人）
+                                </template>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                                label="剩余名额"
+                                width="100"
+                                align="center">
+                            <template slot-scope="scope">
+                                {{ Math.max(0, scope.row.maxApplyNum - (scope.row.signUpUserNum +
+                                scope.row.signUpUserFamilyNum)) }}人
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                                label="状态"
+                                width="100"
+                                align="center">
+                            <template slot-scope="scope">
+                                <el-tag size="small" type="danger"
+                                        v-if="(scope.row.signUpUserNum + scope.row.signUpUserFamilyNum) >= scope.row.maxApplyNum">
+                                    已满
+                                </el-tag>
+                                <el-tag size="small" type="warning"
+                                        v-else-if="new Date(scope.row.signUpEndTime) < new Date()">
+                                    已截止
+                                </el-tag>
+                                <el-tag size="small" type="success" v-else>
+                                    可报名
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </div>
+                <div v-else class="no-times">
+                    <i class="el-icon-warning-outline"></i>
+                    <p>暂无可选出行时间</p>
+                </div>
+            </div>
+
+            <!-- 报名表单 -->
+            <div v-if="selectedTime" class="signup-form">
+                <div class="section-title">填写报名信息</div>
+                <el-form ref="signupFormRef" :model="signupForm" label-width="100px" :rules="rules">
+                    <!-- 人员基础信息 -->
+                    <div class="form-section">
+                        <div class="sub-section-title">人员基础信息</div>
+                        <el-form-item label="姓名" prop="mainName">
+                            <el-input v-model="signupForm.userName" placeholder="请输入姓名" readonly></el-input>
+                        </el-form-item>
+                        <el-form-item label="工号" prop="loginName">
+                            <el-input v-model="signupForm.loginName" placeholder="请输入工号" readonly></el-input>
+                        </el-form-item>
+                        <el-form-item label="身份证号" prop="idCard">
+                            <el-input v-model="signupForm.idCard" placeholder="请输入身份证号"></el-input>
+                        </el-form-item>
+                        <el-form-item label="手机号" prop="mobile">
+                            <el-input v-model="signupForm.mobile" placeholder="请输入手机号"></el-input>
+                        </el-form-item>
+                        <el-form-item label="所属工会" prop="unionName">
+                            <el-input v-model="signupForm.unionName" readonly></el-input>
+                        </el-form-item>
+                    </div>
+
+                    <!-- 随行人信息 -->
+                    <div class="form-section">
+                        <div class="sub-section-title">
+                            随行人信息
+                            <el-button type="text" size="small" @click="addAccompanyingPerson" icon="el-icon-plus"
+                                       v-if="config.familyInfo === 2">添加随行人
+                            </el-button>
+                        </div>
+
+                        <div v-if="config.familyInfo === 2" class="accompanying-person-container">
+                            <div v-for="(person, index) in signupForm.companionList" :key="index"
+                                 class="accompanying-person">
+                                <div class="person-header">
+                                    <span>随行人 {{index + 1}}</span>
+                                    <el-button type="text" size="small" @click="removeAccompanyingPerson(index)"
+                                               icon="el-icon-delete" class="remove-btn">移除
+                                    </el-button>
+                                </div>
+
+                                <el-form-item :label="'姓名'" :prop="'companionList.' + index + '.userName'"
+                                              :rules="rules.userName">
+                                    <el-input v-model="person.userName" placeholder="请输入姓名"></el-input>
+                                </el-form-item>
+
+                                <el-form-item :label="'身份证号'" :prop="'companionList.' + index + '.idCard'"
+                                              :rules="rules.idCard">
+                                    <el-input v-model="person.idCard" placeholder="请输入身份证号"
+                                              @blur="parseIdCard(index)"></el-input>
+                                </el-form-item>
+
+                                <el-row :gutter="20">
+                                    <el-col :span="12">
+                                        <el-form-item :label="'性别'" :prop="'companionList.' + index + '.sex'">
+                                            <el-input v-model="person.sex" placeholder="根据身份证号自动读取"
+                                                      disabled></el-input>
+                                        </el-form-item>
+                                    </el-col>
+                                    <el-col :span="12">
+                                        <el-form-item :label="'年龄'" :prop="'companionList.' + index + '.age'">
+                                            <el-input v-model.number="person.age" placeholder="根据身份证号自动读取"
+                                                      disabled></el-input>
+                                        </el-form-item>
+                                    </el-col>
+                                </el-row>
+
+                                <el-form-item label="身高" :prop="'companionList.' + index + '.height'"
+                                              v-if="person.age && person.age <= 12">
+                                    <el-input v-model.number="person.height" placeholder="请输入身高">
+                                        <template slot="append">cm</template>
+                                    </el-input>
+                                </el-form-item>
+
+                                <el-form-item :label="'手机号'" :prop="'companionList.' + index + '.mobile'"
+                                              :rules="rules.mobile">
+                                    <el-input v-model="person.mobile" placeholder="请输入手机号"></el-input>
+                                </el-form-item>
+
+                                <el-divider v-if="index < signupForm.companionList.length - 1"></el-divider>
+                            </div>
+
+                            <div v-if="signupForm.companionList.length === 0" class="empty-accompanying">
+                                <p>暂无随行人信息，请点击上方"添加随行人"按钮添加</p>
+                                <p>限填写1岁以上70岁以下随行人</p>
+                            </div>
+                        </div>
+                        <template v-else>
+                            <el-form-item label="家属人数" prop="familyNumber"
+                                          :rules="[{ required: true, message: '请输入家属人数', trigger: 'blur' }]">
+                                <el-input v-model.number="signupForm.familyNumber"
+                                          placeholder="请输入家属人数"></el-input>
+                            </el-form-item>
+                        </template>
+                    </div>
+
+                    <!-- 房间信息 -->
+                    <div class="form-section" v-if="config.bedInfo">
+                        <div class="sub-section-title">房间信息</div>
+
+                        <el-form-item label="房间数量" prop="roomCount"
+                                      :rules="[{ required: true, message: '请选择房间数量', trigger: 'change'}]">
+                            <el-select v-model="signupForm.roomCount" placeholder="请选择房间数量">
+                                <el-option v-for="room in roomColumns" :key="room.value" :label="room.label"
+                                           :value="room.value"></el-option>
+                            </el-select>
+                        </el-form-item>
+
+                        <el-form-item label="用房备注" prop="roomRemark" v-if="signupForm.roomCount"
+                                      :rules="[{ required: true, message: '请选择用房备注', trigger: 'change'}]">
+                            <el-select v-model="signupForm.roomRemark" placeholder="请选择用房备注">
+                                <el-option v-for="room in roomRemarkColumns" :key="room.value" :label="room.label"
+                                           :value="room.value"></el-option>
+                            </el-select>
+                        </el-form-item>
+
+                        <el-form-item label="拼房人" prop="roommate" v-if="signupForm.roomRemark === 2">
+                            <el-input v-model="signupForm.roommate" placeholder="请输入拼房人"></el-input>
+                        </el-form-item>
+
+                        <el-form-item label="其它备注" prop="otherRemark">
+                            <el-input type="textarea" v-model="signupForm.otherRemark"
+                                      placeholder="如有需要请填写其它备注信息"></el-input>
+                        </el-form-item>
+                    </div>
+
+                    <!-- 其他信息 -->
+                    <div class="form-section">
+                        <div class="sub-section-title">其他信息</div>
+
+                        <el-form-item label="第二意向线路" prop="intentionLineId"
+                                      :rules="[{ required: true, message: '请选择第二意向线路', trigger: 'change'}]">
+                            <el-select v-model="signupForm.intentionLineId" placeholder="请选择第二意向线路">
+                                <el-option v-for="item in intentionLineColumns" :key="item.value" :label="item.label"
+                                           :value="item.value"></el-option>
+                            </el-select>
+                        </el-form-item>
+
+                        <el-form-item label="家属人数" prop="carryFamilyNum"
+                                      :rules="[{ required: true, message: '请选择是否携带家属', trigger: 'change' }]">
+                            <el-select v-model="signupForm.carryFamilyNum" placeholder="请选择是否携带家属">
+                                <el-option label="0" :value="0"></el-option>
+                                <el-option label="1" :value="1"></el-option>
+                                <el-option label="2" :value="2"></el-option>
+                                <el-option label="3" :value="3"></el-option>
+                            </el-select>
+                            :
+                        </el-form-item>
+                    </div>
+
+                    <!-- 安全告知书 -->
+                    <div style="display: flex">
+                        <el-checkbox size="medium" style="width: 70%;color: #F56C6C;white-space: nowrap"
+                                     @change="readChangeSafe" v-model="hasReadSafe">
+                            我已查看
+                            <span @click="openReadSafe" style="color: #0e5996; text-decoration: underline">
+                                    《安全告知书》
+                                    </span>
+                            <el-tag @click="openReadSafe" size="mini" effect="dark">查看</el-tag>
+                        </el-checkbox>
+                    </div>
+
+                </el-form>
+            </div>
+
+            <template #footer>
+                <el-button @click="visible = false">取消</el-button>
+                <el-button type="primary" @click="submitSignup" :disabled="!selectedTime">确定</el-button>
+            </template>
+
+
+            <el-dialog title="安全告知书" :visible.sync="readVisibleSafe" :close-on-click-modal="false"
+                       :close-on-press-escape="false" append-to-body>
+                <iframe
+                        :src="readSafeUrl + '#toolbar=0'"
+                        width="100%"
+                        height="550px"
+                        frameborder="0"
+                ></iframe>
+                <el-row justify="end" type="flex" class="mt10">
+                    <el-button @click="onReadSafe" type="primary">我已阅读确认</el-button>
+                </el-row>
+            </el-dialog>
+
+        </el-dialog>
+    `,
+    data() {
+        return {
+            visible: false,
+            line: {},
+            pageForm: {},
+            config: {},
+            playTimes: [],
+            selectedTime: null,
+            signupForm: {
+                userName: "${@shiro.getPrincipalProperty('username')}",
+                loginName: "${@shiro.getPrincipalProperty('loginname')}",
+                unionName: "${@shiro.getPrincipalProperty('union').getUnionname()}",
+                idCard: "${@shiro.getPrincipalProperty('idcard')}",
+                mobile: "${@shiro.getPrincipalProperty('mobile')}",
+                lineName: '',
+                takePartInLineId: '',
+                takePartInUnionId: '',
+                companionList: [],
+                bedInfo: {},
+                roomCount: null,
+            },
+
+            rules: {
+                mainName: [
+                    {required: true, message: '请输入姓名', trigger: 'blur'},
+                    {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
+                ],
+                mainIdCard: [
+                    {required: true, message: '请输入身份证号', trigger: 'blur'},
+                    {
+                        pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
+                        message: '请输入正确的身份证号',
+                        trigger: 'blur'
+                    }
+                ],
+                mainGender: [
+                    {required: true, message: '请选择性别', trigger: 'change'}
+                ],
+                mainPhone: [
+                    {required: true, message: '请输入手机号', trigger: 'blur'},
+                    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
+                ],
+                accompaningName: [
+                    {required: true, message: '请输入姓名', trigger: 'blur'},
+                    {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
+                ],
+                accompanyingIdCard: [
+                    {required: true, message: '请输入身份证号', trigger: 'blur'},
+                    {
+                        pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
+                        message: '请输入正确的身份证号',
+                        trigger: 'blur'
+                    }
+                ],
+                accompanyingPhone: [
+                    {required: true, message: '请输入手机号', trigger: 'blur'},
+                    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
+                ],
+                accompaningGender: [
+                    {required: true, message: '请选择性别', trigger: 'change'}
+                ]
+            },
+
+            basicRoomColumns: [
+                {label: '0.5间(一张床)', value: 0.5},
+                {label: '1间(两张床)', value: 1},
+                {label: '1.5间(三张床)', value: 1.5},
+                {label: '2间(四张床)', value: 2},
+            ],
+            roomColumns: [],
+            basicRoomRemarkColumns: [
+                {label: '携带家属，1间房', value: 1},
+                {label: '已与其他老师自由组合共住1间房', value: 2},
+                {label: '1间房，额外支付单房差', value: 3},
+                {label: '正常报名', value: 4},
+                {label: '随机拼房', value: 5},
+                {label: '2间房，额外支付单房差', value: 6},
+            ],
+            roomRemarkColumns: [],
+
+            // 第二意向线路
+            intentionLineColumns: [],
+            carryFamilyColumns: [0, 1, 2, 3],
+
+            // 安全告知书相关
+            readVisibleSafe: false,
+            clickReadSafe: false,
+            hasReadSafe: false,
+            readSafeUrl: '',
+
+            // 报名id
+            enrollId: null
+
+        }
+    },
+
+    watch: {
+        'signupForm.companionList': {
+            handler(newVal) {
+                const {companionList = []} = this.signupForm;
+                const companionCount = companionList.length;
+                const bedCount = 0.5 + (companionCount * 0.5);
+                const bedCountStrategies = {
+                    0.5: () => this.basicRoomColumns.filter(o => o.value <= 1),
+                    1: () => this.basicRoomColumns.filter(o => o.value === 1),
+                    1.5: () => this.basicRoomColumns.filter(o => [1, 2].includes(o.value)),
+                    2: () => this.basicRoomColumns.filter(o => o.value === 2)
+                };
+                this.roomColumns = bedCountStrategies[bedCount]?.() || [];
+                this.signupForm.carryFamilyNum = companionCount
+            },
+            deep: true,
+            immediate: true
+        },
+        'signupForm.roomCount'(oldVal, newVal) {
+            if (newVal && oldVal !== newVal) {
+                this.$set(this.signupForm, 'roomRemark', '')
+            }
+            this.updateRoomRemarkColumns()
+        }
+    },
+
+    methods: {
+        async onOpen(row, pageForm, config, enrollId = null) {
+            this.visible = true;
+            this.line = row;
+            this.pageForm = pageForm;
+            this.config = config;
+            this.selectedTime = null;
+            this.enrollId = enrollId;
+            this.loadSecondChoiceOptions();
+            await this.getPlayTimes()
+            if (this.enrollId) {
+                await this.getEnrollInfo()
+            }
+
+        },
+
+        // 获取报名信息
+        async getEnrollInfo() {
+            $.post('/platform/theRapyRecuperation/line/enroll/findSignUpInfoById', {id: this.enrollId}).then(res => {
+                if (res.code === 0) {
+                    this.signupForm = res.data
+                } else {
+                    this.$message.error(res.msg)
+                }
+            })
+        },
+
+        // 获取出行时间
+        async getPlayTimes() {
+            const {code, data, msg} = await $.post('/platform/theRapyRecuperation/line/enroll/getSelectLineById',
+                {
+                    lineId: this.line.lineId,
+                    unionId: this.pageForm.unionId,
+                    theRapyRecuperationType: this.pageForm.theRapyRecuperationType,
+                    lineUnionType: this.pageForm.lineUnionType,
+                }
+            )
+            if (code === 0) {
+                this.playTimes = data
+            }
+        },
+
+        // 选择出行时间
+        handleCurrentChange(row) {
+            if (!row) return;
+
+            if ((row.signUpUserNum + row.signUpUserFamilyNum) >= row.maxApplyNum) {
+                this.$message.warning('报名人数已满')
+                return
+            }
+
+            if (new Date(row.signUpEndTime) < new Date()) {
+                this.$message.warning('报名已截止')
+                return
+            }
+
+            this.selectedTime = row;
+        },
+
+        // 表格行样式
+        tableRowClassName({row, rowIndex}) {
+            if (this.selectedTime && row.usId === this.selectedTime.usId) {
+                return 'selected-row';
+            }
+
+            // 人数已满的行显示灰色
+            if ((row.signUpUserNum + row.signUpUserFamilyNum) >= row.maxApplyNum) {
+                return 'full-row';
+            }
+
+            // 已截止的行显示灰色
+            if (new Date(row.signUpEndTime) < new Date()) {
+                return 'expired-row';
+            }
+
+            return '';
+        },
+
+        // 添加随行人
+        addAccompanyingPerson() {
+            if (this.signupForm.companionList.length === 3) {
+                this.$message.warning('最多添加3个随行人')
+                return
+            }
+            this.signupForm.companionList.push({});
+            this.$set(this.signupForm, 'roomCount', '')
+            this.$set(this.signupForm, 'roomRemark', '')
+        },
+
+        // 移除随行人
+        removeAccompanyingPerson(index) {
+            this.signupForm.companionList.splice(index, 1);
+            this.$set(this.signupForm, 'roomCount', '')
+            this.$set(this.signupForm, 'roomRemark', '')
+        },
+
+        // 根据身份证解析年龄和性别
+        parseIdCard(index) {
+            let idCard = this.signupForm.companionList[index].idCard;
+            if (!idCard || idCard.length < 15) return;
+
+            // 解析性别 (第17位，奇数为男，偶数为女)
+            if (idCard.length >= 17) {
+                const genderBit = parseInt(idCard.substr(16, 1));
+                this.signupForm.companionList[index].gender = genderBit % 2 === 1 ? 1 : 2; // 1-男, 2-女
+            }
+
+            // 解析年龄
+            const birthYear = idCard.length === 18 ? idCard.substr(6, 4) : '19' + idCard.substr(6, 2);
+            const birthMonth = idCard.length === 18 ? idCard.substr(10, 2) : idCard.substr(8, 2);
+            const birthDay = idCard.length === 18 ? idCard.substr(12, 2) : idCard.substr(10, 2);
+
+            const birthDate = new Date(birthYear + '-' + birthMonth + '-' + birthDay)
+            const today = new Date();
+            let age = today.getFullYear() - birthDate.getFullYear();
+
+            if (today.getMonth() < birthDate.getMonth() ||
+                (today.getMonth() === birthDate.getMonth() && today.getDate() < birthDate.getDate())) {
+                age--;
+            }
+
+            this.signupForm.companionList[index].age = age;
+        },
+
+        // 根据房间数量更新用房备注
+        updateRoomRemarkColumns() {
+            const {roomCount, companionList = []} = this.signupForm;
+            const companionCount = companionList.length;
+
+            const roomCountStrategies = {
+                0.5: () => [2, 5],
+                1: () => {
+                    if (companionCount === 0) return [3];
+                    if (companionCount === 1) return [4];
+                    return [1];
+                },
+                1.5: () => [1, 3],
+                2: () => companionCount < 3 ? [6] : [4]
+            };
+
+            const matchedValues = roomCountStrategies[roomCount]?.();
+            this.roomRemarkColumns = matchedValues !== undefined
+                ? this.basicRoomRemarkColumns.filter(o => matchedValues.includes(o.value))
+                : [...this.basicRoomRemarkColumns]; // 默认处理：恢复基础列
+
+            // 如果最后的roomRemarkColumns的length只有1，直接默认第一个元素显示
+            if (this.roomRemarkColumns.length === 1) {
+                this.$set(this.signupForm, 'roomRemark', this.roomRemarkColumns[0].value)
+            }
+        },
+
+        // 加载第二意向线路选项
+        loadSecondChoiceOptions() {
+            $.post('/platform/mobile/theRapyRecuperation/getOpenLineList', {id: this.line?.usId}).then(res => {
+                if (res.code === 0) {
+                    this.intentionLineColumns = res.data
+                }
+            })
+
+        },
+
+        // 展示安全告知书
+        async openReadSafe() {
+            let pdfStreamUrl = encodeURIComponent(CREATE_PREVIEW_URL(this.config.files[0].id)) //将路径转码
+            this.readSafeUrl = '/assets/platform/plugins/pdfJs/web/viewer.html?file=' + pdfStreamUrl
+            this.readVisibleSafe = true
+        },
+
+        // 确认阅读安全告知书
+        onReadSafe() {
+            this.clickReadSafe = true
+            this.hasReadSafe = true
+            this.readVisibleSafe = false
+        },
+
+        // 阅读安全告知书时，点击取消
+        readChangeSafe() {
+            if (this.clickReadSafe === false) {
+                // this.$message.error('请先阅读《安全告知书》')
+                this.hasReadSafe = false
+            } else {
+                this.hasReadSafe = true
+            }
+        },
+
+        // 提交报名
+        async submitSignup() {
+            this.$refs.signupFormRef.validate(valid => {
+                if (valid) {
+                    this.$confirm("您确定要提交吗？", "提示", {type: "warning"})
+                        .then(() => {
+                            $.post('/platform/theRapyRecuperation/line/enroll/doSignUpForLine', {enroll: JSON.stringify(this.signupForm)}).then(res => {
+                                if (res.code === 0) {
+                                    this.$message.success(res.msg)
+                                } else {
+                                    this.$message.error(res.msg)
+                                }
+                            })
+                        })
+                }
+            })
+        },
+
+    },
+    style: /*language=CSS*/ `
+        .line-sign-up-dialog .el-dialog__body {
+            padding: 0 20px 20px 20px;
+        }
+
+        .play-times-container {
+            margin-bottom: 30px;
+        }
+
+        .section-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #303133;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #EBEEF5;
+        }
+
+        .sub-section-title {
+            font-size: 16px;
+            font-weight: 500;
+            color: #303133;
+            margin-bottom: 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .form-section {
+            margin-bottom: 30px;
+            padding: 20px;
+            background-color: #f9f9f9;
+            border-radius: 5px;
+        }
+
+        .time-table {
+            width: 100%;
+            margin-bottom: 20px;
+        }
+
+        .time-table .selected-row {
+            background-color: #ecf5ff;
+        }
+
+        .time-table .full-row td {
+            color: #909399;
+            background-color: #f8f8f8;
+        }
+
+        .time-table .expired-row td {
+            color: #909399;
+            background-color: #f8f8f8;
+        }
+
+        .sequence-number {
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            border-radius: 50%;
+            background-color: #409EFF;
+            color: white;
+            font-weight: bold;
+            margin: 0 auto;
+        }
+
+        .full-row .sequence-number,
+        .expired-row .sequence-number {
+            background-color: #909399;
+        }
+
+        .no-times {
+            text-align: center;
+            color: #909399;
+            padding: 40px 0;
+            background: #f8f8f8;
+            border-radius: 8px;
+        }
+
+        .no-times i {
+            font-size: 40px;
+            margin-bottom: 15px;
+            color: #DCDFE6;
+        }
+
+        .signup-form {
+            margin-top: 30px;
+            padding-top: 20px;
+            border-top: 1px solid #EBEEF5;
+        }
+
+        .selected-time {
+            font-weight: 500;
+            color: #409EFF;
+        }
+
+        .accompanying-person-container {
+            /*display: flex;*/
+            /*column-gap: 20px;*/
+        }
+
+        .accompanying-person {
+            position: relative;
+            margin-bottom: 15px;
+        }
+
+        .person-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            font-weight: 500;
+        }
+
+        .remove-btn {
+            color: #F56C6C;
+        }
+
+        .empty-accompanying {
+            text-align: center;
+            padding: 20px;
+            color: #909399;
+            background-color: #f4f4f5;
+            border-radius: 4px;
+        }
+    `
+};