2021-07-14

king

2021-07-14 badd84cc656409590040caaad63bf22f0b6afaf1

2021-07-14

 src/menu/components/card/cardcellcomponent/index.jsx

@@ -138,7 +138,7 @@
    let options = ['font', 'border', 'padding', 'margin', 'backgroundColor']

    if (element.eleType === 'button') {
      options.push('width')
      options.push('width', 'float')
    } else if (element.eleType === 'picture') {
      options = ['border', 'margin']
    } else if (element.eleType === 'slider') {

 src/menu/components/share/styleInput/index.jsx

@@ -53,7 +53,7 @@
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!nextProps.value && this.state.value !== '') {
    if (nextProps.value === '' && this.state.value !== '') {
      this.setState({value: ''})
    } else if (nextProps.value && nextProps.value !== `${this.state.value}${this.state.unit}`) {
      let val = nextProps.value
@@ -76,7 +76,6 @@
      if (isNaN(_val)) {
        _val = ''
      }

      this.setState({value: _val, unit})
    }
  }
@@ -109,7 +108,7 @@
    this.setState({
      value: _val,
    }, () => {
      this.props.onChange(_val ? `${_val}${unit}` : '')
      this.props.onChange(_val !== '' ? `${_val}${unit}` : '')
    })
  }

@@ -117,7 +116,7 @@
    const { value } = this.state

    this.setState({unit: val}, () => {
      this.props.onChange(value ? `${value}${val}` : '')
      this.props.onChange(value !== '' ? `${value}${val}` : '')
    })
  }


 src/menu/stylecontroller/index.jsx

@@ -633,7 +633,7 @@
                    label={<Icon title="浮动" type="swap" />}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <Radio.Group defaultValue={card.float || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}>
                    <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.float || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}>
                      <Radio value="left">左浮动</Radio>
                      <Radio value="right">右浮动</Radio>
                      <Radio value="none">不浮动</Radio>

 src/views/appmanage/index.jsx

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import { fromJS } from 'immutable'
import { Spin, notification, Button, Table, Modal, ConfigProvider, Typography } from 'antd'
import { Spin, notification, Input, Button, Table, Modal, ConfigProvider, Typography, Row, Col, Tooltip, Icon } from 'antd'
import moment from 'moment'
import md5 from 'md5'
import enUS from 'antd/es/locale/en_US'
@@ -13,10 +13,12 @@

const { confirm } = Modal
const { Paragraph } = Typography
const { Search } = Input

const _locale = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const Header = asyncComponent(() => import('@/mob/header'))
const MutilForm = asyncComponent(() => import('./mutilform'))
const TransForm = asyncComponent(() => import('./transform'))
const SubMutilForm = asyncComponent(() => import('./submutilform'))

let base_url = ''
@@ -28,120 +30,79 @@

sessionStorage.setItem('isEditState', 'true')

const skinStyle = {
  bg_black_style_blue: {name: '蓝色', color: '#1890ff'},
  bg_black_style_red: {name: '红色', color: '#f5222d'},
  bg_black_style_orange_red: {name: '橙红色', color: '#fa541c'},
  bg_black_style_orange: {name: '橙色', color: '#fa8c16'},
  bg_black_style_orange_yellow: {name: '橙黄色', color: '#faad14'},
  bg_black_style_yellow: {name: '黄色', color: '#fadb14'},
  bg_black_style_yellow_green: {name: '黄绿色', color: '#a0d911'},
  bg_black_style_green: {name: '绿色', color: '#52c41a'},
  bg_black_style_cyan: {name: '青色', color: '#13c2c2'},
  bg_black_style_blue_purple: {name: '蓝紫色', color: '#2f54eb'},
  bg_black_style_purple: {name: '紫色', color: '#722ed1'},
  bg_black_style_magenta: {name: '洋红色', color: '#eb2f96'},
  bg_black_style_grass_green: {name: '草绿色', color: '#aeb303'},
  bg_black_style_deep_red: {name: '深红色', color: '#c32539'}
}

class AppManage extends Component {
  state = {
    loading: false,
    applist: [],
    columns: [
      { title: '应用名称', dataIndex: 'remark', key: 'remark', align: 'center' },
      { title: '应用编码', dataIndex: 'kei_no', key: 'kei_no', align: 'center' },
      { title: '应用名称', dataIndex: 'remark', key: 'remark', align: 'center', width: '30%' },
      { title: '应用编码', dataIndex: 'kei_no', key: 'kei_no', align: 'center', width: '30%' },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        render: (text, record) => (<Button type="link" onClick={() => this.deleteApp(record)} style={{color: '#ff4d4f'}}>删除</Button>),
      },
    ],
    subcolumns: [
      {
        title: '应用类型', dataIndex: 'typename', key: 'typename', align: 'center'
      },
      {
        title: '语言', dataIndex: 'lang', key: 'lang', align: 'center',
        render: (text, record) => text === 'en-US' ? '英文' : '中文'
      },
      {
        title: '登录', dataIndex: 'login_types', key: 'login_types', align: 'center',
        render: (text, record) => text === 'false' ? '不需要' : '需要'
      },
      {
        title: '权限管理', dataIndex: 'role_type', key: 'role_type', align: 'center',
        render: (text, record) => text === 'false' ? '不启用' : '启用'
      },
      {
        title: '用户绑定', dataIndex: 'user_binding', key: 'user_binding', align: 'center',
        render: (text, record) => {
          let val = ''
          if (!text) return '无'
          if (text.indexOf('uname_pwd') > -1) {
            val = '用户名'
          }
          if (text.indexOf('sms_vcode') > -1) {
            val = val ? val + ',手机号' : '手机号'
          }
          return val
        }
      },
      {
        title: '皮肤', dataIndex: 'css', key: 'css', align: 'center',
        render: (text, record) => {
          const style = {
            bg_black_style_blue: '蓝黑色系',
            bg_white_style_blue: '蓝白色系',
            bg_black_style_red: '红黑色系',
            bg_white_style_red: '红白色系',
            bg_black_style_orange_red: '橙红黑色系',
            bg_white_style_orange_red: '橙红白色系',
            bg_black_style_orange: '橙黑色系',
            bg_white_style_orange: '橙白色系',
            bg_black_style_orange_yellow: '橙黄黑色系',
            bg_white_style_orange_yellow: '橙黄白色系',
            bg_black_style_yellow: '黄黑色系',
            bg_white_style_yellow: '黄白色系',
            bg_black_style_yellow_green: '黄绿黑色系',
            bg_white_style_yellow_green: '黄绿白色系',
            bg_black_style_green: '绿黑色系',
            bg_white_style_green: '绿白色系',
            bg_black_style_cyan: '青黑色系',
            bg_white_style_cyan: '青白色系',
            bg_black_style_blue_purple: '蓝紫黑色系',
            bg_white_style_blue_purple: '蓝紫白色系',
            bg_black_style_purple: '紫黑色系',
            bg_white_style_purple: '紫白色系',
            bg_black_style_magenta: '洋红黑色系',
            bg_white_style_magenta: '洋红白色系',
            bg_black_style_grass_green: '草绿黑色系',
            bg_white_style_grass_green: '草绿白色系',
            bg_black_style_deep_red: '深红黑色系',
            bg_white_style_deep_red: '深红白色系'
          }

          return style[text] || '蓝黑色系'
        }
      },
      {
        title: '标题', dataIndex: 'title', key: 'title', align: 'center', width: '170px'
      },
      {
        title: '图标', dataIndex: 'favicon', key: 'favicon', align: 'center', width: '120px',
        render: (text, record) => (text ? <img style={{width: '32px', height: '32px'}} src={text} alt="" /> : null)
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        width: '250px',
        width: '40%',
        render: (text, record) => (
          <div>
            <Button type="link" onClick={() => this.deleteSubApp(record)} style={{color: '#ff4d4f'}}>删除</Button>
            <Button type="link" onClick={() => this.jumpApp(record)}>编辑应用</Button>
            <Paragraph style={{display: 'inline-block', margin: 0}} copyable={{ text: `${base_url}${record.typename === 'pad' ? 'mob' : record.typename}/index.html#/index/${this.state.selectApp.kei_no}/${record.typename !== 'pc' ? record.typename + '/' : ''}${record.lang}` }}></Paragraph>
            <Button type="link" onClick={() => this.setState({ selectApp: record, visible: 'edit' })} style={{color: '#8E44AD'}}>修改</Button>
            <Button type="link" onClick={() => this.deleteApp(record)} style={{color: '#ff4d4f'}}>删除</Button>
            <Button type="link" onClick={() => this.setState({ selectSubApp: record, subVisible: 'plus' })} style={{color: '#26C281'}}>添加子应用</Button>
          </div>
        )
        ),
      },
    ],
    selectApp: null,
    selectSubApp: null,
    selectedRowKeys: [],
    selectedSubRowKeys: [],
    visible: false,
    subVisible: false
    subVisible: false,
    transcolumns: [
      { title: '传输号', dataIndex: 'VersionName', key: 'VersionName', align: 'left' },
      { title: '说明', dataIndex: 'ProgramName', key: 'ProgramName', align: 'left' },
      { title: '状态', dataIndex: 'StatusName', key: 'StatusName', align: 'left' },
      { title: '创建时间', dataIndex: 'CreateDate', key: 'CreateDate', align: 'left' },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        render: (text, record) => (
          <div>
            <Button type="link" onClick={() => this.setState({ selectTran: record, transVisible: 'edit' })} style={{color: '#8E44AD'}}>修改</Button>
            <Button type="link" onClick={() => this.deleteTran(record)} style={{color: '#ff4d4f'}}>删除</Button>
            <Button type="link" onClick={() => this.enableTran(record)} style={{color: '#26C281'}}>启用</Button>
          </div>
        ),
      },
    ],
    transVisible: false,
    translist: [],
    tranSearchKey: '',
    selectTran: null,
    transIndex: 1,
    transTotal: 0
  }

  UNSAFE_componentWillMount() {
    document.body.className = ''
    this.getAppList()
    this.getSmStemp()
    this.getTransList()
  }

  /**
@@ -153,10 +114,197 @@
    }
  }

  getTransList = () => {
    const { tranSearchKey, transIndex } = this.state

    let param = {
      func: 's_get_sVersion',
      dataM: 'Y',
      PageSize: 10,
      PageIndex: transIndex,
      OrderCol: 'ID desc'
    }

    if (tranSearchKey) {
      param.VersionName = tranSearchKey
      param.ProgramName = tranSearchKey
    }

    this.setState({
      loading: true
    })

    Api.getCloudConfig(param).then(result => {
      if (result.status) {
        this.setState({
          loading: false,
          translist: result.data
        })
      } else {
        this.setState({
          loading: false
        })
        notification.warning({
          top: 92,
          message: result.message,
          duration: 5
        })
      }
    })
  }

  changeTable = (pagination) => {
    this.setState({
      transIndex: pagination.current
    }, () => {
      this.getTransList()
    })
  }

  tranSearch = (value) => {
    this.setState({tranSearchKey: value}, () => {
      this.getTransList()
    })
  }

  submitTrans = () => {
    const { transVisible, selectTran } = this.state

    this.transRef.handleConfirm().then(res => {
      this.setState({
        confirmloading: true
      })

      let param = {}

      if (transVisible === 'plus') {
        param.func = 's_sVersion_add'
        param.VersionName = res.VersionName
        param.ProgramName = res.ProgramName
      } else {
        param.func = 's_sVersion_upt'
        param.ProgramName = res.ProgramName
        param.ID = selectTran.ID
      }

      Api.getCloudConfig(param).then(result => {
        if (result.status) {
          notification.success({
            top: 92,
            message: '操作成功！',
            duration: 3
          })
          this.setState({
            confirmloading: false,
            transVisible: false
          })
          this.getTransList()
        } else {
          this.setState({
            confirmloading: false
          })
          notification.warning({
            top: 92,
            message: result.message,
            duration: 5
          })
        }
      }, () => {
        this.setState({
          confirmloading: false
        })
      })
    })
  }

  deleteTran = (record) => {
    const _this = this

    let param = {
      func: 's_sVersion_del',
      ID: record.ID
    }
    
    confirm({
      content: '确定删除该传输号吗？',
      onOk() {
        return new Promise(resolve => {
          Api.getCloudConfig(param).then(result => {
            if (result.status) {
              notification.success({
                top: 92,
                message: '操作成功！',
                duration: 3
              })
      
              _this.setState({
                selectTran: null,
              })
              _this.getTransList()
            } else {
              notification.warning({
                top: 92,
                message: result.message,
                duration: 5
              })
            }
            resolve()
          }, () => {
            resolve()
          })
        })
      },
      onCancel() {}
    })
  }

  enableTran = (record) => {
    const _this = this

    let param = {
      func: 's_sVersion_sub',
      ID: record.ID
    }
    
    confirm({
      content: '确定启用该传输号吗？',
      onOk() {
        return new Promise(resolve => {
          Api.getCloudConfig(param).then(result => {
            if (result.status) {
              notification.success({
                top: 92,
                message: '操作成功！',
                duration: 3
              })
      
              _this.setState({
                selectTran: record,
              })
              _this.getTransList()
            } else {
              Modal.error({
                title: result.message,
              })
            }
            resolve()
          }, () => {
            resolve()
          })
        })
      },
      onCancel() {}
    })
  }

  getAppList = () => {
    let param = {
      func: 's_get_kei'
    }

    this.setState({
      loading: true
    })

    Api.getCloudConfig(param).then(result => {
      if (result.status) {
@@ -249,8 +397,6 @@
              })

              _this.setState({
                selectedRowKeys: [],
                selectedSubRowKeys: [],
                selectApp: null,
                selectSubApp: null,
                loading: true
@@ -310,7 +456,6 @@
              })
      
              _this.setState({
                selectedSubRowKeys: [],
                selectSubApp: null,
                loading: true
              })
@@ -343,74 +488,26 @@
    window.open(window.location.href.replace(/#.+/ig, `#/${route}/${window.btoa(window.encodeURIComponent(JSON.stringify({...item, kei_no: selectApp.kei_no, remark: selectApp.remark, type: 'app'})))}`))
  }

  /**
   * 
   */
  onSelectChange = selectedRowKeys => {
    const { applist } = this.state
    let selectApp = applist.filter(item => item.ID === selectedRowKeys[0])[0]

    this.setState({ selectedRowKeys, selectApp })
    this.setState({ selectApp })
  }

  /**
   * 
   */
  onSubChange = selectedSubRowKeys => {
    this.setState({ selectedSubRowKeys })
  onTransChange = selectedRowKeys => {
    const { translist } = this.state
    let selectTran = translist.filter(item => item.ID === selectedRowKeys[0])[0]

    this.setState({ selectTran })
  }

  /**
   * @description 点击整行，触发切换， 判断是否可选，单选或多选，进行对应操作
   */
  changeRow = (record) => {
    this.setState({ selectedRowKeys: [record.ID], selectApp: record })
    this.setState({ selectApp: record })
  }

  /**
   * @description 点击整行，触发切换， 判断是否可选，单选或多选，进行对应操作
   */
  changeSubRow = (record) => {
    this.setState({ selectedSubRowKeys: [record.ID], selectSubApp: record })
  }

  trigerApp = (type) => {
    if (type === 'edit' && !this.state.selectApp) {
      notification.warning({
        top: 92,
        message: '请选择需要编辑的应用！',
        duration: 5
      })
      return
    }

    this.setState({
      visible: type
    })
  }

  trigerSubApp = (type) => {
    if (type === 'edit' && !this.state.selectSubApp) {
      notification.warning({
        top: 92,
        message: '请选择需要编辑的子应用！',
        duration: 5
      })
      return
    } else if (!this.state.selectApp) {
      notification.warning({
        top: 92,
        message: '请选择应用！',
        duration: 5
      })
      return
    }

    this.setState({
      subVisible: type
    })
  }

  
  submitCard = () => {
    const { selectApp, visible } = this.state
@@ -455,8 +552,6 @@
          })

          this.setState({
            selectedRowKeys: [],
            selectedSubRowKeys: [],
            selectApp: null,
            selectSubApp: null,
            confirmloading: false,
@@ -541,7 +636,6 @@
          })

          this.setState({
            selectedSubRowKeys: [],
            selectSubApp: null,
            confirmloading: false,
            subVisible: false,
@@ -567,7 +661,7 @@
  }

  render () {
    const { loading, visible, subVisible, columns, applist, selectedRowKeys, selectedSubRowKeys, subcolumns, selectApp, selectSubApp } = this.state
    const { loading, visible, subVisible, columns, transcolumns, applist, translist, transVisible, selectApp, selectTran, selectSubApp } = this.state

    return (
      <div className="mk-app-manage">
@@ -579,34 +673,141 @@
              <Spin />
            </div> : null
          }
          <div className="app-table">
            <div className="app-action">
              <Button className="mk-green" onClick={() => this.trigerApp('plus')}>添加</Button>
              <Button className="mk-purple" onClick={() => this.trigerApp('edit')}>修改</Button>
          <div className="view-wrap">
            <div className="left-view">
              <div className="app-table">
                <div className="app-action">
                  <Button className="mk-green" onClick={() => this.setState({ visible: 'plus' })}>添加应用</Button>
                </div>
                <Table
                  rowKey="ID"
                  columns={columns}
                  dataSource={applist}
                  pagination={false}
                  rowSelection={{ type: 'radio', selectedRowKeys: selectApp ? [selectApp.ID] : [], onChange: this.onSelectChange }}
                  onRow={(record) => ({ onClick: () => this.setState({ selectApp: record })})}
                />
              </div>
              <div className={'trans-table' + (this.state.transTotal <= 10 ? ' no-footer' : '')}>
                <div className="app-action">
                  <Button className="mk-green" onClick={() => this.setState({ transVisible: 'plus' })}>添加传输号</Button>
                  <Search placeholder="综合搜索" onSearch={value => this.tranSearch(value)} enterButton />
                </div>
                <Table
                  rowKey="ID"
                  columns={transcolumns}
                  dataSource={translist}
                  pagination={{
                    current: this.state.transIndex,
                    pageSize: 10,
                    total: this.state.transTotal || 0
                  }}
                  rowSelection={{ type: 'radio', selectedRowKeys: selectTran ? [selectTran.ID] : [], onChange: this.onTransChange }}
                  onRow={(record) => ({ onClick: () => this.setState({ selectTran: record })})}
                  onChange={this.changeTable}
                />
              </div>
              {/* <div className={'script-table' + (this.state.transTotal <= 10 ? ' no-footer' : '')}>
                <div className="app-action">
                  <Button className="mk-green" onClick={() => this.setState({ scriptVisible: 'plus' })}>添加脚本</Button>
                  <Search placeholder="综合搜索" onSearch={value => this.scriptSearch(value)} enterButton />
                </div>
                <Table
                  rowKey="ID"
                  columns={transcolumns}
                  dataSource={translist}
                  pagination={{
                    current: this.state.transIndex,
                    pageSize: 10,
                    total: this.state.transTotal || 0
                  }}
                  rowSelection={{ type: 'radio', selectedRowKeys: selectTran ? [selectTran.ID] : [], onChange: this.onTransChange }}
                  onRow={(record) => ({ onClick: () => this.setState({ selectTran: record })})}
                  onChange={this.changeTable}
                />
              </div> */}
            </div>
            <Table
              rowKey="ID"
              columns={columns}
              dataSource={applist}
              pagination={false}
              rowSelection={{ type: 'radio', selectedRowKeys, onChange: this.onSelectChange }}
              onRow={(record) => ({ onClick: () => {this.changeRow(record)} })}
            />
          </div>
          <div className="app-table">
            <div className="sub-app-title"><span>子应用</span></div>
            <div className="app-action">
              <Button className="mk-green" onClick={() => this.trigerSubApp('plus')}>添加</Button>
              <Button className="mk-purple" onClick={() => this.trigerSubApp('edit')}>修改</Button>
            <div className="right-view">
              {selectApp ? <div className="app-title">{selectApp.remark}</div> : null}
              {selectApp && selectApp.sublist.map((item, index) => {
                let css = skinStyle[item.css] ? skinStyle[item.css].name : ''
                let color = skinStyle[item.css] ? skinStyle[item.css].color : '#e8e8e8'
                let binding = ''
                if (item.user_binding) {
                  if (item.user_binding.indexOf('uname_pwd') > -1) {
                    binding = '用户名'
                  }
                  if (item.user_binding.indexOf('sms_vcode') > -1) {
                    binding = binding ? binding + '，手机号' : '手机号'
                  }
                }
                return (
                  <div className="sub-app" key={index} style={{borderColor: color}}>
                    <Row>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">应用类型:</div>
                          <div className="content" style={{fontSize: '18px', fontWeight: 600}}>{item.typename}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">语言:</div>
                          <div className="content" style={{textDecoration: 'underline'}}>{item.lang === 'en-US' ? '英文' : '中文'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">权限管理:</div>
                          <div className="content">{item.role_type === 'false' ? '不启用' : '启用'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">登录:</div>
                          <div className="content">{item.login_types === 'false' ? '不需要' : '需要'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">皮肤:</div>
                          <div className="content" style={{color: color}}>{css}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          {binding ? <div className="label">
                            <Tooltip placement="topLeft" title="微信公众号登录时，系统用户与微信用户的绑定方式。">
                              <Icon type="question-circle" />
                              用户绑定:
                            </Tooltip>
                          </div> : null}
                          <div className="content">{binding}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">标题:</div>
                          <div className="content">{item.title || '无'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">网站图标:</div>
                          <div className="content">{item.favicon ? <img style={{width: '30px', height: '30px'}} src={item.favicon} alt="" /> : '无'}</div>
                        </div>
                      </Col>
                    </Row>
                    <div className="action">
                      <Button type="link" onClick={() => this.setState({ selectSubApp: item, subVisible: 'edit' })} style={{color: '#8E44AD'}}>修改</Button>
                      <Button type="link" onClick={() => this.deleteSubApp(item)} style={{color: '#ff4d4f'}}>删除</Button>
                      <Button type="link" onClick={() => this.jumpApp(item)}>编辑应用</Button>
                      <Paragraph style={{display: 'inline-block', margin: 0}} copyable={{ text: `${base_url}${item.typename === 'pad' ? 'mob' : item.typename}/index.html#/index/${this.state.selectApp.kei_no}/${item.typename !== 'pc' ? item.typename + '/' : ''}${item.lang}` }}></Paragraph>
                    </div>
                  </div>
                )
              })}
            </div>
            <Table
              rowKey="ID"
              columns={subcolumns}
              dataSource={selectApp ? selectApp.sublist : []}
              pagination={false}
              rowSelection={{ type: 'radio', selectedRowKeys: selectedSubRowKeys, onChange: this.onSubChange }}
              onRow={(record) => ({ onClick: () => {this.changeSubRow(record)} })}
            />
          </div>
          <Modal
            title={'编辑应用'}
@@ -623,6 +824,20 @@
            <MutilForm type={visible} card={visible === 'edit' ? selectApp : ''} wrappedComponentRef={(inst) => this.mobcardRef = inst} inputSubmit={this.submitCard} />
          </Modal>
          <Modal
            title={transVisible === 'plus' ? '添加传输号' : '编辑传输号'}
            width={'600px'}
            maskClosable={false}
            visible={!!transVisible}
            onCancel={() => this.setState({transVisible: false})}
            confirmLoading={this.state.confirmloading}
            onOk={this.submitTrans}
            cancelText="取消"
            okText="确定"
            destroyOnClose
          >
            <TransForm type={transVisible} card={transVisible === 'edit' ? selectTran : ''} wrappedComponentRef={(inst) => this.transRef = inst} inputSubmit={this.submitTrans} />
          </Modal>
          <Modal
            title={'编辑子应用'}
            width={'850px'}
            maskClosable={false}

 src/views/appmanage/index.scss

@@ -1,41 +1,104 @@
.mk-app-manage {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 70px;
  padding: 70px 30px;

  .mob-header-container {
    padding-right: 0px;
    position: relative;
    z-index: 10;
    left: 0;
  }
  .app-table {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 30px 20px;
    .sub-app-title {
      margin-bottom: 15px;
      border-bottom: 1px solid #e8e8e8;
      span {
        position: relative;
        top: 1px;
        display: inline-block;
        color: #1890ff;
        padding: 10px 15px 5px;
        border-bottom: 2px solid #1890ff;
  .view-wrap {
    width: 100%;
    position: relative;
    display: flex;

    .left-view {
      flex: 1;
      width: 60%;
      padding-right: 5px;
      .trans-table {
        margin-top: 30px;
        .ant-input-search {
          width: 250px;
          float: right;
        }
      }
      .trans-table.no-footer {
        .ant-pagination {
          display: none;
        }
      }
    }
    .right-view {
      width: 40%;
      padding-left: 20px;

      .app-title {
        font-size: 16px;
        font-weight: 500;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #d8d8d8;
        margin-bottom: 17px;
      }
      .sub-app {
        margin: 10px 10px 25px;
        border: 1px solid #e8e8e8;
        height: 180px;
        border-radius: 4px;
        padding-top: 10px;

        .app-item {
          height: 30px;
          line-height: 30px;
          div {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 30px;
          }
          .label {
            width: 40%;
            text-align: right;
            color: rgba(0, 0, 0, 0.65);
            .anticon-question-circle {
              color: #c49f47;
              margin-right: 3px;
            }
          }
          .content {
            width: 60%;
            padding-left: 10px;
            color: rgba(0, 0, 0, 0.85);
          }
        }
        .action {
          text-align: right;
          padding: 5px 20px;
          margin-top: 5px;
          border-top: 1px solid #e8e8e8;
        }
      }
    }
  }
  .ant-table-wrapper {
    border: 1px solid #e8e8e8;
    border-bottom: 0;
    border-radius: 4px;
    .ant-table-tbody > tr.ant-table-row-selected td {
      background: #bae7ff;
    .ant-table-body {
      border: 1px solid #e8e8e8;
      border-bottom: 0;
      border-radius: 4px;
    }
    .ant-table-tbody {
      > tr.ant-table-row-selected td {
        background: #bae7ff;
      }
    }
  }
  .app-action {
    button {
      margin: 0px 15px 15px 0px;
    >button {
      margin-bottom: 10px;
    }
  }
}

 src/views/appmanage/submutilform/index.jsx

@@ -174,20 +174,20 @@
                initialValue: card ? card.css : 'bg_black_style_blue'
              })(
                <Select>
                  <Select.Option value="bg_black_style_blue">蓝系</Select.Option>
                  <Select.Option value="bg_black_style_red">红系</Select.Option>
                  <Select.Option value="bg_black_style_orange_red">橙红系</Select.Option>
                  <Select.Option value="bg_black_style_orange">橙系</Select.Option>
                  <Select.Option value="bg_black_style_orange_yellow">橙黄系</Select.Option>
                  <Select.Option value="bg_black_style_yellow">黄系</Select.Option>
                  <Select.Option value="bg_black_style_yellow_green">黄绿系</Select.Option>
                  <Select.Option value="bg_black_style_green">绿系</Select.Option>
                  <Select.Option value="bg_black_style_cyan">青系</Select.Option>
                  <Select.Option value="bg_black_style_blue_purple">蓝紫系</Select.Option>
                  <Select.Option value="bg_black_style_purple">紫系</Select.Option>
                  <Select.Option value="bg_black_style_magenta">洋红系</Select.Option>
                  <Select.Option value="bg_black_style_grass_green">草绿系</Select.Option>
                  <Select.Option value="bg_black_style_deep_red">深红系</Select.Option>
                  <Select.Option value="bg_black_style_blue">蓝色</Select.Option>
                  <Select.Option value="bg_black_style_red">红色</Select.Option>
                  <Select.Option value="bg_black_style_orange_red">橙红色</Select.Option>
                  <Select.Option value="bg_black_style_orange">橙色</Select.Option>
                  <Select.Option value="bg_black_style_orange_yellow">橙黄色</Select.Option>
                  <Select.Option value="bg_black_style_yellow">黄色</Select.Option>
                  <Select.Option value="bg_black_style_yellow_green">黄绿色</Select.Option>
                  <Select.Option value="bg_black_style_green">绿色</Select.Option>
                  <Select.Option value="bg_black_style_cyan">青色</Select.Option>
                  <Select.Option value="bg_black_style_blue_purple">蓝紫色</Select.Option>
                  <Select.Option value="bg_black_style_purple">紫色</Select.Option>
                  <Select.Option value="bg_black_style_magenta">洋红色</Select.Option>
                  <Select.Option value="bg_black_style_grass_green">草绿色</Select.Option>
                  <Select.Option value="bg_black_style_deep_red">深红色</Select.Option>
                </Select>
              )}
            </Form.Item>

 src/views/appmanage/transform/index.jsx

New file
@@ -0,0 +1,89 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input } from 'antd'
import './index.scss'

class MainSearch extends Component {
  static propTpyes = {
    type: PropTypes.any,         // 编辑类型
    card: PropTypes.any,         // 编辑应用
    inputSubmit: PropTypes.func  // input回车提交
  }

  state = {}

  /**
   * @description 获取表单值
   */
  handleConfirm = () => {
    return new Promise(resolve => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          resolve(values)
        }
      })
    })
  }

  /**
   * @description 回车提交
   */
  handleSubmit = (e) => {
    e.preventDefault()
    this.props.inputSubmit()
  }

  render() {
    const { card, type } = this.props
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      }
    }
    return (
      <Form {...formItemLayout} className="mob-card-edit-form">
        <Row gutter={24}>
          {type !== 'edit' ? <Col span={24}>
            <Form.Item label="传输号">
              {getFieldDecorator('VersionName', {
                initialValue: card ? card.VersionName : '',
                rules: [{
                  required: true,
                  message: '请输入传输号!'
                }, {
                  pattern: /^[a-zA-Z0-9]*$/gi,
                  message: '请输入数字或字母!'
                }, {
                  max: 20,
                  message: '传输号不可超过20个字符!'
                }]
              })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col> : null}
          <Col span={24}>
            <Form.Item label="描述">
              {getFieldDecorator('ProgramName', {
                initialValue: card ? card.ProgramName : '',
                rules: [{
                  required: true,
                  message: '请输入描述!'
                }, {
                  max: 50,
                  message: '描述不可超过50个字符!'
                }]
              })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    )
  }
}

export default Form.create()(MainSearch)

 src/views/appmanage/transform/index.scss

New file
@@ -0,0 +1,4 @@
.mob-card-edit-form {
  padding: 0px 24px 20px;

}