Xurh
/
ss_dc_wechat_mini_program_h5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
							<!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="请选择"
                        @change="onStudentChange"
                    >
                    </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: '',
                        bjid: '',
                        rclbm: '',
                        kssj: '',
                        jssj: '',
                        ms: ''
                    },
                    endMinDate: '',
                    studentLookupSeq: 0,
                }
            },
            watch: {
                // 功能说明：学员变化时自动反查班级并缓存 bjid（兼容自动选中与手动切换） by xu 2026-03-01
                'formData.fzryid': function (newVal, oldVal) {
                    const next = String(newVal || '').trim()
                    const prev = String(oldVal || '').trim()
                    if (next === prev) return
                    if (!next) {
                        this.formData.bjid = ''
                        return
                    }
                    this.fetchBjidByRyid(next)
                }
            },
            async mounted() {
                this.pageParams = this.getUrlParams()
                this.initDefaultTimeRange()

                // 功能说明：向 mp_objInp 暴露统一取值方法，尽量减少表单页改动 by xu 2026-02-28
                window.__mpObjInpGetFormData = async () => {
                    // 功能说明：提交前兜底反查 bjid，避免学员切换后接口未返回就提交导致缺参 by xu 2026-03-01
                    if (this.formData.fzryid && !this.formData.bjid) {
                        await this.fetchBjidByRyid(this.formData.fzryid)
                    }

                    const message = this.validateForm()
                    return {
                        valid: !message,
                        message: message || '',
                        data: {
                            mc: this.formData.mc,
                            fzryid: this.formData.fzryid,
                            bjid: this.formData.bjid,
                            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
                    }
                },

                // 功能说明：手动触发学员变更时立即反查 bjid，避免等待 watch 异步节奏 by xu 2026-03-01
                onStudentChange(val) {
                    const ryid = String(val || this.formData.fzryid || '').trim()
                    if (!ryid) {
                        this.formData.bjid = ''
                        return
                    }
                    this.fetchBjidByRyid(ryid)
                },

                // 功能说明：通过 ryid 调用 xy_selBjidByXyid 反查班级并缓存到 formData.bjid by xu 2026-03-01
                async fetchBjidByRyid(ryid) {
                    const value = String(ryid || '').trim()
                    if (!value) {
                        this.formData.bjid = ''
                        return
                    }

                    const reqSeq = ++this.studentLookupSeq
                    try {
                        const req = (window && window.request) || request
                        if (!req || typeof req.post !== 'function') {
                            console.warn('[mp_xyqj_inp] request 不可用，跳过 bjid 反查')
                            return
                        }

                        const response = await req.post(
                            '/service?ssServ=xy_selBjidByXyid',
                            { ryid: value },
                            { loading: false, formData: true }
                        )

                        if (reqSeq !== this.studentLookupSeq) return

                        const raw = response && response.data ? response.data : response
                        const data = raw && raw.ssData !== undefined ? raw.ssData : raw

                        // 功能说明：兼容 xy_selBjidByXyid 返回 ssData=数字/字符串/对象 三种结构 by xu 2026-03-01
                        let bjid = ''
                        if (data !== undefined && data !== null && (typeof data === 'number' || typeof data === 'string')) {
                            bjid = String(data).trim()
                        } else if (data && typeof data === 'object' && data.bjid !== undefined && data.bjid !== null) {
                            bjid = String(data.bjid).trim()
                        } else if (raw && typeof raw === 'object' && raw.bjid !== undefined && raw.bjid !== null) {
                            bjid = String(raw.bjid).trim()
                        }

                        this.formData.bjid = bjid
                        console.log('[mp_xyqj_inp] 学员反查班级成功', { ryid: value, bjid: this.formData.bjid })
                    } catch (error) {
                        if (reqSeq !== this.studentLookupSeq) return
                        this.formData.bjid = ''
                        console.error('[mp_xyqj_inp] 学员反查班级失败', error)
                    }
                },

                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>