2019-11-19

king

2019-11-19 233709a44a2f5cfff9b8fb955ebcdc6889c0d40b

 src/components/sidemenu/comtableconfig/index.jsx

@@ -3,25 +3,27 @@
// import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { Button, Card, Modal, Collapse, Input, notification } from 'antd'
import { Button, Card, Modal, Collapse, notification, Spin, Row, Col, Select, List, Icon } from 'antd'
import DragElement from './dragelement'
import SourceElement from './dragelement/source'
import Api from '@/api'
import SearchForm from './searchform'
import ActionForm from './actionform'
import ColumnForm from './columnform'
import EditCard from './editcard'
import MenuForm from './menuform'
import zhCN from '@/locales/zh-CN/header.js'
import enUS from '@/locales/en-US/header.js'
import zhCN from '@/locales/zh-CN/comtable.js'
import enUS from '@/locales/en-US/comtable.js'
import Utils from '@/utils/utils.js'
import './index.scss'

const { Panel } = Collapse
const { Search } = Input
const { Option } = Select
const HeaderDict = (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS

class ComTableConfig extends Component {
  static propTpyes = {
    type: PropTypes.string,
    menu: PropTypes.any,
    handleConfig: PropTypes.func,
    supMenuList: PropTypes.array,
@@ -29,162 +31,200 @@
  }

  state = {
    dict: HeaderDict,
    config: null,
    visible: false,
    tableVisible: false,
    addType: '',
    menuformlist: null,
    formlist: null,
    formtemp: '',
    card: null,
    searchloading: false,
    actionloading: false,
    columnsloading: false,
    dict: HeaderDict, // 字典
    config: null, // 页面配置
    visible: false, // 搜索条件、按钮、显示列，模态框显示控制
    tableVisible: false, // 数据表字段模态框
    addType: '', // 添加类型-搜索条件或显示列
    tableColumns: [], // 表格显示列
    option: {}, // 搜索条件及显示列，可选条件包括normal、others
    loading: false, // 加载中（获取表数据）
    menuformlist: null, // 基本信息表单字段
    formlist: null, // 搜索条件、按钮、显示列表单字段
    formtemp: '', // 表单类型，显示列、按钮、搜索条件
    card: null, // 编辑元素
    searchloading: false, // 搜索条件加载中
    actionloading: false, // 按钮加载中
    columnsloading: false, // 显示列加载中
    tables: [{
      name: 'SUsers',
      label: '用户表'
    }, {
      name: 'SMenus',
      label: '菜单表'
    }, {
      name: 'SColumns',
      label: '显示列表'
    }, {
      name: 'SActions',
      label: '按钮表'
    }],
    selectedTables: [], // 已选表名
    baseconfig: {
      type: 'system',
      search: [{
        id: 0,
        uuid: Utils.getuuid(),
        label: 'text',
        field: 'field',
        initval: '',
        type: 'text',
        resourceType: '0',
        setAll: 'false',
        options: [],
        dataSource: '',
        linkField: '',
        valueField: '',
        valueText: '',
        orderBy: '',
        orderType: 'asc',
        display: 'dropdown'
      }, {
        id: 1,
        uuid: Utils.getuuid(),
        label: 'select',
        field: 'field',
        initval: '',
        type: 'select',
        resourceType: '0',
        setAll: 'false',
        options: [],
        dataSource: '',
        linkField: '',
        valueField: '',
        valueText: '',
        orderBy: '',
        orderType: 'asc',
        display: 'dropdown'
      }, {
        id: 2,
        uuid: Utils.getuuid(),
        label: 'date',
        field: 'field',
        initval: '',
        type: 'dateday',
        resourceType: '0',
        setAll: 'false',
        options: [],
        dataSource: '',
        linkField: '',
        valueField: '',
        valueText: '',
        orderBy: '',
        orderType: 'asc',
        display: 'dropdown'
      }],
      action: [{
        id: 0,
        uuid: Utils.getuuid(),
        label: 'add',
        intertype: 'inner',
        interface: '',
        func: '',
        callbackFunc: '',
        Ot: 'notRequired',
        OpenType: 'pop',
        pageTemplate: '',
        icon: 'plus',
        class: 'green'
      }, {
        id: 1,
        uuid: Utils.getuuid(),
        label: 'update',
        intertype: 'inner',
        interface: '',
        func: '',
        callbackFunc: '',
        Ot: 'requiredSgl',
        OpenType: 'pop',
        pageTemplate: '',
        icon: 'form',
        class: 'purple'
      }, {
        id: 2,
        uuid: Utils.getuuid(),
        label: 'delete',
        intertype: 'inner',
        interface: '',
        func: '',
        callbackFunc: '',
        Ot: 'required',
        OpenType: 'prompt',
        pageTemplate: '',
        icon: 'delete',
        class: 'red'
      }, {
        id: 3,
        uuid: Utils.getuuid(),
        label: 'freeze',
        intertype: 'inner',
        interface: '',
        func: '',
        callbackFunc: '',
        Ot: 'requiredOnce',
        OpenType: 'exec',
        pageTemplate: '',
        icon: '',
        class: 'default'
      }],
      columns: [{
        id: 0,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName1',
        field: 'field1',
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }, {
        id: 1,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName2',
        field: 'field2',
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }, {
        id: 2,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName3',
        field: 'field3',
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }, {
        id: 3,
        uuid: Utils.getuuid(),
        Align: 'left',
        label: 'fieldName4',
        field: 'field4',
        Hide: 'false',
        IsSort: 'true',
        Width: 120
      }]
      search: [
        {
          origin: true,
          id: 0,
          uuid: Utils.getuuid(),
          label: 'text',
          field: '',
          initval: '',
          type: 'text',
          resourceType: '0',
          setAll: 'false',
          options: [],
          dataSource: '',
          linkField: '',
          valueField: '',
          valueText: '',
          orderBy: '',
          orderType: 'asc',
          display: 'dropdown'
        }, {
          origin: true,
          id: 1,
          uuid: Utils.getuuid(),
          label: 'select',
          field: '',
          initval: '',
          type: 'select',
          resourceType: '0',
          setAll: 'false',
          options: [],
          dataSource: '',
          linkField: '',
          valueField: '',
          valueText: '',
          orderBy: '',
          orderType: 'asc',
          display: 'dropdown'
        }, {
          origin: true,
          id: 2,
          uuid: Utils.getuuid(),
          label: 'date',
          field: '',
          initval: '',
          type: 'dateday',
          resourceType: '0',
          setAll: 'false',
          options: [],
          dataSource: '',
          linkField: '',
          valueField: '',
          valueText: '',
          orderBy: '',
          orderType: 'asc',
          display: 'dropdown'
        }
      ],
      action: [
        {
          origin: true,
          id: 0,
          uuid: Utils.getuuid(),
          label: 'add',
          intertype: 'inner',
          innerFunc: '',
          interface: '',
          outerFunc: '',
          callbackFunc: '',
          Ot: 'notRequired',
          OpenType: 'pop',
          pageTemplate: '',
          icon: 'plus',
          class: 'green'
        }, {
          origin: true,
          id: 1,
          uuid: Utils.getuuid(),
          label: 'update',
          intertype: 'inner',
          innerFunc: '',
          interface: '',
          outerFunc: '',
          callbackFunc: '',
          Ot: 'requiredSgl',
          OpenType: 'pop',
          pageTemplate: '',
          icon: 'form',
          class: 'purple'
        }, {
          origin: true,
          id: 2,
          uuid: Utils.getuuid(),
          label: 'delete',
          intertype: 'inner',
          innerFunc: '',
          interface: '',
          outerFunc: '',
          callbackFunc: '',
          Ot: 'required',
          OpenType: 'prompt',
          pageTemplate: '',
          icon: 'delete',
          class: 'red'
        }, {
          origin: true,
          id: 3,
          uuid: Utils.getuuid(),
          label: 'freeze',
          intertype: 'inner',
          innerFunc: '',
          interface: '',
          outerFunc: '',
          callbackFunc: '',
          Ot: 'requiredOnce',
          OpenType: 'exec',
          pageTemplate: '',
          icon: '',
          class: 'default'
        }
      ],
      columns: [
        {
          origin: true,
          id: 0,
          uuid: Utils.getuuid(),
          Align: 'left',
          label: 'fieldName1',
          field: '',
          Hide: 'false',
          IsSort: 'true',
          Width: 120
        }, {
          origin: true,
          id: 1,
          uuid: Utils.getuuid(),
          Align: 'left',
          label: 'fieldName2',
          field: '',
          Hide: 'false',
          IsSort: 'true',
          Width: 120
        }, {
          origin: true,
          id: 2,
          uuid: Utils.getuuid(),
          Align: 'left',
          label: 'fieldName3',
          field: '',
          Hide: 'false',
          IsSort: 'true',
          Width: 120
        }, {
          origin: true,
          id: 3,
          uuid: Utils.getuuid(),
          Align: 'left',
          label: 'fieldName4',
          field: '',
          Hide: 'false',
          IsSort: 'true',
          Width: 120
        }
      ]
    },
    searchItems: [
      {
@@ -266,9 +306,30 @@
    ]
  }

  handleList = (list) => {
  handleList = (listObj) => {
    let config = this.state.config
    this.setState({config: {...config, ...list}})
    if (this.props.type === 'add') {
      let key = Object.keys(listObj)[0]
      let newlength = listObj[key].length
      if (newlength > config[key].length) {
        listObj[key] = listObj[key].filter(item => !item.origin)
      }
      if (newlength > listObj[key].length) {
        this.setState({
          [key + 'loading']: true,
          config: {...config, ...listObj}
        })
        setTimeout(() => {
          this.setState({
            [key + 'loading']: false
          })
        }, 100)
      } else {
        this.setState({config: {...config, ...listObj}})
      }
    } else {
      this.setState({config: {...config, ...listObj}})
    }
  }

  handleSearch = (card) => {
@@ -493,6 +554,14 @@
        },
        {
          type: 'text',
          key: 'innerFunc',
          label: this.state.dict['header.form.innerFunc'],
          initVal: card.innerFunc,
          required: false,
          readonly: false
        },
        {
          type: 'text',
          key: 'interface',
          label: this.state.dict['header.form.interface'],
          initVal: card.interface,
@@ -501,10 +570,10 @@
        },
        {
          type: 'text',
          key: 'func',
          label: this.state.dict['header.form.func'],
          initVal: card.func,
          required: true,
          key: 'outerFunc',
          label: this.state.dict['header.form.outerFunc'],
          initVal: card.outerFunc,
          required: false,
          readonly: false
        },
        {
@@ -634,15 +703,27 @@

  handleSubmit = () => {
    this.formRef.handleConfirm().then(res => {
      console.log(res)
      let _config = this.state.config
      _config[res.type] = _config[res.type].map(item => {
        if (item.uuid === res.values.uuid) {
          return res.values
        } else {
          return item
        }
      })

      if (this.props.type === 'add') {
        _config[res.type] = _config[res.type].map(item => {
          if (item.uuid === res.values.uuid) {
            return res.values
          } else {
            return item
          }
        })
        _config[res.type] = _config[res.type].filter(item => !item.origin)
      } else {
        _config[res.type] = _config[res.type].map(item => {
          if (item.uuid === res.values.uuid) {
            return res.values
          } else {
            return item
          }
        })
      }

      this.setState({
        config: _config,
        [res.type + 'loading']: true,
@@ -703,35 +784,52 @@
    this.props.handleConfig('')
  }

  queryField = (type, name) => {
    if (!name) {
  queryField = (type) => {
    const {selectedTables, tableColumns, config} = this.state
    if (selectedTables.length === 0) {
      notification.warning({
        top: 92,
        message: '请输入表名！',
        message: '请选择表名！',
        duration: 10
      })
      return
    }

    let columns = new Map()
    tableColumns.forEach(table => {
      table.columns.forEach(column => {
        columns.set(column.field, column)
      })
    })

    if (type === 'search') {
      Api.getSystemConfig({func: 'sPC_Get_MainMenu'}).then(res => {
        if (res.status) {
          this.setState({
            tableVisible: true,
            addType: type
          })
        } else {
          notification.warning({
            top: 92,
            message: res.message,
            duration: 10
          })
      let others = []
      config.search.forEach(item => {
        if (columns.has(item.field)) {
          columns.set(item.field, item)
        } else if (item.field) {
          others.push(item)
        }
      })
      this.setState({
        addType: type,
        tableVisible: true,
        option: {
          normal: [...columns.values()],
          others: others
        }
      }, () => {
        console.log(this.state.option)
      })
    }
    // console.log(tableColumns)
    // console.log(columns)
    // console.log(config)
  }

  addFieldSubmit = () => {
    console.log(13)
    let cards = this.refs.searchcard.getSelectedCard()
    console.log(cards)
  }

  cancelFieldSubmit = () => {
@@ -743,7 +841,7 @@

  UNSAFE_componentWillMount () {
    let _config = ''
    if (!this.props.menu.LongParam) {
    if (this.props.type === 'add') {
      _config = JSON.parse(JSON.stringify((this.state.baseconfig)))
    } else {
      _config = this.props.menu.LongParam
@@ -794,26 +892,287 @@
    })
  }

  onTableChange = (value) => {
    const {tables, selectedTables, tableColumns} = this.state

    let _table = tables.filter(item => item.name === value)[0]
    let isSelected = !!selectedTables.filter(cell => cell.name === value)[0]
    if (!isSelected) {
      this.setState({
        selectedTables: [...selectedTables, _table]
      })
      let SUsers = [
        {
          field: 'UID',
          label: 'UID',
          type: 'text'
        },
        {
          field: 'UserCode',
          label: 'UserCode',
          type: 'text'
        },
        {
          field: 'UserName',
          label: 'UserName',
          type: 'text'
        },
        {
          field: 'PassWord',
          label: 'PassWord',
          type: 'text'
        },
        {
          field: 'FullName',
          label: 'FullName',
          type: 'text'
        },
        {
          field: 'RoleID',
          label: 'RoleID',
          type: 'text'
        },
        {
          field: 'RoleName',
          label: 'RoleName',
          type: 'text'
        }
      ]
      let SMenus = [
        {
          field: 'RoleID',
          label: 'RoleID',
          type: 'text'
        },
        {
          field: 'RoleName',
          label: 'RoleName',
          type: 'text'
        },
        {
          field: 'DepartmentCode',
          label: 'DepartmentCode',
          type: 'text'
        },
        {
          field: 'Organization',
          label: 'Organization',
          type: 'text'
        },
        {
          field: 'CSS',
          label: 'CSS',
          type: 'text'
        },
        {
          field: 'HeadImage',
          label: 'HeadImage',
          type: 'text'
        },
        {
          field: 'StaffID',
          label: 'StaffID',
          type: 'text'
        },
        {
          field: 'Remark',
          label: 'Remark',
          type: 'text'
        },
        {
          field: 'Deleted',
          label: 'Deleted',
          type: 'text'
        },
        {
          field: 'APICode',
          label: 'APICode',
          type: 'text'
        },
        {
          field: 'Status',
          label: 'Status',
          type: 'text'
        },
        {
          field: 'Type',
          label: 'Type',
          type: 'text'
        },
        {
          field: 'CreateDate',
          label: 'CreateDate',
          type: 'date'
        }
      ]
      let SColumns = [
        {
          field: 'Type',
          label: 'Type',
          type: 'text'
        },
        {
          field: 'CreateDate',
          label: 'CreateDate',
          type: 'date'
        },
        {
          field: 'CreateUserID',
          label: 'CreateUserID',
          type: 'text'
        },
        {
          field: 'CreateUser',
          label: 'CreateUser',
          type: 'text'
        },
        {
          field: 'CreateStaff',
          label: 'CreateStaff',
          type: 'text'
        },
        {
          field: 'CreateDepartCode',
          label: 'CreateDepartCode',
          type: 'text'
        },
        {
          field: 'ModifyDate',
          label: 'ModifyDate',
          type: 'date'
        },
        {
          field: 'ModifyUserID',
          label: 'ModifyUserID',
          type: 'text'
        },
        {
          field: 'ModifyUser',
          label: 'ModifyUser',
          type: 'text'
        },
        {
          field: 'ModifyDepartCode',
          label: 'ModifyDepartCode',
          type: 'text'
        },
        {
          field: 'ModifyOrganCode',
          label: 'ModifyOrganCode',
          type: 'text'
        }
      ]
      let SActions = [
        {
          field: 'ModifyDepartCode',
          label: 'ModifyDepartCode',
          type: 'text'
        },
        {
          field: 'ModifyOrganCode',
          label: 'ModifyOrganCode',
          type: 'text'
        },
        {
          field: 'SubmitDate',
          label: 'SubmitDate',
          type: 'date'
        },
        {
          field: 'SubmitUserID',
          label: 'SubmitUserID',
          type: 'text'
        },
        {
          field: 'SubmitUser',
          label: 'SubmitUser',
          type: 'text'
        }
      ]
      Api.getSystemConfig({func: 'sPC_Get_MainMenu'}).then(res => {
        if (res.status) {
          let _change = {
            SUsers: SUsers,
            SMenus: SMenus,
            SColumns: SColumns,
            SActions: SActions
          }
          this.setState({
            tableColumns: tableColumns.concat([{
              tableName: _table.name,
              columns: _change[_table.name]
            }])
          })
        } else {
          notification.warning({
            top: 92,
            message: res.message,
            duration: 10
          })
        }
      })
    }
  }

  deleteTable = (table) => {
    const {selectedTables, tableColumns} = this.state

    this.setState({
      selectedTables: selectedTables.filter(item => item.name !== table.name),
      tableColumns: tableColumns.filter(item => item.tableName !== table.name)
    })
  }

  render () {
    console.log(this.state.option)
    return (
      <div className="common-table-board">
        <DndProvider backend={HTML5Backend}>
          <div className="tools">
            <Collapse accordion defaultActiveKey="0" bordered={false}>
              <Panel header="基本信息" key="0">
              <Panel header="基本信息" key="0" id="common-basedata">
                <MenuForm
                  dict={this.state.dict}
                  formlist={this.state.menuformlist}
                  wrappedComponentRef={(inst) => this.menuformRef = inst}
                />
                <div className="ant-col ant-form-item-label">
                  <label title="添加表名">添加表名</label>
                </div>
                <Select
                  showSearch
                  className="tables"
                  style={{ width: '100%' }}
                  optionFilterProp="children"
                  value={'请选择表名'}
                  onChange={this.onTableChange}
                  showArrow={false}
                  getPopupContainer={() => document.getElementById('common-basedata')}
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                > 
                  {this.state.tables.map((table, index) => (
                    <Option key={index} value={table.name}>{table.label}</Option>
                  ))}
                </Select>
                {this.state.selectedTables.length > 0 && <List
                  size="small"
                  bordered
                  dataSource={this.state.selectedTables}
                  renderItem={(item, index) => <List.Item key={index} title={item.name + '--' + item.label}>
                    {item.name + '--' + item.label}
                    <Icon type="close" onClick={() => this.deleteTable(item)}/>
                  </List.Item>}
                />}
              </Panel>
              <Panel header="搜索" key="1">
                <Search placeholder="input table name." onSearch={value => this.queryField('search', value)} enterButton />
                <div className="search-element">
                  {this.state.searchItems.map((item, index) => {
                    return (<SourceElement key={index} content={item}/>)
                  })}
                </div>
                <Button type="primary" block onClick={() => this.queryField('search')}>添加搜索条件</Button>
              </Panel>
              <Panel header="按钮" key="2">
                <div className="search-element">
@@ -823,12 +1182,12 @@
                </div>
              </Panel>
              <Panel header="显示列" key="3">
                <Search placeholder="input table name." onSearch={value => this.queryField('column', value)} enterButton />
                <div className="search-element">
                  {this.state.columnItems.map((item, index) => {
                    return (<SourceElement key={index} content={item}/>)
                  })}
                </div>
                <Button type="primary" block onClick={() => this.queryField('column')}>添加显示列</Button>
              </Panel>
            </Collapse>
          </div>
@@ -914,8 +1273,24 @@
          onCancel={this.cancelFieldSubmit}
          destroyOnClose
        >
          {this.state.addType === 'search' && <div>djfiafadf</div>}
          {this.state.addType === 'search' &&
            <div>
              {this.state.option.normal.length > 0 && <EditCard data={this.state.option.normal} ref="searchcard" title="" />}
              {this.state.option.others.length > 0 && <Row style={{marginLeft: '-10px', marginRight: '-10px'}}>
                <p style={{margin: '10px 0px 0px 10px', color: '#1890ff'}}>自定义字段</p>
                {this.state.option.others.map((item, index) => (
                  <Col key={index} span={8} style={{padding: '10px'}}>
                    <div className="ant-card ant-card-bordered" style={{padding: '10px'}}>
                      <p>{item.label}</p>
                      <p>{item.field}</p>
                    </div>
                  </Col>
                ))}
              </Row>}
            </div>
          }
        </Modal>
        {this.state.loading && <Spin size="large" style={{position: 'fixed', left: '49vw', top: '230px'}} />}
      </div>
    )
  }