From bd1dfc9e6c9b9f8076ca2783ce598e0936b4c664 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 22 十二月 2021 14:36:03 +0800 Subject: [PATCH] 2021-12-22 --- src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx | 490 ++++++++++++++++++++++++++---------------------------- 1 files changed, 234 insertions(+), 256 deletions(-) diff --git a/src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx b/src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx index 78f15d7..2681e29 100644 --- a/src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx +++ b/src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Tabs, Row, Col, Input, Button, Table, Popconfirm, Icon, Tooltip, notification, Modal, message, InputNumber, Radio, Typography } from 'antd' +import { Form, Tabs, Row, Col, Input, Button, Popconfirm, Tooltip, notification, Modal, message, InputNumber, Radio, Typography } from 'antd' +import { EditOutlined, QuestionCircleOutlined, StopOutlined, CheckCircleOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -10,11 +11,13 @@ import UniqueForm from './uniqueform' import ColumnForm from './columnform' import CustomScript from './customscript' +import asyncComponent from '@/utils/asyncComponent' import './index.scss' const { TabPane } = Tabs const { confirm } = Modal const { Paragraph } = Typography +const EditTable = asyncComponent(() => import('@/templates/zshare/editTable')) class VerifyCard extends Component { static propTpyes = { @@ -31,26 +34,48 @@ { title: this.props.dict['model.form.field'], dataIndex: 'Column', - width: '16%', + width: '14%', + inputType: 'input', + unique: true, editable: true }, { title: this.props.dict['model.name'], dataIndex: 'Text', - width: '15%', + width: '14%', + inputType: 'input', editable: true }, { title: this.props.dict['model.form.type'], dataIndex: 'type', - width: '12%', - editable: true + width: '15%', + editable: true, + inputType: 'select', + options: [ + { value: 'Nvarchar(10)', text: 'Nvarchar(10)' }, + { value: 'Nvarchar(20)', text: 'Nvarchar(20)' }, + { value: 'Nvarchar(50)', text: 'Nvarchar(50)' }, + { value: 'Nvarchar(100)', text: 'Nvarchar(100)' }, + { value: 'Nvarchar(256)', text: 'Nvarchar(256)' }, + { value: 'Nvarchar(512)', text: 'Nvarchar(512)' }, + { value: 'Nvarchar(1024)', text: 'Nvarchar(1024)' }, + { value: 'Nvarchar(2048)', text: 'Nvarchar(2048)' }, + { value: 'Nvarchar(max)', text: 'Nvarchar(max)' }, + { value: 'Int', text: 'Int' }, + { value: 'Decimal(18,0)', text: 'Decimal(18,0)' }, + { value: 'Decimal(18,2)', text: 'Decimal(18,2)' }, + { value: 'Decimal(18,4)', text: 'Decimal(18,4)' }, + { value: 'Decimal(18,6)', text: 'Decimal(18,6)' }, + { value: 'date', text: 'date' } + ] }, { title: this.props.dict['model.required'], dataIndex: 'required', width: '10%', editable: true, + inputType: 'switch', render: (text, record) => record.required === 'true' ? this.props.dict['model.true'] : this.props.dict['model.false'] }, { @@ -58,120 +83,119 @@ dataIndex: 'import', width: '10%', editable: true, + inputType: 'switch', render: (text, record) => record.import !== 'false' ? this.props.dict['model.true'] : this.props.dict['model.false'] }, { title: '鏈�灏忓��', dataIndex: 'min', width: '10%', + required: false, + inputType: 'number', + unlimit: true, editable: true }, { title: '鏈�澶у��', dataIndex: 'max', width: '10%', + required: false, + inputType: 'number', + unlimit: true, editable: true - }, - { - title: '鎿嶄綔', - align: 'center', - dataIndex: 'operation', - render: (text, record) => - ( - <div> - <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record, 'columns')} style={{color: '#1890ff'}}><Icon type="edit" /></span> - <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'columns', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span> - <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'columns', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span> - <Popconfirm - overlayClassName="popover-confirm" - title={this.props.dict['model.query.delete']} - onConfirm={() => this.handleDelete(record, 'columns') - }> - <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span> - </Popconfirm> - </div> - ) } ], uniqueColumns: [ { - title: '瀛楁鍚�', + title: '鍒楀悕', + dataIndex: 'fieldlabel', + width: '20%' + }, + { + title: '瀛楁', dataIndex: 'field', - width: '35%' + width: '25%', + editable: true, + inputType: 'multiStr', + options: [] }, { title: '鎶ラ敊缂栫爜', dataIndex: 'errorCode', - width: '12%' + width: '12%', + editable: true, + inputType: 'select', + options: [ + { value: 'E', text: 'E' }, + { value: 'N', text: 'N' }, + { value: 'F', text: 'F' }, + { value: 'NM', text: 'NM' } + ] }, { title: '楠岃瘉绫诲瀷', dataIndex: 'verifyType', - width: '13%', - render: (text, record) => record.verifyType === 'logic' ? '閫昏緫楠岃瘉' : '鐗╃悊楠岃瘉' + width: '12%', + render: (text, record) => record.verifyType === 'logic' ? '閫昏緫楠岃瘉' : '鐗╃悊楠岃瘉', + inputType: 'select', + editable: true, + options: [ + { value: 'physical', text: '鐗╃悊楠岃瘉' }, + { value: 'logic', text: '閫昏緫楠岃瘉' } + ] }, { - title: '鐘舵��', + title: '鏄惁鍚敤', dataIndex: 'status', - width: '15%', + width: '12%', + editable: true, + required: false, + inputType: 'switch', render: (text, record) => record.status === 'false' ? ( - <div> + <div style={{color: '#ff4d4f'}}> {this.props.dict['model.status.forbidden']} - <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" /> + <StopOutlined style={{marginLeft: '5px'}} /> </div> ) : ( - <div> + <div style={{color: '#26C281'}}> {this.props.dict['model.status.open']} - <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" /> + <CheckCircleOutlined style={{marginLeft: '5px'}}/> </div> ) }, - { - title: '鎿嶄綔', - align: 'center', - width: '25%', - dataIndex: 'operation', - render: (text, record) => - (<div> - <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record, 'unique')} style={{color: '#1890ff'}}><Icon type="edit" /></span> - <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'unique', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span> - <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'unique', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span> - <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record, 'unique')} style={{color: '#8E44AD'}}><Icon type="swap" /></span> - <Popconfirm - overlayClassName="popover-confirm" - title={this.props.dict['model.query.delete']} - onConfirm={() => this.handleDelete(record, 'unique') - }> - <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span> - </Popconfirm> - </div>) - } ], scriptsColumns: [ { title: 'SQL', dataIndex: 'sql', width: '60%', - render: (text) => ( - <Paragraph copyable ellipsis={{ rows: 5, expandable: true }}>{text}</Paragraph> - ) + render: (text) => { + let title = text.match(/^\s*\/\*.+\*\//) + title = title && title[0] ? title[0] : '' + text = title ? text.replace(title, '') : text + + return ( + <div> + {title ? <span style={{color: '#a50'}}>{title}</span> : null} + <Paragraph copyable ellipsis={{ rows: 4, expandable: true }}>{text}</Paragraph> + </div> + ) + } }, { title: '鎵ц浣嶇疆', dataIndex: 'position', width: '10%', render: (text, record) => { - let _text = '' - if (record.position === 'front') { - _text = 'sql鍓�' - } else if (record.position === 'init') { - _text = '鍒濆鍖�' + if (record.position === 'init') { + return <span style={{color: 'orange'}}>鍒濆鍖�</span> + } else if (record.position === 'front') { + return <span style={{color: '#26C281'}}>sql鍓�</span> } else { - _text = 'sql鍚�' + return <span style={{color: '#1890ff'}}>sql鍚�</span> } - return _text } }, { @@ -180,35 +204,33 @@ width: '10%', render: (text, record) => record.status === 'false' ? ( - <div> + <div style={{color: '#ff4d4f'}}> {this.props.dict['model.status.forbidden']} - <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" /> + <StopOutlined style={{marginLeft: '5px'}} /> </div> ) : ( - <div> + <div style={{color: '#26C281'}}> {this.props.dict['model.status.open']} - <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" /> + <CheckCircleOutlined style={{marginLeft: '5px'}}/> </div> ) }, { title: '鎿嶄綔', align: 'center', - width: '20%', + width: '140px', dataIndex: 'operation', render: (text, record) => - (<div> - <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record, 'scripts')} style={{color: '#1890ff'}}><Icon type="edit" /></span> - <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'scripts', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span> - <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'scripts', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span> - <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record, 'scripts')} style={{color: '#8E44AD'}}><Icon type="swap" /></span> + (<div style={{textAlign: 'center'}}> + <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record, 'scripts')} style={{color: '#1890ff'}}><EditOutlined /></span> + <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record, 'scripts')} style={{color: '#8E44AD'}}><SwapOutlined /></span> <Popconfirm overlayClassName="popover-confirm" title={this.props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record, 'scripts') }> - <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span> + <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span> </Popconfirm> </div>) } @@ -216,58 +238,25 @@ } UNSAFE_componentWillMount() { - const { columns, card } = this.props + const { card } = this.props let _verify = fromJS(card.verify || {range: 1}).toJS() let _columns = _verify.columns || [] - // 鍚屾鏄剧ず鍒� - if (_columns.length === 0) { - columns.forEach(col => { - if (!col.field) return - let _type = 'Nvarchar(50)' - let _limit = '50' - if (col.type === 'number' && !col.decimal) { - _type = 'Int' - _limit = '' - } else if (col.type === 'number') { - _type = 'Decimal(18,' + col.decimal + ')' - _limit = col.decimal - } + // 鏃ф暟鎹吋瀹� + _columns = _columns.map(col => { + col.required = col.required || 'true' + col.type = col.type || 'Nvarchar(50)' + + if (/^Nvarchar/ig.test(col.type)) { + col.limit = col.type.match(/\d+/)[0] + } else if (/^Decimal/ig.test(col.type)) { + col.limit = col.type.match(/\d+/ig)[1] + } else { + col.limit = '' + } - let _cell = { - uuid: col.uuid, - Column: col.field, - Text: col.label, - type: _type, - limit: _limit, - import: 'true', - required: 'true' - } - - if (_type !== 'Nvarchar(50)') { - _cell.min = 0 - _cell.max = 999999 - } - - _columns.push(_cell) - }) - } else { - // 鏃ф暟鎹吋瀹� - _columns = _columns.map(col => { - col.required = col.required || 'true' - col.type = col.type || 'Nvarchar(50)' - - if (/^Nvarchar/ig.test(col.type)) { - col.limit = col.type.match(/\d+/)[0] - } else if (/^Decimal/ig.test(col.type)) { - col.limit = col.type.match(/\d+/ig)[1] - } else { - col.limit = '' - } - - return col - }) - } + return col + }) this.setState({ verify: { @@ -279,6 +268,8 @@ scripts: _verify.scripts || [], uniques: _verify.uniques || [] } + }, () => { + this.resetUniqueColumns() }) } @@ -305,7 +296,7 @@ systemScripts: res.data.map(item => { return { name: item.funcname, - value: Utils.UnformatOptions(item.longparam) + value: window.decodeURIComponent(window.atob(item.longparam)) } }) }) @@ -317,6 +308,27 @@ }) } }) + } + + resetUniqueColumns = () => { + const { uniqueColumns, verify } = this.state + + this.setState({uniqueColumns: uniqueColumns.map(col => { + if (col.dataIndex === 'field') { + col.options = verify.columns.map(c => { + return { + field: c.Column, + label: c.Text + } + }) + col.options.unshift({ + field: 'BID', + label: 'BID' + }) + } + + return col + })}) } columnFieldInput = () => { @@ -363,6 +375,8 @@ ...verify, columns: _columns } + }, () => { + this.resetUniqueColumns() }) } @@ -378,6 +392,8 @@ ...verify, columns: [] } + }, () => { + _this.resetUniqueColumns() }) }, onCancel() {} @@ -387,43 +403,101 @@ columnChange = (values) => { let verify = JSON.parse(JSON.stringify(this.state.verify)) - if (values.uuid) { - verify.columns = verify.columns.map(item => { - if (item.uuid === values.uuid) { - return values - } else { - return item - } + let fields = verify.columns.map(item => item.Column) + if (fields.includes(values.Column)) { + notification.warning({ + top: 92, + message: values.Column + '瀛楁宸插瓨鍦紒', + duration: 5 }) - } else { - values.uuid = Utils.getuuid() - verify.columns.push(values) + return } + + values.uuid = Utils.getuuid() + verify.columns.push(values) this.setState({ verify: verify + }, () => { + this.resetUniqueColumns() + }) + } + + changeColumns = (columns) => { + const { verify } = this.state + + if (columns[0] && (columns[0].type === 'image' || columns[0].type === 'text')) { + columns = columns.map(col => { + let _cell = { + uuid: Utils.getuuid(), + Column: col.Column, + Text: col.Text, + type: 'Nvarchar(50)', + limit: '50', + import: 'true', + required: 'true' + } + + return _cell + }) + } + + columns = columns.map(col => { + if (/^Nvarchar/ig.test(col.type)) { + col.limit = col.type.match(/\d+/) ? col.type.match(/\d+/)[0] : '20000' + } else if (/^Decimal/ig.test(col.type)) { + col.limit = col.type.match(/\d+/ig)[1] + col.required = 'true' + } else if (/^int/ig.test(col.type)) { + col.required = 'true' + } else { + col.limit = '' + } + + return col + }) + + this.setState({verify: {...verify, columns}}, () => { + this.resetUniqueColumns() }) } uniqueChange = (values) => { let verify = JSON.parse(JSON.stringify(this.state.verify)) - if (values.uuid) { - verify.uniques = verify.uniques.map(item => { - if (item.uuid === values.uuid) { - return values - } else { - return item - } - }) - } else { - values.uuid = Utils.getuuid() - verify.uniques.push(values) - } + values.status = 'true' + values.uuid = Utils.getuuid() + verify.uniques.push(values) this.setState({ verify: verify }) + } + + changeUniques = (uniques) => { + const { verify } = this.state + + let change = {} + verify.columns.forEach(col => { + change[col.Column] = col.Text + }) + + uniques = uniques.map(item => { + item.status = item.status || 'true' + + if (Array.isArray(item.field)) { + item.fieldlabel = item.field.map(field => { + return change[field] || '' + }) + + item.fieldlabel = item.fieldlabel.join(',') + item.field = item.field.join(',') + } + + return item + }) + + this.setState({verify: {...verify, uniques}}) } scriptsChange = (values) => { @@ -462,12 +536,8 @@ } handleEdit = (record, type) => { - if (type === 'columns') { - this.columnForm.edit(record) - } else if (type === 'scripts') { + if (type === 'scripts') { this.scriptsForm.edit(record) - } else if (type === 'unique') { - this.uniqueForm.edit(record) } let node = document.getElementById('verify-excel-box-tab').parentNode @@ -513,68 +583,6 @@ }) } - handleUpDown = (record, type, direction) => { - let verify = JSON.parse(JSON.stringify(this.state.verify)) - let index = 0 - - if (type === 'columns') { - verify.columns = verify.columns.filter((item, i) => { - if (item.uuid === record.uuid) { - index = i - } - - return item.uuid !== record.uuid - }) - if ((index === 0 && direction === 'up') || (index === verify.columns.length && direction === 'down')) { - return - } - - if (direction === 'up') { - verify.columns.splice(index - 1, 0, record) - } else { - verify.columns.splice(index + 1, 0, record) - } - } else if (type === 'unique') { - verify.uniques = verify.uniques.filter((item, i) => { - if (item.uuid === record.uuid) { - index = i - } - - return item.uuid !== record.uuid - }) - if ((index === 0 && direction === 'up') || (index === verify.uniques.length && direction === 'down')) { - return - } - - if (direction === 'up') { - verify.uniques.splice(index - 1, 0, record) - } else { - verify.uniques.splice(index + 1, 0, record) - } - } else if (type === 'scripts') { - verify.scripts = verify.scripts.filter((item, i) => { - if (item.uuid === record.uuid) { - index = i - } - - return item.uuid !== record.uuid - }) - if ((index === 0 && direction === 'up') || (index === verify.scripts.length && direction === 'down')) { - return - } - - if (direction === 'up') { - verify.scripts.splice(index - 1, 0, record) - } else { - verify.scripts.splice(index + 1, 0, record) - } - } - - this.setState({ - verify: verify - }) - } - handleConfirm = () => { const { verify } = this.state // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭� @@ -613,18 +621,10 @@ } let _loading = false - if (this.columnForm && this.columnForm.state.editItem) { - _loading = true - this.setState({activeKey: 'excelcolumn'}) - } else if (this.scriptsForm && this.scriptsForm.state.editItem) { + if (this.scriptsForm && this.scriptsForm.state.editItem) { _loading = true this.setState({activeKey: 'scripts'}) - } else if (this.uniqueForm && this.uniqueForm.state.editItem) { - _loading = true - this.setState({activeKey: 'unique'}) - } - - if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql')) { + } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))) { _loading = true this.setState({activeKey: 'scripts'}) } @@ -752,7 +752,7 @@ <Col span={8}> <Form.Item label={ <Tooltip placement="bottomLeft" title="蹇界暐棣栬鏃讹紝浼氭牎楠宔xcel涓〃澶村悕绉颁笌excel鍒楄缃槸鍚︿竴鑷淬��"> - <Icon type="question-circle" style={{color: '#c49f47', marginRight: '5px'}}/> + <QuestionCircleOutlined className="mk-form-tip" /> 蹇界暐琛� </Tooltip> }> @@ -778,26 +778,15 @@ {verify.columns.length ? <span className="count-tip">{verify.columns.length}</span> : null} </span> } key="excelcolumn"> - <ColumnForm - dict={this.props.dict} - columns={verify.columns} - columnChange={this.columnChange} - wrappedComponentRef={(inst) => this.columnForm = inst} - /> + <ColumnForm dict={this.props.dict} columnChange={this.columnChange}/> <Button className="excel-col-add mk-green" title="娣诲姞鏄剧ず鍒楀瓧娈�" onClick={this.columnFieldInput}> 鍚屾鏄剧ず鍒� </Button> <Button className="excel-col-add mk-red" title="娓呯┖Excel鍒�" onClick={this.clearField}> 娓呯┖Excel鍒� </Button> - <Table - bordered - rowKey="uuid" - className="custom-table excel-custom-table" - dataSource={verify.columns} - columns={excelColumns} - pagination={false} - /> + <Col style={{fontSize: '12px', color: '#757575', paddingLeft: '10px'}} span={24}>娉細鏁板�肩被鍨嬶紙int 鎴� decimal锛夛紝鍐呭涓哄繀濉紱鏈�澶у�煎拰鏈�灏忓�煎湪绫诲瀷涓烘暟鍊兼椂鏈夋晥銆�</Col> + <EditTable actions={['edit', 'move', 'copy', 'del']} type="excelcolumn" data={verify.columns} columns={excelColumns} onChange={this.changeColumns}/> </TabPane> {card.intertype === 'system' ? <TabPane tab={ <span> @@ -805,20 +794,8 @@ {verify.uniques.length ? <span className="count-tip">{verify.uniques.length}</span> : null} </span> } key="unique"> - <UniqueForm - fields={verify.columns} - dict={this.props.dict} - uniqueChange={this.uniqueChange} - wrappedComponentRef={(inst) => this.uniqueForm = inst} - /> - <Table - bordered - rowKey="uuid" - className="custom-table" - dataSource={verify.uniques} - columns={uniqueColumns} - pagination={false} - /> + <UniqueForm fields={verify.columns} dict={this.props.dict} uniqueChange={this.uniqueChange}/> + <EditTable actions={['edit', 'move', 'del']} data={verify.uniques} columns={uniqueColumns} onChange={this.changeUniques}/> </TabPane> : null} {card.intertype === 'system' ? <TabPane tab={ <span> @@ -835,14 +812,15 @@ scriptsChange={this.scriptsChange} wrappedComponentRef={(inst) => this.scriptsForm = inst} /> - <Table + <EditTable actions={['move']} data={verify.scripts} columns={scriptsColumns} onChange={(scripts) => {this.setState({verify: {...verify, scripts}})}}/> + {/* <Table bordered rowKey="uuid" className="custom-table" dataSource={verify.scripts} columns={scriptsColumns} pagination={false} - /> + /> */} </TabPane> : null} <TabPane tab="淇℃伅鎻愮ず" key="tip"> <Form {...formItemLayout}> -- Gitblit v1.8.0