import React, { useState, useEffect } from 'react'; import { Form, Select, Input, Button, Radio, notification, Spin } from 'antd'; import { editWebsite, getWebsite, addWebsite } from '@/services/mobileConfig/api'; import PicturesWall from '@/components/Upload/index'; const { Item } = Form; const { Option } = Select; const SiteConfig = props => { const { miniTitle, submitCallback, addCallback, parentKey, clientName } = props; const [config, setConfig] = useState(''); // 网站配置信息 const [loginList, setLoginList] = useState([{ text: '默认界面', value: 'default' }]); // 系统登陆页 const [styleList, setStyleList] = useState([ { text: '熊猫产品', value: 'default' }, { text: '通用项目', value: 'project' }, ]); // 系统风格 const [themeList, setThemeList] = useState([{ text: '默认皮肤', value: 'default' }]); // 系统皮肤 const [loading, setLoading] = useState(false); const [form] = Form.useForm(); const layout = { layout: 'horizontal', labelCol: { span: 7 }, wrapperCol: { span: 8 }, }; useEffect(() => { console.log(miniTitle, 'miniTitle'); if (!miniTitle) { return; } setLoading(true); getWebsite({ _version: 9999, _dc: Date.now(), title: miniTitle, }) .then(res => { setLoading(false); let obj = {}; let arr = Object.keys(form.getFieldsValue()); arr.map(k => { obj[k] = res.data[k]; }); form.setFieldsValue(obj); }) .catch(err => { setLoading(false); }); }, [miniTitle]); // 单选值改变 const radioChange = e => {}; // 提交选择 const submit = value => { form.validateFields().then(valid => { if (valid) { setLoading(true); const obj = { ...form.getFieldsValue() }; let params = { ...obj, mode: 'single', client: clientName }; editWebsite(params) .then(res => { setLoading(false); if (res.code === 0) { submitCallback(obj.title); notification.success({ message: '提示', duration: 3, description: '编辑成功', }); } else { notification.error({ message: '提示', duration: 3, description: res.message || '编辑失败', }); } }) .catch(err => { setLoading(false); }); } }); }; return ( <Spin spinning={loading} tip="loading..."> <div style={{ minHeight: 'calc(100vh - 252px)', marginTop: '20px' }}> <Form form={form} name={`form-${miniTitle}`} {...layout}> <Item label="应用名称:" name="title" rules={[ { required: true, message: '请输入应用名称', }, ]} > <Input placeholder="请输入应用名称" allowClear /> </Item> <Item label="虚拟目录:"> <Input value={clientName} disabled /> </Item> <Item label="系统图标:" name="shortcutIcon" rules={[ { required: true, message: '请选择系统图标', }, ]} > <PicturesWall picType="icon" /> </Item> <Item label="登陆页面:" name="loginTemplate" rules={[ { required: true, message: '请选择登陆页面', }, ]} > <Select placeholder="请选择登陆页面"> {loginList && loginList.map((item, index) => ( <Option value={item.value} key={`item${index}`}> {item.text} </Option> ))} </Select> </Item> <Item label="系统皮肤:" name="theme" rules={[ { required: true, message: '请选择系统皮肤', }, ]} > <Select placeholder="请选择系统皮肤"> {themeList && themeList.map((item, index) => ( <Option value={item.value} key={`item${index}`}> {item.text} </Option> ))} </Select> </Item> <Item label="系统风格:" name="style" rules={[ { required: true, message: '请选择系统风格', }, ]} > <Select placeholder="请选择系统风格"> {styleList && styleList.map((item, index) => ( <Option value={item.value} key={`item${index}`}> {item.text} </Option> ))} </Select> </Item> <Item label="开启云登陆:" name="cloudLogin" initialValue={false}> <Radio.Group onChange={radioChange}> <Radio value>是</Radio> <Radio value={false}>否</Radio> </Radio.Group> </Item> <Item wrapperCol={{ span: 6, offset: 7 }}> <Button type="primary" onClick={submit}> 提交 </Button> </Item> </Form> </div> </Spin> ); }; export default SiteConfig;