Xurh
/
ss_dc_wechat_mini_program_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
							<!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>
          <!-- 功能说明：班级改为管辖班级，人员改为按班级级联学员 by xu 2026-03-17 -->
          <tr>
            <th>班级</th>
            <td>
              <ss-select
                v-model="formData.bjid"
                cb="adminBj"
                :auto-select-first="true"
                placeholder="请选择"
                @change="onBjChange"
              >
              </ss-select>
            </td>
          </tr>
          <tr>
            <th>人员</th>
            <td>
              <ss-select
                v-model="formData.ryid"
                :cb="formData.bjid ? 'xyByBj' : ''"
                :filter="personFilter"
                :auto-select-first="true"
                :disabled="!formData.bjid"
                :placeholder="formData.bjid ? '请选择' : '请先选择班级'"
              >
              </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-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: "",
              personFilter: null,
            };
          },
          async mounted() {
            this.pageParams = this.getUrlParams();
            this.initDefaultTimeRange();
            // 功能说明：初始化人员级联过滤条件，确保班级变化后按班级加载学员 by xu 2026-03-17
            this.personFilter = this.formData.bjid
              ? { bjid: this.formData.bjid }
              : null;

            // 功能说明：向 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}`;
            },

            onBjChange(val) {
              // 功能说明：班级切换后重置人员，并更新按班级筛选人员的过滤条件 by xu 2026-03-17
              const bjid = val || "";
              this.formData.bjid = bjid;
              this.formData.ryid = "";
              this.personFilter = bjid ? { bjid } : null;
            },

            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.bjid) return "请选择班级";
              if (!this.formData.ryid) return "请选择人员";
              if (!this.formData.kssj) return "请选择开始时间";
              if (!this.formData.jssj) return "请选择结束时间";
              if (!this.formData.kqlbm) 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>