2022-04-01

king

2022-04-01 1ea9fe09a611dea3a05131e349a8e8dd46adcf6a

2022-04-01

 src/components/normalform/modalform/index.jsx

@@ -263,7 +263,7 @@
      } else if (item.type === 'source') {
        content = (<SourceComponent type="" placement="right"/>)
      } else if (item.type === 'table') {
        content = (<MKTable columns={item.columns || []}/>)
        content = (<MKTable columns={item.columns || []} actions={item.actions || []}/>)
      }

      if (!content) return

 src/components/normalform/modalform/mkTable/index.jsx

@@ -3,9 +3,10 @@
import { fromJS } from 'immutable'
import { DndProvider, DragSource, DropTarget } from 'react-dnd'
import { Table, Input, InputNumber, Popconfirm, Form, Select, Radio, Cascader, notification, Typography, Button } from 'antd'
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { PlusOutlined, EditOutlined, DeleteOutlined, ArrowRightOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import MKEmitter from '@/utils/events.js'
import ColorSketch from '@/mob/colorsketch'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'
@@ -165,6 +166,7 @@
  }

  UNSAFE_componentWillMount () {
    let actions = this.props.actions || []
    let columns = fromJS(this.props.columns).toJS()

    let operation = {
@@ -196,6 +198,7 @@
              <span className="danger"><DeleteOutlined /></span>
            </Popconfirm> : null}
            {editingKey !== '' ? <span className="danger"><DeleteOutlined /></span> : null}
            {actions.includes('view') ? <span className="copy" onClick={() => {editingKey === '' && this.changeMenu(record.menu)}}><ArrowRightOutlined /></span> : null}
          </div>
        )
      }
@@ -214,6 +217,24 @@
  //   return !is(fromJS(this.state), fromJS(nextState))
  // }

  changeMenu = (MenuId) => {
    if (MenuId === 'IM') {
      if (!sessionStorage.getItem('instantMessage')) return

      let param = {
        MenuID: sessionStorage.getItem('instantMessage'),
        copyMenuId: '',
        type: 'view'
      }
  
      param = window.btoa(window.encodeURIComponent(JSON.stringify(param)))
  
      MKEmitter.emit('changeEditMenu', {routerUrl: '/imdesign/' + param})
    } else {
      MKEmitter.emit('changeEditMenu', {MenuID: MenuId})
    }
  }

  isEditing = record => record.uuid === this.state.editingKey

  cancel = () => {

 src/menu/components/card/cardcellcomponent/dragaction/card.jsx

@@ -164,7 +164,8 @@
  }

  let able = true
  if ((appType === 'mob' || appType === 'pc') && parent && (parent.setting.click === 'menu' || parent.setting.click === 'menus')) {
  // if ((appType === 'mob' || appType === 'pc') && parent && (parent.setting.click === 'menu' || parent.setting.click === 'menus')) {
  if ((appType === 'mob' || appType === 'pc') && parent && parent.setting.click === 'menu') {
    able = false
  }


 src/menu/components/card/cardcomponent/index.jsx

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover, Switch, Col, Modal, Button } from 'antd'
import { Popover, Switch, Col } from 'antd'
import { PlusOutlined, PlusSquareOutlined, EditOutlined, ArrowLeftOutlined, ArrowRightOutlined, SwapOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons'

import asyncComponent from '@/utils/asyncComponent'
@@ -33,7 +33,6 @@
    elements: null,        // 编辑组
    side: 'front',
    appType: sessionStorage.getItem('appType'),
    visible: false
  }

  /**
@@ -277,8 +276,7 @@
  }

  doubleClickCard = () => {
    const { cards } = this.props
    const { card, appType } = this.state
    const { card } = this.state

    if (card.setting.click === 'menu' && card.setting.menu) {
      if (['IM'].includes(card.setting.menu)) {
@@ -296,32 +294,12 @@
      } else {
        MKEmitter.emit('changeEditMenu', {MenuID: card.setting.menu})
      }
    } else if (card.setting.click === 'menus' && card.menus && card.menus.length > 0 && cards.subtype === 'datacard' && appType) {
      this.setState({visible: true})
    }
  }

  changeMenu = (MenuId) => {
    if (MenuId === 'IM') {
      if (!sessionStorage.getItem('instantMessage')) return

      let param = {
        MenuID: sessionStorage.getItem('instantMessage'),
        copyMenuId: '',
        type: 'view'
      }
  
      param = window.btoa(window.encodeURIComponent(JSON.stringify(param)))
  
      MKEmitter.emit('changeEditMenu', {routerUrl: '/imdesign/' + param})
    } else {
      MKEmitter.emit('changeEditMenu', {MenuID: MenuId})
    }
  }

  render() {
    const { cards, offset } = this.props
    const { card, elements, side, visible } = this.state
    const { card, elements, side } = this.state

    let _style = {...card.style}

@@ -368,31 +346,6 @@
            </Popover>
          </div>
        </div>
        <Modal
          title="菜单组"
          wrapClassName="menus-detail-modal"
          visible={visible}
          closable={false}
          width={900}
          maskClosable={false}
          footer={[<Button key="close" onClick={() => { this.setState({ visible: false })}}>关闭</Button>]}
          destroyOnClose
        >
          <div className="menu-line">
            <div className="sort">序号</div>
            <div className="sign">标识</div>
            <div className="name">菜单</div>
            <div className="action">操作</div>
          </div>
          {card.menus && card.menus.map((item, index) => {
            return <div className="menu-line" key={index}>
              <div className="sort">{index + 1}</div>
              <div className="sign">{item.sign}</div>
              <div className="name">{item.label}</div>
              <div className="action"><span onClick={() => this.changeMenu(item.menu)}>详情</span></div>
            </div>
          })}
        </Modal>
      </Col>
    )
  }

 src/menu/components/card/cardcomponent/options.jsx

@@ -210,6 +210,7 @@
      initval: menus,
      required: true,
      span: 24,
      actions: ['view'],
      columns: [
        {
          title: '标识',

 src/menu/components/form/normal-form/index.jsx

@@ -193,7 +193,21 @@
  }

  getStyle = (comIds, style) => {
    const { card } = this.state
    const { card, group } = this.state

    if (comIds[0] === 'form') {
      let Index = group.fields.findIndex(n => n.uuid === comIds[1])

      if (Index === -1) return
      
      let _group = fromJS(group).toJS()

      _group.fields[Index].style = style

      this.updateGroup(_group)

      return
    }

    if (comIds.length !== 1 || comIds[0] !== card.uuid) return

@@ -553,6 +567,9 @@
        }

        if (item.uuid === res.uuid) {
          if (item.style) {
            res.style = item.style
          }
          return res
        } else {
          return item

 src/menu/components/form/tab-form/index.jsx

@@ -205,7 +205,21 @@
  }

  getStyle = (comIds, style) => {
    const { card } = this.state
    const { card, group } = this.state

    if (comIds[0] === 'form') {
      let Index = group.fields.findIndex(n => n.uuid === comIds[1])

      if (Index === -1) return
      
      let _group = fromJS(group).toJS()

      _group.fields[Index].style = style

      this.updateGroup(_group)

      return
    }

    if (comIds.length !== 1 || comIds[0] !== card.uuid) return

@@ -560,6 +574,9 @@
        }

        if (item.uuid === res.uuid) {
          if (item.style) {
            res.style = item.style
          }
          return res
        } else {
          return item

 src/menu/modalconfig/index.jsx

@@ -66,6 +66,7 @@

  componentDidMount () {
    MKEmitter.addListener('completeSave', this.completeSave)
    MKEmitter.addListener('submitStyle', this.getStyle)
  }

  /**
@@ -76,6 +77,7 @@
      return
    }
    MKEmitter.removeListener('completeSave', this.completeSave)
    MKEmitter.removeListener('submitStyle', this.getStyle)
  }

  /**
@@ -207,6 +209,24 @@
    })
  }

  getStyle = (comIds, style) => {
    const { config } = this.state

    if (comIds[0] !== 'form') return

    let Index = config.fields.findIndex(n => n.uuid === comIds[1])

    if (Index === -1) return
    
    let _config = fromJS(config).toJS()

    _config.fields[Index].style = style

    this.setState({
      config: _config
    })
  }

  /**
   * @description 编辑后提交
   * 1、获取编辑后的表单信息
@@ -224,6 +244,9 @@
        }

        if (item.uuid === res.uuid) {
          if (item.style) {
            res.style = item.style
          }
          return res
        } else {
          return item

 src/mob/components/formdragelement/card.jsx

@@ -1,11 +1,12 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Button, Popover, Switch, Checkbox, Form, Rate } from 'antd'
import { ScanOutlined, RightOutlined, PlusOutlined, StarFilled, EditOutlined, CopyOutlined, CloseOutlined } from '@ant-design/icons'
import { ScanOutlined, RightOutlined, PlusOutlined, StarFilled, EditOutlined, CopyOutlined, CloseOutlined, FontColorsOutlined } from '@ant-design/icons'
import moment from 'moment'

import asyncComponent from '@/utils/asyncComponent'
import MkIcon from '@/components/mk-icon'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const CheckCard = asyncComponent(() => import('@/templates/modalconfig/checkCard'))
@@ -46,6 +47,12 @@
    copyCard(id)
  }

  const changeStyle = () => {
    let options = ['font']

    MKEmitter.emit('changeStyle', ['form', card.uuid], options, card.style || {})
  }

  let selectval = ''
  if (card.type === 'select' || card.type === 'link') {
    if (card.initval) {
@@ -60,11 +67,11 @@

  let formItem = null
  if (card.type === 'text' || card.type === 'number' || card.type === 'linkMain') {
    formItem = (<div className={'am-list-item input ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval ? card.initval : <span style={{color: '#bcbcbc'}}>{card.placeholder || <span style={{color: 'transparent'}}>input</span>}</span> }</div>{card.scan && card.scan !== 'false' ? <div className="am-list-extra"><ScanOutlined /></div> : null}</div></div>)
    formItem = (<div className={'am-list-item input ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label" style={card.style}>{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval ? card.initval : <span style={{color: '#bcbcbc'}}>{card.placeholder || <span style={{color: 'transparent'}}>input</span>}</span> }</div>{card.scan && card.scan !== 'false' ? <div className="am-list-extra"><ScanOutlined /></div> : null}</div></div>)
  } else if (card.type === 'number') {
    formItem = (<div className="am-list-item input"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval || <span style={{color: 'transparent'}}>input</span>}</div></div></div>)
    formItem = (<div className="am-list-item input"><div className="am-list-line"><div className="am-input-label" style={card.style}>{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval || <span style={{color: 'transparent'}}>input</span>}</div></div></div>)
  } else if (card.type === 'select' || card.type === 'link') {
    formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{selectval || '请选择'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>)
    formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label" style={card.style}>{card.label}</div><div className="am-input-control">{selectval || '请选择'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>)
  } else if (card.type === 'date') {
    let format = 'YYYY-MM-DD'
    if (card.precision === 'hour') {
@@ -74,16 +81,16 @@
    } else if (card.precision === 'second') {
      format = 'YYYY-MM-DD HH:mm:ss'
    }
    formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format(format) : '请选择'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>)
    formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label" style={card.style}>{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format(format) : '请选择'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>)
  } else if (card.type === 'datemonth') {
    formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'month').format('YYYY-MM') : '请选择'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>)
    formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label" style={card.style}>{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'month').format('YYYY-MM') : '请选择'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>)
  } else if (card.type === 'datetime') {
    formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD HH:mm') : '请选择'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>)
    formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label" style={card.style}>{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD HH:mm') : '请选择'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>)
  } else if (card.type === 'textarea') {
    let height = (card.maxRows || 2) * 25
    formItem = (<div className="am-list-item check-card">
      <div className="am-list-line">
        <div className="am-input-label">{card.label}</div>
        <div className="am-input-label" style={card.style}>{card.label}</div>
        <div className="am-input-control">
          <div style={{textAlign: 'left', position: 'relative', height, lineHeight: 1.5}}>
            {card.initval ? card.initval : <span style={{color: '#bcbcbc'}}>{card.placeholder || ''}</span> }
@@ -93,14 +100,14 @@
      </div>
    </div>)
  } else if (card.type === 'rate') {
    formItem = (<div className={'am-list-item ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label">{card.label}</div><div style={{textAlign: 'left'}} className={'am-input-control ' + (card.place === 'up_down' ? 'left' : '')}>
    formItem = (<div className={'am-list-item ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label" style={card.style}>{card.label}</div><div style={{textAlign: 'left'}} className={'am-input-control ' + (card.place === 'up_down' ? 'left' : '')}>
      <Rate value={card.initval || 0} count={card.rateCount || 5} character={card.character ? <MkIcon type={card.character}/> : <StarFilled />} allowHalf={card.allowHalf === 'true'} />
    </div></div></div>)
  } else if (card.type === 'fileupload') {
    formItem = (
      <div className="am-list-item checkbox">
        <div className="am-list-line">
          <div className="am-input-label">{card.label}</div>
          <div className="am-input-label" style={card.style}>{card.label}</div>
          <div className="am-input-control" style={{textAlign: 'left'}}>
            <Button style={{width: '100px', marginBottom: '10px', height: '100px', fontSize: '50px', color: '#d9d9d9'}}><PlusOutlined /></Button>
          </div>
@@ -108,9 +115,9 @@
      </div>
    )
  } else if (card.type === 'funcvar') {
    formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.linkfield}</div></div></div>)
    formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label" style={card.style}>{card.label}</div><div className="am-input-control">{card.linkfield}</div></div></div>)
  } else if (card.type === 'switch') {
    formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-list-switch"><Switch checked={card.initval}/></div></div></div>)
    formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label" style={card.style}>{card.label}</div><div className="am-list-switch"><Switch checked={card.initval}/></div></div></div>)
  } else if (card.type === 'radio') {
    let options = null
    if (card.options && card.options.length > 0) {
@@ -126,7 +133,7 @@
    formItem = (
    <div className={'am-list-item checkbox mk-radio ' + (card.arrange || '')}>
      <div className="am-list-line">
        <div className="am-input-label">{card.label}</div>
        <div className="am-input-label" style={card.style}>{card.label}</div>
        <div className="am-input-control">
          {card.arrange !== 'line' ? <Checkbox.Group value={[card.initval]}>
            {options.map(cell => <Checkbox key={cell.key} value={cell.Value}>{cell.Text}</Checkbox>)}
@@ -155,7 +162,7 @@
    formItem = (
      <div className={'am-list-item checkbox ' + (card.arrange || '')}>
        <div className="am-list-line">
          <div className="am-input-label">{card.label}</div>
          <div className="am-input-label" style={card.style}>{card.label}</div>
          <div className="am-input-control">
            {<Checkbox.Group value={_val}>
              {options.map(cell => <Checkbox key={cell.key} value={cell.Value}>{cell.Text}</Checkbox>)}
@@ -168,18 +175,18 @@
  } else if (card.type === 'hint') {
    formItem = <div className="am-list-item hint">
      <div className="am-list-line">
        <div className="am-input-label">{card.label}</div>
        <div className="am-input-control">
        <div className="am-input-label" style={card.style}>{card.label}</div>
        <div className="am-input-control" style={card.style}>
          {card.message}  
        </div>
      </div>
    </div>
  } else if (card.type === 'split') {
    formItem = <div className="split-line">{card.label}</div>
    formItem = <div className="split-line" style={card.style}>{card.label}</div>
  } else if (card.type === 'checkcard') {
    formItem = (<div className="am-list-item check-card">
      <div className="am-list-line">
        {card.hidelabel !== 'true' ? <div className="am-input-label">{card.label}</div> : null}
        {card.hidelabel !== 'true' ? <div className="am-input-label" style={card.style}>{card.label}</div> : null}
        <div className="am-input-control">
          <CheckCard config={card} />
        </div>
@@ -192,6 +199,7 @@
      <div className="mk-popover-control">
        <EditOutlined className="edit" onClick={edit} />
        <CopyOutlined className="copy" onClick={copy} />
        <FontColorsOutlined className="style" onClick={changeStyle} />
        <CloseOutlined className="close" onClick={close} />
      </div>
    } trigger="hover">

 src/mob/components/topbar/normal-navbar/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover } from 'antd'
import { ExpandOutlined, ReloadOutlined, EllipsisOutlined, LogoutOutlined, ToolOutlined, ScanOutlined, LeftOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons'
import { ExpandOutlined, ReloadOutlined, EllipsisOutlined, LogoutOutlined, ToolOutlined, ScanOutlined, LeftOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined, SearchOutlined, MenuOutlined } from '@ant-design/icons'

import asyncIconComponent from '@/utils/asyncIconComponent'
import getWrapForm from './options'
@@ -204,6 +204,9 @@
    if (card.wrap.refresh === 'true') {
      right = !right ? <ReloadOutlined /> : <EllipsisOutlined onDoubleClick={this.skip}/>
    }
    if (card.wrap.menus && card.wrap.menus.length > 0) {
      right = !right ? <MenuOutlined /> : <EllipsisOutlined onDoubleClick={this.skip}/>
    }

    return (
      <div className="normal-topbar-edit-box" style={card.style} onClick={this.clickComponent} id={card.uuid}>

 src/mob/components/topbar/normal-navbar/options.jsx

@@ -164,6 +164,7 @@
      initval: wrap.menus || [],
      required: false,
      span: 24,
      actions: ['view'],
      columns: [
        {
          title: '图标',

 src/mob/modalconfig/index.jsx

@@ -65,6 +65,7 @@
  }

  componentDidMount () {
    MKEmitter.addListener('submitStyle', this.getStyle)
    MKEmitter.addListener('completeSave', this.completeSave)
  }

@@ -75,11 +76,30 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('submitStyle', this.getStyle)
    MKEmitter.removeListener('completeSave', this.completeSave)
  }

  completeSave = () => {
    this.setState({saving: false})
  }

  getStyle = (comIds, style) => {
    const { config } = this.state

    if (comIds[0] !== 'form') return

    let Index = config.fields.findIndex(n => n.uuid === comIds[1])

    if (Index === -1) return
    
    let _config = fromJS(config).toJS()

    _config.fields[Index].style = style

    this.setState({
      config: _config
    })
  }

  /**
@@ -223,6 +243,9 @@
        }

        if (item.uuid === res.uuid) {
          if (item.style) {
            res.style = item.style
          }
          return res
        } else {
          return item

 src/tabviews/custom/components/form/normal-form/index.jsx

@@ -71,7 +71,7 @@
    config.subcards = config.subcards.map(group => {
      group.subButton.uuid = group.uuid
      group.subButton.$menuId = group.uuid
      group.subButton.Ot = 'requiredSgl'
      group.subButton.Ot = config.wrap.datatype === 'static' ? 'notRequired' : 'requiredSgl'
      group.subButton.$forbid = true
      group.subButton.OpenType = 'formSubmit'
      group.subButton.execError = 'never'

 src/tabviews/custom/components/form/tab-form/index.jsx

@@ -70,7 +70,7 @@
    config.subcards = config.subcards.map(group => {
      group.subButton.uuid = group.uuid
      group.subButton.$menuId = group.uuid
      group.subButton.Ot = 'requiredSgl'
      group.subButton.Ot = config.wrap.datatype === 'static' ? 'notRequired' : 'requiredSgl'
      group.subButton.$forbid = true
      group.subButton.OpenType = 'formSubmit'
      group.subButton.execError = 'never'

 src/tabviews/zshare/mutilform/index.jsx

@@ -786,21 +786,23 @@
      if (item.type === 'split') {
        fields.push(
          <Col span={24} key={index}>
            <p className="mk-form-split-line">{item.label}</p>
            <p className="mk-form-split-line" style={item.style}>{item.label}</p>
          </Col>
        )
      } else if (item.type === 'hint') {
        fields.push(
          <Col span={item.span || 24} key={index}>
            <Form.Item className="hint" colon={!!item.label} label={item.label || ' '} labelCol={item.labelCol} wrapperCol={item.wrapperCol}>
              <div className="message">{item.message}</div>
            <Form.Item className="hint" colon={false} label={item.label ? <span className="mk-form-label" style={item.style}>{item.label}</span> : ' '} labelCol={item.labelCol} wrapperCol={item.wrapperCol}>
              <div className="message" style={item.style}>{item.message}</div>
            </Form.Item>
          </Col>
        )
      } else {
        let content = null
        let className = ''
        let label = item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}><QuestionCircleOutlined style={{color: '#c49f47', marginRight: '3px'}}/>{item.label}</Tooltip> : item.label
        let label = item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}><QuestionCircleOutlined style={{color: '#c49f47', marginRight: '3px'}}/>
          <span className="mk-form-label" style={item.style}>{item.label}</span>
        </Tooltip> : <span className="mk-form-label" style={item.style}>{item.label}</span>
      
        if (item.type === 'text' || item.type === 'linkMain') {
          content = (<MKInput config={item} onChange={(val, defer) => !defer && this.recordChange({[item.field]: val})} onSubmit={this.props.inputSubmit} />)
@@ -840,6 +842,7 @@
          <Col span={item.span || 24} key={index}>
            <Form.Item
              label={label}
              colon={false}
              className={className}
              extra={item.extra || null}
              labelCol={item.labelCol}

 src/tabviews/zshare/mutilform/index.scss

@@ -17,6 +17,16 @@
      margin-left: 0;
    }
  }
  .mk-form-label::after {
    content: ':';
    position: relative;
    top: -0.5px;
    margin: 0 8px 0 2px;
    text-decoration: none;
  }
  .ant-form-item-no-colon::after {
    content: none!important;
  }
  .ant-form-item {
    display: flex;
  }

 src/templates/modalconfig/dragelement/card.jsx

@@ -1,11 +1,12 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Select, DatePicker, Input, InputNumber, Button, Popover, Switch, Radio, Checkbox, Form, Rate } from 'antd'
import { QuestionCircleOutlined, UploadOutlined, EditOutlined, CopyOutlined, CloseOutlined, StarFilled } from '@ant-design/icons'
import { QuestionCircleOutlined, UploadOutlined, EditOutlined, CopyOutlined, CloseOutlined, StarFilled, FontColorsOutlined } from '@ant-design/icons'
import moment from 'moment'

import asyncComponent from '@/utils/asyncComponent'
import MkIcon from '@/components/mk-icon'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const { MonthPicker } = DatePicker
@@ -49,6 +50,12 @@

  const copy = () => {
    copyCard(id)
  }

  const changeStyle = () => {
    let options = ['font']

    MKEmitter.emit('changeStyle', ['form', card.uuid], options, card.style || {})
  }

  let selectval = ''
@@ -123,24 +130,23 @@
      <Checkbox value="D">D</Checkbox>
    </Checkbox.Group>)
  } else if (card.type === 'hint') {
    formItem = <div style={{marginTop: '10px', color: 'rgba(0, 0, 0, 0.85)', lineHeight: '1.5'}}>{card.message}</div>
    formItem = <div style={{marginTop: '10px', color: 'rgba(0, 0, 0, 0.85)', lineHeight: '1.5', ...card.style}}>{card.message}</div>
  } else if (card.type === 'split') {
    formItem = <div className="split-line">{card.label}</div>
    formItem = <div className="split-line" style={card.style}>{card.label}</div>
  } else if (card.type === 'checkcard') {
    className += ' checkcard'
    formItem = <CheckCard config={card} />
  }

  let _label = card.label
  let colon = !!card.label
  let _label = <span className="mk-form-label" style={card.style}>{card.label}</span>

  if (card.tooltip) {
    _label = <span><QuestionCircleOutlined className="mk-form-tip" />{card.label}</span>
    _label = <><QuestionCircleOutlined className="mk-form-tip" /><span className="mk-form-label" style={card.style}>{card.label}</span></>
  }
  if (card.type === 'brafteditor' && card.hidelabel === 'true') {
    _label = null
    colon = false
  } else if (card.type === 'hint') {
    _label = _label || ' '
  } else if (card.type === 'hint' && !card.label) {
    _label = ' '
  }

  return (
@@ -148,6 +154,7 @@
      <div className="mk-popover-control">
        <EditOutlined className="edit" onClick={edit} />
        <CopyOutlined className="copy" onClick={copy} />
        <FontColorsOutlined className="style" onClick={changeStyle} />
        <CloseOutlined className="close" onClick={close} />
      </div>
    } trigger="hover">
@@ -155,7 +162,7 @@
        <div ref={node => drag(drop(node))} onDoubleClick={edit}>
          {card.type === 'split' ? formItem : <Form.Item
            className={className}
            colon={colon}
            colon={false}
            label={_label}
            required={card.required === 'true'}
            extra={card.extra || null}

 src/templates/modalconfig/dragelement/index.scss

@@ -33,6 +33,16 @@
      line-height: 1;
    }
  }
  .mk-form-label::after {
    content: ':';
    position: relative;
    top: -0.5px;
    margin: 0 8px 0 2px;
    text-decoration: none;
  }
  .ant-form-item-no-colon::after {
    content: none!important;
  }
  .ant-form-item {
    cursor: move;
    display: flex;

 src/templates/modalconfig/index.jsx

@@ -20,6 +20,7 @@
import asyncComponent from '@/utils/asyncComponent'
import { BaseConfig, SearchItems } from './source'
import { updateForm } from '@/utils/utils-update.js'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const { Panel } = Collapse
@@ -28,6 +29,7 @@

const Versions = asyncComponent(() => import('@/menu/versions'))
const ReplaceField = asyncComponent(() => import('@/menu/replaceField'))
const StyleController = asyncComponent(() => import('@/menu/stylecontroller'))
const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform'))
const EditComponent = asyncComponent(() => import('@/templates/zshare/editcomponent'))
const DragElement = asyncComponent(() => import('./dragelement'))
@@ -129,6 +131,7 @@
  }

  componentDidMount() {
    MKEmitter.addListener('submitStyle', this.getStyle)
    document.onkeydown = (event) => {
      let e = event || window.event
      let keyCode = e.keyCode || e.which || e.charCode
@@ -161,6 +164,7 @@
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    MKEmitter.removeListener('submitStyle', this.getStyle)
    this.setState = () => {
      return
    }
@@ -187,6 +191,24 @@
    }

    this.props.handleView(param)
  }

  getStyle = (comIds, style) => {
    const { config } = this.state

    if (comIds[0] !== 'form') return

    let Index = config.fields.findIndex(n => n.uuid === comIds[1])

    if (Index === -1) return
    
    let _config = fromJS(config).toJS()

    _config.fields[Index].style = style

    this.setState({
      config: _config
    })
  }

  /**
@@ -362,6 +384,9 @@
        }

        if (item.uuid === res.uuid) {
          if (item.style) {
            res.style = item.style
          }
          return res
        } else {
          return item
@@ -852,6 +877,7 @@
        >
          {dict['header.menu.config.placeholder']}
        </Modal>
        <StyleController />
      </div>
    )
  }

 src/templates/sharecomponent/searchcomponent/searchform/index.jsx

@@ -99,7 +99,7 @@
  multiselect: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
  link: ['label', 'field', 'resourceType', 'initval', 'type', 'linkField', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll', 'dropdown', 'query', 'labelwidth'],
  date: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'precision', 'labelwidth'],
  checkcard: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'resourceType', 'display', 'width', 'multiple', 'borderColor', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
  checkcard: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'resourceType', 'display', 'width', 'multiple', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
  dateweek: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
  datemonth: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
  daterange: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'precision', 'labelwidth'],
@@ -197,9 +197,9 @@
        }
      } else {
        if (this.record.resourceType === '0') {        // 自定义资源
          shows.push('options', 'fields', 'backgroundColor')
          shows.push('options', 'fields', 'backgroundColor', 'borderColor')
        } else if (this.record.resourceType === '1') { // 数据源
          shows.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'database', 'backgroundColor')
          shows.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'database', 'backgroundColor', 'borderColor')
        }
      }
      shows.push('linkField')

 src/templates/zshare/modalform/index.jsx

@@ -24,7 +24,7 @@
  select: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'setAll', 'linkSubField', 'span', 'labelwidth', 'tooltip', 'extra', 'emptyText', 'enter', 'splitline', 'dropdown', 'marginTop', 'marginBottom'],
  checkbox: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'fieldlength', 'span', 'labelwidth', 'tooltip', 'extra', 'splitline', 'arrange', 'marginTop', 'marginBottom'],
  radio: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'linkSubField', 'span', 'labelwidth', 'tooltip', 'extra', 'setAll', 'emptyText', 'splitline', 'arrange', 'marginTop', 'marginBottom'],
  checkcard: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'fieldlength', 'span', 'labelwidth', 'display', 'tooltip', 'extra', 'width', 'multiple', 'borderColor', 'splitline', 'marginTop', 'marginBottom'],
  checkcard: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'fieldlength', 'span', 'labelwidth', 'display', 'tooltip', 'extra', 'width', 'multiple', 'splitline', 'marginTop', 'marginBottom'],
  multiselect: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'fieldlength', 'span', 'labelwidth', 'tooltip', 'extra', 'marginTop', 'marginBottom'],
  link: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'setAll', 'linkField', 'linkSubField', 'span', 'labelwidth', 'tooltip', 'extra', 'emptyText', 'enter', 'splitline', 'dropdown', 'marginTop', 'marginBottom'],
  fileupload: ['readonly', 'required', 'readin', 'fieldlength', 'maxfile', 'fileType', 'span', 'labelwidth', 'tooltip', 'extra', 'compress', 'splitline', 'marginTop', 'marginBottom'],
@@ -167,9 +167,9 @@
        }
      } else {
        if (this.record.resourceType === '0') {        // 自定义资源
          shows.push('options', 'fields', 'backgroundColor')
          shows.push('options', 'fields', 'backgroundColor', 'borderColor')
        } else if (this.record.resourceType === '1') { // 数据源
          shows.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'disableField', 'database', 'backgroundColor')
          shows.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'disableField', 'database', 'backgroundColor', 'borderColor')
        }
      }