Skip to content

W
WebPublic
提交 a81aaab2 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

formList组件修改

上级 d9521816
隐藏空白字符变更
内嵌 并排
正在显示 包含 1433 行增加 和 1473 行删除
one_stop_public/libs/formList/index.js
浏览文件 @ a81aaab2
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';
...@@ -44,1083 +44,1049 @@ let AllWidth = 0; // 表格总长度 ...@@ -44,1083 +44,1049 @@ let AllWidth = 0; // 表格总长度
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
const CreateForm = Form.create()((props) => { const CreateForm = Form.create()((props) => {
const { const {
modalVisible, modalVisible,
form, form,
handleAdd, handleAdd,
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(({ @connect(({ formList, DataColumn, DataObj, loading }) => ({
formList, formList,
DataColumn, DataColumn,
DataObj, DataObj,
loading, // loading: loading.models.formList || loading.models.DataColumn || loading.models.DataObj,
}) => ({ loading: loading.models.formList,
formList, // 解决 禅道 28100 查询下拉选择后界面会刷新一次
DataColumn, // https://blog.csdn.net/m0_37148591/article/details/103685339 dva-loading
DataObj,
// loading: loading.models.formList || loading.models.DataColumn || loading.models.DataObj,
loading: loading.models.formList,
// 解决 禅道 28100 查询下拉选择后界面会刷新一次
// https://blog.csdn.net/m0_37148591/article/details/103685339 dva-loading
})) }))
@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: {},
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() { componentDidMount() {
const { const { dispatch } = this.props;
dispatch, window.addEventListener('resize', this.resize);
} = this.props;
window.addEventListener('resize', this.resize); // console.log('componentDidMount');
if (this.props.objCode) {
const { dispatch, objCode, sql } = this.props;
// console.log('componentDidMount');
if (this.props.objCode) { if (Number(objCode) === 1) {
const { this.initColumn();
dispatch, } else {
objCode, dispatch({
sql type: 'DataObj/findByCode',
} = this.props; payload: { objCode: this.props.objCode },
callback: (dataObj) => {
if (Number(objCode) === 1) { this.setState(
this.initColumn(); {
} else { objId: dataObj.id,
dispatch({ isTable: dataObj.isTable,
type: 'DataObj/findByCode', },
payload: { objCode: this.props.objCode }, () => {
callback: (dataObj) => { dispatch({
this.setState( type: 'DataRight/getUserRight',
{ payload: { objId: this.state.objId },
objId: dataObj.id, callback: (data) => {
isTable: dataObj.isTable, if (!this.props.rights) {
}, this.setState({ rights: data });
() => { }
dispatch({ dispatch({
type: 'DataRight/getUserRight', type: 'DataRight/getUserColumnRight',
payload: { objId: this.state.objId }, payload: { objId: this.state.objId },
callback: (data) => { callback: (data) => {
if (!this.props.rights) { this.setState({ columnRights: data });
this.setState({ rights: data }); this.initColumn();
} },
dispatch({ });
type: 'DataRight/getUserColumnRight', },
payload: { objId: this.state.objId }, });
callback: (data) => { },
this.setState({ columnRights: data }); );
this.initColumn(); },
}, });
}); }
}, } else {
}); dispatch({
}, type: 'formList/getObjDetail',
); payload: { id: this.state.objId },
}, callback: (data) => {
}); this.setState({ isTable: data.isTable });
} },
} else { });
dispatch({ dispatch({
type: 'formList/getObjDetail', type: 'DataRight/getUserRight',
payload: { id: this.state.objId }, payload: { objId: this.state.objId },
callback: (data) => { callback: (data) => {
this.setState({ isTable: data.isTable }); if (!this.props.rights) {
}, this.setState({ rights: data });
}); }
dispatch({ dispatch({
type: 'DataRight/getUserRight', type: 'DataRight/getUserColumnRight',
payload: { objId: this.state.objId }, payload: { objId: this.state.objId },
callback: (data) => { callback: (data) => {
if (!this.props.rights) { this.setState({ columnRights: data });
this.setState({ rights: data }); this.initColumn();
} },
dispatch({ });
type: 'DataRight/getUserColumnRight', },
payload: { objId: this.state.objId }, });
callback: (data) => { }
this.setState({ columnRights: data }); }
this.initColumn();
}, /**
}); * 移除监听器
}, */
}); componentWillUnmount() {
} window.removeEventListener('resize', this.resize);
} }
/** custom = this.props.value ? JSON.stringify(this.props.value) : null;
* 移除监听器
*/ componentWillReceiveProps(nextProps) {
componentWillUnmount() { const b = nextProps.value || {};
window.removeEventListener('resize', this.resize); const a = this.props.value || {};
} const jsonb = JSON.stringify(b);
const jsona = JSON.stringify(a);
custom = this.props.value ? JSON.stringify(this.props.value) : null;
this.custom = jsonb;
componentWillReceiveProps(nextProps) { if (jsona != jsonb) {
const b = nextProps.value || {}; let params = {
const a = this.props.value || {}; pageNo: b.pageNo ? b.pageNo : 1,
const jsonb = JSON.stringify(b); pageSize: b.pageSize ? b.pageSize : this.state.data.pagination.pageSize,
const jsona = JSON.stringify(a); query: JSON.stringify(this.state.formValues),
};
this.custom = jsonb;
if (jsona != jsonb) { if (nextProps.value.columns != null && nextProps.value.columns.length > 0) {
let params = { this.columns = nextProps.value.columns;
pageNo: b.pageNo ? b.pageNo : 1, }
pageSize: b.pageSize ? b.pageSize : this.state.data.pagination.pageSize, if (nextProps.value.selectedRows && Array.isArray(nextProps.value.selectedRows)) {
query: JSON.stringify(this.state.formValues), // 27867 就业市场/线上招聘管理/职位信息审核，胡林那 hulinnaAdmin 马上审核通过的职位直接发布 发布不了
}; this.setState({
selectedRows: nextProps.value.selectedRows,
if (nextProps.value.columns != null && nextProps.value.columns.length > 0) { });
this.columns = nextProps.value.columns; }
}
if (nextProps.value.selectedRows && Array.isArray(nextProps.value.selectedRows)) { if (nextProps.value.getPage) {
// 27867 就业市场/线上招聘管理/职位信息审核，胡林那 hulinnaAdmin 马上审核通过的职位直接发布 发布不了 this.getPage(params, null, nextProps.value.getPage);
this.setState({ } else {
selectedRows: nextProps.value.selectedRows, if (this.state.objId) this.getPage(params);
}); }
} }
const x = nextProps.selects;
if (nextProps.value.getPage) { const y = this.props.selects;
this.getPage(params, null, nextProps.value.getPage); if (JSON.stringify(x) != JSON.stringify(y)) {
} else { this.setState({ selects: x });
if (this.state.objId) this.getPage(params); }
} }
}
const x = nextProps.selects; initColumn = () => {
const y = this.props.selects; const { dispatch, value, objCode } = this.props;
if (JSON.stringify(x) != JSON.stringify(y)) { const { rights, columnRights } = this.state;
this.setState({ selects: x }); if (value && value.columns) {
} this.columns = value.columns;
} let cacheList = [];
let cacheChecked = [];
initColumn = () => { // 表头筛选逻辑
const { Array.isArray(value.columns) &&
dispatch, value.columns.map((item) => {
value, if (item.dataIndex != null) {
objCode cacheList.push({
} = this.props; label: item.title,
const { value: item.dataIndex,
rights, });
columnRights cacheChecked.push(item.dataIndex);
} = this.state; }
if (value && value.columns) { });
this.columns = value.columns; this.checkList = cacheList;
let cacheList = [];
let cacheChecked = []; this.setState({
// 表头筛选逻辑 checkedList: cacheChecked,
Array.isArray(value.columns) && cacheColumns: cloneDeep(value.columns),
value.columns.map((item) => { });
if (item.dataIndex != null) { if (Number(objCode) === 1) {
cacheList.push({ this.getPage();
label: item.title, } else {
value: item.dataIndex, dispatch({
}); type: 'formList/getHead',
cacheChecked.push(item.dataIndex); payload: { dataObjId: this.state.objId },
} callback: (datas) => {
}); this.state.formItem = datas;
this.checkList = cacheList; const querys = [];
const groups = {};
this.setState({ const refIds = [];
checkedList: cacheChecked, for (let t in datas) {
cacheColumns: cloneDeep(value.columns), if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name;
}); if (datas[t].isShowQuery) {
if (Number(objCode) === 1) { querys.push(datas[t]);
this.getPage(); if (datas[t].referenceObjId != null) {
} else { refIds.push(datas[t].id);
dispatch({ }
type: 'formList/getHead', if (datas[t].isGroupQuery != null) {
payload: { dataObjId: this.state.objId }, dispatch({
callback: (datas) => { type: 'formList/getGroupList',
this.state.formItem = datas; payload: { columnId: datas[t].id },
const querys = []; callback: (gourp) => {
const groups = {}; groups[datas[t].id] = gourp;
const refIds = []; this.setState({ groups });
for (let t in datas) { },
if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name; });
if (datas[t].isShowQuery) { }
querys.push(datas[t]); }
if (datas[t].referenceObjId != null) { }
refIds.push(datas[t].id); if (querys.length > 0) {
} this.setState({ querys });
if (datas[t].isGroupQuery != null) { if (refIds.length > 0) {
dispatch({ dispatch({
type: 'formList/getGroupList', type: 'formList/getBatchOptions',
payload: { columnId: datas[t].id }, payload: { ids: refIds },
callback: (gourp) => { callback: (options) => {
groups[datas[t].id] = gourp; this.setState({ options });
this.setState({ groups }); },
}, });
}); }
} }
} this.getPage();
} },
if (querys.length > 0) { });
this.setState({ querys }); }
if (refIds.length > 0) { return;
dispatch({ }
type: 'formList/getBatchOptions',
payload: { ids: refIds }, if (Number(objCode) === 1) {
callback: (options) => { } else {
this.setState({ options }); dispatch({
}, type: 'formList/getHead',
}); payload: { dataObjId: this.state.objId },
} callback: (datas) => {
} const querys = [];
this.getPage(); const refIds = [];
}, const groups = {};
}); if (datas) {
} this.state.formItem = datas;
return; let i = 0;
} let cacheList = [];
let cacheChecked = [];
if (Number(objCode) === 1) { // 表头筛选逻辑
} else { datas.map((item) => {
dispatch({ if (item.name != null) {
type: 'formList/getHead', cacheList.push({
payload: { dataObjId: this.state.objId }, label: item.title,
callback: (datas) => { value: item.name,
const querys = []; });
const refIds = []; cacheChecked.push(item.name);
const groups = {}; }
if (datas) { });
this.state.formItem = datas; this.checkList = cacheList;
let i = 0; this.setState({
let cacheList = []; checkedList: cacheChecked,
let cacheChecked = []; });
// 表头筛选逻辑 for (let t in datas) {
datas.map((item) => { if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name;
if (item.name != null) { if (datas[t].isHidden) {
cacheList.push({ continue;
label: item.title, }
value: item.name, let column = {};
}); column.title = datas[t].title;
cacheChecked.push(item.name); column.dataIndex = datas[t].name;
} column.width = datas[t].width;
}); if (i == 0) column.fixed = 'left';
this.checkList = cacheList;
this.setState({ if (columnRights.length > 0 && !columnRights.includes(datas[t].id)) {
checkedList: cacheChecked, continue;
}); }
for (let t in datas) { if (date.includes(datas[t].type)) {
if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name; column.render = (val) => {
if (datas[t].isHidden) { if (val == null) {
continue; return val;
} }
let column = {}; if (datas[t].dataFormatStrWeb != null) {
column.title = datas[t].title; return moment(val).format(datas[t].dataFormatStrWeb);
column.dataIndex = datas[t].name; } else {
column.width = datas[t].width; return moment(val).format('YYYY-MM-DD HH:mm:ss');
if (i == 0) column.fixed = 'left'; }
};
if (columnRights.length > 0 && !columnRights.includes(datas[t].id)) { } else if (datas[t].name.indexOf('process_status') > -1) {
continue; column.render = (val) => (val ? (val === '0' ? '审核通过' : '审核未通过') : null);
} } else if (datas[t].extendTypeId && datas[t].extendTypeId.indexOf('file') > -1) {
if (date.includes(datas[t].type)) { //特殊处理附件
column.render = (val) => { column.render = (val) => {
if (val == null) { if (this.isJSON(val)) {
return val; val = JSON.parse(val);
} let files = val.files;
if (datas[t].dataFormatStrWeb != null) { let xx = (
return moment(val) <ul>
.format(datas[t].dataFormatStrWeb); {files.map((f, index2) => {
} else { return (
return moment(val) <li key={index2}>
.format('YYYY-MM-DD HH:mm:ss'); <FilePreview path={queryApiActionPath() + f.path} pathName={f.name} />
} </li>
}; );
} else if (datas[t].name.indexOf('process_status') > -1) { })}
column.render = (val) => (val ? (val === '0' ? '审核通过' : '审核未通过') : null); </ul>
} else if (datas[t].extendTypeId && datas[t].extendTypeId.indexOf('file') > -1) { );
//特殊处理附件 return xx;
column.render = (val) => { } else {
if (this.isJSON(val)) { return val;
val = JSON.parse(val); }
let files = val.files; };
let xx = ( } else {
<ul> column.render = (val) =>
{files.map((f, index2) => { val && val.length > 100 ? (
return ( <Tooltip title={val} overlayStyle={{ width: 1000 }}>
<li key={index2}>
<FilePreview path={queryApiActionPath() + f.path} pathName={f.name}/>
</li>
);
})}
</ul>
);
return xx;
} else {
return val;
}
};
} else {
column.render = (val) =>
val && val.length > 100 ? (
<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({ this.setState({
data,
isReady: true,
});
} else {
this.setState({ data });
}
});
} else if (this.props.value && this.props.value.getPage) {
this.props.value.getPage(params, (data) => {
if (!this.state.isReady) {
this.setState({
data,
isReady: true,
});
} else {
this.setState({ data });
}
});
}
} else {
dispatch({
type: 'formList/fetch',
payload: {
custom: this.custom,
...params,
sql: this.sqlBs16,
dataObjId: this.state.objId,
},
callback: (data) => {
if (!this.state.isReady) {
this.setState({
data,
isReady: true,
selectedRows: [], // 姚鑫国说的 调了分页接口以后需要 把这个选择的行数据 清空
});
} else {
this.setState({
data, data,
isReady: true, selectedRows: [], // 姚鑫国说的 调了分页接口以后需要 把这个选择的行数据 清空
}); });
} else { }
this.setState({ data }); },
} });
}); }
} else if (this.props.value && this.props.value.getPage) { };
this.props.value.getPage(params, (data) => {
if (!this.state.isReady) { handleStandardTableChange = (pagination, filtersArg, sorter) => {
this.setState({ const filters = Object.keys(filtersArg).reduce((obj, key) => {
data, const newObj = { ...obj };
isReady: true, newObj[key] = getValue(filtersArg[key]);
}); return newObj;
} else { }, {});
this.setState({ data });
} const params = {
}); pageNo: pagination.current,
} pageSize: pagination.pageSize,
} else { ...filters,
dispatch({ query: JSON.stringify(this.state.formValues),
type: 'formList/fetch', };
payload: { if (sorter.field) {
custom: this.custom, params.sorter = `${sorter.field}_${sorter.order}`;
...params, }
this.getPage(params);
sql: this.sqlBs16, };
dataObjId: this.state.objId,
}, handleAdd = (fields, isAdd) => {
callback: (data) => { let params = {
if (!this.state.isReady) { ...fields,
this.setState({ };
data, this.props.dispatch({
isReady: true, type: 'formList/add',
}); payload: {
} else { params: params,
this.setState({ data }); objId: this.state.objId,
} isAdd: isAdd,
}, isSelf: true,
}); isView: false,
} },
}; callback: () => {
message.success('操作成功');
handleStandardTableChange = (pagination, filtersArg, sorter) => { this.setState({
const filters = Object.keys(filtersArg) modalVisible: false,
.reduce((obj, key) => { });
const newObj = { ...obj }; this.getPage();
newObj[key] = getValue(filtersArg[key]); },
return newObj; });
}, {}); };
const params = { handleModalVisible = () => {
pageNo: pagination.current, this.setState({
pageSize: pagination.pageSize, modalVisible: this.state.modalVisible ? false : true,
...filters, formData: {},
query: JSON.stringify(this.state.formValues), isView: false,
}; });
if (sorter.field) { };
params.sorter = `${sorter.field}_${sorter.order}`;
} add = () => {
this.getPage(params); // if (this.state.formItem.length < 10) {
}; this.getOptions();
this.setState({
handleAdd = (fields, isAdd) => { modalVisible: true,
let params = { formData: {},
...fields, isAdd: true,
}; isView: false,
this.props.dispatch({ });
type: 'formList/add', // } else {
payload: { // router.push({
params: params, // pathname: '/admin/ddl/dataObj/formEdit',
objId: this.state.objId, // state: { id: this.state.objId,isAdd: true,isView:false }
isAdd: isAdd, // });
isSelf: true, // }
isView: false, };
},
callback: () => { handleSelectRows = (rows) => {
message.success('操作成功'); if (this.props.onSelectRow) {
this.setState({ this.props.onSelectRow(rows);
modalVisible: false, }
}); this.setState({
this.getPage(); selectedRows: rows,
}, });
}); };
};
batchDelete = (e) => {
handleModalVisible = () => { const { dispatch } = this.props;
this.setState({ const { selectedRows } = this.state;
modalVisible: this.state.modalVisible ? false : true,
formData: {}, if (!selectedRows) return;
isView: false,
}); let columns = this.state.formItem;
}; let Keys = {};
add = () => { for (let i in columns) {
// if (this.state.formItem.length < 10) { if (columns[i].isPrimaryKey) {
this.getOptions(); //key
this.setState({ Keys[columns[i].name] = selectedRows.map((row) => row[columns[i].name]).join(',');
modalVisible: true, }
formData: {}, }
isAdd: true, this.props.dispatch({
isView: false, type: 'formList/delete',
}); payload: {
// } else { keys: JSON.stringify(Keys),
// router.push({ objId: this.state.objId,
// pathname: '/admin/ddl/dataObj/formEdit', // isSelf: true,
// state: { id: this.state.objId,isAdd: true,isView:false } },
// }); callback: () => {
// } this.setState({
}; selectedRows: [],
});
handleSelectRows = (rows) => { this.getPage();
if (this.props.onSelectRow) { },
this.props.onSelectRow(rows); });
} };
this.setState({
selectedRows: rows, goBack = () => {
}); router.goBack();
}; };
handleSearch = (e) => {
batchDelete = (e) => { e.preventDefault();
const { dispatch } = this.props;
const { selectedRows } = this.state; const { dispatch, form } = this.props;
if (!selectedRows) return; const { formValues } = this.state;
let columns = this.state.formItem; form.validateFields((err, fieldsValue) => {
let Keys = {}; if (err) return;
for (let i in columns) { const formItem = this.state.formItem;
if (columns[i].isPrimaryKey) { formItem.map((item, index) => {
//key if (item.type.indexOf('DATE') > -1) {
Keys[columns[i].name] = selectedRows.map((row) => row[columns[i].name]) for (let d in fieldsValue) {
.join(','); if (item.name === d && fieldsValue[d]) {
} if (fieldsValue[d] != null && fieldsValue[d].length > 0) {
} fieldsValue[d] = [
this.props.dispatch({ fieldsValue[d][0].format('YYYY-MM-DD HH:mm:ss'),
type: 'formList/delete', fieldsValue[d][1].format('YYYY-MM-DD HH:mm:ss'),
payload: { ];
keys: JSON.stringify(Keys), } else {
objId: this.state.objId, fieldsValue[d] = '';
// isSelf: true, }
}, }
callback: () => { }
this.setState({ }
selectedRows: [], });
}); const values = {
this.getPage(); ...this.state.formValues,
}, ...fieldsValue,
}); };
}; this.setState({
formValues: fieldsValue,
goBack = () => { });
router.goBack(); const params = {
}; pageNo: 1,
handleSearch = (e) => { pageSize: this.props.pageSize || 10,
e.preventDefault(); query: JSON.stringify(values),
};
const { this.getPage(params, values, null, 1);
dispatch, });
form };
} = this.props;
hanldeHighSearch = (e) => {
const { formValues } = this.state; const pagination = this.props.formList.data.pagination;
let params = {
form.validateFields((err, fieldsValue) => { pageNo: pagination.current ? pagination.current : 1,
if (err) return; pageSize: pagination.pageSize ? pagination.pageSize : this.props.pageSize || 10,
...e,
const formItem = this.state.formItem; };
formItem.map((item, index) => { this.setState({ formValues: { ...e, ...this.state.formValues } });
if (item.type.indexOf('DATE') > -1) { this.getPage(params);
for (let d in fieldsValue) { };
if (item.name === d && fieldsValue[d]) { handleFormReset = () => {
if (fieldsValue[d] != null && fieldsValue[d].length > 0) { const { form, dispatch } = this.props;
fieldsValue[d] = [ form.resetFields();
fieldsValue[d][0].format('YYYY-MM-DD HH:mm:ss'), this.setState(
fieldsValue[d][1].format('YYYY-MM-DD HH:mm:ss'), {
]; formValues: {},
} else { },
fieldsValue[d] = ''; () => {
} this.getPage();
} },
} );
} };
}); getItem = (isQuery, form, item, isAdd, formData, labelCol, wrapperCol) => {
const values = { const { groups, isView } = this.state;
...this.state.formValues, //如果隐藏的话 就用隐藏域放置
...fieldsValue, if (item.isHidden) {
}; return (
this.setState({ <FormItem className={styles.hidden} key={item.id}>
formValues: fieldsValue, {form.getFieldDecorator(item.name, {
}); initialValue: formData == null ? '' : formData[item.name],
const params = { })(<Input type="hidden" placeholder="请输入" />)}
pageNo: 1, </FormItem>
pageSize: this.props.pageSize || 10, );
query: JSON.stringify(values), }
};
this.getPage(params, values, null, 1); if (item.isPrimaryKey) {
}); if (isAdd) {
}; return <></>;
} else {
hanldeHighSearch = (e) => { return (
const pagination = this.props.formList.data.pagination; <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
let params = { {form.getFieldDecorator(item.name, {
pageNo: pagination.current ? pagination.current : 1, initialValue: formData == null ? '' : formData[item.name],
pageSize: pagination.pageSize ? pagination.pageSize : this.props.pageSize || 10, rules: [{ required: !item.isNull }],
...e, })(<Input style={{ width: '70%' }} readOnly={!isAdd} placeholder="请输入" />)}
}; </FormItem>
this.setState({ formValues: { ...e, ...this.state.formValues } }); );
this.getPage(params); }
}; } else if (item.referenceObjId != null) {
handleFormReset = () => { const { options } = this.state;
const { const ops = options[item.id + ''] || [];
form, return (
dispatch <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
} = this.props; {form.getFieldDecorator(item.name, {
form.resetFields(); initialValue: formData == null ? '' : formData[item.name],
this.setState( rules: [{ required: !item.isNull }],
{ })(
formValues: {}, <Select
}, disabled={isView}
() => { style={{ width: '70%' }}
this.getPage(); optionFilterProp="children"
}, showSearch
); filterOption={(input, option) =>
}; option
getItem = (isQuery, form, item, isAdd, formData, labelCol, wrapperCol) => { ? option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
const { : false
groups, }
isView placeholder="请选择"
} = this.state; allowClear>
//如果隐藏的话 就用隐藏域放置 {ops.map((r) => (
if (item.isHidden) { <Option value={r[item.referenceCodeName]} key={r[item.referenceCodeName]}>
return ( {r[item.referenceNameName]}
<FormItem className={styles.hidden} key={item.id}> </Option>
{form.getFieldDecorator(item.name, { ))}
initialValue: formData == null ? '' : formData[item.name], </Select>,
})(<Input type="hidden" placeholder="请输入"/>)} )}
</FormItem> </FormItem>
); );
} } else if (item.name.indexOf('process_status') > -1) {
return (
if (item.isPrimaryKey) { <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
if (isAdd) { {form.getFieldDecorator(item.name, {
return <></>; initialValue: formData == null ? '' : formData[item.name],
} else { rules: [{ required: !item.isNull }],
return ( })(
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> <Select disabled={isView} style={{ width: '70%' }} placeholder="请选择" allowClear>
{form.getFieldDecorator(item.name, { <Option value={'0'} key={'0'}>
initialValue: formData == null ? '' : formData[item.name], 审核通过
rules: [{ required: !item.isNull }], </Option>
})(<Input style={{ width: '70%' }} readOnly={!isAdd} placeholder="请输入"/>)} <Option value={'2'} key={'2'}>
</FormItem> 审核未通过
); </Option>
} </Select>,
} else if (item.referenceObjId != null) { )}
const { options } = this.state; </FormItem>
const ops = options[item.id + ''] || []; );
return ( } else if (item.extendTypeId && item.extendTypeId.indexOf('file') > -1) {
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> //特殊处理附件 如果是查询就 跳过
{form.getFieldDecorator(item.name, { if (isQuery) return;
initialValue: formData == null ? '' : formData[item.name], return (
rules: [{ required: !item.isNull }], <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
})( {form.getFieldDecorator(item.name, {
<Select initialValue:
disabled={isView} formData == null
style={{ width: '70%' }} ? ''
optionFilterProp="children" : formData[item.name] && this.isJSON(formData[item.name])
showSearch ? JSON.parse(formData[item.name])
filterOption={(input, option) => : null,
option rules: [{ required: !item.isNull }],
? option.props.children.toLowerCase() })(<UploadCom disabled={isView} />)}
.indexOf(input.toLowerCase()) >= 0 </FormItem>
: false );
} } else if (isQuery && item.isGroupQuery != null && item.isGroupQuery) {
placeholder="请选择" //如果是查询 并且是组合查询
allowClear>
{ops.map((r) => ( const ops = groups[item.id + ''] || [];
<Option value={r[item.referenceCodeName]} key={r[item.referenceCodeName]}> return (
{r[item.referenceNameName]} <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
</Option> {form.getFieldDecorator(item.name, {
))} initialValue: formData == null ? '' : formData[item.name],
</Select>, rules: [{ required: !item.isNull }],
)} })(
</FormItem> <Select
); disabled={isView}
} else if (item.name.indexOf('process_status') > -1) { style={{ width: 200 }}
return ( placeholder="请选择"
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> optionFilterProp="children"
{form.getFieldDecorator(item.name, { showSearch
initialValue: formData == null ? '' : formData[item.name], filterOption={(input, option) =>
rules: [{ required: !item.isNull }], option
})( ? option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
<Select disabled={isView} style={{ width: '70%' }} placeholder="请选择" allowClear> : false
<Option value={'0'} key={'0'}> }
审核通过 allowClear>
</Option> {ops.map((r) => (
<Option value={'2'} key={'2'}> <Option value={r.value} key={r.value}>
审核未通过 {r.value}
</Option> </Option>
</Select>, ))}
)} </Select>,
</FormItem> )}
); </FormItem>
} else if (item.extendTypeId && item.extendTypeId.indexOf('file') > -1) { );
//特殊处理附件 如果是查询就 跳过 } else if (text.indexOf(item.type) > -1) {
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: formData == null ? '' : formData[item.name],
initialValue: rules: [{ required: !item.isNull }],
formData == null })(<Input disabled={isView} style={{ width: '70%' }} placeholder="请输入" />)}
? '' </FormItem>
: formData[item.name] && this.isJSON(formData[item.name]) );
? JSON.parse(formData[item.name]) } else if (number.indexOf(item.type) > -1) {
: null, return (
rules: [{ required: !item.isNull }], <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
})(<UploadCom disabled={isView}/>)} {form.getFieldDecorator(item.name, {
</FormItem> initialValue: formData == null ? '' : formData[item.name],
); rules: [
} else if (isQuery && item.isGroupQuery != null && item.isGroupQuery) { { required: !item.isNull },
//如果是查询 并且是组合查询 (rule, value, callback) => {
var errors = [];
const ops = groups[item.id + ''] || []; var reg = new RegExp(/(^-?[0-9][0-9]*(.[0-9]+)?)$/);
return ( if (value != null && value != '' && !reg.test(value)) {
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> errors.push(new Error('请输入'), rule.field);
{form.getFieldDecorator(item.name, { }
initialValue: formData == null ? '' : formData[item.name], callback(errors);
rules: [{ required: !item.isNull }], },
})( ],
<Select })(<Input disabled={isView} placeholder="请输入" />)}
disabled={isView} </FormItem>
style={{ width: 200 }} );
placeholder="请选择" } else if (isQuery && date.indexOf(item.type) > -1) {
optionFilterProp="children" return (
showSearch <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
filterOption={(input, option) => {form.getFieldDecorator(item.name, {
option initialValue: formData == null ? null : moment(formData[item.name]),
? option.props.children.toLowerCase() rules: [{ required: !item.isNull }],
.indexOf(input.toLowerCase()) >= 0 })(
: false <RangePicker
} disabled={isView}
allowClear> format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb}
{ops.map((r) => ( style={{ width: '95%' }}
<Option value={r.value} key={r.value}> />,
{r.value} )}
</Option> </FormItem>
))} );
</Select>, } else if (date.indexOf(item.type) > -1) {
)} return (
</FormItem> <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
); {form.getFieldDecorator(item.name, {
} else if (text.indexOf(item.type) > -1) { initialValue:
return ( formData == null
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> ? moment()
{form.getFieldDecorator(item.name, { : formData[item.name]
initialValue: formData == null ? '' : formData[item.name], ? moment(formData[item.name])
rules: [{ required: !item.isNull }], : null,
})(<Input disabled={isView} style={{ width: '70%' }} placeholder="请输入"/>)} rules: [{ required: !item.isNull }],
</FormItem> })(
); <DatePicker
} else if (number.indexOf(item.type) > -1) { format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb}
return ( style={{ width: '100%' }}
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> placeholder="请输入"
{form.getFieldDecorator(item.name, { disabled={isView}
initialValue: formData == null ? '' : formData[item.name], />,
rules: [ )}
{ required: !item.isNull }, </FormItem>
(rule, value, callback) => { );
var errors = []; } else {
var reg = new RegExp(/(^-?[0-9][0-9]*(.[0-9]+)?)$/); return (
if (value != null && value != '' && !reg.test(value)) { <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
errors.push(new Error('请输入'), rule.field); {form.getFieldDecorator(item.name, {
} initialValue: formData == null ? '' : formData[item.name],
callback(errors); rules: [{ required: !item.isNull }],
}, })(<Input disabled={isView} style={{ width: '70%' }} placeholder="请输入" />)}
], </FormItem>
})(<Input disabled={isView} placeholder="请输入"/>)} );
</FormItem> }
); };
} else if (isQuery && date.indexOf(item.type) > -1) {
return ( renderForm() {
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> const { form, get } = this.props;
{form.getFieldDecorator(item.name, {
initialValue: formData == null ? null : moment(formData[item.name]), const { querys } = this.state;
rules: [{ required: !item.isNull }], if (querys.length == 0) {
})( return '';
<RangePicker }
disabled={isView}
format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb} return (
style={{ width: '95%' }} <Form layout="inline">
/>, <Row style={{ padding: '15px' }}>
)} {querys.map((item) => (
</FormItem> <Col style={{ height: 58 }} span={get === 'mobile' ? 24 : 8} key={item.id}>
); {this.getItem(
} else if (date.indexOf(item.type) > -1) { true,
return ( form,
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> {
{form.getFieldDecorator(item.name, { ...item,
initialValue: isNull: true,
formData == null },
? moment() true,
: formData[item.name] )}
? moment(formData[item.name]) </Col>
: null, ))}
rules: [{ required: !item.isNull }],
})( <Col
<DatePicker span={get === 'mobile' ? 24 : 8}
format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb} style={{
style={{ width: '100%' }} textAlign: get === 'mobile' ? 'right' : '',
placeholder="请输入" paddingRight: get === 'mobile' ? 12 : '',
disabled={isView} }}>
/>,
)}
</FormItem>
);
} else {
return (
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
{form.getFieldDecorator(item.name, {
initialValue: formData == null ? '' : formData[item.name],
rules: [{ required: !item.isNull }],
})(<Input disabled={isView} style={{ width: '70%' }} placeholder="请输入"/>)}
</FormItem>
);
}
};
renderForm() {
const {
form,
get
} = this.props;
const { querys } = this.state;
if (querys.length == 0) {
return '';
}
return (
<Form layout="inline">
<Row style={{ padding: '15px' }}>
{querys.map((item) => (
<Col style={{ height: 58 }} span={get === 'mobile' ? 24 : 8} key={item.id}>
{this.getItem(
true,
form,
{
...item,
isNull: true,
},
true,
)}
</Col>
))}
<Col
span={get === 'mobile' ? 24 : 8}
style={{
textAlign: get === 'mobile' ? 'right' : '',
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}>
查询 查询
...@@ -1128,246 +1094,240 @@ class FormList extends React.Component { ...@@ -1128,246 +1094,240 @@ class FormList extends React.Component {
<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() { render() {
const { const { modalVisible, selectedRows, rights, data, isReady } = this.state;
modalVisible,
selectedRows, if (!isReady) {
rights, return (
data, <div
isReady, style={{
} = this.state; width: 20,
margin: 'auto',
if (!isReady) { }}>
return ( <Spin />
<div </div>
style={{ );
width: 20, }
margin: 'auto', const {
}}> isFormCom,
<Spin/> isSelect,
</div> get,
); callback,
} valueName,
const { notShowBack,
isFormCom, json,
isSelect, istableCom, // 是否有模板设计器调用
get, value: { btns },
callback, loading,
valueName, uuid,
notShowBack, } = this.props;
json, const { showMobileDiv, isView } = this.state;
istableCom, // 是否有模板设计器调用
value: { btns }, let scrollWidth = document.documentElement.clientWidth || document.body.clientWidth; //可使宽度
loading, let isMobile = scrollWidth < 1000;
uuid, if (document.querySelector('#previewDiv')) {
} = this.props; isMobile = true;
const { }
showMobileDiv,
isView const showDiv = countWidth({
} = this.state; json,
uuid,
let scrollWidth = document.documentElement.clientWidth || document.body.clientWidth; //可使宽度 });
let isMobile = scrollWidth < 1000; const parentMethods = {
if (document.querySelector('#previewDiv')) { handleAdd: this.handleAdd,
isMobile = true; handleModalVisible: this.handleModalVisible,
} formData: this.state.formData,
formItem: this.state.formItem,
const showDiv = countWidth({json, uuid}); isAdd: this.state.isAdd,
const parentMethods = { getItem: this.getItem,
handleAdd: this.handleAdd, isView: isView,
handleModalVisible: this.handleModalVisible, };
formData: this.state.formData,
formItem: this.state.formItem, if (
isAdd: this.state.isAdd, !isSelect &&
getItem: this.getItem, !rights.includes('edit') &&
isView: isView, !rights.includes('delete') &&
}; !rights.includes('view') &&
!rights.includes('viewProcess')
if ( ) {
!isSelect && } else {
!rights.includes('edit') && let width = 0;
!rights.includes('delete') && if (rights && rights.includes('viewProcess')) {
!rights.includes('view') && width = width + 120;
!rights.includes('viewProcess') }
) { if (rights && rights.includes('view')) {
} else { width = width + 120;
let width = 0; }
if (rights && rights.includes('viewProcess')) { if (rights && rights.includes('edit')) {
width = width + 120; width = width + 70;
} }
if (rights && rights.includes('view')) { if (rights && rights.includes('delete')) {
width = width + 120; width = width + 70;
} }
if (rights && rights.includes('edit')) { const column = {
width = width + 70; title: '操作',
} fixed: 'right',
if (rights && rights.includes('delete')) { width: width,
width = width + 70; render: (text, record) => {
} let Dom = [];
const column = { if (isSelect) {
title: '操作', if (this.state.selects.includes(record[valueName])) {
fixed: 'right', Dom.push(<span>已选择</span>);
width: width, } else {
render: (text, record) => { Dom.push(<a onClick={callback.bind(this, record, this.columns)}>选择</a>);
let Dom = []; }
if (isSelect) { }
if (this.state.selects.includes(record[valueName])) { if (rights) {
Dom.push(<span>已选择</span>); if (rights.includes('view')) {
} else { Dom.push(<a onClick={this.view.bind(this, record)}>查看详情</a>);
Dom.push(<a onClick={callback.bind(this, record, this.columns)}>选择</a>); }
} if (rights.includes('edit')) {
} Dom.push(<a onClick={this.modify.bind(this, record)}>编辑</a>);
if (rights) { }
if (rights.includes('view')) { if (rights.includes('viewProcess') && record.process_biz_key) {
Dom.push(<a onClick={this.view.bind(this, record)}>查看详情</a>); Dom.push(<a onClick={this.viewProcess.bind(this, record)}>流程详情</a>);
} }
if (rights.includes('edit')) { if (rights.includes('delete')) {
Dom.push(<a onClick={this.modify.bind(this, record)}>编辑</a>); Dom.push(
} <Popconfirm
if (rights.includes('viewProcess') && record.process_biz_key) { title="确定删除该数据?"
Dom.push(<a onClick={this.viewProcess.bind(this, record)}>流程详情</a>); onConfirm={this.delete.bind(this, record)}
} okText="确定"
if (rights.includes('delete')) { cancelText="取消">
Dom.push( <a>删除</a>
<Popconfirm </Popconfirm>,
title="确定删除该数据?" );
onConfirm={this.delete.bind(this, record)} }
okText="确定" }
cancelText="取消"> return (
<a>删除</a> <Fragment>
</Popconfirm>, <div
); style={{
} textAlign: 'center',
} paddingLeft: '0px',
return ( paddingRight: '0px',
<Fragment> }}>
<div {Dom &&
style={{ Dom.length &&
textAlign: 'center', Dom.map((x, index) => (
paddingLeft: '0px', <Fragment key={Math.random()}>
paddingRight: '0px', {x}
}}> {index > 0 && index !== Dom.length - 1 && <Divider type="vertical" />}
{Dom && </Fragment>
Dom.length && ))}
Dom.map((x, index) => ( </div>
<Fragment key={Math.random()}> </Fragment>
{x} );
{index > 0 && index !== Dom.length - 1 && <Divider type="vertical"/>} },
</Fragment> };
))} if (this.columns.length > 0 && this.columns[this.columns.length - 1].title == '操作') {
</div> this.columns[this.columns.length - 1] = column;
</Fragment> } else {
); this.columns.push(column);
}, }
}; }
if (this.columns.length > 0 && this.columns[this.columns.length - 1].title == '操作') { // console.log(this.columns);
this.columns[this.columns.length - 1] = column; if (this.columns) {
} else { /**
this.columns.push(column); * 计算总长度
} */
} AllWidth = 0;
// console.log(this.columns); this.columns = this.columns.map((item, index) => {
if (this.columns) { if (isEmpty(item)) {
/** return item;
* 计算总长度 }
*/ if (
AllWidth = 0; index === this.columns.length - 1 &&
this.columns = this.columns.map((item, index) => { this.columns[this.columns.length - 1].title !== '操作'
if (isEmpty(item)) { ) {
return item; AllWidth += 150;
} item.width = '';
if ( return item;
index === this.columns.length - 1 && }
this.columns[this.columns.length - 1].title !== '操作' let width = item.width ? item.width : 150;
) { if (!item.width) {
AllWidth += 150; item.width = 150;
item.width = ''; }
return item; AllWidth += width;
} return item;
let width = item.width ? item.width : 150; });
if (!item.width) { if (
item.width = 150; !isEmpty(this.columns[this.columns.length - 1]) &&
} this.columns[this.columns.length - 1].title === '操作'
AllWidth += width; ) {
return item; if (this.columns[this.columns.length - 2]) {
}); this.columns[this.columns.length - 2].width = '';
if ( AllWidth += 100;
!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 = ''; const xxxx = (
AllWidth += 100; <>
} <Card
} bordered={false}
} bodyStyle={{
padding: 0,
const xxxx = ( width: json.twidth ? json.twidth : '100%',
<> }}>
<Card <div className={styles.tableList}>
bordered={false} <div className={styles.tableListForm}>{this.renderForm()}</div>
bodyStyle={{ <div className={styles.tableListOperator}>
padding: 0, {notShowBack ? (
width: json.twidth ? json.twidth : '100%', notShowBack
}}> ) : (
<div className={styles.tableList}> <Button icon="rollback" type="primary" onClick={this.goBack}>
<div className={styles.tableListForm}>{this.renderForm()}</div> 返回
<div className={styles.tableListOperator}> </Button>
{notShowBack ? ( )}
notShowBack
) : ( <FormListButtons
<Button icon="rollback" type="primary" onClick={this.goBack}> btns={btns}
返回 loading={loading}
</Button> importConfig={(this.props.value && this.props.value.importConfig) || []}
)} exportConfig={(this.props.value && this.props.value.exportConfig) || []}
getPage={this.getPage}
<FormListButtons objId={this.state.objId}
btns={btns} query={JSON.stringify(this.state.formValues)}
loading={loading} custom={this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null}
importConfig={(this.props.value && this.props.value.importConfig) || []} sql={Base16Encode(this.props.sql)}
exportConfig={(this.props.value && this.props.value.exportConfig) || []} />
getPage={this.getPage} {/* {this.props.value && this.props.value.importConfig // 导入配置项
objId={this.state.objId}
query={JSON.stringify(this.state.formValues)}
custom={this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null}
sql={Base16Encode(this.props.sql)}
/>
{/* {this.props.value && this.props.value.importConfig // 导入配置项
? this.props.value.importConfig.map((r, i) => ( ? this.props.value.importConfig.map((r, i) => (
<ImportUtil <ImportUtil
btn={r.btn} btn={r.btn}
...@@ -1382,7 +1342,7 @@ class FormList extends React.Component { ...@@ -1382,7 +1342,7 @@ class FormList extends React.Component {
)) ))
: ''}*/} : ''}*/}
{/* {this.props.value && this.props.value.exportConfig // 导出配置项 {/* {this.props.value && this.props.value.exportConfig // 导出配置项
? this.props.value.exportConfig.map((r, i) => ( ? this.props.value.exportConfig.map((r, i) => (
<ExportCurrentInfo <ExportCurrentInfo
objId={this.state.objId} objId={this.state.objId}
...@@ -1398,164 +1358,164 @@ class FormList extends React.Component { ...@@ -1398,164 +1358,164 @@ class FormList extends React.Component {
)) ))
: ''} : ''}
*/} */}
{rights && !rights.includes('add') ? ( {rights && !rights.includes('add') ? (
'' ''
) : ( ) : (
<Button icon="plus" type="primary" onClick={this.add}> <Button icon="plus" type="primary" onClick={this.add}>
新建 新建
</Button> </Button>
)} )}
{rights && !rights.includes('searchData') ? ( {rights && !rights.includes('searchData') ? (
'' ''
) : ( ) : (
<SearchInfo hanldeHighSearch={this.hanldeHighSearch} objId={this.state.objId}/> <SearchInfo hanldeHighSearch={this.hanldeHighSearch} objId={this.state.objId} />
)} )}
{rights && !rights.includes('importData') ? ( {rights && !rights.includes('importData') ? (
'' ''
) : ( ) : (
<ImportUtil objId={this.state.objId} callback={() => this.getPage()}/> <ImportUtil objId={this.state.objId} callback={() => this.getPage()} />
)} )}
{rights && !rights.includes('exportCurrent') ? ( {rights && !rights.includes('exportCurrent') ? (
'' ''
) : ( ) : (
<ExportCurrentInfo <ExportCurrentInfo
objId={this.state.objId} objId={this.state.objId}
query={JSON.stringify(this.state.formValues)} query={JSON.stringify(this.state.formValues)}
custom={this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null} custom={this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null}
sql={Base16Encode(this.props.sql)} sql={Base16Encode(this.props.sql)}
/> />
)} )}
{rights && !rights.includes('exportData') ? ( {rights && !rights.includes('exportData') ? (
'' ''
) : ( ) : (
<ExportInfo objId={this.state.objId}/> <ExportInfo objId={this.state.objId} />
)} )}
{rights && !rights.includes('statistics') ? ( {rights && !rights.includes('statistics') ? (
'' ''
) : ( ) : (
<StatisticsInfo objId={this.state.objId}/> <StatisticsInfo objId={this.state.objId} />
)} )}
{rights && !rights.includes('delete') {rights && !rights.includes('delete')
? '' ? ''
: selectedRows.length > 0 && ( : selectedRows.length > 0 && (
<span> <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} />)
: ''} : ''}
{!!this.props.otherProps && {!!this.props.otherProps &&
!!this.props.otherProps.showRightTips && !!this.props.otherProps.showRightTips &&
this.props.otherProps.RightTipsComponent} this.props.otherProps.RightTipsComponent}
</div> </div>
{!istableCom || (this.props.value && this.props.value.columns) ? ( {!istableCom || (this.props.value && this.props.value.columns) ? (
<div <div
id="mobelDiv" id="mobelDiv"
className={'mobelDivClassName'} className={'mobelDivClassName'}
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论