wjx 5 月之前
父節點
當前提交
1c25f5912b

+ 21 - 9
src/pages/launchSystemV3/material/cloudNew/selectCloudNew.tsx

@@ -101,10 +101,19 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
     // 选择
     const onCheckboxChange = (checked: boolean, item: any) => {
         let newCheckedFolderList: any[] = JSON.parse(JSON.stringify(checkedFolderList))
-        if (checked) { // 选中
-            newCheckedFolderList.push({ ...item, materialType: 0 })
-        } else { // 取消
-            newCheckedFolderList = newCheckedFolderList.filter(i => i.id !== item.id)
+        if (active || active === 0) {
+            if (checked) { // 选中
+                newCheckedFolderList[active] = { ...item, materialType: 0 }
+            } else { // 取消
+                message.warning('请选择其他图片替换')
+                return
+            }
+        } else {
+            if (checked) { // 选中
+                newCheckedFolderList.push({ ...item, materialType: 0 })
+            } else { // 取消
+                newCheckedFolderList = newCheckedFolderList.filter(i => i.id !== item.id)
+            }
         }
         setCheckedFolderList(newCheckedFolderList)
     };
@@ -138,7 +147,7 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
             {checkedFolderList.length > 0 ? <>
                 <div className={style.selectedCloud}>
                     <div style={{ width: checkedFolderList.length * 58 + (checkedFolderList.length - 1) * 8 }}>
-                        {checkedFolderList.map((item, index) => <div key={item.id} className={`${style.selectedCloud_col} ${active === index ? style.active : ''}`} onClick={() => setActive(index)}>
+                        {checkedFolderList.map((item, index) => <div key={item.id + '_' + index} className={`${style.selectedCloud_col} ${active === index ? style.active : ''}`} onClick={() => isGroup && setActive(index)}>
                             <div className={style.cz}>
                                 {item.material_type === 'video' && <PlayVideo videoUrl={item.oss_url}>{(onPlay) => <a onClick={onPlay}><PlayCircleOutlined /></a>}</PlayVideo>}
                                 <a style={{ color: 'red' }} onClick={() => setCheckedFolderList(data => data.filter(i => i.id !== item.id))}><DeleteOutlined /></a>
@@ -147,6 +156,7 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
                         </div>)}
                     </div>
                 </div>
+                {!!active && <a style={{ color: 'red' }} onClick={() => setActive(undefined)}>清除单独修改</a>}
                 <a style={{ color: 'red' }} onClick={() => setCheckedFolderList([])}>清除所有</a>
             </> : <div></div>}
             <Space>
@@ -197,7 +207,7 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
                                         }
                                         setCheckedFolderList(newCheckedFolderList)
                                     }}
-                                    disabled={checkedFolderList?.length >= num || !!active}
+                                    disabled={checkedFolderList?.length >= num || !!active || active === 0}
                                     indeterminate={indeterminateFolder}
                                     checked={checkFolderAll}
                                 >全选</Checkbox>
@@ -273,11 +283,11 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
                             <Spin spinning={getMaterialDataList.loading}>
                                 <div className={style.content_scroll} ref={ref} {...dropAreaProps}>
                                     {isDragOver && <div className={`${style.placeholder} ${isDragOver ? style.dragOver : ''}`}><span>拖动文件到这里</span></div>}
-                                    {getMaterialDataList?.data?.records?.length > 0 ? <Checkbox.Group value={checkedFolderList?.map(item => item.id)} style={{ width: '100%' }}>
+                                    {getMaterialDataList?.data?.records?.length > 0 ? <Checkbox.Group value={checkedFolderList?.filter((_, index) => (active || active === 0) ? index === active : true)?.map(item => item.id)} style={{ width: '100%' }}>
                                         <div className={style.content_scroll_div}>
                                             {getMaterialDataList?.data?.records.map((item: any) => {
-                                                const isSelect = checkedFolderList?.map(item => item.id).includes(item.id)
-                                                const disabled = checkedFolderList.length >= num && !isSelect
+                                                const isSelect = checkedFolderList?.filter((_, index) => (active || active === 0) ? index === active : true)?.map(item => item.id).includes(item.id)
+                                                const disabled = (active || active === 0) ? false : (checkedFolderList.length >= num && !isSelect)
                                                 return <div key={item.id} className={style.content_row} style={{ width: rowNum ? (1 / rowNum * 100) + '%' : 200 }}>
                                                     <Card
                                                         hoverable
@@ -362,6 +372,8 @@ const SelectCloudNew: React.FC<CLOUDNEW.SelectCloudNewProps> = ({ visible, defau
             setCheckedFolderList={setCheckedFolderList}
             accountCreateLogs={accountCreateLogs}
             putInType={putInType}
+            active={active}
+            setActive={setActive}
         />}
 
 

+ 19 - 10
src/pages/launchSystemV3/material/cloudNew/selectGroupCloudNew.tsx

@@ -22,7 +22,7 @@ const { Text, Paragraph } = Typography;
  * @param param0 
  * @returns 
  */
-const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num, defaultParams, checkedFolderList, setCheckedFolderList, accountCreateLogs, putInType }) => {
+const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num, defaultParams, checkedFolderList, setCheckedFolderList, accountCreateLogs, putInType, active, setActive }) => {
 
     /*****************************************/
     const [rowNum, setRowNum] = useState<number>(0)
@@ -115,11 +115,20 @@ const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
     // 选择
     const onCheckboxChange = (checked: boolean, item: any) => {
         let newCheckedFolderList: any[] = JSON.parse(JSON.stringify(checkedFolderList))
-        if (checked) { // 选中
-            newCheckedFolderList.push({ ...item, id: item.image_id || item.video_id, material_type: defaultParams.materialType, oss_url: item.preview_url, materialType: 1 })
-        } else { // 取消
-            let id = item.image_id || item.video_id
-            newCheckedFolderList = newCheckedFolderList.filter(i => i.id !== id)
+        if (active || active === 0) {
+            if (checked) { // 选中
+                newCheckedFolderList[active] = { ...item, id: item.image_id || item.video_id, material_type: defaultParams.materialType, oss_url: item.preview_url, materialType: 1 }
+            } else { // 取消
+                message.warning('请选择其他图片替换')
+                return
+            }
+        } else {
+            if (checked) { // 选中
+                newCheckedFolderList.push({ ...item, id: item.image_id || item.video_id, material_type: defaultParams.materialType, oss_url: item.preview_url, materialType: 1 })
+            } else { // 取消
+                let id = item.image_id || item.video_id
+                newCheckedFolderList = newCheckedFolderList.filter(i => i.id !== id)
+            }
         }
         setCheckedFolderList(newCheckedFolderList)
     };
@@ -167,7 +176,7 @@ const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
                                             }
                                             setCheckedFolderList(newCheckedFolderList)
                                         }}
-                                        disabled={checkedFolderList?.length >= num}
+                                        disabled={checkedFolderList?.length >= num || !!active || active === 0}
                                         indeterminate={indeterminateFolder}
                                         checked={checkFolderAll}
                                     >全选</Checkbox>
@@ -246,12 +255,12 @@ const SelectGroupCloudNew: React.FC<CLOUDNEW.SelectGroupCloudNewProps> = ({ num,
                             <div className={`${style.content} content_global`}>
                                 <Spin spinning={getPageRemoteImageDataList.loading}>
                                     <div className={`${style.content_scroll} scroll`}>
-                                        {getPageRemoteImageDataList?.data?.records?.length > 0 ? <Checkbox.Group value={checkedFolderList?.map(item => item.id)} style={{ width: '100%' }}>
+                                        {getPageRemoteImageDataList?.data?.records?.length > 0 ? <Checkbox.Group value={checkedFolderList?.filter((_, index) => (active || active === 0) ? index === active : true)?.map(item => item.id)} style={{ width: '100%' }}>
                                             <div className={style.content_scroll_div}>
                                                 {getPageRemoteImageDataList?.data?.records.map((item: any) => {
                                                     let id = defaultParams.materialType === 'image' ? item.image_id : item.video_id
-                                                    const isSelect = checkedFolderList?.map(item => item.id).includes(id)
-                                                    const disabled = checkedFolderList.length >= num && !isSelect
+                                                    const isSelect = checkedFolderList?.filter((_, index) => (active || active === 0) ? index === active : true)?.map(item => item.id).includes(id)
+                                                    const disabled = (active || active === 0) ? false : (checkedFolderList.length >= num && !isSelect)
                                                     return <div key={id} className={style.content_row} style={{ width: rowNum ? (1 / rowNum * 100) + '%' : 220 }}>
                                                         <Card
                                                             hoverable

+ 2 - 0
src/pages/launchSystemV3/material/typings.d.ts

@@ -160,6 +160,8 @@ declare namespace CLOUDNEW {
         defaultParams: DefaultParams
         checkedFolderList: any[]
         setCheckedFolderList: React.Dispatch<React.SetStateAction<any[]>>
+        active: number | undefined
+        setActive: React.Dispatch<React.SetStateAction<number | undefined>>
         accountCreateLogs?: PULLIN.AccountCreateLogsProps[]
         putInType?: 'NOVEL' | 'GAME'
     }