hookehuyr

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

......@@ -61,6 +61,7 @@
import { useRoute } from "vue-router";
import { styleColor } from "@/constant.js";
import $ from "jquery";
import Cookies from 'js-cookie';
const $route = useRoute();
const props = defineProps({
......@@ -124,6 +125,25 @@ const validatorMessage = (val, rule) => {
}
};
const rules = [{ validator, message: validatorMessage }];
// 适配cookie保存未完成表单
watch(
() => props.item.value,
(v) => {
const currentValue = v;
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-30 13:46:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-07 18:14:51
* @LastEditTime: 2024-11-20 18:23:21
* @FilePath: /data-table/src/components/PickerField/index.vue
* @Description: 单列选择器组件
-->
......@@ -23,6 +23,7 @@
<script setup>
import { useRoute } from "vue-router";
import MyComponent from './MyComponent.vue';
import Cookies from 'js-cookie';
const $route = useRoute();
......@@ -47,8 +48,22 @@ const ReadonlyShow = computed(() => {
// 子组件通信,适配规则触发
const onActive = (val) => {
emit("active", val);
// 适配cookie保存未完成表单
const currentValue = val.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>
......