Vben-Admin 框架，TypeScript、vue3的BasicFrom数据自动计算回写

在Vben-Admin框架中，使用TypeScript和Vue 3创建一个BasicForm并实现数据的自动计算回写，可以通过以下步骤实现：

1. 定义一个带有计算属性的Reactive对象，用于存储表单数据。
2. 使用watch或watchEffect来监听表单数据的变化，并执行计算。
3. 将计算结果赋回到表单数据对象中。

以下是一个简单的示例代码：

<template>
  <BasicForm @register="formRef" />
</template>
 
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form';
 
export default defineComponent({
  setup() {
    const formRef = ref();
    const formModel = ref({
      numberA: 0,
      numberB: 0,
      sum: 0,
    });
 
    // 计算总和
    watch([() => formModel.value.numberA, () => formModel.value.numberB], ([a, b]) => {
      formModel.value.sum = Number(a) + Number(b);
    });
 
    // 表单配置
    const schemas: FormSchema[] = [
      {
        field: 'numberA',
        label: '数字A',
        component: 'InputNumber',
      },
      {
        field: 'numberB',
        label: '数字B',
        component: 'InputNumber',
      },
      {
        field: 'sum',
        label: '总和',
        component: 'Input',
        readonly: true,
      },
    ];
 
    const [register] = useForm({
      labelWidth: 100,
      schemas,
      model: formModel,
    });
 
    return {
      formRef,
      register,
    };
  },
});
</script>

在这个例子中，我们定义了一个包含numberA、numberB和sum的表单数据模型。使用watch来监听numberA和numberB的变化，并在它们变化时自动计算sum的值。计算结果会立即反映到表单模型中，因此sum字段是只读的，它会显示自动计算得到的总和值。这样，每当用户更新输入字段numberA或numberB时，sum的值会自动更新，无需用户手动干预。