import React, { useState, useRef, useReducer } from "react"; import { Button, Tooltip, Row, Divider } from "antd"; import AutoTable from "@/components/Tableform"; 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 pageStyle = ` @media all { .page-break { display: none; } } @media print { html, body { height: initial !important; overflow: initial !important; -webkit-print-color-adjust: exact; } } @media print { .page-break { margin-top:0; display: block; page-break-before: auto; } } @media print { .page-noprint { display: none !important; } } @page { size: auto; margin: 0px; } `; 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: 4, height: 200, fontSize: 36, }); })) }, 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" ? 690 : 600} extra={iftype.val == "only" ? <Button onClick={handlePrint} >打印</Button> : null} > <PrintProvider> <style type="text/css" media="print"> {pageStyle} </style> <div ref={printRef}> { selectedRowKeys.map((it, i) => { return <div key={i}> <NoPrint> <span className="page-noprint">{it.storePositionName}</span> </NoPrint> <svg id={"s" + it.id} /> <span className="page-break"></span> </div> }) } </div> </PrintProvider> </DrawInitForm> </div> ); }; export default StoreApp;