import React, { Fragment } from 'react'; import { Divider, message, Modal, Popconfirm } from 'antd'; import moment from 'moment'; import ExportInfo from '../Export/index'; import { date, getFormArrayConfig } from '../config/index'; import { handleColumns } from '../AffairPage/destruction'; import ButtonDiy from '@/baseComponent/ButtonDiy'; import Shell from '../Shell'; import FormArray from '../AffairPage/component/FormArray'; import Edit from '../Edit/index'; import ImportUtil from '../ImportUtil/ImportUtil'; import SearchDom from '@/highOrderComponent/SearchDom'; import StandardTable from '@/components/StandardTable'; import { getHead, fetchData, deleteItem, add, getDetailId } from './services'; import router from 'umi/router'; const getValue = (obj) => Object.keys(obj) .map((key) => obj[key]) .join(','); const CreateForm = (props) => { const { modalVisible, handleAdd, formData, isAdd, handleModalVisible, formItem, changeFormData, } = props; // 通过回调 const okHandle = () => { handleAdd({}, isAdd); }; // 需要获取动态表单 return ( <Modal width="1000px" maskClosable={false} destroyOnClose title={isAdd ? '新增' : '编辑'} visible={modalVisible} onOk={okHandle} onCancel={() => handleModalVisible()}> <FormArray config={getFormArrayConfig(formItem)} value={formData} fileSpan={{ big: 2, small: 2 }} changeValue={changeFormData} /> <div style={{ clear: 'both' }} /> </Modal> ); }; class FormList extends React.Component { constructor(props) { super(props); this.state = { modalVisible: false, formData: null, formItem: [], searchConfig: [], formValues: {}, isAdd: false, selectedRows: [], primaryKey: null, showEdit: false, pageData: { list: [], pagination: {}, }, }; this.columns = []; } // 渲染值 componentDidMount() { this.getTableHead(); } getTableHead = () => { const { objId, Authority, handleColumnsDiy } = this.props; getHead({ dataObjId: objId }, (datas) => { if (!datas) return; let findPrimaryKey = datas.find((x) => { return x.isPrimaryKey === true; }); if (findPrimaryKey) { this.setState({ primaryKey: findPrimaryKey.name, }); } else { console.error('没有数据主键,无法执行删除操作'); } datas = datas.filter((x) => { return x.isHidden !== true; }); for (let item of datas) { item.extendType = item.extendTypeId; item.dataIndex = item.name; item.dataType = item.type; } datas = handleColumns(datas); if (handleColumnsDiy) { datas = handleColumnsDiy(datas); } if (Authority && Authority.auditDetail) { //流程审核详情 和 编辑,查看 不能 同时存在. datas.push({ dataIndex: 'auditProcessDetail', title: '审核详情', fixed: datas.length > 12 ? 'right' : false, render: (text, record) => { return ( <a onClick={() => { this.getIdByCode(record.process_biz_key); }}> 流程审核详情 </a> ); /*return (<Link to={ { pathname: './Detail', state: { record: { id: record.process_biz_key, }, }, }}> 详情 </Link>);*/ }, }); } this.columns = datas; this.setState({ formItem: datas }); let searchConfig = []; for (let item of datas) { if (item.isShowQuery) { let sear = getFormArrayConfig([item]); if (!Array.isArray(sear)) { return false; } delete sear[0].required; delete sear[0].placeholder; searchConfig.push(sear[0]); } } this.setState({ searchConfig, }); if (Authority && Authority.edit) { //编辑功能 datas.push({ dataIndex: 'operationEdit', title: '编辑', fixed: 'right', width: 60, render: (text, record) => { return <a onClick={this.modify.bind(this, record)}>编辑</a>; }, }); } this.getPage(); }); }; getIdByCode = (code) => { getDetailId({ code }, (res) => { router.push({ pathname: './Detail', state: { record: { id: res.id }, }, }); }); }; modify = (record) => { const { formItem } = this.state; if (formItem.length < 10 || true) { this.setState({ formData: { ...record }, modalVisible: true, isAdd: false, }); } else { this.setState({ formData: { ...record }, showEdit: true, }); } }; delete = (record) => { const { objId } = this.props; // 找出主键 const { primaryKey } = this.state; const Keys = {}; Keys[primaryKey] = record[primaryKey]; deleteItem({ keys: JSON.stringify(Keys), objId }, () => { this.getPage(); }); }; changeFormData = (value, key) => { this.setState(({ formData }) => ({ formData: { ...formData, [key]: value } })); }; getPage = (params, values) => { const { objId } = this.props; const { formValues, pageData: pagination } = this.state; if (params == null) { params = { pageNo: pagination.current ? pagination.current : 1, pageSize: pagination.pageSize ? pagination.pageSize : 10, ...values, }; } params = { ...params, query: JSON.stringify(formValues), }; fetchData({ ...params, dataObjId: objId }, (res) => { if (!res.rows) { console.error('分页接口rows返回null报错'); } this.setState({ pageData: { list: res.rows, pagination: { current: res.pageNo, pageSize: res.pageSize, total: Number(res.total), }, }, }); }); }; handleStandardTableChange = (pagination, filtersArg, sorter) => { const filters = Object.keys(filtersArg).reduce((obj, key) => { const newObj = { ...obj }; newObj[key] = getValue(filtersArg[key]); return newObj; }, {}); const params = { pageNo: pagination.current, pageSize: pagination.pageSize, ...filters, }; if (sorter.field) { params.sorter = `${sorter.field}_${sorter.order}`; } this.getPage(params); }; handleAdd = (fields, isAdd) => { const { formData } = this.state; const { objId } = this.props; add({ params: formData, objId, isAdd }, () => { message.success('操作成功'); this.setState({ modalVisible: false, }); this.getPage(); }); }; handleModalVisible = () => { this.setState({ modalVisible: this.state.modalVisible ? false : true, formData: {}, }); }; add = () => { const { formItem } = this.state; if (formItem.length < 10 || true) { this.setState({ modalVisible: true, formData: {}, isAdd: true, }); } else { this.setState({ formData: {}, showEdit: true, isAdd: true, }); } }; handleSelectRows = (rows) => { this.setState({ selectedRows: rows, }); }; batchDelete = (e) => { const { objId } = this.props; const { selectedRows, formItem } = this.state; if (!selectedRows || selectedRows.length < 1) { message.warning('请选择您要删除的数据'); return false; } // 找出主键 const { primaryKey } = this.state; let Keys = selectedRows.map((x) => { return x[primaryKey]; }); deleteItem( { keys: JSON.stringify({ [primaryKey]: Keys.join(',') }), objId, // isSelf: true, }, () => { this.setState({ selectedRows: [], }); this.getPage(); }, ); }; goBack = () => { router.goBack(); }; formStateChange = (value, key) => { this.setState(({ formValues }) => ({ formValues: { ...formValues, [key]: value } })); }; resetFormValues = () => { this.setState({ formValues: {}, }); }; render() { const { modalVisible, selectedRows, formItem, isAdd, pageData, showEdit, formData, primaryKey, formValues, searchConfig, } = this.state; const { objId, Authority } = this.props; const parentMethods = { handleAdd: this.handleAdd, handleModalVisible: this.handleModalVisible, formData, formItem, isAdd, changeFormData: this.changeFormData, }; return ( <> {showEdit ? ( <Edit id={objId} recordId={formData[primaryKey]} recordKey={primaryKey} returnThis={() => { this.setState({ showEdit: false, }); this.getPage(); }} /> ) : ( <Fragment> {searchConfig.length > 0 ? ( <SearchDom formStateChange={this.formStateChange} formValues={formValues} getPage={this.getPage} resetFormValues={this.resetFormValues} config={{ condition: searchConfig, fromTab: true }} /> ) : null} <Shell styleShell={searchConfig.length > 0 ? {} : { marginTop: 0 }}> <div style={{ paddingLeft: '10px', paddingTop: '10px', }}> {Authority && Authority.add === false ? null : ( <ButtonDiy icon="plus" className="primaryBlue" handleClick={this.add} name="新建" /> )} {Authority && Authority.delete === false ? null : ( <ButtonDiy handleClick={this.batchDelete} name="批量删除" /> )} {Authority && Authority.exportUtil === false ? null : <ExportInfo objId={objId} />} {Authority && Authority.importUtil === false ? null : ( <ImportUtil objId={objId} callback={this.getPage} /> )} </div> <StandardTable rowKey={primaryKey} data={pageData} scroll={{ x: true }} columns={this.columns} selectedRows={selectedRows} onSelectRow={this.handleSelectRows} onChange={this.handleStandardTableChange} /> </Shell> </Fragment> )} <CreateForm {...parentMethods} modalVisible={modalVisible} /> </> ); } } export default FormList;