2023-06-14

king

2023-06-14 08cce3334a2dc81d690b518136b0aaea64e48b0b

 src/templates/zshare/verifycard/baseform/index.jsx

@@ -5,10 +5,9 @@
import { QuestionCircleOutlined } from '@ant-design/icons'

import Api from '@/api'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const sysTempsIds = ['8IFltwzyKcu15iA8fqSyb6m-pMa88a3ZTu0No3vDHgo', 'LOB-bbt9jVncGh7IOAUdESh1Sgzcbt62UwOqSqcK9ok']

class BillCodeForm extends Component {
  static propTpyes = {
@@ -26,7 +25,6 @@
  }

  componentDidMount() {
    const { verify } = this.props
    let wxTemps = sessionStorage.getItem('wxTemplates')

    if (window.GLOB.WXAppID && window.GLOB.nginx && !wxTemps) {
@@ -38,21 +36,22 @@
          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 => item.primary_industry)
              let selectTemp = temps.filter(item => item.template_id === verify.wxTemplateId)[0]
              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}}', '')
                }

              if (selectTemp) {
                selectTemp.content = selectTemp.content.replace(/\r\n|\n/g, '<br/>')
                selectTemp.example = selectTemp.example.replace(/\r\n|\n/g, '<br/>')
              }

              this.setState({wxTemps: temps, selectTemp})
                return true
              })
            }

            
            sessionStorage.setItem('wxTemplates', JSON.stringify(temps))
            localStorage.setItem('wxTemplates', JSON.stringify(temps))

            localStorage.removeItem('wxTemplates')

            this.resetTemps(temps)
          })
        } else {
          sessionStorage.setItem('wxTemplates', JSON.stringify([]))
@@ -75,15 +74,50 @@
    } else if (wxTemps) {
      wxTemps = JSON.parse(wxTemps)

      let selectTemp = wxTemps.filter(item => item.template_id === verify.wxTemplateId)[0]

      if (selectTemp) {
        selectTemp.content = selectTemp.content.replace(/\r\n|\n/g, '<br/>')
        selectTemp.example = selectTemp.example.replace(/\r\n|\n/g, '<br/>')
      }
  
      this.setState({wxTemps, selectTemp})
      this.resetTemps(wxTemps)
    }
  }

  resetTemps = (wxTemps) => {
    const { verify } = this.props

    let sysTemps = [
      {
        template_id: '8IFltwzyKcu15iA8fqSyb6m-pMa88a3ZTu0No3vDHgo',
        title: '订单受理通知（明科云）',
        primary_industry: 'IT科技',
        deputy_industry: 'IT软件与服务',
        content: '订单号：{{keyword1.DATA}}\n订单类型：{{keyword2.DATA}}\n订单状态：{{keyword3.DATA}}\n通知时间：{{keyword4.DATA}}',
        example: '订单号：20190101001\r\n订单类型：衣柜\r\n订单状态：设计完成\r\n通知时间：2019年1月1日12:30'
      },
      {
        template_id: 'LOB-bbt9jVncGh7IOAUdESh1Sgzcbt62UwOqSqcK9ok',
        title: '订单进度提醒（明科云）',
        primary_industry: 'IT科技',
        deputy_industry: 'IT软件与服务',
        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: ''
      }
    ]
    
    let _wxTemps = [...wxTemps, ...sysTemps]

    let selectTemp = _wxTemps.filter(item => item.template_id === verify.wxTemplateId)[0]

    if (selectTemp) {
      selectTemp.content = selectTemp.content.replace(/\r\n|\n/g, '<br/>')
      selectTemp.example = selectTemp.example.replace(/\r\n|\n/g, '<br/>')
    }

    this.setState({wxTemps: _wxTemps, selectTemp})
  }

  handleConfirm = () => {
@@ -97,10 +131,11 @@
    } else if (verify.wxNote === 'true') {
      if (!verify.wxTemplateId) {
        error = '开启公众号消息推送时，需要选择消息模板！'
      } else if (verify.wxTemplateId === 'mk_category_temp' && !verify.wxCustomTempId) {
        error = '开启公众号消息推送时，需要填写消息模板ID！'
      } else if (verify.wxNoteLink === 'url' && !verify.wxNoteLinkUrl) {
        error = '请填写网址！'
      }

    }

    return error
@@ -125,6 +160,8 @@
      _verify.wxNoteLinkMenuId = ''
      _verify.wxNoteCallback = 'false'
      _verify.wxNoteKeys = null

      delete _verify.wxCustomTempId

      if (this.state.selectTemp) {
        this.setState({selectTemp: null})
@@ -155,7 +192,7 @@
    const { verify } = this.props

    let _verify = {...verify, wxTemplateId: val}
    let selectTemp = {content: option.props.content.replace(/\r\n|\n/g, '<br/>'), example: option.props.example.replace(/\r\n|\n/g, '<br/>')}
    let selectTemp = {template_id: val, content: option.props.content.replace(/\r\n|\n/g, '<br/>'), example: option.props.example.replace(/\r\n|\n/g, '<br/>')}

    let keys = []
    if (option.props.content) {
@@ -163,26 +200,27 @@
      keys = keys.map(key => key.replace(/{{|\.DATA}}/g, ''))
    }

    let index = 1
    _verify.wxNoteKeys = keys.map(key => {
      let item = {
        key: key,
        color: '#000000',
        readonly: false
    delete _verify.wxCustomTempId

    if (selectTemp.template_id === 'mk_category_temp') {
      _verify.wxNoteKeys = []
      for (let i = 1; i <= 10; i++) {
        _verify.wxNoteKeys.push({
          key: '',
          value: 'p' + i
        })
      }
      if (key === 'first') {
        item.value = 'first'
        item.readonly = true
      } else if (key === 'remark') {
        item.value = 'remark'
        item.readonly = true
      } else {
    } else {
      let index = 1
      _verify.wxNoteKeys = keys.map(key => {
        let item = { key: key }
        
        item.value = 'p' + index
        index++
      }

      return item
    })
  
        return item
      })
    }

    this.setState({selectTemp})

@@ -203,16 +241,24 @@
    this.props.onChange(_verify)
  }

  onWxNoteColorChange = (key, val) => {
  onWxNoteValueChange = (value, val) => {
    let _verify = fromJS(this.props.verify).toJS()

    _verify.wxNoteKeys = _verify.wxNoteKeys.map(m => {
      if (m.key === key) {
        m.color = val
      if (m.value === value) {
        m.key = val.replace(/\s+/ig, '')
      }

      return m
    })

    this.props.onChange(_verify)
  }

  onWxNoteTempIdChange = (value) => {
    let _verify = fromJS(this.props.verify).toJS()

    _verify.wxCustomTempId = value.replace(/\s+/ig, '')

    this.props.onChange(_verify)
  }
@@ -413,9 +459,9 @@
              <Input placeholder="" autoComplete="off" value={verify.wxNoteLinkMenuId || ''} onChange={(e) => {this.onOptionChange(e.target.value, 'wxNoteLinkMenuId')}}/>
            </Form.Item>
          </Col> : null}
          {verify.wxNote === 'true' && verify.wxNoteKeys ? verify.wxNoteKeys.map(item => <Col span={8} key={item.key}>
            <Form.Item className="mk-note-keyword" label={item.key} required>
              <Select value={item.value} disabled={item.readonly} onSelect={(val) => this.onWxNoteKeyChange(item.key, val)}>
          {verify.wxNote === 'true' && verify.wxNoteKeys && (!selectTemp || selectTemp.template_id !== 'mk_category_temp') ? verify.wxNoteKeys.map((item, index) => <Col span={8} key={'mk' + index}>
            <Form.Item label={item.key} required>
              <Select value={item.value} onSelect={(val) => this.onWxNoteKeyChange(item.key, val)}>
                <Select.Option value="p1">p1</Select.Option>
                <Select.Option value="p2">p2</Select.Option>
                <Select.Option value="p3">p3</Select.Option>
@@ -427,10 +473,19 @@
                <Select.Option value="p9">p9</Select.Option>
                <Select.Option value="p10">p10</Select.Option>
              </Select>
              <ColorSketch value={item.color || '#ffffff'} onChange={(val, hex) => {this.onWxNoteColorChange(item.key, hex)}} />
            </Form.Item>
          </Col>) : null}
          {selectTemp && verify.wxNoteKeys ? <Col span={24} className="wx-note">
          {verify.wxNote === 'true' && verify.wxNoteKeys && (selectTemp && selectTemp.template_id === 'mk_category_temp') ? <Col span={8}>
            <Form.Item label="模板ID" required>
              <Input placeholder="" defaultValue={verify.wxCustomTempId} autoComplete="off" onChange={(e) => {this.onWxNoteTempIdChange(e.target.value)}}/>
            </Form.Item>
          </Col> : null}
          {verify.wxNote === 'true' && verify.wxNoteKeys && (selectTemp && selectTemp.template_id === 'mk_category_temp') ? verify.wxNoteKeys.map((item, index) => <Col span={8} key={'mk' + index}>
            <Form.Item label={item.value}>
              <Input placeholder="" defaultValue={item.key} autoComplete="off" onChange={(e) => {this.onWxNoteValueChange(item.value, e.target.value)}}/>
            </Form.Item>
          </Col>) : null}
          {selectTemp && selectTemp.template_id !== 'mk_category_temp' && verify.wxNoteKeys ? <Col span={24} className="wx-note">
            <div className="note-wrap">
              <div className="note">
                <p>内容示例</p>
@@ -449,12 +504,25 @@
                <div>
                  <p>openid:&nbsp;&nbsp;"接收者openid",</p>
                  <p>send_id:&nbsp;&nbsp;"防重入id",</p>
                  {verify.wxNoteKeys.map(item => <p>{item.value}:&nbsp;&nbsp;"=&gt; {item.key}",</p>)}
                  {verify.wxNoteKeys.map((item, i) => <p key={'index' + i}>{item.value}:&nbsp;&nbsp;"=&gt; {item.key}",</p>)}
                  <p>bid:&nbsp;&nbsp;"跳转小程序时，可作为BID。"</p>
                </div>
              </div>
            </div>
          </Col> : null}
          {selectTemp && selectTemp.template_id === 'mk_category_temp' && verify.wxNoteKeys ? <Col span={24} className="wx-note">
            <div className="note-wrap">
              <div className="note">
                <p>消息体</p>
                <div>
                  <p>openid:&nbsp;&nbsp;"接收者openid",</p>
                  <p>send_id:&nbsp;&nbsp;"防重入id",</p>
                  <p>bid:&nbsp;&nbsp;"跳转小程序时，可作为BID。"</p>
                  <p style={{color: '#1890ff'}}>请在通用字段中（p1~p10）填入模板中对应的字段名，如 time1.DATA 则填写 time1。</p>
                </div>
              </div>
            </div>
          </Col> : null}
        </Row>
      </Form>
    )