| | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import MKEInput from './mkInput' |
| | | import MKNumberInput from './mkNumberInput' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import MKSelect from './mkSelect' |
| | | import './index.scss' |
| | | |
| | |
| | | // const MKColor = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkColor')) |
| | | const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) |
| | | const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent')) |
| | | const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror')) |
| | | |
| | | class ModalForm extends Component { |
| | | static propTpyes = { |
| | |
| | | |
| | | state = { |
| | | formlist: [], // 表单项 |
| | | formId: '' |
| | | } |
| | | |
| | | record = {} |
| | |
| | | let record = {} |
| | | let controlFields = {} |
| | | let fieldMap = new Map() |
| | | let formId = (() => { |
| | | let uuid = [] |
| | | let _options = '0123456789abcdefghigklmnopqrstuv' |
| | | for (let i = 0; i < 19; i++) { |
| | | uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1)) |
| | | } |
| | | uuid = uuid.join('') |
| | | return uuid |
| | | })() |
| | | |
| | | let formlist = this.props.formlist.filter(item => { |
| | | if (item.controlFields) { // 多层表单控制 |
| | |
| | | if (item.options) { |
| | | item.oriOptions = fromJS(item.options).toJS() |
| | | } |
| | | item.$formId = formId |
| | | |
| | | if (item.type === 'text') { |
| | | let _rules = [{ |
| | |
| | | |
| | | let cell = fieldMap.get(item.field) |
| | | |
| | | if (cell.hidden) return |
| | | cell.$ctrls = cell.$ctrls || [] |
| | | cell.$ctrls.push(key) |
| | | |
| | | if (cell.skip && supItem.forbid) { // 上级表单禁用时,此表单不受控制 |
| | | |
| | | if (cell.hidden) { |
| | | |
| | | } else if (supItem.hidden) { |
| | | cell.hidden = true |
| | | } else if (item.notNull) { |
| | |
| | | formlist = formlist.map(cell => { |
| | | let item = fieldMap.get(cell.field) |
| | | |
| | | if (item.$ctrls && item.$ctrls.length === 1) { |
| | | delete item.$ctrls |
| | | } |
| | | |
| | | if (item.linkField) { |
| | | let supInitVal = fieldMap.get(item.linkField).initval || '' |
| | | |
| | | item.options = item.oriOptions.filter(option => option.ParentID === supInitVal) |
| | | item.options = item.oriOptions.filter(option => option.ParentID === supInitVal || option.ParentID === '') |
| | | } |
| | | |
| | | return item |
| | |
| | | |
| | | this.record = record |
| | | |
| | | this.setState({ formlist }) |
| | | this.setState({ formlist, formId }) |
| | | } |
| | | |
| | | checkNumber = (rule, value, callback, item) => { |
| | |
| | | m.hidden = !cell.values.includes(val) |
| | | } |
| | | |
| | | if (!m.hidden && m.$ctrls) { |
| | | m.$ctrls.forEach(n => { |
| | | if (n === current.field || m.hidden) return |
| | | |
| | | let oth = map.get(n) |
| | | let _val = this.record[n] |
| | | |
| | | if (_val && JSON.stringify(_val) === '[]') { |
| | | _val = '' |
| | | } |
| | | |
| | | let p = oth.controlFields.filter(q => q.field === m.field)[0] |
| | | |
| | | if (oth.hidden || (p.notNull && !_val)) { |
| | | m.hidden = true |
| | | } else if (oth.type === 'checkbox' || oth.type === 'multiselect') { |
| | | let _vals = [...(_val || []), ...p.values] |
| | | if (_vals.length === new Set(_vals).size) { |
| | | m.hidden = true |
| | | } |
| | | } else if (p.values && !p.values.includes(_val)) { |
| | | m.hidden = true |
| | | } |
| | | }) |
| | | } |
| | | |
| | | if (m.hidden) { |
| | | m.initval = this.record[m.field] |
| | | } |
| | |
| | | if (item && item.linkField) { |
| | | let supInitVal = this.record[item.linkField] || '' |
| | | |
| | | item.options = item.oriOptions.filter(option => option.ParentID === supInitVal) |
| | | item.options = item.oriOptions.filter(option => option.ParentID === supInitVal || option.ParentID === '') |
| | | } |
| | | |
| | | return item || cell |
| | | }) |
| | | }) |
| | | } else if (item.reset_source) { |
| | | let map = new Map() |
| | | this.state.formlist.forEach(cell => { |
| | | if (!cell.field) return |
| | | map.set(cell.field, cell) |
| | | }) |
| | | |
| | | item.callback(map, this.record, MKEmitter) |
| | | |
| | | this.setState({ |
| | | formlist: this.state.formlist.map(cell => { |
| | | if (!cell.field) return cell |
| | | |
| | | let item = map.get(cell.field) |
| | | |
| | | return item || cell |
| | | let reOptions = item.callback(this.record) |
| | | |
| | | if (reOptions) { |
| | | this.setState({ |
| | | formlist: this.state.formlist.map(cell => { |
| | | if (!cell.field || !reOptions[cell.field]) return cell |
| | | |
| | | cell.options = reOptions[cell.field] |
| | | cell.timestamp = new Date().getTime() |
| | | |
| | | return cell |
| | | }) |
| | | }) |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | if (item.hidden || item.forbid) return |
| | | |
| | | let content = null |
| | | let label = item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}><QuestionCircleOutlined className="mk-form-tip" />{item.label}</Tooltip> : item.label |
| | | let label = item.label |
| | | if (item.tooltip) { |
| | | if (item.toolWidth) { |
| | | label = <Tooltip placement="topLeft" overlayStyle={{maxWidth: item.toolWidth}} title={<div onClick={(e) => e.stopPropagation()}>{item.tooltip}</div>}><QuestionCircleOutlined className="mk-form-tip" />{item.label}</Tooltip> |
| | | } else { |
| | | label = <Tooltip placement="topLeft" title={<div onClick={(e) => e.stopPropagation()}>{item.tooltip}</div>}><QuestionCircleOutlined className="mk-form-tip" />{item.label}</Tooltip> |
| | | } |
| | | } |
| | | |
| | | if (item.type === 'text') { |
| | | content = (<MKEInput config={item} onChange={(val, defer) => !defer && this.recordChange({[item.field]: val}, item)} onSubmit={this.props.inputSubmit} />) |
| | |
| | | return |
| | | } else if (item.type === 'printTemps') { |
| | | content = <MkPrintTemps onChange={(val) => this.recordChange({[item.field]: val})}/> |
| | | } else if (item.type === 'codemirror') { |
| | | content = <CodeMirror mode="text/javascript" theme="cobalt" onChange={(val) => this.recordChange({[item.field]: val})}/> |
| | | } |
| | | |
| | | if (!content) return |
| | |
| | | } |
| | | |
| | | return ( |
| | | <Form {...formItemLayout} className="normal-form-field"> |
| | | <Form {...formItemLayout} className="normal-form-field" id={this.state.formId}> |
| | | <Row gutter={24}>{this.getFields()}</Row> |
| | | </Form> |
| | | ) |