feats

src/pages/UserManage/Editor/Miniapp.jsx

 import React, { useState } from 'react';
-import { Button, Row, Col, Input, InputNumber, notification } from 'antd';
+import { Button, Row, Col, Input, InputNumber, Modal, notification } from 'antd';
 import XForm, { FieldTypes } from '../../../components/XForm';
 import Style from '../style.less';
 import { fetch, apis } from '../../../utils/request';
 
-const saveMiniapp = fetch(apis.member.miniapp);
+const saveMiniapp = fetch(apis.member.miniapp.edit);
+const checkMiniapp = fetch(apis.member.miniapp.check);
 
 const TplItem = React.forwardRef((props, ref) => {
-  const [val, setVal] = useState({
-    tplId: undefined,
-    fieldNum: undefined,
-    ...props.value || {}
-  })
+  const [val, setVal] = useState(props.value)
 
   const handleChange = field => e => {
     const newVal = { ...val, [`${field}`]: (e.target ? e.target.value : e) }
 })
 
 const Miniapp = (props) => {
+  const [ visible, changeVisible ] = useState(false);
+  const [ path, changePath ] = useState('/pages/project/index');
+  const [ qrCode, setQrCode ] = useState();
+
   const user = props.data || {}
   const appdata = user.miniapp || {};
   const noticeTPL = (appdata.tpls || []).filter(x => x.tplType === 'notice')[0] || {}
 
-  const checkMiniapp = () => {
+  const showModal = () => {
+    changeVisible(true);
+  }
+
+  let form = undefined;
+  const handleForm = f => {
+    if (f) {
+      form = f.props.form
+    }
+  }
+
+  const handleModalOk = () => {
+    const values = form.getFieldsValue()
+    const data = { ...values, path }
+
+    checkMiniapp({ data }).then(dt => {
+      setQrCode(dt.qrCode)
+      changeVisible(false)
+      notification.success({ message: '校验成功' });
+    }).catch();
   }
 
   const fields = [
       name: 'miniappId',
       type: FieldTypes.Text,
       value: appdata.miniappId,
+      props: {
+        disabled: !!appdata.miniappId,
+      },
       rules: [
         { required: true, message: '请填写 APPID' },
         { pattern: /^[a-zA-Z0-9]+$/, message: 'APPID 只能由字母与数字组成' }
     {
       label: '消息通知',
       name: 'notice',
-      render: () => <TplItem />,
+      render: <TplItem />,
       value: noticeTPL,
     },
+    {
+      label: '小程序码',
+      name: 'qrCode',
+      render: () => <img src={qrCode} style={{ width: '240px' }} alt=""/>,
+      value: qrCode || appdata.qrCode,
+    },
     {
       action: true,
       render: () => {
               <img src="" alt="" style={{ width: '128px' }}/>
             </div>
             <div className={Style['flex-auto']}>
-              <Button type="primary" ghost onClick={checkMiniapp}>验证</Button>
+              <Button type="primary" ghost onClick={showModal}>验证</Button>
             </div>
+            <Modal
+              title="填写首页地址"
+              visible={visible}
+              onOk={handleModalOk}
+              onCancel={() => changeVisible(false)}
+            >
+              <Input value={path} onChange={e => changePath(e.target.value)}></Input>
+            </Modal>
           </div>
         )
       }
 
     const tpls = [
       {
-        ...notice,
         ...(appdata.tpls || []).filter(x => x.tplType === 'notice')[0] || {},
+        ...notice,
         tplType: 'notice'
-      }
+      },
+      ...(appdata.tpls || []).filter(x => x.tplType !== 'notice')
     ]
 
     const data = {
       ...appdata,
       ...otherData,
+      qrCode: qrCode || appdata.appdata,
       orgId: user.orgId,
       tpls,
     }
 
-    saveMiniapp({ data }).then(() => {
+    saveMiniapp({ data }).then((miniapp) => {
+      
+      if (typeof props.onChange === 'function') {
+        props.onChange({ ...user, miniapp })
+      }
+
       notification.success({ message: '保存小程序信息成功' })
     }).catch(x => x)
   }
     }
   }
 
-  return (<XForm onSubmit={handleSubmit} onCancel={handleCancel} fields={fields}></XForm>)
+  return (<XForm wrappedComponentRef={handleForm} onSubmit={handleSubmit} onCancel={handleCancel} fields={fields}></XForm>)
 }
 
 export default Miniapp;

src/pages/UserManage/Editor/User.jsx

 import XForm, { FieldTypes } from '../../../components/XForm';
 import { fetch, apis } from '../../../utils/request';
 
-const defaultPass = '123456';
+const defaultPass = 'abc@123';
 const saveUser = fetch(apis.member.save)
 const updateUser = fetch(apis.member.update)
 
   ]
 
   const handleSubmit = val => {
-    const data = {
+    const dt = {
       ...val,
       loginName: val.loginName || val.phone,
       loginPassword: md5(defaultPass),
 
     setSubmitting(true)
     if (user && user.userId) {
-      updateUser({ urlData: { id: user.userId }, data: { ...user, ...data } }).then((user) => {
+      const data = { ...user, ...dt }
+      updateUser({ urlData: { id: user.userId }, data }).then((user) => {
         setSubmitting(false)
         notification.success({message: '编辑信息成功'})
+
+        if (typeof props.onChange === 'function') {
+          props.onChange(data)
+        }
+
       }).catch(() => setSubmitting(false))
     } else {
       saveUser({ data }).then((user) => {
         setSubmitting(false)
         notification.success({message: '新建信息成功'})
+        router.push(`/member/edit/${user.userId}`)
       }).catch(() => setSubmitting(false))
-      router.push(`/member/edit/${user.userId}`)
     }
   }
 

src/pages/UserManage/Editor/index.jsx

     }
   }, [props.match.params.id])
 
+  const handleChangeUser = (newUser) => {
+    console.log(newUser)
+    setUser({
+      ...user,
+      ...newUser,
+    });
+  }
+
   const handleCancel = (currentTab) => () => {
     if (currentTab === 1) {
       gotoList()
         </Radio.Group>
       </div>
       <div style={{ width: '680px', margin: '0 auto' }}>
-        { tab === 1 ? <User data={user} {...props} onCancel={handleCancel(1)}/> : null}
-        { tab === 2 ? <MiniApp data={user} {...props} onCancel={handleCancel(2)}/> : null}
+        { tab === 1 ? <User data={user} {...props} onChange={handleChangeUser} onCancel={handleCancel(1)}/> : null}
+        { tab === 2 ? <MiniApp data={user} {...props} onChange={handleChangeUser} onCancel={handleCancel(2)}/> : null}
         { tab === 3 ? <Menus data={user} {...props} onCancel={handleCancel(3)}/> : null}
       </div>
     </PageHeaderWrapper>

src/pages/UserManage/index.jsx

             (<Button type="link" onClick={handleSwitch(true)} style={{ color: colorSucces }}>开启<Icon type="check" /></Button>) :
             (<Button type="link" onClick={handleSwitch(false)} style={{ color: colorDanger }}>关闭<Icon type="delete" /></Button>)
           }>
-          <h3>南京楼市</h3>
+          <h3>{cbProps.miniappId ? cbProps.miniappName : <Warn>(小程序)未设置</Warn>}</h3>
         </Cell>
         <div>
           <ABCol header={'联系人'}>{cbProps.userName}</ABCol>
           <ABCol header={'手机号'}>{cbProps.phone}</ABCol>
-          <ABCol header={'小程序'}>{cbProps.miniappId ? cbProps.miniappName : <Warn>未设置</Warn>}</ABCol>
           <ABCol header={'服务到期时间'}>{cbProps.expData ? moment(cbProps.expData).format('YYYY-MM-DD') : <Warn>未设置</Warn>}</ABCol>
         </div>
       </>

src/services/apis.js

     current: {
       url: `${prefix}/current`,
       method: 'GET',
+      action: 'center',
     },
     login: {
       url: `${prefix}/signin`,
       method: 'POST',
+      action: 'center',
       login: true
     },
     logoff: {
       url: `${prefix}/signout`,
       method: 'POST',
+      action: 'center',
       logout: true
     },
   },
     list: {
       url: `${prefix}/taUser`,
       method: 'GET',
+      action: 'center',
     },
     get: {
       url: `${prefix}/taUser/:id`,
       method: 'GET',
+      action: 'center',
     },
     save: {
       url: `${prefix}/taUser`,
       method: 'POST',
+      action: 'center',
     },
     update: {
       url: `${prefix}/taUser/:id`,
       method: 'PUT',
+      action: 'center',
     },
     miniapp: {
-      url: `${prefix}/taMiniapp`,
-      method: 'POST',
+      edit: {
+        url: `${prefix}/taMiniapp`,
+        method: 'POST',
+        action: 'center',
+      },
+      check: {
+        url: `${prefix}/check/taMiniapp`,
+        method: 'POST',
+        action: 'center',
+      }
     },
     menus: {
       url: `${prefix}/sysmodules`,
       method: 'GET',
+      action: 'center',
     },
     authorize: {
       url: `${prefix}/sysmodules`,
       method: 'POST',
+      action: 'center',
     },
     turn: {
       url: `${prefix}/turn/taUser/:id/:type`,
       method: 'PUT',
+      action: 'center',
     },
     resetPass: {
       url: `${prefix}/password/taUser/:id`,
       method: 'PUT',
+      action: 'center',
     },
   },
   image: {
     upload: {
       url: `${prefix}/antd/image`,
       method: 'POST',
+      action: 'center',
     }
   },
 }

src/utils/request.js

 }
 
 request.interceptors.request.use((url, options) => {
-  const { urlData, headers = {}, logout = false, login = false, data, ...opts } = options
+  const { urlData, headers = {}, logout = false, login = false, action, data, ...opts } = options
   const apiURL = urlData ? replaceURLParams(url, urlData) : url
   const token = mixStr(window.localStorage.getItem('test-foobar'))
 
   }
 
   const authHeader = !login ? { Authorization: `Bearer ${token}` } : {}
+  const actionHeader = action ? { 'X-ACTION': action  }: {}
 
   return (
     {
         ...opts,
         headers: {
           ...authHeader,
+          ...actionHeader,
           ...headers,
         },
         data,