Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
78c3f9f6 1 parent 923f6e20

大义工报名参数传递

Inline Side-by-side
Showing 3 changed files with 81 additions and 35 deletions
......@@ -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']);
......
/*
* @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));
......
<!--
* @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">
......