巴林闲侠
2 years ago
17 changed files with 661 additions and 79 deletions
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 561 B |
@ -0,0 +1,80 @@ |
|||||
|
import React, { useState, useEffect, useRef } from "react"; |
||||
|
import { connect } from "react-redux"; |
||||
|
import { Button, Form, Modal, } from "@douyinfe/semi-ui"; |
||||
|
|
||||
|
const ApplyModal = ({ close, modalName, visible }) => { |
||||
|
const form = useRef(); |
||||
|
|
||||
|
|
||||
|
const handleOk = () => { |
||||
|
form.current |
||||
|
.validate() |
||||
|
.then((values) => { |
||||
|
console.log(values); |
||||
|
// close() |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
|
||||
|
return <Modal |
||||
|
title={modalName ? "修改应用" : "创建应用"} |
||||
|
visible={visible} |
||||
|
width={610} |
||||
|
onCancel={() => close()} |
||||
|
onOk={handleOk} |
||||
|
> |
||||
|
<Form |
||||
|
allowEmpty |
||||
|
labelPosition="left" |
||||
|
labelAlign="left" |
||||
|
labelWidth="90px" |
||||
|
onValueChange={(values) => console.log(values)} |
||||
|
getFormApi={(formApi) => (form.current = formApi)} |
||||
|
> |
||||
|
<Form.Input |
||||
|
maxLength="36" |
||||
|
field="name" |
||||
|
label="应用名称:" |
||||
|
allowEmpty={false} |
||||
|
|
||||
|
initValue={'' || ""} |
||||
|
placeholder="建议命名方式: [应用名 + 应用场景] 如:智慧昌南-消防,不超过15个字符" |
||||
|
style={{ width: 466 }} |
||||
|
rules={[ |
||||
|
{ |
||||
|
required: true, |
||||
|
message: "建议命名方式: [应用名 + 应用场景] 如:智慧昌南-消防,不超过15个字符", |
||||
|
}, |
||||
|
]} |
||||
|
/> |
||||
|
<Form.Select |
||||
|
label="设备厂家:" |
||||
|
field="venderId" |
||||
|
initValue={'' || null} |
||||
|
placeholder="请选择应用类型" |
||||
|
allowEmpty={false} |
||||
|
style={{ width: 150 }} |
||||
|
rules={[{ required: true, message: "请选择应用类型" }]} |
||||
|
> |
||||
|
{[{ name: 'web', id: 'web' }, { name: 'app', id: 'app' }, { name: '小程序', id: '小程序' }, { name: '其他', id: '其他' }].map((item, index) => ( |
||||
|
<Form.Select.Option key={index} value={item.id}> |
||||
|
{item.name} |
||||
|
</Form.Select.Option> |
||||
|
))} |
||||
|
</Form.Select> |
||||
|
</Form> |
||||
|
</Modal> |
||||
|
} |
||||
|
|
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { auth, global, members } = state; |
||||
|
return { |
||||
|
loading: members.isRequesting, |
||||
|
user: auth.user, |
||||
|
actions: global.actions, |
||||
|
global: global, |
||||
|
members: members.data, |
||||
|
}; |
||||
|
} |
||||
|
export default connect(mapStateToProps)(ApplyModal); |
Loading…
Reference in new issue