Skip to content

W
WebPublic
提交 e97216ea authored 作者: 徐立's avatar 徐立
浏览文件
操作

调整与场景设计器兼容

上级 6d9408bf
隐藏空白字符变更
内嵌 并排
正在显示 包含 876 行增加 和 799 行删除
one_stop_public/Table/index.jsx
浏览文件 @ e97216ea
......@@ -3,498 +3,530 @@
* 2019年9月25日
* 自定义表单表格
*/
import React, { Component } from 'react'
import React, { Component } from 'react';
import { Form } from 'antd';
import { Row, Col, Input, message } from 'antd'
import TableCom from '../tableCompon'
import { Toast } from 'antd-mobile'
import router from 'umi/router'
import { Row, Col, Input, message } from 'antd';
import TableCom from '../tableCompon';
import { Toast } from 'antd-mobile';
import router from 'umi/router';
import IsNewTable from './isNewMobileTable';
import NewWebTable from './isNewWebTable';
import maintain from '../assets/maintain.png'
import moment from 'moment'
import maintain from '../assets/maintain.png';
import moment from 'moment';
export default class ZdyTable extends Component {
constructor(props) {
super(props)
this.state = {
selects: new Map(),
left: 0,
top: 0,
max: 4,
formId: null,
formCode: null,
width: 100,
mapData: {},
defaultBinds: {},
sqlData: {},
defaultValues: {},
currentFormKey: null,
items: [],
init: this.props.init || {},
datas: {},
isEdit: true,
isReady: false,
formConfig: {},
}
constructor(props) {
super(props);
this.state = {
selects: new Map(),
left: 0,
top: 0,
max: 4,
formId: null,
formCode: null,
width: 100,
mapData: {},
defaultBinds: {},
sqlData: {},
defaultValues: {},
currentFormKey: null,
items: [],
init: this.props.init || {},
datas: {},
isEdit: true,
isReady: false,
formConfig: {},
};
}
componentDidMount() {
let {
postData, // 数据源
isCg, // 用户点击草稿页面进入
isForm,
isPreview, // 是否为预览模式
isChild, // 是否为子表单
isQRCode = false, // 是否为二维码快捷发起
formDeafault = '', // 为二维码快捷发起默认值
} = this.props;
if (isPreview || isChild) {
this.setState({ ...this.state, ...this.props, isReady: true });
return;
}
componentDidMount() {
let {
postData, // 数据源
isCg, // 用户点击草稿页面进入
isForm,
isPreview, // 是否为预览模式
isChild, // 是否为子表单
isQRCode = false, // 是否为二维码快捷发起
formDeafault = '', // 为二维码快捷发起默认值
} = this.props
if (isPreview || isChild) {
this.setState({ ...this.state, ...this.props, isReady: true })
return
let val = postData;
try {
/**
* 数据源不同进行以下区别处理
* this.props.table有传入值表明需要渲染流程中最新表单
*/
if (isForm) {
// 由表格的操作按钮进入
const mapData = {};
const sqlData = {};
const dataObjs = val.form.dataObjModels;
for (var i = 0; i < dataObjs.length; i++) {
const dob = dataObjs[i];
for (var j = 0; j < dob.columnModels.length; j++) {
mapData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
let val = postData
try {
/**
* 数据源不同进行以下区别处理
* this.props.table有传入值表明需要渲染流程中最新表单
*/
if (isForm) { // 由表格的操作按钮进入
const mapData = {};
const sqlData = {}
const dataObjs = val.form.dataObjModels;
for (var i = 0; i < dataObjs.length; i++) {
const dob = dataObjs[i];
for (var j = 0; j < dob.columnModels.length; j++) {
mapData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const sqls = val.form.sqlModels
for (var i = 0; i < sqls.length; i++) {
const dob = sqls[i].dataObjModel;
for (var j = 0; j < dob.columnModels.length; j++) {
sqlData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const obj = JSON.parse(val.form.content);
const xxx = obj.datas[obj.init];
this.setState({
datas: obj.datas,
width: this.props.table ? obj.datas[val.formKey].width : xxx.width,
isBorder: this.props.table ? obj.datas[val.formKey].isBorder : xxx.isBorder,
mapData,
currentFormKey: this.props.table ? val.formKey : obj.init,
sqlData,
isEdit: this.props.formKey ? false : true,
items: this.props.table ? obj.datas[val.formKey].items : xxx.items,
defaultValues: val.form.defaultValues,
appId: val.appId,
isReady: true,
formConfig: xxx
});
return
}
if (isCg === 'yes') {// 用户从编辑按钮进入
if (val.unifiedServicePatternModel.isDefaultError != null && val.unifiedServicePatternModel.isDefaultError) {
if (this.props.get == "web") {
message.error("当前办理人数较多，服务繁忙，请稍后再试!")
} else {
Toast.fail("当前办理人数较多，服务繁忙，请稍后再试!")
}
router.goBack()
return;
}
const mapData = {};
const sqlData = {};
const sqls = val.unifiedServicePatternModel.sqlModels
for (var i = 0; i < sqls.length; i++) {
const dob = sqls[i].dataObjModel;
for (var j = 0; j < dob.columnModels.length; j++) {
sqlData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const dataObjs = val.unifiedServicePatternModel.dataObjModels;
for (var i = 0; i < dataObjs.length; i++) {
const dob = dataObjs[i];
for (var j = 0; j < dob.columnModels.length; j++) {
mapData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const obj = JSON.parse(val.unifiedServicePatternModel.content);
const xxx = obj.datas[obj.init];
this.setState({
items: xxx.items,
init: { ...this.state.init, ...JSON.parse(val.content) },
datas: obj.datas,
isEdit: this.props.formKey ? false : true,
currentFormKey: obj.init,
width: xxx.width,
isBorder: xxx.isBorder,
mapData, sqlData,
defaultValues: val.unifiedServicePatternModel.defaultValues,
appId: val.appId,
isReady: true,
formConfig: xxx,
defaultBinds: this.props.table ? obj.datas[val.taskFormKey].defaultBinds : xxx.defaultBinds,
});
return
}
if (val.unifiedServicePatternModel.isDefaultError != null && val.unifiedServicePatternModel.isDefaultError) {
if (this.props.get == "web") {
message.error("当前办理人数较多，服务繁忙，请稍后再试!")
} else {
Toast.fail("当前办理人数较多，服务繁忙，请稍后再试!")
}
router.goBack()
return;
}
const mapData = {};
const sqlData = {};
const sqls = val.unifiedServicePatternModel.sqlModels
for (var i = 0; i < sqls.length; i++) {
const dob = sqls[i].dataObjModel;
for (var j = 0; j < dob.columnModels.length; j++) {
sqlData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const dataObjs = val.unifiedServicePatternModel.dataObjModels;
for (var i = 0; i < dataObjs.length; i++) {
const dob = dataObjs[i];
for (var j = 0; j < dob.columnModels.length; j++) {
mapData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const obj = JSON.parse(val.unifiedServicePatternModel.content);
const xxx = obj.datas[this.props.formKey ? this.props.formKey : obj.init]; // 是否是存在历史表单传入值
this.setState({
appId: val.id,
formId: val.id,
formCode: val.code,
datas: obj.datas,
mapData, sqlData,
defaultValues: val.unifiedServicePatternModel.defaultValues,
isEdit: this.props.formKey ? false : true,
currentFormKey: this.props.formKey ? this.props.formKey : val.taskFormKey ? val.taskFormKey : obj.init,
defaultBinds: this.props.table ? obj.datas[val.taskFormKey].defaultBinds : xxx.defaultBinds,
width: this.props.table ? obj.datas[val.taskFormKey].width : xxx.width,
isBorder: this.props.table ? obj.datas[val.taskFormKey].isBorder : xxx.isBorder,
items: this.props.table ? obj.datas[val.taskFormKey].items : xxx.items,
isReady: true,
init: { ...this.state.init, ...val.isSecond ? this.props.obj : {} },
formConfig: xxx
// init:this.props.get==="mobile"?!!val.content?JSON.parse(val.content):'':{},// 移动端默认值设置
}, () => {
/**
* 为二维码快捷发起时自动设置新默认值
*/
if (isQRCode) {
this.props.form.setFieldsValue(formDeafault)
}
});
} catch (e) {
console.log(`公式配置有误`, e)
const sqls = val.form.sqlModels;
for (var i = 0; i < sqls.length; i++) {
const dob = sqls[i].dataObjModel;
for (var j = 0; j < dob.columnModels.length; j++) {
sqlData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
}
componentWillReceiveProps(nextProps) {
let {
postData,// 数据源
isCg, // 用户点击草稿页面进入
isForm,
isPreview, // 是否为预览模式
isChild,// 是否为子表单
} = nextProps
if (isPreview || isChild) {
this.setState({ ...this.state, ...this.props, isReady: true })
return
const obj = JSON.parse(val.form.content);
const xxx = obj.datas[obj.init];
this.setState({
datas: obj.datas,
width: this.props.table ? obj.datas[val.formKey].width : xxx.width,
isBorder: this.props.table ? obj.datas[val.formKey].isBorder : xxx.isBorder,
mapData,
currentFormKey: this.props.table ? val.formKey : obj.init,
sqlData,
isEdit: this.props.formKey ? false : true,
items: this.props.table ? obj.datas[val.formKey].items : xxx.items,
defaultValues: val.form.defaultValues,
appId: val.appId,
isReady: true,
formConfig: xxx,
});
return;
}
if (isCg === 'yes') {
// 用户从编辑按钮进入
if (
val.unifiedServicePatternModel.isDefaultError != null &&
val.unifiedServicePatternModel.isDefaultError
) {
if (this.props.get == 'web') {
message.error('当前办理人数较多，服务繁忙，请稍后再试!');
} else {
Toast.fail('当前办理人数较多，服务繁忙，请稍后再试!');
}
router.goBack();
return;
}
const mapData = {};
const sqlData = {};
const sqls = val.unifiedServicePatternModel.sqlModels;
for (var i = 0; i < sqls.length; i++) {
const dob = sqls[i].dataObjModel;
for (var j = 0; j < dob.columnModels.length; j++) {
sqlData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const dataObjs = val.unifiedServicePatternModel.dataObjModels;
for (var i = 0; i < dataObjs.length; i++) {
const dob = dataObjs[i];
try {
let val = postData
/**
* 数据源不同进行以下区别处理
* this.props.table有传入值表明需要渲染流程中最新表单
*/
if (isForm) { // 由表格的操作按钮进入
const mapData = {};
const sqlData = {}
const dataObjs = val.form.dataObjModels;
for (var i = 0; i < dataObjs.length; i++) {
const dob = dataObjs[i];
for (var j = 0; j < dob.columnModels.length; j++) {
mapData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const sqls = val.form.sqlModels
for (var i = 0; i < sqls.length; i++) {
const dob = sqls[i].dataObjModel;
for (var j = 0; j < dob.columnModels.length; j++) {
sqlData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const obj = JSON.parse(val.form.content);
const xxx = obj.datas[obj.init];
this.setState({
datas: obj.datas,
width: this.props.table ? obj.datas[val.formKey].width : xxx.width,
isBorder: this.props.table ? obj.datas[val.formKey].isBorder : xxx.isBorder,
mapData,
currentFormKey: this.props.table ? val.formKey : obj.init,
sqlData,
isEdit: this.props.formKey ? false : true,
items: this.props.table ? obj.datas[val.formKey].items : xxx.items,
defaultValues: val.form.defaultValues,
appId: val.appId,
isReady: true,
formConfig: xxx
});
return
}
if (isCg === 'yes') {// 用户从编辑按钮进入
const mapData = {};
const sqlData = {};
const sqls = val.unifiedServicePatternModel.sqlModels
for (var i = 0; i < sqls.length; i++) {
const dob = sqls[i].dataObjModel;
for (var j = 0; j < dob.columnModels.length; j++) {
sqlData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const dataObjs = val.unifiedServicePatternModel.dataObjModels;
for (var i = 0; i < dataObjs.length; i++) {
const dob = dataObjs[i];
for (var j = 0; j < dob.columnModels.length; j++) {
mapData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const obj = JSON.parse(val.unifiedServicePatternModel.content);
const xxx = obj.datas[obj.init];
this.setState({
items: xxx.items,
init: { ...this.state.init, ...JSON.parse(val.content) },
datas: obj.datas,
isEdit: this.props.formKey ? false : true,
currentFormKey: obj.init,
width: xxx.width,
isBorder: xxx.isBorder,
mapData, sqlData, defaultValues: val.unifiedServicePatternModel.defaultValues,
appId: val.appId,
isReady: true,
formConfig: xxx,
defaultBinds: this.props.table ? obj.datas[val.taskFormKey].defaultBinds : xxx.defaultBinds,
});
return
}
const mapData = {};
const sqlData = {};
const sqls = val.unifiedServicePatternModel.sqlModels
for (var i = 0; i < sqls.length; i++) {
const dob = sqls[i].dataObjModel;
for (var j = 0; j < dob.columnModels.length; j++) {
sqlData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const dataObjs = val.unifiedServicePatternModel.dataObjModels;
for (var i = 0; i < dataObjs.length; i++) {
const dob = dataObjs[i];
for (var j = 0; j < dob.columnModels.length; j++) {
mapData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const obj = JSON.parse(val.unifiedServicePatternModel.content);
const xxx = obj.datas[this.props.formKey ? this.props.formKey : obj.init]; // 是否是存在历史表单传入值
this.setState({
appId: val.id,
datas: obj.datas,
mapData, sqlData, defaultValues: val.unifiedServicePatternModel.defaultValues,
isEdit: this.props.formKey ? false : true,
currentFormKey: this.props.formKey ? this.props.formKey : val.taskFormKey ? val.taskFormKey : obj.init,
defaultBinds: this.props.table ? obj.datas[val.taskFormKey].defaultBinds : xxx.defaultBinds,
width: this.props.table ? obj.datas[val.taskFormKey].width : xxx.width,
isBorder: this.props.table ? obj.datas[val.taskFormKey].isBorder : xxx.isBorder,
items: this.props.table ? obj.datas[val.taskFormKey].items : xxx.items,
isReady: true,
init: { ...this.state.init, ...val.isSecond ? this.props.obj : {} },
formConfig: xxx
// init:this.props.get==="mobile"?!!val.content?JSON.parse(val.content):'':{},// 移动端默认值设置
});
} catch (e) {
console.log(`公式配置有误`, e)
for (var j = 0; j < dob.columnModels.length; j++) {
mapData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const obj = JSON.parse(val.unifiedServicePatternModel.content);
const xxx = obj.datas[obj.init];
this.setState({
items: xxx.items,
init: { ...this.state.init, ...JSON.parse(val.content) },
datas: obj.datas,
isEdit: this.props.formKey ? false : true,
currentFormKey: obj.init,
width: xxx.width,
isBorder: xxx.isBorder,
mapData,
sqlData,
defaultValues: val.unifiedServicePatternModel.defaultValues,
appId: val.appId,
isReady: true,
formConfig: xxx,
defaultBinds: this.props.table
? obj.datas[val.taskFormKey].defaultBinds
: xxx.defaultBinds,
});
return;
}
if (
val.unifiedServicePatternModel.isDefaultError != null &&
val.unifiedServicePatternModel.isDefaultError
) {
if (this.props.get == 'web') {
message.error('当前办理人数较多，服务繁忙，请稍后再试!');
} else {
Toast.fail('当前办理人数较多，服务繁忙，请稍后再试!');
}
}
checkAllHidden = (row) => {
for (var i = 0; i < row.length; i++) {
if (row[i].hidden == null || !row[i].hidden) {
return false;
}
router.goBack();
return;
}
const mapData = {};
const sqlData = {};
const sqls = val.unifiedServicePatternModel.sqlModels;
for (var i = 0; i < sqls.length; i++) {
const dob = sqls[i].dataObjModel;
for (var j = 0; j < dob.columnModels.length; j++) {
sqlData[dob.columnModels[j].base52] = dob.columnModels[j];
}
for (var i = 0; i < row.length; i++) {
delete row[i].hidden
}
const dataObjs = val.unifiedServicePatternModel.dataObjModels;
for (var i = 0; i < dataObjs.length; i++) {
const dob = dataObjs[i];
for (var j = 0; j < dob.columnModels.length; j++) {
mapData[dob.columnModels[j].base52] = dob.columnModels[j];
}
return true
}
const obj = JSON.parse(val.unifiedServicePatternModel.content);
const xxx = obj.datas[this.props.formKey ? this.props.formKey : obj.init]; // 是否是存在历史表单传入值
this.setState(
{
appId: val.id,
formId: val.id,
formCode: val.code,
datas: obj.datas,
mapData,
sqlData,
defaultValues: val.unifiedServicePatternModel.defaultValues,
isEdit: this.props.formKey ? false : true,
currentFormKey: this.props.formKey
? this.props.formKey
: val.taskFormKey
? val.taskFormKey
: obj.init,
defaultBinds: this.props.table
? obj.datas[val.taskFormKey].defaultBinds
: xxx.defaultBinds,
width: this.props.table ? obj.datas[val.taskFormKey].width : xxx.width,
isBorder: this.props.table ? obj.datas[val.taskFormKey].isBorder : xxx.isBorder,
items: this.props.table ? obj.datas[val.taskFormKey].items : xxx.items,
isReady: true,
init: { ...this.state.init, ...(val.isSecond ? this.props.obj : {}) },
formConfig: xxx,
// init:this.props.get==="mobile"?!!val.content?JSON.parse(val.content):'':{},// 移动端默认值设置
},
() => {
/**
* 为二维码快捷发起时自动设置新默认值
*/
if (isQRCode) {
this.props.form.setFieldsValue(formDeafault);
}
},
);
} catch (e) {
console.log(`公式配置有误`, e);
}
countMax = (items) => {
var max = 0
items.forEach((r) => {
if (r.length > max) {
max = r.length
}
})
return max
}
componentWillReceiveProps(nextProps) {
let {
postData, // 数据源
isCg, // 用户点击草稿页面进入
isForm,
isPreview, // 是否为预览模式
isChild, // 是否为子表单
} = nextProps;
if (isPreview || isChild) {
this.setState({ ...this.state, ...this.props, isReady: true });
return;
}
render() {
let {
width,
isBorder,
sqlData,
mapData,
defaultBinds,
defaultValues,
items,
init,
modalTitle,
currentFormKey,
isEdit,
datas,
isReady,
formConfig,
formCode,
formId
} = this.state
let {
border,
get,
obj,
index,
fatherCode,
routerState, // 场景设计器共享路由参数
messageData, // 场景设计器共享变量参数 设计器监听到参数发生变化后会重新渲染组件
postData,
modalInit,
} = this.props
let style = {}
if (formConfig.style != null) {
try {
style = JSON.parse(formConfig.style)
} catch (e) {
console.log(e)
style = {}
}
try {
let val = postData;
/**
* 数据源不同进行以下区别处理
* this.props.table有传入值表明需要渲染流程中最新表单
*/
if (isForm) {
// 由表格的操作按钮进入
const mapData = {};
const sqlData = {};
const dataObjs = val.form.dataObjModels;
for (var i = 0; i < dataObjs.length; i++) {
const dob = dataObjs[i];
for (var j = 0; j < dob.columnModels.length; j++) {
mapData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};
const max = this.countMax(items)
const borderStyle = {
borderRight: "1px solid gray",
borderTop: "1px solid gray",
borderLeft: "1px solid gray",
borderBottom: "1px solid gray"
}
const borderStyleTwo = { // 处理隐藏组件边框样式问题
borderRight: "1px solid gray",
borderLeft: "1px solid gray",
borderTop: "1px solid gray",
const sqls = val.form.sqlModels;
for (var i = 0; i < sqls.length; i++) {
const dob = sqls[i].dataObjModel;
for (var j = 0; j < dob.columnModels.length; j++) {
sqlData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
let updateTime
const styleDiv = this.props.height ?
{
overflow: "auto",
width: "100%",
height: this.props.height,
paddingBottom:'10px'
}
: {
overflow: "auto",
width: "100%",
paddingBottom:'10px'
}
if (!isReady) return <></>
if (this.props.postData?.isUpdate) {
updateTime = moment(+this.props.postData?.updateTime).format('llll')
const obj = JSON.parse(val.form.content);
const xxx = obj.datas[obj.init];
this.setState({
datas: obj.datas,
width: this.props.table ? obj.datas[val.formKey].width : xxx.width,
isBorder: this.props.table ? obj.datas[val.formKey].isBorder : xxx.isBorder,
mapData,
currentFormKey: this.props.table ? val.formKey : obj.init,
sqlData,
isEdit: this.props.formKey ? false : true,
items: this.props.table ? obj.datas[val.formKey].items : xxx.items,
defaultValues: val.form.defaultValues,
appId: val.appId,
isReady: true,
formConfig: xxx,
});
return;
}
if (isCg === 'yes') {
// 用户从编辑按钮进入
const mapData = {};
const sqlData = {};
const sqls = val.unifiedServicePatternModel.sqlModels;
for (var i = 0; i < sqls.length; i++) {
const dob = sqls[i].dataObjModel;
for (var j = 0; j < dob.columnModels.length; j++) {
sqlData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
switch (get) {
case 'web':
return (<>
{this.props.postData?.isUpdate ?
<div style={{ margin: '100px 24px 24px' }}>
<div style={{ textAlign: 'center' }}>
<img style={{ marginRight: 30 }} src={maintain}></img>
</div>
<p style={{
textAlign: "center",
width: '100%',
fontSize: '16px',
fontWeight: 'bold',
color: '#666666',
}}
>
{updateTime !== 'Invalid date' ?
`升级维护中，预计${updateTime ?? '一万年'}恢复使用,请耐心等待。` :
'请耐心等待'}
</p>
</div>
:<div
id='web_table'
>
<Form
className="login-form" >
{isEdit && defaultBinds ? Object.keys(defaultBinds).map((k) => {
const r = defaultBinds[k]
if (r.columnIds == null || r.columnIds.length < 2 || r.sqls == null || r.sqls.length < 2) {
return ""
}
const name = r.columnIds[r.columnIds.length - 1]
const key = r.sqls[r.sqls.length - 1]
const value = defaultValues[key]
if (value == null) {
return ""
}
return this.props.form.getFieldDecorator(name, {
initialValue: value
const dataObjs = val.unifiedServicePatternModel.dataObjModels;
for (var i = 0; i < dataObjs.length; i++) {
const dob = dataObjs[i];
})(<Input type="hidden" />);
}) : ""}
for (var j = 0; j < dob.columnModels.length; j++) {
mapData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const obj = JSON.parse(val.unifiedServicePatternModel.content);
const xxx = obj.datas[obj.init];
this.setState({
items: xxx.items,
init: { ...this.state.init, ...JSON.parse(val.content) },
datas: obj.datas,
isEdit: this.props.formKey ? false : true,
currentFormKey: obj.init,
width: xxx.width,
isBorder: xxx.isBorder,
mapData,
sqlData,
defaultValues: val.unifiedServicePatternModel.defaultValues,
appId: val.appId,
isReady: true,
formConfig: xxx,
defaultBinds: this.props.table
? obj.datas[val.taskFormKey].defaultBinds
: xxx.defaultBinds,
});
return;
}
const mapData = {};
const sqlData = {};
const sqls = val.unifiedServicePatternModel.sqlModels;
for (var i = 0; i < sqls.length; i++) {
const dob = sqls[i].dataObjModel;
for (var j = 0; j < dob.columnModels.length; j++) {
sqlData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const dataObjs = val.unifiedServicePatternModel.dataObjModels;
for (var i = 0; i < dataObjs.length; i++) {
const dob = dataObjs[i];
<Row>
<Col span={24}>
<div
style={styleDiv}
ref={ref => { this.root = ref }}
>
{/* <NewWebTable
for (var j = 0; j < dob.columnModels.length; j++) {
mapData[dob.columnModels[j].base52] = dob.columnModels[j];
}
}
const obj = JSON.parse(val.unifiedServicePatternModel.content);
const xxx = obj.datas[this.props.formKey ? this.props.formKey : obj.init]; // 是否是存在历史表单传入值
this.setState({
appId: val.id,
datas: obj.datas,
mapData,
sqlData,
defaultValues: val.unifiedServicePatternModel.defaultValues,
isEdit: this.props.formKey ? false : true,
currentFormKey: this.props.formKey
? this.props.formKey
: val.taskFormKey
? val.taskFormKey
: obj.init,
defaultBinds: this.props.table ? obj.datas[val.taskFormKey].defaultBinds : xxx.defaultBinds,
width: this.props.table ? obj.datas[val.taskFormKey].width : xxx.width,
isBorder: this.props.table ? obj.datas[val.taskFormKey].isBorder : xxx.isBorder,
items: this.props.table ? obj.datas[val.taskFormKey].items : xxx.items,
isReady: true,
init: { ...this.state.init, ...(val.isSecond ? this.props.obj : {}) },
formConfig: xxx,
// init:this.props.get==="mobile"?!!val.content?JSON.parse(val.content):'':{},// 移动端默认值设置
});
} catch (e) {
console.log(`公式配置有误`, e);
}
}
checkAllHidden = row => {
for (var i = 0; i < row.length; i++) {
if (row[i].hidden == null || !row[i].hidden) {
return false;
}
}
for (var i = 0; i < row.length; i++) {
delete row[i].hidden;
}
return true;
};
countMax = items => {
var max = 0;
items.forEach(r => {
if (r.length > max) {
max = r.length;
}
});
return max;
};
render() {
let {
width,
isBorder,
sqlData,
mapData,
defaultBinds,
defaultValues,
items,
init,
modalTitle,
currentFormKey,
isEdit,
datas,
isReady,
formConfig,
formCode,
formId,
} = this.state;
let {
border,
get,
obj,
index,
fatherCode,
routerState, // 场景设计器共享路由参数
messageData, // 场景设计器共享变量参数 设计器监听到参数发生变化后会重新渲染组件
postData,
modalInit,
concealModel, // 场景设计器内置跳转函数
} = this.props;
let style = {};
if (formConfig.style != null) {
try {
style = JSON.parse(formConfig.style);
} catch (e) {
console.log(e);
style = {};
}
}
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};
const max = this.countMax(items);
const borderStyle = {
borderRight: '1px solid gray',
borderTop: '1px solid gray',
borderLeft: '1px solid gray',
borderBottom: '1px solid gray',
};
const borderStyleTwo = {
// 处理隐藏组件边框样式问题
borderRight: '1px solid gray',
borderLeft: '1px solid gray',
borderTop: '1px solid gray',
};
let updateTime;
const styleDiv = this.props.height
? {
overflow: 'auto',
width: '100%',
height: this.props.height,
paddingBottom: '10px',
}
: {
overflow: 'auto',
width: '100%',
paddingBottom: '10px',
};
if (!isReady) return <></>;
if (this.props.postData?.isUpdate) {
updateTime = moment(+this.props.postData?.updateTime).format('llll');
}
switch (get) {
case 'web':
return (
<>
{this.props.postData?.isUpdate ? (
<div style={{ margin: '100px 24px 24px' }}>
<div style={{ textAlign: 'center' }}>
<img style={{ marginRight: 30 }} src={maintain}></img>
</div>
<p
style={{
textAlign: 'center',
width: '100%',
fontSize: '16px',
fontWeight: 'bold',
color: '#666666',
}}
>
{updateTime !== 'Invalid date'
? `升级维护中，预计${updateTime ?? '一万年'}恢复使用,请耐心等待。`
: '请耐心等待'}
</p>
</div>
) : (
<div id="web_table">
<Form className="login-form">
{isEdit && defaultBinds
? Object.keys(defaultBinds).map(k => {
const r = defaultBinds[k];
if (
r.columnIds == null ||
r.columnIds.length < 2 ||
r.sqls == null ||
r.sqls.length < 2
) {
return '';
}
const name = r.columnIds[r.columnIds.length - 1];
const key = r.sqls[r.sqls.length - 1];
const value = defaultValues[key];
if (value == null) {
return '';
}
return this.props.form.getFieldDecorator(name, {
initialValue: value,
})(<Input type="hidden" />);
})
: ''}
<Row>
<Col span={24}>
<div
style={styleDiv}
ref={ref => {
this.root = ref;
}}
>
{/* <NewWebTable
items={items}
checkAllHidden={this.checkAllHidden}
border={border}
......@@ -521,169 +553,190 @@ export default class ZdyTable extends Component {
fatherObj={this.props.fatherObj}
max={max}
/> */}
<table
<table
style={{
overflow: 'auto',
margin: max * width > 550 ? 'auto' : '',
...style,
}}
border={border}
cellSpacing="0"
cellPadding="0"
>
<tbody>
{items.map((row, i) => {
const allhidden = this.checkAllHidden(row);
return (
<tr key={i}>
{row.map((cell, j) => {
if (!cell.content) {
return;
}
let styles = {};
if (cell.content && cell.content.styles) {
try {
styles = JSON.parse(cell.content.styles);
} catch (e) {
console.log(`第${i}行第${j}列样式配置有误,${e}`);
}
}
return !allhidden && cell.hidden ? (
''
) : (
<td
width={
i == 0
? (cell.content != null && cell.content.cwidth != null
? cell.content.cwidth
: width) * (cell.col ? cell.col : 1)
: width * (cell.col ? cell.col : 1)
}
rowSpan={cell.row}
colSpan={cell.col}
key={j}
style={{
overflow: "auto",
margin: max * width > 550 ? "auto" : '',
...style
overflow: 'auto',
textAlign:
cell.content && cell.content.calign
? cell.content.calign
: 'left',
...(isBorder
? cell?.content?.comName == 'InputHidden' ||
!cell?.content?.comName
? {}
: borderStyle
: {}),
// position: cell.content&&cell.content.comName ==="InputHidden"&&'absolute',
...styles,
display:
cell.content &&
cell.content.comName === 'InputHidden' &&
'none',
}}
border={border}
cellSpacing="0"
cellPadding="0" >
<tbody>
{items.map((row, i) => {
const allhidden = this.checkAllHidden(row)
return <tr key={i}>
{row.map((cell, j) => {
if(!cell.content){
return
}
let styles = {}
if (cell.content && cell.content.styles) {
try {
styles = JSON.parse(cell.content.styles)
} catch (e) {
console.log(`第${i}行第${j}列样式配置有误,${e}`)
}
}
return !allhidden && cell.hidden ?
""
: <td
width={
i == 0 ?
((cell.content != null && cell.content.cwidth != null ? cell.content.cwidth : width) * (cell.col ? cell.col : 1))
: width * (cell.col ? cell.col : 1)}
rowSpan={cell.row}
colSpan={cell.col}
key={j}
style={{
overflow: "auto",
textAlign: cell.content && cell.content.calign ? cell.content.calign : "left",
...isBorder ?
(cell?.content?.comName == "InputHidden" || !cell?.content?.comName ?
{} :borderStyle
) : {},
// position: cell.content&&cell.content.comName ==="InputHidden"&&'absolute',
...styles,
display:cell.content&&cell.content.comName ==="InputHidden"&&'none',
}} >
<TableCom
formCode={formCode} // 当前表单code
modalInit={modalInit}
formId={formId} // 当前表单Id
i={i} // 当前组件下标
j={j} // 当前行数下班
fatherCode={fatherCode}
index={index}
fatherObj={this.props.fatherObj}
datas={datas}
uuid={cell.uuid}
isEdit={isEdit}
formKey={currentFormKey}
init={init}
get={get} // 区分移动端或wen端
json={cell.content}
obj={obj || {}} // 是否存在默认值
mapData={mapData}
form={this.props.form} // antd form控件
sqlData={sqlData}
defaultValues={defaultValues || {}} // 接口中的默认值
routerState={routerState} // 兼容表单设计器路由传参
messageData={messageData} // 场景设计器共享变量参数
/>
</td>
}
)
}
</tr>
})}
</tbody>
</table>
{style.pageBreakAfter != null ? <div style={{ pageBreakAfter: style.pageBreakAfter }}></div> : ""}
</div>
</Col>
</Row>
</Form>
</div>
}</>)
case 'mobile':
return (<>
{this.props.postData?.isUpdate ?
<div style={{ margin: '100px 24px 24px' }}>
<div style={{ textAlign: 'center' }}>
<img style={{ width: '100%' }} src={maintain}></img>
</div>
<p style={{
textAlign: "center",
width: '100%',
fontSize: '16px',
fontWeight: 'bold',
color: '#666666',
}}
>
{updateTime !== 'Invalid date' ?
`升级维护中，预计${updateTime ?? '一万年'}恢复使用,请耐心等待。` :
'请耐心等待'}
</p>
</div>
:
<Form {...formItemLayout} id='mobile_table' className="login-form">
{defaultBinds ? Object.keys(defaultBinds).map((k) => {
const r = defaultBinds[k]
if (r.columnIds == null || r.columnIds.length < 2 || r.sqls == null || r.sqls.length < 2) {
return ""
}
const name = r.columnIds[r.columnIds.length - 1]
const key = r.sqls[r.sqls.length - 1]
const value = defaultValues[key]
if (value == null) {
return ""
}
return this.props.form.getFieldDecorator(name, {
initialValue: value
})(<Input type="hidden" />);
}) : ""}
<IsNewTable
modalInit={modalInit}
items={items}
checkAllHidden={this.checkAllHidden}
isBorder={isBorder}
borderStyle={borderStyle}
fatherCode={fatherCode}
index={index}
datas={datas}
isEdit={isEdit}
currentFormKey={currentFormKey}
init={init}
get={get}
obj={obj}
mapData={mapData}
form={this.props.form}
sqlData={sqlData}
defaultValues={defaultValues}
width={width}
formCode={formCode}
style={style}
routerState={routerState} // 兼容表单设计器路由传参
messageData={messageData} // 场景设计器共享变量参数
formId={formId}
fatherObj={this.props.fatherObj}
/>
{/* {
>
<TableCom
formCode={formCode} // 当前表单code
modalInit={modalInit}
formId={formId} // 当前表单Id
i={i} // 当前组件下标
j={j} // 当前行数下班
fatherCode={fatherCode}
index={index}
fatherObj={this.props.fatherObj}
datas={datas}
uuid={cell.uuid}
isEdit={isEdit}
formKey={currentFormKey}
init={init}
get={get} // 区分移动端或wen端
json={cell.content}
obj={obj || {}} // 是否存在默认值
mapData={mapData}
form={this.props.form} // antd form控件
sqlData={sqlData}
defaultValues={defaultValues || {}} // 接口中的默认值
routerState={routerState} // 兼容表单设计器路由传参
messageData={messageData} // 场景设计器共享变量参数
concealModel={concealModel || {}} // 场景设计器内置路由跳转函数
/>
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
{style.pageBreakAfter != null ? (
<div style={{ pageBreakAfter: style.pageBreakAfter }}></div>
) : (
''
)}
</div>
</Col>
</Row>
</Form>
</div>
)}
</>
);
case 'mobile':
return (
<>
{this.props.postData?.isUpdate ? (
<div style={{ margin: '100px 24px 24px' }}>
<div style={{ textAlign: 'center' }}>
<img style={{ width: '100%' }} src={maintain}></img>
</div>
<p
style={{
textAlign: 'center',
width: '100%',
fontSize: '16px',
fontWeight: 'bold',
color: '#666666',
}}
>
{updateTime !== 'Invalid date'
? `升级维护中，预计${updateTime ?? '一万年'}恢复使用,请耐心等待。`
: '请耐心等待'}
</p>
</div>
) : (
<Form {...formItemLayout} id="mobile_table" className="login-form">
{defaultBinds
? Object.keys(defaultBinds).map(k => {
const r = defaultBinds[k];
if (
r.columnIds == null ||
r.columnIds.length < 2 ||
r.sqls == null ||
r.sqls.length < 2
) {
return '';
}
const name = r.columnIds[r.columnIds.length - 1];
const key = r.sqls[r.sqls.length - 1];
const value = defaultValues[key];
if (value == null) {
return '';
}
return this.props.form.getFieldDecorator(name, {
initialValue: value,
})(<Input type="hidden" />);
})
: ''}
<IsNewTable
modalInit={modalInit}
items={items}
checkAllHidden={this.checkAllHidden}
isBorder={isBorder}
borderStyle={borderStyle}
fatherCode={fatherCode}
index={index}
datas={datas}
isEdit={isEdit}
currentFormKey={currentFormKey}
init={init}
get={get}
obj={obj}
mapData={mapData}
form={this.props.form}
sqlData={sqlData}
defaultValues={defaultValues}
width={width}
formCode={formCode}
style={style}
routerState={routerState} // 兼容表单设计器路由传参
messageData={messageData} // 场景设计器共享变量参数
formId={formId}
fatherObj={this.props.fatherObj}
concealModel={concealModel || {}} // 场景设计器内置路由跳转函数
/>
{/* {
items.map((item, i) => {
const allhidden = this.checkAllHidden(items)
return (<div
......@@ -728,8 +781,10 @@ export default class ZdyTable extends Component {
</div>)
})
} */}
</Form>
}</>)
}
</Form>
)}
</>
);
}
}
}
one_stop_public/Table/isNewMobileTable.jsx
浏览文件 @ e97216ea
/**
* 测试新表格
*/
import React, { Component } from 'react'
import React, { Component } from 'react';
import TableCom from '../tableCompon/index';
import { Card, WhiteSpace } from 'antd-mobile';
import { Row, Col } from 'antd';
export default class isNewTable extends Component {
render() {
const {
items,
checkAllHidden,
isBorder,
borderStyle,
fatherCode,
index,
datas,
isEdit,
currentFormKey,
init,
get,
obj,
mapData,
form,
sqlData,
defaultValues,
width,
routerState,
messageData,
formCode,
formId,
fatherObj,
style,
modalInit
} = this.props
if(!isEdit ){ // 展示栏 暂不做处理
return <>
{
items.map((item, i) => {
const allhidden = checkAllHidden(items)
return (<div
key={i}
style={{
marginTop: 0,
background: '#ffffff',
paddingLeft: 12,
width: '100%',
flexWrap: 'wrap',
...style
}}>
{
item.map((ary, j) => {
return !allhidden && ary.hidden ? ""
: <><TableCom
modalInit={modalInit}
formCode={formCode}
formId={formId}
i={i}
j={j}
index={index}
fatherCode={fatherCode}
datas={datas}
isEdit={isEdit}
fatherObj={this.props.fatherObj}
formKey={currentFormKey}
init={init}
get={get}
key={j}
sqlData={sqlData}
obj={obj || {}}
form={this.props.form}
mapData={mapData}
json={ary.content}
uuid={ary.uuid}
routerState={routerState} // 兼容表单设计器路由传参
defaultValues={defaultValues || {}}
messageData={messageData} // 场景设计器共享变量参数
/></>
})
}
</div>)
})
}
render() {
const {
items,
checkAllHidden,
isBorder,
borderStyle,
fatherCode,
index,
datas,
isEdit,
currentFormKey,
init,
get,
obj,
mapData,
form,
sqlData,
defaultValues,
width,
routerState,
messageData,
formCode,
formId,
fatherObj,
style,
modalInit,
concealModel,
} = this.props;
if (!isEdit) {
// 展示栏 暂不做处理
return (
<>
{items.map((item, i) => {
const allhidden = checkAllHidden(items);
return (
<div
key={i}
style={{
marginTop: 0,
background: '#ffffff',
paddingLeft: 12,
width: '100%',
flexWrap: 'wrap',
...style,
}}
>
{item.map((ary, j) => {
return !allhidden && ary.hidden ? (
''
) : (
<>
<TableCom
modalInit={modalInit}
formCode={formCode}
formId={formId}
i={i}
j={j}
index={index}
fatherCode={fatherCode}
datas={datas}
isEdit={isEdit}
fatherObj={this.props.fatherObj}
formKey={currentFormKey}
init={init}
get={get}
key={j}
sqlData={sqlData}
obj={obj || {}}
form={this.props.form}
mapData={mapData}
json={ary.content}
uuid={ary.uuid}
routerState={routerState} // 兼容表单设计器路由传参
defaultValues={defaultValues || {}}
messageData={messageData} // 场景设计器共享变量参数
concealModel={concealModel} // 场景设计器路由跳转参数
/>
</>
}
return (
<>
{/* { // Row Col 模式
);
})}
</div>
);
})}
</>
);
}
return (
<>
{/* { // Row Col 模式
items.map((item, i) => {
console.log(item)
const allhidden = checkAllHidden(items)
......@@ -163,89 +171,103 @@ export default class isNewTable extends Component {
</>
})
} */}
{ // 卡片模式
items.map((item, i) => {
const allhidden = checkAllHidden(items)
return <> <Card full>
{
item.map((ary, j) => {
if(!ary.content){
return
}
if(ary.content&&ary.content.comName==="Label"){
return <Card.Header
title={
!allhidden && ary.hidden ? ""
:<><TableCom
modalInit={modalInit}
formCode={formCode}
formId={formId}
i={i}
j={j}
index={index}
fatherCode={fatherCode}
datas={datas}
isEdit={isEdit}
fatherObj={this.props.fatherObj}
formKey={currentFormKey}
init={init}
get={get}
key={j}
sqlData={sqlData}
obj={obj || {}}
form={this.props.form}
mapData={mapData}
json={ary.content}
uuid={ary.uuid}
routerState={routerState} // 兼容表单设计器路由传参
defaultValues={defaultValues || {}}
messageData={messageData} // 场景设计器共享变量参数
/></>
}
/>
}
return !allhidden && ary.hidden ? ""
:<Card.Body
style={{
// textAlign:ary.content&&ary.content.comName === 'Table'?"left":'right'
}}
> <><TableCom
modalInit={modalInit}
formCode={formCode}
formId={formId}
i={i}
j={j}
index={index}
fatherCode={fatherCode}
datas={datas}
isEdit={isEdit}
fatherObj={this.props.fatherObj}
formKey={currentFormKey}
init={init}
get={get}
key={j}
sqlData={sqlData}
obj={obj || {}}
form={this.props.form}
mapData={mapData}
json={ary.content}
uuid={ary.uuid}
routerState={routerState} // 兼容表单设计器路由传参
defaultValues={defaultValues || {}}
messageData={messageData} // 场景设计器共享变量参数
/></>
</Card.Body>
})
}
</Card>
<WhiteSpace />
</>
})
}
{// 卡片模式
items.map((item, i) => {
const allhidden = checkAllHidden(items);
return (
<>
{' '}
<Card full>
{item.map((ary, j) => {
if (!ary.content) {
return;
}
if (ary.content && ary.content.comName === 'Label') {
return (
<Card.Header
title={
!allhidden && ary.hidden ? (
''
) : (
<>
<TableCom
modalInit={modalInit}
formCode={formCode}
formId={formId}
i={i}
j={j}
index={index}
fatherCode={fatherCode}
datas={datas}
isEdit={isEdit}
fatherObj={this.props.fatherObj}
formKey={currentFormKey}
init={init}
get={get}
key={j}
sqlData={sqlData}
obj={obj || {}}
form={this.props.form}
mapData={mapData}
json={ary.content}
uuid={ary.uuid}
routerState={routerState} // 兼容表单设计器路由传参
defaultValues={defaultValues || {}}
messageData={messageData} // 场景设计器共享变量参数
/>
</>
)
}
/>
);
}
return !allhidden && ary.hidden ? (
''
) : (
<Card.Body
style={
{
// textAlign:ary.content&&ary.content.comName === 'Table'?"left":'right'
}
}
>
{' '}
<>
<TableCom
modalInit={modalInit}
formCode={formCode}
formId={formId}
i={i}
j={j}
index={index}
fatherCode={fatherCode}
datas={datas}
isEdit={isEdit}
fatherObj={this.props.fatherObj}
formKey={currentFormKey}
init={init}
get={get}
key={j}
sqlData={sqlData}
obj={obj || {}}
form={this.props.form}
mapData={mapData}
json={ary.content}
uuid={ary.uuid}
routerState={routerState} // 兼容表单设计器路由传参
defaultValues={defaultValues || {}}
messageData={messageData} // 场景设计器共享变量参数
/>
</>
</Card.Body>
);
})}
</Card>
<WhiteSpace />
</>
)
}
);
})}
</>
);
}
}
one_stop_public/tableCompon/index.jsx
浏览文件 @ e97216ea
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论