hookehuyr

✨ feat: 规则功能调整(下拉控件绑定值方式修改),测试分享功能

<!--
* @Date: 2022-08-30 13:46:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-02-27 14:24:03
* @LastEditTime: 2023-03-01 18:17:40
* @FilePath: /data-table/src/components/PickerField/index.vue
* @Description: 单列选择器组件
-->
......@@ -12,7 +12,7 @@
{{ item.component_props.label }}
</div>
<van-field
v-model="item.value"
v-model="picker_value"
is-link
readonly
:name="item.key"
......@@ -58,12 +58,14 @@ onMounted(() => {
const selectedValues = ref("");
const showPicker = ref(false);
const picker_value = ref(props.item.component_props.default);
const onConfirm = ({ selectedOptions }) => {
props.item.value = selectedOptions[0]?.value;
picker_value.value = selectedOptions[0]?.value;
showPicker.value = false;
// 触发点自定义监听事件,配合规则显示隐藏其他字段
emit("active", { key: props.item.key, value: selectedOptions[0]?.value, type: "picker" });
props.item.value = { key: props.item.key, value: picker_value.value, type: "picker" };
emit("active", props.item.value);
// if (add_info_key.value === props.item.value) {
// has_add_info.value = true;
// }
......
/*
* @Date: 2022-06-13 17:42:32
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-03-01 17:07:58
* @FilePath: /data-table/src/composables/useShare.js
* @Description: 文件描述
*/
import wx from 'weixin-js-sdk';
// import { Toast } from 'vant';
/**
* @description: 微信分享功能
* @param {*} title 标题
* @param {*} desc 描述
* @param {*} imgUrl 图标
* @return {*}
*/
export const sharePage = ({title = '自定义表单', desc = '数据收集', imgUrl = ''}) => {
const shareData = {
title, // 分享标题
desc, // 分享描述
link: location.origin + location.pathname + location.hash, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl, // 分享图标
success: function () {
// console.warn('设置成功');
}
}
// 分享好友(微信好友或qq好友)
wx.updateAppMessageShareData(shareData);
// 分享到朋友圈或qq空间
wx.updateTimelineShareData(shareData);
// 分享到腾讯微博
wx.onMenuShareWeibo(shareData);
// // 获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃)
// wx.onMenuShareAppMessage(shareData);
// // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃)
// wx.onMenuShareTimeline(shareData);
// // 获取“分享到QQ”按钮点击状态及自定义分享内容接口(即将废弃)
// wx.onMenuShareQQ(shareData);
}
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-02-27 18:52:17
* @LastEditTime: 2023-03-01 18:19:28
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -98,6 +98,8 @@ import { addFormDataAPI } from "@/api/data.js";
import { showSuccessToast, showFailToast } from "vant";
import { wxInfo, getUrlParams } from "@/utils/tools";
import { styleColor } from "@/constant.js";
import { sharePage } from '@/composables/useShare.js'
import wx from 'weixin-js-sdk'
// 获取表单设置
const store = mainStore();
......@@ -183,6 +185,7 @@ const show = ref(false);
const qr_url = ref("");
const pwd_show = ref(false);
const mmtx_password = ref('');
const form_name = ref('')
// 提交表单密码
const onSubmitPwd = async () => {
......@@ -201,6 +204,7 @@ onMounted(async () => {
const form_data = data;
// 表单网页标题
useTitle(form_data.name);
form_name.value = form_data.name;
// 重构数据结构
let page_header = {};
let page_commit = {};
......@@ -216,7 +220,6 @@ onMounted(async () => {
page_form.push(element);
}
});
// TODO: 后期需要适配多种图片展示方式,展示只显示单张图片模式
/** 页眉属性
* @param label 表单标题
* @param banner_type 页眉类型:["文字", "单张图", "轮播图"] text=文字,image=单张图,carousel=轮播图
......@@ -241,81 +244,6 @@ onMounted(async () => {
};
}
formData.value = formatData(page_form);
// TODO: 等待真实数据结构 重构规则数据结构
const rule_list = [
{
"mode": "SHOW",
"field_names": [
"man_inpu"
],
"logical_op": "OR",
"expr_list": [
{
"field_name": "sex",
"op": "IN",
"values": [
"男"
]
}
],
"text": ""
},
{
"mode": "SHOW",
"field_names": [
"woman_input"
],
"logical_op": "OR",
"expr_list": [
{
"field_name": "sex",
"op": "IN",
"values": [
"女"
]
}
],
"text": ""
},
{
"mode": "HIDE",
"field_names": [
"phone",
"id_card"
],
"logical_op": "AND",
"expr_list": [
{
"field_name": "more",
"op": "IN",
"values": [
"不想填了",
]
},
{
"field_name": "field_9",
"op": "IN",
"values": [
"说明1",
]
}
],
"text": ""
}
];
formData.value.forEach(item => {
rule_list.forEach(rule => {
if (rule.field_names?.includes(item.key)) {
item.field_rules = {
mode: rule.mode,
logical_op: rule.logical_op,
expr_list: rule.expr_list,
}
}
})
})
mockData.value = [
{
key: "111",
......@@ -354,7 +282,11 @@ onMounted(async () => {
localStorage.setItem('weixin_subscribe', 0);
}
// 判断是否弹出密码输入框
checkUserPassword()
checkUserPassword();
wx.ready(() => {
// 自定义分享内容
sharePage({ title: form_name.value, desc: '活动报名' });
});
});
// 打开轮询用户是否关注
......@@ -405,8 +337,24 @@ const checkUserPassword = async () => {
}
// 根据规则隐藏相应字段
const checkRules = (field) => {
const checkRules = async () => {
// 数据收集设置
const { data } = await getFormSettingAPI({ form_code: $route.query.code });
let rule_list = [];
if (data.length) {
rule_list = [...data[0]['rules']]
}
formData.value.forEach(item => {
// 给受作用的字段绑定判断规则
rule_list.forEach(rule => {
if (rule.field_names?.includes(item.key)) {
item.field_rules = {
mode: rule.mode,
logical_op: rule.logical_op,
expr_list: rule.expr_list,
}
}
});
// 只检查存在规则的字段
if (item.field_rules) {
let condition = '';
......@@ -415,11 +363,11 @@ const checkRules = (field) => {
item.field_rules?.expr_list.forEach(expr => {
if (typeof postData.value[expr['field_name']] === 'string') { // 表单值为字符串(单选,下拉)
const k = !!expr['values'].includes(postData.value[expr['field_name']])
condition += `${k} ${op}`
condition += `${k}${op}`
}
if (typeof postData.value[expr['field_name']] === 'object') { // 表单值为数组(多选)
const k = !!(_.intersection(expr['values'], postData.value[expr['field_name']])).length;
condition += `${k} ${op}`
condition += `${k}${op}`
}
});
// 把结果转换为布尔值
......@@ -459,9 +407,9 @@ const onActive = (item) => {
if (item.type === "rate") {
postData.value = _.assign(postData.value, { [item.key]: item.value });
}
// if (item.type === "picker") { // 下拉框控件
// // console.warn(item);
// }
if (item.type === "picker") { // 下拉框控件
postData.value = _.assign(postData.value, { [item.key]: item.value });
}
if (item.type === "radio") { // 单选控件
postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
}
......@@ -476,9 +424,8 @@ const onActive = (item) => {
});
postData.value = _.assign(postData.value, { [item.key]: checkbox_value });
}
// 检查规则,会影响字段显示
checkRules(item);
checkRules();
};
// 检验没有绑定name的输入项
......@@ -601,6 +548,12 @@ const onSubmit = async (values) => {
// }
}
};
// setTimeout(() => {
// // TAG:微信分享
// // 自定义分享内容
// sharePage({ title: form_name.value, desc: '活动报名', imgUrl: '' });
// }, 500)
</script>
<style lang="less">
......