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

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]').value
        params.provinceId = province
        params.cityId = city
      } else {
   
        params.countryId = form.getFieldState('countryId').value
      }
      // 获取场站数据源