List.js

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';
import { handleAudit } from '../publicApiService';
import { handleColumns } from '@/webPublic/FormInsertDiy/AffairPage/destruction';

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 = {};
		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) {
					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;
		}
		if (search.beforeGetPage) {
			data = search.beforeGetPage(data);
		}
		return data;
	};

	getPage = () => {
		const { listConfig, pageSearch, workId } = this.props;
		const { pagination, sortGetPageFields } = this.state;
		const { search } = pageSearch;
		let data = this.giveGetPageFields();
		if (!data) {
			return false;
		}
		if (search.handleSort) {
			data = {
				...data,
				...sortGetPageFields, // 增加排序的搜索条件
			};
		}
		this.setState({
			list: [],
			loading: true,
		});

		if (search.beforeSearchData && typeof search.beforeSearchData === 'function') {
			data = search.beforeSearchData(data, { ...this.props });
		}

		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回调函数 则调用此回调函数改变另外的字段的值
		 * */
		const index = condition.findIndex((item) => {
			return item.key === key;
		});
		if (index !== -1) {
			const thisConfig = condition[index];
			if (thisConfig.beforeChange) {
				oldValue = thisConfig.beforeChange(oldValue, thisConfig);
			}
		}
		this.setState(
			{
				formValues: oldValue,
			},
			() => {
				if (search.afterFormValuesChange) {
					search.afterFormValuesChange(key, oldValue, this.getPage);
				}
			},
		);
	};

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

	componentDidMount() {
		const { search } = this.props.pageSearch;
		if (!search.noNeedInitData) {
			this.getPage();
		}
	}

	componentWillMount() {}

	componentWillUnmount() {}

	resetFormValues = () => {
		const { beforeResetFormValues } = this.props.pageSearch.search;
		let { formValues } = this.state;
		if (beforeResetFormValues) {
			formValues = beforeResetFormValues(formValues);
		} else {
			formValues = {};
		}
		this.setState({
			formValues,
		});
	};

	/**
	 * 处理排序
	 * */
	handleOnChange = (pagination, filters, sorter) => {
		const { pageSearch } = this.props;
		if (sorter) {
			const sortGetPageFields = pageSearch.search.handleSort(sorter);
			this.setState(
				{
					sortGetPageFields,
				},
				() => {
					this.getPage();
				},
			);
		}
	};

	pageButton = () => {
		return [];
		const { list } = this.state;
		let re = {};
		let buttonConfig = [];
		for (let item of list) {
			if (item.btns && Array.isArray(item.btns)) {
				for (let x of item.btns) {
					if (typeof re[x.name] === 'undefined') {
						re[x.name] = x;
					}
				}
			}
		}
		for (let z in re) {
			let info = re[z];
			buttonConfig.push({
				type: z,
				name: z,
				component: 'ModalBatch',
				className: z !== '通过' ? 'defaultRed' : 'defaultBlue',
				nameSpan: { big: 4, small: 5 },
				fileSpan: { big: 1, small: 1 },
				values: {
					[info.key]: info.value,
				},
				fields: [
					{
						key: 'reason',
						name: '审核意见',
						type: 'textarea',
					},
				],
				beforeSubmit: (props, formValues) => {
					return {
						taskForm: {},
						examineMap: JSON.stringify(formValues),
					};
				},
				sourceKey: 'taskId',
				postKey: 'taskIds',
				apiServiceApi: handleAudit,
			});
		}
		return buttonConfig;
	};

	render() {
		const { formValues, selectRows, list, pagination, loading } = this.state;
		const { listConfig, pageSearch, pageButton, children, addFields } = this.props;
		let { columns, search } = pageSearch;
		columns = handleColumns(columns);

		let data = list;
		for (let item of addFields) {
			if (item.type === 'tableSelect' && item.c1) {
				for (let i = 0; i < data.length; i++) {
					let nameKey = item.componentProps.labelName;
					if (data[i][item.c1] && data[i][item.c1].selects) {
						let res = [];
						for (let x in data[i][item.c1].selects) {
							res.push(data[i][item.c1].selects[x][nameKey]);
						}
						data[i][item.c1] = res.join(',');
					}
				}
			}
		}

		const tableProps = {
			rowKey: pageSearch.tableRowKey || 'id',
			selectedRows: selectRows,
			data: { list: data, pagination },
			columns,
			bordered: pageSearch.bordered || false,
			loading,
			noSelectRow: !listConfig.selectRows,
			onSelectRow: this.handleSelectRows,
			scroll: pageSearch.scroll || { x: true },
		};
		if (!listConfig.paging) {
			tableProps.data = { list: data, pagination: false };
		}
		if (search && search.handleSort) {
			tableProps.onChange = this.handleOnChange;
		}
		return (
			<Fragment>
				{listConfig.searchArea && this.props.searchCondition?.length ? (
					<SearchDom
						formStateChange={this.formStateChange}
						formValues={formValues}
						getPage={this.getPage}
						resetFormValues={this.resetFormValues}
						config={pageSearch.search}
					/>
				) : null}

				<Shell>
					{pageButton.length ? (
						<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: '',
			field: {},
			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 },
		},
	},
};