6 changed files with 556 additions and 394 deletions
@ -0,0 +1,187 @@ |
|||||
|
'use strict'; |
||||
|
import React, { useEffect, useState, useRef } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
import { push } from 'react-router-redux'; |
||||
|
import { Popconfirm, Button, Popover, Skeleton, Form, Tag, Modal, Collapse, Input } from '@douyinfe/semi-ui'; |
||||
|
import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusCircle, IconPlus, IconRefresh } from '@douyinfe/semi-icons'; |
||||
|
import { SkeletonScreen } from "$components"; |
||||
|
|
||||
|
const AddModel = props => { |
||||
|
const { dispatch, user, error, actions, close, dataToModal, editionData } = props |
||||
|
const { edition } = actions |
||||
|
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 |
||||
|
const [limits, setLimits] = useState()//每页实际条数 |
||||
|
const [detailV, setDetailV] = useState(false) |
||||
|
const [property, setProperty] = useState([{ key: 'hb', value: 'ture' }]) |
||||
|
const [attributeValue, setattributeValue] = useState({}) |
||||
|
const api = useRef() |
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (dataToModal?.properties) { |
||||
|
let data = [] |
||||
|
for (let k in dataToModal?.properties) { |
||||
|
data.push({ key: k, value: dataToModal?.properties[k] }) |
||||
|
} |
||||
|
setProperty(data) |
||||
|
} |
||||
|
}, []) |
||||
|
|
||||
|
useEffect(() => { |
||||
|
let data = {} |
||||
|
property?.map(v => { |
||||
|
if (v.key) { |
||||
|
data[v.key] = v.value |
||||
|
} |
||||
|
}) |
||||
|
setattributeValue(data) |
||||
|
}, [property]) |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<Modal |
||||
|
title={dataToModal?.id ? '修改网关' : '新增网关'} |
||||
|
// okText={okText} |
||||
|
visible={true} |
||||
|
onOk={() => { |
||||
|
api.current.validate().then(r => { |
||||
|
// console.log(r); |
||||
|
r.properties = JSON.stringify(attributeValue) |
||||
|
if (dataToModal?.id) { |
||||
|
dispatch(edition.putedge(dataToModal?.id, r)).then(res => { |
||||
|
console.log(res) |
||||
|
if (res.success) { |
||||
|
close() |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
dispatch(edition.postedge(r)).then(res => { |
||||
|
// console.log(res); |
||||
|
if (res.success) { |
||||
|
close() |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
}} |
||||
|
width={500} |
||||
|
onCancel={() => close()} |
||||
|
> |
||||
|
<Form |
||||
|
getFormApi={(formApi) => (api.current = formApi)} |
||||
|
layout="horizontal" |
||||
|
labelAlign="right" |
||||
|
labelWidth="114px" |
||||
|
style={{ display: 'flex', flexDirection: 'column' }} |
||||
|
> |
||||
|
<Form.Input |
||||
|
field='serialNo' |
||||
|
label='设备序列号:' |
||||
|
labelPosition="left" |
||||
|
hideButtons={true} |
||||
|
placeholder='请输入设备序列号' |
||||
|
style={{ width: 240, marginBottom: 12 }} |
||||
|
initValue={dataToModal?.serialNo || ''} |
||||
|
disabled={dataToModal?.id ? true : false} |
||||
|
rules={[{ required: true, message: "请输入设备序列号" }, { pattern: "^[a-zA-Z0-9]{4,20}$", message: "必须4~20位数字或字母" },]} |
||||
|
/> |
||||
|
<Form.Input |
||||
|
field='name' |
||||
|
label='设备名称:' |
||||
|
labelPosition="left" |
||||
|
hideButtons={true} |
||||
|
placeholder='请输入设备名称' |
||||
|
style={{ width: 240, marginBottom: 12 }} |
||||
|
initValue={dataToModal?.name || ''} |
||||
|
rules={[{ required: true, message: "请输入设备名称" }]} |
||||
|
/> |
||||
|
{/* <Form.Input |
||||
|
field='properties' |
||||
|
label='设备属性:' |
||||
|
labelPosition="left" |
||||
|
hideButtons={true} |
||||
|
placeholder='请输入设备属性' |
||||
|
style={{ width: 240, marginBottom: 12 }} |
||||
|
initValue={JSON.stringify(dataToModal?.properties) || ''} |
||||
|
// rules={[{ required: true, message: "请输入设备属性" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]} |
||||
|
/> */} |
||||
|
<Form.Input |
||||
|
field='hardwareName' label='硬件信息:' |
||||
|
labelPosition="left" |
||||
|
hideButtons={true} |
||||
|
placeholder='请输入硬件信息' |
||||
|
style={{ width: 240, marginBottom: 12 }} |
||||
|
initValue={dataToModal?.hardwareName || ''} |
||||
|
// rules={[{ required: true, message: "请输入硬件信息" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]} |
||||
|
/> |
||||
|
<Form.Select |
||||
|
field="softwareVer" |
||||
|
label='软件信息:' |
||||
|
labelPosition="left" |
||||
|
placeholder='请选择软件版本' |
||||
|
style={{ width: 240, marginBottom: 12 }} |
||||
|
initValue={dataToModal?.softwareVer || ''} |
||||
|
// rules={[{ required: true, message: "请选择软件版本" }]} |
||||
|
> |
||||
|
{editionData?.map((v, i) => <Form.Select.Option key={'softwareVer' + i} value={v}>{v}</Form.Select.Option>)} |
||||
|
</Form.Select> |
||||
|
<div style={{ display: 'flex', marginBottom: 12 }}> |
||||
|
<div style={{ width: 114, height: 44, padding: '6px 16px 6px 0', textIndent: 38, fontWeight: 600, color: 'var(--semi-color-text-0)', fontSize: 14 }}>设备属性:</div> |
||||
|
<Collapse style={{ width: 270, background: 'var(--semi-color-fill-0)' }}> |
||||
|
<Collapse.Panel header={<div style={{ width: 260, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{JSON.stringify(attributeValue)}</div>} itemKey="1"> |
||||
|
<div style={{ background: 'white', paddingBottom: 10, position: 'relative' }}> |
||||
|
<div style={{ display: 'flex', marginBottom: 10 }}> |
||||
|
<div style={{ width: 104, fontWeight: 600, marginLeft: 6 }}>key:</div> |
||||
|
<div style={{ width: 94, fontWeight: 600, }}>value:</div> |
||||
|
</div> |
||||
|
{property?.map((v, i) => |
||||
|
<div key={'properties' + i} style={{ marginBottom: 10 }}> |
||||
|
<Input value={v.key} style={{ width: 90, marginLeft: 6 }} |
||||
|
onChange={e => { |
||||
|
console.log(e); |
||||
|
property?.splice(i, 1, { key: e, value: v.value }) |
||||
|
setProperty([...property]) |
||||
|
}} |
||||
|
/> -- |
||||
|
<Input value={v.value} style={{ width: 90 }} |
||||
|
onChange={e => { |
||||
|
property?.splice(i, 1, { key: v.key, value: e }) |
||||
|
setProperty([...property]) |
||||
|
}} |
||||
|
/> |
||||
|
{property?.length > 1 ? <IconMinusCircle onClick={() => { |
||||
|
console.log(i); |
||||
|
console.log(property); |
||||
|
property?.splice(i, 1) |
||||
|
setProperty([...property]) |
||||
|
}} /> : ""} |
||||
|
</div>)} |
||||
|
<IconPlusCircle style={{ position: 'absolute', bottom: 0, right: 0 }} |
||||
|
onClick={() => { |
||||
|
setProperty([...property, { key: '', value: '' }]) |
||||
|
}} |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
</Collapse.Panel> |
||||
|
</Collapse> |
||||
|
</div> |
||||
|
</Form> |
||||
|
</Modal> |
||||
|
</> |
||||
|
|
||||
|
); |
||||
|
} |
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { auth, global } = state; |
||||
|
return { |
||||
|
user: auth.user, |
||||
|
error: auth.error, |
||||
|
actions: global.actions, |
||||
|
apiRoot: global.apiRoot, |
||||
|
isRequesting: auth.isRequesting |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(AddModel); |
||||
@ -1,130 +0,0 @@ |
|||||
import React, { useEffect, useRef, useState } from 'react'; |
|
||||
import moment from 'moment'; |
|
||||
import { connect } from "react-redux"; |
|
||||
import { Select, Modal, Form, Button } from "@douyinfe/semi-ui"; |
|
||||
|
|
||||
const GatewayModal = (props) => { |
|
||||
const { dispatch, actions, user, onCancel, dataToModal } = props; |
|
||||
const { edition } = actions; |
|
||||
const api = useRef() |
|
||||
//初始化 |
|
||||
useEffect(() => { |
|
||||
|
|
||||
}, []); |
|
||||
|
|
||||
return ( |
|
||||
<Modal |
|
||||
title={`${dataToModal ? '修改' : '新增'}网关`} |
|
||||
destroyOnClose visible={true} |
|
||||
onOk={() => { |
|
||||
api.current.validate().then(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={() => onCancel(0)} |
|
||||
> |
|
||||
{/* <Form |
|
||||
getFormApi={(formApi) => (api.current = formApi)} |
|
||||
layout="horizontal" |
|
||||
labelAlign="right" |
|
||||
labelWidth="114px" |
|
||||
style={{ display: 'flex', flexDirection: 'column' }} |
|
||||
> |
|
||||
<Form.Input |
|
||||
field='serialNo' |
|
||||
label='序列号' |
|
||||
labelPosition="left" |
|
||||
hideButtons={true} |
|
||||
placeholder='请输入序列号' |
|
||||
style={{ width: 200, marginBottom: 10 }} |
|
||||
rules={[{ required: true, message: "请输入序列号" }]} |
|
||||
/> |
|
||||
<Form.Input |
|
||||
field='name' |
|
||||
label='名称' |
|
||||
labelPosition="left" |
|
||||
hideButtons={true} |
|
||||
placeholder='请输入名称' |
|
||||
style={{ width: 200, marginBottom: 10 }} |
|
||||
rules={[{ required: true, message: "请输入名称" }]} |
|
||||
/> |
|
||||
<Form.Input |
|
||||
field='patch' |
|
||||
label='属性' |
|
||||
labelPosition="left" |
|
||||
hideButtons={true} |
|
||||
placeholder='请输入网关属性' |
|
||||
style={{ width: 200, marginBottom: 10 }} |
|
||||
rules={[{ required: true, 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) { |
|
||||
const { auth, global } = state; |
|
||||
return { |
|
||||
user: auth.user, |
|
||||
error: auth.error, |
|
||||
actions: global.actions, |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
export default connect(mapStateToProps)(GatewayModal); |
|
||||
Loading…
Reference in new issue