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

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-11-20 16:57:46
+ * @LastEditTime: 2024-11-20 18:27:26
  * @FilePath: /data-table/src/components/NameField/index.vue
  * @Description: 姓名输入框
 -->
@@ -27,6 +27,7 @@
       :disabled="item.component_props.disabled"
       :input-align="item.component_props.align"
       :border="false"
+      @blur="onBlur(item)"
     />
   </div>
 </template>
@@ -70,10 +71,8 @@ watch(
 );
 
 // 适配cookie保存未完成表单
-watch(
-    () => props.item.value,
-    (v) => {
-      const currentValue = v;
+const onBlur = (item) => {
+  const currentValue = item.value;
   const existingCookie = Cookies.get($route.query.code);
 
   if (existingCookie) {
@@ -85,8 +84,7 @@ watch(
     // 如果Cookie不存在，新增它
     Cookies.set($route.query.code, JSON.stringify({ [props.item.key]: currentValue }));
   }
-    }
-  );
+}
 </script>
 
 <style lang="less" scoped>

 <!--
  * @Date: 2022-09-14 14:44:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-19 15:22:41
+ * @LastEditTime: 2024-11-21 09:32:58
  * @FilePath: /data-table/src/components/NumberField/index.vue
  * @Description: 数字输入框
 -->
@@ -27,6 +27,7 @@
       readonly
       @touchstart.stop="showKeyboard($event)"
       :border="false"
+      @blur="onBlur(item)"
     >
     </van-field>
     <van-number-keyboard
@@ -55,6 +56,8 @@
 import $ from "jquery";
 import { storeToRefs, mainStore } from "@/utils/generatePackage";
 import { useRoute } from "vue-router";
+import Cookies from 'js-cookie';
+
 const $route = useRoute();
 
 const props = defineProps({
@@ -193,6 +196,22 @@ const rules = [{ validator, message: validatorMessage }];
 
 const onInput = (value) => {};
 const onDelete = () => {};
+
+// 适配cookie保存未完成表单
+const onBlur = (item) => {
+  const currentValue = v.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>

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-08-22 09:54:46
+ * @LastEditTime: 2024-11-21 09:25:23
  * @FilePath: /data-table/src/components/TextField/index.vue
  * @Description: 单行文本输入框(微信扫描功能)
 -->
@@ -21,7 +21,9 @@
       :required="item.required"
       :readonly="item.component_props.readonly || (item.component_props.is_camera_scan && !item.component_props.is_edit_camera_scan_result)"
       :disabled="item.component_props.disabled" :input-align="item.component_props.align"
-      :right-icon="item.component_props.is_camera_scan ? 'scan' : ''" @click-right-icon="clickRightIcon" />
+      :right-icon="item.component_props.is_camera_scan ? 'scan' : ''" @click-right-icon="clickRightIcon"
+      @blur="onBlur(item)"
+      />
   </div>
 </template>
 
@@ -67,10 +69,8 @@ watch(
 );
 
 // 适配cookie保存未完成表单
-watch(
-    () => props.item.value,
-    (v) => {
-      const currentValue = v;
+const onBlur = (item) => {
+  const currentValue = item.value;
   const existingCookie = Cookies.get($route.query.code);
 
   if (existingCookie) {
@@ -82,8 +82,7 @@ watch(
     // 如果Cookie不存在，新增它
     Cookies.set($route.query.code, JSON.stringify({ [props.item.key]: currentValue }));
   }
-    }
-  );
+};
 
 // 默认识别类型
 const scan_type_code = ref('ALL_CODE');

@@ -31,6 +31,7 @@
       autosize
       :maxlength="item.component_props.maxlength ? item.component_props.maxlength : null"
       :show-word-limit="item.component_props.maxlength"
+      @blur="onBlur(item)"
     />
   </div>
 </template>
@@ -61,10 +62,8 @@ onMounted(() => {
 })
 
 // 适配cookie保存未完成表单
-watch(
-    () => props.item.value,
-    (v) => {
-      const currentValue = v;
+const onBlur = (item) => {
+  const currentValue = item.value;
   const existingCookie = Cookies.get($route.query.code);
 
   if (existingCookie) {
@@ -76,8 +75,7 @@ watch(
     // 如果Cookie不存在，新增它
     Cookies.set($route.query.code, JSON.stringify({ [props.item.key]: currentValue }));
   }
-    }
-  );
+}
 </script>
 
 <style lang="less" scoped>