| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Form, Row, Col, Select, Radio, Tooltip, Input } from 'antd' |
| | | import { Form, Row, Col, Select, Radio, Tooltip, Input, message } from 'antd' |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | |
| | | state = { |
| | | wxTemps: [], |
| | | selectTemp: null, |
| | | miniTemps: [] |
| | | WXApps: null |
| | | } |
| | | |
| | | componentDidMount() { |
| | | let wxTemps = sessionStorage.getItem('wxTemplates') |
| | | const { appType, verify } = this.props |
| | | |
| | | if (window.GLOB.WXAppID && window.GLOB.nginx && !wxTemps) { |
| | | Api.wxAccessToken().then(res => { |
| | | let wxtoken = res.oa_access_token || '' |
| | | // let minitoken = res.mini_access_token || '' |
| | | |
| | | if (wxtoken) { |
| | | Api.wxNginxRequest(`cgi-bin/template/get_all_private_template?access_token=${wxtoken}`, 'get').then(res => { |
| | | let temps = [] |
| | | if (res.template_list) { |
| | | temps = res.template_list.filter(item => { |
| | | if (!item.primary_industry || sysTempsIds.includes(item.template_id)) return false |
| | | if (item.content) { |
| | | item.content = item.content.replace('{{first.DATA}}\n', '').replace('\n{{remark.DATA}}', '') |
| | | } |
| | | let appId = window.GLOB.WXAppID || '' |
| | | |
| | | return true |
| | | }) |
| | | } |
| | | |
| | | sessionStorage.setItem('wxTemplates', JSON.stringify(temps)) |
| | | localStorage.setItem('wxTemplates', JSON.stringify(temps)) |
| | | if (window.GLOB.WXApps && !appType) { |
| | | let apps = window.GLOB.WXApps.filter(app => app.appType === 'public') |
| | | |
| | | localStorage.removeItem('wxTemplates') |
| | | if (apps.length > 0) { |
| | | this.setState({WXApps: apps}) |
| | | } |
| | | |
| | | this.resetTemps(temps) |
| | | }) |
| | | } else { |
| | | sessionStorage.setItem('wxTemplates', JSON.stringify([])) |
| | | localStorage.setItem('wxTemplates', JSON.stringify([])) |
| | | if (verify.wxAppId && apps.findIndex(item => item.appId === verify.wxAppId) > -1) { |
| | | appId = verify.wxAppId |
| | | } |
| | | } |
| | | |
| | | localStorage.removeItem('wxTemplates') |
| | | } |
| | | // if (minitoken) { |
| | | // Api.wxNginxRequest(`wxaapi/newtmpl/gettemplate?access_token=${minitoken}`, 'get').then(res => { |
| | | // if (res.errmsg === 'ok' && res.data) { |
| | | // sessionStorage.setItem('wxMiniTemplates', JSON.stringify(res.data)) |
| | | // } else { |
| | | // sessionStorage.setItem('wxMiniTemplates', JSON.stringify([])) |
| | | // } |
| | | // }) |
| | | // } else { |
| | | // sessionStorage.setItem('wxMiniTemplates', JSON.stringify([])) |
| | | // } |
| | | }) |
| | | let wxTemps = sessionStorage.getItem('wxTemplates' + appId) |
| | | |
| | | if (appId && !wxTemps) { |
| | | if (verify.wxNote === 'true') { |
| | | this.getTemps(appId) |
| | | } |
| | | } else if (wxTemps) { |
| | | wxTemps = JSON.parse(wxTemps) |
| | | |
| | | this.resetTemps(wxTemps) |
| | | } else { |
| | | this.resetTemps([]) |
| | | } |
| | | } |
| | | |
| | | getTemps = (appId) => { |
| | | // cgi-bin/template/get_all_private_template |
| | | Api.directRequest({ |
| | | url: window.GLOB.baseurl + 'wechat/get_all_private_template?appid=' + appId, |
| | | method: 'get', |
| | | }).then(res => { |
| | | let temps = [] |
| | | if (res.template_list) { |
| | | temps = res.template_list.filter(item => { |
| | | if (!item.content || item.content.length < 25 || sysTempsIds.includes(item.template_id)) return false |
| | | if (item.content) { |
| | | item.content = item.content.replace('{{first.DATA}}\n', '').replace('\n{{remark.DATA}}', '') |
| | | } |
| | | |
| | | return true |
| | | }) |
| | | } else if (res.errcode && res.errmsg) { |
| | | message.warning(res.errcode + ': ' + res.errmsg) |
| | | } |
| | | |
| | | sessionStorage.setItem('wxTemplates' + appId, JSON.stringify(temps)) |
| | | |
| | | this.resetTemps(temps) |
| | | }) |
| | | } |
| | | |
| | | resetTemps = (wxTemps) => { |
| | |
| | | content: '订单类型:{{keyword1.DATA}}\n订单号:{{keyword2.DATA}}\n订单状态:{{keyword3.DATA}}', |
| | | example: '订单类型:退租申请\r\n订单号:TZ16101909\r\n订单状态:待取货' |
| | | }, |
| | | { |
| | | template_id: 'mk_category_temp', |
| | | title: '类目模板', |
| | | primary_industry: '', |
| | | deputy_industry: '', |
| | | content: '', |
| | | example: '' |
| | | } |
| | | // { |
| | | // template_id: 'mk_category_temp', |
| | | // title: '类目模板', |
| | | // primary_industry: '', |
| | | // deputy_industry: '', |
| | | // content: '', |
| | | // example: '' |
| | | // } |
| | | ] |
| | | |
| | | let _wxTemps = [...wxTemps, ...sysTemps] |
| | |
| | | delete _verify.pre_func |
| | | } |
| | | if (_verify.wxNote !== 'true') { |
| | | delete _verify.wxAppId |
| | | delete _verify.wxTemplateId |
| | | delete _verify.wxNoteLink |
| | | delete _verify.wxNoteLinkUrl |
| | |
| | | } |
| | | |
| | | this.props.onChange(_verify) |
| | | |
| | | if (key === 'wxNote' && value === 'true' && window.GLOB.WXAppID) { |
| | | let wxTemps = sessionStorage.getItem('wxTemplates' + window.GLOB.WXAppID) |
| | | |
| | | if (wxTemps) { |
| | | wxTemps = JSON.parse(wxTemps) |
| | | |
| | | this.resetTemps(wxTemps) |
| | | } else { |
| | | this.getTemps(window.GLOB.WXAppID) |
| | | } |
| | | } |
| | | } |
| | | |
| | | onNoteCodeChange = (val, option) => { |
| | |
| | | |
| | | let keys = [] |
| | | if (option.props.content) { |
| | | keys = option.props.content.match(/{{[a-zA-Z0-9]+\.DATA}}/g) |
| | | keys = option.props.content.match(/{{[a-zA-Z0-9_]+\.DATA}}/g) |
| | | keys = keys.map(key => key.replace(/{{|\.DATA}}/g, '')) |
| | | } |
| | | |
| | |
| | | this.setState({selectTemp}) |
| | | |
| | | this.props.onChange(_verify) |
| | | } |
| | | |
| | | onWxAppChange = (val) => { |
| | | const { verify } = this.props |
| | | |
| | | let _verify = {...verify, wxAppId: val, wxNote: 'false'} |
| | | |
| | | delete _verify.wxTemplateId |
| | | delete _verify.wxNoteLink |
| | | delete _verify.wxNoteLinkUrl |
| | | delete _verify.wxNoteMiniId |
| | | delete _verify.wxNoteLinkMenuId |
| | | delete _verify.wxNoteCallback |
| | | delete _verify.wxCustomTempId |
| | | |
| | | _verify.wxNoteKeys = null |
| | | |
| | | if (this.state.selectTemp) { |
| | | this.setState({selectTemp: null}) |
| | | } |
| | | |
| | | let _verify_ = fromJS(_verify).toJS() |
| | | _verify_.wxNote = 'true' |
| | | |
| | | this.props.onChange(_verify) |
| | | |
| | | setTimeout(() => { |
| | | this.props.onChange(_verify_) |
| | | |
| | | let wxTemps = sessionStorage.getItem('wxTemplates' + val) |
| | | |
| | | if (wxTemps) { |
| | | wxTemps = JSON.parse(wxTemps) |
| | | |
| | | this.resetTemps(wxTemps) |
| | | } else { |
| | | this.getTemps(val) |
| | | } |
| | | }, 20) |
| | | } |
| | | |
| | | onWxNoteKeyChange = (key, val) => { |
| | |
| | | |
| | | render() { |
| | | const { unionFields, verify, notes, emailCodes, card, appType, columns, fields } = this.props |
| | | const { wxTemps, selectTemp } = this.state |
| | | const { wxTemps, selectTemp, WXApps } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | |
| | | |
| | | _columns.push(col) |
| | | }) |
| | | } |
| | | |
| | | let miniable = '' |
| | | if (window.GLOB.WXApps) { |
| | | let apps = window.GLOB.WXApps.filter(app => app.appType === 'miniProgram') |
| | | |
| | | if (apps.length > 1) { |
| | | miniable = apps.map(app => `${app.appId}(${app.appName})`) |
| | | miniable = miniable.join(';') |
| | | } |
| | | } |
| | | |
| | | return ( |
| | |
| | | <Col span={24}></Col> |
| | | <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="bottomLeft" title={'请在服务器完成公众号配置。'}> |
| | | <Tooltip placement="bottomLeft" title="请在服务器完成公众号配置。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 公众号消息 |
| | | </Tooltip> |
| | |
| | | </Radio.Group> |
| | | </Form.Item> |
| | | </Col> |
| | | {verify.wxNote === 'true' && WXApps ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="bottomLeft" title="请选择发送消息的公众号。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 公众号 |
| | | </Tooltip> |
| | | } required> |
| | | <Select value={verify.wxAppId || window.GLOB.WXAppID} onSelect={this.onWxAppChange}> |
| | | {WXApps.map(option => |
| | | <Select.Option key={option.appId} value={option.appId}> |
| | | {option.appName} |
| | | </Select.Option> |
| | | )} |
| | | </Select> |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {verify.wxNote === 'true' ? <Col span={8}> |
| | | <Form.Item label="消息模板" required> |
| | | <Select value={verify.wxTemplateId} onSelect={this.onWxTemplateChange}> |
| | |
| | | </Col> : null} |
| | | {verify.wxNoteLink === 'miniProgram' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="top" title="可指定跳转小程序的ID,未设置时默认使用配置文件中的小程序ID。"> |
| | | <Tooltip placement="top" title={'可指定跳转小程序的ID,未设置时默认使用配置文件中的小程序ID。' + miniable}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 小程序ID |
| | | </Tooltip> |