ttk-app-core
Version:
@ttk/recat enterprise develop framework
183 lines (176 loc) • 6.83 kB
JavaScript
import React, { useState, useCallback, useEffect } from 'react'
import { Spin, Card, Layout, Row, Col, Form, Input, Radio, Checkbox, AntdSelect as Select, Switch, Button, Message, DatePicker, Modal, Icon } from '@ttk/component'
import { useData, useActions, useCommit } from '@ttk/app-loader'
import Collapsible from '@/components/collapsible'
import moment from 'moment'
const { TextArea } = Input;
export default function Component(props) {
const commit = useCommit()
const actions = useActions(props)
const formObj = useData([props, 'attributeForm']).toJS()
// loading状态
const loading = useData([props, 'status', 'loading'])
// 表单展开状态
// const open = false
const open = useData([props, 'status', 'collapse'])
const isCycle = ['否', '是']
const isUse = ['否', '是']
// 定义form表单字段，用于清除重置时回显和首次校验
const formData = {
name: null,
sortNo: null,
isCycle: null,
isUse: null,
dateStart: null,
testType: [],
dateEnd: '2015/01/01'
}
// 初始化
useEffect(() => {
actions.initForm(formData)
}, [])
// 更新表单方法
const updateForm = useCallback((e) => {
async function asyncFun(arges) {
await actions.updateFormObj(e)
}
asyncFun(e)
}, [])
const onOpen = useCallback((val) => {
console.log(2222, val)
actions.collapse(val)
}, [])
const onReset = useCallback(() => {
commit([props, 'attributeForm'], { type: 'update', data: formData })
}, [])
return (
<Card
className="ttk-card-form"
>
<Spin spinning={loading} delay={50}>
<Layout className="content">
<Form className="label100">
<Row>
<Col span={12}>
<Form.Item
label="名称">
<Input placeholder="请输入名称" value={formObj.name} onChange={e => updateForm({ name: e.target.value })} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="排序">
<Input placeholder="请输入优先级" value={formObj.sortNo} onChange={e => updateForm({ sortNo: e.target.value })} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="是否循环">
<Select
placeholder="请选择是否循环"
filterOption={null}
allowClear={true}
value={formObj.isCycle}
onChange={e => updateForm({ isCycle: e })} >
{
isCycle.map((item, index) => <Select.Option key={`${index}${item}`} value={Number(index)}>{item}</Select.Option>)
}
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="启用">
<Select
key={'select2'}
placeholder="请选择启用"
filterOption={null}
allowClear={true}
value={formObj.isUse}
onChange={e => updateForm({ isUse: e })} >
{
isUse.map((item, index) => <Select.Option key={`${index}${item}`} value={Number(index)}>{item}</Select.Option>)
}
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="有效期起"
>
<DatePicker placeholder="请选择有效期起" defaultValue={formData.dateStart ? moment(formData.dateStart) : null} value={formObj.dateStart && moment(formObj.dateStart)} onChange={e => updateForm({ dateStart: e })} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="有效期止"
>
<DatePicker placeholder="请选择有效期止" value={formObj.dateEnd && moment(formObj.dateEnd)} onChange={e => updateForm({ dateEnd: e })} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="测试类型"
>
<Checkbox.Group style={{ width: '100%' }} value={formObj.testType} onChange={value => updateForm({ testType: value })}>
<Row>
<Col span={8}>
<Checkbox value="A">A</Checkbox>
</Col>
<Col span={8}>
<Checkbox disabled value="B">
B
</Checkbox>
</Col>
<Col span={8}>
<Checkbox value="C">C</Checkbox>
</Col>
</Row>
</Checkbox.Group>
</Form.Item>
</Col>
<Collapsible open={open}>
<Col span={12}>
<Form.Item
label="是否默认"
>
<Switch defaultChecked checked={formObj.isDefault} onChange={value => updateForm({ isDefault: value })}/>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="简述"
>
<Input placeholder="请输入简述" row={4} value={formObj.remark} onChange={e => updateForm({ remark: e.target.value })} />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="介绍"
>
<Input placeholder="请输入介绍" row={4} value={formObj.des} onChange={e => updateForm({ des: e.target.value })} />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="描述"
>
<Input.TextArea placeholder="请输入描述" row={4} value={formObj.url} onChange={e => updateForm({ url: e.target.value })} />
</Form.Item>
</Col>
</Collapsible>
</Row>
<Row>
<Col className="form-footer" span={24}>
<Button onClick={onReset}>清除</Button>
<Button icon={open ? 'caret-up' : 'caret-down'} onClick={() => onOpen(!open)}>
{open ? '收起' : '展开'}
</Button>
</Col>
</Row>
</Form>
</Layout>
</Spin>
</Card>
)
}