Skip to content

A
app-manage-console
提交 8f5a5b32 authored 作者: vipcxj's avatar vipcxj
浏览文件
操作

增强DsTable组件的功能

上级 82a8f518
隐藏空白字符变更
内嵌 并排
正在显示 包含 152 行增加 和 122 行删除
.idea/dictionaries/yaohx_169.xml
浏览文件 @ 8f5a5b32
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
<w>roadhog</w> <w>roadhog</w>
<w>sizeme</w> <w>sizeme</w>
<w>splited</w> <w>splited</w>
<w>unescape</w>
<w>unnormed</w> <w>unnormed</w>
<w>unregister</w> <w>unregister</w>
<w>yyyy</w> <w>yyyy</w>
......
package.json
浏览文件 @ 8f5a5b32
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
"install-node": "6.9.2" "install-node": "6.9.2"
}, },
"dependencies": { "dependencies": {
"antd": "^2.10.4", "antd": "^2.12.0",
"babel-plugin-import": "^1.2.1", "babel-plugin-import": "^1.2.1",
"babel-runtime": "^6.9.2", "babel-runtime": "^6.9.2",
"bundle-loader": "^0.5.5", "bundle-loader": "^0.5.5",
......
src/components/table/dstable/index.js
浏览文件 @ 8f5a5b32
...@@ -5,72 +5,6 @@ import connect from '../../hoc/stateful'; ...@@ -5,72 +5,6 @@ import connect from '../../hoc/stateful';
import TableEx from '../../../components/table/index'; import TableEx from '../../../components/table/index';
import styles from './index.less'; import styles from './index.less';
// const columns = [{
// title: '流程',
// dataIndex: 'pName',
// key: 'pName',
// filterType: 'text',
// }, {
// title: '任务',
// dataIndex: 'nName',
// key: 'nName',
// filterType: 'text',
// }, {
// title: '状态',
// dataIndex: 'state',
// key: 'state',
// filterType: 'enum',
// filterEnums: [{
// text: '状态1',
// value: '状态1',
// }, {
// text: '状态2',
// value: '状态2',
// }, {
// text: '状态3',
// value: '状态3',
// }, {
// text: '状态4',
// value: '状态4',
// }, {
// text: '状态5',
// value: '状态5',
// }],
// }, {
// title: '日期',
// dataIndex: 'date',
// key: 'date',
// filterType: 'date',
// render(date) {
// return date.format(config.defaultDateTimeFormat);
// },
// }, {
// title: '期限',
// dataIndex: 'deadline',
// key: 'deadline',
// render(deadline) {
// const now = moment();
// const late = deadline.diff(now, 'days', true);
// if (late < 0) {
// const style = {
// color: '#f04134',
// };
// return <span style={style}>{ `超时 ${deadline.from(now, true)}` }</span>;
// } else if (late < 1) {
// const style = {
// color: '#ffbf00',
// };
// return <span style={style}>{ `仅剩 ${deadline.to(now, true)}` }</span>;
// } else {
// const style = {
// color: '#00a854',
// };
// return <span style={style}>{ `还剩 ${deadline.to(now, true)}` }</span>;
// }
// },
// }];
class DsTable extends React.Component { class DsTable extends React.Component {
constructor(props, context) { constructor(props, context) {
...@@ -86,21 +20,15 @@ class DsTable extends React.Component { ...@@ -86,21 +20,15 @@ class DsTable extends React.Component {
this.loadData(); this.loadData();
} }
loadData() { loadData() {
const filters0 = this.state.filters
.filter(({ filter }) => !!filter)
.map(({ key, filter }) => ([
`f-${key}`,
filter,
]));
const psz = this.state.pageSize; // eslint-disable-line no-shadow const psz = this.state.pageSize; // eslint-disable-line no-shadow
const pst = (this.state.current - 1) * psz; const pst = (this.state.current - 1) * psz;
this.props.dispatchLocal({ type: 'fetchData', payload: { coordinate: this.props.coordinate, pst, psz, filters: filters0 } }); this.props.dispatchLocal({ type: 'fetchData', payload: { coordinate: this.props.coordinate, pst, psz, filters: this.state.filters } });
} }
render() { render() {
const { rowKey, columns, list, num } = this.props.model; const { props, columns, list, num } = this.props.model;
const tableProps = { const tableProps = {
dataSource: list, dataSource: list,
rowKey, ...props,
columns, columns,
filters: this.state.filters.map(filter => filter.filter), filters: this.state.filters.map(filter => filter.filter),
loading: this.props.loading.effect.fetchData, loading: this.props.loading.effect.fetchData,
......
src/components/table/dstable/model.js
浏览文件 @ 8f5a5b32
...@@ -4,46 +4,115 @@ import { datasourceApi } from '../../../services/datasource'; ...@@ -4,46 +4,115 @@ import { datasourceApi } from '../../../services/datasource';
const prefix = uuid(); const prefix = uuid();
const getMeta = (property, name, parsed = false, defaultValue) => { const getKeyName = (meta) => {
if (!property) { const keyProperty = _(meta.properties || [])
return defaultValue; .filter(property => !property.skip)
.find(property => property.key);
return keyProperty ? keyProperty.name : undefined;
};
const getSource = (property) => {
if (property.filter && property.filter.source) {
let source = _.trim(property.filter.source);
if (source[0] !== '[') {
source = `[${source}]`;
}
try {
return JSON.parse(source);
} catch (err) {
return undefined;
}
}
};
const parseMetas = (metas) => {
const ret = {};
if (!metas) {
return ret;
} }
const names = _.castArray(name); _.forEach(metas, (value, key) => {
const result = []; let finalValue;
_.some(names, (v) => { try {
const ret = property[v]; finalValue = JSON.parse(value);
if (!_.isUndefined(ret)) { } catch (err) {
result.push(parsed ? JSON.parse(ret) : ret); finalValue = value;
return true;
} }
return false; _.set(ret, key, finalValue);
}); });
return result.length > 0 ? result[0] : defaultValue; return _.pickBy(ret, _.negate(_.isUndefined));
}; };
const getRowIndex = (meta) => { const makeProps = (meta) => {
return _(meta.properties || []) if (!meta || !meta.metas) {
.filter(property => !property.skip) return {};
.findIndex(property => property.key); }
const props = parseMetas(meta.metas);
if (!props.rowKey) {
props.rowKey = getKeyName(meta);
}
return props;
}; };
const makeColumns = (meta) => { const makeColumns = (meta) => {
return (meta.properties || []) return (meta.properties || [])
.filter(property => !property.skip) .filter(property => !property.skip)
.map((property, idx) => ({ .map((property) => {
title: getMeta(property, ['label', 'title'], false, property.name), const props = parseMetas(property.metas);
dataIndex: idx, if (!props.title && props.label) {
key: property.name, props.title = props.label;
filterType: getMeta(property, 'filterType'), }
filterEnums: getMeta(property, 'filterEnums', true), if (props.order === undefined) {
order: _.toNumber(getMeta(property, 'order', false, 0)), props.order = 0;
group: getMeta(property, 'group'), }
})); if (props.visible === undefined) {
props.visible = true;
}
if (!props.visible) {
props.colSpan = 0;
}
if ((props.fixed === true || props.fixed === 'left' || props.fixed === 'right') && props.width === undefined) {
props.width = 150;
}
return _.pickBy({
...props,
dataIndex: property.name,
key: property.name,
filterType: property.filter ? property.filter.type : undefined,
filterEnums: getSource(property),
}, _.negate(_.isUndefined));
})
.sort((c1, c2) => {
const c1Left = c1.fixed === true || c1.fixed === 'left';
const c1Right = c1.fixed === 'right';
const c2Left = c2.fixed === true || c2.fixed === 'left';
const c2Right = c2.fixed === 'right';
if (c1Left && !c2Left) {
return -1;
}
if (!c1Left && c2Left) {
return 1;
}
if (c1Right && !c2Right) {
return 1;
}
if (!c1Right && c2Right) {
return -1;
}
return c1.order - c2.order
});
}; };
const getArrayData = ({ dataType, arrayData, singularData }, meta) => { const getArrayData = ({ dataType, arrayData, singularData }, meta) => {
if (dataType === 'TABLE') { if (dataType === 'TABLE') {
return (arrayData && arrayData.map(v => _.toPlainObject(v))) || []; const data = (arrayData || []).map(() => ({}));
(meta.properties || [])
.filter(property => !property.skip)
.forEach((property, i) => {
data.forEach((row, j) => {
row[property.name] = arrayData[j][i]; // eslint-disable-line no-param-reassign
});
});
return data;
} else if (dataType === 'PROPERTIES') { } else if (dataType === 'PROPERTIES') {
const data = []; const data = [];
(meta.properties || []) (meta.properties || [])
...@@ -66,17 +135,17 @@ const modelCreator = () => { ...@@ -66,17 +135,17 @@ const modelCreator = () => {
namespace, namespace,
state: { state: {
columns: [], columns: [],
rowKey: '', props: {},
num: 0, num: 0,
list: [], list: [],
}, },
reducers: { reducers: {
queryMetaSuccess(state, { payload: { rowKey, columns } }) { queryMetaSuccess(state, { payload: { props, columns } }) {
return { return {
...state, ...state,
rowKey, props,
columns, columns,
} };
}, },
queryCountSuccess(state, { payload: num }) { queryCountSuccess(state, { payload: num }) {
return { return {
...@@ -96,8 +165,8 @@ const modelCreator = () => { ...@@ -96,8 +165,8 @@ const modelCreator = () => {
const options = { pst, psz, params, filters }; const options = { pst, psz, params, filters };
const api = datasourceApi(coordinate); const api = datasourceApi(coordinate);
const meta = yield call(api.meta); const meta = yield call(api.meta);
const rowKey = `${getRowIndex(meta)}`; const props = makeProps(meta);
yield put({ type: 'queryMetaSuccess', payload: { rowKey, columns: makeColumns(meta) } }); yield put({ type: 'queryMetaSuccess', payload: { props, columns: makeColumns(meta) } });
const num = yield call(api.count, options); const num = yield call(api.count, options);
yield put({ type: 'queryCountSuccess', payload: num }); yield put({ type: 'queryCountSuccess', payload: num });
const dsb = yield call(api.query, options); const dsb = yield call(api.query, options);
......
src/components/table/index.js
浏览文件 @ 8f5a5b32
import React, {Component} from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Table } from 'antd'; import { Table } from 'antd';
import Search from './search'; import Search from './search';
class TableEx extends Component { class TableEx extends Component {
static initColumns(props) {
return (props.columns || []).map((column, index) => {
const filter = props.filters ? props.filters[index] : null;
return {
key: column.dataIndex,
filtered: !!filter,
filterDropdownVisible: false,
filter,
};
});
}
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
const columns = props.columns ? props.columns.map((column, index) => ({ const columns = TableEx.initColumns(props);
key: column.dataIndex,
filtered: false,
filterDropdownVisible: false,
filter: props.filters ? props.filters[index] : null,
})) : [];
this.state = { this.state = {
columns, columns,
}; };
} }
componentWillReceiveProps(nextProps) {
if (nextProps.columns !== this.props.columns) {
const columns = TableEx.initColumns(nextProps);
this.setState({
columns,
});
}
}
makeColumns() { makeColumns() {
if (!this.props.columns) { if (!this.props.columns) {
return []; return [];
......
src/services/datasource.js
浏览文件 @ 8f5a5b32
...@@ -2,8 +2,8 @@ import { mapKeys, toPairs, isUndefined, isString, partial } from 'lodash'; ...@@ -2,8 +2,8 @@ import { mapKeys, toPairs, isUndefined, isString, partial } from 'lodash';
import request, { normParams } from '../utils/request'; import request, { normParams } from '../utils/request';
import { split } from '../utils/filter'; import { split } from '../utils/filter';
const parseFilters = filtersIn => (filtersIn || []).map(({ key, filter }) => [ const parseFilters = filtersIn => (filtersIn || []).filter(({ filter }) => !!filter).map(({ key, filter }) => [
`f-${split(key).map(value => value.replace(/#/g, '##').replace(/|/g, '#|')).join('|')}`, split(key, false).map(value => `f-${value}`).join('|'),
filter, filter,
]); ]);
......
src/utils/filter.js
浏览文件 @ 8f5a5b32
...@@ -26,18 +26,26 @@ const transform = (value) => { ...@@ -26,18 +26,26 @@ const transform = (value) => {
} }
}; };
export const split = (value) => { export const split = (value, unescape = true) => {
const ret = []; const ret = [];
let offset = 0; let offset = 0;
let posSep = -1; let posSep = -1;
do { do {
posSep = findSep(value, offset); posSep = findSep(value, offset);
if (posSep !== -1) { if (posSep !== -1) {
ret.push(transform(value.slice(offset, posSep))); if (unescape) {
ret.push(transform(value.slice(offset, posSep)));
} else {
ret.push(value.slice(offset, posSep));
}
offset = posSep + 1; offset = posSep + 1;
} }
} while (posSep !== -1); } while (posSep !== -1);
ret.push(transform(value.slice(offset))); if (unescape) {
ret.push(transform(value.slice(offset)));
} else {
ret.push(value.slice(offset));
}
return ret; return ret;
}; };
stories/index.js
浏览文件 @ 8f5a5b32
...@@ -2,6 +2,8 @@ import React from 'react'; ...@@ -2,6 +2,8 @@ import React from 'react';
import { partial } from 'lodash'; import { partial } from 'lodash';
import { storiesOf } from '@storybook/react'; import { storiesOf } from '@storybook/react';
import { DatePicker } from 'antd';
import dva from 'dva'; import dva from 'dva';
import createLoading from 'dva-loading'; import createLoading from 'dva-loading';
import DsTable from '../src/components/table/dstable'; import DsTable from '../src/components/table/dstable';
...@@ -73,8 +75,14 @@ storiesOf('a', module) ...@@ -73,8 +75,14 @@ storiesOf('a', module)
const Comp = lazy(partial(loginIt, 'cxj', '111111', 5))(wrap()(DsTable)); const Comp = lazy(partial(loginIt, 'cxj', '111111', 5))(wrap()(DsTable));
const coordinate = { const coordinate = {
containerType: 'module', containerType: 'module',
containerName: 'query-transfer-order', containerName: 'test',
datasourceName: 'QueryLeftHousesTranfersTable', datasourceName: 'QueryLeftHousesReturnTable',
}; };
return <Comp coordinate={coordinate} />; return <Comp coordinate={coordinate} />;
}); });
const RangePicker = DatePicker.RangePicker;
storiesOf('antd', module)
.add('RangePicker', () => {
return <RangePicker />;
});
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论