Skip to content

W
WebPublic
提交 71f9c6df authored 作者: 王绍森's avatar 王绍森
浏览文件
操作

form表单封装

上级 65f44527
显示空白字符变更
内嵌 并排
正在显示 包含 135 行增加 和 156 行删除
FormInsertDiy/ListWithAddEditTemplate/AddOrEditFormTemplate.js deleted 100644 → 0
浏览文件 @ 65f44527
import React from 'react';
import PropTypes from 'prop-types';
import ZdyTable from '@/webPublic/one_stop_public/Table';
import { fetchTemplateByCode } from '@/webPublic/Services'
export default class AddOrEditForm extends React.Component {
static propTypes = {
code: PropTypes.string.isRequired,
form: PropTypes.object.isRequired,
};
constructor(props) {
super(props);
this.state = {
data: null,
};
}
componentDidMount() {
this.queryTemplate();
}
componentDidUpdate(prevProps) {
if (prevProps.code !== this.props.code) {
this.queryTemplate();
}
}
queryTemplate = () => {
const { code } = this.props;
fetchTemplateByCode(code).then(res => {
if (res) {
this.setState({ data: res });
}
});
};
render() {
const { data } = this.state;
const { form, content = {} } = this.props;
return (
data && (
<ZdyTable
get="web"
isCg="yes"
postData={{ content: JSON.stringify(content), unifiedServicePatternModel: data }}
form={form}
/>
)
);
}
}
FormInsertDiy/ListWithAddEditTemplate/AddOrEditModal.js
浏览文件 @ 71f9c6df
import React from 'react';
import { Modal } from 'antd';
import AddOrEditFormTemplate from './AddOrEditFormTemplate';
import { RenderFormByContent } from '../RenderForm'
const CreateForm = props => {
const {
......@@ -12,6 +11,7 @@ const CreateForm = props => {
content,
form,
templateCode,
confirmLoading,
} = props;
return (
......@@ -23,8 +23,9 @@ const CreateForm = props => {
visible={modalVisible}
onOk={handleAdd}
onCancel={handleModalVisible}
confirmLoading={confirmLoading}
>
<AddOrEditFormTemplate form={form} content={content} code={templateCode} />
<RenderFormByContent form={form} content={content} templateCode={templateCode} />
</Modal>
);
};
......
FormInsertDiy/ListWithAddEditTemplate/index.js
浏览文件 @ 71f9c6df
......@@ -20,6 +20,8 @@ import {
} from '@/webPublic/Services';
import { ModalConfirm } from '@/baseComponent/Modal';
const dateRender = val => val && moment(val).format('YYYY-MM-DD HH:mm:ss');
const getValue = obj =>
Object.keys(obj)
.map(key => obj[key])
......@@ -61,6 +63,7 @@ class ListWithAddEditTemplate extends React.Component {
list: [],
pagination: {},
},
confirmLoading: false,
};
this.columns = [];
}
......@@ -68,57 +71,39 @@ class ListWithAddEditTemplate extends React.Component {
// 渲染值
componentDidMount() {
const { objId } = this.props;
fetchTableHeader(objId).then(datas => {
if (!datas) return;
this.setState({ headerList: datas });
let i = 0;
for (let t in datas) {
if (i < 10) {
let column = {};
column.title = datas[t].title;
column.dataIndex = datas[t].name;
if (date.includes(datas[t].type)) {
column.render = val => val && moment(val).format('YYYY-MM-DD HH:mm:ss');
}
this.columns.push(column);
i++;
}
if (datas[t].isPrimaryKey) {
this.setState({
primaryKey: datas[t].name,
});
}
}
let searchConfig = [];
for (let item of datas) {
if (item.isShowQuery) {
let sear = getFormArrayConfig([item]);
if (!Array.isArray(sear)) {
return false;
}
delete sear[0].required;
delete sear[0].placeHolder;
searchConfig.push(sear[0]);
}
}
this.setState({
searchConfig,
});
let opt = {
fetchTableHeader(objId).then(headerList => {
if (!headerList) return;
this.setState({ headerList });
this.columns = headerList.slice(0, 10).map(item => ({
title: item.title,
dataIndex: item.name,
render: date.includes(item.type) && dateRender,
}));
const operation = {
title: '操作',
render: (text, record) => {
render: (_, record) => {
return (
<Fragment>
<div>
<a onClick={this.modify.bind(this, record)}>编辑</a>
<Divider type="vertical" />
<a onClick={this.delete.bind(this, record)}>删除</a>
</div>
</Fragment>
);
},
};
this.columns.push(opt);
this.columns.push(operation);
const primaryKey = (headerList.find(i => i.isPrimaryKey) || {}).name;
this.setState({ primaryKey });
const searchConfig = headerList.filter(i => i.isShowQuery).map(item => {
const sear = getFormArrayConfig([item]);
const { required, placeHolder, ...config } = sear[0];
return config;
});
this.setState({ searchConfig, primaryKey });
this.getPage();
});
}
......@@ -224,7 +209,9 @@ class ListWithAddEditTemplate extends React.Component {
const { isAdd } = this.state;
validateFields((err, values) => {
if (err) return;
this.setState({ confirmLoading: true });
addOrEditTableItem({ objId, data: values, isAdd }).then(res => {
this.setState({ confirmLoading: false });
if (res === true) {
message.success('操作成功');
this.setState({
......@@ -295,6 +282,7 @@ class ListWithAddEditTemplate extends React.Component {
primaryKey,
formValues,
searchConfig,
confirmLoading,
} = this.state;
const { hasExport, form, hasImport, templateCode } = this.props;
......@@ -306,6 +294,7 @@ class ListWithAddEditTemplate extends React.Component {
isAdd,
templateCode,
modalVisible,
confirmLoading,
};
return (
<>
......
FormInsertDiy/RenderForm/index.js 0 → 100644
浏览文件 @ 71f9c6df
import React, { useEffect, useState } from 'react';
import ZdyTable from '@/webPublic/one_stop_public/Table';
import styles from './index.less';
import { fetchTemplateByCode, fetchTableItem } from '@/webPublic/Services';
export default function RenderForm({ get = 'web', isCg = 'yes', form, postData }) {
return (
<div className={styles.zyd_onestop_style_class}>
<ZdyTable get={get} isCg={isCg} postData={postData} form={form} />
</div>
);
}
/**
* 根据表单code渲染表单
* @param {Object} content 表单内容，传入对象
* @param {String} templateCode 表单模板
*/
export function RenderFormByContent({ content, templateCode, form, get, isCg }) {
const [formTemplate, setFormTemplate] = useState();
useEffect(
() => {
fetchTemplateByCode(templateCode).then(res => {
if (res) {
setFormTemplate(res);
}
});
},
[templateCode]
);
return formTemplate ? (
<RenderForm
get={get}
isCg={isCg}
postData={{
content: JSON.stringify(content),
unifiedServicePatternModel: formTemplate,
}}
form={form}
/>
) : null;
}
/**
*渲染元数据库中的某条数据
* @param {Object} objId 元数据库id
* @param {String} dataTypeKey 元数据库表格键
* @param {String} dataTypeValue 键对应的值
* @param {Function} onLoad 数据加载的回调函数
*/
export function RenderFormByObjId({
objId,
dataTypeKey,
dataTypeValue,
onLoad,
templateCode,
form,
get,
isCg,
}) {
const [content, setContent] = useState({});
useEffect(
() => {
fetchTableItem({ dataObjId: objId, key: dataTypeKey, value: dataTypeValue }).then(res => {
setContent(res || {});
if (onLoad) {
onLoad(res);
}
});
},
[objId, dataTypeKey, dataTypeValue]
);
return (
<RenderFormByContent get={get} isCg={isCg} content={content} templateCode={templateCode} form={form} />
);
}
FormInsertDiy/SingleDataPageTemplate/index.js
浏览文件 @ 71f9c6df
import React from 'react';
import React, { useState } from 'react';
import { Form, Button } from 'antd';
import Shell from '@/baseComponent/Shell';
import ZdyTable from '@/webPublic/one_stop_public/Table';
import { ModalInfo } from '@/baseComponent/Modal';
import { fetchTableItem, fetchTemplateByCode, addOrEditTableItem } from '@/webPublic/Services';
import styles from '../index.less';
import { addOrEditTableItem } from '@/webPublic/Services';
import { RenderFormByObjId } from '../RenderForm';
// 单一数据页面模板，页面只是显示和操作一条数据
// 1. 页面显示通过模板id渲染。
// 2. 页面数据通过元数据表id, key，value 查询和修改。
......@@ -14,52 +14,24 @@ import styles from '../index.less';
// dataTypeValue, 元数据表格中查找数据的value
// children， 可以传children，但children不能是数组(不能传属性)，children里可以自定义其他组件。
@Form.create()
export default class ConfigPageTemplate extends React.Component {
constructor(props) {
super(props);
this.state = {
formTemplate: null,
formValues: {},
// 判断是新增还是添加
isAdd: false,
};
}
componentDidMount() {
const { templateCode, tableId, dataTypeKey, dataTypeValue } = this.props;
fetchTemplateByCode(templateCode).then(res => {
if (res) {
this.setState({ formTemplate: res });
}
});
fetchTableItem({
dataObjId: tableId,
key: dataTypeKey,
value: dataTypeValue,
}).then(res => {
this.setState({ formValues: res || {}, isAdd: !!(!res || res.errMsg) });
});
}
function SingleDataPageTemplate(props) {
const [isAdd, setIsAdd] = useState(false);
handleSave = () => {
const { tableId, form } = this.props;
function handleSave() {
const { tableId, form } = props;
const { validateFields } = form;
const { isAdd } = this.state;
validateFields((err, values) => {
if (err) return;
addOrEditTableItem({objId:tableId, isAdd, data: values }).then(res => {
addOrEditTableItem({ objId: tableId, isAdd, data: values }).then(res => {
if (res) {
ModalInfo('保存成功！');
}
});
});
};
}
render() {
const { formTemplate, formValues } = this.state;
const { children, form } = this.props;
const { children, form, templateCode, tableId, dataTypeKey, dataTypeValue } = props;
let ClonedChildren;
if (children) {
ClonedChildren = React.cloneElement(React.Children.only(children), {
......@@ -70,31 +42,24 @@ export default class ConfigPageTemplate extends React.Component {
}
return (
<>
{formTemplate && (
<Shell styleShell={{ marginTop: 0 }} >
<div className={styles.zyd_onestop_style_class}>
<ZdyTable
get="web"
isCg="yes"
postData={{
content: JSON.stringify(formValues),
unifiedServicePatternModel: formTemplate,
}}
form={this.props.form}
<Shell styleShell={{ marginTop: 0 }}>
<RenderFormByObjId
objId={tableId}
dataTypeKey={dataTypeKey}
dataTypeValue={dataTypeValue}
templateCode={templateCode}
onLoad={res => setIsAdd(!!(!res || res.errMsg))}
form={form}
/>
</div>
{ClonedChildren || (
<div style={{ textAlign: 'center', padding: 16 }}>
<Button type="primary" shape="round" ghost onClick={this.handleSave}>
<Button type="primary" shape="round" ghost onClick={handleSave}>
保存
</Button>
</div>
)}
</Shell>
)}
</>
);
}
}
export default Form.create()(SingleDataPageTemplate);
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论