fix: 增加合同备注表单
parent
6cb61a850a
commit
596dcbd5b0
@ -0,0 +1,93 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { Form, Modal, Input, Button, Flex, App } from 'antd'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import useProductsStore from '@/stores/Products/Index'
|
||||||
|
import { useProductsTypesMapVal } from '@/hooks/useProductsSets'
|
||||||
|
import RequireAuth from '@/components/RequireAuth'
|
||||||
|
import { PERM_PRODUCTS_OFFER_PUT } from '@/config'
|
||||||
|
|
||||||
|
export const ContractRemarksModal = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const { notification } = App.useApp()
|
||||||
|
const productsTypesMapVal = useProductsTypesMapVal()
|
||||||
|
const [getRemarkList, saveOrUpdateRemark] = useProductsStore((state) => [
|
||||||
|
state.getRemarkList, state.saveOrUpdateRemark
|
||||||
|
])
|
||||||
|
|
||||||
|
const [isRemarksModalOpen, setRemarksModalOpen] = useState(false)
|
||||||
|
const [remarksForm] = Form.useForm()
|
||||||
|
|
||||||
|
const onRemarksFinish = () => {
|
||||||
|
const remarkList = remarksForm.getFieldsValue().remarkList
|
||||||
|
saveOrUpdateRemark(remarkList)
|
||||||
|
.then(() => {
|
||||||
|
notification.info({
|
||||||
|
message: 'Notification',
|
||||||
|
description: '合同备注保存成功',
|
||||||
|
placement: 'top',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(ex => {
|
||||||
|
notification.error({
|
||||||
|
message: 'Notification',
|
||||||
|
description: ex.message,
|
||||||
|
placement: 'top',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleContractRemarks = () => {
|
||||||
|
getRemarkList()
|
||||||
|
.then(list => {
|
||||||
|
remarksForm.setFieldsValue({remarkList:list})
|
||||||
|
})
|
||||||
|
|
||||||
|
setRemarksModalOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFieldLabel = (field) => {
|
||||||
|
const remarkList = remarksForm.getFieldsValue([['remarkList']]).remarkList
|
||||||
|
return productsTypesMapVal[remarkList[field.key].product_type_id]?.label
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}>
|
||||||
|
<Button size='small' onClick={handleContractRemarks}>{t('products:ContractRemarks')}</Button>
|
||||||
|
</RequireAuth>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
centered
|
||||||
|
title={t('products:ContractRemarks')}
|
||||||
|
width={'640px'}
|
||||||
|
open={isRemarksModalOpen}
|
||||||
|
onOk={() => onRemarksFinish()}
|
||||||
|
onCancel={() => setRemarksModalOpen(false)}
|
||||||
|
destroyOnClose
|
||||||
|
forceRender
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
labelCol={{ span: 3 }}
|
||||||
|
wrapperCol={{ span: 20 }}
|
||||||
|
form={remarksForm}
|
||||||
|
name='remarksForm'
|
||||||
|
autoComplete='off'
|
||||||
|
>
|
||||||
|
<Form.List name='remarkList'>
|
||||||
|
{(fields) => (
|
||||||
|
<Flex gap='middle' vertical>
|
||||||
|
{fields.map((field) => (
|
||||||
|
<Form.Item label={getFieldLabel(field)} name={[field.name, 'Memo']} key={field.key}>
|
||||||
|
<Input.TextArea rows={2}></Input.TextArea>
|
||||||
|
</Form.Item>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
</Form.List>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default ContractRemarksModal
|
Loading…
Reference in New Issue