stepBaseConfig.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <script lang="ts" setup>
  2. import { onMounted } from 'vue';
  3. import { useVbenForm } from '#/adapter';
  4. import { TenantApi } from '#/api';
  5. const [Form, { validate, setValues, getValues }] = useVbenForm({
  6. commonConfig: {
  7. componentProps: {
  8. class: 'w-full',
  9. },
  10. },
  11. schema: [
  12. {
  13. component: 'Input',
  14. componentProps: {
  15. placeholder: '请输入',
  16. },
  17. fieldName: 'code',
  18. label: '查询编号',
  19. rules: 'required',
  20. },
  21. {
  22. component: 'Input',
  23. componentProps: {
  24. placeholder: '请输入',
  25. },
  26. fieldName: 'name',
  27. label: '查询名称',
  28. rules: 'required',
  29. },
  30. {
  31. component: 'ApiSelect',
  32. componentProps: {
  33. placeholder: '请输入',
  34. api: {
  35. url: TenantApi.getOptions,
  36. },
  37. numberToString: true,
  38. },
  39. fieldName: 'configId',
  40. label: '数据库',
  41. rules: 'required',
  42. },
  43. {
  44. component: 'InputNumber',
  45. componentProps: {
  46. placeholder: '请输入',
  47. },
  48. fieldName: 'sort',
  49. label: '排序',
  50. rules: 'required',
  51. },
  52. {
  53. component: 'Textarea',
  54. componentProps: {
  55. placeholder: '请输入',
  56. },
  57. fieldName: 'remark',
  58. label: '备注',
  59. formItemClass: 'col-span-2 items-baseline',
  60. },
  61. ],
  62. showDefaultActions: false,
  63. wrapperClass: 'grid-cols-2',
  64. });
  65. const stepValidate = async () => {
  66. const { valid } = await validate();
  67. return valid;
  68. };
  69. const stepSetValues = async (data: Record<string, any>) => {
  70. await setValues(data);
  71. };
  72. const stepGetValues = async () => {
  73. return await getValues();
  74. };
  75. onMounted(async () => {});
  76. defineExpose({ stepSetValues, stepValidate, stepGetValues });
  77. </script>
  78. <template>
  79. <Form />
  80. </template>