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