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