完成会员导入列表页 50%

config/routes/memberRoute.ts

@@ -20,7 +20,12 @@ const MemberRoute = {
         {
           path: '/memberAbility/manage/import',
           name: 'memberImport',
-          component: '@/pages/index',
+          component: '@/pages/member/memberImport/index',
+        },
+        {
+          path: '/memberAbility/manage/maintian',
+          name: 'memberMaintain',
+          component: '@/pages/member/memberMaintain/index',
         }
       ]
     }

src/locales/zh-CN/menu.ts

@@ -41,6 +41,7 @@ export default {
   'menu.memberAbility': '会员',
   'menu.memberAbility.memberManage': '会员管理',
   'menu.memberAbility.memberManage.memberImport': '会员导入',
+  'menu.memberAbility.memberManage.memberMaintain': '会员维护',
 
   // 店铺能力
   'menu.shopAbility': '店铺',

src/pages/member/memberImport/index.less

+.nameCell {
+  text-align: left;
+
+  .levelIcon1 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("../../../assets/imgs/level1@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+
+  .levelIcon2 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("../../../assets/imgs/level2@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+
+  .levelIcon3 {
+    width          : 100%;
+    height         : 16px;
+    background     : url("../../../assets/imgs/level3@2x.png") no-repeat;
+    background-size: 54px 16px;
+    margin-top     : 8px;
+  }
+}
\ No newline at end of file

src/pages/member/memberImport/index.tsx

+import React, { useState, useRef } from 'react'
+import { history } from 'umi'
+import { Button, Form, Card, Modal, Result, Progress, Select } from 'antd'
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import {
+  PlusOutlined,
+  FileExcelOutlined,
+  EyeOutlined
+} from '@ant-design/icons'
+import { StandardTable } from 'god'
+import { ColumnType } from 'antd/lib/table/interface'
+import { IFormFilter, IButtonFilter } from 'god/dist/src/standard-table/TableController'
+import './index.less'
+
+interface Item {
+  key: string;
+  id: string;
+  level: string;
+  name: string;
+  type: string;
+  role: string;
+  applyTime: string;
+  status: string;
+  externalStatus: string;
+}
+
+const data = [
+  {
+    key: '1',
+    id: '1',
+    level: '1',
+    name: '温州隆昌皮具有限公司',
+    type: '企业会员',
+    role: '供应商',
+    applyTime: '2020-05-12 08:08',
+    status: '正常',
+    externalStatus: '待提交',
+  },
+  {
+    key: '2',
+    id: '2',
+    level: '2',
+    name: '温州隆昌皮具有限公司',
+    type: '企业会员',
+    role: '供应商',
+    applyTime: '2020-05-12 08:08',
+    status: '正常',
+    externalStatus: '待提交',
+  },
+  {
+    key: '3',
+    id: '3',
+    level: '3',
+    name: '温州隆昌皮具有限公司',
+    type: '企业会员',
+    role: '供应商',
+    applyTime: '2020-05-12 08:08',
+    status: '正常',
+    externalStatus: '待提交',
+  }
+]
+
+
+const memberImport: React.FC<{}> = () => {
+  const ref = useRef({})
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([])
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      align: 'center',
+      key: 'id',
+    },
+    {
+      title: '会员名称',
+      dataIndex: 'name',
+      align: 'center',
+      key: 'name',
+      render: (text: any, record: any) => {
+        return (
+          <div className="nameCell">
+            <div className="commonPickColor nameCell-title" onClick={() => handleSee(record)}>{text}&nbsp;<EyeOutlined /></div>
+            <div className={`levelIcon${record.level}`}></div>
+          </div>
+        )
+      }
+    },
+    {
+      title: '会员类型',
+      dataIndex: 'type',
+      align: 'center',
+      key: 'type',
+    },
+    {
+      title: '会员角色',
+      dataIndex: 'role',
+      align: 'center',
+      key: 'role',
+    },
+    {
+      title: '申请来源/时间',
+      dataIndex: 'applyTime',
+      align: 'center',
+      key: 'applyTime',
+    },
+    {
+      title: '会员状态',
+      dataIndex: 'status',
+      align: 'center',
+      key: 'status',
+    },
+    {
+      title: '外部状态',
+      dataIndex: 'externalStatus',
+      align: 'center',
+      key: 'externalStatus',
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      align: 'center',
+      render: (record: any) => {
+        return (
+          <>
+            <Button type='link'>提交审核</Button>
+            <Button type='link'>编辑</Button>
+            <Button type='link'>更多</Button>
+          </>
+        )
+      }
+    }
+  ];
+
+  const search: IFormFilter[] = [
+    {
+      type: 'Input',
+      value: 'keywords',
+      col: 4,
+      placeHolder: '货号'
+    },
+    {
+      type: 'Input',
+      value: 'name',
+      col: 4,
+      placeHolder: '货品名称'
+    },
+    {
+      type: 'Input',
+      value: 'brand',
+      col: 4,
+      placeHolder: '品牌'
+    },
+    {
+      type: 'Input',
+      value: 'type',
+      col: 4,
+      placeHolder: '品类'
+    },
+    {
+      type: 'Input',
+      value: 'num',
+      col: 4,
+      placeHolder: '导入批次'
+    },
+  ]
+
+  const searchBarActions: IButtonFilter[] = [
+    {
+      text: '查询',
+      handler: () => {
+        console.log('查询')
+      }
+    },
+    {
+      text: '重置',
+      handler: () => {
+        console.log('重置')
+      }
+    },
+    {
+      type: 'primary',
+      text: '新建',
+      icon: <PlusOutlined />,
+      handler: () => {
+        history.push('/commodity/goods/addGoods')
+      }
+    },
+    {
+      text: '导入数据',
+      handler: () => {
+        console.log('导入')
+        // setImportModal(true)
+      }
+    },
+    {
+      text: '批量删除',
+      handler: () => {
+        console.log('删除')
+      }
+    },
+    {
+      text: '删除导入批次',
+      handler: () => {
+        // setDeleteBatchModal(true)
+        console.log('删除导入')
+      }
+    },
+  ]
+
+  const rowSelection = {
+    selectedRowKeys: selectedRowKeys,
+    onChange: (selectedRowKeys: any, selectedRows: any) => {
+      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+    },
+  };
+
+  // 模拟请求
+  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 handleSee = (record: any) => {
+    console.log('see')
+  }
+
+  return (
+    <PageHeaderWrapper>
+      <Card>
+        <StandardTable
+          columns={columns}
+          currentRef={ref}
+          rowSelection={rowSelection}
+          fetchTableData={(params: any) => fetchData(params)}
+          formFilters={search}
+          buttonFilters={searchBarActions}
+        />
+      </Card>
+    </PageHeaderWrapper >
+  )
+}
+
+export default memberImport

src/pages/member/memberMaintain/index.tsx

+import React, {Component} from 'react';
+
+class Index extends Component<{}, {}> {
+  render() {
+    return <div>
+      index
+    </div>
+  }
+}
+
+export default Index