ApiSelect.vue文件版本更新之后联动更新字段不生效了

[RacingK93]

版本号：3.7.0

问题描述：

自从按照官方的更新把ApiSelect.vue文件中的
watchEffect(() => {
props.immediate && fetch();
});
改成props.immediate && fetch();
之后，页面联动选择数据查询就失效了。
比如选择设备品牌查询设备型号就无法调接口；
我是采用onchange然后写updateSchema
await updateSchema({
field: 'brandId',
component: 'ApiSelect',
componentProps: {
api: getDeviceBrandApi,
params: {
type: typeChoose,
},

这种形式去联动查询的；我把改回去就好了；

错误截图：

友情提示：

• 未按格式要求发帖、描述过于简单的，会被直接删掉;
• 描述问题请图文并茂，方便我们理解并快速定位问题;
• 如果使用的不是master，请说明你使用的分支;

[yang-xianzhu]

我记得当时把watchEffect去掉是因为初始化的时候会请求两次接口。

[zhangdaiscott]

zy

[liaozhiyang]

有更详细的代码吗？

[liaozhiyang]

你使用的场景是否如下：

测试代码：

<!-- 基本用法 -->
<template>
  <!-- 自定表单 -->
  <BasicForm @register="registerForm" @submit="handleSubmit" style="margin-top: 50px; margin-left: 50px" />
</template>

<script lang="ts" setup>
  //引入依赖
  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
  import { getAllRolesListNoByTenant, getAllTenantList } from '/@/views/system/user/user.api';

  //自定义表单字段
  const formSchemas: FormSchema[] = [
    {
      field: 'api01',
      component: 'ApiSelect',
      label: '设备品牌',
      colProps: { span: 12 },
      componentProps: {
        api: getAllRolesListNoByTenant,
        labelField: 'roleName',
        valueField: 'id',

        onChange: () => {
          updateSchema({
            field: 'api02',
            component: 'ApiSelect',
            componentProps: {
              api: getAllRolesListNoByTenant,
            },
          });
        },
      },
    },

    {
      field: 'api02',
      component: 'ApiSelect',
      label: '设备型号',
      colProps: { span: 12 },
      componentProps: {
        labelField: 'roleName',
        valueField: 'id',
      },
    },
  ];

  /**
   * BasicForm绑定注册;
   * useForm 是整个框架的核心用于表单渲染，里边封装了很多公共方法;
   * 支持（schemas: 渲染表单列，autoSubmitOnEnter：回车提交,submitButtonOptions：自定义按钮文本和图标等方法）；
   * 平台通过此封装，简化了代码，支持自定义扩展;
   */
  const [registerForm, { updateSchema }] = useForm({
    //注册表单列
    schemas: formSchemas,
    //回车提交
    autoSubmitOnEnter: true,
    //不显示重置按钮
    showResetButton: false,
    //自定义提交按钮文本和图标
    submitButtonOptions: { text: '提交01', preIcon: '' },
    //查询列占比 24代表一行 取值范围 0-24
    actionColOptions: { span: 17 },
  });

  /**
   * 点击提交按钮的value值
   * @param values
   */
  function handleSubmit(values: any) {
    console.log('提交按钮数据::::', values);
  }
</script>

<style scoped></style>

如果是如上使用，应该按如下更改：

使用ifShow 控制联动。

如果你不是以上使用，可以提供下测试代码，让我们更好兼容。之前那样编写无意支持了联动。

[RacingK93]

你使用的场景是否如下：

测试代码：

<!-- 基本用法 -->
<template>
  <!-- 自定表单 -->
  <BasicForm @register="registerForm" @submit="handleSubmit" style="margin-top: 50px; margin-left: 50px" />
</template>

<script lang="ts" setup>
  //引入依赖
  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
  import { getAllRolesListNoByTenant, getAllTenantList } from '/@/views/system/user/user.api';

  //自定义表单字段
  const formSchemas: FormSchema[] = [
    {
      field: 'api01',
      component: 'ApiSelect',
      label: '设备品牌',
      colProps: { span: 12 },
      componentProps: {
        api: getAllRolesListNoByTenant,
        labelField: 'roleName',
        valueField: 'id',

        onChange: () => {
          updateSchema({
            field: 'api02',
            component: 'ApiSelect',
            componentProps: {
              api: getAllRolesListNoByTenant,
            },
          });
        },
      },
    },

    {
      field: 'api02',
      component: 'ApiSelect',
      label: '设备型号',
      colProps: { span: 12 },
      componentProps: {
        labelField: 'roleName',
        valueField: 'id',
      },
    },
  ];

  /**
   * BasicForm绑定注册;
   * useForm 是整个框架的核心用于表单渲染，里边封装了很多公共方法;
   * 支持（schemas: 渲染表单列，autoSubmitOnEnter：回车提交,submitButtonOptions：自定义按钮文本和图标等方法）；
   * 平台通过此封装，简化了代码，支持自定义扩展;
   */
  const [registerForm, { updateSchema }] = useForm({
    //注册表单列
    schemas: formSchemas,
    //回车提交
    autoSubmitOnEnter: true,
    //不显示重置按钮
    showResetButton: false,
    //自定义提交按钮文本和图标
    submitButtonOptions: { text: '提交01', preIcon: '' },
    //查询列占比 24代表一行 取值范围 0-24
    actionColOptions: { span: 17 },
  });

  /**
   * 点击提交按钮的value值
   * @param values
   */
  function handleSubmit(values: any) {
    console.log('提交按钮数据::::', values);
  }
</script>

<style scoped></style>

如果是如上使用，应该按如下更改：

使用ifShow 控制联动。

如果你不是以上使用，可以提供下测试代码，让我们更好兼容。之前那样编写无意支持了联动。

是的，就是你说的这个用法，那岂不是系统中之前的联动表单的地方都要加上ifShow: true和ifShow:false？

[liaozhiyang]

已修复，下一版本发布。（代码还原）