2022-02-22

king

2022-02-22 de516477e7c11d667b3d77f6a37b5df8e893bd29

2022-02-22

 src/assets/mobimg/voucher.jpg

 src/menu/components/module/voucher/index.jsx

New file
@@ -0,0 +1,164 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover } from 'antd'
import { EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons'

// import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
import MKEmitter from '@/utils/events.js'
import getWrapForm from './options'

import './index.scss'

const NormalForm = asyncIconComponent(() => import('@/components/normalform'))
// const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))

class Voucher extends Component {
  static propTpyes = {
    card: PropTypes.object,
    deletecomponent: PropTypes.func,
    updateConfig: PropTypes.func,
  }

  state = {
    card: null,
    back: false
  }

  UNSAFE_componentWillMount () {
    const { card } = this.props

    if (card.isNew) {
      let _card = {
        uuid: card.uuid,
        type: card.type,
        tabId: card.tabId || '',
        parentId: card.parentId || '',
        dataName: card.dataName || '',
        format: 'array',    // 组件属性 - 数据格式
        pageable: false,    // 组件属性 - 是否可分页
        switchable: false,  // 组件属性 - 数据是否可切换
        width: card.width || 12,
        name: '凭证',
        subtype: card.subtype,
        // setting: { interType: 'system' },
        wrap: { name: '凭证', title: '', width: card.width || 12, type: 'edit' },
        style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' },
        headerStyle: {},
        columns: [],
        scripts: [],
      }
      
      this.setState({
        card: _card
      })
      this.props.updateConfig(_card)
    } else {
      this.setState({
        card: fromJS(card).toJS()
      })
    }
  }

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

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

  /**
   * @description 组件销毁，清除state更新，清除快捷键设置
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('submitStyle', this.getStyle)
  }

  /**
   * @description 卡片行外层信息更新（数据源，样式等）
   */
  updateComponent = (component) => {
    this.setState({
      card: component
    })

    component.width = component.wrap.width
    component.name = component.wrap.name

    this.props.updateConfig(component)
  }

  changeStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin', 'shadow'], card.style)
  }

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

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

    let _card = {...card, style}

    this.setState({
      card: _card
    })
    
    this.props.updateConfig(_card)
  }

  /**
   * @description 更新搜索条件配置信息
   */
  updateconfig = (config) => {
    this.setState({
      card: config
    })
    this.props.updateConfig(config)
  }

  getWrapForms = () => {
    const { card } = this.state

    return getWrapForm(card.wrap, card.uuid)
  }

  updateWrap = (res) => {
    let _card = {...this.state.card, wrap: res}
    _card.switchable = res.type !== 'edit'

    this.updateComponent(_card)
  }

  render() {
    const { card } = this.state

    return (
      <div className="menu-voucher-box" style={card.style} id={card.uuid}>
        {/* <NormalHeader config={card} updateComponent={this.updateComponent}/> */}
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <NormalForm title="基本设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}>
              <EditOutlined style={{color: '#1890ff'}} title="编辑"/>
            </NormalForm>
            <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/>
            <DeleteOutlined className="close" title="删除组件" onClick={() => this.props.deletecomponent(card.uuid)} />
          </div>
        } trigger="hover">
          <ToolOutlined />
        </Popover>
        <div className="voucher-box">
          jjj
        </div>
      </div>
    )
  }
}

export default Voucher

 src/menu/components/module/voucher/index.scss

New file
@@ -0,0 +1,41 @@
.menu-voucher-box {
  position: relative;
  box-sizing: border-box;
  background: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 150px;
  overflow-y: auto;

  .anticon-tool {
    position: absolute;
    z-index: 2;
    font-size: 16px;
    right: 1px;
    top: 1px;
    cursor: pointer;
    padding: 5px;
    background: rgba(255, 255, 255, 0.55);
  }
  .empty-content {
    text-align: center;
    font-size: 30px;
    margin: 0;
    line-height: 90px;
    color: #bcbcbc;
  }
}
.menu-voucher-box::after {
  display: block;
  content: ' ';
  clear: both;
}
.menu-voucher-box:hover {
  z-index: 1;
  box-shadow: 0px 0px 4px #1890ff;
}
.menu-voucher-box::-webkit-scrollbar {
  display: none;
}


 src/menu/components/module/voucher/options.jsx

New file
@@ -0,0 +1,83 @@
import { fromJS } from 'immutable'
import MenuUtils from '@/utils/utils-custom.js'

/**
 * @description Wrap表单配置信息
 */
export default function (wrap, id) {
  let roleList = sessionStorage.getItem('sysRoles')
  let appType = sessionStorage.getItem('appType')

  let menu = fromJS(window.GLOB.customMenu).toJS()
  let modules = MenuUtils.getSupModules(menu.components, id) || []

  if (roleList) {
    try {
      roleList = JSON.parse(roleList)
    } catch (e) {
      roleList = []
    }
  } else {
    roleList = []
  }

  const wrapForm = [
    // {
    //   type: 'text',
    //   field: 'title',
    //   label: '标题',
    //   initval: wrap.title || '',
    //   required: false
    // },
    {
      type: 'radio',
      field: 'type',
      label: '类型',
      initval: wrap.type || 'edit',
      required: true,
      options: [
        {value: 'edit', label: '编辑'},
        {value: 'check', label: '查看'},
      ]
    },
    {
      type: 'text',
      field: 'name',
      label: '组件名称',
      initval: wrap.name || '',
      tooltip: '用于组件间的区分。',
      required: true
    },
    {
      type: 'number',
      field: 'width',
      label: '宽度',
      initval: wrap.width || 24,
      tooltip: '栅格布局，每行等分为24列。',
      min: 1,
      max: 24,
      precision: 0,
      required: true
    },
    {
      type: 'cascader',
      field: 'supModule',
      label: '上级组件',
      initval: wrap.supModule || [],
      required: false,
      options: modules,
      allowClear: true,
    },
    {
      type: 'multiselect',
      field: 'blacklist',
      label: '黑名单',
      initval: wrap.blacklist || [],
      required: false,
      options: roleList,
      forbid: !!appType
    },
  ]

  return wrapForm
} 

 src/menu/components/share/actioncomponent/actionform/index.jsx

@@ -296,7 +296,11 @@
      if (this.record.pageTemplate === 'custom') {
        shows.push('url', 'joint')
      } else if (this.record.pageTemplate === 'linkpage') {
        shows.push('linkmenu', 'joint')
        shows.push('linkmenu')

        if (Ot === 'requiredSgl') {
          shows.push('joint')
        }

        reRequired.linkmenu = true
        reTooltip.linkmenu = ''

 src/menu/menushell/card.jsx

@@ -26,6 +26,7 @@
const CodeSandbox = asyncComponent(() => import('@/menu/components/code/sandbox'))
const CustomChart = asyncComponent(() => import('@/menu/components/chart/chart-custom'))
const Timeline = asyncComponent(() => import('@/menu/components/timeline/normal-timeline'))
const Voucher = asyncComponent(() => import('@/menu/components/module/voucher'))

const Card = ({ id, card, moveCard, findCard, delCard, updateConfig }) => {
  const originalIndex = findCard(id).index
@@ -105,6 +106,8 @@
      return (<Timeline card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'chart') {
      return (<CustomChart card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    } else if (card.type === 'module' && card.subtype === 'voucher') {
      return (<Voucher card={card} updateConfig={updateConfig} deletecomponent={delCard}/>)
    }
  }
  return (

 src/menu/modulesource/option.jsx

@@ -25,6 +25,7 @@
import chart from '@/assets/mobimg/chart.png'
import tree from '@/assets/mobimg/tree.png'
import timeline from '@/assets/mobimg/timeline.png'
import Voucher from '@/assets/mobimg/voucher.jpg'

// 组件配置信息
export const menuOptions = [
@@ -57,4 +58,5 @@
  { type: 'menu', url: Editor, component: 'editor', subtype: 'brafteditor', title: '富文本', width: 24, forbid: ['billPrint'] },
  { type: 'menu', url: SandBox, component: 'code', subtype: 'sandbox', title: '自定义', width: 24 },
  { type: 'menu', url: group, component: 'group', subtype: 'normalgroup', title: '分组', width: 24, forbid: ['billPrint'] },
  { type: 'menu', url: Voucher, component: 'module', subtype: 'voucher', title: '凭证', width: 24, forbid: ['billPrint'] },
]

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

@@ -622,8 +622,8 @@

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

 src/tabviews/custom/components/module/voucher/index.jsx

New file
@@ -0,0 +1,67 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
// import { EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons'

// import MKEmitter from '@/utils/events.js'

import './index.scss'

class VoucherModule extends Component {
  static propTpyes = {
    BID: PropTypes.any,              // 父级Id
    config: PropTypes.object,        // 组件配置信息
  }

  state = {
    BID: '',                   // 主表ID
    config: null,              // 图表配置信息
    loading: false,            // 数据加载状态
    data: null,                // 数据
    searchkey: null,           // 过滤条件
  }

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

    this.setState({
      config: fromJS(config).toJS(),
      BID: BID || '',
    }, () => {
      this.loadData()
    })
  }

  componentDidMount () {

  }

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

  /**
   * @description 组件销毁，清除state更新，清除快捷键设置
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

  loadData = () => {

  }

  render() {
    const { config } = this.state

    return (
      <div className="menu-voucher-wrap" style={config.style}>
        
      </div>
    )
  }
}

export default VoucherModule

 src/tabviews/custom/components/module/voucher/index.scss

New file
@@ -0,0 +1,13 @@
.menu-voucher-wrap {
  position: relative;
  box-sizing: border-box;
  background: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 150px;
  overflow-y: auto;

}



 src/tabviews/custom/index.jsx

@@ -40,6 +40,7 @@
const PagemsgComponent = asyncComponent(() => import('@/tabviews/zshare/pageMessage'))
const CustomChart = asyncComponent(() => import('./components/chart/custom-chart'))
const TimeLine = asyncComponent(() => import('./components/timeline/normal-timeline'))
const Voucher = asyncComponent(() => import('./components/module/voucher'))

class CustomPage extends Component {
  static propTpyes = {
@@ -1170,6 +1171,12 @@
            <CustomChart config={item} data={data} BID={_bid} mainSearch={mainSearch} menuType={menuType} />
          </Col>
        )
      } else if (item.type === 'module' && item.subtype === 'voucher') {
        return (
          <Col span={item.width} key={item.uuid}>
            <Voucher config={item} BID={_bid} />
          </Col>
        )
      } else {
        return null
      }

 src/templates/zshare/verifycard/index.jsx

@@ -683,7 +683,7 @@

        if (_f.type.match(/date/ig)) {
          _type = 'datetime'
          _select.push(`@${_f.field}='1900-01-01'`)
          _select.push(`@${_f.field}='1949-10-01'`)
        } else if (_f.type === 'number') {
          _type = `decimal(18,${_fieldlen})`
          _select.push(`@${_f.field}=0`)

 src/templates/zshare/verifycard/index.scss

@@ -171,6 +171,7 @@
          }
          .code-mirror-area {
            border-radius: 0;
            width: calc(95vw - 240px);
          }
        }
        .sqlfield {

 src/utils/utils.js

@@ -1395,7 +1395,7 @@
        }
        _initFormfields.push(`@${_key}=${val}`)
      } else if (['date', 'datemonth', 'datetime'].includes(form.type)) {
        _initFormfields.push(`@${_key}='${form.value || '1900-01-01'}'`)
        _initFormfields.push(`@${_key}='${form.value || '1949-10-01'}'`)
      } else {
        _initFormfields.push(`@${_key}='${form.value}'`)
      }
@@ -1440,7 +1440,7 @@
        let _val = datavars.hasOwnProperty(_key) ? datavars[_key] : ''

        if (col.datatype && /^date/ig.test(col.datatype) && !_val) {
          _val = '1900-01-01'
          _val = '1949-10-01'
        }

        _initvars.push(_key)

 src/views/menudesign/index.jsx

@@ -936,6 +936,7 @@
          return
        }
        
        if (['voucher'].includes(item.subtype)) return
        if (['propcard', 'brafteditor', 'sandbox', 'stepform', 'tabform'].includes(item.subtype) && item.wrap.datatype === 'static') return
        if (['balcony'].includes(item.type) && item.wrap.datatype === 'static') return
  

 src/views/mobdesign/index.jsx

@@ -1406,6 +1406,7 @@
          swipes.push(item.name)
        }

        if (['voucher'].includes(item.subtype)) return
        if (['propcard', 'brafteditor', 'sandbox', 'tabbar', 'stepform', 'tabform'].includes(item.subtype) && item.wrap.datatype === 'static') return
        if (['balcony'].includes(item.type) && item.wrap.datatype === 'static') return
        if (['menubar'].includes(item.type) && item.wrap.datatype !== 'dynamic') return

 src/views/pcdesign/index.jsx

@@ -1500,6 +1500,7 @@
          return
        }
        
        if (['voucher'].includes(item.subtype)) return
        if (['propcard', 'brafteditor', 'sandbox', 'stepform', 'tabform'].includes(item.subtype) && item.wrap.datatype === 'static') return
        if (['balcony'].includes(item.type) && item.wrap.datatype === 'static') return