|
@@ -0,0 +1,259 @@
|
|
|
+import React, {
|
|
|
+ useCallback,
|
|
|
+ useEffect,
|
|
|
+ useMemo,
|
|
|
+ useRef,
|
|
|
+ useState,
|
|
|
+} from "react";
|
|
|
+import styles from "./index.module.scss";
|
|
|
+import { Button, Popconfirm, Table, Tooltip } from "antd";
|
|
|
+import { useDispatch, useSelector } from "react-redux";
|
|
|
+import { RootState } from "@/store";
|
|
|
+import {
|
|
|
+ C0_APIdel,
|
|
|
+ C0_APIgetList,
|
|
|
+ C0_APIsort,
|
|
|
+} from "@/store/action/C0Tripartite";
|
|
|
+import { ExclamationCircleFilled } from "@ant-design/icons";
|
|
|
+
|
|
|
+// 表格拖动排序-----------------
|
|
|
+import { DndProvider, useDrag, useDrop } from "react-dnd";
|
|
|
+import { HTML5Backend } from "react-dnd-html5-backend";
|
|
|
+import { MessageFu } from "@/utils/message";
|
|
|
+
|
|
|
+import { C0TableType } from "@/types";
|
|
|
+import ImageLazy from "@/components/ImageLazy";
|
|
|
+import C0Edit from "./C0Edit";
|
|
|
+function C0Tripartite() {
|
|
|
+ const dispatch = useDispatch();
|
|
|
+
|
|
|
+ const tableInfo = useSelector(
|
|
|
+ (state: RootState) => state.C0Tripartite.tableInfo
|
|
|
+ );
|
|
|
+
|
|
|
+ const getListFu = useCallback(() => {
|
|
|
+ dispatch(C0_APIgetList());
|
|
|
+ }, [dispatch]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getListFu();
|
|
|
+ }, [getListFu]);
|
|
|
+
|
|
|
+ // 表格拖动排序
|
|
|
+ interface DraggableBodyRowProps
|
|
|
+ extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
|
+ index: number;
|
|
|
+ moveRow: (dragIndex: number, hoverIndex: number) => void;
|
|
|
+ }
|
|
|
+
|
|
|
+ const type = "DraggableBodyRow";
|
|
|
+
|
|
|
+ const DraggableBodyRow = useCallback(
|
|
|
+ ({
|
|
|
+ index,
|
|
|
+ moveRow,
|
|
|
+ className,
|
|
|
+ style,
|
|
|
+ ...restProps
|
|
|
+ }: DraggableBodyRowProps) => {
|
|
|
+ // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
|
+ const ref = useRef<HTMLTableRowElement>(null);
|
|
|
+ // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
|
+ const [{ isOver, dropClassName }, drop] = useDrop({
|
|
|
+ accept: type,
|
|
|
+ collect: (monitor) => {
|
|
|
+ const { index: dragIndex } = monitor.getItem() || {};
|
|
|
+ if (dragIndex === index) {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ isOver: monitor.isOver(),
|
|
|
+ dropClassName:
|
|
|
+ dragIndex < index ? " drop-over-downward" : " drop-over-upward",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ drop: (item: { index: number }) => {
|
|
|
+ if (moveRow) moveRow(item.index, index);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ // eslint-disable-next-line react-hooks/rules-of-hooks
|
|
|
+ const [, drag] = useDrag({
|
|
|
+ type,
|
|
|
+ item: { index },
|
|
|
+ collect: (monitor) => ({
|
|
|
+ isDragging: monitor.isDragging(),
|
|
|
+ }),
|
|
|
+ });
|
|
|
+ drop(drag(ref));
|
|
|
+
|
|
|
+ return (
|
|
|
+ <tr
|
|
|
+ ref={ref}
|
|
|
+ className={`${className}${isOver ? dropClassName : ""}`}
|
|
|
+ style={{ cursor: "move", ...style }}
|
|
|
+ {...restProps}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ },
|
|
|
+ []
|
|
|
+ );
|
|
|
+
|
|
|
+ const components = {
|
|
|
+ body: {
|
|
|
+ row: DraggableBodyRow,
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ const moveRow = useCallback(
|
|
|
+ async (dragIndex: number, hoverIndex: number) => {
|
|
|
+ if (dragIndex === hoverIndex) return;
|
|
|
+ // 交互位置-之前的id
|
|
|
+ const beforeId = tableInfo[dragIndex].id;
|
|
|
+ const afterId = tableInfo[hoverIndex].id;
|
|
|
+ console.log("交换位置", beforeId, afterId);
|
|
|
+
|
|
|
+ const res = await C0_APIsort(beforeId, afterId);
|
|
|
+
|
|
|
+ if (res.code === 0) getListFu();
|
|
|
+ },
|
|
|
+ [getListFu, tableInfo]
|
|
|
+ );
|
|
|
+
|
|
|
+ //-------------拖动排序 end -------------
|
|
|
+
|
|
|
+ // 新增和编辑的数据
|
|
|
+ const [editInfo, setEditInfo] = useState({} as C0TableType);
|
|
|
+
|
|
|
+ // 点击删除
|
|
|
+ const delTableFu = useCallback(
|
|
|
+ async (id: number) => {
|
|
|
+ const res = await C0_APIdel(id);
|
|
|
+
|
|
|
+ if (res.code === 0) {
|
|
|
+ MessageFu.success("删除成功!");
|
|
|
+ getListFu();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [getListFu]
|
|
|
+ );
|
|
|
+
|
|
|
+ const columns = useMemo(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ width: 100,
|
|
|
+ title: (
|
|
|
+ <div className="moveTit">
|
|
|
+ 序号
|
|
|
+ <Tooltip title="按住鼠标可拖动表格调整顺序">
|
|
|
+ <div className="inco" hidden={tableInfo.length < 2}>
|
|
|
+ <ExclamationCircleFilled />
|
|
|
+ </div>
|
|
|
+ </Tooltip>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ render: (_1: any, _2: any, index: number) => index + 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "三方平台名称",
|
|
|
+ dataIndex: "name",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "ICON",
|
|
|
+ render: (item: C0TableType) => (
|
|
|
+ <div className="tableImgAuto">
|
|
|
+ <ImageLazy width={60} height={60} src={item.icon} />
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "appid",
|
|
|
+ dataIndex: "appId",
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: "patch",
|
|
|
+ render: (item: C0TableType) =>
|
|
|
+ item.patch.length >= 50 ? (
|
|
|
+ <span style={{ cursor: "pointer" }} title={item.patch}>
|
|
|
+ {item.patch.substring(0, 50) + "..."}
|
|
|
+ </span>
|
|
|
+ ) : (
|
|
|
+ item.patch
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ render: (item: C0TableType) => (
|
|
|
+ <>
|
|
|
+ <Button size="small" type="text" onClick={() => setEditInfo(item)}>
|
|
|
+ 编辑
|
|
|
+ </Button>
|
|
|
+ <Popconfirm
|
|
|
+ title="删除后无法恢复,是否删除?"
|
|
|
+ okText="删除"
|
|
|
+ cancelText="取消"
|
|
|
+ onConfirm={() => delTableFu(item.id!)}
|
|
|
+ >
|
|
|
+ <Button size="small" type="text" danger>
|
|
|
+ 删除
|
|
|
+ </Button>
|
|
|
+ </Popconfirm>
|
|
|
+ </>
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }, [delTableFu, tableInfo.length]);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.C0Tripartite}>
|
|
|
+ <div className="pageTitle">三方平台</div>
|
|
|
+
|
|
|
+ <div className="C0btn">
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ onClick={() => {
|
|
|
+ if (tableInfo.length >= 10)
|
|
|
+ return MessageFu.warning("最多支持10条数据!");
|
|
|
+ setEditInfo({ id: -1 } as C0TableType);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 新增
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 表格主体 */}
|
|
|
+ <div className="tableBox">
|
|
|
+ <DndProvider backend={HTML5Backend}>
|
|
|
+ <Table
|
|
|
+ scroll={{ y: 675 }}
|
|
|
+ dataSource={tableInfo}
|
|
|
+ columns={columns}
|
|
|
+ rowKey="id"
|
|
|
+ pagination={false}
|
|
|
+ components={components}
|
|
|
+ onRow={(_, index) => {
|
|
|
+ const attr = {
|
|
|
+ index,
|
|
|
+ moveRow,
|
|
|
+ };
|
|
|
+ return attr as React.HTMLAttributes<any>;
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </DndProvider>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 点击新增或者编辑 */}
|
|
|
+ {editInfo.id ? (
|
|
|
+ <C0Edit
|
|
|
+ info={editInfo}
|
|
|
+ closeFu={() => setEditInfo({} as C0TableType)}
|
|
|
+ editFu={() => getListFu()}
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+const MemoC0Tripartite = React.memo(C0Tripartite);
|
|
|
+
|
|
|
+export default MemoC0Tripartite;
|