ttk-app-core/src/apps/app-demo/form/edit-show/components/form.js

@ttk/recat enterprise develop framework

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 } from '@ttk/component'
import { useData, useActions, useCommit } from '@ttk/app-loader'
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 isCycle = ['否', '是']
  const isUse = ['否', '是']
  // 定义form表单字段，用于清除重置时回显和首次校验
  const formData = {
    name: null,
    sortNo: null,
    isCycle: null,
    isUse: null,
    dateStart: null,
    testType: [],
    dateEnd: '2015/01/01'
  }

  // 初始化
  useEffect(() => {
    const id = props.location.params.id || 11;
    async function fetch() {
      actions.loading(true)
      await actions.initForm({id: id})
      actions.loading(false)
    }
    function init() {
      actions.initForm(formData)
    }
    if (id) {
      fetch();
    } else {
      init()
    }
  }, []) 
  
  // 更新表单方法
  const updateForm = useCallback((e) => {
    async function asyncFun(arges) {
      await actions.updateFormObj(e)
    }
    asyncFun(e)
  }, [])

  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>
              <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.TextArea  placeholder="请输入描述" row={4} value={formObj.url} onChange={e => updateForm({ url: e.target.value })} />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col className="form-footer" span={24}>
                <Button onClick={onReset}>清除</Button>
              </Col>
            </Row>
          </Form>
        </Layout>
      </Spin>
    </Card>
  )
}