开发中

config/routes/tranactionRoute.ts

 /*
  * @Author: LeeJiancong
  * @Date: 2020-07-31 19:56:22
- * @LastEditors: LeeJiancong
+ * @LastEditors: XieZhiXiong
  * @Copyright: 1549414730@qq.com
- * @LastEditTime: 2020-09-15 17:18:01
+ * @LastEditTime: 2020-09-16 15:37:06
  */
 
 const TranactionRoute = {
@@ -48,7 +48,7 @@ const TranactionRoute = {
           path: '/memberCenter/tranactionAbility/stockSellStorage/addBills',
           name: 'addBills',
           hideInMenu: true,
-          component: '@/pages/transaction/stockSellStorage/bills/addBills',
+          component: '@/pages/transaction/stockSellStorage/bills/addBills/index',
         },
         {
           path: '/memberCenter/tranactionAbility/stockSellStorage/inventory',

src/components/NiceForm/components/CustomRelevance.tsx

-import React, { useState, useEffect, useRef } from 'react';
-import { Row, Col, Input, Button, Modal } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Input, Button } from 'antd';
 import { LinkOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
-import cx from 'classnames';
-import { StandardTable } from 'god';
-import NiceForm from '@/components/NiceForm';
-import { createFormActions, FormEffectHooks } from '@formily/antd';
-import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
-import { FORM_FILTER_PATH } from '@/formSchema/const';
-
-const formActions = createFormActions();
+import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
+import ModalTable from '@/components/ModalTable';
 
 const RowStyleLayout = styled(props => <div {...props} />)`
   width: 100%;
+
   .relevance {
     border-color: #6b778c;
     background-color: #6b778c;
+    border-radius: 0;
+  }
+
+  .ant-input-group-addon {
+    padding: 0;
   }
 `;
 
-const data = [
-  {
-    key: '1',
-    role: '采购商',
-    businessType: '采购',
-    roleType: '服务消费',
-    memberType: '企业会员',
-  },
-  {
-    key: '2',
-    role: '供应商',
-    businessType: '商品供应',
-    roleType: '服务提供',
-    memberType: '企业会员',
+const Relevance = props => {
+  const { 
+    editable, 
+    value = [], 
+  } = props;
+
+  const {
+    modalProps = {
+      title: '标题', 
+      width: 960,
     }, 
-];
+    selectionType = 'radio', 
+    columns, 
+    formilyProps, 
+    tableProps = {}, 
+    fetchTableData, 
+    title = '选择',
+  } = props.props['x-component-props'];
 
-// 模拟请求
-const fetchData = (params: any) => {
-  return new Promise((resolve, reject) => {
-    const queryResult = data.find(v => v.key === params.keywords);
-    setTimeout(() => {
-      resolve({
-        code: 200,
-        message: '',
-        data: queryResult ? [queryResult] : data,
-      });
-    }, 1000);
-  });
-};
+  const tableRowKey = tableProps.rowKey || 'id';
+  const tableRowLableKey = tableProps.lableKey || '';         // Input展示用的 key val
 
-const Relevance = props => {
-  const ref = useRef<any>({});
-  const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]);
   const [visible, setVisible] = useState(false);
-  const propsParams = props.props['x-component-props'];
+  const [rowSelection, rowCtl] = useRowSelectionTable({ type: selectionType });
 
   useEffect(() => {
-    console.log('props', propsParams);
-  }, []);
+    // Table 只能缓存 keys
+    const rowKeys = value.map(item => item[tableRowKey]);
+    rowCtl.setSelectedRowKeys(rowKeys); 
+  }, [props.value]);
 
-  const handlePreview = () => {
-    setVisible(!visible);
-  };
+  const handleConfirm = () => {
+    const rows = rowCtl.selectRow;
+    const keys = rows.map(item => item[tableRowKey]);
 
-  const rowSelection = {
-    selectedRowKeys: selectedRowKeys,
-    onChange: (selectedRowKeys: any, selectedRows: any) => {},
-  };
-
-  const handleSubmit = type => {
-    if (type === 'confirm') {
-    } else {
+    if (props.mutators) {
+      props.mutators.change(rows);
+      setVisible(false);
+      return;
     }
+    rowCtl.setSelectedRowKeys(keys);
     setVisible(false);
   };
 
   return (
     <RowStyleLayout>
-      <Row>
-        <Col span={16}>
-          <Input disabled></Input>
-        </Col>
-        <Col span={8}>
+      <Input 
+        value={
+          tableRowLableKey ? 
+            value.map(item => item[tableRowLableKey]).join(',') :
+            '请指明 lableKey 值'
+        }
+        addonAfter={(
+          <>
+            {editable && (
               <Button
                 type="primary"
                 className="relevance"
                 icon={<LinkOutlined />}
-            onClick={handlePreview}
+                onClick={() => setVisible(true)}
+                block
               >
-            关联
+                {title}
               </Button>
-        </Col>
-      </Row>
+            )}
+          </>
+        )}
+        disabled
+      />
 
-      <Modal
-        title={propsParams.modalTitle || ''}
+      <ModalTable 
+        confirm={handleConfirm}
+        cancel={() => setVisible(false)}
         visible={visible}
-        width={propsParams.modalWidth || ''}
-        destroyOnClose
-        onOk={() => handleSubmit('confirm')}
-        onCancel={() => handleSubmit('cancel')}
-      >
-        <StandardTable
-          columns={propsParams.modalColumns}
-          currentRef={ref}
-          tableProps={{ rowKey: 'key' }}
+        width={960}
+        {...modalProps}
+        modalTitle={modalProps.title}
         rowSelection={rowSelection}
-          fetchTableData={(params: any) => fetchData(params)}
-          controlRender={
-            <NiceForm
-              actions={formActions}
-              onSubmit={values => ref.current.reload(values)}
-              effects={($, actions) => {
-                useStateFilterSearchLinkageEffect(
-                  $,
-                  actions,
-                  'search',
-                  FORM_FILTER_PATH,
-                );
-              }}
-              schema={propsParams.modalSchema}
-            />
-          }
+        columns={columns}
+        fetchTableData={fetchTableData}
+        formilyProps={formilyProps}
+        tableProps={tableProps}
       />
-      </Modal>
     </RowStyleLayout>
   );
 };

src/constants/index.ts

@@ -294,6 +294,13 @@ export const DOC_DIRECTION = {
   [DOC_DIRECTION_OUTGOING]: '出库 - ', 
 };
 
+// 对应单据
+export const DEPENDENT_DOC_ORDER = 1;                // 订单
+export const DEPENDENT_DOC_EXCHANGE = 2;             // 换货
+export const DEPENDENT_DOC_RETURN = 3;               // 退货
+export const DEPENDENT_DOC_PRODUCTION = 4;           // 生产
+export const DEPENDENT_DOC_INTERNAL = 5;             // 内部
+
 // 订单类型
 export const ORDER_TYPE2_INQUIRY = 1;                // 询价采购
 export const ORDER_TYPE2_DEMAND = 2;                 // 需求采购

src/pages/transaction/stockSellStorage/bills/addBills/effects/index.ts

+import { useBusinessEffects } from './useBusinessEffects';
+import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
+import { PublicApi } from '@/services/api';
+
+// 获取单据类型
+const fetchInvoicesType = (): Promise<any[]> => {
+  return new Promise((resolve, reject) => {
+    PublicApi.getWarehouseInvoicesTypeAll().then(res => {
+      if (res.code === 1000) {
+        resolve(res.data);
+      }
+      reject();
+    }).catch(() => {
+      reject();
+    });
+  }); 
+};
+
+// 获取仓库
+const fetchInventory = (): Promise<any[]> => {
+  return new Promise((resolve, reject) => {
+    PublicApi.getWarehouseWarehouseAll().then(res => {
+      if (res.code === 1000) {
+        resolve(res.data);
+      }
+      reject();
+    }).catch(() => {
+      reject();
+    });
+  }); 
+};
+
+export const createEffects = (context, actions) => {
+  useBusinessEffects(context, actions);
+
+  useAsyncSelect('invoicesTypeId', fetchInvoicesType, ['name', 'id']); 
+  useAsyncSelect('inventoryId', fetchInventory, ['name', 'id']); 
+};
\ No newline at end of file

src/pages/transaction/stockSellStorage/bills/addBills/index.tsx

+import React, { useState, useEffect, useRef } from 'react';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { history } from 'umi';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { SaveOutlined, PlusOutlined } from '@ant-design/icons';
+import { createFormActions, FormEffectHooks } from '@formily/antd';
+import { Button, Card } from 'antd';
+import { PublicApi } from '@/services/api';
+import ReutrnEle from '@/components/ReturnEle';
+import NiceForm from '@/components/NiceForm';
+import { getBillsDetailSchema, orderBillSchema } from './schema';
+import { createEffects } from './effects';
+
+const addSchemaAction = createFormActions();
+
+const { 
+  onFieldValueChange$, 
+  onFieldInputChange$, 
+} = FormEffectHooks;
+
+const AddBills: React.FC<{}> = (props: any) => {
+  const { pageStatus, preview, id } = usePageStatus();
+  const [relevance, setRelevance] = useState(1);
+
+  const [modalColumns, setModalColumns] = useState([]);
+
+  const tableColumns = [
+    { dataIndex: 'id', title: 'ID' },
+    {
+      dataIndex: 'no',
+      title: '货号',
+      render: (text, record) => <span>{text}</span>,
+    },
+    { dataIndex: 'pname', title: '货品名称' },
+    { dataIndex: 'size', title: '规格/型号' },
+    { dataIndex: 'type', title: '品类' },
+    { dataIndex: 'brand', title: '品牌' },
+    { dataIndex: 'unit', title: '单位' },
+    { dataIndex: 'name', title: '商品名称' },
+    { dataIndex: 'univalence', title: '单价' },
+    { dataIndex: 'numberr', title: '单据数量' },
+    { dataIndex: 'price', title: '金额' },
+    {
+      dataIndex: 'ctl',
+      title: '操作',
+      render: (text, record) => (
+        <Button type="link" onClick={() => handleDeleteTable(record.id)}>
+          删除
+        </Button>
+      ),
+    },
+  ];
+
+  // 弹出单据明细
+  const handleAddMemberBtn = () => {};
+
+  // 删除选中单据明细
+  const handleDeleteTable = id => {};
+
+  const tableAddButton = (
+    <Button
+      style={{ marginBottom: 16 }}
+      block
+      icon={<PlusOutlined />}
+      onClick={handleAddMemberBtn}
+      type="dashed"
+    >
+      添加单据明细
+    </Button>
+  );
+
+  useEffect(() => {
+
+  }, []);
+
+  const handleSubmit = value => {
+    if (pageStatus === 0)
+      return PublicApi.postWarehouseInvoicesAdd({ ...value }).then(res => {
+        if (res.code === 1000) return history.goBack();
+      });
+    else
+      return PublicApi.postWarehouseInvoicesUpdata({
+        id: usePageStatus().id,
+        ...value,
+      }).then(res => {
+        if (res.code === 1000) return history.goBack();
+      });
+  };
+
+  return (
+    <PageHeaderWrapper
+      onBack={() => history.goBack()}
+      backIcon={<ReutrnEle description="返回" />}
+      title={
+        pageStatus === 0
+          ? '新建单据'
+          : pageStatus === 1
+          ? '编辑单据'
+          : '查看单据'
+      }
+      extra={
+        preview != '1'
+          ? [
+              <Button
+                key="1"
+                type="primary"
+                icon={<SaveOutlined />}
+                onClick={() => addSchemaAction.submit()}
+              >
+                保存
+              </Button>,
+            ]
+          : []
+      }
+    >
+      <Card>
+        <NiceForm
+          expressionScope={{
+            tableColumns,
+            tableAddButton,
+          }}
+          effects={($, actions) => createEffects($, actions)}
+          onSubmit={handleSubmit}
+          actions={addSchemaAction}
+          schema={getBillsDetailSchema({
+            relevance,
+            modalColumns,
+          })}
+        />
+      </Card>
+    </PageHeaderWrapper>
+  );
+};
+
+export default AddBills;

src/utils/formEffectUtils.ts

@@ -6,7 +6,7 @@ export const useLinkageUtils = () => {
     setFieldState(path, state => {
       const componentProps = state.props['x-component-props'] || {}
       // 对象浅合并
-      if (key === 'props["x-component-props"]') {
+      if (key === 'props.x-component-props') {
         value = Object.assign({}, componentProps, value)
       }
       FormPath.setIn(state, key, value !== undefined ? value : defaultValue)
@@ -19,6 +19,6 @@ export const useLinkageUtils = () => {
     loading: linkage('loading', true),
     loaded: linkage('loading', false),
     value: linkage('value'),
-    componentProps: linkage('props["x-component-props"]', {})
+    componentProps: linkage('props.x-component-props', {})
   }
 }