| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Modal, Col } from 'antd' |
| | | import { Modal, Col, notification } from 'antd' |
| | | import { AntDesignOutlined } from '@ant-design/icons' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | |
| | | import MarkForm from './markform' |
| | | import MkIcon from '@/components/mk-icon' |
| | | import { minkeIconSystem } from '@/utils/option.js' |
| | | import '@/assets/css/table.scss' |
| | | import './index.scss' |
| | | |
| | | const EditTable = asyncComponent(() => import('@/templates/zshare/editTable')) |
| | |
| | | dataIndex: 'field', |
| | | width: '16%', |
| | | editable: true, |
| | | unique: true, |
| | | uniqueFunc: (data, item) => { |
| | | let index = data.findIndex(mark => mark.uuid !== item.uuid && mark.contrastValue === item.contrastValue && mark.match === item.match && mark.field.join('') === item.field.join('')) |
| | | |
| | | if (index > -1) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '此标记已存在!', |
| | | duration: 5 |
| | | }) |
| | | return false |
| | | } |
| | | return true |
| | | }, |
| | | inputType: 'cascader', |
| | | options: [], |
| | | rules: [{ |
| | | validator: (rule, value, callback) => { |
| | | if (value[1] === 'dynamic' && value[0] === value[2]) { |
| | | callback('对比字段不可相同!') |
| | | } else { |
| | | callback() |
| | | } |
| | | } |
| | | }], |
| | | render: text => { |
| | | return ( |
| | | <div>{text[0]} VS {text[2] ? text[2] : '静态值'}</div> |
| | |
| | | width: '16%', |
| | | editable: true, |
| | | required: false, |
| | | inputType: 'input' |
| | | inputType: 'input', |
| | | render: (text, record) => { |
| | | if (!text) return '' |
| | | if (record.field && record.field[1] === 'dynamic') { |
| | | return <span title="对比动态值时,对比值无效。" style={{textDecoration: 'line-through'}}>{text}</span> |
| | | } else { |
| | | return text |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | title: '颜色', |
| | |
| | | markChange = (values) => { |
| | | let _marks = fromJS(this.state.marks).toJS() |
| | | |
| | | if (values.uuid) { |
| | | _marks = _marks.map(item => { |
| | | if (item.uuid === values.uuid) { |
| | | return values |
| | | } else { |
| | | return item |
| | | } |
| | | let has = false |
| | | _marks.forEach(mark => { |
| | | if (mark.contrastValue === values.contrastValue && mark.match === values.match && mark.field.join('') === values.field.join('')) { |
| | | has = true |
| | | } |
| | | }) |
| | | |
| | | if (has) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '此标记已存在!', |
| | | duration: 5 |
| | | }) |
| | | } else { |
| | | values.uuid = Utils.getuuid() |
| | | _marks.push(values) |
| | | return |
| | | } |
| | | |
| | | values.uuid = Utils.getuuid() |
| | | _marks.push(values) |
| | | |
| | | this.setState({ |
| | | marks: _marks |
| | |
| | | _columns.unshift({field: '$Index', label: '序号'}) |
| | | |
| | | let options = _columns.map(col => { |
| | | let label = `${col.field}(${col.label})` |
| | | return { |
| | | value: col.field, |
| | | label: col.label, |
| | | label: label, |
| | | isLeaf: false, |
| | | children: [ |
| | | { |
| | |
| | | value: 'dynamic', |
| | | label: '动态值', |
| | | children: _columns.map(cell => { |
| | | let _label = `${cell.field}(${cell.label})` |
| | | return { |
| | | value: cell.field, |
| | | label: cell.label |
| | | label: _label |
| | | } |
| | | }) |
| | | } |
| | |
| | | if (item.signType && item.signType[0] === 'icon') { |
| | | item.signType = [item.signType[0] + item.signType[1], item.signType[2], item.signType[3]] |
| | | } |
| | | if (!item.uuid) { |
| | | item.uuid = Utils.getuuid() |
| | | } |
| | | return item |
| | | }) |
| | | |
| | |
| | | item.fontColor = '' |
| | | } |
| | | } |
| | | |
| | | if (item.contrastValue) { |
| | | item.contrastValue = item.contrastValue.replace(/\t+|\v+|\s+/g, '') |
| | | } |
| | | |
| | | if (val && item.contrastValue === val) { |
| | | save = true |
| | | } |
| | |
| | | <AntDesignOutlined className="profile" title="标记" onClick={this.resetMark} /> |
| | | <Modal |
| | | wrapClassName="model-table-column-mark-modal" |
| | | title={'标记设置'} |
| | | title="标记设置" |
| | | visible={visible} |
| | | width={'75vw'} |
| | | maskClosable={false} |