From f59a500d24291d7f54b71dcca939a2a23dedca7c Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 18 六月 2020 17:52:03 +0800 Subject: [PATCH] 2020-06-18 --- src/mob/mobcard/index.jsx | 178 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 163 insertions(+), 15 deletions(-) diff --git a/src/mob/mobcard/index.jsx b/src/mob/mobcard/index.jsx index 3cbb63d..2186629 100644 --- a/src/mob/mobcard/index.jsx +++ b/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) // 鍏抽敭瀛楃鏇挎崲锛宐ase64鍔犲瘑 - // _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> ) } -- Gitblit v1.8.0