修改需求发布新需求

config/routes/tranactionRoute/demandPosts.ts

@@ -33,7 +33,14 @@ export default [
         name: 'addEnquiry',
         component: '@/pages/transaction/enquirySubmit/toAddSubmit/detail', 
         hideInMenu: true, 
-      }, 
+      },
+      // 待新增需求单-新增
+      {
+        path: '/memberCenter/tranactionAbility/enquirySubmit/addDemandOrder/add',
+        name: 'addEnquiry',
+        component: '@/pages/transaction/enquirySubmit/addDemandOrder', 
+        hideInMenu: true, 
+      },
       // 待新增需求单-编辑
       {
         path: '/memberCenter/tranactionAbility/enquirySubmit/toAddSubmitList/edit',

src/pages/transaction/enquirySubmit/addDemandOrder/components/addGoods.tsx

+import React from 'react';
+import { Form, Radio, Button, Table } from 'antd';
+import { ColumnType } from 'antd/lib/table/interface';
+
+const layout: any = {
+  colon: false,
+  labelCol: { style: { width: '174px' } },
+  wrapperCol: { span: 9 },
+  labelAlign: "left"
+};
+const AddGoods: React.FC<{}> = () => {
+
+  return (
+    <Form
+      {...layout}
+    >
+      <Form.Item label='添加方式' required>
+        <Radio.Group>
+          <Radio value={1}>通过平台属性添加</Radio>
+          <Radio value={2}>选择货品添加</Radio>
+          <Radio value={3}>导入货品生成</Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item noStyle>
+        <Button type='dashed' block>添加商品</Button>
+      </Form.Item>
+    </Form>
+  )
+}
+export default AddGoods;
\ No newline at end of file

src/pages/transaction/enquirySubmit/addDemandOrder/components/basicInfo.tsx

+import React, { useState, useEffect } from 'react';
+import { Form, Input, Tooltip, Button, Select, Row, Col, message } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { PublicApi } from '@/services/api';
+import style from './index.less';
+
+const layout: any = {
+  colon: false,
+  labelCol: { style: { width: '174px' } },
+  wrapperCol: { span: 9 },
+  labelAlign: "left"
+};
+
+const { Option } = Select;
+const BasicInfo: React.FC<{}> = () => {
+  const [form] = Form.useForm();
+  const [province, setprovince] = useState<any>([]);// 省列表
+  const [city, setcity] = useState<any>([]);// 市列表 
+  const [requisitionFormAddress, setrequisitionFormAddress] = useState<any>([{
+    provinceCode: '',
+    province: '',
+    cityCode: '',
+    city: ''
+  }]);
+  const [code, setcode] = useState<any>([]);
+  //获取所有得地区
+  const manageProvince = () => {
+    return new Promise(resolve => {
+      PublicApi.getManageAreaAll().then(res => {
+        if (res.code === 1000) {
+          resolve(res.data);
+        }
+      })
+    })
+  }
+  // 选择下拉得内容
+  const handProvince = (val: any, idx: number, num: number) => {
+    if (num === 1) {
+      const result = [...requisitionFormAddress];
+      province.forEach(item => {
+        if (item.code === val) {
+          PublicApi.getManageAreaByPcodeAll({ pcode: val }).then((res: any) => {
+            if (res.code === 1000) {
+              res.data.forEach((items: any) => {
+                const fiterCode = code.filter(value => value === items.code);
+                if (fiterCode[0] === items.code) {
+                  items.disabled = true
+                } else {
+                  items.disabled = false
+                }
+              })
+              result[idx].provinceCode = val;
+              result[idx].province = item.name;
+              city[idx] = { citydata: res.data }
+              setcity([...city])
+            }
+          })
+        }
+      })
+      setrequisitionFormAddress(result);
+    } else {
+      const result = [...requisitionFormAddress];
+      city.forEach(item => {
+        item.citydata.forEach(items => {
+          if (items.code === val) {
+            result[idx].cityCode = val;
+            result[idx].city = items.name;
+          }
+        })
+      })
+      setcode([...code, val]);
+      setrequisitionFormAddress(result);
+    }
+  }
+
+  // 添加一条地址
+  const addFormAddress = (idx:number) => {
+    const address: any = {
+      provinceCode: '',
+      province: '',
+      cityCode: '',
+      city: ''
+    }
+    if(requisitionFormAddress[idx].provinceCode && requisitionFormAddress[idx].cityCode) {
+      setrequisitionFormAddress([...requisitionFormAddress, address])
+    } else {
+      message.error('请完善适用城市信息')
+    }
+    
+  }
+  // 删除一条地址
+  const removeFormAddress = (idx: any) => {
+
+  }
+
+  useEffect(() => {
+    manageProvince().then(data => {
+      setprovince(data)
+    })
+  }, [])
+
+  return (
+    <Form
+      {...layout}
+      form={form}
+    >
+      <Form.Item
+        label='需求单摘要'
+        name=''
+        rules={[{ required: true, message: '请输入需求单摘要' }]}
+      >
+        <Input />
+      </Form.Item>
+      <Form.Item
+        label={<Tooltip placement="right" title='设置了归属地市后，此商品可根据地市进行筛选，未设置时默认为所有地市'>适用地市<QuestionCircleOutlined style={{ marginLeft: '5px' }} /></Tooltip>}
+        style={{ marginBottom: '0' }}
+      >
+        {requisitionFormAddress.map((item: any, idx: number) => {
+          return (
+            <Row gutter={10} key={`requisitionFormAddress${idx}`} className={style.formwrap}>
+              <Col span={12}>
+                <Form.Item name={`province_${idx}`}>
+                  <Select
+                    onChange={(value) => {
+                      handProvince(value, idx, 1)
+                    }}
+                  >
+                    {province.map(items => {
+                      return (
+                        <Option key={items.id} value={items.code}>{items.name}</Option>
+                      )
+                    })}
+                  </Select>
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item
+                  name={`city_${idx}`}
+                  rules={[{ required: item.provinceCode ? true : false, message: '选择三级分类' }]}
+                >
+                  <Select
+                    onChange={(value) => {
+                      handProvince(value, idx, 2)
+                    }}
+                  >
+                    {(item.provinceCode && city.length > 0 && city[idx].citydata) && city[idx].citydata.map(items => {
+                      return (
+                        <Option disabled={items.disabled} key={items.id} value={items.code}>{items.name}</Option>
+                      )
+                    })}
+                  </Select>
+                </Form.Item>
+              </Col>
+              <div className={style.formbutton}>
+                {
+                  (idx === requisitionFormAddress.length - 1) &&
+                  <Form.Item>
+                    <Button type='primary' onClick={() => addFormAddress(idx)}>+</Button>
+                  </Form.Item>
+                }
+                {
+                  requisitionFormAddress.length > 1 &&
+                  <Form.Item>
+                    <Button onClick={() => removeFormAddress(idx)}>-</Button>
+                  </Form.Item>
+                }
+              </div>
+            </Row>
+          )
+        })}
+      </Form.Item>
+      <Form.Item
+        label='需求单号'
+      >
+        <span>SPTY12</span>
+      </Form.Item>
+      <Form.Item
+        label='会员名称'
+      >
+        <span>温州龙昌手袋有限公司</span>
+      </Form.Item>
+      <Form.Item
+        label='单据时间'
+      >
+        <span>2020-08-20 12:56:25</span>
+      </Form.Item>
+      <Form.Item
+        label='外部状态'
+      >
+        <span>待提交需求单</span>
+      </Form.Item>
+      <Form.Item
+        label='外部状态'
+      >
+        <span>待提交审核</span>
+      </Form.Item>
+    </Form>
+  )
+}
+
+export default BasicInfo;
\ No newline at end of file

src/pages/transaction/enquirySubmit/addDemandOrder/components/flowRecord.tsx

+import React, { useState } from 'react';
+import styles from './index.less';
+import { Radio } from 'antd';
+import PolymericTable from '@/components/PolymericTable';
+import { EditableColumns } from '@/components/PolymericTable/interface';
+import moment from 'moment';
+
+const FlowRecord: React.FC<{}> = () => {
+
+  const [radio, setRadio] = useState<string>('outer'); //切换单据
+  const format = (text) => {
+    return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
+  }
+
+  const outerColumns: EditableColumns[] = [{
+    title: '序号',
+    dataIndex: 'inquiryListId',
+  }, {
+    title: '操作角色',
+    dataIndex: 'roleName',
+  }, {
+    title: '状态',
+    dataIndex: 'state',
+  }, {
+    title: '操作',
+    dataIndex: 'operation',
+  }, {
+    title: '操作时间',
+    dataIndex: 'operationTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '审核意见',
+    dataIndex: 'auditOpinion',
+  }]
+  const insideColumns: EditableColumns[] = [{
+    title: '序号',
+    dataIndex: 'inquiryListId',
+  }, {
+    title: '操作人',
+    dataIndex: 'roleName',
+  }, {
+    title: '部门',
+    dataIndex: 'department',
+  }, {
+    title: '职位',
+    dataIndex: 'position',
+  }, {
+    title: '状态',
+    dataIndex: 'state',
+  }, {
+    title: '操作',
+    dataIndex: 'operation',
+  }, {
+    title: '操作时间',
+    dataIndex: 'operationTime',
+    render: (text: any, record: any) => format(text)
+  }, {
+    title: '审核意见',
+    dataIndex: 'auditOpinion',
+  }]
+  const onChange = (e: any) => {
+    setRadio(e.target.value)
+  }
+  return (
+    <div>
+      <Radio.Group defaultValue="outer" buttonStyle="solid" onChange={onChange}>
+        <Radio.Button value="outer">外部单据</Radio.Button>
+        <Radio.Button value="inside">内部单据</Radio.Button>
+      </Radio.Group>
+      {radio === 'outer' ?
+        <PolymericTable
+          columns={outerColumns}
+          loading={false}
+          pagination={null}
+        />
+        :
+        <PolymericTable
+          columns={insideColumns}
+          loading={false}
+          pagination={null}
+        />
+      }
+    </div>
+  )
+}
+
+export default FlowRecord
\ No newline at end of file

src/pages/transaction/enquirySubmit/addDemandOrder/components/index.less

+.formwrap {
+  position: relative;
+  .formbutton {
+    position: absolute;
+    right: -95px;
+    display: flex;
+    width: 90px;
+    :global {
+      .ant-form-item {
+        width: 32px;
+        margin-right: 10px;
+        .ant-btn {
+          width: 32px;
+          padding: 0;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}

src/pages/transaction/enquirySubmit/addDemandOrder/components/tradingConditions.tsx

+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+import { Form, Input, Select, Row, Col, DatePicker, message } from 'antd';
+import { PublicApi } from '@/services/api';
+
+const layout: any = {
+  colon: false,
+  labelCol: { style: { width: '174px' } },
+  wrapperCol: { span: 24 },
+  labelAlign: "left"
+};
+
+const TradingConditions: React.FC<{}> = () => {
+  const [TradingConditionsForm] = Form.useForm();
+  const [address, setAddress] = useState([]);
+  
+  useEffect(() => {
+    // 获取交付地址
+    PublicApi.getLogisticsSelectListReceiverAddress().then(res => {
+      setAddress(res.data)
+    })
+  }, [])
+
+  const disabledDate = (current) => {
+    return current && current < moment().endOf('day');
+  }
+  
+
+  return (
+    <Form
+      {...layout}
+      form={TradingConditionsForm}
+    >
+      <Row gutter={70}>
+        <Col span={12}>
+          <Form.Item label='交付日期' name='deliveryTime' rules={[{ required: true, message: '请选择交付日期' }]}>
+            <DatePicker
+              style={{width: '100%'}}
+              disabledDate={disabledDate}
+              format="YYYY-MM-DD HH:mm:ss" 
+            />
+          </Form.Item>
+          <Form.Item label='交付地址' name='fullAddressId' rules={[{ required: true, message: '请选择交付地址' }]}>
+            <Select>
+              {address.map(v => (
+                <Select.Option key={v.id} value={v.id}>{v.fullAddress}</Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item label='报价截止时间' name='quotationAsTime' rules={[{ required: true, message: '请选择报价截止时间' }]}>
+            <DatePicker
+              style={{width: '100%'}}
+              format="YYYY-MM-DD HH:mm:ss"
+              disabledDate={disabledDate}
+            />
+          </Form.Item>
+          <Form.Item label='报价要求' name='offer'>
+            <Input.TextArea placeholder='最长100个字符，50个汉字' />
+          </Form.Item>
+          <Form.Item label='付款方式' name='paymentType'>
+            <Input.TextArea placeholder='最长100个字符，50个汉字' />
+          </Form.Item>
+          <Form.Item label='税费要求' name='taxes'>
+            <Input.TextArea placeholder='最长100个字符，50个汉字' />
+          </Form.Item>
+          <Form.Item label='物流要求' name='logistics'>
+            <Input.TextArea placeholder='最长100个字符，50个汉字' />
+          </Form.Item>
+        </Col>
+        <Col span={12}>
+          <Form.Item label='包装要求' name='packRequire'>
+            <Input.TextArea placeholder='最长100个字符，50个汉字' />
+          </Form.Item>
+          <Form.Item label='其他要求' name='otherRequire'>
+            <Input.TextArea placeholder='最长100个字符，50个汉字' />
+          </Form.Item>
+        </Col>
+      </Row>
+    </Form>
+  )
+}
+
+export default TradingConditions
\ No newline at end of file

src/pages/transaction/enquirySubmit/addDemandOrder/index.tsx

+import React from 'react';
+import { history } from 'umi';
+import ReutrnEle from '@/components/ReturnEle'
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Button, Card, Tabs } from 'antd';
+import BasicInfo from './components/basicInfo';
+import TradingConditions from './components/tradingConditions'
+import FlowRecord from './components/flowRecord';
+import AddGoods from './components/addGoods';
+const { TabPane } = Tabs;
+
+const AddDemandOrder: React.FC<{}> = () => {
+  return (
+    <PageHeaderWrapper
+      onBack={() => history.goBack()}
+      backIcon={<ReutrnEle description="返回" />}
+      extra={
+        <Button type="primary"> 保存</Button>
+      }
+    >
+      <Card>
+        <Tabs type='card'>
+          <TabPane forceRender tab='基本信息' key='1'>
+            <BasicInfo />
+          </TabPane>
+          <TabPane forceRender tab='添加商品' key='2'>
+            <AddGoods />
+          </TabPane>
+          <TabPane forceRender tab='交易条件' key='3'>
+            <TradingConditions />
+          </TabPane>
+          <TabPane forceRender tab='需求对接' key='4'>
+
+          </TabPane>
+          <TabPane forceRender tab='流转记录' key='5'>
+            <FlowRecord />
+          </TabPane>
+        </Tabs>
+      </Card>
+    </PageHeaderWrapper>
+  )
+}
+
+export default AddDemandOrder;
\ No newline at end of file