SiteConfig.jsx 5.55 KB
Newer Older
Maofei94's avatar
Maofei94 committed
1
import React, { useState, useEffect } from 'react';
Maofei94's avatar
Maofei94 committed
2
import { Form, Select, Input, Button, Radio, notification, Spin } from 'antd';
Maofei94's avatar
Maofei94 committed
3 4 5 6 7
import {
  editWebsite,
  getWebsite,
  addWebsite,
} from '@/services/mobileConfig/api';
8
import PicturesWall from '@/components/Upload/index';
Maofei94's avatar
Maofei94 committed
9 10 11
const { Item } = Form;
const { Option } = Select;
const SiteConfig = props => {
Maofei94's avatar
Maofei94 committed
12 13 14 15 16 17 18
  const {
    miniTitle,
    submitCallback,
    addCallback,
    parentKey,
    clientName,
  } = props;
Maofei94's avatar
Maofei94 committed
19 20 21 22 23 24 25 26 27 28
  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' },
  ]); // 系统皮肤
Maofei94's avatar
Maofei94 committed
29
  const [loading, setLoading] = useState(false);
Maofei94's avatar
Maofei94 committed
30 31 32
  const [form] = Form.useForm();
  const layout = {
    layout: 'horizontal',
Maofei94's avatar
Maofei94 committed
33
    labelCol: { span: 7 },
Maofei94's avatar
Maofei94 committed
34
    wrapperCol: { span: 8 },
Maofei94's avatar
Maofei94 committed
35 36
  };
  useEffect(() => {
Maofei94's avatar
Maofei94 committed
37
    console.log(miniTitle, 'miniTitle');
Maofei94's avatar
Maofei94 committed
38 39 40
    if (!miniTitle) {
      return;
    }
Maofei94's avatar
Maofei94 committed
41
    setLoading(true);
Maofei94's avatar
Maofei94 committed
42 43 44
    getWebsite({
      _version: 9999,
      _dc: Date.now(),
Maofei94's avatar
Maofei94 committed
45
      title: miniTitle,
Maofei94's avatar
Maofei94 committed
46 47 48
    })
      .then(res => {
        setLoading(false);
Maofei94's avatar
Maofei94 committed
49 50
        let obj = {};
        let arr = Object.keys(form.getFieldsValue());
Maofei94's avatar
Maofei94 committed
51 52 53 54 55 56 57
        arr.map(k => {
          obj[k] = res[k];
        });
        form.setFieldsValue(obj);
      })
      .catch(err => {
        setLoading(false);
Maofei94's avatar
Maofei94 committed
58
      });
Maofei94's avatar
Maofei94 committed
59
  }, [miniTitle]);
Maofei94's avatar
Maofei94 committed
60 61 62 63
  // 单选值改变
  const radioChange = e => {};
  // 提交选择
  const submit = value => {
64 65
    form.validateFields().then(valid => {
      if (valid) {
Maofei94's avatar
Maofei94 committed
66
        setLoading(true);
67
        const obj = { ...form.getFieldsValue() };
Maofei94's avatar
Maofei94 committed
68 69 70 71 72 73 74 75 76
        let params = { ...obj, mode: 'single', client: clientName };
        editWebsite(params, {
          headers: {
            'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
          },
        })
          .then(res => {
            setLoading(false);
            if (res.success) {
Maofei94's avatar
Maofei94 committed
77
              submitCallback(obj.title);
Maofei94's avatar
Maofei94 committed
78 79 80 81 82 83 84 85 86 87 88 89
              notification.success({
                message: '提示',
                duration: 3,
                description: '编辑成功',
              });
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.message || '编辑失败',
              });
            }
Maofei94's avatar
Maofei94 committed
90
          })
Maofei94's avatar
Maofei94 committed
91 92 93
          .catch(err => {
            setLoading(false);
          });
94 95
      }
    });
Maofei94's avatar
Maofei94 committed
96 97
  };
  return (
Maofei94's avatar
Maofei94 committed
98
    <Spin spinning={loading} tip="loading...">
Maofei94's avatar
Maofei94 committed
99 100
      <div style={{ minHeight: 'calc(100vh  - 252px)', marginTop: '20px' }}>
        <Form form={form} name={`form-${miniTitle}`} {...layout}>
Maofei94's avatar
Maofei94 committed
101 102 103 104 105 106 107 108 109 110 111 112
          <Item
            label="应用名称:"
            name="title"
            rules={[
              {
                required: true,
                message: '请输入应用名称',
              },
            ]}
          >
            <Input placeholder="请输入应用名称" allowClear />
          </Item>
Maofei94's avatar
Maofei94 committed
113 114 115 116 117 118 119 120 121 122
          <Item
            label="系统图标:"
            name="shortcutIcon"
            rules={[
              {
                required: true,
                message: '请选择系统图标',
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
123 124
            <PicturesWall />
          </Item>
Maofei94's avatar
Maofei94 committed
125

Maofei94's avatar
Maofei94 committed
126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182
          <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>
Maofei94's avatar
Maofei94 committed
183
          <Item label="开启云登陆:" name="cloudLogin" initialValue={false}>
Maofei94's avatar
Maofei94 committed
184 185 186 187 188 189 190 191 192 193 194 195
            <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>
Maofei94's avatar
Maofei94 committed
196
    </Spin>
Maofei94's avatar
Maofei94 committed
197 198 199
  );
};
export default SiteConfig;