| | |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import CusSwitch from './cusSwitch' |
| | | import Encrypts from '@/components/encrypts' |
| | | import '@/assets/css/table.scss' |
| | | import './index.scss' |
| | | |
| | | const { Paragraph } = Typography |
| | |
| | | const { col, record } = this.props |
| | | |
| | | if (id !== col.uuid + record.$$uuid) return |
| | | |
| | | if (col.ctrlField && col.ctrlValue.includes(record[col.ctrlField])) return |
| | | |
| | | this.focus() |
| | | } |
| | | |
| | |
| | | |
| | | if (!col) return (<td {...resProps} className={className} style={style}/>) |
| | | |
| | | let disabled = false |
| | | if (col.ctrlField) { |
| | | disabled = col.ctrlValue.includes(record[col.ctrlField]) |
| | | } |
| | | |
| | | let children = null |
| | | if (col.type === 'text') { |
| | | let content = '' |
| | |
| | | } |
| | | } |
| | | |
| | | if (col.editable === 'true') { |
| | | if (col.editable === 'true' && !disabled) { |
| | | if (editing) { |
| | | if (!col.editType || col.editType === 'text') { |
| | | return (<td className="editing_table_cell"> |
| | |
| | | } |
| | | } |
| | | |
| | | if (col.editable === 'true') { |
| | | if (col.editable === 'true' && !disabled) { |
| | | if (editing) { |
| | | return (<td className="editing_table_cell"> |
| | | <InputNumber id={col.uuid + record.$$uuid} defaultValue={value} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> |
| | |
| | | <CardCellComponent data={record} cards={config} elements={col.elements}/> |
| | | ) |
| | | } else if (col.type === 'action') { |
| | | style.padding = '0px 5px' |
| | | style.padding = '0px' |
| | | if (col.style) { |
| | | style = {...style, ...col.style} |
| | | } |
| | | children = ( |
| | | <CardCellComponent data={record} cards={config} elements={col.elements}/> |
| | | ) |
| | |
| | | let { col, config, record, style, className } = this.props |
| | | const { err } = this.state |
| | | |
| | | let disabled = false |
| | | if (col.ctrlField) { |
| | | disabled = col.ctrlValue.includes(record[col.ctrlField]) |
| | | } |
| | | |
| | | let children = null |
| | | if (col.type === 'text') { |
| | | if (col.editable === 'true') { |
| | | if (col.editable === 'true' && !disabled) { |
| | | let _value = '' |
| | | if (col.editField) { |
| | | _value = record[col.editField] !== undefined ? record[col.editField] : '' |
| | |
| | | children = content |
| | | } |
| | | } else if (col.type === 'number') { |
| | | if (col.editable === 'true') { |
| | | if (col.editable === 'true' && !disabled) { |
| | | let _value = record[col.field] !== undefined ? record[col.field] : '' |
| | | children = (<> |
| | | <InputNumber id={col.uuid + record.$$uuid} defaultValue={_value} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress}/> |
| | |
| | | pageIndex: 1, // 初始页面索引 |
| | | pageSize: 10, // 每页数据条数 |
| | | columns: null, // 显示列 |
| | | fields: [], |
| | | forms: [], |
| | | pickup: false, // 收起未选择项 |
| | | orderfields: {}, // 排序id与field转换 |
| | | loading: false, |
| | |
| | | |
| | | let _columns = [] |
| | | let deForms = [] |
| | | columns.forEach(item => { |
| | | if (!initEditLine && item.editable === 'true') { |
| | | initEditLine = item |
| | | } |
| | | let _forms = {} |
| | | |
| | | if (item.type === 'text' && item.editable === 'true' && item.editType === 'select' && item.resourceType === '1') { |
| | | let _option = Utils.getSelectQueryOptions(item) |
| | | let getColumns = (cols) => { |
| | | return cols.map(item => { |
| | | let cell = null |
| | | |
| | | if (item.type === 'colspan') { |
| | | cell = { title: item.label, align: item.Align } |
| | | cell.children = getColumns(item.subcols) |
| | | } else { |
| | | if (item.editable === 'true') { |
| | | _forms[item.field] = item |
| | | if (!initEditLine) { |
| | | initEditLine = item |
| | | } |
| | | |
| | | if (window.GLOB.debugger === true || window.debugger === true) { |
| | | console.info(_option.sql) |
| | | if (item.ctrlField) { |
| | | item.ctrlValue = item.ctrlValue.split(',') |
| | | } |
| | | } |
| | | |
| | | if (item.type === 'text' && item.editable === 'true' && item.editType === 'select' && item.resourceType === '1') { |
| | | let _option = Utils.getSelectQueryOptions(item) |
| | | |
| | | if (window.GLOB.debugger === true || window.debugger === true) { |
| | | console.info(_option.sql) |
| | | } |
| | | |
| | | item.base_sql = window.btoa(window.encodeURIComponent(_option.sql)) |
| | | item.arr_field = _option.field |
| | | |
| | | deForms.push(item) |
| | | } |
| | | |
| | | if (item.field) { |
| | | orderfields[item.uuid] = item.field |
| | | } |
| | | |
| | | cell = { |
| | | align: item.Align, |
| | | dataIndex: item.uuid, |
| | | title: item.label, |
| | | sorter: !!(item.field && item.IsSort === 'true'), |
| | | width: item.Width || 120, |
| | | $type: item.type, |
| | | onCell: record => ({ |
| | | record, |
| | | col: item, |
| | | config: item.type === 'custom' || item.type === 'action' ? {setting, columns: fields} : null, |
| | | }) |
| | | } |
| | | } |
| | | |
| | | return cell |
| | | }) |
| | | } |
| | | _columns = getColumns(columns) |
| | | |
| | | item.base_sql = window.btoa(window.encodeURIComponent(_option.sql)) |
| | | item.arr_field = _option.field |
| | | let forms = [] |
| | | fields.forEach(item => { |
| | | if (item.field === setting.primaryKey) return |
| | | |
| | | deForms.push(item) |
| | | if (_forms[item.field]) { |
| | | forms.push({..._forms[item.field], datatype: item.datatype}) |
| | | } else { |
| | | forms.push(item) |
| | | } |
| | | }) |
| | | |
| | | if (item.field) { |
| | | orderfields[item.uuid] = item.field |
| | | _columns.forEach(item => { |
| | | if (item.$type === 'action') return |
| | | |
| | | let _copy = fromJS(item).toJS() |
| | | _copy.sorter = false |
| | | |
| | | if (item.editable === 'true') { |
| | | _copy.title = <span>{item.label}<EditOutlined className="system-color mk-edit-sign"/></span> |
| | | } |
| | | |
| | | let _item = { |
| | | align: item.Align, |
| | | dataIndex: item.uuid, |
| | | title: item.label, |
| | | sorter: item.field && item.IsSort === 'true', |
| | | width: item.Width || 120, |
| | | onCell: record => ({ |
| | | record, |
| | | col: item, |
| | | config: item.type === 'custom' || item.type === 'action' ? {setting, columns: fields} : null, |
| | | }) |
| | | } |
| | | |
| | | if (item.type !== 'action') { |
| | | let _copy = fromJS(_item).toJS() |
| | | _copy.sorter = false |
| | | |
| | | if (item.editable === 'true') { |
| | | _copy.title = <span>{item.label}<EditOutlined className="system-color mk-edit-sign"/></span> |
| | | } |
| | | edColumns.push(_copy) |
| | | } |
| | | _columns.push(_item) |
| | | edColumns.push(_copy) |
| | | }) |
| | | |
| | | if (setting.delable !== 'false' && setting.operType !== 'buoyMode') { |
| | |
| | | }) |
| | | } |
| | | |
| | | // if (setting.borderColor) { // 边框颜色 |
| | | // let style = `#${setting.tableId} table, #${setting.tableId} tr, #${setting.tableId} th, #${setting.tableId} td {border-color: ${setting.borderColor}}` |
| | | // let ele = document.createElement('style') |
| | | // ele.innerHTML = style |
| | | // document.getElementsByTagName('head')[0].appendChild(ele) |
| | | // } |
| | | |
| | | let size = (setting.pageSize || 10) + '' |
| | | let pageOptions = ['10', '25', '50', '100', '500', '1000'] |
| | | |
| | |
| | | } |
| | | |
| | | this.setState({ |
| | | forms, |
| | | pageSize: setting.pageSize || 10, |
| | | pageOptions, |
| | | columns: _columns, |
| | |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const { fields, setting } = this.props |
| | | |
| | | this.setState({ |
| | | fields: fields.filter(item => item.field !== setting.primaryKey), |
| | | }) |
| | | |
| | | MKEmitter.addListener('subLine', this.subLine) |
| | | MKEmitter.addListener('nextLine', this.nextLine) |
| | | MKEmitter.addListener('addRecord', this.addLine) |
| | |
| | | if (item.resourceType === '1' && result[item.uuid] && result[item.uuid].length > 0) { |
| | | let options = [] |
| | | let _map = new Map() |
| | | let all = false |
| | | result[item.uuid].forEach(cell => { |
| | | let _cell = {key: Utils.getuuid()} |
| | | |
| | | _cell.value = cell[item.valueField] |
| | | _cell.label = cell[item.valueText] |
| | | |
| | | if (!_cell.label && _cell.label !== 0) return |
| | | if (!_cell.label && _cell.label !== 0) { |
| | | if (!all) { |
| | | _cell.label = '全部' |
| | | all = true |
| | | } else { |
| | | return |
| | | } |
| | | } |
| | | |
| | | if (_map.has(_cell.value)) return |
| | | _map.set(_cell.value, 0) |
| | |
| | | } |
| | | |
| | | subLine = (col, record) => { |
| | | const { tableId, fields, edData } = this.state |
| | | const { tableId, forms, edData } = this.state |
| | | |
| | | if (col && col.tableId !== tableId) return |
| | | |
| | |
| | | setTimeout(() => { |
| | | let item = fromJS(record).toJS() |
| | | let line = [] |
| | | fields.forEach(col => { |
| | | forms.forEach(col => { |
| | | if (col.editable !== 'true' || item.$deleted) { |
| | | if (col.type === 'number') { |
| | | item[col.field] = +item[col.field] |
| | |
| | | } |
| | | |
| | | plusLine = () => { |
| | | const { edData, fields, initEditLine } = this.state |
| | | const { edData, forms, initEditLine } = this.state |
| | | |
| | | let item = {...edData[edData.length - 1]} |
| | | |
| | |
| | | item.$type = 'add' |
| | | item.$Index = '' |
| | | |
| | | fields.forEach(col => { |
| | | forms.forEach(col => { |
| | | if (col.initval !== '$copy') { |
| | | item[col.field] = col.initval |
| | | } |
| | |
| | | |
| | | addLine = (id, record) => { |
| | | const { BID } = this.props |
| | | const { edData, fields, tableId } = this.state |
| | | const { edData, forms, tableId } = this.state |
| | | |
| | | if (id) { |
| | | if (id !== tableId) return |
| | |
| | | item.$Index = '' |
| | | item.$$BID = BID || '' |
| | | |
| | | fields.forEach(col => { |
| | | forms.forEach(col => { |
| | | if (col.initval !== '$copy') { |
| | | item[col.field] = col.initval |
| | | } |
| | |
| | | item.$$BID = BID || '' |
| | | } |
| | | |
| | | fields.forEach(col => { |
| | | forms.forEach(col => { |
| | | if (col.initval !== '$copy') { |
| | | item[col.field] = col.initval |
| | | } |
| | |
| | | } |
| | | |
| | | checkData = () => { |
| | | const { edData, fields } = this.state |
| | | const { edData, forms } = this.state |
| | | |
| | | if (edData.length === 0) { |
| | | notification.warning({ |
| | |
| | | let Index = 1 |
| | | let data = fromJS(edData).toJS().map(item => { |
| | | let line = [] |
| | | fields.forEach(col => { |
| | | forms.forEach(col => { |
| | | if (col.editable !== 'true' || item.$deleted) { |
| | | if (col.type === 'number') { |
| | | item[col.field] = +item[col.field] |
| | |
| | | |
| | | submit = (data, type) => { |
| | | const { submit, BID, setting } = this.props |
| | | const { fields } = this.state |
| | | const { forms } = this.state |
| | | |
| | | if (type !== 'simple' && (setting.commit === 'change' || setting.commit === 'simple')) { |
| | | data = data.filter(item => !item.$origin) |
| | |
| | | return |
| | | } |
| | | |
| | | let result = getEditTableSql(submit, data, fields) |
| | | let result = getEditTableSql(submit, data, forms) |
| | | |
| | | let param = { |
| | | excel_in: result.lines, |
| | |
| | | pageSizeOptions: pageOptions, |
| | | showSizeChanger: true, |
| | | total: this.props.total || 0, |
| | | showTotal: (total, range) => `${range[0]}-${range[1]} ${this.state.dict['main.pagination.of']} ${total} ${this.state.dict['main.pagination.items']}` |
| | | showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条` |
| | | } |
| | | } |
| | | |
| | |
| | | </div> : null} |
| | | <div className="edit-custom-table-btn-wrap" style={submit.wrapStyle}> |
| | | {!submit.hasAction && pickup ? <Button style={submit.style} onClick={() => setTimeout(() => {this.checkData()}, 10)} loading={loading} className="submit-table" type="link">提交</Button> : null} |
| | | <Switch title="编辑" className="main-pickup" checkedChildren="开" unCheckedChildren="关" disabled={loading || this.props.loading} checked={pickup} onChange={this.pickupChange} /> |
| | | {setting.switchable !== 'false' ? <Switch title="编辑" className="main-pickup" checkedChildren="开" unCheckedChildren="关" disabled={loading || this.props.loading} checked={pickup} onChange={this.pickupChange} /> : null} |
| | | </div> |
| | | <div className={`edit-custom-table ${pickup ? 'editable' : ''} ${setting.tableHeader || ''} ${setting.operType || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''}`} id={tableId}> |
| | | <div className={`edit-custom-table ${pickup ? 'editable' : ''} ${setting.tableHeader || ''} ${setting.operType || ''} ${height ? 'fixed-height' : ''} ${setting.mode || ''} table-vertical-${setting.vertical || ''} mk-edit-${setting.editType || 'simple'}`} id={tableId}> |
| | | <Table |
| | | rowKey="$$uuid" |
| | | components={components} |