feat:购买商品时角色类型和是否自己商品的判断

src/components/NestTable/index.tsx

 import React, { useCallback } from 'react'
 import { Table } from 'antd'
-import { TableProps, ColumnsType } from 'antd/es/table'
+import { TableProps, ColumnsType, TablePaginationConfig } from 'antd/es/table'
 import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons'
 
 export interface NestTableProps extends TableProps<any> {
@@ -9,15 +9,17 @@ export interface NestTableProps extends TableProps<any> {
    */
   NestColumns: ColumnsType<any>[],
   // 指定获得的子集数据类型
-  childrenDataKey: string
+  childrenDataKey: string,
+  childPagination?: false | TablePaginationConfig,
+  childRowSelection?: any,
 }
 
 /**
  * 嵌套表格
  * @todo 实现无限嵌套， 目前暂时实现两层
  */
-const NestTable:React.FC<NestTableProps> = (props) => {
-  const { NestColumns, childrenDataKey, dataSource, ...resetProps } = props
+const NestTable: React.FC<NestTableProps> = (props) => {
+  const { NestColumns, childrenDataKey, dataSource, pagination = false, childPagination = false, childRowSelection = null, ...resetProps } = props
   if (NestColumns.length > 2) {
     throw new Error('暂时不支持2项以上的嵌套table')
   }
@@ -27,11 +29,15 @@ const NestTable:React.FC<NestTableProps> = (props) => {
   const childRenderTable = useCallback((record) => {
     return <Table
       columns={childColumns}
+      size="middle"
       dataSource={record[childrenDataKey] || []}
+      rowClassName={(_, index) => (index % 2) === 0 && "tb_bg"}
       rowKey='id'
+      rowSelection={childRowSelection}
+      pagination={childPagination}
     />
   }, [childColumns, childrenDataKey])
-  
+
   return (
     <Table
       columns={parentColumns}
@@ -39,13 +45,13 @@ const NestTable:React.FC<NestTableProps> = (props) => {
       expandable={{
         expandedRowRender: childRenderTable,
         expandIcon: ({ expanded, onExpand, record }) =>
-        expanded ? (
-          <CaretDownOutlined onClick={e => onExpand(record, e)} />
-        ) : (
-          <CaretRightOutlined onClick={e => onExpand(record, e)} />
-        )
+          expanded ? (
+            <CaretDownOutlined onClick={e => onExpand(record, e)} />
+          ) : (
+              <CaretRightOutlined onClick={e => onExpand(record, e)} />
+            )
       }}
-      pagination={false}
+      pagination={pagination}
       {...resetProps}
     />
   )

src/components/SearchForm/index.less

+.search_form {
+  position: relative;
+  margin-bottom: 16px;
+
+  :global {
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+  }
+
+  .daterangegpicker_wrap {
+    display: flex;
+  }
+}
\ No newline at end of file

src/components/SearchForm/index.tsx

+import React, { useState } from 'react'
+import { Form, Row, Col, Input, Button, Select, DatePicker } from 'antd'
+import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
+import styles from './index.less'
+
+const { RangePicker } = DatePicker
+
+interface SearchItemType {
+  type: any,
+  component: any,
+  key: any,
+  placeholder: any,
+  span?: number,
+  option?: {
+    label: string,
+    value: any
+  }[]
+}
+
+interface OperationItemType {
+  searchList: SearchItemType[],
+  highSearchList: SearchItemType[]
+}
+
+interface SearchFormPropsType {
+  option: OperationItemType
+}
+
+
+
+const SearchForm: React.FC<SearchFormPropsType> = (props) => {
+  const { option } = props
+  const [isHighSearch, setIsHighSearch] = useState<boolean>(false)
+  const [form] = Form.useForm()
+
+  const handleSearch = () => {
+
+  }
+
+  const handleReset = () => {
+
+  }
+
+  const renderFormItemByCompnent = (detail: SearchItemType) => {
+    switch (detail.component) {
+      case 'Search':
+        return (
+          <Form.Item
+            name={detail.key}
+          >
+            <Input.Search
+              style={{ width: 256 }}
+              placeholder={detail.placeholder}
+              allowClear
+              onSearch={handleSearch}
+            />
+          </Form.Item>
+        )
+      case 'Input':
+        return (
+          <Form.Item
+            name={detail.key}
+          >
+            <Input
+              style={{ width: '100%' }}
+              placeholder={detail.placeholder}
+              allowClear
+            />
+          </Form.Item >
+        )
+      case 'Select':
+        return (
+          <Form.Item
+            name={detail.key}
+          >
+            <Select
+              style={{ width: '100%' }}
+              placeholder={detail.placeholder}
+              allowClear
+            >
+              {
+                detail.option.map((item, index) => (
+                  <Select.Option key={`option_${index}`} value={item.value}>{item.label}</Select.Option>
+                ))
+              }
+            </Select>
+          </Form.Item >
+        )
+      case 'DateRangePicker':
+        return (
+          <Form.Item
+            name={detail.key}
+          >
+            <RangePicker
+              style={{ width: '100%' }}
+            // format={dateFormat}
+            />
+          </Form.Item>
+
+          // <span className={styles.daterangegpicker_wrap}>
+          //   <Form.Item
+          //     name={detail.key[0]}
+          //   >
+          //     <DatePicker placeholder={detail.placeholder[0]} />
+          //   </Form.Item>
+          //   <Form.Item
+          //     name={detail.key[1]}
+          //   >
+          //     <DatePicker placeholder={detail.placeholder[1]} />
+          //   </Form.Item>
+          // </span>
+        )
+    }
+
+  }
+
+  return (
+    <div className={styles.search_form}>
+      <Form form={form}>
+        <Row>
+          <Col span={24}>
+            <Row gutter={[16, 16]} style={{ marginBottom: 0 }}>
+              {/* <Col span={6}></Col> */}
+              <Col span={18} style={{ display: 'flex', justifyContent: 'flex-start', padding: '0 8px' }}>
+                {
+                  option.searchList && option.searchList.map((item, index) => (
+                    <Col key={`searchList_item_${index}`}>
+                      {
+                        renderFormItemByCompnent(item)
+                      }
+                    </Col>
+                  ))
+                }
+                {
+                  option.highSearchList && (
+                    <Col>
+                      <Button onClick={() => setIsHighSearch(!isHighSearch)}>高级筛选{isHighSearch ? <CaretUpOutlined /> : <CaretDownOutlined />}</Button>
+                    </Col>
+                  )
+                }
+                <Col>
+                  <Button onClick={() => handleReset()}>重置</Button>
+                </Col>
+              </Col>
+            </Row>
+          </Col>
+          {
+            isHighSearch &&
+            <Col span={24}>
+              <Row gutter={[16, 16]} justify="end">
+                <Col span={24} style={{ display: 'flex', justifyContent: 'flex-start' }}>
+                  {
+                    option.highSearchList && option.highSearchList.map((hignSearchItem, hignSearchIndex) => (
+                      <Col key={`hignSearchList_item_${hignSearchIndex}`} span={hignSearchItem.span || 4}>
+                        {
+                          renderFormItemByCompnent(hignSearchItem)
+                        }
+                      </Col>
+                    ))
+                  }
+                </Col>
+              </Row>
+            </Col>
+          }
+        </Row>
+      </Form>
+    </div>
+  )
+}
+
+export default SearchForm
+

src/global/styles/global.less

@@ -27,6 +27,7 @@ margin;
 .hide {
   display: none;
 }
+
 // antd default
 h1,
 h2,
@@ -37,6 +38,21 @@ h6 {
   color: #909399;
 }
 
+.tb_bg {
+  background-color: #FAFBFC;
+}
+
+.common_tb {
+  .ant-table-thead>tr>th {
+    background-color: #FFF;
+  }
+
+  tr.ant-table-expanded-row>td,
+  tr.ant-table-expanded-row:hover>td {
+    background: #FFF;
+  }
+}
+
 .@{prefix}-margin_content {
   .center-margin;
   width: 1190px;
@@ -152,38 +168,40 @@ h6 {
     background: none;
   }
 }
+
 .white-wrapper {
   background-color: #fff;
 }
 
 //addonAfter 有选择弹窗时
-.input_addonAfter{
-  .ant-input-group-addon{
+.input_addonAfter {
+  .ant-input-group-addon {
     padding: 0 !important;
   }
 }
- 
+
 /* 有关联或选择按钮的input输入框 */
 // 此样式用于input的父级以上元素
 .useConnectBtnWrapper {
-    .ant-input-group-addon {
-      padding: 0;
-      border: none;
-    }
-    .connectBtn {
-      width: 80px;
-      height: 32px;
-      line-height: 32px;
-      background: #909399;
-      color: #fff;
-      text-align: center;
-      cursor: pointer;
-    } 
+  .ant-input-group-addon {
+    padding: 0;
+    border: none;
+  }
+
+  .connectBtn {
+    width: 80px;
+    height: 32px;
+    line-height: 32px;
+    background: #909399;
+    color: #fff;
+    text-align: center;
+    cursor: pointer;
+  }
 }
 
 /* 带树的模态框 */
 // 此样式用于模态框上面
-.useTreeModalWrapper{
+.useTreeModalWrapper {
   .ant-tree .ant-tree-treenode {
     padding-bottom: 0;
     padding-right: 16px;
@@ -197,6 +215,7 @@ h6 {
       border-color: @main-color;
       background: @tree-node_hover;
     }
+
     &.ant-tree-treenode:hover {
       border-color: @main-color;
       background: @tree-node_hover;
@@ -209,7 +228,7 @@ h6 {
     }
   }
 
- 
+
 
   .tree-node-circle {
     width: 4px;
@@ -260,8 +279,7 @@ h6 {
   cursor: pointer;
 }
 
-.editable-row:hover 
-.editable-cell-value-wrap {
+.editable-row:hover .editable-cell-value-wrap {
   border: 1px solid #d9d9d9;
   border-radius: 4px;
   padding: 4px 11px;
@@ -273,8 +291,8 @@ h6 {
   font-size: 12px;
 }
 
- // 强制覆盖下拉框固定位置
- .fixed-ant-selected-down {
+// 强制覆盖下拉框固定位置
+.fixed-ant-selected-down {
   .ant-select-dropdown {
     top: 36px !important;
   }

src/pages/afterService/exchangeGoods/waitSubmitOrderList/components/exchangeGoods/components/addModal/index.less

+.modal_wrap {
+  position: relative;
+
+  .modal_tb_wrap {
+    position: relative;
+    height: 60vh;
+    overflow-y: auto;
+  }
+
+  .modal_tb_pagination {
+    position: relative;
+    text-align: right;
+    margin-top: 24px;
+  }
+}
\ No newline at end of file

src/pages/afterService/exchangeGoods/waitSubmitOrderList/components/exchangeGoods/components/addModal/index.tsx

+import React, { useState } from 'react'
+import { Modal, Pagination } from 'antd'
+import NestTable from '@/components/NestTable'
+import { exchangeGoodsModalTableColumn, exchangeGoodsModalChildTableColumn } from '../../model/exchangeGoodsTable'
+import SearchForm from '@/components/SearchForm'
+import styles from './index.less'
+
+interface AddModalPropsType {
+  visible: boolean;
+  onOk: Function;
+  onCancel: Function;
+}
+
+const AddModal: React.FC<AddModalPropsType> = (props) => {
+  const { visible = false, onOk, onCancel } = props
+  const [totalCount, setTotalCount] = useState<number>(4)
+  const [current, setCurrent] = useState<number>(1)
+  const [pageSize, setPageSize] = useState<number>(10)
+
+  const mockData = [
+    {
+      id: 1,
+      orderNo: 'SPTY12',
+      applyAbstract: '进口头层黄牛皮荔枝纹',
+      supplierName: '广州白马皮具交易中心',
+      createTime: '2020-05-12 08:08',
+      orderStatus: '已完成',
+      orderType: '询价采购',
+      orderDeliveryProducts: [
+        {
+          id: 1,
+          productId: 1110,
+          productName: '进口头层黄牛皮荔枝纹/红色',
+          category: '牛皮',
+          brand: 'PELLE',
+          unit: '尺',
+          purchaseCount: 2000,
+          purchasePrice: 20,
+          purchaseAmount: 4000,
+          replaceCount: 1000,
+        },
+        {
+          id: 2,
+          productId: 1110,
+          productName: '进口头层黄牛皮荔枝纹/红色',
+          category: '牛皮',
+          brand: 'PELLE',
+          unit: '尺',
+          purchaseCount: 2000,
+          purchasePrice: 20,
+          purchaseAmount: 4000,
+          replaceCount: 1000,
+        }
+      ]
+    },
+    {
+      id: 2,
+      orderNo: 'SPTY12',
+      applyAbstract: '进口头层黄牛皮荔枝纹',
+      supplierName: '广州白马皮具交易中心',
+      createTime: '2020-05-12 08:08',
+      orderStatus: '已完成',
+      orderType: '询价采购',
+      orderDeliveryProducts: [
+        {
+          id: 3,
+          productId: 1110,
+          productName: '进口头层黄牛皮荔枝纹/红色',
+          category: '牛皮',
+          brand: 'PELLE',
+          unit: '尺',
+          purchaseCount: 2000,
+          purchasePrice: 20,
+          purchaseAmount: 4000,
+          replaceCount: 1000,
+        },
+        {
+          id: 4,
+          productId: 1110,
+          productName: '进口头层黄牛皮荔枝纹/红色',
+          category: '牛皮',
+          brand: 'PELLE',
+          unit: '尺',
+          purchaseCount: 2000,
+          purchasePrice: 20,
+          purchaseAmount: 4000,
+          replaceCount: 1000,
+        }
+      ]
+    },
+    {
+      id: 3,
+      orderNo: 'SPTY12',
+      applyAbstract: '进口头层黄牛皮荔枝纹',
+      supplierName: '广州白马皮具交易中心',
+      createTime: '2020-05-12 08:08',
+      orderStatus: '已完成',
+      orderType: '询价采购',
+      orderDeliveryProducts: [
+        {
+          id: 5,
+          productId: 1110,
+          productName: '进口头层黄牛皮荔枝纹/红色',
+          category: '牛皮',
+          brand: 'PELLE',
+          unit: '尺',
+          purchaseCount: 2000,
+          purchasePrice: 20,
+          purchaseAmount: 4000,
+          replaceCount: 1000,
+        },
+        {
+          id: 6,
+          productId: 1110,
+          productName: '进口头层黄牛皮荔枝纹/红色',
+          category: '牛皮',
+          brand: 'PELLE',
+          unit: '尺',
+          purchaseCount: 2000,
+          purchasePrice: 20,
+          purchaseAmount: 4000,
+          replaceCount: 1000,
+        }
+      ]
+    },
+    {
+      id: 4,
+      orderNo: 'SPTY12',
+      applyAbstract: '进口头层黄牛皮荔枝纹',
+      supplierName: '广州白马皮具交易中心',
+      createTime: '2020-05-12 08:08',
+      orderStatus: '已完成',
+      orderType: '询价采购',
+      orderDeliveryProducts: [
+        {
+          id: 7,
+          productId: 1110,
+          productName: '进口头层黄牛皮荔枝纹/红色',
+          category: '牛皮',
+          brand: 'PELLE',
+          unit: '尺',
+          purchaseCount: 2000,
+          purchasePrice: 20,
+          purchaseAmount: 4000,
+          replaceCount: 1000,
+        },
+        {
+          id: 8,
+          productId: 1110,
+          productName: '进口头层黄牛皮荔枝纹/红色',
+          category: '牛皮',
+          brand: 'PELLE',
+          unit: '尺',
+          purchaseCount: 2000,
+          purchasePrice: 20,
+          purchaseAmount: 4000,
+          replaceCount: 1000,
+        }
+      ]
+    },
+  ]
+
+  const handleRowSelectionChangge = (selectedRowKeys, selectedRows) => {
+    console.log(selectedRowKeys, selectedRows)
+  }
+
+  const searchOption = {
+    searchList: [
+      {
+        type: 'string',
+        component: 'Search',
+        key: 'orderNo',
+        placeholder: '搜索',
+      }
+    ],
+    highSearchList: [
+      {
+        type: 'string',
+        component: 'Input',
+        key: 'applyAbstract',
+        placeholder: '订单摘要',
+      },
+      {
+        type: 'array',
+        component: 'DateRangePicker',
+        key: ['startTime', 'endTime'],
+        span: 6,
+        placeholder: ['开始时间', '结束时间'],
+      },
+      {
+        type: 'string',
+        component: 'Input',
+        key: 'supplierName',
+        placeholder: '供应会员',
+      },
+      {
+        type: 'string',
+        component: 'Select',
+        key: 'orderType',
+        placeholder: '订单类型',
+        option: [
+          {
+            label: '所有',
+            value: 0
+          }
+        ]
+      },
+    ]
+  }
+
+  return (
+    <Modal
+      title="选择换货商品"
+      width={1200}
+      visible={visible}
+      centered
+      onOk={() => onOk()}
+      onCancel={() => onCancel()}
+    >
+      <div className={styles.modal_wrap}>
+        <SearchForm option={searchOption} />
+        <div className={styles.modal_tb_wrap}>
+          <NestTable
+            NestColumns={[exchangeGoodsModalTableColumn, exchangeGoodsModalChildTableColumn]}
+            rowKey='id'
+            className="common_tb"
+            rowClassName={(_, index) => (index % 2) === 0 && "tb_bg"}
+            childrenDataKey='orderDeliveryProducts'
+            dataSource={mockData}
+            childRowSelection={{
+              onChange: handleRowSelectionChangge
+            }}
+          />
+        </div>
+        <div className={styles.modal_tb_pagination}>
+          <Pagination
+            showQuickJumper
+            showSizeChanger
+            pageSize={pageSize}
+            current={current}
+            total={totalCount}
+            showTotal={total => `共 ${total} 条`}
+          />
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default AddModal

src/pages/afterService/exchangeGoods/waitSubmitOrderList/components/exchangeGoods/index.less

@@ -16,6 +16,39 @@
   }
 }
 
+.operation_btn_group {
+  display: flex;
+  align-items: center;
+
+  .opration_btn_split {
+    position: relative;
+    height: 16px;
+    width: 1px;
+    background: #EEF0F3;
+    margin: 0 15px;
+  }
+
+  .operation_btn {
+    position: relative;
+    padding: 5.6px 0;
+  }
+}
+
 .tb_wrap {
   margin-top: 24px;
+
+  .exchange_goods_tb {
+    position: relative;
+
+    :global {
+      .ant-table-thead>tr>th {
+        background-color: #FFF;
+
+      }
+    }
+  }
+
+  .tb_bg {
+    background-color: #FAFBFC;
+  }
 }
\ No newline at end of file

src/pages/afterService/exchangeGoods/waitSubmitOrderList/components/exchangeGoods/index.tsx

-import React from 'react'
+import React, { useState } from 'react'
 import { PlusOutlined } from '@ant-design/icons'
 import { exchangeGoodsTableColumn } from './model/exchangeGoodsTable'
+import AddModal from './components/addModal'
 import styles from './index.less'
-import { Table } from 'antd'
+import { Table, Button } from 'antd'
 
 interface ExchangeGoodsProps {
 
 }
 
 const ExchangeGoods: React.FC<ExchangeGoodsProps> = (props) => {
+  const [addVisible, setAddvisible] = useState<boolean>(true)
 
   const data = [
     {
@@ -23,18 +25,108 @@ const ExchangeGoods: React.FC<ExchangeGoodsProps> = (props) => {
       purchaseAmount: 40000,
       replaceCount: 2000,
       replaceReason: '质量检查不合格',
+    },
+    {
+      id: 2,
+      orderNo: 'SPTY12',
+      productId: '1110',
+      productName: '进口头层黄牛皮荔枝纹/红色/XXL',
+      category: 'category',
+      unit: '',
+      purchaseCount: 2000,
+      purchasePrice: 20,
+      purchaseAmount: 40000,
+      replaceCount: 2000,
+      replaceReason: '质量检查不合格',
+    },
+    {
+      id: 3,
+      orderNo: 'SPTY12',
+      productId: '1110',
+      productName: '进口头层黄牛皮荔枝纹/红色/XXL',
+      category: 'category',
+      unit: '',
+      purchaseCount: 2000,
+      purchasePrice: 20,
+      purchaseAmount: 40000,
+      replaceCount: 2000,
+      replaceReason: '质量检查不合格',
+    },
+    {
+      id: 4,
+      orderNo: 'SPTY12',
+      productId: '1110',
+      productName: '进口头层黄牛皮荔枝纹/红色/XXL',
+      category: 'category',
+      unit: '',
+      purchaseCount: 2000,
+      purchasePrice: 20,
+      purchaseAmount: 40000,
+      replaceCount: 2000,
+      replaceReason: '质量检查不合格',
+    },
+    {
+      id: 5,
+      orderNo: 'SPTY12',
+      productId: '1110',
+      productName: '进口头层黄牛皮荔枝纹/红色/XXL',
+      category: 'category',
+      unit: '',
+      purchaseCount: 2000,
+      purchasePrice: 20,
+      purchaseAmount: 40000,
+      replaceCount: 2000,
+      replaceReason: '质量检查不合格',
     }
   ]
 
+  const columns = exchangeGoodsTableColumn.concat([
+    {
+      title: '操作',
+      dataIndex: 'opration',
+      render: () => {
+        return <div className={styles.operation_btn_group}>
+          <Button type="link" className={styles.operation_btn}>编辑</Button>
+          <div className={styles.opration_btn_split}></div>
+          <Button type="link" className={styles.operation_btn}>删除</Button>
+        </div>
+      }
+    },
+  ])
+
+  /**
+   * 确认添加换货商品
+   */
+  const handldAddOk = () => {
+
+  }
+
+  /**
+   * 取消添加
+   */
+  const handleAddCancel = () => {
+    setAddvisible(false)
+  }
   return (
     <div>
-      <div className={styles.add_btn}>
+      <div className={styles.add_btn} onClick={() => setAddvisible(true)}>
         <PlusOutlined />
         <span>选择换货商品</span>
       </div>
       <div className={styles.tb_wrap}>
-        <Table dataSource={data} columns={exchangeGoodsTableColumn} />
+        <Table
+          className={styles.exchange_goods_tb}
+          rowKey="id"
+          rowClassName={(_, index) => (index === 0 || (index % 2) === 0) && styles.tb_bg}
+          dataSource={data}
+          columns={columns}
+        />
       </div>
+      <AddModal
+        visible={addVisible}
+        onOk={handldAddOk}
+        onCancel={handleAddCancel}
+      />
     </div>
   )
 }

src/pages/afterService/exchangeGoods/waitSubmitOrderList/components/exchangeGoods/model/exchangeGoodsTable.tsx

@@ -61,9 +61,95 @@ export const exchangeGoodsTableColumn: any[] = [
     dataIndex: 'replaceReason',
     ellipsis: true,
   },
+]
+
+export const exchangeGoodsModalTableColumn: any[] = [
   {
-    title: '操作',
-    dataIndex: 'opration',
-    ellipsis: true,
+    title: '订单号',
+    dataIndex: 'orderNo',
+    key: 'orderNo'
+  },
+  {
+    title: '订单摘要',
+    dataIndex: 'applyAbstract',
+    key: 'applyAbstract',
+  },
+  {
+    title: '供应会员',
+    dataIndex: 'supplierName',
+    key: 'supplierName',
+    // render: text => formatTimeString(text)
+  },
+  {
+    title: '下单时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+  },
+  {
+    title: '订单状态',
+    dataIndex: 'orderStatus',
+    key: 'orderStatus'
+  },
+  {
+    title: '订单类型',
+    dataIndex: 'orderType',
+    key: 'orderType',
+  },
+]
+
+export const exchangeGoodsModalChildTableColumn: any[] = [
+  {
+    title: 'ID',
+    dataIndex: 'productId',
+
+    key: 'productId',
+  },
+  {
+    title: '商品名称',
+    dataIndex: 'productName',
+
+    key: 'productName',
+  },
+  {
+    title: '品类',
+    dataIndex: 'category',
+
+    key: 'category',
+  },
+  {
+    title: '品牌',
+    dataIndex: 'brand',
+
+    key: 'brand',
+  },
+  {
+    title: '单位',
+    dataIndex: 'unit',
+
+    key: 'unit',
+  },
+  {
+    title: '订单数量',
+    dataIndex: 'purchaseCount',
+
+    key: 'purchaseCount',
+  },
+  {
+    title: '采购单价',
+    dataIndex: 'purchasePrice',
+
+    key: 'purchasePrice',
+  },
+  {
+    title: '采购金额',
+    dataIndex: 'purchaseAmount',
+
+    key: 'purchaseAmount',
+  },
+  {
+    title: '已换货数量',
+    dataIndex: 'replaceCount',
+
+    key: 'replaceCount',
   },
 ]
\ No newline at end of file

src/pages/editor/settingsPanel/propsSettings/components/GoodsSetting/index.tsx

@@ -43,8 +43,12 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => {
   const [goodsIds, setGoodsIds] = useState<any>([])
   const [totalCount, setTotalCount] = useState<number>(0)
   const [filterParam, setFilterParam] = useState()
+  const [spinLoading, setSpinLoading] = useState<boolean>(false)
   const [newProps, setNewProps] = useState(props)
 
+  const [categoryResponseList, setCategoryResponseList] = useState<any>([])
+  const [noSelectBrands, setNoSelectBrands] = useState<any[]>([])
+
   const changeNewProps = (key: string, data: any) => {
     const newProps = { ...props }
     newProps[key] = data
@@ -52,6 +56,44 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => {
   }
 
   useEffect(() => {
+    fetchBrandsList()
+    fetchCategoryList()
+  }, [])
+
+  const fetchCategoryList = () => {
+    let param = {
+      categoryId: categoryid,
+      templateId: templateid
+    }
+    setSpinLoading(true)
+    //@ts-ignore
+    PublicApi.getTemplatePlatformFindCategoryList(param).then(res => {
+      const data = res.data
+      setCategoryResponseList(data.categoryBOList || [])
+      setSpinLoading(false)
+    })
+  }
+
+  const fetchBrandsList = () => {
+    let param = {
+      type: 0,
+      templateId: templateid,
+      categoryId: categoryid,
+      current: 1,
+      pageSize: 100
+    }
+
+    //@ts-ignore
+    PublicApi.getTemplatePlatformFindBrandList(param).then((res: any) => {
+      if (res.code === 1000) {
+        const dataInfo = res.data
+        setNoSelectBrands(dataInfo.data || [])
+      }
+    })
+  }
+
+
+  useEffect(() => {
     fetchGoodsList()
   }, [filterParam])
 
@@ -293,7 +335,9 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => {
                             className={styles.mar_bot_0}
                           >
                             <Select placeholder="品类" style={{ width: 180 }}>
-                              <Select.Option value="1">1</Select.Option>
+                              {
+                                categoryResponseList.map((item, index) => <Select.Option kye={`select_category_item_${index}`} value={item.categoryId}>{item.categoryName}</Select.Option>)
+                              }
                             </Select>
                           </Form.Item>
                         </Col>
@@ -303,7 +347,9 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => {
                             className={styles.mar_bot_0}
                           >
                             <Select placeholder="品牌" style={{ width: 180 }}>
-                              <Select.Option value="1">1</Select.Option>
+                              {
+                                noSelectBrands.map((item, index) => (<Select.Option kye={`select_brand_item_${index}`} value={item.brandId}>{item.brandName}</Select.Option>))
+                              }
                             </Select>
                           </Form.Item>
                         </Col>

src/pages/lxMall/commodityDetail/index.tsx

@@ -245,6 +245,9 @@ const CommodityDetail = (props) => {
    * 加入进货单
    */
   const handleAddToPurchase = () => {
+    if (!checkoutUserInfo()) {
+      return
+    }
     if (!selectCommodityId) {
       message.destroy()
       message.info("请选择商品属性")
@@ -302,10 +305,31 @@ const CommodityDetail = (props) => {
     return link
   }
 
+  const checkoutUserInfo = () => {
+    const userInfo = getAuth()
+    if (userInfo) {
+      if (userInfo.memberRoleType !== 2) {
+        message.info('当前角色无法购买')
+        return false
+      }
+      if (userInfo.memberId === commodityDetail.memberId) {
+        message.info("不能购买自己的商品")
+        return false
+      }
+      return true
+    } else {
+      message.info("请先登录")
+      return false
+    }
+  }
+
   /**
    * 立即购买
    */
   const handleToBuy = (priceType: COMMODITY_TYPE = COMMODITY_TYPE.prompt) => {
+    if (!checkoutUserInfo()) {
+      return
+    }
     if (!selectCommodityId) {
       message.destroy()
       message.info("请选择商品属性")

src/pages/lxMall/components/Filter/components/NewJoin/index.tsx

@@ -8,6 +8,7 @@
 
 import React, { useState, useEffect } from 'react'
 import { PublicApi } from '@/services/api'
+import ImageBox from '@/components/ImageBox'
 import styles from './index.less'
 
 interface NewJoinPropsType {
@@ -40,7 +41,7 @@ const NewJoin: React.FC<NewJoinPropsType> = (props) => {
           newJoinShopList && newJoinShopList.map(item => (
             <div className={styles.new_join_list_item} key={`new_join_list_item_${item.id}`}>
               <div className={styles.new_join_logo}>
-                <img src={item.logo} />
+                <ImageBox width={32} height={32} imgUrl={item.logo} direction="column" />
               </div>
               <div className={styles.new_join_name}>
                 <a href={`/shop?shopId=${btoa(JSON.stringify({ shopId: item.id, memberId: item.memberId }))}`}>

src/pages/lxMall/shopList/list.tsx

@@ -5,6 +5,7 @@ import { Rate } from 'antd'
 import shop_icon from '@/assets/imgs/shop_icon.png'
 import credit_icon from '@/assets/imgs/credit_icon.png'
 import { priceFormat } from '@/utils/numberFomat'
+import ImageBox from '@/components/ImageBox'
 import styles from './list.less'
 
 interface CommodityListPropsType {
@@ -46,7 +47,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
             <div className={styles.shop_list_left}>
               <div className={styles.shop_list_info}>
                 <div className={styles.shop_list_info_imgbox}>
-                  <div className={styles.shop_list_info_imgbox_img} style={{ backgroundImage: `url(${item.logo})` }}></div>
+                  <ImageBox width={70} height={70} imgUrl={item.logo} direction="column" />
                 </div>
                 <div className={styles.shop_list_info_box}>
                   <div className={styles.shop_list_info_name}>