| | |
| | | import { Form, Row, Col, Input, Select, InputNumber, Radio, Tooltip, Modal, notification, Popover } from 'antd' |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | | import Utils from '@/utils/utils.js' |
| | | import { getColumnForm } from './formconfig' |
| | | import { formRule } from '@/utils/option.js' |
| | | import CodeMirror from '@/templates/zshare/codemirror' |
| | |
| | | const { TextArea } = Input |
| | | const columnTypeOptions = { |
| | | text: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'prefix', 'postfix', 'textFormat', 'editable', 'initval', 'blacklist'], |
| | | number: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'decimal', 'format', 'prefix', 'postfix', 'editable', 'initval', 'sum', 'blacklist', 'noValue'], |
| | | number: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'decimal', 'format', 'prefix', 'postfix', 'editable', 'initval', 'sum', 'blacklist'], |
| | | textarea: ['label', 'field', 'type', 'Align', 'Hide', 'Width', 'prefix', 'initval', 'postfix', 'blacklist'], |
| | | custom: ['label', 'type', 'Align', 'Width', 'blacklist'], |
| | | colspan: ['label', 'type', 'Align', 'Hide', 'blacklist'], |
| | | action: ['label', 'type', 'Align', 'Width'], |
| | | formula: ['label', 'type', 'Align', 'Hide', 'Width', 'prefix', 'postfix', 'eval', 'formula', 'blacklist', 'noValue'], |
| | | formula: ['label', 'type', 'Align', 'Hide', 'Width', 'prefix', 'postfix', 'eval', 'formula', 'blacklist'], |
| | | index: ['label', 'type', 'Align', 'Width'] |
| | | } |
| | | |
| | | class EdiTableColumn extends Component { |
| | | static propTpyes = { |
| | | visible: PropTypes.bool, |
| | | column: PropTypes.object, |
| | | columns: PropTypes.array, |
| | | fields: PropTypes.array, |
| | |
| | | |
| | | state = { |
| | | visible: false, |
| | | loading: false, |
| | | formlist: null, |
| | | transfield: {} |
| | | } |
| | | |
| | | column = null |
| | | record = null |
| | | |
| | | UNSAFE_componentWillMount() { |
| | | let transfield = {} |
| | |
| | | } |
| | | |
| | | getOptions = () => { |
| | | let _options = fromJS(columnTypeOptions[this.column.type]).toJS() |
| | | let _options = fromJS(columnTypeOptions[this.record.type]).toJS() |
| | | |
| | | if (this.column.editable === 'true') { |
| | | if (['number', 'text'].includes(this.record.type) && this.record.editable === 'true') { |
| | | _options.push('ctrlField') |
| | | if (this.column.ctrlField) { |
| | | if (this.record.ctrlField) { |
| | | _options.push('ctrlValue') |
| | | } |
| | | if (this.column.type === 'text') { |
| | | if (this.record.type === 'text') { |
| | | _options.push('editType') |
| | | |
| | | if (this.column.editType === 'switch') { |
| | | if (this.record.editType === 'switch') { |
| | | _options.push('enter', 'openVal', 'closeVal', 'openText', 'closeText', 'editField') |
| | | } else if (this.column.editType === 'select') { |
| | | } else if (this.record.editType === 'date') { |
| | | _options.push('required', 'precision', 'enter', 'declareType') |
| | | } else if (this.record.editType === 'select') { |
| | | _options.push('required', 'enter', 'resourceType', 'linkSubField', 'editField', 'dropdown') |
| | | |
| | | if (this.column.resourceType === '0') { |
| | | if (this.record.resourceType === '0') { |
| | | _options.push('options') |
| | | } else { |
| | | _options.push('dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'disableField', 'database') |
| | |
| | | } else { |
| | | _options.push('required', 'enter') |
| | | } |
| | | } else if (this.column.type === 'number') { |
| | | } else if (this.record.type === 'number') { |
| | | _options.push('max', 'min', 'enter') |
| | | } |
| | | } |
| | | if (this.record.type === 'formula' && this.record.eval === 'true') { |
| | | _options.push('decimal') |
| | | } |
| | | if (['number', 'formula'].includes(this.record.type) && this.record.Hide !== 'true') { |
| | | _options.push('noValue') |
| | | } |
| | | |
| | | return _options |
| | |
| | | }) |
| | | |
| | | let formlist = getColumnForm(column, fields, this.props.columns) |
| | | this.record = {} |
| | | |
| | | this.column = fromJS(column).toJS() |
| | | this.column.editType = this.column.editType || 'text' |
| | | this.column.resourceType = this.column.resourceType || '0' |
| | | formlist.forEach(item => { |
| | | this.record[item.key] = item.initVal |
| | | }) |
| | | |
| | | let _options = this.getOptions() |
| | | |
| | |
| | | } |
| | | |
| | | typeChange = (key, value, option) => { |
| | | this.column[key] = value |
| | | this.record[key] = value |
| | | |
| | | if (key === 'type') { |
| | | let _options = this.getOptions() |
| | |
| | | |
| | | this.setState({ |
| | | formlist: this.state.formlist.map(item => { |
| | | item.initVal = this.column[item.key] || item.initVal |
| | | if (item.key === 'decimal' && value === 'formula') { |
| | | this.record.decimal = '' |
| | | } |
| | | |
| | | item.initVal = this.record[item.key] |
| | | item.hidden = !_options.includes(item.key) |
| | | |
| | | return item |
| | |
| | | this.props.form.setFieldsValue({Align: 'center'}) |
| | | } else if (value === 'formula' && _field) { |
| | | this.props.form.setFieldsValue({formula: '@' + _field + '@'}) |
| | | } else if (value === 'action') { |
| | | this.props.form.setFieldsValue({Align: 'center', label: '操作'}) |
| | | } else if (value === 'index') { |
| | | this.props.form.setFieldsValue({label: '序号'}) |
| | | } |
| | |
| | | values.type = 'text' |
| | | } |
| | | |
| | | let _type = this.column.type |
| | | this.column.type = values.type |
| | | let _type = this.record.type |
| | | this.record.type = values.type |
| | | |
| | | if (values.type !== _type) { |
| | | let _options = this.getOptions() |
| | | |
| | | this.setState({ |
| | | formlist: this.state.formlist.map(item => { |
| | | item.initVal = this.column[item.key] || item.initVal |
| | | item.initVal = this.record[item.key] |
| | | item.hidden = !_options.includes(item.key) |
| | | |
| | | return item |
| | |
| | | } |
| | | } else if (key === 'format' && value === 'percent') { |
| | | this.props.form.setFieldsValue({postfix: '%'}) |
| | | } else if (key === 'editable' || key === 'editType' || key === 'resourceType' || key === 'ctrlField') { |
| | | } else if (['editable', 'editType', 'resourceType', 'ctrlField', 'eval', 'Hide'].includes(key)) { |
| | | let _options = this.getOptions() |
| | | |
| | | this.setState({ |
| | | formlist: this.state.formlist.map(item => { |
| | | item.initVal = this.column[item.key] || item.initVal |
| | | item.initVal = this.record[item.key] |
| | | item.hidden = !_options.includes(item.key) |
| | | |
| | | return item |
| | |
| | | multiselectChange = (key, value) => { |
| | | if (key !== 'linkSubField') return |
| | | |
| | | this.column[key] = value |
| | | this.record[key] = value |
| | | } |
| | | |
| | | handleEmpty = () => { |
| | |
| | | } |
| | | |
| | | changeOptions = (data) => { |
| | | this.column.options = data || [] |
| | | this.record.options = data || [] |
| | | } |
| | | |
| | | getFields() { |
| | |
| | | className = 'text-area' |
| | | |
| | | extra = <span className="add-resource-empty" onClick={this.handleEmpty}>空</span> |
| | | if (item.placeholder) { |
| | | extra = <><span className="resource-public-var">{item.placeholder}</span>{extra}</> |
| | | } |
| | | |
| | | content = <CodeMirror /> |
| | | } else if (item.type === 'options') { |
| | | span = 24 |
| | | className = 'text-area' |
| | | |
| | | let linkSubFields = this.column.linkSubField || [] |
| | | let linkSubFields = this.record.linkSubField || [] |
| | | |
| | | let columns = [] |
| | | |
| | | columns.push({ title: 'Value', key: 'Value', strict: true }) |
| | | columns.push({ title: 'Text', key: 'Text' }) |
| | | |
| | | linkSubFields.forEach(field => { |
| | | if (field === 'Value' || field === 'Text') return |
| | | |
| | | columns.push({ title: transfield[field] || field, key: field }) |
| | | }) |
| | | |
| | | content = <EditTable type={'select'} module="form" transfield={transfield} linkSubFields={linkSubFields} onChange={this.changeOptions}/> |
| | | content = <EditTable columns={columns} module="form" onChange={this.changeOptions}/> |
| | | } |
| | | |
| | | fields.push( |
| | |
| | | return fields |
| | | } |
| | | |
| | | transfer = (options) => { |
| | | if (options.length === 0) return options |
| | | |
| | | let isNumber = true |
| | | options.forEach(item => { |
| | | if (!item.Value || isNaN(item.Value)) { |
| | | isNumber = false |
| | | } |
| | | }) |
| | | |
| | | if (isNumber) { |
| | | return options.map(item => { |
| | | item.Value = +item.Value |
| | | return item |
| | | }) |
| | | } else { |
| | | return options.map(item => { |
| | | item.Value = item.Value + '' |
| | | return item |
| | | }) |
| | | } |
| | | } |
| | | |
| | | handleSubmit = () => { |
| | | const { fields } = this.props |
| | | // 表单提交时检查输入值是否正确 |
| | | this.props.form.validateFieldsAndScroll((err, values) => { |
| | | if (!err) { |
| | |
| | | }) |
| | | return |
| | | } |
| | | } |
| | | this.setState({visible: false, formlist: null}) |
| | | this.props.submitCol(values) |
| | | // eslint-disable-next-line |
| | | } else if (values.type === 'formula' && values.eval === 'true' && /^[\u4E00-\u9FA50-9a-zA-Z_\s@\+\-\*\/]*$/ig.test(values.formula) && /[\+\-\*\/]/ig.test(values.formula)) { |
| | | let cols = [] |
| | | fields.forEach(col => { |
| | | if (/^(Int|Decimal)/ig.test(col.datatype)) { |
| | | cols.push({reg: new RegExp('@' + col.field + '@', 'ig'), value: `(@${col.field}@)`}) |
| | | } |
| | | }) |
| | | |
| | | this.column = null |
| | | cols.forEach(col => { |
| | | values.formula = values.formula.replace(col.reg, col.value) |
| | | }) |
| | | } else if (values.type === 'text' && values.editable === 'true' && values.editType === 'select') { |
| | | if (values.resourceType === '0') { |
| | | values.options = values.options || [] |
| | | |
| | | values.options = this.transfer(values.options) |
| | | |
| | | if (values.options.filter(op => op.Text === '').length > 0) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '提示文本(Text)不可为空!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } else { |
| | | let arr = values.options.map(m => m.Value) |
| | | let _arr = Array.from(new Set(arr)) |
| | | if (arr.length > _arr.length) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: 'Value值不可重复!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | if (values.dataSource && /\s/.test(values.dataSource)) { |
| | | let error = Utils.verifySql(values.dataSource) |
| | | |
| | | if (error) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '数据源中不可使用' + error, |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | this.setState({ |
| | | loading: true |
| | | }) |
| | | |
| | | let sql = `declare @mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20) |
| | | ${values.dataSource}` |
| | | |
| | | sql = sql.replace(/@\$|\$@/ig, '').replace(/@(BID|ID|LoginUID|SessionUid|UserID|Appkey|time_id)@/ig, `'1949-10-01 15:00:00'`) |
| | | |
| | | let rduri = '' |
| | | if (window.GLOB.mainSystemApi && values.database === 'sso') { |
| | | rduri = window.GLOB.mainSystemApi |
| | | } |
| | | |
| | | Api.sDebug(sql, rduri).then(result => { |
| | | if (result.status || result.ErrCode === '-2') { |
| | | this.setState({visible: false, loading: false, formlist: null}) |
| | | this.props.submitCol(values) |
| | | this.record = null |
| | | } else { |
| | | this.setState({loading: false}) |
| | | Modal.error({ |
| | | title: result.message |
| | | }) |
| | | } |
| | | }) |
| | | } else { |
| | | this.setState({visible: false, formlist: null}) |
| | | this.props.submitCol(values) |
| | | this.record = null |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | editModalCancel = () => { |
| | | this.setState({visible: false, formlist: null}) |
| | | this.setState({visible: false, loading: false, formlist: null}) |
| | | |
| | | this.props.cancelCol() |
| | | } |
| | | |
| | | render() { |
| | | const { visible } = this.state |
| | | const { visible, loading } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | |
| | | <div style={{display: 'inline-block'}}> |
| | | <Modal |
| | | title="显示列编辑" |
| | | wrapClassName="mk-scroll-modal" |
| | | visible={visible} |
| | | width={900} |
| | | maskClosable={false} |
| | | onOk={this.handleSubmit} |
| | | onCancel={this.editModalCancel} |
| | | confirmLoading={loading} |
| | | destroyOnClose |
| | | > |
| | | <Form {...formItemLayout} className="commontable-column-form" id="edit-table-column-winter"> |