XForm

基础的XForm的展示用法。

基本用法

姓名

年龄

性别

<template>
  <div>
    <XForm ref="formRef" :form="form" :schema-field="schemaField" @submit="save" />
  </div>
</template>

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

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

const schemaField = ref<SchemaItemArray>([
  {
    label: '姓名',
    prop: 'name',
    type: 'input',
    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"
      v-model:form="form"
      :option="option"
      :schema-field="schemaField"
      @submit="save"
    />
  </div>
</template>

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

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

const option = ref<FormOption>({
  labelWidth: 120
})

const schemaField = ref<SchemaItemArray>([
  {
    label: '审核结果',
    prop: 'result',
    type: 'radio',
    dicData: [
      {
        label: '通过',
        value: '1'
      },
      {
        label: '不通过',
        value: '2'
      }
    ],
    on: {
      radioEvent: {
        onChange: (value, _helpers) => {
          _helpers.updateSchemaField(['result'], {
            label: value === '1' ? '审核结果1' : '不同意意见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>

表单字典数据接口获取

审核结果

通过不通过

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

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

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
})

const schemaField = ref<SchemaItemArray>([
  {
    label: '审核结果',
    prop: 'result',
    type: 'radio',
    dicData: [
      {
        label: '通过',
        value: '1'
      },
      {
        label: '不通过',
        value: '2'
      }
    ],
    on: {
      radioEvent: {
        onChange: (value, _helpers) => {
          _helpers.updateSchemaField(['result'], {
            label: value === '1' ? '审核结果1' : '不同意意见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" :schema-field="schemaField" @submit="save" />
  </div>
</template>

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

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

const option = ref<FormOption>({
  labelWidth: 120
})

const schemaField = ref<SchemaItemArray>([
  {
    label: '姓名',
    prop: 'name',
    type: 'input'
  },

  {
    label: '年龄',
    prop: 'age',
    type: 'inputNumber'
  },
  {
    label: '分组水果',
    type: 'group',
    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: '分组蔬菜',
    type: 'group',
    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>

表单声明式用法-schemaField

姓名

性别

请选择性别

分组

年龄

地址

<template>
  <XForm v-model:form="form" @submit="submit">
    <XSchemaField>
      <XSchemaField.Input
        label="姓名"
        prop="name"
        :rules="[{ required: true, message: '请输入姓名' }]"
        :input="{
          rows: 2
        }"
        :input-event="{
            onChange: (val: string) => console.log(val)
          }"
      />
      <XSchemaField.Select
        label="性别"
        prop="sex"
        :dic-data="[
          { label: '男', value: 'male' },
          { label: '女', value: 'female' }
        ]"
        :select-event="{
          onBlur: (event) => console.log(event)
        }"
      />

      <XSchemaField.Group label="分组" prop="group">
        <XSchemaField.Input
          label="年龄"
          prop="age"
          :rules="[{ required: true, message: '请输入年龄' }]"
          :input-event="{
            onBlur: (evt) => console.log(evt)
          }"
        />
        <XSchemaField.Input
          label="地址"
          prop="address"
          :rules="[{ required: true, message: '请输入地址' }]"
        />
      </XSchemaField.Group>
    </XSchemaField>
  </XForm>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { XForm, XSchemaField } from 'cjx-low-code'

const form = ref({})

const submit = (_: any, done: any) => {
  done(false)
  console.log('save', form)
}
</script>

<style scoped>
.play-container {
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
  color: #409eff;
}
</style>