新增页面

陈鑫涛
1 parent e2a4aa75
Showing 118 changed files with 82996 additions and 20 deletions
.umirc.ts
package.json
src/components/Charts/Bar/index.js
src/components/Charts/BrokenLine/index.js
src/components/Charts/ColorBlock/index.js
src/components/Charts/Columnar/index.js
src/components/Charts/ColumnarGroup/index.js
src/components/Charts/ColumnarStack/index.js
src/components/Charts/EqualColumnarStack/index.js
src/components/Charts/Gantt/Gantt.css
src/components/Charts/Gantt/MessageArea/Message.js
src/components/Charts/Gantt/MessageArea/MessageArea.css
src/components/Charts/Gantt/MessageArea/index.js
src/components/Charts/Gantt/index.js
src/components/Charts/Gauge/index.js
src/components/Charts/Pie/index.js
src/components/Charts/Pie/index.less
src/components/Charts/PieGroup/index.js
src/components/Charts/TimeLineGroup/index.js
src/components/Charts/TimelineChart/index.js
@@ -9,11 +9,40 @@ export default defineConfig({
       component: '@/routes/indexPage',
       routes: [
         { path: '/indexPage/CommonList' },
+        { path: '/indexPage/CommonListA' },
         { path: '/indexPage/CommonNewBill' },
         { path: '/indexPage/CommonBill' },
         { path: '/indexPage/CommonListEdit' },
         { path: '/indexPage/CommonClassify' },
-        { path: '/indexPage/eleknifemould'}
+        { path: '/indexPage/eleknifemould'},
+        { path: '/indexPage/elecustomer'},
+        { path: '/indexPage/CommonListTab'},
+        { path: '/indexPage/commonColumnList'},
+        { path: '/indexPage/commonListTree'},
+        { path: '/indexPage/commonListLeft'},
+        { path: '/indexPage/commonGatte'},
+        { path: '/indexPage/materialRequirementsPlanning'},
+        { path: '/indexPage/eleteststand'},
+        { path: '/indexPage/eleemployee'},
+        { path: '/indexPage/elematerials'},
+        { path: '/indexPage/eleproduct'},
+        { path: '/indexPage/syssystemsettings'},
+        { path: '/indexPage/elesupply'},
+        { path: '/indexPage/eleprocess'},
+        { path: '/indexPage/elecheckmodel'},
+        { path: '/indexPage/sischeckphase'},
+        { path: '/indexPage/sftlogininfo'},
+        { path: '/indexPage/siscommonstyle'},
+        { path: '/indexPage/sisproductclassify'},
+        { path: '/indexPage/commonCheckBill'},
+        { path: '/indexPage/workOrderNew'},
+        { path: '/indexPage/workOrderPack'},
+        { path: '/indexPage/workOrderPackTableTree'},
+        { path: '/indexPage/workOrderResearchTableTree'},
+        { path: '/indexPage/processCard'},
+        { path: '/indexPage/processCardPack'},
+        { path: '/indexPage/processCardPackTableTree'},
+        { path: '/indexPage/processCardPackTableTreeNew'},
       ],
     },
   ],
@@ -11,22 +11,27 @@
   "dependencies": {
     "@ant-design/compatible": "^1.1.2",
     "@ant-design/icons": "^5.6.1",
+    "@antv/g2": "^5.2.12",
     "@js-preview/docx": "^1.6.4",
     "@js-preview/excel": "^1.7.14",
     "antd": "^5.24.3",
     "antd-mobile": "2.3.4",
     "antd-v4": "npm:antd@4.24.16",
     "braft-editor": "^2.3.9",
+    "dhtmlx-gantt": "^9.0.6",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
+    "lodash-decorators": "^6.0.1",
     "moment": "^2.30.1",
     "react-dnd": "^14.0.5",
     "react-dnd-html5-backend": "^14.1.0",
+    "react-flow-renderer": "^10.3.17",
     "react-grid-layout": "^1.5.1",
     "react-highlight-words": "^0.21.0",
     "react-pdf": "^9.2.1",
     "react-resizable": "^3.0.5",
     "react-sortable-hoc": "^2.0.0",
+    "react-to-print": "^3.0.5",
     "umi": "^4.4.6"
   },
   "devDependencies": {
+import React, { PureComponent } from 'react';
+import { Chart } from '@antv/g2';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
+import equal from '../equal';
+
+class Bar extends PureComponent {
+  componentDidMount() {
+    this.renderChart(this.props.data);
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!equal(this.props, nextProps)) {
+      this.renderChart(nextProps.data);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.resize.cancel();
+  }
+
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (!this.node) {
+      return;
+    }
+    this.renderChart([]);
+  }
+
+  handleRef = (n) => {
+    this.node = n;
+  };
+
+  renderChart(data) {
+    if (this.node.offsetWidth === 0) {
+      return;
+    }
+    const {
+      xUnit = '', yUnit = '', height, style,
+    } = this.props;
+    const textMyStyle = {};
+    if (style !== undefined) {
+      if (style.color !== undefined) {
+        textMyStyle.fill = style.color;
+      }
+    }
+    if (!data || (data && data.length < 1)) return;
+    // clean
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.node.innerHTML = '';
+    const chart = new Chart({
+      container: this.node,
+      autoFit: true, /* 图标自适应 */
+      height,
+      padding: 'auto',
+    });
+    chart.axis('x', {
+      label: {
+        formatter: (val) => {
+          return `${val}${xUnit}`;
+        },
+        textStyle: textMyStyle,
+      },
+    });
+    chart.axis('y', {
+      label: {
+        formatter: (val) => {
+          return `${val}${yUnit}`;
+        },
+        textStyle: textMyStyle,
+      },
+    });
+    chart.data(data);
+    chart.tooltip({
+      showTitle: false,
+    });
+    chart.coord().transpose();
+    chart.interval().position('y*x').tooltip('y*x', (name, value) => {
+      return {
+        name: `${name}${xUnit}`,
+        value: `${value}${yUnit}`,
+      };
+    });
+    chart.render();
+    this.chart = chart;
+  }
+
+  render() {
+    return (
+      <div ref={this.handleRef} />
+    );
+  }
+}
+
+export default Bar;
+/* eslint-disable no-undef */
+import React, { PureComponent } from 'react';
+import { Chart } from '@antv/g2';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
+import equal from '../equal';
+
+class BrokenLine extends PureComponent {
+  componentDidMount() {
+    this.renderChart(this.props.data);
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!equal(this.props, nextProps)) {
+      this.renderChart(nextProps.data);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.resize.cancel();
+  }
+
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (!this.node) {
+      return;
+    }
+    this.renderChart([]);
+  }
+
+  handleRef = (n) => {
+    this.node = n;
+  };
+
+  renderChart(data) {
+    if (this.node.offsetWidth === 0) {
+      return;
+    }
+    const {
+      xUnit = '', yUnit = '', height, style,
+    } = this.props;
+    const textMyStyle = {};
+    if (style !== undefined) {
+      if (style.color !== undefined) {
+        textMyStyle.fill = style.color;
+      }
+    }
+    if (!data || (data && data.length < 1)) return;
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.node.innerHTML = '';
+    const chart = new Chart({
+      container: this.node,
+      autoFit: true, /* 图标自适应 */
+      height,
+      padding: 'auto',
+    });
+    chart.axis('x', {
+      label: {
+        formatter: (val) => {
+          return `${val}${xUnit}`;
+        },
+        textStyle: textMyStyle,
+      },
+    });
+    chart.axis('y', {
+      label: {
+        formatter: (val) => {
+          return `${val}${yUnit}`;
+        },
+        textStyle: textMyStyle,
+      },
+    });
+    chart.option('slider', {
+      start: 0.9,
+      end: 1,
+      trendCfg: {
+        isArea: false,
+      },
+    });
+    chart.data(data);
+    chart.tooltip({
+      showCrosshairs: true,
+      shared: true,
+    });
+    chart.line().position('x*y').color('type').tooltip('x*y*type', (name, value, type) => {
+      return {
+        title: `${name}${xUnit}`,
+        name: type,
+        value: `${value}${yUnit}`,
+      };
+    });
+    chart
+      .point()
+      .position('x*y')
+      .color('type')
+      .size(4)
+      .shape('circle')
+      .style({ stroke: '#fff', lineWidth: 1 });
+    chart.render();
+    this.chart = chart;
+  }
+
+  render() {
+    const { height } = this.props;
+    return (
+      <div style={{ height }}>
+        <div ref={this.handleRef} />
+      </div>
+    );
+  }
+}
+
+export default BrokenLine;
+/* eslint-disable no-undef */
+import React, { PureComponent } from 'react';
+
+// import G2 from '@antv/g2/build/g2';
+import { Chart } from '@antv/g2';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
+import equal from '../equal';
+
+class ColorBlock extends PureComponent {
+  componentDidMount() {
+    this.renderChart(this.props.data);
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!equal(this.props, nextProps)) {
+      this.renderChart(nextProps.data);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.resize.cancel();
+  }
+
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (!this.node) {
+      return;
+    }
+    this.renderChart([]);
+  }
+
+  handleRef = (n) => {
+    this.node = n;
+  };
+
+  renderChart(data) {
+    if (this.node.offsetWidth === 0) {
+      return;
+    }
+    if (this.chart) {
+      this.chart.destroy();
+    }
+
+    this.node.innerHTML = '';
+    const { day, sMachines, height } = this.props;
+
+    const source = data.map((arr) => {
+      return {
+        xValue: arr[0],
+        yValue: arr[1],
+        value: arr[2],
+      };
+    });
+
+    const chart = new Chart({
+      container: this.node,
+      autoFit: true,
+      height,
+    });
+
+    chart.data(source);
+
+    chart.scale('xValue', {
+      type: 'cat',
+      values: day,
+    });
+    chart.scale('yValue', {
+      type: 'cat',
+      values: sMachines,
+    });
+    chart.scale('value', {
+      nice: true,
+    });
+
+    chart.axis('xValue', {
+      tickLine: null,
+      grid: {
+        alignTick: false,
+        line: {
+          style: {
+            lineWidth: 1,
+            lineDash: null,
+            stroke: '#f0f0f0',
+          },
+        },
+      },
+    });
+
+    chart.axis('yValue', {
+      title: null,
+      grid: {
+        alignTick: false,
+        line: {
+          style: {
+            lineWidth: 1,
+            lineDash: null,
+            stroke: '#f0f0f0',
+          },
+        },
+      },
+    });
+
+    chart.tooltip({
+      showMarkers: false,
+    });
+
+    chart
+      .polygon()
+      .position('xValue*yValue')
+      .color('value', '#f6ffed-#389e0d-#135200')
+      .label('value', {
+        offset: -2,
+        style: {
+          fill: '#fff',
+          shadowBlur: 2,
+          shadowColor: 'rgba(0, 0, 0, .45)',
+        },
+      })
+      .style({
+        lineWidth: 1,
+        stroke: '#fff',
+      });
+
+    chart.interaction('element-active');
+
+    chart.render();
+    this.chart = chart;
+  }
+
+  render() {
+    const { height } = this.props;
+    return (
+      <div style={{ height }}>
+        <div ref={this.handleRef} />
+      </div>
+    );
+  }
+}
+
+export default ColorBlock;
+/* eslint-disable no-undef */
+import React, { PureComponent } from 'react';
+import { Chart } from '@antv/g2';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
+import equal from '../equal';
+
+class Columnar extends PureComponent {
+  componentDidMount() {
+    this.renderChart(this.props.data);
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!equal(this.props, nextProps)) {
+      this.renderChart(nextProps.data);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.resize.cancel();
+  }
+
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (!this.node) {
+      return;
+    }
+    this.renderChart([]);
+  }
+
+  handleRef = (n) => {
+    this.node = n;
+  };
+
+  renderChart(data) {
+    const {
+      xUnit = '', yUnit = '', height, style,
+    } = this.props;
+    const textMyStyle = {};
+    if (style !== undefined) {
+      if (style.color !== undefined) {
+        textMyStyle.fill = style.color;
+      }
+    }
+    if (!data || (data && data.length < 1)) return;
+    // clean
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.node.innerHTML = '';
+    const chart = new Chart({
+      container: this.node,
+      autoFit: true, /* 图标自适应 */
+      height,
+      padding: 'auto',
+    });
+    chart.axis('x', {
+      label: {
+        formatter: (val) => {
+          return `${val}${xUnit}`;
+        },
+        textStyle: textMyStyle,
+      },
+    });
+    chart.axis('y', {
+      label: {
+        formatter: (val) => {
+          return `${val}${yUnit}`;
+        },
+        textStyle: textMyStyle,
+      },
+    });
+    chart.data(data);
+    chart.tooltip({
+      showTitle: false,
+    });
+    chart.interval().position('x*y').tooltip('x*y', (name, value) => {
+      return {
+        name: `${name}${xUnit}`,
+        value: `${value}${yUnit}`,
+      };
+    });
+    chart.render();
+    this.chart = chart;
+  }
+
+  render() {
+    const { height } = this.props;
+    return (
+      <div style={{ height }}>
+        <div ref={this.handleRef} />
+      </div>
+    );
+  }
+}
+
+export default Columnar;
+/* eslint-disable no-undef */
+import React, { PureComponent } from 'react';
+import { Chart } from '@antv/g2';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
+import equal from '../equal';
+
+class ColumnarGroup extends PureComponent {
+  componentDidMount() {
+    this.renderChart(this.props.data);
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!equal(this.props, nextProps)) {
+      this.renderChart(nextProps.data);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.resize.cancel();
+  }
+
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (!this.node) {
+      return;
+    }
+    this.renderChart([]);
+  }
+
+  handleRef = (n) => {
+    this.node = n;
+  };
+
+  renderChart(data) {
+    const { xUnit = '', yUnit = '', height } = this.props;
+    if (!data || (data && data.length < 1)) return;
+    // clean
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.node.innerHTML = '';
+    const chart = new Chart({
+      container: this.node,
+      autoFit: true, /* 图标自适应s */
+      height,
+      padding: 'auto',
+    });
+    chart.axis('x', {
+      label: {
+        formatter: (val) => {
+          return `${val}${xUnit}`;
+        },
+      },
+    });
+    chart.axis('y', {
+      label: {
+        formatter: (val) => {
+          return `${val}${yUnit}`;
+        },
+      },
+    });
+    chart.data(data);
+    chart
+      .interval()
+      .position('x*y')
+      .color('type')
+      .adjust([{
+        type: 'dodge',
+        marginRatio: 1 / 32,
+      }])
+      .tooltip('x*y*type', (name, value, type) => {
+        return {
+          title: `${name}${xUnit}`,
+          name: type,
+          value: `${value}${yUnit}`,
+        };
+      });
+    chart.render();
+    this.chart = chart;
+  }
+
+  render() {
+    return (
+      <div ref={this.handleRef} />
+    );
+  }
+}
+
+export default ColumnarGroup;
+import React, { PureComponent } from 'react';
+import { Chart } from '@antv/g2';
+import DataSet from '@antv/data-set';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
+import equal from '../equal';
+
+class ColumnarStack extends PureComponent {
+  componentDidMount() {
+    this.renderChart(this.props.data);
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!equal(this.props, nextProps)) {
+      this.renderChart(nextProps.data);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.resize.cancel();
+  }
+
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (!this.node) {
+      return;
+    }
+    this.renderChart([]);
+  }
+
+  handleRef = (n) => {
+    this.node = n;
+  };
+
+  renderChart(data) {
+    const { xUnit = '', yUnit = '', height } = this.props;
+    if (!data || (data && data.length < 1)) return;
+    // clean
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.node.innerHTML = '';
+    const chart = new Chart({
+      container: this.node,
+      autoFit: true, /* 图标自适应 */
+      height,
+      padding: 'auto',
+    });
+    // 计算每个柱子的占比
+    const ds = new DataSet();
+    const dv = ds.createView().source(data).transform({
+      type: 'percent',
+      field: 'y', // 统计销量
+      dimension: 'type', // 每年的占比
+      groupBy: ['x'], // 以不同产品类别为分组
+      as: 'percent',
+    });
+    chart.data(dv.rows, {
+      percent: {
+        min: 0,
+        formatter: (val) => {
+          return `${(val * 100).toFixed(2)}${yUnit}`;
+        },
+      },
+    });
+    chart.axis('x', {
+      label: {
+        formatter: (val) => {
+          return `${val}${xUnit}`;
+        },
+      },
+    });
+    chart.interval().adjust('stack').position('x*percent').color('type')
+      .tooltip('x*y*type', (name, value, type) => {
+        return {
+          title: `${name}${xUnit}`,
+          name: type,
+          value: `${value}`,
+        };
+      });
+    chart.render();
+    this.chart = chart;
+  }
+
+  render() {
+    return (
+      <div ref={this.handleRef} />
+    );
+  }
+}
+
+export default ColumnarStack;
+import React, { PureComponent } from 'react';
+import { Chart } from '@antv/g2';
+import DataSet from '@antv/data-set';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
+import equal from '../equal';
+
+class EqualColumnarStack extends PureComponent {
+  componentDidMount() {
+    this.renderChart(this.props);
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!equal(this.props, nextProps)) {
+      this.renderChart(nextProps);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.resize.cancel();
+  }
+
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (!this.node) {
+      return;
+    }
+    this.renderChart(this.props);
+  }
+
+  handleRef = (n) => {
+    this.node = n;
+  };
+
+  renderChart(props) {
+    const {
+      fields, yName: value, xName: currkey, onChartClick, chartName, height,
+    } = props;
+    const ds = new DataSet();
+    const dv = ds.createView().source(props.data);
+    dv.transform({
+      type: 'fold',
+      fields,
+      key: currkey,
+      value,
+    });
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.node.innerHTML = '';
+    const chart = new Chart({
+      container: this.node,
+      autoFit: true,
+      height,
+    });
+    chart.data(dv.rows);
+    chart.axis(currkey, {
+      label: {
+        autoHide: false, // 关闭label默认的自动隐藏
+        autoEllipsis: false, // 关闭lable自动省略
+        autoRotate: true, // 关闭默认的label超长自动旋转 默认时右下45度旋转
+        formatter: (val) => {
+          return `${val}`;
+        },
+      },
+    });
+    chart.interval().adjust('stack')
+      .position(`${currkey}*${value}`)
+      .color('name');
+    /*  .active(true)
+      .tooltip(false); */
+    chart.on('interval:dblclick', (ev) => {
+      const cdata = ev.data;
+      if (cdata) {
+        const { data } = cdata;
+        onChartClick(chartName, data);
+      }
+    });
+    chart.render();
+    this.chart = chart;
+  }
+  render() {
+    return (
+      <div ref={this.handleRef} />
+    );
+  }
+}
+
+export default EqualColumnarStack;
+.gantt-container {
+  height: 100%;
+}
+import React, { Component } from 'react';
+
+class MessageArea extends Component {
+  render() {
+    const messages = this.props.messages.map(({ message }) => {
+      return <li key={Math.random()}>{message}</li>;
+    });
+
+    return (
+      <div className="message-area">
+        <h3>Messages:</h3>
+        <ul>
+          {messages}
+        </ul>
+      </div>
+    );
+  }
+}
+
+MessageArea.defaultProps = {
+  messages: [],
+};
+
+export default MessageArea;
+.message-area {
+  background: #ebebeb;
+  height: 200px;
+  overflow: auto;
+  padding: 10px;
+  box-sizing:border-box;
+}
+
+.message-area ul{
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.message-area li:before {
+  content: "\003e";
+  padding-right: 10px;
+}
+import MessageArea from './MessageArea';
+import './MessageArea.css';
+
+export default MessageArea;
+import React, { Component } from 'react';
+import { gantt } from 'dhtmlx-gantt';
+import { DoubleRightOutlined } from '@ant-design/icons';
+import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
+import './Gantt.css';
+
+/* eslint-disable */
+class Gantt extends Component {
+
+  state = { expanded: true };
+  tableHeight = 60;
+
+  componentDidMount() {
+    gantt.plugins({
+      tooltip: true, // 鼠标划过任务是否显示明细
+      // auto_scheduling: true,//根据任务之间的关系自动安排任务
+      // multiselect: true, //为任务激活多任务选择
+    });
+    gantt.config.xml_date = '%Y-%m-%d %H:%i'; /* 时间格式 年月日 时分 */
+    gantt.config.reorder_grid_columns = true; /* 左侧列可拖动 */
+    gantt.config.grid_elastic_columns = true;
+    gantt.config.drag_mode = { ignore: 'ignore'};
+    gantt.config.scale_height = this.tableHeight;
+    gantt.i18n.setLocale('cn');
+    // gantt.config.readonly = true;// 只读模式的甘特图
+    const { tasks } = this.props;
+    this.setTemplate();
+    gantt.init(this.ganttContainer);
+    this.initGanttDataProcessor();
+    gantt.parse(tasks);
+  }
+
+
+  shouldComponentUpdate(nextProps, nextState) {
+    // const { tasks } = nextProps;
+    // return tasks !== undefined;
+    return this.props.zoom !== nextProps.zoom || this.state.expanded !== nextState.expanded;
+  }
+  componentDidUpdate() {
+    gantt.clearAll();
+    const { tasks } = this.props;
+    this.setTemplate();
+    gantt.init(this.ganttContainer);
+    this.initGanttDataProcessor();
+    gantt.parse(tasks);
+  }
+  componentWillUnmount() {
+    if (this.dataProcessor) {
+      this.dataProcessor.destructor();
+      this.dataProcessor = null;
+    }
+  }
+  setZoom = (value) => {
+    const scale = value.scale !== undefined ? value.scale : 'Minutes';
+    const step = value.step !== undefined ? value.step : 10;
+    switch (scale) {
+      case 'Minutes':
+        gantt.config.duration_unit = 'minute';
+        gantt.config.scale_unit = 'day';
+        gantt.config.date_scale = '%Y-%m-%d';
+        gantt.setWorkTime({ hours: ['00:30-03:30'] });
+        gantt.config.scale_height = 60;
+        gantt.config.min_column_width = 40;
+        gantt.config.subscales = [
+          { unit: 'minute', step, date: '%H:%i' },
+        ];
+        break;
+      case 'Hours':
+        gantt.config.scale_unit = 'day';
+        gantt.config.date_scale = '%M %d';
+
+        gantt.config.scale_height = 60;
+        gantt.config.min_column_width = 30;
+        gantt.config.subscales = [
+          { unit: 'hour', step, date: '%H' },
+        ];
+        break;
+      case 'Days':
+        gantt.config.min_column_width = 70;
+        gantt.config.scale_unit = 'week';
+        gantt.config.date_scale = '%Y-%m-%d';
+        gantt.config.subscales = [
+          { unit: 'day', step, date: '%M %d' },
+        ];
+        gantt.config.scale_height = 60;
+        break;
+      case 'Months':
+        gantt.config.min_column_width = 70;
+        gantt.config.scale_unit = 'month';
+        gantt.config.date_scale = '%F';
+        gantt.config.scale_height = 60;
+        gantt.config.subscales = [
+          { unit: 'week', step, date: '#%W' },
+        ];
+        break;
+      default:
+        break;
+    }
+  }
+  initGanttDataProcessor =() => {
+    // eslint-disable-next-line prefer-destructuring
+    const onDataUpdated = this.props.onDataUpdated;
+    if (this.dataProcessor) {
+      this.dataProcessor.destructor();
+      this.dataProcessor = null;
+    }
+    this.dataProcessor = gantt.createDataProcessor((type, action, item, id) => {
+      return new Promise((resolve) => {
+        if (onDataUpdated) {
+          onDataUpdated(type, action, item, id);
+        }
+
+        // if onDataUpdated changes returns a permanent id of the created item, you can return it from here so dhtmlxGantt could apply it
+        // resolve({id: databaseId});
+        return resolve();
+      });
+    });
+  }
+
+  setTemplate = () => {
+    const { tasks } = this.props;
+    if (Array.isArray(tasks?.columns)) {
+      gantt.config.columns = tasks?.columns;
+    }
+    gantt.config.show_grid = this.state.expanded;
+    gantt.templates.tooltip_text = function (start, end, task) {
+      return (
+        '<b>标题:</b> ' +
+        task.text +
+        '<br/><span>开始:</span> ' +
+        gantt.templates.tooltip_date_format(start) +
+        '<br/><span>结束:</span> ' +
+        gantt.templates.tooltip_date_format(end) +
+        '<br/><span>进度:</span> ' +
+        Math.round(task.progress * 100) +
+        '%'
+      );
+    };
+  }
+
+  render() {
+    const { zoom } = this.props;
+    this.setZoom(zoom);
+    return (
+      <div style={{ position: 'relative', height: '100%' }}>
+        <DoubleRightOutlined
+          style={{
+            position: 'absolute',
+            zIndex: 1,
+            top: this.state.expanded ? this.tableHeight / 2 : this.tableHeight / 4,
+            transform: 'translate(50%, -50%)',
+            opacity: 0.5,
+          }}
+          rotate={this.state.expanded ? 180 : 0}
+          onClick={() => {
+            this.setState({ expanded: !this.state.expanded });
+          }}
+        />
+        <div
+          ref={(input) => { this.ganttContainer = input; }}
+          style={{ width: '100%', height: '100%' }}
+        />
+      </div>
+    );
+  }
+}
+export default Gantt;
+import React, { PureComponent } from 'react';
+import G2 from '@antv/g2';
+import Bind from 'lodash-decorators/bind';
+import Debounce from 'lodash-decorators/debounce';
+import equal from '../equal';
+
+const { Shape } = G2;
+
+const primaryColor = '#2F9CFF';
+const backgroundColor = '#F0F2F5';
+
+/* eslint no-underscore-dangle: 0 */
+class Gauge extends PureComponent {
+  componentDidMount() {
+    setTimeout(() => {
+      this.renderChart();
+    }, 10);
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!equal(this.props, nextProps)) {
+      setTimeout(() => {
+        this.renderChart(nextProps);
+      }, 10);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+    // if (this.chart) {
+    //   console.log('data', this.chart);
+    //   this.chart.destroy();
+    // }
+    this.resize.cancel();
+  }
+
+  @Bind()
+  @Debounce(200)
+  resize() {
+    if (!this.node) {
+      return;
+    }
+    this.renderChart([]);
+  }
+
+  handleRef = (n) => {
+    this.node = n;
+  };
+
+  initChart(nextProps) {
+    const { xUnit, color = primaryColor } = nextProps || this.props;
+
+    Shape.registShape('point', 'dashBoard', {
+      drawShape(cfg, group) {
+        const originPoint = cfg.points[0];
+        const point = this.parsePoint({ x: originPoint.x, y: 0.4 });
+
+        const center = this.parsePoint({
+          x: 0,
+          y: 0,
+        });
+
+        const shape = group.addShape('polygon', {
+          attrs: {
+            points: [
+              [center.x, center.y],
+              [point.x + 8, point.y],
+              [point.x + 8, point.y - 2],
+              [center.x, center.y - 2],
+            ],
+            radius: 2,
+            lineWidth: 2,
+            arrow: false,
+            fill: color,
+          },
+        });
+
+        group.addShape('Marker', {
+          attrs: {
+            symbol: 'circle',
+            lineWidth: 2,
+            fill: color,
+            radius: 8,
+            x: center.x,
+            y: center.y,
+          },
+        });
+        group.addShape('Marker', {
+          attrs: {
+            symbol: 'circle',
+            lineWidth: 2,
+            fill: '#fff',
+            radius: 5,
+            x: center.x,
+            y: center.y,
+          },
+        });
+
+        const { origin } = cfg;
+        group.addShape('text', {
+          attrs: {
+            x: center.x,
+            y: center.y + 80,
+            text: `${origin._origin.value}%`,
+            textAlign: 'center',
+            fontSize: 24,
+            fill: 'rgba(0, 0, 0, 0.85)',
+          },
+        });
+        group.addShape('text', {
+          attrs: {
+            x: center.x,
+            y: center.y + 45,
+            text: xUnit,
+            textAlign: 'center',
+            fontSize: 14,
+            fill: 'rgba(0, 0, 0, 0.43)',
+          },
+        });
+
+        return shape;
+      },
+    });
+  }
+
+  renderChart(nextProps) {
+    if (this.node.offsetWidth === 0) {
+      return;
+    }
+    const {
+      height, color = primaryColor, bgColor = backgroundColor, xUnit,
+    } = nextProps || this.props;
+    const data = [{ name: xUnit, value: this.props.data }];
+
+    if (this.chart) {
+      this.chart.clear();
+    }
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    if (this.node) {
+      this.node.innerHTML = '';
+    }
+
+    this.initChart(nextProps);
+    const chart = new G2.Chart({
+      container: this.node,
+      forceFit: true,
+      height,
+      animate: false,
+      plotCfg: {
+        margin: [10, 10, 30, 10],
+      },
+    });
+
+    chart.source(data);
+
+    chart.tooltip(false);
+
+    chart.coord('gauge', {
+      startAngle: -1.2 * Math.PI,
+      endAngle: 0.20 * Math.PI,
+    });
+    chart.col('value', {
+      type: 'linear',
+      nice: true,
+      min: 0,
+      max: 100,
+      tickCount: 6,
+    });
+    chart.axis('value', {
+      subTick: false,
+      tickLine: {
+        stroke: color,
+        lineWidth: 2,
+        value: -14,
+      },
+      labelOffset: -12,
+      formatter: (val) => {
+        switch (parseInt(val, 10)) {
+          case 20:
+            return '差';
+          case 40:
+            return '中';
+          case 60:
+            return '良';
+          case 80:
+            return '优';
+          default:
+            return '';
+        }
+      },
+    });
+    chart.point().position('value').shape('dashBoard');
+    draw(data);
+
+    /* eslint no-shadow: 0 */
+    function draw(data) {
+      const val = data[0].value;
+      const lineWidth = 12;
+      chart.guide().clear();
+
+      chart.guide().arc(() => {
+        return [0, 0.95];
+      }, () => {
+        return [val, 0.95];
+      }, {
+        stroke: color,
+        lineWidth,
+      });
+
+      chart.guide().arc(() => {
+        return [val, 0.95];
+      }, (arg) => {
+        return [arg.max, 0.95];
+      }, {
+        stroke: bgColor,
+        lineWidth,
+      });
+
+      chart.changeData(data);
+    }
+
+    this.chart = chart;
+  }
+
+  render() {
+    return (
+      <div ref={this.handleRef} />
+    );
+  }
+}
+
+export default Gauge;
+/* eslint-disable no-undef, jsx-a11y/no-noninteractive-element-interactions */
+import React, { Component } from 'react';
+import G2 from '@antv/g2';
+import { Divider } from 'antd';
+import classNames from 'classnames';
+import ReactFitText from 'react-fittext';
+import Debounce from 'lodash-decorators/debounce';
+import Bind from 'lodash-decorators/bind';
+import equal from '../equal';
+import styles from './index.less';
+import Charts from '../index.js';
+
+/* eslint react/no-danger:0 */
+class Pie extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      legendData: [],
+      legendBlock: true,
+    };
+  }
+
+  componentDidMount() {
+    this.renderChart();
+    this.resize();
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!equal(this.props, nextProps)) {
+      this.renderChart(nextProps.data);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    this.resize.cancel();
+  }
+
+  @Bind()
+  @Debounce(300)
+  resize() {
+    const { hasLegend } = this.props;
+    if (!hasLegend || !this.root) {
+      window.removeEventListener('resize', this.resize);
+      return;
+    }
+    if (this.root.parentNode.clientWidth <= 380) {
+      if (!this.state.legendBlock) {
+        this.setState({
+          legendBlock: true,
+        }, () => {
+          this.renderChart();
+        });
+      }
+    } else if (this.state.legendBlock) {
+      this.setState({
+        legendBlock: false,
+      }, () => {
+        this.renderChart();
+      });
+    }
+  }
+
+  handleRef = (n) => {
+    this.node = n;
+  };
+
+  handleRoot = (n) => {
+    this.root = n;
+  };
+
+  handleLegendClick = (item, i) => {
+    const newItem = item;
+    newItem.checked = !newItem.checked;
+
+    const { legendData } = this.state;
+    legendData[i] = newItem;
+
+    if (this.chart) {
+      const filterItem = legendData.filter(l => l.checked).map(l => l.x);
+      this.chart.filter('x', filterItem);
+      this.chart.repaint();
+    }
+
+    this.setState({
+      legendData,
+    });
+  };
+
+  renderChart(d) {
+    if (this.node.offsetWidth === 0) {
+      return;
+    }
+    let data = d || this.props.data;
+
+    const {
+      height = 0,
+      hasLegend,
+      fit = true,
+      margin = [12, 0, 12, 0], percent, color,
+      inner = 0.75,
+      animate = true,
+      colors,
+      lineWidth = 0,
+    } = this.props;
+
+    const defaultColors = colors;
+
+    let selected = this.props.selected || true;
+    let tooltip = this.props.tooltips || true;
+
+    let formatColor;
+    if (percent) {
+      selected = false;
+      tooltip = false;
+      formatColor = (value) => {
+        if (value === '占比') {
+          return color || 'rgba(24, 144, 255, 0.85)';
+        } else {
+          return '#F0F2F5';
+        }
+      };
+
+      /* eslint no-param-reassign: */
+      data = [
+        {
+          x: '占比',
+          y: parseFloat(percent),
+        },
+        {
+          x: '反比',
+          y: 100 - parseFloat(percent),
+        },
+      ];
+    }
+
+    if (!data || (data && data.length < 1)) {
+      return;
+    }
+
+    // clean
+    this.node.innerHTML = '';
+
+    const { Stat } = G2;
+
+    const chart = new G2.Chart({
+      container: this.node,
+      forceFit: fit,
+      height,
+      plotCfg: {
+        margin,
+      },
+      animate,
+    });
+
+    if (!tooltip) {
+      chart.tooltip(false);
+    } else {
+      chart.tooltip({
+        title: null,
+      });
+    }
+
+    chart.axis(false);
+    chart.legend(false);
+    chart.source(data, {
+      x: {
+        type: 'cat',
+        range: [0, 1],
+      },
+      y: {
+        min: 0,
+      },
+    });
+
+    chart.coord('theta', {
+      inner,
+    });
+    // chart.changeSize(180, 216);// 设置图标的高度
+    chart
+      .intervalStack()
+      .position(Stat.summary.percent('y'))
+      .style({ lineWidth, stroke: '#fff' })
+      .color('x', percent ? formatColor : defaultColors)
+      .selected(selected);
+
+    chart.render();
+
+    this.chart = chart;
+
+    let legendData = [];
+    if (hasLegend) {
+      const geom = chart.getGeoms()[0]; // 获取所有的图形
+      const items = geom.getData(); // 获取图形对应的数据
+      legendData = items.map((item) => {
+        /* eslint no-underscore-dangle:0 */
+        const origin = item._origin;
+        origin.color = item.color;
+        origin.checked = true;
+        return origin;
+      });
+    }
+
+    this.setState({
+      legendData,
+    });
+  }
+
+  render() {
+    const {
+      valueFormat, subTitle, hasLegend, className, style, data = [],
+    } = this.props;
+    let { projectName } = this.props; /* 项目名称 */
+    projectName = projectName === undefined || projectName === null ? '' : projectName;
+    const { yuan } = Charts;
+    // const total = hasLegend ? yuan(data.reduce((pre, now) => now.y + pre, 0)) : this.props.total;
+    const total = hasLegend ? data.reduce((pre, now) => now.y + pre, 0).toFixed(2) : this.props.total; /* 保留两位小数 */
+    const { legendData, legendBlock } = this.state;
+    const pieClassName = classNames(styles.pie, className, {
+      [styles.hasLegend]: !!hasLegend,
+      [styles.legendBlock]: legendBlock,
+    });
+    return (
+      <div ref={this.handleRoot} className={pieClassName} style={style}>
+        <ReactFitText maxFontSize={25}>
+          <div className={styles.chart}>
+            <div ref={this.handleRef} style={{ fontSize: 0 }} />
+            {
+              (subTitle || total) && (
+                <div className={styles.total}>
+                  {subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
+                  {
+                    // eslint-disable-next-line
+                    total && <div className="pie-stat" dangerouslySetInnerHTML={{ __html: total }} />
+                  }
+                </div>
+              )
+            }
+          </div>
+        </ReactFitText>
+
+        {
+          hasLegend && (
+            <ul
+              className={styles.legend}
+              // className={location.pathname.indexOf('commonAuto') > -1 ? styles.legendBigScreen : styles.legend}
+              style={location.pathname.indexOf('indexMobile') > -1 ? { width: '48%' } : { width: '48%' }}
+            >
+              {
+                legendData.map((item, i) => (
+                  <li key={item.x} onClick={() => this.handleLegendClick(item, i)}>
+                    <span className={styles.dot} style={{ backgroundColor: !item.checked ? '#aaa' : item.color }} />
+                    <span className={`${styles.legendTitle} ${projectName} ${location.pathname.indexOf('indexMobile') > -1 ? styles.spanStyle : ''}`}>{item.x}</span>
+                    <Divider type="vertical" />
+                    {location.pathname.indexOf('indexMobile') > -1 ? '' : ''
+                    // <span className={`${styles.percent} ${projectName}`}>{`${(item['..percent'] * 100).toFixed(2)}%`}</span>
+                    }
+                    <span
+                      className={`${styles.value} ${projectName}`}
+                      dangerouslySetInnerHTML={{
+                        __html: valueFormat ? yuan(item.y) : item.y,
+                      }}
+                    />
+                  </li>
+                ))
+              }
+            </ul>
+          )
+        }
+      </div>
+    );
+  }
+}
+
+export default Pie;
+@import "~antd-v4/lib/style/themes/default.less";
+
+.pie {
+  position: relative;
+  .chart {
+    position: relative;
+  }
+  &.hasLegend .chart {
+    width: ~"calc(47%)"!important;
+  }
+  .legend {
+    position: absolute!important;
+    right: 0;
+    min-width: 48%;
+    top: 50%;
+    transform: translateY(-50%)!important;
+    margin: 0 0 0 10px;
+    list-style: none;
+    padding: 0;
+    li {
+      width: 100%;
+      cursor: pointer;
+      margin-bottom: 0;
+      height: 16px;
+      line-height: 16px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .legendBigScreen { /* 大屏纵向排列 */
+    position: relative!important;
+    right: 0;
+    min-width: 48%;
+    top: 50%;
+    transform: translateY(-50%)!important;
+    margin: 0;
+    list-style: none;
+    padding: 0;
+    li {
+      width: 100%;
+      cursor: pointer;
+      margin-bottom: 0;
+      height: 22px;
+      line-height: 22px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .dot {
+    border-radius: 8px;
+    display: inline-block;
+    margin-right: 8px;
+    position: relative;
+    top: -1px;
+    height: 8px;
+    width: 8px;
+  }
+  .line {
+    background-color: @border-color-split;
+    display: inline-block;
+    margin-right: 8px;
+    width: 1px;
+    height: 16px;
+  }
+  .legendTitle {
+    color: @text-color;
+  }
+  .spanStyle{
+    width: 50%;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .percent {
+    color: @text-color-secondary;
+  }
+  .value {
+    position: absolute;
+    right: 0;
+  }
+  .title {
+    margin-bottom: 8px;
+  }
+  .total {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    text-align: center;
+    height: 62px;
+    transform: translate(-50%, -50%);
+    & > div {
+      font-size: 24px;
+    }
+    & > h4 {
+      color: @text-color-secondary;
+      font-size: 14px;
+      line-height: 22px;
+      height: 22px;
+      margin-bottom: 8px;
+      font-weight: normal;
+    }
+    & > p {
+      color: @heading-color;
+      display: block;
+      font-size: 1.2em;
+      height: 32px;
+      line-height: 32px;
+      white-space: nowrap;
+    }
+  }
+}
+
+.legendBlock {
+  &.hasLegend .chart {
+    width: 100%;
+    margin: 0 0 32px 0;
+  }
+  .legend {
+    position: relative;
+    transform: none;
+  }
+}
+import React, { Component } from 'react';
+import { Row, Col } from 'antd';
+import { getTheme } from '@antv/g2';
+import Pie from '../Pie';
+
+class PieGroup extends Component {
+  render() {
+    const { data, height } = this.props;
+    const column = 24 / data.length;
+    const { colors10: colors } = getTheme();
+    return (
+      <Row gutter={4}>
+        {
+          data.map((child, i) => {
+            const { sId } = child;
+            child.height = height;
+            child.color = colors[i];
+            return (
+              <Col span={column} key={sId}>
+                <Pie {...child} />
+              </Col>
+            );
+          })
+        }
+      </Row>
+    );
+  }
+}
+
+export default PieGroup;
+
+/* eslint-disable object-curly-newline */
+import React, { Component } from 'react';
+import { Row, Col, Tabs } from 'antd';
+import TimeLineChart from '../TimelineChart';
+import NumberInfo from '../../NumberInfo';
+import Pie from '../Pie';
+import styles from '../index.less';
+import * as utils from '../../../utils/utils';
+
+const { TabPane } = Tabs;
+
+class TimeLineGroup extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      offlineCard: styles.offlineCard,
+      tabGroup: styles.tabGroup,
+      currentTabKey: utils.isNotEmptyArr(props.data) ? props.data[0].x : '',
+    };
+  }
+
+  handleTabChange = (key) => {
+    this.setState({
+      currentTabKey: key,
+    });
+  };
+
+  render() {
+    const { offlineCard, currentTabKey, tabGroup } = this.state;
+    const { data, titleMap, subTitle, yUnit } = this.props;
+    const TabGroup = ({ tabData, currentTabKey: currentKey }) => (
+      <Row gutter={8} className={tabGroup}>
+        <Col span={12}>
+          <NumberInfo
+            title={tabData.x}
+            subTitle={subTitle}
+            gap={2}
+            total={`${tabData.y * 100}%`}
+            theme={(currentKey !== tabData.x) && 'light'}
+          />
+        </Col>
+        <Col span={12} style={{ paddingTop: 36 }}>
+          <Pie
+            animate={false}
+            color={(currentKey !== tabData.x) && '#BDE4FF'}
+            inner={0.55}
+            tooltip={false}
+            margin={[8, 0, 0, 0]}
+            percent={tabData.y * 100}
+            height={46}
+          />
+        </Col>
+      </Row>
+    );
+    return (
+      <Tabs
+        className={offlineCard}
+        activeKey={currentTabKey}
+        onChange={this.handleTabChange}
+      >
+        {
+          data.map(item => (
+            <TabPane
+              tab={<TabGroup tabData={item} currentTabKey={currentTabKey} />}
+              key={item.x}
+            >
+              <TimeLineChart
+                data={item.child}
+                titleMap={titleMap}
+                yUnit={yUnit}
+                height={this.props.height}
+              />
+            </TabPane>))
+        }
+      </Tabs>
+    );
+  }
+}
+
+export default TimeLineGroup;
+
+import React, { Component } from 'react';
+import G2 from 'g2';
+import Slider from 'g2-plugin-slider';
+import styles from './index.less';
+
+class TimelineChart extends Component {
+  componentDidMount() {
+    this.renderChart(this.props.data);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.data !== this.props.data) {
+      this.renderChart(nextProps.data);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    if (this.slider) {
+      this.slider.destroy();
+    }
+  }
+
+  sliderId = `timeline-chart-slider-${Math.random() * 1000}`;
+  handleRef = (n) => {
+    this.node = n;
+  };
+
+  renderChart(data) {
+    const {
+      height = 400, margin = [60, 20, 40, 70], titleMap, borderWidth = 2, yUnit = '',
+    } = this.props;
+    if (!data || (data && data.length < 1)) {
+      return;
+    }
+
+    // clean
+    if (this.sliderId) {
+    // eslint-disable-next-line no-undef
+      document.getElementById(this.sliderId).innerHTML = '';
+    }
+    if (this.chart) {
+      this.chart.destroy();
+    }
+    if (this.slider) {
+      this.slider.destroy();
+    }
+    this.node.innerHTML = '';
+    const chart = new G2.Chart({
+      container: this.node,
+      forceFit: true,
+      height,
+      plotCfg: {
+        margin,
+      },
+    });
+
+    chart.axis('x', {
+      title: false,
+    });
+    chart.axis('y1', {
+      title: false,
+    });
+    chart.axis('y2', false);
+
+    chart.legend({
+      mode: false,
+      position: 'top',
+      marker: 'square',
+    });
+
+    let max;
+    if (data[0] && data[0].y1 && data[0].y2) {
+      max = Math.max(
+        data.sort((a, b) => b.y1 - a.y1)[0].y1,
+        data.sort((a, b) => b.y2 - a.y2)[0].y2,
+      );
+    }
+
+    chart.source(data, {
+      x: {
+        type: 'timeCat',
+        tickCount: 20,
+        mask: 'mm-dd',
+        range: [0, 1],
+      },
+      y1: {
+        alias: titleMap.y1,
+        max,
+        min: 0,
+        formatter: (val) => {
+          return `${val}${yUnit}`;
+        },
+      },
+      y2: {
+        alias: titleMap.y2,
+        max,
+        min: 0,
+        formatter: (val) => {
+          return `${val}${yUnit}`;
+        },
+      },
+    });
+
+    chart.line().position('x*y1').color('#1890FF').size(borderWidth);
+    chart.line().position('x*y2').color('#2FC25B').size(borderWidth);
+
+    this.chart = chart;
+
+    /* eslint new-cap:0 */
+    const slider = new Slider({
+      domId: this.sliderId,
+      height: 26,
+      xDim: 'x',
+      yDim: 'y1',
+      charts: [chart],
+    });
+    slider.render();
+
+    this.slider = slider;
+  }
+
+  render() {
+    const { height, title } = this.props;
+    return (
+      <div className={styles.timelineChart} style={{ height: height + 28 }}>
+        <div>
+          { title && <h4>{title}</h4>}
+          <div ref={this.handleRef} />
+          <div id={this.sliderId} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default TimelineChart;
+.timelineChart {
+  background: #fff;
+}
+/* eslint-disable object-curly-newline,no-return-assign */
+import React, { PureComponent } from 'react';
+import styles from './index.less';
+
+class WaterWave extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      radio: 1,
+      waterWave: styles.waterWave,
+      waterWaveCanvasWrapper: styles.waterWaveCanvasWrapper,
+      text: styles.text,
+    };
+  }
+
+  componentDidMount() {
+    this.renderChart();
+    this.resize();
+    window.addEventListener('resize', this.resize);
+  }
+
+  componentWillUnmount() {
+    cancelAnimationFrame(this.timer);
+    if (this.node) {
+      this.node.innerHTML = '';
+    }
+    window.removeEventListener('resize', this.resize);
+  }
+
+  resize = () => {
+    const { height } = this.props;
+    const { offsetWidth } = this.root.parentNode;
+    this.setState({
+      radio: offsetWidth < height ? offsetWidth / height : 1,
+    });
+  };
+
+  renderChart() {
+    const { color = '#1890FF' } = this.props;
+    const data = (this.props.data / 100);
+    // const self = this;
+
+    if (!this.node || !data) {
+      return;
+    }
+    if (this.timer) {
+      cancelAnimationFrame(this.timer);
+      if (this.node) {
+        this.node.innerHTML = '';
+      }
+    }
+
+    const canvas = this.node;
+    const ctx = canvas.getContext('2d');
+
+    const canvasWidth = canvas.width;
+    const canvasHeight = canvas.height;
+    const radius = canvasWidth / 2;
+    const lineWidth = 2;
+    const cR = radius - (lineWidth);
+
+    ctx.beginPath();
+    ctx.lineWidth = lineWidth * 2;
+
+    const axisLength = canvasWidth - (lineWidth);
+    const unit = axisLength / 8;
+    const range = 0.2; // 振幅
+    let currRange = range;
+    const xOffset = lineWidth;
+    let sp = 0; // 周期偏移量
+    let currData = 0;
+    const waveupsp = 0.005; // 水波上涨速度
+
+    let arcStack = [];
+    const bR = radius - (lineWidth);
+    const circleOffset = -(Math.PI / 2);
+    let circleLock = true;
+
+    for (let i = circleOffset; i < circleOffset + (2 * Math.PI); i += 1 / (8 * Math.PI)) {
+      arcStack.push([
+        radius + (bR * Math.cos(i)),
+        radius + (bR * Math.sin(i)),
+      ]);
+    }
+
+    const cStartPoint = arcStack.shift();
+    ctx.strokeStyle = color;
+    ctx.moveTo(cStartPoint[0], cStartPoint[1]);
+
+    function drawSin() {
+      ctx.beginPath();
+      ctx.save();
+
+      const sinStack = [];
+      for (let i = xOffset; i <= xOffset + axisLength; i += Math.ceil(20 / axisLength)) {
+        const x = sp + ((xOffset + i) / unit);
+        const y = Math.sin(x) * currRange;
+        const dx = i;
+        const dy = ((2 * cR * (1 - currData)) + (radius - cR)) - (unit * y);
+        ctx.lineTo(dx, dy);
+        sinStack.push([dx, dy]);
+      }
+
+      const startPoint = sinStack.shift();
+
+      ctx.lineTo(xOffset + axisLength, canvasHeight);
+      ctx.lineTo(xOffset, canvasHeight);
+      ctx.lineTo(startPoint[0], startPoint[1]);
+
+      const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
+      gradient.addColorStop(0, '#ffffff');
+      gradient.addColorStop(1, '#1890FF');
+      ctx.fillStyle = gradient;
+      ctx.fill();
+      ctx.restore();
+    }
+
+    function render1() {
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+      if (circleLock) {
+        if (arcStack.length) {
+          const temp = arcStack.shift();
+          ctx.lineTo(temp[0], temp[1]);
+          ctx.stroke();
+        } else {
+          circleLock = false;
+          ctx.lineTo(cStartPoint[0], cStartPoint[1]);
+          ctx.stroke();
+          arcStack = null;
+
+          ctx.globalCompositeOperation = 'destination-over';
+          ctx.beginPath();
+          ctx.lineWidth = lineWidth;
+          ctx.arc(radius, radius, bR, 0, 2 * Math.PI, 1);
+
+          ctx.beginPath();
+          ctx.save();
+          ctx.arc(radius, radius, radius - (3 * lineWidth), 0, 2 * Math.PI, 1);
+
+          ctx.restore();
+          ctx.clip();
+          ctx.fillStyle = '#1890FF';
+        }
+      } else {
+        if (data >= 0.85) {
+          if (currRange > range / 4) {
+            const t = range * 0.01;
+            currRange -= t;
+          }
+        } else if (data <= 0.1) {
+          if (currRange < range * 1.5) {
+            const t = range * 0.01;
+            currRange += t;
+          }
+        } else {
+          if (currRange <= range) {
+            const t = range * 0.01;
+            currRange += t;
+          }
+          if (currRange >= range) {
+            const t = range * 0.01;
+            currRange -= t;
+          }
+        }
+        if ((data - currData) > 0) {
+          currData += waveupsp;
+        }
+        if ((data - currData) < 0) {
+          currData -= waveupsp;
+        }
+
+        sp += 0.07;
+        drawSin();
+      }
+      // self.timer = requestAnimationFrame(render1);  //此句直接导致死循环
+    }
+
+    render1();
+  }
+
+  render() {
+    const { radio, waterWave, waterWaveCanvasWrapper, text } = this.state;
+    const { data, xUnit, height } = this.props;
+    return (
+      <div className={waterWave} ref={n => (this.root = n)} style={{ transform: `scale(${radio})` }}>
+        <div style={{ width: height - 24, height: height - 24, overflow: 'hidden', margin: '0 auto' }}>
+          <canvas
+            className={waterWaveCanvasWrapper}
+            ref={n => (this.node = n)}
+            width={(height - 24) * 2}
+            height={(height - 24) * 2}
+          />
+        </div>
+        <div className={text}>
+          {
+            xUnit && <span>{xUnit}</span>
+          }
+          <h4>{data}%</h4>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WaterWave;
+@import "~antd-v4/lib/style/themes/default.less";
+
+.waterWave {
+  display: block;
+  position: relative;
+  transform-origin: left;
+  padding: 12px 0;
+  .text {
+    position: absolute;
+    left: 0;
+    top: 20%;
+    text-align: center;
+    width: 100%;
+    span {
+      color: @text-color-secondary;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    h4 {
+      color: @heading-color;
+      line-height: 32px;
+      font-size: 24px;
+    }
+  }
+  .waterWaveCanvasWrapper {
+    transform: scale(.5);
+    transform-origin: 0 0;
+  }
+}
+/* eslint eqeqeq: 0 */
+
+function equal(old, target) {
+  let r = true;
+  for (const prop in old) {
+    if (typeof old[prop] === 'function' && typeof target[prop] === 'function') {
+      if (old[prop].toString() != target[prop].toString()) {
+        r = false;
+      }
+    } else if (old[prop] != target[prop]) {
+      r = false;
+    }
+  }
+  return r;
+}
+
+export default equal;
+import numeral from 'numeral';
+import Bar from './Bar';
+import Columnar from './Columnar';
+import ColumnarGroup from './ColumnarGroup';
+import BrokenLine from './BrokenLine';
+import WaterWave from './WaterWave';
+import Gauge from './Gauge';
+import ColumnarStack from './ColumnarStack';
+import PieGroup from './PieGroup';
+import Pie from './Pie';
+import TimeLineChart from './TimelineChart';
+import TimeLineGroup from './TimeLineGroup';
+import EqualColumnarStack from './EqualColumnarStack';
+import ColorBlock from './ColorBlock';
+/* update by zz 20201227 */
+// const yuan = val => `&yen; ${numeral(val).format('0,0')}`;
+const yuan = val => `${numeral(val).format('0,0')}`;
+export default {
+  yuan,
+  Bar,
+  Columnar,
+  ColumnarGroup,
+  BrokenLine,
+  WaterWave,
+  Gauge,
+  ColumnarStack,
+  PieGroup,
+  Pie,
+  TimeLineChart,
+  TimeLineGroup,
+  EqualColumnarStack,
+  ColorBlock,
+};
+@import "~antd-v4/lib/style/themes/default.less";
+.char {
+  margin: 24px;
+}
+
+.commonChar {
+  // padding-top: 10px;
+  padding-bottom: 10px;
+  background: #888;
+  :global{
+    .ant-col-18{
+      padding-right: 24px;
+    }
+    .ant-card-body{
+      overflow: hidden;
+    }
+  }
+  .commonCharContainer {
+    margin-bottom: 24px;
+    overflow: hidden;
+    canvas + div {
+      display: none;
+    }
+    :global {
+      .ant-card-extra {
+        padding: 12px 24px!important;
+      }
+    }
+    .commonRollChar{
+      .xly-list > .ant-layout{
+        margin: 0 !important;
+      }
+    }
+  }
+}
+
+.commonCharPage{
+  padding: 105px 20px 0 20px;
+  background: #888;
+}
+
+.offlineCard {
+  :global {
+    .ant-tabs-ink-bar {
+      bottom: auto;
+    }
+    .ant-tabs-bar {
+      border-bottom: none;
+    }
+    .ant-tabs-nav-container-scrolling {
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+    .ant-tabs-tab-prev-icon:before {
+      position: relative;
+      left: 6px;
+    }
+    .ant-tabs-tab-next-icon:before {
+      position: relative;
+      right: 6px;
+    }
+    .ant-tabs-tab-active h4 {
+      color: @primary-color;
+    }
+  }
+  .tabGroup {
+    width: 138px;
+    margin: 8px 0!important;
+  }
+}
+
+
+.pdfContainer {
+  width: 100%;
+  height: 300px;
+}
+/* 处理分隔符间距 */
+:global {
+  /* 主表分隔符间距 */
+}
+:global .commonCheckBillContainer .ant-divider-horizontal.ant-divider-with-text {
+  margin: 5px 0 10px 0!important;
+}
+:global .commonCheckBillContainer .flexArea .ant-divider-horizontal.ant-divider-with-text {
+  margin: -8px 0 !important;
+}
+/* eslint-disable prefer-destructuring */
+import React, { Component } from 'react';
+import { UploadOutlined } from '@ant-design/icons';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import {
+  Row,
+  Col,
+  Checkbox,
+  Layout,
+  Spin,
+  Avatar,
+  Button,
+  Table,
+  Upload,
+  Input,
+  Divider,
+  Collapse,
+} from 'antd';
+import { message } from '@/utils/common/message';
+import CommonSales from '@/components/Common/CommonCheckBillEvent';/* 继承销售模块业务功能 */
+import * as commonFunc from '@/components/Common/commonFunc';/* 通用单据方法 */ /* 通用单据方法 */
+import Toolbar from '@/components/Common/ToolBar/ToolBarNew';
+import StaticEditTable from '@/components/Common/CommonTable';/* 可编辑表格 */
+import styles from '@/index.less';
+import CommonView from '@/components/Common/CommonView';
+import CommonViewFlex from '@/components/Common/CommonViewFlex';
+import CommonViewTable from '@/components/Common/CommonViewTable';
+import CommonBase from '@/components/Common/CommonBase';/* 获取配置及数据 */
+import * as commonBusiness from '@/components/Common/commonBusiness';/* 单据业务功能 */
+import commonConfig from '@/utils/config';
+import * as commonUtils from '@/utils/utils';/* 通用方法 */
+import * as commonServices from '@/services/services';/*   服务类   */
+import CommonListSelect from '@/components/Common/CommonListSelect';
+import CommonListSelectTree from '@/components/Common/CommonListSelectTree';
+import AddIcon from '@/assets/add.svg';
+import DisableAddIcon from '@/assets/disableadd.svg';
+import CopyIcon from '@/assets/copy.svg';
+import CopyAllIcon from '@/assets/copyall.svg';
+import DisableCopyIcon from '@/assets/disablecopy.svg';
+import DisableCopyAllIcon from '@/assets/disablecopyall.svg';
+import DelIcon from '@/assets/delete.svg';
+import DisableDelIcon from '@/assets/disabledelete.svg';/* 获取配置及数据 */
+import MaterialRemarkIcon from '@/assets/materialremark.svg';
+import DisMaRemarklIcon from '@/assets/disablematerialremark.svg';
+import ProcessIcon from '@/assets/process.svg';
+import DisableProcessIcon from '@/assets/disableprocess.svg';
+import MateriallIcon from '@/assets/material.svg';
+import DisableMateriallIcon from '@/assets/disablematerial.svg';
+// import SlaveMemo from './SlaveMemo';
+import AntdDraggableModal from '@/components/Common/AntdDraggableModal';
+import StaticEditTree from '@/components/Common/Tree/StaticTree';
+import AddChildIcon from '@/assets/addChild.svg';
+import DisableAddChildIcon from '@/assets/disableaddChild.svg';
+import ContextMenuModal from '@/components/Common/ContextMenuModal';
+import PrintPdf from '@/components/PrintPdf/PrintPdf';
+import customStyles from './index.less';
+
+const width = '18px';
+const height = '18px';
+const setAdd = {
+  title: '增加',
+  width: { width },
+  height: { height },
+  img: <img src={AddIcon} alt="添加" width={width} height={height} />,
+  disableimg: <img src={DisableAddIcon} alt="删除" width={width} height={height} />,
+};
+const setAddChild = {
+  title: '增加',
+  width: { width },
+  height: { height },
+  img: <img src={AddChildIcon} alt="添加" width={width} height={height} />,
+  disableimg: <img src={DisableAddChildIcon} alt="添加" width={width} height={height} />,
+};
+const setCopy = {
+  title: '复制',
+  width: { width },
+  height: { height },
+  img: <img src={CopyIcon} alt="复制" width="20px" height="20px" />,
+  disableimg: <img src={DisableCopyIcon} alt="复制" width="20px" height="20px" />,
+};
+const setCopyAll = {
+  title: '复制部件',
+  width: { width },
+  height: { height },
+  img: <img src={CopyAllIcon} alt="复制部件" width="16px" height="16px" />,
+  disableimg: <img src={DisableCopyAllIcon} alt="复制部件" width="16px" height="16px" />,
+};
+const setDelete = {
+  title: '删除',
+  width: { width },
+  height: { height },
+  img: <img src={DelIcon} alt="删除" width={width} height={height} />,
+  disableimg: <img src={DisableDelIcon} alt="删除" width={width} height={height} />,
+};
+const setProcess = {
+  title: '工序',
+  width: { width },
+  height: { height },
+  img: <img src={ProcessIcon} alt="选择工序" width="16px" height="16px" />,
+  disableimg: <img src={DisableProcessIcon} alt="删除" width="16px" height="16px" />,
+};
+const setMaterial = {
+  title: '材料',
+  width: { width },
+  height: { height },
+  img: <img src={MateriallIcon} alt="选择材料" width="22px" height="22px" />,
+  disableimg: <img src={DisableMateriallIcon} alt="选择材料" width="22px" height="22px" />,
+};
+
+
+const { Header, Content, Sider } = Layout;
+const { Panel } = Collapse;
+class CommonBill extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  /**   行选择   */
+  onRowClick = (name, record) => {
+    if (name === 'control') {
+      this.props.onTableSelectRowChange(name, [record.sId]);
+    }
+  };
+
+  onChange = (checkedValues) => {
+    this.props.onSaveState({
+      dataPersonArray: checkedValues,
+    });
+  };
+  getMenuStatus = (menu) => {
+    if (menu.sControlName === 'BtnImport') {
+      return !this.props.enabled;
+    }
+  };
+  /**   上传后执行函数    */
+  handleUploadChangeFile = async (info) => {
+    const { file } = info;
+    const {
+      masterData, sModelsId, app, token, sModelsType, slaveConfig, slaveData,
+    } = this.props;
+    if (file.response) {
+      if (file.response.code === 1) {
+        /*   数据查询成功   */
+        const errorInfo = file.response.dataset.rows[0].nocanbeInsert;
+        if (commonUtils.isNotEmptyObject(errorInfo)) {
+          message.error(errorInfo[0].sReason);
+          return;
+        }
+        /* 把之前存放的数据删除 */
+        const slaveDelData = [];
+        if (commonUtils.isNotEmptyArr(slaveData)) {
+          slaveData.forEach((item) => {
+            if (commonUtils.isEmptyObject(item.handleType)) {
+              item.handleType = 'del';
+              slaveDelData.push(item);
+            }
+          });
+        }
+        const returnData = file.response.dataset.rows[0].canbeInsert;
+        let iCount = 0;
+        let productIdDropDown;
+        if (productIdDropDown === undefined && commonUtils.isNotEmptyArr(returnData)) { /* 无论导入多少条数据 都只调用1次接口,获取产品下拉数据集 */
+          const iIndex = slaveConfig.gdsconfigformslave.findIndex(item => item.sName === 'sProductName');
+          if (iIndex > -1) {
+            const sqlDropDownData = await this.props.getSqlDropDownData(sModelsId, 'slave', slaveConfig.gdsconfigformslave[iIndex], returnData[0]);
+            productIdDropDown = sqlDropDownData.dropDownData;
+          }
+        }
+        await returnData.forEach(async (tableDataRow) => {
+          tableDataRow.handleType = 'add';
+          tableDataRow.sId = commonUtils.createSid();
+          tableDataRow.sParentId = masterData.sId;
+          tableDataRow.key = tableDataRow.sId;
+          /* 若导入模板没有序号，则序号从1自增 */
+          if (commonUtils.isEmptyObject(tableDataRow.iOrder)) {
+            iCount += 1;
+            tableDataRow.iOrder = iCount;
+          }
+          for (const child of Object.keys(tableDataRow)) {
+            const index = child.indexOf('_sRealValue_');
+            if (index > -1) {
+              const property = child.substring(0, child.length - 12);
+              tableDataRow[property] = tableDataRow[child];
+            }
+          }
+          if (productIdDropDown !== undefined) {
+            const iProductIdIndex = productIdDropDown.findIndex(item => item.sId === tableDataRow.sProductId);
+            if (iProductIdIndex === -1 && commonUtils.isNotEmptyObject(sModelsType) && sModelsType.includes('sales/salesOrder')) { /* 只有销售模块生成新产品 盘点 ，期间 不生成新的产品 */
+              tableDataRow.sProductId = tableDataRow.sProductName;
+              tableDataRow.sProductInfo = JSON.stringify({
+                sProductId: tableDataRow.sProductName,
+                sProductName: tableDataRow.sProductName,
+                sProductStyle: tableDataRow.sProductStyle,
+                sProductUnit: tableDataRow.sProductUnit,
+                sProductNo: tableDataRow.sProductNo,
+                sCustomerProductNo: tableDataRow.sCustomerProductNo,
+                sProductClassifyId: tableDataRow.sProductClassifyId,
+                sProductClassifyName: tableDataRow.sProductClassifyName,
+              });
+            }
+          }
+          if (!tableDataRow.dNProductPrice) {
+            tableDataRow.dNProductPrice = tableDataRow.dProductForeignPrice;
+          }
+          const models = sModelsType.includes('sales/') || sModelsType.includes('manufacture/') || sModelsType.includes('quotation/') || sModelsType.includes('productStock/') ? 'Product' : 'Materials';
+          if (sModelsType.includes('purchase/') || sModelsType.includes('quotation/') || sModelsType.includes('manufacture/') || sModelsType.includes('materialsStock/') || sModelsType.includes('outside/')) {
+            tableDataRow = await this.props.onMaterialsChange(tableDataRow, sModelsId, masterData, {}, 'dAuxiliaryQty', app, token, models);
+            tableDataRow = commonBusiness.getCalculateAllMoney(app, models, 'dAuxiliaryQty', masterData, tableDataRow);
+          } else {
+            tableDataRow = commonBusiness.getCalculateAllMoney(app, models, 'dProductQty', masterData, tableDataRow);
+          }
+        });
+        this.props.onSaveState({ slaveData: returnData, slaveDelData });
+      } else { /*   失败s   */
+        this.props.getServiceError(file.response);
+      }
+    }
+  };
+  handleUploadPropsSales = () => {
+    const { masterData, sModelsType } = this.props;
+    if (commonUtils.isNotEmptyObject(masterData)) {
+      const sCustomerId = commonUtils.isEmptyStr(masterData.sCustomerId) ? undefined : masterData.sCustomerId;
+      let existCustomerId = false;
+      if (sModelsType.includes('sales/') && commonUtils.isNotEmptyStr(sCustomerId)) {
+        existCustomerId = true;
+      } else if (!sModelsType.includes('sales/')) {
+        existCustomerId = true;
+      }
+      return {
+        disabled: !this.props.enabled || !existCustomerId, /*   是否可用   */
+        style: { display: commonUtils.convertBooleanToDisplayBlock(true) }, /*   是否显示   */
+      };
+    }
+  };
+
+  /**   上传后执行函数    */
+  handleBeforeUpload = () => {
+    // const isLt10M = file.size / 1024 / 1024 < 10;
+    // if (!isLt10M) {
+    //   message.error(commonFunc.showMessage(this.props.app.commonConst, 'picMax'));/* 图片大小需小于10MB! */
+    // }
+  };
+  /**   图片上传后执行函数    */
+  handleUploadChange = (info, name) => {
+    const { file } = info;
+    if (file.response && file.response.code === 1) {
+      const sPicturePath = file.response.dataset.rows[0].savePathStr;
+      const spicture = sPicturePath;
+      const uploadInfo = {
+        sPicturePath,
+        sFileName: file.name,
+      };
+      const { [`${name}Column`]: tableColumn, masterData, [`${name}Data`]: tableData } = this.props;
+      if (commonUtils.isNotEmptyArr(tableData) && commonUtils.isEmpty(tableData[tableData.length - 1].sPicturePath)) {
+        tableData[tableData.length - 1].sPicturePath = uploadInfo.sPicturePath;
+        tableData[tableData.length - 1].spicture = spicture;
+        tableData[tableData.length - 1] = {
+          ...tableData[tableData.length - 1],
+          sPicturePath: uploadInfo.sPicturePath,
+          sFileName: uploadInfo.sFileName,
+          spicture,
+          handleType: commonUtils.isEmpty(tableData[tableData.length - 1].handleType) ? 'update' : tableData[tableData.length - 1].handleType,
+        };
+      } else {
+        const tableDataRow = this.props.onDataRowAdd(name, true);
+        tableColumn.forEach((slaveChild) => {
+          const ckey = slaveChild.dataIndex;
+          if (ckey === 'sProductNo' || ckey === 'sProductName') {
+            tableDataRow[ckey] = masterData[ckey] !== undefined ? masterData[ckey] : '';
+          } else if (ckey === 'iOrder') {
+            tableDataRow[ckey] = '';
+          } else if (file.response && file.response.code === 1) {
+            if (uploadInfo[ckey] !== undefined) {
+              tableDataRow[ckey] = uploadInfo[ckey];
+            }
+          }
+        });
+        tableData.push(tableDataRow);
+      }
+      this.props.onSaveState({ [`${name}Data`]: tableData, enabled: true });
+    } else if (file.response && file.response.code === -1) {
+      message.error(file.response.msg);
+    }
+  };
+  handleOk = async (flag, tmpCheck, isWait) => {
+    const {
+      sModelsId, masterData, app, checkConditions, sCheckModelId, checkPersonData, currentId, masterConfig, slaveConfig, checkConfig, sCheckRemark,
+    } = this.props;
+    const { currentPane } = app;
+    const bCkxTmpCheck = app.systemData.filter(item => item.sName === 'CkxTmpCheck')[0].sValue;
+    if (bCkxTmpCheck === '1') {
+      const returnData = await this.props.onDataAudit(flag, tmpCheck, isWait);
+      if (returnData.code === 1) {
+        if (returnData.dataset.rows[0].dataSet.outData[0].sCode === 1) {
+          this.props.onGetData(masterConfig, slaveConfig, checkConfig);
+          message.success(returnData.msg);
+        } else {
+          message.error(returnData.dataset.rows[0].dataSet.outData[0].sReturn);
+        }
+      } else { /*   失败   */
+        this.props.getServiceError(returnData);
+      }
+    } else {
+      const dataPersonArray = commonUtils.isEmptyObject(this.props.dataPersonArray) ? [] : this.props.dataPersonArray;
+      if (commonUtils.isEmptyObject(dataPersonArray)) {
+        checkPersonData.forEach((item) => {
+          dataPersonArray.push(item.sUserId);
+        });
+      }
+      const dataPersonString = dataPersonArray.join(',');
+      const url = `${commonConfig.server_host}business/getProData?sModelsId=${sModelsId}`;
+      const value = {
+        sProName: 'Sp_System_AutoSendCheckMsg',
+        paramsMap: {
+          sFormGuid: sModelsId,
+          sBillKey: currentPane.sProcName,
+          sTbName: masterConfig.sTbName,
+          sGuid: masterData.sId,
+          sBillNo: masterData.sBillNo,
+          sCheckCondition: checkConditions,
+          sMemo: sCheckRemark,
+          sCheckModelGuid: sCheckModelId,
+          sCheckPerson: dataPersonString,
+        },
+      };
+
+      const returnData = (await commonServices.postValueService(app.token, value, url)).data;
+      if (returnData.code === 1) {
+        const noCheckMsg = commonFunc.showMessage(app.commonConst, 'NoCheckMsg'); /* 您有消息待审核 */
+        if (returnData.dataset.rows[0].dataSet.outData[0].sCode === 1) {
+          this.props.handleSendSocketMessage('examine', 'showImg', currentId, dataPersonString, noCheckMsg, null);
+          const urlCanCheckBill = `${commonConfig.server_host}checkModel/getCanCheckBill?sModelsId=${sModelsId}`;
+          const valueCanCheckBill = { sCheckModelId, checkPersonData, sBillId: masterData.sId };
+          const returnCanCheckBill = (await commonServices.postValueService(app.token, valueCanCheckBill, urlCanCheckBill)).data;
+          if (returnCanCheckBill.code === 1) {
+            if (returnCanCheckBill.dataset.rows[0].iCount === 1) {
+              this.props.onDataAudit(1, 1);
+              this.props.onSaveState({
+                visible: false,
+              });
+              return;
+            }
+          } else { /*   失败   */
+            this.props.getServiceError(returnCanCheckBill);
+          }
+          this.props.handleSendSocketMessage('reflush', 'showImg', currentId, dataPersonString, noCheckMsg, null);
+          message.success(returnData.msg);
+        } else {
+          message.error(returnData.dataset.rows[0].dataSet.outData[0].sReturn);
+        }
+      } else { /*   失败   */
+        this.props.getServiceError(returnData);
+      }
+    }
+    this.props.onSaveState({
+      visible: false,
+    });
+  };
+  handleCancel = () => {
+    this.props.onSaveState({
+      visible: false,
+    });
+  };
+  handleTableModal = async () => {
+    const {
+      sModelsId, controlData, masterData, slaveData, controlConfig, slaveSelectedRowKeys, enabled, slaveConfig, sModelsType,
+    } = this.props;
+    const addState = {};
+    let treeState = {};
+    if (this.props.sModelsType.includes('sales/salesOrder')) {
+      const iSlaveIndex = slaveData.findIndex(item => item.sId === slaveSelectedRowKeys[0]);
+      const iIndex = controlData.findIndex(item => item.sSlaveId === slaveSelectedRowKeys[0]);
+      if (iIndex === -1 && iSlaveIndex > -1 && enabled) {
+        const allTableData = {};
+        allTableData.master = masterData;
+        allTableData.slaveData = slaveData;
+        let dropdownProductClassifyId;
+        const iIndex = slaveConfig.gdsconfigformslave.findIndex(item => item.sName === 'sProductClassifyId');
+        if (iIndex > -1) {
+          const sqlDropDownData = await this.props.getSqlDropDownData(sModelsId, 'slave', slaveConfig.gdsconfigformslave[iIndex]);
+          dropdownProductClassifyId = sqlDropDownData.dropDownData;
+        }
+        if (commonUtils.isEmptyArr(dropdownProductClassifyId)) {
+          const iIndex = slaveConfig.gdsconfigformslave.findIndex(item => item.sName === 'sProductClassifyName');
+          if (iIndex > -1) {
+            const sqlDropDownData = await this.props.getSqlDropDownData(sModelsId, 'slave', slaveConfig.gdsconfigformslave[iIndex]);
+            dropdownProductClassifyId = sqlDropDownData.dropDownData;
+          }
+        }
+        if (commonUtils.isNotEmptyArr(dropdownProductClassifyId)) {
+          const iProductClassifyIdIndex = dropdownProductClassifyId.findIndex(item => item.sId === slaveData[iSlaveIndex].sProductClassifyId);
+          if (commonUtils.isNotEmptyObject(dropdownProductClassifyId[iProductClassifyIdIndex])) {
+            const sAllPartsName = dropdownProductClassifyId[iProductClassifyIdIndex].sAllPartsName;
+            if (commonUtils.isNotEmptyStr(sAllPartsName)) {
+              const sAssignFieldObj = sAllPartsName.split(',');
+              for (const child of sAssignFieldObj) {
+                const tableDataRowAdd = commonFunc.getDefaultData(controlConfig, allTableData);
+                tableDataRowAdd.handleType = 'add';
+                tableDataRowAdd.sId = commonUtils.createSid();
+                tableDataRowAdd.sParentId = masterData && masterData.sId ? masterData.sId : null;
+                tableDataRowAdd.sSlaveId = slaveSelectedRowKeys[0];
+                tableDataRowAdd.key = tableDataRowAdd.sId;
+                tableDataRowAdd.bDefault = false;
+                tableDataRowAdd.iOrder = 0;
+                tableDataRowAdd.sPartsName = child;
+                tableDataRowAdd.dPartsQty = commonUtils.isNull(slaveData[iSlaveIndex].dProductQty, 0) + commonUtils.isNull(slaveData[iSlaveIndex].dGiveQty, 0) + commonUtils.isNull(slaveData[iSlaveIndex].dStockupQty, 0);
+                tableDataRowAdd.sAllId = tableDataRowAdd.sId;
+                tableDataRowAdd.sControlParentId = '';
+                controlData.push(tableDataRowAdd);
+              }
+            }
+          }
+        }
+        addState.controlData = controlData;
+      }
+
+      if (controlData !== undefined) {
+        const iControlIndex = controlData.findIndex(item => item.sSlaveId === slaveSelectedRowKeys[0]);
+        if (iControlIndex > -1) {
+          addState.controlSelectedRowKeys = [controlData[iControlIndex].sId];
+        }
+      }
+      if (sModelsType === 'sales/salesOrderPack') {
+        const sSlaveId = slaveSelectedRowKeys[0];
+        if (commonUtils.isNotEmptyObject(sSlaveId)) {
+          treeState = this.props.onGetControlTreeData(controlData, true, sSlaveId);
+        }
+      }
+    }
+
+    this.props.onSaveState({
+      visibleModal: true,
+      ...addState,
+      ...treeState,
+    });
+  };
+  handleTableChooseProcess = () => {
+    const { processConfig } = this.props;
+    const iIndex = processConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'BtnChooseProcess');
+
+    if (iIndex > -1) {
+      this.props.onBtnChoose('process', 'BtnChooseProcess', processConfig.gdsconfigformslave[iIndex]);
+    }
+  };
+  handleCancelModal = (modelVisible) => {
+    this.props.onSaveState({
+      [modelVisible]: false,
+    });
+  };
+  handleOkModal = async () => {
+    const {
+      controlData, materialsData, processData, slaveData, slaveSelectedRowKeys,
+    } = this.props;
+    const ctData = controlData.filter(item => item.handleType !== 'del' && item.sSlaveId === slaveSelectedRowKeys[0]);
+    const mtData = materialsData.filter(item => item.handleType !== 'del' && item.sSlaveId === slaveSelectedRowKeys[0]);
+    const pData = processData.filter(item => item.handleType !== 'del' && item.sSlaveId === slaveSelectedRowKeys[0] && item.sType !== '3');
+    const p3Data = processData.filter(item => item.handleType !== 'del' && item.sSlaveId === slaveSelectedRowKeys[0] && item.sType === '3'); /* 成品工序 */
+    if (commonUtils.isNotEmptyArr(ctData)) {
+      let mDetail = '';
+      let pDetail = '';
+      const slaveIndex = slaveData.findIndex(item => item.sId === slaveSelectedRowKeys[0]);
+      await ctData.forEach((controlItem, n) => {
+        if (commonUtils.isNotEmptyObject(controlItem.sPartsName)) {
+          const qz = n === 0 ? '' : ' ';
+          if (commonUtils.isNotEmptyObject(controlItem.sPartsName)) {
+            const yDetail = `${mDetail}${qz}#${controlItem.sPartsName}:`;
+            const gDetail = `${pDetail}${qz}#${controlItem.sPartsName}:`;
+            let imDetail = '';
+            let ipDetail = '';
+            const materials = mtData.filter(materialsItem => (materialsItem.sControlId === controlItem.sId));
+            // let materialsIdDropDown;
+            // const materialsIndex = materialsConfig.gdsconfigformslave.findIndex(item => item.sName === 'sMaterialsName');
+            // if (materialsIndex > -1) {
+            //   const sqlDropDownData = await this.props.getSqlDropDownData(sModelsId, 'materials', materialsConfig.gdsconfigformslave[materialsIndex]);
+            //   materialsIdDropDown = sqlDropDownData.dropDownData;
+            // }
+            materials.forEach((mItem, i) => {
+              const fh = i === 0 ? '' : ',';
+              imDetail = `${imDetail}${fh} ${mItem.sMaterialsName}`;
+            });
+            // processPropsType
+            const process = pData.filter(processItem => (processItem.sControlId === controlItem.sId));
+            // let processIdDropDown;
+            // const processIndex = processConfig.gdsconfigformslave.findIndex(item => item.sName === 'sProcessName');
+            // if (processIndex > -1) {
+            //   const sqlDropDownData = await this.props.getSqlDropDownData(sModelsId, 'process', processConfig.gdsconfigformslave[processIndex]);
+            //   processIdDropDown = sqlDropDownData.dropDownData;
+            // }
+            // const processIdDropDown = commonUtils.getStoreDropDownData(sModelsId, 'process', 'sProcessName');
+            process.forEach((pItem, i) => {
+              const fh = i === 0 ? '' : ',';
+              ipDetail = `${ipDetail}${fh} ${pItem.sProcessName}`;
+            });
+            if (commonUtils.isNotEmptyObject(imDetail)) {
+              mDetail = `${yDetail}${imDetail}`;
+            }
+            if (commonUtils.isNotEmptyObject(ipDetail)) {
+              pDetail = `${gDetail}${ipDetail}`;
+            }
+          }
+        }
+      });
+      /* 成品工序 */
+      let ip3Detail = '';
+      if (commonUtils.isNotEmptyArr(p3Data)) {
+        p3Data.forEach((pItem, i) => {
+          const fh = i === 0 ? '' : ',';
+          ip3Detail = `${ip3Detail}${fh} ${pItem.sProcessName}`;
+        });
+      }
+      if (commonUtils.isNotEmptyObject(ip3Detail)) {
+        if (commonUtils.isNotEmptyObject(pDetail)) {
+          pDetail = `${pDetail},${ip3Detail}`;
+        } else {
+          pDetail = ip3Detail;
+        }
+      }
+      slaveData[slaveIndex].sMaterialsMemo = mDetail;
+      slaveData[slaveIndex].sProcessMemo = pDetail;
+      slaveData[slaveIndex].handleType = commonUtils.isEmpty(slaveData[slaveIndex].handleType) ? 'update' : slaveData[slaveIndex].handleType;
+    } else if (commonUtils.isNotEmptyArr(controlData) && commonUtils.isEmptyArr(ctData)) {
+      const sSlaveId = controlData[0].sSlaveId;
+      const slaveIndex = slaveData.findIndex(item => item.sId === sSlaveId);
+      slaveData[slaveIndex].sMaterialsMemo = '';
+      slaveData[slaveIndex].sProcessMemo = '';
+      slaveData[slaveIndex].handleType = commonUtils.isEmpty(slaveData[slaveIndex].handleType) ? 'update' : slaveData[slaveIndex].handleType;
+    }
+    this.props.onSaveState({
+      visibleModal: false,
+      controlData,
+      materialsData,
+      processData,
+      slaveData,
+    });
+  };
+  /** 控制选择控制表时，显示部件工序与成品工序 */
+  handleFilterSlaveData = (name, dataIndex, value, record) => {
+    return (commonUtils.isNotEmptyStr(record.sSlaveId) && record.sSlaveId.toString().toLowerCase().includes(value.toLowerCase()));
+  };
+  /** 控制选择控制表时，显示部件工序与成品工序 */
+  handleFilterData = (name, dataIndex, value, record) => {
+    const { slaveSelectedRowKeys } = this.props;
+    if (name === 'process') {
+      return (commonUtils.isNotEmptyStr(record.sType) && record.sType === '3' &&
+        commonUtils.isNotEmptyStr(record.sSlaveId) && record.sSlaveId.toString().toLowerCase().includes(slaveSelectedRowKeys.toString().toLowerCase())) ||
+        (commonUtils.isNotEmptyStr(record.sControlId) && record.sControlId.toString().toLowerCase().includes(value.toLowerCase()) &&
+          commonUtils.isNotEmptyStr(record.sSlaveId) && record.sSlaveId.toString().toLowerCase().includes(slaveSelectedRowKeys.toString().toLowerCase()));
+    } else {
+      return (commonUtils.isNotEmptyStr(record.sType) && record.sType === '2' &&
+        commonUtils.isNotEmptyStr(record.sSlaveId) && record.sSlaveId.toString().toLowerCase().includes(slaveSelectedRowKeys.toString().toLowerCase())) ||
+        (commonUtils.isNotEmptyStr(record.sControlId) && record.sControlId.toString().toLowerCase().includes(value.toLowerCase()) &&
+          commonUtils.isNotEmptyStr(record.sSlaveId) && record.sSlaveId.toString().toLowerCase().includes(slaveSelectedRowKeys.toString().toLowerCase()));
+    }
+    // (commonUtils.isNotEmptyStr(record.sControlId) && record.sControlId.toString().toLowerCase().includes(value.toLowerCase()));
+  };
+  /* 控制表过滤材料表 工序表数据 */
+  handleGetFilterData = (name) => {
+    const { [`${name}Data`]: data, controlSelectedRowKeys, slaveSelectedRowKeys } = this.props;
+    if (data !== undefined) {
+      const newArr = data.filter((item) => {
+        if (name === 'control') {
+          return (commonUtils.isNotEmptyStr(item.sSlaveId) && item.sSlaveId.toString().toLowerCase().includes(slaveSelectedRowKeys.toString()));
+        } else {
+          return (commonUtils.isNotEmptyStr(item.sControlId) && item.sControlId.toString().toLowerCase().includes(controlSelectedRowKeys.toString()) &&
+            commonUtils.isNotEmptyStr(item.sSlaveId) && item.sSlaveId.toString().toLowerCase().includes(slaveSelectedRowKeys.toString()));
+        }
+      });
+      return newArr.length;
+    }
+  };
+  /* 包装工单过滤行 */ /** 控制选择控制表时，显示部件工序与成品工序 */
+  handleFilterDataPack = (name, dataIndex, value, record) => {
+    if (name === 'process') {
+      return (commonUtils.isNotEmptyStr(record.sType) && record.sType === '3') ||
+        (commonUtils.isNotEmptyStr(record.sControlId) && record.sControlId.toString().toLowerCase().includes(value.toLowerCase()));
+    } else {
+      return (commonUtils.isNotEmptyStr(record.sType) && record.sType === '2') ||
+        (commonUtils.isNotEmptyStr(record.sControlId) && record.sControlId.toString().toLowerCase().includes(value.toLowerCase()));
+    }
+  };
+  /* 控制表过滤材料表 工序表数据 */
+  handleGetFilterDataPack = (name) => {
+    const { [`${name}Data`]: data, controlSelectedRowKeys } = this.props;
+    if (data !== undefined && commonUtils.isNotEmptyArr(controlSelectedRowKeys)) {
+      const newArr = data.filter((item) => {
+        return (commonUtils.isNotEmptyStr(item.sControlId) && item.sControlId.toString().toLowerCase().includes(controlSelectedRowKeys.toString()));
+      });
+      return newArr.length;
+    }
+  };
+  /**   添加表格空行   */
+  handleTableAdd = async (name, flag, bchild) => {
+    /*   外置处理业务   */
+    const {
+      sModelsId, sModelsType, gdsformconst, slaveData, controlData, controlSelectedRowKeys, [`${name}Data`]: tableData, slaveSelectedRowKeys, slaveConfig,
+    } = this.props;
+    let tableDataRow = {};
+    if (name === 'control') {
+      const {
+        [`${name}SelectedRowKeys`]: treeSelectedKeys,
+      } = this.props;
+      if ((bchild === 'childNode' || bchild === 'sameNode') && (commonUtils.isEmptyArr(treeSelectedKeys) || commonUtils.isEmptyArr(controlSelectedRowKeys))) {
+        message.warn('请选择部件！'); // 请选择部件
+        return;
+      }
+      tableDataRow = this.props.onDataRowAdd(name, true);
+      if (commonUtils.isEmptyObject(tableDataRow)) {
+        return;
+      }
+      let dPartsQty = 0;
+      if (commonUtils.isNotEmptyArr(slaveData)) {
+        slaveData.forEach((item) => {
+          dPartsQty += commonUtils.isNull(item.dProductQty, 0) + commonUtils.isNull(item.dGiveQty, 0) + commonUtils.isNull(item.dStockupQty, 0);
+        });
+        let productIdDropDown;
+        const slaveIndex = slaveConfig.gdsconfigformslave.findIndex(item => item.sName === 'sProductName');
+        if (slaveIndex > -1) {
+          const sqlDropDownData = await this.props.getSqlDropDownData(sModelsId, 'slave', slaveConfig.gdsconfigformslave[slaveIndex]);
+          productIdDropDown = sqlDropDownData.dropDownData;
+        }
+        if (productIdDropDown) {
+          const iProductIdIndex = productIdDropDown.findIndex(item => item.sId === slaveData[0].sProductId);
+          if (iProductIdIndex > -1) {
+            tableDataRow.sPartsName = productIdDropDown[iProductIdIndex].sProductName;
+          }
+        }
+      }
+      const iSlaveIndex = slaveData.findIndex(item => item.sId === slaveSelectedRowKeys[0]);
+      if (iSlaveIndex > -1) {
+        if (sModelsType.includes('sales/salesOrder')) {
+          if (!commonUtils.isEmpty(slaveData[iSlaveIndex].dProductQty)) {
+            tableDataRow.dPartsQty = commonUtils.isNull(slaveData[iSlaveIndex].dProductQty, 0) + commonUtils.isNull(slaveData[iSlaveIndex].dGiveQty, 0);
+          }
+        } else {
+          tableDataRow.dPartsQty = dPartsQty;
+        }
+        tableDataRow.sSlaveId = slaveData[iSlaveIndex].sId;
+      }
+      /* 树形部件节点增加同级部件、增加子级部件 */
+      if (sModelsType === 'sales/salesOrderPack') {
+        if (bchild === 'sameNode') { /* 添加同级 */
+          const iIndex = controlData.findIndex(item => item.sId === treeSelectedKeys[0]);
+          /* 找到同级子元素的sControlParentId */
+          if (iIndex > -1) {
+            tableDataRow.sControlParentId = controlData[iIndex].sControlParentId;
+            /* 找到同级父级sAllId */
+            const pId = controlData[iIndex].sControlParentId;
+            const sControlParentId = controlData.findIndex(item => item.sId === pId);
+            if (sControlParentId > -1) {
+              const sAllId = controlData[sControlParentId].sAllId;
+              if (commonUtils.isEmptyObject(sAllId)) {
+                message.warn('部件数据生成错误！[sAllId为空]');
+                return;
+              }
+              tableDataRow.sAllId = `${controlData[sControlParentId].sAllId},${tableDataRow.sId}`;
+            } else {
+              tableDataRow.sAllId = tableDataRow.sId;
+            }
+          }
+        }
+        if (bchild === 'childNode') { /* 添加子级 */
+          tableDataRow.sControlParentId = treeSelectedKeys[0];
+          const iIndex = controlData.findIndex(item => item.sId === treeSelectedKeys[0]);
+          if (iIndex > -1) {
+            const sAllId = controlData[iIndex].sAllId;
+            if (commonUtils.isEmptyObject(sAllId)) {
+              message.warn('子部件数据生成错误！[sAllId为空]'); // 获取父节点的sAllId
+              return;
+            }
+            tableDataRow.sAllId = `${controlData[iIndex].sAllId},${tableDataRow.sId}`;
+          }
+        }
+      }
+      tableData.push(tableDataRow);
+      let treeState = [];
+      if (sModelsType === 'sales/salesOrderPack') {
+        treeState = this.props.onGetControlTreeData(tableData, true, tableDataRow.sSlaveId);
+      }
+      this.props.onSaveState({ [`${name}Data`]: tableData, [`${name}SelectedRowKeys`]: [tableDataRow.sId], ...treeState });
+    } else if (name === 'materials' || name === 'process') {
+      tableDataRow = this.props.onDataRowAdd(name, true);
+      if (commonUtils.isEmptyArr(controlSelectedRowKeys)) {
+        const msg = commonFunc.showMessage(gdsformconst, 'pleaseChooseParts');
+        message.warn(msg === '' ? '请选择部件' : msg); // 请选择部件
+        return;
+      }
+      const iIndex = controlData.findIndex(item => item.sId === controlSelectedRowKeys[0]);
+      const iSlaveIndex = slaveData.findIndex(item => item.sId === slaveSelectedRowKeys[0]);
+      if (iIndex > -1 && iSlaveIndex > -1) {
+        if (commonUtils.isEmpty(controlData[iIndex].sPartsName) === '') {
+          message.warn(commonFunc.showMessage(gdsformconst, 'partsNameNotNull')); // 部件名称不能为空
+          return;
+        }
+        tableDataRow.sSlaveId = slaveData[iSlaveIndex].sId;
+        tableDataRow.sControlId = controlData[iIndex].sId;
+        tableDataRow.sPartsName = controlData[iIndex].sPartsName;
+      }
+      tableData.push(tableDataRow);
+      this.props.onSaveState({ [`${name}Data`]: tableData, [`${name}SelectedRowKeys`]: [tableDataRow.sId] });
+    } else {
+      this.props.onDataRowAdd(name, flag);
+    }
+  };
+  /**   删除表格数据   */
+  otherTableDel = (name, tableSelectedRowKeys) => {
+    const tableData = this.props[`${name}Data`];
+    let tableDelData = this.props[`${name}DelData`];
+    tableDelData = commonUtils.isEmptyArr(tableDelData) ? [] : tableDelData;
+    for (const sId of tableSelectedRowKeys) {
+      /*   看看删除集合和从表中是否都存在该条数据   */
+      let tableDataIndex = tableData.findIndex(item => item.sControlId === sId);
+      while (tableDataIndex > -1) {
+        /*   删除从表中的数据并存入删除集合中   */
+        const slaveDataFilter = tableData[tableDataIndex];
+        tableData.splice(tableDataIndex, 1);
+        slaveDataFilter.handleType = 'del';
+        tableDelData.push(slaveDataFilter);
+        tableDataIndex = tableData.findIndex(item => item.sControlId === sId);
+      }
+    }
+    return { [`${name}Data`]: tableData, [`${name}DelData`]: tableDelData, [`${name}SelectedRowKeys`]: [] };
+  };
+  /**   删除表格数据   */
+  handleTableDel = (name, isWait, tableSelectedRowKeys, isTree) => {
+    if (name === 'control') {
+      // const tableSelectedRowKeys = this.props[`${name}SelectedRowKeys`]; /* 删除时,选中行取删除参数传过来的 */
+      const {
+        controlData, treeSelectedKeys, [`${name}SelectedRowKeys`]: tableSelectedRowKeys, sModelsType, slaveSelectedRowKeys, slaveData,
+      } = this.props;
+      if (isTree) {
+        /* 删除该节点及所有子节点 */
+        const controlChildData = controlData.filter(item => commonUtils.isNotEmptyObject(item.sAllId) && item.sAllId.indexOf(treeSelectedKeys[0]) > -1 && item.sId !== treeSelectedKeys[0]);
+        if (commonUtils.isNotEmptyArr(controlData)) {
+          controlChildData.forEach((itemNew) => {
+            tableSelectedRowKeys.push(itemNew.sId);
+          });
+        }
+      }
+      if (commonUtils.isNotEmptyArr(tableSelectedRowKeys)) {
+        const materialsReturnData = this.otherTableDel('materials', tableSelectedRowKeys);
+        const processReturnData = this.otherTableDel('process', tableSelectedRowKeys);
+        const controlReturnData = this.props.onDataRowDel(name, isWait, tableSelectedRowKeys);
+        let treeState = [];
+        if (sModelsType === 'sales/salesOrderPack') {
+          const iSlaveIndex = slaveData.findIndex(item => item.sId === slaveSelectedRowKeys[0]);
+          if (iSlaveIndex > -1) {
+            const sSlaveId = slaveData[iSlaveIndex].sId;
+            treeState = this.props.onGetControlTreeData(controlReturnData.controlData, true, sSlaveId);
+          }
+        }
+        this.props.onSaveState({
+          ...materialsReturnData,
+          ...processReturnData,
+          ...controlReturnData,
+          ...treeState,
+        });
+        return true;
+      } else {
+        message.warn('请选择要删除的部件！');
+        return false;
+      }
+    } else {
+      return this.props.onDataRowDel(name, isWait, tableSelectedRowKeys);
+    }
+  };
+  /**   销售订单删除从表数据时也删除控制材料工序表数据   */
+  handleSlaveTableDel = (name, isWait, tableSelectedRowKeys) => {
+    const {
+      sModelsType, controlData, processData, materialsData,
+    } = this.props;
+    if (sModelsType === 'sales/salesOrder' && name === 'slave') {
+      const controlDataDel = controlData.filter(item => item.sSlaveId === tableSelectedRowKeys[0]);
+      const controlDataSelectedRowKeys = [];
+      if (!commonUtils.isEmpty(controlDataDel)) {
+        for (const item of controlDataDel) {
+          const materialsDataSelectedRowKey = item.sId;
+          controlDataSelectedRowKeys.push(materialsDataSelectedRowKey);
+        }
+        if (commonUtils.isNotEmptyArr(controlDataSelectedRowKeys)) {
+          this.props.onDataRowDel('control', isWait, controlDataSelectedRowKeys, true);
+        }
+        const materialsDataDel = materialsData.filter(item => item.sSlaveId === tableSelectedRowKeys[0]);
+        const materialsDataSelectedRowKeys = [];
+        if (!commonUtils.isEmpty(materialsDataDel)) {
+          for (const item of materialsDataDel) {
+            const materialsDataSelectedRowKey = item.sId;
+            materialsDataSelectedRowKeys.push(materialsDataSelectedRowKey);
+          }
+        }
+        if (commonUtils.isNotEmptyArr(materialsDataSelectedRowKeys)) {
+          this.props.onDataRowDel('materials', isWait, materialsDataSelectedRowKeys, true);
+        }
+        const processDataDel = processData.filter(item => item.sSlaveId === tableSelectedRowKeys[0]);
+        const processDataSelectedRowKeys = [];
+        if (!commonUtils.isEmpty(processDataDel)) {
+          for (const item of processDataDel) {
+            const processDataSelectedRowKey = item.sId;
+            processDataSelectedRowKeys.push(processDataSelectedRowKey);
+          }
+        }
+        if (commonUtils.isNotEmptyArr(processDataSelectedRowKeys)) {
+          this.props.onDataRowDel('process', isWait, processDataSelectedRowKeys, true);
+        }
+      }
+    }
+    return this.props.onDataRowDel(name, isWait, tableSelectedRowKeys);
+  };
+  handleSelect = async (name, selectConfig, selectData) => {
+    const {
+      [`${name}Data`]: tableData, [`${name}Config`]: tableConfig, masterData, masterConfig, controlSelectedRowKeys, sModelsId, token, app, tableName, sModelsType,
+    } = this.props;
+    const tableSelectedRowKeys = [];
+    if (sModelsType !== '' && sModelsType.includes('sales/') && name === 'productProcessInfo') { /* 销售订单调用工艺卡 */
+      const {
+        controlConfig, materialsConfig, processConfig, slaveSelectedRowKeys, slaveData,
+      } = this.props;
+      const iIndex = slaveData.findIndex(item => slaveSelectedRowKeys.includes(item.sId));
+      if (iIndex > -1 && commonUtils.isNotEmptyArr(selectData)) {
+        const tableDataRow = slaveData[iIndex]; /* 从表选中行 */
+        let { controlData, materialsData, processData } = this.props;
+        const sId = tableDataRow.sId;
+        const bCkxCopyFromTechnology = '1'; // app.systemData.filter(item => item.sName === 'CkxCopyFromTechnology')[0].sValue;
+        if (bCkxCopyFromTechnology === '1' && tableDataRow.sProductId !== tableDataRow.sProductName) {
+          const controlSelectedData = controlData.filter(item => item.sSlaveId === sId);
+          if (commonUtils.isNotEmptyObject(controlSelectedData)) {
+            const controlSelectedRowKeys = [];
+            controlSelectedData.forEach((item) => {
+              controlSelectedRowKeys.push(item.sId);
+            });
+            const materialsReturnData = this.otherTableDel('materials', controlSelectedRowKeys);
+            const processReturnData = this.otherTableDel('process', controlSelectedRowKeys);
+            const controlReturnData = this.props.onDataRowDel('control', true, controlSelectedRowKeys);
+            controlData = controlReturnData.controlData;
+            materialsData = materialsReturnData.materialsData;
+            processData = processReturnData.processData;
+            this.props.onSaveState({
+              ...materialsReturnData,
+              ...processReturnData,
+              ...controlReturnData,
+            });
+          }
+          const sCustomerId = selectData[0].sCustomerId;
+          const sProductId = selectData[0].sProductId;
+          const sProductIdArray = [];
+          sProductIdArray.push(sProductId);
+          const sProductIds = sProductIdArray.toString();
+          const condition = {
+            sCustomerId, sProductIds,
+          };
+          const dataUrl = `${commonConfig.server_host}salesorder/getProcessCardDataByCustomIdProductId/?sModelsId=${sModelsId}`;
+          const dataReturn = (await commonServices.postValueService(token, condition, dataUrl)).data;
+          const config = this.props.masterConfig.gdsconfigformslave.filter(item => item.sControlName.includes('BtnCopyFrom.productProcessInfo'));
+          if (dataReturn.code === 1) {
+            const returnData = dataReturn.dataset.rows[0];
+            const copyToControlConfig = config.filter(item => item.sControlName.toLowerCase().includes('.control'));
+            const copyToMaterialsConfig = config.filter(item => item.sControlName.toLowerCase().includes('.materials'));
+            const copyToProcessConfig = config.filter(item => item.sControlName.toLowerCase().includes('.process'));
+            const controlAssignField = commonUtils.isNotEmptyArr(copyToControlConfig) ? copyToControlConfig[0].sAssignField : '';
+            const materialsAssignField = commonUtils.isNotEmptyArr(copyToMaterialsConfig) ? copyToMaterialsConfig[0].sAssignField : '';
+            const processAssignField = commonUtils.isNotEmptyArr(copyToProcessConfig) ? copyToProcessConfig[0].sAssignField : '';
+            const newCopyTo = {};
+            newCopyTo.master = masterData;
+            newCopyTo.slave = commonUtils.isEmptyArr(tableData) ? {} : tableData;
+            if (commonUtils.isNotEmptyArr(returnData.controlData)) {
+              const treeCopyNodes = new Map();
+              // eslint-disable-next-line no-loop-func
+              returnData.controlData.forEach((controlItem) => {
+                newCopyTo.control = controlItem;
+                let controlRow = commonFunc.getDefaultData(controlConfig, newCopyTo); // 取默认值
+                controlRow = { ...controlRow, ...commonFunc.getAssignFieldValue(controlAssignField, controlItem, newCopyTo) }; // 取赋值字段
+                controlRow.handleType = 'add';
+                controlRow.sId = commonUtils.createSid();
+                controlRow.sSlaveId = tableDataRow.sId;
+                controlRow.sParentId = masterData.sId;
+                if (sModelsType === 'sales/salesOrderPack') { /* 树形 */
+                  /* CopyTo时sAllId,sControlParentId 设置 */
+                  const sAllOldId = controlItem.sAllId;
+                  let arr = [];
+                  if (commonUtils.isNotEmptyObject(sAllOldId)) {
+                    arr = sAllOldId.split(',');
+                  }
+                  const newId = controlRow.sId;
+                  let sOldParentId = '';
+                  let sNewParentAllId = '';
+                  if (arr.length < 2) { /* 根节点复制 */
+                    controlRow.sAllId = newId;
+                    sOldParentId = newId;
+                    sNewParentAllId = newId;
+                  } else {
+                    sOldParentId = arr[arr.length - 2];
+                    if (treeCopyNodes.has(sOldParentId)) {
+                      sNewParentAllId = treeCopyNodes.get(sOldParentId);
+                    } else {
+                      const obj = arr[arr.length - 1];
+                      sNewParentAllId = sAllOldId.replace((`,${obj}`), '');
+                    }
+                    const sNewArr = sNewParentAllId.split(',');
+                    controlRow.sControlParentId = sNewArr[sNewArr.length - 1];
+                    sNewParentAllId = `${sNewParentAllId},${newId}`;
+                    controlRow.sAllId = sNewParentAllId;
+                  }
+                  treeCopyNodes.set(controlItem.sId, sNewParentAllId);
+                }
+                controlData.push(controlRow);
+
+                if (commonUtils.isNotEmptyArr(returnData.materialsData)) {
+                  returnData.materialsData.filter(item => item.sControlId === controlItem.sId)
+                    .forEach((materialsItem) => {
+                      newCopyTo.materials = materialsItem;
+                      let materialsRow = commonFunc.getDefaultData(materialsConfig, newCopyTo); // 取默认值
+                      materialsRow = { ...materialsRow, ...commonFunc.getAssignFieldValue(materialsAssignField, materialsItem, newCopyTo) }; // 取赋值字段
+                      materialsRow.handleType = 'add';
+                      materialsRow.sId = commonUtils.createSid();
+                      materialsRow.sSlaveId = tableDataRow.sId;
+                      materialsRow.sParentId = masterData.sId;
+                      materialsRow.sControlId = controlRow.sId;
+                      materialsRow.sPartsName = controlRow.sPartsName;
+
+                      materialsData.push(materialsRow);
+                    });
+                }
+
+                if (commonUtils.isNotEmptyArr(returnData.processData)) {
+                  returnData.processData.filter(item => item.sControlId === controlItem.sId)
+                    .forEach((processItem) => {
+                      newCopyTo.process = processItem;
+                      let processRow = commonFunc.getDefaultData(processConfig, newCopyTo); // 取默认值
+                      processRow = { ...processRow, ...commonFunc.getAssignFieldValue(processAssignField, processItem, newCopyTo) }; // 取赋值字段
+                      processRow.handleType = 'add';
+                      processRow.sId = commonUtils.createSid();
+                      processRow.sSlaveId = tableDataRow.sId;
+                      processRow.sParentId = masterData.sId;
+                      processRow.sControlId = controlRow.sId;
+                      processRow.sPartsName = controlRow.sPartsName;
+                      processData.push(processRow);
+                    });
+                }
+              });
+            }
+            if (commonUtils.isNotEmptyArr(returnData.materialsData)) {
+              // eslint-disable-next-line no-loop-func
+              returnData.materialsData.filter(item => item.sType === '2')
+                .forEach((materialsItem) => {
+                  newCopyTo.materials = materialsItem;
+                  let materialsRow = commonFunc.getDefaultData(materialsConfig, newCopyTo); // 取默认值
+                  materialsRow = { ...materialsRow, ...commonFunc.getAssignFieldValue(materialsAssignField, materialsItem, newCopyTo) }; // 取赋值字段
+                  materialsRow.handleType = 'add';
+                  materialsRow.sId = commonUtils.createSid();
+                  materialsRow.sSlaveId = tableDataRow.sId;
+                  materialsRow.sParentId = masterData.sId;
+                  materialsData.push(materialsRow);
+                });
+            }
+            if (commonUtils.isNotEmptyArr(returnData.processData)) {
+              // eslint-disable-next-line no-loop-func
+              returnData.processData.filter(item => item.sType === '3')
+                .forEach((processItem) => {
+                  newCopyTo.process = processItem;
+                  let processRow = commonFunc.getDefaultData(processConfig, newCopyTo); // 取默认值
+                  processRow = { ...processRow, ...commonFunc.getAssignFieldValue(processAssignField, processItem, newCopyTo) }; // 取赋值字段
+                  processRow.handleType = 'add';
+                  processRow.sId = commonUtils.createSid();
+                  processRow.sSlaveId = tableDataRow.sId;
+                  processRow.sParentId = masterData.sId;
+                  processData.push(processRow);
+                });
+            }
+            /* 包装订单 生成树形 */
+            let treeState = {};
+            if (sModelsType === 'sales/salesOrderPack') {
+              treeState = this.props.onGetControlTreeData(controlData, true);
+            }
+            this.props.onSaveState({
+              controlData,
+              materialsData,
+              processData,
+              ...treeState,
+            });
+          }
+        }
+      }
+    } else if (name === 'productProcessInfoAbandon') { /* 暂未使用的调用工艺卡功能 */
+      if (commonUtils.isNotEmptyArr(selectData)) {
+        let slaveData = [];
+        let controlData = [];
+        let materialsData = [];
+        let processData = [];
+        let sConfigMasterIdSlave = '';
+        let sConfigMasterIdControl = '';
+        let sConfigMasterIdMaterials = '';
+        let sConfigMasterIdProcess = '';
+        const selectRowData = selectData[0];
+        const sConfigIdString = masterConfig.gdsconfigformslave.filter(item => item.sName === 'sConfigId')[0].showDropDown;
+        if (commonUtils.isNotEmptyStr(sConfigIdString)) {
+          const sConfigId = JSON.parse(sConfigIdString);
+          sConfigMasterIdSlave = sConfigId.sConfigMasterIdSlave;
+          sConfigMasterIdControl = sConfigId.sConfigMasterIdControl;
+          sConfigMasterIdMaterials = sConfigId.sConfigMasterIdMaterials;
+          sConfigMasterIdProcess = sConfigId.sConfigMasterIdProcess;
+        }
+        if (commonUtils.isEmptyStr(sConfigMasterIdSlave)) {
+          message.warning(commonFunc.showMessage(app.commonConst, 'slaveParameterErro'));
+        }
+        if (commonUtils.isEmptyStr(sConfigMasterIdControl)) {
+          message.warning(commonFunc.showMessage(app.commonConst, 'controlParameterErro'));
+        }
+        if (commonUtils.isEmptyStr(sConfigMasterIdMaterials)) {
+          message.warning(commonFunc.showMessage(app.commonConst, 'materialsParameterErro'));
+        }
+        if (commonUtils.isEmptyStr(sConfigMasterIdProcess)) {
+          message.warning(commonFunc.showMessage(app.commonConst, 'processParameterErro'));
+        }
+        const slaveUrl = `${commonConfig.server_host}business/getBusinessDataByFormcustomId/${sConfigMasterIdSlave}?sModelsId=${sModelsId}`;
+        const value = { sSqlCondition: { sParentId: selectRowData.sId } };
+        const slaveReturnData = (await commonServices.postValueService(token, value, slaveUrl)).data;
+        if (slaveReturnData.code === 1) {
+          slaveData = slaveReturnData.dataset.rows[0].dataSet;
+          slaveData.forEach((item) => {
+            item.handleType = 'add';
+            item.sId = commonUtils.createSid();
+            item.sParentId = masterData.sId;
+          });
+        } else {
+          this.props.getServiceError(slaveReturnData);
+        }
+
+        const controlUrl = `${commonConfig.server_host}business/getBusinessDataByFormcustomId/${sConfigMasterIdControl}?sModelsId=${sModelsId}`;
+        const controlReturnData = (await commonServices.postValueService(token, value, controlUrl)).data;
+        if (controlReturnData.code === 1) {
+          controlData = controlReturnData.dataset.rows[0].dataSet;
+          controlData.forEach((item) => {
+            item.handleType = 'add';
+            item.sId = commonUtils.createSid();
+            item.sParentId = masterData.sId;
+          });
+        } else {
+          this.props.getServiceError(controlReturnData);
+        }
+        const materialsUrl = `${commonConfig.server_host}business/getBusinessDataByFormcustomId/${sConfigMasterIdMaterials}?sModelsId=${sModelsId}`;
+        const materialsReturnData = (await commonServices.postValueService(token, value, materialsUrl)).data;
+        if (materialsReturnData.code === 1) {
+          materialsData = materialsReturnData.dataset.rows[0].dataSet;
+          materialsData.forEach((item) => {
+            item.handleType = 'add';
+            item.sId = commonUtils.createSid();
+            item.sParentId = masterData.sId;
+          });
+        } else {
+          this.props.getServiceError(materialsReturnData);
+        }
+        const processUrl = `${commonConfig.server_host}business/getBusinessDataByFormcustomId/${sConfigMasterIdProcess}?sModelsId=${sModelsId}`;
+        const processReturnData = (await commonServices.postValueService(token, value, processUrl)).data;
+        if (processReturnData.code === 1) {
+          processData = processReturnData.dataset.rows[0].dataSet;
+          processData.forEach((item) => {
+            item.handleType = 'add';
+            item.sId = commonUtils.createSid();
+            item.sParentId = masterData.sId;
+          });
+        } else {
+          this.props.getServiceError(processReturnData);
+        }
+        this.props.onSaveState({
+          processData, materialsData, controlData, slaveData, [`${name}ChooseVisible`]: false, [`${name}SelectedRowKeys`]: tableSelectedRowKeys,
+        });
+      }
+    } else if (tableName === 'slave' && selectConfig.sControlName === 'BtnChooseMaterials') {
+      this.props.onSelect('slave', selectConfig, selectData);
+    } else if (sModelsType.includes('cashier/') && selectConfig.sControlName === 'BtnImportFormData') {
+      const { slaveData } = this.props;
+      let tableDataNew = [];
+      if (commonUtils.isNotEmptyArr(slaveData)) {
+        tableDataNew = slaveData;
+        tableDataNew.forEach((item, index) => {
+          const handleType = item.handleType;
+          if (commonUtils.isEmptyObject(handleType) || handleType === 'update') {
+            tableDataNew[index] = { ...item, handleType: 'del' };
+          }
+        });
+      }
+      if (commonUtils.isNotEmptyArr(selectData)) {
+        selectData.forEach((item) => {
+          let tableDataRow = {}; // 取默认值
+          tableDataRow = { ...tableDataRow, ...commonFunc.getAssignFieldValue(selectConfig.sAssignField, item) }; // 取赋值字段
+          tableDataRow.handleType = 'add';
+          tableDataRow.sId = commonUtils.createSid();
+          tableDataRow.sParentId = masterData.sId;
+          tableDataNew.push(tableDataRow);
+        });
+        this.props.onSaveState({ slaveData: tableDataNew, importFormDataVisible: false });
+      }
+    } else {
+      const { controlData, slaveData, slaveSelectedRowKeys } = this.props;
+      const iIndex = commonUtils.isNotEmptyArr(controlSelectedRowKeys) ? controlData.findIndex(item => item.sId === controlSelectedRowKeys[0]) : -1;
+      if (commonUtils.isNotEmptyArr(selectData)) {
+        selectData.forEach((item) => {
+          const newCopyTo = {};
+          newCopyTo.master = masterData;
+          if (iIndex > -1) {
+            newCopyTo.control = controlData[iIndex];
+          }
+          let tableDataRow = commonFunc.getDefaultData(tableConfig, newCopyTo); // 取默认值
+          tableDataRow = { ...tableDataRow, ...commonFunc.getAssignFieldValue(selectConfig.sAssignField, item, newCopyTo) }; // 取赋值字段
+          tableDataRow.handleType = 'add';
+          tableDataRow.sId = commonUtils.createSid();
+          tableDataRow.sParentId = masterData.sId;
+          if (this.props.sModelsType.includes('sales/salesOrder')) {
+            const iSlaveIndex = commonUtils.isNotEmptyArr(slaveSelectedRowKeys) ? slaveData.findIndex(item => item.sId === slaveSelectedRowKeys[0]) : -1;
+            if (iSlaveIndex > -1) {
+              tableDataRow.sSlaveId = slaveData[iSlaveIndex].sId;
+            }
+          }
+          if (iIndex > -1 && tableDataRow.sType !== '3') {
+            tableDataRow.sControlId = controlData[iIndex].sId;
+            tableDataRow.sPartsName = controlData[iIndex].sPartsName;
+            tableData.push(tableDataRow);
+          } else if (tableDataRow.sType === '3') {
+            tableData.push(tableDataRow);
+          }
+          tableSelectedRowKeys.push(tableDataRow.sId);
+        });
+      }
+      const tableDataNew = this.sortData(controlData, tableData);
+      this.props.onSaveState({ [`${name}Data`]: tableDataNew, [`${name}ChooseVisible`]: false, [`${name}SelectedRowKeys`]: tableSelectedRowKeys });
+    }
+  };
+
+  /**   树节点选中   */
+  handleTreeSelect = (name, checkedKeys, e) => {
+    let { controlSelectedRowKeys } = this.props;
+    controlSelectedRowKeys = checkedKeys; /* 把树形选中节点赋值给表格部件选中节点 */
+    this.props.onTreeSelect(name, checkedKeys, e);
+    this.props.onSaveState({
+      controlSelectedRowKeys,
+    });
+  };
+
+  sortData = (tableData, processData) => {
+    processData.sort((g1, g2) => {
+      const iIndex1 = tableData.findIndex(item => item.sId === g1.sControlId) === -1 ? 999 : tableData.findIndex(item => item.sId === g1.sControlId);
+      let sPartOrder1 = `0000${iIndex1}`;
+      sPartOrder1 = sPartOrder1.substring(sPartOrder1.length - 3);
+      let sOrder1 = `000${g1.iOrder}`;
+      sOrder1 = sOrder1.substring(sOrder1.length - 3);
+
+      const iIndex2 = tableData.findIndex(item => item.sId === g2.sControlId) === -1 ? 999 : tableData.findIndex(item => item.sId === g2.sControlId);
+      let sPartOrder2 = `0000${iIndex2}`;
+      sPartOrder2 = sPartOrder2.substring(sPartOrder2.length - 3);
+      let sOrder2 = `000${g2.iOrder}`;
+      sOrder2 = sOrder2.substring(sOrder2.length - 3);
+      return parseInt(sPartOrder1 + g1.sType + sOrder1, 10) - parseInt(sPartOrder2 + g2.sType + sOrder2, 10);
+    });
+    return processData;
+  };
+  handleGetDataOk = () => {
+    this.props.onDataImport('zero');
+  }
+  handleGetDataCancel = () => {
+    this.props.onDataImport('all');
+  }
+  colseGetDataVisible = () => {
+    this.props.onSaveState({ isGetDataVisible: false });
+  }
+
+  /* 审核备注文本框改变事件 */
+  textChange= (e, record) => {
+    const sCheckRemark = commonUtils.isNotEmptyObject(record) && commonUtils.isNotEmptyObject(e.target.value) ? e.target.value : '';
+    this.props.onSaveState({ sCheckRemark });/* 审核备注 */
+  }
+  // ----------------------------数据修改回带end  ---------------------------- //
+
+  render() {
+    const {
+      pageLoading, masterConfig, visible, checkConditions, checkPersonData, visibleModal, processChooseVisible, materialsChooseVisible, app, sTabId, sModelsType, enabled, slaveSelectedRowKeys,
+    } = this.props;
+    const checkCondition = commonFunc.showMessage(app.commonConst, 'checkCondition');/* 审核条件 */
+    const checkSmemo = commonFunc.showMessage(app.commonConst, 'checkSmemo');/* 备注 */
+    const columns = [{
+      title: checkCondition,
+      dataIndex: 'condition',
+      key: 'condition',
+    }, {
+      title: checkSmemo,
+      dataIndex: 'sMemo',
+      key: 'sMemo',
+      render: (text, record) => {
+        return (
+          <Form>
+            <Input onChange={(e) => { this.textChange(e, record); }} />
+          </Form>
+        );
+      },
+    }];
+    let chooseProcessConfig;
+    let onChooseProcessIndex;
+    /* 获取toolbar 选择工序 */
+    if (commonUtils.isNotEmptyObject(masterConfig)) {
+      onChooseProcessIndex = masterConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'BtnChooseProcess');
+      if (onChooseProcessIndex > -1) {
+        chooseProcessConfig = this.props.masterConfig.gdsconfigformslave[onChooseProcessIndex];
+      }
+    }
+    /* 获取toolbar 选择材料 */
+    let chooseMaterialsConfig;
+    const modalWidth = '1132';
+    const fixedAutoHeight = sModelsType === 'sales/salesOrderPack' ? 120 : 66;
+    if (commonUtils.isNotEmptyObject(masterConfig)) {
+      const iIndex = masterConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'BtnChooseMaterials');
+      if (iIndex > -1) {
+        chooseMaterialsConfig = masterConfig.gdsconfigformslave[iIndex];
+      }
+    }
+    /* 若销售订单从表选中行被工单或其他调用 则材料与工艺只能查看不能操作s */
+    let bUsed = enabled;
+    if (sModelsType.includes('sales/salesOrder') && enabled && commonUtils.isNotEmptyArr(slaveSelectedRowKeys)) {
+      const { slaveData } = this.props;
+      const iSlaveDataIndex = slaveData.findIndex(item => slaveSelectedRowKeys.includes(item.sId));
+      if (iSlaveDataIndex > -1) {
+        const sWorkOrderUsed = slaveData[iSlaveDataIndex].sWorkOrderUsed;
+        if (commonUtils.isNotEmptyObject(sWorkOrderUsed)) {
+          bUsed = false;
+        }
+      }
+    }
+
+    const controlPropsType = {
+      ...commonBusiness.getTableTypes('control', this.props),
+      tableProps: {
+        CalLastWidth: modalWidth, AutoTableHeight: fixedAutoHeight, setCopyAll, setProcess, setMaterial, chooseProcessConfigRow: chooseProcessConfig, chooseMaterialsConfigRow: chooseMaterialsConfig, onRow: (record) => { return { onClick: () => { this.onRowClick('control', record); } }; },
+      },
+      filteredValue: this.props.slaveSelectedRowKeys,
+      onFilterData: this.handleFilterSlaveData,
+      OnGetFilterData: this.handleGetFilterData,
+      onAddRow: this.handleTableAdd,
+      onDelRow: this.handleTableDel,
+      onKeyDown: this.props.onKeyDown,
+      enabled: bUsed,
+    };
+    const name = 'controlTree';
+    const treeProps = {
+      ...commonBusiness.getTreeTypes('tree', this.props),
+      isSearch: false,
+      checkable: false,
+      disabled: false,
+      checkedAll: false,
+      unChecked: false,
+      [`${name}Column`]: this.props[`${name}Column`],
+      [`${name}Config`]: this.props[`${name}Config`],
+      [`${name}Data`]: this.props[`${name}Data`],
+      getFloatNum: this.props.getFloatNum,
+      getSqlDropDownData: this.props.getSqlDropDownData,
+      getSqlCondition: this.props.getSqlCondition,
+      handleSqlDropDownNewRecord: this.props.handleSqlDropDownNewRecord,
+      getDateFormat: this.props.getDateFormat,
+      onDoubleClick: this.props.onDoubleClick,
+      onSelect: this.handleTreeSelect,
+      expandedKeys: this.props.expandedKeys,
+      showLine: true,
+    };
+    const materialsPropsType = {
+      ...commonBusiness.getTableTypes('materials', this.props),
+      tableProps: { CalLastWidth: modalWidth, AutoTableHeight: fixedAutoHeight },
+      filteredValue: this.props.controlSelectedRowKeys,
+      onFilterData: this.handleFilterData,
+      OnGetFilterData: this.handleGetFilterData,
+      onAddRow: this.handleTableAdd,
+      onKeyDown: this.props.onKeyDown,
+      enabled: bUsed,
+    };
+    const processPropsType = {
+      ...commonBusiness.getTableTypes('process', this.props),
+      tableProps: { CalLastWidth: modalWidth, AutoTableHeight: 132 },
+      filteredValue: this.props.controlSelectedRowKeys,
+      onFilterData: this.handleFilterData,
+      OnGetFilterData: this.handleGetFilterData,
+      onAddRow: this.handleTableAdd,
+      onChooseProcessRow: this.handleTableChooseProcess,
+      onKeyDown: this.props.onKeyDown,
+      enabled: bUsed,
+    };
+    let searchProcessType = {};
+    // let chooseProcessConfig = {};
+    if (commonUtils.isNotEmptyObject(this.props.processChooseData)) {
+      // const iIndex = this.props.processConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'BtnChooseProcess');
+      // if (iIndex > -1) {
+      //   chooseProcessConfig = this.props.processConfig.gdsconfigformslave[iIndex];
+      // }
+
+      searchProcessType = {
+        app: {
+          ...this.props.app,
+          currentPane: {
+            name: 'process',
+            config: chooseProcessConfig,
+            conditonValues: this.props.getSqlCondition(chooseProcessConfig),
+            title: this.props.processChooseData.sMenuName,
+            route: this.props.processChooseData.sName,
+            formId: this.props.processChooseData.sId,
+            key: this.props.sModelsId + this.props.processChooseData.sId,
+            sModelsType: this.props.processChooseData.sModelType,
+            select: this.handleSelect,
+            selectCancel: this.props.onSelectCancel,
+          },
+        },
+        dispatch: this.props.dispatch,
+        content: this.props.content,
+        id: new Date().getTime().toString(),
+        realizeHeight: this.props.realizeHeight, /* 拖动偏移高度 */
+      };
+    }
+
+
+    let searchMaterialsType = {};
+    // let chooseMaterialsConfig = {};
+    if (commonUtils.isNotEmptyObject(this.props.materialsChooseData) && this.props.tableName !== 'slave') {
+      // const iIndex = this.props.materialsConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'BtnChooseMaterials');
+      // if (iIndex > -1) {
+      //   chooseMaterialsConfig = this.props.materialsConfig.gdsconfigformslave[iIndex];
+      // }
+
+      searchMaterialsType = {
+        app: {
+          ...this.props.app,
+          currentPane: {
+            name: 'materials',
+            config: chooseMaterialsConfig,
+            conditonValues: this.props.getSqlCondition(chooseMaterialsConfig),
+            title: this.props.materialsChooseData.sMenuName,
+            route: this.props.materialsChooseData.sName,
+            formId: this.props.materialsChooseData.sId,
+            key: this.props.sModelsId + this.props.materialsChooseData.sId,
+            sModelsType: this.props.materialsChooseData.sModelsType,
+            select: this.handleSelect,
+            selectCancel: this.props.onSelectCancel,
+          },
+        },
+        dispatch: this.props.dispatch,
+        content: this.props.content,
+        id: new Date().getTime().toString(),
+        realizeHeight: this.props.realizeHeight,
+      };
+    }
+    const pane = app.panes.filter(paneTmp => paneTmp.key === sTabId)[0];
+    const setMaterailRemark = commonFunc.showMessage(app.commonConst, 'setMaterailRemark');/* 选择材料与工艺 */
+    const setProcessTitle = commonFunc.showMessage(app.commonConst, 'setProcess');/* 选择工序标题 */
+    const setMaterialTitle = commonFunc.showMessage(app.commonConst, 'setMaterial');/* 选择材料标题 */
+    const btnSure = commonFunc.showMessage(app.commonConst, 'btnSure');/* 确认 */
+    const check = commonFunc.showMessage(app.commonConst, 'check');/* 审核 */
+    const BtnClose = commonFunc.showMessage(app.commonConst, 'BtnClose');/* 关闭 */
+    const checkPerson = commonFunc.showMessage(app.commonConst, 'checkPerson');/* 审核人 */
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    const operateAdd = <a title="添加同级" alt="" onClick={this.props.enabled ? this.handleTableAdd.bind(this, 'control', false, 'sameNode') : null}>{this.props.enabled ? setAdd.img : setAdd.disableimg} </a>;
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    const operateAddChild = <a title="添加子级" onClick={this.props.enabled ? this.handleTableAdd.bind(this, 'control', false, 'childNode') : null}>{this.props.enabled ? setAddChild.img : setAddChild.disableimg }</a>;
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    const operateCopy = <a title="复制" onClick={this.props.enabled ? this.props.onDataRowCopy.bind(this, 'control', false, true) : null}>{this.props.enabled ? setCopy.img : setCopy.disableimg}</a>;
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    const operateUpdate = <a title="复制全部" onClick={this.props.enabled ? this.props.onDataRowCopyAll.bind(this, 'control', false, true) : null}>{this.props.enabled ? setCopyAll.img : setCopyAll.disableimg }</a>;
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    const operateDel = <a title="删除" onClick={this.props.enabled ? this.handleTableDel.bind(this, 'control', true, '', true) : null}>{this.props.enabled ? setDelete.img : setDelete.disableimg}</a>;
+    return (
+      <div>
+        <Spin spinning={pageLoading}>
+          <div>
+            <BillComponent
+              {...this.props}
+              {...this.state}
+              onUploadChangeFile={this.handleUploadChangeFile} /* xls文件导入 */
+              onUploadChange={this.handleUploadChange} /* 表格图片上传 */
+              onBeforeUpload={this.handleBeforeUpload}
+              onGetDataCancel={this.handleGetDataCancel}
+              onGetDataOk={this.handleGetDataOk}
+              colseGetDataVisible={this.colseGetDataVisible}
+              getMenuStatus={this.getMenuStatus}
+              onUploadPropsSales={this.handleUploadPropsSales}
+              onDataRowModal={this.handleTableModal}
+              onDataRowDel={this.handleSlaveTableDel}
+              onDoubleClick={this.onDoubleClick}
+              onSelectTree={this.handleTreeSelect}
+              handleCancelModal={this.handleCancelModal}
+              setMaterialTitle={setMaterialTitle}
+              onSelect={this.handleSelect}
+            />
+            {
+              visible ?
+                <AntdDraggableModal
+                  title={check}
+                  visible={visible}
+                  onCancel={this.handleCancel}
+                  onSaveState={this.props.onSaveState}
+                  footer={[
+                    <Button key="back" onClick={this.handleCancel}>{BtnClose}</Button>,
+                    <Button key="submit" type="primary" onClick={this.handleOk.bind(this, 1, 1, true)}>
+                      {btnSure}
+                    </Button>,
+              ]}
+                >
+                  <Table columns={columns} dataSource={checkConditions} bordered pagination={false} className={styles.checkTable} />
+                  <div style={{ float: 'left', width: '15%' }}>{checkPerson}</div>
+                  <div style={{ float: 'left', width: '60%' }}>
+                    <Checkbox.Group style={{ width: '100%' }} onChange={this.onChange}>
+                      <Row>
+                        { commonUtils.isNotEmptyObject(checkPersonData) ?
+                          checkPersonData.map((item) => {
+                            return (
+                              <Col span={8}>
+                                <Checkbox value={item.sUserId}>{item.sUserName}</Checkbox>
+                              </Col>
+                            );
+                          })
+                          : ''
+                      }
+                      </Row>
+                    </Checkbox.Group>
+                  </div>
+                </AntdDraggableModal>
+              : ''
+            }
+            {
+              visibleModal ?
+                <AntdDraggableModal
+                  title={setMaterailRemark}
+                  width="1200"
+                  bodyStyle={{ paddingBottom: 0, zIndex: 1000 }}
+                  visible={pane.notCurrentPane ? false : visibleModal}
+                  onCancel={this.handleCancelModal.bind(this, 'visibleModal')}
+                  onSaveState={this.props.onSaveState}
+                  forbidResize
+                  footer={[
+                    <Button key="back" onClick={this.handleCancelModal.bind(this, 'visibleModal')}>{BtnClose}</Button>,
+                    <Button key="submit" type="primary" onClick={this.handleOkModal.bind(this)}>
+                      {btnSure}
+                    </Button>,
+                  ]}
+                >
+                  {
+                    (pane.notCurrentPane ? false : processChooseVisible) ?
+                      <AntdDraggableModal
+                        width={1100}
+                        className="MProcess"
+                        bodyStyle={{ paddingBottom: 0, maxHeight: 520, zIndex: 2000 }}
+                        title={commonUtils.isEmptyObject(searchProcessType) ? setProcessTitle : searchProcessType.app.currentPane.title}
+                        onCancel={this.handleCancelModal.bind(this, 'processChooseVisible')}
+                        visible={pane.notCurrentPane ? false : processChooseVisible}
+                        onSaveState={this.props.onSaveState}
+                        footer={null}
+                      >
+                        <CommonListSelectTree {...searchProcessType} />
+                      </AntdDraggableModal>
+                      : ''
+                  }
+                  {
+                    (pane.notCurrentPane ? false : materialsChooseVisible) ?
+                      <AntdDraggableModal
+                        bodyStyle={{ paddingBottom: 0, maxHeight: 520, zIndex: 2000 }}
+                        className="MProcess"
+                        width={1100}
+                        title={commonUtils.isEmptyObject(searchMaterialsType) ? setMaterialTitle : searchMaterialsType.app.currentPane.title}
+                        onCancel={this.handleCancelModal.bind(this, 'materialsChooseVisible')}
+                        visible={pane.notCurrentPane ? false : materialsChooseVisible}
+                        onSaveState={this.props.onSaveState}
+                        footer={null}
+                      >
+                        <CommonListSelect {...searchMaterialsType} />
+                      </AntdDraggableModal>
+                      : ''
+                  }
+                  <div id="ModalMaterialRemark" >
+                    {
+                        sModelsType === 'sales/salesOrderPack' ?
+                          <div style={{
+ marginTop: 0, height: '180px', overflowY: 'hidden', overflowX: 'hidden',
+}}
+                          >
+                            <div className="xly-bill-pack">
+                              <Sider className="controlhandcover">
+                                <div className="xly-control">
+                                  <div style={{ backgroundColor: '#f5f5f5', height: '30px', lineHeight: '30px' }}>
+                                    <span style={{
+ fontSize: '12px', color: 'rgba(0, 0, 0, 0.85)', fontWeight: '600', paddingLeft: '8px',
+}}
+                                    >部件信息
+                                    </span>
+                                  </div>
+                                  <div className="xly-control-tree"><StaticEditTree {...treeProps} /></div>
+                                  <div className="xly-control-operate" >
+                                    <span>{operateAdd}</span>
+                                    <span>{operateAddChild}</span>
+                                    <span>{operateCopy}</span>
+                                    <span>{operateUpdate}</span>
+                                    <span>{operateDel}</span>
+                                  </div>
+                                </div>
+                              </Sider>
+                              <div style={{ overflowX: 'auto', overflowY: 'hidden' }}>
+                                <StaticEditTable {...controlPropsType} footer="hidden" setOpterationColumn="Y" />
+                              </div>
+                            </div>
+                          </div> :
+                          <div style={{ marginTop: 0, overflowY: 'hidden' }} >
+                            <StaticEditTable {...controlPropsType} footer="hidden" setOpterationColumn="Y" />
+                          </div>
+                      }
+                    <div style={{ marginTop: 0, overflowY: 'hidden' }}>
+                      <StaticEditTable {...materialsPropsType} footer="hidden" setOpterationColumn="Y" />
+                    </div>
+                    <div style={{ marginTop: 0, overflowY: 'hidden' }} id="chooseProcessModal">
+                      <StaticEditTable {...processPropsType} footer="hidden" setOpterationColumn="Y" />
+                    </div>
+                  </div>
+                </AntdDraggableModal>
+              : ''}
+          </div>
+        </Spin>
+      </div>
+    );
+  }
+}
+
+const BillComponent = Form.create({
+  mapPropsToFields(props) {
+    const { masterData, masterConfig } = props;
+    const obj = commonFunc.mapPropsToFields(masterData, Form, masterConfig);
+    return obj;
+  },
+})((props) => {
+  const {
+    form,
+    onReturnForm,
+    slaveData,
+    slavePagination,
+    onlyMaster,
+    sModelsId,
+    app,
+    masterConfig,
+    slaveConfig,
+    isSmall,
+    isGetDataVisible,
+    onGetDataCancel,
+    onGetDataOk,
+    colseGetDataVisible,
+    sModelsType,
+    masterData,
+    previewUrl,
+    slaveSelectedRowKeys,
+  } = props;
+  /*   回带表单   */
+  onReturnForm(form);
+  const pagination = {
+    pageSize: commonConfig.pageSize,
+    total: commonUtils.isEmptyArr(slaveData) ? 0 : slaveData.length,
+    current: commonUtils.isEmptyObject(slavePagination) ? 1 : slavePagination.current,
+    ...slavePagination,
+    // showQuickJumper: true,
+    hideOnSinglePage: true,
+    size: isSmall ? 'small' : 'large',
+    pageSizeOptions: commonConfig.pageSizeOptions,
+    showSizeChanger: !isSmall,
+    showQuickJumper: !isSmall,
+  };
+  const templateProps = props.formData.filter(item => item.sGrd === 'importTemplate')[0];
+  let setMaterialRemark = {
+    title: '材料与工艺',
+    width: { width },
+    height: { height },
+    img: <img src={MaterialRemarkIcon} alt="材料与工艺" width={width} height={height} />,
+    disableimg: <img src={DisMaRemarklIcon} alt="材料与工艺不可用" width={width} height={height} />,
+  };
+  /* 获取toolbar 选择材料 */
+  let searchMaterialsType = {};
+  let chooseMaterialsConfig = {};
+  if (commonUtils.isNotEmptyObject(slaveConfig)) {
+    const iIndex = slaveConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'BtnChooseMaterials');
+    if (iIndex > -1) {
+      chooseMaterialsConfig = slaveConfig.gdsconfigformslave[iIndex];
+    }
+  }
+  if (commonUtils.isNotEmptyObject(props.materialsChooseData)) {
+    searchMaterialsType = {
+      app: {
+        ...props.app,
+        currentPane: {
+          name: 'materials',
+          config: chooseMaterialsConfig,
+          conditonValues: props.getSqlCondition(chooseMaterialsConfig),
+          title: props.materialsChooseData.sMenuName,
+          route: props.materialsChooseData.sName,
+          formId: props.materialsChooseData.sId,
+          key: sModelsId + props.materialsChooseData.sId,
+          sModelsType: props.materialsChooseData.sModelType,
+          select: props.onSelect,
+          selectCancel: props.onSelectCancel,
+        },
+      },
+      dispatch: props.dispatch,
+      content: props.content,
+      id: new Date().getTime().toString(),
+      realizeHeight: props.realizeHeight, /* 拖动偏移高度 */
+    };
+  }
+
+  /* 调用产品工艺卡  */
+  let productProcessInfoType = {};
+  let productProcessInfoConfig = {};
+  let processCardSearchResult = commonFunc.showMessage(app.commonConst, 'processCardSearchResult');/* 复制从工艺卡查询结果 */
+  if (commonUtils.isNotEmptyObject(props.productProcessInfoChooseData)) {
+    const productProcessInfoCopyFromKey = props.productProcessInfoCopyFromKey;
+    const iIndex = props.masterConfig.gdsconfigformslave.findIndex(item => item.sControlName === productProcessInfoCopyFromKey);
+    if (iIndex > -1) {
+      productProcessInfoConfig = props.masterConfig.gdsconfigformslave[iIndex];
+      processCardSearchResult = commonUtils.isNotEmptyObject(productProcessInfoConfig) && commonUtils.isNotEmptyObject(productProcessInfoConfig.sActiveName) ? productProcessInfoConfig.sActiveName : processCardSearchResult;
+    }
+    productProcessInfoType = {
+      app: {
+        ...props.app,
+        currentPane: {
+          name: 'productProcessInfo',
+          config: productProcessInfoConfig,
+          conditonValues: props.getSqlCondition(productProcessInfoConfig),
+          title: props.productProcessInfoChooseData.sMenuName,
+          route: props.productProcessInfoChooseData.sName,
+          formId: props.productProcessInfoChooseData.sId,
+          key: sModelsId + props.productProcessInfoChooseData.sId,
+          sModelsType: props.productProcessInfoChooseData.sModelType,
+          select: props.onSelect,
+          selectCancel: props.onSelectCancel,
+        },
+      },
+      dispatch: props.dispatch,
+      content: props.content,
+      id: new Date().getTime().toString(),
+    };
+  }
+
+
+  /* 导入收付款未清数据 */
+  let importPopupProps = {};
+  let importPopupTitle = '导入未清数据';
+  if (commonUtils.isNotEmptyObject(props)) {
+    let importPopupConfig = {};
+    const {
+      masterConfig, sModelsId,
+    } = props;
+    if (commonUtils.isNotEmptyObject(masterConfig)) {
+      const iIndex = masterConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'BtnImportFormData' && item.bVisible);
+      if (iIndex > -1) {
+        importPopupConfig = masterConfig.gdsconfigformslave[iIndex];
+        importPopupTitle = commonUtils.isNotEmptyObject(importPopupConfig) && commonUtils.isNotEmptyObject(importPopupConfig.sActiveName) ? importPopupConfig.sActiveName : importPopupTitle;
+        importPopupProps = {
+          app: {
+            ...props.app,
+            currentPane: {
+              name: 'commonPopup',
+              config: importPopupConfig,
+              conditonValues: {},
+              title: importPopupTitle,
+              route: '/indexPage/commonList',
+              formRoute: '/indexPage/commonList',
+              formId: importPopupConfig.sActiveId,
+              key: sModelsId + importPopupConfig.sId,
+              sModelsType: 'search/importFormData',
+              select: props.onSelect,
+              selectCancel: props.handleCancelModal.bind(this, 'importFormDataVisible'),
+              bFilterProName: props.bFilterProName, /* 存储过程查询ID  */
+              bFilterProValue: props.bFilterProValue, /* 存储过程查询VALUE */
+            },
+          },
+          dispatch: props.dispatch,
+          content: props.content,
+          id: new Date().getTime().toString(),
+          realizeHeight: props.realizeHeight, /* 拖动偏移高度 */
+        };
+      }
+    }
+  }
+
+  // const saleOrder = commonFunc.showMessage(app.commonConst, 'saleOrder');/* 销售订单 s*/
+  setMaterialRemark = props.sModelsType !== undefined && props.sModelsType.includes('sales/salesOrder') ? setMaterialRemark : null;
+  const slaveTableProps = {
+    ...commonBusiness.getTableTypes('slave', props),
+    tableProps: {
+      setAdd, setCopy, setCopyAll, setDelete, setMaterialRemark, setMaterial, chooseMaterialsConfigRow: chooseMaterialsConfig, pagination, onChange: props.onTitleChange,
+    },
+    templateProps,
+    onKeyDown: props.onKeyDown,
+    onContextMenu: props.onContextMenu,
+    masterData: props.masterData, // 为通用弹窗提供主表数据(孟总需求：产品新增需要带上客户信息)
+  };
+
+
+  const controlPropsType = {
+    ...commonBusiness.getTableTypes('control', props),
+    tableProps: {
+      setAdd, setCopy, setCopyAll, setDelete, setMaterialRemark, setMaterial, chooseMaterialsConfigRow: chooseMaterialsConfig, pagination, onChange: props.onTitleChange,
+    },
+    templateProps,
+    onKeyDown: props.onKeyDown,
+    onContextMenu: props.onContextMenu,
+    masterData: props.masterData, // 为通用弹窗提供主表数据(孟总需求：产品新增需要带上客户信息)
+  };
+
+
+  const materialsPropsType = {
+    ...commonBusiness.getTableTypes('materials', props),
+    tableProps: {
+      setAdd, setCopy, setCopyAll, setDelete, setMaterialRemark, setMaterial, chooseMaterialsConfigRow: chooseMaterialsConfig, pagination, onChange: props.onTitleChange,
+    },
+    templateProps,
+    onKeyDown: props.onKeyDown,
+    onContextMenu: props.onContextMenu,
+    masterData: props.masterData, // 为通用弹窗提供主表数据(孟总需求：产品新增需要带上客户信息)
+  };
+
+
+  const processPropsType = {
+    ...commonBusiness.getTableTypes('process', props),
+    tableProps: {
+      setAdd, setCopy, setCopyAll, setDelete, setMaterialRemark, setMaterial, chooseMaterialsConfigRow: chooseMaterialsConfig, pagination, onChange: props.onTitleChange,
+    },
+    templateProps,
+    onKeyDown: props.onKeyDown,
+    onContextMenu: props.onContextMenu,
+    masterData: props.masterData, // 为通用弹窗提供主表数据(孟总需求：产品新增需要带上客户信息)
+  };
+
+  const packPropsType = {
+    ...commonBusiness.getTableTypes('pack', props),
+    tableProps: {
+      setAdd, setCopy, setCopyAll, setDelete, setMaterialRemark, setMaterial, chooseMaterialsConfigRow: chooseMaterialsConfig, pagination, onChange: props.onTitleChange,
+    },
+    onKeyDown: props.onKeyDown,
+    onContextMenu: props.onContextMenu,
+    masterData: props.masterData, // 为通用弹窗提供主表数据(孟总需求：产品新增需要带上客户信息)
+  };
+
+  let gdsconfigformmasterId = '';
+  if (templateProps !== undefined) {
+    gdsconfigformmasterId = templateProps.sId;
+  }
+
+  const sNotEmpty = 'sParentId,sProductId';
+  let uploadUrl = `${commonConfig.server_host}import/checkExcel?sModelsId=${sModelsId}&gdsconfigformmasterId=${gdsconfigformmasterId}&sNotEmpty=${sNotEmpty}&token=${app.token}`;
+  /* 送货单需要传客户id  */
+  if (commonUtils.isNotEmptyObject(sModelsType) && sModelsType === 'sales/salesSgoods' && commonUtils.isNotEmptyObject(masterData)) {
+    const sCustomerId = masterData.sCustomerId;
+    if (commonUtils.isNotEmptyObject(sCustomerId)) {
+      uploadUrl = `${commonConfig.server_host}import/checkExcel?sModelsId=${sModelsId}&gdsconfigformmasterId=${gdsconfigformmasterId}&sNotEmpty=${sNotEmpty}&sCustomerId=${sCustomerId}&token=${app.token}`;
+    }
+  }
+  const outProps = {
+    action: uploadUrl,
+    onChange: props.onUploadChangeFile, /* 文件上传 */
+    accept: 'xls/*',
+    showUploadList: false,
+    beforeUpload: () => {
+      /* 查看时不可上传 */
+      if (!props.enabled) return false;
+    },
+  };
+  const uploadPropsSales = props.onUploadPropsSales();
+  const isGetData = commonFunc.showMessage(app.commonConst, 'isGetData');/* 确认获取库存为零的数据吗 */
+  const isFilterGetDataZero = commonFunc.showMessage(app.commonConst, 'isFilterGetDataZero');
+  const isAllGetData = commonFunc.showMessage(app.commonConst, 'isAllGetData');
+  // const CheckInfo = commonFunc.showMessage(app.commonConst, 'CheckInfo');/* 审批信息 */
+  const BtnimportData = commonFunc.showMessage(app.commonConst, 'importData');/* 导入数据 */
+  const ImportData = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.sControlName.includes('ImportData') && item.bVisible) : '';/* 后台是否配置导入 */
+
+  /* 取 masterConfig中有多少个分割符配置 */
+  const masterShowConfig = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '') : [];
+  const diliverConfigTypeArr = []; /* 有分隔符的配置 */
+  masterShowConfig.forEach((child) => {
+    if (child.sControlName.indexOf('_') > -1) {
+      const tableType = child.sControlName.split('_')[1];
+      const isIndex = diliverConfigTypeArr.findIndex(item => item === tableType);
+      if (isIndex === -1) {
+        diliverConfigTypeArr.push(tableType);
+      }
+    }
+  });
+  /* ----从表设置------- */
+  /* 取区域间隔符 */
+  // eslint-disable-next-line no-unused-vars
+  const areaShowConfig = commonUtils.isNotEmptyObject(masterConfig) ? masterConfig.gdsconfigformslave.filter(item => item.bVisible && item.sControlName !== '' && item.sControlName.toLowerCase().indexOf('dividerarea') > -1) : [];
+
+  // eslint-disable-next-line no-unused-vars
+  let listConfig = {}; /* 从表区域 列表显示设置 */
+  if (commonUtils.isNotEmptyObject(slaveConfig)) {
+    listConfig = commonUtils.isNotEmptyObject(slaveConfig) ? slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && (item.iTag !== 2 && item.iTag !== 3)) : [];
+  }
+
+  /* commonView显示区域 */
+  const ableConfigs = commonUtils.isNotEmptyObject(slaveConfig) ? slaveConfig.gdsconfigformslave.filter(item => item.sName !== '' && item.bControl && item.sControlName.indexOf('Btn') === -1) : [];
+  /* 选中行 */
+  let showAll = true; /* 只显示表格 */
+  let bShowLeft = true; /* 表格显示在左侧 */
+  let iColValueView = 12;
+  let iColValueTable = 12;
+
+  let showAll2 = true; /* 只显示表格 */
+  let bShowLeft2 = true; /* 表格显示在左侧 */
+  let iColValueView2 = 12;
+  const iColValueTable2 = 12;
+
+  let slaveRow = {};
+  if (commonUtils.isNotEmptyArr(slaveSelectedRowKeys)) {
+    const iIndex = slaveData.findIndex(item => slaveSelectedRowKeys.includes(item.sId));
+    if (iIndex > -1) {
+      slaveRow = slaveData[iIndex];
+    } else {
+      slaveRow = slaveData[0];
+    }
+  } else if (commonUtils.isNotEmptyArr(slaveData)) {
+    slaveRow = slaveData[0];
+  }
+  if (commonUtils.isNotEmptyObject(props.slaveConfig) && commonUtils.isNotEmptyArr(props.slaveConfig.gdsconfigformslave)) {
+    const iIndexArea = props.slaveConfig.gdsconfigformslave.findIndex(item => item.sControlName !== '' && item.sControlName.includes('bShow'));
+    if (iIndexArea > -1) {
+      showAll = false;
+    }
+    if (commonUtils.isNotEmptyObject(props.slaveConfig) && commonUtils.isNotEmptyArr(props.slaveConfig.gdsconfigformslave)) {
+      const iShowLeft = props.slaveConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'bShowLeft' && item.bVisible);
+      const iShowRight = props.slaveConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'bShowRight' && item.bVisible);
+      if (iShowLeft > -1) {
+        bShowLeft = true;
+        iColValueTable = props.slaveConfig.gdsconfigformslave[iShowLeft].iColValue;
+      } else if (iShowRight > -1) {
+        bShowLeft = false;
+        iColValueTable = props.slaveConfig.gdsconfigformslave[iShowRight].iColValue;
+      }
+    }
+  }
+  iColValueView = commonUtils.isNotEmptyNumber(iColValueTable) ? 24 - iColValueTable : 12;
+  iColValueView2 = commonUtils.isNotEmptyNumber(iColValueTable2) ? 24 - iColValueTable2 : 12;
+  const iShowOrder = bShowLeft ? 1 : 100;
+
+  const iShowOrder2 = bShowLeft2 ? 1 : 100;
+
+  let areaShow1 = true; /* 区域1 */
+  if (commonUtils.isNotEmptyObject(props.masterConfig) && commonUtils.isNotEmptyArr(props.masterConfig.gdsconfigformslave)) {
+    const iIndexArea = props.masterConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'DividerArea1' && item.bVisible);
+    if (iIndexArea > -1) {
+      areaShow1 = props.masterConfig.gdsconfigformslave[iIndexArea].showName;
+    }
+  }
+  let areaShow2 = true; /* 区域2 */
+  if (commonUtils.isNotEmptyObject(props.masterConfig) && commonUtils.isNotEmptyArr(props.masterConfig.gdsconfigformslave)) {
+    const iIndexArea = props.masterConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'DividerArea2' && item.bVisible);
+    if (iIndexArea > -1) {
+      areaShow2 = props.masterConfig.gdsconfigformslave[iIndexArea].showName;
+    }
+  }
+
+  if (commonUtils.isNotEmptyObject(props.controlConfig) && commonUtils.isNotEmptyArr(props.controlConfig.gdsconfigformslave)) {
+    const iIndexArea = props.controlConfig.gdsconfigformslave.findIndex(item => item.sControlName !== '' && item.sControlName.includes('bShow'));
+    if (iIndexArea > -1) {
+      showAll2 = false;
+    }
+    if (commonUtils.isNotEmptyObject(props.controlConfig) && commonUtils.isNotEmptyArr(props.controlConfig.gdsconfigformslave)) {
+      const iShowLeft = props.controlConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'bShowLeft' && item.bVisible);
+      const iShowRight = props.controlConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'bShowRight' && item.bVisible);
+      if (iShowLeft > -1) {
+        bShowLeft2 = true;
+        iColValueTable = props.controlConfig.gdsconfigformslave[iShowLeft].iColValue;
+      } else if (iShowRight > -1) {
+        bShowLeft2 = false;
+        iColValueTable = props.controlConfig.gdsconfigformslave[iShowRight].iColValue;
+      }
+    }
+  }
+
+  let areaShow3 = true; /* 区域3 */
+  if (commonUtils.isNotEmptyObject(props.masterConfig) && commonUtils.isNotEmptyArr(props.masterConfig.gdsconfigformslave)) {
+    const iIndexArea = props.masterConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'DividerArea3' && item.bVisible);
+    if (iIndexArea > -1) {
+      areaShow3 = props.masterConfig.gdsconfigformslave[iIndexArea].showName;
+    }
+  }
+
+  let areaShow4 = true; /* 区域4 */
+  if (commonUtils.isNotEmptyObject(props.masterConfig) && commonUtils.isNotEmptyArr(props.masterConfig.gdsconfigformslave)) {
+    const iIndexArea = props.masterConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'DividerArea4' && item.bVisible);
+    if (iIndexArea > -1) {
+      areaShow4 = props.masterConfig.gdsconfigformslave[iIndexArea].showName;
+    }
+  }
+  let areaShow5 = true; /* 区域5 */
+  if (commonUtils.isNotEmptyObject(props.masterConfig) && commonUtils.isNotEmptyArr(props.masterConfig.gdsconfigformslave)) {
+    const iIndexArea = props.masterConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'DividerArea5' && item.bVisible);
+    if (iIndexArea > -1) {
+      areaShow5 = props.masterConfig.gdsconfigformslave[iIndexArea].showName;
+    }
+  }
+  let bShowReport = true; /* 显示报表区域 */
+  if (commonUtils.isNotEmptyObject(props.masterConfig) && commonUtils.isNotEmptyArr(props.masterConfig.gdsconfigformslave)) {
+    const iIndexArea = props.masterConfig.gdsconfigformslave.findIndex(item => item.sControlName === 'bShowRepoprt');
+    if (iIndexArea > -1) {
+      bShowReport = props.masterConfig.gdsconfigformslave[iIndexArea].bVisible;
+    }
+  }
+
+  const bControlShow = commonUtils.isNotEmptyObject(props) && commonUtils.isNotEmptyObject(props.controlConfig); /* 控制表 */
+
+  const bMaterialShow = commonUtils.isNotEmptyObject(props) && commonUtils.isNotEmptyObject(props.materialsConfig); /* 材料表 */
+
+  const bProcessShow = commonUtils.isNotEmptyObject(props) && commonUtils.isNotEmptyObject(props.processConfig); /* 工序表 */
+
+  const bPackShow = commonUtils.isNotEmptyObject(props) && commonUtils.isNotEmptyObject(props.packConfig); /* 工序表 */
+  /* 从表view */
+  const slaveViewProps = {
+    ...props,
+    viewConfigs: ableConfigs,
+    tableConfig: slaveConfig,
+    iColValueView,
+    viewRow: slaveRow,
+    tableName: 'slave',
+  };
+
+  /* 控制表view */
+  const controlViewProps = {
+    ...props,
+    viewConfigs: ableConfigs,
+    tableConfig: slaveConfig,
+    iColValueView2,
+    viewRow: {},
+    tableName: 'control',
+  };
+  /* 从表view */
+  const materialsViewProps = {
+    ...props,
+    viewConfigs: ableConfigs,
+    tableConfig: slaveConfig,
+    iColValueView2,
+    viewRow: {},
+  };
+  /* 从表view */
+  const processViewProps = {
+    ...props,
+    viewConfigs: ableConfigs,
+    tableConfig: slaveConfig,
+    iColValueView2,
+    viewRow: {},
+  };
+
+  /* pack表view */
+  const packViewProps = {
+    ...props,
+    viewConfigs: ableConfigs,
+    tableConfig: slaveConfig,
+    iColValueView2,
+    viewRow: {},
+  };
+
+  return (
+    <Form className="commonCheckBillContainer">
+      <Layout>
+        <Header className={styles.header}>
+          <div className="billToolBar">
+            <Toolbar {...props} className="billBtnGroup btnGroupHasImport" pageFrom="billList" />
+            { commonUtils.isNotEmptyArr(ImportData) ?
+              <div id="btnImportData" className={`importData ${props.enabled}`} >
+                <Upload {...outProps}><UploadOutlined />{BtnimportData}
+                  <Button {...uploadPropsSales} />
+                </Upload>
+              </div> : ''}
+          </div>
+        </Header>
+        <Layout className={styles.clayout}>
+          <Content className={customStyles.content} >
+            <div style={{
+              border: '1px solid #c2c3c5',
+              margin: '0 10px',
+              marginTop: 8,
+              backgroundColor: '#ffffff',
+            }}
+            >
+              <div className="bill-search-group" >
+                <CommonViewFlex {...props} />
+              </div>
+              {
+                commonUtils.isNotEmptyArr(diliverConfigTypeArr) ?
+                  diliverConfigTypeArr.map((item) => {
+                    // 匹配数字
+                    // eslint-disable-next-line no-unused-vars
+                    const num = item.replace(/[^\d]/g, ' ');
+                    return (
+                      <div className="flexArea">
+                        <Divider orientation="left">{item}</Divider>
+                        <CommonView
+                          {...props}
+                            // 使高度和从表高度一直
+                          isAutoHeight="ture"
+                          tableConfigType={item}
+                          tableConfigTypeArr={diliverConfigTypeArr}
+                        />
+                      </div>
+                    );
+                  })
+                  : ''
+              }
+            </div>
+            { onlyMaster ?
+              <div id="slaveTabs" className={`${styles.bShow} bill-search-group commonCheckBill`}>
+                <div>
+                  <Avatar src={props.imgSrc} className={customStyles.bShowImg} />
+                </div>
+              </div> :
+              <div id="slaveTabs" className="bill-search-group commonCheckBill">
+                {/* <div> */}
+                {/*  <Avatar src={props.imgSrc} /> */}
+                {/* </div> */}
+                {/* {areaShow1 ? <Divider orientation="left" style={{ padding: '10px' }}>{areaShow1}</Divider> : '' } */}
+                <div className={styles.slaveTabs} tabBarStyle={{ margin: '0 10px' }} >
+                  <div className="xly-bill-list">
+                    <Collapse defaultActiveKey={['1', '1']} className="custom-collapse">
+                      <Panel header={areaShow1} key="1">
+                        <Row gutter={[8, 0]}>
+                          <Col span={showAll ? 24 : iColValueTable} order={iShowOrder}>
+                            <StaticEditTable {...slaveTableProps} setOpterationColumn={props.sModelsType !== 'cost/cosexpenseshare' ? 'Y' : ''} />
+                          </Col>
+                          <CommonViewTable {...slaveViewProps} />
+                        </Row>
+                      </Panel>
+                    </Collapse>
+                    <Row>
+                      <div id="ModalMaterialRemark" style={{ width: '100%' }}>
+                        {/* {areaShow2 ? <Divider orientation="left">{areaShow2}</Divider> : '' } */}
+                        {bControlShow ?
+                          <Collapse defaultActiveKey={['1', '1']} className="custom-collapse">
+                            <Panel header={areaShow2} key="1">
+                              <Row gutter={[8, 0]}>
+                                <Col span={showAll2 ? 24 : iColValueTable2} order={iShowOrder2}>
+                                  <StaticEditTable {...controlPropsType} setOpterationColumn={props.sModelsType !== 'cost/cosexpenseshare' ? 'Y' : ''} />
+                                </Col>
+                                <CommonViewTable {...controlViewProps} />
+                              </Row>
+                            </Panel>
+                          </Collapse> : ''
+                        }
+
+                        {/* {areaShow3 ? <Divider orientation="left">{areaShow3}</Divider> : '' } */}
+                        {
+                          bMaterialShow ?
+                            <Collapse defaultActiveKey={['1', '1']} className="custom-collapse">
+                              <Panel header={areaShow3} key="1">
+                                {/* <div style={{ marginTop: 0, overflowY: 'hidden' }}> */}
+                                {/*  <StaticEditTable {...materialsPropsType} footer="hidden" setOpterationColumn="Y" /> */}
+                                {/* </div> */}
+                                <Row gutter={[8, 0]}>
+                                  <Col span={showAll2 ? 24 : iColValueTable} order={iShowOrder2}>
+                                    <StaticEditTable {...materialsPropsType} setOpterationColumn="Y" />
+                                  </Col>
+                                  <CommonViewTable {...materialsViewProps} />
+                                </Row>
+                              </Panel>
+                            </Collapse> : ''
+                        }
+                        {/* {areaShow4 ? <Divider orientation="left">{areaShow4}</Divider> : '' } */}
+                        {
+                          bProcessShow ?
+                            <Collapse defaultActiveKey={['1', '1']} className="custom-collapse">
+                              <Panel header={areaShow4} key="1">
+                                {/* <div style={{ marginTop: 0, overflowY: 'hidden' }} id="chooseProcessModal"> */}
+                                {/*  <StaticEditTable {...processPropsType} footer="hidden" setOpterationColumn="Y" /> */}
+                                {/* </div> */}
+                                <Row gutter={[8, 0]}>
+                                  <Col span={showAll2 ? 24 : iColValueTable} order={iShowOrder2}>
+                                    <StaticEditTable {...processPropsType} setOpterationColumn="Y" />
+                                  </Col>
+                                  <CommonViewTable {...processViewProps} />
+                                </Row>
+                              </Panel>
+                            </Collapse> : ''
+                        }
+
+                        {/* {areaShow5 ? <Divider orientation="left">{areaShow5}</Divider> : '' } */}
+                        {
+                          bPackShow ?
+                            <Collapse defaultActiveKey={['1', '1']} className="custom-collapse">
+                              <Panel header={areaShow5} key="1">
+                                {/* <div style={{ marginTop: 0, overflowY: 'hidden' }} id="chooseProcessModal"> */}
+                                {/*  <StaticEditTable {...packPropsType} footer="hidden" setOpterationColumn="Y" /> */}
+                                {/* </div> */}
+                                <Row gutter={[8, 0]}>
+                                  <Col span={showAll ? 24 : iColValueTable} order={iShowOrder2}>
+                                    <StaticEditTable {...packPropsType} setOpterationColumn="Y" />
+                                  </Col>
+                                  <CommonViewTable {...packViewProps} />
+                                </Row>
+                              </Panel>
+                            </Collapse> : ''
+                        }
+                        { commonUtils.isNotEmptyObject(previewUrl) && bShowReport ?
+                          <Collapse defaultActiveKey={['1', '1']} className="custom-collapse" style={{ marginTop: '5px' }}>
+                            <Panel header="打印区域" key="1">
+                              <div className="pdfContainer">
+                                <PrintPdf {...props} />
+                              </div>
+                            </Panel>
+                          </Collapse>
+                          : ''
+                        }
+                      </div>
+                    </Row>
+                  </div>
+                </div>
+              </div> }
+          </Content>
+        </Layout>
+      </Layout>
+      {
+        isGetDataVisible ?
+          <AntdDraggableModal
+            visible={isGetDataVisible}
+            title="获取数据"
+            onOk={onGetDataOk}
+            onCancel={colseGetDataVisible}
+            footer={[
+              <Button key="back" onClick={onGetDataCancel}>
+                {isAllGetData}
+              </Button>,
+              <Button key="submit" type="primary" onClick={onGetDataOk}>
+                {isFilterGetDataZero}
+              </Button>,
+            ]}
+          >
+            <p>{isGetData}</p>
+          </AntdDraggableModal>
+          : ''
+      }
+      {
+        props.materialsChooseVisible && !props.visibleModal ?
+          <AntdDraggableModal
+            width={1300}
+            title={props.setMaterialTitle}
+            visible={props.materialsChooseVisible}
+            onCancel={props.handleCancelModal.bind(this, 'materialsChooseVisible')}
+            onSaveState={props.onSaveState}
+            footer={null}
+          >
+            <CommonListSelect {...searchMaterialsType} />
+          </AntdDraggableModal>
+          : ''
+      }
+
+
+      {
+        props.productProcessInfoChooseVisible ?
+          <AntdDraggableModal
+            width={1200}
+            title={processCardSearchResult}
+            visible={props.productProcessInfoChooseVisible}
+            onCancel={props.onCancelProductProcessInfoChooseModal}
+            footer={null}
+            wrapClassName="worker-order-pack-modal"
+          >
+            <CommonListSelect {...productProcessInfoType} />
+          </AntdDraggableModal> : ''
+      }
+
+      {
+        props.importFormDataVisible ?
+          <AntdDraggableModal
+            width={1300}
+            zIndex={1000}
+            title={importPopupTitle}
+            visible={props.importFormDataVisible}
+            onCancel={props.handleCancelModal.bind(this, 'importFormDataVisible')}
+            onSaveState={props.onSaveState}
+            footer={null}
+          >
+            <CommonListSelect {...importPopupProps} />
+          </AntdDraggableModal>
+          : ''
+      }
+      {
+        props.contextMenuModalVisible ?
+          <ContextMenuModal {...props} />
+          : ''
+      }
+    </Form>
+  );
+});
+
+export default CommonBase(CommonSales(CommonBill));
+.pdfContainer{
+  width: 100%;
+  height: 300px;
+}
+/* 处理分隔符间距 */
+:global{
+  .commonCheckBillContainer .ant-divider-horizontal.ant-divider-with-text{
+    margin: 5px 0 10px 0!important;
+  }
+  /* 主表分隔符间距 */
+  .commonCheckBillContainer .flexArea .ant-divider-horizontal.ant-divider-with-text{
+    margin: -8px 0!important;
+  }
+}
+
+