perf: 保存产品: 返回新数据显示

src/views/products/Detail/ProductInfoForm.jsx

@@ -36,12 +36,8 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editablePerm, infoEditabl
   const [showSave, setShowSave] = useState(true);
   useEffect(() => {
     form.resetFields();
-    form.setFieldValue('city', editingProduct?.info?.city_id ? { value: editingProduct?.info?.city_id, label: editingProduct?.info?.city_name } : undefined);
+
-    form.setFieldValue('dept', { value: editingProduct?.info?.dept_id, label: editingProduct?.info?.dept_name });
+    form.setFieldsValue(serverData2Form(editingProduct));
-    const lgc_details_mapped = (editingProduct?.lgc_details || []).reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
-    form.setFieldValue('lgc_details_mapped', lgc_details_mapped);
-    form.setFieldValue('quotation', editingProduct?.quotation);
-    form.setFieldValue('display_to_c', editingProduct.info?.display_to_c || '0');
     setPickEditedInfo({ ...pickEditedInfo, product_title: editingProduct?.info?.product_title });
 
     setFormEditable(infoEditable || priceEditable);
@@ -54,7 +50,7 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editablePerm, infoEditabl
 
   const onFinish = (values) => {
     console.log('Received values of form, origin form value: \n', values);
-    const dest = formValuesMapper(values);
+    const dest = formValuesMapper2Server(values);
     console.log('form value send to onSubmit:\n', dest);
     if (typeof onSubmit === 'function') {
       onSubmit(null, dest, values);
@@ -80,7 +76,7 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editablePerm, infoEditabl
     }
   };
   const onIValuesChange = (changedValues, allValues) => {
-    const dest = formValuesMapper(allValues);
+    const dest = formValuesMapper2Server(allValues);
     // console.log('form onValuesChange', Object.keys(changedValues), changedValues);
     if ('product_title' in changedValues) {
       const editTitle = (changedValues.product_title);
@@ -339,7 +335,7 @@ function getFields(props) {
       'sort_order',
       99,
       <Form.Item name='sort_order' label={t('SortOrder')} {...fieldProps.sort_order} >
-        <InputNumber {...styleProps} {...editableProps('sort_order')} min={1} max={1000} />
+        <InputNumber {...styleProps} {...editableProps('sort_order')} max={1000} />
       </Form.Item>,
       fieldProps?.sort_order?.col || midCol
     ),
@@ -407,7 +403,20 @@ function getFields(props) {
   return children;
 }
 
-const formValuesMapper = (values) => {
+const serverData2Form = (productItem) => {
+  const infoForRender = {
+    city: productItem?.info?.city_id ? { value: productItem?.info?.city_id, label: productItem?.info?.city_name } : undefined,
+    dept: { value: productItem?.info?.dept_id, label: productItem?.info?.dept_name },
+    display_to_c: productItem.info?.display_to_c || '0',
+    city_list: productItem?.info?.city_list ? productItem?.info?.city_list?.map((ele) => ({ value: ele.id, label: ele.name })) : undefined,
+    sub_type_D: productItem?.info?.item_type || '',
+  };
+  const lgc_details_mapped = (productItem?.lgc_details || []).reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
+  const quotation = productItem?.quotation || [];
+  return { ...productItem, ...(productItem?.info || {}), ...infoForRender, lgc_details_mapped };
+};
+
+const formValuesMapper2Server = (values) => {
   const destinationObject = {
     'city': [
       { key: 'city_id', transform: (value) => value?.value || value?.key || '' },
@@ -464,13 +473,14 @@ const formValuesMapper = (values) => {
     ],
     'product_title': { key: 'title' },
     'sub_type_D': { key: 'item_type'},
+    'sort_order': { key: 'sort_order'},
   };
   let dest = {};
   const { city, dept, product_title, sub_type_D, ...omittedValue } = values;
   dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
   for (const key in dest) {
     if (Object.prototype.hasOwnProperty.call(dest, key)) {
-      dest[key] = typeof dest[key] === 'string' ? (dest[key] || '').trim() : dest[key];
+      dest[key] = typeof dest[key] === 'string' ? (dest[key] || '').trim() : (dest[key] ?? '');
     }
   }
   // omit empty