Browse Source

部分样式、图标更新

zhuth 6 years ago
parent
commit
7cecd80a89

+ 3 - 2
src/components/chart/list.jsx

@@ -18,6 +18,7 @@ import DeleteBox from '../common/deleteBox/deleteBox'
 import { arrayToTree } from '../../utils/baseUtils'
 import { arrayToTree } from '../../utils/baseUtils'
 import ListFilter from '../common/listFilter/index'
 import ListFilter from '../common/listFilter/index'
 import Loading from '../common/loading/index'
 import Loading from '../common/loading/index'
+import CusIcon from '../common/cusIcon/index'
 import './list.less'
 import './list.less'
 const { Content } = Layout
 const { Content } = Layout
 const CardGrid = Card.Grid
 const CardGrid = Card.Grid
@@ -449,13 +450,13 @@ class ChartList extends React.Component {
                                     <ListFilter modelName='chart' model={chart} />
                                     <ListFilter modelName='chart' model={chart} />
                                 </Col>
                                 </Col>
                                 <Col >
                                 <Col >
-                                    <Button onClick={() => {
+                                    <Button className='tool-link' onClick={() => {
                                         dispatch({ type: 'dataSource/fetchList' });
                                         dispatch({ type: 'dataSource/fetchList' });
                                         this.setState({
                                         this.setState({
                                             visibleChooseDataSourceBox: true
                                             visibleChooseDataSourceBox: true
                                         });
                                         });
                                     }}>
                                     }}>
-                                        <Icon type="area-chart" />创建图表
+                                        <CusIcon type="bi-nav-chart" />创建图表
                                     </Button>
                                     </Button>
                                     {visibleChooseDataSourceBox && <ChooseDataSourceBox visibleChooseDataSourceBox={visibleChooseDataSourceBox} hideBox={() => {
                                     {visibleChooseDataSourceBox && <ChooseDataSourceBox visibleChooseDataSourceBox={visibleChooseDataSourceBox} hideBox={() => {
                                         this.setState({
                                         this.setState({

+ 2 - 0
src/components/common/dataPreview/dataPreview.jsx

@@ -21,6 +21,7 @@ class DataPreview extends React.Component {
 
 
     componentDidMount() {
     componentDidMount() {
         const { fetchFunction } = this.props;
         const { fetchFunction } = this.props;
+        window.setTimeout(this.onWindowResize, 200);
         window.addEventListener('resize', this.onWindowResize);
         window.addEventListener('resize', this.onWindowResize);
         typeof fetchFunction === 'function' && fetchFunction();
         typeof fetchFunction === 'function' && fetchFunction();
     }
     }
@@ -34,6 +35,7 @@ class DataPreview extends React.Component {
     onWindowResize = () => {
     onWindowResize = () => {
         const boxEl = document.getElementsByClassName('datapreview')[0];
         const boxEl = document.getElementsByClassName('datapreview')[0];
         const tableHeaderEl = boxEl.getElementsByTagName('thead')[0];
         const tableHeaderEl = boxEl.getElementsByTagName('thead')[0];
+        console.log('onWindowResize');
 
 
         this.setState({
         this.setState({
             screenWidth: document.documentElement.clientWidth || document.body.clientWidth, // 屏幕宽
             screenWidth: document.documentElement.clientWidth || document.body.clientWidth, // 屏幕宽

+ 2 - 2
src/components/dashboard/list.jsx

@@ -362,11 +362,11 @@ class DashboardList extends React.Component {
                                     <ListFilter modelName='dashboard' model={dashboard}/>
                                     <ListFilter modelName='dashboard' model={dashboard}/>
                                 </Col>
                                 </Col>
                                 <Col>
                                 <Col>
-                                    <Button disabled={!currentMenu || currentMenu.code === '-1'} onClick={() => {
+                                    <Button className='tool-link' disabled={!currentMenu || currentMenu.code === '-1'} onClick={() => {
                                         dispatch({ type: 'dashboardDesigner/reset' });
                                         dispatch({ type: 'dashboardDesigner/reset' });
                                         dispatch({ type: 'dashboard/remoteQucikAdd', menuCode: currentMenu.code });
                                         dispatch({ type: 'dashboard/remoteQucikAdd', menuCode: currentMenu.code });
                                     }}>
                                     }}>
-                                        <Icon type="layout" />创建报表
+                                        <CusIcon type='bi-nav-dashboard'/>创建报表
                                     </Button>
                                     </Button>
                                 </Col>
                                 </Col>
                             </Col>
                             </Col>

+ 2 - 2
src/components/dashboard/menu.jsx

@@ -96,7 +96,7 @@ class DashboardMenu extends React.Component {
             let title = <div className={`node-title node-${t.type}`}>
             let title = <div className={`node-title node-${t.type}`}>
                 <span>{ (t.code !== editingKey) ?
                 <span>{ (t.code !== editingKey) ?
                    ( !!regLabel && (searchMenu || t.type === 'dashboard') ? (<div className='label'> <span title={t.name} style={{ fontWeight: t.type === 'dashboard' ? 'bold' : 'normal' }}>
                    ( !!regLabel && (searchMenu || t.type === 'dashboard') ? (<div className='label'> <span title={t.name} style={{ fontWeight: t.type === 'dashboard' ? 'bold' : 'normal' }}>
-                        { t.type === 'dashboard' && <CusIcon style={{ marginRight: '8px' }} type="bi-dashboard" /> }
+                        { t.type === 'dashboard' && <CusIcon style={{ marginRight: '8px' }} type="bi-nav-dashboard" /> }
                         { (t.name || '').split(new RegExp(`(${regLabel})`, 'i')).map((fragment, i) => {
                         { (t.name || '').split(new RegExp(`(${regLabel})`, 'i')).map((fragment, i) => {
                             return (
                             return (
                                 fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'), '\\$1') === regLabel.toLowerCase() ?
                                 fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'), '\\$1') === regLabel.toLowerCase() ?
@@ -125,7 +125,7 @@ class DashboardMenu extends React.Component {
                         }
                         }
                     }}>
                     }}>
                         <span title={t.name} style={{ fontWeight: t.type === 'dashboard' ? 'bold' : 'normal' }}>
                         <span title={t.name} style={{ fontWeight: t.type === 'dashboard' ? 'bold' : 'normal' }}>
-                            { t.type === 'dashboard' && <CusIcon style={{ marginRight: '8px' }} type="bi-dashboard" /> }
+                            { t.type === 'dashboard' && <CusIcon style={{ marginRight: '8px' }} type="bi-nav-dashboard" /> }
                             { t.name }
                             { t.name }
                         </span>
                         </span>
                     </div> ) : ( <div className='input'>
                     </div> ) : ( <div className='input'>

+ 2 - 2
src/components/dashboardDesigner/viewLayout.jsx

@@ -82,12 +82,12 @@ class ViewLayout extends React.PureComponent {
                         </div>
                         </div>
                     </div>
                     </div>
                     <div className='chart-tools'>
                     <div className='chart-tools'>
-                        {viewType !== 'richText' && <Icon className={iconCls} type="reload" theme="outlined" onClick={() => {
+                        {viewType !== 'richText' && <Icon className={iconCls} type="sync" theme="outlined" onClick={() => {
                             let page = chartOption ? chartOption.page : 1;
                             let page = chartOption ? chartOption.page : 1;
                             let pageSize = chartOption ? chartOption.pageSize : (~~((layout.h * minLayoutHeight + (layout.h - 1) * 12 - 20 - 40 - 24 - 8 * 2)/38) + 1)
                             let pageSize = chartOption ? chartOption.pageSize : (~~((layout.h * minLayoutHeight + (layout.h - 1) * 12 - 20 - 40 - 24 - 8 * 2)/38) + 1)
                             dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: true, page, pageSize });
                             dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: true, page, pageSize });
                         }}/>}
                         }}/>}
-                        {!isPreview && viewType !== 'richText' && <Icon className={iconCls} type="arrows-alt" onClick={() => this.showPreviewBox(item)}/>}
+                        {!isPreview && viewType !== 'richText' && <Icon className={iconCls} type="fullscreen" onClick={() => this.showPreviewBox(item)}/>}
                         {editMode && !isPreview && (item.creatorCode === currentUser.code || currentUser.role === 'superAdmin') && viewType !== 'richText' &&  <Icon className={iconCls} type='edit' onClick={() => {
                         {editMode && !isPreview && (item.creatorCode === currentUser.code || currentUser.role === 'superAdmin') && viewType !== 'richText' &&  <Icon className={iconCls} type='edit' onClick={() => {
                             dispatch({ type: 'dashboard/remoteModify',hideMessage:true });
                             dispatch({ type: 'dashboard/remoteModify',hideMessage:true });
                             dispatch({ type: 'dashboardDesigner/reset' });
                             dispatch({ type: 'dashboardDesigner/reset' });

+ 3 - 2
src/components/dataConnect/list.jsx

@@ -7,6 +7,7 @@ import DataConnectBox from '../dataSourceDetail/dataConnectBox'
 import ListFilter from '../common/listFilter/index'
 import ListFilter from '../common/listFilter/index'
 import Loading from '../common/loading/index'
 import Loading from '../common/loading/index'
 import './list.less'
 import './list.less'
+import CusIcon from '../common/cusIcon';
 const CardGrid = Card.Grid
 const CardGrid = Card.Grid
 const { Content } = Layout
 const { Content } = Layout
 const { Option } = Select
 const { Option } = Select
@@ -257,7 +258,7 @@ class DataConnect extends React.Component {
                                     <ListFilter modelName='dataConnect' model={dataConnect} />
                                     <ListFilter modelName='dataConnect' model={dataConnect} />
                                 </Col>
                                 </Col>
                                 <Col>
                                 <Col>
-                                    <Button className='btn-add' onClick={() => {
+                                    <Button className='btn-add tool-link' onClick={() => {
                                         // 设置新增默认值
                                         // 设置新增默认值
                                         dispatch({ type: 'dataConnect/setNewModel', model: { dbType: 'oracle', dbName: 'orcl' } });
                                         dispatch({ type: 'dataConnect/setNewModel', model: { dbType: 'oracle', dbName: 'orcl' } });
                                         dispatch({ type: 'dataConnect/setNewModelFields', fields: [
                                         dispatch({ type: 'dataConnect/setNewModelFields', fields: [
@@ -265,7 +266,7 @@ class DataConnect extends React.Component {
                                             { name: 'boxOperation', value: 'create' }
                                             { name: 'boxOperation', value: 'create' }
                                         ] });
                                         ] });
                                     }}>
                                     }}>
-                                        添加数据链接
+                                        <CusIcon type='bi-nav-dataconnect'/>添加数据链接
                                     </Button>
                                     </Button>
                                 </Col>
                                 </Col>
                             </Col>
                             </Col>

+ 3 - 2
src/components/dataSource/list.jsx

@@ -12,6 +12,7 @@ import ListFilter from '../common/listFilter/index'
 import EllipsisTooltip from '../common/ellipsisTooltip/index'
 import EllipsisTooltip from '../common/ellipsisTooltip/index'
 import Loading from '../common/loading/index'
 import Loading from '../common/loading/index'
 import './list.less'
 import './list.less'
+import CusIcon from '../common/cusIcon';
 const { Content } = Layout
 const { Content } = Layout
 const { Option } = Select
 const { Option } = Select
 
 
@@ -421,8 +422,8 @@ class DataSource extends React.Component {
                                             <Menu.Item disabled key='file'>上传文件</Menu.Item>
                                             <Menu.Item disabled key='file'>上传文件</Menu.Item>
                                         </Menu>
                                         </Menu>
                                     )} trigger={['click']}>
                                     )} trigger={['click']}>
-                                        <Button>
-                                            添加数据源
+                                        <Button className='tool-link'>
+                                            <CusIcon type='bi-nav-datasource'/>添加数据源
                                         </Button>
                                         </Button>
                                     </Dropdown>
                                     </Dropdown>
                                 </Col>
                                 </Col>

+ 1 - 1
src/components/homePage/collection.jsx

@@ -35,7 +35,7 @@ class Collection extends React.Component {
                     this.openTab(c);
                     this.openTab(c);
                 }}>
                 }}>
                     <span style={{ fontWeight: 'bold', cursor: 'pointer' }}>
                     <span style={{ fontWeight: 'bold', cursor: 'pointer' }}>
-                        <CusIcon style={{ marginRight: '8px' }} type="bi-dashboard" />
+                        <CusIcon style={{ marginRight: '8px' }} type="bi-nav-dashboard" />
                         {
                         {
                             <span>
                             <span>
                                 { (c.name || '').split(new RegExp(`(${regLabel})`, 'i')).map((fragment, i) => {
                                 { (c.name || '').split(new RegExp(`(${regLabel})`, 'i')).map((fragment, i) => {

+ 2 - 3
src/components/homePage/index.jsx

@@ -36,9 +36,8 @@ class Home extends React.Component {
         const { tabs, fixedDashboard } = home;
         const { tabs, fixedDashboard } = home;
 
 
         return tabs.map(t => (
         return tabs.map(t => (
-            // TODO 右键关闭菜单,会报错,先不启用
             <TabPane tab={this.generateTabTitle(t.name, t.code)} key={t.code} closable={!fixedDashboard || t.code !== fixedDashboard.code}>
             <TabPane tab={this.generateTabTitle(t.name, t.code)} key={t.code} closable={!fixedDashboard || t.code !== fixedDashboard.code}>
-            {/* <TabPane tab={<span><CusIcon type='bi-dashboard'/>{t.name}</span>} key={t.code}> */}
+            {/* <TabPane tab={<span><CusIcon type='bi-nav-dashboard'/>{t.name}</span>} key={t.code}> */}
                 <DashboardViewToolbar />
                 <DashboardViewToolbar />
                 <DashboardView code={t.code} config={t.config}/>
                 <DashboardView code={t.code} config={t.config}/>
             </TabPane>
             </TabPane>
@@ -47,7 +46,7 @@ class Home extends React.Component {
 
 
     generateTabTitle = (text, tabKey) => (
     generateTabTitle = (text, tabKey) => (
         <Dropdown overlay={this.generateMenu(tabKey)} trigger={["contextMenu"]}>
         <Dropdown overlay={this.generateMenu(tabKey)} trigger={["contextMenu"]}>
-            <span style={{ userSelect: "none" }}><CusIcon type='bi-dashboard'/>{text}</span>
+            <span style={{ userSelect: "none" }}><CusIcon type='bi-nav-dashboard'/>{text}</span>
         </Dropdown>
         </Dropdown>
     )
     )
 
 

+ 7 - 7
src/models/dataSource.js

@@ -787,7 +787,7 @@ export default {
                 });
                 });
                 if(!res.err && res.data.code > 0) {
                 if(!res.err && res.data.code > 0) {
                     const { columnConfig, values } = res.data.data;
                     const { columnConfig, values } = res.data.data;
-                    const columns = JSON.parse(columnConfig).map(c => ({
+                    const columns = JSON.parse(columnConfig).filter(c => c.isOpen === '1').map(c => ({
                         label: c.columnLable,
                         label: c.columnLable,
                         name: c.columnName,
                         name: c.columnName,
                         type: c.columnType,
                         type: c.columnType,
@@ -800,12 +800,12 @@ export default {
                         { name: 'pageSize', value: pageSize },
                         { name: 'pageSize', value: pageSize },
                         { name: 'total', value: total }
                         { name: 'total', value: total }
                     ] });
                     ] });
-                    // 主动触发一次window的resize事件
-                    yield window.setTimeout(() => {
-                        var e = document.createEvent("Event");
-                        e.initEvent("resize", true, true);
-                        window.dispatchEvent(e);
-                    }, 20);
+                    // // 主动触发一次window的resize事件
+                    // yield window.setTimeout(() => {
+                    //     var e = document.createEvent("Event");
+                    //     e.initEvent("resize", true, true);
+                    //     window.dispatchEvent(e);
+                    // }, 20);
                 }else {
                 }else {
                     message.error('请求数据列表失败: ' + (res.err || res.data.msg));
                     message.error('请求数据列表失败: ' + (res.err || res.data.msg));
                 }
                 }

+ 1 - 0
src/routes/mainLayout.less

@@ -1,6 +1,7 @@
 html,body,#root{
 html,body,#root{
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
+    overflow: hidden;
 }
 }
 .main-layout {
 .main-layout {
     height: 100%;
     height: 100%;

+ 19 - 21
src/themes/default/base.less

@@ -1,12 +1,3 @@
-// @import "/fonts/iconfont/custom/iconfont.css"; // 引入自定义的 iconfont
-// @import "/fonts/iconfont/default/iconfont.css"; // 引入默认的 iconfont
-
-// :global(.anticon) {
-//     &:before {
-//         font-family: "anticon", "anticon-custom" !important
-//     }
-// }
-
 // 菜单项间隔去除margin
 // 菜单项间隔去除margin
 .ant-dropdown-menu-item-divider, .ant-dropdown-menu-submenu-title-divider {
 .ant-dropdown-menu-item-divider, .ant-dropdown-menu-submenu-title-divider {
     margin: 0;
     margin: 0;
@@ -20,18 +11,25 @@
     color: rgba(0, 0, 0, 0.5);
     color: rgba(0, 0, 0, 0.5);
 }
 }
 
 
-// Button
-// .ant-btn {
-//     background: #F5FBFE;
-//     border: 1px solid #408DC6;
-// }
-// .ant-btn-primary {
-//     background-color: #1890ff;
-// }
-// .ant-btn-disabled, .ant-btn.disabled, .ant-btn[disabled], .ant-btn-disabled:hover, .ant-btn.disabled:hover, .ant-btn[disabled]:hover, .ant-btn-disabled:focus, .ant-btn.disabled:focus, .ant-btn[disabled]:focus, .ant-btn-disabled:active, .ant-btn.disabled:active, .ant-btn[disabled]:active, .ant-btn-disabled.active, .ant-btn.disabled.active, .ant-btn[disabled].active {
-//     background-color: #f5f5f5;
-//     border-color: #ccc;
-// }
+// Tools Button
+.ant-btn.tool-link {
+    background: #F5FBFE;
+    border: 1px solid #408DC6;
+    color: #408DC6;
+}
+.ant-btn-primary.tool-link {
+    background: #F5FBFE;
+    border: 1px solid #408DC6;
+    color: #408DC6;
+}
+.ant-btn.tool-link:hover {
+    color: #fff;
+    background-color: #2C82BE;
+}
+.ant-btn-disabled.tool-link, .ant-btn.disabled.tool-link, .ant-btn[disabled].tool-link, .ant-btn-disabled.tool-link:hover, .ant-btn.disabled.tool-link:hover, .ant-btn[disabled].tool-link:hover, .ant-btn-disabled.tool-link:focus, .ant-btn.disabled.tool-link:focus, .ant-btn[disabled].tool-link:focus, .ant-btn-disabled.tool-link:active, .ant-btn.disabled.tool-link:active, .ant-btn[disabled].tool-link:active, .ant-btn-disabled.active.tool-link, .ant-btn.disabled.active.tool-link, .ant-btn[disabled].active.tool-link {
+    background-color: #f5f5f5;
+    border-color: #ccc;
+}
 
 
 // Table
 // Table
 .ant-table-body {
 .ant-table-body {

+ 3 - 1
src/themes/default/home.less

@@ -73,7 +73,7 @@
     }
     }
     .content-home {
     .content-home {
         &>.ant-tabs {
         &>.ant-tabs {
-            // background: #fff;
+            background: #fff;
             &>.ant-tabs-bar {
             &>.ant-tabs-bar {
                 .ant-tabs-nav-wrap {
                 .ant-tabs-nav-wrap {
                     .ant-tabs-tab {
                     .ant-tabs-tab {
@@ -101,6 +101,8 @@
             }
             }
             &>.ant-tabs-content {
             &>.ant-tabs-content {
                 .dashboardview-toolbar {
                 .dashboardview-toolbar {
+                    padding: 8px;
+                    border-width: 0.5px;
                     // background: @content-background-color;
                     // background: @content-background-color;
                 }
                 }
             }
             }