Merge branch 'master' into positec

king

2025-05-08 b6c698c8833836971184a0a9c2645a15f8174d37

 src/views/menudesign/printmenuform/index.jsx

@@ -1,52 +1,103 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, InputNumber, Select, Radio } from 'antd'
import { Form, Row, Col, InputNumber, Select, Radio, Tooltip, Input, Modal } from 'antd'
import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons'

import './index.scss'
import CodeMirror from '@/templates/zshare/codemirror'
// import './index.scss'

class MainSearch extends Component {
  static propTpyes = {
    dict: PropTypes.object, // 字典项
    config: PropTypes.object,
    updateConfig: PropTypes.func
  }

  changeFirstCount = (val) => {
    if (typeof(val) !== 'number') {
      val = ''
  state = {
    visible: false,
    printScripts: ''
  }

  selectChange = (key, value) => {
    const { config } = this.props

    if (['everyPCount', 'printWidth', 'printHeight'].includes(key)) {
      if (typeof(value) !== 'number') {
        value = ''
      }
    } else if (key === 'callNo') {
      if (!/^[a-zA-Z0-9_]+$/.test(value)) {
        value = ''
      }
    }
    this.props.updateConfig({...this.props.config, firstCount: val})
  }

  changeCount = (val) => {
    if (typeof(val) !== 'number') {
      val = ''
    this.props.updateConfig({...config, [key]: value})

    if (['pageSize', 'pageLayout', 'pagePadding', 'printCustom'].includes(key)) {
      this.resetPage()
    }
    this.props.updateConfig({...this.props.config, everyPCount: val})
  }

  changeLastCount = (val) => {
    if (typeof(val) !== 'number') {
      val = ''
    }
    this.props.updateConfig({...this.props.config, lastCount: val})
  }

  pageSizeChange = (val) => {
    this.props.updateConfig({...this.props.config, pageSize: val})
  }

  onLayoutChange = (val) => {
    this.props.updateConfig({...this.props.config, pageLayout: val})
  }
  resetPage = () => {
    this.setState({}, () => {
      const { config } = this.props
  
  onPaddingChange = (val) => {
    this.props.updateConfig({...this.props.config, pagePadding: val})
      if (config.printCustom !== 'true') return
  
      let pageSize = config.pageSize || 'A4'
      let pageLayout = config.pageLayout !== 'horizontal' ? 'vertical' : 'horizontal'
      let pagePadding = config.pagePadding !== 'without' ? 'default' : 'without'
  
      let pageParam = {
        A4: {
          vertical: 980,
          horizontal: 1200,
          verticaldefault: 1.455,
          verticalwithout: 1.411,
          horizontaldefault: 0.679,
          horizontalwithout: 0.701,
        },
        A3: {
          vertical: 1200,
          horizontal: 1600,
          verticaldefault: 1.441,
          verticalwithout: 1.410,
          horizontaldefault: 0.688,
          horizontalwithout: 0.703,
        },
        A5: {
          vertical: 700,
          horizontal: 1000,
          verticaldefault: 1.478,
          verticalwithout: 1.413,
          horizontaldefault: 0.669,
          horizontalwithout: 0.700,
        }
      }
  
      let width = pageParam[pageSize][pageLayout]
      let height = Math.floor(width * pageParam[pageSize][pageLayout + pagePadding])
  
      this.props.updateConfig({...config, printHeight: height, printWidth: width})
      this.props.form.setFieldsValue({printHeight: height, printWidth: width})
    })
  }

  onScriptChange = (val) => {
    this.setState({printScripts: val})
  }

  submit = () => {
    const { config } = this.props
    const { printScripts } = this.state

    this.setState({visible: false})
    this.props.updateConfig({...config, printScripts})
  }

  render() {
    const { dict, config } = this.props
    const { config } = this.props
    const { getFieldDecorator } = this.props.form
    const { visible, printScripts } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -59,98 +110,235 @@
    }

    return (
      <Form {...formItemLayout} className="print-menu-form">
        <Row>
          <Col span={24}>
            <Form.Item label="打印尺寸">
              {getFieldDecorator('pageSize', {
                initialValue: config.pageSize || 'A4',
                rules: [
                  {
                    required: true,
                    message: dict['mob.required.input'] + '打印尺寸!'
                  }
                ]
              })(
                <Select onChange={this.pageSizeChange}>
                  <Select.Option value="A3">A3</Select.Option>
                  <Select.Option value="A4">A4</Select.Option>
                  <Select.Option value="A5">A5</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="打印布局">
              {getFieldDecorator('pageLayout', {
                initialValue: config.pageLayout || 'vertical',
                rules: [
                  {
                    required: true,
                    message: dict['mob.required.select'] + '打印布局!'
                  }
                ]
              })(
                <Radio.Group onChange={(e) => {this.onLayoutChange(e.target.value)}}>
                  <Radio value="vertical">纵向</Radio>
                  <Radio value="horizontal">横向</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="打印边距">
              {getFieldDecorator('pagePadding', {
                initialValue: config.pagePadding || 'default',
                rules: [
                  {
                    required: true,
                    message: dict['mob.required.select'] + '打印边距!'
                  }
                ]
              })(
                <Radio.Group onChange={(e) => {this.onPaddingChange(e.target.value)}}>
                  <Radio value="default">默认</Radio>
                  <Radio value="without">无</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="首页数(条)">
              {getFieldDecorator('firstCount', {
                initialValue: config.firstCount,
                rules: [
                  {
                    required: true,
                    message: dict['mob.required.input'] + '首页数!'
                  }
                ]
              })(<InputNumber min={1} max={1000} precision={0} onChange={this.changeFirstCount}/>)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="每页数(条)">
              {getFieldDecorator('everyPCount', {
                initialValue: config.everyPCount,
                rules: [
                  {
                    required: true,
                    message: dict['mob.required.input'] + '每页数!'
                  }
                ]
              })(<InputNumber min={1} max={1000} precision={0} onChange={this.changeCount}/>)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="尾页数(条)">
              {getFieldDecorator('lastCount', {
                initialValue: config.lastCount
              })(<InputNumber min={1} max={1000} precision={0} onChange={this.changeLastCount}/>)}
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <>
        <Form {...formItemLayout}>
          <Row>
            <Col span={24}>
              <Form.Item label="菜单名称">
                <span style={{display: 'inline-block', wordBreak: 'break-all', lineHeight: 1.5}}>
                  {config.MenuName}
                </span>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="菜单参数">
                <span style={{display: 'inline-block', wordBreak: 'break-all', lineHeight: 1.5}}>
                  {config.MenuNo}
                </span>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="打印尺寸">
                {getFieldDecorator('pageSize', {
                  initialValue: config.pageSize || 'A4',
                  rules: [
                    {
                      required: true,
                      message: '请选择打印尺寸!'
                    }
                  ]
                })(
                  <Select onChange={(val) => this.selectChange('pageSize', val)}>
                    <Select.Option value="A3">A3</Select.Option>
                    <Select.Option value="A4">A4</Select.Option>
                    <Select.Option value="A5">A5</Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="打印布局">
                {getFieldDecorator('pageLayout', {
                  initialValue: config.pageLayout || 'vertical',
                  rules: [
                    {
                      required: true,
                      message: '请选择打印布局!'
                    }
                  ]
                })(
                  <Radio.Group onChange={(e) => this.selectChange('pageLayout', e.target.value)}>
                    <Radio value="vertical">纵向</Radio>
                    <Radio value="horizontal">横向</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="打印边距">
                {getFieldDecorator('pagePadding', {
                  initialValue: config.pagePadding || 'default',
                  rules: [
                    {
                      required: true,
                      message: '请选择打印边距!'
                    }
                  ]
                })(
                  <Radio.Group onChange={(e) => this.selectChange('pagePadding', e.target.value)}>
                    <Radio value="default">默认</Radio>
                    <Radio value="without">无</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="页面布局">
                {getFieldDecorator('printPage', {
                  initialValue: config.printPage || 'auto'
                })(
                  <Radio.Group className="mini-radio" onChange={(e) => this.selectChange('printPage', e.target.value)}>
                    <Radio value="auto">自适应</Radio>
                    <Radio value="page">分页</Radio>
                    <Radio value="custom">自定义</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            {config.printPage === 'custom' ? <Col span={24}>
              <Form.Item label="自定义脚本">
                <EditOutlined style={{color: '#1890ff'}} onClick={() => this.setState({visible: true, printScripts: config.printScripts || ''})} />
              </Form.Item>
            </Col> : null}
            {config.printPage === 'page' ? <Col span={24}>
              <Form.Item label="每页数(条)">
                {getFieldDecorator('everyPCount', {
                  initialValue: config.everyPCount || 15,
                  rules: [
                    {
                      required: true,
                      message: '请输入每页数!'
                    }
                  ]
                })(<InputNumber min={1} max={1000} precision={1} onChange={(val) => this.selectChange('everyPCount', val)}/>)}
              </Form.Item>
            </Col> : null}
            <Col span={24}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="针对不规则纸张，可自定义设置打印高度和宽度，注：同时设置打印宽度和高度后方可生效。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  自定义
                </Tooltip>
              }>
                {getFieldDecorator('printCustom', {
                  initialValue: config.printCustom || 'false'
                })(
                  <Radio.Group onChange={(e) => this.selectChange('printCustom', e.target.value)}>
                    <Radio value="false">不启用</Radio>
                    <Radio value="true">启用</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            {config.printCustom === 'true' ? <Col span={24}>
              <Form.Item label="打印宽度">
                {getFieldDecorator('printWidth', {
                  initialValue: config.printWidth || ''
                })(<InputNumber min={10} max={9999} precision={0} onChange={(val) => this.selectChange('printWidth', val)}/>)}
              </Form.Item>
            </Col> : null}
            {config.printCustom === 'true' ? <Col span={24}>
              <Form.Item label="打印高度">
                {getFieldDecorator('printHeight', {
                  initialValue: config.printHeight || ''
                })(<InputNumber min={10} max={9999} precision={0} onChange={(val) => this.selectChange('printHeight', val)}/>)}
              </Form.Item>
            </Col> : null}
            <Col span={24}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="启用时，在菜单完成数据加载后自动触发打印预览。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  自动打印
                </Tooltip>
              }>
                {getFieldDecorator('autoExec', {
                  initialValue: config.autoExec || 'false'
                })(
                  <Radio.Group onChange={(e) => this.selectChange('autoExec', e.target.value)}>
                    <Radio value="false">不启用</Radio>
                    <Radio value="true">启用</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            {config.autoExec === 'true' ? <Col span={24}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="自动触发打印预览的延迟时间，单位毫秒。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  延迟时间
                </Tooltip>
              }>
                {getFieldDecorator('autoExecSplit', {
                  initialValue: config.autoExecSplit || 500
                })(<InputNumber min={1} max={9999} precision={0} onChange={(val) => this.selectChange('autoExecSplit', val)}/>)}
              </Form.Item>
            </Col> : null}
            <Col span={24}>
              <Form.Item label="回调">
                {getFieldDecorator('callback', {
                  initialValue: config.callback || 'false'
                })(
                  <Radio.Group onChange={(e) => this.selectChange('callback', e.target.value)}>
                    <Radio value="false">不启用</Radio>
                    <Radio value="true">启用</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            {config.callback === 'true' ? <Col span={24}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="回调函数执行成功后默认会刷新源菜单页，返回信息（@retmsg）中含有（@no_target_menu@）可阻止此项刷新。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  回调函数
                </Tooltip>
              }>
                s_print_proc <EditOutlined style={{cursor: 'pointer'}} onClick={() => {window.open('#/proc/s_print_proc')}}/>
              </Form.Item>
            </Col> : null}
            {config.callback === 'true' ? <Col span={24}>
              <Form.Item label="回调参数">
                {getFieldDecorator('callNo', {
                  initialValue: config.callNo || '',
                  rules: [
                    {
                      required: true,
                      message: '请填写回调参数!'
                    },
                    {
                      pattern: /^[a-zA-Z0-9_]+$/,
                      message: '回调参数只可使用字母、数字以及_'
                    }
                  ]
                })(<Input onChange={(e) => this.selectChange('callNo', e.target.value)}/>)}
              </Form.Item>
            </Col> : null}
            <Col span={24}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="可自定义在浏览器标题栏中显示的网页标题。">
                  <QuestionCircleOutlined className="mk-form-tip" />
                  网页标题
                </Tooltip>
              }>
                {getFieldDecorator('webTitle', {
                  initialValue: config.webTitle || ''
                })(<Input onChange={(e) => this.selectChange('webTitle', e.target.value)}/>)}
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <Modal
          title="自定义脚本"
          wrapClassName="normal-css-modal"
          visible={visible}
          width={800}
          maskClosable={false}
          onOk={this.submit}
          onCancel={() => { this.setState({ visible: false })}}
          destroyOnClose
        >
          <CodeMirror mode="text/javascript" theme="cobalt" value={printScripts} onChange={this.onScriptChange} />
        </Modal>
      </>
    )
  }
}