# 9.10 数据录入组件

:::tip 概述
本节介绍前端项目中常用的数据录入组件，包括表单（BasicForm）、弹窗表单和上传组件的使用方法。
:::

## Form 表单组件

```vue
<template>
  <BasicForm @register="registerForm" />
</template>

<script setup>
import { BasicForm, useForm } from '@/components/Form';

const [registerForm] = useForm({
  schemas: [
    {
      field: 'name',
      label: '名称',
      component: 'Input',
      required: true,
    },
    {
      field: 'status',
      label: '状态',
      component: 'Select',
      componentProps: {
        options: [
          { label: '在用', value: 1 },
          { label: '停用', value: 2 },
        ],
      },
    },
  ],
});
</script>
```

:::tip 前端校验与后端 FormRequest 的关系
`schemas` 的 `required`/校验规则是**体验层**（即时提示）；后端 `Http/Requests/*.php` 的 `rules()` 才是**最终防线**。两边规则应保持一致（如 max 长度、in 枚举值），以后端为准。
:::

## Modal 弹窗组件

```vue
<template>
  <BasicModal @register="registerModal" @ok="handleSubmit" />
</template>

<script setup>
import { BasicModal, useModal } from '@/components/Modal';

const [registerModal, { openModal, closeModal }] = useModal();

// 打开弹窗
const handleAdd = () => {
  openModal(true, { isUpdate: false });
};

// 提交
const handleSubmit = async () => {
  const values = await getFormValues();
  await exampleAdd(values);
  closeModal();
};
</script>
```

## Upload 上传组件

```vue
<template>
  <BasicUpload v-model="formData.avatar" :action="uploadUrl" />
</template>

<script setup>
import { BasicUpload } from '@/components/Upload';
const uploadUrl = '/api/upload/uploadFile';   // 需认证 + sys:upload:file 权限
</script>
```

:::tip 上传字段值
绑定值建议存 `filePath`（相对路径），Service 的 `fileFields` 归一化入库、读取时自动补全域名。详见 [7.1 文件上传全流程](/zh/tools/upload.html)。
:::

## Editor 富文本编辑器

```vue
<template>
  <Editor v-model="formData.content" />
</template>

<script setup>
import Editor from '@/components/Editor/index.vue';
</script>
```

（后端需在 Service 配置 `contentFields` 启用 `[IMG_URL]` 占位处理，见 [7.3 富文本处理](/zh/tools/rich-text.html)。）

## Password 密码强度组件

```vue
<template>
  <Password v-model="formData.password" />
</template>

<script setup>
import { Password } from '@/components/Password';
</script>
```

（后端密码策略为 bcrypt 双重加盐，`BCRYPT_ROUNDS=12`，见 [5.6 密码加密服务](/zh/core/password.html)。）

## ChinaArea 行政区划组件

```vue
<template>
  <ChinaArea v-model="formData.city" />
</template>

<script setup>
import ChinaArea from '@/components/ChinaArea/index.vue';
</script>
```

（数据来自后端 `/api/city/*` 级联接口，`city` 值为四层数组 `[省,市,区,街道]`，见 [6.9 行政区划管理](/zh/modules/city.html)。）