addConfig.jsx 10.7 KB
Newer Older
Maofei94's avatar
Maofei94 committed
1
import React, { useState, useEffect } from 'react';
2
import { Form, Select, Input, Button, Radio, notification, Spin, Tag } from 'antd';
3
import { editWebsite, getWebsite, addWebsite } from '@/services/mobileConfig/api';
Maofei94's avatar
Maofei94 committed
4 5 6 7
import PicturesWall from '@/components/Upload/index';
const { Item } = Form;
const { Option } = Select;
const AddConfig = props => {
皮倩雯's avatar
皮倩雯 committed
8
  const { miniTitle, submitCallback, subType, addCallback, singleList, visible } = props;
Maofei94's avatar
Maofei94 committed
9 10
  console.log(subType, 'ubType');
  const [config, setConfig] = useState(''); // 网站配置信息
涂伟's avatar
涂伟 committed
11
  const [loginList, setLoginList] = useState([
12
    { text: '科技蓝', value: 'default.html' },
涂伟's avatar
涂伟 committed
13 14
    { text: 'h5_科技蓝', value: 'h5_default' },
    { text: 'h5_江西水务', value: 'h5_jiangxi' },
15
    { text: 'h5_中国水务', value: 'h5_zhongguoshuiwu' },
涂伟's avatar
涂伟 committed
16
  ]); // 系统登陆页
17
  const [h5LoginList, setH5LoginList] = useState([
涂伟's avatar
涂伟 committed
18 19
    { text: '科技蓝', value: 'h5_default' },
    { text: '江西水务', value: 'h5_jiangxi' },
20
  ]); // H5登陆页
Maofei94's avatar
Maofei94 committed
21
  const [styleList, setStyleList] = useState([
Maofei94's avatar
Maofei94 committed
22 23
    { text: '熊猫产品', value: 'default' },
    { text: '通用项目', value: 'project' },
Maofei94's avatar
Maofei94 committed
24
  ]); // 系统风格
25
  const [themeList, setThemeList] = useState([{ text: '默认皮肤', value: 'default' }]); // 系统皮肤
Maofei94's avatar
Maofei94 committed
26 27 28 29 30
  const [clientList, setClientList] = useState([
    { text: 'miniapp', value: 'miniapp' },
    { text: '手持系统', value: '手持系统' },
    { text: 'mypanda', value: 'mypanda' },
  ]);
Maofei94's avatar
Maofei94 committed
31
  const [loading, setLoading] = useState(false);
皮倩雯's avatar
皮倩雯 committed
32 33
  const [keepTitle, setKeepTitle] = useState([]);
  const [keepValue, setKeepValue] = useState([]);
Maofei94's avatar
Maofei94 committed
34 35 36 37 38 39
  const [form] = Form.useForm();
  const layout = {
    layout: 'horizontal',
    labelCol: { span: 7 },
    wrapperCol: { span: 15 },
  };
皮倩雯's avatar
皮倩雯 committed
40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

  useEffect(() => {
    console.log(singleList);
    let text = [];
    let value = [];
    singleList.map(i => {
      text.push(i.text);
      value.push(i.subSystemValue);
    });
    setKeepTitle(text);
    setKeepValue(value);
    if (visible) {
      form.setFieldsValue({
        title: '新应用',
        shortcutIcon: 'assets\\images\\icon\\熊猫-白色.png',
涂伟's avatar
涂伟 committed
55
        bootAnimation: 'assets\\images\\bootAnimation\\bootDefault.png',
56
        // userPageImage: 'assets\\images\\bootAnimation\\bootDefault.png',
涂伟's avatar
涂伟 committed
57 58
        loginPageImage: 'assets\\images\\loginPageImage\\loginDefault.png',
        homePageImage: 'assets\\images\\homePageImage\\homeDefault.png',
皮倩雯's avatar
皮倩雯 committed
59 60 61 62 63 64
        loginTemplate: loginList[0].value,
        theme: themeList[0].value,
        style: styleList[0].value,
      });
    }
  }, [visible]);
Maofei94's avatar
Maofei94 committed
65 66 67 68 69 70
  // 单选值改变
  const radioChange = e => {};
  // 提交选择
  const submit = value => {
    form.validateFields().then(valid => {
      if (valid) {
皮倩雯's avatar
皮倩雯 committed
71
        if (
72
          singleList.some(item => item.text === valid.title || item.id.slice(6) === valid.client)
皮倩雯's avatar
皮倩雯 committed
73 74 75 76 77 78 79 80
        ) {
          notification.error({
            message: '提示',
            duration: 3,
            description: '应用名称跟类别不能重复',
          });
          return;
        }
Maofei94's avatar
Maofei94 committed
81 82 83
        setLoading(true);
        const obj = { ...form.getFieldsValue() };
        let params = { ...obj, mode: 'single' };
84
        addWebsite(params)
Maofei94's avatar
Maofei94 committed
85 86
          .then(res => {
            setLoading(false);
87
            if (res.code === 0) {
Maofei94's avatar
Maofei94 committed
88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
              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...">
111
      <div style={{ marginTop: '20px' }}>
Maofei94's avatar
Maofei94 committed
112 113 114 115 116 117 118 119 120
        <Form form={form} name={`form-${miniTitle}`} {...layout}>
          <Item
            label="应用名称:"
            name="title"
            rules={[
              {
                required: true,
                message: '请输入应用名称',
              },
皮倩雯's avatar
皮倩雯 committed
121 122 123 124 125 126 127 128 129
              {
                validator: (rule, value) => {
                  let data = form.getFieldValue().title;
                  if (keepTitle.indexOf(data) != -1) {
                    return Promise.reject('标题已存在');
                  }
                  return Promise.resolve();
                },
              },
Maofei94's avatar
Maofei94 committed
130 131 132 133 134
            ]}
          >
            <Input placeholder="请输入应用名称" allowClear />
          </Item>
          <Item
135
            label="虚拟目录:"
Maofei94's avatar
Maofei94 committed
136 137 138 139
            name="client"
            rules={[
              {
                required: true,
140
                message: '请输入虚拟目录',
Maofei94's avatar
Maofei94 committed
141
              },
皮倩雯's avatar
皮倩雯 committed
142 143 144 145 146 147 148 149 150 151 152 153
              {
                validator: (rule, value) => {
                  let data = form.getFieldValue().client;
                  if (data == 'CS') {
                    return Promise.reject('不允许输入CS');
                  }
                  if (keepValue.indexOf(data) != -1) {
                    return Promise.reject('虚拟目录已存在');
                  }
                  return Promise.resolve();
                },
              },
Maofei94's avatar
Maofei94 committed
154 155
            ]}
          >
156
            <Input placeholder="请输入虚拟目录" allowClear />
Maofei94's avatar
Maofei94 committed
157
            {/* <Select placeholder="请选择应用类别">
Maofei94's avatar
Maofei94 committed
158 159 160 161 162 163
              {clientList &&
                clientList.map((item, index) => (
                  <Option value={item.value} key={`item${index}`}>
                    {item.text}
                  </Option>
                ))}
Maofei94's avatar
Maofei94 committed
164
            </Select> */}
Maofei94's avatar
Maofei94 committed
165 166 167 168 169 170 171 172 173 174
          </Item>
          <Item
            label="系统图标:"
            name="shortcutIcon"
            rules={[
              {
                required: true,
                message: '请选择系统图标',
              },
            ]}
涂伟's avatar
涂伟 committed
175
            style={{ display: 'none' }}
Maofei94's avatar
Maofei94 committed
176
          >
Maofei94's avatar
Maofei94 committed
177
            <PicturesWall picType="icon" />
Maofei94's avatar
Maofei94 committed
178
          </Item>
皮倩雯's avatar
皮倩雯 committed
179
          {/* <Item
涂伟's avatar
涂伟 committed
180 181 182 183 184 185 186 187 188 189
            label="开机动画:"
            name="bootAnimation"
            rules={[
              {
                required: true,
                message: '请选择开机动画',
              },
            ]}
          >
            <PicturesWall picType="bootAnimation" />
皮倩雯's avatar
皮倩雯 committed
190
          </Item> */}
涂伟's avatar
涂伟 committed
191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214
          <Item
            label="登录页:"
            name="loginPageImage"
            rules={[
              {
                required: true,
                message: '请选择登录页',
              },
            ]}
          >
            <PicturesWall picType="loginPageImage" />
          </Item>
          <Item
            label="主页焦点图:"
            name="homePageImage"
            rules={[
              {
                required: true,
                message: '请选择主页焦点图',
              },
            ]}
          >
            <PicturesWall picType="homePageImage" />
          </Item>
215 216 217 218 219
          <Item
            label="背景图:"
            name="userPageImage"
            rules={[
              {
220
                // required: true,
221 222 223 224 225 226 227 228
                message: '请选择背景图',
              },
            ]}
          >
            <PicturesWall picType="userPageImage" />
          </Item>

          <Item
229
            label="启动过渡页:"
230 231 232 233
            name="bootAnimation"
            rules={[
              {
                required: true,
234
                message: '请选择启动过渡页',
235 236 237 238 239
              },
            ]}
          >
            <PicturesWall picType="bootAnimation" />
          </Item>
Maofei94's avatar
Maofei94 committed
240 241

          <Item
242
            label="APP登陆页面:"
Maofei94's avatar
Maofei94 committed
243 244 245 246 247 248 249 250 251 252 253 254
            name="loginTemplate"
            rules={[
              {
                required: true,
                message: '请选择登陆页面',
              },
            ]}
          >
            <Select placeholder="请选择登陆页面">
              {loginList &&
                loginList.map((item, index) => (
                  <Option value={item.value} key={`item${index}`}>
255 256 257 258 259
                    {item.value.includes('h5') ? (
                      <Tag color="green">h5</Tag>
                    ) : (
                      <Tag color="blue">flutter</Tag>
                    )}
Maofei94's avatar
Maofei94 committed
260 261 262 263 264 265
                    {item.text}
                  </Option>
                ))}
            </Select>
          </Item>
          <Item
266 267 268 269 270 271 272 273 274 275 276 277 278
            label="H5登陆页面:"
            name="h5loginTemplate"
            rules={[
              {
                required: true,
                message: '请选择登陆页面',
              },
            ]}
          >
            <Select placeholder="请选择登陆页面">
              {h5LoginList &&
                h5LoginList.map((item, index) => (
                  <Option value={item.value} key={`item${index}`}>
279 280 281 282 283
                    {item.value.includes('h5') ? (
                      <Tag color="green">h5</Tag>
                    ) : (
                      <Tag color="blue">flutter</Tag>
                    )}
284 285 286 287 288 289
                    {item.text}
                  </Option>
                ))}
            </Select>
          </Item>
          {/* <Item
Maofei94's avatar
Maofei94 committed
290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331
            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>
332
          </Item> */}
Maofei94's avatar
Maofei94 committed
333 334
        </Form>
      </div>
335 336 337 338 339
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <Button type="primary" onClick={submit}>
          提交
        </Button>
      </div>
Maofei94's avatar
Maofei94 committed
340 341 342 343
    </Spin>
  );
};
export default AddConfig;