提交 e9b9e1a1 authored 作者: 钟是志's avatar 钟是志

26533 学生资助管理/助学贷款/助学贷款毕业生信息,2021020001 模块 按钮移动下位置

上级 16c8e292
import React, { useEffect, useRef, useState } from 'react';
import { Button } from 'antd';
import ImportUtil from '@/webPublic/one_stop_public/App/ImportUtil';
import ExportCurrentInfo from '@/webPublic/one_stop_public/App/ExportCurrentInfo';
import { Base16Encode } from '@/webPublic/one_stop_public/Base16';
export function FormListButtons(props) {
const [ConcatButtons, setConCatButtons] = useState([]);
const { btns, loading, importConfig, getPage, objId, query, custom, sql, exportConfig } = props;
const Before = btns && btns.before || [];
console.log(Before);
useEffect(() => {
let buttons = [];
buttons = Before.map((g) => {
g.ButtonType = 'Normal';
return g;
});
for (let item of importConfig) {
buttons.push({
...item,
ButtonType: 'import',
});
}
for (let item of exportConfig) {
buttons.push({
...item,
ButtonType: 'export',
});
}
buttons.sort((a, b) => {
let priorityA = a.priority || 0;
let priorityB = b.priority || 0;
return priorityA - priorityB;
});
setConCatButtons(buttons);
}, [exportConfig, importConfig, btns]);
if (!ConcatButtons || !ConcatButtons.length) {
return null;
}
return ConcatButtons.map((r, i) => {
if (r.ButtonType === 'Normal') {
return <Button {...r} loading={loading} key={r.children} />;
} else if (r.ButtonType === 'import') {
return (<ImportUtil
btn={r.btn}
key={r.btn?.name || '导入'}
ext={r.ext ? r.ext : 'xlsx'}
importConfig={r}
objId={objId}
callback={() => {
getPage();
if (r.callback && typeof r.callback === 'function') {
r.callback();
}
}}
/>);
} else if (r.ButtonType === 'export') {
return <ExportCurrentInfo
objId={objId}
key={r.children || '到处'}
query={query}
custom={custom}
index={i}
btn={r.btn}
ext={r.ext ? r.ext : 'xlsx'}
sql={Base16Encode(sql)}
/>;
}
});
// return Before.map((r) => <Button {...r} loading={loading} key={r.children} />);
}
...@@ -26,6 +26,8 @@ const text = [ ...@@ -26,6 +26,8 @@ const text = [
'TIBYTEXT', 'TIBYTEXT',
'VARBINARY', 'VARBINARY',
'VARCHAR', 'VARCHAR',
'VARCHAR2',
'NVARCHAR2',
]; ];
const number = ['BIGINT', 'DOUBLE', 'FLOAT', 'INT', 'INTEGER', 'NUMERIC', 'SMALLINT', 'TINYINT']; const number = ['BIGINT', 'DOUBLE', 'FLOAT', 'INT', 'INTEGER', 'NUMERIC', 'SMALLINT', 'TINYINT'];
......
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { import {
Button, Button,
Card, Card,
DatePicker, DatePicker,
Divider, Divider,
Form, Form,
Row, Row,
Col, Col,
Input, Input,
message, message,
Select, Select,
Tooltip, Tooltip,
Spin, Spin,
Popover, Popover,
Checkbox, Checkbox,
} from 'antd'; } from 'antd';
import { connect } from 'dva'; import { connect } from 'dva';
import PageHeaderWrapper from './PageHeaderWrapper'; import PageHeaderWrapper from './PageHeaderWrapper';
...@@ -23,19 +23,18 @@ import moment from 'moment'; ...@@ -23,19 +23,18 @@ import moment from 'moment';
import router from 'umi/router'; import router from 'umi/router';
import ExportInfo from '../../App/ExportInfo'; import ExportInfo from '../../App/ExportInfo';
import ExportCurrentInfo from '../../App/ExportCurrentInfo'; import ExportCurrentInfo from '../../App/ExportCurrentInfo';
import StatisticsInfo from '../../App/StatisticsInfo'; import StatisticsInfo from '../../App/StatisticsInfo';
import ImportUtil from '../../App/ImportUtil'; import ImportUtil from '../../App/ImportUtil';
import SearchInfo from '../../App/SearchInfo'; import SearchInfo from '../../App/SearchInfo';
import { Base16Encode } from '../../Base16/index'; import { Base16Encode } from '../../Base16/index';
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import FilePreview from '@/webPublic/one_stop_public/filePreview'; import FilePreview from '@/webPublic/one_stop_public/filePreview';
import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig'; import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
import UploadCom from '@/webPublic/one_stop_public/libs/UploadCom'; import UploadCom from '@/webPublic/one_stop_public/libs/UploadCom';
import ButtonDiy from '../../App/ButtonDiy/ButtonDiy';
import { cloneDeep } from '../../copy/index'; import { cloneDeep } from '../../copy/index';
import { getPopconfirm, getModal } from '@/webPublic/one_stop_public/utils/utils'; import { getPopconfirm, getModal } from '@/webPublic/one_stop_public/utils/utils';
import { text, number, date } from '@/webPublic/one_stop_public/libs/formList/config';
import { FormListButtons } from '@/webPublic/one_stop_public/libs/formList/SplitIndex';
const FormItem = Form.Item; const FormItem = Form.Item;
const Popconfirm = getPopconfirm(); const Popconfirm = getPopconfirm();
...@@ -43,1483 +42,1455 @@ const Modal = getModal(); ...@@ -43,1483 +42,1455 @@ const Modal = getModal();
let AllWidth = 0; // 表格总长度 let AllWidth = 0; // 表格总长度
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
const text = [
'BINARY',
'BIT',
'BLOB',
'CHAR',
'GEOMETRY',
'GEOMETRYCOLLECTION',
'JSON',
'LINESTRING',
'LONGBLOB',
'LONGTEXT',
'MEDIUMBLOB',
'MEDIUMINT',
'MEDIUMTEXT',
'MULTILINESTRING',
'MULTIPOINT',
'MULTIPOLYGON',
'POINT',
'POLYGON',
'REAL',
'DECIMAL',
'ENUM',
'SET',
'TEXT',
'TINYBLOB',
'TIBYTEXT',
'VARBINARY',
'VARCHAR',
'VARCHAR2',
'NVARCHAR2',
];
const number = [
'BIGINT',
'DOUBLE',
'FLOAT',
'INT',
'INTEGER',
'NUMERIC',
'SMALLINT',
'TINYINT',
'NUMBER',
];
const data = ['DATE', 'DATETIME', 'TIME', 'TIMESTAMP', 'YEAR'];
const CreateForm = Form.create()((props) => { const CreateForm = Form.create()((props) => {
const { const {
modalVisible, modalVisible,
form, form,
handleAdd, handleAdd,
formLoading, formData,
formData, isAdd,
isAdd, handleModalVisible,
handleModalVisible, formItem,
formItem, getItem,
getItem, isView,
isView, } = props;
} = props;
//通过回调
//通过回调 const okHandle = () => {
const okHandle = () => { form.validateFields((err, fieldsValue) => {
form.validateFields((err, fieldsValue) => { if (err) return;
if (err) return; if (isView) {
if (isView) { handleModalVisible();
handleModalVisible(); return;
return; }
} formItem.map((item, index) => {
formItem.map((item, index) => { if (item.type.indexOf('DATE') > -1) {
if (item.type.indexOf('DATE') > -1) { for (let d in fieldsValue) {
for (let d in fieldsValue) { if (item.name === d && fieldsValue[d]) {
if (item.name === d && fieldsValue[d]) { //处理日期何时入库问题
//处理日期何时入库问题 try {
try { fieldsValue[d] = fieldsValue[d].format('YYYY-MM-DD HH:mm:ss');
fieldsValue[d] = fieldsValue[d].format('YYYY-MM-DD HH:mm:ss'); } catch (e) {
} catch (e) {} }
break; break;
} }
} }
} else if (number.includes(item.type)) { } else if (number.includes(item.type)) {
for (let d in fieldsValue) { for (let d in fieldsValue) {
if (item.name === d && fieldsValue[d] == '') { if (item.name === d && fieldsValue[d] == '') {
fieldsValue[d] = null; fieldsValue[d] = null;
break; break;
} }
} }
} }
}); });
let params = { ...fieldsValue }; let params = { ...fieldsValue };
handleAdd(params, isAdd); handleAdd(params, isAdd);
}); });
}; };
//需要获取动态表单 //需要获取动态表单
return ( return (
<Modal <Modal
width="700px" width='700px'
maskClosable={false} maskClosable={false}
destroyOnClose destroyOnClose
title={isView ? '查看详情' : isAdd ? '新增' : '编辑'} title={isView ? '查看详情' : isAdd ? '新增' : '编辑'}
visible={modalVisible} visible={modalVisible}
footer={ footer={
isView isView
? null ? null
: [ : [
<Button key="back" onClick={() => handleModalVisible()}> <Button key='back' onClick={() => handleModalVisible()}>
取消 取消
</Button>, </Button>,
<Button key="submit" type="primary" onClick={okHandle}> <Button key='submit' type='primary' onClick={okHandle}>
确定 确定
</Button>, </Button>,
] ]
} }
onOk={okHandle} onOk={okHandle}
onCancel={() => handleModalVisible()}> onCancel={() => handleModalVisible()}>
{formItem.map((item, index) => {formItem.map((item, index) =>
getItem(false, form, item, isAdd, formData, { span: 5 }, { span: 15 }), getItem(false, form, item, isAdd, formData, { span: 5 }, { span: 15 }),
)} )}
</Modal> </Modal>
); );
}); });
@connect(({ formList, DataColumn, DataObj, loading }) => ({ @connect(({ formList, DataColumn, DataObj, loading }) => ({
formList, formList,
DataColumn, DataColumn,
DataObj, DataObj,
loading: loading.models.formList || loading.models.DataColumn || loading.models.DataObj, loading: loading.models.formList || loading.models.DataColumn || loading.models.DataObj,
})) }))
@Form.create() @Form.create()
class FormList extends React.Component { class FormList extends React.Component {
state = { state = {
data: { data: {
list: [], list: [],
pagination: {}, pagination: {},
}, },
selects: [], selects: [],
modalVisible: false, modalVisible: false,
formData: null, formData: null,
formValues: {}, formValues: {},
formItem: [], formItem: [],
objId: this.props.objId || (this.props.location ? this.props.location.state.id : null), objId: this.props.objId || (this.props.location ? this.props.location.state.id : null),
isAdd: false, isAdd: false,
querys: [], querys: [],
selectedRows: [], selectedRows: [],
primaryKey: null, primaryKey: null,
options: {}, options: {},
isTable: true, isTable: true,
tableWidth: 500, tableWidth: 500,
rights: this.props.rights || [], rights: this.props.rights || [],
columnRights: [], columnRights: [],
isReady: false, isReady: false,
groups: {}, groups: {},
showDiv: '', showDiv: '',
showMobileDiv: '', showMobileDiv: '',
isView: false, isView: false,
checkedList: [], // 复选框默认选中 checkedList: [], // 复选框默认选中
cacheColumns: '', // 初始表头缓存数据 后续不做增删改查 cacheColumns: '', // 初始表头缓存数据 后续不做增删改查
}; };
columns = []; columns = [];
checkList = []; // 复选框内容 checkList = []; // 复选框内容
getOptions = () => { getOptions = () => {
const refIds = []; const refIds = [];
for (var i = 0; i < this.state.formItem.length; i++) { for (var i = 0; i < this.state.formItem.length; i++) {
if ( if (
this.state.formItem[i].referenceObjId != null && this.state.formItem[i].referenceObjId != null &&
this.state.options[this.state.formItem[i].id + ''] == null this.state.options[this.state.formItem[i].id + ''] == null
) { ) {
refIds.push(this.state.formItem[i].id); refIds.push(this.state.formItem[i].id);
} }
} }
if (refIds.length > 0) { if (refIds.length > 0) {
this.props.dispatch({ this.props.dispatch({
type: 'formList/getBatchOptions', type: 'formList/getBatchOptions',
payload: { ids: refIds }, payload: { ids: refIds },
callback: (options) => { callback: (options) => {
this.setState({ options: { ...this.state.options, ...options } }); this.setState({ options: { ...this.state.options, ...options } });
}, },
}); });
} }
}; };
modify = (record) => { modify = (record) => {
// if (this.state.formItem.length < 10) { // if (this.state.formItem.length < 10) {
this.getOptions(); this.getOptions();
this.props.dispatch({ this.props.dispatch({
type: 'formList/getDetail', type: 'formList/getDetail',
payload: { payload: {
dataObjId: this.state.objId, dataObjId: this.state.objId,
key: this.state.primaryKey, key: this.state.primaryKey,
value: record[this.state.primaryKey], value: record[this.state.primaryKey],
isBase: false, isBase: false,
}, },
callback: (record2) => { callback: (record2) => {
this.setState({ this.setState({
formData: record2, formData: record2,
modalVisible: true, modalVisible: true,
isAdd: false, isAdd: false,
isView: false, isView: false,
}); });
}, },
}); });
}; };
view = (record) => { view = (record) => {
this.getOptions(); this.getOptions();
this.setState({ this.setState({
formData: record, formData: record,
modalVisible: true, modalVisible: true,
isAdd: false, isAdd: false,
isView: true, isView: true,
}); });
}; };
isJSON = (str) => { isJSON = (str) => {
if (typeof str == 'string') { if (typeof str == 'string') {
try { try {
var obj = JSON.parse(str); var obj = JSON.parse(str);
if (typeof obj == 'object' && obj) { if (typeof obj == 'object' && obj) {
return true; return true;
} else { } else {
return false; return false;
} }
} catch (e) { } catch (e) {
console.log('error:' + str + '!!!' + e); console.log('error:' + str + '!!!' + e);
return false; return false;
} }
} }
console.log('这不是个字符串'); console.log('这不是个字符串');
}; };
delete = (record) => { delete = (record) => {
//找出主键 //找出主键
let Keys = {}; let Keys = {};
Keys[this.state.primaryKey] = record[this.state.primaryKey]; Keys[this.state.primaryKey] = record[this.state.primaryKey];
this.props.dispatch({ this.props.dispatch({
type: 'formList/delete', type: 'formList/delete',
payload: { payload: {
keys: JSON.stringify(Keys), keys: JSON.stringify(Keys),
objId: this.state.objId, objId: this.state.objId,
}, },
callback: () => { callback: () => {
this.getPage(); this.getPage();
}, },
}); });
}; };
viewProcess = (record) => { viewProcess = (record) => {
const { dispatch } = this.props; const { dispatch } = this.props;
dispatch({ dispatch({
type: 'formList/getAppId', type: 'formList/getAppId',
payload: { payload: {
code: record.process_biz_key, code: record.process_biz_key,
}, },
callback: (data) => { callback: (data) => {
const domainName = sessionStorage.getItem('domainName') const domainName = sessionStorage.getItem('domainName')
? sessionStorage.getItem('domainName') ? sessionStorage.getItem('domainName')
: ''; : '';
window.open(domainName + '/portal/serviceCentre/getdetail?id=' + data.id, '_blank'); window.open(domainName + '/portal/serviceCentre/getdetail?id=' + data.id, '_blank');
//router.push({ pathname: '/portal/serviceCentre/getdetail', state: { id: data.id } }); //router.push({ pathname: '/portal/serviceCentre/getdetail', state: { id: data.id } });
}, },
}); });
}; };
/** /**
* 宽度自适应函数 * 宽度自适应函数
*/ */
resize = (e) => { resize = (e) => {
let scrollWidth = document.documentElement.clientWidth || document.body.clientWidth; //可使宽度 let scrollWidth = document.documentElement.clientWidth || document.body.clientWidth; //可使宽度
let showMobileDiv = scrollWidth - 77; let showMobileDiv = scrollWidth - 77;
if (document.querySelector('#previewDiv')) { if (document.querySelector('#previewDiv')) {
// 预览模式 // 预览模式
this.setState({ this.setState({
showMobileDiv: document.querySelector('#previewDiv').clientWidth - 77, showMobileDiv: document.querySelector('#previewDiv').clientWidth - 77,
}); });
} else { } else {
this.setState({ this.setState({
showMobileDiv, showMobileDiv,
}); });
} }
}; };
//渲染值
componentDidMount() {
//渲染值 const { dispatch, isFormCom, isSelect, callback, valueName } = this.props;
componentDidMount() { window.addEventListener('resize', this.resize);
const { dispatch, isFormCom, isSelect, callback, valueName } = this.props; // console.log('componentDidMount');
window.addEventListener('resize', this.resize); if (this.props.objCode) {
// console.log('componentDidMount'); const { dispatch, objCode, sql } = this.props;
if (this.props.objCode) {
const { dispatch, objCode, sql } = this.props; if (Number(objCode) === 1) {
this.initColumn();
if (Number(objCode) === 1) { } else {
this.initColumn(); dispatch({
} else { type: 'DataObj/findByCode',
dispatch({ payload: { objCode: this.props.objCode },
type: 'DataObj/findByCode', callback: (dataObj) => {
payload: { objCode: this.props.objCode }, this.setState({ objId: dataObj.id, isTable: dataObj.isTable }, () => {
callback: (dataObj) => { dispatch({
this.setState({ objId: dataObj.id, isTable: data.isTable }, () => { type: 'DataRight/getUserRight',
dispatch({ payload: { objId: this.state.objId },
type: 'DataRight/getUserRight', callback: (data) => {
payload: { objId: this.state.objId }, if (!this.props.rights) {
callback: (data) => { this.setState({ rights: data });
if (!this.props.rights) { }
this.setState({ rights: data }); dispatch({
} type: 'DataRight/getUserColumnRight',
dispatch({ payload: { objId: this.state.objId },
type: 'DataRight/getUserColumnRight', callback: (data) => {
payload: { objId: this.state.objId }, this.setState({ columnRights: data });
callback: (data) => { this.initColumn();
this.setState({ columnRights: data }); },
this.initColumn(); });
}, },
}); });
}, });
}); },
}); });
}, }
}); } else {
} dispatch({
} else { type: 'formList/getObjDetail',
dispatch({ payload: { id: this.state.objId },
type: 'formList/getObjDetail', callback: (data) => {
payload: { id: this.state.objId }, this.setState({ isTable: data.isTable });
callback: (data) => { },
this.setState({ isTable: data.isTable }); });
}, dispatch({
}); type: 'DataRight/getUserRight',
dispatch({ payload: { objId: this.state.objId },
type: 'DataRight/getUserRight', callback: (data) => {
payload: { objId: this.state.objId }, if (!this.props.rights) {
callback: (data) => { this.setState({ rights: data });
if (!this.props.rights) { }
this.setState({ rights: data }); dispatch({
} type: 'DataRight/getUserColumnRight',
dispatch({ payload: { objId: this.state.objId },
type: 'DataRight/getUserColumnRight', callback: (data) => {
payload: { objId: this.state.objId }, this.setState({ columnRights: data });
callback: (data) => { this.initColumn();
this.setState({ columnRights: data }); },
this.initColumn(); });
}, },
}); });
}, }
}); }
}
} /**
* 移除监听器
/** */
* 移除监听器 componentWillUnmount() {
*/ window.removeEventListener('resize', this.resize);
componentWillUnmount() { }
window.removeEventListener('resize', this.resize);
} custom = this.props.value ? JSON.stringify(this.props.value) : null;
custom = this.props.value ? JSON.stringify(this.props.value) : null; componentWillReceiveProps(nextProps) {
const b = nextProps.value || {};
componentWillReceiveProps(nextProps) {
const b = nextProps.value || {}; const a = this.props.value || {};
const a = this.props.value || {}; const jsonb = JSON.stringify(b);
const jsona = JSON.stringify(a);
const jsonb = JSON.stringify(b);
const jsona = JSON.stringify(a); this.custom = jsonb;
if (jsona != jsonb) {
this.custom = jsonb; let params = {
if (jsona != jsonb) { pageNo: b.pageNo ? b.pageNo : 1,
let params = { pageSize: b.pageSize ? b.pageSize : this.state.data.pagination.pageSize,
pageNo: b.pageNo ? b.pageNo : 1, query: JSON.stringify(this.state.formValues),
pageSize: b.pageSize ? b.pageSize : this.state.data.pagination.pageSize, };
query: JSON.stringify(this.state.formValues),
}; if (nextProps.value.columns != null && nextProps.value.columns.length > 0) {
this.columns = nextProps.value.columns;
if (nextProps.value.columns != null && nextProps.value.columns.length > 0) { }
this.columns = nextProps.value.columns;
} if (nextProps.value.getPage) {
this.getPage(params, null, nextProps.value.getPage);
if (nextProps.value.getPage) { } else {
this.getPage(params, null, nextProps.value.getPage); if (this.state.objId) this.getPage(params);
} else { }
if (this.state.objId) this.getPage(params); }
} const x = nextProps.selects;
} const y = this.props.selects;
const x = nextProps.selects; if (JSON.stringify(x) != JSON.stringify(y)) {
const y = this.props.selects; this.setState({ selects: x });
if (JSON.stringify(x) != JSON.stringify(y)) { }
this.setState({ selects: x }); }
}
} initColumn = () => {
const { dispatch, value, objCode } = this.props;
initColumn = () => { const { rights, columnRights } = this.state;
const { dispatch, value, objCode} = this.props; if (value && value.columns) {
const { rights, columnRights } = this.state; this.columns = value.columns;
if (value && value.columns) { let cacheList = [];
this.columns = value.columns; let cacheChecked = [];
let cacheList = []; // 表头筛选逻辑
let cacheChecked = []; Array.isArray(value.columns) &&
// 表头筛选逻辑
Array.isArray(value.columns) &&
value.columns.map((item) => { value.columns.map((item) => {
if (item.dataIndex != null) { if (item.dataIndex != null) {
cacheList.push({ cacheList.push({
label: item.title, label: item.title,
value: item.dataIndex, value: item.dataIndex,
}); });
cacheChecked.push(item.dataIndex); cacheChecked.push(item.dataIndex);
} }
}); });
this.checkList = cacheList; this.checkList = cacheList;
this.setState({ this.setState({
checkedList: cacheChecked, checkedList: cacheChecked,
cacheColumns: cloneDeep(value.columns), cacheColumns: cloneDeep(value.columns),
}); });
if (Number(objCode) === 1) { if (Number(objCode) === 1) {
this.getPage(); this.getPage();
} else { } else {
dispatch({ dispatch({
type: 'formList/getHead', type: 'formList/getHead',
payload: { dataObjId: this.state.objId }, payload: { dataObjId: this.state.objId },
callback: (datas) => { callback: (datas) => {
this.state.formItem = datas; this.state.formItem = datas;
const querys = []; const querys = [];
const groups = {}; const groups = {};
const refIds = []; const refIds = [];
for (let t in datas) { for (let t in datas) {
if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name; if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name;
if (datas[t].isShowQuery) { if (datas[t].isShowQuery) {
querys.push(datas[t]); querys.push(datas[t]);
if (datas[t].referenceObjId != null) { if (datas[t].referenceObjId != null) {
refIds.push(datas[t].id); refIds.push(datas[t].id);
} }
if (datas[t].isGroupQuery != null) { if (datas[t].isGroupQuery != null) {
dispatch({ dispatch({
type: 'formList/getGroupList', type: 'formList/getGroupList',
payload: { columnId: datas[t].id }, payload: { columnId: datas[t].id },
callback: (gourp) => { callback: (gourp) => {
groups[datas[t].id] = gourp; groups[datas[t].id] = gourp;
this.setState({ groups }); this.setState({ groups });
}, },
}); });
} }
} }
} }
if (querys.length > 0) { if (querys.length > 0) {
this.setState({ querys }); this.setState({ querys });
if (refIds.length > 0) { if (refIds.length > 0) {
dispatch({ dispatch({
type: 'formList/getBatchOptions', type: 'formList/getBatchOptions',
payload: { ids: refIds }, payload: { ids: refIds },
callback: (options) => { callback: (options) => {
this.setState({ options }); this.setState({ options });
}, },
}); });
} }
} }
this.getPage(); this.getPage();
}, },
}); });
} }
return; return;
} }
if (Number(objCode) === 1) { if (Number(objCode) === 1) {
} else { } else {
dispatch({ dispatch({
type: 'formList/getHead', type: 'formList/getHead',
payload: { dataObjId: this.state.objId }, payload: { dataObjId: this.state.objId },
callback: (datas) => { callback: (datas) => {
const querys = []; const querys = [];
const refIds = []; const refIds = [];
const groups = {}; const groups = {};
if (datas) { if (datas) {
this.state.formItem = datas; this.state.formItem = datas;
let i = 0; let i = 0;
let cacheList = []; let cacheList = [];
let cacheChecked = []; let cacheChecked = [];
// 表头筛选逻辑 // 表头筛选逻辑
datas.map((item) => { datas.map((item) => {
if (item.name != null) { if (item.name != null) {
cacheList.push({ cacheList.push({
label: item.title, label: item.title,
value: item.name, value: item.name,
}); });
cacheChecked.push(item.name); cacheChecked.push(item.name);
} }
}); });
this.checkList = cacheList; this.checkList = cacheList;
this.setState({ this.setState({
checkedList: cacheChecked, checkedList: cacheChecked,
}); });
for (let t in datas) { for (let t in datas) {
if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name; if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name;
if (datas[t].isHidden) { if (datas[t].isHidden) {
continue; continue;
} }
let column = {}; let column = {};
column.title = datas[t].title; column.title = datas[t].title;
column.dataIndex = datas[t].name; column.dataIndex = datas[t].name;
column.width = datas[t].width; column.width = datas[t].width;
if (i == 0) column.fixed = 'left'; if (i == 0) column.fixed = 'left';
if (columnRights.length > 0 && !columnRights.includes(datas[t].id)) { if (columnRights.length > 0 && !columnRights.includes(datas[t].id)) {
continue; continue;
} }
if (data.includes(datas[t].type)) { if (date.includes(datas[t].type)) {
column.render = (val) => { column.render = (val) => {
if (val == null) { if (val == null) {
return val; return val;
} }
if (datas[t].dataFormatStrWeb != null) { if (datas[t].dataFormatStrWeb != null) {
return moment(val).format(datas[t].dataFormatStrWeb); return moment(val).format(datas[t].dataFormatStrWeb);
} else { } else {
return moment(val).format('YYYY-MM-DD HH:mm:ss'); return moment(val).format('YYYY-MM-DD HH:mm:ss');
} }
}; };
} else if (datas[t].name.indexOf('process_status') > -1) { } else if (datas[t].name.indexOf('process_status') > -1) {
column.render = (val) => (val ? (val === '0' ? '审核通过' : '审核未通过') : null); column.render = (val) => (val ? (val === '0' ? '审核通过' : '审核未通过') : null);
} else if (datas[t].extendTypeId && datas[t].extendTypeId.indexOf('file') > -1) { } else if (datas[t].extendTypeId && datas[t].extendTypeId.indexOf('file') > -1) {
//特殊处理附件 //特殊处理附件
column.render = (val) => { column.render = (val) => {
if (this.isJSON(val)) { if (this.isJSON(val)) {
val = JSON.parse(val); val = JSON.parse(val);
let files = val.files; let files = val.files;
let xx = ( let xx = (
<ul> <ul>
{files.map((f, index2) => { {files.map((f, index2) => {
return ( return (
<li key={index2}> <li key={index2}>
<FilePreview path={queryApiActionPath() + f.path} pathName={f.name} /> <FilePreview path={queryApiActionPath() + f.path} pathName={f.name} />
</li> </li>
); );
})} })}
</ul> </ul>
); );
return xx; return xx;
} else { } else {
return val; return val;
} }
}; };
} else { } else {
column.render = (val) => column.render = (val) =>
val && val.length > 100 ? ( val && val.length > 100 ? (
<Tooltip title={val} overlayStyle={{ width: 1000 }}> <Tooltip title={val} overlayStyle={{ width: 1000 }}>
<span <span
style={{ style={{
width: column.width || 200, width: column.width || 200,
display: 'block', display: 'block',
wordBreak: 'keep-all', wordBreak: 'keep-all',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
}}> }}>
{val} {val}
</span> </span>
</Tooltip> </Tooltip>
) : ( ) : (
val val
); );
} }
this.setState({ tableWidth: (datas.length - 1) * 200 }); this.setState({ tableWidth: (datas.length - 1) * 200 });
this.columns.push(column); this.columns.push(column);
this.setState({ this.setState({
cacheColumns: cloneDeep(this.columns), cacheColumns: cloneDeep(this.columns),
}); });
if (datas[t].isShowQuery) { if (datas[t].isShowQuery) {
querys.push(datas[t]); querys.push(datas[t]);
if (datas[t].referenceObjId != null) { if (datas[t].referenceObjId != null) {
refIds.push(datas[t].id); refIds.push(datas[t].id);
} }
if (datas[t].isGroupQuery != null) { if (datas[t].isGroupQuery != null) {
dispatch({ dispatch({
type: 'formList/getGroupList', type: 'formList/getGroupList',
payload: { columnId: datas[t].id }, payload: { columnId: datas[t].id },
callback: (gourp) => { callback: (gourp) => {
groups[datas[t].id] = gourp; groups[datas[t].id] = gourp;
this.setState({ groups }); this.setState({ groups });
}, },
}); });
} }
} }
i++; i++;
} }
if (querys.length > 0) { if (querys.length > 0) {
this.setState({ querys }); this.setState({ querys });
if (refIds.length > 0) { if (refIds.length > 0) {
dispatch({ dispatch({
type: 'formList/getBatchOptions', type: 'formList/getBatchOptions',
payload: { ids: refIds }, payload: { ids: refIds },
callback: (options) => { callback: (options) => {
this.setState({ options }); this.setState({ options });
}, },
}); });
} }
} }
this.getPage(); this.getPage();
} }
}, },
}); });
} }
}; };
sqlBs16 = this.props.sql; sqlBs16 = this.props.sql;
getPage = (params, values, callPage, pageNo) => { getPage = (params, values, callPage, pageNo) => {
const { objCode } = this.props; const { objCode } = this.props;
if (this.columns == null || this.columns.length == 0) { if (this.columns == null || this.columns.length == 0) {
return; return;
} }
const { dispatch } = this.props; const { dispatch } = this.props;
const pagination = this.state.data.pagination; const pagination = this.state.data.pagination;
if (params == null) { if (params == null) {
params = { params = {
pageNo: pageNo != null ? pageNo : pagination.current ? pagination.current : 1, pageNo: pageNo != null ? pageNo : pagination.current ? pagination.current : 1,
pageSize: pagination.pageSize ? pagination.pageSize : this.props.pageSize || 10, pageSize: pagination.pageSize ? pagination.pageSize : this.props.pageSize || 10,
query: JSON.stringify(values != null ? values : this.state.formValues), query: JSON.stringify(values != null ? values : this.state.formValues),
}; };
} else { } else {
if (params.pageNo == null && callPage == null && this.props.value.getPage == null) return; if (params.pageNo == null && callPage == null && this.props.value.getPage == null) return;
} }
if (Number(objCode) === 1) { if (Number(objCode) === 1) {
if (callPage) { if (callPage) {
callPage(params, (data) => { callPage(params, (data) => {
if (!this.state.isReady) { if (!this.state.isReady) {
this.setState({ data, isReady: true }); this.setState({ data, isReady: true });
} else { } else {
this.setState({ data }); this.setState({ data });
} }
}); });
} else if (this.props.value && this.props.value.getPage) { } else if (this.props.value && this.props.value.getPage) {
this.props.value.getPage(params, (data) => { this.props.value.getPage(params, (data) => {
if (!this.state.isReady) { if (!this.state.isReady) {
this.setState({ data, isReady: true }); this.setState({ data, isReady: true });
} else { } else {
this.setState({ data }); this.setState({ data });
} }
}); });
} }
} else { } else {
dispatch({ dispatch({
type: 'formList/fetch', type: 'formList/fetch',
payload: { payload: {
custom: this.custom, custom: this.custom,
...params, ...params,
sql: this.sqlBs16, sql: this.sqlBs16,
dataObjId: this.state.objId, dataObjId: this.state.objId,
}, },
callback: (data) => { callback: (data) => {
if (!this.state.isReady) { if (!this.state.isReady) {
this.setState({ data, isReady: true }); this.setState({ data, isReady: true });
} else { } else {
this.setState({ data }); this.setState({ data });
} }
}, },
}); });
} }
}; };
handleStandardTableChange = (pagination, filtersArg, sorter) => { handleStandardTableChange = (pagination, filtersArg, sorter) => {
const filters = Object.keys(filtersArg).reduce((obj, key) => { const filters = Object.keys(filtersArg).reduce((obj, key) => {
const newObj = { ...obj }; const newObj = { ...obj };
newObj[key] = getValue(filtersArg[key]); newObj[key] = getValue(filtersArg[key]);
return newObj; return newObj;
}, {}); }, {});
const params = { const params = {
pageNo: pagination.current, pageNo: pagination.current,
pageSize: pagination.pageSize, pageSize: pagination.pageSize,
...filters, ...filters,
query: JSON.stringify(this.state.formValues), query: JSON.stringify(this.state.formValues),
}; };
if (sorter.field) { if (sorter.field) {
params.sorter = `${sorter.field}_${sorter.order}`; params.sorter = `${sorter.field}_${sorter.order}`;
} }
this.getPage(params); this.getPage(params);
}; };
handleAdd = (fields, isAdd) => { handleAdd = (fields, isAdd) => {
let params = { let params = {
...fields, ...fields,
}; };
this.props.dispatch({ this.props.dispatch({
type: 'formList/add', type: 'formList/add',
payload: { payload: {
params: params, params: params,
objId: this.state.objId, objId: this.state.objId,
isAdd: isAdd, isAdd: isAdd,
isSelf: true, isSelf: true,
isView: false, isView: false,
}, },
callback: () => { callback: () => {
message.success('操作成功'); message.success('操作成功');
this.setState({ this.setState({
modalVisible: false, modalVisible: false,
}); });
this.getPage(); this.getPage();
}, },
}); });
}; };
handleModalVisible = () => { handleModalVisible = () => {
this.setState({ this.setState({
modalVisible: this.state.modalVisible ? false : true, modalVisible: this.state.modalVisible ? false : true,
formData: {}, formData: {},
isView: false, isView: false,
}); });
}; };
add = () => { add = () => {
// if (this.state.formItem.length < 10) { // if (this.state.formItem.length < 10) {
this.getOptions(); this.getOptions();
this.setState({ this.setState({
modalVisible: true, modalVisible: true,
formData: {}, formData: {},
isAdd: true, isAdd: true,
isView: false, isView: false,
}); });
// } else { // } else {
// router.push({ // router.push({
// pathname: '/admin/ddl/dataObj/formEdit', // pathname: '/admin/ddl/dataObj/formEdit',
// state: { id: this.state.objId,isAdd: true,isView:false } // state: { id: this.state.objId,isAdd: true,isView:false }
// }); // });
// } // }
}; };
handleSelectRows = (rows) => { handleSelectRows = (rows) => {
if (this.props.onSelectRow) { if (this.props.onSelectRow) {
this.props.onSelectRow(rows); this.props.onSelectRow(rows);
} }
this.setState({ this.setState({
selectedRows: rows, selectedRows: rows,
}); });
}; };
batchDelete = (e) => { batchDelete = (e) => {
const { dispatch } = this.props; const { dispatch } = this.props;
const { selectedRows } = this.state; const { selectedRows } = this.state;
if (!selectedRows) return; if (!selectedRows) return;
let columns = this.state.formItem; let columns = this.state.formItem;
let Keys = {}; let Keys = {};
for (let i in columns) { for (let i in columns) {
if (columns[i].isPrimaryKey) { if (columns[i].isPrimaryKey) {
//key //key
Keys[columns[i].name] = selectedRows.map((row) => row[columns[i].name]).join(','); Keys[columns[i].name] = selectedRows.map((row) => row[columns[i].name]).join(',');
} }
} }
this.props.dispatch({ this.props.dispatch({
type: 'formList/delete', type: 'formList/delete',
payload: { payload: {
keys: JSON.stringify(Keys), keys: JSON.stringify(Keys),
objId: this.state.objId, objId: this.state.objId,
// isSelf: true, // isSelf: true,
}, },
callback: () => { callback: () => {
this.setState({ this.setState({
selectedRows: [], selectedRows: [],
}); });
this.getPage(); this.getPage();
}, },
}); });
}; };
goBack = () => { goBack = () => {
router.goBack(); router.goBack();
}; };
handleSearch = (e) => { handleSearch = (e) => {
e.preventDefault(); e.preventDefault();
const { dispatch, form } = this.props; const { dispatch, form } = this.props;
const { formValues } = this.state; const { formValues } = this.state;
form.validateFields((err, fieldsValue) => { form.validateFields((err, fieldsValue) => {
if (err) return; if (err) return;
const formItem = this.state.formItem; const formItem = this.state.formItem;
formItem.map((item, index) => { formItem.map((item, index) => {
if (item.type.indexOf('DATE') > -1) { if (item.type.indexOf('DATE') > -1) {
for (let d in fieldsValue) { for (let d in fieldsValue) {
if (item.name === d && fieldsValue[d]) { if (item.name === d && fieldsValue[d]) {
if (fieldsValue[d] != null && fieldsValue[d].length > 0) { if (fieldsValue[d] != null && fieldsValue[d].length > 0) {
fieldsValue[d] = [ fieldsValue[d] = [
fieldsValue[d][0].format('YYYY-MM-DD HH:mm:ss'), fieldsValue[d][0].format('YYYY-MM-DD HH:mm:ss'),
fieldsValue[d][1].format('YYYY-MM-DD HH:mm:ss'), fieldsValue[d][1].format('YYYY-MM-DD HH:mm:ss'),
]; ];
} else { } else {
fieldsValue[d] = ''; fieldsValue[d] = '';
} }
} }
} }
} }
}); });
const values = { const values = {
...this.state.formValues, ...this.state.formValues,
...fieldsValue, ...fieldsValue,
}; };
this.setState({ this.setState({
formValues: fieldsValue, formValues: fieldsValue,
}); });
const params = { const params = {
pageNo: 1, pageNo: 1,
pageSize: this.props.pageSize || 10, pageSize: this.props.pageSize || 10,
query: JSON.stringify(values), query: JSON.stringify(values),
}; };
this.getPage(params, values, null, 1); this.getPage(params, values, null, 1);
}); });
}; };
hanldeHighSearch = (e) => { hanldeHighSearch = (e) => {
const pagination = this.props.formList.data.pagination; const pagination = this.props.formList.data.pagination;
let params = { let params = {
pageNo: pagination.current ? pagination.current : 1, pageNo: pagination.current ? pagination.current : 1,
pageSize: pagination.pageSize ? pagination.pageSize : this.props.pageSize || 10, pageSize: pagination.pageSize ? pagination.pageSize : this.props.pageSize || 10,
...e, ...e,
}; };
this.setState({ formValues: { ...e, ...this.state.formValues } }); this.setState({ formValues: { ...e, ...this.state.formValues } });
this.getPage(params); this.getPage(params);
}; };
handleFormReset = () => { handleFormReset = () => {
const { form, dispatch } = this.props; const { form, dispatch } = this.props;
form.resetFields(); form.resetFields();
this.setState( this.setState(
{ {
formValues: {}, formValues: {},
}, },
() => { () => {
this.getPage(); this.getPage();
}, },
); );
}; };
getItem = (isQuery, form, item, isAdd, formData, labelCol, wrapperCol) => { getItem = (isQuery, form, item, isAdd, formData, labelCol, wrapperCol) => {
const { groups, isView } = this.state; const { groups, isView } = this.state;
//如果隐藏的话 就用隐藏域放置 //如果隐藏的话 就用隐藏域放置
if (item.isHidden) { if (item.isHidden) {
return ( return (
<FormItem className={styles.hidden} key={item.id}> <FormItem className={styles.hidden} key={item.id}>
{form.getFieldDecorator(item.name, { {form.getFieldDecorator(item.name, {
initialValue: formData == null ? '' : formData[item.name], initialValue: formData == null ? '' : formData[item.name],
})(<Input type="hidden" placeholder="请输入" />)} })(<Input type='hidden' placeholder='请输入' />)}
</FormItem> </FormItem>
); );
} }
if (item.isPrimaryKey) { if (item.isPrimaryKey) {
if (isAdd) { if (isAdd) {
return <></>; return <></>;
} else { } else {
return ( return (
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
{form.getFieldDecorator(item.name, { {form.getFieldDecorator(item.name, {
initialValue: formData == null ? '' : formData[item.name], initialValue: formData == null ? '' : formData[item.name],
rules: [{ required: !item.isNull }], rules: [{ required: !item.isNull }],
})(<Input style={{ width: '70%' }} readOnly={!isAdd} placeholder="请输入" />)} })(<Input style={{ width: '70%' }} readOnly={!isAdd} placeholder='请输入' />)}
</FormItem> </FormItem>
); );
} }
} else if (item.referenceObjId != null) { } else if (item.referenceObjId != null) {
const { options } = this.state; const { options } = this.state;
const ops = options[item.id + ''] || []; const ops = options[item.id + ''] || [];
return ( return (
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
{form.getFieldDecorator(item.name, { {form.getFieldDecorator(item.name, {
initialValue: formData == null ? '' : formData[item.name], initialValue: formData == null ? '' : formData[item.name],
rules: [{ required: !item.isNull }], rules: [{ required: !item.isNull }],
})( })(
<Select <Select
disabled={isView} disabled={isView}
style={{ width: '70%' }} style={{ width: '70%' }}
optionFilterProp="children" optionFilterProp='children'
showSearch showSearch
filterOption={(input, option) => filterOption={(input, option) =>
option option
? option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 ? option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
: false : false
} }
placeholder="请选择" placeholder='请选择'
allowClear> allowClear>
{ops.map((r) => ( {ops.map((r) => (
<Option value={r[item.referenceCodeName]} key={r[item.referenceCodeName]}> <Option value={r[item.referenceCodeName]} key={r[item.referenceCodeName]}>
{r[item.referenceNameName]} {r[item.referenceNameName]}
</Option> </Option>
))} ))}
</Select>, </Select>,
)} )}
</FormItem> </FormItem>
); );
} else if (item.name.indexOf('process_status') > -1) { } else if (item.name.indexOf('process_status') > -1) {
return ( return (
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
{form.getFieldDecorator(item.name, { {form.getFieldDecorator(item.name, {
initialValue: formData == null ? '' : formData[item.name], initialValue: formData == null ? '' : formData[item.name],
rules: [{ required: !item.isNull }], rules: [{ required: !item.isNull }],
})( })(
<Select disabled={isView} style={{ width: '70%' }} placeholder="请选择" allowClear> <Select disabled={isView} style={{ width: '70%' }} placeholder='请选择' allowClear>
<Option value={'0'} key={'0'}> <Option value={'0'} key={'0'}>
审核通过 审核通过
</Option> </Option>
<Option value={'2'} key={'2'}> <Option value={'2'} key={'2'}>
审核未通过 审核未通过
</Option> </Option>
</Select>, </Select>,
)} )}
</FormItem> </FormItem>
); );
} else if (item.extendTypeId && item.extendTypeId.indexOf('file') > -1) { } else if (item.extendTypeId && item.extendTypeId.indexOf('file') > -1) {
//特殊处理附件 如果是查询就 跳过 //特殊处理附件 如果是查询就 跳过
if (isQuery) return; if (isQuery) return;
return ( return (
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
{form.getFieldDecorator(item.name, { {form.getFieldDecorator(item.name, {
initialValue: initialValue:
formData == null formData == null
? '' ? ''
: formData[item.name] && this.isJSON(formData[item.name]) : formData[item.name] && this.isJSON(formData[item.name])
? JSON.parse(formData[item.name]) ? JSON.parse(formData[item.name])
: null, : null,
rules: [{ required: !item.isNull }], rules: [{ required: !item.isNull }],
})(<UploadCom disabled={isView} />)} })(<UploadCom disabled={isView} />)}
</FormItem> </FormItem>
); );
} else if (isQuery && item.isGroupQuery != null && item.isGroupQuery) { } else if (isQuery && item.isGroupQuery != null && item.isGroupQuery) {
//如果是查询 并且是组合查询 //如果是查询 并且是组合查询
const ops = groups[item.id + ''] || []; const ops = groups[item.id + ''] || [];
return ( return (
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
{form.getFieldDecorator(item.name, { {form.getFieldDecorator(item.name, {
initialValue: formData == null ? '' : formData[item.name], initialValue: formData == null ? '' : formData[item.name],
rules: [{ required: !item.isNull }], rules: [{ required: !item.isNull }],
})( })(
<Select <Select
disabled={isView} disabled={isView}
style={{ width: 200 }} style={{ width: 200 }}
placeholder="请选择" placeholder='请选择'
optionFilterProp="children" optionFilterProp='children'
showSearch showSearch
filterOption={(input, option) => filterOption={(input, option) =>
option option
? option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 ? option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
: false : false
} }
allowClear> allowClear>
{ops.map((r) => ( {ops.map((r) => (
<Option value={r.value} key={r.value}> <Option value={r.value} key={r.value}>
{r.value} {r.value}
</Option> </Option>
))} ))}
</Select>, </Select>,
)} )}
</FormItem> </FormItem>
); );
} else if (text.indexOf(item.type) > -1) { } else if (text.indexOf(item.type) > -1) {
return ( return (
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
{form.getFieldDecorator(item.name, { {form.getFieldDecorator(item.name, {
initialValue: formData == null ? '' : formData[item.name], initialValue: formData == null ? '' : formData[item.name],
rules: [{ required: !item.isNull }], rules: [{ required: !item.isNull }],
})(<Input disabled={isView} style={{ width: '70%' }} placeholder="请输入" />)} })(<Input disabled={isView} style={{ width: '70%' }} placeholder='请输入' />)}
</FormItem> </FormItem>
); );
} else if (number.indexOf(item.type) > -1) { } else if (number.indexOf(item.type) > -1) {
return ( return (
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
{form.getFieldDecorator(item.name, { {form.getFieldDecorator(item.name, {
initialValue: formData == null ? '' : formData[item.name], initialValue: formData == null ? '' : formData[item.name],
rules: [ rules: [
{ required: !item.isNull }, { required: !item.isNull },
(rule, value, callback) => { (rule, value, callback) => {
var errors = []; var errors = [];
var reg = new RegExp(/(^-?[0-9][0-9]*(.[0-9]+)?)$/); var reg = new RegExp(/(^-?[0-9][0-9]*(.[0-9]+)?)$/);
if (value != null && value != '' && !reg.test(value)) { if (value != null && value != '' && !reg.test(value)) {
errors.push(new Error('请输入'), rule.field); errors.push(new Error('请输入'), rule.field);
} }
callback(errors); callback(errors);
}, },
], ],
})(<Input disabled={isView} placeholder="请输入" />)} })(<Input disabled={isView} placeholder='请输入' />)}
</FormItem> </FormItem>
); );
} else if (isQuery && data.indexOf(item.type) > -1) { } else if (isQuery && date.indexOf(item.type) > -1) {
return ( return (
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
{form.getFieldDecorator(item.name, { {form.getFieldDecorator(item.name, {
initialValue: formData == null ? null : moment(formData[item.name]), initialValue: formData == null ? null : moment(formData[item.name]),
rules: [{ required: !item.isNull }], rules: [{ required: !item.isNull }],
})( })(
<RangePicker <RangePicker
disabled={isView} disabled={isView}
format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb} format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb}
style={{ width: '95%' }} style={{ width: '95%' }}
/>, />,
)} )}
</FormItem> </FormItem>
); );
} else if (data.indexOf(item.type) > -1) { } else if (date.indexOf(item.type) > -1) {
return ( return (
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
{form.getFieldDecorator(item.name, { {form.getFieldDecorator(item.name, {
initialValue: initialValue:
formData == null formData == null
? moment() ? moment()
: formData[item.name] : formData[item.name]
? moment(formData[item.name]) ? moment(formData[item.name])
: null, : null,
rules: [{ required: !item.isNull }], rules: [{ required: !item.isNull }],
})( })(
<DatePicker <DatePicker
format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb} format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb}
style={{ width: '100%' }} style={{ width: '100%' }}
placeholder="请输入" placeholder='请输入'
disabled={isView} disabled={isView}
/>, />,
)} )}
</FormItem> </FormItem>
); );
} else { } else {
return ( return (
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
{form.getFieldDecorator(item.name, { {form.getFieldDecorator(item.name, {
initialValue: formData == null ? '' : formData[item.name], initialValue: formData == null ? '' : formData[item.name],
rules: [{ required: !item.isNull }], rules: [{ required: !item.isNull }],
})(<Input disabled={isView} style={{ width: '70%' }} placeholder="请输入" />)} })(<Input disabled={isView} style={{ width: '70%' }} placeholder='请输入' />)}
</FormItem> </FormItem>
); );
} }
}; };
renderForm() { renderForm() {
const { form, get } = this.props; const { form, get } = this.props;
const { querys } = this.state; const { querys } = this.state;
if (querys.length == 0) { if (querys.length == 0) {
return ''; return '';
} }
return ( return (
<Form layout="inline"> <Form layout='inline'>
<Row style={{ padding: '15px' }}> <Row style={{ padding: '15px' }}>
{querys.map((item) => ( {querys.map((item) => (
<Col style={{ height: 58 }} span={get === 'mobile' ? 24 : 8} key={item.id}> <Col style={{ height: 58 }} span={get === 'mobile' ? 24 : 8} key={item.id}>
{this.getItem( {this.getItem(
true, true,
form, form,
{ {
...item, ...item,
isNull: true, isNull: true,
}, },
true, true,
)} )}
</Col> </Col>
))} ))}
<Col <Col
span={get === 'mobile' ? 24 : 8} span={get === 'mobile' ? 24 : 8}
style={{ style={{
textAlign: get === 'mobile' ? 'right' : '', textAlign: get === 'mobile' ? 'right' : '',
paddingRight: get === 'mobile' ? 12 : '', paddingRight: get === 'mobile' ? 12 : '',
}}> }}>
<span className={styles.submitButtons}> <span className={styles.submitButtons}>
<Button type="primary" loading={this.props.loading} onClick={this.handleSearch}> <Button type='primary' loading={this.props.loading} onClick={this.handleSearch}>
查询 查询
</Button> </Button>
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}> <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
重置 重置
</Button> </Button>
{/* <a style={{ marginLeft: 8 }} onClick={this.toggleForm}> {/* <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
展开 <Icon type="down" /> 展开 <Icon type="down" />
</a> */} </a> */}
</span> </span>
</Col> </Col>
</Row> </Row>
</Form> </Form>
); );
} }
/** /**
* @description: 表头筛选复选框 根据用户筛选将表头内容重置 * @description: 表头筛选复选框 根据用户筛选将表头内容重置
* @param { Array<string> } 用户选择参数 * @param { Array<string> } 用户选择参数
* @return: * @return:
*/ */
CheckboxChange = (checkedValues) => { CheckboxChange = (checkedValues) => {
if (checkedValues.length === 0) { if (checkedValues.length === 0) {
message.error('至少选择一项'); message.error('至少选择一项');
return; return;
} }
const { cacheColumns } = this.state; const { cacheColumns } = this.state;
let initList = []; let initList = [];
checkedValues.map((item) => { checkedValues.map((item) => {
let ary = cacheColumns.filter((data) => data.dataIndex === item); let ary = cacheColumns.filter((data) => data.dataIndex === item);
if (ary.length !== 0) { if (ary.length !== 0) {
initList.push(ary[0]); initList.push(ary[0]);
} }
}); });
this.columns = initList; this.columns = initList;
this.setState({ this.setState({
checkedList: checkedValues, checkedList: checkedValues,
}); });
}; };
render() {
const { modalVisible, selectedRows, rights, data, isReady } = this.state;
render() {
const { modalVisible, selectedRows, rights, data, isReady } = this.state;
if (!isReady) { if (!isReady) {
return ( return (
<div style={{ width: 20, margin: 'auto' }}> <div style={{ width: 20, margin: 'auto' }}>
<Spin /> <Spin />
</div> </div>
); );
} }
const { const {
isFormCom, isFormCom,
isSelect, isSelect,
get, get,
callback, callback,
valueName, valueName,
notShowBack, notShowBack,
json, json,
istableCom, // 是否有模板设计器调用 istableCom, // 是否有模板设计器调用
value: { btns }, value: { btns },
loading, loading,
} = this.props; } = this.props;
const { showMobileDiv, isView } = this.state; const { showMobileDiv, isView } = this.state;
let scrollWidth = document.documentElement.clientWidth || document.body.clientWidth; //可使宽度 let scrollWidth = document.documentElement.clientWidth || document.body.clientWidth; //可使宽度
let isMobile = scrollWidth < 1000; let isMobile = scrollWidth < 1000;
if (document.querySelector('#previewDiv')) { if (document.querySelector('#previewDiv')) {
isMobile = true; isMobile = true;
} }
// console.log(json); // console.log(json);
let showDiv = 500; let showDiv = 500;
if(document.getElementsByClassName('ant-layout-content')?.length){ // 这是大学工项目 容器元素的宽度 if (document.getElementsByClassName('ant-layout-content')?.length) { // 这是大学工项目 容器元素的宽度
showDiv = document.getElementsByClassName('ant-layout-content')[0].clientWidth - 100; showDiv = document.getElementsByClassName('ant-layout-content')[0].clientWidth - 100;
} }
if(document.querySelector('#mobelDiv')){ // 这个是一站式的元素的宽度 if (document.querySelector('#mobelDiv')) { // 这个是一站式的元素的宽度
showDiv = document.querySelector('#mobelDiv')?.parentNode.clientWidth; showDiv = document.querySelector('#mobelDiv')?.parentNode.clientWidth;
} }
if(json.twidth){ // 列表宽度配置项 在 组件的 扩展的配置里面 if (json.twidth) { // 列表宽度配置项 在 组件的 扩展的配置里面
showDiv = json.twidth; showDiv = json.twidth;
} }
// console.log(showDiv); // console.log(showDiv);
const parentMethods = { const parentMethods = {
handleAdd: this.handleAdd, handleAdd: this.handleAdd,
handleModalVisible: this.handleModalVisible, handleModalVisible: this.handleModalVisible,
formData: this.state.formData, formData: this.state.formData,
formItem: this.state.formItem, formItem: this.state.formItem,
isAdd: this.state.isAdd, isAdd: this.state.isAdd,
getItem: this.getItem, getItem: this.getItem,
isView: isView, isView: isView,
}; };
if ( if (
!isSelect && !isSelect &&
!rights.includes('edit') && !rights.includes('edit') &&
!rights.includes('delete') && !rights.includes('delete') &&
!rights.includes('view') && !rights.includes('view') &&
!rights.includes('viewProcess') !rights.includes('viewProcess')
) { ) {
} } else {
else let width = 0;
{ if (rights && rights.includes('viewProcess')) {
let width = 0; width = width + 120;
if (rights && rights.includes('viewProcess')) { }
width = width + 120; if (rights && rights.includes('view')) {
} width = width + 120;
if (rights && rights.includes('view')) { }
width = width + 120; if (rights && rights.includes('edit')) {
} width = width + 70;
if (rights && rights.includes('edit')) { }
width = width + 70; if (rights && rights.includes('delete')) {
} width = width + 70;
if (rights && rights.includes('delete')) { }
width = width + 70; const column = {
} title: '操作',
const column = { fixed: 'right',
title: '操作', width: width,
fixed: 'right', render: (text, record) => {
width: width, let Dom = [];
render: (text, record) => { if (isSelect) {
let Dom = []; if (this.state.selects.includes(record[valueName])) {
if (isSelect) { Dom.push(<span>已选择</span>);
if (this.state.selects.includes(record[valueName])) { } else {
Dom.push(<span>已选择</span>); Dom.push(<a onClick={callback.bind(this, record, this.columns)}>选择</a>);
} else { }
Dom.push(<a onClick={callback.bind(this, record, this.columns)}>选择</a>); }
} if (rights) {
} if (rights.includes('view')) {
if (rights) { Dom.push(<a onClick={this.view.bind(this, record)}>查看详情</a>);
if (rights.includes('view')) { }
Dom.push(<a onClick={this.view.bind(this, record)}>查看详情</a>); if (rights.includes('edit')) {
} Dom.push(<a onClick={this.modify.bind(this, record)}>编辑</a>);
if (rights.includes('edit')) { }
Dom.push(<a onClick={this.modify.bind(this, record)}>编辑</a>); if (rights.includes('viewProcess') && record.process_biz_key) {
} Dom.push(<a onClick={this.viewProcess.bind(this, record)}>流程详情</a>);
if (rights.includes('viewProcess') && record.process_biz_key) { }
Dom.push(<a onClick={this.viewProcess.bind(this, record)}>流程详情</a>); if (rights.includes('delete')) {
} Dom.push(
if (rights.includes('delete')) { <Popconfirm
Dom.push( title='确定删除该数据?'
<Popconfirm onConfirm={this.delete.bind(this, record)}
title="确定删除该数据?" okText='确定'
onConfirm={this.delete.bind(this, record)} cancelText='取消'>
okText="确定" <a>删除</a>
cancelText="取消"> </Popconfirm>,
<a>删除</a> );
</Popconfirm>, }
); }
} return (
} <Fragment>
return ( <div style={{ textAlign: 'center', paddingLeft: '0px', paddingRight: '0px' }}>
<Fragment> {Dom &&
<div style={{ textAlign: 'center', paddingLeft: '0px', paddingRight: '0px' }}> Dom.length &&
{Dom && Dom.map((x, index) => (
Dom.length && <Fragment key={Math.random()}>
Dom.map((x, index) => ( {x}
<Fragment key={Math.random()}> {index > 0 && index !== Dom.length - 1 && <Divider type='vertical' />}
{x} </Fragment>
{index > 0 && index !== Dom.length - 1 && <Divider type="vertical" />} ))}
</Fragment> </div>
))} </Fragment>
</div> );
</Fragment> },
); };
}, if (this.columns.length > 0 && this.columns[this.columns.length - 1].title == '操作') {
}; this.columns[this.columns.length - 1] = column;
if (this.columns.length > 0 && this.columns[this.columns.length - 1].title == '操作') { } else {
this.columns[this.columns.length - 1] = column; this.columns.push(column);
} else { }
this.columns.push(column); }
} // console.log(this.columns);
} if (this.columns) {
// console.log(this.columns); /**
if (this.columns) { * 计算总长度
/** */
* 计算总长度 AllWidth = 0;
*/ this.columns = this.columns.map((item, index) => {
AllWidth = 0; if (isEmpty(item)) {
this.columns = this.columns.map((item, index) => { return item;
if (isEmpty(item)) { }
return item; if (
} index === this.columns.length - 1 &&
if ( this.columns[this.columns.length - 1].title !== '操作'
index === this.columns.length - 1 && ) {
this.columns[this.columns.length - 1].title !== '操作' AllWidth += 150;
) { item.width = '';
AllWidth += 150; return item;
item.width = ''; }
return item; let width = item.width ? item.width : 150;
} if (!item.width) {
let width = item.width ? item.width : 150; item.width = 150;
if (!item.width) { }
item.width = 150; AllWidth += width;
} return item;
AllWidth += width; });
return item; if (
}); !isEmpty(this.columns[this.columns.length - 1]) &&
if ( this.columns[this.columns.length - 1].title === '操作'
!isEmpty(this.columns[this.columns.length - 1]) && ) {
this.columns[this.columns.length - 1].title === '操作' if (this.columns[this.columns.length - 2]) {
) { this.columns[this.columns.length - 2].width = '';
if (this.columns[this.columns.length - 2]) { AllWidth += 100;
this.columns[this.columns.length - 2].width = ''; }
AllWidth += 100; }
} }
}
} const xxxx = (
const xxxx = ( <>
<> <Card
<Card bordered={false}
bordered={false} bodyStyle={{ padding: 0, width: json.twidth ? json.twidth : '100%' }}>
bodyStyle={{ padding: 0, width: json.twidth ? json.twidth : '100%' }}> <div className={styles.tableList}>
<div className={styles.tableList}> <div className={styles.tableListForm}>{this.renderForm()}</div>
<div className={styles.tableListForm}>{this.renderForm()}</div> <div className={styles.tableListOperator}>
<div className={styles.tableListOperator}> {notShowBack ? (
{notShowBack ? ( notShowBack
notShowBack ) : (
) : ( <Button icon='rollback' type='primary' onClick={this.goBack}>
<Button icon="rollback" type="primary" onClick={this.goBack}> 返回
返回 </Button>
</Button> )}
)}
{btns && btns.before && btns.before.length > 0 <FormListButtons btns={btns}
? btns.before.map((r) => <Button {...r} loading={loading} />) loading={loading}
: ''} importConfig={(this.props.value && this.props.value.importConfig) || []}
{rights && !rights.includes('add') ? ( exportConfig={(this.props.value && this.props.value.exportConfig) || []}
'' getPage={this.getPage}
) : ( objId={this.state.objId}
<Button icon="plus" type="primary" onClick={this.add}> query={JSON.stringify(this.state.formValues)}
新建 custom={
</Button> this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null
)} }
{rights && !rights.includes('searchData') ? ( sql={Base16Encode(this.props.sql)}
''
) : (
<SearchInfo hanldeHighSearch={this.hanldeHighSearch} objId={this.state.objId} />
)} />
{/* {this.props.value && this.props.value.importConfig // 导入配置项
{rights && !rights.includes('importData') ? ( ? this.props.value.importConfig.map((r, i) => (
'' <ImportUtil
) : ( btn={r.btn}
<ImportUtil objId={this.state.objId} callback={() => this.getPage()} /> ext={r.ext ? r.ext : 'xlsx'}
)} importConfig={r}
{this.props.value && this.props.value.importConfig objId={this.state.objId}
? this.props.value.importConfig.map((r, i) => ( callback={() => {
<ImportUtil this.getPage();
btn={r.btn} if (r.callback) r.callback();
ext={r.ext ? r.ext : 'xlsx'} }}
importConfig={r} />
objId={this.state.objId} ))
callback={() => { : ''}*/}
this.getPage();
if (r.callback) r.callback(); {/* {this.props.value && this.props.value.exportConfig // 导出配置项
}} ? this.props.value.exportConfig.map((r, i) => (
/> <ExportCurrentInfo
)) objId={this.state.objId}
: ''} query={JSON.stringify(this.state.formValues)}
{rights && !rights.includes('exportCurrent') ? ( custom={
'' this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null
) : ( }
<ExportCurrentInfo index={i}
objId={this.state.objId} btn={r.btn}
query={JSON.stringify(this.state.formValues)} ext={r.ext ? r.ext : 'xlsx'}
custom={this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null} sql={Base16Encode(this.props.sql)}
sql={Base16Encode(this.props.sql)} />
/> ))
)} : ''}
{this.props.value && this.props.value.exportConfig */}
? this.props.value.exportConfig.map((r, i) => ( {rights && !rights.includes('add') ? (
<ExportCurrentInfo ''
objId={this.state.objId} ) : (
query={JSON.stringify(this.state.formValues)} <Button icon='plus' type='primary' onClick={this.add}>
custom={ 新建
this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null </Button>
} )}
index={i} {rights && !rights.includes('searchData') ? (
btn={r.btn} ''
ext={r.ext ? r.ext : 'xlsx'} ) : (
sql={Base16Encode(this.props.sql)} <SearchInfo hanldeHighSearch={this.hanldeHighSearch} objId={this.state.objId} />
/> )}
))
: ''} {rights && !rights.includes('importData') ? (
''
{rights && !rights.includes('exportData') ? ( ) : (
'' <ImportUtil objId={this.state.objId} callback={() => this.getPage()} />
) : ( )}
<ExportInfo objId={this.state.objId} />
)} {rights && !rights.includes('exportCurrent') ? (
{rights && !rights.includes('statistics') ? ( ''
'' ) : (
) : ( <ExportCurrentInfo
<StatisticsInfo objId={this.state.objId} /> objId={this.state.objId}
)} query={JSON.stringify(this.state.formValues)}
{rights && !rights.includes('delete') custom={this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null}
? '' sql={Base16Encode(this.props.sql)}
: selectedRows.length > 0 && ( />
<span> )}
{rights && !rights.includes('exportData') ? (
''
) : (
<ExportInfo objId={this.state.objId} />
)}
{rights && !rights.includes('statistics') ? (
''
) : (
<StatisticsInfo objId={this.state.objId} />
)}
{rights && !rights.includes('delete')
? ''
: selectedRows.length > 0 && (
<span>
<Popconfirm <Popconfirm
title="确定删除该数据?" title='确定删除该数据?'
onConfirm={this.batchDelete} onConfirm={this.batchDelete}
okText="确定" okText='确定'
cancelText="取消"> cancelText='取消'>
<Button>批量删除</Button> <Button>批量删除</Button>
</Popconfirm> </Popconfirm>
</span> </span>
)} )}
{rights && !rights.includes('headerFilter') ? ( {rights && !rights.includes('headerFilter') ? (
'' ''
) : ( ) : (
<Popover // 划入选择栏 <Popover // 划入选择栏
content={ content={
<div <div
style={{ style={{
width: 150, width: 150,
}}> }}>
<Checkbox.Group <Checkbox.Group
onChange={this.CheckboxChange} onChange={this.CheckboxChange}
value={this.state.checkedList} value={this.state.checkedList}
options={this.checkList} options={this.checkList}
/> />
</div> </div>
} }
title="请选择表头展示" title='请选择表头展示'
trigger="click" trigger='click'
placement="bottom"> placement='bottom'>
<Button // 表头筛选控件 <Button // 表头筛选控件
className={styles.filter_btn} className={styles.filter_btn}
icon="filter"> icon='filter'>
表头筛选 表头筛选
</Button> </Button>
</Popover> </Popover>
)} )}
{btns && btns.after && btns.after.length > 0 {btns && btns.after && btns.after.length > 0
? btns.after.map((r) => <Button {...r} loading={loading} />) ? btns.after.map((r) => <Button {...r} loading={loading} />)
: ''} : ''}
</div> </div>
{!istableCom || (this.props.value && this.props.value.columns) ? ( {!istableCom || (this.props.value && this.props.value.columns) ? (
<div <div
id="mobelDiv" id='mobelDiv'
style={{ style={{
overflow: 'hidden', overflow: 'hidden',
width: isMobile ? showMobileDiv : showDiv, width: isMobile ? showMobileDiv : showDiv,
height: '100%', height: '100%',
}}> }}>
{showDiv && ( {showDiv && (
<StandardTable <StandardTable
showHeader={this.props.showHeader != null ? this.props.showHeader : true} showHeader={this.props.showHeader != null ? this.props.showHeader : true}
noSelectRow={ noSelectRow={
this.props.onSelectRow == null && this.props.onSelectRow == null &&
(rights == null || !rights.includes('delete')) (rights == null || !rights.includes('delete'))
} }
rowKey={this.props.value?.rowKey ? this.props.value.rowKey : 'row_id'} rowKey={this.props.value?.rowKey ? this.props.value.rowKey : 'row_id'}
data={data} data={data}
isHiddenPage={this.props.isHiddenPage != null ? this.props.isHiddenPage : false} isHiddenPage={this.props.isHiddenPage != null ? this.props.isHiddenPage : false}
columns={this.columns} columns={this.columns}
scroll={{ x: AllWidth }} scroll={{ x: AllWidth }}
selectedRows={selectedRows} selectedRows={selectedRows}
onSelectRow={this.handleSelectRows} onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange} onChange={this.handleStandardTableChange}
loading={this.props.loading} loading={this.props.loading}
/> />
)} )}
</div> </div>
) : ( ) : (
<div <div
id="mobelDiv" id='mobelDiv'
style={{ style={{
overflow: 'hidden', overflow: 'hidden',
width: isMobile ? showMobileDiv : showDiv, width: isMobile ? showMobileDiv : showDiv,
height: '100%', height: '100%',
}}> }}>
<div> <div>
{get === 'mobile' ? <div>手机端,请使用浏览器将手机横屏查看</div> : null} {get === 'mobile' ? <div>手机端,请使用浏览器将手机横屏查看</div> : null}
{showDiv && ( {showDiv && (
<StandardTable <StandardTable
showHeader={this.props.showHeader != null ? this.props.showHeader : true} showHeader={this.props.showHeader != null ? this.props.showHeader : true}
noSelectRow={ noSelectRow={
this.props.onSelectRow == null && this.props.onSelectRow == null &&
(rights == null || !rights.includes('delete')) (rights == null || !rights.includes('delete'))
} }
rowKey={this.props.value?.rowKey ? this.props.value.rowKey : 'row_id'} rowKey={this.props.value?.rowKey ? this.props.value.rowKey : 'row_id'}
data={data} data={data}
columns={this.columns} columns={this.columns}
scroll={this.props.value && this.props.value.columns ? {} : { x: AllWidth }} scroll={this.props.value && this.props.value.columns ? {} : { x: AllWidth }}
selectedRows={selectedRows} selectedRows={selectedRows}
isHiddenPage={ isHiddenPage={
this.props.isHiddenPage != null ? this.props.isHiddenPage : false this.props.isHiddenPage != null ? this.props.isHiddenPage : false
} }
onSelectRow={this.handleSelectRows} onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange} onChange={this.handleStandardTableChange}
loading={this.props.loading} loading={this.props.loading}
/> />
)} )}
</div> </div>
</div> </div>
)} )}
</div> </div>
</Card> </Card>
<CreateForm {...parentMethods} modalVisible={modalVisible} /> <CreateForm {...parentMethods} modalVisible={modalVisible} />
</> </>
); );
if (isFormCom) { if (isFormCom) {
return xxxx; return xxxx;
} }
return <PageHeaderWrapper title="">{xxxx}</PageHeaderWrapper>; return <PageHeaderWrapper title=''>{xxxx}</PageHeaderWrapper>;
} }
} }
export default FormList; export default FormList;
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论