change tpl message select

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

@@ -1,229 +0,0 @@
-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

@@ -37,7 +37,7 @@ const TplItem = React.forwardRef((props, ref) => {
         <Tooltip title="消息类型">
           <Select style={{ width: '15%' }} value={!!val.isSubscribe} onChange={handleChange('isSubscribe')}>
             <Option value={true}>订阅</Option>
-            <Option value={false}>普通</Option>
+            <Option value={false}>服务</Option>
           </Select>
         </Tooltip>
         <Tooltip title="消息模板ID">