change

src/app/basicVersion/caseShow/CaseDetail.js

@@ -1,9 +1,7 @@
 import React, {Component} from 'react';
 import {Layout, Button, notification, Row, Col, Icon, message, Spin} from 'antd';
 import {getCookie} from "../../../cookie";
-import {graphqlUrl} from "../../../config";
-import {GET_USER, SEARCH_APIGROUP, SHOW_CASE} from "../../../gql";
-import {request} from 'graphql-request'
+import {SHOW_CASE} from "../../../gql";
 import {FormattedMessage} from 'react-intl';
 import copy from 'copy-to-clipboard';
 import UserCustom from './UserCustom';
@@ -30,14 +28,6 @@ class CaseDetail extends Component {
     componentWillMount() {
         this._isMounted = true;
 
-        // 查询是否登录
-        let userID = getCookie('user_id');
-        if (userID !== undefined && userID !== '') {
-            this.setState({
-                userID
-            });
-        }
-
         // 查询跳转来的案例，转成 apigroup id
         // 此前，传递的值是 schemaID，考虑到都是根据 schemaID 生成的案例，所以 bucketName 是基于 schema.edn 的，在 cos 比较好找
         // 又考虑到 fc 中仍有不含 schema.edn 的页面 fc。 故添加了 case 的表和 project 的 projectType === 'case'
@@ -49,41 +39,6 @@ class CaseDetail extends Component {
                 caseID: this.props.location.state.caseID,
             });
         }
-        //     switch (this.props.location.state.schemaID) {
-        //         case 'order_schemaID':
-        //             this.setState({
-        //                 bucketName: 'appointment'
-        //             });
-        //             groupID = 'order';
-        //             break;
-        //         case 'ecommerce_schemaID':
-        //             this.setState({
-        //                 bucketName: 'e-commerce'
-        //             });
-        //             groupID = 'ecommerce';
-        //             break;
-        //         case 'bills_schemaID':
-        //             this.setState({
-        //                 bucketName: 'bills'
-        //             });
-        //             groupID = 'bills';
-        //             break;
-        //         default:
-        //             break;
-        //     }
-        // }
-
-        // 查询该案例的 domain
-        // request(graphqlUrl, SEARCH_APIGROUP, {id: groupID}).then(res => {
-        //     let caseDeploy = res.apiGWGroupbyid;
-        //     let domain = caseDeploy.defaultDomain;
-        //     let userDomain = caseDeploy.userDomain;
-        //     if (this._isMounted) {
-        //         this.setState({
-        //             domain: userDomain ? userDomain : domain
-        //         })
-        //     }
-        // })
     }
 
     componentWillUnmount() {
@@ -150,9 +105,6 @@ class CaseDetail extends Component {
                                                                 <div>
                                                                     <div className={'schema-name'}><FormattedMessage id='detail'/></div>
                                                                     <div className={'case-detail-attention'}> {thisCase.detailAttention? <div><Icon type="alert" />{thisCase.detailAttention}</div> : ''}</div>
-                                                                    <div className={"case-detail-result"}>
-                                                                        <img alt="案例展示" src={thisCase.img}/>
-                                                                    </div>
                                                                     <div className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
                                                                     <div className={'detail-images'}>
                                                                         {

src/app/basicVersion/caseShow/CaseShow.jsx

@@ -1,11 +1,15 @@
 import React, {Component} from 'react';
-import {Layout, Card, Button, Avatar, Spin, Icon} from 'antd';
+import {Layout, Card, Button, Avatar, Spin, Icon, Row, Col, notification} from 'antd';
 import lo from '../../../images/lo.png'
 import './index.css'
 import {graphqlUrl} from "../../../config";
-import {SHOW_ALL_CASE} from "../../../gql";
+import {SHOW_ALL_CASE, SHOW_CASE} from "../../../gql";
 import {FormattedMessage} from 'react-intl';
 import {request} from 'graphql-request'
+import UserCustom from "./UserCustom";
+import {Query} from "react-apollo";
+import gql from "graphql-tag";
+import {getCookie} from "../../../cookie";
 
 const {Content} = Layout;
 const {Meta} = Card;
@@ -15,12 +19,22 @@ class CaseShow extends Component {
         super(props);
         this.state = {
             examplesIoobot: [],
-            examplesOthers: []
+            examplesOthers: [],
+            showCustom: false,
+            chosenSchemaID: ''
         }
     }
 
     componentWillMount() {
         this._isMounted = true;
+        // 查询是否登录
+        let userID = getCookie('user_id');
+        if (userID !== undefined && userID !== '') {
+            this.setState({
+                userID
+            });
+        }
+
         request(graphqlUrl, SHOW_ALL_CASE, {}).then(data => {
                 let cases = data.case_by_props;
                 console.log(cases);
@@ -40,86 +54,152 @@ class CaseShow extends Component {
         this._isMounted = false;
     }
 
+    schemaIDChangeBucket = (schemaID) => {
+        if (this.props.location && this.props.location.state) {
+            switch (schemaID) {
+                case 'order_schemaID':
+                    return 'appointment';
+                case 'ecommerce_schemaID':
+                    return 'e-commerce';
+                case 'bills_schemaID':
+                    return 'bills';
+                default:
+                    break;
+            }
+        }
+    };
+
+    backToMe = () => {
+        this.setState({
+            showCustom: false
+        })
+    };
 
     render() {
+        let {userID, showCustom, chosenSchemaID} = this.state;
         return (
             <div id="example-show">
                 <Layout style={{padding: '24px', minHeight: '300px'}}>
                     <Content className="content">
-                        <div className={'schema-name'} style={{fontSize: 25}}><FormattedMessage id='scan and use'/>
-                        </div>
-                        <div>
-                            <div className={'schema-name'}><FormattedMessage id='ioobot case'/></div>
-                            <div className="caseAllShow">
-                                {
-                                    this.state.examplesIoobot.length === 0 ?
-                                        <Spin/>
-                                        :
-                                        this.state.examplesIoobot.map((item, index) => (
-                                            <span key={index} style={{padding: '10px 0'}}>
-                                        <Card
-                                            key={index}
-                                            style={{width: 300}}
-                                            cover={<div className='cover-div'><img className='cover-img' src={item.img}
-                                                                                   alt={item.title + '' + item.description}/>
-                                            </div>}
-                                            actions={[
-                                                <span>已部署: {item.deployedNum}</span>,
-                                                <span><Icon type="like" />: {item.like}</span>,
-                                                <Button type="primary" onClick={() => {
-                                                    this.props.history.push({
-                                                        pathname: `/common/example/deploy-cloud-choose`,
-                                                        state: {caseID: item.id,}
-                                                    });
-                                                }}><FormattedMessage id='step more'/></Button>
-                                            ]}
-                                        >
-                                            <Meta
-                                                avatar={<Avatar src={lo}/>}
-                                                title={item.title}
-                                                description={item.description}
-                                            />
-                                        </Card>
-                                    </span>
-                                        ))
-                                }
-                            </div>
-                        </div>
-                        {/*<div>*/}
-                            {/*<div className={'schema-name'}><FormattedMessage id='other developer case'/></div>*/}
-                            {/*<div className="caseAllShow">*/}
-                                {/*{*/}
-                                    {/*this.state.examplesOthers.length === 0 ?*/}
-                                        {/*<Spin/>*/}
-                                        {/*:*/}
-                                        {/*this.state.examplesOthers.map((item, index) => (*/}
-                                            {/*<span key={index} style={{padding: '10px 0'}}>*/}
-                                        {/*<Card*/}
-                                            {/*key={index}*/}
-                                            {/*style={{width: 300}}*/}
-                                            {/*cover={<div className='cover-div'><img className='cover-img' src={item.img} alt={item.title + '' + item.description}/></div>}*/}
-                                            {/*actions={[*/}
-                                                {/*<span>已部署: {item.deployedNum}</span>,*/}
-                                                {/*<span><Icon type="like" />: {item.like}</span>,*/}
-                                                {/*<Button type="primary" onClick={() => {*/}
-                                                    {/*this.props.history.push({*/}
-                                                        {/*pathname: `/common/deploy-cloud-choose`,*/}
-                                                        {/*state: {caseID: item.id,}*/}
-                                                    {/*});*/}
-                                                {/*}}><FormattedMessage id='step more'/></Button>*/}
-                                            {/*]}*/}
-                                        {/*>*/}
-                                            {/*<Meta*/}
-                                                {/*avatar={<Avatar src={item.user_id.avatar}/>}*/}
-                                                {/*title={item.title}*/}
-                                                {/*description={item.description}*/}
-                                            {/*/>*/}
-                                        {/*</Card>*/}
-                                    {/*</span>*/}
-                                        {/*))*/}
-                                {/*}*/}
-                            {/*</div>*/}
-                        {/*</div>*/}
+                        {
+                            !showCustom ?
+                                <div>
+                                    <div className={'schema-name'} style={{fontSize: 25}}><FormattedMessage
+                                        id='scan and use'/></div>
+                                    <div>
+                                        <div className={'schema-name'}><FormattedMessage id='ioobot case'/></div>
+                                        <div className="caseAllShow">
+                                            {
+                                                this.state.examplesIoobot.length === 0 ?
+                                                    <Spin/>
+                                                    :
+                                                    this.state.examplesIoobot.map((item, index) => (
+                                                        <Row key={index}>
+                                                            <Col span={16}>
+                                                                <Query query={gql(SHOW_CASE)} variables={{id: item.id}}>
+                                                                    {
+                                                                        ({loading, error, data}) => {
+                                                                            if (loading) {
+                                                                                return <Spin/>
+                                                                            }
+                                                                            if (error) {
+                                                                                return 'error!';
+                                                                            }
+                                                                            let thisCase = data.case_by_id;
+
+                                                                            return (
+                                                                                <div>
+                                                                                    <div className={'case-detail-attention'}> {thisCase.detailAttention ?
+                                                                                        <div>
+                                                                                            <Icon type="alert"/>{thisCase.detailAttention}
+                                                                                        </div>
+                                                                                        :
+                                                                                        ''
+                                                                                    }
+                                                                                    </div>
+                                                                                    <div
+                                                                                        className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
+                                                                                    <div className={'detail-images'}>
+                                                                                        <img
+                                                                                            key={thisCase.detailImages[0]}
+                                                                                            src={thisCase.detailImages[0]}
+                                                                                            alt=""
+                                                                                            height="500"/>
+                                                                                    </div>
+                                                                                    <div>
+                                                                                        <div
+                                                                                            className={'schema-name'}>想要定制化该案例
+                                                                                        </div>
+                                                                                        <div>
+                                                                                            <div>联系作者</div>
+                                                                                            <div>
+                                                                                                <Icon type="mail"/>
+                                                                                                {
+                                                                                                    thisCase.user_id.email ? thisCase.user_id.email : '该作者未留下联系方式'
+                                                                                                }
+                                                                                            </div>
+                                                                                        </div>
+                                                                                        <div>
+                                                                                            <div>自行修改代码</div>
+                                                                                            <div>
+                                                                                                <Icon type="github"/>
+                                                                                                {
+                                                                                                    thisCase.codeAddress ? thisCase.codeAddress : '该作者未留下代码仓库地址'
+                                                                                                }
+                                                                                            </div>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                </div>
+                                                                            )
+                                                                        }
+                                                                    }
+                                                                </Query>
+                                                            </Col>
+                                                            <Col span={8}>
+                                                                <div style={{padding: '10px 0'}}>
+                                                                    <Card
+                                                                        key={index}
+                                                                        style={{width: 300}}
+                                                                        cover={<div className='cover-div'><img
+                                                                            className='cover-img'
+                                                                            src={item.img}
+                                                                            alt={item.title + '' + item.description}/>
+                                                                        </div>}
+                                                                        actions={[
+                                                                            <span>已部署: {item.deployedNum}</span>,
+                                                                            <span><Icon
+                                                                                type="like"/>: {item.like}</span>,
+                                                                            <Button type="primary" onClick={() => {
+                                                                                this.setState({
+                                                                                    showCustom: true,
+                                                                                    chosenSchemaID: item.schema_id.id
+                                                                                })
+                                                                            }}><FormattedMessage id='one more step'/></Button>
+                                                                        ]}
+                                                                    >
+                                                                        <Meta
+                                                                            avatar={<Avatar src={lo}/>}
+                                                                            title={item.title}
+                                                                            description={item.description}
+                                                                        />
+                                                                    </Card>
+                                                                </div>
+                                                            </Col>
+                                                        </Row>
+                                                    ))
+                                            }
+                                        </div>
+                                    </div>
+                                </div>
+                                :
+                                <UserCustom
+                                    userID={userID}
+                                    bucketName={this.schemaIDChangeBucket(chosenSchemaID)}
+                                    history={this.props.history}
+                                    backToMe={this.backToMe}
+                                />
+                        }
+
                     </Content>
                 </Layout>
             </div>

src/app/basicVersion/caseShow/UserCustom.js

@@ -1,9 +1,9 @@
 import React, {Component} from 'react';
 import {Link} from 'react-router-dom';
-import {deployAll, graphqlUrl, storeFile} from "../../../config";
+import {deployAll, graphqlUrl, storeFile, copyCos} from "../../../config";
 import {ADD_APIGROUP, ADD_APIGWPATH, ADD_DEPLOY, ADD_PROJECT, SHOW_CLOUD} from "../../../gql";
 import {CloudConfig} from "../../../login/CloudConfig";
-import {Button, notification, Spin, Input, Radio, Modal, Icon} from 'antd';
+import {Button, Spin, Input, Radio, Modal, Icon} from 'antd';
 import {FormattedMessage} from 'react-intl';
 import {request} from 'graphql-request'
 import {idGen} from "../../../func";
@@ -188,7 +188,7 @@ class UserCustom extends Component {
                                     pathname: `/common/deploy`,
                                     state: {
                                         // 处理传回数据，直接拼接
-                                        url: `http://${subDomain}/test/graphql`
+                                        url: `http://${subDomain}/test/`
                                     }
                                 });
                             })
@@ -242,8 +242,8 @@ class UserCustom extends Component {
                             }}
                         />
                         {
-                            customName===''?
-                                <span style={{color: 'orange'}}>不能为空</span>:''
+                            customName === '' ?
+                                <span style={{color: 'orange'}}>不能为空</span> : ''
                         }
                     </div>
                 </div>
@@ -287,7 +287,7 @@ class UserCustom extends Component {
                 </div>
                 <div>
                     {
-                        deployFailed?
+                        deployFailed ?
                             <span style={{color: 'red', fontSize: 20}}>部署失败!</span>
                             :
                             ''
@@ -299,73 +299,6 @@ class UserCustom extends Component {
                             <Spin tip="部署大约需要几分钟..."/>
                             :
                             <Button style={{margin: '20px 0'}} type='primary' onClick={() => {
-                                // if (appId && secretID && secretKey) {
-                                //     this.setState({
-                                //         disableDeployButton: true
-                                //     });
-                                //
-                                //     // store *.edn to cos
-                                //     let deployConf = dbKind === 'mongodb' ?
-                                //         ` {:secretId "${secretID}"\n` +
-                                //         ` :secretKey "${secretKey}"\n` +
-                                //         ` :appId "${appId}"\n` +
-                                //         ' :region "ap-beijing" \n' +
-                                //         ' }\n'
-                                //         :
-                                //         ` {:secretId "${secretID}"\n` +
-                                //         ` :secretKey "${secretKey}"\n` +
-                                //         ` :appId "${appId}"\n` +
-                                //         ' :region "ap-beijing"\n' +
-                                //         ' :bucket "fc-db"\n' +
-                                //         ' :trustStore "/etc/ssl/certs/java/cacerts"\n' +
-                                //         ` :fc-db-store "save/${bucketName}.dat"\n` +
-                                //         ' :fc-db-dir "fc-db"\n' +
-                                //         ' :graphql-url "http://orderfcdb.ioobot.cn/graphql"\n' +
-                                //         ' :local-tmp-dir "/tmp"\n' +
-                                //         ' :local-db-file "fcdb.dat"\n' +
-                                //         ' :update-tx? true \n' +
-                                //         ' :force-down? true\n' +
-                                //         ' }';
-                                //
-                                //     let a = axios.post(storeFile, {
-                                //         'file-name': `${bucketName}/${dbKind}/${userID}/deploy-conf.edn`,
-                                //         bucket: 'case',
-                                //         cont: deployConf
-                                //     });
-                                //
-                                //     let cont = '{:uri {\n' +
-                                //         ':auth {:admin-db   "order"\n' +
-                                //         ' :u    "ly"\n' +
-                                //         ' :p   "autorunC1705"\n' +
-                                //         ' :host "119.27.174.13"}}\n' +
-                                //         ' :db-name "order"}';
-                                //
-                                //     let b = dbKind === 'mongodb' ?
-                                //         axios.post(storeFile, {
-                                //             'file-name': `${bucketName}/${dbKind}/${userID}/mongo-config.edn`,
-                                //             bucket: 'case',
-                                //             cont
-                                //         })
-                                //         :
-                                //         Promise.resolve({status: 200});
-                                //
-                                //     Promise.all([a, b]).then(value => {
-                                //         if (value.every(res => res.status === 200)) {
-                                //             console.log('store file success , start deploying');
-                                //             this.deploy();
-                                //         }
-                                //     });
-                                // } else {
-                                //     notification['warning']({
-                                //         message: '需要填写配置',
-                                //         description: '后续使用，需要先填写配置',
-                                //     });
-                                //
-                                //     this.props.history.push({
-                                //         pathname: `/login/cloud`
-                                //     })
-                                // }
-
                                 this.setState({
                                     disableDeployButton: true
                                 });
@@ -384,9 +317,8 @@ class UserCustom extends Component {
                                     ' :region "ap-beijing"\n' +
                                     ' :bucket "fc-db"\n' +
                                     ' :trustStore "/etc/ssl/certs/java/cacerts"\n' +
-                                    ` :fc-db-store "save/${bucketName}.dat"\n` +
-                                    ' :fc-db-dir "fc-db"\n' +
-                                    ' :graphql-url "http://orderfcdb.ioobot.cn/graphql"\n' +
+                                    ` :fc-db-store "case/fc-db/${userID}/${bucketName}.dat"\n` +
+                                    ' :fc-db-dir "case"\n' +
                                     ' :local-tmp-dir "/tmp"\n' +
                                     ' :local-db-file "fcdb.dat"\n' +
                                     ' :update-tx? true \n' +
@@ -415,7 +347,17 @@ class UserCustom extends Component {
                                     :
                                     Promise.resolve({status: 200});
 
-                                Promise.all([a, b]).then(value => {
+                                let c = dbKind === 'mongodb' ?
+                                    Promise.resolve({status: 200})
+                                    :
+                                    axios.post(copyCos, {
+                                        'src-bucket': 'case',
+                                        'src-key': `${bucketName}/${bucketName}.dat`,
+                                        'dest-bucket': "case",
+                                        'dest-key': `${bucketName}/fc-db/${userID}/${bucketName}.dat`
+                                    });
+
+                                Promise.all([a, b, c]).then(value => {
                                     if (value.every(res => res.status === 200)) {
                                         console.log('store file success , start deploying');
                                         this.deploy();

src/config.js

@@ -40,6 +40,7 @@ const manageUsers = ['xy_1_je9{d\'\'_32sD+'];
 // fc 配置
 const deployAll = 'http://deploy.ioobot.cn/api/deploy-all';
 const storeFile = 'http://deploy.ioobot.cn/api/store-file';
+const copyCos = 'http://deploy.ioobot.cn/api/copy-cos';
 
 export {
     getIdUrl,
@@ -54,5 +55,6 @@ export {
     removeFC,
     removeAPI,
     deployAll,
-    storeFile
+    storeFile,
+    copyCos
 }

src/gql.js

@@ -1085,6 +1085,9 @@ const SHOW_ALL_CASE = `
                         avatar
                     }
                     like
+                    schema_id {
+                        id
+                    }
                 }
             }
         `;