feat: 完善FormBuilder组件

components.d.ts

@@ -8,8 +8,25 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AButton: typeof import('ant-design-vue/es')['Button']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
+    ACol: typeof import('ant-design-vue/es')['Col']
+    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
+    ARow: typeof import('ant-design-vue/es')['Row']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
+    ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect']
+    AUpload: typeof import('ant-design-vue/es')['Upload']
     BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
     CardBox: typeof import('./src/components/CardBox/index.vue')['default']
     FormFormBuilder: typeof import('./src/components/Form/FormBuilder.vue')['default']

src/components/Form/FormBuilder.vue

@@ -1,11 +1,254 @@
 <template>
-  <div class=''>
+  <div class='JForm-content'>
-
+    <a-form
+      v-bind='props'
+      :model='formData.data'
+      layout='vertical'
+    >
+      <a-row :type='rowType'>
+        <a-col v-for='item in formOptions.data' :key='item.key' :span='item.span'>
+          <a-form-item
+            :name='item.name'
+            :required='item.required'
+            :rules='item.rules'
+            :noStyle='item.noStyle'
+          >
+            <template #label>
+              <span>{{ item.title }}</span>
+              <a-tooltip :title='item.tooltip'>
+                <QuestionCircleOutlined v-if='!!item.tooltip' style='margin-left: 4px; color: rgba(0,0,0,.45) ' />
+              </a-tooltip>
+            </template>
+            <a-input
+              v-if='item.component === componentType.input'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-select
+              v-else-if='item.component === componentType.select'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+              :options='item.options'
+            />
+            <a-inputnumber
+              v-else-if='item.component === componentType.inputNumber'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-input-password
+              v-else-if='item.component === componentType.password'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-switch
+              v-else-if='item.component === componentType.switch'
+              v-bind='item.componentProps'
+              v-model:checked='formData.data[item.name]'
+            />
+            <a-radio-group
+              v-else-if='item.component === componentType.radio'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-checkbox-group
+              v-else-if='item.component === componentType.checkbox'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+              :options='item.options'
+            />
+            <a-time-picker
+              v-else-if='item.component === componentType.time'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-date-picker
+              v-else-if='item.component === componentType.date'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-tree-select
+              v-else-if='item.component === componentType.tree'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+              :tree-data='item.options'
+            />
+            <a-upload
+              v-else-if='item.component === componentType.upload'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <component
+              v-else
+              :is='item.component'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
   </div>
 </template>
 
-<script setup type='ts' name='FormBuilder'>
+<script setup lang='ts' name='FormBuilder'>
-const data = reactive({})
+import type { Options, OptionsItem, OptionsComponent } from './index.modules'
+import { PropType } from 'vue'
+import { get, isArray, isString, pick, set } from 'lodash-es'
+import { formProps } from 'ant-design-vue/es/form'
+import { Form } from 'ant-design-vue';
+import componentType from './util'
+import {
+  QuestionCircleOutlined
+} from '@ant-design/icons-vue';
+
+const useform = Form.useForm;
+
+const props = defineProps({
+  ...formProps,
+  options: {
+    type: Object as PropType<Options>,
+    default: () => []
+  },
+  initValue: {
+    type: Object,
+    default: () => ({})
+  },
+  column: {
+    type: Number,
+    default: 1
+  }
+})
+
+// 表单数据
+const formData = reactive({
+  data: {}
+})
+
+const formOptions = reactive<{ data: OptionsComponent[]}>({
+  data: []
+}) // 表单Item
+
+const { resetFields, validate} = useform(formData, props.rules)
+
+const rowType = ref<string | undefined>(undefined)
+
+const calculateItemSpan = (span?: number | string) => {
+  const itemSpan = 24 / props.column
+  if (!span) return itemSpan
+
+  if (isString(span) && span.includes('px')) {
+    rowType.value = 'flex'
+  } else {
+    return span
+  }
+}
+
+/**
+ * 根据传入的表单options生成表单
+ * @param data {Options}
+ * @param parentKey
+ */
+const handleFormData = (data: Options, parentKey: Array<string> = []): any => {
+  const cacheModel: any = {}
+
+  Object.keys(data).forEach(async (key) => {
+    const optionItem = data[key]
+    const _key = [...parentKey, key]
+    if ('type' in optionItem && optionItem.type === 'Object') {
+      const dataModel = handleFormData(optionItem.properties, _key)
+      cacheModel[key] = dataModel
+    } else if (!('visible' in optionItem) || ('visible' in optionItem && optionItem.visible !== true)){
+      // 处理默认值以及原始值
+      const keyValue = get(formData.data, _key)
+      let _options: any[] = []
+
+      if (keyValue) { // 当前值在formModel中
+        cacheModel[key] = keyValue
+      } else {
+        cacheModel[key] = (optionItem as OptionsItem).default
+      }
+      // 处理options
+      if ('options' in optionItem) {
+        _options = optionItem.options!
+      }
+      // 处理 onSearch 请求
+      if ('onSearch' in optionItem) {
+        const data = await optionItem.onSearch!()
+        if (data) {
+          _options = data
+        }
+      }
+      const optionsItemProps = pick(optionItem, ['componentProps', 'title', 'component', 'rules', 'required', 'hidden', 'tooltip', 'noStyle'])
+      //
+      formOptions.data.push({
+        ...optionsItemProps,
+        name: _key,
+        options: _options,
+        key: isArray(_key) ? _key.toString() : _key,
+        span: calculateItemSpan((optionItem as OptionsItem).span)
+      })
+    }
+  })
+  return cacheModel
+}
+
+/**
+ * 重置表单
+ */
+const resetModel = () => {
+  resetFields()
+}
+
+/**
+ * 验证并提交表单
+ */
+const formValidate = () => {
+  return new Promise((res, rej) => {
+    validate().then(data => {
+      res(formData.data)
+    }).catch(err => {
+      rej(err)
+    })
+  })
+}
+/**
+ * 改变单个值
+ */
+const setItemValue = (key: string | (string | number)[], value: any) => {
+  set(formData.data, key, value)
+}
+
+/**
+ * 修改整个表单值
+ * @param data
+ */
+const setData = (data: any) => {
+  formData.data = data
+}
+
+
+if (props.initValue) {
+  formData.data = props.initValue
+}
+
+formData.data = handleFormData(props.options)
+
+watch(props.options, (newValue: any) => {
+  formOptions.data = []
+  formData.data = handleFormData(newValue)
+})
+
+watch(props.initValue, (newValue: any) => {
+  formData.data = newValue
+})
+
+defineExpose({
+  resetModel,
+  formValidate,
+  setItemValue,
+  setData
+})
+
 </script>
 
 <style scoped>

src/components/Form/index.modules.d.ts

@@ -0,0 +1,40 @@
+import type { FormProps } from 'ant-design-vue/es/form'
+
+export interface OptionsComponent {
+  /** FormItem title **/
+  title?: string
+  /** 组件名称 **/
+  component?: string
+  /** 组件Props **/
+  componentProps?: any
+  /** 组件Options **/
+  options?: any[]
+  name?: any
+  [name: string]: any
+}
+
+export interface OptionsItem extends OptionsComponent{
+  /** 内置查询，会覆盖options **/
+  onSearch?: () => Promise<any>
+  default?: any
+  /** 隐藏Item，值不会进入到FormModel中 **/
+  visible?: boolean
+  /** 表单隐藏域 **/
+  hidden?: boolean,
+  span?: number | string
+  rules?: FormProps.rules
+  required?: boolean
+  tooltip?: string
+  noStyle?: boolean
+}
+
+interface ObjectTypes {
+  type: 'Object'
+  properties: {
+    [name: string]: OptionsItem
+  }
+}
+
+export interface Options extends FormProps {
+  [name: string]: ObjectTypes | OptionsItem
+}

src/components/Form/index.ts

@@ -1,3 +1,4 @@
 import FormBuilder from './FormBuilder.vue'
+export { default as componentType } from './util'
 
 export default FormBuilder

src/components/Form/util.ts

@@ -0,0 +1,15 @@
+const optionComponentType = {
+  input: 'input',
+  inputNumber: 'inputNumber',
+  password: 'password',
+  switch: 'switch',
+  radio: 'radio',
+  checkbox: 'checkbox',
+  time: 'time',
+  date: 'date',
+  treeSelect: 'treeSelect',
+  upload: 'upload',
+  tree: 'tree',
+  select: 'select'
+}
+export default optionComponentType

src/style.css

@@ -0,0 +1,4 @@
+.ant-form-item-required:before {
+    position: absolute;
+    right: -12px;
+}

src/views/demo/Form.vue

@@ -1,9 +1,59 @@
 <template>
-  <Form />
+  <Form
+    ref='form'
+    :options='options'
+    :initValue='initValue'
+  />
+  <a-button @click='submit'>提交</a-button>
+  <a-button @click='reset'>重置</a-button>
+  <a-button @click='setValue'>修改name</a-button>
 </template>
 
 <script setup name='FormDemo'>
-const data = reactive({})
+import { componentType } from 'components/Form'
+const form = ref()
+const initValue = reactive({})
+
+const submit = () => {
+  form.value.formValidate().then(res => {
+    console.log(res)
+  })
+}
+
+const reset = () => {
+
+}
+
+const setValue =() => {
+  initValue.name = '111111'
+}
+
+const options = reactive({
+  name: {
+    component: componentType.input,
+    componentProps: {
+      style: {
+        width: '200px'
+      }
+    },
+    title: '测试',
+    required: true
+  },
+  sex: {
+    component: componentType.select,
+    title: '性别',
+    options: [
+      { label: '111', value: 1 },
+      { label: '222', value: 2 },
+    ],
+    required: true,
+    rules: [
+      { required: true, message: '请选择性别'}
+    ],
+    tooltip: '性别',
+    default: 1
+  }
+})
 </script>
 
 <style scoped>