bug fix

src/pages/UserManage/Editor/Miniapp.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+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';
@@ -15,6 +15,7 @@ const TplItem = React.forwardRef((props, ref) => {
     setVal(newVal)
 
     if (typeof props.onChange === 'function') {
+      console.log('--change--->', newVal)
       props.onChange(newVal)
     }
   }
@@ -34,7 +35,11 @@ const Miniapp = (props) => {
 
   const user = props.data || {}
   const appdata = user.miniapp || {};
-  const noticeTPL = (appdata.tpls || []).filter(x => x.tplType === 'notice')[0] || {}
+  const tpls = appdata.tpls || [];
+
+  useEffect(() => {
+    setQrCode(appdata.qrCode)
+  }, [])
 
   const showModal = () => {
     changeVisible(true);
@@ -58,6 +63,15 @@ const Miniapp = (props) => {
     }).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: '名称',
@@ -107,27 +121,12 @@ const Miniapp = (props) => {
         { pattern: /^[a-zA-Z0-9]+$/, message: 'AES_KEY 只能由字母与数字组成' }
       ]
     },
-    // {
-    //   label: '业务受理',
-    //   name: 'mainbiz',
-    //   render: <TplItem />
-    // },
-    // {
-    //   label: '新客户通知',
-    //   name: 'newCustomer',
-    //   render: <TplItem />
-    // },
-    {
-      label: '消息通知',
-      name: 'notice',
-      render: <TplItem />,
-      value: noticeTPL,
-    },
+    ...tplFields,
     {
       label: '小程序码',
       name: 'qrCode',
       render: () => <img src={qrCode} style={{ width: '240px' }} alt=""/>,
-      value: qrCode || appdata.qrCode,
+      value: qrCode,
     },
     {
       action: true,
@@ -154,40 +153,58 @@ 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] || {}
+
+        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
 
-    // if (mainbiz.tplId && !mainbiz.fieldNum) {
-    //   notification.error({ message: '请填写业务受理消息模板字段数' })
-    //   return
-    // }
-    
-    // if (newCustomer.tplId && !newCustomer.fieldNum) {
-    //   notification.error({ message: '请填写新客户通知模板字段数' })
-    //   return
-    // }
-    
-    if (notice.tplId && !notice.fieldNum) {
-      notification.error({ message: '请填写消息通知模板字段数' })
+    console.log('-----val--->', val)
+
+    const [tplData, errors] = checkTPLData(otherData)
+
+    if (errors.length > 0) {
+      notification.error({ message: errors[0] })
       return
     }
 
-    const tpls = [
-      {
-        ...(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,
+      tpls: tplData,
     }
 
     saveMiniapp({ data }).then((miniapp) => {

src/pages/UserManage/Editor/index.jsx

@@ -8,16 +8,24 @@ import Menus from './Menus';
 import { fetch, apis } from '../../../utils/request';
 
 const getUser = fetch(apis.member.get);
+const getTplTypes = fetch(apis.dict.tplType);
 
 export default (props) => {
   const [ tab, changeTab ] = useState(props.location.query.tab - 0 || 1);
   const [ user, setUser ] = useState({});
+  const [ tplTyps, setTplTypes ] = useState([])
+
+
   const handleRadioChange = e => {
     if (user.userId) {
       changeTab(e.target.value)
     }
   }
 
+  useEffect(() => {
+    getTplTypes().then(list => setTplTypes(list))
+  }, [])
+
   useEffect(() => {
     if (props.match.params.id) {
       getUser({ urlData: { id: props.match.params.id } }).then((user) => {
@@ -58,7 +66,7 @@ export default (props) => {
       </div>
       <div style={{ width: '680px', margin: '0 auto' }}>
         { 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 === 2 ? <MiniApp data={user} tplTyps={tplTyps} {...props} onChange={handleChangeUser} onCancel={handleCancel(2)}/> : null}
         { tab === 3 ? <Menus data={user} {...props} onCancel={handleCancel(3)}/> : null}
       </div>
     </PageHeaderWrapper>

src/services/apis.js

@@ -86,6 +86,13 @@ const apis = {
       action: 'center',
     },
   },
+  dict: {
+    tplType: {
+      url: `${prefix}/dict/templateType`,
+      method: 'GET',
+      action: 'center',
+    }
+  },
 }
 
 export default apis;