2020-11-11

king

2020-11-11 98ee5d4c76d2802c552851e46bd4bb43505b4416

 src/views/billprint/index.jsx

@@ -1,36 +1,30 @@
import React, { Component } from 'react'
import { DndProvider } from 'react-dnd'
import { is, fromJS } from 'immutable'
import HTML5Backend from 'react-dnd-html5-backend'
import { ConfigProvider, notification, Collapse, Card, Switch, Button } from 'antd'
import { connect } from 'react-redux'
import { Col, Row, Spin, notification } from 'antd'
import moment from 'moment'

import Api from '@/api'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/mob.js'
import enUS from '@/locales/en-US/mob.js'
import antdEnUS from 'antd/es/locale/en_US'
import antdZhCN from 'antd/es/locale/zh_CN'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import options from '@/store/options.js'
import NotFount from '@/components/404'
import asyncComponent from '@/utils/asyncComponent'

import './index.scss'

const { Panel } = Collapse
const _locale = localStorage.getItem('lang') !== 'en-US' ? antdZhCN : antdEnUS

const Header = asyncComponent(() => import('@/menu/header'))
const MenuForm = asyncComponent(() => import('@/menu/menuform'))
const SourceWrap = asyncComponent(() => import('@/menu/modelsource'))
const MenuShell = asyncComponent(() => import('@/menu/menushell'))
const BgController = asyncComponent(() => import('@/menu/bgcontroller'))
const PaddingController = asyncComponent(() => import('@/menu/padcontroller'))
const StyleController = asyncComponent(() => import('@/menu/stylecontroller'))
const ModalController = asyncComponent(() => import('@/menu/modalconfig/controller'))
const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))
// 通用组件
const AntvBarAndLine = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-bar-line'))
const AntvPie = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-pie'))
const DataCard = asyncComponent(() => import('@/tabviews/custom/components/card/data-card'))
const PropCard = asyncComponent(() => import('@/tabviews/custom/components/card/prop-card'))

class BillPrint extends Component {
  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    BID: '',
    data: '',
    tempId: '',
    config: null,
  }
@@ -40,7 +34,7 @@
      let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))

      this.setState({
        BID: param.id,
        BID: param.id || '',
        tempId: param.tempId,
      }, () => {
        this.getMenuParam()
@@ -67,9 +61,8 @@
    }
  }


  getMenuParam = () => {
    const { tempId } = this.state
    const { tempId, BID } = this.state

    let param = {
      func: 's_PrintTemplateMGetData',
@@ -83,14 +76,107 @@

    Api.getLocalConfig(param).then(result => {
      if (result.status) {
        // let config = null
        let config = ''

        // try {
        //   config = JSON.parse(window.decodeURIComponent(window.atob(result.ConfigParam)))
        // } catch (e) {
        //   console.warn('Parse Failure')
        //   config = null
        // }
        try {
          config = JSON.parse(window.decodeURIComponent(window.atob(result.ConfigParam)))
        } catch (e) {
          console.warn('Parse Failure')
          config = ''
        }

        setTimeout(() => { // 延时加载状态
          this.setState({
            loadingview: false
          })
        }, 1500)

        // 页面配置解析错误时提示
        if (!config) {
          this.setState({
            viewlost: true
          })
          return
        }

        // 页面未启用时，显示未启用页面
        if (!config.enabled) {
          this.setState({
            viewlost: true,
            lostmsg: this.state.dict['main.view.unenabled']
          })
          return
        }

        let params = []
        config.components = config.components.map(component => {
          if (['tabs', 'search'].includes(component.type)) return null
    
          if (component.action) component.action = []
          if (component.search) component.search = []
    
          if (!component.setting) return component // 不使用系统函数时
          if (!component.format || (component.subtype === 'propcard' && component.wrap.datatype === 'static')) return component // 没有动态数据  数据格式 array 或 object
          if (component.setting.interType !== 'system') { // 不使用系统函数时
            component.setting.sync = 'false'
            return component
          }
    
          let _customScript = ''
          component.scripts && component.scripts.forEach(script => {
            if (script.status !== 'false') {
              _customScript += `
              ${script.sql}
              `
            }
          })
          delete component.scripts
    
          component.setting.execute = component.setting.execute !== 'false'  // 默认sql是否执行，转为boolean 统一格式
          component.setting.laypage = false   // 是否分页，转为boolean 统一格式
          component.setting.onload = 'true'   // 默认加载
    
          if (!component.setting.execute) {
            component.setting.dataresource = ''
          }
          if (/\s/.test(component.setting.dataresource)) {
            component.setting.dataresource = '(' + component.setting.dataresource + ') tb'
          }
      
          if (this.props.dataManager) { // 数据权限
            component.setting.dataresource = component.setting.dataresource.replace(/\$@/ig, '/*')
            component.setting.dataresource = component.setting.dataresource.replace(/@\$/ig, '*/')
            _customScript = _customScript.replace(/\$@/ig, '/*')
            _customScript = _customScript.replace(/@\$/ig, '*/')
          } else {
            component.setting.dataresource = component.setting.dataresource.replace(/@\$|\$@/ig, '')
            _customScript = _customScript.replace(/@\$|\$@/ig, '')
          }

          component.setting.dataresource = component.setting.dataresource.replace(/@BID@/ig, BID)
          _customScript = _customScript.replace(/@BID@/ig, BID)
    
          component.setting.customScript = _customScript // 整理后自定义脚本
    
          // floor    组件的层级
          // dataName 系统生成的数据源名称
          // pageable 是否分页，组件属性，不分页的组件才可以统一查询
          if (component.dataName && component.setting.sync === 'true') {
            let param = this.getDefaultParam(component)
            params.push(param)
          } else {
            component.setting.sync = 'false'
          }
    
          return component
        })

        this.setState({
          setting: config.setting,
          config
        }, () => {
          this.loadmaindata(params)
        })
      } else {
        notification.warning({
          top: 92,
@@ -99,247 +185,160 @@
        })
      }
    })

    // Api.getSystemConfig(param).then(result => {
    //   if (result.status) {
    //     let config = null

    //     try {
    //       config = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam)))
    //     } catch (e) {
    //       console.warn('Parse Failure')
    //       config = null
    //     }

    //     if (!config) {
    //       config = {
    //         version: 1.0,
    //         uuid: MenuId,
    //         MenuID: MenuId,
    //         parentId: ParentId,
    //         Template: 'CustomPage',
    //         MenuType: MenuType,
    //         easyCode: '',
    //         enabled: false,
    //         MenuName: MenuName,
    //         MenuNo: MenuNo,
    //         tables: [],
    //         components: [],
    //         style: {
    //           backgroundColor: '#ffffff', backgroundImage: '',
    //           paddingTop: '16px', paddingBottom: '80px', paddingLeft: '16px', paddingRight: '16px'
    //         }
    //       }
    //     } else {
    //       config.uuid = MenuId
    //       config.MenuID = MenuId
    //       config.MenuType = config.MenuType || MenuType
    //     }

    //     if (MenuType === 'billPrint') {
    //       config.FstID = 'BillPrintTemp'
    //       config.SndID = 'BillPrintTemp'
    //       config.ParentID = 'BillPrintTemp'
    //     }

    //     this.setState({
    //       oriConfig: config,
    //       config: fromJS(config).toJS(),
    //       openEdition: result.open_edition || '',
    //     })

    //     this.getRoleFields()
    //   } else {
    //     notification.warning({
    //       top: 92,
    //       message: result.message,
    //       duration: 5
    //     })
    //   }
    // })
  }

  getRoleFields = () => {
    Api.getSystemConfig({func: 'sPC_Get_Roles_sModular'}).then(res => {
      if (res.status) {
        let _permFuncField = []
        let _sysRoles = []

        if (res.Roles && res.Roles.length > 0) {
          _sysRoles = res.Roles.map(role => {
            return {
              uuid: Utils.getuuid(),
              value: role.RoleID,
              text: role.RoleName
            }
          })
        }

        if (res.sModular && res.sModular.length > 0) {
          res.sModular.forEach(field => {
            if (field.ModularNo) {
              _permFuncField.push(field.ModularNo)
            }
          })
          _permFuncField = _permFuncField.sort()
        }

        let config = {...this.state.config, sysRoles: _sysRoles, permFuncField: _permFuncField}

        this.setState({config})
      }
    })
  }

  initMenuList = (msg) => {
    let config = {...this.state.config, ...msg}

    this.setState({config})
  }

  onEnabledChange = () => {
    const { config } = this.state

    if (!config.enabled && this.verifyConfig(true)) {
      return
    }

    this.setState({
      config: {...config, enabled: !config.enabled}
    })
  }

  verifyConfig = (show) => {
    const { config } = this.state
    let error = ''

    if (!config.MenuID) {
      notification.warning({
        top: 92,
        message: '请完善菜单基本信息！',
        duration: 5
      })
      return
    } else if (config.MenuType === 'custom' && (!config.MenuName || !config.MenuNo || !config.fstMenuId || !config.parentId)) {
      notification.warning({
        top: 92,
        message: '请完善菜单基本信息！',
        duration: 5
      })
      return
    }

    config.components.forEach(item => {
      if (error) return
      if (item.subtype === 'propcard' && item.wrap.datatype === 'static') return

      if (item.setting) {
        if (item.setting.interType === 'system' && item.setting.execute !== 'false' && !item.setting.dataresource) {
          error = `组件《${item.name}》未设置数据源！`
        } else if (item.setting.interType === 'system' && item.setting.execute === 'false' && item.scripts.length === 0) {
          error = `组件《${item.name}》未设置数据源！`
        } else if (item.setting.interType && !item.setting.primaryKey) {
          error = `组件《${item.name}》未设置主键！`
        }
      }
      if (item.type === 'bar' || item.type === 'line' || item.type === 'pie') {
        if (!item.plot.Xaxis) {
          error = `组件《${item.name}》图表字段尚未设置！`
        }
      }
    })

    if (show && error) {
      notification.warning({
        top: 92,
        message: error,
        duration: 5
      })
    }

    return error
  }

  // 更新配置信息
  updateConfig = (config) => {
    this.setState({
      config: config
    })
  }

  /**
   * @description 更新常用表信息，快捷添加后更新配置信息
   * @description 获取系统存储过程 sPC_Get_TableData 的参数
   */
  updatetable = (config, fields) => {
    const { tableFields } = this.state
  getDefaultParam = (component) => {
    const { columns, setting, dataName, format } = component
    
    let arr_field = columns.map(col => col.field)
    let _dataresource = setting.dataresource
    let _customScript = setting.customScript

    config.tableFields = fields ? fields : tableFields
    if (setting.order && _dataresource) {
      _dataresource = `select top 1000 ${arr_field.join(',')} from (select ${arr_field.join(',')} ,ROW_NUMBER() over(order by ${setting.order}) as rows from ${_dataresource}) tmptable order by tmptable.rows `
    } else if (_dataresource) {
      _dataresource = `select top 1000 ${arr_field.join(',')} from ${_dataresource} `
    }

    this.setState({
      tableFields: fields ? fields : tableFields,
      config
    // 测试系统打印查询语句
    if ((options.sysType === 'local' && !window.GLOB.systemType) || window.debugger === true) {
      _customScript &&  console.log(`${_dataresource ? '' : '/*不执行默认sql*/\n'}${_customScript}`)
      _dataresource &&  console.log(_dataresource)
    }

    return {
      name: dataName,
      columns: columns,
      par_tablename: '',
      type: format === 'array' ? format : '',
      primaryKey: setting.primaryKey || '',
      foreign_key: '',
      sql: _dataresource,
      script: _customScript
    }
  }

  /**
   * @description 主表数据加载
   */ 
  loadmaindata = (params) => {
    if (!params || params.length === 0) return
    let LText_field = []
    let LText = params.map((item, index) => {
      let _sql = item.sql
      let _script = item.script

      if (index === 0) {
        _script = `declare @ErrorCode nvarchar(50),@retmsg nvarchar(4000) select @ErrorCode='',@retmsg =''
          ${_script}
        `
      }

      item.columns.forEach(cell => {
        LText_field.push(`Select '${item.name}' as tablename,'${cell.field}' as fieldname,'${cell.datatype}' as field_type`)
      })
      return `Select '${item.name}' as tablename,'${window.btoa(window.encodeURIComponent(_sql))}' as LText,'${window.btoa(window.encodeURIComponent(_script))}' as Lcustomize,'${item.type}' as table_type,'${item.primaryKey}' as primary_key,'${item.par_tablename}' as par_tablename,'${item.foreign_key}' as foreign_key,'${index}' as Sort`
    })

    let param = {
      func: 'sPC_Get_structured_data',
      LText: LText.join(' union all '),
      LText_field: LText_field.join(' union all ')
    }

    param.LText = Utils.formatOptions(param.LText)
    param.LText_field = Utils.formatOptions(param.LText_field)
    param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
    param.secretkey = Utils.encrypt(param.LText, param.timestamp)

    Api.getLocalConfig(param).then(result => {
      if (result.status) {
        delete result.status
        delete result.message
        delete result.ErrMesg
        delete result.ErrCode

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

  render () {
    const { activeKey, MenuType, dict, MenuId, config, ParentId, MenuName, MenuNo, menuloading } = this.state
  getComponents = () => {
    const { dataManager } = this.props
    const { config, BID, data } = this.state

    if (!config || !config.components) return

    return config.components.map(item => {
      if (!item) return null

      if (item.type === 'bar' || item.type === 'line') {
        return (
          <Col span={item.width} key={item.uuid}>
            <AntvBarAndLine config={item} data={data} BID={BID} mainSearch={[]} menuType="" dataManager={dataManager} />
          </Col>
        )
      } else if (item.type === 'pie') {
        return (
          <Col span={item.width} key={item.uuid}>
            <AntvPie config={item} data={data} BID={BID} mainSearch={[]} menuType="" dataManager={dataManager} />
          </Col>
        )
      } else if (item.type === 'card' && item.subtype === 'datacard') {
        return (
          <Col span={item.width} key={item.uuid}>
            <DataCard config={item} data={data} BID={BID} mainSearch={[]} menuType="" dataManager={dataManager} />
          </Col>
        )
      } else if (item.type === 'card' && item.subtype === 'propcard') {
        return (
          <Col span={item.width} key={item.uuid}>
            <PropCard config={item} data={data} BID={BID} mainSearch={[]} menuType="" dataManager={dataManager} />
          </Col>
        )
      } else {
        return null
      }
    })
  }

  render() {
    const { loadingview, viewlost, config } = this.state

    return (
      <ConfigProvider locale={_locale}>
        <div className="pc-menu-view" id="view">
          <Header view="design" closeView={this.closeView} />
          <DndProvider backend={HTML5Backend}>
            <div className="menu-body">
              <div className="menu-setting">
                <Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}>
                  {/* 基本信息 */}
                  <Panel header={dict['mob.basemsg']} key="basedata">
                    {/* 菜单信息 */}
                    {config && MenuType === 'custom' ? <MenuForm
                      dict={dict}
                      config={config}
                      MenuId={MenuId}
                      parentId={ParentId}
                      MenuName={MenuName}
                      MenuNo={MenuNo}
                      initMenuList={this.initMenuList}
                      updateConfig={this.updateConfig}
                    /> : null}
                    {/* 表名添加 */}
                    {config ? <TableComponent config={config} updatetable={this.updatetable}/> : null}
                  </Panel>
                  {/* 组件添加 */}
                  <Panel header={dict['mob.component']} key="component">
                    <SourceWrap MenuType={MenuType} />
                  </Panel>
                  <Panel header={'背景'} key="background">
                    {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null}
                  </Panel>
                  <Panel header={'内边距'} key="padding">
                    {config ? <PaddingController config={config} updateConfig={this.updateConfig} /> : null}
                  </Panel>
                </Collapse>
              </div>
              <div className={'menu-view ' + (menuloading ? 'saving' : '')}>
                <Card title={
                  <div> {config && config.MenuName} </div>
                } bordered={false} extra={
                  <div>
                    {config ? <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config.enabled} onChange={this.onEnabledChange} /> : null}
                    <Button type="primary" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button>
                  </div>
                } style={{ width: '100%' }}>
                  {config && config.components ? <MenuShell menu={config} handleList={this.updateConfig} /> : null}
                </Card>
              </div>
            </div>
          </DndProvider>
          <StyleController />
          <ModalController />
        </div>
      </ConfigProvider>
      <div className="custom-page-wrap" id={this.state.ContainerId} style={config ? config.style : null}>
        {loadingview && <Spin size="large" />}
        <Row>{this.getComponents()}</Row>
        {viewlost ? <NotFount msg={this.state.lostmsg} /> : null}
      </div>
    )
  }
}

export default BillPrint
const mapStateToProps = (state) => {
  return {
    dataManager: state.dataManager
  }
}

const mapDispatchToProps = () => {
  return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(BillPrint)