当前位置：首页 > news >正文

`Pinia` + `Formily` + `useTable` 实现搜索条件缓存方案

news 来源：原创 2025/5/10 4:24:25

`Pinia` + `Formily` + `useTable` 实现搜索条件缓存方案

背景

在当前的应用体验中，每当用户刷新页面或退出系统时，之前的搜索条件就会消失不见。为了进一步提升工作效率并增强用户体验，希望能够实现这样一个功能：即使用户进行了页面刷新或是暂时离开了平台，再次返回时也能自动恢复其上一次的搜索设置。这样不仅能够大大节省用户重复输入的时间与精力，还能让整个使用过程变得更加流畅、便捷。

方案

在我们对表单系统进行深度重构的过程中，我们选择了引入Formily这一先进的表单解决方案。通过这一方案，我们实现了表单功能的显著优化与升级。现在，当用户二次启用表单时，他们可以直接利用Formily提供的API进行统一赋值操作，无需再手动逐一填写各项数据。更为便捷的是，这种赋值方式还能够自动触发表单中的联动关系，确保所有相关字段都能根据赋值内容自动更新，从而极大地减少了人工操作的需求，提高了工作效率。

难点

1、需要细致梳理表单项之间的交互逻辑，并巧妙构思如何将其转化为Formily所提供的强大联动方案。在此过程中，还需考虑是否需要将这些逻辑单独抽离出来，封装成可复用的组件，以便在后续的开发中能够轻松调用。同时，对于自定义组件，还需要加入桥接层，使其能够完美融入Formily的规范体系，确保整个表单系统的一致性和高效性。
2、在使用远程搜索功能的下拉表单项时，我遇到了一个挑战：当用户再次启用该表单项时，数据源会丢失，导致无法正常回显之前选择的内容。为了解决这个问题，需要深入分析远程搜索的工作原理，并寻找合适的方法来保存和恢复数据源，以确保用户能够顺畅地使用这一功能。
3、对于选择性表单项，需要处理立即触发请求的情况。然而，Formily表单并没有提供统一的API来处理这种需求。因此，需要自行设计和实现相应的处理机制，以确保在用户做出选择后，能够立即触发请求并更新表单状态。这将需要深入了解Formily的底层原理，并灵活运用其提供的API和工具来实现我们的目标。

实现步骤

step1：重构表单

使用Formily重构现有搜索区域表单

1、基础内容

<template><div class="filter-content"><common-schema-form :form="form" class="filter-form"><component :is="FormilySchema.SchemaField" :schema="formSchema" /></common-schema-form><el-button class="search-class" @click="onSearch">{{ t('I18N_COMMON_SEARCH') }}</el-button></div>
</template>
<script lang='ts' setip>
import CommonSchemaForm from '@pkg/common-lib/components/common/common-schema-form/index.vue'
import { useSchema } from '@pkg/common-lib/components/common/common-schema-form/useSchema'
import { createForm, ISchema, onFieldValueChange } from '@pkg/common-lib/components/common/common-schema-form/config'// 实例化表单 Form
const form = createForm({})// 创建表单 Schema
const formSchema = reactive<ISchema>({// ... 符合 JsonSchema 规范
}) </script>

2、根据现有表单项组件构建Formily组件库
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3、根据现有表单项之间的联动关系添加Formily联动

const form = createForm({effects() {// 监听国家、省份城市 动态获取场站数据源onFieldValueChange('*(countryId, [province,city])', (filed, form) => {if (!first.value) {form.setFieldState('psIds', (state) => {state.value = undefined})}// 获取数据const params: any = {pageNo: 1,pageSize: 10000,}if (sungrowUtils.isChinaSite()) {const [province, city] = form.getFieldState('[province,city]').valueparams.provinceId = provinceparams.cityId = city} else {params.countryId = form.getFieldState('countryId').value}// 获取场站数据源

`Pinia` + `Formily` + `useTable` 实现搜索条件缓存方案

Pinia + Formily + useTable 实现搜索条件缓存方案背景在当前的应用体验中，每当用户刷新页面或退出系统时，之前的搜索条件就会消失不见。为了进一步提升工作效率并增强用户体验，希望能够实现这样一个功能：即使用户进行了页面刷新或是暂时离开了平台，再次返回时也能自动…...

编程日记 2025/5/10 4:24:25

Trader Joe‘s EDI 需求分析

Trader Joes成立于1967年，总部位于美国加利福尼亚州，是一家独特的零售商，专注于提供高质量且价格合理的食品。公司经营范围涵盖了各类杂货、冷冻食品、健康食品以及独特的本地特色商品。 EDI需求分析电子数据交换（EDI&#xff…...

编程日记 2025/5/10 5:22:38

【BUG】conda虚拟环境下，pip install安装直接到全局python目录中

问题描述 conda虚拟环境下，有的虚拟环境的python不能使用（which python时直接使用全局路径下的python），且pip install也会安装到全局路径中，无法安装到conda虚拟环境中。解决方案查看虚拟环境的PIP缓存默认路径&…...

编程日记 2025/5/10 3:52:40

用Shader glsl实现一个简单的PBR光照模型

PBR模型定义了各种光照属性，如基础颜色、金属度、粗糙度等，就像给物体设定各种 “性格特点”。顶点着色器负责把顶点从模型空间转换到裁剪空间，同时计算一些用于光照计算的参数，就像给顶点 “搬家” 并准备好 “行李”。而片段着色…...

编程日记 2025/5/7 15:41:29

Linux系统使用ollama本地安装部署DeepSeekR1 + open-webui

Linux系统使用ollama本地安装部署DeepSeekR1 open-webui 1. 首先，下载安装ollama #下载安装脚本并执行 curl -fsSL https://ollama.com/install.sh | sh #安装完成后查看ollama版本 ollama --version2. 使用ollama下载deepseek #不同的参数规格对硬件有不同的要…...

编程日记 2025/5/4 22:19:13

学习星开源在线考试教育系统

学习星开源考试系统项目介绍项目概述： 学习星在线考试系统是一款基于Java和Vue.js构建的前后端分离的在线考试解决方案。它旨在为教育机构、企业和个人提供一个高效、便捷的在线测试平台，支持多种题型，包括但不限于单选题、多选题、判断…...

编程日记 2025/5/10 6:00:50

树莓派通过手机热点，无线连接PC端电脑，进行远程操作

树莓派通过手机热点实现无线连接具有以下几点优势： 1.该方式能够联网，方便在项目开发时下载一些数据包。 2.该方式能够通过手机端查看树莓派IP地址(有些情况树莓派ip地址会发生改变) 借鉴链接如下： 树莓派的使用网线及无线连接方法及手机…...

编程日记 2025/5/7 15:41:27

【工业安全】-CVE-2022-35561- Tenda W6路由器栈溢出漏洞

文章目录 1.漏洞描述 2.环境搭建 3.漏洞复现 4.漏洞分析 4.1：代码分析 4.2：流量分析 5.poc代码： 1.漏洞描述漏洞编号：CVE-2022-35561 漏洞名称：Tenda W6 栈溢出漏洞威胁等级：高危漏洞详情&#xff1…...

编程日记 2025/5/6 6:37:46

Windows环境管理多个node版本

前言在实际工作中，如果我们基于Windows系统开发，同时需要维护老项目，又要开发新项目，且不同项目依赖的node版本又不同时，那么就需要根据项目切换不同的版本。本文使用Node Version Manager（nvm&#xff0…...

编程日记 2025/5/9 18:26:07

git 沙盒下（二）

url ：Learn Git Branching 高级git 多次Rebase 最开始我先把bugFix分支先rebase到main上，之后再把c7合并到c6 ，之后就差合并为一个分支了，但是无论移动c7还是another分支都无法合并，都会在原地停留后来根据提示最…...

编程日记 2025/5/10 6:29:41

基于JavaSpringmvc+myabtis+html的鲜花商城系统设计和实现

基于JavaSpringmvcmyabtishtml的鲜花商城系统设计和实现 🍅 作者主页网顺技术团队 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 🍅 文末获取源码联系方式 📝 🍅 查看下方微信号获取联系方式承接各种定制系…...

编程日记 2025/5/10 3:43:26

vue-plugin-hiprint （vue2

页面效果 <template><div><div class"d-flex flex-column mt5"><div class"d-flex flex-row " style"margin-bottom: 10px;justify-content: center;"><div class"paper&quo…...

编程日记 2025/5/10 5:51:38

网站地址栏怎么变成HTTPS开头？

在当今的数字世界中，网络安全已成为不可或缺的一部分。对于网站管理员和所有者来说，确保访问者数据的安全和隐私至关重要。HTTPS是一种加密的通信协议，通过在客户端和服务器之间建立安全连接来保护数据传输。将网站从HTTP升级到HTTPS不仅提升…...

编程日记 2025/5/10 5:28:12

手机用流量怎样设置代理ip?

互联网各领域资料分享专区(不定期更新)： Sheet...

编程日记 2025/5/1 18:08:48

Web渗透实战--XSS 常用语句以及绕过思路

Web渗透实战–XSS 常用语句以及绕过思路 0x01：干货 - XSS 测试常用标签语句 0x0101： 标签 <a hrefjavascript:console.log(1)>XSS1</a> &…...

编程日记 2025/5/10 5:34:14

哈希表-两个数的交集

代码随想录-刷题笔记 349. 两个数组的交集 - 力扣（LeetCode） 内容: 集合的使用 , 重复的数剔除掉，剩下的即为交集，最后加入数组即可。 class Solution {public int[] intersection(int[] nums1, int[] nums2) {Set<Integer…...

编程日记 2025/5/10 6:32:50

“数字+实体“双引擎发力树莓集团打造翠屏区首个智慧产业孵化标杆

2025 年 2 月 13 日，宜宾市翠屏区招商引资项目集中签约活动圆满举行。树莓集团产业合作总监童曦鸣代表企业出席并签约，将在翠屏区打造数字经济示范项目。此次签约，树莓集团将以 “数字实体” 双引擎发力。在数字产业化方面，凭…...

编程日记 2025/5/8 9:25:17

PostgreSQL 数据库压力测试指南

一、为什么需要压力测试？ 数据库需要进行压力测试的原因主要包括以下几个方面： 性能评估：通过压力测试，可以了解数据库在高负载情况下的性能表现，包括响应时间、吞吐量和资源利用率等。这有助于确定系统的性能瓶颈。 …...

编程日记 2025/5/10 6:21:24

npm : 无法加载文件 C:\nvm\v20.11.1\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅

在vscode中运行前端项目时npm run dev 报错：npm : 无法加载文件 C:\nvm\v20.11.1\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID135170 中的 about_Execution_Policies。所在位置行:1…...

编程日记 2025/5/1 18:09:37

-bash:/usr/bin/rm: Argument list too long 解决办法

问题概述小文件日志太多导致无法使用rm命令，因为命令行参数列表的长度超过了系统允许的最大值。需要删除/tmp目录下的所有文件，文件数量比较多。 ls -lt /tmp | wc -l 5682452 解决方法如下： 使用find -exec 遍历，然后执行删…...

编程日记 2025/5/9 13:33:00

【deepseek 部署中的常见问题及解决方案--亲测有效】

deepseek 部署中的常见问题及解决方案一、环境与安装相关问题二、配置相关问题三、运行与性能问题四、其他常见问题一、环境与安装相关问题 Python版本不兼容问题描述：在部署DeepSeek时，系统提示Python版本不兼容。解决方法：DeepSeek推荐…...

编程日记 2025/5/9 17:18:21

【React】react-redux+redux-toolkit实现状态管理

安装 npm install reduxjs/toolkit react-reduxRedux Toolkit 是官方推荐编写Redux的逻辑方式，用于简化书写方式React-redux 用来链接Redux和React组件之间的中间件使用定义数据创建要管理的数据模块 store/module/counter.ts import { createSlice, Payloa…...

编程日记 2025/5/10 6:25:33

LabVIEW用户界面（UI）和用户体验（UX）设计

作为一名 LabVIEW 开发者，满足功能需求、保障使用便捷与灵活只是基础要求。在如今这个用户体验至上的时代，为 LabVIEW 应用程序设计直观且具有美学感的界面，同样是不容忽视的关键任务。一个优秀的界面设计，不仅能提升用户对程序的…...

编程日记 2025/5/9 8:05:25

期权帮 | 场外个股期权可以做吗，风险高吗?

锦鲤三三每日分享期权知识，帮助期权新手及时有效地掌握即市趋势与新资讯！ 场外个股期权可以做吗，风险高吗? 场外个股期权，就是在正式的交易所之外进行交易的个股期权。注：这里的“场外”指的是这类交易不在像沪深…...

编程日记 2025/5/10 6:19:20

【Viper】配置格式与支持的数据源与go案例

Viper 是一个用于 Go 应用程序的配置管理库，支持多种配置格式和数据源。安装依赖 go get github.com/spf13/viper go get github.com/spf13/viper/remote go get go.etcd.io/etcd/client/v3"github.com/spf13/viper/remote"要写在etcd客户端import里 1…...

编程日记 2025/5/10 3:06:50

【工具变量】地级市数字基础设施水平数据（2003-2024年）

一、数据来源：数据涵盖了2003-2024年间地级市新型数字基础设施的发展水平测量值。数据的核心来自地方政府工作报告中提及的相关词汇，并通过对这些报告的分词和频次统计，得出每个城市在该领域的数字基础设施发展水平。数据覆盖全国285个地级市…...

编程日记 2025/5/10 6:03:58

Ae：常见的光照控件和材质控件

在 After Effects中，几种模拟效果都有类似的光照控件和材质控件，比如，焦散、卡片动画、碎片等。光照控件和材质控件允许用户模拟不同光源、阴影和高光效果，控制表面反射特性，从而实现真实的光照和反射模拟。适用于材质…...

编程日记 2025/5/10 6:23:30

POI 的 Excel 读写操作教程

POI 的 Excel 读写操作教程一、POI 简介 Apache POI 是一款在 Java 开发中广受欢迎的开源库，主要用于处理各种 Microsoft Office 文件格式，Excel 文件便是其中之一。凭借其功能强大的 API，POI 不仅支持对 Excel 文件的读取、写入和修改&am…...

编程日记 2025/5/9 16:36:02

java处理pgsql的text[]类型数据问题

背景公司要求使用磐维数据库，于是去了解了这个是基于PostgreSQL构建的，在使用时有场景一条图片数据中可以投放到不同的页面，由于简化设计就放在数组中，于是使用了text[]类型存储；表结构 #这是一个简化版表结构&…...

编程日记 2025/5/10 6:30:44

数据结构：Map Set(一)

目录一、搜索树 1、概念 2、查找 3、插入 4、删除二、搜索 1、概念及场景 2、模型 （1）纯key模型 （2）Key-Value模型三、Map的使用 1、什么是Map？ 2、Map的常用方法 （1）V put(K …...

编程日记 2025/5/3 23:08:13

Ansible 自动化 Linux 运维：解放你的双手，让运维变得简单

Ansible 自动化 Linux 运维：解放你的双手，让运维变得简单在现代 IT 运维中，随着系统规模的不断扩展，如何高效地管理和维护大量的服务器成为了一项巨大挑战。传统的手动操作不仅费时费力，还容易出错。而 Ansible 作为一款开源的自动化运维工具，凭借其易用性和强大的功能…...

编程日记 2025/5/10 6:33:53

不需要移植和配置xinetd 等相类似执行文件，tftp-hpa服务器交叉移植使用说明

tftp-hpa-5.2.tar.gz :下载链接 https://download.csdn.net/download/lyeffort/90361414 tar -xvf tftp-hpa-5.2.tar.gz -C /root/tftpd/ # ./autogen.sh # export PATH/root/linux-arm-tools/mips-linux-gclibc/bin:$PATH # mkdir /root/tftpd/install # ./configure --h…...

编程日记 2025/5/10 6:23:30

Pinia + Formily + useTable 实现搜索条件缓存方案

背景

方案

难点

实现步骤

step1：重构表单

相关文章：

`Pinia` + `Formily` + `useTable` 实现搜索条件缓存方案