提交 ffbd331a authored 作者: ch's avatar ch

增加v2版本表单

上级 85c4ecc9
差异被折叠。
/**
* 测试新表格
*/
import React, { Component } from 'react';
import { Row, Col } from 'antd';
import TableCom from '../tableComponV2/index';
export default class IsNewTable extends Component {
render() {
const {
items,
checkAllHidden,
fatherCode,
userId,
index,
datas,
isEdit,
currentFormKey,
init,
get,
obj,
mapData,
sqlData,
defaultValues,
routerState,
messageData,
formCode,
formId,
style,
isPreview,
modalInit,
concealModel,
taskAssignee,
currentFormTitle,
getCellValue,
hfInstance,
trees,
getCurrentFormTitle,
changedValues
} = this.props;
if (!isEdit) {
// 展示栏 暂不做处理
return (
<>
{items.map((item, i) => {
const allhidden = checkAllHidden(items);
return (
<div
key={item && Array.isArray(item) && item.length > 0 ? item[0].uuid : i}
style={{
marginTop: 0,
background: '#ffffff',
width: '100%',
flexWrap: 'wrap',
...style,
}}>
{item.map((ary, j) => {
let styles = {};
if (ary.content && ary.content.styles) {
try {
styles = JSON.parse(ary.content.styles);
} catch (e) {
console.log(`第${i}行第${j}列样式配置有误,${e}`);
}
}
return !allhidden && ary.hidden ? (
''
) : (
<div
key={ary.uuid || j}
style={{
...styles,
textAlign: 'left',
borderBottom: '1px solid white',
display:
ary.content &&
(ary.content.comName === 'InputHidden' || ary.content.isMobileHidden) &&
'none',
}}>
<TableCom
changedValues={changedValues}
taskAssignee={taskAssignee} // 提交人
trees={trees}
userId={userId}
modalInit={modalInit}
formCode={formCode}
formId={formId}
isPreview={isPreview}
i={i}
j={j}
taskId={this.props.taskId}
setRealTimeValues={this.props.setRealTimeValues}
index={index}
getCurrentFormTitle={getCurrentFormTitle}
fatherCode={fatherCode}
datas={datas}
isEdit={isEdit}
fatherObj={this.props.fatherObj}
formKey={currentFormKey}
currentFormTitle={currentFormTitle}
hfInstance={hfInstance}
getCellValue={getCellValue}
initExcel={this.props.initExcel}
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} // 场景设计器路由跳转参数
/>
</div>
);
})}
</div>
);
})}
</>
);
}
return items.map((item, i) => {
const allhidden = checkAllHidden(items);
return (
<Row
key={item && Array.isArray(item) && item.length > 0 ? item[0].uuid : i}
style={{
...style,
}}>
{item.map((ary, j) => {
let styles = {};
if (ary.content && ary.content.styles) {
try {
styles = JSON.parse(ary.content.styles);
} catch (e) {
console.log(`第${i}行第${j}列样式配置有误,${e}`);
}
}
if (ary.content?.comName === 'Label') {
return (
<Col
key={ary.uuid || j}
style={{
display:
ary.content &&
(ary.content.comName === 'InputHidden' || ary.content.isMobileHidden) &&
'none',
...styles,
}}
span={ary.content?.labelSpan || 24}>
{!allhidden && ary.hidden ? (
''
) : (
<>
<TableCom
changedValues={changedValues}
trees={trees}
formCode={formCode}
taskAssignee={taskAssignee}
formId={formId}
modalInit={modalInit}
i={i}
j={j}
taskId={this.props.taskId}
isPreview={isPreview}
index={index}
fatherCode={fatherCode}
datas={datas}
isEdit={isEdit}
setRealTimeValues={this.props.setRealTimeValues}
getCurrentFormTitle={getCurrentFormTitle}
importExcel={this.props.importExcel}
fatherObj={this.props.fatherObj}
formKey={currentFormKey}
currentFormTitle={currentFormTitle}
hfInstance={hfInstance}
getCellValue={getCellValue}
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} // 场景设计器共享变量参数
/>
</>
)}
</Col>
);
}
return (
<Col
key={ary.uuid || j}
span={24}
style={{
display:
ary.content &&
(ary.content.comName === 'InputHidden' || ary.content.isMobileHidden) &&
'none',
...styles,
}}>
{!allhidden && ary.hidden ? (
''
) : (
<>
<TableCom
changedValues={changedValues}
trees={trees}
formCode={formCode}
taskAssignee={taskAssignee}
formId={formId}
taskId={this.props.taskId}
isPreview={isPreview}
i={i}
j={j}
index={index}
fatherCode={fatherCode}
datas={datas}
modalInit={modalInit}
isEdit={isEdit}
getCurrentFormTitle={getCurrentFormTitle}
fatherObj={this.props.fatherObj}
formKey={currentFormKey}
importExcel={this.props.importExcel}
currentFormTitle={currentFormTitle}
hfInstance={hfInstance}
getCellValue={getCellValue}
init={init}
get={get}
key={j}
setRealTimeValues={this.props.setRealTimeValues}
sqlData={sqlData}
obj={obj || {}}
form={this.props.form}
mapData={mapData}
json={ary.content}
uuid={ary.uuid}
routerState={routerState} // 兼容表单设计器路由传参
defaultValues={defaultValues || {}}
messageData={messageData} // 场景设计器共享变量参数
/>
</>
)}
</Col>
);
})}
</Row>
);
});
}
}
...@@ -147,6 +147,7 @@ export default class ChildForm extends React.Component { ...@@ -147,6 +147,7 @@ export default class ChildForm extends React.Component {
}} }}
span={isEdit ? 24 : span}> span={isEdit ? 24 : span}>
<ZdyTable <ZdyTable
changedValues={this.props.changedValues}
setRealTimeValues={this.props.setRealTimeValues} setRealTimeValues={this.props.setRealTimeValues}
trees={this.props.trees} trees={this.props.trees}
key={r} key={r}
...@@ -231,6 +232,7 @@ export default class ChildForm extends React.Component { ...@@ -231,6 +232,7 @@ export default class ChildForm extends React.Component {
return ( return (
<Col span={span} key={r}> <Col span={span} key={r}>
<ZdyTable <ZdyTable
changedValues={this.props.changedValues}
taskId={taskId} taskId={taskId}
setRealTimeValues={this.props.setRealTimeValues} setRealTimeValues={this.props.setRealTimeValues}
modalInit={modalInit} modalInit={modalInit}
......
import React, {useMemo, Component} from 'react';
import {List, Picker} from 'antd-mobile';
import styles from './styles.less';
const getItemChildren = (childrenList, parent) => {
if (!childrenList || !childrenList.length) {
return [];
}
for (let item of childrenList) {
if (item.label.indexOf(parent.label) > -1) {
item.label = item.label.replace(parent.label, '');
}
for (let proviceName of ['内蒙古', '广西', '新疆', '香港', '澳门', '西藏', '宁夏']) {
item.label = item.label.replace(proviceName, '');
}
if (item.children) {
item.children = getItemChildren(item.children, parent);
}
}
return childrenList;
}
export default class MobileCascader extends Component{
constructor(props) {
super(props);
}
render() {
const {onChange, options, label, disabled, value, json, otherProps} = this.props;
// console.log(props);
let opt = options &&
Array.isArray(options) &&
options.map((x) => {
return {
label: x.label,
value: x.value,
children: getItemChildren(x.children, x),
};
});
return (
<div className={styles.mobileFormInput}>
<Picker
data={opt || []}
cascade={true}
// cols={1}
disabled={disabled}
value={value}
extra={disabled ? '' : json.placeholder || '点击选择'}
onChange={(val) => {
console.log(val);
onChange(val || undefined);
}}
{...otherProps?.props}
>
<List.Item arrow={disabled ? '' : 'horizontal'}>
{/*{label}*/}
</List.Item>
</Picker>
</div>
);
}
}
//
//
// export default function MobileCascader(props) { // 级联选择
//
// }
.mobileFormInput {
border-bottom: 1px solid #eee;
:global {
.am-input-label,
.am-textarea-label,
.am-list-content {
white-space: pre-line !important;
font-size: 14px !important;
}
.am-list-item.am-input-item {
height: auto;
}
//.am-list-item .am-list-line .am-list-content{
// padding-left: 15px;
//}
.am-list-item {
padding-left: 0;
}
.am-list-item .am-list-line {
padding-right: 0;
}
.am-list-extra {
flex-basis: 100% !important;
font-size: 14px !important;
}
.am-list-item .am-input-control input {
text-align: right;
}
.am-list-item
.am-input-control
.fake-input-container
.fake-input-placeholder {
font-size: 14px;
}
}
input,
textarea {
font-size: 14px !important;
}
}
.mobileFormItem {
margin-bottom: 0px !important;
:global {
.ant-form-item-label {
/*隐藏手机端 字段的label 使用 antd-mobile 替代*/
display: inline !important;
height: 1px !important;
}
}
}
.viewDetail {
display: grid;
justify-content: start;
align-items: center;
width: 100%;
grid-template-columns: 15% 35% 15% 35%;
.title {
padding: 15px;
margin: -1px;
background-color: #fafafa;
border: 1px solid #eee;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.name {
margin: -1px;
padding: 15px;
background-color: #fff;
border: 1px solid #eee;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.viewDetailMobile {
display: grid;
justify-content: start;
align-items: center;
width: 100%;
grid-template-columns: 35% 65%;
border: 1px solid #eee;
margin-top: -1px;
.title {
padding: 15px;
margin-bottom: 0;
//margin: -1px;
background-color: #fafafa;
//overflow: hidden;
//white-space: nowrap;
//text-overflow: ellipsis;
}
.name {
//margin: -1px;
padding: 15px;
background-color: #fff;
//overflow: hidden;
//white-space: nowrap;
//text-overflow: ellipsis;
}
}
import React, { Children } from 'react';
import { Button, Form, Input, InputNumber, Modal, Select } from 'antd';
export default class FormModal extends React.Component {
render() {
// console.log(this.props);
return (
<Modal
destroyOnClose
title={this.props.title}
maskClosable={false}
width={this.props.width}
height={this.props.height}
visible={this.props.visible}
footer={null}
onCancel={this.props.handleCancel}>
{this.props.children}
</Modal>
);
}
}
/**
* @file 移动端 Row,Col二次封装
*/
import React, { Component } from 'react';
import { Form } from 'antd';
export default class MobileItem extends Component {
render() {
const { isPreview } = this.props;
return (
<Form.Item
{...this.props}
className={isPreview ? 'isPreview' : null}
label={isPreview ? this.props.label : this.props.label + '::'}
/>
);
}
}
import {message} from "antd";
import baseX from "base-x";
import moment from "moment";
import {isNaN} from "lodash";
import React from 'react';
import config from "@/webPublic/one_stop_public/config";
const codeMessage = {
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队(异步任务)。',
204: '删除数据成功。',
400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
401: '登录已过期,请重新登录',
403: '用户得到授权,但是访问是被禁止的。',
404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
406: '请求的格式不可得。',
410: '请求的资源被永久删除,且不会再得到的。',
422: '当创建一个对象时,发生一个验证错误。',
500: '服务器发生错误,请检查服务器。',
502: '网关错误。',
503: '服务不可用,服务器暂时过载或维护。',
504: '网关超时。',
};
const errorHandler = (error) => {
const { response } = error;
if (response && response.status) {
const errorText = codeMessage[response.status] || response.statusText;
message.error(`请求错误${errorText}`);
if (response.status === 401) {
return window.g_app._store.dispatch({
type: 'login/loginout',
});
}
} else {
message.error(`网络故障,请检查网络链接或联系管理员`);
}
};
const Bs64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
const base64 = baseX(Bs64);
export function getBase64(value) {
return value ? base64.encode(new Buffer(value)) : null;
}
const equal = (obj1, obj2, json, sqlContent, depth, props, excludeKeys) => {
if (obj1 == null && obj2 != null) {
return false;
}
if (obj1 != null && obj2 == null) {
return false;
}
if (obj1 == null && obj2 == null) {
return true;
}
if (obj1 instanceof Date) {
if (obj1.valueOf() != obj2.valueOf()) {
return false;
}
} else if (obj1 instanceof moment) {
if (obj1.valueOf() != obj2.valueOf()) {
return false;
}
} else if (typeof obj1 == 'function') {
if (obj1.toString() != obj2.toString()) {
return false;
}
}
const keys = new Set();
if (obj2 != null) {
Object.keys(obj2).forEach(k => {
if (k != '') keys.add(k);
});
}
if (obj1 != null) {
Object.keys(obj1).forEach(k => {
if (k != '') keys.add(k);
});
}
let res = true;
for (let key of keys) {
if (key == '') {
continue;
}
if (excludeKeys.includes(key)) {
continue;
}
if (obj1[key] == null && obj2[key] != null) {
res = false;
break;
}
if (obj1[key] != null && obj2[key] == null) {
res = false;
break;
}
if (
depth == 1 &&
((props.json.sqlKey == null &&
sqlContent == null &&
json.formula == null &&
json.funcs == null) ||
(sqlContent != null && sqlContent.indexOf(key) == -1) ||
(json.formula != null &&
json.formula.indexOf(key) == -1 &&
json.funcs != null &&
json.funcs.indexOf(key) == -1))
) {
excludeKeys.push(key);
continue;
}
if (obj1[key] == null && obj2[key] == null) {
continue;
}
if (isNaN(obj1[key]) && isNaN(obj2[key])) {
continue;
}
if (obj1[key] instanceof Array) {
if (obj1[key].length != obj2[key].length) {
res = false;
break;
} else {
var xx = true;
for (var i = 0; i < obj1[key].length; i++) {
if (!equal(obj1[key][i], obj2[key][i], json, sqlContent, depth + 1, props, excludeKeys)) {
xx = false;
break;
}
}
if (!xx) {
res = false;
break;
}
}
} else if (obj1[key] instanceof Object) {
const x = equal(obj1[key], obj2[key], json, sqlContent, depth + 1, props, excludeKeys);
if (!x) {
res = false;
break;
}
} else if (typeof obj1[key] == 'function') {
if (obj1[key].toString() != obj2[key].toString()) {
res = false;
break;
}
} else {
if (obj1[key] != obj2[key]) {
res = false;
break;
}
}
}
return res;
};
const getRender = (com, props) => {
if (com == 'p') return <p {...props} />;
if (com == 'ul') return <ul {...props} />;
if (com == 'li') return <li {...props} />;
if (com == 'video') return <video {...props} />;
if (com == 'span') return <span {...props} />;
if (com == 'a') return <a {...props} />;
if (com == 'div') return <div {...props} />;
if (com == 'canvas') return <canvas {...props} />;
if (com == 'iframe') return <iframe {...props} />;
if (com == 'img') {
const src =
props.src != null
? props.src.indexOf('http') > -1
? props.src
: config.httpServer + props.src
: null;
const pp = { ...props, src: src };
return <img {...pp} />;
}
};
/**
* 判断传入值是否为JSON文本
*/
const isJSON = str => {
if (typeof str == 'string') {
try {
var obj = JSON.parse(str);
if (typeof obj == 'object' && obj) {
return true;
} else {
return false;
}
} catch (e) {
console.log('error:' + str + '!!!' + e);
return false;
}
}
};
export { errorHandler, equal, getRender, isJSON };
This source diff could not be displayed because it is too large. You can view the blob instead.
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论