请求一站式的接口统一管理

FormInsertDiy/ListWithAddEditTemplate/AddOrEditFormTemplate.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
 import ZdyTable from '@/webPublic/one_stop_public/Table';
+import { fetchTemplateByCode }  from '@/webPublic/Services'
 
 export default class AddOrEditForm extends React.Component {
   static propTypes = {
@@ -29,7 +29,7 @@ export default class AddOrEditForm extends React.Component {
 
   queryTemplate = () => {
     const { code } = this.props;
-    uaaRequest('/UnifiedServicePatternApi/getDetail', { code }).then(res => {
+    fetchTemplateByCode(code).then(res => {
       if (res) {
         this.setState({ data: res });
       }
@@ -39,6 +39,7 @@ export default class AddOrEditForm extends React.Component {
   render() {
     const { data } = this.state;
     const { form, content = {} } = this.props;
+
     return (
       data && (
         <ZdyTable

FormInsertDiy/ListWithAddEditTemplate/AddOrEditModal.js

@@ -14,11 +14,6 @@ const CreateForm = props => {
     templateCode,
   } = props;
 
-  // 通过回调
-  const okHandle = () => {
-    handleAdd({}, isAdd);
-  };
-
   return (
     <Modal
       width="1000px"
@@ -26,7 +21,7 @@ const CreateForm = props => {
       destroyOnClose
       title={isAdd ? '新增' : '编辑'}
       visible={modalVisible}
-      onOk={okHandle}
+      onOk={handleAdd}
       onCancel={handleModalVisible}
     >
       <AddOrEditFormTemplate form={form} content={content} code={templateCode} />

FormInsertDiy/ListWithAddEditTemplate/index.js

 import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
 import { Divider, message, Form, Popconfirm } from 'antd';
 import moment from 'moment';
 import router from 'umi/router';
@@ -10,28 +11,51 @@ import Edit from '../Edit/index';
 import ImportUtil from '../ImportUtil/ImportUtil';
 import SearchDom from '@/highOrderComponent/SearchDom';
 import StandardTable from '@/components/StandardTable';
-import { getHead, fetchData, deleteItem, add } from './services';
 import AddOrEditModal from './AddOrEditModal';
+import {
+  fetchTableHeader,
+  fetchTableData,
+  addOrEditTableItem,
+  deleteTableItem,
+} from '@/webPublic/Services';
 
 const getValue = obj =>
   Object.keys(obj)
     .map(key => obj[key])
     .join(',');
 
+/**
+ * 展示list数据，
+ * 根据元数据id显示元数据表格，根据模板id新增或编辑某条数据
+ */
 class ListWithAddEditTemplate extends React.Component {
+  static propTypes = {
+    objId: PropTypes.string.isRequired, // 元数据表id
+    templateCode: PropTypes.string.isRequired, // 表单模板id
+    filters: PropTypes.object, // 请求元数据表格时额外的过滤条件
+    hasImport: PropTypes.bool, // 是否有导入操作按钮，默认false
+    hasExport: PropTypes.bool, // 是否有导出按钮，默认false
+  };
+
+  static defaultProps = {
+    filters: {},
+    hasImport: false,
+    hasExport: false,
+  };
+
   constructor(props) {
     super(props);
 
     this.state = {
       modalVisible: false,
-      formData: null,
-      headerList: [],
+      formData: null, // 编辑某行数据时表单的数据
+      headerList: [], // 表头的数据
       searchConfig: [],
-      formValues: {},
-      isAdd: false,
+      formValues: {}, // 搜索区域的数据
+      isAdd: false, // 是新增还是编辑
       selectedRows: [],
       primaryKey: null,
-      showEdit: false,
+      showEdit: false, // 是否显示编辑区域
       pageData: {
         list: [],
         pagination: {},
@@ -43,7 +67,7 @@ class ListWithAddEditTemplate extends React.Component {
   // 渲染值
   componentDidMount() {
     const { objId } = this.props;
-    getHead({ dataObjId: objId }, datas => {
+    fetchTableHeader(objId).then(datas => {
       if (!datas) return;
       this.setState({ headerList: datas });
       let i = 0;
@@ -142,7 +166,7 @@ class ListWithAddEditTemplate extends React.Component {
     const { primaryKey } = this.state;
     const Keys = {};
     Keys[primaryKey] = record[primaryKey];
-    deleteItem({ keys: JSON.stringify(Keys), objId }, () => {
+    deleteTableItem(objId, primaryKey, record[primaryKey]).then(res => {
       this.getPage();
     });
   };
@@ -154,14 +178,11 @@ class ListWithAddEditTemplate extends React.Component {
   getPage = () => {
     const { objId, filters = {} } = this.props;
     const { formValues, pageData: pagination } = this.state;
-    const params = {
-      query: JSON.stringify({ ...formValues, ...filters }),
-      pageNo: pagination.current ? pagination.current : 1,
-      pageSize: pagination.pageSize ? pagination.pageSize : 10,
-      dataObjId: objId,
-    };
+    const query = { ...formValues, ...filters };
+    const pageNo = pagination.current ? pagination.current : 1;
+    const pageSize = pagination.pageSize ? pagination.pageSize : 10;
 
-    fetchData(params, res => {
+    fetchTableData({ dataObjId: objId, query, pageSize, pageNo }).then(res => {
       if (!res.rows) {
         console.log('分页接口rows返回null报错');
       }
@@ -196,19 +217,24 @@ class ListWithAddEditTemplate extends React.Component {
     this.getPage(params);
   };
 
-  handleAdd = (fields, isAdd) => {
+  handleAdd = () => {
     const {
       objId,
       form: { validateFields },
     } = this.props;
+    const { isAdd } = this.state;
     validateFields((err, values) => {
       if (err) return;
-      add({ params: values, objId, isAdd, isBase: true }, () => {
-        message.success('操作成功');
-        this.setState({
-          modalVisible: false,
-        });
-        this.getPage();
+      addOrEditTableItem({ objId, data: values, isAdd }).then(res => {
+        if (res === true) {
+          message.success('操作成功');
+          this.setState({
+            modalVisible: false,
+          });
+          this.getPage();
+        } else {
+          message.error('操作失败');
+        }
       });
     });
   };
@@ -227,14 +253,11 @@ class ListWithAddEditTemplate extends React.Component {
   };
 
   batchDelete = e => {
-    const { selectedRows, formItem, objId } = this.state;
+    const { selectedRows, objId, primaryKey } = this.state;
 
     if (!selectedRows) return;
-    const Keys = formItem.filter(i => i.isPrimaryKey).reduce((acc, i) => {
-      return { ...acc, [i.name]: selectedRows.map(row => row[i.name]).join(',') };
-    });
 
-    deleteItem({ keys: JSON.stringify(Keys), objId }, () => {
+    deleteTableItem(objId, primaryKey, selectedRows.map(row => row[primaryKey])).then(res => {
       this.setState({
         selectedRows: [],
       });
@@ -271,13 +294,14 @@ class ListWithAddEditTemplate extends React.Component {
     } = this.state;
     const { hasExport, form, hasImport, templateCode } = this.props;
 
-    const parentMethods = {
+    const addOrEditModalProps = {
       handleAdd: this.handleAdd,
       handleModalVisible: this.handleModalVisible,
       content: formData,
       form,
       isAdd,
       templateCode,
+      modalVisible,
     };
     return (
       <>
@@ -322,7 +346,7 @@ class ListWithAddEditTemplate extends React.Component {
             </Shell>
           </Fragment>
         )}
-        <AddOrEditModal {...parentMethods} modalVisible={modalVisible} />
+        <AddOrEditModal {...addOrEditModalProps} />
       </>
     );
   }

FormInsertDiy/ListWithAddEditTemplate/services.js

-import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
-
-export const getHead = (payload, callback) => {
-  uaaRequest('/DataColumnApi/getHeaderList', payload).then(res => {
-    if (!res) return;
-    if (callback) callback(res);
-  });
-};
-
-export const fetchData = (payload, callback) => {
-  uaaRequest('/DataObjApi/getFormDataPage', payload).then(res => {
-    if (!res) return;
-    if (callback) callback(res);
-  });
-};
-
-export const deleteItem = (payload, callback) => {
-  uaaRequest('/DataObjApi/deleteFormData', payload).then(res => {
-    if (callback) callback(res);
-  });
-};
-
-export const getDetail = (payload, callback) => {
-  uaaRequest('/DataObjApi/getFormData', payload).then(res => {
-    if (callback) callback(res);
-  });
-};
-
-export const add = (payload, callback) => {
-  uaaRequest('/DataObjApi/addFormData', {
-    data: JSON.stringify(payload.params),
-    isAdd: payload.isAdd,
-    objId: payload.objId,
-    isBase: payload.isBase,
-  }).then(res => {
-    if (callback) callback(res);
-  });
-};

FormInsertDiy/SingleDataPageTemplate/index.js

 import React from 'react';
 import { Form, Button } from 'antd';
 import Shell from '@/baseComponent/Shell';
-import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
 import ZdyTable from '@/webPublic/one_stop_public/Table';
 import { ModalInfo } from '@/baseComponent/Modal';
+import { fetchTableItem, fetchTemplateByCode, addOrEditTableItem } from '@/webPublic/Services';
 
 // 单一数据页面模板，页面只是显示和操作一条数据
 // 1. 页面显示通过模板id渲染。
@@ -28,17 +28,16 @@ export default class ConfigPageTemplate extends React.Component {
 
   componentDidMount() {
     const { templateCode, tableId, dataTypeKey, dataTypeValue } = this.props;
-    uaaRequest('/UnifiedServicePatternApi/getDetail', { code: templateCode }).then(res => {
+    fetchTemplateByCode(templateCode).then(res => {
       if (res) {
         this.setState({ formTemplate: res });
       }
     });
 
-    uaaRequest('/DataObjApi/getFormData', {
+    fetchTableItem({
       dataObjId: tableId,
       key: dataTypeKey,
       value: dataTypeValue,
-      isBase: true,
     }).then(res => {
       this.setState({ formValues: res || {}, isAdd: !!(!res || res.errMsg) });
     });
@@ -50,12 +49,7 @@ export default class ConfigPageTemplate extends React.Component {
     const { isAdd } = this.state;
     validateFields((err, values) => {
       if (err) return;
-      uaaRequest('/DataObjApi/addFormData', {
-        objId: tableId,
-        isAdd,
-        isBase: true,
-        data: JSON.stringify(values),
-      }).then(res => {
+      addOrEditTableItem({objId:tableId, isAdd, data: values }).then(res => {
         if (res) {
           ModalInfo('保存成功！');
         }
@@ -71,7 +65,6 @@ export default class ConfigPageTemplate extends React.Component {
       ClonedChildren = React.cloneElement(React.Children.only(children), {
         form,
         isAdd,
-        uaaRequest,
         url: '/DataObjApi/addFormData',
       });
     }
@@ -82,7 +75,7 @@ export default class ConfigPageTemplate extends React.Component {
           <Shell styleShell={{ marginTop: 0 }}>
             <ZdyTable
               get="web"
-              isCg='yes'
+              isCg="yes"
               postData={{
                 content: JSON.stringify(formValues),
                 unifiedServicePatternModel: formTemplate,

Services.js

-
 import { uaaRequest } from './one_stop_public/utils/request';
 
+// 根据模板code查询模板数据
+// 查询表格中某条数据
+// 查询元数据表格分页数据
+// 根据元数据id查询表头
+// 新增或者编辑表格某条数据
+// 删除元数据中的数据
+
 /**
  * 根据模板code查询模板数据
  * @param {String} code 模板的code
  */
-export const fetchFormTemplateDataByCode = code => uaaRequest('/UnifiedServicePatternApi/getDetail', { code });
+export const fetchTemplateByCode = code =>
+  uaaRequest('/UnifiedServicePatternApi/getDetail', { code });
 
 /**
- * 查询元数据中的某条数据
- * @param {Object} params 查询参数
- * dataObjId，元数据id
- * key,
- * value,
- * isBase
+ * 查询表格中某条数据
+ * @param {String} dataObjId 元数据id
+ * @param{String} key 元数据表格中键
+ * @param{String} value 元数据表格中键对应的值
+ * @param{Bool} isBase key是否base加密过，默认传true
  */
-export const fetTableDataItem = params =>  uaaRequest('/DataObjApi/getFormData', params);
+export const fetchTableItem = ({ dataObjId, key, value, isBase = true }) => {
+  return uaaRequest('/DataObjApi/getFormData', { dataObjId, key, value, isBase });
+};
 
+/**
+ * 查询元数据表格分页数据
+ * @param {String} dataObjId 元数据表格id
+ * @param {Object} query 过滤条件，传对象
+ * @param {Number} pageSize
+ * @param {Number} pageNo
+ */
+export const fetchTableData = ({ dataObjId, query, pageSize, pageNo }) => {
+  return uaaRequest('/DataObjApi/getFormDataPage', {
+    dataObjId,
+    query: JSON.stringify(query),
+    pageNo,
+    pageSize,
+  });
+};
 
+/**
+ * 根据元数据id查询表头
+ * @param {String} objId 元数据id
+ */
+export const fetchTableHeader = objId =>
+  uaaRequest('/DataColumnApi/getHeaderList', { dataObjId: objId });
 
+/**
+ * 删除元数据中的数据
+ * @param {String} objId 元数据表格Id
+ * @param {primaryKey} primaryKey 主键
+ * @param {String} value 主键对应的值，删除多条数据时传数组
+ */
+export const deleteTableItem = (objId, primaryKey, value) => {
+  const copyValue = Array.isArray[value] ? value.join(',') : value;
+  return uaaRequest('/DataObjApi/deleteFormData', {
+    objId,
+    keys: JSON.stringify({ [primaryKey]: copyValue }),
+  });
+};
+
+/**
+ * 新增或者编辑表格某条数据
+ * @param {String} objId 元数据表格id
+ * @param {Object} data 传对象，新增或者修改的数据，
+ * @param {Bool} isAdd true是新增，false是编辑
+ * @param {Bool} isBase 数据是否编码过，从模板中出来的数据是编码过，默认true
+ */
+export const addOrEditTableItem = ({ objId, data, isAdd, isBase = true }) => {
+  return uaaRequest('/DataObjApi/addFormData', {
+    data: JSON.stringify(data),
+    isAdd,
+    objId,
+    isBase,
+  });
+};