ttk-app-core/src/apps/app-demo/org-manage/admin-organization-page-departmentManager/components/TableArea.js

@ttk/recat enterprise develop framework

import React, { useEffect, useState, useCallback } from 'react'
// import { Modal, Button, Table, Layout } from 'antd'
import {DataGrid, Layout, Switch, Icon, Menu, Dropdown, Button} from '@ttk/component' // '../datagrid'
import { useData, useActions, useCommit } from '@ttk/app-loader'

export default function TableArea(props) {
  const commit = useCommit()
  const actions = useActions(props)
  const loading = useData([props, 'tempState'])
  const tableData = useData([props, 'tableData']).toJS()
  const tableThead = [{
    dataIndex: 'userName',
    title: '姓名',
    width: 120
  }, {
    dataIndex: 'encode',
    title: '服务号码',
    width: 100
  }, {
    dataIndex: 'mobilePhone',
    title: '手机号码',
    width: 100
  }, {
    dataIndex: 'dutiesName',
    title: '所属岗位',
    flexGrow: 1,
    width: 250
  }, {
    dataIndex: 'depName',
    title: '所属部门',
    flexGrow: 1,
    width: 100
  }]

  const onEdit = useCallback((id) => {
    commit([props, 'tempState'], { type: 'setEditId', data: id })
    commit([props, 'tempState'], { type: 'setModal', data: true })
  })

  const onResetPwd = useCallback((id) => {
    commit([props, 'tempState'], { type: 'setResetModal', data: true })
  })

  const columns = [
    ...tableThead.map((item, index) => {
      return <DataGrid.Column
        key={index}
        width={item.width}
        flexGrow={item.flexGrow}
        columnKey={item.dataIndex}
        header={<DataGrid.Cell key={index}>{item.title}</DataGrid.Cell>}
        cell={({ rowIndex, ...props }) => {
          return (<DataGrid.Cell tip={true} height={40} key={index+rowIndex} value={tableData[rowIndex][item.dataIndex]} />)
        }}
      ></DataGrid.Column>
    }),
    <DataGrid.Column
      className="operate"
      width={160}
      header={<DataGrid.Cell>操作</DataGrid.Cell>}
      cell={({ rowIndex, ...props }) => {
        return (
        <div className="operationcell">
            <Switch size="small" defaultChecked />
            <Icon type="form" onClick={() => onEdit(tableData[rowIndex].userId)}/>
            <Dropdown size="mini" overlay={<Menu>
              <Menu.Item key="1">
                  岗位分配
                </Menu.Item>
                <Menu.Item key="2" onClick={() => onResetPwd()}>
                  重置密码
                </Menu.Item>
              </Menu>}>
              <Button>
                更多 <Icon type="down" />
              </Button>
            </Dropdown>
        </div>)
      }}
    ></DataGrid.Column>
  ]
  

  return (
    <Layout className="ttk-table-app-simplelist-content">
      <DataGrid
        pagination={false}
        rowsCount={tableData.length}
        rowHeight={40}
        headerHeight={40}
        readonly={false}
        // enableSequence={true}
        // startSequence={1}
        // enableAddDelrow={true}
        // onAddrow={()=>console.log('on add row: ', arguments)}
        // onDelrow={()=>console.log('on del row: ', arguments)}
        columns={columns}
      >
      </DataGrid>
    </Layout>
  )
}