Xurh
/
ss_dc_wechat_mini_program_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
							<!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>
  </head>
  <body>
    <div id="app" v-cloak>
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <div class="loading-text">加载中...</div>
      </div>

      <!-- 校长巡查表单 -->
      <div v-else class="form-container" style="padding-top: 12px">
        <!-- 循环遍历巡查点数据 -->
        <div
          v-for="(item, index) in xunchaList"
          :key="item.xcdid"
          class="xuncha-section"
        >
          <div class="section-title">{{ item.xcdmc }}</div>
          <table class="xuncha-table">
            <tr>
              <th>情况描述</th>
              <td style="position: relative">
                <ss-input
                  v-model="formData[`xcd_${index}`].qkms"
                  :name="`xcd_${index}_qkms`"
                  placeholder="请输入情况描述"
                  :required="true"
                />
              </td>
            </tr>
            <tr>
              <th>处理描述</th>
              <td style="position: relative">
                <ss-input
                  v-model="formData[`xcd_${index}`].clms"
                  :name="`xcd_${index}_clms`"
                  placeholder="请输入处理描述"
                  :required="true"
                />
              </td>
            </tr>
            <tr>
              <th>责任人</th>
              <td style="position: relative">
                <ss-input
                  v-model="formData[`xcd_${index}`].zrr"
                  :name="`xcd_${index}_zrr`"
                  placeholder="请输入责任人"
                  :required="true"
                />
              </td>
            </tr>
          </table>
        </div>
      </div>

      <!-- 使用SsBottom组件 -->
      <ss-bottom
        :show-shyj="false"
        :buttons="bottomButtons"
        @button-click="handleBottomAction"
        :disabled="submitting"
      />
    </div>

    <script>
      SS.ready(function () {
        window.SS.dom.initializeFormApp({
          el: "#app",
          data() {
            return {
              // 加载状态
              loading: true,
              submitting: false,

              // 巡查数据
              xunchaList: [],
              formData: {},

              // 页面参数
              rcid: 521185, // 写死，后续会从小程序传过来

              // 底部按钮
              bottomButtons: [
                { text: "取消", action: "cancel" },
                { text: "保存并提交", action: "submit" },
              ],
            };
          },

          mounted() {
            // 页面加载时初始化数据
            this.initPage();
          },

          methods: {
            // 初始化页面数据
            async initPage() {
              try {
                // console.log('🔄 开始加载巡查数据...');

                // 获取URL参数
                const urlParams = this.getUrlParams();

                // 调用初始化接口
                const response = await request.post(
                  `/service?ssToken=${urlParams.ssToken}`,
                  {},
                  { loading: false }
                );
                console.log("✅ 巡查数据加载成功:", response);
                if (response && response.data.ssData) {
                  // console.log('✅ 巡查数据加载成功:', response.data.ssData);
                  // 使用新格式的数据结构
                  this.initFormData(response.data.ssData.xcdjlList);
                  // 如果需要，可以使用返回的rcid
                  if (response.data.ssData.rcid) {
                    this.rcid = response.data.ssData.rcid;
                  }
                }
              } catch (error) {
                console.log("❌ 加载巡查数据失败:", error);
              } finally {
                this.loading = false;
              }
            },

            // 初始化表单数据
            initFormData(xunchaData) {
              console.log("🔧 初始化表单数据:", xunchaData);

              // 保存巡查点列表
              this.xunchaList = xunchaData || [];

              // 初始化表单数据
              const newFormData = {};
              this.xunchaList.forEach((item, index) => {
                const areaKey = `xcd_${index}`;
                newFormData[areaKey] = {
                  qkms: item.qkms || "",
                  clms: item.clms || "",
                  zrr: item.zrr || "",
                };
              });

              this.formData = newFormData;
              console.log("✅ 表单数据初始化完成:", this.formData);

              // 初始化校验规则
              this.$nextTick(() => {
                this.initValidationRules();
              });
            },

            // 获取URL参数
            getUrlParams() {
              const params = {};
              const urlSearchParams = new URLSearchParams(
                window.location.search
              );
              for (const [key, value] of urlSearchParams) {
                params[key] = decodeURIComponent(value);
              }
              return params;
            },

            // 显示提示
            showToast(message, type = "info") {
              // 这里可以使用SS框架的提示组件
              console.log(`${type.toUpperCase()}: ${message}`);
              // 临时使用alert
              window.showToast(message);
            },

            // 初始化ssVm校验规则
            initValidationRules() {
              console.log("🔧 初始化ssVm校验规则...");

              // 为每个巡查点添加校验规则
              this.xunchaList.forEach((item, index) => {
                const prefix = `xcd_${index}`;
                const areaName = item.xcdmc;

                // 情况描述校验 - 使用required选项
                ssVm.add("notNull", [`${prefix}_qkms`], {
                  msgPrfx: `${areaName}的情况描述`,
                  required: true,
                });

                // 处理描述校验
                ssVm.add("notNull", [`${prefix}_clms`], {
                  msgPrfx: `${areaName}的处理描述`,
                  required: true,
                });

                // 责任人校验
                ssVm.add("notNull", [`${prefix}_zrr`], {
                  msgPrfx: `${areaName}的责任人`,
                  required: true,
                });
              });

              console.log("✅ ssVm校验规则初始化完成");
            },

            // 处理底部按钮点击
            handleBottomAction(data) {
              console.log("底部按钮操作:", data);

              switch (data.action) {
                case "cancel":
                  this.handleCancel();
                  break;
                case "submit":
                  this.handleSubmit();
                  break;
              }
            },

            // 处理取消操作 - 使用bridge.js的goBack方法
            handleCancel() {
              // 使用bridge.js提供的goBack方法
              NavigationManager.goBack({ refreshParent: true });
            },
            // 获取URL参数
            getUrlParams() {
              const params = {};
              const urlSearchParams = new URLSearchParams(
                window.location.search
              );
              for (const [key, value] of urlSearchParams) {
                params[key] = decodeURIComponent(value);
              }
              return params;
            },

            // 处理提交操作
            async handleSubmit() {
              if (this.submitting) return;

              try {
                this.submitting = true;
                console.log("📝 开始提交表单...");

                // 校验表单
                if (!this.validateForm()) {
                  return;
                }

                // 构建提交数据（模拟JSP表单格式）
                const submitData = this.buildSubmitData();
                console.log("📤 提交数据:", submitData);

                // 调用提交接口
                const response = await request.post(
                  "/service?ssServ=rcXcdjl_excelSaveAddByZxxz&ssDest=info",
                  submitData,
                  {
                    loading: false,
                    formData: true, // 使用表单格式提交，数组会被展开为多个同名参数
                  }
                );

                console.log("✅ 提交成功:", response);
                this.showToast("提交成功！", "success");

                // 延迟返回
                setTimeout(() => {
                  this.returnToHome();
                }, 1500);
              } catch (error) {
                console.error("❌ 提交失败:", error);
                this.showToast("提交失败", "error");
              } finally {
                this.submitting = false;
              }
            },

            // 校验表单 - 使用项目的ValidationManager
            validateForm() {
              console.log("🔍 使用ssVm校验表单数据...");

              // 使用ValidationManager的validateAll方法
              const result = ssVm.validateAll();

              if (!result.valid) {
                console.log("❌ 表单校验失败:", result.errors);
                // ValidationManager会自动显示错误信息
                return false;
              }

              console.log("✅ 表单校验通过");
              return true;
            },

            // 构建提交数据（JSP格式）
            buildSubmitData() {
              const submitData = {
                // 隐藏字段
                rcid: this.rcid,
                requestParentViewObject: "rc",
                // 巡查点数据 - 使用JSP中的字段名格式
                xcdid: [],
                xcdjlid: [],
                qkms: [],
                clms: [],
                zrr: [],
              };

              // 填充数组数据（按JSP中的格式）
              this.xunchaList.forEach((item, index) => {
                submitData.xcdid.push(item.xcdid);
                submitData.xcdjlid.push(item.xcdjlid || "null");
                submitData.qkms.push(this.formData[`xcd_${index}`].qkms);
                submitData.clms.push(this.formData[`xcd_${index}`].clms);
                submitData.zrr.push(this.formData[`xcd_${index}`].zrr);
              });

              return submitData;
            },
            // 2025-12-08 修改 by xu：提交成功后回到小程序首页
            returnToHome() {
                console.log("🏠 退出小程序")
				wx.miniProgram.reLaunch({
					url: "/pages/main/index"
				})
            },

            // 显示提示
            showToast(message, type = "info") {
              console.log(`${type.toUpperCase()}: ${message}`);
              // 使用浏览器原生alert，后续可以替换为更好的提示组件
              alert(message);
            },
          },
        });
      });
    </script>

    <style>
      /* 防止Vue模板闪烁 */
      [v-cloak] {
        display: none !important;
      }

      /* 加载状态样式 */
      .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 200px;
        color: #666;
      }

      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #40ac6d;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 15px;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      .loading-text {
        font-size: 14px;
      }

      /* 巡查区域样式 */
      .xuncha-section {
        margin-bottom: 20px;
        /* border: 1px solid #e0e0e0; */
        /* border-radius: 8px; */
        overflow: hidden;
      }

      .section-title {
        /* background: #f5f5f5; */
        padding: 12px 0;
        font-weight: bold;
        font-size: 16px;
        color: #333;
        /* border-bottom: 1px solid #e0e0e0; */
      }

      .xuncha-table {
        width: 100%;
        border-collapse: collapse;
      }

      .xuncha-table th {
        background: #fafafa;
        padding: 12px 15px;
        text-align: left;
        font-weight: normal;
        color: #666;
        border-bottom: 1px solid #e0e0e0;
        width: 100px;
      }

      .xuncha-table td {
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0;
      }

      /* .xuncha-table tr:last-child th,
			.xuncha-table tr:last-child td {
				border-bottom: none;
			} */

      /* 表单容器样式 */
      .form-container {
        padding: 15px;
        padding-bottom: 45px;
        background: #fff;
        min-height: calc(100vh - 100px);
      }
    </style>
  </body>
</html>