fix 代码整理

hookehuyr
Commit e688ca6612c7648c836faf82c5c2659d35522eb8 e688ca66 1 parent 0ccd2b43
Showing 1 changed file with 130 additions and 116 deletions
src/views/index.vue
--- a/src/views/index.vue
View file @e688ca6
+++ b/src/views/index.vue
View file @e688ca6
 <!--
  * @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端判断封面图片高度
+// // web端判断封面图片高度
-const is_pc = computed(() => wxInfo().isPC);
+// const is_pc = computed(() => wxInfo().isPC);
-const PHeaderHeight = computed(() => {
+// const PHeaderHeight = computed(() => {
-  if (is_pc.value) {
+//   if (is_pc.value) {
-    return "35vh";
+//     return "35vh";
-  } else {
+//   } else {
-    return "20vh";
+//     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_cover = ref("");
-const PHeader_title = ref("");
+// const PHeader_title = ref("");
-const mockData = 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 notice_text = ref(""); // 顶部提示文字
-const show = ref(false);
+const show_qrcode = ref(false); // 显示二维码
-const qr_url = ref("");
+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 =>
+ * @param {Array} data - 输入的数据数组，每个元素包含mode、logical_op和expr_list属性
-            item.mode === current.mode && item.logical_op === current.logical_op
+ * @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) {
+    if (existingItemIndex !== -1) {
-            // Merge expr_list values
+        // 如果存在相同项，则合并expr_list值
-            acc[existingItemIndex].expr_list = acc[existingItemIndex].expr_list.concat(current.expr_list);
+        acc[existingItemIndex].expr_list = acc[existingItemIndex].expr_list.concat(current.expr_list);
-        } else {
+    } else {
-            // Push new item to the accumulator
+        // 如果不存在相同项，则将当前项添加到累积器中
-            acc.push(current);
+        acc.push(current);
-        }
+    }
-        return acc;
+    // 返回处理后的累积器
-    }, []).map(item => {
+    return acc;
-        // Remove duplicates from expr_list
+  }, []).map(item => {
-        item.expr_list = item.expr_list.filter((expr, index, self) =>
+      // 从expr_list中移除重复项
-            index === self.findIndex(e => (
+      item.expr_list = item.expr_list.filter((expr, index, self) =>
-                e.op === expr.op && JSON.stringify(e.values) === JSON.stringify(expr.values) && e.field_name === expr.field_name
+          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 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组件的数据结构
+// const adjGroupData = (values) => { // 调整group组件的数据结构
-  // let obj = {
+//   // let obj = {
-  //   "field_10_group[0]_7653" : "1",
+//   //   "field_10_group[0]_7653" : "1",
-  //   "field_10_group[1]_4154" : "11",
+//   //   "field_10_group[1]_4154" : "11",
-  //   "field_11_group[0]_3440" : "2",
+//   //   "field_11_group[0]_3440" : "2",
-  //   "field_11_group[1]_4282" : "22"
+//   //   "field_11_group[1]_4282" : "22"
-  // }
+//   // }
-  // let arr = [{
+//   // let arr = [{
-  //   "field_10": "1",
+//   //   "field_10": "1",
-  //   "field_11": "2",
+//   //   "field_11": "2",
-  // }, {
+//   // }, {
-  //   "field_10": "11",
+//   //   "field_10": "11",
-  //   "field_11": "22",
+//   //   "field_11": "22",
-  // }]
+//   // }]
-}
+// }
-const submitStatus = ref(false);
+const submitStatus = ref(false); // 表单提交按钮状态
 const successHandle = () => { // 表单成功提交后续操作
   //在 iframe 中调用父页面中定义的变量 - Doris需要自由控制