2024-12-10

king

2024-12-10 0c168ce15c9e166c98a1f1ad1decc073dfec2ea4

 src/menu/components/share/markcomponent/index.jsx

@@ -1,7 +1,7 @@
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'
@@ -32,6 +32,20 @@
        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: [{
@@ -98,13 +112,27 @@
        options: [],
        render: text => {
          let sign = {
            'font': '文字',
            'font': '字体颜色',
            'background': '背景',
            'underline': '下划线',
            'line-through': '中划线',
            'icon': '图标',
            'iconfront': '图标',
            'iconback': '图标',
            'iconback': '图标'
          }

          if (text[0] === 'indent') {
            return (
              <div>缩进/{text[1]}个字符</div>
            )
          } else if (text[0] === 'pointfront') {
            return (
              <div><span style={{display: 'inline-block', width: '8px', height: '8px', borderRadius: '14px', background: 'black', verticalAlign: 'middle'}}></span> 点（前）</div>
            )
          } else if (text[0] === 'pointback') {
            return (
              <div>点（后） <span style={{display: 'inline-block', width: '8px', height: '8px', borderRadius: '14px', background: 'black', verticalAlign: 'middle'}}></span></div>
            )
          }

          return (
@@ -118,18 +146,24 @@
  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
@@ -229,10 +263,11 @@
        })
      }
    ]

    let signs = [
      {
        value: 'font',
        label: '文字'
        label: '字体颜色'
      },
      {
        value: 'background',
@@ -247,6 +282,14 @@
        label: '中划线'
      },
      {
        value: 'pointfront',
        label: '点（前）'
      },
      {
        value: 'pointback',
        label: '点（后）'
      },
      {
        value: 'iconfront',
        label: '图标（前）',
        children: icons
@@ -255,12 +298,37 @@
        value: 'iconback',
        label: '图标（后）',
        children: icons
      },
      {
        value: 'indent',
        label: '缩进',
        children: [{
          value: 2,
          label: '2个字符'
        }, {
          value: 4,
          label: '4个字符'
        }, {
          value: 6,
          label: '6个字符'
        }, {
          value: 8,
          label: '8个字符'
        }]
      }
    ]

    if (type === 'line' || type === 'sequence') {
      signs.pop()
      signs.pop()
      signs.pop()
      signs.pop()
      signs.pop()
    } else if (type === 'icon') {
      signs = [{
        value: 'font',
        label: '字体颜色'
      }]
    } else if (type === 'slider') {
      markColumns = markColumns.filter(col => {
        col.width = '20%'
@@ -319,6 +387,11 @@
          item.fontColor = ''
        }
      }

      if (item.contrastValue) {
        item.contrastValue = item.contrastValue.replace(/\t+|\v+|\s+/g, '')
      }

      if (val && item.contrastValue === val) {
        save = true
      }
@@ -331,12 +404,12 @@
      })
      this.props.onSubmit(marks)
    } else {
      const _this = this
      const that = this
      confirm({
        title: '存在未保存标记，确定忽略吗？',
        onOk() {
          _this.setState({ visible: false })
          _this.props.onSubmit(marks)
          that.setState({ visible: false })
          that.props.onSubmit(marks)
        },
        onCancel() {}
      })
@@ -346,11 +419,16 @@
  render() {
    const { marks, markColumns, visible, options, signs } = this.state

    let className = ''
    if (this.props.type === 'line' && this.props.marks.length) {
      className = 'mk-line-marks'
    }

    return (
      <div style={{display: 'inline-block'}}>
      <div style={{display: 'inline-block'}} className={className}>
        <AntDesignOutlined className="profile" title="标记" onClick={this.resetMark} />
        <Modal
          wrapClassName="model-table-column-mark-modal"
          wrapClassName="mark-modal-wrap"
          title="标记设置"
          visible={visible}
          width={'75vw'}
@@ -362,7 +440,7 @@
        >
          <MarkForm field={this.props.field} signs={signs} columns={options} markChange={this.markChange}/>
          <Col style={{fontSize: '12px', color: '#757575', paddingLeft: '10px'}} span={24}>注：从上到下，匹配第一个符合条件的标记。</Col>
          <EditTable actions={['edit', 'move', 'del']} data={marks} columns={markColumns} onChange={(marks) => this.setState({marks})}/>
          <EditTable actions={['edit', 'move', 'del', 'copy']} type="marks" data={marks} columns={markColumns} onChange={(marks) => this.setState({marks})}/>
        </Modal>
      </div>
    )