查询表单数据和修改表单数据接口联调

hookehuyr
Commit b09accb6eb15f28c47a2e68d13ac5101a5ed063b b09accb6 1 parent 2e57d941
Showing 2 changed files with 86 additions and 17 deletions
src/api/data.js
src/views/index.vue
--- a/src/api/data.js
View file @b09accb
+++ b/src/api/data.js
View file @b09accb
 /*
  * @Date: 2022-06-17 14:54:29
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-17 13:49:35
+ * @LastEditTime: 2024-06-12 15:06:04
  * @FilePath: /data-table/src/api/data.js
  * @Description: 表单数据接口
  */
@@ -9,6 +9,8 @@ import { fn, fetch } from '@/api/fn';
 const Api = {
   ADD_FORM_DATA: '/srv/?a=add_formdata',
+  QUERY_FORM_DATA: '/srv/?a=query_formdata',
+  MODI_FORM_DATA: '/srv/?a=modi_formdata',
 }
 /**
  * @description: 添加表单数据
@@ -16,3 +18,18 @@ const Api = {
  * @param: data 待添加的数据，json对象结构；键值对记录变更的字段和值；
  */
 export const addFormDataAPI = (params) => fn(fetch.post(Api.ADD_FORM_DATA, params));
+
+/**
+ * @description: 查询表单数据
+ * @param: form_code 表单唯一标识
+ * @param: id 数据ID
+ */
+export const queryFormDataAPI = (params) => fn(fetch.get(Api.QUERY_FORM_DATA, params));
+
+/**
+ * @description: 修改表单数据
+ * @param: form_code 表单唯一标识
+ * @param: id 数据ID
+ * @param: data 待添加的数据，json对象结构；键值对记录变更的字段和值；
+ */
+export const modiFormDataAPI = (params) => fn(fetch.post(Api.MODI_FORM_DATA, params));
--- a/src/views/index.vue
View file @b09accb
+++ b/src/views/index.vue
View file @b09accb
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-07 15:05:43
+ * @LastEditTime: 2024-06-14 10:04:24
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -78,6 +78,10 @@
   <div style="text-align: center; color: #545454; font-size: 0.85rem; padding-bottom: 2rem">
     提交即授权该表单收集你的填写信息
   </div>
+  <div>
+    <!-- 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">
     <div class="wrapper">
       <div class="block">
@@ -126,7 +130,7 @@ import {
 } from "@/utils/generatePackage.js";
 import { useRoute } from "vue-router";
 import { queryFormAPI, postVerifyPasswordAPI } from "@/api/form.js";
-import { addFormDataAPI } from "@/api/data.js";
+import { addFormDataAPI, queryFormDataAPI, modiFormDataAPI } from "@/api/data.js";
 import { showSuccessToast, showFailToast } from "vant";
 import { wxInfo, getUrlParams } from "@/utils/tools";
 import { styleColor } from "@/constant.js";
@@ -163,6 +167,8 @@ const postData = ref({});
 // 编辑模式不能提交操作
 const model = $route.query.model;
+// 标记表单类型-只读标识
+const form_type = $route.query.type;
 // 模仿金数据的扩展参数
 const x_field_1 = $route.query.x_field_1 ? $route.query.x_field_1 : null;
 // 周期ID标识
@@ -440,19 +446,30 @@ onMounted(async () => {
   //     "interaction_type": "h5edit"
   // })
   formData.value = formatData(page_form);
-  // TODO：再次提交测试, 需要获取原来表单数据
+
-  formData.value.forEach((item) => {
+  // TAG：获取原来表单数据
-    if (item.key === 'field_32') {
+  // iframe传值openid
-      // 不同组件默认值可能获取方式设定不一样，需要检查下
+  const iframe_openid = getUrlParams(location.href) ? getUrlParams(location.href).openid : '';
-      item.component_props.default = '12345657';
+  const data_id = $route.query.data_id;
-    }
+  if (data_id) { // 如果有data_id，则获取历史数据 否则获取表单默认值
-  });
+    const history_data = await queryFormDataAPI({ form_code: $route.query.code, data_id, openid: iframe_openid });
-  // TODO: 设置读写权限 read_only read_write
+    if (history_data.code) {
-  formData.value.forEach((item) => {
+      let object = history_data.data; // 表单数据
-    if (item.key === 'field_32') {
+      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 (form_type === 'readonly') {
               item.component_props.readonly = true;
             }
+          }
+        }
       });
+    }
+  }
+
   // TAG: mock数据
   mockData.value = [
     {
@@ -519,9 +536,11 @@ onMounted(async () => {
       },
     },
   ];
+
   // 生成自定义组件
   // createComponentType(mockData.value);
   createComponentType(formData.value);
+
   // 过期时间显示
   notice_text.value = `表单报名将在 ${formSetting.value.sjsj_end_time} 后结束`;
   // 判断是否需要关注公众号, 弹出二维码识别
@@ -716,7 +735,7 @@ const onActive = (item) => {
   }
   if (item?.type === "checkbox") { // 多选控件
     const checkbox_value = _.cloneDeep(item.value)
-    checkbox_value.forEach((element, index) => {
+    checkbox_value?.forEach((element, index) => {
       for (const key in item.affix) {
         if (item.affix[key] && element === key) {
           checkbox_value[index] = item.affix[key]
@@ -738,9 +757,9 @@ const validOther = () => {
   if (image_uploader.value) {
     // 图片上传
     image_uploader.value.forEach((item, index) => {
-      if (!image_uploader.value[index].validImageUploader()) {
+      if (image_uploader.value[index]?.validImageUploader && !image_uploader.value[index]?.validImageUploader()) {
         valid = {
-          status: image_uploader.value[index].validImageUploader(),
+          status: image_uploader.value[index]?.validImageUploader(),
           key: "image_uploader",
         };
         return false;
@@ -750,7 +769,7 @@ const validOther = () => {
   if (file_uploader.value) {
     // 文件上传
     file_uploader.value.forEach((item, index) => {
-      if (!file_uploader.value[index].validFileUploader()) {
+      if (file_uploader.value[index].validFileUploader && !file_uploader.value[index].validFileUploader()) {
         valid = {
           status: file_uploader.value[index].validFileUploader(),
           key: "file_uploader",
@@ -827,6 +846,9 @@ const onSubmit = async (values) => {
     submitStatus.value = true;
     // iframe传值openid
     const iframe_openid = getUrlParams(location.href) ? getUrlParams(location.href).openid : '';
+    //
+    const data_id = getUrlParams(location.href) ? getUrlParams(location.href).data_id : '';
+    if (!data_id) { // 正常表单提交
       // 通过验证
       const result = await addFormDataAPI({
         form_code: $route.query.code,
@@ -854,6 +876,36 @@ const onSubmit = async (values) => {
         submitStatus.value = false;
       }
     } else {
+      // 编辑模式表单提交
+      const result = await modiFormDataAPI({
+        form_code: $route.query.code,
+        data: postData.value,
+        openid: iframe_openid,
+        data_id
+      });
+      // TODO: 后续流程可能不一致，需要讨论
+      if (result.code) {
+        // 提交按钮禁用状态
+        submitStatus.value = false;
+        //
+        showSuccessToast("提交成功");
+        // 缓存表单返回值
+        store.changeSuccessInfo(result.data);
+        // 如果类型为跳转网页
+        if (result.data.commit_action === 'url') {
+          window.location.href = result.data.commit_url;
+        } else {
+          // 跳转成功页面
+          $router.push({
+            path: "/success",
+          });
+        }
+      } else {
+        // 提交按钮禁用状态
+        submitStatus.value = false;
+      }
+    }
+  } else {
     // 提交按钮禁用状态
     submitStatus.value = false;
     console.warn(validOther().key + "不通过验证");