| | |
|---|
| | | import React, { useState, useRef, useEffect } from 'react'; |
|---|
| | | import { |
|---|
| | | ProForm, |
|---|
| | | ProFormDigit, |
|---|
| | | ProFormText, |
|---|
| | | ProFormSelect, |
|---|
| | | ProFormDateTimePicker |
|---|
| | | } from '@ant-design/pro-components'; |
|---|
| | | import { Form, Modal } from 'antd'; |
|---|
| | | import { FormattedMessage, useIntl } from '@umijs/max'; |
|---|
| | | import moment from 'moment'; |
|---|
| | | import Http from '@/utils/http'; |
|---|
| | | |
|---|
| | | const Edit = (props) => { |
|---|
| | | const intl = useIntl(); |
|---|
| | | const [form] = Form.useForm(); |
|---|
| | | const { } = props; |
|---|
| | | |
|---|
| | | useEffect(() => { |
|---|
| | | form.resetFields(); |
|---|
| | | form.setFieldsValue({ |
|---|
| | | ...props.values |
|---|
| | | }) |
|---|
| | | }, [form, props]) |
|---|
| | | |
|---|
| | | const handleCancel = () => { |
|---|
| | | props.onCancel(); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | const handleOk = () => { |
|---|
| | | form.submit(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | const handleFinish = async (values) => { |
|---|
| | | props.onSubmit({ ...values }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <> |
|---|
| | | <Modal |
|---|
| | | title={ |
|---|
| | | Object.keys(props.values).length > 0 |
|---|
| | | ? intl.formatMessage({ id: 'page.edit', defaultMessage: '编辑' }) |
|---|
| | | : intl.formatMessage({ id: 'page.add', defaultMessage: '添加' }) |
|---|
| | | } |
|---|
| | | width={640} |
|---|
| | | forceRender |
|---|
| | | destroyOnClose |
|---|
| | | open={props.open} |
|---|
| | | onCancel={handleCancel} |
|---|
| | | onOk={handleOk} |
|---|
| | | > |
|---|
| | | <ProForm |
|---|
| | | form={form} |
|---|
| | | submitter={false} |
|---|
| | | onFinish={handleFinish} |
|---|
| | | layout="horizontal" |
|---|
| | | grid={true} |
|---|
| | | > |
|---|
| | | <ProFormDigit |
|---|
| | | name="id" |
|---|
| | | disabled |
|---|
| | | hidden={true} |
|---|
| | | /> |
|---|
| | | @{FORMEDITCOLUMNS} |
|---|
| | | </ProForm> |
|---|
| | | </Modal> |
|---|
| | | </> |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default Edit; |
|---|
| | | <script setup>
|
|---|
| | | import { ref, nextTick } from 'vue';
|
|---|
| | | import { get, post, postBlob, postForm } from '@/utils/request.js'
|
|---|
| | | import { formatMessage } from '@/utils/localeUtils.js';
|
|---|
| | | import { message } from 'ant-design-vue';
|
|---|
| | |
|
|---|
| | | const formTable = ref(null);
|
|---|
| | | const submitButton = ref(null);
|
|---|
| | | const isSave = ref(true);
|
|---|
| | | const open = ref(false);
|
|---|
| | | const initFormData = {}
|
|---|
| | | let formData = ref(initFormData);
|
|---|
| | |
|
|---|
| | | const emit = defineEmits(['tableReload'])
|
|---|
| | |
|
|---|
| | | const handleOk = (e) => {
|
|---|
| | | nextTick(() => {
|
|---|
| | | setTimeout(() => {
|
|---|
| | | submitButton.value.$el.click();
|
|---|
| | | }, 100);
|
|---|
| | | });
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | const onFinish = values => {
|
|---|
| | | // console.log('Success:', values);
|
|---|
| | | open.value = false;
|
|---|
| | | post(isSave.value ? '/api/@{SIMPLEENTITYNAME}/save' : '/api/@{SIMPLEENTITYNAME}/update', formData.value).then((resp) => {
|
|---|
| | | let result = resp.data;
|
|---|
| | | if (result.code === 200) {
|
|---|
| | | message.success(isSave.value ? formatMessage('page.add.success', '新增成功') : formatMessage('page.update.success', '更新成功'));
|
|---|
| | | } else {
|
|---|
| | | message.error(result.msg);
|
|---|
| | | }
|
|---|
| | | emit('tableReload', 'reload')
|
|---|
| | | nextTick(() => {
|
|---|
| | | formTable.value.resetFields()
|
|---|
| | | })
|
|---|
| | | })
|
|---|
| | | };
|
|---|
| | | const onFinishFailed = errorInfo => {
|
|---|
| | | console.log('Failed:', errorInfo);
|
|---|
| | | };
|
|---|
| | |
|
|---|
| | | @{FORMEDITFOREIGNKEYCOLUMNS}
|
|---|
| | |
|
|---|
| | | defineExpose({
|
|---|
| | | open,
|
|---|
| | | formData,
|
|---|
| | | initFormData,
|
|---|
| | | isSave,
|
|---|
| | | })
|
|---|
| | |
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | export default {
|
|---|
| | | name: '@{TABLEDESC}-edit'
|
|---|
| | | }
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <template>
|
|---|
| | | <div>
|
|---|
| | | <a-modal v-model:open="open"
|
|---|
| | | :title="isSave ? formatMessage('page.add', '添加') : formatMessage('page.edit', '编辑')" @ok="handleOk"
|
|---|
| | | style="width: 600px;">
|
|---|
| | | <a-form :model="formData" ref="formTable" name="formTable" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"
|
|---|
| | | style="display: flex;justify-content: space-between;flex-wrap: wrap;" autocomplete="off"
|
|---|
| | | @finish="onFinish" @finishFailed="onFinishFailed">
|
|---|
| | | @{FORMEDITCOLUMNS}
|
|---|
| | | <a-form-item>
|
|---|
| | | <a-button type="primary" html-type="submit" ref="submitButton"
|
|---|
| | | style="visibility: hidden;">Submit</a-button>
|
|---|
| | | </a-form-item>
|
|---|
| | | </a-form>
|
|---|
| | | </a-modal>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <style></style> |
|---|
