2022-04-26

king

2022-04-26 5046d0d13dc6a8563b8e54e31913bc44cfa1072f

 src/views/mobdesign/menuform/index.jsx

@@ -1,10 +1,13 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Radio, Icon, Tooltip, InputNumber } from 'antd'
import { Form, Row, Col, Input, Radio, Tooltip, InputNumber } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

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

const { TextArea } = Input
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))

class CustomMenuForm extends Component {
@@ -12,6 +15,7 @@
    dict: PropTypes.object, // 字典项
    config: PropTypes.object,
    MenuId: PropTypes.string,
    adapters: PropTypes.array,
    updateConfig: PropTypes.func
  }

@@ -21,15 +25,24 @@
  selectChange = (key, value) => {
    const { config } = this.props

    if (key === 'cacheUseful') {
      this.props.updateConfig({...config, cacheUseful: value})
    } else if (key === 'timeUnit') {
      this.props.updateConfig({...config, timeUnit: value})
    } else if (key === 'advertUrl') {
      this.props.updateConfig({...config, advertUrl: value})
    } else if (key === 'advertTime') {
      this.props.updateConfig({...config, advertTime: value})
    }
    this.props.updateConfig({...config, [key]: value})
    // if (key === 'cacheUseful') {
    //   this.props.updateConfig({...config, cacheUseful: value})
    // } else if (key === 'timeUnit') {
    //   this.props.updateConfig({...config, timeUnit: value})
    // } else if (key === 'advertUrl') {
    //   this.props.updateConfig({...config, advertUrl: value})
    // } else if (key === 'advertTime') {
    //   this.props.updateConfig({...config, advertTime: value})
    // } else if (key === 'pullRefresh') {
    //   this.props.updateConfig({...config, pullRefresh: value})
    // } else if (key === 'statusBarbgColor') {
    //   this.props.updateConfig({...config, statusBarbgColor: value})
    // } else if (key === 'permission') {
    //   this.props.updateConfig({...config, permission: value})
    // } else if (key === 'share') {
    //   this.props.updateConfig({...config, share: value})
    // }
  }

  // 菜单名称
@@ -42,6 +55,10 @@
    this.props.updateConfig({...this.props.config, MenuNo: e.target.value})
  }

  changeRemark = (e) => {
    this.props.updateConfig({...this.props.config, Remark: e.target.value})
  }

  changeCacheDay = (val) => {
    if (typeof(val) !== 'number') {
      val = ''
@@ -50,7 +67,7 @@
  }

  render() {
    const { dict, config } = this.props
    const { dict, config, adapters } = this.props
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
@@ -95,7 +112,7 @@
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="对于不经常性变动的信息，缓存数据有助于提高查询效率。">
                <Icon type="question-circle" />
                <QuestionCircleOutlined className="mk-form-tip" />
                缓存数据
              </Tooltip>
            }>
@@ -112,12 +129,12 @@
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="跳过权限验证时，页面中组件及按钮不在进行权限控制。">
                <Icon type="question-circle" />
                <QuestionCircleOutlined className="mk-form-tip" />
                权限验证
              </Tooltip>
            }>
              {getFieldDecorator('permission', {
                initialValue: config.permission || 'true'
                initialValue: config.permission || 'false'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('permission', e.target.value)}}>
                  <Radio value="true">使用</Radio>
@@ -129,7 +146,7 @@
          <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="使用登录验证后，用户必须登录系统后才可以访问，注：含有登录组件的页面中无效。">
                <Icon type="question-circle" />
                <QuestionCircleOutlined className="mk-form-tip" />
                登录验证
              </Tooltip>
            }>
@@ -171,9 +188,31 @@
            </Form.Item>
          </Col> : null}
          <Col span={24}>
            <Form.Item label="下拉刷新">
              {getFieldDecorator('pullRefresh', {
                initialValue: config.pullRefresh || 'false'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('pullRefresh', e.target.value)}}>
                  <Radio value="false">关闭</Radio>
                  <Radio value="true">开启</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          {adapters.includes('app') || adapters.includes('wxmini') ? <Col span={24}>
            <Form.Item className="status-bar" label={
              <Tooltip placement="topLeft" title="在明科云APP或小程序中，状态栏的背景色。">
                <QuestionCircleOutlined className="mk-form-tip" />
                状态栏
              </Tooltip>
            }>
              <ColorSketch value={config.statusBarbgColor || '#ffffff'} onChange={(val) => {this.selectChange('statusBarbgColor', val)}} />
            </Form.Item>
          </Col> : null}
          {adapters.includes('app') ? <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="在明科云APP中有效。">
                <Icon type="question-circle" />
                <QuestionCircleOutlined className="mk-form-tip" />
                广告页
              </Tooltip>
            }>
@@ -183,9 +222,14 @@
                <SourceComponent type="picture" placement="right" onChange={(val) => {this.selectChange('advertUrl', val)}}/>
              )}
            </Form.Item>
          </Col>
          {config.advertUrl ? <Col span={24}>
            <Form.Item label="停留(s)">
          </Col> : null}
          {adapters.includes('app') && config.advertUrl ? <Col span={24}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="广告页的停留时间。">
                <QuestionCircleOutlined className="mk-form-tip" />
                停留(s)
              </Tooltip>
            }>
              {getFieldDecorator('advertTime', {
                initialValue: config.advertTime || 3,
                rules: [
@@ -199,6 +243,60 @@
              )}
            </Form.Item>
          </Col> : null}
          {adapters.includes('weixin') || adapters.includes('wxmini') ? <Col span={24}>
            <Form.Item label="分享">
              {getFieldDecorator('share', {
                initialValue: config.share || 'default'
              })(
                <Radio.Group onChange={(e) => {this.selectChange('share', e.target.value)}}>
                  <Radio value="default">默认</Radio>
                  <Radio value="custom">自定义</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {config.share === 'custom' && (adapters.includes('weixin') || adapters.includes('wxmini')) ? <Col span={24}>
            <Form.Item label="分享标题">
              {getFieldDecorator('share_title', {
                initialValue: config.share_title || '',
                rules: [
                  {
                    required: true,
                    message: '请输入分享标题!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" onChange={(e) => {this.selectChange('share_title', e.target.value)}}/>)}
            </Form.Item>
          </Col> : null}
          {config.share === 'custom' && (adapters.includes('weixin') || adapters.includes('wxmini')) ? <Col span={24}>
            <Form.Item label="分享描述">
              {getFieldDecorator('share_des', {
                initialValue: config.share_des || ''
              })(<Input placeholder="" autoComplete="off" onChange={(e) => {this.selectChange('share_des', e.target.value)}}/>)}
            </Form.Item>
          </Col> : null}
          {config.share === 'custom' && (adapters.includes('weixin') || adapters.includes('wxmini')) ? <Col span={24}>
            <Form.Item label="分享图片">
              {getFieldDecorator('share_url', {
                initialValue: config.share_url || ''
              })(
                <SourceComponent type="picture" placement="right" onChange={(val) => {this.selectChange('share_url', val)}}/>
              )}
            </Form.Item>
          </Col> : null}
          <Col span={24}>
            <Form.Item label="备注">
              {getFieldDecorator('Remark', {
                initialValue: config.Remark || '',
                rules: [
                  {
                    max: 512,
                    message: '备注最多512个字符！'
                  }
                ]
              })(<TextArea rows={2} placeholder={''} onChange={this.changeRemark} />)}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    )