FormModal.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <div class="vent-form">
  3. <BasicForm @register="registerForm" />
  4. <div class="j-box-bottom-button offset-20" style="margin-top: 30px">
  5. <div class="j-box-bottom-button-float">
  6. <a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
  7. <a-button type="primary" preIcon="ant-design:save-filled" @click="handleSubmit">保存</a-button>
  8. </div>
  9. </div>
  10. </div>
  11. </template>
  12. <script lang="ts" setup>
  13. import { inject, nextTick, watch } from 'vue';
  14. import { BasicForm, useForm } from '/@/components/Form/index';
  15. // 声明Emits
  16. const emit = defineEmits(['saveOrUpdate']);
  17. const testData = inject('formData') as any;
  18. //表单配置
  19. const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
  20. schemas: inject('formSchema'),
  21. showActionButtonGroup: false,
  22. });
  23. watch(
  24. testData,
  25. (newV) => {
  26. nextTick(() => {
  27. setFieldsValue({ ...newV });
  28. });
  29. },
  30. { immediate: true }
  31. );
  32. // 重置表单
  33. async function onReset() {
  34. await resetFields();
  35. await setFieldsValue({ ...testData });
  36. }
  37. //表单提交事件
  38. async function handleSubmit(v) {
  39. try {
  40. let values = await validate();
  41. emit('saveOrUpdate', values);
  42. } finally {
  43. // setModalProps({ confirmLoading: false });
  44. }
  45. }
  46. </script>
  47. <style lang="less" scoped>
  48. @ventSpace: zxm;
  49. .j-box-bottom-button-float {
  50. border: none !important;
  51. padding-bottom: 30px;
  52. left: 0px !important;
  53. right: 0px !important;
  54. bottom: 0px !important;
  55. }
  56. .vent-form {
  57. .@{ventSpace}-select-selection-item {
  58. color: rgba(255, 255, 255, 1) !important;
  59. }
  60. }
  61. </style>