Skip to content

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

增强DsTable服务端排序的功能

上级 486480ca
显示空白字符变更
内嵌 并排
正在显示 包含 178 行增加 和 46 行删除
src/components/table/dstable/index.js
浏览文件 @ 905e59ec
...@@ -9,49 +9,48 @@ class DsTable extends React.Component { ...@@ -9,49 +9,48 @@ class DsTable extends React.Component {
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.loadData = this::this.loadData;
this.state = {
filters: [],
current: 1,
pageSize: 10,
};
} }
componentDidMount() { componentDidMount() {
this.loadData(); const { coordinate, params, dispatchLocal } = this.props;
dispatchLocal({ type: 'doInit', payload: { coordinate, params } });
}
componentWillReceiveProps(nextProps) {
const { coordinate, params } = nextProps;
const { dispatchLocal } = this.props;
if (coordinate !== this.props.coordinate || params !== this.props.params) {
dispatchLocal({ type: 'doInit', payload: { coordinate, params } });
} }
loadData() {
const psz = this.state.pageSize; // eslint-disable-line no-shadow
const pst = (this.state.current - 1) * psz;
this.props.dispatchLocal({ type: 'fetchData', payload: { coordinate: this.props.coordinate, pst, psz, filters: this.state.filters } });
} }
render() { render() {
const { props, columns, list, num } = this.props.model; const { dispatchLocal } = this.props;
const { props, columns, current, pageSize, filters, list, num } = this.props.model;
const tableProps = { const tableProps = {
dataSource: list, dataSource: list,
...props, ...props,
columns, columns,
filters: this.state.filters.map(filter => filter.filter), filters: filters.map(filter => filter.filter),
loading: this.props.loading.effect.fetchData, loading: this.props.loading.model,
pagination: { pagination: {
current: this.state.current, current,
total: num, total: num,
pageSize: this.state.pageSize, pageSize,
}, },
onChange: (pagination, filters, sorter) => { onChange: (pagination, theFilters, sorter) => {
this.setState({ if (current !== pagination.current) {
current: pagination.current, dispatchLocal({ type: 'changeCurrentPage', payload: pagination.current });
pageSize: pagination.pageSize, }
}, () => { if (pageSize !== pagination.pageSize) {
this.loadData(); dispatchLocal({ type: 'changePageSize', payload: pagination.pageSize });
}); }
const { field, order } = sorter;
if (field) {
dispatchLocal({ type: 'doSort', payload: { field, order } });
}
}, },
onFilter: (filters) => { onFilter: (theFilters) => {
this.setState({ dispatchLocal({ type: 'doFilter', payload: theFilters });
filters,
current: 1,
}, () => {
this.loadData();
});
}, },
}; };
return ( return (
......
src/components/table/dstable/model.js
浏览文件 @ 905e59ec
...@@ -53,6 +53,14 @@ const makeProps = (meta) => { ...@@ -53,6 +53,14 @@ const makeProps = (meta) => {
return props; return props;
}; };
const getColumn = (columns, name) => {
return (columns || []).find(column => name === column.dataIndex);
};
const getColumnIdx = (columns, name) => {
return (columns || []).findIndex(column => name === column.dataIndex);
};
const makeColumns = (meta) => { const makeColumns = (meta) => {
return (meta.properties || []) return (meta.properties || [])
.filter(property => !property.skip) .filter(property => !property.skip)
...@@ -94,10 +102,18 @@ const makeColumns = (meta) => { ...@@ -94,10 +102,18 @@ const makeColumns = (meta) => {
if (!c1Right && c2Right) { if (!c1Right && c2Right) {
return -1; return -1;
} }
return c1.order - c2.order return c1.order - c2.order;
}); });
}; };
const getSort = (columns) => {
const column = (columns || []).find(c => c.sortOrder);
return column ? {
field: column.key,
order: column.sortOrder,
} : undefined;
};
const getArrayData = ({ dataType, arrayData, singularData }, meta) => { const getArrayData = ({ dataType, arrayData, singularData }, meta) => {
if (dataType === 'TABLE') { if (dataType === 'TABLE') {
const data = (arrayData || []).map(() => ({})); const data = (arrayData || []).map(() => ({}));
...@@ -125,17 +141,102 @@ const getArrayData = ({ dataType, arrayData, singularData }, meta) => { ...@@ -125,17 +141,102 @@ const getArrayData = ({ dataType, arrayData, singularData }, meta) => {
const modelCreator = () => { const modelCreator = () => {
const name = 'model'; const name = 'model';
const namespace = _.uniqueId(prefix); const namespace = _.uniqueId(prefix);
const loadMeta = function* loadMeta({ select, call, put }) {
const { coordinate } = yield select(state => state[namespace]);
const api = datasourceApi(coordinate);
const meta = yield call(api.meta);
yield put({ type: 'applyMeta', payload: meta });
};
const loadData = function* loadData({ select, put, call }) {
const { coordinate, params, meta, columns, filters, current, pageSize } = yield select(state => state[namespace]);
const api = datasourceApi(coordinate);
const psz = pageSize;
const pst = (current - 1) * psz;
const sort = getSort(columns);
const sortBys = sort ? [sort.field] : [];
const sortTypes = sort ? [sort.order] : [];
const options = { pst, psz, params, filters, sortBys, sortTypes };
const num = yield call(api.count, options);
const dsb = yield call(api.query, options);
const list = getArrayData(dsb, meta);
yield put({ type: 'applyData', payload: { num, list } });
};
return { return {
name, name,
model: { model: {
namespace, namespace,
state: { state: {
coordinate: null,
params: {},
meta: {},
columns: [], columns: [],
props: {}, props: {},
num: 0, num: 0,
list: [], list: [],
filters: [],
current: 1,
pageSize: 10,
}, },
reducers: { reducers: {
applyTarget(state, { payload: { coordinate, params } }) {
return {
...state,
coordinate,
params,
};
},
applyFilters(state, { payload: filters }) {
return {
...state,
filters,
};
},
changeSorts(state, { payload: { field, order } }) {
const idx = getColumnIdx(state.columns, field);
if (idx !== -1) {
const columns = [...state.columns];
for (let i = 0; i < columns.length; ++i) {
if (i !== idx) {
columns[i].sortOrder = false;
} else {
columns[i].sortOrder = order;
}
}
return {
...state,
columns,
};
} else {
return state;
}
},
applyCurrentPage(state, { payload: current }) {
return {
...state,
current,
};
},
applyPageSize(state, { payload: pageSize }) {
return {
...state,
pageSize,
};
},
applyMeta(state, { payload: meta }) {
return {
...state,
meta,
props: makeProps(meta),
columns: makeColumns(meta),
};
},
applyData(state, { payload: { num, list } }) {
return {
...state,
num,
list,
};
},
queryMetaSuccess(state, { payload: { props, columns } }) { queryMetaSuccess(state, { payload: { props, columns } }) {
return { return {
...state, ...state,
...@@ -157,17 +258,43 @@ const modelCreator = () => { ...@@ -157,17 +258,43 @@ const modelCreator = () => {
}, },
}, },
effects: { effects: {
*fetchData({ payload: { coordinate, pst, psz, params, filters} }, { put, call }) { *doInit({ payload: { coordinate, params } }, { put, call, select }) {
const options = { pst, psz, params, filters }; yield put({ type: 'applyTarget', payload: { coordinate, params } });
const api = datasourceApi(coordinate); yield put({ type: 'applyFilters', payload: [] });
const meta = yield call(api.meta); yield put({ type: 'applyCurrentPage', payload: 1 });
const props = makeProps(meta); yield call(loadMeta, { put, call, select });
yield put({ type: 'queryMetaSuccess', payload: { props, columns: makeColumns(meta) } }); yield call(loadData, { put, call, select });
const num = yield call(api.count, options); },
yield put({ type: 'queryCountSuccess', payload: num }); *doFilter({ payload: filters }, { put, call, select }) {
const dsb = yield call(api.query, options); yield put({ type: 'applyFilters', payload: filters });
yield put({ type: 'queryTasksSuccess', payload: getArrayData(dsb, meta) }); yield put({ type: 'applyCurrentPage', payload: 1 });
yield call(loadData, { put, call, select });
},
*doSort({ payload: { field, order } }, { put, call, select }) {
yield put({ type: 'changeSorts', payload: { field, order } });
yield put({ type: 'applyCurrentPage', payload: 1 });
yield call(loadData, { put, call, select });
},
*changeCurrentPage({ payload: current }, { put, call, select }) {
yield put({ type: 'applyCurrentPage', payload: current });
yield call(loadData, { put, call, select });
},
*changePageSize({ payload: pageSize }, { put, call, select }) {
yield put({ type: 'applyCurrentPage', payload: 1 });
yield put({ type: 'applyPageSize', payload: pageSize });
yield call(loadData, { put, call, select });
}, },
// *fetchData({ payload: { coordinate, pst, psz, params, filters} }, { put, call }) {
// const options = { pst, psz, params, filters };
// const api = datasourceApi(coordinate);
// const meta = yield call(api.meta);
// const props = makeProps(meta);
// yield put({ type: 'queryMetaSuccess', payload: { props, columns: makeColumns(meta) } });
// const num = yield call(api.count, options);
// yield put({ type: 'queryCountSuccess', payload: num });
// const dsb = yield call(api.query, options);
// yield put({ type: 'queryTasksSuccess', payload: getArrayData(dsb, meta) });
// },
}, },
subscriptions: {}, subscriptions: {},
}, },
......
src/services/datasource.js
浏览文件 @ 905e59ec
...@@ -29,16 +29,22 @@ export const datasourceApi = (coordinate) => { ...@@ -29,16 +29,22 @@ export const datasourceApi = (coordinate) => {
} }
}; };
const makeQueryParams = ({ pst, psz, filters = [], params = {} }) => { const makeQueryParams = ({ pst, psz, filters = [], sortBys = [], sortTypes = [], params = {} }) => {
let stBy = sortBys.join(',');
stBy = stBy || undefined;
let stType = sortTypes.join(',');
stType = stType || undefined;
return [ return [
...toPairs({ pst, psz }), ...toPairs({ pst, psz }),
...parseFilters(filters), ...parseFilters(filters),
['stBy', stBy],
['stType', stType],
...normParams(mapKeys(params, (v, k) => `p-${k}`)), ...normParams(mapKeys(params, (v, k) => `p-${k}`)),
].filter(v => v && !isUndefined((v[1]))); ].filter(v => v && !isUndefined((v[1])));
}; };
export async function calcGlobalDatasource(name, { pst, psz, filters = [], params = {} }) { export async function calcGlobalDatasource(name, { pst, psz, filters = [], sortBys = [], sortTypes = [], params = {} }) {
return request(`/api/datasource/${name}`, makeQueryParams({ pst, psz, filters, params })); return request(`/api/datasource/${name}`, makeQueryParams({ pst, psz, filters, sortBys, sortTypes, params }));
} }
export async function countGlobalDatasource(name, { filters = [], params = {} }) { export async function countGlobalDatasource(name, { filters = [], params = {} }) {
...@@ -49,8 +55,8 @@ export async function getGlobalDatasourceMeta(name) { ...@@ -49,8 +55,8 @@ export async function getGlobalDatasourceMeta(name) {
return request(`/api/datasource/${name}`); return request(`/api/datasource/${name}`);
} }
export async function calcModuleDatasource(mdName, dsName, { pst, psz, filters = [], params = {} }) { export async function calcModuleDatasource(mdName, dsName, { pst, psz, filters = [], sortBys = [], sortTypes = [], params = {} }) {
return request(`/api/modules/module/${mdName}/datasource/${dsName}`, makeQueryParams({ pst, psz, filters, params })); return request(`/api/modules/module/${mdName}/datasource/${dsName}`, makeQueryParams({ pst, psz, filters, sortBys, sortTypes, params }));
} }
export async function countModuleDatasource(mdName, dsName, { filters = [], params = {} }) { export async function countModuleDatasource(mdName, dsName, { filters = [], params = {} }) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论