@formCreate/antV v1.0.16

Installation

Using npm:

$ npm i --save cheng-create-form-antv
$ npm i -g pnpm
$ pnpm i --save cheng-create-form-antv

Usage:

import { createApp } from "vue";
import App from "./App.vue";
import CreateFormAntV from "cheng-create-form-antv";

const app = createApp(App);
app.use(CreateFormAntV);

Page:

<script setup lang="tsx">
import { onMounted, ref } from 'vue';
import { type Fields, type IFormApi } from 'cheng-create-form-antv/types/packages';

const mockList = [
  {
    label: 'root 1',
    value: 'root 1',
    oneLevelName: '玉米',
    children: [
      {
        label: 'parent 1',
        value: 'parent 1',
        oneLevelName: '大米',
        children: [
          {
            label: 'parent 1-0',
            value: 'parent 1-0',
            oneLevelName: '红豆',
            children: [
              {
                label: 'my leaf',
                value: 'leaf1',
                oneLevelName: '绿豆'
              },
              {
                label: 'your leaf',
                value: 'leaf2',
                oneLevelName: '绿豆sadsa'
              },
            ],
          },
          {
            label: 'parent 1-1',
            value: 'parent 1-1',
            oneLevelName: '红sdad豆',
          },
        ],
      },
      {
        label: 'parent 2',
        value: 'parent 2',
      },
    ],
  },
]

const fields = ref<Fields[]>([
  {
    label: '变更单号',
    key: 'orderNumber',
    el: 'a-select',
    props: {
      placeholder: '请输入变更单号',
      options: [
        {
          label: '是',
          value: 1,
          oneLevelName: '玉米'
        },
        {
          label: '否',
          value: 0,
          oneLevelName: '小麦'
        }
      ],
      showSearch: true,
      filterOption: (input: string, option: any) => {
        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    },
    rules: [
      {
        required: true,
        message: '请输入变更单号',
        trigger: 'change'
      }
    ],
  },
  {
    label: '是否提交',
    key: 'documentStatus',
    el: 'a-select',
    props: {
      placeholder: '请选择是否提交',
      options: [],
    },
    rules: [
      {
        required: true,
        message: '请选择是否提交',
        trigger: 'change'
      }
    ],
  },
  {
    el: 'a-input',
    key: 'remark',
    label: '备注',
    rules: [
      {
        required: true,
        message: '请输入备注',
        trigger: 'change'
      }
    ],
  },
  {
    el: 'a-tree-select',
    key: 'departId',
    label: '部门',
    props: {
      treeData: mockList,
    },
  },
  {
    el: 'a-input',
    key: 'huanjing',
    label: '环境状况',
    props: {
    }
  },
  {
    el: 'a-input',
    key: 'shidu',
    label: '湿度',
    rules: [
      {
        required: true,
        message: '请输入湿度',
        trigger: 'change'
      }
    ],
  },
])
const formApi = ref()
const submitTest = () => {
  formApi.value?.validate().then((res) => {
    console.log(res, 'res');
  }).catch(() => { })
}

const clear = () => {
  formApi.value?.resetFormFields()
}

</script>

<template>
    <MForm v-model:api="formApi" :fields="fields" formId="search-form"></MForm>
    <a-button @click="submitTest">提交</a-button>
    <a-button @click="clear">清除</a-button>
</template>

<style>
#app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0
}
</style>

API

CreateFormAntV

Form Props

| Name | Type | Default | Description | | ---------- | ------- | ------- | --------------------------------------------------- | | formConfig | Object | - | 表单配置项 | | fields | Array | - | 表单项配置 | | formId | String | - | 表单 id | | search | Boolean | - | 是否为搜索，如果为 true时，formConfig:{layout:"inline"}。 |

formConfig

| Name | Type | Default | Description | | -------------------- | ------- | ---------- | --------------------------------------- | | colon | Boolean | true | 是否显示 label 后面的冒号 | | disabled | Boolean | false | 是否禁用表单 | | hideRequiredMark | Boolean | false | 是否隐藏必填标记 | | labelAlign | String | left | label 对齐方式 | | labelCol | Object | - | label 布局 | | labelWrap | Boolean | false | label 是否换行 | | layout | String | horizontal | 表单布局 | | model | Object | - | 表单数据 | | name | String | - | 表单名称 | | noStyle | Boolean | false | 是否隐藏样式 | | rules | Object | - | 表单校验规则 | | scrollToFirstError | Object | - | 首次校验失败时滚动到第一个错误字段 | | validateOnRuleChange | Boolean | true | 当 rules 属性发生变化时是否触发表单校验 | | validateTrigger | String | blur | 校验触发时机 | | wrapperCol | Object | - | wrapper 布局 |

fields

| Name | Type | Default | Description | | ------------- | -------- | ------- | -------------------- | | el | String | - | 表单项类型 | | key | String | - | 表单项 key | | label | String | - | 表单项 label | | props | Object | - | 表单项 props | | col | Object | - | 表单项布局 | | formItemProps | Object | - | 表单项 formItemProps | | rules | Array | - | 表单项校验规则 | | slot | Boolean | false | 是否使用插槽 | | hidden | Boolean | false | 是否隐藏 | | emit | Array | - | 表单项事件 | | customRender | Function | - | 自定义渲染 | | on | Object | - | 表单项事件 | | renderSlots | Object | - | 表单项插槽 | | defaultValue | any | - | 表单项默认值 | | readonlyProps | Object | - | 表单项只读属性 |

layout 配置：参考 Ant Design Vue Form API

License

MIT