2024-08-03

king

2024-08-03 5b166dd93003adb0749002d74109a519f746e204

 src/views/appmanage/submutilform/index.jsx

@@ -3,6 +3,7 @@
import { Form, Row, Col, Select, Radio, Input, Tooltip, InputNumber, Checkbox } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

import { langs } from '@/store/options.js'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

@@ -16,17 +17,33 @@
    inputSubmit: PropTypes.func  // input回车提交
  }

  state = {typename: 'mob', adapters: [], exts: []}
  state = {
    typename: 'mob',
    adapters: [],
    exts: [],
    WXApps: null,
    WXMerchs: null
  }

  UNSAFE_componentWillMount() {
    const { card } = this.props
    let adapters = []
    let exts = []
    let typename = 'mob'
    let _langs = []
    Object.keys(langs).forEach(key => {
      _langs.push({value: key, label: langs[key]})
    })

    if (card) {
      typename = card.typename || 'mob'
      adapters = card.adapter ? card.adapter.split(',') : []

      if (!adapters.includes('fbdH5')) {
        adapters.unshift('H5')
      }

      adapters = adapters.filter(n => n !== 'fbdH5')

      if (typename !== 'pc') {
        if (card.user_binding === 'true') {
@@ -36,9 +53,26 @@
          exts.push('share')
        }
      }
    } else {
      adapters = ['H5']
    }

    this.setState({typename, adapters, exts})
    let WXApps = null
    let WXMerchs = null
    if (window.GLOB.WXApps) {
      WXApps = window.GLOB.WXApps.filter(app => app.appType === 'public')

      if (WXApps.length === 0) {
        WXApps = null
      }
      WXMerchs = window.GLOB.WXApps.filter(app => app.appType === 'merchant')

      if (WXMerchs.length === 0) {
        WXMerchs = null
      }
    }

    this.setState({typename, adapters, exts, langs: _langs, WXApps, WXMerchs})
  }

  /**
@@ -48,12 +82,26 @@
    return new Promise(resolve => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          if (values.adapter) {
            if (!values.adapter.includes('H5')) {
              values.adapter.unshift('fbdH5')
            }
          }

          values.adapter = values.adapter ? values.adapter.join(',') : ''

          if (values.exts) {
            values.user_binding = values.exts.includes('user_binding') ? 'true' : 'false'
            values.share = values.exts.includes('share') ? 'true' : 'false'
            delete values.exts
          }
          if (values.wxAppId) {
            let app = window.GLOB.WXApps.filter(app => app.appType === 'public' && values.wxAppId === app.appId)[0]
            values.wxAppName = app ? app.appName : values.wxAppId
          }
          if (values.wxMerchId) {
            let app = window.GLOB.WXApps.filter(app => app.appType === 'merchant' && values.wxMerchId === app.appId)[0]
            values.wxMerchName = app ? app.appName : values.wxMerchId
          }

          resolve(values)
@@ -80,7 +128,7 @@
  render() {
    const { card, type } = this.props
    const { getFieldDecorator } = this.props.form
    const { typename, adapters, exts } = this.state
    const { typename, adapters, exts, langs, WXApps, WXMerchs } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -113,10 +161,9 @@
              {getFieldDecorator('lang', {
                initialValue: card ? card.lang || 'zh-CN' : 'zh-CN'
              })(
                <Radio.Group disabled={type === 'edit'}>
                  <Radio value="zh-CN">中文</Radio>
                  <Radio value="en-US">英文</Radio>
                </Radio.Group>
                <Select disabled={type === 'edit'}>
                  {langs.map(item => <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>)}
                </Select>
              )}
            </Form.Item>
          </Col>
@@ -138,20 +185,21 @@
                initialValue: card ? card.css : 'bg_black_style_blue'
              })(
                <Select>
                  <Select.Option value="bg_black_style_blue"><span className="color-block" style={{background: '#1890ff'}}></span>蓝色</Select.Option>
                  <Select.Option value="bg_black_style_red"><span className="color-block" style={{background: '#f5222d'}}></span>红色</Select.Option>
                  <Select.Option value="bg_black_style_orange_red"><span className="color-block" style={{background: '#fa541c'}}></span>橙红色</Select.Option>
                  <Select.Option value="bg_black_style_orange"><span className="color-block" style={{background: '#fa8c16'}}></span>橙色</Select.Option>
                  <Select.Option value="bg_black_style_orange_yellow"><span className="color-block" style={{background: '#faad14'}}></span>橙黄色</Select.Option>
                  <Select.Option value="bg_black_style_yellow"><span className="color-block" style={{background: '#fadb14'}}></span>黄色</Select.Option>
                  <Select.Option value="bg_black_style_yellow_green"><span className="color-block" style={{background: '#a0d911'}}></span>黄绿色</Select.Option>
                  <Select.Option value="bg_black_style_green"><span className="color-block" style={{background: '#52c41a'}}></span>绿色</Select.Option>
                  <Select.Option value="bg_black_style_cyan"><span className="color-block" style={{background: '#13c2c2'}}></span>青色</Select.Option>
                  <Select.Option value="bg_black_style_blue_purple"><span className="color-block" style={{background: '#2f54eb'}}></span>蓝紫色</Select.Option>
                  <Select.Option value="bg_black_style_purple"><span className="color-block" style={{background: '#722ed1'}}></span>紫色</Select.Option>
                  <Select.Option value="bg_black_style_magenta"><span className="color-block" style={{background: '#eb2f96'}}></span>洋红色</Select.Option>
                  <Select.Option value="bg_black_style_grass_green"><span className="color-block" style={{background: '#aeb303'}}></span>草绿色</Select.Option>
                  <Select.Option value="bg_black_style_deep_red"><span className="color-block" style={{background: '#c32539'}}></span>深红色</Select.Option>
                  <Select.Option value="bg_black_style_blue"><span className="color-block" style={{background: '#1890ff'}}></span>蓝色（#1890ff）</Select.Option>
                  <Select.Option value="bg_black_style_red"><span className="color-block" style={{background: '#f5222d'}}></span>红色（#f5222d）</Select.Option>
                  <Select.Option value="bg_black_style_orange_red"><span className="color-block" style={{background: '#fa541c'}}></span>橙红色（#fa541c）</Select.Option>
                  <Select.Option value="bg_black_style_orange"><span className="color-block" style={{background: '#fa8c16'}}></span>橙色（#fa8c16）</Select.Option>
                  <Select.Option value="bg_black_style_orange_yellow"><span className="color-block" style={{background: '#faad14'}}></span>橙黄色（#faad14）</Select.Option>
                  <Select.Option value="bg_black_style_yellow"><span className="color-block" style={{background: '#fadb14'}}></span>黄色（#fadb14）</Select.Option>
                  <Select.Option value="bg_black_style_yellow_green"><span className="color-block" style={{background: '#a0d911'}}></span>黄绿色（#a0d911）</Select.Option>
                  <Select.Option value="bg_black_style_green"><span className="color-block" style={{background: '#52c41a'}}></span>绿色（#52c41a）</Select.Option>
                  <Select.Option value="bg_black_style_cyan"><span className="color-block" style={{background: '#13c2c2'}}></span>青色（#13c2c2）</Select.Option>
                  <Select.Option value="bg_black_style_blue_purple"><span className="color-block" style={{background: '#2f54eb'}}></span>蓝紫色（#2f54eb）</Select.Option>
                  <Select.Option value="bg_black_style_purple"><span className="color-block" style={{background: '#722ed1'}}></span>紫色（#722ed1）</Select.Option>
                  <Select.Option value="bg_black_style_magenta"><span className="color-block" style={{background: '#eb2f96'}}></span>洋红色（#eb2f96）</Select.Option>
                  <Select.Option value="bg_black_style_grass_green"><span className="color-block" style={{background: '#aeb303'}}></span>草绿色（#aeb303）</Select.Option>
                  <Select.Option value="bg_black_style_deep_red"><span className="color-block" style={{background: '#c32539'}}></span>深红色（#c32539）</Select.Option>
                  <Select.Option value="bg_black_style_deep_blue"><span className="color-block" style={{background: '#1d3661'}}></span>深蓝色（#1d3661）</Select.Option>
                </Select>
              )}
            </Form.Item>
@@ -162,10 +210,43 @@
                initialValue: adapters
              })(
                <Checkbox.Group onChange={this.onAdapterChange}>
                  <Checkbox value="H5">H5</Checkbox>
                  <Checkbox value="app">app</Checkbox>
                  <Checkbox value="weixin">公众号</Checkbox>
                  <Checkbox value="wxmini">小程序</Checkbox>
                </Checkbox.Group>
              )}
            </Form.Item>
          </Col> : null}
          {WXApps ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="用户可通过此公众号进行支付、退款、授权登录。">
                <QuestionCircleOutlined className="mk-form-tip" />
                关联应用
              </Tooltip>
            }>
              {getFieldDecorator('wxAppId', {
                initialValue: card ? card.wxAppId : ''
              })(
                <Select allowClear>
                  {WXApps.map(item => <Select.Option key={item.appId} value={item.appId}>{item.appName}</Select.Option>)}
                </Select>
              )}
            </Form.Item>
          </Col> : null}
          {WXMerchs ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="用户可通过此商户号进行支付及退款。">
                <QuestionCircleOutlined className="mk-form-tip" />
                关联商户
              </Tooltip>
            }>
              {getFieldDecorator('wxMerchId', {
                initialValue: card ? card.wxMerchId : ''
              })(
                <Select allowClear>
                  {WXMerchs.map(item => <Select.Option key={item.appId} value={item.appId}>{item.appName}</Select.Option>)}
                </Select>
              )}
            </Form.Item>
          </Col> : null}
@@ -295,7 +376,7 @@
            <Form.Item label={
              <Tooltip placement="topLeft" title="在使用明科云APP时，状态栏的字体颜色。">
                <QuestionCircleOutlined className="mk-form-tip" />
                状态栏
                状态栏文字
              </Tooltip>
            }>
              {getFieldDecorator('statusBarColor', {
@@ -306,6 +387,18 @@
                  <Radio value="white">白色</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {typename === 'pad' && adapters.includes('app') ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="在明科云APP中，状态栏的最大高度，空值时使用APP获取到的状态栏高度。">
                <QuestionCircleOutlined className="mk-form-tip" />
                状态栏高度
              </Tooltip>
            }>
              {getFieldDecorator('topHeight', {
                initialValue: card ? card.topHeight || '' : ''
              })(<InputNumber min={0} max={5000} precision={0} onPressEnter={this.handleSubmit}/>)}
            </Form.Item>
          </Col> : null}
          <Col span={12}>
@@ -322,6 +415,23 @@
              )}
            </Form.Item>
          </Col>
          {typename === 'pad' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="系统默认屏幕方向，单个页面方向请在页面中配置。">
                <QuestionCircleOutlined className="mk-form-tip" />
                屏幕方向
              </Tooltip>
            }>
              {getFieldDecorator('direction', {
                initialValue: card ? card.direction || 'vertical' : 'vertical'
              })(
                <Radio.Group>
                  <Radio value="vertical">竖屏</Radio>
                  <Radio value="horizontal">横屏</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
        </Row>
      </Form>
    )