AlanWang 2020-12-10 11:57:23
React + nodejs 提交成功界面(包含进度条)
//***frontend/src/pages/businessUser/newPage/newSuccess.js ***
import React from 'react'
import TestTTT from '../../../components/resultPage/testTTT'
import SubmitSuccessPage from '../../../components/resultPage/submitSuccessPage'
import StepProgress, { stepProgress } from '../../../components/resultPage/stepProgress'
export default class NewSuccess extends React.Component {
render(){
var successItems = {
successTitle: "Idea submit Success - RaiseIdea",
subTitle: "Idea request number:2020182818828182881 server configuration takes 1-5 minutes, please wait." ,
homeButtonName:"Return Home",
gotoButtonName:"Raise New Idea",
homeRul:"/EUC",
GotoUrl:"/EUC/NewAutomation/Raiseidea"
}
var stepItems = [
{ title: "Raise Idea", description: "" },
{ title: "Prioritize", description: "" },
{ title: "Pick up Idea", description: "" },
{ title: "Initial Risk Assessment", description: "" },
{ title: "Build & Test", description: "" },
{ title: "UAT", description: "" },
{ title: "Final Risk Assessment", description: "" },
{ title: "Go-live", description: "" },
{ title: "Release", description: "" }
]
return (
<div width='60%'>
<SubmitSuccessPage successItems ={successItems} />
<div><br /><br /></div>
<div><br /><br /></div>
<StepProgress stepNo='5' stepItems = {stepItems}/>
</div>
)
}
}
//**frontend/src/components/resultPage/stepProgress.js **
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './result.css';
import { Steps } from 'antd';
const { Step } = Steps;
export const stepProgress = props => {
const {stepNo} = props
const {stepItems} = props
let nStep = stepNo
var strSteplist = new Array(10)
for (var i=0;i<stepItems.length;i++){
strSteplist[i] = <Step title={stepItems[i]['title']} description={stepItems[i]['description']} />
}
return (
<div>
<Steps progressDot current={nStep}>
{strSteplist}
{/* <Step title={stepItems[0]['title']} description={stepItems[0]['description']} />
<Step title="Prioritize" description="" />
<Step title="Pick up Idea" description="" />
<Step title="Initial Risk Assessment" description="" />
<Step title="Build & Test" description="" />
<Step title="Build & Test" description="" />
<Step title="Final Risk Assessment" description="" />
<Step title="Go-live" description="" />
<Step title="Release" description="" /> */}
</Steps>
</div>
)
}
export default stepProgress
//***frontend/src/components/resultPage/submitSuccessPage.js ***
import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'
import './result.css'
import { Result, Button } from 'antd'
export const submitSuccess = props => {
//const ideaType = 'Idea submit Success'
const {successItems} = props
let ideaType = successItems['successTitle']
let strSubTitle = successItems['subTitle']
//let ideaType1 = ideaType + this.props
return (
<div>
<Result
status="success"
title={ideaType}
subTitle= {strSubTitle}
extra={[
<Button type="primary" key="returnHome"
onClick={() => {
window.location.href = successItems['homeRul']
}}
>
{successItems['homeButtonName']}
</Button>,
<Button key="NewIdea"
onClick={() => {
window.location.href = successItems['GotoUrl']
}}
>
{successItems['gotoButtonName']} </Button>,
]}
/>
</div>
)
}
export default submitSuccess