Naive UI Admin搭建流程：BasicForm 表单组件

对 form 组件进行封装

1、通过代码的方式配置多个表单组件

2、配置表格作为过滤查询条件

下载基础代码

基础代码下载地址：

https://wwab.lanzoue.com/i3p7I1fjkavc

BasicForm代码下载

或者从Git仓库中直接拷贝代码，推荐！

添加 BasicForm 组件

打开项目，找到src目录，需要导入的文件及位置如下：

Form ==> src/components/

BasicTable组件中使用到了基础Naive UI组件，这里需要增量引入：

哪个组件打印警告信息，添加哪个组件即可。

import * as NaiveUI from 'naive-ui';

const naive = NaiveUI.create({
  components: [
    NaiveUI.NRadio,
    NaiveUI.NSelect,
    NaiveUI.NRadioGroup,
    NaiveUI.NGi,
    NaiveUI.NGrid,
],
});
export function setupNaive(app) {
  app.use(naive);
}

找到src/utils/index.js，添加如下工具方法

import { unref } from 'vue';

// dynamic use hook props
export function getDynamicProps(props) {
  const ret = {};

  Object.keys(props).map((key) => {
    ret[key] = unref(props[key]);
  });

  return ret;
}

基础使用

表单组件设置

通过设置表单组件的属性可以渲染对应表单，以及表单的样式信息等

items.js

export const schemas = [
  {
    field: 'name',
    component: 'NInput',
    label: '姓名',
    defaultValue: '',
    labelMessage: '这是一个提示',
    rules: [{required: true, trigger: ['blur']}],
    componentProps: {
      placeholder: '请输入姓名',
      onInput: (e) => {
        console.log(`NInput: ${e}`);
      },
    }
  },
  {
    field: 'phone',
    component: 'NInput',
    label: '手机',
    defaultValue: '',
    componentProps: {
      placeholder: '请输入手机号码',
    }
  },
  {
    field: 'type',
    component: 'NSelect',
    label: '类型',
    componentProps: {
      placeholder: '请选择类型',
      options: [
        { label: '舒适型', value: 'comfort' },
        { label: '经济型', value: 'economical' }
      ],
      onUpdateValue: (e) => {
        console.log(`NSelect: ${e}`);
      },
    }
  },
  {
    field: 'reserveTime',
    component: 'NDatePicker',
    label: '预约时间',
    defaultValue: 1183135260000,
    componentProps: {
      type: 'date',
      clearable: true,
      onUpdateValue: (e) => {
        console.log(`NDatePicker: ${e}`);
      },
    }
  },
  {
    field: 'stayTime',
    component: 'NTimePicker',
    label: '停留时间',
    componentProps: {
      clearable: true,
      onUpdateValue: (e) => {
        console.log(`NTimePicker: ${e}`);
      },
    }
  },
  {
    field: 'status',
    label: '状态',
    //插槽
    slot: 'statusSlot',
  },
  {
    field: 'project',
    component: 'NCheckbox',
    label: '预约项目',
    componentProps: {
      placeholder: '请选择预约项目',
        options: [
        { label: '种牙', value: '1' },
        { label: '补牙', value: '2' },
        { label: '根管', value: '3' }
      ],
      onUpdateValue: (e) => {
        console.log(`NCheckbox: ${JSON.stringify(e)}`);
      },
    }
  },
  {
    field: 'source',
    component: 'NRadioGroup',
    label: '来源',
    componentProps: {
      options: [
        { label: '网上', value: '1' },
        { label: '门店', value: '2' },
      ],
      onUpdateValue: (e) => {
        console.log(`NRadioGroup: ${JSON.stringify(e)}`);
      },
    },
  },
];

页面使用

BasicForm添加组件item的使用方法

<template>
  <n-card :bordered="false" class="proCard table">
    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
      <template #statusSlot="{ model, field }">
        <n-input v-model:value="model[field]" />
      </template>
    </BasicForm>
  </n-card>
</template>
<script setup>
import { reactive, ref, unref } from 'vue'
import { BasicForm, useForm } from '@/components/Form'
import { schemas } from './items';

// 分页参数
let params = reactive({})

// 注册表单
const [register, { setProps }] = useForm({
  gridProps: { cols: 3 },
  showAdvancedButton: true,
  labelWidth: 100,
  schemas,
});


// 刷新表格
function reloadData() {
  console.log(unref(params));
}

// 查询提交方法
function handleSubmit(values) {
  Object.assign(params, values);
  reloadData();
}

// 查询重置方法
function handleReset(values) {
  params = values
  reloadData();
}
</script>

组合使用

表单组件设置

通过设置表单组件的属性可以渲染对应表单，以及表单的样式信息等

columns.js

export const schemas = [
  {
    field: 'hosname',
    component: 'NInput',
    label: '医院名称',
    defaultValue: '',
    labelMessage: '筛选医院名称',
    componentProps: {
      placeholder: '请输入医院名称',
    }
  },
  {
    field: 'hoscode',
    component: 'NInput',
    label: '医院编号',
    defaultValue: '',
    labelMessage: '筛选医院编号',
    componentProps: {
      placeholder: '请输入医院编号',
    }
  },
];

export const columns = [
  {
    type: 'selection',
    key: 'selection'
  },
  {
    title: '医院名称',
    key: 'hosname',
  },
  {
    title: '医院编号',
    key: 'hoscode',
  }
]

页面使用

BasicForm常常配合BasicTable使用，下面一个简单实例

<template>
  <n-card :bordered="false" class="proCard table">
    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
    <BasicTable 
        :columns="columns"
        :request="loadDataTable"
        ref="actionRef"
        :row-key="(row) => row.id"
        :scroll-x="1000" />
  </n-card>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { getHospSetPageList } from '@/api/hospset'
import { BasicForm, useForm } from '@/components/Form'
import { BasicTable } from '@/components/Table'
import { schemas, columns } from './columns';

// 分页参数
const defalutParams = () => {
  return {
    hosname: null,
    hoscode: null,
  };
};
const params = reactive(defalutParams())
const actionRef = ref(null)

// 注册表单
const [register, { setProps }] = useForm({
  gridProps: { cols: 3 },
  showAdvancedButton: false,
  labelWidth: 100,
  schemas,
});

// 数据请求
const loadDataTable = async (res) => {
  return await getHospSetPageList({ ...res, ...params });
}

// 刷新表格
function reloadTable() {
  actionRef.value.reload();
}

// 查询提交方法
function handleSubmit(values) {
  Object.assign(params, values);
  reloadTable();
}

// 查询重置方法
function handleReset() {
  Object.assign(params, defalutParams());
  reloadTable();
}
</script>

详细使用

详细的使用教程见：

https://docs.naiveadmin.com/components/form.html

Naive Ui Admin | BasicForm 表单组件