From cd42d41344f0f780e0c0ac0a3625aeb78160f9dd Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 19 六月 2020 19:58:52 +0800
Subject: [PATCH] 2020-06-19
---
src/views/mobdesign/index.jsx | 141 +++++++++++++++++++++++++++++++++++++---------
1 files changed, 112 insertions(+), 29 deletions(-)
diff --git a/src/views/mobdesign/index.jsx b/src/views/mobdesign/index.jsx
index c90ada7..b98baf9 100644
--- a/src/views/mobdesign/index.jsx
+++ b/src/views/mobdesign/index.jsx
@@ -1,27 +1,38 @@
-import React, {Component} from 'react'
-import {connect} from 'react-redux'
-import { Icon } from 'antd'
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { DndProvider } from 'react-dnd'
+import { fromJS } from 'immutable'
+import HTML5Backend from 'react-dnd-html5-backend'
+import { SketchPicker } from 'react-color'
+import { Icon, Tabs, notification } from 'antd'
-import zhCN from '@/locales/zh-CN/login.js'
-import enUS from '@/locales/en-US/login.js'
+import Api from '@/api'
+import zhCN from '@/locales/zh-CN/mob.js'
+import enUS from '@/locales/en-US/mob.js'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'
+const { TabPane } = Tabs
+
const Header = asyncComponent(() => import('@/mob/header'))
-const Home = asyncComponent(() => import('@/mob/home'))
-const Login = asyncComponent(() => import('@/mob/login'))
+const MobShell = asyncComponent(() => import('@/mob/mobshell'))
+const SourceWrap = asyncComponent(() => import('@/mob/modelsource'))
+const DataSource = asyncComponent(() => import('@/mob/datasource'))
class Mobile extends Component {
state = {
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
- view: null
+ appId: this.props.match.params.appId,
+ appType: this.props.match.params.appType,
+ appConfig: null,
+ saveIng: false,
+ config: null,
+ pageIndex: 0
}
UNSAFE_componentWillMount() {
- this.setState({
- view: {uuid: 'login', type: 'home', parentId: null, parentType: null}
- })
+ this.getAppParam(this.props.match.params.appId)
}
/**
@@ -33,31 +44,103 @@
}
}
+ jumpToManage = () => {
+ this.props.history.replace('/mobmanage')
+ // this.props.history.push('/mobdesign/sdafadjfidsf/dsfsdf')
+ }
+
+ triggerSave = () => {
+ this.setState({
+ saveIng: true
+ })
+ }
+
+ getAppParam = (id) => {
+ Api.getSystemConfig({
+ func: 'sPC_Get_LongParam',
+ MenuID: id
+ }).then(result => {
+ if (result.status) {
+ let appConfig = null
+
+ if (result.LongParam) {
+ try {
+ appConfig = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam)))
+ } catch (e) {
+ console.warn('Parse Failure')
+ appConfig = null
+ }
+ }
+
+ if (!appConfig) {
+ appConfig = {
+ version: 1.0,
+ label: '',
+ uuid: this.props.match.params.appId,
+ pageIndex: 0,
+ sourcelist: [],
+ components: []
+ }
+ }
+
+ this.setState({
+ appConfig: appConfig,
+ config: fromJS(appConfig).toJS()
+ })
+ } else {
+ notification.warning({
+ top: 92,
+ message: result.message,
+ duration: 5
+ })
+ }
+ })
+ }
+
+
+
+ updateConfig = (config) => {
+ this.setState({
+ config: config
+ })
+ }
+
render () {
- const { view } = this.state
+ const { saveIng, appType, config } = this.state
return (
<div className="mobile-view">
- <Header />
- <div className="mob-body">
- <div className="mob-tool">
- <div className="mob-tool-content">
- <div className="plus-content">
- <Icon type="plus-circle" />娣� 鍔� 鍐� 瀹�
+ <Header view="design" jumpToManage={this.jumpToManage} triggerSave={this.triggerSave} saveIng={saveIng} />
+ <DndProvider backend={HTML5Backend}>
+ <div className="mob-body">
+ <div className="mob-tool">
+ <div className="mob-tool-content">
+ <div className="plus-content">
+ <Icon type="plus-circle" />娣� 鍔� 鍐� 瀹�
+ </div>
+ <div className="useable-component">
+ <SourceWrap appType={appType} />
+ </div>
</div>
- <div className="useable-component"></div>
+ <div className="mob-tool-other"></div>
</div>
- <div className="mob-tool-other"></div>
+ {appType === 'mob' && config ?
+ <div className="mob-shell">
+ <MobShell config={config} handleList={this.updateConfig} />
+ </div> : null
+ }
+ <div className="mob-setting">
+ {config ? <Tabs defaultActiveKey="2" animated={false} size="small">
+ <TabPane tab="閰嶇疆" key="1">
+ <SketchPicker />
+ </TabPane>
+ <TabPane tab="鏁版嵁婧�" key="2">
+ <DataSource config={config} updateConfig={this.updateConfig} />
+ </TabPane>
+ </Tabs> : null}
+ </div>
</div>
- <div className="mob-shell">
- {view ? <div className="mob-shell-inner">
- {view.type === 'login' ? <Login /> : null}
- {view.type === 'home' ? <Home /> : null}
- </div> : null}
- </div>
- <div className="mob-setting">
- </div>
- </div>
+ </DndProvider>
</div>
)
}
--
Gitblit v1.8.0