Xurh
/
ss_dc_wechat_mini_program_h5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>新增请假</title>
    <script src="/js/mp_base/base.js"></script>

    <style>
        [v-cloak] {
            display: none !important;
        }

        #app {
            background: #f5f5f5;
            min-height: 100vh;
            /* padding: 8px; */
            box-sizing: border-box;

        }


        .table th {
            
            width: 140px;
            max-width: 170px;


        }

        .table td {
            position: relative;
        }

        .reason-input {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <!-- 新增请假发起页面 by xu 2026-02-28 -->
    <div class="form-wrap">
        <table class="table">
            <tr>
                <th>请假类别</th>
                <td>
                    <!-- 功能说明：下拉选项改为组件内部按 cb/url 拉取（对齐PC ss-objp），页面不再手写加载方法 by xu 2026-02-28 -->
                    <ss-select
                        v-model="formData.rclbm"
                        cb="xyqjlb"
                        :auto-select-first="true"
                        placeholder="请选择"
                    >
                    </ss-select>
                </td>
            </tr>
            <tr>
                <th>学员</th>
                <td>
                    <ss-select
                        v-model="formData.fzryid"
                        cb="xyByJzBySess"
                        :auto-select-first="true"
                        placeholder="请选择"
                    >
                    </ss-select>
                </td>
            </tr>
            <tr>
                <th>请假开始时间</th>
                <td>
                    <ss-datetime-picker
                        v-model="formData.kssj"
                        mode="datetime"
                        placeholder="YYYY-MM-DD HH:mm"
                        @change="onStartTimeChange"
                    >
                    </ss-datetime-picker>
                </td>
            </tr>
            <tr>
                <th>请假结束时间</th>
                <td>
                    <ss-datetime-picker
                        v-model="formData.jssj"
                        mode="datetime"
                        :min-date="endMinDate"
                        placeholder="YYYY-MM-DD HH:mm"
                    >
                    </ss-datetime-picker>
                </td>
            </tr>
            <tr>
                <th>事由</th>
                <td>
                    <ss-input
                        v-model="formData.ms"
                        name="ms"
                        class="reason-input"
                        placeholder="请录入"
                    />
                </td>
            </tr>
        </table>
    </div>

</div>

<script>
    window.SS.ready(function () {
        window.SS.dom.initializeFormApp({
            el: '#app',
            data() {
                return {
                    // 初始化请假发起数据 by xu 2026-02-28
                    pageParams: {},
                    formData: {
                        mc: '学员请假',
                        fzryid: '',
                        rclbm: '',
                        kssj: '',
                        jssj: '',
                        ms: ''
                    },
                    endMinDate: ''
                }
            },
            async mounted() {
                this.pageParams = this.getUrlParams()
                this.initDefaultTimeRange()

                // 功能说明：向 mp_objInp 暴露统一取值方法，尽量减少表单页改动 by xu 2026-02-28
                window.__mpObjInpGetFormData = () => {
                    const message = this.validateForm()
                    return {
                        valid: !message,
                        message: message || '',
                        data: {
                            mc: this.formData.mc,
                            fzryid: this.formData.fzryid,
                            rclbm: this.formData.rclbm,
                            kssj: this.formData.kssj,
                            jssj: this.formData.jssj,
                            ms: (this.formData.ms || '').trim()
                        }
                    }
                }
            },

            beforeUnmount() {
                // 功能说明：页面卸载时清理桥接方法，避免污染其他表单页 by xu 2026-02-28
                try {
                    if (window.__mpObjInpGetFormData) {
                        delete window.__mpObjInpGetFormData
                    }
                } catch (_) {}
            },
            methods: {
                getUrlParams() {
                    const params = {}
                    const urlSearchParams = new URLSearchParams(window.location.search)
                    for (const [key, value] of urlSearchParams) {
                        params[key] = decodeURIComponent(value)
                    }
                    return params
                },

                initDefaultTimeRange() {
                    // 设置默认开始/结束时间 by xu 2026-02-28
                    const now = new Date()
                    const start = new Date(now.getTime() + 30 * 60 * 1000)
                    const end = new Date(start.getTime() + 2 * 60 * 60 * 1000)

                    this.formData.kssj = this.formatToDateTime(start)
                    this.formData.jssj = this.formatToDateTime(end)
                    this.endMinDate = this.formData.kssj
                },

                formatToDateTime(date) {
                    const year = date.getFullYear()
                    const month = String(date.getMonth() + 1).padStart(2, '0')
                    const day = String(date.getDate()).padStart(2, '0')
                    const hour = String(date.getHours()).padStart(2, '0')
                    const minute = String(date.getMinutes()).padStart(2, '0')
                    return `${year}-${month}-${day} ${hour}:${minute}`
                },

                onStartTimeChange(val) {
                    this.endMinDate = val || ''
                    if (this.formData.jssj && val && new Date(this.formData.jssj).getTime() < new Date(val).getTime()) {
                        this.formData.jssj = val
                    }
                },

                validateForm() {
                    if (!this.formData.rclbm) return '请选择请假类别'
                    if (!this.formData.fzryid) return '请选择学员'
                    if (!this.formData.kssj) return '请选择请假开始时间'
                    if (!this.formData.jssj) return '请选择请假结束时间'
                    // 功能说明：请假“事由/描述”改为前端非必填，仅保留其他必填项校验 by xu 2026-02-28

                    const start = new Date(this.formData.kssj).getTime()
                    const end = new Date(this.formData.jssj).getTime()
                    if (!Number.isNaN(start) && !Number.isNaN(end) && end < start) {
                        return '结束时间不能早于开始时间'
                    }
                    return ''
                }
            }
        })
    })
</script>
</body>
</html>