ftp hooks

通过hook快速构建 ftp 页面，基于 cnFilter, cnTable 组件

• cnFilter https://m.cone.cainiao-inc.com/market/detail?id=3313&type=1
• cnTable https://m.cone.cainiao-inc.com/market/detail?id=4077&type=1

安装

[t]npm install @cniot/hooks-ftp

使用

import React from 'react'
import ReactDOM from 'react-dom'
import CNFilter from '@alife/cn-filter';
import CNTable from '@alife/cn-table';
import {Input} from 'cn-next';
import axios from 'axios';
import useTable from './useTable';
import useFilter from './useFilter';

const columns = [
  {
    title: '省份',
    dataIndex: 'itemId',
    align:"left",
    width: 500,
  },
  {
    title: '高考人数',
    dataIndex: 'itemName',
  },
  {
    title: '一本率',
    dataIndex: 'productionDate',
  },
  {
    title: '二本率',
    dataIndex: 'ownerName',
  },
  {
    title: '高中入学率',
    dataIndex: 'expireDate',
  },
  {

    title: 'ownerId',
    dataIndex: 'ownerId'
  }
];



// https://g.alicdn.com/code/npm/@alife/cn-filter/1.0.3/storybook-docs/index.html
// https://page.cainiao.com/new-developer/tabledocs/table-story.html

function getTableData(query, currentPage, pageSize){
  console.log("getTableData", query, currentPage, pageSize);
  return axios.get("https://mocks.alibaba-inc.com/mock/kzqmolxo/api/outbound/pick/asrs/rf/unPickedItemList", {
    params: {
      ...query, 
      pageSize, 
      currentPage
    }
  }).then((ret)=>{
    return Promise.resolve({
      total: 100,
      dataSource: ret.data.data.itemInfoList
    })
  })
}

export default function Table() {

  const table = useTable(getTableData)
  const filter = useFilter((filter)=>{
    return table.onSearch(filter);
  });

  React.useEffect(()=>{
    table.onSearch({}, 1, 20)
  }, [])

  return (
    <div className="App">
      <CNFilter
        {...filter}
      >
        <CNFilter.Item label="hello" name="abc">
          <Input />
        </CNFilter.Item>
        <CNFilter.Item label="hello" name="abc1">
          <Input />
        </CNFilter.Item>
        <CNFilter.Item label="hello" name="abc2">
          <Input />
        </CNFilter.Item>
        <CNFilter.Item label="hello" name="abc3">
          <Input />
        </CNFilter.Item>
        <CNFilter.Item label="hello" name="abc4">
          <Input />
        </CNFilter.Item>
      </CNFilter>
      <CNTable
        {...table}
        primaryKey={"barCode"}
        columns={columns}
        // 操作列配置
        // operateColumn={{
        //   width: 200,
        //   buttons: [
        //     {
        //       children: '点击',
        //       onClick(event, record, index) {
        //         console.log("点击", event, record, index);
        //         // 点击处理
        //       },
        //     }
        //   ],
        // }}
        
        // 多选打开下面2项
        // showSelect={true}
        // onSelectChange={console.log}

        // toolbar 操作区
        // toolbar={{
        //   left: [{
        //     children:"编辑",
        //     type:"primary",
        //     onClick: function(event, record, index){
        //       console.log(event, record, index);
        //     }
        //   }],
        //   right: [
        //     "size",
        //     'fullscreen',
        //     'columnSet',
        //   ]
        // }}
      ></CNTable>
    </div>
  )
}




ReactDOM.render(<Table></Table>, document.getElementById('root'))