hookehuyr

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

<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-29 13:22:00
* @LastEditTime: 2024-11-21 12:41:40
* @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
* @Description: 树形组件
-->
......@@ -284,6 +284,7 @@ import '@wsfe/vue-tree/style.css';
import $ from 'jquery';
import _ from 'lodash';
import { showDialog, showToast } from 'vant';
import Cookies from 'js-cookie';
// 获取父组件传值
const props = inject('props');
......@@ -378,15 +379,17 @@ const openTree = () => { // 点击组件展示框回调
if (props.component_props.readonly) return false; // 只读判断
// 打开弹窗
showPopover.value = true;
// 获取数据
nextTick(() => {
// 动态判断点击显示的tab,默认点击第一个
onClickTab({ title: tabList.value[0]['title'] })
// getDeptTreeData();
// 获取已选择的数据
checkedGroup.value = _.cloneDeep(emitCheckedGroup.value);
syncResultToList(); // 同步勾选状态
setTimeout(() => { // 延时处理,防止数据未加载完就执行
// 获取已选择的数据
checkedGroup.value = _.cloneDeep(emitCheckedGroup.value);
syncResultToList(); // 同步勾选状态
}, 100);
// 树形结构底部高度可视度
if (!$('#deptTree').find('.tree-placeholder').length) {
$('#deptTree').find('.ctree-tree__block-area').append('<div class="tree-placeholder" style="height: 10vh;"></div>');
......@@ -461,6 +464,19 @@ const onConfirmClick = () => { // 确定操作
emitCheckedGroup.value = _.cloneDeep(checkedGroup.value);
// 发送到表单数据
tree_select_value.value = [].concat(...Object.values(emitCheckedGroup.value));
// 适配cookie保存未完成表单
const currentValue = tree_select_value.value;
const existingCookie = Cookies.get($route.query.code);
if (existingCookie) {
// 如果Cookie存在,更新它
let obj = JSON.parse(existingCookie);
obj[props.key] = currentValue; // 替换掉旧值
Cookies.set($route.query.code, JSON.stringify(obj));
} else {
// 如果Cookie不存在,新增它
Cookies.set($route.query.code, JSON.stringify({ [props.key]: currentValue }));
}
}
const searchInputRef = ref(null); // 搜索输入框Ref
......
<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-07 18:14:41
* @LastEditTime: 2024-11-21 12:29:18
* @FilePath: /data-table/src/components/OrgPickerField/index.vue
* @Description: 树形组件
-->
......