XForm

基础的XForm的展示用法。

基本用法

姓名

0 / 50

年龄

性别

<template>
  <div>
    <XForm ref="formRef" :form="form" :option="option" @submit="save" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { XForm } from 'cjx-low-code'
import type { FormOption } from 'cjx-low-code'
import { ElMessage } from 'element-plus'

const form = ref({
  name: '',
  age: '',
  sex: '1'
})

const option = ref<FormOption>({
  column: [
    {
      label: '姓名',
      prop: 'name',
      rules: [{ required: true, message: '请输入姓名' }]
    },
    {
      label: '年龄',
      prop: 'age',
      type: 'inputNumber',
    },
    {
      label: '性别',
      prop: 'sex',
      type: 'select',
      dicData: [
        {
          label: '男',
          value: '1'
        },
        {
          label: '女',
          value: '2'
        }
      ]
    }
  ]
})

const formRef = ref<InstanceType<typeof XForm>>()

const save = async (data: any, done) => {
  const valid = await formRef.value?.validate()
  if (!valid) return
  setTimeout(() => {
    ElMessage.success(`提交成功${JSON.stringify(data)}`)
    done()
  }, 500)
}

</script>

表单项之间的联动

审核结果

通过不通过

审核意见

<template>
  <div>
    <XForm ref="formRef" :form="form" :option="option" @submit="save" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { XForm } from 'cjx-low-code'
import type { FormOption } from 'cjx-low-code'
import { ElMessage } from 'element-plus'

const form = ref({
  reviewComments: '同意',
  result: '1'
})


const option = ref<FormOption>({
  labelWidth: 120,
  column: [
    {
      label: '审核结果',
      prop: 'result',
      type: 'radio',
      dicData: [
        {
          label: '通过',
          value: '1'
        },
        {
          label: '不通过',
          value: '2'
        }
      ],
      
      rules: [{ required: true, message: '请选择审核结果' }],
      span: 24,
    },
    {
      label: '审核意见',
      prop: 'reviewComments',
      type: 'textarea',
      display: ({ form }) => form.result === '1',
      disabled: ({ form }) => form.result === '1',
      span: 24,
      
    },
    {
      label: '不同意意见',
      prop: 'reviewComments',
      type: 'textarea',
      display: ({ form }) => form.result === '2',
      rules: [{ required: true, message: '请输入审核意见' }],
      span: 24
    },
  ]
})

const formRef = ref<InstanceType<typeof XForm>>()

const save = async (data: any, done) => {
  const valid = await formRef.value?.validate()
  if (!valid) return
  setTimeout(() => {
    ElMessage.success(`提交成功${JSON.stringify(data)}`)
    done()
  }, 500)
}

</script>

表单字典数据接口获取

字典

审核意见

0 / 1000

<template>
  <div>
    <XForm ref="formRef" :form="form" :option="option" @submit="save" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { XForm } from 'cjx-low-code'
import type { FormOption } from 'cjx-low-code'
import { ElMessage } from 'element-plus'

const form = ref({
  dict: '',
  result: '1'
})

const getResultData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          label: '选项1',
          value: '1'
        },
        {
          label: '选项2',
          value: '2'
        }
      ])
    }, 200)
  })

}

const option = ref<FormOption>({
  labelWidth: 120,
  column: [
    {
      label: '字典',
      prop: 'dict',
      type: 'radio',
      dicAjaxResolve: getResultData(),
      rules: [{ required: true, message: '请选择字典' }],
      span: 24,
    },
    
    {
      label: '审核意见',
      prop: 'reviewComments',
      type: 'textarea',
      span: 24,
    }
  ]
})

const formRef = ref<InstanceType<typeof XForm>>()

const save = async (data: any, done) => {
  const valid = await formRef.value?.validate()
  if (!valid) return
  setTimeout(() => {
    ElMessage.success(`提交成功${JSON.stringify(data)}`)
    done()
  }, 500)
}

</script>

表单分组

姓名

0 / 50

年龄

分组水果

西瓜

甜大绿

苹果

甜大红

分组蔬菜

胡萝卜

甜大橙

<template>
  <div>
    <XForm ref="formRef" :form="form" :option="option" @submit="save" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { XForm } from 'cjx-low-code'
import type { FormOption } from 'cjx-low-code'
import { ElMessage } from 'element-plus'

const form = ref({
  name: '',
  年龄: '1'
})


const option = ref<FormOption>({
  labelWidth: 120,
  column: [
    {
      label: '姓名',
      prop: 'name',
    },
    
    {
      label: '年龄',
      prop: 'age',
      type: 'inputNumber'
    }
  ],
  group: [
    {
      label: '分组水果',
      prop: 'group1',
      column: [
        {
          label: '西瓜',
          prop: 'watermelon',
          type: 'checkbox',
          dicData: [
            {
              label: '甜',
              value: '1'
            },
            {
              label: '大',
              value: '2'
            },
            {
              label: '绿',
              value: '3'
            }
          ],
        },
        {
          label: '苹果',
          prop: 'apple',
          type: 'checkbox',
          dicData: [
            {
              label: '甜',
              value: '1'
            },
            {
              label: '大',
              value: '2'
            },
            {
              label: '红',
              value: '3'
            }
          ]
        }
      ]
    },
    {
      label: '分组蔬菜',
      prop: 'group2',
      column: [
        {
          label: '胡萝卜',
          prop: 'carrot',
          type: 'checkbox',
          dicData: [
            {
              label: '甜',
              value: '1'
            },
            {
              label: '大',
              value: '2'
            },
            {
              label: '橙',
              value: '3'
            }
          ]
        },
      ]
    }
  ]
})

const formRef = ref<InstanceType<typeof XForm>>()

const save = async (data: any, done) => {
  const valid = await formRef.value?.validate()
  if (!valid) return
  setTimeout(() => {
    ElMessage.success(`提交成功${JSON.stringify(data)}`)
    done()
  }, 500)
}

</script>