| | |
| | | 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'; |
| | | <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 Edit = (props) => { |
| | | const intl = useIntl(); |
| | | const [form] = Form.useForm(); |
| | | const { } = props; |
| | | const formTable = ref(null); |
| | | const submitButton = ref(null); |
| | | const isSave = ref(true); |
| | | const open = ref(false); |
| | | const initFormData = {} |
| | | let formData = ref(initFormData); |
| | | |
| | | useEffect(() => { |
| | | form.resetFields(); |
| | | form.setFieldsValue({ |
| | | ...props.values |
| | | 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() |
| | | }) |
| | | }, [form, props]) |
| | | }) |
| | | }; |
| | | const onFinishFailed = errorInfo => { |
| | | console.log('Failed:', errorInfo); |
| | | }; |
| | | |
| | | const handleCancel = () => { |
| | | props.onCancel(); |
| | | }; |
| | | @{FORMEDITFOREIGNKEYCOLUMNS} |
| | | |
| | | const handleOk = () => { |
| | | form.submit(); |
| | | } |
| | | defineExpose({ |
| | | open, |
| | | formData, |
| | | initFormData, |
| | | isSave, |
| | | }) |
| | | |
| | | const handleFinish = async (values) => { |
| | | props.onSubmit({ ...values }); |
| | | } |
| | | </script> |
| | | |
| | | 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> |
| | | </> |
| | | ) |
| | | <script> |
| | | export default { |
| | | name: '@{TABLEDESC}-edit' |
| | | } |
| | | </script> |
| | | |
| | | export default Edit; |
| | | <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> |