| | |
| | | import { is, fromJS } from 'immutable' |
| | | import moment from 'moment' |
| | | import HTML5Backend from 'react-dnd-html5-backend' |
| | | import { Icon, notification, Modal, Collapse } from 'antd' |
| | | import html2canvas from 'html2canvas' |
| | | import { notification, Modal, Collapse, Card, Icon, Switch, Button } from 'antd' |
| | | |
| | | import Api from '@/api' |
| | | import Utils from '@/utils/utils.js' |
| | |
| | | |
| | | const Header = asyncComponent(() => import('@/menu/header')) |
| | | const MenuForm = asyncComponent(() => import('@/menu/menuform')) |
| | | // const Controller = asyncComponent(() => import('@/mob/controller')) |
| | | const SourceWrap = asyncComponent(() => import('@/mob/modelsource')) |
| | | const SourceWrap = asyncComponent(() => import('@/menu/modelsource')) |
| | | const MenuShell = asyncComponent(() => import('@/menu/menushell')) |
| | | // const DataSource = asyncComponent(() => import('@/mob/datasource')) |
| | | const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent')) |
| | | |
| | |
| | | state = { |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | MenuId: this.props.match.params.MenuId, |
| | | tableFields: [], |
| | | activeKey: 'basedata', |
| | | oriConfig: null, |
| | | parentId: '', |
| | | openEdition: '', |
| | | saveIng: false, |
| | | config: null, |
| | | editElem: null |
| | | } |
| | |
| | | } |
| | | } |
| | | |
| | | triggerSave = () => { |
| | | submitConfig = () => { |
| | | const { config, openEdition, parentId } = this.state |
| | | |
| | | this.setState({ |
| | | saveIng: true |
| | | }) |
| | | |
| | | let param = { |
| | | func: 'sPC_TrdMenu_AddUpt', |
| | |
| | | if (response.status) { |
| | | this.setState({ |
| | | oriConfig: fromJS(config).toJS(), |
| | | openEdition: response.open_edition || '', |
| | | saveIng: false |
| | | openEdition: response.open_edition || '' |
| | | }) |
| | | } else { |
| | | notification.warning({ |
| | |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | testFunc = () => { |
| | | let datas = [{ |
| | | name: 'a', |
| | | arr_field: 'MapCode,Country', |
| | | par_tablename: '', |
| | | type: '', |
| | | primaryKey: 'MapCode', |
| | | foreign_key: '', |
| | | sql: `select MapCode,Country from @tc1`, |
| | | script: `declare @tc1 table (MapCode nvarchar(50),Country nvarchar(50)) insert into @tc1 (MapCode,Country) select MapCode,Country from sMap where Province=''` |
| | | }, { |
| | | name: 'b', |
| | | arr_field: 'MapCode,Province,ParMapCode', |
| | | par_tablename: 'a', |
| | | type: 'array', |
| | | primaryKey: 'MapCode', |
| | | foreign_key: 'ParMapCode', |
| | | sql: `select MapCode,Province,ParMapCode from @tc2`, |
| | | script: `declare @tc2 table (MapCode nvarchar(50),Province nvarchar(50),ParMapCode nvarchar(50)) insert into @tc2 (MapCode,Province,ParMapCode) select MapCode,Province,ParMapCode from sMap where Province!='' and City=''` |
| | | }, { |
| | | name: 'c', |
| | | arr_field: 'MapCode,City,ParMapCode', |
| | | par_tablename: 'b', |
| | | type: 'array', |
| | | primaryKey: 'MapCode', |
| | | foreign_key: 'ParMapCode', |
| | | sql: `select MapCode,City,ParMapCode from @tc3`, |
| | | script: `declare @tc3 table (MapCode nvarchar(50),City nvarchar(50),ParMapCode nvarchar(50)) insert into @tc3 (MapCode,City,ParMapCode) select MapCode,City,ParMapCode from sMap where City!='' and Area=''` |
| | | }, { |
| | | name: 'd', |
| | | arr_field: 'MapCode,Area,ParMapCode', |
| | | par_tablename: 'c', |
| | | type: 'array', |
| | | primaryKey: 'MapCode', |
| | | foreign_key: 'ParMapCode', |
| | | sql: `select MapCode,Area,ParMapCode from sMap where Area!=''`, |
| | | script: `` |
| | | }] |
| | | |
| | | let LText = datas.map((item, index) => { |
| | | // item.par_tablename = '' |
| | | // item.foreign_key = '' |
| | | |
| | | let _orderBy = 'MapCode desc' |
| | | let _search = '' |
| | | let _sql = `select top 1000 ${item.arr_field} from (select ${item.arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from (${item.sql}) tb ${_search}) tmptable order by tmptable.rows ` |
| | | |
| | | return `Select '${item.name}' as tablename,'${window.btoa(window.encodeURIComponent(_sql))}' as LText,'${window.btoa(window.encodeURIComponent(item.script))}' as Lcustomize,'${item.type}' as table_type,'${item.primaryKey}' as primary_key,'${item.par_tablename}' as par_tablename,'${item.foreign_key}' as foreign_key,'${index}' as Sort` |
| | | }) |
| | | |
| | | let LText_field = [] |
| | | datas.forEach(item => { |
| | | item.arr_field.split(',').forEach(cell => { |
| | | LText_field.push(`Select '${item.name}' as tablename,'${cell}' as fieldname,'nvarchar(50)' as field_type`) |
| | | }) |
| | | }) |
| | | |
| | | let param = { |
| | | func: 'sPC_Get_structured_data', |
| | | LText: LText.join(' union all '), |
| | | LText_field: LText_field.join(' union all ') |
| | | } |
| | | |
| | | param.LText = Utils.formatOptions(param.LText) |
| | | param.LText_field = Utils.formatOptions(param.LText_field) |
| | | param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000' |
| | | param.secretkey = Utils.encrypt(param.LText, param.timestamp) |
| | | |
| | | Api.getLocalConfig(param) |
| | | } |
| | | |
| | | getMenuParam = () => { |
| | |
| | | }) |
| | | } |
| | | |
| | | updateStyle = (proper) => { |
| | | onEnabledChange = () => { |
| | | const { config } = this.state |
| | | |
| | | config.components = config.components.map(component => { |
| | | if (component.uuid === proper.componentId) { |
| | | Object.keys(component).forEach(key => { |
| | | let _uuid = component[key].uuid |
| | | if (_uuid && (_uuid === proper.uuid || _uuid === proper.classId)) { |
| | | if (component[key].substyle) { |
| | | |
| | | } else { |
| | | component[key].style = {...component[key].style, ...proper.style} |
| | | // eslint-disable-next-line |
| | | for (let index in component[key].style) { |
| | | if (component[key].style[index] === '') { |
| | | delete component[key].style[index] |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | return component |
| | | this.setState({ |
| | | config: {...config, enabled: !config.enabled} |
| | | }) |
| | | this.setState({config}) |
| | | } |
| | | |
| | | // 更新配置信息 |
| | | updateConfig = (config) => { |
| | | this.setState({ |
| | | config: config |
| | | }) |
| | | } |
| | | updatetable = (config) => { |
| | | // this.setState({ |
| | | // config: config |
| | | // }) |
| | | } |
| | | |
| | | save = () => { |
| | | html2canvas(document.getElementById('view')).then(canvas => { |
| | | let imgUri = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); // 获取生成的图片的url |
| | | window.location.href = imgUri; // 下载图片 |
| | | /** |
| | | * @description 更新常用表信息,快捷添加后更新配置信息 |
| | | */ |
| | | updatetable = (config, fields) => { |
| | | const { tableFields } = this.state |
| | | |
| | | this.setState({ |
| | | config: config, |
| | | tableFields: fields ? fields : tableFields |
| | | }) |
| | | } |
| | | |
| | | |
| | | |
| | | render () { |
| | | const { activeKey, saveIng, dict, MenuId, config } = this.state |
| | | const { activeKey, dict, MenuId, config } = this.state |
| | | |
| | | return ( |
| | | <div className="pc-menu-view" id="view"> |
| | | <Header view="design" closeView={this.closeView} triggerSave={this.triggerSave} saveIng={saveIng} /> |
| | | <Header view="design" closeView={this.closeView} /> |
| | | <DndProvider backend={HTML5Backend}> |
| | | <div className="menu-body"> |
| | | <div className="menu-setting"> |
| | |
| | | updateConfig={this.updateConfig} |
| | | /> |
| | | {/* 表名添加 */} |
| | | {config ? <TableComponent |
| | | config={config} |
| | | // containerId="main-basedata" |
| | | updatetable={this.updatetable} |
| | | /> : null} |
| | | {config ? <TableComponent config={config} updatetable={this.updateConfig}/> : null} |
| | | </Panel> |
| | | {/* 搜索条件添加 */} |
| | | {/* <Panel header={dict['mob.component']} key="component"> |
| | | <div className="search-element"> |
| | | {Source.searchItems.map((item, index) => (<SourceElement key={index} content={item}/>))} |
| | | </div> |
| | | <FieldsComponent |
| | | config={config} |
| | | type="search" |
| | | tableFields={this.state.tableFields} |
| | | updatefield={this.updateconfig} |
| | | /> |
| | | </Panel> */} |
| | | |
| | | {/* 组件添加 */} |
| | | <Panel header={dict['mob.component']} key="component"> |
| | | <SourceWrap /> |
| | | </Panel> |
| | | </Collapse> |
| | | {/* <Tabs defaultActiveKey="1" animated={false} size="small"> |
| | | <TabPane tab="配置" key="1"> |
| | | <Controller editElem={editElem} updateStyle={this.updateStyle} /> |
| | | </TabPane> |
| | | <TabPane tab="数据源" key="2"> |
| | | <DataSource config={config} updateConfig={this.updateConfig} /> |
| | | </TabPane> |
| | | </Tabs> */} |
| | | </div> |
| | | <div className="menu-tool"> |
| | | <div className="menu-tool-content"> |
| | | <div className="plus-content"> |
| | | <Icon type="plus-circle" />添 加 组 件 |
| | | <div className="menu-view"> |
| | | <Card title={ |
| | | <div> |
| | | {config && config.MenuName} |
| | | <Icon type="redo" style={{marginLeft: '10px'}} title="刷新标签列表" onClick={() => this.reloadTab(true)} /> |
| | | </div> |
| | | <div className="useable-component"> |
| | | <SourceWrap appType="Menu" /> |
| | | } bordered={false} extra={ |
| | | <div> |
| | | {config ? <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config.enabled} onChange={this.onEnabledChange} /> : null} |
| | | <Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{dict['mob.save']}</Button> |
| | | </div> |
| | | </div> |
| | | <div className="menu-tool-other"></div> |
| | | } style={{ width: '100%' }}> |
| | | {config ? <MenuShell config={config} handleList={this.updateConfig} /> : null} |
| | | </Card> |
| | | </div> |
| | | </div> |
| | | </DndProvider> |