From eb0482b3fc2e91a626baa6ac73e75e0b0038f552 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 03 十一月 2023 01:25:59 +0800 Subject: [PATCH] 2023-11-03 --- src/tabviews/zshare/actionList/editLine/index.jsx | 4 src/menu/stylecontroller/index.jsx | 98 ++ src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx | 111 ++ src/tabviews/custom/components/table/edit-table/normalTable/index.jsx | 1737 ++++++++++++++++++++++++-------------------- src/tabviews/zshare/actionList/excelInbutton/excelin/index.jsx | 6 src/tabviews/custom/popview/index.jsx | 2 src/tabviews/custom/components/table/edit-table/index.jsx | 63 src/menu/components/table/edit-table/options.jsx | 132 --- src/tabviews/custom/components/module/voucher/voucherTable/index.jsx | 22 src/tabviews/custom/components/share/normalTable/index.jsx | 17 src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.scss | 1 src/menu/components/table/edit-table/columns/tableIn/customscript/index.jsx | 2 src/menu/components/table/edit-table/columns/editColumn/index.jsx | 3 src/menu/components/table/edit-table/index.jsx | 4 src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx | 20 src/utils/utils.js | 8 src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx | 23 src/menu/components/table/edit-table/columns/index.jsx | 4 18 files changed, 1,215 insertions(+), 1,042 deletions(-) diff --git a/src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx b/src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx index 210057a..9e795e5 100644 --- a/src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx +++ b/src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx @@ -2,7 +2,7 @@ * @description 鑾峰彇鏄剧ず鍒楄〃鍗曢厤缃俊鎭� * @param {object} card // 鎼滅储鏉′欢瀵硅薄 */ -export function getColumnForm (card, fields = [], columns = []) { +export function getColumnForm (card, fields = [], columns = [], wrap) { let roleList = sessionStorage.getItem('sysRoles') if (roleList) { try { @@ -42,19 +42,26 @@ }] let editCols = [ + // { + // field: '$sub', + // label: '鎻愪氦' + // }, { - field: '$sub', - label: '鎻愪氦' + field: '$noAct', + label: '鏃犲姩浣�' }, { field: '$next', label: '涓嬩竴琛�' - }, - { - field: '$noAct', - label: '鏃犲姩浣�' } ] + + if (card.enter === '$sub') { + card.enter = '$noAct' + } + if (wrap.commit === 'change') { + editCols[0].label = '澶卞幓鐒︾偣' + } let cols = [] let getcols = (columns, suplabel = '') => { @@ -579,7 +586,7 @@ key: 'enter', label: '鍥炶溅鍒囨崲', initVal: card.enter || '$noAct', - tooltip: '鍖呮嫭鏂囨湰鎴栨暟鍊煎洖杞︿簨浠躲�佷笅鎷夎彍鍗曢�変腑浜嬩欢銆佸紑鍏冲垏鎹簨浠躲��', + tooltip: '鍖呮嫭鏂囨湰鎴栨暟鍊煎洖杞︿簨浠躲�佷笅鎷夎彍鍗曘�侀�夋嫨鍣ㄣ�佹椂闂村彉鍖栦簨浠躲�佸紑鍏冲垏鎹簨浠躲��', options: editCols }, { diff --git a/src/menu/components/table/edit-table/columns/editColumn/index.jsx b/src/menu/components/table/edit-table/columns/editColumn/index.jsx index 66e7e90..ccd72fa 100644 --- a/src/menu/components/table/edit-table/columns/editColumn/index.jsx +++ b/src/menu/components/table/edit-table/columns/editColumn/index.jsx @@ -30,6 +30,7 @@ class EdiTableColumn extends Component { static propTpyes = { column: PropTypes.object, + wrap: PropTypes.object, columns: PropTypes.array, fields: PropTypes.array, submitCol: PropTypes.func, // 鎻愪氦浜嬩欢 @@ -110,7 +111,7 @@ return item }) - let formlist = getColumnForm(column, fields, this.props.columns) + let formlist = getColumnForm(column, fields, this.props.columns, this.props.wrap) this.record = {} formlist.forEach(item => { diff --git a/src/menu/components/table/edit-table/columns/index.jsx b/src/menu/components/table/edit-table/columns/index.jsx index f7d1ef3..e6e92ee 100644 --- a/src/menu/components/table/edit-table/columns/index.jsx +++ b/src/menu/components/table/edit-table/columns/index.jsx @@ -407,6 +407,8 @@ submitCol = (col) => { const { card } = this.state + if (!card) return + col.uuid = card.uuid col.isSub = card.isSub === true col.marks = card.marks || [] @@ -714,7 +716,7 @@ }} /> </DndProvider> - <EditColumn column={card} columns={this.state.columns} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/> + <EditColumn column={card} wrap={config.wrap} columns={this.state.columns} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/> <Modal wrapClassName="mk-pop-modal" visible={visible} diff --git a/src/menu/components/table/edit-table/columns/tableIn/customscript/index.jsx b/src/menu/components/table/edit-table/columns/tableIn/customscript/index.jsx index 180e506..78760b7 100644 --- a/src/menu/components/table/edit-table/columns/tableIn/customscript/index.jsx +++ b/src/menu/components/table/edit-table/columns/tableIn/customscript/index.jsx @@ -36,7 +36,7 @@ fields.push('jskey') let sheet = btn.sheet.replace(/(.*)\.(.*)\.|@db@/ig, '') - let _sql = `create table #${sheet} (${usefulfields.map(item => item.field + ' ' + item.type).join(',')},jskey nvarchar(50),data_type nvarchar(50),BID nvarchar(50)) + let _sql = `create table #${sheet} (${usefulfields.map(item => item.field + ' ' + item.datatype).join(',')},jskey nvarchar(50),data_type nvarchar(50),BID nvarchar(50)) Declare @UserName nvarchar(50),@FullName nvarchar(50),@RoleID nvarchar(512),@mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20),@mk_nation nvarchar(50),@mk_province nvarchar(50),@mk_city nvarchar(50),@mk_district nvarchar(50),@mk_address nvarchar(100),@ErrorCode nvarchar(50), @retmsg nvarchar(4000),@tbid Nvarchar(512) Select @ErrorCode='', @retmsg='' ` diff --git a/src/menu/components/table/edit-table/index.jsx b/src/menu/components/table/edit-table/index.jsx index 2688b14..2595c3d 100644 --- a/src/menu/components/table/edit-table/index.jsx +++ b/src/menu/components/table/edit-table/index.jsx @@ -74,6 +74,10 @@ _card.cols.splice(_card.mergeCol[0], 1, ...col.pops) } + if (_card.wrap.commit === 'simple') { + _card.wrap.commit = 'change' + } + this.setState({ card: _card }) diff --git a/src/menu/components/table/edit-table/options.jsx b/src/menu/components/table/edit-table/options.jsx index cfaf7a2..33616a8 100644 --- a/src/menu/components/table/edit-table/options.jsx +++ b/src/menu/components/table/edit-table/options.jsx @@ -53,82 +53,19 @@ precision: 0, required: false }, - // { - // type: 'radio', - // field: 'editable', - // label: '鍒濆鍖�', - // initval: wrap.editable || 'false', - // required: false, - // options: [ - // {value: 'true', label: '鍙紪杈�'}, - // {value: 'false', label: '涓嶅彲缂栬緫'}, - // ], - // controlFields: [ - // {field: 'switchable', values: ['true']}, - // ] - // }, - // { - // type: 'radio', - // field: 'submittal', - // label: '鎻愪氦鍚�', - // initval: wrap.submittal || 'false', - // required: false, - // options: [ - // {value: 'true', label: '鍙紪杈�'}, - // {value: 'false', label: '涓嶅彲缂栬緫'}, - // ] - // }, - // { - // type: 'radio', - // field: 'addable', - // label: '鍙柊澧�', - // initval: wrap.addable || 'false', - // required: false, - // options: [ - // {value: 'true', label: '鏄�'}, - // {value: 'false', label: '鍚�'}, - // ] - // }, - // { - // type: 'radio', - // field: 'delable', - // label: '鍙垹闄�', - // initval: wrap.delable || 'false', - // required: false, - // options: [ - // {value: 'true', label: '鏄�'}, - // {value: 'false', label: '鍚�'}, - // ] - // }, { type: 'radio', field: 'commit', label: '鏁版嵁鎻愪氦', initval: wrap.commit || 'all', - tooltip: '鍗曢」鎻愪氦鎸囧湪琛ㄥ崟涓洖杞︽垨鍒犻櫎琛屾椂锛岃缃负鍗曢」鏃跺鐐瑰嚮鎻愪氦鎸夐挳锛屼細鎻愪氦淇敼椤广�傚け鍘荤劍鐐规彁浜ゆ椂浼氶獙璇佹暟鎹槸鍚︿慨鏀癸紝鏈慨鏀圭殑鏁版嵁涓嶄細鎻愪氦銆�', + tooltip: '璁剧疆涓轰慨鏀归」鏃讹紝鍦ㄥけ鍘荤劍鐐逛笖涓嶅瓨鍦ㄥ繀濉」涓虹┖鏃惰Е鍙戞彁浜ゃ�傝缃负淇敼椤癸紙鍏級鏃讹紝鍦ㄧ偣鍑绘彁浜ゆ寜閽椂瑙﹀彂鎻愪氦銆�', required: false, options: [ {value: 'all', label: '鍏ㄩ儴'}, {value: 'change', label: '淇敼椤�'}, - {value: 'simple', label: '鍗曢」'}, - {value: 'blur', label: '澶卞幓鐒︾偣'}, - ], - controlFields: [ - {field: 'standard', values: ['change', 'simple']}, + {value: 'amend', label: '淇敼椤癸紙鍏級'}, ] }, - // { - // type: 'radio', - // field: 'operType', - // label: '缂栬緫鎸夐挳', - // initval: wrap.operType || 'btnMode', - // tooltip: '缂栬緫鏃剁殑娣诲姞銆佸垹闄ゆ寜閽樉绀轰綅缃紝娉細浣跨敤娴爣鏃惰〃鏍兼í鍚戞粴鍔ㄥけ鏁堬紝琛ㄦ牸璁剧疆楂樺害鏃舵诞鏍囨棤鏁堛��', - // required: false, - // options: [ - // {value: 'btnMode', label: '鎸夐挳寮�'}, - // {value: 'buoyMode', label: '娴爣寮�'}, - // ] - // }, { type: 'radio', field: 'editType', @@ -139,18 +76,6 @@ options: [ {value: 'simple', label: '鍗曢」'}, {value: 'multi', label: '鏁翠綋'}, - ] - }, - { - type: 'radio', - field: 'standard', - label: '淇敼鏍囧噯', - initval: wrap.standard || 'init', - tooltip: '濡備綍鍒ゆ柇琛屼俊鎭槸鍚﹀簲璇ユ彁浜ゃ��', - required: false, - options: [ - {value: 'init', label: '涓庡垵濮嬪�间笉鍚�'}, - {value: 'change', label: '瀛樺湪缂栬緫鐥曡抗'}, ] }, { @@ -224,18 +149,6 @@ {value: 'ghost', label: '閫忔槑'}, ] }, - // { - // type: 'radio', - // field: 'show', - // label: '鎼滅储鎸夐挳', - // initval: wrap.show || 'true', - // tooltip: '鎼滅储鏉′欢瀛樺湪鏃讹紝鍙�夋嫨鏄惁鏄剧ず鎼滅储鎸夐挳銆�', - // required: false, - // options: [ - // {value: 'true', label: '鏄剧ず'}, - // {value: 'false', label: '闅愯棌'}, - // ] - // }, { type: 'color', field: 'borderColor', @@ -257,35 +170,6 @@ {value: 'bottom', label: '鍚戜笅'}, ] }, - // { - // type: 'color', - // field: 'color', - // label: '瀛椾綋棰滆壊', - // initval: wrap.color || 'rgba(0, 0, 0, 0.65)', - // tooltip: '榛樿鍊� rgba(0, 0, 0, 0.65)銆�', - // required: false - // }, - // { - // type: 'number', - // field: 'fontSize', - // label: '瀛椾綋澶у皬', - // initval: wrap.fontSize || 14, - // min: 12, - // max: 30, - // precision: 0, - // required: false - // }, - // { - // type: 'number', - // field: 'advanceWidth', - // label: '楂樼骇鎼滅储', - // initval: wrap.advanceWidth || 1000, - // tooltip: '楂樼骇鎼滅储寮圭獥鐨勫搴︼紝娉細褰撳搴﹀�煎皬浜�100鏃惰〃绀哄崰绐楀彛鐨勭櫨鍒嗘瘮锛屽ぇ浜�100鏃惰〃绀哄搴︾殑缁濆鍊笺��', - // min: 10, - // max: 3000, - // precision: 0, - // required: false - // }, { type: 'radio', field: 'permission', @@ -298,18 +182,6 @@ ], forbid: sessionStorage.getItem('editMenuType') === 'popview' }, - // { - // type: 'radio', - // field: 'switchable', - // label: '鐘舵�佸垏鎹�', - // initval: wrap.switchable || 'true', - // tooltip: '鏄惁鍙互鍦ㄧ紪杈戝拰榛樿table鐘舵�侀棿鍒囨崲銆�', - // required: false, - // options: [ - // {value: 'true', label: '鍚敤'}, - // {value: 'false', label: '绂佺敤'}, - // ] - // }, { type: 'radio', field: 'empty', diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx index 163a7c6..b60a0b0 100644 --- a/src/menu/stylecontroller/index.jsx +++ b/src/menu/stylecontroller/index.jsx @@ -415,13 +415,105 @@ if (res.copyType !== 'style') { message.warning('閰嶇疆淇℃伅鏍煎紡閿欒锛�', 5) return - } else if (JSON.stringify(res.options) !== JSON.stringify(options)) { - message.warning('鏍峰紡閫夐」涓嶄竴鑷达紝涓嶅彲绮樿创锛�', 5) - return } let style = res.data || {} + if (JSON.stringify(res.options) !== JSON.stringify(options)) { + res.options.forEach(n => { + if (options.includes(n)) return + + if (n === 'width') { + delete style.width + } else if (n === 'height') { + delete style.height + } else if (n === 'font') { + if (options.includes('font1')) { + ['lineHeight', 'letterSpacing', 'fontStyle', 'textAlign', 'textDecoration'].forEach(m => { + delete style[m] + }) + } else if (options.includes('font2')) { + + } else { + ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration'].forEach(m => { + delete style[m] + }) + } + } else if (n === 'font1') { + if (options.includes('font') || options.includes('font2')) { + + } else { + ['fontSize', 'fontWeight', 'color'].forEach(m => { + delete style[m] + }) + } + } else if (n === 'font2') { + if (options.includes('font')) { + ['textIndent', 'wordBreak'].forEach(m => { + delete style[m] + }) + } else if (options.includes('font1')) { + ['lineHeight', 'letterSpacing', 'fontStyle', 'textAlign', 'textDecoration', 'textIndent', 'wordBreak'].forEach(m => { + delete style[m] + }) + } else { + ['fontSize', 'fontWeight', 'lineHeight', 'letterSpacing', 'color', 'fontStyle', 'textAlign', 'textDecoration', 'textIndent', 'wordBreak'].forEach(m => { + delete style[m] + }) + } + } else if (n === 'background') { + if (!options.includes('backgroundColor')) { + delete style.backgroundColor + } + delete style.backgroundImage + delete style.backgroundSize + delete style.backgroundRepeat + delete style.backgroundPosition + } else if (n === 'backgroundColor') { + if (!options.includes('background')) { + delete style.backgroundColor + } + } else if (n === 'border') { + Object.keys(style).forEach(key => { + if (!/border/.test(key)) return + delete style[key] + }) + } else if (n === 'shadow') { + delete style.boxShadow + delete style.hShadow + delete style.vShadow + delete style.shadowBlur + delete style.shadowColor + } else if (n === 'margin') { + delete style.marginTop + delete style.marginBottom + delete style.marginLeft + delete style.marginRight + } else if (n === 'padding') { + delete style.paddingTop + delete style.paddingBottom + delete style.paddingLeft + delete style.paddingRight + } else if (n === 'float') { + delete style.float + } else if (n === 'minHeight') { + delete style.minHeight + } else if (n === 'clear') { + delete style.clear + } else if (n === 'display') { + delete style.display + } else if (n === 'position') { + delete style.position + delete style.top + delete style.bottom + delete style.left + delete style.right + } else if (n === 'transform') { + delete style.transform + } + }) + } + let backgroundImage = '' if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) { backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '') diff --git a/src/tabviews/custom/components/module/voucher/voucherTable/index.jsx b/src/tabviews/custom/components/module/voucher/voucherTable/index.jsx index ff923d4..ba436ea 100644 --- a/src/tabviews/custom/components/module/voucher/voucherTable/index.jsx +++ b/src/tabviews/custom/components/module/voucher/voucherTable/index.jsx @@ -237,9 +237,9 @@ setTimeout(() => { if (col.field === 'debit' && (line.debit || line.debit === 0)) { - MKEmitter.emit('nextLine', col, record) + MKEmitter.emit('nextVoucher', col, record) } else if (col.field === 'credit') { - MKEmitter.emit('nextLine', col, record) + MKEmitter.emit('nextVoucher', col, record) } else { let cl = {subject_voucher_text: 'subject_code', subject_code: 'debit', debit: 'credit'} MKEmitter.emit('tdFocus', cl[col.uuid] + record.uuid) @@ -327,10 +327,10 @@ MKEmitter.emit('plusLine', col.tableId, record) } - delRecord = () => { + delVoucher = () => { const { col, record } = this.props - MKEmitter.emit('delRecord', col.tableId, record) + MKEmitter.emit('delVoucher', col.tableId, record) } onSelectBlur = () => { @@ -936,7 +936,7 @@ </div> } } else if (col.field === 'credit') { - extra = <CloseOutlined onClick={this.delRecord}/> + extra = <CloseOutlined onClick={this.delVoucher}/> if (editing) { children = <InputNumber id={col.uuid + record.uuid} precision={2} defaultValue={record.credit} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> @@ -1049,10 +1049,10 @@ } componentDidMount () { - MKEmitter.addListener('nextLine', this.nextLine) MKEmitter.addListener('plusLine', this.plusLine) - MKEmitter.addListener('delRecord', this.delRecord) + MKEmitter.addListener('delVoucher', this.delVoucher) MKEmitter.addListener('cleartable', this.cleartable) + MKEmitter.addListener('nextVoucher', this.nextVoucher) MKEmitter.addListener('changeRecord', this.changeRecord) } @@ -1063,10 +1063,10 @@ this.setState = () => { return } - MKEmitter.removeListener('nextLine', this.nextLine) MKEmitter.removeListener('plusLine', this.plusLine) - MKEmitter.removeListener('delRecord', this.delRecord) + MKEmitter.removeListener('delVoucher', this.delVoucher) MKEmitter.removeListener('cleartable', this.cleartable) + MKEmitter.removeListener('nextVoucher', this.nextVoucher) MKEmitter.removeListener('changeRecord', this.changeRecord) } @@ -1240,7 +1240,7 @@ return ChineseStr } - nextLine = (col, record) => { + nextVoucher = (col, record) => { const { edData, tableId } = this.state if (col.tableId !== tableId) return @@ -1278,7 +1278,7 @@ this.props.onChange(_data) } - delRecord = (id, record) => { + delVoucher = (id, record) => { const { tableId, edData } = this.state if (id !== tableId) return diff --git a/src/tabviews/custom/components/share/normalTable/index.jsx b/src/tabviews/custom/components/share/normalTable/index.jsx index b090fc7..840b824 100644 --- a/src/tabviews/custom/components/share/normalTable/index.jsx +++ b/src/tabviews/custom/components/share/normalTable/index.jsx @@ -585,12 +585,6 @@ rowspans, tableId, orderfields - }, () => { - const element = document.getElementById(tableId) - element && element.style.setProperty('--mk-table-border-color', setting.borderColor || '#e8e8e8') - element && element.style.setProperty('--mk-table-color', setting.color || 'rgba(0, 0, 0, 0.65)') - element && element.style.setProperty('--mk-table-font-size', setting.fontSize || '14px') - element && element.style.setProperty('--mk-table-font-weight', setting.fontWeight || 'normal') }) } @@ -1073,7 +1067,7 @@ render() { const { setting, statFValue, lineMarks, data } = this.props - const { selectedRowKeys, activeIndex, pickup, tableId, pageOptions, columns, reseting } = this.state + const { selectedRowKeys, activeIndex, pickup, pageOptions, columns, reseting } = this.state if (reseting) return null @@ -1143,8 +1137,15 @@ } } + let style = { + '--mk-table-border-color': setting.borderColor || '#e8e8e8', + '--mk-table-color': setting.color || 'rgba(0, 0, 0, 0.65)', + '--mk-table-font-size': setting.fontSize || '14px', + '--mk-table-font-weight': setting.fontWeight || 'normal' + } + return ( - <div className={`normal-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || 'middle'} table-col-${columns.length} ${fixed}`} id={tableId}> + <div className={`normal-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || 'middle'} table-col-${columns.length} ${fixed}`} style={style}> {(setting.tableType === 'radio' || setting.tableType === 'checkbox') && data && data.length > 0 ? <Switch title="鏀惰捣" className="main-pickup" checkedChildren="寮�" unCheckedChildren="鍏�" checked={pickup} onChange={this.pickupChange} /> : null } diff --git a/src/tabviews/custom/components/table/edit-table/index.jsx b/src/tabviews/custom/components/table/edit-table/index.jsx index 4f2d6c0..bcc54c6 100644 --- a/src/tabviews/custom/components/table/edit-table/index.jsx +++ b/src/tabviews/custom/components/table/edit-table/index.jsx @@ -46,10 +46,10 @@ UNSAFE_componentWillMount () { let _config = fromJS(this.props.config).toJS() let setting = {..._config.setting, ..._config.wrap} - setting.tableId = Utils.getuuid() - let BID = '' let BData = '' + + setting.tableId = Utils.getuuid().substr(-6).toUpperCase() if (_config.setting.supModule) { BData = window.GLOB.CacheData.get(_config.setting.supModule) @@ -76,9 +76,12 @@ }) let _columns = [] - setting.initId = '' - let triMap = new Map() + let initId = '' + setting.hasSubmit = false + if (setting.commit === 'change' || setting.commit === 'simple') { + setting.commit = 'change' + } let getColumns = (cols) => { return cols.filter(item => { @@ -115,14 +118,25 @@ } if (item.editable === 'true') { - setting.hasSubmit = true - if (!setting.initId) { - setting.initId = item.uuid + setting.hasSubmit = setting.commit !== 'change' + item.$ctrl = setting.commit === 'change' + + if (!initId) { + initId = item.uuid } - if (item.type === 'text' && (item.editType === 'switch' || item.editType === 'select')) { - triMap.set(item.uuid, item.editType) + if (item.enter === '$sub') { + item.enter = '$noAct' + } else if (item.enter === '$next') { + item.enter = '$next_' + initId } - if (item.type === 'text' && item.editType === 'select') { + + if (item.linkSubField && item.linkSubField.length === 0) { + item.linkSubField = null + } + + if (item.type === 'number') { + + } else if (item.editType === 'select') { item.options = item.options || [] item.options = item.options.filter(cell => { cell.value = cell.Value @@ -133,6 +147,7 @@ } else if (item.editType === 'popSelect') { if (item.pops) { item.pops.forEach(cell => { + cell.linkSubField = item.linkSubField this.resetPop(cell) cell.tabName = cell.initval.replace(/^tab:/, '') }) @@ -149,25 +164,7 @@ _columns = getColumns(_config.cols) - if (triMap.size > 0) { - let setColumns = (cols) => { - return cols.map(item => { - if (item.type === 'colspan') { - item.subcols = setColumns(item.subcols) - } else if (item.editable === 'true' && triMap.has(item.enter)) { - item.triType = 'click' - } - - return item - }) - } - - _columns = setColumns(_columns) - - if (setting.initId && triMap.has(setting.initId)) { - setting.triType = 'click' - } - } + setting.initId = initId if (!_config.lineMarks || _config.lineMarks.length === 0) { _config.lineMarks = null @@ -183,10 +180,6 @@ } } else { _config.colsCtrls = null - } - - if (setting.commit === 'blur') { - setting.hasSubmit = false } this.setState({ @@ -357,7 +350,7 @@ loading: false }) - MKEmitter.emit('transferData', config.uuid, data) + MKEmitter.emit('transferData' + setting.tableId, data) if (result.message) { if (result.ErrCode === 'Y') { @@ -465,7 +458,7 @@ return item }) - MKEmitter.emit('transferData', config.uuid, _data, 'line') + MKEmitter.emit('transferData' + setting.tableId, _data, 'line') MKEmitter.emit('resetSelectLine', config.uuid, _data.$$uuid, _data) this.setState({ diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx index eed1528..ed634a0 100644 --- a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx +++ b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx @@ -18,10 +18,10 @@ const MKPopSelect = asyncComponent(() => import('./mkPopSelect')) const CardCellComponent = asyncComponent(() => import('@/tabviews/custom/components/card/cardcellList')) -class CusSwitch extends Component { +class MkSwitch extends Component { static propTpyes = { + autoFocus: PropTypes.bool, defaultValue: PropTypes.any, - autoFocus: PropTypes.any, config: PropTypes.object, onChange: PropTypes.func } @@ -29,6 +29,8 @@ state = { status: false } + + node = null UNSAFE_componentWillMount () { const { defaultValue, config } = this.props @@ -43,29 +45,67 @@ } changeStatus = (val) => { - const { config } = this.props - this.setState({ status: val }, () => { - let _val = val ? config.openVal : config.closeVal - let _text = val ? config.openText : config.closeText - this.props.onChange(_val, _text) - }) + const { config, lineId } = this.props + + this.setState({ status: val }) + + let values = {[config.field]: val ? config.openVal : config.closeVal} + + this.props.onChange(values, '') + + this.node.blur() + + if (config.enter === '$noAct') return + + if (/\$next/.test(config.enter)) { + MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', '')) + } else { + MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter) + } + } + + onFocus = () => { + const { config, lineId } = this.props + + if (!config.$ctrl) return + + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } + + onBlur = () => { + const { config, lineId } = this.props + + if (config.$ctrl) { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid) + } + + this.props.onBlur && this.props.onBlur() } render() { const { config, autoFocus } = this.props const { status } = this.state + return ( - <Switch checkedChildren={config.openText} autoFocus={autoFocus} onBlur={this.props.onBlur} unCheckedChildren={config.closeText} checked={status} onChange={this.changeStatus} /> + <Switch + ref={ref => this.node = ref} + checkedChildren={config.openText} + checked={status} + autoFocus={autoFocus} + onFocus={this.onFocus} + onBlur={this.onBlur} + unCheckedChildren={config.closeText} + onChange={this.changeStatus} + /> ) } } -class CusDatePicker extends Component { +class MkDatePicker extends Component { static propTpyes = { defaultValue: PropTypes.any, config: PropTypes.object, - onChange: PropTypes.func, - blur: PropTypes.func + onChange: PropTypes.func } state = { @@ -74,21 +114,89 @@ } UNSAFE_componentWillMount () { - const { value, open } = this.props + const { defaultValue } = this.props - let _value = value || null + let _value = defaultValue || null if (_value) { _value = moment(_value, 'YYYY-MM-DD HH:mm:ss') } - this.setState({value: _value, open: open === true}) + this.setState({value: _value}) + } + + componentDidMount() { + const { config, autoFocus, lineId } = this.props + + if (autoFocus === true) { + this.setState({open: true}) + + if (config.$ctrl) { + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } + } + + MKEmitter.addListener('setFocus' + config.tableId, this.setFocus) + } + + componentWillUnmount () { + this.setState = () => { + return + } + + MKEmitter.removeListener('setFocus' + this.props.config.tableId, this.setFocus) + } + + setFocus = (lId, colId) => { + const { config, lineId } = this.props + + if (lId !== lineId || config.uuid !== colId) return + + this.setState({open: true}) + + if (config.$ctrl) { + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } } onOpenChange = (open) => { + const { config, lineId } = this.props + this.setState({open}) - if (open === false) { - this.props.blur() + if (!open) { + this.props.onBlur && this.props.onBlur() + } + + if (!config.$ctrl) return + + if (open) { + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } else { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid) + } + } + + onChange = (val) => { + const { config, lineId } = this.props + + let _val = val ? moment(val).format(config.format) : '' + + if (config.precision === 'hour') { + _val = _val + ':00:00' + } else if (config.precision === 'minute') { + _val = _val + ':00' + } + + let values = {[config.field]: _val} + + this.props.onChange(values) + + if (config.enter === '$noAct') return + + if (/\$next/.test(config.enter)) { + MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', '')) + } else { + MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter) } } @@ -97,7 +205,393 @@ const { value, open } = this.state return ( - <DatePicker dropdownClassName={'mk-date-picker ' + config.precision} showTime={config.format !== 'YYYY-MM-DD'} format={config.format} open={open} defaultValue={value} onChange={this.props.onChange} onOpenChange={this.onOpenChange}/> + <DatePicker dropdownClassName={'mk-date-picker ' + config.precision} showTime={config.format !== 'YYYY-MM-DD'} format={config.format} open={open} defaultValue={value} onChange={this.onChange} onOpenChange={this.onOpenChange}/> + ) + } +} + +class MkSelect extends Component { + static propTpyes = { + defaultValue: PropTypes.any, + lineId: PropTypes.string, + config: PropTypes.object, + onChange: PropTypes.func, + } + + state = { + value: '' + } + + node = null + + UNSAFE_componentWillMount() { + const { defaultValue } = this.props + + this.setState({value: defaultValue}) + } + + componentDidMount() { + const { config, autoFocus, lineId } = this.props + + if (autoFocus) { + let node = document.getElementById(config.uuid + lineId) + node && node.click() + } + MKEmitter.addListener('setFocus' + config.tableId, this.setFocus) + } + + UNSAFE_componentWillReceiveProps(nextProps) { + if (nextProps.defaultValue !== this.props.defaultValue) { + this.setState({value: nextProps.defaultValue}) + } + } + + componentWillUnmount () { + this.setState = () => { + return + } + + MKEmitter.removeListener('setFocus' + this.props.config.tableId, this.setFocus) + } + + setFocus = (lId, colId) => { + const { config, lineId } = this.props + + if (lId !== lineId || config.uuid !== colId) return + + let node = document.getElementById(config.uuid + lineId) + node && node.click() + } + + onSelectChange = (val, option) => { + const { config, lineId } = this.props + + let values = {} + let _option = config.options.filter(m => m.key === option.key)[0] + + if (_option) { + if (config.linkSubField) { + config.linkSubField.forEach((m, i) => { + values[m] = _option[m] !== undefined ? _option[m] : '' + }) + } + + values[config.field] = val + } + + this.setState({value: val}) + + this.props.onChange(values, val) + + this.node.blur() + + if (config.enter === '$noAct') return + + setTimeout(() => { + if (/\$next/.test(config.enter)) { + MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', '')) + } else { + MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter) + } + }, 100) + } + + onFocus = () => { + const { config, lineId } = this.props + + if (!config.$ctrl) return + + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } + + onBlur = () => { + const { config, lineId } = this.props + + if (config.$ctrl) { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid) + } + + setTimeout(() => { + this.props.onBlur && this.props.onBlur() + }, 10) + } + + render() { + const { config, lineId } = this.props + const { value } = this.state + + return ( + <Select + showSearch + dropdownClassName="edit-table-dropdown" + dropdownMatchSelectWidth={config.dropdown === 'fixed'} + value={value} + id={config.uuid + lineId} + ref={ref => this.node = ref} + onFocus={this.onFocus} + onBlur={this.onBlur} + filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} + onSelect={this.onSelectChange} + > + {config.options.map(item => (<Select.Option key={item.key} disabled={item.$disabled} value={item.value}>{item.label}</Select.Option>))} + </Select> + ) + } +} + +class MkInput extends Component { + static propTpyes = { + defaultValue: PropTypes.any, + lineId: PropTypes.string, + config: PropTypes.object, + onChange: PropTypes.func + } + + state = { + value: null, + err: null + } + + node = null + + UNSAFE_componentWillMount() { + const { defaultValue } = this.props + + this.setState({value: defaultValue}) + } + + componentDidMount() { + const { config, autoFocus } = this.props + + if (autoFocus) { + this.node.select() + } + MKEmitter.addListener('setFocus' + config.tableId, this.setFocus) + } + + UNSAFE_componentWillReceiveProps(nextProps) { + if (nextProps.defaultValue !== this.props.defaultValue) { + this.setState({value: nextProps.defaultValue}) + } + } + + componentWillUnmount () { + this.setState = () => { + return + } + + MKEmitter.removeListener('setFocus' + this.props.config.tableId, this.setFocus) + } + + setFocus = (lId, colId) => { + const { config, lineId } = this.props + + if (lId !== lineId || config.uuid !== colId) return + + this.node.select() + } + + onChange = (val) => { + this.setState({value: val}) + } + + onFocus = () => { + const { config, lineId } = this.props + + if (!config.$ctrl) return + + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } + + enterPress = () => { + const { config, lineId } = this.props + + this.node.blur() + + if (config.enter === '$noAct') return + + if (/\$next/.test(config.enter)) { + MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', '')) + } else { + MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter) + } + } + + onBlur = () => { + const { config, lineId } = this.props + const { value } = this.state + + let err = null + + if (config.required === 'true' && !value) { + err = '璇峰~鍐�' + config.label + } + + this.setState({err}) + + this.props.onChange({[config.field]: value}) + + if (config.$ctrl) { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid) + } + + this.props.onBlur && this.props.onBlur() + } + + render() { + const { value, err } = this.state + + return ( + <Input + title={err} + className={err ? 'has-error' : ''} + ref={ref => this.node = ref} + value={value} + onChange={(e) => this.onChange(e.target.value)} + onPressEnter={this.enterPress} + onFocus={this.onFocus} + onBlur={this.onBlur} + /> + ) + } +} + +class MkInputNumber extends Component { + static propTpyes = { + defaultValue: PropTypes.any, + lineId: PropTypes.string, + config: PropTypes.object, + onChange: PropTypes.func + } + + state = { + value: null, + err: null, + clear: false + } + + node = null + + UNSAFE_componentWillMount() { + const { defaultValue } = this.props + + this.setState({value: defaultValue}) + } + + componentDidMount() { + const { config, autoFocus } = this.props + + if (autoFocus) { + this.node.focus() + } + MKEmitter.addListener('setFocus' + config.tableId, this.setFocus) + } + + UNSAFE_componentWillReceiveProps(nextProps) { + if (nextProps.defaultValue !== this.props.defaultValue) { + this.setState({value: nextProps.defaultValue}) + } + } + + componentWillUnmount () { + this.setState = () => { + return + } + + MKEmitter.removeListener('setFocus' + this.props.config.tableId, this.setFocus) + } + + setFocus = (lId, colId) => { + const { config, lineId } = this.props + + if (lId !== lineId || config.uuid !== colId) return + + this.node.focus() + } + + onChange = (val) => { + const { config } = this.props + + this.setState({value: val}) + + if (config.clearField && val && !this.state.clear) { + this.setState({clear: true}) + + this.props.onChange({[config.clearField]: ''}) + } + } + + onFocus = () => { + const { config, lineId } = this.props + + this.setState({clear: false}) + + if (!config.$ctrl) return + + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } + + enterPress = () => { + const { config, lineId } = this.props + + this.node.blur() + + if (config.enter === '$noAct') return + + setTimeout(() => { + if (/\$next/.test(config.enter)) { + MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', '')) + } else { + MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter) + } + }, 10) + } + + onBlur = () => { + const { config, lineId } = this.props + + if (config.$ctrl) { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid) + } + + setTimeout(() => { + let err = null + let value = this.state.value + + if (config.noValue === 'hide' && !value) { + value = 0 + } else { + if (typeof(config.max) === 'number' && value > config.max) { + err = config.label + '鏈�澶т负' + config.max + } else if (typeof(config.min) === 'number' && value < config.min) { + err = config.label + '鏈�灏忎负' + config.min + } + } + + this.setState({err}) + + this.props.onChange({[config.field]: value}) + + this.props.onBlur && this.props.onBlur() + }, 5) + } + + render() { + const { config } = this.props + const { value, err } = this.state + + return ( + <InputNumber + title={err} + className={err ? 'has-error' : ''} + ref={ref => this.node = ref} + precision={config.decimal || 0} + value={value} + onChange={(value) => this.onChange(value)} + onPressEnter={this.enterPress} + onFocus={this.onFocus} + onBlur={this.onBlur} + /> ) } } @@ -180,9 +674,15 @@ class BodyCell extends React.Component { state = { - editing: false, - err: null, - value: '' + editing: false + } + + componentDidMount() { + const { col } = this.props + + if (col && col.editable === 'true') { + MKEmitter.addListener('setFocus' + col.tableId, this.setFocus) + } } shouldComponentUpdate (nextProps, nextState) { @@ -196,217 +696,43 @@ this.setState = () => { return } + if (this.props.col) { + MKEmitter.removeListener('setFocus' + this.props.col.tableId, this.setFocus) + } } - enterPress = () => { + setFocus = (lId, colId) => { const { col, record } = this.props - const { value } = this.state - this.setState({editing: false}) - setTimeout(() => { - if (/\$next/.test(col.enter)) { - MKEmitter.emit('nextLine', col, record.$$uuid) - } else if (col.enter === '$sub') { - MKEmitter.emit('subLine', col, record) - } else if (col.enter !== '$noAct') { - let node = document.getElementById(col.enter + record.$$uuid) - node && node.click() - } - }, 50) + if (lId !== record.$$uuid || col.uuid !== colId) return + if (col.ctrlField && col.ctrlValue.includes(record[col.ctrlField] + '')) return - if (value !== record[col.field]) { - MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: value}) - } + this.setState({editing: true}) } focus = () => { const { col, record } = this.props - if (col.ctrlField && col.ctrlValue.includes(record[col.ctrlField])) return + if (col.ctrlField && col.ctrlValue.includes(record[col.ctrlField] + '')) return - if (col.editType === 'switch' || col.editType === 'select') { - this.setState({editing: true}, () => { - let node = document.getElementById(col.uuid + record.$$uuid) - node && node.click() - }) - } else { - let err = null - let val = record[col.field] !== undefined ? record[col.field] : '' - - if (col.type === 'number') { - val = +val - if (isNaN(val)) { - val = 0 - } - if (typeof(col.max) === 'number' && val > col.max) { - err = col.label + '鏈�澶т负' + col.max - } else if (typeof(col.min) === 'number' && val < col.min) { - err = col.label + '鏈�灏忎负' + col.min - } - } else if (col.required === 'true' && !val) { - err = '璇峰~鍐�' + col.label - } - - this.setState({editing: true, value: val, err}, () => { - let node = document.getElementById(col.uuid + record.$$uuid) - node && node.select() - }) - } + this.setState({editing: true}) } - onBlur = () => { - const { col, record } = this.props - const { value } = this.state - - this.setState({editing: false}) - - if (value !== record[col.field]) { - MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: value}) - } - } - - onChange = (val) => { - const { col, record } = this.props - - let err = null - - if (col.type === 'number') { - if (col.noValue === 'hide' && val === null) { - val = 0 - } else { - val = +val - if (isNaN(val)) { - val = 0 - } - if (typeof(col.max) === 'number' && val > col.max) { - err = col.label + '鏈�澶т负' + col.max - } else if (typeof(col.min) === 'number' && val < col.min) { - err = col.label + '鏈�灏忎负' + col.min - } - } - } else if (col.required === 'true' && !val) { - err = '璇峰~鍐�' + col.label - } - - this.setState({value: val, err}) - - if (col.clearField && record[col.clearField]) { - MKEmitter.emit('changeRecord', col.tableId, {...record, [col.clearField]: ''}, 'clear') - } - } - - onSwitchChange = (val, label) => { + onColChange = (values) => { const { col, record } = this.props - this.setState({editing: false}) - - setTimeout(() => { - if (/\$next/.test(col.enter)) { - MKEmitter.emit('nextLine', col, record.$$uuid) - } else if (col.enter === '$sub') { - MKEmitter.emit('subLine', col, record) - } else if (col.enter !== '$noAct') { - let node = document.getElementById(col.enter + record.$$uuid) - node && node.click() - } - }, 50) - - MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: val}) - } - - onSelectChange = (val, option) => { - const { col, record } = this.props - - let values = {} - let _option = col.options.filter(m => m.key === option.key)[0] - - if (_option) { - if (col.linkSubField) { - col.linkSubField.forEach(m => { - values[m] = _option[m] !== undefined ? _option[m] : '' - }) - } - - values[col.field] = val - } - - this.setState({editing: false}) - - setTimeout(() => { - if (/\$next/.test(col.enter)) { - MKEmitter.emit('nextLine', col, record.$$uuid) - } else if (col.enter === '$sub') { - MKEmitter.emit('subLine', col, record) - } else if (col.enter !== '$noAct') { - let node = document.getElementById(col.enter + record.$$uuid) - node && node.click() - } - }, 50) - - MKEmitter.emit('changeRecord', col.tableId, {...record, ...values}) - } - - onDateChange = (val) => { - const { col, record } = this.props - - let _val = val ? moment(val).format(col.format) : '' - - if (col.precision === 'hour') { - _val = _val + ':00:00' - } else if (col.precision === 'minute') { - _val = _val + ':00' - } - - this.setState({editing: false}) - - setTimeout(() => { - if (/\$next/.test(col.enter)) { - MKEmitter.emit('nextLine', col, record.$$uuid) - } else if (col.enter === '$sub') { - MKEmitter.emit('subLine', col, record) - } else if (col.enter !== '$noAct') { - let node = document.getElementById(col.enter + record.$$uuid) - node && node.click() - } - }, 50) - - MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: _val}) - } - - switchBlur = () => { - setTimeout(() => { - this.setState({editing: false}) - }, 10) - } - - onPopChange = (values) => { - const { col, record } = this.props - - this.setState({editing: false}) - - setTimeout(() => { - if (/\$next/.test(col.enter)) { - MKEmitter.emit('nextLine', col, record.$$uuid) - } else if (col.enter === '$sub') { - MKEmitter.emit('subLine', col, record) - } else if (col.enter !== '$noAct') { - let node = document.getElementById(col.enter + record.$$uuid) - node && node.click() - } - }, 50) - - MKEmitter.emit('changeRecord', col.tableId, {...record, ...values}) + MKEmitter.emit('changeRecord' + col.tableId, {...record, ...values}) } render() { let { col, config, record, style, className, ...resProps } = this.props - const { editing, value, err } = this.state + const { editing } = this.state if (!col) return (<td {...resProps} className={className} style={style}/>) let disabled = false if (col.ctrlField) { - disabled = col.ctrlValue.includes(record[col.ctrlField]) + disabled = col.ctrlValue.includes(record[col.ctrlField] + '') } let children = null @@ -418,6 +744,12 @@ if (col.editType === 'select' && col.options.length > 0) { content = col.map.get(content) || content + } else if (col.editType === 'switch') { + if (content === config.openVal) { + content = config.openText + } else if (content === config.closeVal) { + content = config.closeText + } } if (content !== '') { @@ -460,42 +792,27 @@ if (col.editable === 'true' && !disabled) { if (editing) { + let _value = record[col.field] !== undefined ? record[col.field] : '' + if (!col.editType || col.editType === 'text') { return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> - <Input className={err ? 'has-error' : ''} title={err} id={col.uuid + record.$$uuid} defaultValue={value} onChange={(e) => this.onChange(e.target.value)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> + <MkInput config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={true} onChange={this.onColChange} onBlur={() => this.setState({editing: false})}/> + </td>) + } else if (col.editType === 'switch') { + return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> + <MkSwitch config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={true} onChange={this.onColChange} onBlur={() => this.setState({editing: false})}/> </td>) } else if (col.editType === 'date') { return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> - <CusDatePicker config={col} value={record[col.field] || null} open={true} onChange={this.onDateChange} blur={() => this.setState({editing: false})}/> - </td>) - } else if (col.editType === 'switch') { - let _value = record[col.field] !== undefined ? record[col.field] : '' - - return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> - <CusSwitch config={col} defaultValue={_value} autoFocus={true} onChange={this.onSwitchChange} onBlur={this.switchBlur}/> + <MkDatePicker config={col} lineId={record.$$uuid} defaultValue={_value || null} autoFocus={true} onChange={this.onColChange} onBlur={() => this.setState({editing: false})}/> </td>) } else if (col.editType === 'popSelect') { - let _value = record[col.field] !== undefined ? record[col.field] : '' - return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> - <MKPopSelect mask={true} defaultValue={_value} config={col} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange} blur={() => this.setState({editing: false})}/> + <MKPopSelect config={col} lineId={record.$$uuid} defaultValue={_value} BID={record.$$BID} autoFocus={true} onChange={this.onColChange} onBlur={() => this.setState({editing: false})}/> </td>) } else { - let _value = record[col.field] !== undefined ? record[col.field] : '' - return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> - <Select - showSearch - defaultValue={_value} - dropdownClassName="edit-table-dropdown" - dropdownMatchSelectWidth={col.dropdown === 'fixed'} - id={col.uuid + record.$$uuid} - onBlur={() => this.setState({editing: false})} - filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} - onSelect={this.onSelectChange} - > - {col.options.map((item, i) => (<Select.Option key={item.key} disabled={item.$disabled} value={item.value}>{item.label}</Select.Option>))} - </Select> + <MkSelect config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={true} onChange={this.onColChange} onBlur={() => this.setState({editing: false})}/> </td>) } } else { @@ -566,12 +883,12 @@ if (col.editable === 'true' && !disabled) { if (editing) { - let val = value - if (col.noValue === 'hide' && value === 0) { + let val = record[col.field] !== undefined ? record[col.field] : '' + if (col.noValue === 'hide' && val === 0) { val = '' } return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell"> - <InputNumber className={err ? 'has-error' : ''} precision={col.decimal || 0} title={err} id={col.uuid + record.$$uuid} defaultValue={val} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> + <MkInputNumber config={col} lineId={record.$$uuid} defaultValue={val} autoFocus={true} onChange={this.onColChange} onBlur={() => this.setState({editing: false})}/> </td>) } else { return (<td onClick={(e) => e.stopPropagation()} className={className + ' pointer'} style={style}> @@ -686,39 +1003,10 @@ } class BodyAllCell extends React.Component { - state = { - err: null, - value: '', - resting: false - } - - componentDidMount() { - const { col } = this.props - - if (col && col.type === 'number' && col.clearField) { - MKEmitter.addListener('resetCol', this.resetCol) - } - } + state = {} shouldComponentUpdate (nextProps, nextState) { return !is(fromJS(this.props.record), fromJS(nextProps.record)) || !is(fromJS(this.state), fromJS(nextState)) - } - - UNSAFE_componentWillMount() { - const { col } = this.props - - if (col && col.editable === 'true') { - this.setState({value: this.props.record[col.field]}) - } - } - - UNSAFE_componentWillReceiveProps(nextProps) { - const { col } = this.props - const { value } = this.state - - if (col && col.editable === 'true' && nextProps.record[col.field] !== value) { - this.setState({value: nextProps.record[col.field]}) - } } /** @@ -728,198 +1016,23 @@ this.setState = () => { return } - MKEmitter.removeListener('resetCol', this.resetCol) } - enterPress = () => { + onColChange = (values) => { const { col, record } = this.props - this.onBlur() - - setTimeout(() => { - if (/\$next/.test(col.enter)) { - MKEmitter.emit('nextLine', col, record.$$uuid) - } else if (col.enter === '$sub') { - MKEmitter.emit('subLine', col, record) - } else if (col.enter !== '$noAct') { - let node = document.getElementById(col.enter + record.$$uuid) - - if (node) { - if (col.triType === 'click') { - node.click() - } else { - node.select && node.select() - } - } - } - }, 50) - } - - resetCol = (tableId, clearField, id) => { - const { col, record } = this.props - - if (col.tableId === tableId && clearField === col.field && record.$$uuid === id) { - this.setState({resting: true}, () => { - this.setState({resting: false}) - }) - } - } - - onChange = (val) => { - const { col, record } = this.props - - if (col.noValue === 'hide' && val === null) { - this.setState({value: 0}) - } else { - this.setState({value: val}) - } - - if (col.clearField && record[col.clearField]) { - MKEmitter.emit('changeRecord', col.tableId, {...record, [col.clearField]: ''}, 'clear') - MKEmitter.emit('resetCol', col.tableId, col.clearField, record.$$uuid) - } - } - - onBlur = () => { - const { col, record } = this.props - const { value } = this.state - - let err = null - let val = value - - if (col.type === 'number') { - val = +val - if (isNaN(val)) { - val = 0 - } - if (typeof(col.max) === 'number' && val > col.max) { - err = col.label + '鏈�澶т负' + col.max - } else if (typeof(col.min) === 'number' && val < col.min) { - err = col.label + '鏈�灏忎负' + col.min - } - } else if (col.required === 'true' && !val) { - err = '璇峰~鍐�' + col.label - } - - this.setState({err}) - - if (value !== record[col.field]) { - MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: val}) - } - } - - onSwitchChange = (val, label) => { - const { col, record } = this.props - - setTimeout(() => { - if (/\$next/.test(col.enter)) { - MKEmitter.emit('nextLine', col, record.$$uuid) - } else if (col.enter === '$sub') { - MKEmitter.emit('subLine', col, record) - } else if (col.enter !== '$noAct') { - let node = document.getElementById(col.enter + record.$$uuid) - if (node) { - if (col.triType === 'click') { - node.click() - } else { - node.select && node.select() - } - } - } - }, 50) - - MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: val}) - } - - onSelectChange = (val, option) => { - const { col, record } = this.props - - let values = {} - let _option = col.options.filter(m => m.key === option.key)[0] - - if (_option) { - if (col.linkSubField) { - col.linkSubField.forEach(m => { - values[m] = _option[m] !== undefined ? _option[m] : '' - }) - } - - values[col.field] = val - } - - setTimeout(() => { - if (/\$next/.test(col.enter)) { - MKEmitter.emit('nextLine', col, record.$$uuid) - } else if (col.enter === '$sub') { - MKEmitter.emit('subLine', col, record) - } else if (col.enter !== '$noAct') { - let node = document.getElementById(col.enter + record.$$uuid) - if (node) { - if (col.triType === 'click') { - node.click() - } else { - node.select && node.select() - } - } - } - }, 50) - - MKEmitter.emit('changeRecord', col.tableId, {...record, ...values}) - } - - onDateChange = (val) => { - const { col, record } = this.props - - let _val = val ? moment(val).format(col.format) : '' - - if (col.precision === 'hour') { - _val = _val + ':00:00' - } else if (col.precision === 'minute') { - _val = _val + ':00' - } - - setTimeout(() => { - if (/\$next/.test(col.enter)) { - MKEmitter.emit('nextLine', col, record.$$uuid) - } else if (col.enter === '$sub') { - MKEmitter.emit('subLine', col, record) - } else if (col.enter !== '$noAct') { - let node = document.getElementById(col.enter + record.$$uuid) - node && node.click() - } - }, 50) - - MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: _val}) - } - - onPopChange = (values) => { - const { col, record } = this.props - - setTimeout(() => { - if (/\$next/.test(col.enter)) { - MKEmitter.emit('nextLine', col, record.$$uuid) - } else if (col.enter === '$sub') { - MKEmitter.emit('subLine', col, record) - } else if (col.enter !== '$noAct') { - let node = document.getElementById(col.enter + record.$$uuid) - node && node.click() - } - }, 50) - - MKEmitter.emit('changeRecord', col.tableId, {...record, ...values}) + MKEmitter.emit('changeRecord' + col.tableId, {...record, ...values}) } render() { let { col, config, record, style, className, ...resProps } = this.props - const { err, resting } = this.state if (!col) return (<td {...resProps} className={className} style={style}/>) - if (resting) return null let disabled = false let editable = false if (col.ctrlField) { - disabled = col.ctrlValue.includes(record[col.ctrlField]) + disabled = col.ctrlValue.includes(record[col.ctrlField] + '') } let children = null @@ -929,35 +1042,25 @@ let _value = record[col.field] !== undefined ? record[col.field] : '' if (!col.editType || col.editType === 'text') { - children = (<> - <Input className={err ? 'has-error' : ''} title={err} id={col.uuid + record.$$uuid} defaultValue={_value} onChange={(e) => this.onChange(e.target.value)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> - </>) + children = ( + <MkInput config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={false} onChange={this.onColChange}/> + ) } else if (col.editType === 'switch') { children = ( - <CusSwitch config={col} autoFocus={false} defaultValue={_value} onChange={this.onSwitchChange} onBlur={() => {}}/> + <MkSwitch config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={false} onChange={this.onColChange}/> ) } else if (col.editType === 'date') { children = ( - <CusDatePicker config={col} value={record[col.field] || null} onChange={this.onDateChange} blur={() => {}}/> + <MkDatePicker config={col} lineId={record.$$uuid} defaultValue={_value || null} autoFocus={false} onChange={this.onColChange}/> ) } else if (col.editType === 'popSelect') { children = ( - <MKPopSelect config={col} defaultValue={record[col.field] || ''} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange}/> + <MKPopSelect config={col} lineId={record.$$uuid} defaultValue={_value} BID={record.$$BID} autoFocus={false} onChange={this.onColChange}/> ) } else { - children = (<> - <Select - showSearch - dropdownClassName="edit-table-dropdown" - dropdownMatchSelectWidth={col.dropdown === 'fixed'} - defaultValue={_value} - id={col.uuid + record.$$uuid} - filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} - onSelect={this.onSelectChange} - > - {col.options.map((item, i) => (<Select.Option key={item.key} disabled={item.$disabled} value={item.value}>{item.label}</Select.Option>))} - </Select> - </>) + children = ( + <MkSelect config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={false} onChange={this.onColChange} /> + ) } } else { let content = '' @@ -967,6 +1070,12 @@ if (col.editType === 'select' && col.options.length > 0) { content = col.map.get(content) || content + } else if (col.editType === 'switch') { + if (content === config.openVal) { + content = config.openText + } else if (content === config.closeVal) { + content = config.closeText + } } if (content !== '') { @@ -1022,9 +1131,9 @@ _value = '' } - children = (<> - <InputNumber className={err ? 'has-error' : ''} title={err} precision={col.decimal || 0} id={col.uuid + record.$$uuid} defaultValue={_value} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> - </>) + children = ( + <MkInputNumber config={col} lineId={record.$$uuid} defaultValue={_value} autoFocus={false} onChange={this.onColChange}/> + ) } else { let content = '' try { @@ -1221,7 +1330,6 @@ pageSize: 10, // 姣忛〉鏁版嵁鏉℃暟 columns: null, // 鏄剧ず鍒� forms: [], - signForms: [], orderfields: {}, // 鎺掑簭id涓巉ield杞崲 loading: false, pageOptions: [], @@ -1229,8 +1337,14 @@ visible: false, midData: null, allColumns: null, + checkForms: [], + allForms: [], reseting: false } + + timer = null + focusId = '' + blurId = '' UNSAFE_componentWillMount () { const { setting, fields, columns, BID, colsCtrls } = this.props @@ -1240,26 +1354,37 @@ let deForms = [] let _forms = {} let hasBid = false - let signForms = [] + let index = 0 + let checkForms = [] + let allForms = [] - let getColumns = (cols) => { + let getColumns = (cols, sk) => { return cols.map(item => { let cell = null if (item.type === 'colspan') { cell = { title: item.label, align: item.Align, $key: item.uuid } - cell.children = getColumns(item.subcols) + cell.children = getColumns(item.subcols, sk || item.uuid) } else { if (item.editable === 'true') { + item.$sort = index + index++ _forms[item.field] = item - signForms.push(item.field) + allForms.push({uuid: sk || item.uuid, field: item.field}) + checkForms.push(item.field) if (item.ctrlField) { item.ctrlValue = item.ctrlValue.split(',') } - if (item.type === 'text' && item.editType === 'select') { + if (item.type === 'number' && item.clearField) { + fields.forEach(cell => { + if (cell.field === item.clearField) { + item.clearName = cell.label + } + }) + } else if (item.type === 'text' && item.editType === 'select') { item.map = new Map() if (item.resourceType === '1') { let _option = Utils.getSelectQueryOptions(item) @@ -1302,7 +1427,6 @@ title: item.editable === 'true' ? <span>{item.label}<EditOutlined className="system-color mk-edit-sign"/></span> : item.label, sorter: (item.field || item.sortField) && item.IsSort === 'true', width: item.Width || 120, - // $type: item.type, $key: item.uuid, onCell: record => ({ record, @@ -1329,11 +1453,14 @@ } else { _item.datatype = item.datatype } + forms.push(_item) } else { - forms.push(item) + forms.push({...item, $sort: 999}) } }) + + forms.sort((a, b) => a.$sort - b.$sort) let size = (setting.pageSize || 10) + '' let pageOptions = ['10', '25', '50', '100', '500', '1000'] @@ -1346,13 +1473,19 @@ let allColumns = null if (colsCtrls) { allColumns = [..._columns] - _columns = this.getCurColumns(_columns, this.props.allSearch) + checkForms = [] + _columns = this.getCurColumns(_columns, this.props.allSearch, allForms, checkForms) + } else { + allForms = null } + + checkForms = Array.from(new Set(checkForms)) this.setState({ forms, - signForms, + allForms, allColumns, + checkForms, pageSize: setting.pageSize || 10, pageOptions, columns: _columns, @@ -1366,12 +1499,6 @@ this.improveActionForm(deForms, BID) } } - - const element = document.getElementById(setting.tableId) - element && element.style.setProperty('--mk-table-border-color', setting.borderColor || '#e8e8e8') - element && element.style.setProperty('--mk-table-color', setting.color || 'rgba(0, 0, 0, 0.65)') - element && element.style.setProperty('--mk-table-font-size', setting.fontSize || '14px') - element && element.style.setProperty('--mk-table-font-weight', setting.fontWeight || 'normal') }) } @@ -1389,32 +1516,147 @@ } componentDidMount () { - MKEmitter.addListener('subLine', this.subLine) - MKEmitter.addListener('nextLine', this.nextLine) - MKEmitter.addListener('addRecord', this.addRecord) - MKEmitter.addListener('delRecord', this.delRecord) + const { setting } = this.props + const { tableId } = this.state + + if (setting.commit === 'change') { + MKEmitter.addListener('colBlur' + tableId, this.colBlur) + MKEmitter.addListener('colFocus' + tableId, this.colFocus) + } + MKEmitter.addListener('resetTable', this.resetTable) - MKEmitter.addListener('transferData', this.transferData) - MKEmitter.addListener('changeRecord', this.changeRecord) + MKEmitter.addListener('nextLine' + tableId, this.nextLine) + MKEmitter.addListener('addRecord' + tableId, this.plusLine) + MKEmitter.addListener('delRecord' + tableId, this.delRecord) + MKEmitter.addListener('transferData' + tableId, this.transferData) + MKEmitter.addListener('changeRecord' + tableId, this.changeRecord) } /** * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 */ componentWillUnmount () { + const { tableId } = this.state + this.setState = () => { return } - MKEmitter.removeListener('subLine', this.subLine) - MKEmitter.removeListener('nextLine', this.nextLine) - MKEmitter.removeListener('addRecord', this.addRecord) - MKEmitter.removeListener('delRecord', this.delRecord) + MKEmitter.removeListener('resetTable', this.resetTable) - MKEmitter.removeListener('transferData', this.transferData) - MKEmitter.removeListener('changeRecord', this.changeRecord) + MKEmitter.removeListener('colBlur' + tableId, this.colBlur) + MKEmitter.removeListener('colFocus' + tableId, this.colFocus) + MKEmitter.removeListener('nextLine' + tableId, this.nextLine) + MKEmitter.removeListener('addRecord' + tableId, this.plusLine) + MKEmitter.removeListener('delRecord' + tableId, this.delRecord) + MKEmitter.removeListener('transferData' + tableId, this.transferData) + MKEmitter.removeListener('changeRecord' + tableId, this.changeRecord) } - getCurColumns = (columns, allSearch) => { + colBlur = (lineId) => { + this.blurId = lineId + this.focusId = '' + + this.timer && clearTimeout(this.timer) + + this.timer = setTimeout(() => { + if (!this.focusId || this.focusId !== this.blurId) { + this.checkLine() + } + }, 150) + } + + colFocus = (lineId) => { + this.focusId = lineId + } + + checkLine = () => { + const { edData, forms, checkForms } = this.state + + let data = edData.filter(item => item.$$uuid === this.blurId)[0] + + if (!data) return + + let record = fromJS(data).toJS() + + let value = '' + Object.keys(record).sort().forEach(key => { + if (/^\$/.test(key)) return + value += record[key] + }) + + if (record.$sign === md5(value)) return + + let err = '' + forms.forEach(col => { + let check = true + if (col.editable !== 'true' || !checkForms.includes(col.field)) { + check = false + } + if (col.ctrlField && col.ctrlValue.includes(record[col.ctrlField] + '')) { + check = false + } + + if (!check) { + if (col.type === 'number') { + record[col.field] = +record[col.field] + if (isNaN(record[col.field])) { + record[col.field] = 0 + } + } else { + record[col.field] = record[col.field] !== undefined ? (record[col.field] + '') : '' + } + return + } + + if (err) return + + if (col.type === 'text') { + let val = record[col.field] !== undefined ? (record[col.field] + '') : '' + if (col.required === 'true' && !val) { + err = `${col.label}涓嶅彲涓虹┖` + } else if (col.datatype === 'datetime' && !val) { + val = '1949-10-01' + } + record[col.field] = val + } else if (col.type === 'number') { + let val = record[col.field] + + if (col.noValue === 'hide' && !val) { + if (col.clearField && checkForms.includes(col.clearField) && !record[col.clearField]) { + err = `璇峰~鍐� ${col.label} 鎴� ${col.clearName}` + } + val = 0 + } else if (!val && val !== 0) { + err = `${col.label}涓嶅彲涓虹┖` + } else { + val = +val + if (isNaN(val)) { + err = `${col.label}鏁版嵁鏍煎紡閿欒` + return + } + + val = +val.toFixed(col.decimal || 0) + + if (typeof(col.max) === 'number' && val > col.max) { + err = `${col.label}涓嶅彲澶т簬${col.max}` + } else if (typeof(col.min) === 'number' && val < col.min) { + err = `${col.label}涓嶅彲灏忎簬${col.min}` + } + } + + record[col.field] = val + } + }) + + if (err) { + message.warning(err) + return + } + + this.submit(record) + } + + getCurColumns = (columns, allSearch, allForms, checkForms) => { const { colsCtrls } = this.props let values = {} @@ -1449,34 +1691,41 @@ }) if (cols) { + allForms.forEach(item => { + if (cols.includes(item.uuid)) { + checkForms.push(item.field) + } + }) + return columns.filter(col => cols.includes(col.$key)) } + + allForms.forEach(item => { + checkForms.push(item.field) + }) return columns } - transferData = (menuid, data, type) => { - const { MenuID, setting } = this.props - const { edData, signForms } = this.state + transferData = (data, type) => { + const { edData } = this.state - if (menuid !== MenuID) return - - if (setting.commit !== 'all' && setting.commit !== 'blur' && setting.standard !== 'change') { - if (type !== 'line') { - data.forEach(item => { - let value = '' - signForms.forEach(field => { - value += item[field] - }) - item.$sign = md5(value) - }) - } else { + if (type === 'line') { + let value = '' + Object.keys(data).sort().forEach(key => { + if (/^\$/.test(key)) return + value += data[key] + }) + data.$sign = md5(value) + } else { + data.forEach(item => { let value = '' - signForms.forEach(field => { - value += data[field] + Object.keys(item).sort().forEach(key => { + if (/^\$/.test(key)) return + value += item[key] }) - data.$sign = md5(value) - } + item.$sign = md5(value) + }) } if (type !== 'line') { @@ -1496,17 +1745,25 @@ } }) - this.setState({edData: _edData}) + this.setState({edData: _edData, reseting: true}, () => { + this.setState({reseting: false}) + }) } } updateMutil = (data) => { const { setting, colsCtrls, allSearch } = this.props - const { allColumns } = this.state + const { allColumns, allForms } = this.state if (colsCtrls) { + let checkForms = [] + let columns = this.getCurColumns(allColumns, allSearch, allForms, checkForms) + + checkForms = Array.from(new Set(checkForms)) + this.setState({ - columns: this.getCurColumns(allColumns, allSearch), + checkForms, + columns: columns, reseting: true, edData: data, visible: false, @@ -1521,8 +1778,8 @@ } if (setting.editType === 'multi' && data.length > 0) { - this.setState({edData: []}, () => { - this.setState({edData: data, visible: false, midData: null}) + this.setState({edData: data, visible: false, midData: null, reseting: true}, () => { + this.setState({reseting: false}) }) } else { this.setState({edData: data, visible: false, midData: null}) @@ -1530,7 +1787,7 @@ if (setting.addable && data.length === 0) { setTimeout(() => { - this.plusLine(true) + this.plusLine() }, 10) } } @@ -1731,205 +1988,48 @@ }) } - nextLine = (col, uuid) => { + nextLine = (lineId, colId) => { const { setting } = this.props const { edData, tableId } = this.state - if (col.tableId !== tableId) return - - let index = edData.findIndex(item => item.$$uuid === uuid) + let index = edData.findIndex(item => item.$$uuid === lineId) let next = edData[index + 1] || null if (next) { - let nextId = setting.initId + next.$$uuid - if (/^\$next_/.test(col.enter)) { - nextId = col.enter.split('_')[1] + next.$$uuid - } - - let node = document.getElementById(nextId) - if (node) { - if (setting.editType === 'multi') { - if (setting.triType === 'click') { - node.click() - } else { - node.select && node.select() - } - } else { - node.click() - } - } + MKEmitter.emit('setFocus' + tableId, next.$$uuid, colId) } else if (setting.addable) { setTimeout(() => { - this.plusLine() + this.plusLine(colId) }, 10) - } else if (edData[index]) { + } else if (edData[index] && setting.commit !== 'change') { setTimeout(() => { - this.subLine(col, edData[index]) + this.submit() }, 10) } } - subLine = (col, record) => { - const { tableId, edData } = this.state - - if (col && col.tableId !== tableId) return - - let _data = edData.map(item => { - if (item.$$uuid === record.$$uuid) { - item.$origin = false - } - return item - }) - - this.setState({edData: _data}, () => { - this.submit() - }) - } - - plusLine = (auto) => { - const { setting } = this.props - const { edData, forms } = this.state - - let item = edData.length > 0 ? {...edData[edData.length - 1]} : {} - - item.$$uuid = Utils.getguid() - item.$type = 'add' - item.$forbid = true - item.$Index = '' - - forms.forEach(col => { - if (col.initval !== '$copy') { - item[col.field] = col.initval - } - if (col.type === 'number') { - item[col.field] = +item[col.field] - if (isNaN(item[col.field])) { - item[col.field] = 0 - } - } - if (item[col.field] === undefined) { - item[col.field] = '' - } - }) - - this.setState({edData: [...edData, item]}, () => { - let node = document.getElementById(setting.initId + item.$$uuid) - if (node && !auto) { - if (setting.editType === 'multi') { - if (setting.triType === 'click') { - node.click() - } else { - node.select && node.select() - } - } else { - node.click() - } - } - }) - } - - delRecord = (id, record) => { - const { setting } = this.props - const { tableId, edData } = this.state - - if (id !== tableId) return - - if (record.$type === 'add') { - let _data = edData.filter(item => item.$$uuid !== record.$$uuid) - this.setState({edData: _data}) - } else { - let _data = fromJS(edData).toJS().map(item => { - if (item.$$uuid === record.$$uuid) { - item.$deleted = true - item.$origin = false - item.$type = 'del' - } - - return item - }) - - this.setState({edData: _data}, () => { - if (setting.commit === 'simple') { - this.submit() - } else if (setting.commit === 'blur') { - this.submit(record) - } - }) - } - } - - changeRecord = (id, record, type) => { - const { setting } = this.props - const { tableId, signForms } = this.state - - if (id !== tableId) return - - if (setting.commit === 'blur') { - - } else if (!record.$sign) { - record.$origin = false - record.$lock = true - delete record.$forbid - } else { - let value = '' - signForms.forEach(field => { - value += record[field] - }) - - if (record.$sign !== md5(value)) { - record.$origin = false - record.$lock = true - } else { - record.$origin = true - record.$lock = false - } - } - - let _data = this.state.edData.map(item => { - if (item.$$uuid === record.$$uuid) { - return record - } else { - return item - } - }) - - this.setState({edData: _data}, () => { - if (setting.tableType && setting.hasAction && this.state.selectedRowKeys.includes(record.$$uuid)) { - this.selectdata(this.state.selectedRowKeys) - } - if (setting.commit === 'blur' && type !== 'clear') { - this.submit(record) - } - }) - - } - - addRecord = (id, record) => { + plusLine = (colId, lineId) => { const { BID } = this.props - const { edData, forms, tableId } = this.state + const { forms, tableId } = this.state - if (id !== tableId) return - - let _edData = fromJS(edData).toJS() - let item = {} + let edData = fromJS(this.state.edData).toJS() + let item = edData.length > 0 ? {...edData[edData.length - 1]} : {} let index = null - let copy = edData.length > 0 ? {...edData[edData.length - 1]} : null - - if (record) { - index = _edData.findIndex(item => record.$$uuid === item.$$uuid) + + if (lineId) { + index = edData.findIndex(item => lineId === item.$$uuid) index = index === -1 ? null : index - - copy = {...record} + + if (index !== null) { + item = {...edData[index]} + } } - if (copy) { - item = {...copy} - } - + item.key = edData.length item.$$uuid = Utils.getguid() item.$type = 'add' - item.$Index = '' item.$forbid = true + item.$Index = '' item.$$BID = BID || '' forms.forEach(col => { @@ -1942,38 +2042,113 @@ item[col.field] = 0 } } - if (item[col.field] === undefined) { item[col.field] = '' } }) + let value = '' + Object.keys(item).sort().forEach(key => { + if (/^\$/.test(key)) return + value += item[key] + }) + item.$sign = md5(value) + if (index === null) { - _edData.push(item) + edData.push(item) } else { - _edData.splice(index, 0, item) + edData.splice(index, 0, item) } - this.setState({edData: _edData}) + this.setState({edData: edData}, () => { + if (colId) { + MKEmitter.emit('setFocus' + tableId, item.$$uuid, colId) + } + }) + } + + delRecord = (record) => { + const { setting } = this.props + const { edData } = this.state + + if (record.$type === 'add') { + let _data = edData.filter(item => item.$$uuid !== record.$$uuid) + this.setState({edData: _data}) + } else { + let _data = fromJS(edData).toJS().map(item => { + if (item.$$uuid === record.$$uuid) { + item.$deleted = true + item.$origin = false + item.$type = 'del' + + record.$deleted = true + record.$origin = false + record.$type = 'del' + } + + return item + }) + + this.setState({edData: _data}, () => { + if (setting.commit === 'change') { + this.submit(record) + } + }) + } + } + + changeRecord = (record) => { + const { setting } = this.props + const { edData } = this.state + + let data = edData.filter(item => item.$$uuid === record.$$uuid)[0] + + if (!data) return + + if (is(fromJS(data), fromJS(record))) return + + delete record.$forbid + + let value = '' + Object.keys(record).sort().forEach(key => { + if (/^\$/.test(key)) return + value += record[key] + }) + + let sign = md5(value) + + if (record.$sign === sign) { + record.$origin = true + record.$lock = false + } else { + record.$origin = false + record.$lock = true + } + + let _data = edData.map(item => { + if (item.$$uuid === record.$$uuid) { + return record + } else { + return item + } + }) + + this.setState({edData: _data}, () => { + if (setting.tableType && setting.hasAction && this.state.selectedRowKeys.includes(record.$$uuid)) { + this.selectdata(this.state.selectedRowKeys) + } + }) } checkData = () => { const { setting } = this.props - const { edData, forms } = this.state - - if (edData.length === 0) { - notification.warning({ - top: 92, - message: '鎻愪氦鏁版嵁涓嶅彲涓虹┖锛�', - duration: 5 - }) - return null - } + const { edData, forms, checkForms } = this.state let data = fromJS(edData).toJS() data = data.filter(item => !item.$forbid) - if (setting.commit === 'change' || setting.commit === 'simple') { + + if (setting.commit === 'amend') { data = data.filter(item => !item.$origin) } @@ -1991,7 +2166,15 @@ data = data.map(item => { let line = [] forms.forEach(col => { - if (col.editable !== 'true' || item.$deleted) { + let check = true + if (col.editable !== 'true' || item.$deleted || !checkForms.includes(col.field)) { + check = false + } + if (col.ctrlField && col.ctrlValue.includes(item[col.ctrlField] + '')) { + check = false + } + + if (!check) { if (col.type === 'number') { item[col.field] = +item[col.field] if (isNaN(item[col.field])) { @@ -2002,6 +2185,7 @@ } return } + if (col.type === 'text') { let val = item[col.field] !== undefined ? (item[col.field] + '') : '' if (col.required === 'true' && !val) { @@ -2013,23 +2197,30 @@ } else if (col.type === 'number') { let val = item[col.field] if (col.noValue === 'hide' && !val) { + if (col.clearField && checkForms.includes(col.clearField) && !item[col.clearField]) { + let msg = `璇峰~鍐� ${col.label} 鎴� ${col.clearName}` + if (!line.includes(msg)) { + line.push(msg) + } + } val = 0 } else if (!val && val !== 0) { line.push(`${col.label}涓嶅彲涓虹┖`) return - } - val = +val - if (isNaN(val)) { - line.push(`${col.label}鏁版嵁鏍煎紡閿欒`) - return - } - - val = +val.toFixed(col.decimal || 0) - - if (typeof(col.max) === 'number' && val > col.max) { - line.push(`${col.label}涓嶅彲澶т簬${col.max}`) - } else if (typeof(col.min) === 'number' && val < col.min) { - line.push(`${col.label}涓嶅彲灏忎簬${col.min}`) + } else { + val = +val + if (isNaN(val)) { + line.push(`${col.label}鏁版嵁鏍煎紡閿欒`) + return + } + + val = +val.toFixed(col.decimal || 0) + + if (typeof(col.max) === 'number' && val > col.max) { + line.push(`${col.label}涓嶅彲澶т簬${col.max}`) + } else if (typeof(col.min) === 'number' && val < col.min) { + line.push(`${col.label}涓嶅彲灏忎簬${col.min}`) + } } item[col.field] = val @@ -2059,66 +2250,6 @@ return data } - checkLineData = (item) => { - const { forms } = this.state - - let record = fromJS(item).toJS() - let err = '' - forms.forEach(col => { - if (col.editable !== 'true' || record.$deleted) { - if (col.type === 'number') { - record[col.field] = +record[col.field] - if (isNaN(record[col.field])) { - record[col.field] = 0 - } - } else { - record[col.field] = record[col.field] !== undefined ? (record[col.field] + '') : '' - } - return - } - if (col.type === 'text') { - let val = record[col.field] !== undefined ? (record[col.field] + '') : '' - if (col.required === 'true' && !val) { - err = `${col.label}涓嶅彲涓虹┖` - } else if (col.datatype === 'datetime' && !val) { - val = '1949-10-01' - } - record[col.field] = val - } else if (col.type === 'number') { - let val = record[col.field] - if (col.noValue === 'hide' && !val) { - val = 0 - } else if (!val && val !== 0) { - err = `${col.label}涓嶅彲涓虹┖` - return - } - val = +val - if (isNaN(val)) { - err = `${col.label}鏁版嵁鏍煎紡閿欒` - return - } - - val = +val.toFixed(col.decimal || 0) - - if (typeof(col.max) === 'number' && val > col.max) { - err = `${col.label}涓嶅彲澶т簬${col.max}` - } else if (typeof(col.min) === 'number' && val < col.min) { - err = `${col.label}涓嶅彲灏忎簬${col.min}` - } - - record[col.field] = val - } - }) - - if (err) { - message.warning(err) - - return null - } - - return [record] - } - submit = (record) => { const { submit, BID, setting } = this.props const { forms } = this.state @@ -2135,11 +2266,9 @@ return } - if (setting.commit === 'blur' && !record) return - let data = null - if (setting.commit === 'blur') { - data = this.checkLineData(record) + if (record) { + data = [record] } else { data = this.checkData() } @@ -2226,11 +2355,24 @@ let _edData = fromJS(edData).toJS() - _edData = _edData.map(item => { + _edData = _edData.filter(item => { + if (item.$deleted) return false + if (!item.$forbid) { + item.$type = 'upt' item.$origin = true + item.$lock = false } - return item + + let value = '' + Object.keys(item).sort().forEach(key => { + if (/^\$/.test(key)) return + value += item[key] + }) + + item.$sign = md5(value) + + return true }) this.setState({ @@ -2384,7 +2526,7 @@ render() { const { setting, lineMarks, submit } = this.props - const { tableId, edData, columns, loading, pageOptions, selectedRowKeys, visible, midData, reseting } = this.state + const { edData, columns, loading, pageOptions, selectedRowKeys, visible, midData, reseting } = this.state if (reseting) return null @@ -2424,12 +2566,19 @@ height = height + 'vh' } + let style = { + '--mk-table-border-color': setting.borderColor || '#e8e8e8', + '--mk-table-color': setting.color || 'rgba(0, 0, 0, 0.65)', + '--mk-table-font-size': setting.fontSize || '14px', + '--mk-table-font-weight': setting.fontWeight || 'normal' + } + return ( <> - {setting.hasSubmit ? <div className="edit-custom-table-btn-wrap" style={submit.wrapStyle}> + {setting.hasSubmit && edData.length > 0 ? <div className="edit-custom-table-btn-wrap" style={submit.wrapStyle}> <Button style={submit.style} onClick={() => setTimeout(() => {this.submit()}, 10)} loading={loading} className="submit-table" type="link">鎻愪氦</Button> </div> : null} - <div className={`edit-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || ''} mk-edit-${setting.editType || 'simple'}`} id={tableId}> + <div className={`edit-custom-table ${setting.tableHeader || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || ''} mk-edit-${setting.editType || 'simple'}`} style={style}> <Table rowKey="$$uuid" components={components} diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx b/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx index f2444ec..e99578c 100644 --- a/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx +++ b/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx @@ -6,6 +6,7 @@ import Api from '@/api' import Utils from '@/utils/utils.js' +import MKEmitter from '@/utils/events.js' import './index.scss' const { Search } = Input @@ -162,19 +163,9 @@ } changeRow = (record) => { - const { config } = this.props - if (record.$disabled) return - let values = {[config.field]: record.$$uuid} - - if (config.linkSubField) { - config.linkSubField.forEach(m => { - values[m] = record[m] === undefined ? '' : record[m] - }) - } - - this.props.onChange(values, record.$$uuid) + this.props.onChange(record) } changeTable = (pagination, filters, sorter) => { @@ -247,6 +238,16 @@ } } + componentDidMount() { + const { autoFocus, config } = this.props + + MKEmitter.addListener('setFocus' + config.tableId, this.setFocus) + + if (autoFocus) { + this.trigger() + } + } + shouldComponentUpdate (nextProps, nextState) { return !is(fromJS(this.state), fromJS(nextState)) } @@ -255,55 +256,105 @@ this.setState = () => { return } + MKEmitter.removeListener('setFocus' + this.props.config.tableId, this.setFocus) } - selectChange = (values, val) => { - this.props.onChange(values) - this.setState({value: val, visible: false}) + setFocus = (lId, colId) => { + const { config, lineId } = this.props + + if (lId !== lineId || config.uuid !== colId) return + + if (config.$ctrl) { + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } + + this.setState({visible: true}) + } + + selectChange = (record) => { + const { config, lineId } = this.props + + let values = {[config.field]: record.$$uuid} + + if (config.linkSubField) { + config.linkSubField.forEach((m, i) => { + values[m] = record[m] !== undefined ? record[m] : '' + }) + } + + this.props.onChange(values, record.$$uuid) + + this.setState({visible: false}) + + if (config.$ctrl) { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid) + } + + this.props.onBlur && this.props.onBlur() + + if (config.enter === '$noAct') return + + if (/\$next/.test(config.enter)) { + MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', '')) + } else { + MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter) + } } trigger = (e) => { + const { config, lineId } = this.props + e && e.stopPropagation() + + if (config.$ctrl) { + MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid) + } this.setState({visible: true}) } clear = (e) => { - const { config } = this.props + const { config, lineId } = this.props e.stopPropagation() let values = {[config.field]: ''} if (config.linkSubField) { - config.linkSubField.forEach(m => { + config.linkSubField.forEach((m, i) => { values[m] = '' }) } - this.props.onChange(values) + this.props.onChange(values, '') this.setState({value: ''}) - } - cancel = () => { - const { mask } = this.props - - this.setState({visible: false}) - - if (mask) { - this.props.blur() + if (config.$ctrl) { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid) } } + cancel = () => { + const { config, lineId } = this.props + + this.setState({visible: false}) + + if (config.$ctrl) { + MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid) + } + + this.props.onBlur && this.props.onBlur() + } + render() { - const { mask, BID, ID, config } = this.props + const { autoFocus, BID, lineId, config } = this.props const { value, visible } = this.state return <> - {mask ? <div className="mk-pop-select-mask" onClick={this.trigger}></div> : null} + {autoFocus ? <div className="mk-pop-select-mask" onClick={this.trigger}></div> : null} <div className="mk-pop-select-wrap" onClick={this.trigger}> {value} - {value && !mask ? <CloseCircleFilled onClick={this.clear} /> : null} + {value && !autoFocus ? <CloseCircleFilled onClick={this.clear} /> : null} <TableOutlined onClick={this.trigger}/> </div> <Modal @@ -321,11 +372,11 @@ {config.pops ? <Tabs> {config.pops.map(tab => ( <TabPane tab={tab.tabName} key={tab.uuid}> - <PopTable config={tab} BID={BID} ID={ID} value={value} onChange={this.selectChange}/> + <PopTable config={tab} BID={BID} ID={lineId} value={value} onChange={this.selectChange}/> </TabPane> ))} </Tabs> : - <PopTable config={config} BID={BID} ID={ID} value={value} onChange={this.selectChange}/>} + <PopTable config={config} BID={BID} ID={lineId} value={value} onChange={this.selectChange}/>} </Modal> </> } diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.scss b/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.scss index 9f7e8d9..3784895 100644 --- a/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.scss +++ b/src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.scss @@ -23,6 +23,7 @@ white-space: nowrap; text-overflow: ellipsis; line-height: 30px; + vertical-align: top; .anticon-table { padding: 7px; diff --git a/src/tabviews/custom/popview/index.jsx b/src/tabviews/custom/popview/index.jsx index 9750fc1..b2a01d8 100644 --- a/src/tabviews/custom/popview/index.jsx +++ b/src/tabviews/custom/popview/index.jsx @@ -190,7 +190,7 @@ delete item.style.shadowColor } - item.$menuname = (Tab.label || '') + '-' + (item.name || '') + item.$menuname = (Tab.logLabel || Tab.label || '') + '-' + (item.name || '') if (item.type === 'tabs') { if ( diff --git a/src/tabviews/zshare/actionList/editLine/index.jsx b/src/tabviews/zshare/actionList/editLine/index.jsx index 7d29501..142d977 100644 --- a/src/tabviews/zshare/actionList/editLine/index.jsx +++ b/src/tabviews/zshare/actionList/editLine/index.jsx @@ -96,9 +96,9 @@ let data = selectedData || [] if (btn.funcType === 'addline') { - MKEmitter.emit('addRecord', btn.$tableId, data[0] || null) + MKEmitter.emit('addRecord' + btn.$tableId, '', data[0] ? data[0].$$uuid : null) } else { - MKEmitter.emit('delRecord', btn.$tableId, data[0] || null) + MKEmitter.emit('delRecord' + btn.$tableId, data[0] || null) } } diff --git a/src/tabviews/zshare/actionList/excelInbutton/excelin/index.jsx b/src/tabviews/zshare/actionList/excelInbutton/excelin/index.jsx index ee873ec..ee748ae 100644 --- a/src/tabviews/zshare/actionList/excelInbutton/excelin/index.jsx +++ b/src/tabviews/zshare/actionList/excelInbutton/excelin/index.jsx @@ -60,14 +60,16 @@ } else { let iserror = false btnColumns.forEach(op => { + if (iserror) return + let _name = typeof(header[op.Column]) === 'string' ? header[op.Column].replace(/(^\s*|\s*$)/g, '') : header[op.Column] let _text = op.Text ? op.Text.replace(/(^\s*|\s*$)/g, '') : op.Text - if (!_name && !iserror) { + if (!_name) { iserror = true errors = 'headerError' errDetail = `Excel涓笉瀛樺湪锛�${_text}锛夊垪锛乣 - } else if (_name !== _text && !iserror) { + } else if (_name !== _text) { iserror = true errors = 'headerError' errDetail = `Excel涓紙${_name}锛変笌鎸夐挳鍒椾俊鎭紙${_text}锛変笉涓�鑷达紒` diff --git a/src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx b/src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx index 7b474da..c4708cd 100644 --- a/src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx +++ b/src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx @@ -530,7 +530,6 @@ changeColumns = (columns) => { const { verify } = this.state - let reset = false columns = columns.map(col => { col.type = col.type || 'Nvarchar(50)' if (col.type === 'text' || col.type === 'image') { @@ -539,19 +538,18 @@ col.type = 'Decimal(18,2)' } + if (col.import === 'init') { + col.required = 'false' + col.min = '' + col.max = '' + } + 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] - if (col.required === 'false') { - reset = true - } - col.required = 'true' } else if (/^int/ig.test(col.type)) { - if (col.required === 'false') { - reset = true - } - col.required = 'true' + } else { col.limit = '' } @@ -561,10 +559,6 @@ return col }) - - if (reset) { - message.warning('鏁板�肩被鍨嬪潎涓哄繀濉��') - } this.setState({verify: {...verify, columns}}, () => { this.resetUniqueColumns() diff --git a/src/utils/utils.js b/src/utils/utils.js index 2861db2..3c4adea 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -979,7 +979,11 @@ }) } } else if (/^Decimal/ig.test(col.type) || /^int/ig.test(col.type)) { - if (!val && val !== 0) { + if (col.required === 'false') { + if (!val || isNaN(val)) { + val = 0 + } + } else if (!val && val !== 0) { errors.push(_position + '鍐呭涓嶅彲涓虹┖') } else if (isNaN(val)) { // 妫�楠屾槸鍚︿负鏁板�� errors.push(_position + '鍐呭搴斾负鏁板��') @@ -2399,7 +2403,7 @@ * @description 鑾峰彇鏍囪淇℃伅 */ export function getMark (marks, record, style) { - let res = {} + let res = {signType: ''} marks.some(mark => { let originVal = record[mark.field[0]] -- Gitblit v1.8.0