/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-03-01 11:01:04
|
* @LastEditTime: 2022-04-21 14:58:54
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 新增版本
|
*/
|
import React, { useEffect } from 'react';
|
import './index.less';
|
import { Card, Input, Row, Col, Button, Form, InputNumber } from 'antd';
|
import SelectTree from '../SelectTree';
|
|
const EditionFormView = ({
|
PCTreeList,
|
partyTreeList,
|
mediatorTreeList,
|
tabKey,
|
versionData,
|
inputChange = (data) => {},
|
selectOnChange = (e, list) => {},
|
formSave = (tableData) => {},
|
back = () => {},
|
}) => {
|
const [form] = Form.useForm();
|
|
//初始化组件回显
|
useEffect(() => {
|
form.setFieldsValue(versionData);
|
}, []);
|
|
const inputonChange = () => {
|
const tableData = form.getFieldValue();
|
inputChange(tableData);
|
};
|
const cloumn = [
|
{ label: '版本名称', name: 'name', type: 'text', required: true },
|
{ label: '价格', name: 'price', type: 'number', prefix: '￥', suffix: '元' },
|
{ label: '期限', name: 'dead', type: 'number', suffix: '天' },
|
{ label: '用户数', name: 'uses', type: 'number', suffix: '个', required: true },
|
{ label: '空间资源', name: 'space', type: 'number', suffix: 'G', required: true },
|
];
|
|
// 提交
|
const save = async () => {
|
const row = await form.validateFields();
|
const tableData = form.getFieldValue();
|
formSave(tableData);
|
// saveTableData({ ...tableData, appType: '2' });
|
};
|
|
return (
|
<React.Fragment>
|
<Card title="基础信息" style={{ margin: '24px' }}>
|
<Form form={form} labelCol={{ style: { width: '100%', textAlign: 'left' } }} layout="vertical" component={false}>
|
<Row gutter={[24, 24]}>
|
<Col span={8}>
|
<Form.Item
|
label={tabKey == '1' ? '版本名称' : '增强包名称'}
|
name="name"
|
rules={[
|
{ required: true, message: tabKey == '1' ? '请输入版本名称' : '请输入增强包名称' },
|
{
|
pattern: /^[^\s]*$/,
|
message: '禁止输入空格',
|
},
|
]}
|
>
|
<Input onChange={inputonChange} placeholder={`请输入版本名称`} />
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="价格" name="price" rules={[{ required: false, message: `请输入价格` }]}>
|
<Input onChange={inputonChange} placeholder={`请输入价格`} type={'number'} prefix={'￥'} suffix={'元'} />
|
</Form.Item>
|
</Col>
|
{tabKey == '1' ? (
|
<Col span={8}>
|
<Form.Item label="期限" name="dead" rules={[{ required: false, message: `请输入期限` }]}>
|
<Input onChange={inputonChange} placeholder={`请输入期限`} type={'number'} suffix={'天'} />
|
</Form.Item>
|
</Col>
|
) : (
|
<Col span={8}>
|
<Form.Item label="期限" name="yxqx" rules={[{ required: false, message: `请输入期限` }]}>
|
<Input onChange={inputonChange} placeholder={`请输入期限`} type={'number'} suffix={'天'} />
|
</Form.Item>
|
</Col>
|
)}
|
<Col span={8}>
|
<Form.Item
|
label="用户数"
|
name="uses"
|
rules={[
|
{
|
required: true,
|
message: `请输入用户数`,
|
},
|
tabKey == '1'
|
? {
|
pattern: /^(([0-9]\d+)|([1-9]))$/,
|
message: '用户数不能为0',
|
}
|
: '',
|
]}
|
>
|
<Input onChange={inputonChange} placeholder={`请输入用户数`} type={'number'} suffix={'个'} />
|
{/* <InputNumber onChange={inputonChange} min={1} style={{ width: '100%' }} addonAfter="个" placeholder={`请输入用户数`} /> */}
|
</Form.Item>
|
</Col>
|
<Col span={8}>
|
<Form.Item label="空间资源" name="space" rules={[{ required: true, message: `请输入空间资源` }]}>
|
<Input onChange={inputonChange} placeholder={`请输入空间资源`} type={'number'} suffix={'G'} />
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
</Card>
|
|
<Card title="功能" style={{ margin: '24px 24px 56px 24px' }}>
|
<SelectTree text={'客户PC端'} list={PCTreeList} onChange={selectOnChange} />
|
<SelectTree text={'当事人小程序'} list={partyTreeList} onChange={selectOnChange} />
|
<SelectTree text={'调解员小程序'} list={mediatorTreeList} onChange={selectOnChange} />
|
</Card>
|
<Row className="edition-form-view-main-foot">
|
<div className="edition-form-view-main-foot-buttton">
|
<Button onClick={save} type="primary">
|
提交
|
</Button>
|
<Button onClick={() => back()}>返回</Button>
|
{/* <Popconfirm title="确定取消输入?" onConfirm={() => this.cancel()}>
|
<Button>重置</Button>
|
</Popconfirm> */}
|
</div>
|
</Row>
|
</React.Fragment>
|
);
|
};
|
EditionFormView.propTypes = {};
|
export default EditionFormView;
|
