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 {
constructor(props, context) {
super(props, context);
this.loadData = this::this.loadData;
this.state = {
filters: [],
current: 1,
pageSize: 10,
};
}
componentDidMount() {
this.loadData();
const { coordinate, params, dispatchLocal } = this.props;
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 } });
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 } });
}
}
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 = {
dataSource: list,
...props,
columns,
filters: this.state.filters.map(filter => filter.filter),
loading: this.props.loading.effect.fetchData,
filters: filters.map(filter => filter.filter),
loading: this.props.loading.model,
pagination: {
current: this.state.current,
current,
total: num,
pageSize: this.state.pageSize,
pageSize,
},
onChange: (pagination, filters, sorter) => {
this.setState({
current: pagination.current,
pageSize: pagination.pageSize,
}, () => {
this.loadData();
});
onChange: (pagination, theFilters, sorter) => {
if (current !== pagination.current) {
dispatchLocal({ type: 'changeCurrentPage', payload: pagination.current });
}
if (pageSize !== pagination.pageSize) {
dispatchLocal({ type: 'changePageSize', payload: pagination.pageSize });
}
const { field, order } = sorter;
if (field) {
dispatchLocal({ type: 'doSort', payload: { field, order } });
}
},
onFilter: (filters) => {
this.setState({
filters,
current: 1,
}, () => {
this.loadData();
});
onFilter: (theFilters) => {
dispatchLocal({ type: 'doFilter', payload: theFilters });
},
};
return (
......
src/components/table/dstable/model.js
浏览文件 @ 905e59ec
......@@ -53,6 +53,14 @@ const makeProps = (meta) => {
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) => {
return (meta.properties || [])
.filter(property => !property.skip)
......@@ -94,10 +102,18 @@ const makeColumns = (meta) => {
if (!c1Right && c2Right) {
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) => {
if (dataType === 'TABLE') {
const data = (arrayData || []).map(() => ({}));
......@@ -125,17 +141,102 @@ const getArrayData = ({ dataType, arrayData, singularData }, meta) => {
const modelCreator = () => {
const name = 'model';
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 {
name,
model: {
namespace,
state: {
coordinate: null,
params: {},
meta: {},
columns: [],
props: {},
num: 0,
list: [],
filters: [],
current: 1,
pageSize: 10,
},
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 } }) {
return {
...state,
......@@ -157,17 +258,43 @@ const modelCreator = () => {
},
},
effects: {
*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) });
*doInit({ payload: { coordinate, params } }, { put, call, select }) {
yield put({ type: 'applyTarget', payload: { coordinate, params } });
yield put({ type: 'applyFilters', payload: [] });
yield put({ type: 'applyCurrentPage', payload: 1 });
yield call(loadMeta, { put, call, select });
yield call(loadData, { put, call, select });
},
*doFilter({ payload: filters }, { put, call, select }) {
yield put({ type: 'applyFilters', payload: filters });
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: {},
},
......
src/services/datasource.js
浏览文件 @ 905e59ec
......@@ -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 [
...toPairs({ pst, psz }),
...parseFilters(filters),
['stBy', stBy],
['stType', stType],
...normParams(mapKeys(params, (v, k) => `p-${k}`)),
].filter(v => v && !isUndefined((v[1])));
};
export async function calcGlobalDatasource(name, { pst, psz, filters = [], params = {} }) {
return request(`/api/datasource/${name}`, makeQueryParams({ pst, psz, filters, params }));
export async function calcGlobalDatasource(name, { pst, psz, filters = [], sortBys = [], sortTypes = [], params = {} }) {
return request(`/api/datasource/${name}`, makeQueryParams({ pst, psz, filters, sortBys, sortTypes, params }));
}
export async function countGlobalDatasource(name, { filters = [], params = {} }) {
......@@ -49,8 +55,8 @@ export async function getGlobalDatasourceMeta(name) {
return request(`/api/datasource/${name}`);
}
export async function calcModuleDatasource(mdName, dsName, { pst, psz, filters = [], params = {} }) {
return request(`/api/modules/module/${mdName}/datasource/${dsName}`, makeQueryParams({ 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, sortBys, sortTypes, params }));
}
export async function countModuleDatasource(mdName, dsName, { filters = [], params = {} }) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论