| | |
| | | import { DndProvider } from 'react-dnd' |
| | | import HTML5Backend from 'react-dnd-html5-backend' |
| | | import moment from 'moment' |
| | | import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Empty, Switch, Tooltip } from 'antd' |
| | | import { QuestionCircleOutlined, CloseOutlined, RedoOutlined, SettingOutlined, PlusOutlined, DeleteOutlined, EditOutlined, SnippetsOutlined } from '@ant-design/icons' |
| | | import { Button, Card, Modal, Collapse, notification, Spin, Switch, Tooltip } from 'antd' |
| | | import { QuestionCircleOutlined, RedoOutlined, SettingOutlined, PlusOutlined, DeleteOutlined, EditOutlined, SnippetsOutlined } from '@ant-design/icons' |
| | | |
| | | import Api from '@/api' |
| | | import zhCN from '@/locales/zh-CN/model.js' |
| | |
| | | import SettingForm from './settingform' |
| | | import DragElement from './dragelement' |
| | | import GroupForm from './groupform' |
| | | import EditCard from '@/templates/zshare/editcard' |
| | | |
| | | import MenuForm from '@/templates/zshare/menuform' |
| | | import SourceElement from '@/templates/zshare/dragsource' |
| | |
| | | import './index.scss' |
| | | |
| | | const { Panel } = Collapse |
| | | const { Option } = Select |
| | | const { confirm } = Modal |
| | | const ModalForm = asyncComponent(() => import('@/templates/zshare/modalform')) |
| | | const CreateFunc = asyncComponent(() => import('@/templates/zshare/createfunc')) |
| | |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, // 字典 |
| | | config: null, // 页面配置 |
| | | modaltype: '', // 模态框类型,控制模态框显示 |
| | | tableVisible: false, // 数据表字段模态框 |
| | | tableColumns: [], // 表格显示列 |
| | | fields: null, // 搜索条件及显示列,可选字段 |
| | | menuformlist: null, // 基本信息表单字段 |
| | |
| | | settingVisible: false, // 全局配置模态框 |
| | | closeVisible: false, // 关闭模态框 |
| | | tables: [], // 可用表名 |
| | | selectedTables: [], // 已选表名 |
| | | originMenu: null, // 原始菜单 |
| | | delActions: [], // 删除按钮列表 |
| | | tabviews: [], // 所有标签页 |
| | |
| | | openEdition: btnTab.open_edition || '', |
| | | columns: columns, |
| | | originMenu: JSON.parse(JSON.stringify(_config)), |
| | | selectedTables: _config.tables, |
| | | menuformlist: [ |
| | | { |
| | | type: 'text', |
| | |
| | | duration: 5 |
| | | }) |
| | | } |
| | | }) |
| | | |
| | | let deffers = this.state.selectedTables.map(item => { |
| | | return new Promise(resolve => { |
| | | Api.getSystemConfig({func: 'sPC_Get_FieldName', TBName: item.TbName}).then(res => { |
| | | res.TBName = item.TbName |
| | | resolve(res) |
| | | }) |
| | | }) |
| | | }) |
| | | Promise.all(deffers).then(response => { |
| | | let _columns = [] |
| | | response.forEach(res => { |
| | | if (res.status) { |
| | | let tabmsg = { |
| | | tableName: res.TBName, |
| | | columns: res.FDName.map(item => { |
| | | let _type = item.FieldType.toLowerCase() |
| | | let _decimal = 0 |
| | | if (/^nvarchar/.test(_type)) { |
| | | _type = 'text' |
| | | } else if (/^int/.test(_type)) { |
| | | _type = 'number' |
| | | } else if (/^decimal/.test(_type)) { |
| | | _decimal = _type.split(',')[1] |
| | | _decimal = parseInt(_decimal) |
| | | if (_decimal > 4) { |
| | | _decimal = 4 |
| | | } |
| | | _type = 'number' |
| | | } else if (/^decimal/.test(_type)) { |
| | | _decimal = _type.split(',')[1] |
| | | _decimal = parseInt(_decimal) |
| | | if (_decimal > 4) { |
| | | _decimal = 4 |
| | | } |
| | | _type = 'number' |
| | | } else if (/^datetime/.test(_type)) { |
| | | _type = 'datetime' |
| | | } else if (/^date/.test(_type)) { |
| | | _type = 'date' |
| | | } else { |
| | | _type = 'text' |
| | | } |
| | | |
| | | return { |
| | | field: item.FieldName, |
| | | label: item.FieldDec, |
| | | type: _type, |
| | | datatype: _type, |
| | | decimal: _decimal |
| | | } |
| | | }) |
| | | } |
| | | _columns.push(tabmsg) |
| | | } else { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: res.message, |
| | | duration: 5 |
| | | }) |
| | | } |
| | | }) |
| | | |
| | | this.setState({ |
| | | tableColumns: _columns |
| | | }) |
| | | }) |
| | | |
| | | Api.getSystemConfig({func: 'sPC_Get_UserTemp', TypeCharTwo: 'tab'}).then(res => { |
| | |
| | | } |
| | | |
| | | let _LongParam = '' |
| | | let _config = {...config, tables: this.state.selectedTables} |
| | | let _config = {...config} |
| | | |
| | | // 数据来源为查询且未设置主键时,启用为false |
| | | if (_config.setting.datatype === 'query' && !_config.setting.primaryKey) { |
| | |
| | | onCancel() {} |
| | | }) |
| | | } else { |
| | | let _config = {...config, tables: this.state.selectedTables} |
| | | let _config = {...config} |
| | | |
| | | if (!is(fromJS(_config), fromJS(originMenu))) { |
| | | this.setState({ |
| | |
| | | this.handleViewBack() |
| | | } |
| | | } |
| | | } |
| | | |
| | | queryField = (type) => { |
| | | const {selectedTables, tableColumns, config} = this.state |
| | | // 判断是否已选择表名 |
| | | if (selectedTables.length === 0) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '请选择表名!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | // 表字段集转为map数据 |
| | | let columns = new Map() |
| | | tableColumns.forEach(table => { |
| | | table.columns.forEach(column => { |
| | | columns.set(column.field, column) |
| | | }) |
| | | }) |
| | | |
| | | if (type === 'search') { |
| | | // 添加搜索条件,字段集中存在搜索条件字段,使用搜索条件对象替换字段集,设置数据类型 |
| | | config.groups.forEach(group => { |
| | | group.sublist.forEach(item => { |
| | | if (columns.has(item.field)) { |
| | | let _datatype = columns.get(item.field).datatype |
| | | columns.set(item.field, {...item, selected: true, datatype: _datatype}) |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | // 显示字段集弹窗 |
| | | this.setState({ |
| | | tableVisible: true, |
| | | fields: [...columns.values()] |
| | | }) |
| | | } |
| | | |
| | | addFieldSubmit = () => { |
| | | const {config} = this.state |
| | | // 字段集为空,关闭弹窗 |
| | | if (!this.state.fields || this.state.fields.length === 0) { |
| | | this.setState({ |
| | | tableVisible: false, |
| | | }) |
| | | } |
| | | |
| | | // 获取已选字段集合 |
| | | let cards = this.refs.searchcard.state.selectCards |
| | | let columnsMap = new Map() |
| | | cards.forEach(card => { |
| | | columnsMap.set(card.field, card) |
| | | }) |
| | | |
| | | let groups = config.groups.map(group => { |
| | | group.sublist = group.sublist.map(item => { |
| | | if (columnsMap.has(item.field)) { |
| | | let cell = columnsMap.get(item.field) |
| | | |
| | | if (cell.selected && cell.type !== item.type) { // 数据类型修改 |
| | | item.type = cell.type |
| | | item.initval = '' |
| | | } |
| | | columnsMap.delete(item.field) |
| | | } |
| | | return item |
| | | }) |
| | | return group |
| | | }) |
| | | |
| | | let items = [...columnsMap.values()].map(item => { |
| | | let newcard = { |
| | | uuid: Utils.getuuid(), |
| | | label: item.label, |
| | | field: item.field, |
| | | initval: '', |
| | | type: item.type, |
| | | resourceType: '0', |
| | | options: [], |
| | | orderType: 'asc' |
| | | } |
| | | |
| | | return newcard |
| | | }) |
| | | |
| | | groups = groups.map(group => { |
| | | if (group.isDefault) { |
| | | group.sublist = [...group.sublist, ...items] |
| | | group.sublist = group.sublist.filter(item => !item.origin) |
| | | } |
| | | return group |
| | | }) |
| | | |
| | | this.setState({ |
| | | config: {...config, groups: groups} |
| | | }) |
| | | notification.success({ |
| | | top: 92, |
| | | message: '操作成功', |
| | | duration: 2 |
| | | }) |
| | | } |
| | | |
| | | onTableChange = (value) => { |
| | | const {tables, selectedTables, tableColumns} = this.state |
| | | |
| | | let _table = tables.filter(item => item.TbName === value)[0] |
| | | let isSelected = !!selectedTables.filter(cell => cell.TbName === value)[0] |
| | | if (!isSelected) { |
| | | this.setState({ |
| | | selectedTables: [...selectedTables, _table] |
| | | }) |
| | | Api.getSystemConfig({func: 'sPC_Get_FieldName', TBName: value}).then(res => { |
| | | if (res.status) { |
| | | let tabmsg = { |
| | | tableName: _table.name, |
| | | columns: res.FDName.map(item => { |
| | | let _type = item.FieldType.toLowerCase() |
| | | let _decimal = 0 |
| | | if (/^nvarchar/.test(_type)) { |
| | | _type = 'text' |
| | | } else if (/^int/.test(_type)) { |
| | | _type = 'number' |
| | | } else if (/^decimal/.test(_type)) { |
| | | _decimal = _type.split(',')[1] |
| | | _decimal = parseInt(_decimal) |
| | | _type = 'number' |
| | | } else if (/^datetime/.test(_type)) { |
| | | _type = 'datetime' |
| | | } else if (/^date/.test(_type)) { |
| | | _type = 'date' |
| | | } else { |
| | | _type = 'text' |
| | | } |
| | | |
| | | return { |
| | | field: item.FieldName, |
| | | label: item.FieldDec, |
| | | type: _type, |
| | | datatype: _type, |
| | | decimal: _decimal |
| | | } |
| | | }) |
| | | } |
| | | this.setState({ |
| | | tableColumns: [...tableColumns, tabmsg] |
| | | }) |
| | | } else { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: res.message, |
| | | duration: 5 |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | |
| | | deleteTable = (table) => { |
| | | const {selectedTables, tableColumns} = this.state |
| | | |
| | | this.setState({ |
| | | selectedTables: selectedTables.filter(item => item.TbName !== table.TbName), |
| | | tableColumns: tableColumns.filter(item => item.tableName !== table.TbName) |
| | | }) |
| | | } |
| | | |
| | | changeSetting = () => { |
| | |
| | | }) |
| | | } else { |
| | | this.menuformRef.handleConfirm().then(res => { |
| | | let _config = {...config, tables: this.state.selectedTables} |
| | | let _config = {...config} |
| | | |
| | | if (!is(fromJS(originMenu), fromJS(_config))) { |
| | | notification.warning({ |
| | |
| | | formlist={this.state.menuformlist} |
| | | wrappedComponentRef={(inst) => this.menuformRef = inst} |
| | | /> |
| | | {/* 表名添加 */} |
| | | <div className="ant-col ant-form-item-label"> |
| | | <label> |
| | | <Tooltip placement="topLeft" title="此处可以添加配置相关的常用表,在添加搜索条件和显示列时,可通过工具栏中的添加按钮,批量添加表格相关字段。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | {this.state.dict['header.menu.table.add']} |
| | | </Tooltip> |
| | | </label> |
| | | </div> |
| | | <Select |
| | | showSearch |
| | | className="tables" |
| | | style={{ width: '100%' }} |
| | | optionFilterProp="children" |
| | | value="请选择表名" |
| | | onChange={this.onTableChange} |
| | | showArrow={false} |
| | | getPopupContainer={() => document.getElementById('common-basedata')} |
| | | filterOption={(input, option) => { |
| | | return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 || |
| | | option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0 |
| | | }} |
| | | > |
| | | {this.state.tables.map((table, index) => ( |
| | | <Option key={index} title={table.TbName} value={table.TbName}>{table.Remark}</Option> |
| | | ))} |
| | | </Select> |
| | | {this.state.selectedTables.length > 0 && <List |
| | | size="small" |
| | | bordered |
| | | dataSource={this.state.selectedTables} |
| | | renderItem={(item, index) => <List.Item key={index} title={item.Remark + ' (' + item.TbName + ')'}> |
| | | {item.Remark + ' (' + item.TbName + ')'} |
| | | <CloseOutlined onClick={() => this.deleteTable(item)}/> |
| | | <div className="bottom-mask"></div> |
| | | </List.Item>} |
| | | />} |
| | | </Panel> |
| | | {/* 搜索条件添加 */} |
| | | <Panel header={this.state.dict['header.menu.form']} key="1"> |
| | |
| | | return (<SourceElement key={index} content={item}/>) |
| | | })} |
| | | </div> |
| | | <Button type="primary" block onClick={() => this.queryField('search')}>批量添加</Button> |
| | | </Panel> |
| | | {/* 按钮添加 */} |
| | | <Panel header={this.state.dict['header.menu.action']} key="2"> |
| | |
| | | inputSubmit={this.handleSubmit} |
| | | wrappedComponentRef={(inst) => this.actionFormRef = inst} |
| | | /> |
| | | </Modal> |
| | | {/* 根据字段名添加显示列及搜索条件 */} |
| | | <Modal |
| | | wrapClassName="common-table-fields-modal" |
| | | title={this.state.dict['model.edit']} |
| | | visible={this.state.tableVisible} |
| | | width={'65vw'} |
| | | maskClosable={false} |
| | | cancelText={this.state.dict['model.close']} |
| | | onOk={this.addFieldSubmit} |
| | | onCancel={() => { // 取消添加 |
| | | this.setState({ |
| | | tableVisible: false |
| | | }) |
| | | }} |
| | | destroyOnClose |
| | | > |
| | | {this.state.fields && this.state.fields.length > 0 ? |
| | | <EditCard data={this.state.fields} ref="searchcard" type={'form'} dict={this.state.dict} /> : null |
| | | } |
| | | {(!this.state.fields || this.state.fields.length === 0) && |
| | | <Empty /> |
| | | } |
| | | </Modal> |
| | | {/* 按钮使用系统存储过程时,验证信息模态框 */} |
| | | <Modal |