2021-11-11

king

2021-11-11 fd4a4f4513419baa9af45c8176a511450f096fc4

2021-11-11

 README.md

@@ -66,3 +66,7 @@
### `npm run build` fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

### rewrite

antd: Progress(lib & es)

 src/assets/css/main.scss

@@ -412,6 +412,13 @@
  transition: margin-left 0s cubic-bezier(0.645, 0.045, 0.355, 1)!important;
}

.ant-progress-status-success .ant-progress-text {
  color: rgba(0, 0, 0, 0.45)!important;
}
.ant-progress-circle.ant-progress-status-success .ant-progress-text {
  color: rgba(0, 0, 0, 0.65)!important;
}

// .ant-table.ant-table-mini .ant-table-thead > tr > th {
//   padding: 8px 4px;
// }

 src/components/mkProgress/index.jsx

New file
@@ -0,0 +1,37 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Progress } from 'antd'

// import './index.scss'

class MkProgress extends Component {
  static propTpyes = {
    config: PropTypes.object,
    color: PropTypes.any,
    value: PropTypes.any,
  }

  render() {
    const { value, config, color } = this.props

    let type = config.showType || 'line'

    if (type === 'line') {
      return <Progress percent={value} type="line" strokeWidth={config.strokeWidth || 8} strokeColor={color} showInfo={config.showInfo === 'true'}/>
    }

    let width = config.outlineWidth || 0

    if (this.progress && (!width || width > this.progress.clientWidth)) {
      width = this.progress.clientWidth
    }

    return (
      <div ref={(ref) => this.progress = ref } style={{textAlign: config.textAlign || 'left'}}>
        <Progress percent={value} width={width} type={type} strokeWidth={config.strokeWidth || 8} strokeColor={color} showInfo={config.showInfo === 'true'}/>
      </div>
    )
  }
}

export default MkProgress

 src/components/mkProgress/index.scss

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

@@ -15,6 +15,7 @@
import './index.scss'

const BarCode = asyncComponent(() => import('@/components/barcode'))
const MkProgress = asyncComponent(() => import('./mkProgress'))
const QrCode = asyncComponent(() => import('@/components/qrcode'))
const Video = asyncComponent(() => import('@/components/video'))
const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent'))
@@ -77,14 +78,14 @@
      return (<Icon type={card.icon}/>)
    } else if (card.eleType === 'slider') {
      let val = card.value ? (card.value / card.maxValue) * 100 : 30
      // return <Progress percent={val}/>
      return (
        <div className="ant-mk-slider">
          <div className="ant-mk-slider-rail"></div>
          <div className="ant-mk-slider-track" style={{width: `${val}%`, backgroundColor: card.color}}></div>
          <div className="ant-mk-slider-handle" style={{left: `${val}%`, borderColor: card.color}}></div>
        </div>
      )
      return <MkProgress value={val} config={card}/>
      // return (
      //   <div className="ant-mk-slider">
      //     <div className="ant-mk-slider-rail"></div>
      //     <div className="ant-mk-slider-track" style={{width: `${val}%`, backgroundColor: card.color}}></div>
      //     <div className="ant-mk-slider-handle" style={{left: `${val}%`, borderColor: card.color}}></div>
      //   </div>
      // )
    } else if (card.eleType === 'picture') {
      let _imagestyle = {}


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

New file
@@ -0,0 +1,36 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Progress } from 'antd'

// import './index.scss'

class MkProgress extends Component {
  static propTpyes = {
    config: PropTypes.object,
    value: PropTypes.any
  }

  render() {
    const { value, config } = this.props

    let type = config.showType || 'line'

    if (type === 'line') {
      return <Progress percent={value} type="line" strokeWidth={config.strokeWidth || 8} strokeColor={config.color} showInfo={config.showInfo === 'true'}/>
    }

    let width = config.outlineWidth || 0

    if (this.progress && (!width || width > this.progress.clientWidth)) {
      width = this.progress.clientWidth
    }

    return (
      <div ref={(ref) => this.progress = ref } style={{textAlign: config.textAlign || 'left'}}>
        <Progress percent={value} width={width} type={type} strokeWidth={config.strokeWidth || 8} strokeColor={config.color} showInfo={config.showInfo === 'true'}/>
      </div>
    )
  }
}

export default MkProgress

 src/menu/components/card/cardcellcomponent/dragaction/mkProgress/index.scss

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

@@ -19,7 +19,7 @@
  picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'maxWidth', 'link', 'noValue'],
  video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop', 'noValue'],
  icon: ['eleType', 'icon', 'datatype', 'width'],
  slider: ['eleType', 'datatype', 'width', 'color', 'maxValue'],
  slider: ['eleType', 'datatype', 'width', 'color', 'maxValue', 'showInfo', 'showType', 'strokeWidth'],
  splitline: ['eleType', 'color', 'width', 'borderWidth'],
  barcode: ['eleType', 'datatype', 'width', 'barHeight', 'displayValue', 'interval', 'noValue'],
  qrcode: ['eleType', 'datatype', 'width', 'qrWidth', 'color', 'url', 'noValue'],
@@ -40,17 +40,19 @@
    formlist: null,  // 表单信息
    eleType: '',
    datatype: '',
    showType: '',
    link: ''
  }

  UNSAFE_componentWillMount () {
    const { card, config } = this.props
    let _options = this.getOptions(card.eleType, card.datatype, card.link)
    let _options = this.getOptions(card.eleType, card.datatype, card.link, (card.showType || 'line'))
    
    this.setState({
      link: card.link,
      eleType: card.eleType,
      datatype: card.datatype,
      showType: card.showType || 'line',
      formlist: this.props.formlist.map(item => {
        item.hidden = !_options.includes(item.key)

@@ -90,7 +92,7 @@
    })
  }

  getOptions = (eleType, datatype, link) => {
  getOptions = (eleType, datatype, link, showType) => {
    let _options = fromJS(cardTypeOptions[eleType]).toJS() // 选项列表
    
    if (['text', 'number', 'picture', 'link', 'slider', 'barcode', 'qrcode', 'video'].includes(eleType)) {
@@ -112,6 +114,8 @@
        }
      } else if (eleType === 'picture' && !link) {
        _options.push('scale')
      } else if (eleType === 'slider' && showType !== 'line') {
        _options.push('outlineWidth', 'textAlign')
      }
    } else if (eleType === 'icon') {
      if (datatype === 'dynamic') {
@@ -131,11 +135,11 @@
   * 3、切换标签类型，重置可选标签
   */
  selectChange = (key, value, option) => {
    const { config } = this.props
    const { datatype, eleType } = this.state
    const { card, config } = this.props
    const { datatype, eleType, showType } = this.state

    if (key === 'eleType') {
      let _options = this.getOptions(value, datatype, '')
      let _options = this.getOptions(value, datatype, '', showType)
      
      let _formlist = this.state.formlist.map(item => {
        item.hidden = !_options.includes(item.key)
@@ -179,6 +183,7 @@
      this.setState({
        link: '',
        eleType: value,
        showType: card.showType || 'line',
        formlist: _formlist
      }, () => {
        if (value === 'slider') {
@@ -197,7 +202,7 @@
        this.props.form.setFieldsValue({value: option.props.title})
      }
    } else if (key === 'link') {
      let _options = this.getOptions(eleType, this.state.datatype, value)
      let _options = this.getOptions(eleType, this.state.datatype, value, showType)
      this.setState({
        link: value,
        formlist: this.state.formlist.map(item => {
@@ -212,11 +217,11 @@
  }

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

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

      this.setState({
        datatype: value,
@@ -227,7 +232,7 @@
        })
      })
    } else if (key === 'link') {
      let _options = this.getOptions(eleType, this.state.datatype, value)
      let _options = this.getOptions(eleType, datatype, value, showType)
      this.setState({
        link: value,
        formlist: this.state.formlist.map(item => {
@@ -238,6 +243,18 @@
          return item
        })
      })
    } else if (key === 'showType') {
      this.setState({
        showType: value
      }, () => {
        let _options = this.getOptions(eleType, datatype, link, value)
        this.setState({
          formlist: this.state.formlist.map(item => {
            item.hidden = !_options.includes(item.key)
            return item
          })
        })
      })
    }
  }


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

@@ -183,6 +183,62 @@
      required: true
    },
    {
      type: 'radio',
      key: 'showInfo',
      label: '进度值',
      initVal: card.showInfo || 'false',
      required: false,
      options: [
        { value: 'true', text: '显示' },
        { value: 'false', text: '隐藏' }
      ]
    },
    {
      type: 'radio',
      key: 'showType',
      label: '展现形式',
      initVal: card.showType || 'line',
      required: false,
      options: [
        { value: 'line', text: '进度条' },
        { value: 'circle', text: '进度圈' },
        { value: 'dashboard', text: '仪表盘' },
      ]
    },
    {
      type: 'radio',
      key: 'textAlign',
      label: '对齐方式',
      initVal: card.textAlign || 'left',
      required: false,
      options: [
        { value: 'left', text: '左' },
        { value: 'center', text: '中' },
        { value: 'right', text: '右' },
      ]
    },
    {
      type: 'number',
      key: 'strokeWidth',
      min: 1,
      max: 200,
      precision: 0,
      label: '线条宽度',
      initVal: card.strokeWidth || 8,
      required: true,
    },
    {
      type: 'number',
      key: 'outlineWidth',
      min: 10,
      max: 2000,
      precision: 0,
      label: '外形宽度',
      initVal: card.outlineWidth || '',
      tooltip: '外形宽度为空时，宽度为元素的宽度。注：超出时按元素宽度计算。',
      required: false
    },
    {
      type: 'number',
      key: 'maxValue',
      min: 1,

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

@@ -21,6 +21,7 @@
const PrintButton = asyncComponent(() => import('@/tabviews/zshare/actionList/printbutton'))
const BarCode = asyncElementComponent(() => import('@/components/barcode'))
const QrCode = asyncElementComponent(() => import('@/components/qrcode'))
const MkProgress = asyncElementComponent(() => import('@/components/mkProgress'))
const Video = asyncComponent(() => import('@/components/video'))
const PicRadio = {
  '4:3': '75%', '3:2': '66.67%', '16:9': '56.25%', '2:1': '50%', '3:1': '33.33%', '4:1': '25%',
@@ -414,13 +415,6 @@
      val = val / card.maxValue * 100
      val = parseInt(val * 100) / 100

      let _val = val
      if (val > 100) {
        _val = '100%'
      } else {
        _val = `${val}%`
      }

      if (card.marks) {
        let _color = this.getColor(card.marks)
        color = _color ? _color : color
@@ -429,13 +423,7 @@
      return (
        <Col key={card.uuid} span={card.width}>
          <div style={card.style}>
            <div className="ant-mk-slider">
              <div className="ant-mk-slider-rail"></div>
              <div className="ant-mk-slider-track" style={{width: _val, backgroundColor: color}}></div>
              <Tooltip title={`${val}%`}>
                <div className="ant-mk-slider-handle" style={{left: _val, borderColor: color}}></div>
              </Tooltip>
            </div>
            <MkProgress value={val} config={card} color={color}/>
          </div>
        </Col>
      )

 src/tabviews/zshare/actionList/normalbutton/index.jsx

@@ -680,7 +680,18 @@
  }

  execRealSubmit = (data, _resolve, formdata) => {
    const { setting, btn } = this.props
    const { setting, btn, Tab, BID } = this.props

    if (((Tab && Tab.supMenu) || setting.supModule) && !BID) {
      notification.warning({
        top: 92,
        message: '需要上级主键值！',
        duration: 5
      })
      _resolve()
      return
    }

    if (btn.intertype === 'system' || btn.intertype === 'inner') { // 系统接口
      let params = []