2021-07-06

king

2021-07-06 71d4765ba3cdc4a004687cd37a529b565e9ea9fd

 src/mob/searchconfig/index.jsx

@@ -10,21 +10,20 @@
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 ModalForm from '@/templates/zshare/modalform'
import { getSearchForm } from '@/templates/zshare/formconfig'
import SourceElement from '@/templates/modalconfig/dragelement/source'
import SettingForm from '@/templates/modalconfig/settingform'
import SettingForm from './settingform'
import asyncComponent from '@/utils/asyncComponent'
import { SearchItems } from './source'
import './index.scss'

const { Panel } = Collapse
const { confirm } = Modal
const CommonDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const SearchForm = asyncComponent(() => import('@/templates/sharecomponent/searchcomponent/searchform'))
const PasteComponent = asyncComponent(() => import('./pastecomponent'))
const DragElement = asyncComponent(() => import('@/mob/components/formdragelement'))
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
const DragElement = asyncComponent(() => import('./searchdragelement'))
const GDragElement = asyncComponent(() => import('./groupdragelement'))
const GroupForm = asyncComponent(() => import('./groupform'))

class ComModalConfig extends Component {
  static propTpyes = {
@@ -34,7 +33,7 @@
  }

  state = {
    dict: CommonDict,      // 字典
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,      // 字典
    config: null,          // 页面配置，包括模板类型、模态框设置、添加表名、表单列表
    visible: false,        // 表单编辑模态框，显示控制
    formlist: null,        // 表单编辑模态框，可编辑字段
@@ -43,21 +42,20 @@
    originConfig: null,    // 原始菜单
    sqlVerifing: false,    // sql验证
    showField: false,      // 显示表单字段值
    standardform: null
    group: null,
    editGroup: null
  }

  /**
   * @description 数据预处理
   */
  UNSAFE_componentWillMount () {
    const { btn } = this.props

    let _config = btn.modal
    _config.version = '1.0'
    const { config } = this.props

    this.setState({
      config: _config,
      originConfig: fromJS(_config).toJS()
      group: fromJS(config).toJS(),
      config: fromJS(config).toJS(),
      originConfig: fromJS(config).toJS()
    })
  }

@@ -72,105 +70,74 @@

  /**
   * @description 表单变化
   * 1、表单拖拽添加时，检查是否存在示例表单，如存在则去除示例
   * 2、表单移动后，保存移动后的顺序
   * 3、新增表单时，直接打开编辑框
   */
  handleList = (list, newcard) => {
    let _config = fromJS(this.state.config).toJS()
    let _group = {...this.state.group, fields: list}

    if (list.length > _config.fields.length) {
      _config.fields = list.filter(item => !item.origin)

      this.setState({
        config: _config
      }, () => {
    this.setState({
      group: _group
    }, () => {
      if (newcard) {
        this.handleForm(newcard)
      })
      }
    })
    this.resetConfig(_group)
  }

  /**
   * @description 分组变化
   */
  handleGroupList = (list) => {
    let _group = {...this.state.group, groups: list}

    this.setState({
      group: _group
    })
    this.resetConfig(_group)
  }

  /**
   * @description 表单变化
   */
  handleList = (list, newcard) => {
    let _group = {...this.state.group, fields: list}

    this.setState({
      group: _group
    }, () => {
      if (newcard) {
        this.handleForm(newcard)
      }
    })
    this.resetConfig(_group)
  }

  resetConfig = (group) => {
    let _config = fromJS(this.state.config).toJS()
    if (group.floor === 1) {
      _config = group
    } else {
      _config.fields = list
      this.setState({config: _config})
      _config.groups = _config.groups.map(item => {
        if (item.uuid === group.uuid) return group
        return item
      })
    }

    this.setState({
      config: _config
    })
  }

  /**
   * @description 表单编辑
   * 1、显示编辑弹窗-visible
   * 2、保存编辑项-card
   * 3、设置编辑参数项-formlist
   */
  handleForm = (_card) => {
    const { componentConfig } = this.props
    const { config } = this.state
    let card = fromJS(_card).toJS()
    let _inputfields = []
    let _tabfields = []
    let _linkableFields = []
    let _linksupFields = [{
      value: '',
      text: '空'
    }]
    let standardform = null

    _inputfields = config.fields.filter(item => item.type === 'text' || item.type === 'number' || item.type === 'textarea' || item.type === 'color')
    _tabfields = config.fields.filter(item => card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type))
    _tabfields.unshift({field: '', text: '原表单'})

    let uniq = new Map()
    uniq.set(card.field, true)
    let index = null
    config.fields.forEach((item, i) => {
      if (card.uuid === item.uuid) {
        index = i
      }
      if (item.type !== 'select' && item.type !== 'link' && item.type !== 'radio') return
      if (item.field && !uniq.has(item.field)) {
        uniq.set(item.field, true)

        _linkableFields.push({
          value: item.field,
          text: item.label + ' (表单)'
        })
        _linksupFields.push({
          value: item.field,
          text: item.label
        })
      }
    })
    if (index !== null) {
      if (index === 0) {
        standardform = config.fields[index + 1] || null
      } else {
        standardform = config.fields[index - 1] || null
      }
    }

    componentConfig.columns.forEach(col => {
      if (col.field && !uniq.has(col.field)) {
        uniq.set(col.field, true)

        _linkableFields.push({
          value: col.field,
          text: col.label + ' (显示列)'
        })
      }
    })

    if (card.linkSubField && card.linkSubField.length > 0) {
      let fields = _inputfields.map(item => item.field)
      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, !!this.props.editTab)
      formlist: getSearchForm(card, [])
    })
  }

@@ -182,15 +149,12 @@
   */
  handleSubmit = () => {
    this.formRef.handleConfirm().then(res => {
      let _config = fromJS(this.state.config).toJS()
      let _group = fromJS(this.state.group).toJS()
      let fieldrepet = false // 字段重复
      let labelrepet = false // 提示文字重复

      _config.fields = _config.fields.map(item => {
        if (item.uuid !== res.uuid && res.field && item.field && item.field.toLowerCase() === res.field.toLowerCase()) {
      _group.fields = _group.fields.map(item => {
        if (item.uuid !== res.uuid && item.field.toLowerCase() === res.field.toLowerCase()) {
          fieldrepet = true
        } else if (res.label && item.uuid !== res.uuid && item.label === res.label) {
          labelrepet = true
        }

        if (item.uuid === res.uuid) {
@@ -207,18 +171,9 @@
          duration: 10
        })
        return
      } else if (labelrepet) {
        notification.warning({
          top: 92,
          message: '名称已存在！',
          duration: 10
        })
        return
      }

      _config.fields = _config.fields.filter(item => !item.origin)

      if (['select', 'multiselect', 'link', 'checkbox', 'radio', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) {
      if (['checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) {
        this.setState({
          sqlVerifing: true
        })
@@ -243,10 +198,11 @@
          if (result.status) {
            this.setState({
              sqlVerifing: false,
              config: _config,
              group: _group,
              card: null,
              visible: false
            })
            this.resetConfig(_group)
          } else {
            this.setState({sqlVerifing: false})
            
@@ -257,10 +213,11 @@
        })
      } else {
        this.setState({
          config: _config,
          group: _group,
          card: null,
          visible: false
        })
        this.resetConfig(_group)
      }
    })
  }
@@ -274,12 +231,13 @@
    confirm({
      content: `确定删除${card.label ? `<<${card.label}>>` : ''}吗？`,
      onOk() {
        let _config = fromJS(_this.state.config).toJS()
        _config.fields = _config.fields.filter(item => !(item.uuid === card.uuid))
        let _group = fromJS(_this.state.group).toJS()
        _group.fields = _group.fields.filter(item => item.uuid !== card.uuid)

        _this.setState({
          config: _config,
          group: _group,
        })
        _this.resetConfig(_group)
      },
      onCancel() {}
    })
@@ -315,7 +273,7 @@
  }

  /**
   * @description 全局设置模态框
   * @description 分组设置模态框
   */
  changeSetting = () => {
    this.setState({
@@ -324,30 +282,32 @@
  }

  /**
   * @description 保存全局设置
   * @description 保存分组设置
   */
  settingSave = () => {
    const {config} = this.state
    this.settingRef.handleConfirm().then(res => {
      let _group = {...this.state.group, setting: res}
      this.setState({
        config: {...config, setting: res},
        group: _group,
        settingVisible: false
      })
      this.resetConfig(_group)
    })
  }

  editModalCancel = () => {
    const { config, card } = this.state
    const { group, card } = this.state

    if (card.focus) {
      let _fields = config.fields.filter(item => item.uuid !== card.uuid)
      let _config = {...config, fields: _fields}
      let _fields = group.fields.filter(item => item.uuid !== card.uuid)
      let _group = {...group, fields: _fields}

      this.setState({
        card: null,
        config: _config,
        group: _group,
        visible: false
      })
      this.resetConfig(_group)
    } else {
      this.setState({
        card: null,
@@ -356,18 +316,77 @@
    }
  }

  /**
   * @description 更新
  plusGroup = () => {
    let config = fromJS(this.state.config).toJS()
    let _g = {
      uuid: Utils.getuuid(),
      wrap: { name: 'name', icon: '' },
      setting: { type: 'title', field: '', title: '', focus: 'true', btn: 'hidden' },
      fields: []
    }

    config.groups.push(_g)

    this.setState({config, group: config, editGroup: _g, gVisible: true})
  }

  handleGroupForm = (_g) => {
    this.setState({editGroup: _g, gVisible: true})
  }

   /**
   * @description 保存分组设置
   */
  updateConfig = (config) => {
  groupSave = () => {
    this.gRef.handleConfirm().then(res => {
      let _g = {...this.state.editGroup, wrap: res}

      let _group = fromJS(this.state.group).toJS()
      _group.groups = _group.groups.map(item => {
        if (item.uuid === _g.uuid) return _g
        return item
      })

      this.setState({
        editGroup: null,
        group: _group,
        gVisible: false
      })
      this.resetConfig(_group)
    })
  }

  handleGroup = (g) => {
    this.setState({
      config
      group: g
    })
  }

  closeGroup = (g) => {
    const _this = this
    let _group = fromJS(this.state.group).toJS()
    _group.groups = _group.groups.filter(item => item.uuid !== g.uuid)

    confirm({
      content: `确定删除分组《${g.wrap.name}》吗？`,
      onOk() {
        _this.setState({ group: _group })
        _this.resetConfig(_group)
      },
      onCancel() {}
    })
  }

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

    this.setState({
      group: config
    })
  }

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

    const { dict, group, editGroup } = this.state
    return (
      <div className="mob-search-board">
        <DndProvider backend={HTML5Backend}>
@@ -379,38 +398,48 @@
                    return (<SourceElement key={index} content={item}/>)
                  })}
                </div>
                <FieldsComponent
                  config={config}
                  type="form"
                  updatefield={this.updateConfig}
                />
              </Panel>
            </Collapse>
          </div>
          <div className="modal-control">
            <Button icon="setting" onClick={this.changeSetting}>设置</Button>
            <Button type="primary" onClick={this.submitConfig}>保存</Button>
            <Button onClick={this.cancelConfig}>返回</Button>
            <PasteComponent type="menu" Tab={null} insert={this.insert} />
            <Button onClick={this.cancelConfig}>关闭</Button>
            {!group.floor ? <Button onClick={this.returnUp}>返回上级</Button> : null}
            <PasteComponent insert={this.insert} />
            <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} 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">
                <Icon className="setting-group" onClick={this.changeSetting} type="setting" />
                {group.setting.type === 'title' ? <div className="am-navbar">
                  <Icon type="close" />
                  <div className="am-navbar-title">{config.setting.title}</div>
                  <div className="am-navbar-title">{group.setting.title}</div>
                </div> : <div className="am-navbar">
                  <Icon type="left" />
                  <div className="search-bar"><Icon type="search" /></div>
                </div>}
                {group.floor === 1 ? <Icon className="plus-group" type="plus" onClick={this.plusGroup} /> : null}
                <div style={{minHeight: 'calc(100% - 100px)'}}>
                  {group.floor === 1 && group.groups.length > 0 ? <GDragElement
                    list={group.groups}
                    handleList={this.handleGroupList}
                    handleForm={this.handleGroupForm}
                    handleGroup={this.handleGroup}
                    closeForm={this.closeGroup}
                  /> : null}
                  <DragElement
                    list={group.fields}
                    showField={this.state.showField}
                    handleList={this.handleList}
                    handleForm={this.handleForm}
                    closeForm={this.closeForm}
                  />
                </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}
                />
                <Button className="modal-submit" type="primary">确定</Button>
                {group.setting.btn !== 'hidden' ? <div className="search-btn">
                  <Button className="reset">重置</Button>
                  <Button className="submit" type="primary">确定</Button>
                </div> : null}
              </div>
            </div>
          </div>
@@ -424,12 +453,11 @@
          confirmLoading={this.state.sqlVerifing}
          destroyOnClose
        >
          <ModalForm
          <SearchForm
            dict={this.state.dict}
            card={this.state.card}
            formlist={this.state.formlist}
            inputSubmit={this.handleSubmit}
            standardform={this.state.standardform}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />
        </Modal>
@@ -443,13 +471,26 @@
          destroyOnClose
        >
          <SettingForm
            config={config}
            dict={this.state.dict}
            isSubTab={!!this.props.editTab}
            config={group}
            inputSubmit={this.settingSave}
            wrappedComponentRef={(inst) => this.settingRef = inst}
          />
        </Modal>
        <Modal
          title={this.state.dict['model.edit']}
          visible={this.state.gVisible}
          width={600}
          maskClosable={false}
          onOk={this.groupSave}
          onCancel={() => { this.setState({ gVisible: false }) }}
          destroyOnClose
        >
          <GroupForm
            config={editGroup}
            inputSubmit={this.groupSave}
            wrappedComponentRef={(inst) => this.gRef = inst}
          />
        </Modal>
      </div>
    )
  }