From 233709a44a2f5cfff9b8fb955ebcdc6889c0d40b Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 19 十一月 2019 09:12:28 +0800
Subject: [PATCH] 2019-11-19
---
src/components/sidemenu/comtableconfig/index.jsx | 761 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 568 insertions(+), 193 deletions(-)
diff --git a/src/components/sidemenu/comtableconfig/index.jsx b/src/components/sidemenu/comtableconfig/index.jsx
index 830cc59..1beb384 100644
--- a/src/components/sidemenu/comtableconfig/index.jsx
+++ b/src/components/sidemenu/comtableconfig/index.jsx
@@ -3,25 +3,27 @@
// import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
-import { Button, Card, Modal, Collapse, Input, notification } from 'antd'
+import { Button, Card, Modal, Collapse, notification, Spin, Row, Col, Select, List, Icon } from 'antd'
import DragElement from './dragelement'
import SourceElement from './dragelement/source'
import Api from '@/api'
import SearchForm from './searchform'
import ActionForm from './actionform'
import ColumnForm from './columnform'
+import EditCard from './editcard'
import MenuForm from './menuform'
-import zhCN from '@/locales/zh-CN/header.js'
-import enUS from '@/locales/en-US/header.js'
+import zhCN from '@/locales/zh-CN/comtable.js'
+import enUS from '@/locales/en-US/comtable.js'
import Utils from '@/utils/utils.js'
import './index.scss'
const { Panel } = Collapse
-const { Search } = Input
+const { Option } = Select
const HeaderDict = (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS
class ComTableConfig extends Component {
static propTpyes = {
+ type: PropTypes.string,
menu: PropTypes.any,
handleConfig: PropTypes.func,
supMenuList: PropTypes.array,
@@ -29,162 +31,200 @@
}
state = {
- dict: HeaderDict,
- config: null,
- visible: false,
- tableVisible: false,
- addType: '',
- menuformlist: null,
- formlist: null,
- formtemp: '',
- card: null,
- searchloading: false,
- actionloading: false,
- columnsloading: false,
+ dict: HeaderDict, // 瀛楀吀
+ config: null, // 椤甸潰閰嶇疆
+ visible: false, // 鎼滅储鏉′欢銆佹寜閽�佹樉绀哄垪锛屾ā鎬佹鏄剧ず鎺у埗
+ tableVisible: false, // 鏁版嵁琛ㄥ瓧娈垫ā鎬佹
+ addType: '', // 娣诲姞绫诲瀷-鎼滅储鏉′欢鎴栨樉绀哄垪
+ tableColumns: [], // 琛ㄦ牸鏄剧ず鍒�
+ option: {}, // 鎼滅储鏉′欢鍙婃樉绀哄垪锛屽彲閫夋潯浠跺寘鎷琻ormal銆乷thers
+ loading: false, // 鍔犺浇涓紙鑾峰彇琛ㄦ暟鎹級
+ menuformlist: null, // 鍩烘湰淇℃伅琛ㄥ崟瀛楁
+ formlist: null, // 鎼滅储鏉′欢銆佹寜閽�佹樉绀哄垪琛ㄥ崟瀛楁
+ formtemp: '', // 琛ㄥ崟绫诲瀷锛屾樉绀哄垪銆佹寜閽�佹悳绱㈡潯浠�
+ card: null, // 缂栬緫鍏冪礌
+ searchloading: false, // 鎼滅储鏉′欢鍔犺浇涓�
+ actionloading: false, // 鎸夐挳鍔犺浇涓�
+ columnsloading: false, // 鏄剧ず鍒楀姞杞戒腑
+ tables: [{
+ name: 'SUsers',
+ label: '鐢ㄦ埛琛�'
+ }, {
+ name: 'SMenus',
+ label: '鑿滃崟琛�'
+ }, {
+ name: 'SColumns',
+ label: '鏄剧ず鍒楄〃'
+ }, {
+ name: 'SActions',
+ label: '鎸夐挳琛�'
+ }],
+ selectedTables: [], // 宸查�夎〃鍚�
baseconfig: {
type: 'system',
- search: [{
- id: 0,
- uuid: Utils.getuuid(),
- label: 'text',
- field: 'field',
- initval: '',
- type: 'text',
- resourceType: '0',
- setAll: 'false',
- options: [],
- dataSource: '',
- linkField: '',
- valueField: '',
- valueText: '',
- orderBy: '',
- orderType: 'asc',
- display: 'dropdown'
- }, {
- id: 1,
- uuid: Utils.getuuid(),
- label: 'select',
- field: 'field',
- initval: '',
- type: 'select',
- resourceType: '0',
- setAll: 'false',
- options: [],
- dataSource: '',
- linkField: '',
- valueField: '',
- valueText: '',
- orderBy: '',
- orderType: 'asc',
- display: 'dropdown'
- }, {
- id: 2,
- uuid: Utils.getuuid(),
- label: 'date',
- field: 'field',
- initval: '',
- type: 'dateday',
- resourceType: '0',
- setAll: 'false',
- options: [],
- dataSource: '',
- linkField: '',
- valueField: '',
- valueText: '',
- orderBy: '',
- orderType: 'asc',
- display: 'dropdown'
- }],
- action: [{
- id: 0,
- uuid: Utils.getuuid(),
- label: 'add',
- intertype: 'inner',
- interface: '',
- func: '',
- callbackFunc: '',
- Ot: 'notRequired',
- OpenType: 'pop',
- pageTemplate: '',
- icon: 'plus',
- class: 'green'
- }, {
- id: 1,
- uuid: Utils.getuuid(),
- label: 'update',
- intertype: 'inner',
- interface: '',
- func: '',
- callbackFunc: '',
- Ot: 'requiredSgl',
- OpenType: 'pop',
- pageTemplate: '',
- icon: 'form',
- class: 'purple'
- }, {
- id: 2,
- uuid: Utils.getuuid(),
- label: 'delete',
- intertype: 'inner',
- interface: '',
- func: '',
- callbackFunc: '',
- Ot: 'required',
- OpenType: 'prompt',
- pageTemplate: '',
- icon: 'delete',
- class: 'red'
- }, {
- id: 3,
- uuid: Utils.getuuid(),
- label: 'freeze',
- intertype: 'inner',
- interface: '',
- func: '',
- callbackFunc: '',
- Ot: 'requiredOnce',
- OpenType: 'exec',
- pageTemplate: '',
- icon: '',
- class: 'default'
- }],
- columns: [{
- id: 0,
- uuid: Utils.getuuid(),
- Align: 'left',
- label: 'fieldName1',
- field: 'field1',
- Hide: 'false',
- IsSort: 'true',
- Width: 120
- }, {
- id: 1,
- uuid: Utils.getuuid(),
- Align: 'left',
- label: 'fieldName2',
- field: 'field2',
- Hide: 'false',
- IsSort: 'true',
- Width: 120
- }, {
- id: 2,
- uuid: Utils.getuuid(),
- Align: 'left',
- label: 'fieldName3',
- field: 'field3',
- Hide: 'false',
- IsSort: 'true',
- Width: 120
- }, {
- id: 3,
- uuid: Utils.getuuid(),
- Align: 'left',
- label: 'fieldName4',
- field: 'field4',
- Hide: 'false',
- IsSort: 'true',
- Width: 120
- }]
+ search: [
+ {
+ origin: true,
+ id: 0,
+ uuid: Utils.getuuid(),
+ label: 'text',
+ field: '',
+ initval: '',
+ type: 'text',
+ resourceType: '0',
+ setAll: 'false',
+ options: [],
+ dataSource: '',
+ linkField: '',
+ valueField: '',
+ valueText: '',
+ orderBy: '',
+ orderType: 'asc',
+ display: 'dropdown'
+ }, {
+ origin: true,
+ id: 1,
+ uuid: Utils.getuuid(),
+ label: 'select',
+ field: '',
+ initval: '',
+ type: 'select',
+ resourceType: '0',
+ setAll: 'false',
+ options: [],
+ dataSource: '',
+ linkField: '',
+ valueField: '',
+ valueText: '',
+ orderBy: '',
+ orderType: 'asc',
+ display: 'dropdown'
+ }, {
+ origin: true,
+ id: 2,
+ uuid: Utils.getuuid(),
+ label: 'date',
+ field: '',
+ initval: '',
+ type: 'dateday',
+ resourceType: '0',
+ setAll: 'false',
+ options: [],
+ dataSource: '',
+ linkField: '',
+ valueField: '',
+ valueText: '',
+ orderBy: '',
+ orderType: 'asc',
+ display: 'dropdown'
+ }
+ ],
+ action: [
+ {
+ origin: true,
+ id: 0,
+ uuid: Utils.getuuid(),
+ label: 'add',
+ intertype: 'inner',
+ innerFunc: '',
+ interface: '',
+ outerFunc: '',
+ callbackFunc: '',
+ Ot: 'notRequired',
+ OpenType: 'pop',
+ pageTemplate: '',
+ icon: 'plus',
+ class: 'green'
+ }, {
+ origin: true,
+ id: 1,
+ uuid: Utils.getuuid(),
+ label: 'update',
+ intertype: 'inner',
+ innerFunc: '',
+ interface: '',
+ outerFunc: '',
+ callbackFunc: '',
+ Ot: 'requiredSgl',
+ OpenType: 'pop',
+ pageTemplate: '',
+ icon: 'form',
+ class: 'purple'
+ }, {
+ origin: true,
+ id: 2,
+ uuid: Utils.getuuid(),
+ label: 'delete',
+ intertype: 'inner',
+ innerFunc: '',
+ interface: '',
+ outerFunc: '',
+ callbackFunc: '',
+ Ot: 'required',
+ OpenType: 'prompt',
+ pageTemplate: '',
+ icon: 'delete',
+ class: 'red'
+ }, {
+ origin: true,
+ id: 3,
+ uuid: Utils.getuuid(),
+ label: 'freeze',
+ intertype: 'inner',
+ innerFunc: '',
+ interface: '',
+ outerFunc: '',
+ callbackFunc: '',
+ Ot: 'requiredOnce',
+ OpenType: 'exec',
+ pageTemplate: '',
+ icon: '',
+ class: 'default'
+ }
+ ],
+ columns: [
+ {
+ origin: true,
+ id: 0,
+ uuid: Utils.getuuid(),
+ Align: 'left',
+ label: 'fieldName1',
+ field: '',
+ Hide: 'false',
+ IsSort: 'true',
+ Width: 120
+ }, {
+ origin: true,
+ id: 1,
+ uuid: Utils.getuuid(),
+ Align: 'left',
+ label: 'fieldName2',
+ field: '',
+ Hide: 'false',
+ IsSort: 'true',
+ Width: 120
+ }, {
+ origin: true,
+ id: 2,
+ uuid: Utils.getuuid(),
+ Align: 'left',
+ label: 'fieldName3',
+ field: '',
+ Hide: 'false',
+ IsSort: 'true',
+ Width: 120
+ }, {
+ origin: true,
+ id: 3,
+ uuid: Utils.getuuid(),
+ Align: 'left',
+ label: 'fieldName4',
+ field: '',
+ Hide: 'false',
+ IsSort: 'true',
+ Width: 120
+ }
+ ]
},
searchItems: [
{
@@ -266,9 +306,30 @@
]
}
- handleList = (list) => {
+ handleList = (listObj) => {
let config = this.state.config
- this.setState({config: {...config, ...list}})
+ if (this.props.type === 'add') {
+ let key = Object.keys(listObj)[0]
+ let newlength = listObj[key].length
+ if (newlength > config[key].length) {
+ listObj[key] = listObj[key].filter(item => !item.origin)
+ }
+ if (newlength > listObj[key].length) {
+ this.setState({
+ [key + 'loading']: true,
+ config: {...config, ...listObj}
+ })
+ setTimeout(() => {
+ this.setState({
+ [key + 'loading']: false
+ })
+ }, 100)
+ } else {
+ this.setState({config: {...config, ...listObj}})
+ }
+ } else {
+ this.setState({config: {...config, ...listObj}})
+ }
}
handleSearch = (card) => {
@@ -493,6 +554,14 @@
},
{
type: 'text',
+ key: 'innerFunc',
+ label: this.state.dict['header.form.innerFunc'],
+ initVal: card.innerFunc,
+ required: false,
+ readonly: false
+ },
+ {
+ type: 'text',
key: 'interface',
label: this.state.dict['header.form.interface'],
initVal: card.interface,
@@ -501,10 +570,10 @@
},
{
type: 'text',
- key: 'func',
- label: this.state.dict['header.form.func'],
- initVal: card.func,
- required: true,
+ key: 'outerFunc',
+ label: this.state.dict['header.form.outerFunc'],
+ initVal: card.outerFunc,
+ required: false,
readonly: false
},
{
@@ -634,15 +703,27 @@
handleSubmit = () => {
this.formRef.handleConfirm().then(res => {
- console.log(res)
let _config = this.state.config
- _config[res.type] = _config[res.type].map(item => {
- if (item.uuid === res.values.uuid) {
- return res.values
- } else {
- return item
- }
- })
+
+ if (this.props.type === 'add') {
+ _config[res.type] = _config[res.type].map(item => {
+ if (item.uuid === res.values.uuid) {
+ return res.values
+ } else {
+ return item
+ }
+ })
+ _config[res.type] = _config[res.type].filter(item => !item.origin)
+ } else {
+ _config[res.type] = _config[res.type].map(item => {
+ if (item.uuid === res.values.uuid) {
+ return res.values
+ } else {
+ return item
+ }
+ })
+ }
+
this.setState({
config: _config,
[res.type + 'loading']: true,
@@ -703,35 +784,52 @@
this.props.handleConfig('')
}
- queryField = (type, name) => {
- if (!name) {
+ queryField = (type) => {
+ const {selectedTables, tableColumns, config} = this.state
+ if (selectedTables.length === 0) {
notification.warning({
top: 92,
- message: '璇疯緭鍏ヨ〃鍚嶏紒',
+ message: '璇烽�夋嫨琛ㄥ悕锛�',
duration: 10
})
return
}
+
+ let columns = new Map()
+ tableColumns.forEach(table => {
+ table.columns.forEach(column => {
+ columns.set(column.field, column)
+ })
+ })
+
if (type === 'search') {
- Api.getSystemConfig({func: 'sPC_Get_MainMenu'}).then(res => {
- if (res.status) {
- this.setState({
- tableVisible: true,
- addType: type
- })
- } else {
- notification.warning({
- top: 92,
- message: res.message,
- duration: 10
- })
+ let others = []
+ config.search.forEach(item => {
+ if (columns.has(item.field)) {
+ columns.set(item.field, item)
+ } else if (item.field) {
+ others.push(item)
}
})
+ this.setState({
+ addType: type,
+ tableVisible: true,
+ option: {
+ normal: [...columns.values()],
+ others: others
+ }
+ }, () => {
+ console.log(this.state.option)
+ })
}
+ // console.log(tableColumns)
+ // console.log(columns)
+ // console.log(config)
}
addFieldSubmit = () => {
- console.log(13)
+ let cards = this.refs.searchcard.getSelectedCard()
+ console.log(cards)
}
cancelFieldSubmit = () => {
@@ -743,7 +841,7 @@
UNSAFE_componentWillMount () {
let _config = ''
- if (!this.props.menu.LongParam) {
+ if (this.props.type === 'add') {
_config = JSON.parse(JSON.stringify((this.state.baseconfig)))
} else {
_config = this.props.menu.LongParam
@@ -794,26 +892,287 @@
})
}
+ onTableChange = (value) => {
+ const {tables, selectedTables, tableColumns} = this.state
+
+ let _table = tables.filter(item => item.name === value)[0]
+ let isSelected = !!selectedTables.filter(cell => cell.name === value)[0]
+ if (!isSelected) {
+ this.setState({
+ selectedTables: [...selectedTables, _table]
+ })
+ let SUsers = [
+ {
+ field: 'UID',
+ label: 'UID',
+ type: 'text'
+ },
+ {
+ field: 'UserCode',
+ label: 'UserCode',
+ type: 'text'
+ },
+ {
+ field: 'UserName',
+ label: 'UserName',
+ type: 'text'
+ },
+ {
+ field: 'PassWord',
+ label: 'PassWord',
+ type: 'text'
+ },
+ {
+ field: 'FullName',
+ label: 'FullName',
+ type: 'text'
+ },
+ {
+ field: 'RoleID',
+ label: 'RoleID',
+ type: 'text'
+ },
+ {
+ field: 'RoleName',
+ label: 'RoleName',
+ type: 'text'
+ }
+ ]
+ let SMenus = [
+ {
+ field: 'RoleID',
+ label: 'RoleID',
+ type: 'text'
+ },
+ {
+ field: 'RoleName',
+ label: 'RoleName',
+ type: 'text'
+ },
+ {
+ field: 'DepartmentCode',
+ label: 'DepartmentCode',
+ type: 'text'
+ },
+ {
+ field: 'Organization',
+ label: 'Organization',
+ type: 'text'
+ },
+ {
+ field: 'CSS',
+ label: 'CSS',
+ type: 'text'
+ },
+ {
+ field: 'HeadImage',
+ label: 'HeadImage',
+ type: 'text'
+ },
+ {
+ field: 'StaffID',
+ label: 'StaffID',
+ type: 'text'
+ },
+ {
+ field: 'Remark',
+ label: 'Remark',
+ type: 'text'
+ },
+ {
+ field: 'Deleted',
+ label: 'Deleted',
+ type: 'text'
+ },
+ {
+ field: 'APICode',
+ label: 'APICode',
+ type: 'text'
+ },
+ {
+ field: 'Status',
+ label: 'Status',
+ type: 'text'
+ },
+ {
+ field: 'Type',
+ label: 'Type',
+ type: 'text'
+ },
+ {
+ field: 'CreateDate',
+ label: 'CreateDate',
+ type: 'date'
+ }
+ ]
+ let SColumns = [
+ {
+ field: 'Type',
+ label: 'Type',
+ type: 'text'
+ },
+ {
+ field: 'CreateDate',
+ label: 'CreateDate',
+ type: 'date'
+ },
+ {
+ field: 'CreateUserID',
+ label: 'CreateUserID',
+ type: 'text'
+ },
+ {
+ field: 'CreateUser',
+ label: 'CreateUser',
+ type: 'text'
+ },
+ {
+ field: 'CreateStaff',
+ label: 'CreateStaff',
+ type: 'text'
+ },
+ {
+ field: 'CreateDepartCode',
+ label: 'CreateDepartCode',
+ type: 'text'
+ },
+ {
+ field: 'ModifyDate',
+ label: 'ModifyDate',
+ type: 'date'
+ },
+ {
+ field: 'ModifyUserID',
+ label: 'ModifyUserID',
+ type: 'text'
+ },
+ {
+ field: 'ModifyUser',
+ label: 'ModifyUser',
+ type: 'text'
+ },
+ {
+ field: 'ModifyDepartCode',
+ label: 'ModifyDepartCode',
+ type: 'text'
+ },
+ {
+ field: 'ModifyOrganCode',
+ label: 'ModifyOrganCode',
+ type: 'text'
+ }
+ ]
+ let SActions = [
+ {
+ field: 'ModifyDepartCode',
+ label: 'ModifyDepartCode',
+ type: 'text'
+ },
+ {
+ field: 'ModifyOrganCode',
+ label: 'ModifyOrganCode',
+ type: 'text'
+ },
+ {
+ field: 'SubmitDate',
+ label: 'SubmitDate',
+ type: 'date'
+ },
+ {
+ field: 'SubmitUserID',
+ label: 'SubmitUserID',
+ type: 'text'
+ },
+ {
+ field: 'SubmitUser',
+ label: 'SubmitUser',
+ type: 'text'
+ }
+ ]
+ Api.getSystemConfig({func: 'sPC_Get_MainMenu'}).then(res => {
+ if (res.status) {
+ let _change = {
+ SUsers: SUsers,
+ SMenus: SMenus,
+ SColumns: SColumns,
+ SActions: SActions
+ }
+ this.setState({
+ tableColumns: tableColumns.concat([{
+ tableName: _table.name,
+ columns: _change[_table.name]
+ }])
+ })
+ } else {
+ notification.warning({
+ top: 92,
+ message: res.message,
+ duration: 10
+ })
+ }
+ })
+ }
+ }
+
+ deleteTable = (table) => {
+ const {selectedTables, tableColumns} = this.state
+
+ this.setState({
+ selectedTables: selectedTables.filter(item => item.name !== table.name),
+ tableColumns: tableColumns.filter(item => item.tableName !== table.name)
+ })
+ }
+
render () {
+ console.log(this.state.option)
return (
<div className="common-table-board">
<DndProvider backend={HTML5Backend}>
<div className="tools">
<Collapse accordion defaultActiveKey="0" bordered={false}>
- <Panel header="鍩烘湰淇℃伅" key="0">
+ <Panel header="鍩烘湰淇℃伅" key="0" id="common-basedata">
<MenuForm
dict={this.state.dict}
formlist={this.state.menuformlist}
wrappedComponentRef={(inst) => this.menuformRef = inst}
/>
+ <div className="ant-col ant-form-item-label">
+ <label title="娣诲姞琛ㄥ悕">娣诲姞琛ㄥ悕</label>
+ </div>
+ <Select
+ showSearch
+ className="tables"
+ style={{ width: '100%' }}
+ optionFilterProp="children"
+ value={'璇烽�夋嫨琛ㄥ悕'}
+ onChange={this.onTableChange}
+ showArrow={false}
+ getPopupContainer={() => document.getElementById('common-basedata')}
+ filterOption={(input, option) =>
+ option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+ }
+ >
+ {this.state.tables.map((table, index) => (
+ <Option key={index} value={table.name}>{table.label}</Option>
+ ))}
+ </Select>
+ {this.state.selectedTables.length > 0 && <List
+ size="small"
+ bordered
+ dataSource={this.state.selectedTables}
+ renderItem={(item, index) => <List.Item key={index} title={item.name + '--' + item.label}>
+ {item.name + '--' + item.label}
+ <Icon type="close" onClick={() => this.deleteTable(item)}/>
+ </List.Item>}
+ />}
</Panel>
<Panel header="鎼滅储" key="1">
- <Search placeholder="input table name." onSearch={value => this.queryField('search', value)} enterButton />
<div className="search-element">
{this.state.searchItems.map((item, index) => {
return (<SourceElement key={index} content={item}/>)
})}
</div>
+ <Button type="primary" block onClick={() => this.queryField('search')}>娣诲姞鎼滅储鏉′欢</Button>
</Panel>
<Panel header="鎸夐挳" key="2">
<div className="search-element">
@@ -823,12 +1182,12 @@
</div>
</Panel>
<Panel header="鏄剧ず鍒�" key="3">
- <Search placeholder="input table name." onSearch={value => this.queryField('column', value)} enterButton />
<div className="search-element">
{this.state.columnItems.map((item, index) => {
return (<SourceElement key={index} content={item}/>)
})}
</div>
+ <Button type="primary" block onClick={() => this.queryField('column')}>娣诲姞鏄剧ず鍒�</Button>
</Panel>
</Collapse>
</div>
@@ -914,8 +1273,24 @@
onCancel={this.cancelFieldSubmit}
destroyOnClose
>
- {this.state.addType === 'search' && <div>djfiafadf</div>}
+ {this.state.addType === 'search' &&
+ <div>
+ {this.state.option.normal.length > 0 && <EditCard data={this.state.option.normal} ref="searchcard" title="" />}
+ {this.state.option.others.length > 0 && <Row style={{marginLeft: '-10px', marginRight: '-10px'}}>
+ <p style={{margin: '10px 0px 0px 10px', color: '#1890ff'}}>鑷畾涔夊瓧娈�</p>
+ {this.state.option.others.map((item, index) => (
+ <Col key={index} span={8} style={{padding: '10px'}}>
+ <div className="ant-card ant-card-bordered" style={{padding: '10px'}}>
+ <p>{item.label}</p>
+ <p>{item.field}</p>
+ </div>
+ </Col>
+ ))}
+ </Row>}
+ </div>
+ }
</Modal>
+ {this.state.loading && <Spin size="large" style={{position: 'fixed', left: '49vw', top: '230px'}} />}
</div>
)
}
--
Gitblit v1.8.0