2022-04-19

king

2022-04-19 aaa6ac0ea146ba9e26b1100b8be662b1d7ad8124

2022-04-19

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

@@ -75,6 +75,10 @@
      )
    } else if (card.eleType === 'text' || card.eleType === 'number') {
      let val = `${card.prefix || ''}${card.datatype === 'static' ? (card.value || '') : (card.field || '')}${card.postfix || ''}`
      if (card.fixStyle === 'alone') {
        let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight}
        val = <><span style={_s}>{card.prefix || ''}</span>{`${card.datatype === 'static' ? (card.value || '') : (card.field || '')}`}<span style={_s}>{card.postfix || ''}</span></>
      }
      return (
        <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div>
      )
@@ -142,15 +146,25 @@
        </div>
      )
    } else if (card.eleType === 'currentDate') {
      let val = `${card.prefix || ''}${moment().format(card.dateFormat)}${card.postfix || ''}`
      if (card.fixStyle === 'alone') {
        let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight}
        val = <><span style={_s}>{card.prefix || ''}</span>{moment().format(card.dateFormat)}<span style={_s}>{card.postfix || ''}</span></>
      }
      return (
        <div className="ant-mk-date">
          {`${card.prefix || ''}${moment().format(card.dateFormat)}${card.postfix || ''}`}
          {val}
        </div>
      )
    } else if (card.eleType === 'formula') {
      let val = `${card.prefix || ''}${card.formula}${card.postfix || ''}`
      if (card.fixStyle === 'alone') {
        let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight}
        val = <><span style={_s}>{card.prefix || ''}</span>{card.formula}<span style={_s}>{card.postfix || ''}</span></>
      }
      return (
        <div className="ant-mk-date">
          {`${card.prefix || ''}${card.formula}${card.postfix || ''}`}
          {val}
        </div>
      )
    }

 src/menu/components/card/cardcellcomponent/elementform/index.jsx

@@ -15,8 +15,8 @@

const cardTypeOptions = {
  sequence: ['eleType', 'width'],
  text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link', 'noValue', 'bgImage'],
  number: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'noValue'],
  text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link', 'noValue', 'bgImage', 'fixStyle'],
  number: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'noValue', 'fixStyle'],
  picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'maxWidth', 'link', 'noValue'],
  video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop', 'noValue'],
  icon: ['eleType', 'icon', 'datatype', 'width'],
@@ -24,8 +24,8 @@
  splitline: ['eleType', 'color', 'width', 'borderWidth'],
  barcode: ['eleType', 'datatype', 'width', 'barHeight', 'displayValue', 'interval', 'noValue'],
  qrcode: ['eleType', 'datatype', 'width', 'qrWidth', 'color', 'url', 'noValue'],
  currentDate: ['eleType', 'width', 'dateFormat', 'prefix', 'postfix'],
  formula: ['eleType', 'width', 'height', 'prefix', 'postfix', 'eval', 'formula'],
  currentDate: ['eleType', 'width', 'dateFormat', 'prefix', 'postfix', 'fixStyle'],
  formula: ['eleType', 'width', 'height', 'prefix', 'postfix', 'eval', 'formula', 'noValue', 'fixStyle'],
}

class MainSearch extends Component {
@@ -43,12 +43,13 @@
    datatype: '',
    showType: '',
    showInfo: 'false',
    fixStyle: '',
    link: ''
  }

  UNSAFE_componentWillMount () {
    const { card, config } = this.props
    let _options = this.getOptions(card.eleType, card.datatype, card.link, (card.showType || 'line'), card.showInfo)
    let _options = this.getOptions(card.eleType, card.datatype, card.link, (card.showType || 'line'), card.showInfo, card.fixStyle || '')
    
    this.setState({
      link: card.link,
@@ -56,6 +57,7 @@
      datatype: card.datatype,
      showType: card.showType || 'line',
      showInfo: card.showInfo || 'false',
      fixStyle: card.fixStyle || '',
      formlist: this.props.formlist.map(item => {
        item.hidden = !_options.includes(item.key)

@@ -99,7 +101,7 @@
    })
  }

  getOptions = (eleType, datatype, link, showType, showInfo) => {
  getOptions = (eleType, datatype, link, showType, showInfo, fixStyle) => {
    let _options = fromJS(cardTypeOptions[eleType]).toJS() // 选项列表
    
    if (['text', 'number', 'picture', 'slider', 'barcode', 'qrcode', 'video'].includes(eleType)) {
@@ -135,6 +137,9 @@
        _options.push('tooltip')
      }
    }
    if (_options.includes('fixStyle') && fixStyle === 'alone') {
      _options.push('fixSize', 'fixColor', 'fixLeft', 'fixRight')
    }

    return _options
  }
@@ -147,10 +152,10 @@
   */
  selectChange = (key, value, option) => {
    const { card, config } = this.props
    const { datatype, eleType, showType, showInfo } = this.state
    const { datatype, eleType, showType, showInfo, fixStyle } = this.state

    if (key === 'eleType') {
      let _options = this.getOptions(value, datatype, '', showType, showInfo)
      let _options = this.getOptions(value, datatype, '', showType, showInfo, fixStyle)
      
      let _formlist = this.state.formlist.map(item => {
        item.hidden = !_options.includes(item.key)
@@ -193,6 +198,8 @@
          item.required = value !== 'qrcode'
        } else if (item.key === 'showInfo') {
          item.initVal = showInfo
        } else if (item.key === 'fixStyle') {
          item.initVal = fixStyle
        }

        return item
@@ -222,7 +229,7 @@
        this.props.form.setFieldsValue({value: option.props.title})
      }
    } else if (key === 'link') {
      let _options = this.getOptions(eleType, datatype, value, showType, showInfo)
      let _options = this.getOptions(eleType, datatype, value, showType, showInfo, fixStyle)
      this.setState({
        link: value,
        formlist: this.state.formlist.map(item => {
@@ -237,11 +244,11 @@
  }

  onChange = (e, key) => {
    const { eleType, datatype, link, showType, showInfo } = this.state
    const { eleType, datatype, link, showType, showInfo, fixStyle } = this.state
    let value = e.target.value

    if (key === 'datatype') {
      let _options = this.getOptions(eleType, value, link, showType, showInfo)
      let _options = this.getOptions(eleType, value, link, showType, showInfo, fixStyle)

      this.setState({
        datatype: value,
@@ -252,7 +259,7 @@
        })
      })
    } else if (key === 'link') {
      let _options = this.getOptions(eleType, datatype, value, showType, showInfo)
      let _options = this.getOptions(eleType, datatype, value, showType, showInfo, fixStyle)
      this.setState({
        link: value,
        formlist: this.state.formlist.map(item => {
@@ -264,7 +271,7 @@
        })
      })
    } else if (key === 'showInfo') {
      let _options = this.getOptions(eleType, datatype, link, showType, value)
      let _options = this.getOptions(eleType, datatype, link, showType, value, fixStyle)
      this.setState({
        showInfo: value,
        formlist: this.state.formlist.map(item => {
@@ -276,7 +283,19 @@
      this.setState({
        showType: value
      }, () => {
        let _options = this.getOptions(eleType, datatype, link, value, showInfo)
        let _options = this.getOptions(eleType, datatype, link, value, showInfo, fixStyle)
        this.setState({
          formlist: this.state.formlist.map(item => {
            item.hidden = !_options.includes(item.key)
            return item
          })
        })
      })
    } else if (key === 'fixStyle') {
      this.setState({
        fixStyle: value
      }, () => {
        let _options = this.getOptions(eleType, datatype, link, showType, showInfo, value)
        this.setState({
          formlist: this.state.formlist.map(item => {
            item.hidden = !_options.includes(item.key)

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

@@ -47,11 +47,13 @@
    { value: 'dynamic', text: '动态' },
    { value: 'static', text: '静态' }
  ]
  let tooltip = ''
  if (cardCell.$cardType === 'extendCard') {
    card.datatype = 'static'
    dataTypes = [
      { value: 'static', text: '静态' }
    ]
    // card.datatype = 'static'
    // dataTypes = [
    //   { value: 'static', text: '静态' }
    // ]
    tooltip = '在扩展卡片中，动态数据显示值为获取到的第一行数据。'
  }

  let forms = [
@@ -75,6 +77,7 @@
      key: 'datatype',
      label: '数据类型',
      initVal: card.datatype || 'static',
      tooltip,
      required: true,
      options: dataTypes
    },
@@ -533,6 +536,56 @@
        { value: 'hide', text: '隐藏' }
      ]
    },
    {
      type: 'radio',
      key: 'fixStyle',
      label: '前后缀',
      initVal: card.fixStyle || '',
      tooltip: '前缀与后缀，使用与内容统一的样式还是独立样式。',
      required: false,
      options: [
        { value: '', text: '统一样式' },
        { value: 'alone', text: '独立样式' }
      ]
    },
    {
      type: 'number',
      key: 'fixSize',
      min: 10,
      max: 100,
      label: '字体大小',
      initVal: card.fixSize || 14,
      tooltip: '前缀、后缀的字体大小。',
      required: true
    },
    {
      type: 'color',
      key: 'fixColor',
      label: '字体颜色',
      initVal: card.fixColor || 'rgba(0, 0, 0, 0.65)',
      tooltip: '前缀、后缀的字体颜色。',
      required: true
    },
    {
      type: 'number',
      key: 'fixLeft',
      min: 0,
      max: 1000,
      label: '左边距',
      initVal: card.fixLeft || 0,
      tooltip: '前缀、后缀的左边距。',
      required: false
    },
    {
      type: 'number',
      key: 'fixRight',
      min: 0,
      max: 1000,
      label: '右边距',
      initVal: card.fixRight || 0,
      tooltip: '前缀、后缀的右边距。',
      required: false
    },
  ]

  return forms

 src/menu/components/card/data-card/index.jsx

@@ -435,7 +435,7 @@
      newcard = {
        uuid: Utils.getuuid(),
        $cardType: 'extendCard',
        setting: { width: 6, type: 'simple', click: 'button'},
        setting: { width: 6, type: 'simple', click: ''},
        style: {
          height,
          borderWidth: '1px', borderColor: '#e8e8e8',

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

@@ -179,7 +179,7 @@
    }

    return (
      <div className={'menu-group-edit-box' + (paddingTop ? ' padding' : '')} style={_style} onClick={this.clickComponent} id={group.uuid}>
      <div className={'menu-group-edit-box ' + (paddingTop ? 'padding ' : '') + (group.setting.layout || '')} style={_style} onClick={this.clickComponent} id={group.uuid}>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <NormalForm title="分组设置" width={700} update={this.updateWrap} getForms={this.getWrapForms}>

 src/menu/components/group/normal-group/index.scss

@@ -38,3 +38,12 @@
  z-index: 1;
  box-shadow: 0px 0px 4px #1890ff;
}
.menu-group-edit-box.flex {
  >.group-shell-inner {
    display: flex;
    width: 100%;
    >.mk-component-card {
      flex: 1;
    }
  }
}

 src/menu/components/group/normal-group/options.jsx

@@ -105,6 +105,18 @@
      forbid: !appType
    },
    {
      type: 'radio',
      field: 'layout',
      label: '元素布局',
      initval: setting.layout || 'grid',
      tooltip: '分组中元素的排列方式',
      required: false,
      options: [
        {value: 'grid', label: '栅格布局'},
        {value: 'flex', label: '弹性布局'},
      ]
    },
    {
      type: 'multiselect',
      field: 'blacklist',
      label: '黑名单',

 src/tabviews/custom/components/card/cardcellList/index.jsx

@@ -290,7 +290,12 @@
      }

      if (val !== '') {
        if (card.fixStyle === 'alone') {
          let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight}
          val = <><span style={_s}>{card.prefix || ''}</span>{val}<span style={_s}>{card.postfix || ''}</span></>
        } else {
        val = `${card.prefix || ''}${val}${card.postfix || ''}`
        }
      }

      if (card.marks) {
@@ -366,7 +371,12 @@
      }

      if (val !== '') {
        if (card.fixStyle === 'alone') {
          let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight}
          val = <><span style={_s}>{card.prefix || ''}</span>{val}<span style={_s}>{card.postfix || ''}</span></>
        } else {
        val = `${card.prefix || ''}${val}${card.postfix || ''}`
        }
      }
      
      if (card.marks) {
@@ -575,10 +585,20 @@
        </Col>
      )
    } else if (card.eleType === 'currentDate') {
      let val = card.dateFormat ? moment().format(card.dateFormat) : ''
      if (val !== '') {
        if (card.fixStyle === 'alone') {
          let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight}
          val = <><span style={_s}>{card.prefix || ''}</span>{val}<span style={_s}>{card.postfix || ''}</span></>
        } else {
          val = `${card.prefix || ''}${val}${card.postfix || ''}`
        }
      }

      return (
        <Col key={card.uuid} span={card.width}>
          <div className="ant-mk-date" style={card.style}>
            {card.dateFormat ? `${card.prefix || ''}${moment().format(card.dateFormat)}${card.postfix || ''}` : null}
            {val}
          </div>
        </Col>
      )
@@ -628,12 +648,22 @@
        val = _val === undefined ? '' : _val
      }

      if (val === '' && card.noValue === 'hide') { // 空值隐藏
        return null
      }

      if (val !== '') {
        val = `${card.prefix || ''}${val}${card.postfix || ''}`
        if (card.eval === 'false') {
        if (val && typeof(val) === 'string') {
          val = val.replace(/\n/ig, '<br/>').replace(/\s/ig, '&nbsp;')
          val = <span dangerouslySetInnerHTML={{__html: val}}></span>
        }

        if (card.fixStyle === 'alone') {
          let _s = {fontSize: card.fixSize, color: card.fixColor, marginLeft: card.fixLeft, marginRight: card.fixRight}
          val = <><span style={_s}>{card.prefix || ''}</span>{val}<span style={_s}>{card.postfix || ''}</span></>
        } else {
          val = `${card.prefix || ''}${val}${card.postfix || ''}`
        }
      }

      if (card.marks) {

 src/tabviews/custom/components/card/data-card/index.jsx

@@ -752,6 +752,12 @@
      }
    }

    let extendData = {$$BID: BID, $$BData: BData, $$selectedData: selectedData, $$type: 'extendCard'}

    if (data && data[0]) {
      extendData = {...extendData, ...data[0]}
    }

    return (
      <div className="custom-data-card-box" style={config.style}>
        {loading ?
@@ -777,7 +783,7 @@
            {offset ? <Col span={offset} style={{height: '10px'}}> </Col> : null}
            {precards.map((item, index) => (
              <Col key={'pre' + index} className="extend-card" span={item.setting.width || 6}>
                <CardItem card={item} cards={config} data={{$$BID: BID, $$BData: BData, $$selectedData: selectedData, $$type: 'extendCard'}}/>
                <CardItem card={item} cards={config} data={extendData}/>
              </Col>
            ))}
            {data && data.map((item, index) => {
@@ -798,7 +804,7 @@
            })}
            {nextcards.map((item, index) => (
              <Col key={'next' + index} className="extend-card" span={item.setting.width || 6}>
                <CardItem card={item} cards={config} data={{$$BID: BID, $$BData: BData, $$selectedData: selectedData, $$type: 'extendCard'}}/>
                <CardItem card={item} cards={config} data={extendData}/>
              </Col>
            ))}
          </Row>

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

@@ -334,7 +334,7 @@
    const { printing } = this.state

    return (
      <div className="normal-group-wrap" id={config.uuid} style={config.style}>
      <div className={'normal-group-wrap ' + (config.setting.layout || '')} id={config.uuid} style={config.style}>
        {config.setting && config.setting.print === 'true' ? <Button className="print-button" icon="printer" loading={printing} onClick={this.print}></Button> : null}
        <Row className="component-wrap">{this.getComponents()}</Row>
      </div>

 src/tabviews/custom/components/group/normal-group/index.scss

@@ -14,3 +14,14 @@
  display: block;
  clear: both;
}

.normal-group-wrap.flex {
  >.ant-row {
    display: flex;
    >.ant-col {
      flex: 1;
      max-width: unset;
      width: 5%;
    }
  }
}