| | |
| | | import { formRule } from '@/utils/option.js' |
| | | import Utils from '@/utils/utils.js' |
| | | import CodeMirror from '@/templates/zshare/codemirror' |
| | | import './index.scss' |
| | | // import './index.scss' |
| | | |
| | | const { TextArea } = Input |
| | | |
| | |
| | | } |
| | | |
| | | return ( |
| | | <div className="model-table-datasource-setting-form-box"> |
| | | <Form {...formItemLayout} className="model-setting-form"> |
| | | <Row gutter={24}> |
| | | <Col span={12}> |
| | | <Form.Item label="表名"> |
| | | {getFieldDecorator('tableName', { |
| | | initialValue: setting.tableName || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + '表名!' |
| | | }, |
| | | { |
| | | max: 50, |
| | | message: '表名最长为50个字符!' |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit}/>)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label="标题"> |
| | | {getFieldDecorator('title', { |
| | | initialValue: setting.title || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + '标题!' |
| | | }, |
| | | { |
| | | max: formRule.input.max, |
| | | message: formRule.input.message |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={dict['header.form.intertype']}> |
| | | {getFieldDecorator('interType', { |
| | | initialValue: interType, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.select'] + dict['header.form.intertype'] + '!' |
| | | } |
| | | ] |
| | | })( |
| | | <Radio.Group onChange={(e) => {this.onRadioChange(e, 'interType')}}> |
| | | <Radio value="system">系统</Radio> |
| | | <Radio value="inner">内部</Radio> |
| | | <Radio value="outer">外部</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | {interType === 'outer' ? <Col span={12}> |
| | | <Form.Item label={dict['header.form.sysInterface']}> |
| | | {getFieldDecorator('sysInterface', { |
| | | initialValue: setting.sysInterface || 'false', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.select'] + dict['header.form.sysInterface'] + '!' |
| | | }, |
| | | ] |
| | | })( |
| | | <Radio.Group onChange={(e) => {this.onRadioChange(e, 'sysInterface')}}> |
| | | <Radio value="true">{dict['model.true']}</Radio> |
| | | <Radio value="false">{dict['model.false']}</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'inner' ? <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={funcTooltip}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 内部函数 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('innerFunc', { |
| | | initialValue: setting.innerFunc || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + '内部函数!' |
| | | }, |
| | | { |
| | | max: formRule.func.max, |
| | | message: formRule.func.maxMessage |
| | | }, |
| | | ...funcRules |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'outer' ? <Col span={24} className="data-source"> |
| | | <Form.Item label="接口地址"> |
| | | {getFieldDecorator('interface', { |
| | | initialValue: setting.interface || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + '接口地址!' |
| | | } |
| | | ] |
| | | })(<TextArea rows={2}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'outer' ? <Col span={12}> |
| | | <Form.Item label="外部函数"> |
| | | {getFieldDecorator('outerFunc', { |
| | | initialValue: setting.outerFunc || '', |
| | | rules: [ |
| | | { |
| | | pattern: formRule.func.pattern, |
| | | message: formRule.func.message |
| | | }, { |
| | | max: formRule.func.max, |
| | | message: formRule.func.maxMessage |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'system' ? <Col span={24} className="data-source" style={{paddingLeft: '7px'}}> |
| | | <Form.Item help={'数据ID:' + menu.MenuID} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } label={ |
| | | <Tooltip placement="topLeft" title={'使用系统函数时,需填写数据源。注:数据权限替换符 $@ -> /* 或 \'\'、 @$ -> */ 或 \'\''}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 数据源 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('dataresource', { |
| | | initialValue: setting.dataresource || '' |
| | | })(<CodeMirror />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'数据值字段。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | Value |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('valueField', { |
| | | initialValue: setting.valueField || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + 'Value!' |
| | | }, |
| | | { |
| | | pattern: formRule.field.pattern, |
| | | message: formRule.field.message |
| | | }, { |
| | | max: formRule.field.max, |
| | | message: formRule.field.maxMessage |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'显示文字字段。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | Label |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('labelField', { |
| | | initialValue: setting.labelField || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + 'Label!' |
| | | }, |
| | | { |
| | | pattern: formRule.field.pattern, |
| | | message: formRule.field.message |
| | | }, { |
| | | max: formRule.field.max, |
| | | message: formRule.field.maxMessage |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'父级字段。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | Parent |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('parentField', { |
| | | initialValue: setting.parentField || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + 'Label!' |
| | | }, |
| | | { |
| | | pattern: formRule.field.pattern, |
| | | message: formRule.field.message |
| | | }, { |
| | | max: formRule.field.max, |
| | | message: formRule.field.maxMessage |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label="排序"> |
| | | {getFieldDecorator('order', { |
| | | initialValue: setting.order || 'ID desc', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + '排序!' |
| | | }, |
| | | { |
| | | max: formRule.input.max, |
| | | message: formRule.input.message |
| | | } |
| | | ] |
| | | })(<Input placeholder={'ID asc, UID desc'} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'父级字段值与顶级标识相同时,视为顶级节点。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 顶级标识 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('mark', { |
| | | initialValue: setting.mark || '', |
| | | rules: [ |
| | | { |
| | | max: formRule.input.max, |
| | | message: formRule.input.message |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'栅格布局,每行等分为24列,树形比例可设置为2-12(最大50%)'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 宽度 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('width', { |
| | | initialValue: setting.width || 5, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + '宽度!' |
| | | } |
| | | ] |
| | | })(<InputNumber min={2} max={12} precision={0} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label="搜索"> |
| | | {getFieldDecorator('searchable', { |
| | | initialValue: setting.searchable || 'true' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">显示</Radio> |
| | | <Radio value="false">隐藏</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | {interType === 'system' ? <Col span={12}> |
| | | <Form.Item label="默认sql"> |
| | | {getFieldDecorator('default', { |
| | | initialValue: setting.default || 'true' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">执行</Radio> |
| | | <Radio value="false">不执行</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={12}> |
| | | <Form.Item label="显示图标"> |
| | | {getFieldDecorator('showIcon', { |
| | | initialValue: setting.showIcon || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">是</Radio> |
| | | <Radio value="false">否</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label="显示分割线"> |
| | | {getFieldDecorator('showLine', { |
| | | initialValue: setting.showLine || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">是</Radio> |
| | | <Radio value="false">否</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |
| | | </Form> |
| | | </div> |
| | | <Form {...formItemLayout}> |
| | | <Row gutter={24}> |
| | | <Col span={8}> |
| | | <Form.Item label="表名"> |
| | | {getFieldDecorator('tableName', { |
| | | initialValue: setting.tableName || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + '表名!' |
| | | }, |
| | | { |
| | | max: 50, |
| | | message: '表名最长为50个字符!' |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit}/>)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label="标题"> |
| | | {getFieldDecorator('title', { |
| | | initialValue: setting.title || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + '标题!' |
| | | }, |
| | | { |
| | | max: formRule.input.max, |
| | | message: formRule.input.message |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label={dict['header.form.intertype']}> |
| | | {getFieldDecorator('interType', { |
| | | initialValue: interType, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.select'] + dict['header.form.intertype'] + '!' |
| | | } |
| | | ] |
| | | })( |
| | | <Radio.Group onChange={(e) => {this.onRadioChange(e, 'interType')}}> |
| | | <Radio value="system">系统</Radio> |
| | | <Radio value="inner">内部</Radio> |
| | | <Radio value="outer">外部</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | {interType === 'outer' ? <Col span={8}> |
| | | <Form.Item label={dict['header.form.sysInterface']}> |
| | | {getFieldDecorator('sysInterface', { |
| | | initialValue: setting.sysInterface || 'false', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.select'] + dict['header.form.sysInterface'] + '!' |
| | | }, |
| | | ] |
| | | })( |
| | | <Radio.Group onChange={(e) => {this.onRadioChange(e, 'sysInterface')}}> |
| | | <Radio value="true">{dict['model.true']}</Radio> |
| | | <Radio value="false">{dict['model.false']}</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'inner' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={funcTooltip}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 内部函数 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('innerFunc', { |
| | | initialValue: setting.innerFunc || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + '内部函数!' |
| | | }, |
| | | { |
| | | max: formRule.func.max, |
| | | message: formRule.func.maxMessage |
| | | }, |
| | | ...funcRules |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'outer' ? <Col span={24} className="mk-through-line3"> |
| | | <Form.Item label="接口地址"> |
| | | {getFieldDecorator('interface', { |
| | | initialValue: setting.interface || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + '接口地址!' |
| | | } |
| | | ] |
| | | })(<TextArea rows={2}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'outer' ? <Col span={8}> |
| | | <Form.Item label="外部函数"> |
| | | {getFieldDecorator('outerFunc', { |
| | | initialValue: setting.outerFunc || '', |
| | | rules: [ |
| | | { |
| | | pattern: formRule.func.pattern, |
| | | message: formRule.func.message |
| | | }, { |
| | | max: formRule.func.max, |
| | | message: formRule.func.maxMessage |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'system' ? <Col span={24} className="mk-through-line3"> |
| | | <Form.Item help={'数据ID:' + menu.MenuID} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } label={ |
| | | <Tooltip placement="topLeft" title={'使用系统函数时,需填写数据源。注:数据权限替换符 $@ -> /* 或 \'\'、 @$ -> */ 或 \'\''}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 数据源 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('dataresource', { |
| | | initialValue: setting.dataresource || '' |
| | | })(<CodeMirror />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'数据值字段。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | Value |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('valueField', { |
| | | initialValue: setting.valueField || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + 'Value!' |
| | | }, |
| | | { |
| | | pattern: formRule.field.pattern, |
| | | message: formRule.field.message |
| | | }, { |
| | | max: formRule.field.max, |
| | | message: formRule.field.maxMessage |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'显示文字字段。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | Label |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('labelField', { |
| | | initialValue: setting.labelField || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + 'Label!' |
| | | }, |
| | | { |
| | | pattern: formRule.field.pattern, |
| | | message: formRule.field.message |
| | | }, { |
| | | max: formRule.field.max, |
| | | message: formRule.field.maxMessage |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'父级字段。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | Parent |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('parentField', { |
| | | initialValue: setting.parentField || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + 'Label!' |
| | | }, |
| | | { |
| | | pattern: formRule.field.pattern, |
| | | message: formRule.field.message |
| | | }, { |
| | | max: formRule.field.max, |
| | | message: formRule.field.maxMessage |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label="排序"> |
| | | {getFieldDecorator('order', { |
| | | initialValue: setting.order || 'ID desc', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + '排序!' |
| | | }, |
| | | { |
| | | max: formRule.input.max, |
| | | message: formRule.input.message |
| | | } |
| | | ] |
| | | })(<Input placeholder={'ID asc, UID desc'} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'父级字段值与顶级标识相同时,视为顶级节点。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 顶级标识 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('mark', { |
| | | initialValue: setting.mark || '', |
| | | rules: [ |
| | | { |
| | | max: formRule.input.max, |
| | | message: formRule.input.message |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'栅格布局,每行等分为24列,树形比例可设置为2-12(最大50%)'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 宽度 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('width', { |
| | | initialValue: setting.width || 5, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: dict['form.required.input'] + '宽度!' |
| | | } |
| | | ] |
| | | })(<InputNumber min={2} max={12} precision={0} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label="搜索"> |
| | | {getFieldDecorator('searchable', { |
| | | initialValue: setting.searchable || 'true' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">显示</Radio> |
| | | <Radio value="false">隐藏</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | {interType === 'system' ? <Col span={8}> |
| | | <Form.Item label="默认sql"> |
| | | {getFieldDecorator('default', { |
| | | initialValue: setting.default || 'true' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">执行</Radio> |
| | | <Radio value="false">不执行</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={8}> |
| | | <Form.Item label="显示图标"> |
| | | {getFieldDecorator('showIcon', { |
| | | initialValue: setting.showIcon || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">是</Radio> |
| | | <Radio value="false">否</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label="显示分割线"> |
| | | {getFieldDecorator('showLine', { |
| | | initialValue: setting.showLine || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">是</Radio> |
| | | <Radio value="false">否</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |
| | | </Form> |
| | | ) |
| | | } |
| | | } |