2019-12-24

king

2019-12-24 a859b8d276dcdc0a9a806498f4a6af845858e3a9

2019-12-24

 package-lock.json

@@ -5689,6 +5689,23 @@
        "safer-buffer": "2.1.2"
      }
    },
    "echarts": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.5.0.tgz",
      "integrity": "sha512-q9M0errodeX/786uPifro76x0elbrUQkbSHh235QzbkaASuvP9AQoMErhGBno4iC/yq6kFDLqgmm3XCPWQGLzA==",
      "requires": {
        "zrender": "4.1.2"
      }
    },
    "echarts-for-react": {
      "version": "2.0.15-beta.1",
      "resolved": "https://registry.npmjs.org/echarts-for-react/-/echarts-for-react-2.0.15-beta.1.tgz",
      "integrity": "sha512-wR8XaI3j/4JvTidZrrJVfP/RqSggLRlzKOwcruytyLSA6AyE51T7mK+EucfwZ0NkX8H6tPFCHCvgJH1LyXjiIg==",
      "requires": {
        "fast-deep-equal": "2.0.1",
        "size-sensor": "0.2.5"
      }
    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -14658,6 +14675,11 @@
      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.3.tgz",
      "integrity": "sha512-SbEG75TzH8G7eVXFSN5f9EExILKfly7SUvVY5DhhYLvfhKqhDFY0OzevWa/zwak0RLRfWS5AvfMWpd9gJvr5Yg=="
    },
    "size-sensor": {
      "version": "0.2.5",
      "resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-0.2.5.tgz",
      "integrity": "sha512-Rip8d6LmCHIBUY5iIS3nKln1X4bF8260oFI4suo6MX+vOV/aNpNWYKTyjamSJMbxP17qMlR0DmGXFEio3BYJUg=="
    },
    "slash": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@@ -16880,6 +16902,11 @@
          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
        }
      }
    },
    "zrender": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.1.2.tgz",
      "integrity": "sha512-MJYEo1ZOVesjxYsfcGtPXnUREmh4ACMV08QZLGZ3S7D1xOd96iz3O6nf6pv5PHb5NSHkbizr7ChSIgtAGwncvA=="
    }
  }
}

 package.json

@@ -21,6 +21,8 @@
    "dotenv": "6.2.0",
    "dotenv-expand": "4.2.0",
    "dragact": "^0.2.12",
    "echarts": "^4.5.0",
    "echarts-for-react": "^2.0.15-beta.1",
    "eslint": "^6.1.0",
    "eslint-config-react-app": "^5.0.1",
    "eslint-loader": "2.2.1",

 src/assets/css/main.scss

@@ -40,6 +40,19 @@
  height: 100%;
}

html::-webkit-scrollbar {
  width: 8px;
}
html::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
  background: rgba(0, 0, 0, 0.13);
}
html::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(0, 0, 0, 0);
}

input[type="button"], input[type="submit"], input[type="search"], input[type="reset"] {
  -webkit-appearance: none;
}

 src/components/sidemenu/editthdmenu/index.jsx

@@ -432,6 +432,10 @@
    document.getElementById('root').style.overflowY = 'unset'
  }

  tabHandleConfig = () => {

  }

  handleSubConfig = (item, originMenu, config, type) => {
    if (type === 'button') {
      if (item.OpenType === 'pop') {
@@ -454,6 +458,17 @@
          tabview: 'SubTable'
        })
      }
    } else if (type === 'tabButton') {
      // item.pageParam = ''
      // if (config && config.type === 'Modal') {
      //   item.pageParam = config
      // }

      // this.setState({
      //   editMenu: originMenu,
      //   editAction: item,
      //   tabview: 'Modal'
      // })
    }
  }

@@ -587,6 +602,7 @@
        {this.state.tabview === 'SubTable' &&
          <SubTable
            config={this.state.editTab}
            menu={this.state.editMenu}
            handleConfig={this.handleConfig}
            handleSubConfig={this.handleSubConfig}
          />

 src/components/tabview/index.jsx

@@ -56,6 +56,7 @@
    if (menu.MenuID === this.state.selectedTabId) {
      tabs[0] && (tabs[0].selected = true)
    }
    console.log(tabs)
    this.props.modifyTabview(tabs)
  }

@@ -79,7 +80,9 @@

  selectcomponent (view) {
    // 根据tab页中菜单信息，选择所需的组件
    if (view.type === 'CommonTable') {
    if (view.type === 'Home') {
      return (<Comps.Home MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>)
    } else if (view.type === 'CommonTable') {
      return (<Comps.CommonTable MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>)
    } else if (view.type === 'DataManage') {
      return (<Comps.DataManage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>)
@@ -129,6 +132,21 @@
    }
  }

  componentDidMount () {
    let home = {
      MenuID: '1576117946681plembmkk9akkv8sn0vtdfdsfaf',
      MenuName: '首页',
      MenuNo: 'MESOrderDetailMwe',
      PageParam: {},
      id: 1,
      selected: true,
      src: '',
      text: '首页',
      type: 'Home'
    }
    this.props.modifyTabview([home])
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (nextProps.tabviews && !is(fromJS(this.props.tabviews), fromJS(nextProps.tabviews))) {
      // tab窗口页增加或删除
@@ -136,7 +154,9 @@
        // 查看新tab页需要组件是否加载
        let MenuIDs = this.props.tabviews.map(tab => {return tab.MenuID})
        let newtab = nextProps.tabviews.filter(tab => !MenuIDs.includes(tab.MenuID))[0]
        if (!Comps.CommonTable && newtab.type === 'CommonTable') {
        if (!Comps.Home && newtab.type === 'Home') {
          Comps.Home = asyncComponent(() => import('@/tabviews/home'))
        } else if (!Comps.CommonTable && newtab.type === 'CommonTable') {
          Comps.CommonTable = asyncComponent(() => import('@/tabviews/commontable'))
        } else if (!Comps.Iframe && newtab.type === 'iframe') {
          Comps.Iframe = asyncComponent(() => import('@/tabviews/iframe'))
@@ -178,7 +198,7 @@
                          <span className="tab-name" onClick={() => {this.changeTab(view)}}>
                            {view.MenuName}
                          </span>
                          <Icon type="close" onClick={() => {this.handleTabview(view)}}/>
                          {view.type !== 'Home' ? <Icon type="close" onClick={() => {this.handleTabview(view)}}/> : null}
                        </span>
                      }
                      key={view.MenuID}

 src/store/reducer.js

@@ -65,6 +65,16 @@
      }
    case Type.RESET_EDITSTATE:
    // 重置编辑状态
      if (state.tabviews.length === 0 && !action.editState) {
        state.tabviews = [{
          MenuID: '1576117946681plembmkk9akkv8sn0vtdfdsfaf',
          MenuName: '首页',
          MenuNo: 'MESOrderDetailMwe',
          selected: true,
          text: '首页',
          type: 'Home'
        }]
      }
      return {
        ...state,
        editState: action.editState,
@@ -100,4 +110,4 @@
    default:
      return state
  }
}
}

 src/tabviews/commontable/index.jsx

@@ -44,7 +44,7 @@
    orderType: 'asc',
    search: '',
    configMap: {},
    BID: ''
    BIDs: ''
  }

  /**
@@ -146,6 +146,7 @@
        loading: true
      }, () => {
        this.improveSearch()
        console.log(this.state.tabviews)
        if (config.setting.onload !== 'false') {
          this.loadmaindata()
        }
@@ -477,6 +478,17 @@
    this.refs.mainButton.actionTrigger(btn, record)
  }

  handleTableId = (type, id) => {
    const { BIDs } = this.state

    this.setState({
      BIDs: {
        ...BIDs,
        [type]: id
      }
    })
  }

  UNSAFE_componentWillMount () {
    // 组件加载时，获取菜单数据
    this.loadconfig()
@@ -522,6 +534,7 @@
            loading={this.state.loading}
            refreshdata={this.refreshbytable}
            buttonTrigger={this.buttonTrigger}
            handleTableId={this.handleTableId}
          />
        }
        {setting && setting.onload !== 'false' && setting.tabshow !== 'vertical' && tabviews && tabviews.length > 0 && 
@@ -533,7 +546,7 @@
                  {_tab.label}
                </span>
              } key={`${index}`}>
                {_tab.type === 'SubTable' ? <SubTable SupMenuID={this.props.MenuID} MenuID={_tab.linkTab} BID={this.state.BID} /> : null}
                {_tab.type === 'SubTable' ? <SubTable SupMenuID={this.props.MenuID} MenuID={_tab.linkTab} Tab={_tab} BIDs={this.state.BIDs} /> : null}
              </TabPane>
            ))}
          </Tabs>

 src/tabviews/commontable/mainTable/index.jsx

@@ -14,7 +14,8 @@
    total: PropTypes.number,       // 总数
    loading: PropTypes.bool,       // 表格加载中
    refreshdata: PropTypes.func,   // 表格中排序列、页码的变化时刷新
    buttonTrigger: PropTypes.func  // 表格中按钮触发操作
    buttonTrigger: PropTypes.func, // 表格中按钮触发操作
    handleTableId: PropTypes.func  // 数据切换
  }

  state = {
@@ -193,13 +194,20 @@
  }

  onSelectChange = selectedRowKeys => {
    let index = ''
    if (selectedRowKeys.length > 0) {
      index = selectedRowKeys[selectedRowKeys.length - 1]
    }

    this.changedata(index)

    this.setState({ selectedRowKeys })
  }

  changeRow = (record, index) => {
    // 点击整行，触发切换，判断是否可选，单选或多选，进行对应操作
    if (!this.props.setting.tableType) return

    
    let newkeys = JSON.parse(JSON.stringify(this.state.selectedRowKeys))
    let _re = newkeys.includes(index)

@@ -208,8 +216,10 @@
    } else {
      if (_re) {
        newkeys = newkeys.filter(item => item !== index)
        this.changedata('')
      } else {
        newkeys.push(index)
        this.changedata(index)
      }

      this.setState({ selectedRowKeys: newkeys })
@@ -225,6 +235,17 @@
    this.props.refreshdata(pagination, filters, sorter)
  }

  changedata = (index) => {
    const { data, setting } = this.props
    let _id = ''

    if (data && data.length > 0 && index !== '') {
      _id = data[index][setting.primaryKey]
    }

    this.props.handleTableId('mainTable', _id)
  }

  resetTable = () => {
    this.setState({
      pageIndex: 1,

 src/tabviews/home/index.jsx

New file
@@ -0,0 +1,331 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/markLine'
import { Icon, Tabs, Slider } from 'antd'
// import {refreshTabView, modifyTabview} from '@/store/action'
// import Api from '@/api'
import './index.scss'

const { TabPane } = Tabs

class Home extends Component {
  static propTpyes = {
    MenuNo: PropTypes.string, // 菜单参数
    MenuID: PropTypes.string, // 菜单Id
    param: PropTypes.object // 菜单参数
  }

  state = {

  }

  componentDidMount () {
    let myChart = echarts.init(document.getElementById('home'))
    // 绘制图表
    myChart.setOption({
      color: ['#1890ff'],
      tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : ''        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis : [
        {
          type : 'category',
          data : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis : [
        {
          type : 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#d9d9d9',
              type: 'dashed'
            }
          }
        }
      ],
      series : [
        {
          name:'销售额',
          type:'bar',
          barWidth: '30',
          data:[30, 52, 200, 334, 390, 330, 220, 170, 220, 290, 350, 410, 440, 530]
        }
      ]
    })
  }

  render() {
    return (
      <div className="home-view">
        <div className="ant-row-flex">
          <div className="ant-col ant-col-sm-6">
            <div className="ant-card">
              <div className="ant-card-body">
                <div className="antd-chart-card">
                  <div className="antd-chart-top">
                    <div className="antd-meta-wrap">
                      <div className="antd-meta">
                        <span>
                          <span>总销售额</span>
                        </span>
                        <span className="antd-action">
                          <Icon type="info-circle-o" />
                        </span>
                      </div>
                      <div className="antd-total">
                        <span>¥ 126,560</span>
                      </div>
                    </div>
                  </div>
                  <div className="antd-chart-content">
                    <div className="antd-content-fixed">
                      <div className="antd-trend-item" style={{marginRight: '16px'}}>
                        <span>
                          <span>周同比</span>
                          <span className="antd-trend-text">12%</span>
                        </span>
                        <span className="antd-trend-up">
                          <Icon type="caret-up" />
                        </span>
                      </div>
                      <div className="antd-trend-item">
                        <span>
                          <span>日同比</span>
                          <span className="antd-trend-text">11%</span>
                        </span>
                        <span className="antd-trend-down">
                          <Icon type="caret-down" />
                        </span>
                      </div>
                    </div>
                  </div>
                  <div className="antd-chart-footer">
                    <div className="antd-field">
                      <span className="antd-label">
                        <span>日销售额</span>
                      </span>
                      <span className="antd-number">￥12,423</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="ant-col ant-col-sm-6">
            <div className="ant-card">
              <div className="ant-card-body">
                <div className="antd-chart-card">
                  <div className="antd-chart-top">
                    <div className="antd-meta-wrap">
                      <div className="antd-meta">
                        <span>
                          <span>产量</span>
                        </span>
                        <span className="antd-action">
                          <Icon type="info-circle-o" />
                        </span>
                      </div>
                      <div className="antd-total">
                        <span>8,560</span>
                      </div>
                    </div>
                  </div>
                  <div className="antd-chart-content">
                    <div className="antd-content-fixed orange">
                      <Slider defaultValue={67} tipFormatter={null} />
                      <div className="mask"></div>
                    </div>
                  </div>
                  <div className="antd-chart-footer">
                    <div className="antd-field">
                      <span className="antd-label">
                        <span>日产量</span>
                      </span>
                      <span className="antd-number">1,423</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="ant-col ant-col-sm-6">
            <div className="ant-card">
              <div className="ant-card-body">
                <div className="antd-chart-card">
                  <div className="antd-chart-top">
                    <div className="antd-meta-wrap">
                      <div className="antd-meta">
                        <span>
                          <span>工单数</span>
                        </span>
                        <span className="antd-action">
                          <Icon type="info-circle-o" />
                        </span>
                      </div>
                      <div className="antd-total">
                        <span>6,560</span>
                      </div>
                    </div>
                  </div>
                  <div className="antd-chart-content">
                    <div className="antd-content-fixed primary">
                      <Slider defaultValue={77} tipFormatter={null} />
                      <div className="mask"></div>
                    </div>
                  </div>
                  <div className="antd-chart-footer">
                    <div className="antd-field">
                      <span className="antd-label">
                        <span>日工单数</span>
                      </span>
                      <span className="antd-number">120</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="ant-col ant-col-sm-6">
            <div className="ant-card">
              <div className="ant-card-body">
                <div className="antd-chart-card">
                  <div className="antd-chart-top">
                    <div className="antd-meta-wrap">
                      <div className="antd-meta">
                        <span>
                          <span>周转率</span>
                        </span>
                        <span className="antd-action">
                          <Icon type="info-circle-o" />
                        </span>
                      </div>
                      <div className="antd-total">
                        <span>87%</span>
                      </div>
                    </div>
                  </div>
                  <div className="antd-chart-content">
                    <div className="antd-content-fixed">
                      <Slider defaultValue={87} tipFormatter={null} />
                      <div className="mask"></div>
                    </div>
                  </div>
                  <div className="antd-chart-footer">
                    <div className="antd-trend-item" style={{marginRight: '16px'}}>
                      <span>
                        <span>周同比</span>
                        <span className="antd-trend-text">17%</span>
                      </span>
                      <span className="antd-trend-up">
                        <Icon type="caret-up" />
                      </span>
                    </div>
                    <div className="antd-trend-item">
                      <span>
                        <span>日同比</span>
                        <span className="antd-trend-text">10%</span>
                      </span>
                      <span className="antd-trend-down">
                        <Icon type="caret-down" />
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <Tabs defaultActiveKey="1">
          <TabPane tab="销售额" key="1">
            <div id="home" className="sale-trend ant-col ant-col-xs-16"></div>
            <div className="ant-col ant-col-xs-8">
              <div className="antd-sales-rank">
                <h4 className="antd-ranking-title">销量排名</h4>
                <ul className="antd-ranking-list">
                  <li>
                    <span className="antd-ranking-active">1</span>
                    <span className="antd-ranking-title">产品1</span>
                    <span>723,234</span>
                  </li>
                  <li>
                    <span className="antd-ranking-active">2</span>
                    <span className="antd-ranking-title">产品2</span>
                    <span>683,434</span>
                  </li>
                  <li>
                    <span className="antd-ranking-active">3</span>
                    <span className="antd-ranking-title">产品3</span>
                    <span>527,264</span>
                  </li>
                  <li>
                    <span className="antd-ranking-number">4</span>
                    <span className="antd-ranking-title">产品4</span>
                    <span>493,233</span>
                  </li>
                  <li>
                    <span className="antd-ranking-number">5</span>
                    <span className="antd-ranking-title">产品5</span>
                    <span>323,734</span>
                  </li>
                  <li>
                    <span className="antd-ranking-number">6</span>
                    <span className="antd-ranking-title">产品6</span>
                    <span>303,934</span>
                  </li>
                  <li>
                    <span className="antd-ranking-number">7</span>
                    <span className="antd-ranking-title">产品7</span>
                    <span>227,244</span>
                  </li>
                  <li>
                    <span className="antd-ranking-number">8</span>
                    <span className="antd-ranking-title">产品8</span>
                    <span>223,734</span>
                  </li>
                </ul>
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    // tabviews: state.tabviews
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    // refreshTabView: (refreshTab) => dispatch(refreshTabView(refreshTab)),
    // modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)

 src/tabviews/home/index.scss

New file
@@ -0,0 +1,234 @@
.home-view {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 92px);
  // min-height: 100vh;
  background: #f0f2f5;
  padding: 24px;
  .ant-row-flex {
    display: flex;
    flex-flow: row wrap;
    margin-left: -12px;
    margin-right: -12px;
    .ant-col {
      padding-left: 12px;
      padding-right: 12px;
      margin-bottom: 24px;
      .ant-card {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: rgba(0,0,0,.65);
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        font-feature-settings: "tnum";
        position: relative;
        background: #fff;
        border-radius: 2px;
        transition: all .3s;
        .ant-card-body {
          padding: 20px 24px 8px;
          .antd-chart-card {
            position: relative;
            box-sizing: border-box;
            .antd-chart-top {
              position: relative;
              width: 100%;
              overflow: hidden;
              box-sizing: border-box;
              .antd-meta-wrap {
                float: left;
                box-sizing: border-box;
                .antd-meta {
                  height: 22px;
                  color: rgba(0,0,0,.45);
                  font-size: 14px;
                  line-height: 22px;
                  .antd-action {
                    position: absolute;
                    top: 4px;
                    right: 0;
                    line-height: 1;
                    cursor: pointer;
                  }
                }
                .antd-total {
                  height: 38px;
                  margin-top: 4px;
                  margin-bottom: 0;
                  overflow: hidden;
                  color: rgba(0,0,0,.85);
                  font-size: 30px;
                  line-height: 38px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  word-break: break-all;
                }
              }
            }
            .antd-chart-content {
              position: relative;
              height: 40px;
              .antd-content-fixed {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                .antd-trend-item {
                  display: inline-block;
                  font-size: 14px;
                  line-height: 22px;
                  .antd-trend-text {
                    margin-left: 5px;
                  }
                  .antd-trend-up {
                    color: #f5222d;
                  }
                  .antd-trend-down {
                    top: -1px;
                    color: #52c41a;
                  }
                }
                .mask {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  right: 0px;
                  bottom: 0px;
                  z-index: 1;
                }
              }
              .ant-slider {
                margin: 14px 0px 10px;
              }
              .ant-slider-track {
                height: 7px;
                background-color: #13C2C2;
              }
              .ant-slider-handle {
                border-color: #13C2C2;
              }
              .orange {
                .ant-slider-track {
                  background-color: orange;
                }
                .ant-slider-handle {
                  border-color: lightsalmon;
                }
              }
              .primary {
                .ant-slider-track {
                  background-color: #1890ff;
                }
                .ant-slider-handle {
                  border-color: #91d5ff;
                }
              }
              .ant-slider-rail {
                height: 7px;
              }
            }
            .antd-chart-footer {
              margin-top: 8px;
              padding-top: 9px;
              border-top: 1px solid #e8e8e8;
              .antd-label {
                font-size: 14px;
                line-height: 22px;
                margin-right: 10px;
              }
              .antd-trend-item {
                display: inline-block;
                font-size: 14px;
                line-height: 22px;
                .antd-trend-text {
                  margin-left: 5px;
                }
                .antd-trend-up {
                  color: #f5222d;
                }
                .antd-trend-down {
                  top: -1px;
                  color: #52c41a;
                }
              }
            }
          }
        }
      }
    }
  }
  .ant-tabs {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    background: #fff;
    border-radius: 2px;
    transition: all .3s;
    .sale-trend {
      height: 400px;
      margin-bottom: 20px;
    }
    .antd-sales-rank {
      padding: 35px 32px 32px 72px;
      .antd-ranking-title {
        font-size: 16px;
      }
      .antd-ranking-list {
        margin: 20px 0 0;
        padding: 0;
        list-style: none;
        li {
          display: flex;
          align-items: center;
          margin-top: 16px;
          zoom: 1;
          .antd-ranking-active {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-top: 1.5px;
            margin-right: 16px;
            font-weight: 600;
            font-size: 12px;
            line-height: 20px;
            text-align: center;
            color: #fff;
            background-color: #314659;
            border-radius: 20px;
          }
          .antd-ranking-number {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-top: 1.5px;
            margin-right: 16px;
            font-weight: 600;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
          }
          .antd-ranking-title {
            flex: 1 1;
            margin-right: 8px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: rgba(0,0,0,.65);
            font-size: 14px;
            line-height: 22px;
          }
        }
      }
    }
  }
}

 src/tabviews/subtable/index.jsx

@@ -15,7 +15,8 @@

export default class NormalTable extends Component {
  static propTpyes = {
    BID: PropTypes.string,       // 上级数据ID
    Tab: PropTypes.object,       // 标签信息
    BIDs: PropTypes.string,       // 上级数据ID
    MenuID: PropTypes.string,    // 菜单Id
    SupMenuID: PropTypes.string  // 上级菜单Id
  }
@@ -31,7 +32,7 @@
    columns: null,
    arr_field: '',
    setting: null,
    data: null,
    data: [],
    total: 0,
    loading: false,
    pageIndex: 1,
@@ -40,6 +41,12 @@
    orderType: 'asc',
    search: '',
    configMap: {}
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.Tab.supMenu && !is(fromJS(this.props.BIDs[this.props.Tab.supMenu]), fromJS(nextProps.BIDs[this.props.Tab.supMenu]))) {
      this.loadmaindata()
    }
  }

  /**
@@ -63,15 +70,9 @@

      // 页面配置解析错误时提示
      if (!config) {
        // notification.warning({
        //   top: 92,
        //   message: this.state.dict['main.page.settingerror'],
        //   duration: 10
        // })
        this.setState({
          loadingview: false,
          viewlost: true
          // lostmsg: this.state.dict['main.page.settingerror']
        })
        return
      }
@@ -303,7 +304,8 @@
    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: arr_field
      arr_field: arr_field,
      BID: this.props.BIDs[this.props.Tab.supMenu] || ''
    }

    let orderBy = orderColumn ? (orderColumn + ' ' + orderType) : setting.order
@@ -488,7 +490,7 @@
          <SubAction
            ref="subButton"
            MenuID={this.props.MenuID}
            BID={this.props.BID}
            BID={this.props.BIDs[this.props.Tab.supMenu] || ''}
            setting={setting}
            refreshdata={this.refreshbyaction}
            gettableselected={this.gettableselected}

 src/templates/modalconfig/index.jsx

@@ -62,7 +62,7 @@
   */
  UNSAFE_componentWillMount () {
    const {menu, editAction} = this.props

    console.log(menu)
    let _config = ''

    if (editAction.pageParam) {

 src/templates/subtableconfig/index.jsx

@@ -31,6 +31,7 @@
class SubTableConfig extends Component {
  static propTpyes = {
    config: PropTypes.object,
    menu: PropTypes.any,
    handleConfig: PropTypes.func,
    handleSubConfig: PropTypes.func,
    supMenuList: PropTypes.array
@@ -73,7 +74,7 @@
   */
  UNSAFE_componentWillMount () {
    const { config } = this.props
    console.log(config)

    let _config = null

    if (!config || config.create) {
@@ -1543,9 +1544,9 @@
    })
  }

  changeTemplate = () => {
    this.props.handleConfig('template')
  }
  // changeTemplate = () => {
  //   this.props.handleConfig('template')
  // }

  /**
   * @description 标签页保存
@@ -1788,7 +1789,8 @@
          duration: 2
        })
        if (this.state.closeVisible) {
          this.props.handleConfig('')
          let view = this.props.menu ? this.props.menu.type : ''
          this.props.handleConfig(view)
        } else {
          this.setState({
            menuloading: false,
@@ -1824,7 +1826,8 @@
        okText: this.state.dict['header.confirm'],
        cancelText: this.state.dict['header.cancel'],
        onOk() {
          _this.props.handleConfig('')
          let view = _this.props.menu ? _this.props.menu.type : ''
          _this.props.handleConfig(view)
        },
        onCancel() {}
      })
@@ -1837,7 +1840,8 @@
            closeVisible: true
          })
        } else {
          this.props.handleConfig('')
          let view = this.props.menu ? this.props.menu.type : ''
          this.props.handleConfig(view)
        }
      }, () => {
        this.setState({
@@ -2154,7 +2158,7 @@
  /**
   * @description 设置可配置按钮
   */
  setSubConfig = (btn, type) => {
  setSubConfig = (btn) => {
    const { config, originConfig } = this.state

    let isAdd = false
@@ -2183,7 +2187,7 @@
            message: '菜单配置已修改，请保存！',
            duration: 10
          })
        } else if (type === 'button') {
        } else {
          this.setState({
            loading: true
          })
@@ -2204,7 +2208,7 @@
                  _LongParam = ''
                }
              }
              this.props.handleSubConfig(btn, '', _LongParam, type)
              this.props.handleSubConfig(btn, config, _LongParam, 'tabButton')
            } else {
              this.setState({
                loading: false
@@ -2216,40 +2220,6 @@
              })
            }
          })
        } else if (type === 'tab') {
          this.props.handleSubConfig(btn, '', '', type)
          // this.setState({
          //   loading: true
          // })
          // Api.getSystemConfig({
          //   func: 'sPC_Get_LongParam',
          //   MenuID: btn.uuid
          // }).then(res => {
          //   if (res.status) {
          //     this.setState({
          //       loading: false
          //     })
          //     let _LongParam = ''
          //     if (res.LongParam) {
          //       _LongParam = window.decodeURIComponent(window.atob(res.LongParam))
          //       try {
          //         _LongParam = JSON.parse(_LongParam)
          //       } catch (e) {
          //         _LongParam = ''
          //       }
          //     }
          //     this.props.handleSubConfig(btn, '', _LongParam)
          //   } else {
          //     this.setState({
          //       loading: false
          //     })
          //     notification.warning({
          //       top: 92,
          //       message: res.message,
          //       duration: 10
          //     })
          //   }
          // })
        }
      }, () => {
        notification.warning({
@@ -2275,6 +2245,11 @@
    this.setState({
      showColumnName: !showColumnName
    })
  }

  dontsave = () => {
    let view = this.props.menu ? this.props.menu.type : ''
    this.props.handleConfig(view)
  }

  render () {
@@ -2365,7 +2340,7 @@
                        icon={item.icon}
                        style={{marginBottom: '10px'}}
                        className={'mk-btn mk-' + item.class}
                        onClick={() => this.setSubConfig(item, 'button')}
                        onClick={() => this.setSubConfig(item)}
                      >{item.label}</Button>
                    </div>
                  )
@@ -2386,7 +2361,7 @@
            <Card title={this.state.dict['header.menu.page.configurable']} bordered={false} extra={
              <div>
                <Switch className="big" checkedChildren="启" unCheckedChildren="停" defaultChecked={this.state.config.enabled} onChange={this.onEnabledChange} />
                <Button type="primary" onClick={this.changeTemplate}>{this.state.dict['header.menu.template.change']}</Button>
                {/* <Button type="primary" onClick={this.changeTemplate}>{this.state.dict['header.menu.template.change']}</Button> */}
                <Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['header.save']}</Button>
                <Button onClick={this.cancelConfig}>{this.state.dict['header.return']}</Button>
              </div>
@@ -2558,7 +2533,7 @@
          onCancel={() => { this.setState({closeVisible: false}) }}
          footer={[
            <Button key="save" className="mk-btn mk-green" loading={this.state.menucloseloading} onClick={this.submitConfig}>{this.state.dict['header.save']}</Button>,
            <Button key="confirm" className="mk-btn mk-yellow" onClick={() => {this.props.handleConfig('')}}>{this.state.dict['header.notsave']}</Button>,
            <Button key="confirm" className="mk-btn mk-yellow" onClick={this.dontsave}>{this.state.dict['header.notsave']}</Button>,
            <Button key="cancel" onClick={() => { this.setState({closeVisible: false}) }}>{this.state.dict['header.cancel']}</Button>
          ]}
          destroyOnClose

 src/utils/utils.js

@@ -42,7 +42,11 @@
   */
  static encrypt (str, timestamp) {
    let salt = 'mingke' // 盐值
    return md5(str + salt + timestamp)
    let _str = str + salt + timestamp
    if (_str.length > 8000) {
      _str = _str.slice(_str.length - 8000)
    }
    return md5(_str)
  }

  /**