List.js 8.5 KB
Newer Older
王绍森's avatar
王绍森 committed
1 2 3 4 5 6 7
import React, { Component, Fragment } from 'react';
import SearchDom from '@/highOrderComponent/SearchDom';
import ButtonListDom from '../ButtonListDom';
import Shell from '@/baseComponent/Shell';
import StandardTable from '@/components/StandardTable';
import PropTypes from 'prop-types';
import { deepCopy } from '@/baseComponent/utils';
8
import { handleColumns } from '@/webPublic/FormInsertDiy/AffairPage/destruction';
王绍森's avatar
王绍森 committed
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

export default class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      selectRows: [],
      formValues: this.giveDefaultValue(props),
      loading: true,
      sortGetPageFields: {},
      pagination: {
        current: 1,
        total: 1,
        pageSize: this.props.listConfig.pageSize || 10,
        pageSizeOptions: ['10', '20', '50', '100', '500'],
        showQuickJumper: true,
        onShowSizeChange: (current, size) => {
          this.pageChange(current, size);
        },
        onChange: (current, size) => {
          this.pageChange(current, size);
        },
      },
    };
  }

  giveDefaultValue = (props) => {
    // 如果设置了 giveFieldsToFormValues 则将默认值赋值给formValues
    let formValues = {};
38 39 40
    if (props.pageSearch && props.pageSearch.search && props.pageSearch.search.giveFieldsToFormValues) {
      for (let x in props.pageSearch.search.field) {
        if (props.pageSearch.search.field[x].required === true) {
王绍森's avatar
王绍森 committed
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
          formValues[x] = props.pageSearch.search.field[x].defaultValue;
        }
      }
    }
    return formValues;
  };

  giveGetPageFields = () => {
    const { listConfig, pageSearch, beforeGetPage } = this.props;
    const { pagination, formValues } = this.state;
    const search = pageSearch.search;
    let data = deepCopy(formValues);
    /** 如果配置了默认值 则 加进去 **/
    for (let item in search.field) {
      let one = search.field[item];
      if (one.required && (typeof data[item] === 'undefined')) {
        /**
         * 存在必填项 且当前必填项没有值时 则传入. 如果必填项有值则不需要修改
         * */
        data[item] = one.defaultValue;
      }
    }
    if (listConfig.paging) { // 是否分页
      data.pageSize = pagination.pageSize;
      data.pageNo = pagination.current;
    }
67
    if (search.beforeGetPage) {
王绍森's avatar
王绍森 committed
68 69 70 71 72 73 74 75 76 77
      data = search.beforeGetPage(data);
    }
    return data;
  };

  getPage = () => {
    const { listConfig, pageSearch, dataBaseId, workId, addFields } = this.props;
    const { pagination, sortGetPageFields } = this.state;
    const { search } = pageSearch;
    let data = this.giveGetPageFields();
78
    if (!data) {
王绍森's avatar
王绍森 committed
79 80
      return false;
    }
81
    if (search.handleSort) {
王绍森's avatar
王绍森 committed
82 83 84
      data = {
        ...data,
        ...sortGetPageFields, // 增加排序的搜索条件
85
      };
王绍森's avatar
王绍森 committed
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
    }
    this.setState({
      list: [],
      loading: true,
    });
    search.getPageService({ ...data, appId: workId }).then((response) => {
      this.setState({
        loading: false,
      });
      if (!response || (search.paging && typeof response.total === 'undefined') || response.errMsg) {
        return false;
      }
      if (listConfig.paging) {
        pagination.total = Number(response.total);
      }
      if (typeof search.responseCallBack !== 'undefined') {
        response = search.responseCallBack(response);
      }
      this.setState({
        list: response.rows || response,
        selectRows: [],
        pagination: pagination,
      });
    });
  };

  stateChange = (key, value) => {
    this.setState({
      [key]: value,
    });
  };

  pageChange = (current, size) => {
    this.setState({
      pagination: {
        ...this.state.pagination,
        current: current,
        pageSize: size,
      },
    }, () => {
      this.getPage();
    });
  };

  formStateChange = (value, key) => {
    const { search } = this.props.pageSearch;
    const { condition } = search;
    let oldValue = this.state.formValues;
    oldValue[key] = value;
    /**
     * 如果设置了beforeChange回调函数 则调用此回调函数改变另外的字段的值
     * */
138
    const index = condition.findIndex((item) => {
王绍森's avatar
王绍森 committed
139 140
      return item.key === key;
    });
141
    if (index !== -1) {
王绍森's avatar
王绍森 committed
142
      const thisConfig = condition[index];
143 144
      if (thisConfig.beforeChange) {
        oldValue = thisConfig.beforeChange(oldValue, thisConfig);
王绍森's avatar
王绍森 committed
145 146 147 148
      }
    }
    this.setState({
      formValues: oldValue,
149 150
    }, () => {
      if (search.afterFormValuesChange) {
王绍森's avatar
王绍森 committed
151 152 153 154 155 156 157 158 159 160 161 162 163
        search.afterFormValuesChange(key, oldValue, this.getPage);
      }
    });
  };

  handleSelectRows = rows => {
    this.setState({
      selectRows: rows,
    });
  };

  componentDidMount() {
    const { search } = this.props.pageSearch;
164
    if (!search.noNeedInitData) {
王绍森's avatar
王绍森 committed
165 166 167 168 169 170 171
      this.getPage();
    }
  }

  componentWillMount() {
  }

172
  componentWillUnmount() {
王绍森's avatar
王绍森 committed
173 174 175 176 177
  }

  resetFormValues = () => {
    const { beforeResetFormValues } = this.props.pageSearch.search;
    let { formValues } = this.state;
178 179 180 181
    if (beforeResetFormValues) {
      formValues = beforeResetFormValues(formValues);
    } else {
      formValues = {};
王绍森's avatar
王绍森 committed
182 183 184
    }
    this.setState({
      formValues,
185
    });
王绍森's avatar
王绍森 committed
186 187 188 189 190 191 192
  };

  /**
   * 处理排序
   * */
  handleOnChange = (pagination, filters, sorter) => {
    const { pageSearch } = this.props;
193
    if (sorter) {
王绍森's avatar
王绍森 committed
194 195 196
      const sortGetPageFields = pageSearch.search.handleSort(sorter);
      this.setState({
        sortGetPageFields,
197
      }, () => {
王绍森's avatar
王绍森 committed
198
        this.getPage();
199
      });
王绍森's avatar
王绍森 committed
200 201 202 203 204
    }
  };

  render() {
    const { formValues, selectRows, list, pagination, loading } = this.state;
205 206 207
    const { listConfig, pageSearch, pageButton, children, addFields } = this.props;
    let { columns, search } = pageSearch;
    columns = handleColumns(columns);
王绍森's avatar
王绍森 committed
208 209

    let data = list;
210 211 212
    for (let item of addFields) {
      if (item.type === 'tableSelect' && item.c1) {
        for (let i = 0; i < data.length; i++) {
王绍森's avatar
王绍森 committed
213
          let nameKey = item.componentProps.labelName;
214
          if (data[i][item.c1] && data[i][item.c1].selects) {
王绍森's avatar
王绍森 committed
215
            let res = [];
216 217
            for (let x in data[i][item.c1].selects) {
              res.push(data[i][item.c1].selects[x][nameKey]);
王绍森's avatar
王绍森 committed
218 219 220 221 222 223 224 225 226
            }
            data[i][item.c1] = res.join(',');
          }
        }
      }
    }
    const tableProps = {
      rowKey: pageSearch.tableRowKey || 'id',
      selectedRows: selectRows,
227
      data: { list: data, pagination },
王绍森's avatar
王绍森 committed
228 229 230 231 232 233
      columns,
      bordered: pageSearch.bordered || false,
      loading,
      noSelectRow: !listConfig.selectRows,
      onSelectRow: this.handleSelectRows,
    };
234 235
    if (!listConfig.paging) {
      tableProps.data = { list: data, pagination: false };
王绍森's avatar
王绍森 committed
236
    }
237
    if (search && search.handleSort) {
王绍森's avatar
王绍森 committed
238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285
      tableProps.onChange = this.handleOnChange;
    }
    return (
      <Fragment>
        {listConfig.searchArea ?
          <SearchDom formStateChange={this.formStateChange}
                     formValues={formValues}
                     getPage={this.getPage}
                     resetFormValues={this.resetFormValues}
                     config={pageSearch.search}

          /> : null}

        <Shell>
          {listConfig.buttonArea ?
            <ButtonListDom config={pageButton}
                           handleSelectRows={this.handleSelectRows}
                           selectRows={selectRows}
                           formValues={formValues}
                           listData={list}
                           search={pageSearch.search}
                           getPage={this.getPage}
                           children={children}

            /> : null}
          <StandardTable {...tableProps}/>
        </Shell>
      </Fragment>
    );
  }
}

List.propTypes = {
  listConfig: PropTypes.object.isRequired,
  // pageButton: PropTypes.array,
  pageSearch: PropTypes.object.isRequired,
};

List.defaultProps = {
  listConfig: {
    selectRows: true, // 是否可以行选择,
    paging: true, // 是否可以分页,
    searchArea: true, // 是否拥有 搜索区dom,
    buttonArea: true, // 是否拥有 按钮区,
  },
  pageSearch: {
    search: {
      url: '',
286
      field: {},
王绍森's avatar
王绍森 committed
287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314
      responseCallBack: (response) => {
        return response;
      },
      condition: [
        {
          key: 'studentNo',
          name: '学号',
          type: 'input',
        },
      ],
      tableRowKey: 'id',
      columns: [
        {
          title: '姓名',
          dataIndex: '',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          renderType: 'update',  // 修改
        },
      ],
      nameSpan: { big: 8, small: 9 },
      fileSpan: { big: 4, small: 4 },
    },
  },
};