Setsort.jsx

import React, { useEffect, useReducer, useRef } from "react";
import { Button, Form, Checkbox, Table } from "antd";
import AutoTable from "@/components/AutoTable";
import getPrem from "@/utils/getPrem"; //权限判断fn
import InitForm from "@/components/InitForm";
import { useRequest } from "umi";
import { sortFields } from "./fields";
import moment from "moment";
import { doFetch } from "@/utils/doFetch";
import {
  SortableContainer,
  SortableElement,
  SortableHandle,
} from "react-sortable-hoc";
import { MenuOutlined } from "@ant-design/icons";
import { arrayMoveImmutable } from "array-move";
const CheckboxGroup = Checkbox.Group;
const initState = {
  topfields: {},
  searchLoading: false,
  topTableData: [],
  bottomTableData: [],
  paramsForm: {},
};
const DragHandle = SortableHandle(() => (
  <MenuOutlined style={{ cursor: "grab", color: "#999" }} />
));
const SortableItem = SortableElement((props) => <tr {...props} />);
const SortableBody = SortableContainer((props) => <tbody {...props} />);
function reducer(state, action) {
  let { type } = action,
    newState = {};
  switch (type) {
    case "changetopfields":
      newState = {
        ...state,
        topfields: action.topfields,
      };
      break;
    case "changeSearchLoading":
      newState = {
        ...state,
        searchLoading: action.searchLoading,
      };
      break;
    case "changeTop":
      newState = {
        ...state,
        topTableData: action.topTableData,
      };
      break;
    case "changeBottom":
      newState = {
        ...state,
        bottomTableData: action.bottomTableData,
      };
      break;
    case "changeParams":
      newState = {
        ...state,
        paramsForm: action.paramsForm,
      };
      break;
    case "close":
      newState = {
        topfields: {},
        searchLoading: false,
        topTableData: [],
        bottomTableData: [],
      };
      break;
  }

  return newState;
}

const Setsort = ({ reset, schedulingVisible }) => {
  const [state, dispatch] = useReducer(reducer, initState),
    { topfields, searchLoading, topTableData, bottomTableData, paramsForm } =
      state,
    [leftFormRef] = Form.useForm();
  useEffect(() => {
    dispatch({ type: "changetopfields", topfields: { ...sortFields } });
  }, []);
  const { run, loading } = useRequest(doFetch, {
      manual: true,
      formatResult: (res) => res,
      onSuccess: (result, params) => {
        if (result.code == "0000") {
          getBottomData(paramsForm);
        }
      },
    }),
    columns = [
      {
        title: "排序",
        dataIndex: "sort",
        valueType: "option",
        width: 80,
        className: "drag-visible",
        render: () => <DragHandle />,
      },
      {
        title: "派工单编号",
        dataIndex: "jobOrderNo",
        key: "jobOrderNo",
        search: false,
      },
      {
        title: "物料编号",
        dataIndex: "materieCode",
        key: "materieCode",
        search: false,
      },
      {
        title: "物料名称",
        dataIndex: "materieName",
        key: "materieName",
        search: false,
      },
      {
        title: "生产单位",
        dataIndex: "productionUnitName",
        key: "productionUnitName",
        search: false,
      },
      {
        title: "排产数量",
        dataIndex: "scheduledProductionNum",
        key: "scheduledProductionNum",
        search: false,
      },
      {
        title: "车间计划编号",
        dataIndex: "shopPlanNo",
        key: "shopPlanNo",
        render: (_, row) => {
          return (
            <div className="table-cell">
              {row.shopPlanNo
                ? `${row.shopPlanNo}（${row.planStartDate}~${row.planEndDate}）`
                : ""}
            </div>
          );
        },
        search: false,
      },
      {
        title: "生产订单编号",
        dataIndex: "productionOrderNo",
        key: "productionOrderNo",
        render: (_, row) => {
          return (
            <div className="table-cell">
              {row.productionOrderNo
                ? `${row.productionOrderNo}（${row.orderStartDate}~${row.orderEndDate}`
                : ""}
            </div>
          );
        },
        search: false,
      },
      {
        title: "状态",
        dataIndex: "statusName",
        key: "statusName",
        search: false,
      },
      {
        title: "排序号",
        dataIndex: "sortNo",
        key: "sortNo",
        search: false,
      },
    ];
  const onSortEnd = ({ oldIndex, newIndex }) => {
      if (oldIndex !== newIndex) {
        const newData = arrayMoveImmutable(
          [].concat(bottomTableData),
          oldIndex,
          newIndex
        ).filter((el) => !!el);
        const params = newData.map((it) => {
          return {
            id: it.id,
            sortNo: it.sortNo,
          };
        });
        run({ url: "/ngic-production/umJobOrder/upDownList", params });
        // dispatch({ type: "changeBottom", bottomTableData: newData })
      }
    },
    DraggableContainer = (props) => (
      <SortableBody
        useDragHandle
        disableAutoscroll
        helperClass="row-dragging"
        onSortEnd={onSortEnd}
        {...props}
      />
    ),
    DraggableBodyRow = ({ className, style, ...restProps }) => {
      const index = bottomTableData.findIndex(
        (x) => x.id === restProps["data-row-key"]
      );
      return <SortableItem index={index} {...restProps} />;
    };
  function getTopData(newFields) {
    doFetch({
      url: "/ngic-production/umJobOrder/queryProductionLineSortFinishedList",
      params: { ...newFields },
    }).then((res) => {
      if (res.code == "0000") {
        let data = res?.data?.dataList ?? [];
        dispatch({ type: "changeTop", topTableData: data });
      }
    });
  }
  function getBottomData(newFields) {
    doFetch({
      url: "/ngic-production/umJobOrder/queryProductionLineSortList",
      params: { ...newFields },
    }).then((res) => {
      if (res.code == "0000") {
        let data = res?.data?.dataList ?? [];
        dispatch({ type: "changeBottom", bottomTableData: data });
      }
    });
  }
  return (
    <div>
      <div>
        <InitForm
          fields={topfields}
          submitData={(values, fn) => {}}
          onChange={(changedValues, allValues) => {}}
          actions={(form, submitBtn) => {
            return (
              <Button
                loading={searchLoading}
                style={{ marginLeft: 12 }}
                type="primary"
                onClick={() => {
                  form
                    .validateFields()
                    .then((values) => {
                      dispatch({
                        type: "changeSearchLoading",
                        searchLoading: true,
                      });
                      let newFields = JSON.parse(JSON.stringify(values));
                      newFields.productionDate = moment(
                        newFields.productionDate
                      ).format("YYYY-MM-DD");
                      dispatch({ type: "changeParams", paramsForm: newFields });
                      getTopData(newFields);
                      getBottomData(newFields);
                      dispatch({
                        type: "changeSearchLoading",
                        searchLoading: false,
                      });
                    })
                    .catch((error) => {});
                }}
              >
                查询
              </Button>
            );
          }}
          formRef={leftFormRef}
        ></InitForm>
      </div>
      <div style={{ marginTop: 15 }}>
        <div style={{ marginBottom: 10, fontSize: 16 }}>产线排产：</div>
        <Table
          columns={columns.filter((it) => it.valueType != "option")}
          dataSource={topTableData}
          rowKey="id"
          pagination={false}
        ></Table>
      </div>
      <div style={{ marginTop: 15 }}>
        <div style={{ marginBottom: 10, fontSize: 16 }}>产线排产排序：</div>
        {!loading && (
          <Table
            columns={columns}
            dataSource={bottomTableData}
            pagination={false}
            rowKey="id"
            components={{
              body: {
                wrapper: DraggableContainer,
                row: DraggableBodyRow,
              },
            }}
          ></Table>
        )}
      </div>
    </div>
  );
};

export default Setsort;