添加加工详情

src/constants/index.ts

@@ -44,8 +44,8 @@ export enum LAYOUT_TYPE {
 }
 
 // 本地环境跳过权限校验
-// export const isDev = process.env.NODE_ENV === "development"
-export const isDev = false
+export const isDev = process.env.NODE_ENV === "development"
+// export const isDev = false
 
 export const Environment_Status = {
   0: "所有",

src/pages/handling/assign/add/index.tsx

 import React, { useState } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { SaveOutlined } from '@ant-design/icons';
-import { Button, Card, Input } from 'antd';
+import { Button, Card, Input, Modal } from 'antd';
 import { history } from 'umi';
 import ReutrnEle from '@/components/ReturnEle';
 import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
 import NiceForm from '@/components/NiceForm';
 import addSchema from '../../schema/addSchema';
 import { LinkOutlined, PlusOutlined } from '@ant-design/icons';
+import ModalContainer from '../../components/ModalContainer';
+import EnterPrise from '../../components/EnterPrise';
 /*
  * @Author: Bill
  * @Date: 2020-10-12 11:36:38
  * @Description: 新增生产通知单
  */
 
+const CustomModal = ({visible, cancel}) => {
+  return (
+    <Modal visible={visible} onCancel={cancel} >
+        Hello World
+    </Modal>
+  )
+}
 const formActions = createFormActions();
 
 const Add: React.FC<{}> = () => {
   const [submitLoading, setSubmitLoading] = useState<boolean>(false);
   
-  const connectProduct = <div className='connectBtn'><LinkOutlined style={{marginRight: 4}}/>选择</div>
+  // 选择加工企业 modal 层
+  const connectProduct = (
+    <div>
+      <ModalContainer>
+          {
+            ({visible, show, cancel}) => (
+              <>
+                <EnterPrise visible={visible} cancel={cancel} ></EnterPrise>
+                <div onClick={show}>
+                  <LinkOutlined style={{marginRight: 4}}/>
+                  选择
+                </div>
+              </>
+            )
+          }
+          
+      </ModalContainer>
+    </div>
+  )
   const tableAddButton = (
     <Button 
       style={{marginBottom: 16}} 
@@ -63,6 +90,8 @@ const Add: React.FC<{}> = () => {
           //   });
           // }}
         />
+
+        
       </Card>
     </PageHeaderWrapper>
   )

src/pages/handling/assign/detail/index.tsx

@@ -7,6 +7,7 @@ import Circulation from '../../components/Circulation';
 import WrapTable from '../../components/WrapTable';
 import OtherRequirement from '../../components/OtherRequirement';
 import Appendix from '../../components/Appendix';
+import ProcessDetail from '../../components/ProcessDetail';
 
 const { TabPane } = Tabs;
 const Detail: React.FC<{}> = () => {
@@ -56,8 +57,8 @@ const Detail: React.FC<{}> = () => {
         </Card> 
       </div>
 
-      <div style={{marginTop: '20px'}}style={{marginTop: '20px'}}>
-        <Card>
+      <div style={{marginTop: '20px'}} >
+        <Card bodyStyle={{padding: '10px 24px 24px 24px'}}>
           <Tabs>
             <TabPane tab="收发货统计" key="1">
               <WrapTable />
@@ -69,15 +70,27 @@ const Detail: React.FC<{}> = () => {
         </Card> 
       </div>
       <div style={{marginTop: '20px'}}>
-        <Row gutter={4}>
-          <Col span={18}>
+        <Row justify="space-between">
+          <Col flex={4}>
             <OtherRequirement />
           </Col>
-          <Col span={6}>
+          <Col flex={2} style={{marginLeft: '20px'}}>
             <Appendix />
           </Col>
         </Row>
       </div>
+      <div style={{marginTop: '20px'}} >
+        <Card bodyStyle={{padding: '10px 24px 24px 24px'}}>
+          <Tabs>
+            <TabPane tab="外部流转记录" key="1">
+              <WrapTable />
+            </TabPane>
+            <TabPane tab="内部流转记录" key="2">
+              <WrapTable />
+            </TabPane>
+          </Tabs>
+        </Card> 
+      </div>
     </PageHeaderWrapper>
   )
 }

src/pages/handling/components/Appendix/index.tsx

 /*
  * @Author: your name
  * @Date: 2020-10-12 18:27:56
- * @LastEditTime: 2020-10-12 18:42:00
+ * @LastEditTime: 2020-10-13 10:01:23
  * @Description: 附件
  */
 
@@ -11,7 +11,6 @@
  const styles = {
    display: 'flex',
    flexDirection: 'row',
-  //  justifyContent: 'center',
    alignItem: 'center',
    color: '#00B37A',
    backgroundColor: '#F4F5F7',

src/pages/handling/components/EnterPrise/index.tsx

+/**
+ * 选择加工企业 Modal 组件
+ */
+
+import React, { useRef, useEffect } from 'react';
+import { Card, Space, Button, Select } from 'antd';
+import { PublicApi } from '@/services/api';
+import EyePreview from '@/components/EyePreview';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import { createFormActions, FormEffectHooks } from '@formily/antd';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import ModalTable from '@/components/ModalTable'
+import SearchSelect from '@/components/NiceForm/components/SearchSelect'
+import Search from '@/components/NiceForm/components/Search'
+import Submit from '@/components/NiceForm/components/Submit'
+
+const formActions = createFormActions();
+
+const columns = [
+  {
+    title: '会员ID',
+    dataIndex: 'id'
+  },
+  {
+    title: '会员名称',
+    dataIndex: 'name'
+  },
+  {
+    title: '会员类型',
+    dataIndex: 'type'
+  },
+  {
+    title: '会员角色',
+    dataIndex: 'role'
+  },
+  {
+    title: '会员等级',
+    dataIndex: 'level'
+  }
+] 
+
+const schema = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      'x-component': 'ModalSearch',
+      'x-component-props': {
+        placeholder: '请输入会员名字',
+        align: 'flex-left',
+        style: {
+          width: '180px'
+        }
+      },
+    },
+    [FORM_FILTER_PATH]: {
+      type: 'object',
+      'x-component': 'flex-layout',
+      'x-component-props': {
+        rowStyle: {
+          flexWrap: 'nowrap',
+          style: {
+            marginRight: 0
+          }
+        },
+        colStyle: {
+          marginTop: 20,
+        },
+      },
+      properties: {
+        roleId: {
+          type: 'string',
+          "x-component": 'Select',
+          "x-component-props": {
+            options: [],
+            style: {width: '160px'},
+            placeholder: '请选择会员角色'
+          }
+        },
+        submit: {
+          "x-component": 'Submit',
+          "x-mega-props": {
+            span: 1
+          },
+          "x-component-props": {
+            children: '查询'
+          }
+        }
+      }
+    }
+  }
+}
+
+const EnterPrisesModal = ({visible, cancel}) => {
+  const ref = useRef<any>({})
+  const fetchData = async (params: any) => {
+    let res = await PublicApi.getMemberAbilityInfoPage(params);
+    return res.data;
+  };
+
+  const handleOkAddMember = () => {
+
+  }
+ 
+  return (
+    <ModalTable
+      modalTitle='选择会员'
+      confirm={handleOkAddMember}
+      cancel={cancel}
+      visible={visible}
+      columns={columns}
+      // rowSelection={memberRowSelection}
+      fetchTableData={params => fetchData(params)}
+      formilyProps={
+        {
+          ctx: { 
+            schema: schema,
+            components: { ModalSearch: Search, SearchSelect, Submit, Select } ,
+            effects: ($, actions) => {
+              useStateFilterSearchLinkageEffect(
+                $,
+                actions,
+                'name',
+                FORM_FILTER_PATH,
+              );
+            }
+          }
+        }
+      }
+      tableProps={{
+        rowKey: 'memberId'
+      }}
+    />
+  )
+}
+
+export default EnterPrisesModal
\ No newline at end of file

src/pages/handling/components/ModalContainer/index.tsx

+import React, { Component } from 'react';
+
+class ModalContainer extends Component {
+  state = {
+    visible: false
+  }
+
+  handleCancel = () => {
+    this.setState({
+      visible: false
+    })
+  }
+
+  show = () => {
+    this.setState({
+      visible: true
+    })
+  }
+
+  render() {
+    const { visible } = this.state;
+    const { children } = this.props;
+    return (
+      children({
+        visible: visible,
+        show: this.show,
+        cancel: this.handleCancel
+      })
+    )
+  }
+}
+
+export default ModalContainer;
\ No newline at end of file

src/pages/handling/components/OtherRequirement/index.tsx

@@ -5,21 +5,21 @@ const OtherRequirement = () => {
   return (
     <Card title="其他要求">
       <Row>
-        <Col span={4}>交付说明</Col>
+        <Col span={3}>交付说明</Col>
         <Col span={8}>东莞市石龙镇西葫芦53号交付说明</Col>
-        <Col span={4}>物流说明</Col>
+        <Col span={3}>物流说明</Col>
         <Col span={8}>东莞市石龙镇西葫芦53号交付说明</Col>
       </Row>
       <Row style={{margin: '20px 0'}}>
-        <Col span={4}>付款说明</Col>
+        <Col span={3}>付款说明</Col>
         <Col span={8}>首付 30%， 收货后70%</Col>
-        <Col span={4}>包装说明</Col>
+        <Col span={3}>包装说明</Col>
         <Col span={8}>纸箱</Col>
       </Row>
       <Row>
-        <Col span={4}>税收说明</Col>
+        <Col span={3}>税收说明</Col>
         <Col span={8}>含税</Col>
-        <Col span={4}>其他说明</Col>
+        <Col span={3}>其他说明</Col>
         <Col span={8}>无</Col>
       </Row>
     </Card>

src/pages/handling/components/ProcessDetail/content.less

+.container {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+
+  .menu {
+    flex-basis: 159px;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    height: 100%;
+
+    .menuItem {
+      font-size: 12px;
+      font-weight: 500;
+      color: #303133;
+      line-height: 12px;
+      padding: 10px 24px;
+      margin-bottom: 15px;
+      cursor: pointer;
+    }
+
+    .active {
+      border-left: 2px solid #00B37A;
+    }
+  }
+
+  .body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid #EEF0F3;
+    overflow: scroll;
+
+    .common {
+      padding: 24px 24px 0 24px;
+      .header {
+        border-left: 2px solid #00B37A;
+        color: #606266;
+        padding: 0 10px;
+        margin-bottom: 24px;
+        font-size: 14px;
+      }
+
+      .info {
+        .infoRow {
+          margin-bottom: 24px;
+
+          .label {
+            color: #909399;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/handling/components/ProcessDetail/content.tsx

+import React, { useState, useRef } from 'react';
+import styles from './content.less';
+import { Row, Col } from 'antd';
+import classnames from 'classnames';
+
+const menuList = ["基本信息", "产地", "外观尺寸", "工艺", "特殊说明/其他", "附件", "加工要求"];
+const HEIGHT_MAP = {
+  '基本信息': 0,
+  '产地': 238,
+  '外观尺寸': 476,
+  '工艺': 238 * 3,
+  '特殊说明/其他': 238 * 4,
+  '附件': 238 * 4 + 60,
+  '加工要求': 238 * 4 + 60
+}
+
+const Content = () => {
+  const [active, setActive] = useState<string>("基本信息");
+  const ref = useRef(null);
+
+  const getMenuItemCs = (name: string) => {
+    return classnames({
+      [styles.menuItem]: true,
+      [styles.active]: name === active
+    })
+  }
+
+  const activeAndScroll = (item) => {
+    const scrollHeight = HEIGHT_MAP[item];
+    console.log(scrollHeight);
+    setActive(item);
+    // window.scrollTo = scrollHeight; 
+    console.log(ref.current);
+    ref.current.scrollTop = scrollHeight;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.menu}>
+        {
+          menuList.map((item:string) => {
+            return (
+              <div 
+                key={item} className={getMenuItemCs(item)} 
+                onClick={() => activeAndScroll(item)
+              }>{item}</div>
+            )
+          })
+        }
+      </div>
+      
+      <div className={styles.body} ref={ref}>
+        {
+          menuList.map((item) => {
+            return (
+              <div className={styles.common} key={item}>
+                <div className={styles.header}>{item}</div>
+                <div className={styles.info}>
+                  <Row className={styles.infoRow}>
+                    <Col className={styles.label} span={4}>商品ID</Col>
+                    <Col span={12}>11101</Col>
+                  </Row>
+                  <Row className={styles.infoRow}>
+                    <Col className={styles.label} span={4}>商品名称</Col>
+                    <Col span={12}>进口头层牛皮荔枝纹</Col>
+                  </Row>
+                  <Row className={styles.infoRow}>
+                    <Col className={styles.label} span={4}>商品品类</Col>
+                    <Col span={12}> 牛皮</Col>
+                  </Row>
+                  <Row className={styles.infoRow}>
+                    <Col className={styles.label} span={4}>商品品牌</Col>
+                    <Col span={12}>PELLE</Col>
+                  </Row>
+                </div>
+              </div>
+            )
+          })
+        }
+        
+      </div>
+    </div>
+  )
+}
+
+export default Content;
\ No newline at end of file

src/pages/handling/components/ProcessDetail/index.tsx

+import React, { useState } from 'react';
+import { Button, Drawer } from 'antd';
+import Content from './content';
+
+const ProcessDetail = () => {
+  const [visible, setVisible] = useState(false);
+
+  const onClose = () => {
+    setVisible(false)
+  }
+
+  const onOpen = () => {
+    setVisible(true)
+  }
+
+  return (
+    <>
+      <Button type="primary" onClick={onOpen}>
+          查看加工详情
+      </Button>
+      <Drawer
+          title="查看加工明细"
+          width={720}
+          onClose={onClose}
+          visible={visible}
+          bodyStyle={{ padding: '0'}}
+          footer={false}
+        >
+          <Content />
+        </Drawer>
+    </>
+  )
+}
+
+export default ProcessDetail;
\ No newline at end of file