产品编辑页面: 保存

perf/export-docx
Lei OT 11 months ago
parent 0d9a80cefd
commit 09d9cf5ec6

@ -129,7 +129,7 @@ export const useProductsTypesFieldsets = (type) => {
export const useNewProductRecord = () => { export const useNewProductRecord = () => {
return { return {
info: { info: {
'id': null, 'id': '',
'title': '', 'title': '',
'code': '', 'code': '',
'product_type_id': '', 'product_type_id': '',
@ -139,43 +139,43 @@ export const useNewProductRecord = () => {
'duration_unit': 'h', 'duration_unit': 'h',
'open_weekdays': '', 'open_weekdays': '',
'recommends_rate': 0, 'recommends_rate': 0,
'dept': '',
'dept_id': 0, 'dept_id': 0,
'dept_name': '', 'dept_name': '',
'display_to_c': 0, 'display_to_c': 0,
'km': 0, 'km': 0,
'city_id': 0, 'city_id': 0,
'city_name': '', 'city_name': '',
}, 'open_hours': '',
default_lgc: {
'title': '',
'description': '',
'lgc': 1,
'id': null,
},
default_quotation: {
'id': null,
'adult_cost': 0,
'child_cost': 0,
'currency': 'CNY',
'unit_id': '1',
'unit_name': '每团',
'group_size_min': 1,
'group_size_max': 2,
'use_dates_start': '',
'use_dates_end': '',
'weekdays': '',
'audit_state_id': -1,
'audit_state_name': '',
'lastedit_changed': '', 'lastedit_changed': '',
'create_date': '',
'created_by': '',
}, },
lgc_details: [ lgc_details: [
{ {
'title': '', 'title': '',
'description': '', 'description': '',
'lgc': 1, 'lgc': 1,
'id': null, 'id': '',
},
],
quotation: [
{
'id': '',
'adult_cost': 0,
'child_cost': 0,
'currency': 'CNY',
'unit_id': '1',
'unit_name': '每团',
'group_size_min': 1,
'group_size_max': 2,
'use_dates_start': '',
'use_dates_end': '',
'weekdays': '',
'audit_state_id': -1,
'audit_state_name': '',
'lastedit_changed': '',
}, },
], ],
quotation: [],
}; };
}; };

@ -95,7 +95,7 @@ export const postProductsAuditAction = async (auditState, infoRow) => {
// return errcode !== 0 ? {} : result; // return errcode !== 0 ? {} : result;
}; };
export const postProductsSave = async (products) => { export const postProductsSaveAction = async (products) => {
const { errcode, result } = await postJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_save`, products); const { errcode, result } = await postJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_save`, products);
return { errcode, result }; return { errcode, result };
} }

@ -1,35 +1,51 @@
import { createContext, useEffect, useState } from 'react'; import { createContext, useEffect, useState } from 'react';
import { Breadcrumb, Form, Divider, Button, Input, Select, Row, Col } from 'antd'; import { App, Breadcrumb, Form, Divider, Button, Input, Select, Row, Col } from 'antd';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useProductsTypesMapVal, } from '@/hooks/useProductsSets'; import { useProductsTypesMapVal, useNewProductRecord } from '@/hooks/useProductsSets';
import useProductsStore, { postProductsSave } from '@/stores/Products/Index'; import useProductsStore, { postProductsSaveAction } from '@/stores/Products/Index';
import useAuthStore from '@/stores/Auth'; import useAuthStore from '@/stores/Auth';
import RequireAuth from '@/components/RequireAuth'; import RequireAuth from '@/components/RequireAuth';
import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config'; import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT, } from '@/config';
import DeptSelector from '@/components/DeptSelector'; import DeptSelector from '@/components/DeptSelector';
import CitySelector from '@/components/CitySelector'; import CitySelector from '@/components/CitySelector';
import { at, isEmpty, pick } from '@/utils/commons'; import { at, isEmpty, pick } from '@/utils/commons';
import ProductInfoForm from './ProductInfoForm'; import ProductInfoForm from './ProductInfoForm';
import dayjs from 'dayjs';
import { usingStorage } from '@/hooks/usingStorage'
const ProductInfo = ({ editable, ...props }) => { const ProductInfo = ({ editable, ...props }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { notification, message } = App.useApp();
const { userId } = usingStorage()
const isPermitted = useAuthStore((state) => state.isPermitted); const isPermitted = useAuthStore((state) => state.isPermitted);
const productsTypesMapVal = useProductsTypesMapVal(); const productsTypesMapVal = useProductsTypesMapVal();
const [activeAgency, agencyProducts, editingProduct, setEditingProduct] = useProductsStore((state) => [state.activeAgency, state.agencyProducts, state.editingProduct, state.setEditingProduct]); const newProduct = useNewProductRecord();
const onSave = (err, values, forms) => { const [loading, setLoading, ] = useProductsStore((state) => [state.loading, state.setLoading]);
const [activeAgency, agencyProducts, editingProduct, ] = useProductsStore((state) => [state.activeAgency, state.agencyProducts, state.editingProduct, ]);
const onSave = async (err, values, forms) => {
values.travel_agency_id = activeAgency.travel_agency_id; values.travel_agency_id = activeAgency.travel_agency_id;
const poster = { const copyNewProduct = structuredClone(newProduct);
const poster = {
"audit_state": "-1", "audit_state": "-1",
// "create_date": "", // "create_date": dayjs().format('YYYY-MM-DD HH:mm:ss'),
// "created_by": "", // "created_by": userId,
"travel_agency_id": activeAgency.travel_agency_id, "travel_agency_id": activeAgency.travel_agency_id,
// "travel_agency_name": "", // "travel_agency_name": "",
// "lastedit_changed": "", // "lastedit_changed": "",
}; };
const copyFields = pick(editingProduct.info, ['title', 'product_type_id', ]); const copyFields = pick(editingProduct.info, ['title', 'product_type_id', ]);
const readyToSubInfo = {...values.info, ...copyFields, type: copyFields.product_type_id, ...poster }; const readyToSubInfo = {...copyNewProduct.info, ...values.info, ...copyFields, type: copyFields.product_type_id, ...poster };
console.log('onSave', editingProduct.info, readyToSubInfo); // console.log('onSave', editingProduct.info, readyToSubInfo);
const prevLgcDetailsMapped = editingProduct.lgc_details.reduce((r, c) => ({...r, [c.lgc]: {...c, description: c.descriptions}}), {}); // todo: description
const mergedLgc = { ...prevLgcDetailsMapped, ...values.lgc_details_mapped };
// todo:
setLoading(true);
const success = await postProductsSaveAction({ travel_agency_id: activeAgency.travel_agency_id, info: readyToSubInfo, lgc_details: Object.values(mergedLgc), });
setLoading(false);
success ? message.success(t('Success')) : message.error(t('Failed'));
// todo:
}; };
return ( return (
<> <>

@ -14,7 +14,7 @@ import { HT_HOST } from '@/config';
// import SearchInput from './SearchInput'; // import SearchInput from './SearchInput';
// import AuditStateSelector from './AuditStateSelector'; // import AuditStateSelector from './AuditStateSelector';
import { useProductsTypesMapVal, useProductsTypesFieldsets } from '@/hooks/useProductsSets'; import { useProductsTypesMapVal, useProductsTypesFieldsets } from '@/hooks/useProductsSets';
import useProductsStore from '@/stores/Products/Index'; import useProductsStore, { postProductsSaveAction } from '@/stores/Products/Index';
import ProductInfoLgc from './ProductInfoLgc'; import ProductInfoLgc from './ProductInfoLgc';
import ProductInfoQuotation from './ProductInfoQuotation'; import ProductInfoQuotation from './ProductInfoQuotation';
import useAuthStore from '@/stores/Auth'; import useAuthStore from '@/stores/Auth';
@ -22,10 +22,10 @@ import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFE
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
const InfoForm = ({ onSubmit, onReset, onValuesChange, editable, showSubmit, confirmText, formName, loading, ...props }) => { const InfoForm = ({ onSubmit, onReset, onValuesChange, editable, showSubmit, confirmText, formName, ...props }) => {
const { t } = useTranslation('products'); const { t } = useTranslation('products');
const isPermitted = useAuthStore((state) => state.isPermitted); const isPermitted = useAuthStore((state) => state.isPermitted);
const [agencyProducts, editingProduct, setEditingProduct] = useProductsStore((state) => [state.agencyProducts, state.editingProduct, state.setEditingProduct]); const [loading, setLoading, agencyProducts, editingProduct, setEditingProduct] = useProductsStore((state) => [state.loading, state.setLoading, state.agencyProducts, state.editingProduct, state.setEditingProduct]);
const weekdays = useWeekdays(); const weekdays = useWeekdays();
const [form] = Form.useForm(); const [form] = Form.useForm();
const { sort, hides, fieldProps, fieldComProps } = { const { sort, hides, fieldProps, fieldComProps } = {
@ -50,16 +50,15 @@ const InfoForm = ({ onSubmit, onReset, onValuesChange, editable, showSubmit, con
}, [editingProduct?.info?.id]); }, [editingProduct?.info?.id]);
const topPerm = isPermitted(PERM_PRODUCTS_OFFER_AUDIT); const topPerm = isPermitted(PERM_PRODUCTS_OFFER_AUDIT);
const isNew = isEmpty(editingProduct?.info?.id); const isNew = isEmpty(editingProduct?.info?.id) || editable;
const ignoreEditable = topPerm || isNew; const ignoreEditable = topPerm || isNew;
const onFinish = (values) => { const onFinish = (values) => {
console.log('Received values of form, origin form value: \n', values); console.log('Received values of form, origin form value: \n', values);
const dest = formValuesMapper(values); const dest = formValuesMapper(values);
console.log('form value send to onSubmit:\n', dest); console.log('form value send to onSubmit:\n', dest);
const str = new URLSearchParams(dest).toString();
if (typeof onSubmit === 'function') { if (typeof onSubmit === 'function') {
onSubmit(null, dest, values, str); onSubmit(null, dest, values);
} }
}; };
@ -120,7 +119,8 @@ function getFields(props) {
// console.log('getFields', props.initialValue); // console.log('getFields', props.initialValue);
const styleProps = {}; const styleProps = {};
const editableProps = (name) => { const editableProps = (name) => {
const disabled = props.ignoreEditable ? false : (isEmpty(props.initialValue?.[name]) && props.editable ? false : true) // const disabled = props.ignoreEditable ? false : (isEmpty(props.initialValue?.[name]) && props.editable ? false : true)
const disabled = !props.editable;
return { disabled, className: disabled ? '!text-slate-500' : '' }; return { disabled, className: disabled ? '!text-slate-500' : '' };
} }
const bigCol = 4 * 2; const bigCol = 4 * 2;
@ -194,7 +194,7 @@ function getFields(props) {
{/* <Input placeholder={t('RecommendsRate')} allowClear /> */} {/* <Input placeholder={t('RecommendsRate')} allowClear /> */}
<Select {...styleProps} {...editableProps('recommends_rate')} <Select {...styleProps} {...editableProps('recommends_rate')}
style={{ width: '100%' }} style={{ width: '100%' }}
labelInValue labelInValue={false}
options={[ options={[
{ value: '1', label: 'Top 1' }, { value: '1', label: 'Top 1' },
{ value: '2', label: '2' }, { value: '2', label: '2' },

@ -38,14 +38,16 @@ const ProductInfoLgc = ({ editable, ignoreEditable, formInstance, ...props }) =>
<Input className={' !text-slate-600'} allowClear <Input className={' !text-slate-600'} allowClear
// onChange={(e) => handleChange('title', e.target.value)} // onChange={(e) => handleChange('title', e.target.value)}
// disabled={isCanEditable} // disabled={isCanEditable}
disabled={ignoreEditable ? false : (!isEmpty(ele.title) || !editable)} // disabled={ignoreEditable ? false : (!isEmpty(ele.title) || !editable)}
disabled={!editable}
/> />
</Form.Item> </Form.Item>
<Form.Item name={[li, 'description']} label={t('products:Description')} initialValue={ele.descriptions}> <Form.Item name={[li, 'description']} label={t('products:Description')} initialValue={ele.descriptions}>
<Input.TextArea className={'!text-slate-600'} <Input.TextArea className={'!text-slate-600'}
rows={3} allowClear rows={3} allowClear
// onChange={(e) => handleChange('description', e.target.value)} // onChange={(e) => handleChange('description', e.target.value)}
disabled={ignoreEditable ? false : (!isEmpty(ele.descriptions) || !editable)} // disabled={ignoreEditable ? false : (!isEmpty(ele.descriptions) || !editable)}
disabled={!editable}
/> />
</Form.Item> </Form.Item>
<Form.Item hidden name={[li, 'lgc']} initialValue={ele.lgc}> <Form.Item hidden name={[li, 'lgc']} initialValue={ele.lgc}>
@ -87,7 +89,7 @@ const ProductInfoLgc = ({ editable, ignoreEditable, formInstance, ...props }) =>
<Form.Item hidden name={[i, 'lgc']} initialValue={lgcItem.value}> <Form.Item hidden name={[i, 'lgc']} initialValue={lgcItem.value}>
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item hidden name={[i, 'id']}> <Form.Item hidden name={[i, 'id']} initialValue={''}>
<Input /> <Input />
</Form.Item> </Form.Item>
</> </>

Loading…
Cancel
Save