新需求

src/pages/UserManage/Editor/Advanced.jsx

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Checkbox, Card, Button, notification, Modal, Input, Upload } from 'antd';
+import { fetch, apis } from '../../../utils/request';
+import ImageUpload from '../../../components/uploadImage/ImageUpload';
+
+const getAdvanced = fetch(apis.member.advanced);
+const authorizeAdvanced = fetch(apis.member.saveAdvanced);
+
+const gridStyle = {
+  width: '50%',
+  textAlign: 'center',
+};
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 2 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+const Advanced = (props) => {
+  const { getFieldDecorator } = props.form;
+  const [menus, setMenus] = useState([])
+  const [checkOpts, setCheckOptions] = useState({checkedList: [], indeterminate: true, checkAll: false})
+
+  const user = props.data || {}
+
+  useEffect(() => {
+    if (user && user.userId) {
+      getAdvanced({ params: {orgId: user.orgId} }).then((data) => {
+        let checkedList = []
+        const modules = (data.list || []).map(item => {
+          if (item.hasRights) {
+            checkedList.push(item.advancedConfigId)
+          }
+  
+          return {
+            label: item.advancedConfigName,
+            value: item.advancedConfigId,
+          }
+        })
+        props.form.setFieldsValue(data.taWxPayConfig)
+        setMenus(modules);
+        setCheckOptions({
+          checkedList,
+          indeterminate: !!checkedList.length && checkedList.length < modules.length,
+          checkAll: checkedList.length === modules.length
+        })
+      }).catch(x => x)
+    }
+  }, [user.userId])
+
+  const handleChange = (checkedList) => {
+    setCheckOptions({
+      checkedList,
+      indeterminate: !!checkedList.length && checkedList.length < menus.length,
+      checkAll: checkedList.length === menus.length
+    })
+  }
+
+  const checkAllChange = (e) => {
+    setCheckOptions({
+      checkedList: e.target.checked ? menus.map(x => x.value) : [],
+      indeterminate: false,
+      checkAll: e.target.checked,
+    })
+  }
+
+  const CheckAll = (
+    <Checkbox
+      indeterminate={checkOpts.indeterminate}
+      onChange={checkAllChange}
+      checked={checkOpts.checkAll}
+    > 全选 </Checkbox>
+  )
+
+  const handleSubmit = () => {
+    const data = {
+      orgId: user.orgId,
+      menus: checkOpts.checkedList,
+      wxPayData: props.form.getFieldsValue()
+    }
+
+    authorizeAdvanced({ data }).then(() => {
+      notification.success({ message: '更新高级配置成功' })
+    }).catch(x => x)
+  }
+
+  const handleCancel = () => {
+    if (typeof props.onCancel === 'function') {
+      props.onCancel()
+    }
+  }
+
+  return (
+    <div>
+      <Card title="功能开放" extra={CheckAll} bordered={false}>
+        <Checkbox.Group
+          value={checkOpts.checkedList}
+          onChange={handleChange}
+        >
+          {menus.map((menu, inx) => {
+            return (
+              <Card.Grid hoverable={false} style={gridStyle} key={inx}>
+                <Checkbox value={menu.value}>{menu.label}</Checkbox>
+              </Card.Grid>
+            )
+          })}
+        </Checkbox.Group>
+      </Card>
+      <Card title="支付配置" bordered={false}>
+        <Form {...formItemLayout} >
+            <Form.Item label="商户号">
+              {getFieldDecorator('mchId')(<Input />)}
+            </Form.Item>
+            <Form.Item label="appid">
+              {getFieldDecorator('appid')(<Input />)}
+            </Form.Item>
+            <Form.Item label="key">
+              {getFieldDecorator('mchKey')(<Input />)}
+            </Form.Item>
+            <Form.Item label="API密钥">
+              {getFieldDecorator('apiPath')(<ImageUpload />)}
+            </Form.Item>
+        </Form>
+      </Card>
+      <div style={{ padding: '36px 100px' }}>
+        <Button type="primary" onClick={handleSubmit}>提交</Button>
+        <Button style={{ marginLeft: '36px' }} onClick={handleCancel}>取消</Button>
+      </div>
+    </div>
+  );
+}
+const WrappedAdvancedForm = Form.create({ name: 'Advanced' })(Advanced);
+export default WrappedAdvancedForm;

src/pages/UserManage/Editor/index.jsx

@@ -5,6 +5,7 @@ import { router } from 'umi';
 import User from './User';
 import MiniApp from './Miniapp';
 import Menus from './Menus';
+import Advanced from './Advanced';
 import { fetch, apis } from '../../../utils/request';
 
 const getUser = fetch(apis.member.get);
@@ -62,12 +63,14 @@ export default (props) => {
           <Radio.Button value={1}>主信息</Radio.Button>
           <Radio.Button value={2}>小程序</Radio.Button>
           <Radio.Button value={3}>开通权限</Radio.Button>
+          <Radio.Button value={4}>特殊配置</Radio.Button>
         </Radio.Group>
       </div>
       <div style={{ width: '800px', margin: '0 auto' }}>
         { tab === 1 ? <User data={user} {...props} onChange={handleChangeUser} onCancel={handleCancel(1)}/> : null}
         { tab === 2 ? <MiniApp data={user} tplTyps={tplTyps} {...props} onChange={handleChangeUser} onCancel={handleCancel(2)}/> : null}
         { tab === 3 ? <Menus data={user} {...props} onCancel={handleCancel(3)}/> : null}
+        { tab === 4 ? <Advanced data={user} {...props} onCancel={handleCancel(4)}/> : null}
       </div>
     </PageHeaderWrapper>
   );

src/services/apis.js

@@ -68,6 +68,16 @@ const apis = {
       method: 'GET',
       action: 'center',
     },
+    advanced: {
+      url: `${prefix}/sysAdvancedConfig/list`,
+      method: 'GET',
+      action: 'center',
+    },
+    saveAdvanced: {
+      url: `${prefix}/sysAdvancedConfig/save`,
+      method: 'POST',
+      action: 'center',
+    },
     authorize: {
       url: `${prefix}/sysmodules`,
       method: 'POST',

src/utils/upload.js

@@ -8,7 +8,7 @@ const uploadImage = fetch(apis.image.upload)
 const uploaderProps = {
   name: 'file',
   // action: apis.image.uploadForAnt.url,
-  accept: '.png, .jpg, .jpeg, .gif',
+  accept: '.png, .jpg, .jpeg, .gif, .p12',
   // headers: {
   //   Authorization: `Bearer ${getToken()}`
   // },