|
|
|
@ -2,28 +2,294 @@ |
|
|
|
import React, { useEffect, useRef } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { push } from 'react-router-redux'; |
|
|
|
import { Form, Button, Toast } from '@douyinfe/semi-ui'; |
|
|
|
import { Form, Button, Table, Pagination, Modal } from '@douyinfe/semi-ui'; |
|
|
|
import { IconLock, IconUser } from '@douyinfe/semi-icons'; |
|
|
|
import { useState } from 'react'; |
|
|
|
import moment from "moment"; |
|
|
|
|
|
|
|
const EditionManage = props => { |
|
|
|
const { dispatch, user, error, actions, apiRoot, isRequesting } = props |
|
|
|
|
|
|
|
const { edition } = actions |
|
|
|
const [versionList, setVersionList] = useState([]) |
|
|
|
const [addVersion, setaddVersion] = useState(false) |
|
|
|
const api = useRef() |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
requestData() |
|
|
|
}, []) |
|
|
|
|
|
|
|
const requestData = () => { |
|
|
|
dispatch(edition.getVersions()).then(res => { |
|
|
|
console.log(res); |
|
|
|
if (res.success) { |
|
|
|
setVersionList(res.payload.data) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, []) |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: "序列号", |
|
|
|
render: (_, record, index) => { |
|
|
|
return index + 1; |
|
|
|
}, |
|
|
|
}, { |
|
|
|
title: "主版本号", |
|
|
|
dataIndex: "major", |
|
|
|
key: "major", |
|
|
|
}, { |
|
|
|
title: "次版本号", |
|
|
|
dataIndex: "minor", |
|
|
|
key: "minor", |
|
|
|
}, { |
|
|
|
title: "补丁版本号", |
|
|
|
dataIndex: "patch", |
|
|
|
key: "patch", |
|
|
|
}, { |
|
|
|
title: "构建号", |
|
|
|
dataIndex: "build", |
|
|
|
key: "build", |
|
|
|
}, { |
|
|
|
title: "类型", |
|
|
|
dataIndex: "type", |
|
|
|
key: "type", |
|
|
|
}, { |
|
|
|
title: "描述", |
|
|
|
dataIndex: "desc", |
|
|
|
key: "desc", |
|
|
|
}, { |
|
|
|
title: "基础镜像地址", |
|
|
|
dataIndex: "imageBase", |
|
|
|
key: "imageBase", |
|
|
|
}, { |
|
|
|
title: "镜像版本", |
|
|
|
dataIndex: "imageVersion", |
|
|
|
key: "imageVersion", |
|
|
|
render: (_, r, index) => { |
|
|
|
return <div style={{ width: 80 }}>{r.imageVersion}</div> |
|
|
|
}, |
|
|
|
}, { |
|
|
|
title: "创建时间", |
|
|
|
dataIndex: "createdAt", |
|
|
|
key: "createdAt", |
|
|
|
render: (_, r, index) => { |
|
|
|
return <div style={{ width: 130 }}>{r.createdAt}</div> |
|
|
|
}, |
|
|
|
}, { |
|
|
|
title: "操作", |
|
|
|
dataIndex: "operation", |
|
|
|
render: (_, r, index) => { |
|
|
|
return <Button onClick={() => { |
|
|
|
dispatch(edition.deleteVersion(r.id)).then(res => { |
|
|
|
if (res.success) { |
|
|
|
requestData() |
|
|
|
} |
|
|
|
}) |
|
|
|
}}>删除</Button> |
|
|
|
}, |
|
|
|
}, |
|
|
|
] |
|
|
|
|
|
|
|
return ( |
|
|
|
<div style={{}}> |
|
|
|
版本管理 |
|
|
|
</div> |
|
|
|
<> |
|
|
|
<div style={{ position: "" }}> |
|
|
|
<video |
|
|
|
id="cameraBanner" |
|
|
|
autoPlay |
|
|
|
loop |
|
|
|
muted |
|
|
|
style={{ width: "100%", objectFit: "cover", height: 171 }} |
|
|
|
src="/assets/videos/administer_banner.mp4" |
|
|
|
type="video/mp4" |
|
|
|
/> |
|
|
|
<div style={{ position: "absolute", top: 12 }}> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
fontSize: 22, |
|
|
|
paddingTop: 15, |
|
|
|
marginLeft: 21, |
|
|
|
}} |
|
|
|
> |
|
|
|
版本管理 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
fontSize: 14, |
|
|
|
paddingTop: 18, |
|
|
|
marginLeft: 20, |
|
|
|
}} |
|
|
|
> |
|
|
|
对网关版本添加、删除的管理页面。 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
fontSize: 14, |
|
|
|
marginTop: 28, |
|
|
|
marginLeft: 21, |
|
|
|
width: 89, |
|
|
|
height: 32, |
|
|
|
lineHeight: 32 + "px", |
|
|
|
textAlign: "center", |
|
|
|
backgroundColor: "#D9EAFF", |
|
|
|
color: "#1859C1", |
|
|
|
cursor: "pointer", |
|
|
|
}} |
|
|
|
onClick={() => { |
|
|
|
setaddVersion(true) |
|
|
|
}} |
|
|
|
> |
|
|
|
添加版本 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ |
|
|
|
width: "100%", |
|
|
|
background: "#FFFFFF", |
|
|
|
borderRadius: 3, |
|
|
|
padding: "8px 20px", |
|
|
|
marginTop: 20, |
|
|
|
}}> |
|
|
|
<Table |
|
|
|
columns={columns} |
|
|
|
dataSource={versionList} |
|
|
|
bordered={false} |
|
|
|
empty="暂无数据" |
|
|
|
style={{ |
|
|
|
padding: "0px 20px", |
|
|
|
}} |
|
|
|
pagination={false} |
|
|
|
/> |
|
|
|
{versionList.length > 0 ? <div |
|
|
|
style={{ |
|
|
|
display: "flex", |
|
|
|
justifyContent: "flex-end", |
|
|
|
padding: "20px 20px", |
|
|
|
}} |
|
|
|
> |
|
|
|
<span style={{ lineHeight: "30px" }}> |
|
|
|
共{versionList.length}个设备 |
|
|
|
</span> |
|
|
|
<Pagination |
|
|
|
total={versionList.length} |
|
|
|
showSizeChanger |
|
|
|
currentPage={1} |
|
|
|
pageSizeOpts={[10, 20, 30, 40]} |
|
|
|
onChange={(currentPage, pageSize) => { |
|
|
|
// setQuery({ limit: pageSize, page: currentPage - 1 }); |
|
|
|
// page.current = currentPage - 1 |
|
|
|
}} |
|
|
|
/> |
|
|
|
</div> : ""} |
|
|
|
</div> |
|
|
|
<Modal |
|
|
|
title='新增网关版本' |
|
|
|
// okText={okText} |
|
|
|
visible={addVersion} |
|
|
|
onOk={() => { |
|
|
|
api.current.validate().then(r => { |
|
|
|
console.log(r); |
|
|
|
for (let key in r) { |
|
|
|
if (['major', 'minor', 'patch', 'build'].includes(key)) { |
|
|
|
r[key] = Number(r[key]) |
|
|
|
} |
|
|
|
} |
|
|
|
dispatch(edition.postVersion({ ...r, createdAt: moment().format("YYYY-MM-DD HH:MM:SS") })).then(res => { |
|
|
|
if (res.success) { |
|
|
|
requestData() |
|
|
|
setaddVersion(false) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
}} |
|
|
|
width={610} |
|
|
|
onCancel={() => setaddVersion(false)} |
|
|
|
> |
|
|
|
<Form |
|
|
|
getFormApi={(formApi) => (api.current = formApi)} |
|
|
|
layout="horizontal" |
|
|
|
labelAlign="right" |
|
|
|
labelWidth="114px" |
|
|
|
style={{ display: 'flex', flexDirection: 'column' }} |
|
|
|
> |
|
|
|
<Form.Input |
|
|
|
field='major' |
|
|
|
label='主版本号:' |
|
|
|
labelPosition="left" |
|
|
|
hideButtons={true} |
|
|
|
placeholder='请输入主版本号' |
|
|
|
style={{ width: 200, marginBottom: 10 }} |
|
|
|
rules={[{ required: true, message: "请输入主版本号" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]} |
|
|
|
/> |
|
|
|
<Form.Input |
|
|
|
field='minor' |
|
|
|
label='次版本号:' |
|
|
|
labelPosition="left" |
|
|
|
hideButtons={true} |
|
|
|
placeholder='请输入次版本号' |
|
|
|
style={{ width: 200, marginBottom: 10 }} |
|
|
|
rules={[{ required: true, message: "请输入次版本号" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]} |
|
|
|
/> |
|
|
|
<Form.Input |
|
|
|
field='patch' |
|
|
|
label='补丁版本号:' |
|
|
|
labelPosition="left" |
|
|
|
hideButtons={true} |
|
|
|
placeholder='请输入补丁版本号' |
|
|
|
style={{ width: 200, marginBottom: 10 }} |
|
|
|
rules={[{ required: true, message: "请输入补丁版本号" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]} |
|
|
|
/> |
|
|
|
<Form.Input |
|
|
|
field='build' label='构建号:' |
|
|
|
labelPosition="left" |
|
|
|
hideButtons={true} |
|
|
|
placeholder='请输入构建号' |
|
|
|
style={{ width: 200, marginBottom: 10 }} |
|
|
|
rules={[{ required: true, message: "请输入构建号" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]} |
|
|
|
/> |
|
|
|
<Form.Select |
|
|
|
field="type" |
|
|
|
label='Type:' |
|
|
|
labelPosition="left" |
|
|
|
placeholder='请选择类型' |
|
|
|
style={{ width: 200, marginBottom: 10 }} |
|
|
|
rules={[{ required: true, message: "请选择类型" }]} |
|
|
|
> |
|
|
|
<Form.Select.Option value="beta">beta</Form.Select.Option> |
|
|
|
<Form.Select.Option value="alpha">alpha</Form.Select.Option> |
|
|
|
<Form.Select.Option value="release">release</Form.Select.Option> |
|
|
|
<Form.Select.Option value="LTS">LTS</Form.Select.Option> |
|
|
|
</Form.Select> |
|
|
|
<Form.Input |
|
|
|
field='imageBase' |
|
|
|
label='基础镜像地址:' |
|
|
|
labelPosition="left" |
|
|
|
placeholder='请输入基础镜像地址' |
|
|
|
style={{ width: 440, marginBottom: 10 }} |
|
|
|
rules={[{ required: true, message: "请输入基础镜像地址" }]} |
|
|
|
/> |
|
|
|
<Form.Input |
|
|
|
field='imageVersion' |
|
|
|
label='镜像版本:' |
|
|
|
labelPosition="left" |
|
|
|
placeholder='请输入镜像版本' |
|
|
|
style={{ width: 200, marginBottom: 10 }} |
|
|
|
rules={[{ required: true, message: "请输入镜像版本" }]} |
|
|
|
/> |
|
|
|
<Form.TextArea |
|
|
|
field='desc' |
|
|
|
label='描述:' |
|
|
|
labelPosition="left" |
|
|
|
placeholder='请输入描述' |
|
|
|
style={{ width: 440 }} |
|
|
|
/> |
|
|
|
|
|
|
|
</Form> |
|
|
|
</Modal> |
|
|
|
</> |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps(state) { |
|
|
|
function mapStateToProps (state) { |
|
|
|
const { auth, global } = state; |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
|
