SiteConfig.jsx 5.72 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
  const [config, setConfig] = useState(''); // 网站配置信息
  const [loginList, setLoginList] = useState([
    { text: '默认界面', value: 'default' },
  ]); // 系统登陆页
  const [styleList, setStyleList] = useState([
    { text: '默认风格', value: 'default' },
Maofei94's avatar
Maofei94 committed
25
    { text: '熊猫风格', value: '熊猫风格' },
Maofei94's avatar
Maofei94 committed
26 27 28 29
  ]); // 系统风格
  const [themeList, setThemeList] = useState([
    { text: '默认皮肤', value: 'default' },
  ]); // 系统皮肤
Maofei94's avatar
Maofei94 committed
30
  const [loading, setLoading] = useState(false);
Maofei94's avatar
Maofei94 committed
31 32 33
  const [form] = Form.useForm();
  const layout = {
    layout: 'horizontal',
Maofei94's avatar
Maofei94 committed
34
    labelCol: { span: 7 },
Maofei94's avatar
Maofei94 committed
35
    wrapperCol: { span: 8 },
Maofei94's avatar
Maofei94 committed
36 37
  };
  useEffect(() => {
Maofei94's avatar
Maofei94 committed
38
    console.log(miniTitle, 'miniTitle');
Maofei94's avatar
Maofei94 committed
39 40 41
    if (!miniTitle) {
      return;
    }
Maofei94's avatar
Maofei94 committed
42
    setLoading(true);
Maofei94's avatar
Maofei94 committed
43 44 45
    getWebsite({
      _version: 9999,
      _dc: Date.now(),
Maofei94's avatar
Maofei94 committed
46
      title: miniTitle,
Maofei94's avatar
Maofei94 committed
47 48 49
    })
      .then(res => {
        setLoading(false);
Maofei94's avatar
Maofei94 committed
50 51
        let obj = {};
        let arr = Object.keys(form.getFieldsValue());
Maofei94's avatar
Maofei94 committed
52 53 54 55 56 57 58
        arr.map(k => {
          obj[k] = res[k];
        });
        form.setFieldsValue(obj);
      })
      .catch(err => {
        setLoading(false);
Maofei94's avatar
Maofei94 committed
59
      });
Maofei94's avatar
Maofei94 committed
60
  }, [miniTitle]);
Maofei94's avatar
Maofei94 committed
61 62 63 64
  // 单选值改变
  const radioChange = e => {};
  // 提交选择
  const submit = value => {
65 66
    form.validateFields().then(valid => {
      if (valid) {
Maofei94's avatar
Maofei94 committed
67
        setLoading(true);
68
        const obj = { ...form.getFieldsValue() };
Maofei94's avatar
Maofei94 committed
69 70 71 72 73 74 75 76 77
        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
78
              submitCallback(obj.title);
Maofei94's avatar
Maofei94 committed
79 80 81 82 83 84 85 86 87 88 89 90
              notification.success({
                message: '提示',
                duration: 3,
                description: '编辑成功',
              });
            } else {
              notification.error({
                message: '提示',
                duration: 3,
                description: res.message || '编辑失败',
              });
            }
Maofei94's avatar
Maofei94 committed
91
          })
Maofei94's avatar
Maofei94 committed
92 93 94
          .catch(err => {
            setLoading(false);
          });
95 96
      }
    });
Maofei94's avatar
Maofei94 committed
97 98
  };
  return (
Maofei94's avatar
Maofei94 committed
99
    <Spin spinning={loading} tip="loading...">
Maofei94's avatar
Maofei94 committed
100 101
      <div style={{ minHeight: 'calc(100vh  - 252px)', marginTop: '20px' }}>
        <Form form={form} name={`form-${miniTitle}`} {...layout}>
Maofei94's avatar
Maofei94 committed
102 103 104 105 106 107 108 109 110 111 112 113
          <Item
            label="应用名称:"
            name="title"
            rules={[
              {
                required: true,
                message: '请输入应用名称',
              },
            ]}
          >
            <Input placeholder="请输入应用名称" allowClear />
          </Item>
Maofei94's avatar
Maofei94 committed
114 115 116
          <Item label="应用类别:">
            <Input value={clientName} disabled />
          </Item>
Maofei94's avatar
Maofei94 committed
117 118 119 120 121 122 123 124 125 126
          <Item
            label="系统图标:"
            name="shortcutIcon"
            rules={[
              {
                required: true,
                message: '请选择系统图标',
              },
            ]}
          >
Maofei94's avatar
Maofei94 committed
127
            <PicturesWall picType="icon" />
Maofei94's avatar
Maofei94 committed
128
          </Item>
Maofei94's avatar
Maofei94 committed
129

Maofei94's avatar
Maofei94 committed
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 183 184 185 186
          <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
187
          <Item label="开启云登陆:" name="cloudLogin" initialValue={false}>
Maofei94's avatar
Maofei94 committed
188 189 190 191 192 193 194 195 196 197 198 199
            <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
200
    </Spin>
Maofei94's avatar
Maofei94 committed
201 202 203
  );
};
export default SiteConfig;