feats

src/pages/mpSetting/components/MainSeting.jsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react'
+import { Form, Modal, Button, Input, InputNumber, Select, Radio } from 'antd'
+import { fetch, apis } from '@/utils/request'
+import MiniAppMedia from './MiniAppMedia'
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 6 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 12 },
+  },
+}
+
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0,
+    },
+    sm: {
+      span: 16,
+      offset: 6,
+    },
+  },
+}
+
+export default Form.create()(props => {
+  const handleMiniAppChange = vals => {
+    setDetailData({
+      ...props.value,
+      miniappMedia: vals.mediaId,
+      miniappUrl: vals.url
+    })
+  }
+
+  useEffect(() => {
+    props.form.setFieldsValue(props.value)
+  }, [props.value])
+
+  return (
+    <div>
+      <Form {...formItemLayout}>
+        {/* <Form.Item label="名称">
+          {
+            props.form.getFieldDecorator('name')(<Input placeholder="请填写名称" readOnly />)
+          }
+        </Form.Item> */}
+        <Form.Item label="APPID">
+          {
+            props.form.getFieldDecorator('appid')(<Input placeholder="请填写 APPID" readOnly />)
+          }
+        </Form.Item>
+        <Form.Item label="SECRET">
+          {
+            props.form.getFieldDecorator('secret')(<Input placeholder="请填写 SECRET" readOnly />)
+          }
+        </Form.Item>
+        <Form.Item label="TOKEN">
+          {
+            props.form.getFieldDecorator('token')(<Input placeholder="请填写 TOKEN" readOnly />)
+          }
+        </Form.Item>
+        <Form.Item label="AES_KEY">
+          {
+            props.form.getFieldDecorator('aesKey')(<Input placeholder="请填写 AES_KEY" readOnly />)
+          }
+        </Form.Item>
+        <Form.Item label="小程序封面" help="仅支持JPG图片,建议大小为520*416">
+          <div>
+            {props.value.miniappMedia && <span style={{display: 'inline-block', marginRight: '24px'}}>{props.value.miniappMedia}</span>}
+            <MiniAppMedia onChange={handleMiniAppChange} />
+          </div>
+        </Form.Item>
+      </Form>
+    </div>
+  )
+})

src/pages/mpSetting/components/TemplateItem.jsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react'
+import { Button, Input, Menu, Dropdown, Select, Modal, Icon } from 'antd'
+import { fetch, apis } from '@/utils/request'
+
+export default props => {
+  const [isInDB, setIsInDB] = useState(false)
+  const [typeInfo, setTypeInfo] = useState({})
+  const [dataSource, setDataSource] = useState({})
+  const [typeDict, setTypeDict] = useState([
+    {typeCode: 'birthday', typeName: '生日'},
+    {typeCode: 'festival', typeName: '节日'},
+  ])
+
+  const handleChange = e => {
+    const templateCode = e.target.value
+    setDataSource({
+      ...dataSource,
+      templateCode
+    })
+  }
+
+  const handleTypeChange = e => {
+    const val = typeDict.filter(x => x.typeCode === e)[0] || {}
+    setTypeInfo(val)
+  }
+
+  const handleSubmit = () => {
+    if (props.onChange) {
+      props.onChange({
+        ...dataSource,
+        ...typeInfo,
+      })
+    }
+  }
+
+  const handleOverMenuClick = e => {
+    if (e.key === 'delete') {
+      if (!isInDB) {
+        if (props.onDelete) {
+          props.onDelete(dataSource)
+        }
+      } else {
+        if (props.onDelete) {
+          Modal.confirm({
+            title: '确认删除当前记录?',
+            okType: 'danger',
+            onOk: () => {
+              props.onDelete(dataSource)
+            }
+          })
+        }
+      }
+    }
+  }
+
+  const OverMenu = (
+    <Menu onClick={handleOverMenuClick}>
+      <Menu.Item key="delete">删除</Menu.Item>
+    </Menu>
+  )
+
+  useEffect(() => {
+    const val = props.value || {}
+    setDataSource({...val})
+    setTypeInfo({
+      typeCode: val.typeCode,
+      typeName: val.typeName,
+    })
+    setIsInDB(val.serialNo && `${val.serialNo}`.indexOf('tmp') === -1)
+  }, [props.value])
+
+  return (
+    <Input.Group compact size="large">
+      <Select
+        size="large"
+        disabled={isInDB}
+        value={typeInfo.typeCode}
+        onChange={handleTypeChange}
+        style={{width: '15%'}}
+        placeholder="请选择分类"
+      >
+        {
+          typeDict.map(typ => (<Select.Option key={typ.typeCode} value={typ.typeCode}>{typ.typeName}</Select.Option>))
+        }
+      </Select>
+      <Input
+        value={dataSource.templateCode}
+        onChange={handleChange}
+        style={{width: '70%'}}
+        placeholder="请填写消息模板ID"
+        />
+      <Dropdown.Button
+         size="large"
+        overlay={OverMenu}
+        onClick={handleSubmit}
+        icon={<Icon type="down" />}
+        style={{width: '15%'}}
+      >
+        提交
+      </Dropdown.Button>
+    </Input.Group>
+  )
+}

src/pages/mpSetting/components/TemplateSetting.jsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react'
+import { List, Input, Button, notification } from 'antd'
+import { fetch, apis, fetchList } from '@/utils/request'
+import TemplateItem from './TemplateItem'
+
+const getTemplateList = fetchList(apis.mp.template.list)
+const saveTemplate = fetch(apis.mp.template.save)
+const updateTemplate = fetch(apis.mp.template.update)
+const deleteTemplate = fetch(apis.mp.template.delete)
+
+export default props => {
+  const [loading, setLoading] = useState(false)
+  const [listData, setListData] = useState([])
+  const [query, setQuery] = useState({pageSize: 999})
+
+  const isTemp = x => !x.serialNo || `${x.serialNo}`.indexOf('tmp') > -1
+
+  const handleAdd = () => {
+    const template = {
+      orgId: props.value.orgI,
+      appid: props.value.appid,
+      typeCode: undefined,
+      typeName: undefined,
+      templateCode: undefined,
+      serialNo: `tmp-${Math.random().toString(36).substring(2)}`
+    }
+
+    setListData([template].concat(listData))
+  }
+
+  const handleRowChange = row => {
+    if (isTemp(row)) {
+      saveTemplate({data: {
+        ...row,
+        serialNo: undefined,
+      }}).then(res => {
+        notification.success({message: '保存信息成功'})
+        setQuery({...query})
+      })
+    } else {
+      updateTemplate({data: row, urlData: {id: row.serialNo}}).then(res => {
+        notification.success({message: '更新信息成功'})
+        setQuery({...query})
+      })
+    }
+  }
+
+  const handleRowDelete = row => {
+    if (isTemp(row)) {
+      setListData(listData.filter(x => x.serialNo !== row.serialNo))
+    } else {
+      deleteTemplate({urlData: {id: row.serialNo}}).then(res => {
+        notification.success({message: '删除信息成功'})
+        setQuery({...query})
+      })
+    }
+  }
+
+  useEffect(() => {
+    setLoading(true)
+    getTemplateList(query).then(res => {
+      const [list] = res
+      setListData(list || [])
+      setLoading(false)
+    }).catch(() => setLoading(false))
+  }, [query])
+
+
+  return (
+    <div>
+      <Button onClick={handleAdd}>新增</Button>
+      <div style={{maxWidth: '800px', marginTop: '16px' }}>
+        <List
+          loading={loading}
+          dataSource={listData}
+          size="large"
+          bordered={false}
+          itemLayout="horizontal"
+          renderItem={item => {
+            return (
+              <List.Item>
+                  <TemplateItem value={item} onChange={handleRowChange} onDelete={handleRowDelete} />
+              </List.Item>
+            )
+          }}
+        />
+      </div>
+    </div>
+  )
+}

src/pages/mpSetting/index.jsx

@@ -1,88 +1,31 @@
 import React, { useEffect, useState } from 'react'
-import { Form, Modal, Button, Input, InputNumber, Select, Radio, PageHeader } from 'antd'
+import { Form, Modal, Button, Input, InputNumber, Select, Radio, PageHeader, Tabs } from 'antd'
 import { fetch, apis } from '@/utils/request'
-import MiniAppMedia from './components/MiniAppMedia'
-
-const formItemLayout = {
-  labelCol: {
-    xs: { span: 24 },
-    sm: { span: 6 },
-  },
-  wrapperCol: {
-    xs: { span: 24 },
-    sm: { span: 12 },
-  },
-}
-
-const tailFormItemLayout = {
-  wrapperCol: {
-    xs: {
-      span: 24,
-      offset: 0,
-    },
-    sm: {
-      span: 16,
-      offset: 6,
-    },
-  },
-}
+import MainSeting from './components/MainSeting'
+import TemplateSetting from './components/TemplateSetting'
 
 const mpDetail = fetch(apis.mp.detail)
 
-export default Form.create()(props => {
+export default props => {
   const [detailData, setDetailData] = useState({})
 
-  const handleMiniAppChange = vals => {
-    setDetailData({
-      ...detailData,
-      miniappMedia: vals.mediaId,
-      miniappUrl: vals.url
-    })
-  }
-
   useEffect(() => {
     mpDetail().then(res => {
       setDetailData(res)
-      props.form.setFieldsValue(res)
     })
   }, [])
 
   return (
     <div>
       <PageHeader title="公众号设置" backIcon={false} />
-      <Form {...formItemLayout}>
-        {/* <Form.Item label="名称">
-          {
-            props.form.getFieldDecorator('name')(<Input placeholder="请填写名称" readOnly />)
-          }
-        </Form.Item> */}
-        <Form.Item label="APPID">
-          {
-            props.form.getFieldDecorator('appid')(<Input placeholder="请填写 APPID" readOnly />)
-          }
-        </Form.Item>
-        <Form.Item label="SECRET">
-          {
-            props.form.getFieldDecorator('secret')(<Input placeholder="请填写 SECRET" readOnly />)
-          }
-        </Form.Item>
-        <Form.Item label="TOKEN">
-          {
-            props.form.getFieldDecorator('token')(<Input placeholder="请填写 TOKEN" readOnly />)
-          }
-        </Form.Item>
-        <Form.Item label="AES_KEY">
-          {
-            props.form.getFieldDecorator('aesKey')(<Input placeholder="请填写 AES_KEY" readOnly />)
-          }
-        </Form.Item>
-        <Form.Item label="小程序封面" help="仅支持JPG图片,建议大小为520*416">
-          <div>
-            {detailData.miniappMedia && <span style={{display: 'inline-block', marginRight: '24px'}}>{detailData.miniappMedia}</span>}
-            <MiniAppMedia onChange={handleMiniAppChange} value={detailData.miniapp_url} />
-          </div>
-        </Form.Item>
-      </Form>
+      <Tabs defaultActiveKey="1">
+        <Tabs.TabPane tab="基础设置" key="1">
+          <MainSeting value={detailData} />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab="模板设置" key="2">
+          <TemplateSetting value={detailData} />
+        </Tabs.TabPane>
+      </Tabs>
     </div>
   )
-})
+}

src/services/apis.js

@@ -21,7 +21,7 @@ export default {
   propNews: propNews(prefix),
   mp: {
     detail: {
-      url: `${prefix}/mp/taMpInfo`,
+      url: `${prefix}/taMpInfo`,
       method: 'GET',
       action: 'admin.taMpInfo.get',
     },
@@ -29,6 +29,28 @@ export default {
       url: `${prefix}/mp/material/miniapp`,
       method: 'POST',
       action: 'admin.mp-material.miniapp',
+    },
+    template: {
+      list: {
+        url: `${prefix}/taMpTemplate`,
+        method: 'GET',
+        action: 'admin.taMpTemplate.get',
+      },
+      save: {
+        url: `${prefix}/taMpTemplate`,
+        method: 'POST',
+        action: 'admin.taMpTemplate.post',
+      },
+      update: {
+        url: `${prefix}/taMpTemplate/:id`,
+        method: 'PUT',
+        action: 'admin.taMpTemplate.put',
+      },
+      delete: {
+        url: `${prefix}/taMpTemplate/:id`,
+        method: 'DELETE',
+        action: 'admin.taMpTemplate.delete',
+      },
     }
   },
   person: {