added multiple seleted QR code print
This commit is contained in:
parent
f798cb2f15
commit
5d1e06ffbf
|
|
@ -1,8 +1,8 @@
|
||||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||||
import { useNavigate, useLocation } from 'react-router-dom';
|
import { useNavigate, useLocation } from 'react-router-dom';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import { PlusOutlined, EyeOutlined, PrinterFilled } from '@ant-design/icons';
|
import { PlusOutlined, EyeOutlined, PrinterFilled, CheckSquareOutlined } from '@ant-design/icons';
|
||||||
import { Image, Pagination, Space, Table, Tooltip } from 'antd';
|
import { Checkbox, Image, Pagination, Space, Table, Tooltip } from 'antd';
|
||||||
import {
|
import {
|
||||||
changeBreadCrumb,
|
changeBreadCrumb,
|
||||||
getEmpAccess,
|
getEmpAccess,
|
||||||
|
|
@ -149,7 +149,8 @@ const StockList = () => {
|
||||||
]);
|
]);
|
||||||
const [SearchText, setSearchText] = useState(null);
|
const [SearchText, setSearchText] = useState(null);
|
||||||
const [debouncedSearchText, setDebouncedSearchText] = useState(null);
|
const [debouncedSearchText, setDebouncedSearchText] = useState(null);
|
||||||
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||||||
|
const [multiQrCode, setMultiQrCode] = useState(false);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const timer = setTimeout(() => {
|
const timer = setTimeout(() => {
|
||||||
setDebouncedSearchText(SearchText);
|
setDebouncedSearchText(SearchText);
|
||||||
|
|
@ -276,7 +277,7 @@ const StockList = () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const filteredData = debouncedSearchText ? countData || [] : data || [];
|
const filteredData = debouncedSearchText ? countData || [] : data || [];
|
||||||
console.log(data, countData, '1111111111111111', filteredData);
|
console.log('1111111111111111', filteredData);
|
||||||
async function searchData({ queryKey }) {
|
async function searchData({ queryKey }) {
|
||||||
const [_, SearchText] = queryKey;
|
const [_, SearchText] = queryKey;
|
||||||
|
|
||||||
|
|
@ -412,6 +413,62 @@ const StockList = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSelectAll = (e) => {
|
||||||
|
if (e.target.checked) {
|
||||||
|
const currentPageKeys = filteredData
|
||||||
|
.filter((record) =>
|
||||||
|
record?.ProdDetails?.some((item) => item?.QRCode != null)
|
||||||
|
)
|
||||||
|
.map((record) => record.OrderId);
|
||||||
|
|
||||||
|
setSelectedRowKeys((prev) => [
|
||||||
|
...new Set([...prev, ...currentPageKeys])
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
const currentPageKeys = filteredData.map((record) => record.OrderId);
|
||||||
|
setSelectedRowKeys((prev) =>
|
||||||
|
prev.filter((key) => !currentPageKeys.includes(key))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleRowSelect = (checked, record) => {
|
||||||
|
if (checked) {
|
||||||
|
setSelectedRowKeys([...selectedRowKeys, record.OrderId]);
|
||||||
|
} else {
|
||||||
|
setSelectedRowKeys(
|
||||||
|
selectedRowKeys.filter((key) => key !== record.OrderId)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAllStickerPrint = async () => {
|
||||||
|
const Response = await dispatch(
|
||||||
|
getPurchaseData({
|
||||||
|
AppId: AppId,
|
||||||
|
BranchId: BranchId,
|
||||||
|
CompId: CompId,
|
||||||
|
OrderFromDate: formatDateForAPI(dateStrings?.[0]) ?? '',
|
||||||
|
OrderToDate: formatDateForAPI(dateStrings?.[1]) ?? '',
|
||||||
|
})
|
||||||
|
).unwrap();
|
||||||
|
|
||||||
|
if (Response?.data?.statusCode === 1) {
|
||||||
|
const allData = Response?.data?.data || [];
|
||||||
|
const selectedRecordsData = allData.filter((record) =>
|
||||||
|
selectedRowKeys.includes(record.OrderId)
|
||||||
|
);
|
||||||
|
|
||||||
|
const allProdDetails = selectedRecordsData.flatMap(
|
||||||
|
(record) => record.ProdDetails
|
||||||
|
);
|
||||||
|
|
||||||
|
setSelectedRecords(allProdDetails);
|
||||||
|
QrandBarcodeDats(allProdDetails);
|
||||||
|
setOpen(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: 'Sl.No',
|
title: 'Sl.No',
|
||||||
|
|
@ -503,29 +560,98 @@ const StockList = () => {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// title: 'Print',
|
||||||
|
// key: 'Print',
|
||||||
|
// dataIndex: 'Print',
|
||||||
|
// width: '100px',
|
||||||
|
// align: 'center',
|
||||||
|
// render: (_, record) => (
|
||||||
|
// // productData.length >= 1 ? (
|
||||||
|
// <Space size="middle">
|
||||||
|
// {record?.ProdDetails?.some((item) => item?.QRCode != null) ? (
|
||||||
|
// <a>
|
||||||
|
// <PrinterFilled
|
||||||
|
// style={{ fontSize: '20px' }}
|
||||||
|
// onClick={() => Qrcode(record)}
|
||||||
|
// />
|
||||||
|
// </a>
|
||||||
|
// ) : (
|
||||||
|
// '-'
|
||||||
|
// )}
|
||||||
|
// </Space>
|
||||||
|
// ),
|
||||||
|
// // ) : null,
|
||||||
|
// },
|
||||||
|
|
||||||
{
|
{
|
||||||
title: 'Print',
|
title: (
|
||||||
key: 'Print',
|
<Space>
|
||||||
dataIndex: 'Print',
|
{multiQrCode && (
|
||||||
width: '100px',
|
<Checkbox
|
||||||
align: 'center',
|
onChange={handleSelectAll}
|
||||||
render: (_, record) => (
|
checked={
|
||||||
// productData.length >= 1 ? (
|
filteredData.length > 0 &&
|
||||||
<Space size="middle">
|
filteredData
|
||||||
{record?.ProdDetails?.some((item) => item?.QRCode != null) ? (
|
.filter((record) =>
|
||||||
<a>
|
record?.ProdDetails?.some((item) => item?.QRCode != null)
|
||||||
<PrinterFilled
|
)
|
||||||
style={{ fontSize: '20px' }}
|
.every((record) => selectedRowKeys.includes(record.OrderId))
|
||||||
onClick={() => Qrcode(record)}
|
}
|
||||||
/>
|
/>
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
'-'
|
|
||||||
)}
|
)}
|
||||||
|
Print
|
||||||
|
<CheckSquareOutlined
|
||||||
|
style={{
|
||||||
|
fontSize: '18px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
marginLeft: '8px',
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
setMultiQrCode((prev) => {
|
||||||
|
const newValue = !prev;
|
||||||
|
if (!newValue) {
|
||||||
|
setSelectedRowKeys([]);
|
||||||
|
}
|
||||||
|
return newValue;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</Space>
|
</Space>
|
||||||
),
|
),
|
||||||
// ) : null,
|
key: 'Print',
|
||||||
|
width: '120px',
|
||||||
|
align: 'center',
|
||||||
|
|
||||||
|
render: (_, record) => {
|
||||||
|
const hasQRCode = record?.ProdDetails?.some(
|
||||||
|
(item) => item?.QRCode != null
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!hasQRCode) return '-';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Space size="middle">
|
||||||
|
{multiQrCode && (
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedRowKeys.includes(record.OrderId)}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleRowSelect(e.target.checked, record)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{!multiQrCode && (
|
||||||
|
<PrinterFilled
|
||||||
|
style={{ fontSize: '18px', cursor: 'pointer' }}
|
||||||
|
onClick={() => Qrcode(record)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
];
|
];
|
||||||
const Proddetailcolumns = [
|
const Proddetailcolumns = [
|
||||||
{
|
{
|
||||||
|
|
@ -1241,6 +1367,16 @@ const StockList = () => {
|
||||||
/>
|
/>
|
||||||
)}{' '}
|
)}{' '}
|
||||||
</div>
|
</div>
|
||||||
|
{multiQrCode && selectedRowKeys.length > 0 && (
|
||||||
|
<div className="productMaster-Print">
|
||||||
|
<Buttons
|
||||||
|
buttonText={'Sticker Print'}
|
||||||
|
handleSubmit={() => handleAllStickerPrint()}
|
||||||
|
disabled={addnewAccess}
|
||||||
|
color="901D77"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<DefaultModal
|
<DefaultModal
|
||||||
open={open}
|
open={open}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue