| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import md5 from 'md5' |
| | | import { is, fromJS } from 'immutable' |
| | | import {connect} from 'react-redux' |
| | | import { Table, message, Affix, Button, Typography, Modal, Icon } from 'antd' |
| | | |
| | | import { modifyTabview } from '@/store/action' |
| | | import './index.scss' |
| | | import '@/assets/css/table.scss' |
| | | |
| | | const { Paragraph } = Typography |
| | | |
| | | export default class MainTable extends Component { |
| | | class NormalTable extends Component { |
| | | static defaultProps = { |
| | | pagination: true, |
| | | total: 0, |
| | | menuType: 'normal' |
| | | total: 0 |
| | | } |
| | | |
| | | static propTpyes = { |
| | | menuType: PropTypes.any, // 三级菜单类型,HS需特殊处理 |
| | | tableId: PropTypes.string, // 列表Id |
| | | resetTable: PropTypes.bool, // 表格重置 |
| | | pageSize: PropTypes.any, // 每页数据 |
| | | dict: PropTypes.object, // 字典项 |
| | | config: PropTypes.object, // 页面配置 |
| | |
| | | loading: PropTypes.bool, // 表格加载中 |
| | | refreshdata: PropTypes.func, // 表格中排序列、页码的变化时刷新 |
| | | buttonTrigger: PropTypes.func, // 表格中按钮触发操作 |
| | | linkTrigger: PropTypes.func, // 字段透视 |
| | | handleTableId: PropTypes.func, // 数据切换 |
| | | memberLevel: PropTypes.any, // 会员等级 |
| | | pagination: PropTypes.any // 数据分页 |
| | | chgSelectData: PropTypes.func, // 数据切换 |
| | | } |
| | | |
| | | state = { |
| | |
| | | }) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | /** |
| | | * @description 上级菜单id变化时,刷新数据 |
| | | */ |
| | | UNSAFE_componentWillReceiveProps(nextProps) { |
| | | if (this.props.resetTable !== nextProps.resetTable) { |
| | | this.resetTable() |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 组件销毁,清除state更新 |
| | | */ |
| | | componentWillUnmount () { |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | } |
| | | |
| | | // 字段透视 |
| | | triggerLink = (item, record) => { |
| | | const { tabviews, MenuID } = this.props |
| | | let tabmenu = item.linkThdMenu |
| | | let iframes = ['Main/Index', 'bda/rdt', 'Home/rdt'] |
| | | |
| | |
| | | searchval: record[item.field] || '' |
| | | } |
| | | |
| | | this.props.linkTrigger(tabmenu) |
| | | tabmenu.selected = true |
| | | |
| | | let index = 0 |
| | | let isexit = false |
| | | let tabs = tabviews.map((tab, i) => { |
| | | tab.selected = false |
| | | |
| | | if (tab.MenuID === MenuID) { |
| | | index = i |
| | | } else if (tab.MenuID === tabmenu.MenuID) { |
| | | tab.param = tabmenu.param |
| | | tab.selected = true |
| | | isexit = true |
| | | } |
| | | |
| | | return tab |
| | | }) |
| | | |
| | | if (!isexit) { |
| | | tabs.splice(index + 1, 0, tabmenu) |
| | | } |
| | | |
| | | this.props.modifyTabview(tabs) |
| | | } |
| | | |
| | | getMark = (record, marks) => { |
| | |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * @description 图片缩放 |
| | | */ |
| | | imgScaleClose = () => { |
| | | this.setState({ |
| | | imgShow: false |
| | |
| | | message.success(this.props.dict['main.copy.success']) |
| | | } |
| | | |
| | | /** |
| | | * |
| | | */ |
| | | onSelectChange = selectedRowKeys => { |
| | | let index = '' |
| | | if (selectedRowKeys.length > 0) { |
| | |
| | | this.changedata(index) |
| | | |
| | | this.setState({ selectedRowKeys }) |
| | | |
| | | let selects = [] |
| | | selectedRowKeys.forEach(item => { |
| | | selects.push(this.props.data[item]) |
| | | }) |
| | | |
| | | this.props.chgSelectData(selects) |
| | | } |
| | | |
| | | /** |
| | | * @description 点击整行,触发切换, 判断是否可选,单选或多选,进行对应操作 |
| | | */ |
| | | changeRow = (record, index) => { |
| | | // 点击整行,触发切换,判断是否可选,单选或多选,进行对应操作 |
| | | if (!this.props.setting.tableType || this.props.pickup) return |
| | | |
| | | let newkeys = JSON.parse(JSON.stringify(this.state.selectedRowKeys)) |
| | | let _re = newkeys.includes(index) |
| | | |
| | | if (this.props.setting.tableType === 'radio') { |
| | | newkeys = [index] |
| | | this.changedata(index) |
| | | this.setState({ selectedRowKeys: [index] }) |
| | | this.setState({ selectedRowKeys: newkeys }) |
| | | } else { |
| | | let _re = newkeys.includes(index) |
| | | if (_re) { |
| | | newkeys = newkeys.filter(item => item !== index) |
| | | this.changedata('') |
| | |
| | | |
| | | this.setState({ selectedRowKeys: newkeys }) |
| | | } |
| | | |
| | | let selects = [] |
| | | newkeys.forEach(item => { |
| | | selects.push(this.props.data[item]) |
| | | }) |
| | | |
| | | this.props.chgSelectData(selects) |
| | | } |
| | | |
| | | changeTable = (pagination, filters, sorter) => { |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { setting, pickup, pagination } = this.props |
| | | const { setting, pickup } = this.props |
| | | const { selectedRowKeys, lineMarks, colMap } = this.state |
| | | |
| | | // 设置表格选择属性:单选、多选、不可选 |
| | |
| | | } |
| | | |
| | | let _pagination = false |
| | | if (pagination) { |
| | | if (setting.laypage !== 'false') { |
| | | _pagination = { |
| | | current: this.state.pageIndex, |
| | | pageSize: this.state.pageSize, |
| | |
| | | ) |
| | | } |
| | | } |
| | | |
| | | const mapStateToProps = (state) => { |
| | | return { |
| | | menuType: state.editLevel, |
| | | tabviews: state.tabviews, |
| | | memberLevel: state.memberLevel |
| | | } |
| | | } |
| | | |
| | | const mapDispatchToProps = (dispatch) => { |
| | | return { |
| | | modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)) |
| | | } |
| | | } |
| | | |
| | | export default connect(mapStateToProps, mapDispatchToProps)(NormalTable) |