增强DsTable组件的功能

.idea/dictionaries/yaohx_169.xml

@@ -10,6 +10,7 @@
       <w>roadhog</w>
       <w>sizeme</w>
       <w>splited</w>
+      <w>unescape</w>
       <w>unnormed</w>
       <w>unregister</w>
       <w>yyyy</w>

package.json

@@ -13,7 +13,7 @@
     "install-node": "6.9.2"
   },
   "dependencies": {
-    "antd": "^2.10.4",
+    "antd": "^2.12.0",
     "babel-plugin-import": "^1.2.1",
     "babel-runtime": "^6.9.2",
     "bundle-loader": "^0.5.5",

src/components/table/dstable/index.js

@@ -5,72 +5,6 @@ import connect from '../../hoc/stateful';
 import TableEx from '../../../components/table/index';
 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 {
 
   constructor(props, context) {
@@ -86,21 +20,15 @@ class DsTable extends React.Component {
     this.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 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() {
-    const { rowKey, columns, list, num } = this.props.model;
+    const { props, columns, list, num } = this.props.model;
     const tableProps = {
       dataSource: list,
-      rowKey,
+      ...props,
       columns,
       filters: this.state.filters.map(filter => filter.filter),
       loading: this.props.loading.effect.fetchData,

src/components/table/dstable/model.js

@@ -4,46 +4,115 @@ import { datasourceApi } from '../../../services/datasource';
 
 const prefix = uuid();
 
-const getMeta = (property, name, parsed = false, defaultValue) => {
-  if (!property) {
-    return defaultValue;
+const getKeyName = (meta) => {
+  const keyProperty = _(meta.properties || [])
+    .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);
-  const result = [];
-  _.some(names, (v) => {
-    const ret = property[v];
-    if (!_.isUndefined(ret)) {
-      result.push(parsed ? JSON.parse(ret) : ret);
-      return true;
+  _.forEach(metas, (value, key) => {
+    let finalValue;
+    try {
+      finalValue = JSON.parse(value);
+    } catch (err) {
+      finalValue = value;
     }
-    return false;
+    _.set(ret, key, finalValue);
   });
-  return result.length > 0 ? result[0] : defaultValue;
+  return _.pickBy(ret, _.negate(_.isUndefined));
 };
 
-const getRowIndex = (meta) => {
-  return _(meta.properties || [])
-    .filter(property => !property.skip)
-    .findIndex(property => property.key);
+const makeProps = (meta) => {
+  if (!meta || !meta.metas) {
+    return {};
+  }
+  const props = parseMetas(meta.metas);
+  if (!props.rowKey) {
+    props.rowKey = getKeyName(meta);
+  }
+  return props;
 };
 
 const makeColumns = (meta) => {
   return (meta.properties || [])
     .filter(property => !property.skip)
-    .map((property, idx) => ({
-      title: getMeta(property, ['label', 'title'], false, property.name),
-      dataIndex: idx,
-      key: property.name,
-      filterType: getMeta(property, 'filterType'),
-      filterEnums: getMeta(property, 'filterEnums', true),
-      order: _.toNumber(getMeta(property, 'order', false, 0)),
-      group: getMeta(property, 'group'),
-    }));
+    .map((property) => {
+      const props = parseMetas(property.metas);
+      if (!props.title && props.label) {
+        props.title = props.label;
+      }
+      if (props.order === undefined) {
+        props.order = 0;
+      }
+      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) => {
   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') {
     const data = [];
     (meta.properties || [])
@@ -66,17 +135,17 @@ const modelCreator = () => {
       namespace,
       state: {
         columns: [],
-        rowKey: '',
+        props: {},
         num: 0,
         list: [],
       },
       reducers: {
-        queryMetaSuccess(state, { payload: { rowKey, columns } }) {
+        queryMetaSuccess(state, { payload: { props, columns } }) {
           return {
             ...state,
-            rowKey,
+            props,
             columns,
-          }
+          };
         },
         queryCountSuccess(state, { payload: num }) {
           return {
@@ -96,8 +165,8 @@ const modelCreator = () => {
           const options = { pst, psz, params, filters };
           const api = datasourceApi(coordinate);
           const meta = yield call(api.meta);
-          const rowKey = `${getRowIndex(meta)}`;
-          yield put({ type: 'queryMetaSuccess', payload: { rowKey, columns: makeColumns(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);

src/components/table/index.js

-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Table } from 'antd';
 import Search from './search';
 
 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) {
     super(props, context);
-    const columns = props.columns ? props.columns.map((column, index) => ({
-      key: column.dataIndex,
-      filtered: false,
-      filterDropdownVisible: false,
-      filter: props.filters ? props.filters[index] : null,
-    })) : [];
+    const columns = TableEx.initColumns(props);
     this.state = {
       columns,
     };
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.columns !== this.props.columns) {
+      const columns = TableEx.initColumns(nextProps);
+      this.setState({
+        columns,
+      });
+    }
+  }
+
   makeColumns() {
     if (!this.props.columns) {
       return [];

src/services/datasource.js

@@ -2,8 +2,8 @@ import { mapKeys, toPairs, isUndefined, isString, partial } from 'lodash';
 import request, { normParams } from '../utils/request';
 import { split } from '../utils/filter';
 
-const parseFilters = filtersIn => (filtersIn || []).map(({ key, filter }) => [
-  `f-${split(key).map(value => value.replace(/#/g, '##').replace(/|/g, '#|')).join('|')}`,
+const parseFilters = filtersIn => (filtersIn || []).filter(({ filter }) => !!filter).map(({ key, filter }) => [
+  split(key, false).map(value => `f-${value}`).join('|'),
   filter,
 ]);
 

src/utils/filter.js

@@ -26,18 +26,26 @@ const transform = (value) => {
   }
 };
 
-export const split = (value) => {
+export const split = (value, unescape = true) => {
   const ret = [];
   let offset = 0;
   let posSep = -1;
   do {
     posSep = findSep(value, offset);
     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;
     }
   } 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;
 };
 

stories/index.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { partial } from 'lodash';
 import { storiesOf } from '@storybook/react';
 
+import { DatePicker } from 'antd';
+
 import dva from 'dva';
 import createLoading from 'dva-loading';
 import DsTable from '../src/components/table/dstable';
@@ -73,8 +75,14 @@ storiesOf('a', module)
     const Comp = lazy(partial(loginIt, 'cxj', '111111', 5))(wrap()(DsTable));
     const coordinate = {
       containerType: 'module',
-      containerName: 'query-transfer-order',
-      datasourceName: 'QueryLeftHousesTranfersTable',
+      containerName: 'test',
+      datasourceName: 'QueryLeftHousesReturnTable',
     };
     return <Comp coordinate={coordinate} />;
   });
+
+const RangePicker = DatePicker.RangePicker;
+storiesOf('antd', module)
+  .add('RangePicker', () => {
+    return <RangePicker />;
+  });