123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- <template>
- <div class="vent-form">
- <BasicForm @register="registerForm" />
- <div class="j-box-bottom-button offset-20" style="margin-top: 30px">
- <div class="j-box-bottom-button-float">
- <a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
- <a-button type="primary" preIcon="ant-design:save-filled" @click="handleSubmit">保存</a-button>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts" setup>
- import { inject, nextTick, watch } from 'vue';
- import { BasicForm, useForm } from '/@/components/Form/index';
- // 声明Emits
- const emit = defineEmits(['saveOrUpdate']);
- const testData = inject('formData') as any;
- //表单配置
- const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
- schemas: inject('formSchema'),
- showActionButtonGroup: false,
- });
- watch(
- testData,
- (newV) => {
- nextTick(() => {
- setFieldsValue({ ...newV });
- });
- },
- { immediate: true }
- );
- // 重置表单
- async function onReset() {
- await resetFields();
- await setFieldsValue({ ...testData });
- }
- //表单提交事件
- async function handleSubmit(v) {
- try {
- let values = await validate();
- emit('saveOrUpdate', values);
- } finally {
- // setModalProps({ confirmLoading: false });
- }
- }
- </script>
- <style lang="less" scoped>
- @ventSpace: zxm;
- .j-box-bottom-button-float {
- border: none !important;
- padding-bottom: 30px;
- left: 0px !important;
- right: 0px !important;
- bottom: 0px !important;
- }
- .vent-form {
- .@{ventSpace}-select-selection-item {
- color: rgba(255, 255, 255, 1) !important;
- }
- }
- </style>
|