Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e688ca66 1 parent 0ccd2b43

fix 代码整理

Inline Side-by-side
Showing 1 changed file with 130 additions and 116 deletions
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-14 13:43:10
* @LastEditTime: 2024-08-14 14:28:08
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -133,7 +133,7 @@
<!-- TODO: 签到二维码，待用 -->
<!-- <van-image width="50" height="50" src="https://oa-dev.onwall.cn/admin/?a=get_qrcode&m=srv&key=123'"></van-image> -->
</div>
<van-overlay :show="show">
<van-overlay :show="show_qrcode">
<div class="wrapper">
<div class="block">
<div style="text-align: center; margin-top: 0.5rem;">请先关注公众号</div>
......@@ -204,19 +204,22 @@ import { sharePage } from '@/composables/useShare.js'
import wx from 'weixin-js-sdk'
import LoginBox from '@/components/LoginBox/index.vue';
const $route = useRoute();
const $router = useRouter();
// 获取表单设置
const store = mainStore();
const { formSetting, formInfo, successInfo } = storeToRefs(store);
// web端判断封面图片高度
const is_pc = computed(() => wxInfo().isPC);
const PHeaderHeight = computed(() => {
if (is_pc.value) {
return "35vh";
} else {
return "20vh";
}
});
// // web端判断封面图片高度
// const is_pc = computed(() => wxInfo().isPC);
// const PHeaderHeight = computed(() => {
// if (is_pc.value) {
// return "35vh";
// } else {
// return "20vh";
// }
// });
// TAG: 自定义主题颜色
const themeVars = {
......@@ -225,15 +228,39 @@ const themeVars = {
pickerConfirmActionColor: styleColor.baseColor,
};
const $route = useRoute();
const $router = useRouter();
const PHeader = ref({});
const PCommit = ref({});
const PHeader_cover = ref("");
const PHeader_title = ref("");
const mockData = ref([]);
// const PHeader_cover = ref("");
// const PHeader_title = ref("");
// const mockData = ref([]);
/**
* 表单结构数据
*/
const formData = ref([]);
/**
* 格式化表单数据
*/
const formatData = (data) => {
const arr = [];
data.forEach((field) => {
const { interaction_type, data_type, field_id, field_name, ...component_props } = field;
// 生成组件属性
const temp = {
key: field_name,
value: component_props.default ? component_props.default : "",
component_props,
};
arr.push(temp);
});
return arr;
};
/**
* 表单提交数据
*/
const postData = ref({});
/**
* 表单历史数据
*/
const historyData = ref({});
// 编辑模式不能提交操作
......@@ -256,55 +283,13 @@ 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 formatData = (data) => {
const arr = [];
data.forEach((field) => {
const { interaction_type, data_type, field_id, field_name, ...component_props } = field;
// 生成组件属性
const temp = {
key: field_name,
value: component_props.default ? component_props.default : "",
component_props,
};
arr.push(temp);
});
return arr;
};
// 处理没有绑定值的组件的赋值
// 省市区选择，图片上传，文件上传，电子签名，评分组件
const area_picker = ref([]);
const image_uploader = ref([]);
const file_uploader = ref([]);
const table_editor = ref([]);
const sign = ref([]);
const rate_picker = ref([]);
const appointment = ref([]);
// 动态绑定ref数据
const setRefMap = (el, item) => {
if (el) {
if (item.component_props.tag === "image_uploader") {
image_uploader.value.push(el);
}
if (item.component_props.tag === "file_uploader") {
file_uploader.value.push(el);
}
if (item.component_props.tag === "table_editor") {
table_editor.value.push(el);
}
// if (item.component_props.tag === "sign") {
// sign.value.push(el);
// }
}
};
const notice_text = ref("");
const show = ref(false);
const qr_url = ref("");
const notice_text = ref(""); // 顶部提示文字
const show_qrcode = ref(false); // 显示二维码
const qr_url = ref(""); // qrcode
const pwd_show = ref(false);
const mmtx_password = ref('');
const form_name = ref('')
const form_name = ref(''); // 表单名称
// 提交表单密码
const onSubmitPwd = async () => {
......@@ -469,20 +454,6 @@ onMounted(async () => {
if (data_id) { // 如果有data_id，则获取历史数据 否则获取表单默认值
const history_data = await queryFormDataAPI({ form_code: $route.query.code, data_id, openid: iframe_openid, force_back });
if (history_data.code) {
// let object = history_data.data; // 表单数据
// formData.value.forEach((item) => { // 把对应数据赋值到表单
// for (const key in object) {
// const element = object[key];
// if (item.key === key) {
// item.component_props.default = element;
// // 设置读写权限 read_only read_write
// if (page_type === 'info') {
// item.component_props.readonly = true;
// PCommit.value.visible = false; // 只读模式下，提交按钮隐藏
// }
// }
// }
// });
// 结构优化一下
let object = history_data.data;
const isInfoPage = page_type === 'info';
......@@ -511,14 +482,16 @@ onMounted(async () => {
show_loading.value = false;
}
// TAG：创建组件类型
createComponentType(formData.value);
// TAG：不同类型提交表单处理
if (page_type === 'add') { // 表单为新增状态
// 过期时间显示
notice_text.value = `表单报名将在 ${formSetting.value.sjsj_end_time} 后结束`;
// 判断是否需要关注公众号, 弹出二维码识别
if (formSetting.value.wxzq_must_follow && !formSetting.value.x_field_weixin_subscribe) {
show.value = true;
show_qrcode.value = true;
qr_url.value = formSetting.value.wxzq_mp_qrcode;
// 标记用户还未关注
localStorage.setItem('weixin_subscribe', 0);
......@@ -586,7 +559,7 @@ const checkUserSubscribe = () => {
if (formSetting.value.wxzq_must_follow && formSetting.value.x_field_weixin_subscribe) {
// 标记用户已关注
localStorage.setItem('weixin_subscribe', 1);
show.value = false;
show_qrcode.value = false;
}
// 凭密码填写设置
if (formSetting.value.mmtx_enable) {
......@@ -606,30 +579,43 @@ const checkUserPassword = () => {
}
}
function mergeAndDeduplicate(data) {
return data.reduce((acc, current) => {
const existingItemIndex = acc.findIndex(item =>
item.mode === current.mode && item.logical_op === current.logical_op
);
/**
* 合并并去重数据
* @param {Array} data - 输入的数据数组，每个元素包含mode、logical_op和expr_list属性
* @returns {Array} - 合并并去重后的数据数组
*
* 此函数旨在处理一组配置项，每个配置项由mode、logical_op和expr_list组成。
* 它首先根据mode和logical_op属性合并相同的项目，然后在每个合并的项目中去重expr_list。
* 合并的逻辑是基于mode和logical_op完全一致的情况下进行的。
* 去重的逻辑是通过比较op、values和field_name属性来确定expr_list中的表达式是否重复。
*/
const mergeAndDeduplicate = (data) => {
// 使用reduce函数合并数据
return data.reduce((acc, current) => {
// 查找是否已存在相同的项
const existingItemIndex = acc.findIndex(item =>
item.mode === current.mode && item.logical_op === current.logical_op
);
if (existingItemIndex !== -1) {
// Merge expr_list values
acc[existingItemIndex].expr_list = acc[existingItemIndex].expr_list.concat(current.expr_list);
} else {
// Push new item to the accumulator
acc.push(current);
}
if (existingItemIndex !== -1) {
// 如果存在相同项，则合并expr_list值
acc[existingItemIndex].expr_list = acc[existingItemIndex].expr_list.concat(current.expr_list);
} else {
// 如果不存在相同项，则将当前项添加到累积器中
acc.push(current);
}
return acc;
}, []).map(item => {
// Remove duplicates from expr_list
item.expr_list = item.expr_list.filter((expr, index, self) =>
index === self.findIndex(e => (
e.op === expr.op && JSON.stringify(e.values) === JSON.stringify(expr.values) && e.field_name === expr.field_name
))
);
return item;
});
// 返回处理后的累积器
return acc;
}, []).map(item => {
// 从expr_list中移除重复项
item.expr_list = item.expr_list.filter((expr, index, self) =>
index === self.findIndex(e => (
e.op === expr.op && JSON.stringify(e.values) === JSON.stringify(expr.values) && e.field_name === expr.field_name
))
);
return item;
});
}
// 根据规则隐藏相应字段
......@@ -746,6 +732,34 @@ const checkRules = () => {
});
}
// 处理没有绑定值的组件的赋值
// 省市区选择，图片上传，文件上传，电子签名，评分组件
// const area_picker = ref([]);
const image_uploader = ref([]);
const file_uploader = ref([]);
const table_editor = ref([]);
const sign = ref([]);
// const rate_picker = ref([]);
// const appointment = ref([]);
// 动态绑定ref数据
const setRefMap = (el, item) => {
if (el) {
if (item.component_props.tag === "image_uploader") {
image_uploader.value.push(el);
}
if (item.component_props.tag === "file_uploader") {
file_uploader.value.push(el);
}
if (item.component_props.tag === "table_editor") {
table_editor.value.push(el);
}
// if (item.component_props.tag === "sign") {
// sign.value.push(el);
// }
}
};
// 操作绑定自定义字段回调
const onActive = (item) => {
if (item?.key === "image_uploader") {
......@@ -862,24 +876,24 @@ const onRemove = (value) => { // 处理组件删除事件回调, 数据结构是
});
}
const adjGroupData = (values) => { // 调整group组件的数据结构
// let obj = {
// "field_10_group[0]_7653" : "1",
// "field_10_group[1]_4154" : "11",
// "field_11_group[0]_3440" : "2",
// "field_11_group[1]_4282" : "22"
// }
// const adjGroupData = (values) => { // 调整group组件的数据结构
// // let obj = {
// // "field_10_group[0]_7653" : "1",
// // "field_10_group[1]_4154" : "11",
// // "field_11_group[0]_3440" : "2",
// // "field_11_group[1]_4282" : "22"
// // }
// let arr = [{
// "field_10": "1",
// "field_11": "2",
// }, {
// "field_10": "11",
// "field_11": "22",
// }]
}
// // let arr = [{
// // "field_10": "1",
// // "field_11": "2",
// // }, {
// // "field_10": "11",
// // "field_11": "22",
// // }]
// }
const submitStatus = ref(false);
const submitStatus = ref(false); // 表单提交按钮状态
const successHandle = () => { // 表单成功提交后续操作
//在 iframe 中调用父页面中定义的变量 - Doris需要自由控制
......