| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Form, Row, Col, Select, Radio, Tooltip, Input, notification } from 'antd' |
| | | import { Form, Row, Col, Select, Radio, Tooltip, Input } from 'antd' |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | | import MkPrintTemps from '@/menu/components/share/actioncomponent/actionform/mkPrintTemps' |
| | | import './index.scss' |
| | | |
| | | const sysTempsIds = ['8IFltwzyKcu15iA8fqSyb6m-pMa88a3ZTu0No3vDHgo', 'LOB-bbt9jVncGh7IOAUdESh1Sgzcbt62UwOqSqcK9ok'] |
| | |
| | | verify: PropTypes.object, |
| | | unionFields: PropTypes.array, |
| | | notes: PropTypes.array, |
| | | appType: PropTypes.any, |
| | | onChange: PropTypes.func |
| | | } |
| | | |
| | | state = { |
| | | wxTemps: [], |
| | | selectTemp: null, |
| | | miniTemps: [], |
| | | miniTemps: [] |
| | | } |
| | | |
| | | componentDidMount() { |
| | |
| | | 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: '' |
| | | // } |
| | | { |
| | | 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 error = '' |
| | | if (verify.noteEnable === 'true' && !verify.noteCode) { // 开启短信时,需要模板编码 |
| | | error = '开启短信时,需要选择短信模板!' |
| | | } else if (verify.printEnable === 'true' && !verify.printTempId) { |
| | | error = '使用单据打印时,需要选择打印模板!' |
| | | } else if (verify.accountdate === 'true' && !verify.accountfield) { |
| | | error = '开启账期时,需要选择验证公司!' |
| | | } 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 = '请填写网址!' |
| | | } |
| | |
| | | } |
| | | |
| | | onOptionChange = (value, key) => { |
| | | const { verify, setting } = this.props |
| | | const { verify } = this.props |
| | | |
| | | let _verify = {...verify, [key]: value} |
| | | |
| | | if (_verify.noteEnable !== 'true') { |
| | | _verify.noteCode = '' |
| | | } |
| | | if (_verify.printEnable !== 'true') { |
| | | _verify.printTempId = '' |
| | | } |
| | | if (_verify.accountdate !== 'true') { |
| | | _verify.accountfield = '' |
| | |
| | | _verify.wxNoteCallback = 'false' |
| | | _verify.wxNoteKeys = null |
| | | |
| | | delete _verify.wxCustomTempId |
| | | |
| | | if (this.state.selectTemp) { |
| | | this.setState({selectTemp: null}) |
| | | } |
| | | } |
| | | |
| | | if (verify.invalid !== 'true' && _verify.invalid === 'true' && setting.maxScript && setting.maxScript >= 300) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '数据源中自定义脚本过于复杂,不能使用失效验证!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | this.props.onChange(_verify) |
| | |
| | | const { verify } = this.props |
| | | |
| | | let _verify = {...verify, noteCode: val, noteId: option.props.id} |
| | | |
| | | this.props.onChange(_verify) |
| | | } |
| | | |
| | | onPrintIdChange = (val) => { |
| | | const { verify } = this.props |
| | | |
| | | let _verify = {...verify, printTempId: val} |
| | | |
| | | this.props.onChange(_verify) |
| | | } |
| | |
| | | keys = keys.map(key => key.replace(/{{|\.DATA}}/g, '')) |
| | | } |
| | | |
| | | let index = 1 |
| | | _verify.wxNoteKeys = keys.map(key => { |
| | | let item = { key: key } |
| | | |
| | | item.value = 'p' + index |
| | | index++ |
| | | delete _verify.wxCustomTempId |
| | | |
| | | return item |
| | | }) |
| | | if (selectTemp.template_id === 'mk_category_temp') { |
| | | _verify.wxNoteKeys = [] |
| | | for (let i = 1; i <= 10; i++) { |
| | | _verify.wxNoteKeys.push({ |
| | | key: '', |
| | | value: 'p' + i |
| | | }) |
| | | } |
| | | } else { |
| | | let index = 1 |
| | | _verify.wxNoteKeys = keys.map(key => { |
| | | let item = { key: key } |
| | | |
| | | item.value = 'p' + index |
| | | index++ |
| | | |
| | | return item |
| | | }) |
| | | } |
| | | |
| | | this.setState({selectTemp}) |
| | | |
| | |
| | | this.props.onChange(_verify) |
| | | } |
| | | |
| | | onWxNoteValueChange = (value, val) => { |
| | | let _verify = fromJS(this.props.verify).toJS() |
| | | |
| | | _verify.wxNoteKeys = _verify.wxNoteKeys.map(m => { |
| | | 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) |
| | | } |
| | | |
| | | render() { |
| | | const { unionFields, verify, notes, card } = this.props |
| | | const { unionFields, verify, notes, card, appType, columns } = this.props |
| | | const { wxTemps, selectTemp } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | |
| | | xs: { span: 24 }, |
| | | sm: { span: 16 } |
| | | } |
| | | } |
| | | |
| | | let _columns = [] |
| | | if (window.GLOB.process) { |
| | | _columns = columns.filter(col => { |
| | | if (!col.field) return false |
| | | if (col.field.toLowerCase() === 'id') return false |
| | | if (col.type === 'text' && col.fieldlength > 100) return false |
| | | |
| | | return true |
| | | }) |
| | | } |
| | | |
| | | return ( |
| | |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {card.intertype !== 'inner' ? <Col span={8}> |
| | | <Form.Item label={'失效验证'}> |
| | | <Radio.Group value={verify.invalid} onChange={(e) => {this.onOptionChange(e.target.value, 'invalid')}}> |
| | | <Form.Item label={ |
| | | verify.limitText ? <Tooltip placement="bottomLeft" title={verify.limitText}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 失效验证 |
| | | </Tooltip> : '失效验证' |
| | | }> |
| | | <Radio.Group value={verify.invalid} disabled={verify.limitInvalid} onChange={(e) => {this.onOptionChange(e.target.value, 'invalid')}}> |
| | | <Radio value="true">开启</Radio> |
| | | <Radio value="false">不开启</Radio> |
| | | </Radio.Group> |
| | |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={24}></Col> |
| | | {appType !== 'mob' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="bottomLeft" title="使用单据打印时需选择打印模板,跳转打印界面时ID优先从返回值中获取,返回值没有时从行里获取。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 单据打印 |
| | | </Tooltip> |
| | | }> |
| | | <Radio.Group value={verify.printEnable} onChange={(e) => {this.onOptionChange(e.target.value, 'printEnable')}}> |
| | | <Radio value="true">开启</Radio> |
| | | <Radio value="false">不开启</Radio> |
| | | </Radio.Group> |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {verify.printEnable === 'true' ? <Col span={8}> |
| | | <Form.Item label="打印模板" required> |
| | | <MkPrintTemps value={verify.printTempId} onChange={this.onPrintIdChange}/> |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={24}></Col> |
| | | {window.GLOB.process ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="bottomLeft" title="在菜单开启工作流时有效。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 工作流 |
| | | </Tooltip> |
| | | }> |
| | | <Radio.Group value={verify.workFlow} onChange={(e) => {this.onOptionChange(e.target.value, 'workFlow')}}> |
| | | <Radio value="true">开启</Radio> |
| | | <Radio value="false">不开启</Radio> |
| | | </Radio.Group> |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {window.GLOB.process && verify.workFlow === 'true' ? <Col span={8}> |
| | | <Form.Item label="类型"> |
| | | <Radio.Group value={verify.flowType} onChange={(e) => {this.onOptionChange(e.target.value, 'flowType')}}> |
| | | <Radio value="start">发起</Radio> |
| | | <Radio value="approval">审批</Radio> |
| | | <Radio value="reject">驳回</Radio> |
| | | </Radio.Group> |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {window.GLOB.process && verify.workFlow === 'true' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="bottomLeft" title="执行位置在系统默认sql之后。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 默认sql(工作流) |
| | | </Tooltip> |
| | | }> |
| | | <Radio.Group value={verify.flowSql} onChange={(e) => {this.onOptionChange(e.target.value, 'flowSql')}}> |
| | | <Radio value="true">执行</Radio> |
| | | <Radio value="false">不执行</Radio> |
| | | </Radio.Group> |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {window.GLOB.process && verify.workFlow === 'true' && verify.flowType === 'approval' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="bottomLeft" title="如果审批存在多条分支,可添加审批流程的控制字段,通过行信息控制流程走向。注:需在流程图中完善分支的执行条件。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 流程控制 |
| | | </Tooltip> |
| | | }> |
| | | <Select allowClear value={verify.flowBranch} onChange={(val) => {this.onOptionChange(val || '', 'flowBranch')}}> |
| | | {_columns.map(option => |
| | | <Select.Option key={option.field} value={option.field}> |
| | | {option.label} |
| | | </Select.Option> |
| | | )} |
| | | </Select> |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={24}></Col> |
| | | <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="bottomLeft" title={'请在服务器完成公众号配置。'}> |
| | |
| | | <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, index) => <Col span={8} key={'mk' + index}> |
| | | {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="p9">p9</Select.Option> |
| | | <Select.Option value="p10">p10</Select.Option> |
| | | </Select> |
| | | </Form.Item> |
| | | </Col>) : null} |
| | | {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> |
| | | </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: "接收者openid",</p> |
| | | <p>send_id: "防重入id",</p> |
| | | <p>bid: "跳转小程序时,可作为BID。"</p> |
| | | <p style={{color: '#1890ff'}}>请在通用字段中(p1~p10)填入模板中对应的字段名,如 time1.DATA 则填写 time1。</p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </Col> : null} |
| | | </Row> |
| | | </Form> |
| | | ) |