From b8e1395f02c929eaa96b949cf6027ee2a43856a6 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 06 九月 2022 19:03:37 +0800
Subject: [PATCH] 2022-09-06
---
src/templates/sharecomponent/columncomponent/index.jsx | 410 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 282 insertions(+), 128 deletions(-)
diff --git a/src/templates/sharecomponent/columncomponent/index.jsx b/src/templates/sharecomponent/columncomponent/index.jsx
index 10940fb..52a345f 100644
--- a/src/templates/sharecomponent/columncomponent/index.jsx
+++ b/src/templates/sharecomponent/columncomponent/index.jsx
@@ -1,10 +1,9 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Icon, Tooltip, Modal, notification, Switch, message, Spin } from 'antd'
+import { Modal, notification, Switch, message } from 'antd'
+import { CopyOutlined } from '@ant-design/icons'
-import Api from '@/api'
-import options from '@/store/options.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import { getColumnForm } from '@/templates/zshare/formconfig'
@@ -13,25 +12,23 @@
import ColspanForm from './colspanform'
import GridBtnForm from './gridbtnform'
import DragElement from './dragcolumn'
+import MarkColumn from './markcolumn'
+import MKEmitter from '@/utils/events.js'
import './index.scss'
const { confirm } = Modal
-// **鎮茶鑰呭線寰�姝ｇ‘锛屼箰瑙傝�呭線寰�鎴愬姛
class ColumnComponent extends Component {
static propTpyes = {
menu: PropTypes.object, // 涓夌骇鑿滃崟淇℃伅
config: PropTypes.object, // 閰嶇疆淇℃伅
- pasteContent: PropTypes.object, // 绮樿创閰嶇疆淇℃伅
- sysRoles: PropTypes.array, // 瑙掕壊鍒楄〃锛屾潈闄愬垎閰�
updatecolumn: PropTypes.func // 鏇存柊
}
state = {
- dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
+ dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
columnlist: null, // 鏄剧ず鍒�
- loading: false, // 鏌ヨ鏄剧ず鍒楀叧鑱旇彍鍗�
- showField: false, // 鏄剧ず鍒楀瓧娈�
+ showField: true, // 鏄剧ず鍒楀瓧娈�
modaltype: '', // 妯℃�佹鎺у埗
card: null // 缂栬緫涓厓绱�
}
@@ -46,25 +43,6 @@
}
/**
- * @description 鐩戝惉鍒版樉绀哄垪澶嶅埗鏃讹紝瑙﹀彂鏄剧ず鍒楃紪杈�
- */
- UNSAFE_componentWillReceiveProps (nextProps) {
- const { columnlist } = this.state
-
- if (
- nextProps.pasteContent &&
- columnlist.length === 0 &&
- nextProps.pasteContent.columns &&
- nextProps.pasteContent.copyType === 'columns' &&
- nextProps.pasteContent.columns.length > 0
- ) {
- this.setState({columnlist: nextProps.pasteContent.columns})
- } else if (!is(fromJS(nextProps.config.columns), fromJS(this.props.config.columns)) && !is(fromJS(nextProps.config.columns), fromJS(columnlist))) {
- this.setState({columnlist: nextProps.config.columns})
- }
- }
-
- /**
* @description 鏄剧ず鍒楅『搴忚皟鏁达紝鎴栨嫋鎷芥坊鍔�
*/
handleList = (list, card) => {
@@ -74,8 +52,9 @@
this.setState({columnlist: list})
this.handleColumn(card)
} else {
- this.setState({columnlist: list})
- this.props.updatecolumn({...config, search: list})
+ this.setState({columnlist: list}, ()=> {
+ this.props.updatecolumn({...config, columns: list})
+ })
}
}
@@ -84,84 +63,64 @@
*/
handleColumn = (card) => {
const { menu } = this.props
+ const { columnlist } = this.state
if (card.type !== 'colspan') {
- let menulist = menu.fstMenuList.map(item => {
- return {
- value: item.MenuID,
- label: item.text,
- isLeaf: false
- }
- })
+ let menulist = []
- if ((card.type === 'text' || card.type === 'number') && card.linkmenu && card.linkmenu.length > 0) {
- let _param = {
- func: 'sPC_Get_FunMenu',
- ParentID: card.linkmenu[0],
- systemType: options.systemType,
- debug: 'Y'
- }
+ if (menu.fstMenuList) {
+ let trees = fromJS(menu.fstMenuList).toJS()
- this.setState({
- loading: true
- })
-
- Api.getSystemConfig(_param).then(result => {
- if (result.status) {
- menulist = menulist.map(item => {
- if (item.value === card.linkmenu[0]) {
- item.children = result.data.map(item => {
- let submenu = {
- value: item.ParentID,
- label: item.MenuNameP,
- children: item.FunMenu.map(cell => {
- return {
- value: cell.MenuID,
- label: cell.MenuName,
- MenuID: cell.MenuID,
- MenuName: cell.MenuName,
- MenuNo: cell.MenuNo,
- Ot: cell.Ot,
- PageParam: cell.PageParam,
- LinkUrl: cell.LinkUrl,
- disabled: cell.MenuID === menu.MenuID
- }
- })
- }
+ menulist = trees.map(fst => {
+ fst.value = fst.MenuID
+ fst.label = fst.MenuName
+ fst.isLeaf = false
+ fst.children = fst.children.map(snd => {
+ snd.value = snd.MenuID
+ snd.label = snd.MenuName
- return submenu
- })
- }
- return item
+ snd.children = snd.children.map(thd => {
+ thd.value = thd.MenuID
+ thd.label = thd.MenuName
+ thd.disabled = thd.MenuID === menu.MenuID
+ return thd
})
- } else {
- notification.warning({
- top: 92,
- message: result.message,
- duration: 5
- })
- }
-
- this.setState({
- loading: false,
- modaltype: 'columns',
- card: card,
- formlist: getColumnForm(card, this.props.sysRoles, menulist)
+ return snd
})
- })
- } else {
- this.setState({
- modaltype: 'columns',
- card: card,
- formlist: getColumnForm(card, this.props.sysRoles, menulist)
+ return fst
})
}
+
+ let fields = []
+ columnlist.forEach(col => {
+ if (!col.field) return
+ fields.push({
+ value: col.field,
+ text: col.label
+ })
+ })
+
+ this.setState({
+ modaltype: 'columns',
+ card: card,
+ formlist: getColumnForm(card, menulist, fields)
+ })
} else {
this.setState({
modaltype: 'colspan',
card: card
})
}
+ }
+
+ /**
+ * @description 璁剧疆鏍囧織
+ */
+ markElement = (card) => {
+ this.setState({
+ modaltype: 'mark',
+ card: card
+ })
}
/**
@@ -178,8 +137,8 @@
*/
editModalCancel = () => {
const { card } = this.state
-
- if (card.focus) {
+
+ if (card && card.focus) {
let _columnlist = fromJS(this.state.columnlist).toJS()
_columnlist = _columnlist.filter(item => item.uuid !== card.uuid)
@@ -206,23 +165,19 @@
*/
handleSubmit = () => {
const { config } = this.props
- const { modaltype } = this.state
+ const { modaltype, card } = this.state
let _columnlist = fromJS(this.state.columnlist).toJS()
if (modaltype === 'columns' || modaltype === 'colspan') {
this.columnFormRef.handleConfirm().then(res => {
let fieldrepet = false // 瀛楁閲嶅
- let labelrepet = false // 鎻愮ず鏂囧瓧閲嶅
_columnlist = _columnlist.filter(item => !item.origin || item.uuid === res.uuid) // 鍘婚櫎鍒濆鍒�
-
_columnlist = _columnlist.map(item => {
if (item.uuid !== res.uuid && res.field && item.field) {
- if (item.field === res.field) {
+ if (item.field.toLowerCase() === res.field.toLowerCase()) {
fieldrepet = true
- } else if (item.label === res.label) {
- labelrepet = true
}
}
@@ -236,24 +191,81 @@
if (fieldrepet) {
notification.warning({
top: 92,
- message: this.state.dict['model.field.exist'] + ' !',
- duration: 5
- })
- return
- } else if (labelrepet) {
- notification.warning({
- top: 92,
- message: this.state.dict['model.name.exist'] + ' !',
+ message: '瀛楁宸插瓨鍦�!',
duration: 5
})
return
}
+ if (!card.focus && (card.type !== res.type || (res.field && card.field !== res.field))) {
+ let refers = []
+ _columnlist.forEach(column => {
+ if (column.marks && column.marks.filter(mark => mark.field === card.field || mark.contrastField === card.field).length > 0) {
+ refers.push(column.label)
+ }
+ if (column.type === 'colspan') {
+ let _length = column.sublist.length
+ column.sublist = column.sublist.filter(cell => cell !== card.uuid)
+
+ if (column.sublist.length < _length) {
+ let subfield = [] // 鍚堝苟鍒楀瓧娈�
+ _columnlist.forEach(col => {
+ if (col.field && column.sublist.includes(col.uuid)) {
+ subfield.push(col.field)
+ }
+ })
+ column.subfield = subfield.join(', ')
+ }
+ }
+ })
+
+ if (refers.length > 0) {
+ notification.warning({
+ top: 92,
+ message: '鏄剧ず鍒椼��' + refers.join('銆�') + '銆嬫爣璁颁腑鍚湁璇ュ瓧娈碉紝姝ゆ淇敼浼氬鑷存爣璁板け鏁堬紝璇蜂慨鏀圭浉搴旂殑鏍囪璁剧疆锛�',
+ duration: 5
+ })
+ }
+
+ let chartRefers = []
+ config.charts && config.charts.forEach((chart, index) => {
+ if (chart.chartType === 'card') {
+ if (chart.avatar && chart.avatar.field === card.field) {
+ chartRefers.push(chart.title || (index + 1))
+ } else if (chart.header && chart.header.datatype === 'dynamic' && chart.header.field === card.field) {
+ chartRefers.push(chart.title || (index + 1))
+ } else if (chart.details && chart.details.length > 0 && chart.details.filter(item => item.datatype === 'dynamic' && item.field === card.field).length > 0) {
+ chartRefers.push(chart.title || (index + 1))
+ }
+ } else if (['bar', 'line', 'pie'].includes(chart.chartType)) {
+ if (chart.Xaxis === card.field) {
+ chartRefers.push(chart.title || (index + 1))
+ } else if (Array.isArray(chart.Yaxis)) {
+ if (chart.Yaxis.includes(card.field)) {
+ chartRefers.push(chart.title || (index + 1))
+ }
+ } else if (chart.Yaxis === card.field) {
+ chartRefers.push(chart.title || (index + 1))
+ }
+ }
+ })
+
+ if (chartRefers.length > 0) {
+ notification.warning({
+ top: 92,
+ message: '鍥捐〃銆�' + chartRefers.join('銆�') + '銆嬩腑鍚湁璇ュ瓧娈碉紝姝ゆ淇敼浼氬鑷村浘琛ㄦ樉绀哄紓甯革紝璇蜂慨鏀圭浉搴旂殑鍥捐〃璁剧疆锛�',
+ duration: 5
+ })
+ }
+ }
+
this.setState({
+ card: null,
columnlist: _columnlist,
modaltype: ''
+ }, ()=> {
+ this.props.updatecolumn({...config, columns: _columnlist})
})
- this.props.updatecolumn({...config, columns: _columnlist})
})
} else if (modaltype === 'gridbtn') {
this.gridBtnFormRef.handleConfirm().then(res => {
@@ -276,17 +288,78 @@
confirm({
content: dict['model.confirm'] + dict['model.delete'] + ` - ${card.label} 锛焋,
- okText: dict['model.confirm'],
- cancelText: this.state.dict['header.cancel'],
onOk() {
let _columnlist = fromJS(_this.state.columnlist).toJS()
_columnlist = _columnlist.filter(item => item.uuid !== card.uuid)
+ if (card.field) {
+ let refers = []
+ _columnlist.forEach(column => {
+ if (column.marks && column.marks.filter(mark => mark.field === card.field || mark.contrastField === card.field).length > 0) {
+ refers.push(column.label)
+ }
+ if (column.type === 'colspan') {
+ let _length = column.sublist.length
+ column.sublist = column.sublist.filter(cell => cell !== card.uuid)
+
+ if (column.sublist.length < _length) {
+ let subfield = [] // 鍚堝苟鍒楀瓧娈�
+ _columnlist.forEach(col => {
+ if (col.field && column.sublist.includes(col.uuid)) {
+ subfield.push(col.field)
+ }
+ })
+ column.subfield = subfield.join(', ')
+ }
+ }
+ })
+
+ if (refers.length > 0) {
+ notification.warning({
+ top: 92,
+ message: '鏄剧ず鍒椼��' + refers.join('銆�') + '銆嬫爣璁颁腑鍚湁璇ュ瓧娈碉紝鍒犻櫎浼氬鑷存爣璁板け鏁堬紝璇蜂慨鏀圭浉搴旂殑鏍囪璁剧疆锛�',
+ duration: 5
+ })
+ }
+
+ let chartRefers = []
+ config.charts && config.charts.forEach((chart, index) => {
+ if (chart.chartType === 'card') {
+ if (chart.avatar && chart.avatar.field === card.field) {
+ chartRefers.push(chart.title || (index + 1))
+ } else if (chart.header && chart.header.datatype === 'dynamic' && chart.header.field === card.field) {
+ chartRefers.push(chart.title || (index + 1))
+ } else if (chart.details && chart.details.length > 0 && chart.details.filter(item => item.datatype === 'dynamic' && item.field === card.field).length > 0) {
+ chartRefers.push(chart.title || (index + 1))
+ }
+ } else if (['bar', 'line', 'pie'].includes(chart.chartType)) {
+ if (chart.Xaxis === card.field) {
+ chartRefers.push(chart.title || (index + 1))
+ } else if (Array.isArray(chart.Yaxis)) {
+ if (chart.Yaxis.includes(card.field)) {
+ chartRefers.push(chart.title || (index + 1))
+ }
+ } else if (chart.Yaxis === card.field) {
+ chartRefers.push(chart.title || (index + 1))
+ }
+ }
+ })
+
+ if (chartRefers.length > 0) {
+ notification.warning({
+ top: 92,
+ message: '鍥捐〃銆�' + chartRefers.join('銆�') + '銆嬩腑鍚湁璇ュ瓧娈碉紝鍒犻櫎浼氬鑷村浘琛ㄦ樉绀哄紓甯革紝璇蜂慨鏀圭浉搴旂殑鍥捐〃璁剧疆锛�',
+ duration: 5
+ })
+ }
+ }
+
_this.setState({
columnlist: _columnlist
+ }, ()=> {
+ _this.props.updatecolumn({...config, columns: _columnlist})
})
- _this.props.updatecolumn({...config, columns: _columnlist})
},
onCancel() {}
})
@@ -302,6 +375,11 @@
let val = {
copyType: 'columns',
columns: columnlist
+ }
+
+ let srcid = localStorage.getItem(window.location.href.split('#')[0] + 'srcId')
+ if (srcid) {
+ val.$srcId = srcid
}
oInput.value = window.btoa(window.encodeURIComponent(JSON.stringify(val)))
@@ -350,6 +428,67 @@
})
}
+ markSubmit = () => {
+ const { config } = this.props
+ const { card } = this.state
+ let _columnlist = fromJS(this.state.columnlist).toJS()
+ let _marks = this.refs.markRef.state.marks
+
+ if (_marks.length === 0) {
+ _marks = ''
+ }
+
+ _columnlist = _columnlist.map(item => {
+ if (item.uuid === card.uuid) {
+ item.marks = _marks
+ }
+
+ return item
+ })
+
+ this.setState({
+ card: null,
+ columnlist: _columnlist,
+ modaltype: ''
+ }, ()=> {
+ this.props.updatecolumn({...config, columns: _columnlist})
+ })
+ }
+
+ plusColumns = (MenuId, items) => {
+ const { config } = this.props
+ const { columnlist } = this.state
+
+ if (MenuId !== config.uuid) return
+
+ let list = [...columnlist, ...items]
+
+ if (list[0] && list[0].origin) {
+ list = list.filter(col => !col.origin)
+ }
+
+ this.setState({
+ columnlist: list
+ }, () => {
+ this.props.updatecolumn({...config, columns: list})
+ })
+ }
+
+ revert = () => {
+ this.setState({
+ columnlist: fromJS(this.props.config.columns).toJS()
+ })
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ componentDidMount () {
+ MKEmitter.addListener('revert', this.revert)
+ MKEmitter.addListener('plusColumns', this.plusColumns)
+ }
+
/**
* @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊
*/
@@ -357,6 +496,8 @@
this.setState = () => {
return
}
+ MKEmitter.removeListener('revert', this.revert)
+ MKEmitter.removeListener('plusColumns', this.plusColumns)
}
render() {
@@ -365,13 +506,8 @@
return (
<div className="model-table-column-list">
- <Tooltip placement="bottomLeft" overlayClassName="middle" title={dict['model.tooltip.column.guide']}>
- <Icon type="question-circle" />
- </Tooltip>
- {columnlist && columnlist.length > 0 ?
- <Icon className="column-copy" title="copy" type="copy" onClick={this.copycolumn} /> : null
- }
- <Switch checkedChildren="寮�" unCheckedChildren="鍏�" defaultChecked={this.state.showField} onChange={this.onFieldChange} />
+ {columnlist && columnlist.length > 0 ? <CopyOutlined className="column-copy" title="copy" onClick={this.copycolumn} /> : null}
+ <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={this.onFieldChange} />
<DragElement
list={columnlist}
setting={config.setting}
@@ -379,15 +515,15 @@
handleList={this.handleList}
handleMenu={this.handleColumn}
deleteMenu={this.deleteElement}
+ markMenu={this.markElement}
handleGridBtn={this.handleGridBtn}
showfield={this.state.showField}
- placeholder={this.state.dict['header.form.column.placeholder']}
/>
{/* 鏄剧ず鍒楃紪杈� */}
<Modal
- title={dict['header.modal.column.edit']}
+ title="鏄剧ず鍒�-缂栬緫"
visible={modaltype === 'columns'}
- width={750}
+ width={850}
maskClosable={false}
onOk={this.handleSubmit}
onCancel={this.editModalCancel}
@@ -404,9 +540,9 @@
</Modal>
{/* 鍚堝苟鍒楃紪杈� */}
<Modal
- title={dict['header.modal.colspan.edit']}
+ title={dict['model.form.colspan'] + '-' + dict['model.edit']}
visible={modaltype === 'colspan'}
- width={750}
+ width={850}
maskClosable={false}
onOk={this.handleSubmit}
onCancel={this.editModalCancel}
@@ -422,9 +558,9 @@
</Modal>
{/* 鎿嶄綔鍒楃紪杈� */}
<Modal
- title={dict['header.modal.gridbtn.edit']}
+ title="鎿嶄綔鍒�-缂栬緫"
visible={modaltype === 'gridbtn'}
- width={700}
+ width={850}
maskClosable={false}
onOk={this.handleSubmit}
onCancel={this.editModalCancel}
@@ -437,7 +573,25 @@
wrappedComponentRef={(inst) => this.gridBtnFormRef = inst}
/>
</Modal>
- {this.state.loading && <Spin size="large" />}
+ {/* 鎸夐挳浣跨敤绯荤粺瀛樺偍杩囩▼鏃讹紝楠岃瘉淇℃伅妯℃�佹 */}
+ <Modal
+ wrapClassName="model-table-column-mark-modal"
+ title={'鏍囪璁剧疆'}
+ visible={modaltype === 'mark'}
+ width={'75vw'}
+ maskClosable={false}
+ okText={dict['model.submit']}
+ onOk={this.markSubmit}
+ onCancel={() => { this.setState({ modaltype: '' }) }}
+ destroyOnClose
+ >
+ <MarkColumn
+ ref="markRef"
+ card={card}
+ dict={dict}
+ columns={columnlist}
+ />
+ </Modal>
</div>
)
}
--
Gitblit v1.8.0