From ac1d52c46ff9019fcc93cf3d5e7ab17cf850824e Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 10 八月 2023 16:05:24 +0800 Subject: [PATCH] 2023-08-10 --- src/menu/components/share/markcomponent/index.jsx | 200 +++++++++++++++++++++++++++++++++---------------- 1 files changed, 133 insertions(+), 67 deletions(-) diff --git a/src/menu/components/share/markcomponent/index.jsx b/src/menu/components/share/markcomponent/index.jsx index 03dd41d..246f2ea 100644 --- a/src/menu/components/share/markcomponent/index.jsx +++ b/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> -- Gitblit v1.8.0