|
|
|
|
@ -1,10 +1,603 @@
|
|
|
|
|
import { createContext, useContext, useEffect, useState } from 'react';
|
|
|
|
|
import { Table } from 'antd';
|
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
|
|
|
import { Button, Card, Col, Row, Breadcrumb, Table, Popconfirm, Form, Input, InputNumber, Tag, Modal, Select, Tree } from 'antd';
|
|
|
|
|
import { Link } from 'react-router-dom';
|
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
|
import DateComponent from '@/components/date';
|
|
|
|
|
import { fetchJSON } from "@/utils/request";
|
|
|
|
|
|
|
|
|
|
const Detail = ((props) => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function Index() {
|
|
|
|
|
const { t } = useTranslation();
|
|
|
|
|
const [form] = Form.useForm();
|
|
|
|
|
const [editingKey, setEditingKey] = useState('');
|
|
|
|
|
const [tags, setTags] = useState(['中文', 'English']);
|
|
|
|
|
const [isModalVisible, setIsModalVisible] = useState(false);
|
|
|
|
|
const [selectedTag, setSelectedTag] = useState('中文');
|
|
|
|
|
const [saveData, setSaveData] = useState(null);
|
|
|
|
|
const [datePickerVisible, setDatePickerVisible] = useState(false);
|
|
|
|
|
const [currentKey, setCurrentKey] = useState(null);
|
|
|
|
|
const [languageStatus, setLanguageStatus] = useState([{ "中文": { title: "", description: "" } }, { "English": { title: "", description: "" } }]);
|
|
|
|
|
const [formState, setFormState] = useState({});
|
|
|
|
|
const [selectedNodeKey, setSelectedNodeKey] = useState(null);
|
|
|
|
|
const [selectedDateData, setSelectedDateData] = useState({ dateRange: null, selectedDays: [] });
|
|
|
|
|
|
|
|
|
|
const productProject = [
|
|
|
|
|
{ code: "code", name: t('products:Code') },
|
|
|
|
|
{ code: "city_name", name: t('products:City') },
|
|
|
|
|
{ code: "remarks", name: t('products:Remarks') },
|
|
|
|
|
{ code: "open_hours", name: t('products:tourTime') },
|
|
|
|
|
{ code: "recommends_rate", name: t('products:recommendationRate') }
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const initialData = [
|
|
|
|
|
{ key: '1', adult_cost: '15', child_cost: "美元", currency: 'aa', age_type: 'as', group_size: 'dawd', validityPeriod: 'dawda' },
|
|
|
|
|
{ key: '2', adult_cost: '15', child_cost: "美元", currency: 'aa', age_type: 'as', group_size: 'dawd', validityPeriod: 'dawda' },
|
|
|
|
|
{ key: '3', adult_cost: '15', child_cost: "美元", currency: 'aa', age_type: 'as', group_size: 'dawd', validityPeriod: 'dawda' },
|
|
|
|
|
{ key: '4', adult_cost: '15', child_cost: "美元", currency: 'aa', age_type: 'as', group_size: 'dawd', validityPeriod: 'dawda' },
|
|
|
|
|
];
|
|
|
|
|
const [quotation, setQuotation] = useState(initialData);
|
|
|
|
|
const isEditing = (record) => record.key === editingKey;
|
|
|
|
|
|
|
|
|
|
const edit = (record) => {
|
|
|
|
|
form.setFieldsValue({ ...record });
|
|
|
|
|
setEditingKey(record.key);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const cancel = () => {
|
|
|
|
|
setEditingKey('');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSave = async (key) => {
|
|
|
|
|
try {
|
|
|
|
|
const { info, ...restRow } = await form.validateFields();
|
|
|
|
|
const newData = [...quotation];
|
|
|
|
|
const index = newData.findIndex((item) => key === item.key);
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
const item = newData[index];
|
|
|
|
|
newData.splice(index, 1, { ...item, ...restRow });
|
|
|
|
|
delete newData[index].quotation
|
|
|
|
|
delete newData[index].extras
|
|
|
|
|
setQuotation(newData);
|
|
|
|
|
setEditingKey('');
|
|
|
|
|
} else {
|
|
|
|
|
newData.push(restRow);
|
|
|
|
|
setQuotation(newData);
|
|
|
|
|
setEditingKey('');
|
|
|
|
|
}
|
|
|
|
|
} catch (errInfo) {
|
|
|
|
|
console.log('Validate Failed:', errInfo);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleDelete = (key) => {
|
|
|
|
|
const newData = [...quotation];
|
|
|
|
|
const index = newData.findIndex((item) => key === item.key);
|
|
|
|
|
newData.splice(index, 1);
|
|
|
|
|
setQuotation(newData);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleAdd = () => {
|
|
|
|
|
const newData = {
|
|
|
|
|
key: `${quotation.length + 1}`,
|
|
|
|
|
value: '',
|
|
|
|
|
currency: '',
|
|
|
|
|
age_type: '',
|
|
|
|
|
weekdays: '',
|
|
|
|
|
group_size: '',
|
|
|
|
|
validityPeriod: '',
|
|
|
|
|
};
|
|
|
|
|
setQuotation([...quotation, newData]);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleDateSelect = (key) => {
|
|
|
|
|
setCurrentKey(key);
|
|
|
|
|
setDatePickerVisible(true);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleDateChange = ({ dateRange, selectedDays }) => {
|
|
|
|
|
console.log('Date Range:', dateRange);
|
|
|
|
|
console.log('Selected Days:', selectedDays);
|
|
|
|
|
setSelectedDateData({ dateRange, selectedDays })
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleDateOk = () => {
|
|
|
|
|
const { dateRange } = selectedDateData;
|
|
|
|
|
|
|
|
|
|
if (currentKey !== null) {
|
|
|
|
|
const newData = [...quotation];
|
|
|
|
|
const index = newData.findIndex((item) => currentKey === item.key);
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
newData[index].validityPeriod = dateRange;
|
|
|
|
|
|
|
|
|
|
console.log()
|
|
|
|
|
setQuotation(newData);
|
|
|
|
|
setCurrentKey(null);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
setDatePickerVisible(false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const EditableCell = ({ editing, dataIndex, title, inputType, record, children, handleDateSelect, ...restProps }) => {
|
|
|
|
|
let inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
|
|
|
|
|
if (dataIndex === 'validityPeriod' && editing) {
|
|
|
|
|
return (
|
|
|
|
|
<td {...restProps}>
|
|
|
|
|
{children}
|
|
|
|
|
<Button onClick={() => handleDateSelect(record.key)}>选择日期</Button>
|
|
|
|
|
</td>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<td {...restProps}>
|
|
|
|
|
{editing ? (
|
|
|
|
|
<Form.Item
|
|
|
|
|
name={dataIndex}
|
|
|
|
|
style={{ margin: 0 }}
|
|
|
|
|
rules={[{ required: true, message: `Please Input ${title}!` }]}
|
|
|
|
|
>
|
|
|
|
|
{inputNode}
|
|
|
|
|
</Form.Item>
|
|
|
|
|
) : (
|
|
|
|
|
children
|
|
|
|
|
)}
|
|
|
|
|
</td>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const columns = [
|
|
|
|
|
{ title: t('products:adultPrice'), dataIndex: 'adult_cost', width: '10%', editable: true },
|
|
|
|
|
{ title: t('products:childrenPrice'), dataIndex: 'child_cost', width: '10%', editable: true },
|
|
|
|
|
{ title: t('products:currency'), dataIndex: 'currency', width: '10%', editable: true },
|
|
|
|
|
{ title: t('products:Types'), dataIndex: 'age_type', width: '10%', editable: true },
|
|
|
|
|
{ title: t('products:number'), dataIndex: 'group_size', width: '10%', editable: true },
|
|
|
|
|
{ title: t('products:validityPeriod'), dataIndex: 'validityPeriod', width: '30%', editable: true },
|
|
|
|
|
{
|
|
|
|
|
title: t('products:operation'),
|
|
|
|
|
dataIndex: 'operation',
|
|
|
|
|
render: (_, record) => {
|
|
|
|
|
const editable = isEditing(record);
|
|
|
|
|
return editable ? (
|
|
|
|
|
<span>
|
|
|
|
|
<a href="#!" onClick={() => handleSave(record.key)} style={{ marginRight: 8 }}>{t('products:save')}</a>
|
|
|
|
|
<Popconfirm title={t('products:sureCancel')} onConfirm={cancel}><a>{t('products:cancel')}</a></Popconfirm>
|
|
|
|
|
</span>
|
|
|
|
|
) : (
|
|
|
|
|
<span>
|
|
|
|
|
<a disabled={editingKey !== ''} onClick={() => edit(record)} style={{ marginRight: 8 }}>{t('products:edit')}</a>
|
|
|
|
|
<Popconfirm title={t('products:sureCancel')} onConfirm={() => handleDelete(record.key)}>
|
|
|
|
|
<a>{t('products:delete')}</a>
|
|
|
|
|
</Popconfirm>
|
|
|
|
|
</span>
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const mergedColumns = columns.map((col) => {
|
|
|
|
|
if (!col.editable) {
|
|
|
|
|
return col;
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
...col,
|
|
|
|
|
onCell: (record) => ({
|
|
|
|
|
record,
|
|
|
|
|
inputType: col.dataIndex === 'age' ? 'number' : 'text',
|
|
|
|
|
dataIndex: col.dataIndex,
|
|
|
|
|
title: col.title,
|
|
|
|
|
editing: isEditing(record),
|
|
|
|
|
handleDateSelect: handleDateSelect,
|
|
|
|
|
}),
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const handleTagClick = (tag) => {
|
|
|
|
|
setSelectedTag(tag);
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const showModal = () => setIsModalVisible(true);
|
|
|
|
|
|
|
|
|
|
const handleOk = () => setIsModalVisible(false);
|
|
|
|
|
|
|
|
|
|
const handleCancel = () => setIsModalVisible(false);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleTagChange = (value) => {
|
|
|
|
|
if (!tags.includes(value)) {
|
|
|
|
|
setTags([...tags, value]);
|
|
|
|
|
setLanguageStatus([...languageStatus, { [value]: { title: "", description: "" } }]);
|
|
|
|
|
}
|
|
|
|
|
setSelectedTag(value);
|
|
|
|
|
setIsModalVisible(false);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleChange = (field, value) => {
|
|
|
|
|
const updatedLanguageStatus = languageStatus.map(lang => {
|
|
|
|
|
if (lang[selectedTag]) {
|
|
|
|
|
return { ...lang, [selectedTag]: { ...lang[selectedTag], [field]: value } };
|
|
|
|
|
}
|
|
|
|
|
return lang;
|
|
|
|
|
});
|
|
|
|
|
setLanguageStatus(updatedLanguageStatus);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const findLanguageDetails = (tag) => {
|
|
|
|
|
const lang = languageStatus.find(lang => lang[tag]);
|
|
|
|
|
return lang ? lang[tag] : { title: "", description: "" };
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//树组件方法
|
|
|
|
|
const handleNodeSelect = async (_, { node }) => {
|
|
|
|
|
|
|
|
|
|
// 如果点击的是同一个节点，不做任何操作
|
|
|
|
|
if (selectedNodeKey === node.key) return;
|
|
|
|
|
|
|
|
|
|
// 保存当前表单数据
|
|
|
|
|
if (selectedNodeKey) {
|
|
|
|
|
await handleSaveForm();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 更新选中的节点
|
|
|
|
|
setSelectedNodeKey(node.key);
|
|
|
|
|
|
|
|
|
|
// 加载新节点的表单数据
|
|
|
|
|
if (formState[node.key]) {
|
|
|
|
|
form.setFieldsValue(formState[node.key]);
|
|
|
|
|
setQuotation(formState[node.key].quotation || []);
|
|
|
|
|
setLanguageStatus(formState[node.key].lgc_details || languageStatus);
|
|
|
|
|
} else {
|
|
|
|
|
form.resetFields();
|
|
|
|
|
setQuotation(initialData);
|
|
|
|
|
setLanguageStatus([{ "中文": { title: "", description: "" } }, { "English": { title: "", description: "" } }]);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSaveForm = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const values = await form.validateFields();
|
|
|
|
|
const newFormState = {
|
|
|
|
|
...formState,
|
|
|
|
|
[selectedNodeKey]: {
|
|
|
|
|
...values,
|
|
|
|
|
quotation,
|
|
|
|
|
lgc_details: languageStatus,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
setFormState(newFormState);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('Validation failed:', error);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onSave = (values) => {
|
|
|
|
|
const tempData = values;
|
|
|
|
|
tempData['quotation'] = quotation;
|
|
|
|
|
tempData['extras'] = bindingData;
|
|
|
|
|
tempData['lgc_details'] = languageStatus;
|
|
|
|
|
setSaveData(tempData);
|
|
|
|
|
console.log("保存的数据", tempData)
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//绑定产品
|
|
|
|
|
const initBindingData = [
|
|
|
|
|
{ key: '1', title: '15', value: "美元", age_type: 'aa' },
|
|
|
|
|
{ key: '2', title: '15', value: "美元", age_type: 'aa' },
|
|
|
|
|
{ key: '3', title: '15', value: "美元", age_type: 'aa' },
|
|
|
|
|
{ key: '4', title: '15', value: "美元", age_type: 'aa' },
|
|
|
|
|
]
|
|
|
|
|
const [bindingData, setBindingData] = useState(initBindingData);
|
|
|
|
|
const isEditingBinding = (record) => record.key === editingKeyBinding;
|
|
|
|
|
const [editingKeyBinding, setEditingKeyBinding] = useState('');
|
|
|
|
|
|
|
|
|
|
const editBinding = (record) => {
|
|
|
|
|
form.setFieldsValue({ ...record });
|
|
|
|
|
setEditingKeyBinding(record.key);
|
|
|
|
|
};
|
|
|
|
|
const cancelBinding = () => {
|
|
|
|
|
setEditingKeyBinding('');
|
|
|
|
|
};
|
|
|
|
|
const EditableCellBinding = ({
|
|
|
|
|
editing,
|
|
|
|
|
dataIndex,
|
|
|
|
|
title,
|
|
|
|
|
inputType,
|
|
|
|
|
record,
|
|
|
|
|
index,
|
|
|
|
|
children,
|
|
|
|
|
...restProps
|
|
|
|
|
}) => {
|
|
|
|
|
const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
</>
|
|
|
|
|
<td {...restProps}>
|
|
|
|
|
{editing ? (
|
|
|
|
|
<Form.Item
|
|
|
|
|
name={dataIndex}
|
|
|
|
|
style={{ margin: 0 }}
|
|
|
|
|
rules={[{ required: true, message: `请输入${title}！` }]}
|
|
|
|
|
>
|
|
|
|
|
{inputNode}
|
|
|
|
|
</Form.Item>
|
|
|
|
|
) : (
|
|
|
|
|
children
|
|
|
|
|
)}
|
|
|
|
|
</td>
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
export default Detail;
|
|
|
|
|
};
|
|
|
|
|
const bindingColums = [
|
|
|
|
|
{ title: t('products:Name'), dataIndex: 'title', width: '15%', editable: true },
|
|
|
|
|
{ title: t('products:price'), dataIndex: 'value', width: '15%', editable: true },
|
|
|
|
|
{ title: t('products:Types'), dataIndex: 'age_type', width: '40%', editable: true },
|
|
|
|
|
{
|
|
|
|
|
title: t('products:operation'),
|
|
|
|
|
dataIndex: 'operation',
|
|
|
|
|
render: (_, record) => {
|
|
|
|
|
const editable = isEditingBinding(record);
|
|
|
|
|
return editable ? (
|
|
|
|
|
<span>
|
|
|
|
|
<a href="#!" onClick={() => handleSaveBinding(record.key)} style={{ marginRight: 8 }}>{t('products:save')}</a>
|
|
|
|
|
<Popconfirm title={t('products:sureCancel')} onConfirm={cancelBinding}><a>{t('products:cancel')}</a></Popconfirm>
|
|
|
|
|
</span>
|
|
|
|
|
) : (
|
|
|
|
|
<span>
|
|
|
|
|
<a disabled={editingKeyBinding !== ''} onClick={() => editBinding(record)} style={{ marginRight: 8 }}>{t('products:edit')}</a>
|
|
|
|
|
<Popconfirm title={t('products:sureDelete')} onConfirm={() => handleDeleteBinding(record.key)}>
|
|
|
|
|
<a>{t('products:delete')}</a>
|
|
|
|
|
</Popconfirm>
|
|
|
|
|
</span>
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
].map(col => {
|
|
|
|
|
if (!col.editable) {
|
|
|
|
|
return col;
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
...col,
|
|
|
|
|
onCell: record => ({
|
|
|
|
|
record,
|
|
|
|
|
inputType: col.dataIndex === 'value' ? 'number' : 'text',
|
|
|
|
|
dataIndex: col.dataIndex,
|
|
|
|
|
title: col.title,
|
|
|
|
|
editing: isEditingBinding(record),
|
|
|
|
|
}),
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleAddBinding = () => {
|
|
|
|
|
const newData = {
|
|
|
|
|
key: `${bindingData.length + 1}`,
|
|
|
|
|
title: '',
|
|
|
|
|
value: '',
|
|
|
|
|
age_type: '',
|
|
|
|
|
};
|
|
|
|
|
setBindingData([...bindingData, newData]);
|
|
|
|
|
setEditingKeyBinding(''); // 添加这一行
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSaveBinding = async (key) => {
|
|
|
|
|
try {
|
|
|
|
|
const row = await form.validateFields();
|
|
|
|
|
const newData = [...bindingData];
|
|
|
|
|
const { value, title, age_type } = row
|
|
|
|
|
const index = newData.findIndex((item) => key === item.key);
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
const item = newData[index];
|
|
|
|
|
newData.splice(index, 1, { ...item, value, title, age_type });
|
|
|
|
|
|
|
|
|
|
setBindingData(newData);
|
|
|
|
|
setEditingKeyBinding('');
|
|
|
|
|
} else {
|
|
|
|
|
newData.push(row);
|
|
|
|
|
setBindingData(newData);
|
|
|
|
|
setEditingKeyBinding('');
|
|
|
|
|
}
|
|
|
|
|
} catch (errInfo) {
|
|
|
|
|
console.log('Validate Failed:', errInfo);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleDeleteBinding = (key) => {
|
|
|
|
|
const newData = [...bindingData];
|
|
|
|
|
const index = newData.findIndex((item) => key === item.key);
|
|
|
|
|
newData.splice(index, 1);
|
|
|
|
|
setBindingData(newData);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const componentsBinding = {
|
|
|
|
|
body: {
|
|
|
|
|
cell: EditableCellBinding,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const treeData = [
|
|
|
|
|
{
|
|
|
|
|
title: '综费',
|
|
|
|
|
key: 'zf',
|
|
|
|
|
selectable: false,
|
|
|
|
|
children: [{ title: '北京怡然假日', key: 'bjyrjr' }]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '车费',
|
|
|
|
|
key: 'cf',
|
|
|
|
|
selectable: false,
|
|
|
|
|
children: [
|
|
|
|
|
{ title: '北京', key: 'bj' },
|
|
|
|
|
{ title: '天津', key: 'tj' },
|
|
|
|
|
{ title: '北京-天津', key: 'bj-tj-3-5' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//Effect
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (saveData) {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}, [saveData]);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// const { errcode, result } = fetchJSON('http://127.0.0.1:4523/m1/2602949-1933890-default/Service_BaseInfoWeb/travel_agency_products');
|
|
|
|
|
console.log("get请求")
|
|
|
|
|
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (selectedNodeKey) {
|
|
|
|
|
handleSaveForm();
|
|
|
|
|
}
|
|
|
|
|
}, [selectedNodeKey]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={8}>
|
|
|
|
|
<Card style={{ width: "20%", position: "fixed" }}>
|
|
|
|
|
<Tree
|
|
|
|
|
onSelect={handleNodeSelect}
|
|
|
|
|
treeData={treeData}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
|
|
<Col span={16}>
|
|
|
|
|
<Form form={form} name="control-hooks" onFinish={onSave}>
|
|
|
|
|
<Card
|
|
|
|
|
style={{ width: "80%" }}
|
|
|
|
|
title={
|
|
|
|
|
<Breadcrumb items={[
|
|
|
|
|
{ title: <Link to={'/'}>供应商</Link> },
|
|
|
|
|
{ title: <Link to={'/products'}>综费</Link> },
|
|
|
|
|
{ title: '文章列表' }
|
|
|
|
|
]} />
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<h2>{t('products:productProject')}</h2>
|
|
|
|
|
<Row gutter={16}>
|
|
|
|
|
{productProject.map((item, index) => (
|
|
|
|
|
<Col span={8} key={index}>
|
|
|
|
|
<Form.Item name={['info', item.code]} label={item.name}>
|
|
|
|
|
<Input />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Col>
|
|
|
|
|
))}
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
<Card title={
|
|
|
|
|
<div>
|
|
|
|
|
{tags.map(tag => (
|
|
|
|
|
<Tag
|
|
|
|
|
key={tag}
|
|
|
|
|
onClick={() => handleTagClick(tag)}
|
|
|
|
|
color={tag === selectedTag ? 'blue' : undefined}
|
|
|
|
|
style={{ cursor: 'pointer' }}
|
|
|
|
|
>
|
|
|
|
|
{tag}
|
|
|
|
|
</Tag>
|
|
|
|
|
))}
|
|
|
|
|
<Tag onClick={showModal} style={{ cursor: 'pointer' }}>+</Tag>
|
|
|
|
|
</div>
|
|
|
|
|
}>
|
|
|
|
|
<Modal title="选择语言" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
|
|
|
|
|
<Select
|
|
|
|
|
showSearch
|
|
|
|
|
style={{ width: "80%" }}
|
|
|
|
|
placeholder="选择语言"
|
|
|
|
|
optionFilterProp="children"
|
|
|
|
|
onChange={handleTagChange}
|
|
|
|
|
filterOption={(input, option) =>
|
|
|
|
|
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<Select.Option value="Français">Français</Select.Option>
|
|
|
|
|
<Select.Option value="Español">Español</Select.Option>
|
|
|
|
|
<Select.Option value="Deutsch">Deutsch</Select.Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</Modal>
|
|
|
|
|
|
|
|
|
|
<Form.Item label={t('products:Name')}>
|
|
|
|
|
<Input
|
|
|
|
|
style={{ width: "30%" }}
|
|
|
|
|
value={findLanguageDetails(selectedTag).title}
|
|
|
|
|
onChange={(e) => handleChange('title', e.target.value)}
|
|
|
|
|
/>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item label={t('products:Description')}>
|
|
|
|
|
<Input.TextArea
|
|
|
|
|
rows={4}
|
|
|
|
|
value={findLanguageDetails(selectedTag).description}
|
|
|
|
|
onChange={(e) => handleChange('description', e.target.value)}
|
|
|
|
|
/>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Card>
|
|
|
|
|
</Card>
|
|
|
|
|
|
|
|
|
|
<Card style={{ width: "80%" }}>
|
|
|
|
|
<h2>{t('products:supplierQuotation')}</h2>
|
|
|
|
|
<Form.Item name="quotation">
|
|
|
|
|
<Table
|
|
|
|
|
components={{ body: { cell: EditableCell } }}
|
|
|
|
|
bordered
|
|
|
|
|
dataSource={quotation}
|
|
|
|
|
columns={mergedColumns}
|
|
|
|
|
rowClassName="editable-row"
|
|
|
|
|
pagination={{ onChange: cancel }}
|
|
|
|
|
/>
|
|
|
|
|
<Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
|
|
|
|
|
{t('products:addQuotation')}
|
|
|
|
|
</Button>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Card>
|
|
|
|
|
|
|
|
|
|
<Card style={{ width: "80%" }}>
|
|
|
|
|
<h2>{t('products:bindingProducts')}</h2>
|
|
|
|
|
<Form.Item name="extras">
|
|
|
|
|
<Table
|
|
|
|
|
components={componentsBinding}
|
|
|
|
|
bordered
|
|
|
|
|
dataSource={bindingData}
|
|
|
|
|
columns={bindingColums}
|
|
|
|
|
rowClassName="editable-row"
|
|
|
|
|
pagination={{ onChange: cancelBinding }}
|
|
|
|
|
/>
|
|
|
|
|
<Button onClick={handleAddBinding} type="primary" style={{ marginBottom: 16 }}>
|
|
|
|
|
{t('products:addBinding')}
|
|
|
|
|
</Button>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Card>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Button type="primary" htmlType="submit" style={{ marginTop: 16, float: "right", marginRight: "20%" }}>
|
|
|
|
|
{t('products:save')}
|
|
|
|
|
</Button>
|
|
|
|
|
</Form>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
{datePickerVisible && (
|
|
|
|
|
<Modal
|
|
|
|
|
title="选择日期"
|
|
|
|
|
visible={datePickerVisible}
|
|
|
|
|
onOk={handleDateOk}
|
|
|
|
|
onCancel={() => setDatePickerVisible(false)}
|
|
|
|
|
>
|
|
|
|
|
<DateComponent onDateChange={handleDateChange} />
|
|
|
|
|
</Modal>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
export default Index;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
黄文强@HWQ-PC
1 year ago