RuleForm.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <div class="m-4">
  3. <div class="mb-4">
  4. <a-button @click="validateForm" class="mr-2">手动校验表单</a-button>
  5. <a-button @click="resetValidate" class="mr-2">清空校验信息</a-button>
  6. <a-button @click="getFormValues" class="mr-2">获取表单值</a-button>
  7. <a-button @click="setFormValues" class="mr-2">设置表单值</a-button>
  8. </div>
  9. <CollapseContainer title="表单校验">
  10. <BasicForm @register="register" @submit="handleSubmit" />
  11. </CollapseContainer>
  12. </div>
  13. </template>
  14. <script lang="ts">
  15. import { defineComponent } from 'vue';
  16. import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  17. import { CollapseContainer } from '/@/components/Container/index';
  18. import { useMessage } from '/@/hooks/web/useMessage';
  19. const schemas: FormSchema[] = [
  20. {
  21. field: 'field1',
  22. component: 'Input',
  23. label: '字段1',
  24. colProps: {
  25. span: 8,
  26. },
  27. required: true,
  28. },
  29. {
  30. field: 'field2',
  31. component: 'Input',
  32. label: '字段2',
  33. colProps: {
  34. span: 8,
  35. },
  36. required: true,
  37. },
  38. {
  39. field: 'field3',
  40. component: 'DatePicker',
  41. label: '字段3',
  42. colProps: {
  43. span: 8,
  44. },
  45. required: true,
  46. },
  47. {
  48. field: 'field4',
  49. component: 'Select',
  50. label: '字段4',
  51. colProps: {
  52. span: 8,
  53. },
  54. componentProps: {
  55. options: [
  56. {
  57. label: '选项1',
  58. value: '1',
  59. key: '1',
  60. },
  61. {
  62. label: '选项2',
  63. value: '2',
  64. key: '2',
  65. },
  66. ],
  67. },
  68. rules: [{ required: true, message: '请输入aa' }],
  69. },
  70. {
  71. field: 'field5',
  72. component: 'CheckboxGroup',
  73. label: '字段5',
  74. colProps: {
  75. span: 8,
  76. },
  77. componentProps: {
  78. options: [
  79. {
  80. label: '选项1',
  81. value: '1',
  82. },
  83. {
  84. label: '选项2',
  85. value: '2',
  86. },
  87. ],
  88. },
  89. rules: [{ required: true }],
  90. },
  91. {
  92. field: 'field7',
  93. component: 'RadioGroup',
  94. label: '字段7',
  95. colProps: {
  96. span: 8,
  97. },
  98. componentProps: {
  99. options: [
  100. {
  101. label: '选项1',
  102. value: '1',
  103. },
  104. {
  105. label: '选项2',
  106. value: '2',
  107. },
  108. ],
  109. },
  110. rules: [{ required: true, message: '覆盖默认生成的校验信息' }],
  111. },
  112. ];
  113. export default defineComponent({
  114. components: { BasicForm, CollapseContainer },
  115. setup() {
  116. const { createMessage } = useMessage();
  117. const [register, { validateFields, clearValidate, getFieldsValue, setFieldsValue }] = useForm(
  118. {
  119. labelWidth: 120,
  120. schemas,
  121. actionColOptions: {
  122. span: 24,
  123. },
  124. }
  125. );
  126. async function validateForm() {
  127. try {
  128. const res = await validateFields();
  129. console.log('passing', res);
  130. } catch (error) {
  131. console.log('not passing', error);
  132. }
  133. }
  134. async function resetValidate() {
  135. clearValidate();
  136. }
  137. function getFormValues() {
  138. const values = getFieldsValue();
  139. createMessage.success('values:' + JSON.stringify(values));
  140. }
  141. function setFormValues() {
  142. setFieldsValue({
  143. field1: '1111',
  144. field5: ['1'],
  145. field7: '1',
  146. });
  147. }
  148. return {
  149. register,
  150. schemas,
  151. handleSubmit: (values: any) => {
  152. createMessage.success('click search,values:' + JSON.stringify(values));
  153. },
  154. getFormValues,
  155. setFormValues,
  156. validateForm,
  157. resetValidate,
  158. };
  159. },
  160. });
  161. </script>