Skip to content

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

29413 【列表组件优化】是否隐藏查询

上级 a5d9c5b0
隐藏空白字符变更
内嵌 并排
正在显示 包含 1457 行增加 和 1473 行删除
one_stop_public/libs/formList/index.js
浏览文件 @ 17f1a944
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';
...@@ -43,1479 +43,1463 @@ const Modal = getModal(); ...@@ -43,1479 +43,1463 @@ const Modal = getModal();
let AllWidth = 0; // 表格总长度 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) => >
getItem(false, form, item, isAdd, formData, { span: 5 }, { span: 15 }), {formItem.map((item, index) =>
)} 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,
loading: loading.models.formList, loading: loading.models.formList,
// 解决 禅道 28100 查询下拉选择后界面会刷新一次 // 解决 禅道 28100 查询下拉选择后界面会刷新一次
// https://blog.csdn.net/m0_37148591/article/details/103685339 dva-loading // 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 { dispatch } = this.props; const { dispatch } = this.props;
window.addEventListener('resize', this.resize); window.addEventListener('resize', this.resize);
// console.log('componentDidMount'); // console.log('componentDidMount');
if (this.props.objCode) { if (this.props.objCode) {
const { dispatch, objCode, sql } = this.props; const { dispatch, objCode, sql } = this.props;
if (Number(objCode) === 1) { if (Number(objCode) === 1) {
this.initColumn(); this.initColumn();
} else { } else {
dispatch({ dispatch({
type: 'DataObj/findByCode', type: 'DataObj/findByCode',
payload: { objCode: this.props.objCode }, payload: { objCode: this.props.objCode },
callback: (dataObj) => { callback: dataObj => {
this.setState( this.setState(
{ {
objId: dataObj.id, objId: dataObj.id,
isTable: dataObj.isTable, isTable: dataObj.isTable,
}, },
() => { () => {
dispatch({ dispatch({
type: 'DataRight/getUserRight', type: 'DataRight/getUserRight',
payload: { objId: this.state.objId }, payload: { objId: this.state.objId },
callback: (data) => { callback: data => {
if (!this.props.rights) { if (!this.props.rights) {
this.setState({ rights: data }); this.setState({ rights: data });
} }
dispatch({ dispatch({
type: 'DataRight/getUserColumnRight', type: 'DataRight/getUserColumnRight',
payload: { objId: this.state.objId }, payload: { objId: this.state.objId },
callback: (data) => { callback: data => {
this.setState({ columnRights: data }); this.setState({ columnRights: data });
this.initColumn(); this.initColumn();
}, },
}); });
}, },
}); });
}, },
); );
}, },
}); });
} }
} else { } else {
dispatch({ dispatch({
type: 'formList/getObjDetail', type: 'formList/getObjDetail',
payload: { id: this.state.objId }, payload: { id: this.state.objId },
callback: (data) => { callback: data => {
this.setState({ isTable: data.isTable }); this.setState({ isTable: data.isTable });
}, },
}); });
dispatch({ dispatch({
type: 'DataRight/getUserRight', type: 'DataRight/getUserRight',
payload: { objId: this.state.objId }, payload: { objId: this.state.objId },
callback: (data) => { callback: data => {
if (!this.props.rights) { if (!this.props.rights) {
this.setState({ rights: data }); this.setState({ rights: data });
} }
dispatch({ dispatch({
type: 'DataRight/getUserColumnRight', type: 'DataRight/getUserColumnRight',
payload: { objId: this.state.objId }, payload: { objId: this.state.objId },
callback: (data) => { callback: data => {
this.setState({ columnRights: data }); this.setState({ columnRights: data });
this.initColumn(); this.initColumn();
}, },
}); });
}, },
}); });
} }
} }
/** /**
* 移除监听器 * 移除监听器
*/ */
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('resize', this.resize); 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) { componentWillReceiveProps(nextProps) {
const b = nextProps.value || {}; const b = nextProps.value || {};
const a = this.props.value || {}; const a = this.props.value || {};
const jsonb = JSON.stringify(b); const jsonb = JSON.stringify(b);
const jsona = JSON.stringify(a); const jsona = JSON.stringify(a);
this.custom = jsonb; this.custom = jsonb;
if (jsona != jsonb) { if (jsona != jsonb) {
let params = { let params = {
pageNo: b.pageNo ? b.pageNo : 1, pageNo: b.pageNo ? b.pageNo : 1,
pageSize: b.pageSize ? b.pageSize : this.state.data.pagination.pageSize, pageSize: b.pageSize ? b.pageSize : this.state.data.pagination.pageSize,
query: JSON.stringify(this.state.formValues), query: JSON.stringify(this.state.formValues),
}; };
if (nextProps.value.columns != null && nextProps.value.columns.length > 0) { if (nextProps.value.columns != null && nextProps.value.columns.length > 0) {
this.columns = nextProps.value.columns; this.columns = nextProps.value.columns;
} }
if (nextProps.value.selectedRows && Array.isArray(nextProps.value.selectedRows)) { if (nextProps.value.selectedRows && Array.isArray(nextProps.value.selectedRows)) {
// 27867 就业市场/线上招聘管理/职位信息审核，胡林那 hulinnaAdmin 马上审核通过的职位直接发布 发布不了 // 27867 就业市场/线上招聘管理/职位信息审核，胡林那 hulinnaAdmin 马上审核通过的职位直接发布 发布不了
this.setState({ this.setState({
selectedRows: nextProps.value.selectedRows, selectedRows: nextProps.value.selectedRows,
}); });
} }
if (nextProps.value.getPage) { if (nextProps.value.getPage) {
this.getPage(params, null, nextProps.value.getPage); this.getPage(params, null, nextProps.value.getPage);
} else { } else {
if (this.state.objId) this.getPage(params); if (this.state.objId) this.getPage(params);
} }
} }
const x = nextProps.selects; const x = nextProps.selects;
const y = this.props.selects; const y = this.props.selects;
if (JSON.stringify(x) != JSON.stringify(y)) { if (JSON.stringify(x) != JSON.stringify(y)) {
this.setState({ selects: x }); this.setState({ selects: x });
} }
} }
initColumn = () => { initColumn = () => {
const { dispatch, value, objCode } = this.props; const { dispatch, value, objCode } = this.props;
const { rights, columnRights } = this.state; const { rights, columnRights } = this.state;
if (value && value.columns) { if (value && value.columns) {
this.columns = value.columns; this.columns = value.columns;
let cacheList = []; let cacheList = [];
let cacheChecked = []; 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 (date.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={queryFileUrl(f.path)} pathName={f.name} /> <FilePreview path={queryFileUrl(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} >
</span> {val}
</Tooltip> </span>
) : ( </Tooltip>
val ) : (
); val
} );
}
this.setState({ tableWidth: (datas.length - 1) * 200 });
this.columns.push(column); this.setState({ tableWidth: (datas.length - 1) * 200 });
this.setState({ this.columns.push(column);
cacheColumns: cloneDeep(this.columns), this.setState({
}); cacheColumns: cloneDeep(this.columns),
if (datas[t].isShowQuery) { });
querys.push(datas[t]); if (datas[t].isShowQuery) {
if (datas[t].referenceObjId != null) { querys.push(datas[t]);
refIds.push(datas[t].id); if (datas[t].referenceObjId != null) {
} refIds.push(datas[t].id);
if (datas[t].isGroupQuery != null) { }
dispatch({ if (datas[t].isGroupQuery != null) {
type: 'formList/getGroupList', dispatch({
payload: { columnId: datas[t].id }, type: 'formList/getGroupList',
callback: (gourp) => { payload: { columnId: datas[t].id },
groups[datas[t].id] = gourp; callback: gourp => {
this.setState({ groups }); groups[datas[t].id] = gourp;
}, this.setState({ groups });
}); },
} });
} }
i++; }
} i++;
if (querys.length > 0) { }
this.setState({ querys }); if (querys.length > 0) {
if (refIds.length > 0) { this.setState({ querys });
dispatch({ if (refIds.length > 0) {
type: 'formList/getBatchOptions', dispatch({
payload: { ids: refIds }, type: 'formList/getBatchOptions',
callback: (options) => { payload: { ids: refIds },
this.setState({ options }); callback: options => {
}, this.setState({ options });
}); },
} });
} }
}
this.getPage();
} this.getPage();
}, }
}); },
} });
}; }
sqlBs16 = this.props.sql; };
sqlBs16 = this.props.sql;
getPage = (params, values, callPage, pageNo) => {
const { objCode } = this.props; getPage = (params, values, callPage, pageNo) => {
if (this.columns == null || this.columns.length == 0) { const { objCode } = this.props;
return; if (this.columns == null || this.columns.length == 0) {
} return;
const { dispatch } = this.props; }
const pagination = this.state.data.pagination; const { dispatch } = this.props;
const pagination = this.state.data.pagination;
if (params == null) {
params = { if (params == null) {
pageNo: pageNo != null ? pageNo : pagination.current ? pagination.current : 1, params = {
pageSize: pagination.pageSize ? pagination.pageSize : this.props.pageSize || 10, pageNo: pageNo != null ? pageNo : pagination.current ? pagination.current : 1,
query: JSON.stringify(values != null ? values : this.state.formValues), pageSize: pagination.pageSize ? pagination.pageSize : this.props.pageSize || 10,
}; query: JSON.stringify(values != null ? values : this.state.formValues),
} else { };
if (params.pageNo == null && callPage == null && this.props.value.getPage == null) return; } else {
} if (params.pageNo == null && callPage == null && this.props.value.getPage == null) return;
}
if (Number(objCode) === 1) {
if (callPage) { if (Number(objCode) === 1) {
callPage(params, (data) => { if (callPage) {
if (!this.state.isReady) { callPage(params, data => {
this.setState({ if (!this.state.isReady) {
data, this.setState({
isReady: true, data,
}); isReady: true,
} else { });
this.setState({ data }); } else {
} this.setState({ data });
}); }
} else if (this.props.value && this.props.value.getPage) { });
this.props.value.getPage(params, (data) => { } else if (this.props.value && this.props.value.getPage) {
if (!this.state.isReady) { this.props.value.getPage(params, data => {
this.setState({ if (!this.state.isReady) {
data, this.setState({
isReady: true, data,
}); isReady: true,
} else { });
this.setState({ data }); } else {
} this.setState({ data });
}); }
} });
} else { }
dispatch({ } else {
type: 'formList/fetch', dispatch({
payload: { type: 'formList/fetch',
custom: this.custom, payload: {
...params, custom: this.custom,
...params,
sql: this.sqlBs16,
dataObjId: this.state.objId, sql: this.sqlBs16,
}, dataObjId: this.state.objId,
callback: (data) => { },
if (!this.state.isReady) { callback: data => {
this.setState({ if (!this.state.isReady) {
data, this.setState({
isReady: true, data,
isReady: true,
selectedRows: [], // 姚鑫国说的 调了分页接口以后需要 把这个选择的行数据 清空 selectedRows: [], // 姚鑫国说的 调了分页接口以后需要 把这个选择的行数据 清空
}); });
} else { } else {
this.setState({ this.setState({
data, data,
selectedRows: [], // 姚鑫国说的 调了分页接口以后需要 把这个选择的行数据 清空 selectedRows: [], // 姚鑫国说的 调了分页接口以后需要 把这个选择的行数据 清空
}); });
} }
}, },
}); });
} }
}; };
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) => ( >
<Option value={r[item.referenceCodeName]} key={r[item.referenceCodeName]}> {ops.map(r => (
{r[item.referenceNameName]} <Option value={r[item.referenceCodeName]} key={r[item.referenceCodeName]}>
</Option> {r[item.referenceNameName]}
))} </Option>
</Select>, ))}
)} </Select>,
</FormItem> )}
); </FormItem>
} else if (item.name.indexOf('process_status') > -1) { );
return ( } else if (item.name.indexOf('process_status') > -1) {
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> return (
{form.getFieldDecorator(item.name, { <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
initialValue: formData == null ? '' : formData[item.name], {form.getFieldDecorator(item.name, {
rules: [{ required: !item.isNull }], initialValue: formData == null ? '' : formData[item.name],
})( rules: [{ required: !item.isNull }],
<Select disabled={isView} style={{ width: '70%' }} placeholder="请选择" allowClear> })(
<Option value={'0'} key={'0'}> <Select disabled={isView} style={{ width: '70%' }} placeholder="请选择" allowClear>
审核通过 <Option value={'0'} key={'0'}>
</Option> 审核通过
<Option value={'2'} key={'2'}> </Option>
审核未通过 <Option value={'2'} key={'2'}>
</Option> 审核未通过
</Select>, </Option>
)} </Select>,
</FormItem> )}
); </FormItem>
} else if (item.extendTypeId && item.extendTypeId.indexOf('file') > -1) { );
//特殊处理附件 如果是查询就 跳过 } else if (item.extendTypeId && item.extendTypeId.indexOf('file') > -1) {
if (isQuery) return; //特殊处理附件 如果是查询就 跳过
return ( if (isQuery) return;
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> return (
{form.getFieldDecorator(item.name, { <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
initialValue: {form.getFieldDecorator(item.name, {
formData == null initialValue:
? '' formData == null
: formData[item.name] && this.isJSON(formData[item.name]) ? ''
? JSON.parse(formData[item.name]) : formData[item.name] && this.isJSON(formData[item.name])
: null, ? JSON.parse(formData[item.name])
rules: [{ required: !item.isNull }], : null,
})(<UploadCom disabled={isView} />)} rules: [{ required: !item.isNull }],
</FormItem> })(<UploadCom disabled={isView} />)}
); </FormItem>
} else if (isQuery && item.isGroupQuery != null && item.isGroupQuery) { );
//如果是查询 并且是组合查询 } else if (isQuery && item.isGroupQuery != null && item.isGroupQuery) {
//如果是查询 并且是组合查询
const ops = groups[item.id + ''] || [];
return ( const ops = groups[item.id + ''] || [];
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> return (
{form.getFieldDecorator(item.name, { <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
initialValue: formData == null ? '' : formData[item.name], {form.getFieldDecorator(item.name, {
rules: [{ required: !item.isNull }], initialValue: formData == null ? '' : formData[item.name],
})( rules: [{ required: !item.isNull }],
<Select })(
disabled={isView} <Select
style={{ width: 200 }} disabled={isView}
placeholder="请选择" style={{ width: 200 }}
optionFilterProp="children" placeholder="请选择"
showSearch optionFilterProp="children"
filterOption={(input, option) => showSearch
option filterOption={(input, option) =>
? option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 option
: false ? option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
} : false
allowClear> }
{ops.map((r) => ( allowClear
<Option value={r.value} key={r.value}> >
{r.value} {ops.map(r => (
</Option> <Option value={r.value} key={r.value}>
))} {r.value}
</Select>, </Option>
)} ))}
</FormItem> </Select>,
); )}
} else if (text.indexOf(item.type) > -1) { </FormItem>
return ( );
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> } else if (text.indexOf(item.type) > -1) {
{form.getFieldDecorator(item.name, { return (
initialValue: formData == null ? '' : formData[item.name], <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
rules: [{ required: !item.isNull }], {form.getFieldDecorator(item.name, {
})(<Input disabled={isView} style={{ width: '70%' }} placeholder="请输入" />)} initialValue: formData == null ? '' : formData[item.name],
</FormItem> rules: [{ required: !item.isNull }],
); })(<Input disabled={isView} style={{ width: '70%' }} placeholder="请输入" />)}
} else if (number.indexOf(item.type) > -1) { </FormItem>
return ( );
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> } else if (number.indexOf(item.type) > -1) {
{form.getFieldDecorator(item.name, { return (
initialValue: formData == null ? '' : formData[item.name], <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
rules: [ {form.getFieldDecorator(item.name, {
{ required: !item.isNull }, initialValue: formData == null ? '' : formData[item.name],
(rule, value, callback) => { rules: [
var errors = []; { required: !item.isNull },
var reg = new RegExp(/(^-?[0-9][0-9]*(.[0-9]+)?)$/); (rule, value, callback) => {
if (value != null && value != '' && !reg.test(value)) { var errors = [];
errors.push(new Error('请输入'), rule.field); var reg = new RegExp(/(^-?[0-9][0-9]*(.[0-9]+)?)$/);
} if (value != null && value != '' && !reg.test(value)) {
callback(errors); errors.push(new Error('请输入'), rule.field);
}, }
], callback(errors);
})(<Input disabled={isView} placeholder="请输入" />)} },
</FormItem> ],
); })(<Input disabled={isView} placeholder="请输入" />)}
} else if (isQuery && date.indexOf(item.type) > -1) { </FormItem>
return ( );
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> } else if (isQuery && date.indexOf(item.type) > -1) {
{form.getFieldDecorator(item.name, { return (
initialValue: formData == null ? null : moment(formData[item.name]), <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
rules: [{ required: !item.isNull }], {form.getFieldDecorator(item.name, {
})( initialValue: formData == null ? null : moment(formData[item.name]),
<RangePicker rules: [{ required: !item.isNull }],
disabled={isView} })(
format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb} <RangePicker
style={{ width: '95%' }} disabled={isView}
/>, format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb}
)} style={{ width: '95%' }}
</FormItem> />,
); )}
} else if (date.indexOf(item.type) > -1) { </FormItem>
return ( );
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> } else if (date.indexOf(item.type) > -1) {
{form.getFieldDecorator(item.name, { return (
initialValue: <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
formData == null {form.getFieldDecorator(item.name, {
? moment() initialValue:
: formData[item.name] formData == null
? moment(formData[item.name]) ? moment()
: null, : formData[item.name]
rules: [{ required: !item.isNull }], ? moment(formData[item.name])
})( : null,
<DatePicker rules: [{ required: !item.isNull }],
format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb} })(
style={{ width: '100%' }} <DatePicker
placeholder="请输入" format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb}
disabled={isView} style={{ width: '100%' }}
/>, placeholder="请输入"
)} disabled={isView}
</FormItem> />,
); )}
} else { </FormItem>
return ( );
<FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> } else {
{form.getFieldDecorator(item.name, { return (
initialValue: formData == null ? '' : formData[item.name], <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}>
rules: [{ required: !item.isNull }], {form.getFieldDecorator(item.name, {
})(<Input disabled={isView} style={{ width: '70%' }} placeholder="请输入" />)} initialValue: formData == null ? '' : formData[item.name],
</FormItem> rules: [{ required: !item.isNull }],
); })(<Input disabled={isView} style={{ width: '70%' }} placeholder="请输入" />)}
} </FormItem>
}; );
}
renderForm() { };
const { form, get } = this.props;
renderForm() {
const { querys } = this.state; const { form, get, json } = this.props;
if (querys.length == 0) {
return ''; const { querys } = this.state;
} if (querys.length === 0 || json?.isHiddenSearch === true) {
return '';
return ( }
<Form layout="inline">
<Row style={{ padding: '15px' }}> return (
{querys.map((item) => ( <Form layout="inline">
<Col style={{ height: 58 }} span={get === 'mobile' ? 24 : 8} key={item.id}> <Row style={{ padding: '15px' }}>
{this.getItem( {querys.map(item => (
true, <Col style={{ height: 58 }} span={get === 'mobile' ? 24 : 8} key={item.id}>
form, {this.getItem(
{ true,
...item, form,
isNull: true, {
}, ...item,
true, isNull: true,
)} },
</Col> true,
))} )}
</Col>
<Col ))}
span={get === 'mobile' ? 24 : 8}
style={{ <Col
textAlign: get === 'mobile' ? 'right' : '', span={get === 'mobile' ? 24 : 8}
paddingRight: get === 'mobile' ? 12 : '', style={{
}}> textAlign: get === 'mobile' ? 'right' : '',
<span className={styles.submitButtons}> paddingRight: get === 'mobile' ? 12 : '',
<Button type="primary" loading={this.props.loading} onClick={this.handleSearch}> }}
查询 >
</Button> <span className={styles.submitButtons}>
<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}> <Button type="primary" loading={this.props.loading} onClick={this.handleSearch}>
重置 查询
</Button> </Button>
{/* <a style={{ marginLeft: 8 }} onClick={this.toggleForm}> <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
重置
</Button>
{/* <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 { modalVisible, selectedRows, rights, data, isReady } = this.state; const { modalVisible, selectedRows, rights, data, isReady } = this.state;
if (!isReady) { if (!isReady) {
return ( return (
<div <div
style={{ style={{
width: 20, width: 20,
margin: 'auto', margin: 'auto',
}}> }}
<Spin /> >
</div> <Spin />
); </div>
} );
const { }
isFormCom, const {
isSelect, isFormCom,
get, isSelect,
callback, get,
valueName, callback,
notShowBack, valueName,
json, notShowBack,
istableCom, // 是否有模板设计器调用 json,
value: { btns }, istableCom, // 是否有模板设计器调用
loading, value: { btns },
uuid, loading,
} = this.props; uuid,
const { showMobileDiv, isView } = this.state; } = this.props;
const { showMobileDiv, isView } = this.state;
let scrollWidth = document.documentElement.clientWidth || document.body.clientWidth; //可使宽度
let isMobile = scrollWidth < 1000; let scrollWidth = document.documentElement.clientWidth || document.body.clientWidth; //可使宽度
if (document.querySelector('#previewDiv')) { let isMobile = scrollWidth < 1000;
isMobile = true; if (document.querySelector('#previewDiv')) {
} isMobile = true;
}
const showDiv = countWidth({
json, const showDiv = countWidth({
uuid, json,
}); uuid,
const parentMethods = { });
handleAdd: this.handleAdd, const parentMethods = {
handleModalVisible: this.handleModalVisible, handleAdd: this.handleAdd,
formData: this.state.formData, handleModalVisible: this.handleModalVisible,
formItem: this.state.formItem, formData: this.state.formData,
isAdd: this.state.isAdd, formItem: this.state.formItem,
getItem: this.getItem, isAdd: this.state.isAdd,
isView: isView, getItem: this.getItem,
}; isView: isView,
};
if (
!isSelect && if (
!rights.includes('edit') && !isSelect &&
!rights.includes('delete') && !rights.includes('edit') &&
!rights.includes('view') && !rights.includes('delete') &&
!rights.includes('viewProcess') !rights.includes('view') &&
) { !rights.includes('viewProcess')
} else { ) {
let width = 0; } else {
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> }
<div return (
style={{ <Fragment>
textAlign: 'center', <div
paddingLeft: '0px', style={{
paddingRight: '0px', textAlign: 'center',
}}> paddingLeft: '0px',
{Dom && paddingRight: '0px',
Dom.length && }}
Dom.map((x, index) => ( >
<Fragment key={Math.random()}> {Dom &&
{x} Dom.length &&
{index > 0 && index !== Dom.length - 1 && <Divider type="vertical" />} Dom.map((x, index) => (
</Fragment> <Fragment key={Math.random()}>
))} {x}
</div> {index > 0 && index !== Dom.length - 1 && <Divider type="vertical" />}
</Fragment> </Fragment>
); ))}
}, </div>
}; </Fragment>
if (this.columns.length > 0 && this.columns[this.columns.length - 1].title == '操作') { );
this.columns[this.columns.length - 1] = column; },
} else { };
this.columns.push(column); if (this.columns.length > 0 && this.columns[this.columns.length - 1].title == '操作') {
} this.columns[this.columns.length - 1] = column;
} } else {
// console.log(this.columns); this.columns.push(column);
if (this.columns) { }
/** }
* 计算总长度 // console.log(this.columns);
*/ if (this.columns) {
AllWidth = 0; /**
this.columns = this.columns.map((item, index) => { * 计算总长度
if (isEmpty(item)) { */
return item; AllWidth = 0;
} this.columns = this.columns.map((item, index) => {
if ( if (isEmpty(item)) {
index === this.columns.length - 1 && return item;
this.columns[this.columns.length - 1].title !== '操作' }
) { if (
AllWidth += 150; index === this.columns.length - 1 &&
item.width = ''; this.columns[this.columns.length - 1].title !== '操作'
return item; ) {
} AllWidth += 150;
let width = item.width ? item.width : 150; item.width = '';
if (!item.width) { return item;
item.width = 150; }
} let width = item.width ? item.width : 150;
AllWidth += width; if (!item.width) {
return item; item.width = 150;
}); }
if ( AllWidth += width;
!isEmpty(this.columns[this.columns.length - 1]) && return item;
this.columns[this.columns.length - 1].title === '操作' });
) { if (
if (this.columns[this.columns.length - 2]) { !isEmpty(this.columns[this.columns.length - 1]) &&
this.columns[this.columns.length - 2].width = ''; this.columns[this.columns.length - 1].title === '操作'
AllWidth += 100; ) {
} if (this.columns[this.columns.length - 2]) {
} this.columns[this.columns.length - 2].width = '';
} AllWidth += 100;
}
const xxxx = ( }
<> }
<Card
bordered={false} const xxxx = (
bodyStyle={{ <>
padding: 0, <Card
width: json.twidth ? json.twidth : '100%', bordered={false}
}}> bodyStyle={{
<div className={styles.tableList}> padding: 0,
<div className={styles.tableListForm}>{this.renderForm()}</div> width: json.twidth ? json.twidth : '100%',
<div className={styles.tableListOperator}> }}
{notShowBack ? ( >
notShowBack <div className={styles.tableList}>
) : ( <div className={styles.tableListForm}>{this.renderForm()}</div>
<Button icon="rollback" type="primary" onClick={this.goBack}> <div className={styles.tableListOperator}>
返回 {notShowBack ? (
</Button> notShowBack
)} ) : (
<Button icon="rollback" type="primary" onClick={this.goBack}>
<FormListButtons 返回
btns={btns} </Button>
loading={loading} )}
importConfig={(this.props.value && this.props.value.importConfig) || []}
exportConfig={(this.props.value && this.props.value.exportConfig) || []} <FormListButtons
getPage={this.getPage} btns={btns}
objId={this.state.objId} loading={loading}
query={JSON.stringify(this.state.formValues)} importConfig={(this.props.value && this.props.value.importConfig) || []}
custom={this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null} exportConfig={(this.props.value && this.props.value.exportConfig) || []}
sql={Base16Encode(this.props.sql)} getPage={this.getPage}
/> objId={this.state.objId}
{/* {this.props.value && this.props.value.importConfig // 导入配置项 query={JSON.stringify(this.state.formValues)}
? this.props.value.importConfig.map((r, i) => ( custom={this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null}
<ImportUtil sql={Base16Encode(this.props.sql)}
btn={r.btn} />
ext={r.ext ? r.ext : 'xlsx'} {rights && !rights.includes('add') ? (
importConfig={r} ''
objId={this.state.objId} ) : (
callback={() => { <Button icon="plus" type="primary" onClick={this.add}>
this.getPage(); 新建
if (r.callback) r.callback(); </Button>
}} )}
/> {rights && !rights.includes('searchData') ? (
)) ''
: ''}*/} ) : (
<SearchInfo hanldeHighSearch={this.hanldeHighSearch} objId={this.state.objId} />
{/* {this.props.value && this.props.value.exportConfig // 导出配置项 )}
? this.props.value.exportConfig.map((r, i) => (
<ExportCurrentInfo {rights && !rights.includes('importData') ? (
objId={this.state.objId} ''
query={JSON.stringify(this.state.formValues)} ) : (
custom={ <ImportUtil objId={this.state.objId} callback={() => this.getPage()} />
this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null )}
{rights && !rights.includes('exportCurrent') ? (
''
) : (
<ExportCurrentInfo
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)}
/>
)}
{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
title="确定删除该数据?"
onConfirm={this.batchDelete}
okText="确定"
cancelText="取消"
>
<Button>批量删除</Button>
</Popconfirm>
</span>
)}
{rights && !rights.includes('headerFilter') ? (
''
) : (
<Popover // 划入选择栏
content={
<div
style={{
width: 150,
}}
>
<Checkbox.Group
onChange={this.CheckboxChange}
value={this.state.checkedList}
options={this.checkList}
/>
</div>
}
title="请选择表头展示"
trigger="click"
placement="bottom"
>
<Button // 表头筛选控件
className={styles.filter_btn}
icon="filter"
>
表头筛选
</Button>
</Popover>
)}
{btns && btns.after && btns.after.length > 0
? btns.after.map(r => <Button {...r} loading={loading} />)
: ''}
{!!this.props.otherProps &&
!!this.props.otherProps.showRightTips &&
this.props.otherProps.RightTipsComponent}
</div>
{!istableCom || (this.props.value && this.props.value.columns) ? (
<div
id="mobelDiv"
className={'mobelDivClassName'}
style={{
overflow: 'hidden',
width: isMobile ? showMobileDiv : showDiv,
height: '100%',
}}
>
{showDiv && (
<StandardTable
showHeader={this.props.showHeader != null ? this.props.showHeader : true}
noSelectRow={
this.props.onSelectRow == null &&
(rights == null || !rights.includes('delete'))
} }
index={i} rowKey={this.props.value?.rowKey ? this.props.value.rowKey : 'row_id'}
btn={r.btn} data={data}
ext={r.ext ? r.ext : 'xlsx'} isHiddenPage={this.props.isHiddenPage != null ? this.props.isHiddenPage : false}
sql={Base16Encode(this.props.sql)} columns={this.columns}
scroll={{ x: AllWidth }}
selectedRows={selectedRows}
onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange}
loading={this.props.loading}
/> />
)) )}
: ''} </div>
*/} ) : (
{rights && !rights.includes('add') ? ( <div
'' id="mobelDiv"
) : ( style={{
<Button icon="plus" type="primary" onClick={this.add}> overflow: 'hidden',
新建 width: isMobile ? showMobileDiv : showDiv,
</Button> height: '100%',
)} }}
{rights && !rights.includes('searchData') ? ( >
'' <div>
) : ( {get === 'mobile' ? <div>手机端,请使用浏览器将手机横屏查看</div> : null}
<SearchInfo hanldeHighSearch={this.hanldeHighSearch} objId={this.state.objId} /> {showDiv && (
)} <StandardTable
showHeader={this.props.showHeader != null ? this.props.showHeader : true}
{rights && !rights.includes('importData') ? ( noSelectRow={
'' this.props.onSelectRow == null &&
) : ( (rights == null || !rights.includes('delete'))
<ImportUtil objId={this.state.objId} callback={() => this.getPage()} /> }
)} rowKey={this.props.value?.rowKey ? this.props.value.rowKey : 'row_id'}
data={data}
{rights && !rights.includes('exportCurrent') ? ( columns={this.columns}
'' scroll={this.props.value && this.props.value.columns ? {} : { x: AllWidth }}
) : ( selectedRows={selectedRows}
<ExportCurrentInfo isHiddenPage={
objId={this.state.objId} this.props.isHiddenPage != null ? this.props.isHiddenPage : false
query={JSON.stringify(this.state.formValues)} }
custom={this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null} onSelectRow={this.handleSelectRows}
sql={Base16Encode(this.props.sql)} onChange={this.handleStandardTableChange}
/> loading={this.props.loading}
)} />
)}
{rights && !rights.includes('exportData') ? ( </div>
'' </div>
) : ( )}
<ExportInfo objId={this.state.objId} /> </div>
)} </Card>
{rights && !rights.includes('statistics') ? ( <CreateForm {...parentMethods} modalVisible={modalVisible} />
'' </>
) : ( );
<StatisticsInfo objId={this.state.objId} /> if (isFormCom) {
)} return xxxx;
{rights && !rights.includes('delete') }
? '' return <PageHeaderWrapper title="">{xxxx}</PageHeaderWrapper>;
: selectedRows.length > 0 && ( }
<span>
<Popconfirm
title="确定删除该数据?"
onConfirm={this.batchDelete}
okText="确定"
cancelText="取消">
<Button>批量删除</Button>
</Popconfirm>
</span>
)}
{rights && !rights.includes('headerFilter') ? (
''
) : (
<Popover // 划入选择栏
content={
<div
style={{
width: 150,
}}>
<Checkbox.Group
onChange={this.CheckboxChange}
value={this.state.checkedList}
options={this.checkList}
/>
</div>
}
title="请选择表头展示"
trigger="click"
placement="bottom">
<Button // 表头筛选控件
className={styles.filter_btn}
icon="filter">
表头筛选
</Button>
</Popover>
)}
{btns && btns.after && btns.after.length > 0
? btns.after.map((r) => <Button {...r} loading={loading} />)
: ''}
{!!this.props.otherProps &&
!!this.props.otherProps.showRightTips &&
this.props.otherProps.RightTipsComponent}
</div>
{!istableCom || (this.props.value && this.props.value.columns) ? (
<div
id="mobelDiv"
className={'mobelDivClassName'}
style={{
overflow: 'hidden',
width: isMobile ? showMobileDiv : showDiv,
height: '100%',
}}>
{showDiv && (
<StandardTable
showHeader={this.props.showHeader != null ? this.props.showHeader : true}
noSelectRow={
this.props.onSelectRow == null &&
(rights == null || !rights.includes('delete'))
}
rowKey={this.props.value?.rowKey ? this.props.value.rowKey : 'row_id'}
data={data}
isHiddenPage={this.props.isHiddenPage != null ? this.props.isHiddenPage : false}
columns={this.columns}
scroll={{ x: AllWidth }}
selectedRows={selectedRows}
onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange}
loading={this.props.loading}
/>
)}
</div>
) : (
<div
id="mobelDiv"
style={{
overflow: 'hidden',
width: isMobile ? showMobileDiv : showDiv,
height: '100%',
}}>
<div>
{get === 'mobile' ? <div>手机端,请使用浏览器将手机横屏查看</div> : null}
{showDiv && (
<StandardTable
showHeader={this.props.showHeader != null ? this.props.showHeader : true}
noSelectRow={
this.props.onSelectRow == null &&
(rights == null || !rights.includes('delete'))
}
rowKey={this.props.value?.rowKey ? this.props.value.rowKey : 'row_id'}
data={data}
columns={this.columns}
scroll={this.props.value && this.props.value.columns ? {} : { x: AllWidth }}
selectedRows={selectedRows}
isHiddenPage={
this.props.isHiddenPage != null ? this.props.isHiddenPage : false
}
onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange}
loading={this.props.loading}
/>
)}
</div>
</div>
)}
</div>
</Card>
<CreateForm {...parentMethods} modalVisible={modalVisible} />
</>
);
if (isFormCom) {
return xxxx;
}
return <PageHeaderWrapper title="">{xxxx}</PageHeaderWrapper>;
}
} }
export default FormList; export default FormList;
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论