2020-06-18

king

2020-06-18 f59a500d24291d7f54b71dcca939a2a23dedca7c

 src/mob/mobcard/index.jsx

@@ -1,15 +1,30 @@
import React, {Component} from 'react'
import { is, fromJS } from 'immutable'
import { Button, Card, Spin, Icon, Row, Col } from 'antd'
import PropTypes from 'prop-types'
import { Card, Spin, Icon, Row, Col, Modal, notification } from 'antd'

import Api from '@/api'
// import Utils from '@/utils/utils.js'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import asyncComponent from '@/utils/asyncSpinComponent'
import './index.scss'

const { confirm } = Modal
const MutilForm = asyncComponent(() => import('./mutilform'))

class CardChart extends Component {
  static propTpyes = {
    jumpMenu: PropTypes.func  // 页面跳转
  }

  state = {
    loading: false,
    data: []
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    loading: true,
    visible: false,
    confirmloading: false,
    data: [],
    card: null
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -24,18 +39,131 @@
    let param = {
      func: 's_get_kei'
    }

    Api.getCloudConfig(param).then(result => {
      if (result.status) {
        this.setState({
          loading: false,
          data: result.data.map(item => {
            return {
              uuid: item.ID,
              keiNo: item.kei_no,
              name: item.remark,
              type: item.typename
            }
          })
        })

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

  editCard = (card) => {
    this.setState({
      card: card || null,
      visible: true
    })
  }

  deleteCard = (card) => {
    let _this = this

    confirm({
      title: '确定删除《' + card.name + '》吗？',
      content: '',
      okText: this.state.dict['mob.confirm'],
      cancelText: this.state.dict['mob.cancel'],
      onOk() {
        return new Promise(resolve => {
          let param = {
            func: 's_kei_del',
            ID: card.uuid,
            kei_no: card.keiNo
          }
    
    // _param.LText = Utils.formatOptions(_param.LText)                   // 关键字符替换，base64加密
    // _param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000' // 时间戳
    // _param.secretkey = Utils.encrypt(_param.LText, _param.timestamp)   // md5密钥
          Api.getCloudConfig(param).then(result => {
            if (result.status) {
              notification.success({
                top: 92,
                message: '删除成功！',
                duration: 5
              })

    Api.getCloudConfig(param).then(res => {
              _this.getMobCards()
            } else {
              notification.warning({
                top: 92,
                message: result.message,
                duration: 5
              })
            }
            resolve()
          })
        })
      },
      onCancel() {}
    })
  }

  submitCard = () => {
    const { card } = this.state

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

      let param = {
        func: 's_kei_addupt',
        ID: card ? card.uuid : Utils.getuuid(),
        TypeName: res.type,
        remark: res.name,
        kei_no: res.type
      }

      Api.getCloudConfig(param).then(result => {
        if (result.status) {
          notification.success({
            top: 92,
            message: card ? '修改成功！' : '添加成功！',
            duration: 5
          })

          this.setState({
            confirmloading: false,
            visible: false,
            loading: true
          })
          this.getMobCards()
        } else {
          this.setState({
            confirmloading: false
          })
          notification.warning({
            top: 92,
            message: result.message,
            duration: 5
          })
        }
      }, () => {
        this.setState({
          confirmloading: false
        })
      })
    })
  }

  render() {
    const { data, loading } = this.state
    const { data, loading, card, dict } = this.state

    return (
      <div className="mob-card-row-box">
@@ -47,17 +175,22 @@
        }
        <Row gutter={24}>
          {data && data.length > 0 &&
            data.map((item, i) => (
              <Col key={i} span={6}>
            data.map(item => (
              <Col key={item.uuid} span={6}>
                <Card
                  size="small"
                  className="chart-card"
                  actions={[
                    <Button />,
                    <Icon title="edit" onClick={() => this.editCard(item)} type="edit" />,
                    <Icon title="delete" onClick={() => this.deleteCard(item)} type="close" />,
                    <Icon title="detail" onClick={() => this.props.jumpMenu(item)} type="arrow-right" />
                  ]}
                >
                  <div className="ant-card-meta-detail">
                    
                  <div className="mk-mob-card-title">
                    {item.name}
                  </div>
                  <div className="mk-mob-card-type">
                    {item.type === 'mob' ? '移动端' : 'PC端'}
                  </div>
                </Card>
              </Col>
@@ -65,11 +198,26 @@
          }
          
          <Col span={6} key="insert">
            <div className="chart-card insert" onClick={() => {}}>
            <div className="chart-card insert" onClick={() => this.editCard()}>
              <Icon type="plus" />
            </div>
          </Col>
        </Row>
        <Modal
          className="mob-card-modal"
          title={card ? '编辑应用' : '新建应用'}
          width={'600px'}
          maskClosable={false}
          visible={this.state.visible}
          okText={this.state.dict['mob.confirm']}
          cancelText={this.state.dict['mob.cancel']}
          onCancel={() => this.setState({visible: false})}
          confirmLoading={this.state.confirmloading}
          onOk={this.submitCard}
          destroyOnClose
        >
          <MutilForm card={card} dict={dict} wrappedComponentRef={(inst) => this.mobcardRef = inst} inputSubmit={this.submitCard} />
        </Modal>
      </div>
    )
  }