Merge branch 'dev-srm' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into dev-srm

src/pages/transaction/purchaseAbility/purchaseInquiry/addInquiry/add.tsx

@@ -3,6 +3,7 @@ import { history } from 'umi';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { Tabs, Card, Form } from 'antd';
 import Basic from './components/basic';
+import Material from './components/material';
 const { TabPane } = Tabs;
 
 const AddForm = () => {
@@ -18,7 +19,9 @@ const AddForm = () => {
               <Basic />
             </TabPane>
             {/* 添加采购物料 */}
-            <TabPane key='2' tab='添加采购物料'></TabPane>
+            <TabPane key='2' tab='添加采购物料'>
+              <Material />
+            </TabPane>
             {/* 交易条件 */}
             <TabPane key='3' tab='交易条件'></TabPane>
             {/* 需求对接 */}

src/pages/transaction/purchaseAbility/purchaseInquiry/addInquiry/components/basic.tsx

-import React from 'react';
-import { Form, Input, Select, Tooltip, Row, Col } from 'antd';
+import React, { useState, useEffect } from 'react';
+import {
+  Form,
+  Input,
+  Select,
+  Tooltip,
+  Row,
+  Col,
+  message,
+  Button
+} from 'antd';
 import style from './index.less';
 import { QuestionCircleOutlined } from '@ant-design/icons';
+import { PublicApi } from '@/services/api';
 
 const { Option } = Select;
 const layout: any = {
@@ -15,7 +25,7 @@ const iconStyle: any = {
   fontSize: '20px',
   position: 'absolute',
   right: '-30px',
-  top: '6px',
+  top: '5px',
 }
 const PURCHASETYPE = [
   {
@@ -39,9 +49,131 @@ const PRICECONTRAST = [
 ]
 
 const BasicInfo = () => {
+  const [form] = Form.useForm();
+  /** 省列表 */
+  const [province, setprovince] = useState<any>([]);
+  /** 市列表 */
+  const [city, setcity] = useState<any>([]);
+  const [code, setcode] = useState<any>([]);
+  /** 适用城市储存列表 */
+  const [requisitionFormAddress, setrequisitionFormAddress] = useState<any>([{
+    provinceCode: '',
+    province: '',
+    cityCode: '',
+    city: ''
+  }]);
+  /** 获取所有地区 */
+  const manageProvince = () => {
+    return new Promise(resolve => {
+      PublicApi.getManageAreaAll().then(res => {
+        if (res.code === 1000) {
+          resolve(res.data);
+        }
+      })
+    })
+  }
+  /** 选择下拉得内容 */
+  const handProvince = async (val: any, idx: number, num: number) => {
+    const result = [...requisitionFormAddress];
+    const cityCode: Array<any> = []
+    result.forEach((item: any) => {
+      if (item.cityCode) {
+        cityCode.push(item.cityCode)
+      }
+    })
+    setcode([...cityCode]);
+    if (num === 1) {
+      await province.forEach(item => {
+        if (item.code === val) {
+          PublicApi.getManageAreaByPcodeAll({ pcode: val }).then((res: any) => {
+            if (res.code === 1000) {
+              result[idx].provinceCode = val;
+              result[idx].province = item.name;
+              city[idx] = { citydata: res.data }
+              setcity([...city])
+            }
+          })
+        }
+      })
+
+    } else {
+      city.forEach(item => {
+        item.citydata.forEach(items => {
+          if (items.code === val) {
+            const cityCode = code.find(it => items.code);
+            if (cityCode !== items.code) {
+              items.disabled = false
+            }
+            result[idx].cityCode = val;
+            result[idx].city = items.name;
+          }
+        })
+      })
+      setcity([...city])
+    }
+    setrequisitionFormAddress(result);
+
+  }
+  /** 选择城市的时候下拉就调用方 */
+  const onDropdownVisibleChange = () => {
+    return new Promise(reslove => reslove(code)).then((res: any) => {
+      city.forEach((item: any) => {
+        item.citydata.filter(it => {
+          res.map(items => {
+            if (items === it.code) {
+              it.disabled = true
+            }
+          })
+        })
+      })
+      setcity([...city])
+    })
+
+  }
+  /** 添加一条地址 */
+  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) => {
+    if (requisitionFormAddress.length > 1) {
+      const requisitionFormAddressFilter = requisitionFormAddress.filter((item: any, index: number) => index !== idx);
+      const cityFilter = city.filter((item: any, index: number) => index !== idx);
+      form.resetFields();
+      requisitionFormAddressFilter.forEach((item: any, index: number) => {
+        const cityCode = code.find(it => item.cityCode);
+        if (cityCode !== item.cityCode) {
+          item.disabled = false
+        }
+        form.setFieldsValue({
+          ['province_' + index]: item.provinceCode,
+          ['city_' + index]: item.cityCode
+        });
+      })
+      setcity(cityFilter);
+      setrequisitionFormAddress(requisitionFormAddressFilter);
+    }
+  }
+  useEffect(() => {
+    manageProvince().then(data => {
+      setprovince(data)
+    })
+  }, [])
   return (
     <Form
       {...layout}
+      form={form}
       className={style.form}
     >
       <Form.Item
@@ -53,6 +185,7 @@ const BasicInfo = () => {
       </Form.Item>
       <Form.Item
         label='采购类型'
+        name='purchaseType'
         required
       >
         <Form.Item
@@ -72,6 +205,7 @@ const BasicInfo = () => {
       </Form.Item>
       <Form.Item
         label='比价方式'
+        name='priceContrast'
         required
       >
         <Form.Item
@@ -91,11 +225,62 @@ const BasicInfo = () => {
       </Form.Item>
       <Form.Item
         label={<Tooltip placement="right" title='设置了归属地市后，此商品可根据地市进行筛选，未设置时默认为所有地市'>适用地市<QuestionCircleOutlined style={{ marginLeft: '5px' }} /></Tooltip>}
+        style={{ marginBottom: '0' }}
       >
-        <Row gutter={10}>
-          <Col span={12}>1</Col>
-          <Col span={12}>2</Col>
-        </Row>
+        {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
+                    onDropdownVisibleChange={onDropdownVisibleChange}
+                    onChange={(value) => {
+                      handProvince(value, idx, 1)
+                    }}
+                  >
+                    {province.map(items => {
+                      return (
+                        <Option key={`${items.id}_${idx}_province`} value={items.code}>{items.name}</Option>
+                      )
+                    })}
+                  </Select>
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item
+                  name={`city_${idx}`}
+                >
+                  <Select
+                    onDropdownVisibleChange={onDropdownVisibleChange}
+                    onChange={(value) => {
+                      handProvince(value, idx, 2)
+                    }}
+                  >
+                    {(item.provinceCode && city.length > 0 && city[idx]) && city[idx].citydata.map(items => {
+                      return (
+                        <Option disabled={items.disabled} key={`${items.id}_${idx}_city`} 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>
   )

src/pages/transaction/purchaseAbility/purchaseInquiry/addInquiry/components/index.less

@@ -4,4 +4,21 @@
       position: relative;
     }
   }
+  .formButton {
+    position: absolute;
+    right: -100px;
+    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/purchaseAbility/purchaseInquiry/addInquiry/components/material.tsx

+import React from 'react';
+import {
+  Form,
+  Radio,
+  Button,
+  Table
+} from 'antd';
+import { ColumnType } from 'antd/lib/table/interface';
+import { PlusOutlined } from '@ant-design/icons';
+import DrawerWrite from '../modal/drawerWrite';
+
+const layout: any = {
+  colon: false,
+  labelCol: { style: { width: '174px' } },
+  wrapperCol: { span: 9 },
+  labelAlign: "left"
+}
+
+const Material = () => {
+  /** 表单表头 */
+  const columns: ColumnType<Object>[] = [
+    {
+      title: '物料编号',
+      key: 'number',
+      dataIndex: 'number'
+    },
+    {
+      title: '物料名称',
+      key: 'name',
+      dataIndex: 'name'
+    },
+    {
+      title: '规格型号',
+      key: 'model',
+      dataIndex: 'model'
+    },
+    {
+      title: '品类',
+      key: 'category',
+      dataIndex: 'category'
+    },
+    {
+      title: '品牌',
+      key: 'brand',
+      dataIndex: 'brand'
+    },
+    {
+      title: '单位',
+      key: 'unit',
+      dataIndex: 'unit'
+    },
+    {
+      title: '采购数量',
+      key: 'purchaseCount',
+      dataIndex: 'purchaseCount'
+    },
+    {
+      title: '操作',
+      key: 'operate',
+      dataIndex: 'operate'
+    }
+  ]
+  return (
+    <Form
+      {...layout}
+    >
+      <Form.Item
+        label='添加方式'
+        name='materielMode'
+        rules={[{ required: true, message: '请选择添加方式' }]}
+      >
+        <Radio.Group>
+          <Radio value={1}>选择货品添加</Radio>
+          <Radio value={2}>导入货品生成</Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Button
+        type='dashed'
+        block
+        style={{
+          marginBottom: '24px',
+        }}
+      >
+        <PlusOutlined />
+        添加
+      </Button>
+      <Table
+        columns={columns}
+      />
+      <DrawerWrite />
+    </Form>
+  )
+}
+export default Material;

src/pages/transaction/purchaseAbility/purchaseInquiry/addInquiry/modal/drawerWrite.tsx

+import React, { useState } from 'react';
+import {
+  Drawer,
+  Row,
+  Col,
+  Button,
+  Form,
+  Input,
+  Divider,
+  Upload,
+  Anchor
+} from 'antd';
+import style from './index.less';
+import { UPLOAD_TYPE } from '@/constants'
+import { DeleteOutlined, LinkOutlined, UploadOutlined } from '@ant-design/icons';
+
+const layout: any = {
+  colon: false,
+  labelCol: { style: { width: '110px' } },
+  labelAlign: "left"
+};
+const { Link } = Anchor;
+
+const DrawerWrite = () => {
+  const [loading, setloading] = useState(false);
+  const [files, setFiles] = useState([]);
+  return (
+    <Drawer
+      title='选择货品'
+      visible
+      placement='right'
+      width="45%"
+      className={style.drawer}
+      footer={
+        <div
+          style={{
+            textAlign: 'right',
+          }}
+        >
+          <Button style={{ marginRight: 8 }}>
+            取消
+          </Button>
+          <Button type="primary">
+            确定
+          </Button>
+        </div>
+      }
+    >
+      <Row>
+        <Col span={6}>
+          <Anchor
+            affix
+            getContainer={() => document.getElementById('current')}
+          >
+            <Link href='#basic' title='基本信息' />
+            <Link href='#number' title='采购数量' />
+            <Link href='#file' title='附件' />
+          </Anchor>
+        </Col>
+        <Col
+          span={18}
+          id='current'
+          style={{
+            height: '100%',
+            padding: '16px',
+            overflowY: 'scroll',
+            borderLeft: '1px solid #F4F5F7',
+          }}
+        >
+          <Form
+            {...layout}
+          >
+            {/* 基本信息 */}
+            <Form.Item
+              id='basic'
+              label={
+                <>
+                  <Divider
+                    type="vertical"
+                    style={{
+                      width: '2px',
+                      height: '16px',
+                      margin: '0px 5px 0px 0px',
+                      backgroundColor: '#00B37A',
+                    }}
+                  />
+                  <span
+                    style={{
+                      fontSize: '14px',
+                      color: '#909399',
+                    }}
+                  >
+                    基本信息
+                  </span>
+                </>
+              }
+            />
+            <Form.Item
+              label='货号'
+              name='number'
+              rules={[{ required: true, message: '请输入货号' }]}
+            >
+              <Input.Search enterButton={<><LinkOutlined /> 选择</>} />
+            </Form.Item>
+            <Form.Item
+              label='货品名称'
+              name='name'
+              rules={[{ required: true, message: '请输入货品名称' }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label='规格型号'
+              name='model'
+              rules={[{ required: true, message: '请输入规格型号' }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label='品类'
+              name='category'
+              rules={[{ required: true, message: '请选择品类' }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label='品牌'
+              name='brand'
+              rules={[{ required: true, message: '请输入品牌' }]}
+            >
+              <Input />
+            </Form.Item>
+            {/* 采购数量 */}
+            <Form.Item
+              id='number'
+              label={
+                <>
+                  <Divider
+                    type="vertical"
+                    style={{
+                      width: '2px',
+                      height: '16px',
+                      margin: '0px 5px 0px 0px',
+                      backgroundColor: '#00B37A',
+                    }}
+                  />
+                  <span
+                    style={{
+                      fontSize: '14px',
+                      color: '#909399',
+                    }}
+                  >
+                    采购数量
+                  </span>
+                </>
+              }
+            />
+            <Form.Item
+              label='单位'
+              name='unit'
+              rules={[{ required: true, message: '请选择单位' }]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label='采购数量'
+              name='purchaseCount'
+              rules={[{ required: true, message: '请输入采购数量' }]}
+            >
+              <Input />
+            </Form.Item>
+            {/* 附件 */}
+            <Form.Item
+              id='file'
+              label={
+                <>
+                  <Divider
+                    type="vertical"
+                    style={{
+                      width: '2px',
+                      height: '16px',
+                      margin: '0px 5px 0px 0px',
+                      backgroundColor: '#00B37A',
+                    }}
+                  />
+                  <span
+                    style={{
+                      fontSize: '14px',
+                      color: '#909399',
+                    }}
+                  >
+                    附件
+                  </span>
+                </>
+              }
+            />
+            <Form.Item
+              label='附件'
+              name='upload'
+            >
+              <div className={style.upload_data}>
+                {files.length > 0 && files.map((v, index) => (
+                  <div key={index} className={style.upload_item}>
+                    <div className={style.upload_left}>
+                      <LinkOutlined />
+                      <span>{v.name}</span>
+                    </div>
+                    <div className={style.upload_right}>
+                      <DeleteOutlined />
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <Upload
+                action="/api/file/file/upload"
+                data={{ fileType: UPLOAD_TYPE }}
+                showUploadList={false}
+                accept='.doc,.docx,.pdf,.ppt,.pptx,.xls,.xlsx'
+              >
+                <Button loading={loading} icon={<UploadOutlined />}>上传文件</Button>
+                <div style={{ marginTop: '8px' }}>一次上传一个文件，每个附件大小不能超过 20M</div>
+              </Upload>
+            </Form.Item>
+          </Form>
+        </Col>
+      </Row>
+    </Drawer>
+  )
+}
+export default DrawerWrite;

src/pages/transaction/purchaseAbility/purchaseInquiry/addInquiry/modal/index.less

+.drawer {
+  :global {
+    .ant-drawer-body {
+      padding: 0;
+      .ant-row {
+        height: 100%;
+        .ant-anchor {
+          padding-left: 0px;
+          .ant-anchor-ink {
+            display: none;
+          }
+          .ant-anchor-link {
+            padding: 12px 12px 12px 12px;
+          }
+          .ant-anchor-link-active {
+            box-sizing: border-box;
+            border-left: 2px solid #00B37A;
+          }
+        }
+      }
+    }
+  }
+  .upload_item {
+    padding: 5px 8px;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #FAFBFC;
+
+    .upload_left {
+      display: flex;
+      align-items: center;
+      color: #303133;
+
+      :global {
+        .anticon-file-word {
+          color: #4279df;
+          font-size: 20px;
+          margin-right: 8px;
+        }
+      }
+    }
+
+    .upload_right {
+      color: #00B37A;
+      cursor: pointer;
+
+      :global {
+        .anticon-delete {
+          margin-left: 19px;
+          color: #C0C4CC;
+        }
+      }
+    }
+  }
+}