2021-03-23

king

2021-03-23 decf1f6555b6e003860401a692faea259cc565af

2021-03-23

 src/menu/components/form/formaction/actionform/index.jsx

@@ -46,6 +46,13 @@
  }

  getOptions = (_intertype, _procMode) => {
    const { card } = this.props

    if (card.type === 'prev') {
      return ['type', 'label']
    } else if (card.type === 'next') {
      return ['type', 'label', 'enable']
    }
    let _options = ['type', 'label', 'intertype', 'syncComponent', 'linkmenu', 'open'] // 选项列表
    
    if (_intertype === 'custom') {
@@ -326,12 +333,10 @@
  }

  handleConfirm = () => {
    const { card } = this.props
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.verify = card.verify || null
          resolve(values)
        } else {
          reject(err)

 src/menu/components/form/formaction/formconfig.jsx

@@ -273,6 +273,20 @@
      tooltip: '执行成功后需要刷新的组件。',
      required: false,
      options: modules
    }
    },
    {
      type: 'radio',
      key: 'enable',
      label: '是否显示',
      initVal: card.enable || 'false',
      required: false,
      options: [{
        value: 'true',
        text: '显示'
      }, {
        value: 'false',
        text: '隐藏'
      }]
    },
  ]
}

 src/menu/components/form/formaction/index.jsx

@@ -26,7 +26,6 @@
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    card: null,          // 编辑中元素
    formlist: null,      // 表单信息
    elements: null,      // 按钮组
    visible: false,      // 模态框控制
    profVisible: false,  // 验证信息编辑
  }
@@ -130,38 +129,28 @@
   * @description 元素修改后提交保存
   */
  handleActionSubmit = () => {
    const { elements } = this.state
    let color = { primary: '#1890ff', yellow: '#c49f47', orange: 'orange', danger: '#ff4d4f', green: '#26C281', dgreen: '#32c5d2', purple: '#8E44AD', cyan: '#13c2c2', gray: '#666666' }
    const { card } = this.state

    this.actionFormRef.handleConfirm().then(res => {
      let _elements = elements.map(cell => {
        if (cell.uuid === res.uuid) {
          res = {...cell, ...res}
          delete res.focus
          let btnstyle = {}
      res.type = card.type
      if (card.verify) {
        res.verify = card.verify
      }

          if (res.class !== cell.class || res.show !== cell.show || !res.btnstyle) {
            if (res.show === 'link' || res.show === 'icon') {
              btnstyle.color = color[res.class]
              btnstyle.backgroundColor = 'transparent'
            } else {
              btnstyle.color = '#ffffff'
              btnstyle.backgroundColor = color[res.class]
            }
          }
          res.btnstyle = {...res.btnstyle, ...btnstyle}
      let group = fromJS(this.props.group).toJS()

          return res
        }
        return cell
      })
      if (res.type === 'prev') {
        group.prevButton = res
      } else if (res.type === 'submit') {
        group.subButton = res
      } else if (res.type === 'next') {
        group.nextButton = res
      }

      this.setState({
        elements: _elements,
        visible: false
      }, () => {
        this.props.updateElement(_elements)
      })
      this.props.updateconfig(group)
    })
  }

@@ -178,23 +167,15 @@
   * @description 验证信息保存
   */
  verifySubmit = () => {
    const { elements, card } = this.state

    this.verifyRef.handleConfirm().then(res => {
      let _elements = elements.map(cell => {
        if (cell.uuid === card.uuid) {
          cell.verify = res
        }
      let group = fromJS(this.props.group).toJS()

        return cell
      })
      group.subButton.verify = res

      this.setState({
        elements: _elements,
        profVisible: false
      }, () => {
        this.props.updateElement(_elements)
      })
      this.props.updateconfig(group)
    })
  }

@@ -221,14 +202,14 @@
        } trigger="hover">
          <Button type="link" className="submit mk-primary" style={group.subButton.style}>{group.subButton.label}</Button>
        </Popover>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
        {group.sort !== config.subcards.length ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <Icon className="edit" title="编辑" type="edit" onClick={() => this.handleAction(group.nextButton)} />
            <Icon className="style" title="调整样式" onClick={() => this.handleStyle(group.nextButton)} type="font-colors" />
          </div>
        } trigger="hover">
          <Button type="link" className="skip" style={group.nextButton.style}>{group.nextButton.label}</Button>
        </Popover>
          <Button type="link" className={'skip ' + group.nextButton.enable} style={group.nextButton.style}>{group.nextButton.label}</Button>
        </Popover> : null}
        {/* 编辑按钮：复制、编辑 */}
        <Modal
          title={dict['model.edit']}
@@ -244,7 +225,6 @@
        >
          <ActionForm
            dict={dict}
            type="card"
            card={card}
            setting={config.setting}
            formlist={this.state.formlist}
@@ -265,7 +245,7 @@
          destroyOnClose
        >
          <VerifyCard
            card={group.subButton}
            card={{...group.subButton, modal: {fields: group.fields}}}
            dict={dict}
            config={config}
            columns={config.columns}

 src/menu/components/form/formaction/index.scss

@@ -14,4 +14,9 @@
    position: absolute;
    right: 5px;
  }
  .skip:not(.true) {
    span {
      text-decoration: line-through;
    }
  }
}

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

New file
@@ -0,0 +1,343 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { connect } from 'react-redux'
import { Spin, notification } from 'antd'
// import moment from 'moment'

import Api from '@/api'
// import Utils from '@/utils/utils.js'
import UtilsDM from '@/utils/utils-datamanage.js'
// import asyncComponent from '@/utils/asyncComponent'
import asyncSpinComponent from '@/utils/asyncSpinComponent'
import MKEmitter from '@/utils/events.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import { modifyTabview } from '@/store/action'
import './index.scss'

const MutilForm = asyncSpinComponent(() => import('@/tabviews/zshare/mutilform'))

class NormalForm extends Component {
  static propTpyes = {
    BID: PropTypes.any,              // 父级Id
    data: PropTypes.array,           // 统一查询数据
    config: PropTypes.object,        // 组件配置信息
    mainSearch: PropTypes.any,       // 外层搜索条件
    menuType: PropTypes.any,         // 菜单类型
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    BID: '',                   // 上级ID
    config: null,              // 图表配置信息
    loading: false,            // 数据加载状态
    activeKey: '',             // 选中数据
    sync: false,               // 是否统一请求数据
    data: {},                  // 数据
    group: null
  }

  UNSAFE_componentWillMount () {
    const { data, BID, config } = this.props

    let _data = {}
    let _sync = false
    
    if (config.setting && config.wrap.datatype !== 'static') {
      _sync = config.setting.sync === 'true'

      if (_sync && data) {
        _data = data[config.dataName] || {}
        if (_data && Array.isArray(_data)) {
          _data = _data[0] || {}
        }
        _sync = false
      }
    } else {
      _data = {}
    }

    this.setState({
      sync: _sync,
      data: _data,
      group: config.subcards[0],
      BID: BID || '',
      config: config,
      arr_field: config.columns.map(col => col.field).join(','),
    }, () => {
      if (config.wrap.datatype !== 'static' && config.setting && config.setting.sync !== 'true' && config.setting.onload === 'true') {
        this.loadData()
      }
    })
  }

  componentDidMount () {
    MKEmitter.addListener('reloadData', this.reloadData)
    MKEmitter.addListener('resetSelectLine', this.resetParentParam)
    MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult)
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('reloadData', this.reloadData)
    MKEmitter.removeListener('resetSelectLine', this.resetParentParam)
    MKEmitter.removeListener('refreshByButtonResult', this.refreshByButtonResult)
  }

  /**
   * @description 图表数据更新，刷新内容
   */
  UNSAFE_componentWillReceiveProps (nextProps) {
    const { sync, config } = this.state

    if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) {
      let _data = {}
      if (nextProps.data && nextProps.data[config.dataName]) {
        _data = nextProps.data[config.dataName]
        if (_data && Array.isArray(_data)) {
          _data = _data[0]
        }
      }

      this.setState({sync: false, data: _data})
    } else if (nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) {
      if (config.wrap.datatype !== 'static' && config.setting.syncRefresh === 'true') {
        this.setState({}, () => {
          this.loadData()
        })
      }
    }
  }

  /**
   * @description 按钮执行完成后页面刷新
   * @param {*} menuId     // 菜单Id
   * @param {*} position   // 刷新位置
   * @param {*} btn        // 执行的按钮
   */
  refreshByButtonResult = (menuId, position, btn) => {
    const { config, BID } = this.state

    if (config.uuid !== menuId) return

    this.loadData()                                                            // 数据刷新

    if (btn.syncComponentId && btn.syncComponentId !== config.uuid && btn.syncComponentId !== config.setting.supModule) {
      MKEmitter.emit('reloadData', btn.syncComponentId)                        // 同级标签刷新
    }

    if (position === 'mainline' && config.setting.supModule) {                 // 主表行刷新
      MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty'))
    } else if (position === 'popclose') {                                      // 标签关闭刷新
      config.setting.supModule && MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty'))
      btn.$tabId && MKEmitter.emit('refreshPopButton', btn.$tabId)
    }
  }

  resetParentParam = (MenuID, id) => {
    const { config } = this.state

    if (config.wrap.datatype === 'static' || !config.setting.supModule || config.setting.supModule !== MenuID) return
    if (id !== this.state.BID) {
      this.setState({ BID: id }, () => {
        this.loadData()
      })
    }
  }

  reloadData = (menuId) => {
    const { config } = this.state

    if (menuId !== config.uuid) return

    this.loadData()
  }

  async loadData (hastimer) {
    const { mainSearch, menuType } = this.props
    const { config, arr_field, BID } = this.state

    if (config.wrap.datatype === 'static') {
      this.setState({
        data: {},
        loading: false
      })
      return
    } else if (config.setting.supModule && !BID) { // BID 不存在时，不做查询
      this.setState({
        data: {},
        loading: false
      })
      return
    }

    let searches = []
    if (mainSearch && mainSearch.length > 0) { // 主表搜索条件
      let keys = searches.map(item => item.key)
      mainSearch.forEach(item => {
        if (!keys.includes(item.key)) {
          searches.push(item)
        }
      })
    }

    if (!hastimer) {
      this.setState({
        loading: true
      })
    }

    let _orderBy = config.setting.order || ''
    let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, 1, 1, BID, menuType)

    let result = await Api.genericInterface(param)
    if (result.status) {
      let _data = result.data && result.data[0] ? result.data[0] : {}

      this.setState({
        activeKey: '',
        data: _data,
        loading: false
      })
    } else {
      this.setState({
        loading: false,
      })
      notification.error({
        top: 92,
        message: result.message,
        duration: 10
      })
    }
  }

  changeCard = (index, item) => {
    const { config, data, activeKey } = this.state

    this.openView(item)

    if (!config.wrap.cardType || activeKey === index) return

    this.setState({
      activeKey: index
    })

    MKEmitter.emit('resetSelectLine', config.uuid, (item.setting.primaryId || ''), data)
  }

  openView = (item) => {
    if (item.setting.click === 'menu') {
      let menu = null

      if (item.setting.menu && item.setting.menu.length > 0) {
        let menu_id = item.setting.menu.slice(-1)[0]
        menu = this.props.permMenus.filter(m => m.MenuID === menu_id)[0] || ''
      }

      if (!menu) {
        notification.warning({
          top: 92,
          message: '菜单已删除或没有访问权限！',
          duration: 5
        })
        return
      }

      let newtab = {
        ...menu,
        selected: true,
        param: {}
      }

      if (item.setting.joint === 'true') {
        newtab.param.BID = item.setting.primaryId
      }

      if (['linkage_navigation', 'linkage'].includes(window.GLOB.navBar)) {
        this.props.modifyTabview([newtab])
      } else {
        let tabs = this.props.tabviews.filter((tab, i) => {
          tab.selected = false
          return tab.MenuID !== newtab.MenuID
        })

        if (this.props.tabviews.length !== tabs.length) {
          this.props.modifyTabview(fromJS(tabs).toJS())
        }

        this.setState({}, () => {
          tabs.push(newtab)
          this.props.modifyTabview(tabs)
        })
      }
    } else if (item.setting.click === 'link') {
      let src = item.setting.linkurl

      if (item.setting.joint === 'true') {
        let con = '?'

        if (/\?/ig.test(src)) {
          con = '&'
        }

        src = src + `${con}id=${item.setting.primaryId}&appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}`
      }

      window.open(src)
    }
  }


  render() {
    const { config, loading, BID, data, group } = this.state

    return (
      <div className="custom-normal-form-box" style={{...config.style}}>
        {loading ?
          <div className="loading-mask">
            <div className="ant-spin-blur"></div>
            <Spin />
          </div> : null
        }
        {config.subcards.length > 1 ? <div className="mk-normal-form-title">
          {config.subcards.map(card => (
            <div key={card.uuid} className="form-title">
              <span className="form-sort">{card.sort}</span>
              {card.setting.title}
            </div>))
          }
        </div> : null}
        <MutilForm
          BID={BID}
          data={data}
          dict={this.state.dict}
          action={group}
          inputSubmit={this.handleOk}
          wrappedComponentRef={(inst) => this.formRef = inst}
        />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    permMenus: state.permMenus,
    tabviews: state.tabviews,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(NormalForm)

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

New file
@@ -0,0 +1,69 @@
.custom-normal-form-box {
  background: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

  .mk-normal-form-title {
    display: flex;
    line-height: 30px;
    min-height: 50px;
    margin-bottom: 20px;
    .form-title {
      position: relative;
      flex: 1;
      text-align: center;
      .form-sort {
        background: #d8d8d8;
        display: block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 20px;
        text-align: center;
        color: #ffffff;
        margin: 10px auto 0px;
        position: relative;
        z-index: 1;
      }
    }
    .form-title:not(:first-child)::before {
      position: absolute;
      content: ' ';
      display: inline-block;
      width: 100%;
      height: 2px;
      background: #d8d8d8;
      left: -50%;
      top: 18px;
    }
  }
  
  .loading-mask {
    position: absolute;
    left: 40px;
    top: 0;
    right: 40px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
    z-index: 1;

    .ant-spin-blur {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      background: #ffffff;
    }
  }
}

.custom-card-box::after {
  content: ' ';
  display: block;
  clear: both;
}

 src/tabviews/custom/index.jsx

@@ -23,6 +23,7 @@
const AntvTabs = asyncComponent(() => import('./components/tabs/antv-tabs'))
const DataCard = asyncComponent(() => import('./components/card/data-card'))
const PropCard = asyncComponent(() => import('./components/card/prop-card'))
const NormalForm = asyncComponent(() => import('./components/form/normal-form'))
const CarouselDataCard = asyncComponent(() => import('./components/carousel/data-card'))
const CarouselPropCard = asyncComponent(() => import('./components/carousel/prop-card'))
const TableCard = asyncComponent(() => import('./components/card/table-card'))
@@ -973,6 +974,12 @@
            <AntvPie config={item} data={data} BID={_bid} mainSearch={mainSearch} menuType={menuType} />
          </Col>
        )
      } else if (item.type === 'form') {
        return (
          <Col span={item.width} key={item.uuid}>
            <NormalForm config={item} data={data} BID={_bid} mainSearch={mainSearch} menuType={menuType} />
          </Col>
        )
      } else if (item.type === 'search') {
        return (
          <Col span={item.width} key={item.uuid}>

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

@@ -433,12 +433,17 @@
      let _header = []
      let _topRow = {}
      let colwidth = []
      let abses = []

      btn.verify.columns.forEach(col => {
        if (_topRow[col.Column]) return

        _header.push(col.Column)
        _topRow[col.Column] = col.Text

        if (col.abs === 'true') {
          abses.push(col.Column)
        }

        colwidth.push({width: col.Width || 20})
      })
@@ -447,14 +452,29 @@

      table.push(_topRow)

      data && data.forEach(item => {
        let _row = {}
        _header.forEach(field => {
          _row[field] = item[field]
      if (data && abses.length > 0) {
        data.forEach(item => {
          let _row = {}
          _header.forEach(field => {
            if (item[field] && abses.includes(field)) {
              _row[field] = Math.abs(item[field])
            } else {
              _row[field] = item[field]
            }
          })
  
          table.push(_row)
        })

        table.push(_row)
      })
      } else if (data) {
        data.forEach(item => {
          let _row = {}
          _header.forEach(field => {
            _row[field] = item[field]
          })
  
          table.push(_row)
        })
      }

      const ws = XLSX.utils.json_to_sheet(table, {header: _header, skipHeader: true})


 src/templates/sharecomponent/actioncomponent/verifyexcelout/index.jsx

@@ -50,6 +50,25 @@
        max: 200,
        editable: true,
        width: '25%'
      },
      {
        title: '取绝对值',
        dataIndex: 'abs',
        inputType: 'select',
        editable: true,
        required: false,
        width: '25%',
        render: (text) => {
          if (text === 'true') {
            return '是'
          } else {
            return '否'
          }
        },
        options: [
          {value: 'true', text: '是'},
          {value: 'false', text: '否'}
        ]
      }
    ]
  }
@@ -64,21 +83,6 @@

    _verify.enable = _verify.enable || 'false'
    _verify.columns = _verify.columns || []

    // 同步显示列
    // if (!_verify.columns || _verify.columns.length === 0) {
    //   _verify.columns = []
    //   config.columns.forEach(item => {
    //     if (!item.field) return
  
    //     _verify.columns.push({
    //       Column: item.field,
    //       Text: item.label,
    //       Width: 20,
    //       uuid: Utils.getuuid()
    //     })
    //   })
    // }

    if (card.intertype !== 'system') {
      _verify.enable = 'false'
@@ -159,6 +163,7 @@
      return
    }
    values.uuid = Utils.getuuid()
    values.abs = 'false'
    verify.columns.push(values)

    this.setState({
@@ -364,6 +369,7 @@
        Column: item.field,
        Text: item.label,
        Width: 20,
        abs: 'false',
        uuid: Utils.getuuid()
      })
    })