| | |
| | | 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-datasource-setting-form-box"> |
| | | <Form {...formItemLayout} className="model-setting-form"> |
| | | <Row gutter={24}> |
| | | <Col span={8}> |
| | | <Form.Item label="表名"> |
| | | {getFieldDecorator('tableName', { |
| | | initialValue: setting.tableName, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + '表名!' |
| | | }, |
| | | { |
| | | max: 50, |
| | | message: '表名最长为50个字符!' |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label="接口类型"> |
| | | {getFieldDecorator('interType', { |
| | | initialValue: interType, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.select'] + '接口类型!' |
| | | }, |
| | | ] |
| | | })( |
| | | <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 === 'inner' ? <Col span={8}> |
| | | <Form.Item label={tooltip ? |
| | | <Tooltip placement="topLeft" title={tooltip}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 内部函数 |
| | | </Tooltip> : '内部函数' |
| | | }> |
| | | {getFieldDecorator('innerFunc', { |
| | | initialValue: setting.innerFunc || '', |
| | | rules: rules |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'outer' ? <Col span={8}> |
| | | <Form.Item label="外部函数"> |
| | | {getFieldDecorator('outerFunc', { |
| | | initialValue: setting.outerFunc || '', |
| | | rules: [ |
| | | <Form {...formItemLayout}> |
| | | <Row gutter={24}> |
| | | <Col span={8}> |
| | | <Form.Item label="表名"> |
| | | {getFieldDecorator('tableName', { |
| | | initialValue: setting.tableName, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + '表名!' |
| | | }, |
| | | { |
| | | max: 50, |
| | | message: '表名最长为50个字符!' |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label="接口类型"> |
| | | {getFieldDecorator('interType', { |
| | | initialValue: interType, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.select'] + '接口类型!' |
| | | }, |
| | | ] |
| | | })( |
| | | <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 === 'inner' ? <Col span={8}> |
| | | <Form.Item label={tooltip ? |
| | | <Tooltip placement="topLeft" title={tooltip}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 内部函数 |
| | | </Tooltip> : '内部函数' |
| | | }> |
| | | {getFieldDecorator('innerFunc', { |
| | | initialValue: setting.innerFunc || '', |
| | | rules: rules |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'outer' ? <Col span={8}> |
| | | <Form.Item label="外部函数"> |
| | | {getFieldDecorator('outerFunc', { |
| | | initialValue: setting.outerFunc || '', |
| | | rules: [ |
| | | |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'outer' ? <Col span={24} className="data-source"> |
| | | <Form.Item label="接口地址"> |
| | | {getFieldDecorator('interface', { |
| | | initialValue: setting.interface || '', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + '接口地址!' |
| | | }, |
| | | ] |
| | | })(<TextArea rows={2}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'system' ? <Col span={24} className="data-source" style={{paddingLeft: '7px'}}> |
| | | <Form.Item labelCol={{xs: { span: 24 }, sm: { span: 2 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 22 }} } label={ |
| | | <Tooltip placement="topLeft" title={'使用系统函数时,需填写数据源。注:数据权限替换符 $@ -> /* 或 \'\'、 @$ -> */ 或 \'\''}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 数据源 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('dataresource', { |
| | | initialValue: setting.dataresource || '' |
| | | })(<CodeMirror />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'system' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'查询时,搜索条件以where条件拼接进入sql,统计时,将数据源中以“@+搜索字段+@”的内容,以搜索条件中的值进行替换后,提交查询,注:查询类型仅在使用系统函数时有效。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 查询类型 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('queryType', { |
| | | initialValue: setting.queryType || 'query' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="query">查询</Radio> |
| | | <Radio value="statistics">统计</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {/* <Col span={8}> |
| | | <Form.Item label="主键"> |
| | | {getFieldDecorator('primaryKey', { |
| | | initialValue: setting.primaryKey || '' |
| | | })( |
| | | <Select> |
| | | {columns.map((option, i) => |
| | | <Select.Option key={i} value={option.field}> |
| | | {option.label} |
| | | </Select.Option> |
| | | )} |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> */} |
| | | {interType === 'system' ? <Col span={8}> |
| | | <Form.Item label="默认sql"> |
| | | {getFieldDecorator('execute', { |
| | | initialValue: setting.execute || 'true' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">执行</Radio> |
| | | <Radio value="false">不执行</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={8}> |
| | | <Form.Item label="初始化"> |
| | | {getFieldDecorator('onload', { |
| | | initialValue: setting.onload || 'true' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">加载数据</Radio> |
| | | <Radio value="false">不加载数据</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | {/* <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="高级搜索弹窗的宽度,注:当宽度值小于100时表示占窗口的百分比,大于100时表示宽度的绝对值。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 高级搜索 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('advanceWidth', { |
| | | initialValue: setting.advanceWidth || 1000 |
| | | })(<InputNumber min={10} max={3000} precision={0}/>)} |
| | | </Form.Item> |
| | | </Col> */} |
| | | </Row> |
| | | </Form> |
| | | </div> |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </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: this.props.dict['form.required.input'] + '接口地址!' |
| | | }, |
| | | ] |
| | | })(<TextArea rows={2}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'system' ? <Col span={24} className="mk-through-line3"> |
| | | <Form.Item labelCol={{xs: { span: 24 }, sm: { span: 2 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 22 }} } label={ |
| | | <Tooltip placement="topLeft" title={'使用系统函数时,需填写数据源。注:数据权限替换符 $@ -> /* 或 \'\'、 @$ -> */ 或 \'\''}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 数据源 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('dataresource', { |
| | | initialValue: setting.dataresource || '' |
| | | })(<CodeMirror />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {interType === 'system' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'查询时,搜索条件以where条件拼接进入sql,统计时,将数据源中以“@+搜索字段+@”的内容,以搜索条件中的值进行替换后,提交查询,注:查询类型仅在使用系统函数时有效。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 查询类型 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('queryType', { |
| | | initialValue: setting.queryType || 'query' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="query">查询</Radio> |
| | | <Radio value="statistics">统计</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {/* <Col span={8}> |
| | | <Form.Item label="主键"> |
| | | {getFieldDecorator('primaryKey', { |
| | | initialValue: setting.primaryKey || '' |
| | | })( |
| | | <Select> |
| | | {columns.map((option, i) => |
| | | <Select.Option key={i} value={option.field}> |
| | | {option.label} |
| | | </Select.Option> |
| | | )} |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> */} |
| | | {interType === 'system' ? <Col span={8}> |
| | | <Form.Item label="默认sql"> |
| | | {getFieldDecorator('execute', { |
| | | initialValue: setting.execute || 'true' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">执行</Radio> |
| | | <Radio value="false">不执行</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={8}> |
| | | <Form.Item label="初始化"> |
| | | {getFieldDecorator('onload', { |
| | | initialValue: setting.onload || 'true' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">加载数据</Radio> |
| | | <Radio value="false">不加载数据</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |
| | | </Form> |
| | | ) |
| | | } |
| | | } |