index.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <script lang="ts" setup>
  2. import { Button, message, Space } from 'ant-design-vue';
  3. import { useVbenForm } from '#/adapter/form';
  4. const [BaseForm, formApi] = useVbenForm({
  5. // 所有表单项共用,可单独在表单内覆盖
  6. commonConfig: {
  7. // 所有表单项
  8. componentProps: {
  9. class: 'w-full',
  10. },
  11. },
  12. // 使用 tailwindcss grid布局
  13. // 提交函数
  14. handleSubmit: onSubmit,
  15. // 垂直布局,label和input在不同行,值为vertical
  16. layout: 'horizontal',
  17. // 水平布局,label和input在同一行
  18. schema: [
  19. {
  20. // 组件需要在 #/adapter.ts内注册,并加上类型
  21. component: 'Input',
  22. // 对应组件的参数
  23. componentProps: {
  24. placeholder: '请输入用户名',
  25. },
  26. // 字段名
  27. fieldName: 'field1',
  28. // 界面显示的label
  29. label: 'field1',
  30. },
  31. {
  32. component: 'Select',
  33. componentProps: {
  34. allowClear: true,
  35. filterOption: true,
  36. options: [
  37. {
  38. label: '选项1',
  39. value: '1',
  40. },
  41. {
  42. label: '选项2',
  43. value: '2',
  44. },
  45. ],
  46. placeholder: '请选择',
  47. showSearch: true,
  48. },
  49. fieldName: 'fieldOptions',
  50. label: '下拉选',
  51. },
  52. ],
  53. wrapperClass: 'grid-cols-1 md:grid-cols-2',
  54. });
  55. function onSubmit(values: Record<string, any>) {
  56. message.success({
  57. content: `form values: ${JSON.stringify(values)}`,
  58. });
  59. }
  60. function handleClick(
  61. action:
  62. | 'batchAddSchema'
  63. | 'batchDeleteSchema'
  64. | 'disabled'
  65. | 'hiddenAction'
  66. | 'hiddenResetButton'
  67. | 'hiddenSubmitButton'
  68. | 'labelWidth'
  69. | 'resetDisabled'
  70. | 'resetLabelWidth'
  71. | 'showAction'
  72. | 'showResetButton'
  73. | 'showSubmitButton'
  74. | 'updateActionAlign'
  75. | 'updateResetButton'
  76. | 'updateSchema'
  77. | 'updateSubmitButton',
  78. ) {
  79. switch (action) {
  80. case 'updateSchema': {
  81. formApi.updateSchema([
  82. {
  83. componentProps: {
  84. options: [
  85. {
  86. label: '选项1',
  87. value: '1',
  88. },
  89. {
  90. label: '选项2',
  91. value: '2',
  92. },
  93. {
  94. label: '选项3',
  95. value: '3',
  96. },
  97. ],
  98. },
  99. fieldName: 'fieldOptions',
  100. },
  101. ]);
  102. message.success('字段 `fieldOptions` 下拉选项更新成功。');
  103. break;
  104. }
  105. case 'labelWidth': {
  106. formApi.setState({
  107. commonConfig: {
  108. labelWidth: 150,
  109. },
  110. });
  111. break;
  112. }
  113. case 'resetLabelWidth': {
  114. formApi.setState({
  115. commonConfig: {
  116. labelWidth: 100,
  117. },
  118. });
  119. break;
  120. }
  121. case 'disabled': {
  122. formApi.setState({ commonConfig: { disabled: true } });
  123. break;
  124. }
  125. case 'resetDisabled': {
  126. formApi.setState({ commonConfig: { disabled: false } });
  127. break;
  128. }
  129. case 'hiddenAction': {
  130. formApi.setState({ showDefaultActions: false });
  131. break;
  132. }
  133. case 'showAction': {
  134. formApi.setState({ showDefaultActions: true });
  135. break;
  136. }
  137. case 'hiddenResetButton': {
  138. formApi.setState({ resetButtonOptions: { show: false } });
  139. break;
  140. }
  141. case 'showResetButton': {
  142. formApi.setState({ resetButtonOptions: { show: true } });
  143. break;
  144. }
  145. case 'hiddenSubmitButton': {
  146. formApi.setState({ submitButtonOptions: { show: false } });
  147. break;
  148. }
  149. case 'showSubmitButton': {
  150. formApi.setState({ submitButtonOptions: { show: true } });
  151. break;
  152. }
  153. case 'updateResetButton': {
  154. formApi.setState({
  155. resetButtonOptions: { disabled: true },
  156. });
  157. break;
  158. }
  159. case 'updateSubmitButton': {
  160. formApi.setState({
  161. submitButtonOptions: { loading: true },
  162. });
  163. break;
  164. }
  165. case 'updateActionAlign': {
  166. formApi.setState({
  167. // 可以自行调整class
  168. actionWrapperClass: 'text-center',
  169. });
  170. break;
  171. }
  172. case 'batchAddSchema': {
  173. formApi.setState((prev) => {
  174. const currentSchema = prev?.schema ?? [];
  175. const newSchema = [];
  176. for (let i = 0; i < 2; i++) {
  177. newSchema.push({
  178. component: 'Input',
  179. componentProps: {
  180. placeholder: '请输入',
  181. },
  182. fieldName: `field${i}${Date.now()}`,
  183. label: `field+`,
  184. });
  185. }
  186. return {
  187. schema: [...currentSchema, ...newSchema],
  188. };
  189. });
  190. break;
  191. }
  192. case 'batchDeleteSchema': {
  193. formApi.setState((prev) => {
  194. const currentSchema = prev?.schema ?? [];
  195. return {
  196. schema: currentSchema.slice(0, -2),
  197. };
  198. });
  199. break;
  200. }
  201. }
  202. }
  203. </script>
  204. <template>
  205. <div>
  206. <Space class="mb-5 flex-wrap">
  207. <Button @click="handleClick('updateSchema')">updateSchema</Button>
  208. <Button @click="handleClick('labelWidth')">更改labelWidth</Button>
  209. <Button @click="handleClick('resetLabelWidth')">还原labelWidth</Button>
  210. <Button @click="handleClick('disabled')">禁用表单</Button>
  211. <Button @click="handleClick('resetDisabled')">解除禁用</Button>
  212. <Button @click="handleClick('hiddenAction')">隐藏操作按钮</Button>
  213. <Button @click="handleClick('showAction')">显示操作按钮</Button>
  214. <Button @click="handleClick('hiddenResetButton')">隐藏重置按钮</Button>
  215. <Button @click="handleClick('showResetButton')">显示重置按钮</Button>
  216. <Button @click="handleClick('hiddenSubmitButton')">隐藏提交按钮</Button>
  217. <Button @click="handleClick('showSubmitButton')">显示提交按钮</Button>
  218. <Button @click="handleClick('updateResetButton')">修改重置按钮</Button>
  219. <Button @click="handleClick('updateSubmitButton')">修改提交按钮</Button>
  220. <Button @click="handleClick('updateActionAlign')">
  221. 调整操作按钮位置
  222. </Button>
  223. <Button @click="handleClick('batchAddSchema')"> 批量添加表单项 </Button>
  224. <Button @click="handleClick('batchDeleteSchema')">
  225. 批量删除表单项
  226. </Button>
  227. </Space>
  228. <BaseForm />
  229. </div>
  230. </template>