2019-12-08

king

2019-12-08 8c14d194348465710826ed5740173e64bd803f71

2019-12-08

 src/tabviews/commontable/mainTable/index.jsx

@@ -30,7 +30,6 @@
    const { columns } = this.props
    let _columns = []
    columns.forEach((item, index) => {
      console.log(item)
      let cell = {
        align: item.Align,
        dataIndex: item.field || item.uuid,

 src/templates/comtableconfig/editcard/index.scss

@@ -4,7 +4,7 @@
  .ant-col {
    padding: 10px;
    .ant-card {
      padding: 10px;
      padding: 0px 10px 10px;
      p {
        margin-bottom: 5px;
        overflow: hidden;
@@ -25,6 +25,7 @@
        opacity: 0.4;
      }
      .base {
        padding-top: 10px;
        cursor: pointer;
      }
    }

 src/templates/comtableconfig/index.jsx

@@ -159,7 +159,6 @@
    param.secretkey = Utils.encrypt(param.LText, param.timestamp)

    Api.getSystemConfig(param).then(res => {
      console.log(res)
      if (res.status) {
        this.setState({
          tables: res.data
@@ -953,15 +952,6 @@
        return
      }

      let sql = []
      config.action.forEach((item, index) => {
        sql.push(`'${item.uuid}' as menuid, '${item.label}' as menuname, '${(index + 1) * 10}' as Sort`)
      })
      sql = sql.join(' union all select ')
      sql = 'select ' + sql

      sql = Utils.formatOptions(sql)

      let btnParam = {
        func: 'sPC_Button_AddUpt',
        ParentID: menu.MenuID,
@@ -969,8 +959,15 @@
        Template: menu.PageParam.Template || '',
        PageParam: '',
        LongParam: '',
        LongButton: sql
        LText: config.action.map((item, index) => {
          return `select '${item.uuid}' as menuid, '${item.label}' as menuname, '${(index + 1) * 10}' as Sort`
        })
      }

      btnParam.LText = btnParam.LText.join(' union all ')
      btnParam.LText = Utils.formatOptions(btnParam.LText)
      btnParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
      btnParam.secretkey = Utils.encrypt(btnParam.LText, btnParam.timestamp)

      if (this.state.operaType === 'add') { // 新建菜单
        let param = {
@@ -1573,22 +1570,20 @@
                  })}
                </div>
                {configAction.length > 0 ?
                  <div>
                    <p style={{marginTop: '20px', marginBottom: '10px', color: '#1890ff'}}>{this.state.dict['header.menu.action.configurable']}</p>
                    {configAction.map((item, index) => {
                      return (
                        <div key={index}>
                          <Button
                            icon={item.icon}
                            style={{marginBottom: '10px'}}
                            className={'mk-btn mk-' + item.class}
                            onClick={() => this.setSubConfig(item)}
                          >{item.label}</Button>
                        </div>
                      )
                    })}
                  </div> : null
                  <p className="config-btn-title">{this.state.dict['header.menu.action.configurable']}</p> : null
                }
                {configAction.map((item, index) => {
                  return (
                    <div key={index}>
                      <Button
                        icon={item.icon}
                        style={{marginBottom: '10px'}}
                        className={'mk-btn mk-' + item.class}
                        onClick={() => this.setSubConfig(item)}
                      >{item.label}</Button>
                    </div>
                  )
                })}
              </Panel>
              <Panel header={this.state.dict['header.menu.column']} key="3">
                <div className="search-element">

 src/templates/comtableconfig/index.scss

@@ -50,6 +50,12 @@
        }
      }
    }
    .config-btn-title {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #1890ff;
      border-bottom: 1px solid #e8e8e8;
    }
    .tables {
      .ant-select-selection-selected-value {
        opacity: 0.4!important;

 src/templates/modalconfig/dragelement/card.jsx

@@ -26,7 +26,10 @@
    hover({ id: draggedId }) {
      if (!draggedId) return
      if (draggedId !== id) {
        console.log(id)
        const { index: overIndex } = findCard(id)
        console.log(overIndex)
        console.log(draggedId)
        moveCard(draggedId, overIndex)
      }
    },

 src/templates/modalconfig/dragelement/index.jsx

@@ -7,14 +7,22 @@
import ItemTypes from './itemtypes'
import './index.scss'

const Container = ({list, setting, placeholder, handleList, handleForm, closeForm }) => {
const Container = ({list, group, setting, placeholder, handleList, handleForm, closeForm }) => {
  let target = null

  const [cards, setCards] = useState(list)
  const moveCard = (id, atIndex) => {
    const { card, index } = findCard(id)

    if (!card) return

    const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] })
    setCards(_cards)
    handleList(_cards)
    if (!group) {
      handleList(_cards)
    } else {
      handleList(_cards, group)
    }
  }

  const findCard = id => {
@@ -42,6 +50,13 @@
  const [, drop] = useDrop({
    accept: ItemTypes.form,
    drop(item) {
      if (item.hasOwnProperty('originalIndex') && group) {
        const { card } = findCard(item.id)

        if (!card) {
          handleList(cards, group, item.id)
        }
      }
      if (item.hasOwnProperty('originalIndex')) {
        return
      }
@@ -62,14 +77,14 @@
      newcard.orderBy = ''
      newcard.orderType = 'asc'
      
      let indexes = cards.map(car => {return car.id})
      let newid = 0
      while (indexes.includes(newid)) {
        newid++
      }
      newcard.id = newid
      // let indexes = cards.map(car => {return car.id})
      // let newid = 0
      // while (indexes.includes(newid)) {
      //   newid++
      // }
      newcard.id = Utils.getuuid()

      let targetId = indexes.length > 0 ? indexes[indexes.length - 1] : 0
      let targetId = cards.length > 0 ? cards[cards.length - 1].id : 0
      if (target) {
        targetId = target.id
      }
@@ -85,7 +100,13 @@

      const _cards = update(cards, { $splice: [[targetIndex, 0, newcard]] })
      setCards(_cards)
      handleList(_cards)

      if (!group) {
        handleList(_cards)
      } else {
        handleList(_cards, group)
      }

      target = null
    }
  })

 src/templates/modalconfig/editcard/index.jsx

@@ -86,7 +86,7 @@
    const { dataSource, type } = this.state

    return (
      <div className="common-modal-edit-card">
      <div className="modal-fields-edit-card">
        <Row className="search-row">
          <Col span={8}>
            <Search placeholder="请输入字段名" onSearch={value => {this.setState({searchKey: value})}} enterButton />

 src/templates/modalconfig/editcard/index.scss

@@ -1,10 +1,10 @@
.common-modal-edit-card {
.modal-fields-edit-card {
  margin-left: -10px;
  margin-right: -10px;
  .ant-col {
    padding: 10px;
    .ant-card {
      padding: 10px;
      padding: 0px 10px 10px;
      p {
        margin-bottom: 5px;
        overflow: hidden;
@@ -25,6 +25,7 @@
        opacity: 0.4;
      }
      .base {
        padding-top: 10px;
        cursor: pointer;
      }
    }

 src/templates/modalconfig/groupform/index.jsx

@@ -7,7 +7,35 @@
class SettingForm extends Component {
  static propTpyes = {
    dict: PropTypes.object, // 字典项
    data: PropTypes.object
    group: PropTypes.object, // 字典项
    config: PropTypes.object
  }

  state = {
    source: null,
    selectds: null,
    default: null
  }

  UNSAFE_componentWillMount () {
    const { config, group } = this.props

    let _source = null
    let _default = config.groups[config.groups.length - 1]
    let _selectds = []

    if (config.groups.length === 1) {
      _source = config.fields.filter(item => !item.origin)
    } else {
      _source = [..._default.sublist, ...group.sublist]
      _selectds = group.sublist.map(item => { return item.uuid })
    }

    this.setState({
      source: _source,
      selectds: _selectds,
      default: _default
    })
  }

  handleConfirm = () => {
@@ -15,7 +43,17 @@
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          resolve(values)
          let targetKeys = this.refs['fields-transfer'].state.targetKeys
          let defaultlist = this.state.source.filter(item => !targetKeys.includes(item.uuid))

          values.sublist = targetKeys.map(item => {
            return this.state.source.filter(cell => cell.uuid === item)[0]
          })

          resolve({
            default: {...this.state.default, sublist: defaultlist},
            target: values
          })
        } else {
          reject(err)
        }
@@ -24,7 +62,7 @@
  }

  render() {
    const { data } = this.props
    const { group, config } = this.props
    const { getFieldDecorator } = this.props.form

    const formItemLayout = {
@@ -42,20 +80,26 @@
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item label="分组名称">
              {getFieldDecorator('title', {
                initialValue: data.title
              {getFieldDecorator('label', {
                initialValue: group.label,
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.input'] + '分组名称!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off"/>)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="排序">
              {getFieldDecorator('sort', {
                initialValue: data.sort
                initialValue: group.hasOwnProperty('sort') ? group.sort : config.groups.length
              })(<InputNumber min={0} max={100} precision={0} />)}
            </Form.Item>
          </Col>
          <Col span={24}>
            <TransferForm dict={this.props.dict} columns={this.props.columns} ref="column-transfer" selected={this.props.card.sublist}/>
            <TransferForm dict={this.props.dict} fields={this.state.source} ref="fields-transfer" selected={this.state.selectds}/>
          </Col>
        </Row>
      </Form>

 src/templates/modalconfig/index.jsx

@@ -49,6 +49,7 @@
    selectedTables: [],    // 已选表名
    originMenu: null,      // 原始菜单
    groupVisible: false,   // 全局配置模态框
    curgroup: null         // 当前组，新建或编辑
  }

  /**
@@ -66,7 +67,6 @@
      _config = editAction.pageParam
    } else {
      _config = JSON.parse(JSON.stringify((Source.baseConfig)))
      _config.groups[0].sublist = _config.fields.map(field => field.uuid)
    }

    if (!_config.setting.title) {
@@ -192,11 +192,77 @@
   * 1、表单拖拽添加时，检查是否存在示例表单，如存在则去除示例
   * 2、表单移动后，保存移动后的顺序
   */
  handleList = (list) => {
  handleList = (list, group, elementId) => {
    let _config = JSON.parse(JSON.stringify(this.state.config))

    if (list.length > _config.fields.length) {
      _config.fields = list.filter(item => !item.origin)
    if (!group && !elementId) {
      if (list.length > _config.fields.length) {
        _config.fields = list.filter(item => !item.origin)
  
        this.setState({
          loading: true,
          config: _config
        }, () => {
          this.setState({
            loading: false
          })
        })
      } else {
        _config.fields = list
        this.setState({config: _config})
      }
    } else if (group && !elementId) {
      if (list.length > group.sublist.length) {
        group.sublist = list
        _config.groups = _config.groups.map(item => {
          if (item.uuid === group.uuid) {
            return group
          } else {
            return item
          }
        })
  
        this.setState({
          loading: true,
          config: _config
        }, () => {
          this.setState({
            loading: false
          })
        })
      } else {
        group.sublist = list
        _config.groups = _config.groups.map(item => {
          if (item.uuid === group.uuid) {
            return group
          } else {
            return item
          }
        })
        this.setState({config: _config})
      }
    } else if (group && elementId) {
      let element = null
      _config.groups.forEach(item => {
        item.sublist = item.sublist.filter(cell => {
          if (cell.id !== elementId) {
            return true
          } else {
            element = cell
            return false
          }
        })
      })

      group.sublist.push(element)

      _config.groups = _config.groups.map(item => {
        if (item.uuid === group.uuid) {
          return group
        } else {
          return item
        }
      })

      this.setState({
        loading: true,
@@ -206,9 +272,6 @@
          loading: false
        })
      })
    } else {
      _config.fields = list
      this.setState({config: _config})
    }
  }

@@ -627,11 +690,21 @@
      })
    })

    config.fields.forEach(item => {
      if (columns.has(item.field)) {
        columns.set(item.field, {...item, selected: true})
      }
    })
    if (config.groups.length > 1) {
      config.groups.forEach(group => {
        group.sublist.forEach(item => {
          if (columns.has(item.field)) {
            columns.set(item.field, {...item, selected: true})
          }
        })
      })
    } else {
      config.fields.forEach(item => {
        if (columns.has(item.field)) {
          columns.set(item.field, {...item, selected: true})
        }
      })
    }

    this.setState({
      tableVisible: true,
@@ -661,32 +734,33 @@
      columns.set(card.field, card)
    })

    let items = []
    _config.fields.forEach(item => {
      if (columns.has(item.field)) {
        let cell = columns.get(item.field)

        if (cell.selected && cell.type === item.type) { // 数据选择状态及类型未修改时，直接添加
          items.push(item)
        } else if (cell.selected) {                     // 数据类型修改时，重置类型及初始值
          item.type = cell.type
          item.initval = ''
          items.push(item)
        }
        columns.delete(item.field)
      } else if (!item.origin) {                        // 过滤示例项
        items.push(item)
      }
    })

    let _columns = [...columns.values()]
    let indexes = items.map(card => {return card.id})
    let id = Math.max(...indexes, 0) + 1

    _columns.forEach(item => { // 循环添加新增字段
      if (item.selected) {
        let newcard = {
          id: id,
    if (_config.groups.length > 1) {
      _config.groups.forEach(group => {
        let items = []
        group.sublist.forEach(item => {
          if (columns.has(item.field)) {
            let cell = columns.get(item.field)
    
            if (cell.selected && cell.type === item.type) { // 数据选择状态及类型未修改时，直接添加
              items.push(item)
            } else if (cell.selected) {                     // 数据类型修改时，重置类型及初始值
              item.type = cell.type
              item.initval = ''
              items.push(item)
            }
            columns.delete(item.field)
          } else if (!item.origin) {                        // 过滤示例项
            items.push(item)
          }
        })
        group.sublist = items
      })
      
      let _columns = [...columns.values()]
  
      let _additems = _columns.map(item => { // 循环添加新增字段
        return {
          id: Utils.getuuid(),
          uuid: Utils.getuuid(),
          label: item.label,
          field: item.field,
@@ -702,13 +776,56 @@
          orderBy: '',
          orderType: 'asc',
        }
      })
      _config.groups[_config.groups.length - 1].sublist = [..._config.groups[_config.groups.length - 1].sublist, ..._additems]

        items.push(newcard)
        id++
      }
    })

    _config.fields = items
    } else {
      let items = []
      _config.fields.forEach(item => {
        if (columns.has(item.field)) {
          let cell = columns.get(item.field)
  
          if (cell.selected && cell.type === item.type) { // 数据选择状态及类型未修改时，直接添加
            items.push(item)
          } else if (cell.selected) {                     // 数据类型修改时，重置类型及初始值
            item.type = cell.type
            item.initval = ''
            items.push(item)
          }
          columns.delete(item.field)
        } else if (!item.origin) {                        // 过滤示例项
          items.push(item)
        }
      })
  
      let _columns = [...columns.values()]
  
      _columns.forEach(item => { // 循环添加新增字段
        if (item.selected) {
          let newcard = {
            id: Utils.getuuid(),
            uuid: Utils.getuuid(),
            label: item.label,
            field: item.field,
            initval: '',
            type: item.type,
            resourceType: '0',
            setAll: 'false',
            options: [],
            dataSource: '',
            linkField: '',
            valueField: '',
            valueText: '',
            orderBy: '',
            orderType: 'asc',
          }
  
          items.push(newcard)
        }
      })
  
      _config.fields = items
    }

    this.setState({
      tableVisible: false,
@@ -816,12 +933,105 @@
    })
  }

  handleGroup = () => {
  handleGroup = (group) => {
    let curgroup = ''

    if (group) {
      curgroup = group
    } else {
      curgroup = {
        isnew: true,
        label: '',
        default: false,
        uuid: Utils.getuuid(),
        sublist: []
      }
    }

    this.setState({
      groupVisible: true,
      curgroup: curgroup
    })
  }

  closeGroup = (group) => {
    let _this = this

    confirm({
      content: `确定删除分组<<${group.label}>>吗？`,
      okText: this.state.dict['header.confirm'],
      cancelText: this.state.dict['header.cancel'],
      onOk() {
        let _config = JSON.parse(JSON.stringify(_this.state.config))
        _config.groups = _config.groups.filter(item => !(item.uuid === group.uuid))
        let _length = _config.groups.length
        
        if (_length === 1) {
          _config.fields = [...group.sublist, ..._config.groups[0].sublist]
          _config.groups[0].sublist = []
        } else {
          _config.groups[_length - 1].sublist = [...group.sublist, ..._config.groups[_length - 1].sublist]
        }

        _this.setState({
          config: _config,
          loading: true
        }, () => {
          _this.setState({
            loading: false
          })
        })
      },
      onCancel() {}
    })
  }

  handleGroupSave = () => {
    let _group = JSON.parse(JSON.stringify(this.state.curgroup))
    let config = JSON.parse(JSON.stringify(this.state.config))

    this.groupRef.handleConfirm().then(res => {
      _group = {..._group, ...res.target}

      if (_group.isnew) {
        delete _group.isnew
        config.groups.unshift(_group)
        config.groups = config.groups.map(item => {
          if (item.default) {
            return res.default
          } else {
            return item
          }
        })
      } else {
        config.groups = config.groups.map(item => {
          if (item.uuid === _group.uuid) {
            return _group
          } else if (item.default) {
            return res.default
          } else {
            return item
          }
        })
      }

      config.fields = []

      config.groups = config.groups.sort((a, b) => {
        return a.sort - b.sort
      })
      
      this.setState({
        groupVisible: false,
        curgroup: '',
        loading: true,
        config: config
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  render () {
@@ -903,9 +1113,14 @@
                      config.groups.map(group => {
                        return (
                          <div key={group.uuid}>
                            <p className="group-title">{group.label}</p>
                            <p className={'group-title' + (group.default ? ' default' : '')}>
                              <span>{group.label}</span>
                              <Icon className="edit" type="edit" onClick={() => {this.handleGroup(group)}} />
                              <Icon className="edit close" type="close" onClick={() => {this.closeGroup(group)}} />
                            </p>
                            <DragElement
                              list={config.fields}
                              group={group}
                              list={group.sublist}
                              setting={config.setting}
                              placeholder={this.state.dict['header.form.modal.placeholder']}
                              handleList={this.handleList}
@@ -959,6 +1174,7 @@
          />}
        </Modal>
        <Modal
          wrapClassName="modal-fields"
          title={this.state.dict['header.edit']}
          visible={this.state.tableVisible}
          width={'65vw'}
@@ -1011,9 +1227,10 @@
          destroyOnClose
        >
          <GroupForm
            data={config.setting}
            config={config}
            group={this.state.curgroup}
            dict={this.state.dict}
            wrappedComponentRef={(inst) => this.settingRef = inst}
            wrappedComponentRef={(inst) => this.groupRef = inst}
          />
        </Modal>
      </div>

 src/templates/modalconfig/index.scss

@@ -165,8 +165,31 @@
      .modal-form {
        min-height: 87px;
        .group-title {
          margin: 10px 0px;
          position: relative;
          min-height: 22px;
          margin-bottom: 10px;
          padding-top: 10px;
          border-bottom: 1px solid #e8e8e8;
          .edit {
            position: absolute;
            left: 0;
            top: 0px;
            color: #1890ff;
            cursor: pointer;
            display: none;
          }
          .edit.close {
            left: 20px;
            color: #ff4d4f;
          }
        }
        .group-title.default {
          color: #bcbcbc;
        }
        .group-title:not(.default):hover {
          .edit {
            display: inline-block;
          }
        }
        > .ant-row {
          min-height: 120px;
@@ -266,3 +289,31 @@
    background: rgba(0, 0, 0, 0);
  }
}

.modal-fields {
  .ant-modal {
    top: 50px;
    padding-bottom: 5px;
    .ant-modal-body {
      max-height: calc(100vh - 190px);
      overflow-y: auto;
      .ant-empty {
        margin: 15vh 8px;
      }
    }
    .ant-modal-body::-webkit-scrollbar {
      width: 7px;
    }
    .ant-modal-body::-webkit-scrollbar-thumb {
      border-radius: 5px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
      background: rgba(0, 0, 0, 0.13);
    }
    .ant-modal-body::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.07);
      background: rgba(0, 0, 0, 0);
    }
  }
}

 src/templates/modalconfig/source.jsx

@@ -19,17 +19,11 @@
      sort: 101,
      uuid: Utils.getuuid(),
      sublist: []
    }, {
      label: '组1',
      sort: 1,
      default: false,
      uuid: Utils.getuuid(),
      sublist: []
    }],
    fields: [
      {
        origin: true,
        id: 0,
        id: Utils.getuuid(),
        uuid: Utils.getuuid(),
        label: 'text',
        field: '',
@@ -47,7 +41,7 @@
        display: 'dropdown'
      }, {
        origin: true,
        id: 1,
        id: Utils.getuuid(),
        uuid: Utils.getuuid(),
        label: 'select',
        field: '',
@@ -65,7 +59,7 @@
        display: 'dropdown'
      }, {
        origin: true,
        id: 2,
        id: Utils.getuuid(),
        uuid: Utils.getuuid(),
        label: 'date',
        field: '',

 src/templates/modalconfig/transferform/index.jsx

@@ -5,7 +5,7 @@

class TransferForm extends Component {
  static propTypes = {
    columns: PropTypes.array,
    fields: PropTypes.array,
    selected: PropTypes.array,
    dict: PropTypes.object, // 字典项
  }
@@ -26,8 +26,8 @@
  
  UNSAFE_componentWillMount() {
    let datas = new Map()
    this.props.columns.forEach(item => {
      if (item.field) {
    this.props.fields.forEach(item => {
      if (!item.origin) {
        datas.set(item.uuid, item)
      }
    })
@@ -37,7 +37,6 @@
    this.props.selected.forEach(item => {
      if (datas.has(item)) {
        selecteds.push(item)
        // datas.delete(item)
      }
    })

@@ -54,11 +53,12 @@
  }

  render() {
    const { targetKeys, selectedKeys } = this.state
    const { data, targetKeys, selectedKeys } = this.state

    return (
      <div className="common-table-columns-transfer">
      <div className="modal-fields-transfer">
        <Transfer
          dataSource={this.state.data}
          dataSource={data}
          titles={[this.props.dict['header.form.column.source'], this.props.dict['header.form.column.target']]}
          targetKeys={targetKeys}
          locale={{itemUnit: this.props.dict['header.form.column.itemUnit'], itemsUnit: this.props.dict['header.form.column.itemsUnit']}}

 src/templates/modalconfig/transferform/index.scss

@@ -1,4 +1,4 @@
.common-table-columns-transfer {
.modal-fields-transfer {
  padding-left: 18px;
  .ant-transfer-list {
    width: 296px;

 src/utils/utils.js

@@ -49,6 +49,8 @@
   * @return {String}  value
   */
  static formatOptions (value) {
    if (!value) return ''

    let salt = 'minKe' // 盐值
    // 关键字转换规则
    let format = [{