refactor: `VSDataTag`. 部分

src/views/Orders.jsx

@@ -7,12 +7,18 @@ import { observer } from "mobx-react";
 import * as config from "../config";
 import { NavLink } from "react-router-dom";
 import * as comm from '@haina/utils-commons';
-import { show_vs_tag } from './../utils/commons';
-import { utils, writeFileXLSX } from "xlsx";
 import DateGroupRadio from '../components/DateGroupRadio';
 import SearchForm from './../components/search/SearchForm';
-import { TableExportBtn } from './../components/Data';
+import { TableExportBtn, VSDataTag } from './../components/Data';
 import ParetoChart from "../components/Pareto";
+import { toJS } from 'mobx';
+
+const DataRenderCell = ({ data1, data2, dataSuffix = '', showDiffData, ...props }) => {
+  if (showDiffData) {
+    return <VSDataTag data1={data1} data2={data2} dataSuffix={dataSuffix} {...props} />;
+  }
+  return <div>{data1}{dataSuffix}</div>;
+};
 
 class Orders extends Component {
 	static contextType = stores_Context;
@@ -24,11 +30,38 @@ class Orders extends Component {
 	format_data(data) {
 		const { date_picker_store, orders_store } = this.context;
 		const result = { dataSource: [], columns: [] };
-		if (!comm.emptyValue(data)) {
+		if (!comm.isEmpty(data)) {
+      const rows1Map = data.ordercount1.reduce((a, row1) => ({ ...a, [row1.OrderTypeSN]: row1 }), {});
+      const rows2Map = data.ordercount2.reduce((a, row2) => ({ ...a, [row2.OrderTypeSN]: row2 }), {});
+      // Diff: elements in rows2 but not in rows1
+      const diffKey = [...new Set(Object.keys(rows2Map).filter((x) => !new Set(Object.keys(rows1Map)).has(x)))];
+      const withDiff1 = (structuredClone(toJS(data.ordercount1)) || []).map((r1) => ({ ...r1, diff: rows2Map[r1.OrderTypeSN] }));
+      withDiff1.push(
+        ...diffKey.map((key) => ({
+          diff: rows2Map[key],
+          EOI_ObjSN: rows2Map[key].EOI_ObjSN,
+          OrderType: rows2Map[key].OrderType,
+          CJrate: 0,
+          CJCount_vs: -100,
+          CJPersonNum_vs: -100,
+          CJrate_vs: -100,
+          YJLY_vs: -100,
+          OrderCount_vs: -100,
+          CJCount_diff: -rows2Map[key].CJCount,
+          CJPersonNum_diff: -rows2Map[key].CJPersonNum,
+          CJrate_diff: -rows2Map[key].CJrate,
+          YJLY_diff: -rows2Map[key].YJLY,
+          OrderCount_diff: -rows2Map[key].OrderCount,
+          Ordervalue: 0,
+          Ordervalue_diff: -rows2Map[key].Ordervalue,
+          Ordervalue_vs: -100,
+        }))
+      );
+      const showDiff = date_picker_store.start_date_cp && date_picker_store.end_date_cp;
+      result.dataSource = withDiff1;
+
       const ordercountTotal1 = data.ordercountTotal1;
       const ordercountTotal2 = data.ordercountTotal2;
-			if (date_picker_store.start_date_cp && date_picker_store.end_date_cp) {
-				// 有比较的数据
       result.columns = [
         {
           title: '#',
@@ -40,14 +73,14 @@ class Orders extends Component {
                   <div>
                     {date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
                   </div>
-                    <div>
+                  {showDiff ? <div>
                     {date_picker_store.start_date_cp.format(config.DATE_FORMAT)}~{date_picker_store.end_date_cp.format(config.DATE_FORMAT)}
-                    </div>
+                  </div> : null}
                 </span>
               ),
-                titleX: `${date_picker_store.start_date.format(config.DATE_FORMAT)}~${date_picker_store.end_date.format(config.DATE_FORMAT)} vs ${date_picker_store.start_date_cp.format(
+              titleX: showDiff ? `${date_picker_store.start_date.format(config.DATE_FORMAT)}~${date_picker_store.end_date.format(config.DATE_FORMAT)} vs ${date_picker_store.start_date_cp.format(
                 config.DATE_FORMAT
-                )}~${date_picker_store.end_date_cp.format(config.DATE_FORMAT)}`,
+              )}~${date_picker_store.end_date_cp.format(config.DATE_FORMAT)}` : `${date_picker_store.start_date.format(config.DATE_FORMAT)}~${date_picker_store.end_date.format(config.DATE_FORMAT)}`,
               dataIndex: 'OrderType',
               fixed: 'left',
               render: (text, record) => <NavLink to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${encodeURIComponent(record.OrderType)}`}>{text}</NavLink>,
@@ -58,9 +91,18 @@ class Orders extends Component {
           title: '数量',
           children: [
             {
-                title: show_vs_tag(ordercountTotal1.OrderCount_vs, ordercountTotal1.OrderCount_diff, ordercountTotal1.OrderCount, ordercountTotal2.OrderCount),
+              title: (
+                <DataRenderCell
+                  showDiffData={showDiff}
+                  data1={ordercountTotal1?.OrderCount}
+                  data2={ordercountTotal2?.OrderCount}
+                  diffPercent={ordercountTotal1?.OrderCount_vs}
+                  diffData={ordercountTotal1?.OrderCount_diff}
+                />
+              ),
               titleX: [ordercountTotal1.OrderCount, ordercountTotal2.OrderCount].join(' vs '),
               dataIndex: 'OrderCount',
+              render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.OrderCount} diffPercent={r.OrderCount_vs} diffData={r.OrderCount_diff} />,
             },
           ],
         },
@@ -68,9 +110,18 @@ class Orders extends Component {
           title: '成交数',
           children: [
             {
-                title: show_vs_tag(ordercountTotal1.CJCount_vs, ordercountTotal1.CJCount_diff, ordercountTotal1.CJCount, ordercountTotal2.CJCount),
+              title: (
+                <DataRenderCell
+                  showDiffData={showDiff}
+                  data1={ordercountTotal1?.CJCount}
+                  data2={ordercountTotal2?.CJCount}
+                  diffPercent={ordercountTotal1?.CJCount_vs}
+                  diffData={ordercountTotal1?.CJCount_diff}
+                />
+              ),
               titleX: [ordercountTotal1.CJCount, ordercountTotal2.CJCount].join(' vs '),
               dataIndex: 'CJCount',
+              render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.CJCount} diffPercent={r.CJCount_vs} diffData={r.CJCount_diff} />,
             },
           ],
         },
@@ -78,9 +129,18 @@ class Orders extends Component {
           title: '成交人数',
           children: [
             {
-                title: show_vs_tag(ordercountTotal1.CJPersonNum_vs, ordercountTotal1.CJPersonNum_diff, ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum),
+              title: (
+                <DataRenderCell
+                  showDiffData={showDiff}
+                  data1={ordercountTotal1?.CJPersonNum}
+                  data2={ordercountTotal2?.CJPersonNum}
+                  diffPercent={ordercountTotal1?.CJPersonNum_vs}
+                  diffData={ordercountTotal1?.CJPersonNum_diff}
+                />
+              ),
               titleX: [ordercountTotal1.CJPersonNum, ordercountTotal2.CJPersonNum].join(' vs '),
               dataIndex: 'CJPersonNum',
+              render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.CJPersonNum} diffPercent={r.CJPersonNum_vs} diffData={r.CJPersonNum_diff} />,
             },
           ],
         },
@@ -88,9 +148,18 @@ class Orders extends Component {
           title: '成交率',
           children: [
             {
-                title: show_vs_tag(ordercountTotal1.CJrate_vs, ordercountTotal1.CJrate_diff, ordercountTotal1.CJrate, ordercountTotal2.CJrate),
+              title: (
+                <DataRenderCell
+                  showDiffData={showDiff}
+                  data1={ordercountTotal1?.CJrate}
+                  data2={ordercountTotal2?.CJrate}
+                  diffPercent={ordercountTotal1?.CJrate_vs}
+                  diffData={ordercountTotal1?.CJrate_diff}
+                />
+              ),
               titleX: [ordercountTotal1.CJrate, ordercountTotal2.CJrate].join(' vs '),
               dataIndex: 'CJrate',
+              render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.CJrate} diffPercent={r.CJrate_vs} diffData={r.CJrate_diff} />,
             },
           ],
         },
@@ -98,9 +167,18 @@ class Orders extends Component {
           title: '成交毛利（预计）',
           children: [
             {
-                title: show_vs_tag(ordercountTotal1.YJLY_vs, ordercountTotal1.YJLY_diff, ordercountTotal1.YJLY, ordercountTotal2.YJLY),
+              title: (
+                <DataRenderCell
+                  showDiffData={showDiff}
+                  data1={ordercountTotal1?.YJLY}
+                  data2={ordercountTotal2?.YJLY}
+                  diffPercent={ordercountTotal1?.YJLY_vs}
+                  diffData={ordercountTotal1?.YJLY_diff}
+                />
+              ),
               titleX: [ordercountTotal1.YJLY, ordercountTotal2.YJLY].join(' vs '),
               dataIndex: 'YJLY',
+              render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.YJLY} diffPercent={r.YJLY_vs} diffData={r.YJLY_diff} />,
             },
           ],
         },
@@ -109,144 +187,24 @@ class Orders extends Component {
           title: '单个订单价值',
           children: [
             {
-                title: show_vs_tag(ordercountTotal1.Ordervalue_vs, ordercountTotal1.Ordervalue_diff, ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue),
+              title: (
+                <DataRenderCell
+                  showDiffData={showDiff}
+                  data1={ordercountTotal1?.Ordervalue}
+                  data2={ordercountTotal2?.Ordervalue}
+                  diffPercent={ordercountTotal1?.Ordervalue_vs}
+                  diffData={ordercountTotal1?.Ordervalue_diff}
+                />
+              ),
               titleX: [ordercountTotal1.Ordervalue, ordercountTotal2.Ordervalue].join(' vs '),
               dataIndex: 'Ordervalue',
+              render: (text, r) => <DataRenderCell showDiffData={showDiff} data1={text} data2={r.diff?.Ordervalue} diffPercent={r.Ordervalue_vs} diffData={r.Ordervalue_diff} />,
             },
           ],
         },
       ];
-				// 1.找出两个数组OrderType相同的数据做比较显示 2.找出两组数据OrderType都不相同的数据做显示
+      return result;
-				let has_same_type = false; // 数组1在数组2中是否找到相同的类型
-				for (const item of data.ordercount1) {
-					has_same_type = false;
-					// 数组1在数组2中相同的类型
-					for (const item2 of data.ordercount2) {
-						if (item.OrderType === item2.OrderType) {
-							has_same_type = true;
-							result.dataSource.push({
-								key: item.key,
-								OrderType: item.OrderType,
-								OrderTypeSN: item.OrderTypeSN,
-								OrderCount: show_vs_tag(item.OrderCount_vs, item.OrderCount_diff, item.OrderCount, item2.OrderCount),
-								OrderCount_X: ([item.OrderCount, item2.OrderCount].join(' vs ')),
-								CJCount: show_vs_tag(item.CJCount_vs, item.CJCount_diff, item.CJCount, item2.CJCount),
-								CJCount_X: ([item.CJCount, item2.CJCount].join(' vs ')),
-								CJPersonNum: show_vs_tag(item.CJPersonNum_vs, item.CJPersonNum_diff, item.CJPersonNum, item2.CJPersonNum),
-								CJPersonNum_X: ([item.CJPersonNum, item2.CJPersonNum].join(' vs ')),
-								CJrate: show_vs_tag(item.CJrate_vs, item.CJrate_diff, item.CJrate, item2.CJrate),
-								CJrate_X: ([item.CJrate, item2.CJrate].join(' vs ')),
-								YJLY: show_vs_tag(item.YJLY_vs, item.YJLY_diff, item.YJLY, item2.YJLY),
-								YJLY_X: ([item.YJLY, item2.YJLY].join(' vs ')),
-								Ordervalue: show_vs_tag(item.Ordervalue_vs, item.Ordervalue_diff, item.Ordervalue, item2.Ordervalue),
-								Ordervalue_X: ([item.Ordervalue, item2.Ordervalue].join(' vs ')),
-							});
-						}
-					}
-					// 数组1中不在数组2的类型
-					if (has_same_type === false) {
-						result.dataSource.push({
-							key: item.key,
-							OrderType: item.OrderType,
-							OrderTypeSN: item.OrderTypeSN,
-							OrderCount: show_vs_tag(comm.formatPercent(item.OrderCount), item.OrderCount, item.OrderCount, 0),
-							OrderCount_X: ([item.OrderCount, 0].join(' vs ')),
-							CJCount: show_vs_tag(comm.formatPercent(item.CJCount), item.CJCount, item.CJCount, 0),
-							CJCount_X: ([item.CJCount, 0].join(' vs ')),
-							CJPersonNum: show_vs_tag(comm.formatPercent(item.CJPersonNum), item.CJPersonNum, item.CJPersonNum, 0),
-							CJPersonNum_X: ([item.CJPersonNum, 0].join(' vs ')),
-							CJrate: show_vs_tag(item.CJrate, item.CJrate, item.CJrate, 0),
-							CJrate_X: ([item.CJrate, 0].join(' vs ')),
-							YJLY: show_vs_tag(comm.formatPercent(item.YJLY), item.YJLY, item.YJLY, 0),
-							YJLY_X: ([item.YJLY, 0].join(' vs ')),
-							Ordervalue: show_vs_tag(comm.formatPercent(item.Ordervalue), item.Ordervalue, item.Ordervalue, 0),
-							Ordervalue_X: ([item.Ordervalue, 0].join(' vs ')),
-						});
-					}
-				}
-				// 数组2中不在数组1的类型
-				for (const item2 of data.ordercount2) {
-					has_same_type = false;
-					for (const item of data.ordercount1) {
-						if (item.OrderType === item2.OrderType) {
-							has_same_type = true;
-						}
-					}
-					if (has_same_type === false) {
-						result.dataSource.push({
-							key: item2.key,
-							OrderType: item2.OrderType,
-							OrderTypeSN: item2.OrderTypeSN,
-							OrderCount: show_vs_tag(comm.formatPercent(-item2.OrderCount), -item2.OrderCount, 0, item2.OrderCount),
-							OrderCount_X: ([ 0, item2.OrderCount].join(' vs ')),
-							CJCount: show_vs_tag(comm.formatPercent(-item2.CJCount), -item2.CJCount, 0, item2.CJCount),
-							CJCount_X: ([ 0, item2.CJCount].join(' vs ')),
-							CJPersonNum: show_vs_tag(comm.formatPercent(-item2.CJPersonNum), -item2.CJPersonNum, 0, item2.CJPersonNum),
-							CJPersonNum_X: ([0, item2.CJPersonNum].join(' vs ')),
-							CJrate: show_vs_tag(-item2.CJrate, -item2.CJrate, 0, item2.CJrate),
-							CJrate_X: ([ 0, item2.CJrate].join(' vs ')),
-							YJLY: show_vs_tag(comm.formatPercent(-item2.YJLY), -item2.YJLY, 0, item2.YJLY),
-							YJLY_X: ([0, item2.YJLY].join(' vs ')),
-							Ordervalue: show_vs_tag(comm.formatPercent(-item2.Ordervalue), -item2.Ordervalue, 0, item2.Ordervalue),
-							Ordervalue_X: ([ 0, item2.Ordervalue].join(' vs ')),
-						});
-					}
-				}
-			} else {
-				result.columns = [
-					{
-						title: "#",
-            fixed: 'left',
-						children: [
-							{
-								title: (
-									<span>
-										<div>
-											{date_picker_store.start_date.format(config.DATE_FORMAT)}~{date_picker_store.end_date.format(config.DATE_FORMAT)}
-										</div>
-									</span>
-								),
-                titleX: `${date_picker_store.start_date.format(config.DATE_FORMAT)}~${date_picker_store.end_date.format(config.DATE_FORMAT)}`,
-                fixed: 'left',
-                dataIndex: "OrderType",
-								render: (text, record) => <NavLink to={`/orders_sub/${orders_store.active_tab_key}/${record.OrderTypeSN}/${encodeURIComponent(record.OrderType)}`}>{text}</NavLink>,
-							},
-						],
-					},
-					{
-						title: "数量",
-						children: [{ title: ordercountTotal1.OrderCount, dataIndex: "OrderCount" }],
-						sorter: (a, b) => b.OrderCount - a.OrderCount,
-					},
-					{
-						title: "成交数",
-						children: [{ title: ordercountTotal1.CJCount, dataIndex: "CJCount" }],
-						sorter: (a, b) => b.CJCount - a.CJCount,
-					},
-					{
-						title: "成交人数",
-						children: [{ title: ordercountTotal1.CJPersonNum, dataIndex: "CJPersonNum" }],
-						sorter: (a, b) => b.CJPersonNum - a.CJPersonNum,
-					},
-					{
-						title: "成交率",
-						children: [{ title: ordercountTotal1.CJrate, dataIndex: "CJrate" }],
-						sorter: (a, b) => parseInt(b.CJrate) - parseInt(a.CJrate),
-					},
-					{
-						title: "成交毛利（预计）",
-						children: [{ title: ordercountTotal1.YJLY, dataIndex: "YJLY" }],
-						sorter: (a, b) => parseFloat(b.YJLY.replace(/,/g, "")) - parseFloat(a.YJLY.replace(/,/g, "")),
-					},
 
-					{
-						title: "单个订单价值",
-						children: [{ title: ordercountTotal1.Ordervalue, dataIndex: "Ordervalue" }],
-						sorter: (a, b) => parseFloat(b.Ordervalue.replace(/,/g, "")) - parseFloat(a.Ordervalue.replace(/,/g, "")),
-					},
-				];
-				result.dataSource = data.ordercount1;
-			}
 		}
 		return result;
 	}
@@ -256,10 +214,10 @@ class Orders extends Component {
 		const table_data = orders_store.orderCountData_Form ? this.format_data(orders_store.orderCountData_Form) : [];
 		const data_source = orders_store.orderCountData ? orders_store.orderCountData : [];
     const avg_line_y = Math.round(orders_store.avgLine1);
-		const pie_data = comm.emptyValue(orders_store.orderCountData_Form)
+		const pie_data = comm.isEmpty(orders_store.orderCountData_Form)
       ? []
       : orders_store.orderCountData_Form.ordercount1.map((ele) => ({ ...ele, YJLYx: comm.price_to_number(ele.YJLY) })); // 饼图的显示
-    const pie_data2 = comm.emptyValue(orders_store.orderCountData_Form)
+    const pie_data2 = comm.isEmpty(orders_store.orderCountData_Form)
       ? []
       : orders_store.orderCountData_Form.ordercount2.map((ele) => ({ ...ele, YJLYx: comm.price_to_number(ele.YJLY) }));