+ -
+
+
批量分配
+ 
+
+
+ -
+
+
操作日志
+ 
+
+
+ -
+
+
警告
+ 
+
+
+ -
+
+
应急处理
+ 
+
+
-
批量解锁
@@ -82,7 +108,9 @@
@font-face {
font-family: 'iconfont';
- src: url('iconfont.ttf?t=1695032721128') format('truetype');
+ src: url('iconfont.woff2?t=1698312705146') format('woff2'),
+ url('iconfont.woff?t=1698312705146') format('woff'),
+ url('iconfont.ttf?t=1698312705146') format('truetype');
}
第二步：定义使用 iconfont 的样式
@@ -108,6 +136,42 @@
+ -
+
+
+ 批量分配
+
+ .icon-piliangfenpei
+
+
+
+ -
+
+
+ 操作日志
+
+ .icon-caozuorizhi32
+
+
+
+ -
+
+
+ 警告
+
+ .icon-jinggao
+
+
+
+ -
+
+
+ 应急处理
+
+ .icon-yingjichuli
+
+
+
-
@@ -153,6 +217,38 @@
+ -
+
+
批量分配
+ #icon-piliangfenpei
+
+
+ -
+
+
操作日志
+ #icon-caozuorizhi32
+
+
+ -
+
+
警告
+ #icon-jinggao
+
+
+ -
+
+
应急处理
+ #icon-yingjichuli
+
+
-
+
+
+ {i18n["查看拓扑图"]}
+
}
diff --git a/src/pages/calcTable/index.tsx b/src/pages/calcTable/index.tsx
index a0c2c03..8e2c4c9 100644
--- a/src/pages/calcTable/index.tsx
+++ b/src/pages/calcTable/index.tsx
@@ -14,6 +14,7 @@ import type { ColumnType } from "antd/lib/table";
import type { PaginationData } from "rc-pagination";
import { exceptStr, paginationFun } from "@/utils/common";
import { IPage } from "@/common/types";
+import Icon from "../../lib/CustomIcon";
import styles from "@/pages/atdTable/components/index.less";
interface OwnProps {
@@ -68,11 +69,14 @@ const index: FunctionComponent
= (props) => {
...item, title: ,
children: convertColumns(_.map(item.children, o => ({ ...o, i18n: item.i18n }))),
className: styles["td_odd"], i18n: item.i18n,
- render: (text: string) => (
+ render: (text: string, record: any) => (
{text}
+ handleDiagramTd(item?.dataIndex, record?.id)}
+ />
{
- item.lockStatus === "LOCK" ? : null
+ item.lockStatus === "LOCK" ? : null
}
)
@@ -80,6 +84,15 @@ const index: FunctionComponent = (props) => {
}
});
};
+ const handleDiagramTd = (salaryItemId: string, acctEmpId: string) => {
+ window.parent.postMessage(
+ {
+ type: "turn",
+ payload: { id: "DIAGRAM", params: { salaryItemId, acctEmpId } }
+ },
+ "*"
+ );
+ };
const handleFormulaTd = (dataIndex: string) => {
window.parent.postMessage(
{
diff --git a/src/pages/salaryItemDiagram/data.js b/src/pages/salaryItemDiagram/data.js
new file mode 100644
index 0000000..fb261f4
--- /dev/null
+++ b/src/pages/salaryItemDiagram/data.js
@@ -0,0 +1,125 @@
+export const data = {
+ id: "root",
+ label: "利息收入",
+ subLabel: "3,283.456",
+ ratio: 3,
+ children: [
+ {
+ id: "child-a",
+ label: "平均利息",
+ subLabel: "9%",
+ ratio: 1,
+ increase: true
+ },
+ {
+ id: "child-b",
+ label: "贷款余额",
+ subLabel: "1,789,567",
+ ratio: 23,
+ increase: true,
+ children: [
+ {
+ id: "child-b-a",
+ label: "投放金额",
+ subLabel: "2,385,124",
+ ratio: 17,
+ increase: true,
+ operator: ""
+ },
+ {
+ id: "child-b-b",
+ label: "还款金额",
+ subLabel: "595,557",
+ ratio: 12,
+ increase: true,
+ children:[
+ {
+ id: 'child-b-b-a',
+ label: '还款期限',
+ subLabel: '7',
+ ratio: 23,
+ increase: true,
+ children:[
+ {
+ id: "child-b-b-a-a",
+ label: "还款金额",
+ subLabel: "595,557",
+ ratio: 12,
+ increase: true,
+ children:[
+ {
+ id: "child-b-b-a-a-a",
+ label: "还款金额",
+ subLabel: "595,557",
+ ratio: 12,
+ increase: true,
+ children:[
+ {
+ id: "child-b-b-a-a-a-a",
+ label: "还款金额",
+ subLabel: "595,557",
+ ratio: 12,
+ increase: true,
+ children:[
+ {
+ id: "child-b-b-a-a-a-a-a",
+ label: "还款金额",
+ subLabel: "595,557",
+ ratio: 12,
+ increase: true,
+ children:[
+ {
+ id: "child-b-b-a-a-a-a-a-a",
+ label: "还款金额",
+ subLabel: "595,557",
+ ratio: 12,
+ increase: true,
+ children:[
+ {
+ id: "child-b-b-a-a-a-a-a-a-a",
+ label: "还款金额",
+ subLabel: "595,557",
+ ratio: 12,
+ increase: true,
+ children:[
+ {
+ id: "child-b-b-a-a-a-a-a-a-a-a",
+ label: "还款金额",
+ subLabel: "595,557",
+ ratio: 12,
+ increase: true,
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ id: 'child-b-b-6',
+ label: '还款期限',
+ subLabel: '7',
+ ratio: 23,
+ increase: true,
+ }
+ ]
+ }
+ ]
+ },
+ {
+ id: "child-c",
+ label: "还款期限",
+ subLabel: "7",
+ ratio: 23,
+ increase: false
+ }
+ ]
+};
diff --git a/src/pages/salaryItemDiagram/index-g6.tsx b/src/pages/salaryItemDiagram/index-g6.tsx
new file mode 100644
index 0000000..a9bb328
--- /dev/null
+++ b/src/pages/salaryItemDiagram/index-g6.tsx
@@ -0,0 +1,156 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资项目-拓扑图
+ * Description:
+ * Date: 2023/10/19
+ */
+import React, { FunctionComponent, useEffect, useRef } from "react";
+// @ts-ignore
+import G6 from "@antv/g6";
+import API from "@/api";
+// @ts-ignore
+import uuidV4 from "uuid/v4";
+import "./registerShape";
+
+interface OwnProps {
+}
+
+type Props = OwnProps;
+
+const index: FunctionComponent = (props) => {
+ const ref: any = useRef(null);
+ let graph: any = null;
+ useEffect(() => {
+ initG6().then(r => {
+ });
+ return () => {
+ };
+ }, []);
+ // 1688699208883
+ const initG6 = async () => {
+ const { data: { data: result } }: any = await API.CalculateService.getSalarysobItemTopology({
+ salarySobId: "31",
+ salaryItemId: "1688699208872"
+ });
+ const dataSource = {
+ id: result.salaryItemId.toString(), label: result.salaryItemName || "",
+ subLabel: result.result || "", formula: result.formula, level: 0,
+ children: !_.isEmpty(result.children) ? traverse(result.children) : []
+ };
+ const width = ref.current.scrollWidth;
+ const height = ref.current.scrollHeight;
+ // @ts-ignore
+ G6.Util.traverseTree(dataSource, (subtree: any) => {
+ // if (subtree.level === undefined) subtree.level = 0;
+ // subtree.children?.forEach((child: any) => child.level = subtree.level + 1);
+ switch (subtree.level) {
+ case 0:
+ subtree.type = "root";
+ break;
+ case 1:
+ subtree.type = "level1node";
+ // subtree.collapsed = true;
+ break;
+ default:
+ subtree.type = "othernode";
+ }
+ });
+ if (!graph) {
+ graph = new G6.TreeGraph({
+ // fitCenter: true, linkCenter: true,
+ container: ref.current, width, height, fitView: true,
+ layout: {
+ // LR
+ type: "compactBox", direction: "LR", getHGap: function getVGap() {
+ return 5;
+ }
+ },
+ defaultEdge:
+ // {
+ // type: "cubic-vertical",
+ // style: {
+ // stroke: "#A3B1BF"
+ // }
+ // },
+ {
+ type: "round-poly",
+ sourceAnchor: 0,
+ targetAnchor: 1,
+ style: {
+ radius: 8,
+ stroke: "rgb(19, 33, 92)"
+ }
+ },
+ defaultNode: {
+ style: {
+ cursor: "pointer"
+ },
+ // anchorPoints: [
+ // [0.5, 0],
+ // [0.5, 1]
+ // ]
+ anchorPoints: [
+ [0.9, 0.5],
+ [0, 0.5]
+ ]
+ },
+ nodeStateStyles: {
+ hover: {
+ fill: "#fff",
+ shadowBlur: 30,
+ shadowColor: "#ddd"
+ },
+ operatorhover: {
+ "operator-box": {
+ opacity: 1
+ }
+ }
+ },
+ modes: {
+ default: ["zoom-canvas", "drag-canvas", "collapse-expand", "drag-node"]
+ }
+ });
+ }
+ graph.data(dataSource);
+ graph.render();
+ graph.on("node:mouseenter", (e: any) => {
+ if (e.target.get("name")?.includes("operator")) {
+ graph.setItemState(e.item, "operatorhover", true);
+ } else {
+ graph.setItemState(e.item, "hover", true);
+ }
+ });
+ graph.on("node:mouseleave", (e: any) => {
+ graph.setItemState(e.item, "operatorhover", false);
+ graph.setItemState(e.item, "hover", false);
+ });
+ graph.on("node:click", (e: any) => {
+ // graph.zoom(3, { x: e.canvasX, y: e.canvasY });
+ });
+ };
+
+ return ();
+};
+
+export default index;
+
+const traverse: any = (arr: any[]) => {
+ return _.map(arr, item => {
+ if (!_.isEmpty(item.children)) {
+ const uuid = uuidV4();
+ return {
+ id: uuid, label: item.salaryItemName,
+ subLabel: item.result, formula: item.formula,
+ ratio: 1, increase: true, level: 1, collapsed: true,
+ children: traverse(item.children)
+ };
+ } else {
+ const uuid = uuidV4();
+ return {
+ id: uuid, label: item.salaryItemName,
+ subLabel: item.result, formula: item.formula,
+ ratio: 1, increase: true, level: 2
+ };
+ }
+ });
+};
diff --git a/src/pages/salaryItemDiagram/index.tsx b/src/pages/salaryItemDiagram/index.tsx
new file mode 100644
index 0000000..1f24dc3
--- /dev/null
+++ b/src/pages/salaryItemDiagram/index.tsx
@@ -0,0 +1,168 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资项目-拓扑图
+ * Description:
+ * Date: 2023/10/19
+ */
+import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
+import { DecompositionTreeGraph, NodeConfig } from "@ant-design/graphs";
+import { notification } from "antd";
+import { exceptStr } from "@/utils/common";
+import API from "@/api";
+// @ts-ignore
+import uuidV4 from "uuid/v4";
+
+interface OwnProps {
+}
+
+type Props = OwnProps;
+const index: FunctionComponent = (props) => {
+ const [dataSource, setDataSource] = useState({});
+ const [i18n, setI18n] = useState({});
+ useEffect(() => {
+ window.parent.postMessage({ type: "initDiagram" }, "*");
+ window.addEventListener("message", receiveMessageFromIndex, false);
+ return () => {
+ window.removeEventListener("message", receiveMessageFromIndex, false);
+ };
+ }, []);
+ const receiveMessageFromIndex = (event: any) => {
+ const data: any = exceptStr(event.data);
+ if (!_.isEmpty(data)) {
+ const { i18n, acctEmpId, salaryItemId, salarySobId } = data;
+ setI18n(i18n);
+ init({ acctEmpId, salaryItemId, salarySobId });
+ }
+ };
+ const init = (paylaod: any) => {
+ API.CalculateService.getSalarysobItemTopology(paylaod).then(({ data }) => {
+ const { status, data: result } = data;
+ if (status) {
+ const dataSource = {
+ id: result.salaryItemId.toString(),
+ value: { title: result.salaryItemName, formula: result.formula, items: [{ text: result.result }] },
+ children: !_.isEmpty(result.children) ? traverse(result.children) : []
+ };
+ setDataSource(dataSource);
+ }
+ });
+ };
+ const getChildren = async (nodeCfg: NodeConfig) => {
+ return findChildren(extractTree(dataSource.children), nodeCfg.id);
+ };
+ const openNotification = (data: any) => {
+ const { value: { formula } } = data;
+ notification.destroy();
+ if (_.isEmpty(formula)) return;
+ const { formula: description } = formula;
+ notification.open({
+ message: i18n["公式"],
+ duration: null,
+ description,
+ style: { maxWidth: 600 }
+ });
+ };
+ const component: any = useMemo(() => {
+ const config = {
+ data: {
+ ...dataSource,
+ children: dataSource.children ? _.map(dataSource.children, o => ({ ...o, children: null })) : null
+ },
+ autoFit: false, animate: true,
+ nodeCfg: {
+ getChildren,
+ autoWidth: true,
+ items: {
+ layout: "follow"
+ }
+ },
+ markerCfg: (cfg: any) => {
+ const { g_level, id } = cfg;
+ return {
+ show: (g_level === 0 && !_.isEmpty(dataSource.children)) || getStorageIds(dataSource.children).includes(id)
+ };
+ },
+ onReady: (graph: any) => {
+ graph.on("node:click", (evt: any) => {
+ if (_.isEmpty(evt.target.attrs) || JSON.stringify(evt.target.attrs).indexOf("cursor") !== -1) return;
+ openNotification(evt.item._cfg.model);
+ });
+ setTimeout(() => {
+ graph.zoom(1);
+ });
+ },
+ behaviors: ["drag-canvas", "zoom-canvas", "drag-node"]
+ };
+ return !_.isEmpty(dataSource) ? : null;
+ }, [dataSource]);
+ return component;
+};
+
+export default index;
+
+const traverse: any = (arr: any[]) => {
+ return _.map(arr, item => {
+ if (!_.isEmpty(item.children)) {
+ const uuid = uuidV4();
+ return {
+ id: uuid,
+ value: { title: item.salaryItemName, formula: item.formula, items: [{ text: item.result }] },
+ children: traverse(item.children)
+ };
+ } else {
+ const uuid = uuidV4();
+ return {
+ id: uuid, value: { title: item.salaryItemName, formula: item.formula, items: [{ text: item.result }] }
+ };
+ }
+ });
+};
+const findChildren: any = (arr: any[], id: string) => {
+ const dataSource = _.find(arr, o => o.id === id).children;
+ return _.map(dataSource, o => ({ ...o, children: [] }));
+};
+/*
+ * Author: 黎永顺
+ * Description:数组扁平换
+ * Params:
+ * Date: 2023/10/26
+ */
+const extractTree = (data: any[]) => {
+ if (!data.length) return [];
+ const list: any[] = [];
+ const getObj = (arr: any[]) => {
+ arr.forEach((row: any) => {
+ let obj = {};
+ obj = JSON.parse(JSON.stringify(row));
+ list.push(obj);
+ if (row.children) {
+ getObj(row.children);
+ }
+ });
+ return list;
+ };
+ return getObj(data);
+};
+/*
+ * Author: 黎永顺
+ * Description: 有children子集的id集合
+ * Params:
+ * Date: 2023/10/26
+ */
+const getStorageIds = (array: any[]) => {
+ let ids: any = [];
+ const getIds = (array: any, ids: any) => {
+ array.forEach((item: any) => {
+ if (item.children) ids.push(item.id);
+ if (item.children) ids = getIds(item.children, ids);
+ });
+ return ids;
+ };
+ if (Array.isArray(array)) {
+ if (array.length === 0) return [];
+ } else {
+ return [];
+ }
+ ids = getIds(array, ids);
+ return ids;
+};
diff --git a/src/pages/salaryItemDiagram/registerShape.ts b/src/pages/salaryItemDiagram/registerShape.ts
new file mode 100644
index 0000000..f11af8e
--- /dev/null
+++ b/src/pages/salaryItemDiagram/registerShape.ts
@@ -0,0 +1,292 @@
+// @ts-ignore
+import G6 from "@antv/g6";
+
+G6.registerNode("root", {
+ draw: (cfg: any, group: any) => {
+ const size = [80, 30];
+ const keyShape = group.addShape("rect", {
+ attrs: {
+ width: size[0],
+ height: size[1],
+ x: -size[0] / 2,
+ y: -size[1] / 2,
+ fill: "rgb(19, 33, 92)",
+ radius: 5
+ },
+ draggable: true,
+ name: "root-keyshape"
+ });
+ group.addShape("text", {
+ attrs: {
+ text: `${cfg.ratio}%`,
+ fill: "rgba(255, 255, 255, 0.85)",
+ fontSize: 6,
+ x: 10 - size[0] / 2,
+ y: 3
+ },
+ draggable: true,
+ name: "ratio-shape"
+ });
+ group.addShape("text", {
+ attrs: {
+ text: `${cfg.label}`,
+ fill: "rgba(255, 255, 255, 0.85)",
+ fontSize: 9,
+ x: -6,
+ y: 0
+ },
+ draggable: true,
+ name: "label-shape"
+ });
+ group.addShape("line", {
+ attrs: {
+ x1: -6,
+ x2: 35,
+ y1: 2,
+ y2: 2,
+ stroke: "rgba(255, 255, 255, 0.85)",
+ lineWidth: 0.5
+ },
+ draggable: true,
+ name: "divider-shape"
+ });
+ group.addShape("text", {
+ attrs: {
+ text: `${cfg.subLabel}`,
+ fill: "rgba(255, 255, 255, 0.65)",
+ fontSize: 6,
+ x: -6,
+ y: 10
+ },
+ draggable: true,
+ name: "sublabel-shape"
+ });
+ return keyShape;
+ }
+});
+G6.registerNode("level1node", {
+ draw: (cfg: any, group: any) => {
+ const size = [60, 40];
+ const keyShape = group.addShape("rect", {
+ attrs: {
+ width: size[0],
+ height: size[1],
+ x: -size[0] / 2,
+ y: -size[1] / 2,
+ fill: "rgb(213, 225, 247)",
+ radius: 5
+ },
+ draggable: true,
+ name: "level1node-keyshape"
+ });
+ group.addShape("text", {
+ attrs: {
+ text: `${cfg.label}`,
+ fill: "rgba(19, 33, 92, 0.65)",
+ fontSize: 6,
+ x: 0,
+ y: -6,
+ textAlign: "center"
+ },
+ draggable: true,
+ name: "label-shape"
+ });
+ group.addShape("text", {
+ attrs: {
+ text: `${cfg.subLabel}`,
+ fill: "rgba(19, 33, 92, 0.65)",
+ fontSize: 8,
+ x: 0,
+ y: 6,
+ fontWeight: 800,
+ textAlign: "center"
+ },
+ draggable: true,
+ name: "sublabel-shape"
+ });
+ group.addShape("rect", {
+ attrs: {
+ x: -12,
+ y: 8,
+ width: 25,
+ height: 8,
+ radius: 4,
+ fill: cfg.increase ? "rgb(127, 193, 193)" : "rgb(220, 124, 125)"
+ },
+ draggable: true,
+ name: "ratio-box"
+ });
+ group.addShape("text", {
+ attrs: {
+ text: `${cfg.ratio}%`,
+ fill: "rgba(255, 255, 255, 0.85)",
+ fontSize: 6,
+ x: 0,
+ y: 9,
+ textAlign: "center",
+ textBaseline: "top"
+ },
+ draggable: true,
+ name: "ratio-shape"
+ });
+ // edge end
+ group.addShape("line", {
+ attrs: {
+ x1: -size[0] / 2,
+ x2: -size[0] / 2 + 6,
+ y1: 0,
+ y2: 0,
+ lineWidth: 1,
+ stroke: "rgb(19, 33, 92)"
+ }
+ });
+ group.addShape("circle", {
+ attrs: {
+ r: 2,
+ x: -size[0] / 2 + 6,
+ y: 0,
+ fill: "rgb(19, 33, 92)"
+ }
+ });
+ return keyShape;
+ },
+ update: undefined
+}, "rect");
+G6.registerNode("othernode", {
+ draw: (cfg: any, group: any) => {
+ const size = [100, 30];
+ const keyShape = group.addShape("rect", {
+ attrs: {
+ width: size[0],
+ height: size[1],
+ x: -size[0] / 2,
+ y: -size[1] / 2,
+ fill: "rgb(213, 225, 247)",
+ radius: 5
+ },
+ draggable: true,
+ name: "level1node-keyshape"
+ });
+ group.addShape("text", {
+ attrs: {
+ text: `${cfg.label}`,
+ fill: "rgba(19, 33, 92, 0.65)",
+ fontSize: 6,
+ x: 10 - size[0] / 2,
+ y: -2,
+ textAlign: "left"
+ },
+ draggable: true,
+ name: "label-shape"
+ });
+ group.addShape("text", {
+ attrs: {
+ text: `${cfg.subLabel}`,
+ fill: "rgba(19, 33, 92, 0.65)",
+ fontSize: 8,
+ fontWeight: 800,
+ x: 10 - size[0] / 2,
+ y: 8,
+ textAlign: "left"
+ },
+ draggable: true,
+ name: "sublabel-shape"
+ });
+ group.addShape("rect", {
+ attrs: {
+ x: 12,
+ y: -4,
+ width: 25,
+ height: 8,
+ radius: 4,
+ fill: cfg.increase ? "rgb(127, 193, 193)" : "rgb(220, 124, 125)"
+ },
+ draggable: true,
+ name: "ratio-box"
+ });
+ group.addShape("text", {
+ attrs: {
+ text: `${cfg.ratio}%`,
+ fill: "rgba(255, 255, 255, 0.85)",
+ fontSize: 6,
+ x: 18,
+ y: -3,
+ textAlign: "left",
+ textBaseline: "top"
+ },
+ draggable: true,
+ name: "ratio-shape"
+ });
+ if (cfg.operator) {
+ group.addShape("rect", {
+ attrs: {
+ x: -8,
+ y: 27,
+ width: 16,
+ height: 16,
+ lineWidth: 1,
+ stroke: "#aaa",
+ lineDash: [2, 1],
+ opacity: 0
+ },
+ name: "operator-box"
+ });
+ group.addShape("circle", {
+ attrs: {
+ r: 6,
+ x: 0,
+ y: 35,
+ fill: "rgba(240, 90, 109, 0.15)"
+ },
+ name: "operator-circle"
+ });
+ group.addShape("text", {
+ attrs: {
+ text: cfg.operator,
+ x: 0,
+ y: 34,
+ fontSize: 12,
+ fill: "rgba(240, 90, 109, 0.85)",
+ textAlign: "center",
+ textBaseline: "middle"
+ },
+ name: "operator-symbol"
+ });
+ }
+
+ // edge end
+ group.addShape("line", {
+ attrs: {
+ x1: -size[0] / 2,
+ x2: -size[0] / 2 + 6,
+ y1: 0,
+ y2: 0,
+ lineWidth: 1,
+ stroke: "rgb(19, 33, 92)"
+ }
+ });
+ group.addShape("circle", {
+ attrs: {
+ r: 2,
+ x: -size[0] / 2 + 6,
+ y: 0,
+ fill: "rgb(19, 33, 92)"
+ }
+ });
+ return keyShape;
+ },
+ update: undefined
+}, "rect");
+G6.registerEdge("round-poly", {
+ getControlPoints: (cfg: any) => {
+ const { startPoint, endPoint } = cfg;
+ return [
+ startPoint,
+ {
+ x: startPoint.x,
+ y: endPoint.y
+ },
+ endPoint
+ ];
+ }
+}, "polyline");
diff --git a/src/pages/welfareLedgerTable/index.tsx b/src/pages/welfareLedgerTable/index.tsx
index 8c6dec9..4aa6244 100644
--- a/src/pages/welfareLedgerTable/index.tsx
+++ b/src/pages/welfareLedgerTable/index.tsx
@@ -44,15 +44,15 @@ const Index: FunctionComponent = (props) => {
setPageInfo(pageInfo);
setDataSource(dataSource);
setColumns(_.map(columns, it => {
- if (it.dataIndex === "userName") {
+ if (it.dataIndex === "userName" || it.dataIndex === "workcode") {
return {
- ...it, width: 200, title: (
+ ...it, width: 140, title: (
- ), fixed: "left"
+ ), fixed: "left", ellipsis: true
};
}
return {
- ...it, width: 200, title: (
+ ...it, width: 140, ellipsis: true, title: (
)
};