9.10 数据录入组件

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

Form 表单组件

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

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

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

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

<template>
  <basicModal @register="registerModal" @on-ok="handleSubmit" @on-close="closeModal" />
</template>

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

// useModal 传入弹窗配置，返回 [register, { openModal, closeModal, setSubLoading }]
const [registerModal, { openModal, closeModal }] = useModal({
  title: '新增案例演示',
  subBtuText: '确定',
  width: 600,
});

// 打开弹窗
const handleAdd = () => {
  openModal();
};

// 提交（on-ok 事件触发；getFieldsValue 来自 useForm 返回的 [register, { getFieldsValue }]）
const handleSubmit = async () => {
  const values = getFieldsValue();
  await exampleAdd(values);
  closeModal();
};
</script>

Upload 上传组件

图片字段使用 UploadImg（生成页面 edit.vue 的实际写法，v-model:image-url 绑定相对路径）：

<template>
  <UploadImg
    v-model:image-url="formData.avatar"
    @changeFileName="(name) => (formData.avatarImgName = name)"
    name="tool"
    :fileSize="20"
    :fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/webp']"
  />
</template>

<script setup>
import UploadImg from '@/components/Upload/Image.vue';
// 上传接口：POST /api/upload/uploadFile（需认证 + sys:upload:file 权限）
</script>

多文件场景可用 BasicUpload（:value 传路径数组，@uploadChange 回传更新后的数组，见 G. 前端组件速查）。

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

Editor 富文本编辑器

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

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

（后端需在 Service 配置 contentFields 启用 [IMG_URL] 占位处理，见 7.3 富文本处理。）

Password 密码强度组件

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

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

（后端密码策略为 bcrypt 双重加盐，BCRYPT_ROUNDS=12，见 5.6 密码加密服务。）

ChinaArea 行政区划组件

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

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

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

3.7 KiB Raw Permalink Blame History Unescape Escape