hookehuyr

✨ feat: 表单配置和表单字段保存到store里面避免重复请求

/*
* @Date: 2022-04-18 15:59:42
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-02-16 10:01:56
* @LastEditTime: 2023-03-03 10:10:27
* @FilePath: /data-table/src/store/index.js
* @Description: 文件描述
*/
......@@ -24,6 +24,7 @@ export const mainStore = defineStore('main', {
scrollTopPerson: 0,
keepPages: ['default'], // 很坑爹,空值全部都缓存
fieldName: '',
formInfo: {}, // 表单字段信息
formSetting: {}, // 表单数据收集设置
successInfo: {}, // 表单提交返回值
};
......@@ -74,6 +75,9 @@ export const mainStore = defineStore('main', {
changeFieldName (v) {
this.fieldName = v;
},
changeFormInfo (v) {
this.formInfo = v;
},
changeFormSetting (v) {
this.formSetting = v;
},
......
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-03-03 09:47:53
* @LastEditTime: 2023-03-03 10:14:40
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -93,7 +93,7 @@ import {
useTitle,
} from "@/utils/generatePackage.js";
import { useRoute } from "vue-router";
import { queryFormAPI, getFormSettingAPI, postVerifyPasswordAPI } from "@/api/form.js";
import { queryFormAPI, postVerifyPasswordAPI } from "@/api/form.js";
import { addFormDataAPI } from "@/api/data.js";
import { showSuccessToast, showFailToast } from "vant";
import { wxInfo, getUrlParams } from "@/utils/tools";
......@@ -103,7 +103,7 @@ import wx from 'weixin-js-sdk'
// 获取表单设置
const store = mainStore();
const { formSetting } = storeToRefs(store);
const { formSetting, formInfo } = storeToRefs(store);
// web端判断封面图片高度
const is_pc = computed(() => wxInfo().isPC);
const PHeaderHeight = computed(() => {
......@@ -202,6 +202,8 @@ onMounted(async () => {
.setAttribute("style", `background-color: ${styleColor.backgroundColor}`);
const { data } = await queryFormAPI({ form_code: $route.query.code });
const form_data = data;
// 缓存表单信息
store.changeFormInfo(data);
// 表单网页标题
useTitle(form_data.name);
form_name.value = form_data.name;
......@@ -299,21 +301,15 @@ const onTap = () => {
}
// 检查数据收集设置
const checkUserSubscribe = async () => {
const code = getUrlParams(location.href) ? getUrlParams(location.href).code : '';
const { data } = await getFormSettingAPI({ form_code: code });
const form_setting = {};
if (data.length) {
Object.assign(form_setting, data[0]['property_list'], data[0]['extend']);
}
const checkUserSubscribe = () => {
// 判断是否需要关注公众号, 弹出二维码识别
if (form_setting.wxzq_must_follow && form_setting.x_field_weixin_subscribe) {
if (formSetting.value.wxzq_must_follow && formSetting.value.x_field_weixin_subscribe) {
// 标记用户已关注
localStorage.setItem('weixin_subscribe', 1);
show.value = false;
}
// 凭密码填写设置
if (form_setting.mmtx_enable) {
if (formSetting.value.mmtx_enable) {
pwd_show.value = true;
} else {
pwd_show.value = false;
......@@ -321,15 +317,9 @@ const checkUserSubscribe = async () => {
}
// 检查密码验证功能
const checkUserPassword = async () => {
const code = getUrlParams(location.href) ? getUrlParams(location.href).code : '';
const { data } = await getFormSettingAPI({ form_code: code });
const form_setting = {};
if (data.length) {
Object.assign(form_setting, data[0]['property_list'], data[0]['extend']);
}
const checkUserPassword = () => {
// 凭密码填写设置
if (form_setting.mmtx_enable) {
if (formSetting.value.mmtx_enable) {
pwd_show.value = true;
} else {
pwd_show.value = false;
......@@ -337,10 +327,8 @@ const checkUserPassword = async () => {
}
// 根据规则隐藏相应字段
const checkRules = async () => {
// 数据收集设置
const { data } = await queryFormAPI({ form_code: $route.query.code });
const rule_list = [...data['rule_list']];
const checkRules = () => {
const rule_list = [...formInfo.value['rule_list']];
formData.value.forEach(item => {
// 给受作用的字段绑定判断规则
// 规则失效需要踢出
......