xxj

src/Rcjhz.js

@@ -13,7 +13,10 @@ import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
 import CardActionArea from '@mui/material/CardActionArea';
 import Stack from "@mui/material/Stack";
-
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
 import {copy} from './utils';
 import {TabulatorFull as Tabulator} from "tabulator-tables"; //import Tabulator library
 import './Tabulator.css';
@@ -21,10 +24,15 @@ export default function Rcjhz({id, bh, tiaojiaCallback, rgtzCallback, jxtzCallba
   const myTable = React.useRef(null);
   const myRef = React.useRef(null);
     const rgRef = React.useRef(null);
+    const xxjRef = React.useRef(null);
     const jxRef = React.useRef(null);
     const rgTable = React.useRef(null);
+    const xxjTable = React.useRef(null);
     const jxTable = React.useRef(null);
   const [detail, setDetail] = React.useState([]);
+  const [city, setCity] = React.useState('南通');
+  const [month, setMonth] = React.useState('');
+  const [showXxj, setShowXxj] = React.useState(false);
   const navigate = useNavigate();
     const [valueTab, setValueTab] = React.useState("1");
     const [rgtz, setRgtz] = React.useState([
@@ -32,6 +40,8 @@ export default function Rcjhz({id, bh, tiaojiaCallback, rgtzCallback, jxtzCallba
     {id : 2, '名称': '二类工', '单位': '工日', '单价': ''},
     {id : 3, '名称': '三类工', '单位': '工日', '单价': ''},
     ]);
+    const [xxj, setXxj] = React.useState([
+    ]);
     const [jxtz, setJxtz] = React.useState([
     {id : 1, '名称': '综合人工/机械工', '单位': '工日', '单价': '82'},
     {id : 2, '名称': '柴油', '单位': 'kg', '单价': '7.74'},
@@ -41,7 +51,15 @@ export default function Rcjhz({id, bh, tiaojiaCallback, rgtzCallback, jxtzCallba
  
      const handleChange = (event, newValue) => {
           setValueTab(newValue);
+          setShowXxj(false);
+          setMonth('');
         };
+     const handleChangeCity = (event) => {
+         setCity(event.target.value);   
+     };
+     const handleChangeMonth = (event) => {
+         setMonth(event.target.value);   
+     };
 
 
 
@@ -88,10 +106,41 @@ export default function Rcjhz({id, bh, tiaojiaCallback, rgtzCallback, jxtzCallba
   }
 
   function handleSelect(row){
-
+     console.log(row._row.data);
   }
 
 
+  React.useEffect(() => {
+               if (xxjRef.current != null ) {
+                         xxjTable.current = new Tabulator(xxjRef.current, {
+                              index: "key",
+                              height: 240,
+                            data: xxj, //link data to table
+                            reactiveData: false, //enable data reactivity
+                            dataTreeStartExpanded:false,
+                            dataTree: false,
+                            selectableRows:1, //make rows selectable
+                            editTriggerEvent:"dblclick",
+                            renderVertical: "basic",
+                            
+                            columns: [ //Define Table Columns
+                                         {title:"名称", field:"名称", width:120,headerSort:false,  formatter:"textarea",editable: false, headerFilter: "input" },
+                                         {title:"规格", field:"规格", width:120,headerSort:false,  formatter:"textarea",editable: false },
+                                         {title:"单位", field:"单位", width:100, headerSort:false, formatter:"textarea"}, //hide this column first
+                                         {title:"除税单价", field:"除税单价", width:100 , headerSort:false, formatter: "textarea",  editable: false},
+                                         {title:"含税单价", field:"含税单价", width:100 , headerSort:false, formatter: "textarea",  editable: false},
+                                         {title:"税率", field:"税率", width:100 , headerSort:false, formatter: "textarea",  editable: false},
+                                       
+                                 ]
+                         });
+                          xxjTable.current.on("tableBuilt", () => {
+                              Service.generateXxj(city, month, navigate).then(x=>{
+                                   xxjTable.current.replaceData(x);
+                                   });
+                            });
+               }
+    
+  }, [month]);
   React.useEffect(() => {
                if (rgRef.current != null ) {
                          rgTable.current = new Tabulator(rgRef.current, {
@@ -186,7 +235,7 @@ export default function Rcjhz({id, bh, tiaojiaCallback, rgtzCallback, jxtzCallba
   React.useEffect(() => {
     myTable.current = new Tabulator(myRef.current, {
          index: "key",
-         height: 500,
+         height: 400,
        data: detail, //link data to table
        reactiveData: false, //enable data reactivity
        dataTreeStartExpanded:true,
@@ -283,7 +332,7 @@ export default function Rcjhz({id, bh, tiaojiaCallback, rgtzCallback, jxtzCallba
        </TabPanel>
            <TabPanel sx={{p: 1}} value="3">
 
-          <Box
+    {!showXxj &&      <Box
       sx={{
         width: '100%',
         display: 'grid',
@@ -294,7 +343,11 @@ export default function Rcjhz({id, bh, tiaojiaCallback, rgtzCallback, jxtzCallba
       {cards.map((card, index) => (
         <Card>
           <CardActionArea
-            onClick={() => jgzsCallback(id, bh, index)}
+            onClick={() => {
+              if (index == 0) jgzsCallback(id, bh, index)
+              else setShowXxj(true)
+             }
+             }
             sx={{
               height: '100%',
             }}
@@ -312,11 +365,32 @@ export default function Rcjhz({id, bh, tiaojiaCallback, rgtzCallback, jxtzCallba
       ))}
     </Box>
 
+   }
+
+   {showXxj &&  <div>
+       <div>
+      <FormControl sx={{ m: 1, minWidth: 120 }} size="small">
+        <InputLabel htmlFor="grouped-native-select">地区</InputLabel>
+        <Select native defaultValue="" id="grouped-native-select" label="地区">
+            <option value={'南通'}>南通</option>
+        </Select>
+      </FormControl>
+      <FormControl sx={{ m: 1, minWidth: 120 }} size="small">
+        <InputLabel htmlFor="grouped-select">月度</InputLabel>
+        <Select defaultValue="" id="grouped-select" label="月度"
+        onChange={handleChangeMonth}
+        >
+          <MenuItem value={'202511'}>2025年11月</MenuItem>
+        </Select>
+      </FormControl>
+    </div>
+                       <div ref={xxjRef}></div>
+    </div>
+   }
 
        </TabPanel>
      </TabContext>
      </Box>
-
     </Stack>
 
     );

src/Service.js

@@ -159,6 +159,30 @@ class Service{
     }
    
 
+    async generateXxj(city, month, navigate) {
+        const response = await fetch(this.ip().concat( "/xxj/"), {
+            method : "POST",
+            headers: {
+                "Content-type": "application/json",
+                'Authorization': `Bearer ${this.token_}`
+
+            },
+            body: JSON.stringify({
+                city: city,
+                month: month
+            })
+        });
+        if (!response.ok) {
+            if (response.status == 401) {
+                 navigate("/editor/signin");
+            }
+        } else {
+            const data_ = await response.json();
+            return data_;
+        }
+    }
+
+
 
 
 

src/utils.js

@@ -54,6 +54,9 @@ export const translate = (mapping) => {
         else if (keys[i] == '0127') result.push({'label': '型钢', value: mapping[keys[i]]})
         else if (keys[i] == '0129') result.push({'label': '钢板', value: mapping[keys[i]]})
         else if (keys[i] == '0137') result.push({'label': '铜板材', value: mapping[keys[i]]})
+	else if (keys[i] == '0143') result.push({'label': '铜线材', value: mapping[keys[i]]})
+        else if (keys[i] == '0151') result.push({'label': '铝型材', value: mapping[keys[i]]})
+        else if (keys[i] == '0153') result.push({'label': '铝合金建筑型材', value: mapping[keys[i]]})
         else if (keys[i] == '0155') result.push({'label': '铅材', value: mapping[keys[i]]})
         else if (keys[i] == '0159') result.push({'label': '铁皮', value: mapping[keys[i]]})
         else if (keys[i] == '0163') result.push({'label': '其他金属', value: mapping[keys[i]]})
@@ -64,9 +67,11 @@ export const translate = (mapping) => {
         else if (keys[i] == '0209') result.push({'label': '塑料布、薄膜', value: mapping[keys[i]]})
         else if (keys[i] == '0211') result.push({'label': '塑料板', value: mapping[keys[i]]})
         else if (keys[i] == '0213') result.push({'label': '塑料（尼龙）带、绳', value: mapping[keys[i]]})
+        else if (keys[i] == '0217') result.push({'label': '有机玻璃', value: mapping[keys[i]]})
         else if (keys[i] == '0219') result.push({'label': '其他塑料材料', value: mapping[keys[i]]})
         else if (keys[i] == '0227') result.push({'label': '棉毛及其制品', value: mapping[keys[i]]})
         else if (keys[i] == '0229') result.push({'label': '丝麻及其制品', value: mapping[keys[i]]})
+        else if (keys[i] == '0231') result.push({'label': '化纤及其制品', value: mapping[keys[i]]})
         else if (keys[i] == '0233') result.push({'label': '草袋、草帘', value: mapping[keys[i]]})
         else if (keys[i] == '03') result.push({'label': '金属零件', value: mapping[keys[i]]})
         else if (keys[i] == '0301') result.push({'label': '铆钉', value: mapping[keys[i]]})
@@ -97,26 +102,51 @@ export const translate = (mapping) => {
         else if (keys[i] == '0415') result.push({'label': '砌块', value: mapping[keys[i]]})
         else if (keys[i] == '0417') result.push({'label': '瓦', value: mapping[keys[i]]})
         else if (keys[i] == '0423') result.push({'label': '外加剂', value: mapping[keys[i]]})
-        else if (keys[i] == '0427') result.push({'label': '预制品', value: mapping[keys[i]]})
+        else if (keys[i] == '0427') result.push({'label': '水泥及混凝土预制品', value: mapping[keys[i]]})
+        else if (keys[i] == '0429') result.push({'label': '钢筋混凝土预制品', value: mapping[keys[i]]})
         else if (keys[i] == '05') result.push({'label': '木、竹材', value: mapping[keys[i]]})
+        else if (keys[i] == '0501') result.push({'label': '圆木', value: mapping[keys[i]]})
         else if (keys[i] == '0503') result.push({'label': '锯材', value: mapping[keys[i]]})
         else if (keys[i] == '0505') result.push({'label': '胶合板', value: mapping[keys[i]]})
+        else if (keys[i] == '0509') result.push({'label': '细木工板', value: mapping[keys[i]]})
         else if (keys[i] == '0523') result.push({'label': '木制台类及货架', value: mapping[keys[i]]})
         else if (keys[i] == '0525') result.push({'label': '其他木制品', value: mapping[keys[i]]})
         else if (keys[i] == '06') result.push({'label': '玻璃、陶瓷、面砖', value: mapping[keys[i]]})
         else if (keys[i] == '0601') result.push({'label': '平板玻璃', value: mapping[keys[i]]})
+        else if (keys[i] == '0605') result.push({'label': '钢化玻璃', value: mapping[keys[i]]})
+	else if (keys[i] == '0611') result.push({'label': '中空玻璃', value: mapping[keys[i]]})
         else if (keys[i] == '0625') result.push({'label': '工艺装饰玻璃', value: mapping[keys[i]]})
+	else if (keys[i] == '0653') result.push({'label': '玻璃马赛克', value: mapping[keys[i]]})
         else if (keys[i] == '0661') result.push({'label': '瓷砖', value: mapping[keys[i]]})
         else if (keys[i] == '0665') result.push({'label': '缸砖', value: mapping[keys[i]]})
         else if (keys[i] == '07') result.push({'label': '楼地面材料', value: mapping[keys[i]]})
+	else if (keys[i] == '0711') result.push({'label': '其他装饰石材', value: mapping[keys[i]]})
+        else if (keys[i] == '0723') result.push({'label': '石材装饰辅助用料', value: mapping[keys[i]]})
+        else if (keys[i] == '0747') result.push({'label': '塑料地板', value: mapping[keys[i]]})
         else if (keys[i] == '08') result.push({'label': '墙面、天棚材料', value: mapping[keys[i]]})
+	else if (keys[i] == '0801') result.push({'label': '石膏装饰板', value: mapping[keys[i]]})
         else if (keys[i] == '0805') result.push({'label': '金属装饰板', value: mapping[keys[i]]})
+        else if (keys[i] == '0807') result.push({'label': '矿物棉装饰板', value: mapping[keys[i]]})
         else if (keys[i] == '0823') result.push({'label': '网格布', value: mapping[keys[i]]})
+	else if (keys[i] == '0831') result.push({'label': '轻钢龙骨', value: mapping[keys[i]]})
+	else if (keys[i] == '0833') result.push({'label': '龙骨配件', value: mapping[keys[i]]})
+        else if (keys[i] == '0835') result.push({'label': '铝合金龙骨', value: mapping[keys[i]]})
+	else if (keys[i] == '0845') result.push({'label': '隔断及筒形天棚', value: mapping[keys[i]]})
         else if (keys[i] == '09') result.push({'label': '门窗', value: mapping[keys[i]]})
+	else if (keys[i] == '0909') result.push({'label': '铝合金门窗', value: mapping[keys[i]]})
+        else if (keys[i] == '0911') result.push({'label': '塑钢、塑料门窗', value: mapping[keys[i]]})
+        else if (keys[i] == '0927') result.push({'label': '其他门窗', value: mapping[keys[i]]})
+        else if (keys[i] == '0949') result.push({'label': '门窗五金', value: mapping[keys[i]]})
         else if (keys[i] == '10') result.push({'label': '其他装饰材料', value: mapping[keys[i]]})
+	else if (keys[i] == '1001') result.push({'label': '木质装饰线条', value: mapping[keys[i]]})
+        else if (keys[i] == '1003') result.push({'label': '金属装饰线条', value: mapping[keys[i]]})
+        else if (keys[i] == '1013') result.push({'label': '踢脚线、踢脚板', value: mapping[keys[i]]})
+        else if (keys[i] == '1017') result.push({'label': '其他装饰线条', value: mapping[keys[i]]})
+        else if (keys[i] == '1023') result.push({'label': '扶手', value: mapping[keys[i]]})
         else if (keys[i] == '11') result.push({'label': '涂料及防水材料', value: mapping[keys[i]]})
         else if (keys[i] == '1101') result.push({'label': '建筑涂料', value: mapping[keys[i]]})
         else if (keys[i] == '1103') result.push({'label': '功能性涂料', value: mapping[keys[i]]})
+        else if (keys[i] == '1106') result.push({'label': '金属涂料', value: mapping[keys[i]]})
         else if (keys[i] == '1111') result.push({'label': '通用涂料', value: mapping[keys[i]]})
         else if (keys[i] == '1141') result.push({'label': '树脂', value: mapping[keys[i]]})
         else if (keys[i] == '1143') result.push({'label': '颜料、填料', value: mapping[keys[i]]})
@@ -139,6 +169,7 @@ export const translate = (mapping) => {
         else if (keys[i] == '1243') result.push({'label': '胶黏制品', value: mapping[keys[i]]})
         else if (keys[i] == '13') result.push({'label': '保温材料', value: mapping[keys[i]]})
         else if (keys[i] == '1301') result.push({'label': '石棉材料', value: mapping[keys[i]]})
+        else if (keys[i] == '1303') result.push({'label': '岩棉材料', value: mapping[keys[i]]})
         else if (keys[i] == '1307') result.push({'label': '玻璃布、棉', value: mapping[keys[i]]})
         else if (keys[i] == '1312') result.push({'label': '塑料保温', value: mapping[keys[i]]})
         else if (keys[i] == '14') result.push({'label': '管材', value: mapping[keys[i]]})
@@ -151,6 +182,7 @@ export const translate = (mapping) => {
         else if (keys[i] == '1435') result.push({'label': '异形塑料管', value: mapping[keys[i]]})
         else if (keys[i] == '1445') result.push({'label': '水泥、混凝土管', value: mapping[keys[i]]})
         else if (keys[i] == '1455') result.push({'label': '复合管', value: mapping[keys[i]]})
+        else if (keys[i] == '1457') result.push({'label': '其他管材', value: mapping[keys[i]]})
         else if (keys[i] == '15') result.push({'label': '管材零件', value: mapping[keys[i]]})
         else if (keys[i] == '1502') result.push({'label': '镀锌管件', value: mapping[keys[i]]})
         else if (keys[i] == '1505') result.push({'label': '铸铁给排水管件', value: mapping[keys[i]]})
@@ -246,9 +278,11 @@ export const translate = (mapping) => {
         else if (keys[i] == '8005') result.push({'label': '混合砂浆', value: mapping[keys[i]]})
         else if (keys[i] == '8007') result.push({'label': '特种砂浆', value: mapping[keys[i]]})
         else if (keys[i] == '8009') result.push({'label': '其他砂浆', value: mapping[keys[i]]})
+        else if (keys[i] == '8011') result.push({'label': '其他抹灰砂浆', value: mapping[keys[i]]})
         else if (keys[i] == '8015') result.push({'label': '胶泥、脂、油', value: mapping[keys[i]]})
         else if (keys[i] == '8021') result.push({'label': '混凝土', value: mapping[keys[i]]})
         else if (keys[i] == '8023') result.push({'label': '泡沫混凝土、加气混凝土', value: mapping[keys[i]]})
+        else if (keys[i] == '8027') result.push({'label': '炉渣混凝土、喷射混凝土', value: mapping[keys[i]]})
         else if (keys[i] == '8035') result.push({'label': '混合料', value: mapping[keys[i]]})
         else result.push({'label': keys[i], 'value': mapping[keys[i]]})
     }