store.js

import React, { useState, useRef, useReducer } from "react";
import { Button, Tooltip, Row, Divider } from "antd";
import AutoTable from "@/components/AutoTable";
import getPrem from "@/utils/getPrem"; //权限判断fn
import { useRequest } from "umi";
import defaultFields from "./fieldstore";
import { doFetch } from "@/utils/doFetch";
import DrawInitForm from "@/components/DrawInitForm";
import { ProDescriptions } from '@ant-design/pro-components';
import JsBarcode from 'jsbarcode'
import { useReactToPrint } from 'react-to-print';
import PrintProvider, { Print, NoPrint } from 'react-easy-print';


const initState = {
    vs: false,
    fields: {},
    iftype: {},
    curitem: {},
    detail: {
        dataSource: {},
        totalCard: [],
    },
    vs: false,
};
function reducer(state, action) {
    let { type } = action,
        newState = {};
    switch (type) {
        case "add":
            newState = {
                ...state,
                vs: true,
                iftype: {
                    title: "新增库位",
                    val: type,
                },
                fields: { ...action.fields },
            };
            break;
        case "only":
            newState = {
                ...state,
                vs: true,
                iftype: {
                    title: "打印预览",
                    val: type,
                },
            };
            break;
        case "edit":
            newState = {
                ...state,
                vs: true,
                iftype: {
                    title: "编辑库位",
                    val: type,
                },
                fields: { ...action.fields },
                curitem: action.curitem,
            };
            break;
        case "see":
            newState = {
                ...state,
                curitem: action.curitem,
                vs: true,
            };
            break;
        case "close":
            newState = {
                ...state,
                curitem: {},
                vs: false,
            };
            break;
    }

    return newState;
}

const StoreApp = (props) => {
    let actionRef = useRef(),
        ChildRef = null,
        printRef = useRef();

    const [selectedRowKeys, setselectedRowKeys] = useState([]);

    function reload() {
        actionRef?.current?.reload();
        ChildRef?.onRefresh();
    }
    const { run, loading } = useRequest(doFetch, {
        manual: true,
        formatResult: (res) => res,
        onSuccess: (result, params) => {
            if (result.code == "0000") {
                reload();
                dispatch({ type: "close" });
            }
        },
    }),
        [state, dispatch] = useReducer(reducer, initState),
        { vs, fields, iftype, curitem } = state,
        columns = [
            {
                "title": "库位名称",
                "dataIndex": "storePositionName",
                "key": "storePositionName"
            },
            {
                "title": "所属库区",
                "dataIndex": "storeAreaName",
                "key": "storeAreaName",
                "valueType": "select",
                "options": {
                    database: () => doFetch({ url: "/ngic-base-business/sysDic/queryStorePositionSelect" }),
                    params: {}
                }
            },
            {
                "title": "描述",
                "dataIndex": "description",
                "key": "description",
                "search": false
            },
            {
                title: "操作",
                dataIndex: "option_dataindex",
                key: "option_dataindex",
                valueType: "option",
                width: 135,
                render: (text, row, _, action) => extraAction(text, row, _, action),
            },
        ];

    function extraAction(text, record, _, action) {
        return [
            getPrem("sysDepartment_save", action, "修改", () => {
                for (let i in defaultFields) {
                    defaultFields[i].value = record[i];
                }
                dispatch({ type: "edit", fields: defaultFields, curitem: record });
            }),
            getPrem("sysDepartment_deleteById", action, "删除", null, {
                title: "确认删除该库位？",
                onConfirm: () => {
                    run({
                        url: "/ngic-auth/sysStorePosition/deleteById",
                        params: { id: record.id },
                    });
                },
            }),
        ];
    }

    let saveData = (values, fn) => {
        let newfields = JSON.parse(JSON.stringify(values));
        //新增&修改
        let difrid = iftype.val == "edit" ? { id: curitem.id, storeId: props?.curitem?.id } : { storeId: props?.curitem?.id };
        run({
            url: "/ngic-auth/sysStorePosition/save",
            params: { ...newfields, ...difrid },
        });
    };

    let print = selectedRowKeys.length > 0 ? [
        <Button
            disabled={!getPrem("sysDepartment_save", "ifs")}
            type="danger"
            style={{ marginLeft: 12 }}
            onClick={async () => {
                await dispatch({ type: "only" });
                setTimeout(async () => {
                    await Promise.all(selectedRowKeys.map(async (it) => {
                        await JsBarcode("#s" + it.id, it.id, {
                            width: 2,
                            height: 100,
                        });
                    }))
                }, 600)

            }}
        >
            打印
        </Button>
    ] : []

    const handlePrint = useReactToPrint({
        content: () => printRef.current,
    });


    let extrarender = [
        <Button
            disabled={!getPrem("sysDepartment_save", "ifs")}
            type="primary"
            onClick={() => {
                for (let i in defaultFields) {
                    defaultFields[i].value = null;
                    defaultFields[i].disabled = false;
                }
                dispatch({ type: "add", fields: defaultFields });
            }}
        >
            新增
        </Button>,
        ...print
    ];

    return (
        <div>
            <ProDescriptions
                columns={[
                    {
                        "title": "仓库编号",
                        "dataIndex": "storeCode",
                        "key": "storeCode"
                    },
                    {
                        "title": "仓库名称",
                        "dataIndex": "storeName",
                        "key": "storeName"
                    },
                    {
                        "title": "仓库类型",
                        "dataIndex": "storeTypeName",
                        "key": "storeTypeName",
                    },
                    {
                        "title": "工厂名",
                        "dataIndex": "factoryName",
                        "key": "factoryName"
                    }]}
                dataSource={props.curitem}
                column={4}
            />
            <AutoTable
                pagetitle={"库位管理"} //页面标题
                pageextra={extrarender} //页面操作 新增or批量删除
                columns={columns}
                path="/ngic-auth/sysStorePosition/queryList"
                actionRef={actionRef}
                onRef={(node) => (ChildRef = node)}
                extraparams={{ storeId: props?.curitem?.id ?? "0" }}
                rowSelection={{
                    onChange: (selectedRowKeys, selectedRows) => {
                        setselectedRowKeys(selectedRows)
                    },

                }}
            ></AutoTable>
            <DrawInitForm
                visible={false}
                title={iftype?.title}
                visible={vs}
                onClose={() => dispatch({ type: "close" })}
                footer={false}
                destroyOnClose={true}
                fields={fields}
                submitData={(values) => {
                    saveData(values);
                }}
                onChange={(changedValues, allValues) => {
                    //联动操作
                }}
                submitting={loading || !vs}
                width={"60%"}
                val={iftype.val}
                width={iftype.val == "only" ? 380 : 600}
                extra={iftype.val == "only" ? <Button
                    onClick={handlePrint}
                >打印</Button> : null}
            >
                <PrintProvider>
                    <div ref={printRef}>
                        {
                            selectedRowKeys.map((it,i) => {
                                return <div key={i}>
                                    <NoPrint>
                                        <span>{it.storePositionName}</span>
                                    </NoPrint>
                                    <svg id={"s" + it.id} />
                                    <span className="page-break"></span>
                                </div>
                            })
                        }
                    </div>
                </PrintProvider>
            </DrawInitForm>
        </div>
    );
};
export default StoreApp;