2021-02-05

king

2021-02-05 8d05744179a026a243b86e3a99296e30375ccfb0

2021-02-05

 src/views/design/header/index.jsx

@@ -328,9 +328,9 @@
        {editLevel === 'HS' ? <Button className="level4-close" type="primary" onClick={this.exitManage}>退出</Button> : null}
        {/* 进入编辑按钮 */}
        {!editLevel ? <Icon onClick={this.enterEdit} className="edit-check" type="edit" /> : null}
        {/* {!editLevel && options.sysType === 'local' && window.GLOB.systemType !== 'production' ?
        {!editLevel && options.sysType === 'local' && window.GLOB.systemType !== 'production' ?
          <a href="#/mobmanage" target="_blank" className="mobile" type="edit"> 应用管理 <Icon type="arrow-right" /></a> : null
        } */}
        }
        {/* window.btoa(window.encodeURIComponent(JSON.stringify({ MenuType: 'home', MenuId: 'home_page_id', MenuName: '首页' }))) */}
        {!editLevel && window.GLOB.systemType !== 'production' && this.props.memberLevel >= 20 ?
          <a className="home-edit" href={`#/menudesign/JTdCJTIyTWVudVR5cGUlMjIlM0ElMjJob21lJTIyJTJDJTIyTWVudUlkJTIyJTNBJTIyaG9tZV9wYWdlX2lkJTIyJTJDJTIyTWVudU5hbWUlMjIlM0ElMjIlRTklQTYlOTYlRTklQTElQjUlMjIlN0Q=`} target="_blank" rel="noopener noreferrer">

 src/views/mobmanage/index.jsx

@@ -1,11 +1,67 @@
import React, {Component} from 'react'
// import { fromJS } from 'immutable'
import { Spin, notification, Button, Table } from 'antd'

import Api from '@/api'
// import Utils from '@/utils/utils.js'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const Header = asyncComponent(() => import('@/mob/header'))
const MobCard = asyncComponent(() => import('@/mob/mobcard'))
// const MobCard = asyncComponent(() => import('@/mob/mobcard'))

class MobileManage extends Component {
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: 'Action',
        key: 'action',
        align: 'center',
        render: (text, record) => (<Button type="link" 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: 'link_type', key: 'link_type', align: 'center',
        render: (text, record) => text === 'false' ? '不启用' : '启用'
      },
      {
        title: 'Action',
        key: 'action',
        align: 'center',
        render: (text, record) => (<Button type="link" style={{color: '#ff4d4f'}}>删除</Button>),
      },
    ],
    selectApp: null,
    selectSubApp: null,
    selectedRowKeys: [],
    selectedSubRowKeys: [],
  }

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

  /**
   * @description 组件销毁，清除state更新
   */
@@ -13,6 +69,39 @@
    this.setState = () => {
      return
    }
  }

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

    Api.getCloudConfig(param).then(result => {
      if (result.status) {
        this.setState({
          loading: false,
          applist: result.data.map(item => {
            item.sublist = item.data_detail || []
            item.sublist = item.sublist.map(cell => {
              cell.ID = cell.d_id
              return cell
            })

            return item
          })
        })

      } else {
        this.setState({
          loading: false
        })
        notification.warning({
          top: 92,
          message: result.message,
          duration: 5
        })
      }
    })
  }

  jumpMenu = (card) => {
@@ -23,14 +112,83 @@
    this.props.history.replace(`/mobdesign/${card.uuid}/${_type}/${card.keiNo}/${card.name}`)
  }

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

    this.setState({ selectedRowKeys, selectApp })
  }

  /**
   * 
   */
  onSubChange = selectedSubRowKeys => {

    this.setState({ selectedSubRowKeys })
  }

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

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

  render () {
    const { loading, columns, applist, selectedRowKeys, selectedSubRowKeys, selectApp, subcolumns } = this.state

    return (
      <div className="mobile-manage">
      <div className="mk-app-manage">
        <Header view="manage" />
        <MobCard jumpMenu={this.jumpMenu}/>
        {loading ?
          <div className="loading-mask">
            <div className="ant-spin-blur"></div>
            <Spin />
          </div> : null
        }
        <div className="app-table">
          <div className="app-action">
            <Button className="mk-green">添加</Button>
            <Button className="mk-purple">修改</Button>
          </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">添加</Button>
            <Button className="mk-purple">修改</Button>
          </div>
          <Table
            rowKey="ID"
            columns={subcolumns}
            dataSource={selectApp ? selectApp.sublist : []}
            pagination={false}
            rowSelection={{ type: 'radio', selectedSubRowKeys, onChange: this.onSubChange }}
            onRow={(record) => ({ onClick: () => {this.changeSubRow(record)} })}
          />
        </div>
        {/* <MobCard jumpMenu={this.jumpMenu}/> */}
      </div>
    )
  }
}

export default MobileManage
export default AppManage

 src/views/mobmanage/index.scss

@@ -1,4 +1,4 @@
.mobile-manage {
.mk-app-manage {
  background: #fff;
  min-height: 100vh;

@@ -7,4 +7,34 @@
    position: relative;
    z-index: 10;
  }
  .app-table {
    width: 1200px;
    margin: 0 auto;
    padding: 40px 0px 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;
      }
    }
  }
  .ant-table-wrapper {
    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;
    }
  }
}