Haina
/
GHHub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.完善界面显示效果

Browse Source 
2.修改表单对应的接口字段
feature/price_manager
黄文强@HWQ-PC 1 year ago
parent 040fdb9d3a
commit 51834fbc97
3 changed files with 203 additions and 84 deletions
Show Stats Download Patch File Download Diff File

2
public/locales/en/products.json
Unescape Escape View File

@ -56,7 +56,7 @@
"validityPeriod":"Validity period",
"operation": "Operation",
"price": "Price",
"weekends":"Weekends",
"save":"save",
"edit":"edit",

4
public/locales/zh/products.json
Unescape Escape View File

@ -52,9 +52,7 @@
"Child": "儿童"
},
"#": "#"
"Auditors": "审核人员",
"AuditDate": "审核时间",
"#": "#",
"productProject": "产品项目",
"Code": "代码",

281
src/views/products/Detail.jsx
Unescape Escape View File

@ -4,23 +4,25 @@ import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import DateComponent from '@/components/date';
import { fetchJSON } from "@/utils/request";
import { type } from 'windicss/utils';
import { searchAgencyAction, getAgencyProductsAction } from '@/stores/Products/Index';
function Index() {
const { t } = useTranslation();
const [form] = Form.useForm();
const [editingKey, setEditingKey] = useState('');
const [editingid, setEditingid] = 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 [currentid, setCurrentid] = useState(null);
const [languageStatus, setLanguageStatus] = useState([{ "中文": { title: "", description: "" } }, { "English": { title: "", description: "" } }]);
const [formState, setFormState] = useState({});
const [selectedNodeKey, setSelectedNodeKey] = useState(null);
const [selectedNodeid, setSelectedNodeid] = useState(null);
const [selectedDateData, setSelectedDateData] = useState({ dateRange: null, selectedDays: [] });
const [startValue,setStartValue] = useState(null);
const [endValue,setEndValue] = useState(null);
const productProject = [
{ code: "code", name: t('products:Code') },
@ -31,88 +33,109 @@ function Index() {
];
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' },
{ id: '1', adult_cost: '1000', child_cost: "800", currency: 'RMB', age_type: '每人', group_size_min: 4, group_size_max: 5, use_dates_start: '2024/06/12',use_dates_end: '2024/07/22', weekdays: '' },
{ id: '2', adult_cost: '1200', child_cost: "900", currency: 'RMB', age_type: '每人', group_size_min: 3, group_size_max: 5, use_dates_start: '2024/06/12',use_dates_end: '2024/07/22', weekdays: '' },
{ id: '3', adult_cost: '1500', child_cost: "1200", currency: 'RMB', age_type: '每人', group_size_min: 2, group_size_max: 5, use_dates_start: '2024/06/12',use_dates_end: '2024/07/22', weekdays: '' },
{ id: '4', adult_cost: '1100', child_cost: "700", currency: 'RMB', age_type: '每人', group_size_min: 1, group_size_max: 5, use_dates_start: '2024/06/12',use_dates_end: '2024/07/22', weekdays: '' },
];
const [quotation, setQuotation] = useState(initialData);
const isEditing = (record) => record.key === editingKey;
const isEditing = (record) => record.id === editingid;
const edit = (record) => {
form.setFieldsValue({ ...record });
setEditingKey(record.key);
setEditingid(record.id);
};
const cancel = () => {
setEditingKey('');
setEditingid('');
};
const handleSave = async (key) => {
const handleSave = async (id) => {
try {
const { info, ...restRow } = await form.validateFields();
const newData = [...quotation];
const index = newData.findIndex((item) => key === item.key);
const index = newData.findIndex((item) => id === item.id);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, { ...item, ...restRow });
delete newData[index].quotation
delete newData[index].extras
setQuotation(newData);
setEditingKey('');
setEditingid('');
} else {
newData.push(restRow);
setQuotation(newData);
setEditingKey('');
setEditingid('');
}
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
}
};
const handleDelete = (key) => {
const handleDelete = (id) => {
const newData = [...quotation];
const index = newData.findIndex((item) => key === item.key);
const index = newData.findIndex((item) => id === item.id);
newData.splice(index, 1);
setQuotation(newData);
};
const handleAdd = () => {
const newData = {
key: `${quotation.length + 1}`,
id: `${quotation.length + 1}`,
value: '',
currency: '',
age_type: '',
weekdays: '',
group_size: '',
validityPeriod: '',
use_dates_start: '',
use_dates_end: '',
group_size_min:'',
group_size_max:''
};
setQuotation([...quotation, newData]);
};
const handleDateSelect = (key) => {
setCurrentKey(key);
const handleDateSelect = (id) => {
setCurrentid(id);
setDatePickerVisible(true);
};
const handleDateChange = ({ dateRange, selectedDays }) => {
console.log('Date Range:', dateRange);
console.log('Selected Days:', selectedDays);
// 计算周末
const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday','Sunday'];
let weekDayCount = selectedDays.map(day => weekdays.indexOf(day) + 1).sort().join(',');
console.log('Weekday Count:', weekDayCount);
if (!weekDayCount || weekDayCount.length === 0) {
weekDayCount = "全年";
}
const newData = [...quotation];
const index = newData.findIndex((item) => currentid === item.id);
if (index > -1) {
newData[index].weekdays = weekDayCount;
setQuotation(newData);
}
setSelectedDateData({ dateRange, selectedDays })
};
const handleDateOk = () => {
const { dateRange } = selectedDateData;
const dateRangeList = dateRange.split('-');
console.log("dateRangeList",dateRangeList);
const use_dates_start = dateRangeList[0];
const use_dates_end = dateRangeList[1];
console.log("dateRange",dateRange)
if (currentKey !== null) {
if (currentid !== null) {
const newData = [...quotation];
const index = newData.findIndex((item) => currentKey === item.key);
console.log("newData",newData)
const index = newData.findIndex((item) => currentid === item.id);
if (index > -1) {
newData[index].validityPeriod = dateRange;
console.log()
newData[index].use_dates_start = use_dates_start;
newData[index].use_dates_end = use_dates_end;
setQuotation(newData);
setCurrentKey(null);
setCurrentid(null);
}
}
setDatePickerVisible(false);
@ -124,7 +147,46 @@ function Index() {
return (
<td {...restProps}>
{children}
<Button onClick={() => handleDateSelect(record.key)}>选择日期</Button>
<Button onClick={() => handleDateSelect(record.id)}>选择日期</Button>
</td>
);
}
if (dataIndex === 'age_type' && editing) {
inputNode = (
<Select>
<Select.Option value="每人">每人</Select.Option>
<Select.Option value="每团">每团</Select.Option>
</Select>
);
}
if (dataIndex === 'currency' && editing) {
inputNode = (
<Select>
<Select.Option value="每人">RMB</Select.Option>
<Select.Option value="每团">MY</Select.Option>
</Select>
);
}
if (dataIndex === 'group_size' && editing) {
const groupSizeValue = `${record.group_size_min}-${record.group_size_max}`;
return (
<td {...restProps} style={{ height: 80, display: 'flex', alignItems: 'center' }}>
<InputNumber
min={0}
value={record.group_size_min}
onChange={(value) => handleInputGroupSize('group_size_min', record.id, 'group_size', value)}
style={{ width: '50%', marginRight: '10px' }}
/>
<span>-</span>
<InputNumber
min={0}
value={record.group_size_max}
onChange={(value) => handleInputGroupSize('group_size_max', record.id, 'group_size', value)}
style={{ width: '50%', marginLeft: '10px' }}
/>
</td>
);
}
@ -146,13 +208,53 @@ function Index() {
);
};
const handleInputGroupSize = (name,id, dataIndex, value ) => {
const newData = [...quotation];
console.log("newData",newData);
console.log("value",value);
const index = newData.findIndex((item) => id === item.id);
if (index > -1) {
const item = newData[index];
console.log("item",item)
newData[index] = {...item,}
if(name==='group_size_min'){
newData[index] = { ...item, group_size_min: value };
console.log("newData[index]",newData[index])
}else{
newData[index] = { ...item, group_size_max: value };
console.log("newData[index]",newData[index])
}
// const [groupSizeMin, groupSizeMax] = value.split('-').map(val => parseInt(val.trim()));
setQuotation(newData);
console.log("setQuotation",newData)
}
}
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:number'),
dataIndex: 'group_size',
width: '20%',
editable: true,
render: (_, record) => `${record.group_size_min}-${record.group_size_max}`
},
{ title: t('products:validityPeriod'),
dataIndex: 'validityPeriod',
width: '20%',
editable: true,
render: (_, record) => `${record.use_dates_start}-${record.use_dates_end}`
},
{ title: t('products:weekend'), dataIndex: 'weekdays', width: '10%' },
{
title: t('products:operation'),
dataIndex: 'operation',
@ -160,19 +262,20 @@ function Index() {
const editable = isEditing(record);
return editable ? (
<span>
<a href="#!" onClick={() => handleSave(record.key)} style={{ marginRight: 8 }}>{t('products:save')}</a>
<a href="#!" onClick={() => handleSave(record.id)} 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 disabled={editingid !== ''} onClick={() => edit(record)} style={{ marginRight: 8 }}>{t('products:edit')}</a>
<Popconfirm title={t('products:sureCancel')} onConfirm={() => handleDelete(record.id)}>
<a>{t('products:delete')}</a>
</Popconfirm>
</span>
);
},
},
];
@ -234,21 +337,21 @@ function Index() {
const handleNodeSelect = async (_, { node }) => {
// 如果点击的是同一个节点，不做任何操作
if (selectedNodeKey === node.key) return;
if (selectedNodeid === node.id) return;
// 保存当前表单数据
if (selectedNodeKey) {
if (selectedNodeid) {
await handleSaveForm();
}
// 更新选中的节点
setSelectedNodeKey(node.key);
setSelectedNodeid(node.id);
// 加载新节点的表单数据
if (formState[node.key]) {
form.setFieldsValue(formState[node.key]);
setQuotation(formState[node.key].quotation || []);
setLanguageStatus(formState[node.key].lgc_details || languageStatus);
if (formState[node.id]) {
form.setFieldsValue(formState[node.id]);
setQuotation(formState[node.id].quotation || []);
setLanguageStatus(formState[node.id].lgc_details || languageStatus);
} else {
form.resetFields();
setQuotation(initialData);
@ -261,7 +364,7 @@ function Index() {
const values = await form.validateFields();
const newFormState = {
...formState,
[selectedNodeKey]: {
[selectedNodeid]: {
...values,
quotation,
lgc_details: languageStatus,
@ -286,21 +389,20 @@ function Index() {
//绑定产品
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' },
{ id: '1', title: '英文导游', value: "100", age_type: '每人' },
{ id: '2', title: '中文导游', value: "200", age_type: '每团' },
{ id: '3', title: '可陪餐费', value: "400", age_type: '每人' },
]
const [bindingData, setBindingData] = useState(initBindingData);
const isEditingBinding = (record) => record.key === editingKeyBinding;
const [editingKeyBinding, setEditingKeyBinding] = useState('');
const isEditingBinding = (record) => record.id === editingidBinding;
const [editingidBinding, setEditingidBinding] = useState('');
const editBinding = (record) => {
form.setFieldsValue({ ...record });
setEditingKeyBinding(record.key);
setEditingidBinding(record.id);
};
const cancelBinding = () => {
setEditingKeyBinding('');
setEditingidBinding('');
};
const EditableCellBinding = ({
editing,
@ -312,7 +414,16 @@ function Index() {
children,
...restProps
}) => {
const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
let inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
if (dataIndex === 'age_type' && editing) {
inputNode = (
<Select>
<Select.Option value="每人">每人</Select.Option>
<Select.Option value="每团">每团</Select.Option>
</Select>
);
}
return (
<td {...restProps}>
{editing ? (
@ -330,9 +441,9 @@ function Index() {
);
};
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:Name'), dataIndex: 'title', width: '25%', editable: true },
{ title: t('products:price'), dataIndex: 'value', width: '25%', editable: true },
{ title: t('products:Types'), dataIndex: 'age_type', width: '25%', editable: true },
{
title: t('products:operation'),
dataIndex: 'operation',
@ -340,13 +451,13 @@ function Index() {
const editable = isEditingBinding(record);
return editable ? (
<span>
<a href="#!" onClick={() => handleSaveBinding(record.key)} style={{ marginRight: 8 }}>{t('products:save')}</a>
<a href="#!" onClick={() => handleSaveBinding(record.id)} 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 disabled={editingidBinding !== ''} onClick={() => editBinding(record)} style={{ marginRight: 8 }}>{t('products:edit')}</a>
<Popconfirm title={t('products:sureDelete')} onConfirm={() => handleDeleteBinding(record.id)}>
<a>{t('products:delete')}</a>
</Popconfirm>
</span>
@ -373,31 +484,31 @@ function Index() {
const handleAddBinding = () => {
const newData = {
key: `${bindingData.length + 1}`,
id: `${bindingData.length + 1}`,
title: '',
value: '',
age_type: '',
};
setBindingData([...bindingData, newData]);
setEditingKeyBinding(''); // 添加这一行
setEditingidBinding(''); // 添加这一行
};
const handleSaveBinding = async (key) => {
const handleSaveBinding = async (id) => {
try {
const row = await form.validateFields();
const newData = [...bindingData];
const { value, title, age_type } = row
const index = newData.findIndex((item) => key === item.key);
const index = newData.findIndex((item) => id === item.id);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, { ...item, value, title, age_type });
setBindingData(newData);
setEditingKeyBinding('');
setEditingidBinding('');
} else {
newData.push(row);
setBindingData(newData);
setEditingKeyBinding('');
setEditingidBinding('');
}
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
@ -405,9 +516,9 @@ function Index() {
};
const handleDeleteBinding = (key) => {
const handleDeleteBinding = (id) => {
const newData = [...bindingData];
const index = newData.findIndex((item) => key === item.key);
const index = newData.findIndex((item) => id === item.id);
newData.splice(index, 1);
setBindingData(newData);
};
@ -421,18 +532,18 @@ function Index() {
const treeData = [
{
title: '综费',
key: 'zf',
// id: 'zf',
selectable: false,
children: [{ title: '北京怡然假日', key: 'bjyrjr' }]
children: [{ title: '北京怡然假日', id: 'bjyrjr' }]
},
{
title: '车费',
key: 'cf',
// id: 'cf',
selectable: false,
children: [
{ title: '北京', key: 'bj' },
{ title: '天津', key: 'tj' },
{ title: '北京-天津', key: 'bj-tj-3-5' }
{ title: '北京', id: 'bj' },
{ title: '天津', id: 'tj' },
{ title: '北京-天津', id: 'bj-tj-3-5' }
]
}
]
@ -447,16 +558,23 @@ function Index() {
}, [saveData]);
useEffect(() => {
// const { errcode, result } = fetchJSON('http://127.0.0.1:4523/m1/2602949-1933890-default/Service_BaseInfoWeb/travel_agency_products');
console.log("get请求")
searchAgencyAction('54,55').then((res)=>{
console.log("res",res)
})
const a = {
travel_agency_id:'1511'
}
getAgencyProductsAction(a).then((res1)=>{
console.log("res1",res1)
})
}, [])
useEffect(() => {
if (selectedNodeKey) {
if (selectedNodeid) {
handleSaveForm();
}
}, [selectedNodeKey]);
}, [selectedNodeid]);
return (
@ -486,7 +604,7 @@ function Index() {
<h2>{t('products:productProject')}</h2>
<Row gutter={16}>
{productProject.map((item, index) => (
<Col span={8} key={index}>
<Col span={8} id={index}>
<Form.Item name={['info', item.code]} label={item.name}>
<Input />
</Form.Item>
@ -498,7 +616,7 @@ function Index() {
<div>
{tags.map(tag => (
<Tag
key={tag}
id={tag}
onClick={() => handleTagClick(tag)}
color={tag === selectedTag ? 'blue' : undefined}
style={{ cursor: 'pointer' }}
@ -581,6 +699,9 @@ function Index() {
<Button type="primary" htmlType="submit" style={{ marginTop: 16, float: "right", marginRight: "20%" }}>
{t('products:save')}
</Button>
<Button type="primary" htmlType="submit" style={{ marginTop: 16, float: "right", marginRight:"5%" }}>
提交审核
</Button>
</Form>
</Col>
</Row>

Write Preview
Loading…
Cancel
Save