ctj-ui-next
搜索 K

Appearance

本页目录

GicForms ​

使用 antdesign Form 二次封装的基础表单组件

说明

  • 查询时如果需要将多选数据的数组格式转换为字符串格式，可传入 isConvert 参数，设置为 true 即可

基本用法 ​

组件演示

示例
vue
<template>
  <div class="content">
    <GicForms
      :form-data="formData"
      :items="formItems"
      ref="form"
      :rules="rules"
      @form-change="handleFormChange"
      :eleDataObj="eleDataObj"
    ></GicForms>
    <a-space style="margin-top: 8px">
      <a-button @click="getData">获取未转换成字符串的表单数据</a-button>
      <a-button @click="reset">重置</a-button>
      <a-button @click="getValid">获取校验结果</a-button>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { GicForms } from 'ctj-ui-next'
import { formItem, ControlType, DataType } from 'ctj-ui-next/lib/index'
import type { Rule } from 'ant-design-vue/es/form'
let formData = ref<any>({
  name: '',
  types: [],
  money: '',
})
const rules: Record<string, Rule[]> = {
  name: [
    {
      required: true,
      trigger: 'blur',
      message: '请填写',
    },
  ],
}
const form = ref()
const formItems: formItem[] = [
  {
    field_code: 'name',
    label: '名称',
    control_type: ControlType.input,
    colSpan: 24,
  },
  {
    field_code: 'types',
    label: '类型',
    control_type: ControlType.radio,
    colSpan: 12,
    configs: {
      showType: 'RadioButton',
      buttonStyle: 'solid',
    },
  },
  {
    field_code: 'treeSelect',
    label: '下拉树',
    control_type: ControlType.treeSelect,
    colSpan: 12,
    configs: {
      multiple: true,
      optionsData: [
        { title: 'xx', value: 'xx', children: [] },
        { title: 'xx1', value: 'xx1', children: [] },
      ],
    },
  },
  {
    field_code: 'money',
    label: '金额',
    control_type: ControlType.inputNumber,
    data_type: DataType.money,
    colSpan: 12,
    configs: {
      precision: 6,
    },
  },
]
const eleDataObj = reactive({
  types: [
    { label: 'xx', value: 'xx' },
    { label: 'xx1', value: 'xx1' },
  ],
})
const getData = () => {
  console.log('formData:', formData.value)
}
//清空表单数据
const reset = () => {
  form.value.resetForm()
}
//表单项数据变更时触发
const handleFormChange = params => {
  console.log(params)
}
//获取表单校验结果
const getValid = () => {
  form.value
    .getFormValid()
    .then(() => {
      console.log('校验通过')
    })
    .catch(() => {
      console.log('校验失败')
    })
}
</script>
<style scoped lang="less">
.content {
  padding: 8px 16px;
}
</style>
<template>
  <div class="content">
    <GicForms
      :form-data="formData"
      :items="formItems"
      ref="form"
      :rules="rules"
      @form-change="handleFormChange"
      :eleDataObj="eleDataObj"
    ></GicForms>
    <a-space style="margin-top: 8px">
      <a-button @click="getData">获取未转换成字符串的表单数据</a-button>
      <a-button @click="reset">重置</a-button>
      <a-button @click="getValid">获取校验结果</a-button>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { GicForms } from 'ctj-ui-next'
import { formItem, ControlType, DataType } from 'ctj-ui-next/lib/index'
import type { Rule } from 'ant-design-vue/es/form'
let formData = ref<any>({
  name: '',
  types: [],
  money: '',
})
const rules: Record<string, Rule[]> = {
  name: [
    {
      required: true,
      trigger: 'blur',
      message: '请填写',
    },
  ],
}
const form = ref()
const formItems: formItem[] = [
  {
    field_code: 'name',
    label: '名称',
    control_type: ControlType.input,
    colSpan: 24,
  },
  {
    field_code: 'types',
    label: '类型',
    control_type: ControlType.radio,
    colSpan: 12,
    configs: {
      showType: 'RadioButton',
      buttonStyle: 'solid',
    },
  },
  {
    field_code: 'treeSelect',
    label: '下拉树',
    control_type: ControlType.treeSelect,
    colSpan: 12,
    configs: {
      multiple: true,
      optionsData: [
        { title: 'xx', value: 'xx', children: [] },
        { title: 'xx1', value: 'xx1', children: [] },
      ],
    },
  },
  {
    field_code: 'money',
    label: '金额',
    control_type: ControlType.inputNumber,
    data_type: DataType.money,
    colSpan: 12,
    configs: {
      precision: 6,
    },
  },
]
const eleDataObj = reactive({
  types: [
    { label: 'xx', value: 'xx' },
    { label: 'xx1', value: 'xx1' },
  ],
})
const getData = () => {
  console.log('formData:', formData.value)
}
//清空表单数据
const reset = () => {
  form.value.resetForm()
}
//表单项数据变更时触发
const handleFormChange = params => {
  console.log(params)
}
//获取表单校验结果
const getValid = () => {
  form.value
    .getFormValid()
    .then(() => {
      console.log('校验通过')
    })
    .catch(() => {
      console.log('校验失败')
    })
}
</script>
<style scoped lang="less">
.content {
  padding: 8px 16px;
}
</style>

属性 Props ​

参数说明类型参数说明是否必传
formData表单数据Object{}是
items表单项formItem[]参考formItem 说明是
colSpan表单项占列数number通常为 6 或者 8，默认 6否
labelWidth表单 label 宽度string默认'120px'否
eleDataObj表单元素下拉数据配置Object{ 字段名/字典 code: [下拉数据] }否
isConvert查询时参数为数组的数据是否需要转换成字符串Booleantrue/false，默认 false否
gaps各表单项之间的上下间距String默认 16px，高级查询中为 8px否
rules表单校验规则Record<string, Rule[]>每个表单项的校验规则否

事件 Events ​

事件名说明回调参数参数说明
formChange表单数据改变时触发({value: any, column: columnItem, option: any})value 要素数据, column 对应表单项, option 下拉或树形下拉当前选中节点/或金额范围输入框的绑定字段

方法 Methods ​

方法名称说明参数
resetForm手动清空表单数据无
getFormValid获取表单校验结果，类型为 Promise无

参数说明 ​

formItem 说明 ​

参数说明类型参数说明是否必传
field_code字段名string""是
label表单项 label 名称string""是
control_type表单项显示组件类型ControlType参考枚举""是
ele_code字典 codestring""否
dataIndex字段名string""否
configs表单项配置columnConfigs参考表格 columnConfigs 配置否
colSpan单个表单项占列数number默认取 props 中的 colSpan，无值时取此值，否则为 6否
data_type组件为 inputNumber 时的数值类型DataType参考枚举""是

预算单位软件产品开发部