add subscribe message

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npm.taobao.org

package.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "@ant-design/pro-layout": "^4.5.9",
     "@antv/data-set": "^0.10.2",
+    "@zjxpcyc/xrc-form2": "^2.1.0",
     "antd": "^3.20.0",
     "classnames": "^2.2.6",
     "dva": "^2.4.1",

src/pages/UserManage/Editor/Miniapp.bak.jsx

@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from 'react';
+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.edit);
+const checkMiniapp = fetch(apis.member.miniapp.check);
+
+const TplItem = React.forwardRef((props, ref) => {
+  const [val, setVal] = useState(props.value)
+
+  const handleChange = field => e => {
+    const newVal = { ...val, [`${field}`]: (e.target ? e.target.value : e) }
+    setVal(newVal)
+
+    if (typeof props.onChange === 'function') {
+      console.log('--change--->', newVal)
+      props.onChange(newVal)
+    }
+  }
+
+  return (
+    <Input.Group compact ref={ref}>
+      <Input style={{ width: '70%' }} value={val.tplId} placeholder="消息模板ID" onChange={handleChange('tplId')}></Input>
+      <InputNumber style={{ width: '30%' }} value={val.fieldNum} placeholder="字段数" onChange={handleChange('fieldNum')}></InputNumber>
+    </Input.Group>
+  );
+})
+
+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 tpls = appdata.tpls || [];
+
+  useEffect(() => {
+    setQrCode(appdata.qrCode)
+  }, [])
+
+  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 tplFields = (props.tplTyps || []).map((x) => {
+    return {
+      label: x.name,
+      name: `tpl-${x.code}`,
+      render: <TplItem />,
+      value: tpls.filter(y => y.tplType === x.code)[0] || {},
+    }
+  })
+
+  const fields = [
+    {
+      label: '名称',
+      name: 'name',
+      type: FieldTypes.Text,
+      value: appdata.name,
+      rules: [{required: true, message: '请填写小程序名称'}]
+    },
+    {
+      label: 'APPID',
+      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: 'Secret',
+      name: 'secret',
+      type: FieldTypes.Text,
+      value: appdata.secret,
+      rules: [
+        { required: true, message: '请填写 Secret' },
+        { pattern: /^[a-zA-Z0-9]+$/, message: 'APPID 只能由字母与数字组成' }
+      ]
+    },
+    {
+      label: 'Token',
+      name: 'token',
+      value: appdata.token,
+      type: FieldTypes.Text,
+      rules: [
+        { pattern: /^[a-zA-Z0-9]+$/, message: 'token 只能由字母与数字组成' }
+      ]
+    },
+    {
+      label: 'AES_KEY',
+      name: 'aesKey',
+      value: appdata.aesKey,
+      type: FieldTypes.Text,
+      rules: [
+        { pattern: /^[a-zA-Z0-9]+$/, message: 'AES_KEY 只能由字母与数字组成' }
+      ]
+    },
+    ...tplFields,
+    {
+      label: '小程序码',
+      name: 'qrCode',
+      render: () => <img src={qrCode} style={{ width: '240px' }} alt=""/>,
+      value: qrCode,
+    },
+    {
+      action: true,
+      render: () => {
+        return (
+          <div className={Style['flex-box']}>
+            <div className={Style['flex-item']}>
+              <img src="" alt="" style={{ width: '128px' }}/>
+            </div>
+            <div className={Style['flex-auto']}>
+              <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 checkTPLData = (submitData) => {
+    let tplData = [...tpls]
+    let errors = []
+
+    Object.keys(submitData).forEach((key) => {
+      if (key.indexOf('tpl-') === 0) {
+        const [, code] = key.split('-')
+        const { tplId, fieldNum } = submitData[key].result || submitData[key]
+        const tplType = (props.tplTyps || []).filter(x => x.code === code)[0] || {}
+
+        if (tplId && !fieldNum) {
+          errors.push(`请填写${tplType.name}模板字段数`)
+          return
+        }
+
+        console.log('--->', submitData[key])
+
+        if (tplId) {
+          tplData = [
+            ...tplData.filter(x => x.tplType !== code),
+            {
+              ...submitData[key],
+              tplType: code,
+              tplName: tplType.name,
+            }
+          ]
+        }
+      }
+    })
+
+    return [tplData, errors]
+  }
+
+  const handleSubmit = val => {
+    // 校验字段
+    const { mainbiz, newCustomer, notice, ...otherData} = val
+
+    console.log('-----val--->', val)
+
+    const [tplData, errors] = checkTPLData(otherData)
+
+    if (errors.length > 0) {
+      notification.error({ message: errors[0] })
+      return
+    }
+
+    const data = {
+      ...appdata,
+      ...otherData,
+      qrCode: qrCode || appdata.appdata,
+      orgId: user.orgId,
+      tpls: tplData,
+    }
+
+    saveMiniapp({ data }).then((miniapp) => {
+      
+      if (typeof props.onChange === 'function') {
+        props.onChange({ ...user, miniapp })
+      }
+
+      notification.success({ message: '保存小程序信息成功' })
+    }).catch(x => x)
+  }
+
+  const handleCancel = () => {
+    if (typeof props.onCancel === 'function') {
+      props.onCancel()
+    }
+  }
+
+  return (<XForm wrappedComponentRef={handleForm} onSubmit={handleSubmit} onCancel={handleCancel} fields={fields}></XForm>)
+}
+
+export default Miniapp;

src/pages/UserManage/Editor/Miniapp.jsx

@@ -1,32 +1,57 @@
 import React, { useState, useEffect } from 'react';
-import { Button, Row, Col, Input, InputNumber, Modal, notification } from 'antd';
-import XForm, { FieldTypes } from '../../../components/XForm';
+import { Button, Row, Col, Input, InputNumber, Modal, notification, Select, Tooltip } from 'antd';
+import createForm from '@zjxpcyc/xrc-form2';
 import Style from '../style.less';
 import { fetch, apis } from '../../../utils/request';
 
+const XForm = createForm();
 const saveMiniapp = fetch(apis.member.miniapp.edit);
 const checkMiniapp = fetch(apis.member.miniapp.check);
 
+const getEventValue = e => {
+  return Object.prototype.hasOwnProperty.call(e, 'checked') ?
+    e.checked : (e.target ? e.target.value : e)
+}
+
 const TplItem = React.forwardRef((props, ref) => {
   const [val, setVal] = useState(props.value)
+  const [isSubs, setIsSubs] = useState(props.value.isSubscribe)
 
   const handleChange = field => e => {
-    const newVal = { ...val, [`${field}`]: (e.target ? e.target.value : e) }
+    const fv = getEventValue(e);
+    const newVal = { ...val, [`${field}`]: fv }
     setVal(newVal)
 
+    if (field === 'isSubscribe') {
+      setIsSubs(fv)
+    }
+
     if (typeof props.onChange === 'function') {
-      console.log('--change--->', newVal)
       props.onChange(newVal)
     }
   }
 
   return (
-    <Input.Group compact ref={ref}>
-      <Input style={{ width: '70%' }} value={val.tplId} placeholder="消息模板ID" onChange={handleChange('tplId')}></Input>
-      <InputNumber style={{ width: '30%' }} value={val.fieldNum} placeholder="字段数" onChange={handleChange('fieldNum')}></InputNumber>
-    </Input.Group>
+    <div ref={ref}>
+      <Input.Group compact>
+        <Tooltip title="消息类型">
+          <Select style={{ width: '15%' }} value={!!val.isSubscribe} onChange={handleChange('isSubscribe')}>
+            <Option value={true}>订阅</Option>
+            <Option value={false}>普通</Option>
+          </Select>
+        </Tooltip>
+        <Tooltip title="消息模板ID">
+          <Input style={{ width: '45%' }} value={val.tplId} placeholder="消息模板ID" onChange={handleChange('tplId')}></Input>
+        </Tooltip>
+        {
+          !isSubs ?
+            (<Tooltip title="消息字段数"><InputNumber style={{ width: '40%' }} value={val.fieldNum} placeholder="字段数" onChange={handleChange('fieldNum')}></InputNumber></Tooltip>) :
+            (<Tooltip title="消息字段, 多字段用 | 分隔"><Input style={{ width: '40%' }} value={val.tplFields} placeholder="字段内容" onChange={handleChange('tplFields')}></Input></Tooltip>)
+        }
+      </Input.Group>
+    </div>
   );
-})
+});
 
 const Miniapp = (props) => {
   const [ visible, changeVisible ] = useState(false);
@@ -66,9 +91,10 @@ const Miniapp = (props) => {
   const tplFields = (props.tplTyps || []).map((x) => {
     return {
       label: x.name,
-      name: `tpl-${x.code}`,
-      render: <TplItem />,
+      name: `tpl.${x.code}`,
+      node: TplItem,
       value: tpls.filter(y => y.tplType === x.code)[0] || {},
+      hidden: vals => vals.isSubscribe,
     }
   })
 
@@ -76,14 +102,14 @@ const Miniapp = (props) => {
     {
       label: '名称',
       name: 'name',
-      type: FieldTypes.Text,
+      node: Input,
       value: appdata.name,
       rules: [{required: true, message: '请填写小程序名称'}]
     },
     {
       label: 'APPID',
       name: 'miniappId',
-      type: FieldTypes.Text,
+      node: Input,
       value: appdata.miniappId,
       props: {
         disabled: !!appdata.miniappId,
@@ -96,7 +122,7 @@ const Miniapp = (props) => {
     {
       label: 'Secret',
       name: 'secret',
-      type: FieldTypes.Text,
+      node: Input,
       value: appdata.secret,
       rules: [
         { required: true, message: '请填写 Secret' },
@@ -106,8 +132,8 @@ const Miniapp = (props) => {
     {
       label: 'Token',
       name: 'token',
+      node: Input,
       value: appdata.token,
-      type: FieldTypes.Text,
       rules: [
         { pattern: /^[a-zA-Z0-9]+$/, message: 'token 只能由字母与数字组成' }
       ]
@@ -115,8 +141,8 @@ const Miniapp = (props) => {
     {
       label: 'AES_KEY',
       name: 'aesKey',
+      node: Input,
       value: appdata.aesKey,
-      type: FieldTypes.Text,
       rules: [
         { pattern: /^[a-zA-Z0-9]+$/, message: 'AES_KEY 只能由字母与数字组成' }
       ]
@@ -154,33 +180,23 @@ const Miniapp = (props) => {
   ]
 
   const checkTPLData = (submitData) => {
-    let tplData = [...tpls]
     let errors = []
 
-    Object.keys(submitData).forEach((key) => {
-      if (key.indexOf('tpl-') === 0) {
-        const [, code] = key.split('-')
-        const { tplId, fieldNum } = submitData[key].result || submitData[key]
-        const tplType = (props.tplTyps || []).filter(x => x.code === code)[0] || {}
+    const tplData = Object.keys(submitData).map((key) => {
+      const { tplId, fieldNum, tplFields, isSubscribe, ...left } = submitData[key]
+      const tplType = (props.tplTyps || []).filter(x => x.code === key)[0] || {}
 
-        if (tplId && !fieldNum) {
-          errors.push(`请填写${tplType.name}模板字段数`)
+      if (isSubscribe) {
+        if (tplId && !tplFields) {
+          errors.push(`请填写${tplType.name}模板字段内容`)
           return
         }
-
-        console.log('--->', submitData[key])
-
-        if (tplId) {
-          tplData = [
-            ...tplData.filter(x => x.tplType !== code),
-            {
-              ...submitData[key],
-              tplType: code,
-              tplName: tplType.name,
-            }
-          ]
-        }
+      } else if (tplId && !fieldNum) {
+        errors.push(`请填写${tplType.name}模板字段数`)
+        return
       }
+
+      return submitData[key]
     })
 
     return [tplData, errors]
@@ -188,11 +204,9 @@ const Miniapp = (props) => {
 
   const handleSubmit = val => {
     // 校验字段
-    const { mainbiz, newCustomer, notice, ...otherData} = val
-
-    console.log('-----val--->', val)
+    const { tpl, ...otherData} = val
 
-    const [tplData, errors] = checkTPLData(otherData)
+    const [tplData, errors] = checkTPLData(tpl)
 
     if (errors.length > 0) {
       notification.error({ message: errors[0] })

src/pages/UserManage/Editor/index.jsx

@@ -64,7 +64,7 @@ export default (props) => {
           <Radio.Button value={3}>开通权限</Radio.Button>
         </Radio.Group>
       </div>
-      <div style={{ width: '680px', margin: '0 auto' }}>
+      <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}