todo: 产品编辑页面: 组件
Lei OT
11 months ago
parent
ab50a891f2
commit
1dfc2d23d7
@ -0,0 +1,331 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Form, Input, Row, Col, Select, DatePicker, Space, Button, InputNumber, Radio, Checkbox, Divider } from 'antd';
|
||||
import { objectMapper, at } from '@/utils/commons';
|
||||
import { DATE_FORMAT, SMALL_DATETIME_FORMAT } from '@/config';
|
||||
// import useFormStore from '@/stores/Form';
|
||||
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 from '@/stores/Products/Index';
|
||||
import ProductInfoLgc from './ProductInfoLgc';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const InfoForm = ({ formInstance, onSubmit, onReset, onValuesChange, editable, showSubmit, confirmText, formName, loading, ...props }) => {
|
||||
const { t } = useTranslation('products');
|
||||
const [agencyProducts, editingProduct, setEditingProduct] = useProductsStore((state) => [state.agencyProducts, state.editingProduct, state.setEditingProduct]);
|
||||
const weekdays = useWeekdays();
|
||||
// const [formValues, setFormValues] = useFormStore((state) => [state.formValues, state.setFormValues]);
|
||||
// const [formValuesToSub, setFormValuesToSub] = useFormStore((state) => [state.formValuesToSub, state.setFormValuesToSub]);
|
||||
const [form] = Form.useForm();
|
||||
const { sort, hides, fieldProps, fieldComProps } = {
|
||||
sort: '',
|
||||
fieldProps: '',
|
||||
fieldComProps: '',
|
||||
hides: [],
|
||||
shows: [],
|
||||
...props.fieldsConfig,
|
||||
};
|
||||
const filedsets = useProductsTypesFieldsets(editingProduct?.info?.product_type_id);
|
||||
const shows = filedsets[0];
|
||||
// console.log('filedsets', filedsets, shows);
|
||||
const formValuesMapper = (values) => {
|
||||
const destinationObject = {
|
||||
'keyword': { key: 'keyword', transform: (value) => value || '' },
|
||||
'referenceNo': { key: 'referenceNo', transform: (value) => value || '' },
|
||||
'dates': [
|
||||
{ key: 'startdate', transform: (arrVal) => (arrVal ? arrVal[0].format(DATE_FORMAT) : '') },
|
||||
{ key: 'enddate', transform: (arrVal) => (arrVal ? arrVal[1].format(DATE_FORMAT) : '') },
|
||||
{ key: 'starttime', transform: (arrVal) => (arrVal ? arrVal[0].format(DATE_FORMAT) : '') },
|
||||
{ key: 'endtime', transform: (arrVal) => (arrVal ? arrVal[1].format(SMALL_DATETIME_FORMAT) : '') },
|
||||
],
|
||||
'invoiceStatus': { key: 'invoiceStatus', transform: (value) => value?.value || value?.key || '', default: '' },
|
||||
'audit_state': { key: 'audit_state', transform: (value) => value?.value || value?.key || '', default: '' },
|
||||
'agency': {
|
||||
key: 'agency',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
||||
},
|
||||
},
|
||||
'year': [{ key: 'year', transform: (arrVal) => (arrVal ? arrVal.format('YYYY') : '') }],
|
||||
};
|
||||
let dest = {};
|
||||
const { dates, ...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];
|
||||
}
|
||||
}
|
||||
// omit empty
|
||||
// Object.keys(dest).forEach((key) => (dest[key] == null || dest[key] === '' || dest[key].length === 0) && delete dest[key]);
|
||||
return dest;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// const dest = formValuesMapper(formValues);
|
||||
// setFormValuesToSub(dest);
|
||||
form.resetFields();
|
||||
form.setFieldsValue(editingProduct?.info);
|
||||
form.setFieldValue('city', { value: editingProduct?.info?.city_id, label: editingProduct?.info?.city_name });
|
||||
// form.setFieldValue('open_weekdays', ['1', '2', '3', '4', '5', '6', '7']);
|
||||
return () => {};
|
||||
}, [editingProduct?.info?.id]);
|
||||
|
||||
const onFinish = (values) => {
|
||||
console.log('Received values of form, origin form value: \n', values);
|
||||
const dest = formValuesMapper(values);
|
||||
console.log('form value send to onSubmit:\n', dest);
|
||||
const str = new URLSearchParams(dest).toString();
|
||||
// setFormValues(values);
|
||||
// setFormValuesToSub(dest);
|
||||
if (typeof onSubmit === 'function') {
|
||||
onSubmit(null, dest, values, str);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
form.setFieldsValue({
|
||||
// 'DateType': undefined,
|
||||
});
|
||||
if (typeof onReset === 'function') {
|
||||
onReset();
|
||||
}
|
||||
};
|
||||
const onIValuesChange = (changedValues, allValues) => {
|
||||
const dest = formValuesMapper(allValues);
|
||||
// setFormValues(allValues);
|
||||
// setFormValuesToSub(dest);
|
||||
// console.log('form onValuesChange', Object.keys(changedValues), args);
|
||||
if (typeof onValuesChange === 'function') {
|
||||
onValuesChange(dest);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Form form={form} disabled={!(editable || false)} name={formName || 'product_info'} onFinish={onFinish} onValuesChange={onIValuesChange}>
|
||||
<Row gutter={16}>
|
||||
{getFields({ sort, initialValue: editingProduct?.info, hides, shows, fieldProps, fieldComProps, form, t, dataSets: { weekdays } })}
|
||||
{/* {showSubmit && (
|
||||
<Col flex='1 0 90px' className='flex justify-end items-start'>
|
||||
<Space align='center'>
|
||||
<Button size={'middle'} type='primary' htmlType='submit' loading={loading}>
|
||||
{confirmText || t('common:Save')}
|
||||
</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
)} */}
|
||||
</Row>
|
||||
{/* <Divider className='my-1' /> */}
|
||||
|
||||
<ProductInfoLgc formInstance={form} />
|
||||
|
||||
<Form.Item hidden name={'id'} label={'ID'}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
{showSubmit && (
|
||||
<Form.Item>
|
||||
<div className='flex justify-around'>
|
||||
<Button type='primary' htmlType='submit'>
|
||||
{t('common:Save')}
|
||||
</Button>
|
||||
</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function getFields(props) {
|
||||
const { fieldProps, fieldComProps, form, t, dataSets } = props;
|
||||
console.log('getFields', props.initialValue);
|
||||
const bigCol = 4 * 2;
|
||||
const midCol = 6;
|
||||
const layoutProps = {
|
||||
// gutter: { xs: 8, sm: 8, lg: 16 },
|
||||
lg: { span: 4 },
|
||||
md: { span: 8 },
|
||||
sm: { span: 12 },
|
||||
xs: { span: 24 },
|
||||
};
|
||||
const item = (name, sort = 0, render, col) => {
|
||||
const customCol = col || 4;
|
||||
const mdCol = customCol * 2;
|
||||
return {
|
||||
'key': '',
|
||||
sort,
|
||||
name,
|
||||
render,
|
||||
'hide': false,
|
||||
'col': { lg: { span: customCol }, md: { span: mdCol < 8 ? 10 : mdCol }, flex: mdCol < 8 ? '1 0' : '' },
|
||||
};
|
||||
};
|
||||
let baseChildren = [];
|
||||
baseChildren = [
|
||||
item(
|
||||
'code',
|
||||
99,
|
||||
<Form.Item name='code' label={t('Code')} {...fieldProps.code} initialValue={at(props, 'initialValue.code')[0]}>
|
||||
<Input allowClear {...fieldComProps.code} />
|
||||
</Form.Item>,
|
||||
fieldProps?.code?.col || 8
|
||||
),
|
||||
item(
|
||||
'city', // todo:
|
||||
99,
|
||||
<Form.Item name='city' label={t('City')} {...fieldProps.city} initialValue={at(props, 'initialValue.city')[0]}>
|
||||
<CitySelector />
|
||||
</Form.Item>,
|
||||
fieldProps?.city?.col || 8
|
||||
),
|
||||
item(
|
||||
'dept', // todo:
|
||||
99,
|
||||
<Form.Item name='dept' label={t('Dept')} {...fieldProps.dept}>
|
||||
<DeptSelector labelInValue={false} />
|
||||
</Form.Item>,
|
||||
fieldProps?.dept?.col || 8
|
||||
),
|
||||
item(
|
||||
'duration',
|
||||
99,
|
||||
<Form.Item name='duration' label={t('Duration')} {...fieldProps.duration}>
|
||||
<InputNumber suffix={'H'} max={24} />
|
||||
{/* <Input allowClear {...fieldComProps.duration} suffix={'H'} /> */}
|
||||
</Form.Item>,
|
||||
fieldProps?.duration?.col || 8
|
||||
),
|
||||
item(
|
||||
'km',
|
||||
99,
|
||||
<Form.Item name='km' label={t('KM')} {...fieldProps.km}>
|
||||
<InputNumber suffix={'KM'} min={1} />
|
||||
</Form.Item>,
|
||||
fieldProps?.km?.col || 8
|
||||
),
|
||||
item(
|
||||
'recommends_rate', // todo:
|
||||
99,
|
||||
<Form.Item name='recommends_rate' label={t('RecommendsRate')} {...fieldProps.recommends_rate}>
|
||||
{/* <Input placeholder={t('RecommendsRate')} allowClear /> */}
|
||||
<Select
|
||||
style={{ width: '100%' }}
|
||||
labelInValue
|
||||
options={[
|
||||
{ value: '1', label: 'Top 1' },
|
||||
{ value: '2', label: '2' },
|
||||
{ value: '3', label: '3' },
|
||||
{ value: '4', label: '4' },
|
||||
{ value: '5', label: '5' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>,
|
||||
fieldProps?.recommends_rate?.col || 8
|
||||
),
|
||||
item(
|
||||
'open_weekdays',
|
||||
99,
|
||||
<Form.Item name='open_weekdays' label={t('OpenWeekdays')} initialValue={['1', '2', '3', '4', '5', '6', '7']} {...fieldProps.open_weekdays}>
|
||||
{/* 默认全部 */}
|
||||
<Checkbox.Group options={dataSets.weekdays} />
|
||||
</Form.Item>,
|
||||
fieldProps?.open_weekdays?.col || 24
|
||||
),
|
||||
item(
|
||||
'display_to_c',
|
||||
99,
|
||||
<Form.Item
|
||||
name='display_to_c'
|
||||
label={t('DisplayToC')}
|
||||
{...fieldProps.display_to_c}
|
||||
// rules={[
|
||||
// () => ({
|
||||
// validator(_, value) {
|
||||
// if ((value || []).includes(153002) && !(value || []).includes(153001)) {
|
||||
// return Promise.reject(new Error('不允许仅报价信显示'));
|
||||
// }
|
||||
// return Promise.resolve();
|
||||
// },
|
||||
// }),
|
||||
// ]}
|
||||
>
|
||||
{/* <Checkbox.Group
|
||||
options={[
|
||||
{ value: 153001, label: '报价信不显示' },
|
||||
{ value: 153002, label: '计划不显示' },
|
||||
]}
|
||||
/> */}
|
||||
<Select labelInValue={false} options={[
|
||||
{ value: '153001', label: '在计划显示，不在报价信显示' },
|
||||
{ value: 0, label: '计划和报价信都要显示' },
|
||||
{ value: '153001, 153002', label: '计划和报价信都不用显示' },
|
||||
]} />
|
||||
</Form.Item>,
|
||||
fieldProps?.display_to_c?.col || 8
|
||||
),
|
||||
item(
|
||||
'remarks',
|
||||
99,
|
||||
<Form.Item name='remarks' label={t('Remarks')} {...fieldProps.remarks}>
|
||||
<Input.TextArea allowClear rows={2} maxLength={2000} {...fieldComProps.remarks} />
|
||||
</Form.Item>,
|
||||
fieldProps?.remarks?.col || 24
|
||||
),
|
||||
];
|
||||
baseChildren = baseChildren
|
||||
.map((x) => {
|
||||
x.hide = false;
|
||||
if (props.sort === undefined) {
|
||||
return x;
|
||||
}
|
||||
const tmpSort = props.sort;
|
||||
for (const key in tmpSort) {
|
||||
if (Object.prototype.hasOwnProperty.call(tmpSort, key)) {
|
||||
if (x.name === key) {
|
||||
x.sort = tmpSort[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
return x;
|
||||
})
|
||||
.map((x) => {
|
||||
if (props.hides.length === 0 && props.shows.length === 0) {
|
||||
return x;
|
||||
}
|
||||
if (props.hides.length === 0) {
|
||||
x.hide = !props.shows.includes(x.name);
|
||||
} else if (props.shows.length === 0) {
|
||||
x.hide = props.hides.includes(x.name);
|
||||
}
|
||||
return x;
|
||||
})
|
||||
.filter((x) => !x.hide)
|
||||
.sort((a, b) => {
|
||||
return a.sort < b.sort ? -1 : 1;
|
||||
});
|
||||
const children = [];
|
||||
const leftStyle = {}; // { borderRight: '1px solid #dedede' };
|
||||
for (let i = 0; i < baseChildren.length; i++) {
|
||||
let style = {}; // { padding: '0px 2px' };
|
||||
style = i % 2 === 0 && baseChildren[i].col === 12 ? { ...style, ...leftStyle } : style;
|
||||
style = !baseChildren[i].hide ? { ...style, display: 'block' } : { ...style, display: 'none' };
|
||||
const Item = (
|
||||
<Col key={String(i)} style={style} {...layoutProps} {...baseChildren[i].col}>
|
||||
{baseChildren[i].render}
|
||||
</Col>
|
||||
);
|
||||
children.push(Item);
|
||||
}
|
||||
return children;
|
||||
}
|
||||
|
||||
export default InfoForm;
|
||||
@ -0,0 +1,163 @@
|
||||
import { createContext, useEffect, useState, useRef } from 'react';
|
||||
import { Input, Tabs, Modal, Select, Form } from 'antd';
|
||||
import useProductsStore from '@/stores/Products/Index';
|
||||
import { useHTLanguageSets, useHTLanguageSetsMapVal } from '@/hooks/useHTLanguageSets';
|
||||
import RequireAuth from '@/components/RequireAuth';
|
||||
import useAuthStore from '@/stores/Auth';
|
||||
import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
|
||||
import { cloneDeep, isEmpty } from '@/utils/commons';
|
||||
|
||||
const ProductInfoLgc = ({ formInstance, ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const { language: languageHT } = useDefaultLgc();
|
||||
const [isPermitted, currentUser] = useAuthStore((state) => [state.isPermitted, state.currentUser]);
|
||||
const HTLanguageSetsMapVal = useHTLanguageSetsMapVal();
|
||||
const allLgcOptions = useHTLanguageSets();
|
||||
const [agencyProducts, editingProduct, setEditingProduct] = useProductsStore((state) => [state.agencyProducts, state.editingProduct, state.setEditingProduct]);
|
||||
const initialItems = [
|
||||
{
|
||||
label: 'Tab 1',
|
||||
children: 'Content of Tab 1',
|
||||
key: '1',
|
||||
},
|
||||
];
|
||||
const [activeKey, setActiveKey] = useState();
|
||||
const [items, setItems] = useState([]);
|
||||
const newTabIndex = useRef(0);
|
||||
useEffect(() => {
|
||||
const existsLgc = (editingProduct?.lgc_details || []).map((ele) => ({
|
||||
...ele,
|
||||
label: HTLanguageSetsMapVal[ele.lgc].label,
|
||||
key: `${editingProduct.info.id}-${ele.id}`,
|
||||
closable: false, // isPermitted(PERM_PRODUCTS_MANAGEMENT) ? true : false,
|
||||
children: (
|
||||
<>
|
||||
<Form.Item name={[`${ele.lgc}`, 'title']} label={t('products:Title')} initialValue={ele.title}>
|
||||
<Input
|
||||
// onChange={(e) => handleChange('title', e.target.value)}
|
||||
// disabled={isCanEditable}
|
||||
disabled={!isEmpty(ele.title)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={[`${ele.lgc}`, 'description']} label={t('products:Description')} initialValue={ele.descriptions}>
|
||||
<Input.TextArea
|
||||
rows={3}
|
||||
// onChange={(e) => handleChange('description', e.target.value)}
|
||||
disabled={!isEmpty(ele.descriptions)}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item hidden name={[`${ele.lgc}`, 'lgc']} initialValue={ele.lgc}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item hidden name={[`${ele.lgc}`, 'id']} initialValue={ele.id}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</>
|
||||
),
|
||||
}));
|
||||
setItems(existsLgc);
|
||||
const pageDefaultLgcI = (editingProduct?.lgc_details || []).findIndex((ele) => ele.lgc === languageHT);
|
||||
setActiveKey(existsLgc?.[pageDefaultLgcI || 0]?.key);
|
||||
// formInstance.validateFields();
|
||||
const filterLgcOptions = allLgcOptions.filter((ele) => !existsLgc.some((item) => `${item.lgc}` === ele.value));
|
||||
setLgcOptions(filterLgcOptions);
|
||||
|
||||
return () => {};
|
||||
}, [editingProduct]);
|
||||
|
||||
const onChange = (newActiveKey) => {
|
||||
setActiveKey(newActiveKey);
|
||||
};
|
||||
const addLgc = (lgcItem) => {
|
||||
const newActiveKey = lgcItem.value; // `newTab${newTabIndex.current++}`;
|
||||
const newPanes = [...items];
|
||||
newPanes.push({
|
||||
...lgcItem,
|
||||
children: (
|
||||
<>
|
||||
<Form.Item name={[`${lgcItem.value}`, 'title']} label={t('products:Title')}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name={[`${lgcItem.value}`, 'description']} label={t('products:Description')}>
|
||||
<Input.TextArea rows={3} />
|
||||
</Form.Item>
|
||||
<Form.Item hidden name={[`${lgcItem.value}`, 'lgc']} initialValue={lgcItem.value}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item hidden name={[`${lgcItem.value}`, 'id']}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</>
|
||||
),
|
||||
});
|
||||
setItems(newPanes);
|
||||
setActiveKey(newActiveKey);
|
||||
const currentLgcOptions = cloneDeep(lgcOptions);
|
||||
currentLgcOptions.splice(currentLgcOptions.findIndex(ele => ele.value === lgcItem.value), 1);
|
||||
setLgcOptions(currentLgcOptions);
|
||||
setSelectNewLgc(null);
|
||||
};
|
||||
const remove = (targetKey) => {
|
||||
let newActiveKey = activeKey;
|
||||
let lastIndex = -1;
|
||||
items.forEach((item, i) => {
|
||||
if (item.key === targetKey) {
|
||||
lastIndex = i - 1;
|
||||
}
|
||||
});
|
||||
const newPanes = items.filter((item) => item.key !== targetKey);
|
||||
if (newPanes.length && newActiveKey === targetKey) {
|
||||
if (lastIndex >= 0) {
|
||||
newActiveKey = newPanes[lastIndex].key;
|
||||
} else {
|
||||
newActiveKey = newPanes[0].key;
|
||||
}
|
||||
}
|
||||
setItems(newPanes);
|
||||
setActiveKey(newActiveKey);
|
||||
setLgcOptions([...lgcOptions, ...items.filter(item => item.key === targetKey)]);
|
||||
};
|
||||
const onEdit = (targetKey, action) => {
|
||||
if (action === 'add') {
|
||||
setNewLgcModalVisible(true);
|
||||
} else {
|
||||
remove(targetKey);
|
||||
}
|
||||
};
|
||||
|
||||
const [newLgcModalVisible, setNewLgcModalVisible] = useState(false);
|
||||
const [selectNewLgc, setSelectNewLgc] = useState();
|
||||
const [lgcOptions, setLgcOptions] = useState(allLgcOptions);
|
||||
const handleOk = () => {
|
||||
addLgc(selectNewLgc);
|
||||
setNewLgcModalVisible(false);
|
||||
};
|
||||
const handleCancel = () => {
|
||||
setNewLgcModalVisible(false);
|
||||
};
|
||||
const onSelectNewLgc = (lgcItem) => {
|
||||
setSelectNewLgc(lgcItem);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Form.List name={'lgc_details'}>
|
||||
{(fields, { add, remove }) => <Tabs type='editable-card' size='small' onChange={onChange} activeKey={activeKey} onEdit={onEdit} items={items} />}
|
||||
</Form.List>
|
||||
<Modal title='选择语言' open={newLgcModalVisible} onOk={handleOk} onCancel={() => setNewLgcModalVisible(false)}>
|
||||
<Select
|
||||
showSearch
|
||||
labelInValue
|
||||
style={{ width: '80%' }}
|
||||
placeholder='选择语言'
|
||||
optionFilterProp='children'
|
||||
options={lgcOptions}
|
||||
onChange={onSelectNewLgc}
|
||||
value={selectNewLgc}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ProductInfoLgc;
|
||||
Loading…
Reference in New Issue