✨ feat: 适配cookie保存未完成表单

hookehuyr
Commit d966c945ffa90525808399401d669459591be111 d966c945 1 parent 28dc01e0
Showing 5 changed files with 111 additions and 9 deletions
src/components/AreaPickerField/MyComponent.vue
src/components/AreaPickerField/index.vue
src/components/EmailField/index.vue
src/components/PhoneField/index.vue
src/views/index.vue
--- a/src/components/AreaPickerField/MyComponent.vue
View file @d966c94
+++ b/src/components/AreaPickerField/MyComponent.vue
View file @d966c94
 <!--
  * @Date: 2023-03-29 15:27:02
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-07 18:43:14
+ * @LastEditTime: 2024-11-21 11:42:22
  * @FilePath: /data-table/src/components/AreaPickerField/MyComponent.vue
  * @Description: 文件描述
 -->
@@ -22,6 +22,7 @@
       placeholder="请填写详细地址"
       :border="false"
       :readonly="props.component_props.readonly"
+      @blur="onBlur"
     />
     <van-divider />
@@ -41,9 +42,14 @@
 import { ref } from 'vue'
 import { areaList } from "@vant/area-data";
 import { useCustomFieldValue } from '@vant/use';
+import Cookies from 'js-cookie';
+import { useRoute } from "vue-router";
+
+const $route = useRoute();
 // 获取父组件传值
 const props = inject('props');
+const emit = defineEmits(["active"]);
 const show_address = ref(!props.component_props.no_street);
 const address = ref(props.component_props.default?.input_value);
@@ -66,10 +72,31 @@ const result_value = computed(() => {
   }
 })
+const province = ref(null);
+const city = ref(null);
+const district = ref(null);
+
 const onConfirm = ({ selectedOptions }) => {
   fieldValue.value = selectedOptions.map((option) => option.text).join(" ");
   city_code.value = selectedOptions[2]?.value;
   showPicker.value = false;
+  //
+  province.value = selectedOptions[0].text;
+  city.value = selectedOptions[1].text;
+  district.value = selectedOptions[2].text;
+  emit("active", {
+    city_code: city_code.value,
+    province: province.value,
+    city: city.value,
+    district: district.value,
+    street: address.value
+  });
+};
+
+const onBlur = () => {
+  emit("active", {
+    street: address.value
+  });
 };
 // 此处传入的值会替代 Field 组件内部的 value
--- a/src/components/AreaPickerField/index.vue
View file @d966c94
+++ b/src/components/AreaPickerField/index.vue
View file @d966c94
 <!--
  * @Date: 2022-08-30 14:32:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-22 09:58:15
+ * @LastEditTime: 2024-11-21 12:17:06
  * @FilePath: /data-table/src/components/AreaPickerField/index.vue
  * @Description: 省市区选择控件
 -->
@@ -14,7 +14,7 @@
     </div>
     <van-field :name="item.key" :rules="rules" style="padding: 0;">
       <template #input>
-        <my-component />
+        <my-component @active="onActive" />
       </template>
     </van-field>
   </div>
@@ -24,6 +24,7 @@
 import { useRoute } from "vue-router";
 import MyComponent from './MyComponent.vue';
 import _ from 'lodash'
+import Cookies from 'js-cookie';
 const $route = useRoute();
 const props = defineProps({
@@ -82,6 +83,34 @@ const validatorMessage = (val, rule) => {
   }
 };
 const rules = [{ validator, message: validatorMessage }];
+
+// 子组件通信，适配规则触发
+const onActive = (val) => {
+  // 适配cookie保存未完成表单
+  const currentValue = JSON.stringify(val);
+  const existingCookie = Cookies.get($route.query.code);
+
+  if (existingCookie) {
+    // 如果Cookie存在，更新它
+    let obj = JSON.parse(existingCookie);
+    if (val.city_code) { // 修改了
+      let temp = JSON.parse(obj[props.item.key]);
+      temp.city_code = val.city_code;
+      temp.province = val.province;
+      temp.city = val.city;
+      temp.district = val.district;
+      obj[props.item.key] = JSON.stringify(temp); // 替换掉旧值
+    } else { // 只修改了地址
+      let temp = JSON.parse(obj[props.item.key]);
+      temp.street = val.street;
+      obj[props.item.key] = JSON.stringify(temp); // 替换掉旧值
+    }
+    Cookies.set($route.query.code, JSON.stringify(obj));
+  } else {
+    // 如果Cookie不存在，新增它
+    Cookies.set($route.query.code, JSON.stringify({ [props.item.key]: currentValue }));
+  }
+};
 </script>
 <style lang="less" scoped>
--- a/src/components/EmailField/index.vue
View file @d966c94
+++ b/src/components/EmailField/index.vue
View file @d966c94
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-07 18:13:59
+ * @LastEditTime: 2024-11-21 10:50:09
  * @FilePath: /data-table/src/components/EmailField/index.vue
  * @Description: 邮箱输入框
 -->
@@ -22,12 +22,15 @@
       :disabled="item.component_props.disabled"
       :readonly="item.component_props.readonly"
       clearable
+      @blur="onBlur(item)"
     />
   </div>
 </template>
 <script setup>
 import { useRoute } from "vue-router";
+import Cookies from 'js-cookie';
+
 const $route = useRoute();
 const props = defineProps({
   item: Object,
@@ -62,6 +65,22 @@ const validatorMessage = (val, rule) => {
   }
 };
 const rules = [{ validator, message: validatorMessage }];
+
+// 适配cookie保存未完成表单
+const onBlur = (item) => {
+  const currentValue = item.value;
+  const existingCookie = Cookies.get($route.query.code);
+
+  if (existingCookie) {
+    // 如果Cookie存在，更新它
+    let obj = JSON.parse(existingCookie);
+    obj[props.item.key] = currentValue; // 替换掉旧值
+    Cookies.set($route.query.code, JSON.stringify(obj));
+  } else {
+    // 如果Cookie不存在，新增它
+    Cookies.set($route.query.code, JSON.stringify({ [props.item.key]: currentValue }));
+  }
+}
 </script>
 <style lang="less" scoped>
--- a/src/components/PhoneField/index.vue
View file @d966c94
+++ b/src/components/PhoneField/index.vue
View file @d966c94
 <!--
  * @Date: 2022-09-02 10:46:03
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-19 15:17:46
+ * @LastEditTime: 2024-11-21 10:49:36
  * @FilePath: /data-table/src/components/PhoneField/index.vue
  * @Description: 手机输入框
 -->
@@ -41,6 +41,7 @@
       :required="item.component_props.required"
       :readonly="item.component_props.readonly"
       :border="false"
+      @blur="onBlur(item)"
     >
     </van-field>
     <van-field
@@ -72,6 +73,7 @@ import { useRoute } from "vue-router";
 import { wxInfo } from "@/utils/tools";
 import $ from "jquery";
 import { storeToRefs, mainStore } from "@/utils/generatePackage";
+import Cookies from 'js-cookie';
 const $route = useRoute();
 const props = defineProps({
@@ -171,6 +173,22 @@ const blurKeyboard = () => {
   // 还原border颜色
   content.css("border-color", "#eaeaea");
 };
+
+// 适配cookie保存未完成表单
+const onBlur = (item) => {
+  const currentValue = item.value;
+  const existingCookie = Cookies.get($route.query.code);
+
+  if (existingCookie) {
+    // 如果Cookie存在，更新它
+    let obj = JSON.parse(existingCookie);
+    obj[props.item.key] = currentValue; // 替换掉旧值
+    Cookies.set($route.query.code, JSON.stringify(obj));
+  } else {
+    // 如果Cookie不存在，新增它
+    Cookies.set($route.query.code, JSON.stringify({ [props.item.key]: currentValue }));
+  }
+}
 </script>
 <style lang="less" scoped>
--- a/src/views/index.vue
View file @d966c94
+++ b/src/views/index.vue
View file @d966c94
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-11-21 10:20:47
+ * @LastEditTime: 2024-11-21 12:15:57
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -502,19 +502,28 @@ onMounted(async () => {
   // TAG：创建组件类型
   createComponentType(formData.value);
+  const isJSON = (value) => {
+    try {
+      JSON.parse(value);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
   // TAG：不同类型提交表单处理
   if (page_type === 'add' && model === 'edit') { // 表单为新增状态, 检查是否有未完成的表单信息
     const existingCookie = Cookies.get($route.query.code);
     if (existingCookie) {
         // 如果Cookie存在，更新它
         let object = JSON.parse(existingCookie);
-        console.warn(object);
         // 默认值
         const objectMap = new Map(Object.entries(object)); // 将 object 转换为 Map，Object.entries() 方法用于返回一个给定对象自身可枚举属性的键值对数组，数组中的每个元素是一个包含键值对的数组，[ ["name", "Alice"], ["age", 30], ["city", "New York"] ]
         formData.value.forEach((item) => {
           if (objectMap.has(item.key)) {
-            console.warn(objectMap.get(item.key));
+            // 适配双重json字符串问题，比如地址
-            item.component_props.default = objectMap.get(item.key);
+            const value = isJSON(objectMap.get((item.key))) ? JSON.parse(objectMap.get((item.key))) : objectMap.get((item.key));
+            item.component_props.default = value;
           }
         });
       }