| | |
| | | import Utils from '@/utils/utils.js' |
| | | import MenuUtils from '@/utils/utils-custom.js' |
| | | import CodeMirror from '@/templates/zshare/codemirror' |
| | | import KeyInterface from '@/components/keyInterface' |
| | | import './index.scss' |
| | | |
| | | const { TextArea } = Input |
| | | |
| | | class SettingForm extends Component { |
| | | static propTpyes = { |
| | | updateStatus: PropTypes.func, |
| | | config: PropTypes.object, // 组件配置 |
| | | setting: PropTypes.object, // 数据源配置 |
| | | modules: PropTypes.array, // 可绑定的上级组件 |
| | | columns: PropTypes.array, // 列设置 |
| | | scripts: PropTypes.array, // 自定义脚本 |
| | | } |
| | |
| | | modules: [], |
| | | innerRules: [], |
| | | innertip: '', |
| | | appType: sessionStorage.getItem('appType') |
| | | MenuType: '', |
| | | ismain: false |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { config, setting } = this.props |
| | | |
| | | let modules = MenuUtils.getSupModules(window.GLOB.customMenu.components, config.uuid) || [] |
| | | let menu = window.GLOB.customMenu |
| | | let MenuType = '' |
| | | |
| | | if (menu.parentId === 'BillPrintTemp') { |
| | | MenuType = 'billPrint' |
| | | } |
| | | |
| | | let modules = MenuUtils.getSupModules(menu.components, config.uuid, menu.interfaces) |
| | | let ismain = false |
| | | |
| | | if (menu.Template === 'BaseTable') { |
| | | ismain = config.name === '主表' |
| | | } |
| | | |
| | | modules.unshift({ |
| | | value: 'empty', |
| | |
| | | _setting.supModule = setting.supModule || [] |
| | | _setting.execute = setting.execute || 'true' |
| | | |
| | | this.setState({modules, innerRules, innertip, setting: _setting}) |
| | | if (_setting.supModule.length > 0 && _setting.supModule[0] !== 'empty') { |
| | | let has = MenuUtils.checkSupModules(modules, _setting.supModule.slice(-1)[0]) |
| | | if (!has) { |
| | | _setting.supModule = [] |
| | | } |
| | | } |
| | | |
| | | this.setState({modules, innerRules, innertip, setting: _setting, ismain, MenuType}) |
| | | } |
| | | |
| | | handleConfirm = () => { |
| | | const { appType } = this.state |
| | | const { config } = this.props |
| | | // 表单提交时检查输入值是否正确 |
| | | return new Promise((resolve, reject) => { |
| | | this.props.form.validateFieldsAndScroll((err, values) => { |
| | | if (!err) { |
| | | values.sync = values.sync || 'false' |
| | | |
| | | if (appType === 'mob' && values.useMSearch === 'true') { |
| | | values.syncRefresh = 'true' |
| | | if (['navbar', 'balcony', 'menubar', 'interface'].includes(config.type)) { |
| | | values.onload = 'true' |
| | | } |
| | | |
| | | if (values.interType === 'system' && values.onload === 'false') { |
| | | values.sync = 'false' |
| | | } |
| | | |
| | | // 数据源前端验证 |
| | |
| | | }) |
| | | reject() |
| | | return |
| | | } else if (/,,/ig.test(values.dataresource)) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '数据源中,不可出现连续的英文逗号(,,)', |
| | | duration: 5 |
| | | }) |
| | | reject() |
| | | return |
| | | } |
| | | |
| | | let error = Utils.verifySql(values.dataresource) |
| | |
| | | if (key === 'sysInterface' && value === 'true') { |
| | | this.props.form.setFieldsValue({interface: window.GLOB.mainSystemApi}) |
| | | } |
| | | this.props.updateStatus(setting) |
| | | } |
| | | |
| | | render() { |
| | | const { columns, config } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const { setting, modules, innerRules, appType, innertip } = this.state |
| | | const { setting, modules, innerRules, innertip, MenuType } = this.state |
| | | |
| | | const formItemLayout = { |
| | | labelCol: { |
| | |
| | | message: '表名最长为50个字符!' |
| | | }, |
| | | { |
| | | pattern: /^[a-zA-Z_]+$/, |
| | | message: '表名只可使用字母以及_' |
| | | pattern: /^[a-zA-Z0-9@_]+$/, |
| | | message: '表名只可使用字母、数字以及_' |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | |
| | | </Form.Item> |
| | | </Col> |
| | | {setting.interType === 'outer' ? <Col span={8}> |
| | | <Form.Item label="系统接口"> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="业务系统指同一sso下的其他业务系统,外部系统指不同sso下的其他业务系统。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 系统类型 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('sysInterface', { |
| | | initialValue: setting.sysInterface, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请选择是否使用系统接口!' |
| | | message: '请选择系统类型!' |
| | | } |
| | | ] |
| | | })( |
| | | <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'sysInterface')}}> |
| | | <Radio value="true">是</Radio> |
| | | <Radio value="false">否</Radio> |
| | | <Radio value="false">业务</Radio> |
| | | <Radio value="true">单点</Radio> |
| | | <Radio value="external">外部</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {setting.interType === 'outer' ? <Col className="outer-interface" span={24}> |
| | | {setting.interType === 'outer' && setting.sysInterface !== 'external' ? <Col className="outer-interface" span={24}> |
| | | <Form.Item label="接口地址"> |
| | | {getFieldDecorator('interface', { |
| | | initialValue: setting.interface || (setting.sysInterface === 'true' ? window.GLOB.mainSystemApi : ''), |
| | |
| | | })(<TextArea rows={2} readOnly={setting.sysInterface === 'true'}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {setting.interType === 'outer' && setting.sysInterface !== 'true' ? <Col className="outer-interface" span={24}> |
| | | <Form.Item label={<Tooltip placement="topLeft" title="正式系统接口地址,为空时使用接口地址"> |
| | | {setting.interType === 'outer' && setting.sysInterface === 'external' ? <Col className="outer-interface" span={24}> |
| | | <Form.Item label="接口地址"> |
| | | {getFieldDecorator('exInterface', { |
| | | initialValue: setting.exInterface, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请编辑接口地址!' |
| | | } |
| | | ] |
| | | })(<KeyInterface type="develop"/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {setting.interType === 'outer' && setting.sysInterface === 'false' ? <Col className="outer-interface" span={24}> |
| | | <Form.Item label={<Tooltip placement="topLeft" title="正式系统接口地址,为空时使用接口地址。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 正式地址 |
| | | </Tooltip> |
| | |
| | | {getFieldDecorator('proInterface', { |
| | | initialValue: setting.proInterface || '' |
| | | })(<TextArea rows={2}/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {setting.interType === 'outer' && setting.sysInterface === 'external' ? <Col className="outer-interface" span={24}> |
| | | <Form.Item label={<Tooltip placement="topLeft" title="正式系统接口地址。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 正式地址 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('exProInterface', { |
| | | initialValue: setting.exProInterface || '' |
| | | })(<KeyInterface type="product"/>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {setting.interType === 'outer' ? <Col span={8}> |
| | |
| | | </Col> : null} |
| | | {setting.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={`使用系统函数时,需填写数据源。注:数据权限替换符 $@ -> /* 或 ''、 @$ -> */ 或 '';查询替换符 $select@ -> /* 或 ''、 @select$ -> */ 或 '';统计替换符 $sum@ -> /* 或 ''、 @sum$ -> */ 或 ''。`}> |
| | | <Tooltip placement="topLeft" title={`使用系统函数时,需填写数据源。注:数据权限替换符 $@ -> /* 或 ''、 @$ -> */ 或 ''。`}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 数据源 |
| | | </Tooltip> |
| | |
| | | </Col> |
| | | {/* 数组数据,需设置排序规则 */} |
| | | {config.format === 'array' ? <Col span={8}> |
| | | <Form.Item label="默认排序"> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="如果在自定义脚本中使用了@pageSize@或@orderBy@,请在数据源中单独写排序语句。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 默认排序 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('order', { |
| | | initialValue: setting.order || 'ID desc', |
| | | rules: [ |
| | |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {!['navbar', 'balcony', 'menubar', 'interface'].includes(config.type) && (!config.wrap || config.wrap.supType !== 'multi') ? <Col span={8}> |
| | | {!['navbar', 'balcony', 'menubar'].includes(config.type) && (!config.wrap || config.wrap.supType !== 'multi') && MenuType !== 'billPrint' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'该组件如果受其他组件控制,请选项相应的组件,没有时选“无”。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {/* 1、不分页且不存在上级模块 */} |
| | | {!['navbar', 'interface'].includes(config.type) && !['editable'].includes(config.subtype) && (!config.pageable || (config.pageable && setting.laypage === 'false')) && (setting.supModule.length === 0 || setting.supModule[0] === 'empty') ? <Col span={8}> |
| | | {!['navbar', 'interface', 'calendar'].includes(config.type) && !['editable', 'basetable', 'dualdatacard'].includes(config.subtype) && (!config.pageable || (config.pageable && setting.laypage === 'false')) && (setting.supModule.length === 0 || setting.supModule[0] === 'empty') && setting.interType === 'system' && setting.onload !== 'false' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'初始化加载时,是否与其他组件一同加载数据,注:仅在使用系统函数,且初始化加载数据时有效,分页请求时无效。'}> |
| | | <Tooltip placement="topLeft" title={'初始化加载时,是否与其他组件一同加载数据,注:如菜单未使用后端缓存,则查询语句大于8000字符时无效。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 同步查询 |
| | | </Tooltip> |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {!['navbar', 'balcony', 'menubar', 'interface'].includes(config.type) ? <Col span={8}> |
| | | {!['navbar', 'balcony', 'menubar', 'interface'].includes(config.type) && !['basetable'].includes(config.subtype) ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'优先使用同级的搜索条件组件,同级搜索不存在时,依次向上选取,与当前组件的搜索条件一同用作数据过滤(当前组件的搜索条件优先)。'}> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {!['navbar', 'balcony', 'menubar', 'interface'].includes(config.type) && setting.useMSearch === 'true' && appType !== 'mob' ? <Col span={8}> |
| | | {config.subtype === 'basetable' && !this.state.ismain ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'外层搜索条件改变时,是否刷新当前组件数据。'}> |
| | | <Tooltip placement="topLeft" title="是否使用主表的搜索条件"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 同步刷新 |
| | | 主表搜索 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('syncRefresh', { |
| | | initialValue: setting.syncRefresh || 'true' |
| | | {getFieldDecorator('useMSearch', { |
| | | initialValue: setting.useMSearch || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">是</Radio> |
| | | <Radio value="false">否</Radio> |
| | | <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'useMSearch')}}> |
| | | <Radio value="true">使用</Radio> |
| | | <Radio value="false">不使用</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {/* <Col span={8}> |
| | | <Form.Item label="事务"> |
| | | {getFieldDecorator('transaction', { |
| | | initialValue: setting.transaction || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">使用</Radio> |
| | | <Radio value="false">不使用</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> */} |
| | | {!['navbar', 'balcony', 'menubar', 'interface'].includes(config.type) ? <Col span={8}> |
| | | <Form.Item label="初始化数据"> |
| | | {getFieldDecorator('onload', { |
| | | initialValue: setting.onload || 'true' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'onload')}}> |
| | | <Radio value="true">加载</Radio> |
| | | <Radio value="false">不加载</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {config.type === 'interface' ? <Col span={8}> |
| | | {config.type === 'interface' && ((setting.supModule && setting.supModule[0] === 'empty') || MenuType === 'billPrint') ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="初始化加载将在页面加载前执行。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 加载方式 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('loadlevel', { |
| | | initialValue: setting.loadlevel || 'default' |
| | | })( |
| | | <Radio.Group onChange={(e) => {this.onOptionChange(e.target.value, 'loadlevel')}}> |
| | | <Radio value="default">默认</Radio> |
| | | <Radio value="init">初始化</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {config.type === 'interface' && MenuType !== 'billPrint' ? <Col span={8}> |
| | | <Form.Item label="定时器"> |
| | | {getFieldDecorator('timer', { |
| | | initialValue: setting.timer || '' |
| | |
| | | })(<InputNumber min={0} max={500} precision={0} />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {config.subtype === 'dualdatacard' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="子表在主表中的数据集名称。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 子表字段 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('subdata', { |
| | | initialValue: setting.subdata || 'sub_data', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入默认排序!' |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {config.subtype === 'dualdatacard' ? <Col span={8}> |
| | | <Form.Item label="子表主键"> |
| | | {getFieldDecorator('subKey', { |
| | | initialValue: setting.subKey || '' |
| | | })( |
| | | <Select> |
| | | {this.props.subColumns.map((option, i) => |
| | | <Select.Option key={i} value={option.field}> |
| | | {option.label} |
| | | </Select.Option> |
| | | )} |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {config.subtype === 'dualdatacard' ? <Col span={8}> |
| | | <Form.Item label="子表BID"> |
| | | {getFieldDecorator('subBID', { |
| | | initialValue: setting.subBID || '' |
| | | })( |
| | | <Select> |
| | | {this.props.subColumns.map((option, i) => |
| | | <Select.Option key={i} value={option.field}> |
| | | {option.label} |
| | | </Select.Option> |
| | | )} |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | </Row> |
| | | </Form> |
| | | </div> |