大义工报名参数传递

hookehuyr
Commit 78c3f9f602bfe75aac1f42bf7d2584cebf6b4a0b 78c3f9f6 1 parent 923f6e20
Showing 3 changed files with 81 additions and 35 deletions
src/App.vue
src/api/form.js
src/views/index.vue
--- a/src/App.vue
View file @78c3f9f
+++ b/src/App.vue
View file @78c3f9f
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-26 23:52:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-25 18:13:56
+ * @LastEditTime: 2025-06-04 16:34:33
  * @FilePath: /data-table/src/App.vue
  * @Description:
 -->
@@ -78,8 +78,9 @@ onMounted(async () => {
   const flow_node_code = getUrlParams(location.href) ? getUrlParams(location.href).flow_node_code : ''; // flow_node_code 表示随机选择的流程节点的ID
   const force_back = getUrlParams(location.href) ? getUrlParams(location.href).force_back : ''; // force_back=1 时，强制按照后台用户模式检查权限
   const x_cycle = getUrlParams(location.href) ? getUrlParams(location.href).x_cycle : ''; // 周期ID标识
+  const volunteer_source = getUrlParams(location.href) ? getUrlParams(location.href).volunteer_source : ''; // 义工来源
   // 数据收集设置
-  const { data } = await getFormSettingAPI({ form_code: code, page_type, data_id, flow_node_code, force_back, x_cycle });
+  const { data } = await getFormSettingAPI({ form_code: code, page_type, data_id, flow_node_code, force_back, x_cycle, volunteer_source });
   const form_setting = {};
   if (data.length) {
     Object.assign(form_setting, data[0]['property_list'], data[0]['extend']);
--- a/src/api/form.js
View file @78c3f9f
+++ b/src/api/form.js
View file @78c3f9f
 /*
  * @Date: 2022-06-17 14:54:29
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-07 13:23:19
+ * @LastEditTime: 2025-06-04 16:46:38
  * @FilePath: /data-table/src/api/form.js
  * @Description: 表单接口
  */
@@ -14,6 +14,7 @@ const Api = {
   ADD_FORM_SETTING: '/srv/?a=add_form_setting',
   QUERY_FORM_SETTING: '/srv/?a=query_form_setting',
   VERIFY_PASSWORD: '/srv/?a=verify_password',
+  VOLUNTEER_SOURCE_LEADER: '/srv/?a=volunteer_source_leader',
 };
 /**
@@ -67,3 +68,14 @@ export const getFormSettingAPI = (params) => fn(fetch.get(Api.QUERY_FORM_SETTING
  * @returns:
  */
 export const postVerifyPasswordAPI = (params) => fn(fetch.post(Api.VERIFY_PASSWORD, params));
+
+/**
+ * 义工组长按手机号查询义工信息
+ * @param form_code 表单唯一标识
+ * @param page_type 页面类型
+ * @param force_back 是否强制后台账号模式检查权限，1=是，0=否
+ * @param volunteer_source 义工报名渠道。self=自己报名，leader=组长给义工报名
+ * @param volunteer_phone 义工的手机号
+ * @returns
+ */
+export const getVolunteerSourceLeaderAPI = (params) => fn(fetch.get(Api.VOLUNTEER_SOURCE_LEADER, params));
--- a/src/views/index.vue
View file @78c3f9f
+++ b/src/views/index.vue
View file @78c3f9f
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-27 13:53:23
+ * @LastEditTime: 2025-06-04 18:15:14
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -195,7 +195,7 @@ import "@vant/touch-emulator"; // PC上引入时使得表格组件按钮插件
 import { createComponentType } from "@/hooks/useComponentType";
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle, } from "@/utils/generatePackage.js";
 import { useRoute } from "vue-router";
-import { queryFormAPI, postVerifyPasswordAPI } from "@/api/form.js";
+import { queryFormAPI, postVerifyPasswordAPI, getVolunteerSourceLeaderAPI } from "@/api/form.js";
 import { addFormDataAPI, queryFormDataAPI, modiFormDataAPI, flowFormDataAPI } from "@/api/data.js";
 import { showSuccessToast, showFailToast, showConfirmDialog, showToast } from "vant";
 import { wxInfo, getUrlParams, formatDate, prettyLog } from "@/utils/tools";
@@ -238,35 +238,6 @@ const PCommit = ref({});
  */
 const formData = ref([]);
-// 为每个表单字段创建单独的监听器
-// 可以监听到简单组件的字段的值变化，自定义的组件无法监听到
-const setupFieldWatchers = () => {
-  formData.value.forEach((field) => {
-    watch(
-      () => field.value,
-      (newValue, oldValue) => {
-        if (newValue !== oldValue) {
-          console.log('字段变化:', {
-            key: field.key,
-            name: field.name,
-            oldValue: oldValue,
-            newValue: newValue
-          });
-        }
-      }
-    );
-  });
-};
-
-// TAG: 监听formData的变化，当有新的字段添加时重新设置监听器
-watch(
-  () => formData.value,
-  () => {
-    setupFieldWatchers();
-  },
-  { immediate: true }
-);
-
 /**
  * 格式化表单数据
 */
@@ -313,6 +284,8 @@ const x_cycle = $route.query.x_cycle ? $route.query.x_cycle : null;
 const iframe_openid = getUrlParams(location.href) ? getUrlParams(location.href).openid : '';
 // 强制后台检查标识
 const force_back = $route.query.force_back ? $route.query.force_back : '';
+// 义工来源
+const volunteer_source = $route.query.volunteer_source ? $route.query.volunteer_source : '';
 const notice_text = ref(""); // 顶部提示文字
 const show_qrcode = ref(false); // 显示二维码
@@ -418,7 +391,7 @@ onMounted(async () => {
   document
     .querySelector("body")
     .setAttribute("style", `background-color: ${styleColor.backgroundColor}`);
-  const { data, flow_process_list, code } = await queryFormAPI({ form_code: $route.query.code, page_type, data_id, flow_node_code, force_back, openid: iframe_openid, x_cycle }); // flow_node_code 表示随机选择的流程节点的ID
+  const { data, flow_process_list, code } = await queryFormAPI({ form_code: $route.query.code, page_type, data_id, flow_node_code, force_back, openid: iframe_openid, x_cycle, volunteer_source }); // flow_node_code 表示随机选择的流程节点的ID
   const form_data = data;
   // 处理审批意见显示
   if (code) {
@@ -1200,6 +1173,66 @@ const onFailed = (errorInfo) => { // 提交表单且验证不通过后触发
   });
   showToast(error_name + ': ' + error_item.message);
 }
+
+// TAG: 监听formData的变化，当有新的字段添加时重新设置监听器
+watch(
+  () => formData.value,
+  () => {
+    setupFieldWatchers();
+  },
+  {
+    immediate: false, // 是否在初始化时立即执行一次回调
+    flush: 'post', // 在组件更新后执行（可访问 DOM）
+  }
+);
+
+// 为每个表单字段创建单独的监听器
+// 可以监听到简单组件的字段的值变化，自定义的组件无法监听到
+const setupFieldWatchers = () => {
+  formData.value.forEach((field) => {
+    watch(
+      () => field.value,
+      (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+          console.log('字段变化:', {
+            key: field.key,
+            name: field.name,
+            comment: field.component_props.comment,
+            oldValue: oldValue,
+            newValue: newValue
+          });
+          // TAG: 大义工新增功能
+          /**
+           * 必须表单是新增表单时才触发
+           * 如果别名是手机号, 并且是11位, 类型是义工，设置义工数据
+           */
+          if (volunteer_source === 'leader'
+              && field.component_props.comment === 'phone'
+              && (/^1\d{10}$/).test(newValue)
+              && ( page_type === 'add' || page_type === undefined)
+          ) {
+            // 设置义工数据
+            setVolunteerData(newValue);
+          }
+        }
+      }
+    );
+  });
+};
+
+// 获取义工信息
+const setVolunteerData = async (volunteer_phone) => {
+  const volunteer_data = await getVolunteerSourceLeaderAPI({ form_code: $route.query.code, force_back, page_type, volunteer_source, volunteer_phone });
+  if (volunteer_data.code) {
+    let object = volunteer_data.data;
+    const objectMap = new Map(Object.entries(object)); // 将 object 转换为 Map，Object.entries() 方法用于返回一个给定对象自身可枚举属性的键值对数组，数组中的每个元素是一个包含键值对的数组，[ ["name", "Alice"], ["age", 30], ["city", "New York"] ]
+    formData.value.forEach((item) => {
+      if (objectMap.has(item.key)) {
+        item.component_props.default = objectMap.get(item.key);
+      }
+    });
+  }
+}
 </script>
 <style lang="less">