diff --git a/src/App.tsx b/src/App.tsx index 7386e05..897818e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,76 +12,179 @@ interface OptionGroupDef { parentOption?: string; condition?: (checkedList: string[]) => boolean; resetOn?: string[]; + multiple?: boolean; // 新增:是否支持多选,默认为 false(单选) } // 选项分组配置 const OPTION_GROUPS: OptionGroupDef[] = [ + // 第一层:品牌选择 + { + title: '品牌', + options: ['PDS', 'LULUS', 'HELLOMOLLY', 'WINDSOR'], + required: true, + level: 1 + }, + + // PDS和LULUS共用的标签树 { title: '单据类型', options: ['首单', '翻单'], required: true, - level: 1 + level: 2, + condition: (checkedList) => checkedList.includes('PDS') || checkedList.includes('LULUS'), + resetOn: ['HELLOMOLLY', 'WINDSOR'] }, { title: '是否要打板', options: ['需要打板', '不需要打板'], required: false, - level: 2, + level: 3, parentOption: '首单', - condition: (checkedList) => checkedList.includes('首单'), - resetOn: ['翻单'] + condition: (checkedList) => (checkedList.includes('PDS')) && checkedList.includes('首单'), + resetOn: ['翻单', 'HELLOMOLLY', 'WINDSOR'] + }, + { + title: '打板类型(多选)', + options: ['复版', 'PP版','不用打版'], + required: false, + level: 3, + parentOption: '首单', + multiple: true, + condition: (checkedList) => (checkedList.includes('LULUS')) && checkedList.includes('首单'), + resetOn: ['翻单', 'HELLOMOLLY', 'WINDSOR'] }, { title: '翻单变动', options: ['无变动不需要修改', '有变动需要修改'], required: false, - level: 2, + level: 3, parentOption: '翻单', - condition: (checkedList) => checkedList.includes('翻单'), - resetOn: ['首单'] + condition: (checkedList) => (checkedList.includes('PDS') || checkedList.includes('LULUS')) && checkedList.includes('翻单'), + resetOn: ['首单', 'HELLOMOLLY', 'WINDSOR'] }, { title: '特殊订单', - options: ['换料寄面料样', '换料重新打板', '加色', '改尺寸不打版', '改尺寸重新打板'], + options: ['换料寄面料样', '换料重新打板', '加色', '改尺寸重新打板'], required: false, - level: 3, + level: 4, parentOption: '有变动需要修改', - condition: (checkedList) => checkedList.includes('有变动需要修改'), - resetOn: ['首单', '无变动不需要修改'] + condition: (checkedList) => (checkedList.includes('PDS') || checkedList.includes('LULUS')) && checkedList.includes('有变动需要修改'), + resetOn: ['首单', '无变动不需要修改', 'HELLOMOLLY', 'WINDSOR'] + }, + { + title: '特殊订单', + options: ['批大货布'], + required: false, + level: 4, + parentOption: '无变动不需要修改', + condition: (checkedList) => (checkedList.includes('LULUS')) && checkedList.includes('无变动不需要修改'), + resetOn: ['首单', '有变动需要修改', 'HELLOMOLLY', 'WINDSOR'] + }, + { + title: '批色样', + options: ['寄成衣','寄色样'], + required: true, + level: 5, + parentOption: '加色', + condition: (checkedList) => (checkedList.includes('PDS') || checkedList.includes('LULUS')) && checkedList.includes('加色'), + resetOn: ['首单', '无变动不需要修改', '需要打板', '不需要打板', 'HELLOMOLLY', 'WINDSOR'] }, { title: '批色样', options: ['要批色样', '不要批色样'], required: true, level: 4, - parentOption: '加色', - condition: (checkedList) => checkedList.includes('加色'), - resetOn: ['首单', '无变动不需要修改', '需要打板', '不需要打板'] - }, - { - title: '批色样', - options: ['要批色样', '不要批色样'], - required: true, - level: 3, parentOption: '不需要打板', - condition: (checkedList) => checkedList.includes('首单') && checkedList.includes('不需要打板'), - resetOn: ['翻单', '有变动需要修改', '无变动不需要修改'] + condition: (checkedList) => (checkedList.includes('PDS') || checkedList.includes('LULUS')) && checkedList.includes('首单') && checkedList.includes('不需要打板'), + resetOn: ['翻单', '有变动需要修改', '无变动不需要修改', 'HELLOMOLLY', 'WINDSOR'] }, { title: '品类', options: ['牛仔', '时装'], - required: true + required: true, + condition: (checkedList) => checkedList.includes('PDS') || checkedList.includes('LULUS') }, { title: '复杂度', options: ['简单款', '基础款', '复杂款'], - required: true + required: true, + condition: (checkedList) => checkedList.includes('PDS') || checkedList.includes('LULUS') }, { title: '二次工艺', options: ['绣花', '印花'], - required: false + required: false, + condition: (checkedList) => checkedList.includes('PDS') || checkedList.includes('LULUS') + }, + { + title: '是否需要批船样', + options: ['不需要批船样', '需要批船样'], + required: true, + condition: (checkedList) => checkedList.includes('PDS') || checkedList.includes('LULUS') + }, + { + title: '运输方式', + options: ['美国', '澳大利亚', '英国'], + required: false, + condition: (checkedList) => checkedList.includes('PDS') || checkedList.includes('LULUS'), + resetOn: ['HELLOMOLLY', 'WINDSOR'] + }, + { + title: '英国运输方式', + options: [ + '英国-海运', + '英国-空运 (直飞)', + '英国-空运 (转机)', + '英国-铁路(中欧班列)', + '英国-卡航', + '英国-卡空', + '英国-卡车联运', + '英国-海空联运' + ], + required: false, + level: 2, + parentOption: '英国', + condition: (checkedList) => (checkedList.includes('PDS') || checkedList.includes('LULUS')) && checkedList.includes('英国'), + resetOn: ['美国', '澳大利亚', 'HELLOMOLLY', 'WINDSOR'] + }, + { + title: '美国运输方式', + options: [ + '美国-海运慢船', + '美国-海运快船', + '美国-空运(直飞)' + ], + required: true, + level: 2, + parentOption: '美国', + condition: (checkedList) => (checkedList.includes('PDS') || checkedList.includes('LULUS')) && checkedList.includes('美国'), + resetOn: ['英国', '澳大利亚', 'HELLOMOLLY', 'WINDSOR'] + }, + { + title: '澳大利亚运输方式', + options: [ + '澳大利亚-海运', + '澳大利亚-空运(直飞)' + ], + required: true, + level: 2, + parentOption: '澳大利亚', + condition: (checkedList) => (checkedList.includes('PDS') || checkedList.includes('LULUS')) && checkedList.includes('澳大利亚'), + resetOn: ['美国', '英国', 'HELLOMOLLY', 'WINDSOR'] + }, + { + title: '面料特性', + options: [ + '普通面料(纯棉、常规化纤)', + '特殊面料(真丝、皮革、功能性面料)', + '易损面料(薄纱、蕾丝)' + ], + required: false, + condition: (checkedList) => checkedList.includes('PDS') || checkedList.includes('LULUS') } + + // HELLOMOLLY和WINDSOR品牌的标签树仍然为空 + // 后续可根据需要添加专用标签 ]; const FABRIC_TEST_OPTIONS = ['需要面料测试', '不需要面料测试']; @@ -116,7 +219,8 @@ const OptionGroup = memo(({ lockedOptions = [], level = 1 }) => { - const isMulti = group.title === '二次工艺'; + // 使用配置中的 multiple 属性,默认为 false(单选) + const isMulti = group.multiple || false; // 优化:使用useMemo缓存计算结果 const groupChecked = useMemo(() => @@ -153,8 +257,10 @@ const OptionGroup = memo(({ const others = checkedList.filter(v => !group.options.includes(v)); let newList; if (isMulti) { + // 多选模式:保留所有选中项 newList = [...others, ...list]; } else { + // 单选模式:只保留最后选中的一项 newList = [...others, list.slice(-1)[0]].filter(Boolean); } onChange(newList);