import * as React from 'react'; import Box from "@mui/material/Box"; import 'handsontable/dist/handsontable.full.min.css'; //import 'handsontable/styles/ht-theme-main.min.css'; import { HandsonTable } from 'handsontable/base'; import { Table, ConfigProvider, Button as AButton } from "antd"; import {HotTable} from "@handsontable/react-wrapper"; import { registerAllModules } from 'handsontable/registry'; import {RichTreeView } from "@mui/x-tree-view/RichTreeView"; import { Grid } from '@mui/material'; import Tab from "@mui/material/Tab"; import TabContext from "@mui/lab/TabContext"; import TabList from "@mui/lab/TabList"; import TabPanel from "@mui/lab/TabPanel"; import Stack from "@mui/material/Stack"; //import { registerPlugin, NestedRows } from 'handsontable/plugins'; //registerPlugin(NestedRows); import Service from './Service'; import { textRenderer, registerRenderer } from 'handsontable/renderers'; import Button from '@mui/material/Button'; import ButtonGroup from '@mui/material/ButtonGroup'; import {extractFuzhu} from './utils'; import {shanchu, undo, redo, danxiangdinge, updateDercj, changguidinge, handleBeizhu, huan, updateShuliang} from './editor'; import { ConfigValueTooSmallError, HyperFormula } from 'hyperformula'; import Backdrop from '@mui/material/Backdrop'; import CircularProgress from '@mui/material/CircularProgress'; import { DataGrid } from '@mui/x-data-grid'; import { useHotEditor } from "@handsontable/react-wrapper"; import Dialog from '@mui/material/Dialog'; import DialogTitle from '@mui/material/DialogTitle'; import DialogContent from '@mui/material/DialogContent'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import Editable from './Editable'; import { SettingFilled, } from '@ant-design/icons'; registerAllModules(); /** * 本条规定了工程量清单编码的表示方式：十二位阿拉伯数字及其设置规定。 各位数字的含义是：一、二位为专业工程代码（01—房屋建筑与装饰工程；02—仿古建筑工程； 03—通用安装工程；04—市政工程；05—园林绿化工程；06—矿山工程；07—构筑物工程；08—城市 轨道交通工程；09—爆破工程。以后进入国标的专业工程代码以此类推）；三、四位为附录分类顺序码； 五、六位为分部工程顺序码；七、八、九位为分项工程项目名称顺序码；十至十二位为清单项目名称 顺序码。 */ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu/*后台传回来的附注信息，要整理后才能成为展示用的行*/ , beizhuFK, clickCallback, loadingCallback, dingeclick, tihuanCallback, tihuanClick}) { const hyperformulaInstance = HyperFormula.buildEmpty({ // to use an external HyperFormula instance, // initialize it with the `'internal-use-in-handsontable'` license key licenseKey: 'internal-use-in-handsontable', }); function selectRow(record) { /* const selectedRowKeys_ = [...selectedRowKeys]; if (selectedRowKeys_.indexOf(record.key) >= 0) { selectedRowKeys_.splice(selectedRowKeys_.indexOf(record.key), 1); } else { selectedRowKeys_.push(record.key); }*/ setSelectedRowKeys([record.key]); } registerRenderer('customStylesRenderer', (hotInstance, TD, row, column, prop, value, ...rest) => { let newValue = value; if ((column == 10 || column == 11 || column == 5) && row > 0) { newValue = Number(value).toFixed(2).toString(); } textRenderer(hotInstance, TD, row, column, prop, newValue, ...rest); for (let i = 0; i < highlight.current.length; i++) { let entry = highlight.current[i]; if (entry.row == row && entry.col == column) { TD.style.fontWeight = 'bold'; TD.style.color = 'green'; TD.style.background = '#d7f1e1'; } } }); const lastClickRef = React.useRef(null); const [detail, setDetail] = React.useState([ {"序号": null, "清单编码" : null, "名称" : null,"项目特征" : null, "计算规则" : null, "单位" : null, "数量": null, "综合单价" : null, "合价" : null, "人工费": null, "主材费" : null, "设备费": null, "辅材费": null, "材料费" : null, "机械费" : null, "管理费": null, "利润": null, "暂估价" : null, "综合人工工日" : null, "备注" : null}] ); const [valueTab, setValueTab] = React.useState("1"); const [rcjhl, setRcjhl] = React.useState([]); const [rcjhl2, setRcjhl2] = React.useState([]); const [fuzhu, setFuzhu] = React.useState([]);//展示用的附注行 const [tuijian, setTuijian] = React.useState([]); const [fuzhuEnable, setFuzhuEnable] = React.useState(false); const highlight = React.useRef([]); const selectedRow = React.useRef(-1); const hotRef = React.useRef(null); const detailRef = React.useRef(null); const hotRcjRef = React.useRef(null); const hotTuijianRef = React.useRef(null); const rgdeRef = React.useRef(null); const jxdeRef = React.useRef(null); const cldeRef = React.useRef(null); const isQdrcj = React.useRef(false); const debmRef = React.useRef(null); const beizhuFKRef = React.useRef(null); const [selectedRowKeys, setSelectedRowKeys] = React.useState([]); const [rowSelectionModel, setRowSelectionModel] = React.useState({ type: 'include', belong: '', ids: new Set(), }); const [expandedRowKeys, setExpandedRowKeys] = React.useState([]); const rowSelection = { selectedRowKeys, onChange: (selectedRowKeys) => { //console.log(selectedRowKeys); if (selectedRowKeys.length > 0) { setExpandedRowKeys([selectedRowKeys.at(-1)]); } else { setSelectedRowKeys(selectedRowKeys); //handleSelection(selectedRowKeys); } } }; React.useEffect( () => { Service.generateQingdanmingxi(name, bh, bt).then(x=>{ //切换清单将重置缓存和操作栈 setDetail(x); detailRef.current = x; setRcjhl([]); setFuzhu([]); selectedRow.current = -1; }); }, [bh, bt] ); React.useEffect( () => { //console.log(beizhu); let result = []; if (beizhu != null) { let keys = Object.keys(beizhu["BZBH"]); for(let i = 0; i < keys.length; i++) { let key = keys[i]; result.push({'id': i+1, '序号': i+1, '编号': beizhu["BZBH"][key], '说明': beizhu["SM"][key]});//序号很重要 } setFuzhu(result); setRowSelectionModel({type: 'include', belong: debmRef.current, ids: new Set(extractFuzhu(debmRef.current))}); } }, [beizhu]//后台传回来的附注信息有更新，要把他展示出来 ); React.useEffect( () => { handleSelection(selectedRowKeys); }, [selectedRowKeys] ); React.useEffect( () => { beizhuFKRef.current = beizhuFK; }, [beizhuFK] ); React.useEffect( () => { //console.log(dingeclick); if (selectedRowKeys.length > 0 ) { const [success, data] = changguidinge(JSON.parse(dingeclick), selectedRowKeys[0]); if (success) { setDetail(data); detailRef.current = data; setExpandedRowKeys([...expandedRowKeys, selectedRowKeys[0]]); } } }, [dingeclick]//常规添加定额 ); React.useEffect( () => { //console.log(dingeclick); if (selectedRowKeys.length > 0 ) { const data = huan(JSON.parse(tihuanClick), selectedRowKeys[0]); setDetail(data); detailRef.current = data; handleSelection(selectedRowKeys); //setExpandedRowKeys([...expandedRowKeys, selectedRowKeys[0]]); } }, [tihuanClick]//替换定额人材机 ); React.useEffect( () => { //console.log("rgde changed"); //console.log(rgde); rgdeRef.current = rgde; jxdeRef.current = jxde; cldeRef.current = clde; if (isQdrcj.current) { highlight.current = []; } else { let toHighlight = []; for(let i = 1; i < rcjhl.length; i++) { let entry = rcjhl[i]; let bianhao = entry[1]; let rcjlb = entry[8]; let hit = false; if (Number(rcjlb) == Number(1) && rgde) { for (let j = 0; j < rgde.length; j++) { if (rgde[j]["CLBH"] == bianhao) { if(rgde[j]["CLMC"] == entry[2])hit = true; let danjia = Number(entry[5]); if (danjia != rgde[j]["YSJG"]) { //console.log(`[${i},5]danjia bu yizhi`); toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"}); } let hanliang = Number(entry[10]); if (hanliang != rgde[j]["gr"]) { //console.log(`[${i}, 10]hanliang bu yizhi`); toHighlight.push({row: i, col: 10, renderer: "customStylesRenderer"}); } } } } if (Number(rcjlb) == Number(3) && jxde ) { for (let j = 0; j < jxde.length; j++) { if (jxde[j]["jxbh"] == bianhao) { if(jxde[j]["jxmc"] == entry[2])hit = true; let danjia = Number(entry[5]); if (danjia != jxde[j]["tbdj"]) { //console.log(`[${i},5]danjia bu yizhi`); toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"}); } let hanliang = Number(entry[10]); if (hanliang != jxde[j]["sl"]) { //console.log(`[${i}, 10]hanliang bu yizhi`); toHighlight.push({row: i, col: 10, renderer: "customStylesRenderer"}); } } } } if (Number(rcjlb) == Number(2) && clde ) { for (let j = 0; j < clde.length; j++) { if (clde[j]["CLBH"] == bianhao) { if(clde[j]["CLMC"] == entry[2])hit = true; let danjia = Number(entry[5]); if (danjia != clde[j]["YSJG"]) { //console.log(`[${i},5]danjia bu yizhi`); toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"}); } let hanliang = Number(entry[10]); if (hanliang != clde[j]["SL"]) { //console.log(`[${i}, 10]hanliang bu yizhi`); toHighlight.push({row: i, col: 10, renderer: "customStylesRenderer"}); } } } } if (!hit) { toHighlight.push({row: i, col: 1, renderer: "customStylesRenderer"}); } } //console.log(toHighlight); highlight.current = toHighlight; } let bzrcjhl = [["人材机编码", "名称", "单位", "单价", "合价", "含量"]] if (rgde) for (let i = 0; i < rgde.length; i++) { bzrcjhl.push([rgde[i]["CLBH"], rgde[i]["CLMC"], rgde[i]["JLDW"], rgde[i]["YSJG"], rgde[i]["gf"], rgde[i]["gr"]]); } if (clde) for (let i = 0; i < clde.length; i++) { bzrcjhl.push([clde[i]["CLBH"], clde[i]["CLMC"], clde[i]["JLDW"], clde[i]["YSJG"], clde[i]["HJ"], clde[i]["SL"]]); } if (jxde) for (let i = 0; i < jxde.length; i++) { bzrcjhl.push([jxde[i]["jxbh"], jxde[i]["jxmc"], jxde[i]["DW"], jxde[i]["tbdj"], jxde[i]["hj"], jxde[i]["sl"]]); } setRcjhl2(bzrcjhl); }, [rgde, jxde, clde] ); const handleChange = (event, newValue) => { setValueTab(newValue); }; const afterChange = (changes, source) => { if (changes == null || changes.every(x=>x[2] == x[3])) { } else { let data = hotRcjRef.current?.hotInstance?.getData(); for(let i = 1; i < data.length; i++) { data[i][11] = Number(data[i][10]) * Number(data[i][5]); } setRcjhl(data); let newData = updateDercj(selectedRowKeys[0], data); setDetail(newData); detailRef.current = newData; handleSelection(selectedRowKeys); } }; const afterOnCellMouseDown = (event, coord, TD) => { if (lastClickRef.current == null) { lastClickRef.current = Date.now(); } else { let origin = lastClickRef.current; lastClickRef.current = Date.now(); let delta = lastClickRef.current - origin; if (delta < 300 && coord.col == 1 && coord.row > 0 && !isQdrcj.current){//300 ms -> 换 tihuanCallback(coord.row, coord.col); } } }; const handleSelection = (row) => { if (row == null || row.length == 0) { setRcjhl([]); setFuzhu([]); isQdrcj.current = true; highlight.current = []; return; } let qd = detail.filter(x=>x['key'] == row[0]); if (qd.length > 0) { setFuzhu([]); Service.generateQingdanrcj(name, bh,bt,qd[0]['清单编码']).then(x=>{ setRcjhl(x); //hotRcjRef.current?.hotInstance?.loadData(x); isQdrcj.current = true; highlight.current = []; }); Service.generateQingdanTuijian(name, bh,bt,qd[0]['清单编码']).then(x=>{ setTuijian(x); //hotTuijianRef.current?.hotInstance?.loadData(x); //isQdrcj.current = true; //setHighlight([]); }); }else{ let qdbm = null; let qd = detailRef.current.filter(x=> x["children"].filter(y=>y['key'] == row[0]).length > 0 )[0]; qdbm = qd['清单编码']; let debm = qd['children'].filter(x=>x['key'] == row[0])[0]['清单编码']; let danwei = qd['children'].filter(x=>x['key'] == row[0])[0]['单位']; //console.log(name, bh,bt,qdbm, selected[1]); debmRef.current = debm; clickCallback(qdbm, debm); Service.generateDingercj(name, bh,bt,qdbm, debm, danwei).then(x=>{ console.log(x); setRcjhl(x[0]); setFuzhuEnable(x[1]); //hotRcjRef.current?.hotInstance?.loadData(x); isQdrcj.current = false; let toHighlight = []; for(let i = 1; i < x[0].length; i++) { let entry = x[0][i]; let bianhao = entry[1]; let rcjlb = entry[8]; let hit = false; if (Number(rcjlb) == 1 && rgdeRef.current ) { for (let j = 0;j < rgdeRef.current.length; j++) { if (rgdeRef.current[j]["CLBH"] == bianhao) { if(rgdeRef.current[j]["CLMC"] == entry[2])hit = true; let danjia = Number(entry[5]); if (danjia != rgdeRef.current[j]["YSJG"]) { //console.log(`[${i},5]danjia bu yizhi`); toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"}); } let hanliang = Number(entry[10]); if (hanliang != rgdeRef.current[j]["gr"]) { //console.log(`[${i}, 10]hanliang bu yizhi`); toHighlight.push({row: i, col: 10, renderer: "customStylesRenderer"}); } } } } if (Number(rcjlb) == 3 && jxdeRef.current ) { for (let j = 0; j < jxdeRef.current.length; j++) { if (jxdeRef.current[j]["jxbh"] == bianhao) { if(jxdeRef.current[j]["jxmc"] == entry[2])hit = true; let danjia = Number(entry[5]); if (danjia != jxdeRef.current[j]["tbdj"]) { //console.log(`[${i},5]danjia bu yizhi`); toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"}); } let hanliang = Number(entry[10]); if (hanliang != jxdeRef.current[j]["sl"]) { //console.log(`[${i}, 10]hanliang bu yizhi`); toHighlight.push({row: i, col: 10, renderer: "customStylesRenderer"}); } } } } if (Number(rcjlb) == 2 && cldeRef.current ) { for (let j = 0; j < cldeRef.current.length; j++) { if (cldeRef.current[j]["CLBH"] == bianhao) { if(cldeRef.current[j]["CLMC"] == entry[2])hit = true; let danjia = Number(entry[5]); if (danjia != cldeRef.current[j]["YSJG"]) { //console.log(`[${i},5]danjia bu yizhi`); toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"}); } let hanliang = Number(entry[10]); if (hanliang != cldeRef.current[j]["SL"]) { //console.log(`[${i}, 10]hanliang bu yizhi`); toHighlight.push({row: i, col: 10, renderer: "customStylesRenderer"}); } } } } if (!hit) { toHighlight.push({row: i, col: 1, renderer: "customStylesRenderer"}); } } highlight.current = toHighlight; }); } }; return ( { if (expandable) { setExpandedRowKeys([...expandedRowKeys, record.key]); } else { setExpandedRowKeys(expandedRowKeys.filter((id) => record.key !== id)); } }, expandRowByClick: true } } rowSelection= {rowSelection} onRow={(record)=>({ onClick: () => { selectRow(record); } })} scroll={{ x: 'max-content' , y : 'calc(100vh - 400px)'}} //pagination={{ position: ['none', 'none'] }} pagination={false} columns = {[ { dataIndex: '操作', title : '操作', key : '操作' , width : 30 , fixed: 'left' }, { dataIndex: '序号' , title : '序号' , key : '序号' , width : 30 , fixed: 'left' }, { dataIndex: '清单编码' , title : '清单编码' , key : '清单编码' , width : 100 , fixed: 'left' }, { dataIndex: '名称' , title : '名称' , key : '名称' , width : 200 }, { dataIndex: '项目特征' , title : '项目特征' , key : '项目特征' , width : 300 }, { dataIndex: '计算规则' , title : '计算规则' , key : '计算规则' , width : 300 }, { dataIndex: '单位' , title : '单位' , key : '单位' , width : 100 }, { dataIndex: '数量' , title : '数量' , key : '数量' , width : 100 , render: (text, record) => { //console.log("column render"); //console.log("text".concat(text)); //console.log(record); if(record['序号']) { return ( {text}</plaintext> ); } else { return ( <Editable initialText={text} onChange={(value)=>{ let [success, data] = updateShuliang(value, selectedRowKeys[0]); if (success) { setDetail(data); detailRef.current = data; handleSelection(selectedRowKeys); } }} > </Editable> ); } //console.log(text); } }, { dataIndex: '综合单价' , title : '综合单价' , key : '综合单价' , width : 100 , render: (text, record) => { let temp = Number(text); let temp2 = temp.toFixed(2); let temp3 = temp2.toString(); return ( <plaintext>{temp3}</plaintext> ); } }, { dataIndex: '合价' , title : '合价' , key : '合价' , width : 100 , render: (text, record) => { let temp = Number(text); let temp2 = temp.toFixed(2); let temp3 = temp2.toString(); return ( <plaintext>{temp3}</plaintext> ); } }, { dataIndex: '人工费' , title : '人工费' , key : '人工费' , width : 100 , render: (text, record) => { let temp = Number(text); let temp2 = temp.toFixed(2); let temp3 = temp2.toString(); return ( <plaintext>{temp3}</plaintext> ); } }, { dataIndex: '主材费' , title : '主材费' , key : '主材费' , width : 100 , render: (text, record) => { let temp = Number(text); let temp2 = temp.toFixed(2); let temp3 = temp2.toString(); return ( <plaintext>{temp3}</plaintext> ); } }, { dataIndex: '设备费' , title : '设备费' , key : '设备费' , width : 100 , render: (text, record) => { let temp = Number(text); let temp2 = temp.toFixed(2); let temp3 = temp2.toString(); return ( <plaintext>{temp3}</plaintext> ); } }, { dataIndex: '辅材费' , title : '辅材费' , key : '辅材费' , width : 100 , render: (text, record) => { let temp = Number(text); let temp2 = temp.toFixed(2); let temp3 = temp2.toString(); return ( <plaintext>{temp3}</plaintext> ); } }, { dataIndex: '材料费' , title : '材料费' , key : '材料费' , width : 100 , render: (text, record) => { let temp = Number(text); let temp2 = temp.toFixed(2); let temp3 = temp2.toString(); return ( <plaintext>{temp3}</plaintext> ); } }, { dataIndex: '机械费' , title : '机械费' , key : '机械费' , width : 100 , render: (text, record) => { let temp = Number(text); let temp2 = temp.toFixed(2); let temp3 = temp2.toString(); return ( <plaintext>{temp3}</plaintext> ); } }, { dataIndex: '管理费' , title : '管理费' , key : '管理费' , width : 100 , render: (text, record) => { let temp = Number(text); let temp2 = temp.toFixed(2); let temp3 = temp2.toString(); return ( <plaintext>{temp3}</plaintext> ); } }, { dataIndex: '利润' , title : '利润' , key : '利润' , width : 100 , render: (text, record) => { let temp = Number(text); let temp2 = temp.toFixed(2); let temp3 = temp2.toString(); return ( <plaintext>{temp3}</plaintext> ); } }, { dataIndex: '暂估价' , title : '暂估价' , key : '暂估价' , width : 100 , render: (text, record) => { let temp = Number(text); let temp2 = temp.toFixed(2); let temp3 = temp2.toString(); return ( <plaintext>{temp3}</plaintext> ); } }, { dataIndex: '综合人工工日', title : '综合人工工日', key : '综合人工工日', width : 100 }, { dataIndex: '备注' , title : '备注' , key : '备注' , width : 100 }, ]} /> </ConfigProvider> </Box> </Box> <Box > <TabContext value={valueTab}> <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> <TabList sx={{minHeight: '24px'}} onChange={handleChange} aria-label="lab API tabs example"> <Tab sx={{p: 0, minHeight: '24px'}} label="人材机含量" value="1" /> <Tab sx={{p: 0, minHeight: '24px'}} label="标准定额人材机含量" value="2" /> <Tab sx={{p: 0, minHeight: '24px'}} label="定额附注" value="3" /> <Tab sx={{p: 0, minHeight: '24px'}} label="组价推荐" value="4" /> </TabList> </Box> <TabPanel sx={{p: 1}} value="1"> <HotTable nestedRows={false} data={rcjhl } //cell={highlight} manualColumnResize={true} rowHeaders={true} colHeaders={true} height="190" formulas={{ engine: hyperformulaInstance, sheetName: 'Rcj', }} cells={(row, col) => { if (isQdrcj.current) return {readOnly: true, renderer: "customStylesRenderer"}; if (col == 8) { return { readOnly: true, renderer: "customStylesRenderer" }; } if (row === 0) { return { readOnly: true, renderer: "customStylesRenderer" }; } if (col <= 1 || col === 11) { return { readOnly: true, renderer: "customStylesRenderer" }; } return {renderer: "customStylesRenderer" }; }} fixedRowsTop={1} selectionMode="single" autoWrapRow={false} autoWrapCol={false} ref = {hotRcjRef} afterChange={afterChange} afterOnCellMouseDown={afterOnCellMouseDown} licenseKey="non-commercial-and-evaluation" // for non-commercial use only > </HotTable> </TabPanel> <TabPanel sx={{p: 1}} value="2"> <HotTable nestedRows={false} data={rcjhl2 } manualColumnResize={true} rowHeaders={true} colHeaders={true} height="190" readOnly={true} fixedRowsTop={1} selectionMode="single" autoWrapRow={false} autoWrapCol={false} licenseKey="non-commercial-and-evaluation" // for non-commercial use only /> </TabPanel> <TabPanel sx={{p: 1}} value="3"> <div style={{ height: 190}}> <DataGrid disableColumnMenu getRowHeight={(params) => "auto"} localeText={{ noRowsLabel: '无数据', paginationRowsPerPage: '每页行数', footerRowSelected: (count) => `共选中了${count.toLocaleString()}行`, }} columns={ [ { field: '序号', headerName: '序号', }, { field: '编号', headerName: '编号', }, { field: '说明', headerName: '说明', width: 550 }, ] } scroll={{ x: 'max-content' , y : 200}} rows={fuzhu} hideFooter={true} checkboxSelection={fuzhuEnable} rowSelectionModel={rowSelectionModel} onRowSelectionModelChange={(newRowSelectionModel) => { console.log(newRowSelectionModel); if (newRowSelectionModel.hasOwnProperty('belong')) { setRowSelectionModel(newRowSelectionModel); } else { console.log(rowSelectionModel); setRowSelectionModel(newRowSelectionModel); const [newData, newHl] = handleBeizhu(beizhuFKRef.current, selectedRowKeys[0], newRowSelectionModel.ids, fuzhu); if (newData) { setDetail(newData); detailRef.current = newData; setRcjhl(newHl); } } }} /> </div> </TabPanel> <TabPanel sx={{p: 1}} value="4"> <HotTable nestedRows={false} data={tuijian } ref = {hotTuijianRef} manualColumnResize={true} rowHeaders={true} colHeaders={true} height="190" readOnly={true} fixedRowsTop={1} selectionMode="single" autoWrapRow={false} autoWrapCol={false} licenseKey="non-commercial-and-evaluation" // for non-commercial use only /> </TabPanel> </TabContext> </Box> </Stack> ); }