From 5b66fe77e55767eabbf1df66a026157356dd807d Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期六, 07 一月 2023 17:28:28 +0800
Subject: [PATCH] 2023-01-07
---
src/menu/components/share/markcomponent/index.jsx | 143 ++++++++++++++++++++++++++++-------------------
1 files changed, 86 insertions(+), 57 deletions(-)
diff --git a/src/menu/components/share/markcomponent/index.jsx b/src/menu/components/share/markcomponent/index.jsx
index 03dd41d..ae293fe 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 } 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,
@@ -60,7 +60,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 +89,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>
)
}
}
@@ -128,11 +138,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 +156,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 +175,7 @@
children: minkeIconSystem.direction.map(cell => {
return {
value: cell,
- label: (<Icon type={cell} />)
+ label: (<MkIcon type={cell} />)
}
})
},
@@ -170,7 +185,7 @@
children: minkeIconSystem.hint.map(cell => {
return {
value: cell,
- label: (<Icon type={cell} />)
+ label: (<MkIcon type={cell} />)
}
})
},
@@ -180,7 +195,7 @@
children: minkeIconSystem.edit.map(cell => {
return {
value: cell,
- label: (<Icon type={cell} />)
+ label: (<MkIcon type={cell} />)
}
})
},
@@ -190,17 +205,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 +215,7 @@
children: minkeIconSystem.normal.map(cell => {
return {
value: cell,
- label: (<Icon type={cell} />)
+ label: (<MkIcon type={cell} />)
}
})
}
@@ -218,7 +223,7 @@
let signs = [
{
value: 'font',
- label: '鏂囧瓧棰滆壊'
+ label: '鏂囧瓧'
},
{
value: 'background',
@@ -233,24 +238,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 +260,17 @@
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]]
+ }
+ 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 +286,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 +303,52 @@
} else {
item.fontColor = ''
}
- } catch {
+ } catch (e) {
item.fontColor = ''
}
+ }
+ 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