form.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <script lang="ts" setup>
  2. import type { SystemModel } from '#/api';
  3. import { computed, ref } from 'vue';
  4. import { useVbenModal } from '@vben/common-ui';
  5. import { Button } from 'ant-design-vue';
  6. import { useVbenForm } from '#/adapter/form';
  7. import { $t } from '#/locales';
  8. import { useUserFormSchema } from '../data';
  9. const emit = defineEmits(['success']);
  10. const formData = ref<SystemModel.Organization>();
  11. const getTitle = computed(() => {
  12. return formData.value?.id
  13. ? $t('ui.actionTitle.edit', [$t('system.organization._')])
  14. : $t('ui.actionTitle.create', [$t('system.organization._')]);
  15. });
  16. const [Form, formApi] = useVbenForm({
  17. // layout: 'vertical',
  18. schema: useUserFormSchema(),
  19. showDefaultActions: false,
  20. });
  21. function resetForm() {
  22. formApi.resetForm();
  23. formApi.setValues(formData.value || {});
  24. }
  25. const [Modal, modalApi] = useVbenModal({});
  26. </script>
  27. <template>
  28. <Modal :title="getTitle">
  29. <Form class="mx-4" />
  30. <template #prepend-footer>
  31. <div class="flex-auto">
  32. <Button type="primary" danger @click="resetForm">
  33. {{ $t('common.reset') }}
  34. </Button>
  35. </div>
  36. </template>
  37. </Modal>
  38. </template>