addConfig.jsx 5.37 KB
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 AddConfig = props => {
  const { miniTitle, submitCallback, subType, addCallback } = props;
  console.log(subType, 'ubType');
  const [config, setConfig] = useState(''); // 网站配置信息
  const [loginList, setLoginList] = useState([
    { text: '默认界面', value: 'default' },
  ]); // 系统登陆页
  const [styleList, setStyleList] = useState([
    { text: '默认风格', value: 'default' },
  ]); // 系统风格
  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: 15 },
  };
  // 单选值改变
  const radioChange = e => {};
  // 提交选择
  const submit = value => {
    form.validateFields().then(valid => {
      if (valid) {
        setLoading(true);
        const obj = { ...form.getFieldsValue() };
        let params = { ...obj, mode: 'single' };
        addWebsite(params, {
          headers: {
            'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
          },
        })
          .then(res => {
            setLoading(false);
            if (res.success) {
              addCallback(params.title);
              notification.success({
                message: '提示',
                duration: 3,
                description: '新增成功',
              });
            } else {
              notification.error({
                message: '提示',
                duration: 10,
                description: res.message || '新增失败',
              });
            }
            console.log(res, 'res');
          })
          .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="应用类别:"
            name="client"
            rules={[
              {
                required: true,
                message: '请输入应用类别',
              },
            ]}
          >
            <Input placeholder="请输入应用类别" allowClear />
          </Item>
          <Item
            label="系统图标:"
            name="shortcutIcon"
            rules={[
              {
                required: true,
                message: '请选择系统图标',
              },
            ]}
          >
            <PicturesWall />
          </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 AddConfig;