2019-12-01

king

2019-12-01 cf8e332b14ca79859fcd89f2ac097ed7c6aa66c5

2019-12-01

 src/components/preview/index.scss

@@ -10,6 +10,7 @@
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s;
  cursor: zoom-out;
  img {
    max-width: 80vw;
    max-height: 90vh;

 src/components/sidemenu/editthdmenu/index.jsx

@@ -3,7 +3,7 @@
import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { notification, Modal, Button, Spin, Icon, Col, Card, Tabs, Row } from 'antd'
import { notification, Modal, Button, Spin, Icon, Col, Card, Tabs, Row, Input } from 'antd'
import Preview from '@/components/preview'
import TransferForm from '@/components/transferform'
import Utils from '@/utils/utils.js'
@@ -19,6 +19,7 @@
const ModalConfig = asyncLoadComponent(() => import('@/templates/modalconfig'))
const { confirm } = Modal
const { TabPane } = Tabs
const { Search } = Input
const illust = {
  CommonTable: nortable
}
@@ -48,6 +49,7 @@
    selectTemp: '', // 选择模板
    usedTemplates: null,
    menuConfig: '',
    tempSearchKey: '',
    baseTemplates: [{
      title: '基础表格',
      type: 'CommonTable',
@@ -146,8 +148,24 @@
  handleSubBtn = (type) => {
    // 操作按钮：添加、解除冻结、确认及关闭
    if (type === 'add') { // 点击添加时，展开模板
      if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
        notification.warning({
          top: 92,
          message: this.state.dict['header.menu.presave'],
          duration: 10
        })
        return
      }
      this.setState({tabview: 'template', type: 'add'})
    } else if (type === 'thaw') {
      if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
        notification.warning({
          top: 92,
          message: this.state.dict['header.menu.presave'],
          duration: 10
        })
        return
      }
      this.setState({
        thawMvisible: true
      })
@@ -403,9 +421,9 @@
                      <Col key={template.type} span={8}>
                        <Card
                          title={template.title}>
                          <img src={template.url} alt=""/>
                          <img onClick={() => {this.previewPicture(template.url)}} src={template.url} alt=""/>
                          <div className="card-operation">
                            <Button type="primary" onClick={() => {this.previewPicture(template.url)}}>预览</Button>
                            {/* <Button type="primary" onClick={() => {this.previewPicture(template.url)}}>预览</Button> */}
                            <Button type="primary" onClick={() => {this.useTemplate(template)}}>使用模板</Button>
                          </div>
                        </Card>
@@ -416,19 +434,28 @@
              </TabPane>
              <TabPane tab="已使用模板" key="2">
                <Row>
                  <Col span={8}>
                    <Search placeholder="请输入菜单名称" defaultValue={this.state.tempSearchKey} onSearch={value => {this.setState({tempSearchKey: value})}} enterButton />
                  </Col>
                </Row>
                <Row>
                  {this.state.usedTemplates && this.state.usedTemplates.map((template, index) => {
                    return (
                      <Col key={template.type + index} span={8}>
                        <Card
                          title={template.title}>
                          <img src={template.url} alt=""/>
                          <div className="card-operation">
                            <Button type="primary" onClick={() => {this.previewPicture(template.url)}}>预览</Button>
                            <Button type="primary" onClick={() => {this.useTemplate(template)}}>使用模板</Button>
                          </div>
                        </Card>
                      </Col>
                    )
                    if (template.title.toLowerCase().indexOf(this.state.tempSearchKey.toLowerCase()) >= 0) {
                      return (
                        <Col key={template.type + index} span={8}>
                          <Card
                            title={template.title}>
                            <img onClick={() => {this.previewPicture(template.url)}} src={template.url} alt=""/>
                            <div className="card-operation">
                              {/* <Button type="primary" onClick={() => {this.previewPicture(template.url)}}>预览</Button> */}
                              <Button type="primary" onClick={() => {this.useTemplate(template)}}>使用模板</Button>
                            </div>
                          </Card>
                        </Col>
                      )
                    } else {
                      return ''
                    }
                  })}
                </Row>
              </TabPane>

 src/components/sidemenu/editthdmenu/index.scss

@@ -78,6 +78,7 @@
      }
      img {
        max-width: 100%;
        cursor: zoom-in;
      }
    }
  }

 src/tabviews/commontable/index.jsx

@@ -27,17 +27,16 @@
    searchlist: null,
    actions: null,
    columns: null,
    arr_field: '',
    setting: null,
    data: null,
    total: 0,
    loading: false,
    param: {
      pageIndex: 1,
      pageSize: 10,
      orderColumn: '',
      orderType: '',
      search: ''
    },
    pageIndex: 1,
    pageSize: 10,
    orderColumn: '',
    orderType: 'asc',
    search: '',
    fixed: {}
  }

@@ -67,14 +66,29 @@
          duration: 10
        })
      }

      let _search = Utils.mainjointsearchkey(config.search)
      let _arrField = []

      config.columns.forEach(col => {
        if (col.field) {
          _arrField.push(col.field)
        }
      })

      this.setState({
        config: config,
        setting: config.setting,
        searchlist: config.search,
        actions: config.action,
        columns: config.columns
        columns: config.columns,
        arr_field: _arrField.join(','),
        search: _search ? 'where (' + _search + ')' : '',
        orderColumn: config.setting.orderColumn,
        loading: true
      }, () => {
        this.improveSearch()
        this.loadmaindata()
      })
    } else {
      this.setState({
@@ -159,66 +173,82 @@
    })
  }

  async loadmaindata (pageIndex = 1, pageSize = 10, orderColumn = '', orderType = '', search = '') {
  async loadmaindata () {
    const { arr_field, pageIndex, pageSize, orderColumn, orderType, search, setting } = this.state
    // 获取列表数据
    let result = await Api.getMainTableData(this.props.MenuNo, pageIndex, pageSize, orderColumn, orderType, search)
    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      arr_field: arr_field
    }

    let LText = `select top ${pageSize} ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${orderColumn} ${orderType}) as rows from ${setting.dataresource} ${search}) tmptable where rows > ${pageSize * (pageIndex - 1)} order by tmptable.rows`
    let DateCount = `select count(1) as total from ${setting.dataresource} ${search}`
    console.log(LText)
    console.log(DateCount)
    param.LText = Utils.formatOptions(LText)
    param.DateCount = Utils.formatOptions(DateCount)
    let result = await Api.genericInterface(param)
    if (result.status) {
      this.setState({
        data: result.data.map((item, index) => {
          item.key = index
          item.rows = item.mkrows
          return item
        }),
        total: result.total,
        loading: false
      })
    } else {
      this.setState({
        loading: false
      })
      notification.error({
        top: 92,
        message: result.message,
        duration: 15
      })
    }
  }

  refreshbysearch = (searches) => {
    // 搜索条件变化
    console.log(searches)
    // searches = Utils.jointsearchkey(searches)
    // this.loadmaindata(this.state.param.pageIndex, this.state.param.pageSize, this.state.param.orderColumn, this.state.param.orderType, searches)
    // let param = Object.assign({}, this.state.param, {
    //   search: searches
    // })
    // this.setState({
    //   loading: true,
    //   param: param
    // })
    let search = Utils.mainjointsearchkey(searches)
    this.refs.mainTable.resetTable()

    this.setState({
      loading: true,
      search: search ? 'where (' + search + ')' : ''
    }, () => {
      this.loadmaindata()
    })
  }

  refreshbytable = (pagination, filters, sorter) => {
    // 表格查询条件修改
    console.log(pagination)
    console.log(filters)
    console.log(sorter)
    // if (sorter.order) {
    //   let _chg = {
    //     ascend: 'asc',
    //     descend: 'desc'
    //   }
    //   sorter.order = _chg[sorter.order]
    // }
    // this.loadmaindata(pagination.current, pagination.pageSize, sorter.field, sorter.order, this.state.param.search)
    // let param = Object.assign({}, this.state.param, {
    //   pageIndex: pagination.current,
    //   pageSize: pagination.pageSize,
    //   orderColumn: sorter.field,
    //   orderType: sorter.order
    // })
    // this.setState({
    //   loading: true,
    //   param: param
    // })
    if (sorter.order) {
      let _chg = {
        ascend: 'asc',
        descend: 'desc'
      }
      sorter.order = _chg[sorter.order]
    }

    this.setState({
      loading: true,
      pageIndex: pagination.current,
      pageSize: pagination.pageSize,
      orderColumn: sorter.field || this.state.setting.orderColumn,
      orderType: sorter.order || 'asc'
    }, () => {
      this.loadmaindata()
    })
  }

  refreshbyaction = (btn, type) => {
    // 按钮操作后刷新表格,重置页码及选择项
    console.log(btn)
    console.log(type)
    // this.refs.mainTable.resetTable()
    this.refs.mainTable.resetTable()
    // this.loadmaindata(1, this.state.param.pageSize, this.state.param.orderColumn, this.state.param.orderType, this.state.param.search)
    // this.setState({
    //   loading: true
@@ -239,22 +269,22 @@
    this.loadconfig()
    // this.loadmaindata()

    this.setState({
      data: [1,2,3,4,5,6,7,8,9,10].map((item, index) => {
        return {
          key: index,
          ID: item + 'mainkey',
          ExRateName: '$',
          SupplierName: '天猫' + item + '店',
          SupShortName: '天猫',
          SupplierCode: '201922' + item,
          OrgName: '阿里巴巴',
          OrgCode: '302999',
          PlanDate: '2019-11-' + (item < 10 ? '0' + item : item)
        }
      }),
      total: 329
    })
    // this.setState({
    //   data: [1,2,3,4,5,6,7,8,9,10].map((item, index) => {
    //     return {
    //       key: index,
    //       ID: item + 'mainkey',
    //       ExRateName: '$',
    //       SupplierName: '天猫' + item + '店',
    //       SupShortName: '天猫',
    //       SupplierCode: '201922' + item,
    //       OrgName: '阿里巴巴',
    //       OrgCode: '302999',
    //       PlanDate: '2019-11-' + (item < 10 ? '0' + item : item)
    //     }
    //   }),
    //   total: 329
    // })
  }

  shouldComponentUpdate (nextProps, nextState) {

 src/tabviews/commontable/mainAction/index.jsx

@@ -74,6 +74,12 @@
      this.execSubmit(item, data, () => {
        this.setState({loadingUuid: ''})
      })
    } else {
      notification.warning({
        top: 92,
        message: '完善中。。。',
        duration: 10
      })
    }
  }


 src/tabviews/commontable/mainTable/index.jsx

@@ -35,9 +35,9 @@

      let cell = {
        align: item.Align,
        dataIndex: item.uuid,
        dataIndex: item.field || item.uuid,
        title: item.label,
        sorter: item.IsSort === 'true',
        sorter: item.field && item.IsSort === 'true',
        width: item.Width || 120,
        render: (text, record) => {
          let content = ''

 src/tabviews/commontable/mainTable/index.scss

@@ -14,6 +14,9 @@
    .ant-table-tbody > tr.ant-table-row-selected td {
      background-color: #c4ebfd;
    }
    .ant-table-tbody > tr.ant-table-row-selected:hover .ant-table-column-sort {
      background-color: #c4ebfd;
    }
  }
  .ant-table-body {
    overflow-x: auto!important;

 src/templates/comtableconfig/editcard/index.jsx

@@ -1,6 +1,8 @@
import React, {Component} from 'react'
import { Row, Col, Icon, Radio } from 'antd'
import { Row, Col, Icon, Radio, Input } from 'antd'
import './index.scss'

const { Search } = Input

class EditCardCell extends Component {
  constructor(props) {
@@ -29,6 +31,8 @@
    const { card } = this.state
    this.setState({
      card: {...card, selected: !card.selected}
    }, () => {
      this.props.changeCard(this.state.card)
    })
  }

@@ -72,16 +76,29 @@

    this.state = {
      dataSource: props.data,
      type: props.type
      selectCards: props.data.filter(item => item.selected),
      type: props.type,
      searchKey: ''
    }
  }

  getSelectedCard = () => {
    let box = []
    this.state.dataSource.forEach((item, index) => {
      box.push(this.refs['cellCard' + index].state.card)
  changeCard = (item) => {
    let cards = JSON.parse(JSON.stringify(this.state.selectCards))
    let isAdd = true
    cards = cards.map(card => {
      if (card.field === item.field) {
        isAdd = false
        return item
      } else {
        return card
      }
    })
    return box
    if (isAdd) {
      cards.push(item)
    }
    this.setState({
      selectCards: cards
    })
  }

  render() {
@@ -89,12 +106,23 @@

    return (
      <div className="common-modal-edit-card">
        <Row className="search-row">
          <Col span={8}>
            <Search placeholder="请输入字段名" onSearch={value => {this.setState({searchKey: value})}} enterButton />
          </Col>
        </Row>
        <Row>
          {dataSource.map((item, index) => (
            <Col key={index} span={8}>
              <EditCardCell ref={'cellCard' + index} type={type} card={item} />
            </Col>
          ))}
          {dataSource.map((item, index) => {
            if (item.field.toLowerCase().indexOf(this.state.searchKey.toLowerCase()) >= 0) {
              return (
                <Col key={index} span={8}>
                  <EditCardCell ref={'cellCard' + index} type={type} card={item} changeCard={this.changeCard} />
                </Col>
              )
            } else {
              return ''
            }
          })}
        </Row>
      </div>
    )

 src/templates/comtableconfig/editcard/index.scss

@@ -40,4 +40,9 @@
      }
    }
  }
  .search-row {
    .ant-col {
      padding-top: 0px;
    }
  }
}

 src/templates/comtableconfig/index.jsx

@@ -137,7 +137,7 @@
   * 2、根据配置信息中已使用表获取相关字段信息
   */
  componentDidMount () {
    let _text = "select TbName ,Remark from sDataDictionary where IsKey!='' and Deleted =0"
    let _text = 'select TbName ,Remark from sDataDictionary where IsKey!=\'\' and Deleted =0'
    _text = Utils.formatOptions(_text)

    Api.getSystemConfig({func: 'sPC_Get_SelectedList', LText: _text, obj_name: 'data', arr_field: 'TbName,Remark'}).then(res => {
@@ -811,6 +811,7 @@
    const { menu } = this.props
    const { config, originMenu } = this.state
    this.menuformRef.handleConfirm().then(res => {
      config.search = config.search.filter(item => !item.origin)
      if (config.search[0] && config.search[0].origin) {
        notification.warning({
          top: 92,
@@ -1073,7 +1074,7 @@
    }

    // 获取已选字段集合
    let cards = this.refs.searchcard.getSelectedCard()
    let cards = this.refs.searchcard.state.selectCards
    let columnsMap = new Map()
    cards.forEach(card => {
      columnsMap.set(card.field, card)

 src/templates/comtableconfig/settingform/index.jsx

@@ -47,6 +47,15 @@
        primaryKey = ''
      }
    }

    let orderColumn = data.orderColumn
    if (orderColumn) {
      let field = this.props.columns.filter(column => column.field === orderColumn)
      if (field.length !== 1) {
        orderColumn = ''
      }
    }

    return (
      <Form {...formItemLayout} className="ant-advanced-search-form commontable-setting-form" id="commontable-setting-form">
        <Row gutter={24}>
@@ -131,6 +140,27 @@
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="默认排序">
              {getFieldDecorator('orderColumn', {
                initialValue: orderColumn,
                rules: [
                  {
                    required: true,
                    message: dict['form.required.select'] + '默认排序字段!'
                  }
                ]
              })(
                <Select
                  getPopupContainer={() => document.getElementById('commontable-setting-form')}
                >
                  {this.props.columns.map(option =>
                    <Select.Option id={option.uuid} title={option.label} key={option.uuid} value={option.field}>{option.label}</Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    )

 src/templates/comtableconfig/source.jsx

@@ -13,6 +13,7 @@
      tableName: '',
      tableType: 'checkbox',
      primaryKey: '',
      orderColumn: '',
      dataresource: ''
    },
    tables: [],

 src/utils/utils.js

@@ -1,3 +1,5 @@
import moment from 'moment'

export default class Utils {
  /**
   * @description 生成32位uuid string + 时间
@@ -163,6 +165,66 @@
   * @param {Array}   searches     搜索条件
   * @return {String}  searchText  拼接结果
   */
  static mainjointsearchkey (searches) {
    if (!searches || searches.length === 0) return ''

    if (searches[0].hasOwnProperty('initval')) {
      let newsearches = []
      searches.forEach(search => {
        let item = {
          key: search.field,
          match: search.match,
          type: search.type,
          value: search.initval
        }
        if (item.type === 'date') {
          item.value = item.value ? moment().subtract(item.value, 'days').format('YYYY-MM-DD') : ''
        } else if (item.type === 'datemonth') {
          item.value = item.value ? moment().subtract(item.value, 'month').format('YYYY-MM') : ''
        } else if (item.type === 'dateweek') {
          item.value = item.value ? [moment().subtract(item.value * 7, 'days').startOf('week').format('YYYY-MM-DD'),
            moment().subtract(item.value * 7, 'days').endOf('week').format('YYYY-MM-DD')] : ''
        } else if (item.type === 'daterange') {
          item.value = item.value ? [moment().subtract(item.value, 'days').format('YYYY-MM-DD'),
            moment().subtract(item.value === 1 ? 1 : 0, 'days').format('YYYY-MM-DD')] : ''
        }
        newsearches.push(item)
      })
      searches = newsearches
    }

    let searchText = ''
    searches.forEach(item => {
      if (!item.value) return
      // eslint-disable-next-line
      searchText += (searchText !== '' ? ' ' + 'AND' + ' ' : '')
      if (item.type === 'text' || item.type === 'select') {
        // eslint-disable-next-line
        let str = item.match === '=' ? '' : '%'
        // eslint-disable-next-line
        searchText += item.key + ' ' + item.match + ' ' + '\'' + str + item.value + str + '\''
      } else if (item.type === 'date' || item.type === 'datemonth') {
        // eslint-disable-next-line
        searchText += '(' + item.key + ' ' + item.match + ' ' + '\'' + item.value + '\')'
      } else if (item.type === 'dateweek') {
        // eslint-disable-next-line
        searchText += '(' + item.key + ' ' + item.match + ' ' + '\'' + item.value[0] + '\' AND \'' + item.value[1] + '\')'
      } else if (item.type === 'daterange') {
        // eslint-disable-next-line
        searchText += '(' + item.key + ' ' + item.match + ' ' + '\'' + item.value[0] + '\' AND \'' + item.value[1] + '\')'
      } else {
        // eslint-disable-next-line
        searchText += '(' + item.key + ' ' + item.match + ' ' + '\'' + item.value + '\')'
      }
    })
    return searchText
  }

  /**
   * @description 拼接搜索条件
   * @param {Array}   searches     搜索条件
   * @return {String}  searchText  拼接结果
   */
  static jointsearchkey (searches) {
    if (!searches || searches.length === 0) return ''
    let searchText = ''