|
|
@@ -1,7 +1,97 @@
|
|
|
|
|
|
+import { useMemo, useState } from 'react';
|
|
|
import styles from './index.less'
|
|
|
-function MiniBox(){
|
|
|
- return <div className={styles.miniBox}>123</div>
|
|
|
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
|
|
+import { useModel } from '@umijs/max';
|
|
|
+import { Config } from "@/models/appPageConifg";
|
|
|
+import { Tooltip } from 'antd';
|
|
|
+let noDrag = ["banners", "guess_like"]
|
|
|
+function MiniBox() {
|
|
|
+ const { state, dispatch } = useModel("appPageConifg")
|
|
|
+ const list = useMemo(() => {
|
|
|
+ let pageConfig = state.pageConfigList?.find(page => page.pageUrl === state.activePage)
|
|
|
+ let list: {
|
|
|
+ appComponentId: any;
|
|
|
+ componentType: string;
|
|
|
+ showRightButton?: boolean;
|
|
|
+ componentName?: string;
|
|
|
+ remark?: string;
|
|
|
+ configs?: Config[];
|
|
|
+ }[] = []
|
|
|
+ if (state.isWorkDirection) {
|
|
|
+ let thePage = pageConfig?.workDirectionList?.find(page => page.workDirection == state.tabs)
|
|
|
+ list = thePage?.componentConfigList || []
|
|
|
+ } else {
|
|
|
+ list = pageConfig?.workDirectionList?.[0].componentConfigList || []
|
|
|
+ }
|
|
|
+ return list
|
|
|
+ }, [state])
|
|
|
+ // 处理拖动结束
|
|
|
+ const onDragEnd = (result: any) => {
|
|
|
+ const { destination, source } = result;
|
|
|
+ // 如果没有目标位置或目标位置与起始位置相同，则返回
|
|
|
+ if (!destination || destination.index === source.index || destination.index === 0 || destination.index === list.length - 1) return;
|
|
|
+ // 调整列表顺序
|
|
|
+ const reorderedItems = Array.from(list);
|
|
|
+ const [removed] = reorderedItems.splice(source.index, 1);
|
|
|
+ reorderedItems.splice(destination.index, 0, removed);
|
|
|
+ let { tabs, pageConfigList, activePage, isWorkDirection } = state
|
|
|
+ let pageConfig = pageConfigList?.find(page => page.pageUrl === state.activePage)
|
|
|
+ // 存在男女频页面
|
|
|
+ if (isWorkDirection && pageConfig?.workDirectionList) {
|
|
|
+ for (let page of pageConfig?.workDirectionList) {
|
|
|
+ if (page.workDirection == tabs) {
|
|
|
+ page.componentConfigList = reorderedItems
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ dispatch({
|
|
|
+ type: 'setAll', params: { pageConfigList, index: state.index + 1 }
|
|
|
+ })
|
|
|
+ console.log(reorderedItems)
|
|
|
+ };
|
|
|
+ return list?.length > 0 && <DragDropContext onDragEnd={onDragEnd}>
|
|
|
+ <Droppable droppableId="droppable">
|
|
|
+ {(provided) => (
|
|
|
+ <Tooltip title={<>
|
|
|
+ 1.拖动下方模块改变页面组件排序<br />
|
|
|
+ 2.点击下方模块可快捷选中组件<br />
|
|
|
+ 3.顶部组件和底部组件不可改变顺便
|
|
|
+ </>}
|
|
|
+
|
|
|
+ color={"#2db7f5"} open={true}>
|
|
|
+ <div
|
|
|
+ {...provided.droppableProps}
|
|
|
+ ref={provided.innerRef}
|
|
|
+ className={styles.miniBox}
|
|
|
+ >
|
|
|
+ {list?.map((item, index) => (
|
|
|
+ <Draggable
|
|
|
+ key={item.appComponentId}
|
|
|
+ draggableId={String(item.appComponentId)}
|
|
|
+ index={index}
|
|
|
+ isDragDisabled={noDrag?.includes(item.componentType)} // 使用isDragDisabled来控制拖动权限
|
|
|
+ >
|
|
|
+ {(provided) => (
|
|
|
+ <div
|
|
|
+ ref={provided.innerRef}
|
|
|
+ {...provided.draggableProps}
|
|
|
+ {...provided.dragHandleProps} // 始终传递dragHandleProps
|
|
|
+ className={`${noDrag?.includes(item.componentType) ? styles.nodraggableItem : styles.draggableItem} ${state.compAc === item.componentType ? styles.compAc : ""}`} // 使用 CSS 样式而非内联样式
|
|
|
+ onClick={() => { dispatch({ type: "setAll", params: { compAc: item.componentType } }) }}
|
|
|
+ >
|
|
|
+ {item.componentName || item.componentType}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </Draggable>
|
|
|
+ ))}
|
|
|
+ {provided.placeholder}
|
|
|
+ </div>
|
|
|
+ </Tooltip>
|
|
|
+ )}
|
|
|
+ </Droppable>
|
|
|
+ </DragDropContext>
|
|
|
+
|
|
|
}
|
|
|
|
|
|
export default MiniBox
|
