Xurh
/
ss_dc_wechat_mini_program_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
							<!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;
            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-03-06 -->
    <div class="form-wrap">
        <table class="table">
            <tr>
                <th>名称</th>
                <td>
                    <ss-input
                        v-model="formData.mc"
                        name="mc"
                        class="reason-input"
                        placeholder="请录入"
                    />
                </td>
            </tr>
            <tr>
                <th>人员</th>
                <td>
                    <ss-select
                        v-model="formData.ryid"
                        cb="ry"
                        :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-select
                        v-model="formData.kqlbm"
                        cb="kqlb"
                        :auto-select-first="true"
                        placeholder="请选择"
                    >
                    </ss-select>
                </td>
            </tr>
            <tr>
                <th>班级</th>
                <td>
                    <ss-select
                        v-model="formData.bjid"
                        cb="bj"
                        :auto-select-first="true"
                        placeholder="请选择"
                    >
                    </ss-select>
                </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-03-06
                    pageParams: {},
                    formData: {
                        mc: '考勤记录',
                        ryid: '',
                        bjid: '',
                        kqlbm: '',
                        kssj: '',
                        jssj: '',
                        ms: ''
                    },
                    endMinDate: '',
                }
            },
            async mounted() {
                this.pageParams = this.getUrlParams()
                this.initDefaultTimeRange()

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

            beforeUnmount() {
                // 功能说明：页面卸载时清理桥接方法，避免污染其他表单页 by xu 2026-03-06
                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-03-06
                    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.mc) return '请录入名称'
                    if (!this.formData.ryid) return '请选择人员'
                    if (!this.formData.kssj) return '请选择开始时间'
                    if (!this.formData.jssj) return '请选择结束时间'
                    if (!this.formData.kqlbm) return '请选择考勤类别'
                    if (!this.formData.bjid) return '请选择班级'

                    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>