2021-11-12

king

2021-11-12 0c84df247914f893ef5e41d57a422e10a2dc814c

 src/templates/formtabconfig/index.jsx

@@ -5,7 +5,8 @@
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import moment from 'moment'
import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Icon, Empty, Switch, Tooltip } from 'antd'
import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Empty, Switch, Tooltip } from 'antd'
import { QuestionCircleOutlined, CloseOutlined, RedoOutlined, SettingOutlined, PlusOutlined, DeleteOutlined, EditOutlined, SnippetsOutlined } from '@ant-design/icons'

import Api from '@/api'
import zhCN from '@/locales/zh-CN/model.js'
@@ -16,23 +17,25 @@

import TabsComponent from '@/templates/sharecomponent/tabscomponent'

import ModalForm from '@/templates/zshare/modalform'
import PasteForm from '@/templates/zshare/pasteform'
import ActionForm from './actionform'
import SettingForm from './settingform'
import DragElement from './dragelement'
import GroupForm from './groupform'
import EditCard from '@/templates/zshare/editcard'
import VerifyCard from '@/templates/zshare/verifycard'

import MenuForm from '@/templates/zshare/menuform'
import SourceElement from '@/templates/zshare/dragsource'
import CreateFunc from '@/templates/zshare/createfunc'
import asyncComponent from '@/utils/asyncComponent'
import Source from './source'
import './index.scss'

const { Panel } = Collapse
const { Option } = Select
const { confirm } = Modal
const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform'))
const CreateFunc = asyncComponent(() => import('@/templates/zshare/createfunc'))
const VerifyCard = asyncComponent(() => import('@/templates/zshare/verifycard'))

class ComTableConfig extends Component {
  static propTpyes = {
@@ -43,7 +46,7 @@
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,        // 字典
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,        // 字典
    config: null,            // 页面配置
    modaltype: '',           // 模态框类型，控制模态框显示
    tableVisible: false,     // 数据表字段模态框
@@ -438,7 +441,7 @@
      _formfields = [..._formfields, ...group.sublist]
    })

    _inputfields = _formfields.filter(item => item.type === 'text' || item.type === 'number' || item.type === 'textarea' || item.type === 'color')
    _inputfields = _formfields.filter(item => ['text', 'number', 'textarea', 'color'].includes(item.type) && card.field !== item.field)
    _tabfields = _formfields.filter(item => card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type))
    _tabfields.unshift({field: '', text: '原表单'})
    
@@ -496,22 +499,17 @@
    if (usefulFields) {
      try {
        usefulFields = JSON.parse(usefulFields)
      } catch {
      } catch (e) {
        usefulFields = []
      }
    } else {
      usefulFields = []
    }

    let ableField = usefulFields.join(', ')
    let functip = <div>
      <p style={{marginBottom: '5px'}}>{this.state.dict['model.tooltip.func.innerface'].replace('@ableField', ableField)}</p>
    </div>

    this.setState({
      modaltype: 'actionEdit',
      card: card,
      formlist: getActionForm(card, functip, this.state.config, usefulFields)
      formlist: getActionForm(card, this.state.config, usefulFields)
    })
  }

@@ -540,7 +538,6 @@

        let _groups = null
        let fieldrepet = false  // 字段重复
        let labelrepeat = false // 提示文字重复

        if (card.iscopy) {
          _groups = _config.groups.map(group => {
@@ -552,8 +549,6 @@

              if (item.uuid !== res.uuid && item.field === res.field) {
                fieldrepet = true
              } else if (item.uuid !== res.uuid && item.label === res.label) {
                labelrepeat = true
              }
            })

@@ -571,8 +566,6 @@
            group.sublist = group.sublist.map(item => {
              if (item.uuid !== res.uuid && item.field === res.field) {
                fieldrepet = true
              } else if (item.uuid !== res.uuid && item.label === res.label) {
                labelrepeat = true
              }

              if (item.uuid === res.uuid) {
@@ -592,13 +585,6 @@
          notification.warning({
            top: 92,
            message: '字段已存在！',
            duration: 5
          })
          return
        } else if (labelrepeat) {
          notification.warning({
            top: 92,
            message: '名称已存在！',
            duration: 5
          })
          return
@@ -905,7 +891,7 @@
        if (_ismutil && group.sublist.length === 0) {
          _config.enabled = false
        }
        let arr = group.sublist.filter(item => item.field.toLowerCase() === _primary)
        let arr = group.sublist.filter(item => item.field && item.field.toLowerCase() === _primary)

        if (arr.length > 0) {
          _config.enabled = false
@@ -1619,7 +1605,7 @@
    let primaryrepeat = false

    config.groups.forEach(group => {
      let arr = group.sublist.filter(item => item.field.toLowerCase() === _primary)
      let arr = group.sublist.filter(item => item.field && item.field.toLowerCase() === _primary)

      if (arr.length > 0) {
        primaryrepeat = true
@@ -1806,7 +1792,7 @@
                <div className="ant-col ant-form-item-label">
                  <label>
                    <Tooltip placement="topLeft" title="此处可以添加配置相关的常用表，在添加搜索条件和显示列时，可通过工具栏中的添加按钮，批量添加表格相关字段。">
                      <Icon type="question-circle" />
                      <QuestionCircleOutlined className="mk-form-tip" />
                      {this.state.dict['header.menu.table.add']}
                    </Tooltip>
                  </label>
@@ -1835,7 +1821,7 @@
                  dataSource={this.state.selectedTables}
                  renderItem={(item, index) => <List.Item key={index} title={item.Remark + ' (' + item.TbName + ')'}>
                    {item.Remark + ' (' + item.TbName + ')'}
                    <Icon type="close" onClick={() => this.deleteTable(item)}/>
                    <CloseOutlined onClick={() => this.deleteTable(item)}/>
                    <div className="bottom-mask"></div>
                  </List.Item>}
                />}
@@ -1867,7 +1853,7 @@
                {configTabs.length > 0 ?
                  <p className="config-btn-title">
                    <Tooltip placement="topLeft" title="点击按钮，可完成或查看标签配置信息。">
                      <Icon type="question-circle" />
                      <QuestionCircleOutlined className="mk-form-tip" />
                    </Tooltip>
                    {this.state.dict['header.menu.tab.configurable']}
                  </p> : null
@@ -1891,7 +1877,7 @@
            <Card title={
              <div>
                {this.state.dict['header.menu.page.configurable']} 
                <Icon type="redo" style={{marginLeft: '10px'}} title="刷新标签列表" onClick={this.reloadTab} />
                <RedoOutlined style={{marginLeft: '10px'}} title="刷新标签列表" onClick={this.reloadTab} />
              </div>
            } bordered={false} extra={
              <div>
@@ -1900,9 +1886,9 @@
                <Button onClick={this.cancelConfig}>{this.state.dict['model.back']}</Button>
              </div>
            } style={{ width: '100%' }}>
              <Icon type="setting" onClick={this.changeSetting} />
              <SettingOutlined onClick={this.changeSetting} />
              <Tooltip placement="bottomLeft" overlayClassName="middle" title="在左侧工具栏《搜索》中，选择对应搜索框拖至此处添加；或点击按钮《添加搜索条件》批量添加，选择批量添加时，需提前选择使用表。">
                <Icon type="question-circle" />
                <QuestionCircleOutlined style={{position: 'relative', color: '#c49f47', left: '5px', top: '20px'}} />
              </Tooltip>
              <Collapse
                activeKey={config.groups.map(group => group.uuid)}
@@ -1911,21 +1897,16 @@
                {config.groups.map((group, index) => (
                  <Panel showArrow={false} header={group.label} key={group.uuid} extra={(
                    <span>
                      {index === _length - 1 ? <Icon
                        type="plus"
                      {index === _length - 1 ? <PlusOutlined
                        onClick={() => { this.handleGroup()}}
                      /> : null}
                      {_length > 1 && index !== _length - 1 ? <Icon
                        type="delete"
                      {_length > 1 && index !== _length - 1 ? <DeleteOutlined
                        onClick={() => { this.closeGroup(group) }}
                      /> : null}
                      <Icon
                        type="edit"
                        onClick={() => { this.handleGroup(group) }}
                      />
                      <EditOutlined onClick={() => { this.handleGroup(group) }}/>
                    </span>
                  )}>
                    {group.isDefault ? <Icon type="snippets" title={this.state.dict['header.form.paste']} onClick={() => {this.setState({pasteVisible: true})}} /> : null}
                    {group.isDefault ? <SnippetsOutlined title={this.state.dict['header.form.paste']} onClick={() => {this.setState({pasteVisible: true})}} /> : null}
                    <DragElement
                      type="search"
                      groupId={group.uuid}
@@ -1941,7 +1922,7 @@
              </Collapse>
              <div className="action-list">
                <Tooltip placement="bottomLeft" overlayClassName="middle" title="在左侧工具栏《按钮》中，选择对应类型的按钮拖至此处添加，如选择按钮类型为表单、新标签页等含有配置页面的按钮，可在左侧工具栏-按钮-可配置按钮处，点击按钮完成相关配置。注：当设置按钮显示位置为表格时，显示列会增加操作列。">
                  <Icon type="question-circle" />
                  <QuestionCircleOutlined style={{position: 'absolute', color: '#c49f47', left: '5px', top: '5px'}} />
                </Tooltip>
                <DragElement
                  type="action"
@@ -1986,7 +1967,7 @@
        <Modal
          title={this.state.dict['model.action'] + '-' + this.state.dict['model.edit']}
          visible={modaltype === 'actionEdit'}
          width={700}
          width={900}
          maskClosable={false}
          onCancel={this.editModalCancel}
          footer={[
@@ -2013,7 +1994,6 @@
          visible={this.state.tableVisible}
          width={'65vw'}
          maskClosable={false}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          cancelText={this.state.dict['model.close']}
          onOk={this.addFieldSubmit}
          onCancel={() => { // 取消添加
@@ -2037,7 +2017,6 @@
          visible={this.state.profileVisible}
          width={'75vw'}
          maskClosable={false}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          okText={this.state.dict['model.submit']}
          onOk={this.verifySubmit}
          onCancel={() => { this.setState({ profileVisible: false }) }}