From f6b0dd8d0477f481d8891c4bcb3087b7e95f1a66 Mon Sep 17 00:00:00 2001 From: Lei OT Date: Fri, 2 Aug 2024 14:40:19 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E8=AF=AD=E7=A7=8D=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/products/Detail/ProductInfoForm.jsx | 148 ++++++++++-------- src/views/products/Detail/ProductInfoLgc.jsx | 88 +++++++---- 2 files changed, 134 insertions(+), 102 deletions(-) diff --git a/src/views/products/Detail/ProductInfoForm.jsx b/src/views/products/Detail/ProductInfoForm.jsx index 2add3e4..e53bfd8 100644 --- a/src/views/products/Detail/ProductInfoForm.jsx +++ b/src/views/products/Detail/ProductInfoForm.jsx @@ -1,34 +1,25 @@ import { useEffect, useState } from 'react'; -import { Form, Input, Row, Col, Select, DatePicker, Space, Button, InputNumber, Radio, Checkbox, Divider } from 'antd'; -import { objectMapper, at, isEmpty, isNotEmpty } from '@/utils/commons'; -import { DATE_FORMAT, SMALL_DATETIME_FORMAT } from '@/config'; -// import useFormStore from '@/stores/Form'; +import { Form, Input, Row, Col, Select, Button, InputNumber, Checkbox } from 'antd'; +import { objectMapper, isEmpty, isNotEmpty } from '@/utils/commons'; import { useTranslation } from 'react-i18next'; import { useWeekdays } from '@/hooks/useDatePresets'; import DeptSelector from '@/components/DeptSelector'; import CitySelector from '@/components/CitySelector'; - -import { fetchJSON } from '@/utils/request'; -import { HT_HOST } from '@/config'; - -// import SearchInput from './SearchInput'; -// import AuditStateSelector from './AuditStateSelector'; -import { useProductsTypesMapVal, useProductsTypesFieldsets } from '@/hooks/useProductsSets'; -import useProductsStore, { postProductsSaveAction } from '@/stores/Products/Index'; +import { useProductsTypesFieldsets } from '@/hooks/useProductsSets'; +import useProductsStore from '@/stores/Products/Index'; import ProductInfoLgc from './ProductInfoLgc'; import ProductInfoQuotation from './ProductInfoQuotation'; import useAuthStore from '@/stores/Auth'; -import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config'; -import { useHTLanguageSets, useHTLanguageSetsMapVal } from '@/hooks/useHTLanguageSets'; +import { PERM_PRODUCTS_OFFER_AUDIT } from '@/config'; +import { useHTLanguageSetsMapVal } from '@/hooks/useHTLanguageSets'; -const { RangePicker } = DatePicker; const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, showSubmit, confirmText, formName, ...props }) => { const { t } = useTranslation('products'); + const HTLanguageSetsMapVal = useHTLanguageSetsMapVal(); const isPermitted = useAuthStore((state) => state.isPermitted); - const [loading, setLoading, agencyProducts, editingProduct, setEditingProduct] = useProductsStore((state) => [state.loading, state.setLoading, state.agencyProducts, state.editingProduct, state.setEditingProduct]); + const [loading, editingProduct] = useProductsStore((state) => [state.loading, state.editingProduct]); const weekdays = useWeekdays(); - const HTLanguageSetsMapVal = useHTLanguageSetsMapVal(); const [form] = Form.useForm(); const { sort, hides, fieldProps, fieldComProps } = { sort: '', @@ -48,6 +39,7 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show form.resetFields(); form.setFieldValue('city', { value: editingProduct?.info?.city_id, label: editingProduct?.info?.city_name }); form.setFieldValue('dept', { value: editingProduct?.info?.dept_id, label: editingProduct?.info?.dept_name }); + form.setFieldValue('lgc_details', editingProduct?.lgc_details || []); const isNew = isEmpty(editingProduct?.info?.id) || _editable; // 新增产品; 状态=新增 const ignoreEditable0 = topPerm || isNew; // 允许编辑 @@ -56,8 +48,7 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show // console.log('+++++++++++++++++++', '\ntopPerm', topPerm, '\nisNew', isNew, '\nignoreEditable0', ignoreEditable0, '\neditable0', editable0, '\n_editable', _editable); setEditable(editable0); return () => {}; - }, [editingProduct?.info?.id, _editable]) - + }, [editingProduct?.info?.id, _editable]); const onFinish = (values) => { console.log('Received values of form, origin form value: \n', values); @@ -68,9 +59,9 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show } }; - const onFinishFailed = ({ values, errorFields, }) => { + const onFinishFailed = ({ values, errorFields }) => { console.log('form validate failed', '\nform values:', values, '\nerrorFields', errorFields); - } + }; const handleReset = () => { form.setFieldsValue({ @@ -82,19 +73,24 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show }; const onIValuesChange = (changedValues, allValues) => { const dest = formValuesMapper(allValues); - // console.log('form onValuesChange', Object.keys(changedValues), args); + // console.log('form onValuesChange', Object.keys(changedValues), changedValues); if (typeof onValuesChange === 'function') { onValuesChange(dest); } }; + const onFieldsChange = (hangedFields, allFields) => { + console.log('onFieldsChange', hangedFields, allFields); + }; return ( <>
@@ -110,23 +106,24 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable: _editable, show )} */} {/* */} - ({ - transform(value) { - return value.filter(Boolean); - }, - validator(_, value) { - const invalidLgcName = (value).filter(l => isEmpty(l.title)).map(x => HTLanguageSetsMapVal[x.lgc].label).join(', '); - if (isNotEmpty(invalidLgcName)) { - return Promise.reject(new Error(`请完善多语种信息: ${invalidLgcName}`)); - } - return Promise.resolve(); - }, - }), - ]}> + ({ + transform(value) { + return Object.values(value).filter(_v => !isEmpty(_v)); + }, + validator: async (_, valueArr) => { + const invalidLgcName = valueArr + .filter((l) => isEmpty(l.title)) + .map((x) => HTLanguageSetsMapVal[x.lgc].label) + .join(', '); + if (isNotEmpty(invalidLgcName)) { + return Promise.reject(new Error(`请完善多语种信息: ${invalidLgcName}`)); + } + return Promise.resolve(); + }, + }), + ]}> @@ -159,7 +156,7 @@ function getFields(props) { // const disabled = props.ignoreEditable ? false : (isEmpty(props.initialValue?.[name]) && props.editable ? false : true) const disabled = !props.editable; return { disabled, className: disabled ? '!text-slate-500' : '' }; - } + }; const bigCol = 4 * 2; const midCol = 8; const layoutProps = { @@ -178,7 +175,7 @@ function getFields(props) { name, render, 'hide': false, - 'col': { lg: { span: customCol }, md: { span: mdCol < 8 ? 10 : (mdCol > 24 ? 24 : mdCol) }, flex: mdCol < 8 ? '1 0' : '' }, + 'col': { lg: { span: customCol }, md: { span: mdCol < 8 ? 10 : mdCol > 24 ? 24 : mdCol }, flex: mdCol < 8 ? '1 0' : '' }, }; }; let baseChildren = []; @@ -186,7 +183,7 @@ function getFields(props) { item( 'code', 99, - + , fieldProps?.code?.col || midCol @@ -229,7 +226,9 @@ function getFields(props) { 99, {/* */} - + + + handleChange('title', e.target.value)} // disabled={isCanEditable} // disabled={ignoreEditable ? false : (!isEmpty(ele.title) || !editable)} - disabled={ignoreEditable ? false : (!editable)} + disabled={ignoreEditable ? false : !editable} // disabled={!editable} /> - - + handleChange('description', e.target.value)} // disabled={ignoreEditable ? false : (!isEmpty(ele.descriptions) || !editable)} - disabled={ignoreEditable ? false : (!editable)} + disabled={ignoreEditable ? false : !editable} // disabled={!editable} /> -