2020-11-30

king

2020-11-30 d958423116570cb918270ed7b61f7b9c9c2807ba

2020-11-30

 src/menu/components/table/normal-table/columns/cusSwitch/index.jsx

New file
@@ -0,0 +1,54 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
// import { is, fromJS } from 'immutable'
import { Switch } from 'antd'

import './index.scss'

class ColorSketch extends Component {
  static propTpyes = {
    defaultValue: PropTypes.any,
    value: PropTypes.any,
    onChange: PropTypes.func
  }
  state = {
    status: true,
  }

  UNSAFE_componentWillMount () {
    const { defaultValue, value } = this.props
    let initVal = 'true'

    if (this.props['data-__meta']) {
      initVal = this.props['data-__meta'].initialValue
    } else if (defaultValue) {
      initVal = defaultValue
    } else if (value) {
      initVal = value
    }

    if (initVal === 'false') {
      initVal = false
    } else {
      initVal = true
    }
    
    this.setState({status: initVal})
  }

  changeStatus = (val) => {
    this.setState({ status: val }, () => {
      let _val = val ? 'true' : 'false'
      this.props.onChange && this.props.onChange(_val)
    })
  }

  render() {
    const { status } = this.state
    return (
      <Switch checkedChildren="是" unCheckedChildren="否" checked={status} onChange={this.changeStatus} />
    )
  }
}

export default ColorSketch

 src/menu/components/table/normal-table/columns/cusSwitch/index.scss

New file
@@ -0,0 +1,40 @@
.color-sketch-block {
  height: 25px;
  width: 100%;

  .color-sketch-block-box {
    display: inline-block;
    width: calc(100% - 160px);
    height: 100%;
    border-radius: 2px;
    background: #ffffff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==') left center;
  }
  .color-sketch-block-inner {
    display: inline-block;
    cursor: pointer;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    width: 100%;
    height: 100%;
  }
  .color-sketch-value {
    display: inline-block;
    width: 160px;
    padding-left: 10px;
    height: 25px;
    line-height: 25px;
    vertical-align: top;
    white-space: nowrap;
    overflow: visible;
  }
}

.color-sketch-popover {
  z-index: 1090!important;
  .ant-popover-inner-content {
    padding: 0;
    .sketch-picker {
      width: 250px!important;
    }
  }
}

 src/menu/components/table/normal-table/columns/index.jsx

New file
@@ -0,0 +1,183 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { DndProvider, DragSource, DropTarget } from 'react-dnd'
import { Table, Form } from 'antd'

import Utils from '@/utils/utils.js'
import './index.scss'

class HeaderCol extends Component {
  render() {
    const { connectDragSource, connectDropTarget, moveCol, index, ...restProps } = this.props

    if (index !== undefined) {
      return connectDragSource(
        connectDropTarget(<th {...restProps} index={index} style={{ cursor: 'move' }}/>),
      )
    } else {
      return (<th {...restProps} index={index}/>)
    }
  }
}

const rowSource = {
  beginDrag(props) {
    return {
      index: props.index,
    }
  }
}

const ColTarget = {
  drop(props, monitor) {
    const dragIndex = monitor.getItem().index
    const hoverIndex = props.index

    if (dragIndex === undefined || hoverIndex === undefined || dragIndex === hoverIndex) {
      return
    }

    props.moveCol(dragIndex, hoverIndex)
    monitor.getItem().index = hoverIndex
  },
}

const DragableHeaderCol = DropTarget('col', ColTarget, connect => ({
  connectDropTarget: connect.dropTarget()
}))(
  DragSource('col', rowSource, connect => ({
    connectDragSource: connect.dragSource(),
  }))(HeaderCol),
)

class EditableCell extends Component {
  render() {
    const { column, children, style } = this.props

    if (column) {
      return (
        <td style={style}>
          {column.field}
        </td>
      )
    } else {
      return (
        <td style={style}>
          {children}
        </td>
      )
    }
  }
}

class EditTable extends Component {
  static propTpyes = {
    actions: PropTypes.any,         // 操作项
    data: PropTypes.any,            // 数据列表
    columns: PropTypes.array,       // 显示列
    onChange: PropTypes.func        // 数据变化
  }

  state = {
    data: [{uuid: Utils.getuuid()}],
    columns: []
  }

  UNSAFE_componentWillMount () {
    this.setState({
      columns: fromJS(this.props.config.cols).toJS()
    })
  }

  // UNSAFE_componentWillReceiveProps (nextProps) {
  //   if (!is(fromJS(this.state.data), fromJS(nextProps.data))) {
  //     this.setState({data: nextProps.data})
  //   }
  // }
  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  moveCol = (dragIndex, hoverIndex) => {
    let _columns = fromJS(this.state.columns).toJS()

    _columns.splice(hoverIndex, 0, ..._columns.splice(dragIndex, 1))

    this.setState({
      columns: _columns
    }, () => {
      // this.props.onChange(_data)
    })
  }

  render() {
    let components = {
      header: {
        cell: DragableHeaderCol
      },
      body: {
        cell: EditableCell
      }
    }
    
    const columns = this.state.columns.map((col, index) => {
      return {
        ...col,
        title: col.label,
        dataIndex: col.field,
        align: 'right',
        sorter: col.IsSort === 'true',
        onCell: () => ({
          column: col
        }),
        children: col.subcols && col.subcols.length > 0 ? col.subcols.map(cell => ({
          align: 'left',
          title: cell.label,
          key: cell.uuid,
          width: 120,
          onCell: () => ({
            column: cell
          }),
        })) : null,
        onHeaderCell: column => ({
          index,
          key: column.uuid,
          title: column.label,
          moveCol: this.moveCol,
        })
      }
    })

    return (
      <div className="normal-table-columns">
        <DndProvider>
          <Table
            bordered
            rowKey="uuid"
            // bordered={false}
            components={components}
            dataSource={this.state.data}
            rowSelection={{type: 'radio'}}
            columns={columns}
            rowClassName="editable-row"
            pagination={{
              current: 1,
              pageSize: 10,
              pageSizeOptions: ['10', '25', '50', '100', '500', '1000'],
              showSizeChanger: true,
              total: 58,
              showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`
            }}
            // onRow={(record, index) => ({
            //   index,
            //   moveRow: this.moveRow,
            // })}
          />
        </DndProvider>
      </div>
    )
  }
}

export default Form.create()(EditTable)

 src/menu/components/table/normal-table/columns/index.scss

New file
@@ -0,0 +1,12 @@
.normal-table-columns {
  .ant-table-body {
    overflow-x: auto;
    padding-bottom: 10px;
  }
  .ant-table-thead {
    th {
      width: 100px;
    }
  }
}


 src/menu/components/table/normal-table/index.jsx

@@ -17,7 +17,7 @@
const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const SearchComponent = asyncComponent(() => import('@/templates/sharecomponent/searchcomponent'))
const ActionComponent = asyncComponent(() => import('@/menu/actioncomponent'))
const ColumnComponent = asyncComponent(() => import('./columncomponent'))
const ColumnComponent = asyncComponent(() => import('./columns'))
// const WrapComponent = asyncIconComponent(() => import('../data-card/wrapsetting'))
// const SearchComponent = asyncComponent(() => import('@/menu/searchcomponent'))

@@ -69,21 +69,27 @@
        headerStyle: { fontSize: '16px' },
        columns: [],
        cols: [
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label', field: '', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 }
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label1', field: 'field1', Hide: 'false', type: 'text', Width: 120, subcols: [
            { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label11', field: 'field11', Hide: 'false', type: 'text', Width: 120 },
            { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label12', field: 'field12', Hide: 'false', type: 'text', Width: 120 },
          ] },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label2', field: 'field2', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label3', field: 'field3', Hide: 'false', type: 'text', Width: 120, subcols: [
            { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label31', field: 'field31', Hide: 'false', type: 'text', Width: 120 },
            { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label32', field: 'field32', Hide: 'false', type: 'text', Width: 120 },
          ] },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label4', field: 'field4', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label5', field: 'field5', Hide: 'false', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label6', field: 'field6', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label7', field: 'field7', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label8', field: 'field8', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label9', field: 'field9', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label10', field: 'field10', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label11', field: 'field11', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label12', field: 'field12', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label13', field: 'field13', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label14', field: 'field14', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 },
          { origin: true, uuid: Utils.getuuid(), Align: 'left', label: 'label15', field: 'field15', Hide: 'false', IsSort: 'true', type: 'text', Width: 120 }
        ],
        scripts: []
      }

 src/templates/modalconfig/index.jsx

@@ -94,7 +94,7 @@
    if (subConfig) {
      _config = subConfig
    } else {
      _config = JSON.parse(JSON.stringify(BaseConfig))
      _config = fromJS(BaseConfig).toJS()
    }

    if (!_config.setting.title) {
@@ -104,7 +104,7 @@
    // 主菜单已有选择的表名，模态框没有表名时，复制主菜单表名
    _config.tables = _config.tables.length === 0 ? _menu.tables : _config.tables

    let _source = JSON.parse(JSON.stringify(SearchItems))
    let _source = fromJS(SearchItems).toJS()
    if (!!this.props.editTab) {
      _source.push({
        type: 'form',
@@ -120,7 +120,7 @@
      source: _source,
      config: _config,
      selectedTables: _config.tables || [],
      originConfig: JSON.parse(JSON.stringify(_config)),
      originConfig: fromJS(_config).toJS(),
      modalformlist: [
        {
          type: 'text',
@@ -272,7 +272,7 @@
   * 3、新增表单时，直接打开编辑框
   */
  handleList = (list, group, elementId, newcard) => {
    let _config = JSON.parse(JSON.stringify(this.state.config))
    let _config = fromJS(this.state.config).toJS()

    if (!group && !elementId) {
      // 没有分组时（拖拽添加）
@@ -354,7 +354,7 @@
   */
  handleForm = (_card) => {
    const { menu, tabConfig, subTabConfig } = this.props
    let card = JSON.parse(JSON.stringify(_card))
    let card = fromJS(_card).toJS()
    const { config } = this.state
    let _inputfields = []
    let _linkableFields = []
@@ -451,7 +451,7 @@
   */
  handleSubmit = () => {
    this.formRef.handleConfirm().then(res => {
      let _config = JSON.parse(JSON.stringify(this.state.config))
      let _config = fromJS(this.state.config).toJS()
      let fieldrepet = false // 字段重复
      let labelrepet = false // 提示文字重复

@@ -560,7 +560,7 @@
    confirm({
      content: `确定删除<<${card.label}>>吗？`,
      onOk() {
        let _config = JSON.parse(JSON.stringify(_this.state.config))
        let _config = fromJS(_this.state.config).toJS()

        if (_config.groups.length > 0) {
          _config.groups.forEach(group => {
@@ -744,7 +744,7 @@
      })
    }

    let _config = JSON.parse(JSON.stringify(this.state.config))
    let _config = fromJS(this.state.config).toJS()

    let cards = this.refs.searchcard.state.selectCards
    let columns = new Map()
@@ -972,7 +972,7 @@
    confirm({
      content: `确定删除分组<<${group.label}>>吗？`,
      onOk() {
        let _config = JSON.parse(JSON.stringify(_this.state.config))
        let _config = fromJS(_this.state.config).toJS()
        _config.groups = _config.groups.filter(item => !(item.uuid === group.uuid))
        let _length = _config.groups.length
        
@@ -992,8 +992,8 @@
  }

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

    this.groupRef.handleConfirm().then(res => {
      _group = {..._group, ...res.target}
@@ -1076,6 +1076,7 @@
      this.setState({
        config: res.content
      })
      this.handleForm(res.newform)
    }
  }


 src/templates/zshare/editcomponent/index.jsx

@@ -249,7 +249,8 @@
        }, () => {
          this.props.refresh({
            type: 'paste',
            content: _config
            content: _config,
            newform: res
          })
        })
      } else {

 src/views/billprint/index.jsx

@@ -113,7 +113,7 @@

        let pageParam = {
          A4: {
            vertical: 1000,
            vertical: 980,
            horizontal: 1200,
            verticaldefault: 1.45789,
            verticalwithout: 1.41428,
@@ -484,7 +484,7 @@
          doc.write(`<LINK rel="stylesheet" type="text/css" href="${linkList[i].href}">`)
        }
      }
      doc.write(`<style>body{width: ${config.width}px!important;}</style>`)
      doc.write(`<style>body{width: ${config.width}px!important;}*{border-style: solid;border-width: 0;}</style>`)
      for (let i = 0;i < styleList.length;i++) {
        doc.write('<style>' + styleList[i].innerHTML + '</style>')
      }
@@ -492,6 +492,7 @@
      doc.write(jubuData)
      doc.write(`</body></html>`)
      doc.close()

      iframe.contentWindow.focus()
      iframe.contentWindow.print()