2023-01-07

king

2023-01-07 5b66fe77e55767eabbf1df66a026157356dd807d

 src/views/appmanage/submutilform/index.jsx

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

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

const FileUpload = asyncComponent(() => import('@/tabviews/zshare/fileupload'))
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))

class MainSearch extends Component {
  static propTpyes = {
@@ -14,7 +16,30 @@
    inputSubmit: PropTypes.func  // input回车提交
  }

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

  UNSAFE_componentWillMount() {
    const { card } = this.props
    let adapters = []
    let exts = []
    let typename = 'mob'

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

      if (typename !== 'pc') {
        if (card.user_binding === 'true') {
          exts.push('user_binding')
        }
        if (card.share === 'true') {
          exts.push('share')
        }
      }
    }

    this.setState({typename, adapters, exts})
  }

  /**
   * @description 获取表单值
@@ -23,10 +48,25 @@
    return new Promise(resolve => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          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
          }

          resolve(values)
        }
      })
    })
  }

  onAdapterChange = (vals) => {
    if (!vals.includes('weixin') && !vals.includes('wxmini')) {
      this.setState({exts: []})
    }
    this.setState({adapters: vals})
  }

  /**
@@ -40,6 +80,7 @@
  render() {
    const { card, type } = this.props
    const { getFieldDecorator } = this.props.form
    const { typename, adapters, exts } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -51,22 +92,17 @@
      }
    }

    let file = ''

    if (type === 'edit' && card && card.favicon) {
      file = card.favicon
    }

    return (
      <Form {...formItemLayout} className="mob-card-edit-form">
      <Form {...formItemLayout} className="sub-app-edit-form">
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item label="应用类型">
              {getFieldDecorator('typename', {
                initialValue: card ? card.typename : 'mob'
                initialValue: typename
              })(
                <Select disabled={type === 'edit'}>
                  <Select.Option value="mob">移动端(包括android、ios)</Select.Option>
                <Select disabled={type === 'edit'} onChange={(val) => this.setState({typename: val})}>
                  <Select.Option value="mob">移动端</Select.Option>
                  <Select.Option value="pad">Pad端</Select.Option>
                  <Select.Option value="pc">PC端</Select.Option>
                </Select>
              )}
@@ -85,33 +121,9 @@
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="登录">
              {getFieldDecorator('login_types', {
                initialValue: card ? card.login_types || 'true' : 'true'
              })(
                <Radio.Group>
                  <Radio value="true">需要</Radio>
                  <Radio value="false">不需要</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="权限管理">
              {getFieldDecorator('role_type', {
                initialValue: card ? card.role_type || 'true' : 'true'
              })(
                <Radio.Group>
                  <Radio value="true">启用</Radio>
                  <Radio value="false">不启用</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="短连接">
              {getFieldDecorator('link_type', {
                initialValue: card ? card.link_type || 'true' : 'true'
                initialValue: card ? card.role_type || 'false' : 'false'
              })(
                <Radio.Group>
                  <Radio value="true">启用</Radio>
@@ -126,57 +138,208 @@
                initialValue: card ? card.css : 'bg_black_style_blue'
              })(
                <Select>
                  <Select.Option value="bg_black_style_blue">蓝黑色系</Select.Option>
                  <Select.Option value="bg_white_style_blue">蓝白色系</Select.Option>
                  <Select.Option value="bg_black_style_red">红黑色系</Select.Option>
                  <Select.Option value="bg_white_style_red">红白色系</Select.Option>
                  <Select.Option value="bg_black_style_orange_red">橙红黑色系</Select.Option>
                  <Select.Option value="bg_white_style_orange_red">橙红白色系</Select.Option>
                  <Select.Option value="bg_black_style_orange">橙黑色系</Select.Option>
                  <Select.Option value="bg_white_style_orange">橙白色系</Select.Option>
                  <Select.Option value="bg_black_style_orange_yellow">橙黄黑色系</Select.Option>
                  <Select.Option value="bg_white_style_orange_yellow">橙黄白色系</Select.Option>
                  <Select.Option value="bg_black_style_yellow">黄黑色系</Select.Option>
                  <Select.Option value="bg_white_style_yellow">黄白色系</Select.Option>
                  <Select.Option value="bg_black_style_yellow_green">黄绿黑色系</Select.Option>
                  <Select.Option value="bg_white_style_yellow_green">黄绿白色系</Select.Option>
                  <Select.Option value="bg_black_style_green">绿黑色系</Select.Option>
                  <Select.Option value="bg_white_style_green">绿白色系</Select.Option>
                  <Select.Option value="bg_black_style_cyan">青黑色系</Select.Option>
                  <Select.Option value="bg_white_style_cyan">青白色系</Select.Option>
                  <Select.Option value="bg_black_style_blue_purple">蓝紫黑色系</Select.Option>
                  <Select.Option value="bg_white_style_blue_purple">蓝紫白色系</Select.Option>
                  <Select.Option value="bg_black_style_purple">紫黑色系</Select.Option>
                  <Select.Option value="bg_white_style_purple">紫白色系</Select.Option>
                  <Select.Option value="bg_black_style_magenta">洋红黑色系</Select.Option>
                  <Select.Option value="bg_white_style_magenta">洋红白色系</Select.Option>
                  <Select.Option value="bg_black_style_grass_green">草绿黑色系</Select.Option>
                  <Select.Option value="bg_white_style_grass_green">草绿白色系</Select.Option>
                  <Select.Option value="bg_black_style_deep_red">深红黑色系</Select.Option>
                  <Select.Option value="bg_white_style_deep_red">深红白色系</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>
          </Col>
          {typename !== 'pc' ? <Col span={12}>
            <Form.Item label="适配">
              {getFieldDecorator('adapter', {
                initialValue: adapters
              })(
                <Checkbox.Group onChange={this.onAdapterChange}>
                  <Checkbox value="app">app</Checkbox>
                  <Checkbox value="weixin">公众号</Checkbox>
                  <Checkbox value="wxmini">小程序</Checkbox>
                </Checkbox.Group>
              )}
            </Form.Item>
          </Col> : null}
          {typename !== 'pc' && (adapters.includes('weixin') || adapters.includes('wxmini')) ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="在公众号或小程序中，可添加绑定系统用户、自定义分享等功能，自定义分享设置后，当前子应用将默认使用此分享链接。">
                <QuestionCircleOutlined className="mk-form-tip" />
                扩展功能
              </Tooltip>
            }>
              {getFieldDecorator('exts', {
                initialValue: exts
              })(
                <Checkbox.Group onChange={(vals) => this.setState({exts: vals})}>
                  <Checkbox value="user_binding">用户绑定</Checkbox>
                  <Checkbox value="share">分享</Checkbox>
                </Checkbox.Group>
              )}
            </Form.Item>
          </Col> : null}
          {/* {typename !== 'pc' && (adapters.includes('weixin') || adapters.includes('wxmini')) ? <Col span={12}>
            <Form.Item label="用户绑定">
              {getFieldDecorator('user_binding', {
                initialValue: card ? card.user_binding : 'false'
              })(
                <Radio.Group>
                  <Radio value="true">需要</Radio>
                  <Radio value="false">不需要</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null} */}
          <Col span={12}>
            <Form.Item label="标题">
            <Form.Item label={
              exts.includes('share') ?
              <Tooltip placement="topLeft" title="子应用及分享时的标题。">
                <QuestionCircleOutlined className="mk-form-tip" />
                标题
              </Tooltip> : '标题'
            }>
              {getFieldDecorator('title', {
                initialValue: card ? card.title || '' : ''
                initialValue: card ? card.title || '' : '',
                rules: exts.includes('share') ? [{
                  required: true,
                  message: '请填写标题!'
                }] : []
              })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col>
          {exts.includes('share') ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="分享时的描述信息。">
                <QuestionCircleOutlined className="mk-form-tip" />
                分享描述
              </Tooltip>
            }>
              {getFieldDecorator('share_des', {
                initialValue: card ? card.share_des || '' : ''
              })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col> : null}
          {exts.includes('share') ? <Col span={12}>
            <Form.Item label="分享图片">
              {getFieldDecorator('share_url', {
                initialValue: card ? card.share_url : ''
              })(
                <SourceComponent type="picture" placement="right"/>
              )}
            </Form.Item>
          </Col> : null}
          {exts.includes('share') ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="分享的链接为用户浏览的页面地址或当前应用的入口地址。注：可在页面中自定义设置。">
                <QuestionCircleOutlined className="mk-form-tip" />
                分享链接
              </Tooltip>
            }>
              {getFieldDecorator('share_link', {
                initialValue: card ? card.share_link || 'main' : 'main'
              })(
                <Radio.Group>
                  <Radio value="main">应用入口</Radio>
                  <Radio value="view">页面链接</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          <Col span={12}>
            <Form.Item label="图标">
            <Form.Item label="网站头像">
              {getFieldDecorator('favicon', {
                initialValue: file
              })(<FileUpload config={{
                initval: file,
                suffix: '.jpg,.png,.gif,.pjp,.pjpeg,.jpeg,.jfif,.webp,.ico',
                maxfile: 1,
                fileType: 'text'
              }}/>)}
                initialValue: card ? card.favicon : ''
              })(
                <SourceComponent type="picture" placement="right"/>
              )}
            </Form.Item>
          </Col>
          {typename !== 'pc' && adapters.includes('app') ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="在使用明科云APP时，页面的切换模式。注：苹果APP暂不支持H5模式。">
                <QuestionCircleOutlined className="mk-form-tip" />
                应用模式
              </Tooltip>
            }>
              {getFieldDecorator('apptype', {
                initialValue: card ? card.apptype || 'H5' : 'H5'
              })(
                <Radio.Group>
                  <Radio value="H5">H5</Radio>
                  <Radio value="app">app</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          {typename !== 'pc' ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="在使用小程序或明科云APP时（app模式中）无效">
                <QuestionCircleOutlined className="mk-form-tip" />
                延迟加载(ms)
              </Tooltip>
            }>
              {getFieldDecorator('delay', {
                initialValue: card ? card.delay || 0 : 200
              })(<InputNumber min={0} max={5000} precision={0} onPressEnter={this.handleSubmit}/>)}
            </Form.Item>
          </Col> : null}
          {typename !== 'pc' && adapters.includes('app') ? <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="在使用明科云APP时，状态栏的字体颜色。">
                <QuestionCircleOutlined className="mk-form-tip" />
                状态栏
              </Tooltip>
            }>
              {getFieldDecorator('statusBarColor', {
                initialValue: card ? card.statusBarColor || 'black' : 'black'
              })(
                <Radio.Group>
                  <Radio value="black">黑色</Radio>
                  <Radio value="white">白色</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Col> : null}
          <Col span={12}>
            <Form.Item className="sys-bgcolor" label={
              <Tooltip placement="topLeft" title="子应用通用的背景色，子应用页面创建时会默认添加此背景色。">
                <QuestionCircleOutlined className="mk-form-tip" />
                背景色
              </Tooltip>
            }>
              {getFieldDecorator('sysBgColor', {
                initialValue: card ? card.sysBgColor || '#ffffff' : '#ffffff'
              })(
                <ColorSketch/>
              )}
            </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>
    )