2023-08-10

king

2023-08-10 ac1d52c46ff9019fcc93cf3d5e7ab17cf850824e

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

@@ -1,28 +1,28 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Icon, Modal, Col } from 'antd'
import { Modal, Col, notification } from 'antd'
import { AntDesignOutlined } from '@ant-design/icons'

import Utils from '@/utils/utils.js'
import asyncComponent from '@/utils/asyncComponent'
import MarkForm from './markform'
import './index.scss'
import MkIcon from '@/components/mk-icon'
import { minkeIconSystem } from '@/utils/option.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import '@/assets/css/table.scss'
import './index.scss'

const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
const { confirm } = Modal

class MarkColumn extends Component {
  static propTpyes = {
    field: PropTypes.any,
    columns: PropTypes.array,  // 显示列
    marks: PropTypes.object,
    onSubmit: PropTypes.func
  }

  state = {
    dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    marks: null,
    columns: null,
    visible: false,
@@ -32,8 +32,31 @@
        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>
@@ -60,7 +83,15 @@
        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: '颜色',
@@ -81,15 +112,17 @@
        options: [],
        render: text => {
          let sign = {
            'font': '文字颜色',
            'font': '文字',
            'background': '背景',
            'underline': '下划线',
            'line-through': '中划线',
            'icon': '图标'
            'icon': '图标',
            'iconfront': '图标',
            'iconback': '图标',
          }

          return (
            <div>{sign[text[0]]} {text[3] ? <Icon type={text[3]} /> : null}</div>
            <div>{sign[text[0]]} {text[2] ? <MkIcon type={text[text.length - 1]} /> : null}</div>
          )
        }
      }
@@ -99,18 +132,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
@@ -128,11 +167,15 @@
  resetMark = () => {
    const { marks, columns, type } = this.props
    let markColumns = fromJS(this.state.markColumns).toJS()
    let _columns = fromJS(columns).toJS()

    let options = columns.map(col => {
    _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: [
          {
@@ -142,10 +185,11 @@
          {
            value: 'dynamic',
            label: '动态值',
            children: columns.map(cell => {
            children: _columns.map(cell => {
              let _label = `${cell.field}（${cell.label}）`
              return {
                value: cell.field,
                label: cell.label
                label: _label
              }
            })
          }
@@ -160,7 +204,7 @@
        children: minkeIconSystem.direction.map(cell => {
          return {
            value: cell,
            label: (<Icon type={cell} />)
            label: (<MkIcon type={cell} />)
          }
        })
      },
@@ -170,7 +214,7 @@
        children: minkeIconSystem.hint.map(cell => {
          return {
            value: cell,
            label: (<Icon type={cell} />)
            label: (<MkIcon type={cell} />)
          }
        })
      },
@@ -180,7 +224,7 @@
        children: minkeIconSystem.edit.map(cell => {
          return {
            value: cell,
            label: (<Icon type={cell} />)
            label: (<MkIcon type={cell} />)
          }
        })
      },
@@ -190,17 +234,7 @@
        children: minkeIconSystem.data.map(cell => {
          return {
            value: cell,
            label: (<Icon type={cell} />)
          }
        })
      },
      {
        value: 'trademark',
        label: '品牌和标识',
        children: minkeIconSystem.trademark.map(cell => {
          return {
            value: cell,
            label: (<Icon type={cell} />)
            label: (<MkIcon type={cell} />)
          }
        })
      },
@@ -210,7 +244,7 @@
        children: minkeIconSystem.normal.map(cell => {
          return {
            value: cell,
            label: (<Icon type={cell} />)
            label: (<MkIcon type={cell} />)
          }
        })
      }
@@ -218,7 +252,7 @@
    let signs = [
      {
        value: 'font',
        label: '文字颜色'
        label: '文字'
      },
      {
        value: 'background',
@@ -233,24 +267,19 @@
        label: '中划线'
      },
      {
        value: 'icon',
        label: '图标',
        children: [
          {
            value: 'front',
            label: '内容前',
            children: icons
          },
          {
            value: 'back',
            label: '内容后',
            children: icons
          }
        ]
        value: 'iconfront',
        label: '图标（前）',
        children: icons
      },
      {
        value: 'iconback',
        label: '图标（后）',
        children: icons
      }
    ]

    if (type === 'line') {
    if (type === 'line' || type === 'sequence') {
      signs.pop()
      signs.pop()
    } else if (type === 'slider') {
      markColumns = markColumns.filter(col => {
@@ -260,9 +289,20 @@
      signs = []
    }

    let _marks = marks ? fromJS(marks).toJS() : []
    _marks = _marks.map(item => {
      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
    })

    this.setState({
      visible: true,
      marks: marks ? fromJS(marks).toJS() : [],
      marks: _marks,
      markColumns: markColumns.map(col => {
        if (col.dataIndex === 'field') {
          col.options = options
@@ -278,9 +318,13 @@
  }

  markSubmit = () => {
    this.setState({
      visible: false
    })
    let save = false
    let input = document.getElementById('contrastValue')
    let val = input && input.value ? input.value : ''

    if (!val) {
      save = true
    }

    let marks = this.state.marks.map(item => {
      if (item.signType && item.signType[0] === 'background') {
@@ -291,35 +335,57 @@
          } else {
            item.fontColor = ''
          }
        } catch {
        } catch (e) {
          item.fontColor = ''
        }
      }

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

      if (val && item.contrastValue === val) {
        save = true
      }
      return item
    })

    this.props.onSubmit(marks)
    if (save) {
      this.setState({
        visible: false
      })
      this.props.onSubmit(marks)
    } else {
      const _this = this
      confirm({
        title: '存在未保存标记，确定忽略吗？',
        onOk() {
          _this.setState({ visible: false })
          _this.props.onSubmit(marks)
        },
        onCancel() {}
      })
    }
  }

  render() {
    const { marks, markColumns, visible, options, signs, dict } = this.state
    const { marks, markColumns, visible, options, signs } = this.state

    return (
      <div style={{display: 'inline-block'}}>
        <Icon className="profile" title="标记" type="ant-design" onClick={this.resetMark} />
        <AntDesignOutlined className="profile" title="标记" onClick={this.resetMark} />
        <Modal
          wrapClassName="model-table-column-mark-modal"
          title={'标记设置'}
          title="标记设置"
          visible={visible}
          width={'75vw'}
          maskClosable={false}
          style={{minWidth: '900px', maxWidth: '1200px'}}
          okText={dict['model.submit']}
          okText="提交"
          onOk={this.markSubmit}
          onCancel={() => { this.setState({ visible: false }) }}
          destroyOnClose
        >
          <MarkForm dict={dict} signs={signs} columns={options} markChange={this.markChange}/>
          <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})}/>
        </Modal>