2023-07-19

king

2023-07-19 e7062fee38bd54850e521ae7498275bc0f370702

 src/mob/modalconfig/index.jsx

@@ -4,13 +4,11 @@
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import moment from 'moment'
import { Button, Modal, Collapse, notification, Switch } from 'antd'
import { Button, Modal, Collapse, notification, Switch, message } from 'antd'
import { LeftOutlined } from '@ant-design/icons'

import Api from '@/api'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import { getModalForm } from '@/templates/zshare/formconfig'

import SourceElement from '@/templates/modalconfig/dragelement/source'
@@ -22,9 +20,9 @@

const { Panel } = Collapse
const { confirm } = Modal
const CommonDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const PasteComponent = asyncComponent(() => import('./pastecomponent'))
const TableComponent = asyncComponent(() => import('@/menu/modalconfig/tablecomponent'))
const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform'))
const PasteForms = asyncComponent(() => import('@/menu/components/share/pasteforms'))
const DragElement = asyncComponent(() => import('@/mob/components/formdragelement'))
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))

@@ -36,7 +34,6 @@
  }

  state = {
    dict: CommonDict,      // 字典
    config: null,          // 页面配置，包括模板类型、模态框设置、添加表名、表单列表
    visible: false,        // 表单编辑模态框，显示控制
    formlist: null,        // 表单编辑模态框，可编辑字段
@@ -65,6 +62,8 @@
  }

  componentDidMount () {
    window.GLOB.formId = ''
    MKEmitter.addListener('submitStyle', this.getStyle)
    MKEmitter.addListener('completeSave', this.completeSave)
  }

@@ -75,11 +74,30 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('submitStyle', this.getStyle)
    MKEmitter.removeListener('completeSave', this.completeSave)
  }

  completeSave = () => {
    this.setState({saving: false})
  }

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

    if (comIds[0] !== 'form') return

    let Index = config.fields.findIndex(n => n.uuid === comIds[1])

    if (Index === -1) return
    
    let _config = fromJS(config).toJS()

    _config.fields[Index].style = style

    this.setState({
      config: _config
    })
  }

  /**
@@ -111,7 +129,7 @@
   * 3、设置编辑参数项-formlist
   */
  handleForm = (_card) => {
    const { componentConfig } = this.props
    const { componentConfig, btn } = this.props
    const { config } = this.state
    let card = fromJS(_card).toJS()
    let _inputfields = []
@@ -119,59 +137,49 @@
    let _linkableFields = []
    let _linksupFields = []
    let standardform = null

    let uniq = new Map()
    let index = null
    uniq.set(card.field, true)

    let _inputIndex = 1
    let _tabIndex = 1
    let _linkIndex = 1
    config.fields.forEach((item, i) => {
      if (card.uuid === item.uuid) {
        index = i
      }

      if (['text', 'number', 'textarea', 'color'].includes(item.type) && card.field !== item.field) {
      if (!item.field || card.field === item.field) return

      if (['text', 'number', 'textarea', 'color'].includes(item.type)) {
        _inputfields.push({
          field: item.field,
          label: _inputIndex + '、' + item.label
          label: item.label
        })
        _inputIndex++
      }
      if (card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) {
      if (item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type)) {
        _tabfields.push({
          field: item.field,
          label: _tabIndex + '、' + item.label
          label: item.label
        })
        _tabIndex++
      }

      if (item.type === 'switch') {
      if (item.type === 'switch' || item.type === 'check') {
        _linksupFields.push({
          field: item.field,
          label: _linkIndex + '、' + item.label
          label: item.label
        })
      }

      if (!['select', 'link', 'radio', 'checkcard'].includes(item.type)) return
      if (item.type === 'checkcard' && item.multiple === 'true') return // 选项卡多选
      if (item.field && !uniq.has(item.field)) {
        uniq.set(item.field, true)

        _linkableFields.push({
          field: item.field,
          label: _linkIndex + '、' + item.label + ' (表单)'
        })
        _linksupFields.push({
          field: item.field,
          label: _linkIndex + '、' + item.label
        })
        _linkIndex++
      }
      _linksupFields.push({
        field: item.field,
        label: item.label
      })

      if (item.type === 'checkcard' && item.multiple === 'true') return

      _linkableFields.push({
        field: item.field,
        label: item.label + '-表单'
      })
    })

    _tabfields.unshift({field: '', label: '原表单'})

    if (index !== null) {
      if (index === 0) {
@@ -181,15 +189,18 @@
      }
    }

    componentConfig.columns.forEach(col => {
      if (col.field && !uniq.has(col.field)) {
        uniq.set(col.field, true)
    let columns = componentConfig.columns
    if (btn.$sub) {
      columns = componentConfig.subColumns || []
    }

    let _fields = _linkableFields.map(cell => cell.field)
    columns.forEach(col => {
      if (col.field && !_fields.includes(col.field)) {
        _linkableFields.push({
          field: col.field,
          label: _linkIndex + '、' + col.label + ' (显示列)'
          label: col.label + '-显示列'
        })
        _linkIndex++
      }
    })

@@ -198,16 +209,11 @@
      card.linkSubField = card.linkSubField.filter(item => fields.includes(item))
    }

    if (!card.span && standardform && standardform.span) {
      card.span = standardform.span
      card.labelwidth = standardform.labelwidth
    }

    this.setState({
      standardform,
      visible: true,
      card: card,
      formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields)
      formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields, columns)
    })
  }

@@ -227,7 +233,12 @@
          fieldrepet = true
        }

        delete item.focus

        if (item.uuid === res.uuid) {
          if (item.style) {
            res.style = item.style
          }
          return res
        } else {
          return item
@@ -243,6 +254,8 @@
        return
      }

      window.GLOB.formId = res.uuid

      if (['select', 'multiselect', 'link', 'checkbox', 'radio', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) {
        this.setState({
          sqlVerifing: true
@@ -251,20 +264,22 @@
        let param = {
          func: 's_debug_sql',
          exec_type: 'y',
          LText: res.dataSource
          LText: `declare @mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20)
            ${res.dataSource}`
        }

        param.LText = param.LText.replace(/@\$|\$@/ig, '')
        param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
        param.LText = param.LText.replace(/@\$|\$@/ig, '').replace(/@(BID|ID|LoginUID|SessionUid|UserID|Appkey|time_id)@/ig, `'${param.timestamp}'`)
        param.LText = param.LText.replace(/\n/g, ' ')
        
        param.LText = Utils.formatOptions(param.LText)
        param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
        param.secretkey = Utils.encrypt('', param.timestamp)

        if (window.GLOB.mainSystemApi && res.database === 'sso') {
          param.rduri = window.GLOB.mainSystemApi
        }
        
        Api.getLocalConfig(param).then(result => {
        Api.genericInterface(param).then(result => {
          if (result.status) {
            this.setState({
              sqlVerifing: false,
@@ -397,12 +412,46 @@
    })
  }

  insert = (config) => {
  pasteFields = (items) => {
    let _config = fromJS(this.state.config).toJS()
    _config.fields = items

    this.setState({
      config
    }, () => {
      this.handleForm(config.fields[config.fields.length - 1])
      config: _config
    })
  }

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

    let val = {
      copyType: 'forms',
      fields: config.fields || []
    }

    if (val.fields.length === 0) {
      message.warning('表单元素不可为空！')
      return
    }

    try {
      val = window.btoa(window.encodeURIComponent(JSON.stringify(val)))
    } catch (e) {
      console.warn(e)
      message.warning('复制失败，请重试！')
      val = ''
    }

    if (val) {
      let oInput = document.createElement('input')
      oInput.value = val
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      document.body.removeChild(oInput)

      message.success('复制成功。')
    }
  }

  clearConfig = () => {
@@ -419,14 +468,18 @@
  }

  render () {
    const { config, dict, saving } = this.state
    const { btn } = this.props
    const { config, saving, card } = this.state

    return (
      <div className="mob-form-board">
        <DndProvider backend={HTML5Backend}>
          <div className="tools">
            <Collapse accordion defaultActiveKey="1" bordered={false}>
              <Panel header={dict['header.menu.form']} key="1">
              <Panel header="基本信息" key="0">
                <TableComponent />
              </Panel>
              <Panel header="表单" key="1">
                <div className="search-element">
                  {SearchItems.map((item, index) => {
                    return (<SourceElement key={index} content={item}/>)
@@ -438,25 +491,25 @@
          </div>
          <div className="modal-control">
            <Button icon="setting" onClick={this.changeSetting}>设置</Button>
            <Button type="primary" loading={saving} onClick={this.submitConfig}>保存</Button>
            <Button type="primary" id="save-modal-config" loading={saving} onClick={this.submitConfig}>保存</Button>
            <Button onClick={this.cancelConfig}>返回</Button>
            <PasteComponent config={config} updateConfig={this.insert} />
            <Button type="primary" style={{background: '#26C281', border: 'none'}} onClick={this.triggerCopy}>复制</Button>
            <PasteForms type="toolbar" config={config} update={this.pasteFields}/>
            <Button type="danger" onClick={this.clearConfig}>清空</Button>
            <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
            <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
          </div>
          <div className="setting">
            <div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}>
              <div className="mob-shell-inner">
                <div className="am-navbar">
                  <LeftOutlined />
                  <div className="am-navbar-title">{config.setting.title}</div>
                  <div className="am-navbar-title">{btn.label}</div>
                  {config.setting.btnPosition === 'top' ? <Button className="modal-submit-top">{config.setting.btnName || '确定'}</Button> : null}
                </div>
                <DragElement
                  list={config.fields}
                  setting={config.setting}
                  showField={this.state.showField}
                  placeholder={this.state.dict['header.form.modal.placeholder']}
                  handleList={this.handleList}
                  handleForm={this.handleForm}
                  closeForm={this.closeForm}
@@ -468,17 +521,18 @@
          </div>
        </DndProvider>
        <Modal
          title={this.state.dict['model.edit']}
          title={card && card.$copy ? '复制' : '编辑'}
          wrapClassName="mk-scroll-modal"
          visible={this.state.visible}
          width={850}
          width={950}
          maskClosable={false}
          onCancel={this.editModalCancel}
          onOk={this.handleSubmit}
          confirmLoading={this.state.sqlVerifing}
          destroyOnClose
        >
          <ModalForm
            dict={this.state.dict}
            card={this.state.card}
            card={card}
            formlist={this.state.formlist}
            inputSubmit={this.handleSubmit}
            standardform={this.state.standardform}
@@ -486,7 +540,7 @@
          />
        </Modal>
        <Modal
          title={this.state.dict['model.edit']}
          title="编辑"
          visible={this.state.settingVisible}
          width={900}
          maskClosable={false}
@@ -496,7 +550,6 @@
        >
          <SettingForm
            config={config}
            dict={this.state.dict}
            isSubTab={!!this.props.editTab}
            inputSubmit={this.settingSave}
            wrappedComponentRef={(inst) => this.settingRef = inst}