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

@ttk/recat enterprise develop framework

import React, { useState, useCallback, useEffect } from 'react'
import { Button, Input, Select, Message, Modal } from '@ttk/component'
import { useActions, useData, useCommit } from '@ttk/app-loader'
import webapi from "../webapi"
import moment from 'moment'
const { Option } = Select

 export default function Header(props) {
  const actions = useActions(props)
  const commit = useCommit()
  const searchForm = useData([props, 'searchForm']).toJS()
  const selectKey = useData([props, 'selectKey']).toJS()
  const profileArr = [
    {id: 'N', name: '当前部门'},
    {id: 'Y', name: '当前及下级部门'},
  ]
  let providerAppId = ""

  async function fetchData() {
    // 获取列表数据
    commit([props, 'tempState'], { type: 'setLoading', data: true })
    actions.tableData()
    commit([props, 'tempState'], { type: 'setLoading', data: false })
  }

  // 加载数据
  useEffect(() => {
    fetchData()
  }, []) 

  // 更新查询表单方法
  const updateForm = useCallback((e) => {
    async function asyncFun(arges) {
      await actions.updateSearchForm(e)
    }
    asyncFun(e)
  }, [])
  
  // 查询
  const onSearch = useCallback((e) => {
    fetchData()
  }, [])
  
  // 重置
  const onClear = useCallback((e) => {
    async function asyncFun() {
      await actions.initSearchForm({})
      fetchData()
    }
    asyncFun()
  }, [])

  const onAdd = useCallback(() => {
    if (selectKey[0].id === "0") {
      Message.warning('请先选择一个部门');
      return
    }
    commit([props, 'tempState'], { type: 'setModal', data: true })
  }, [selectKey])

  return (
    <div className="ttk-table-app-simplelist-header">
      <div className="ttk-table-app-simplelist-header-left">
        <Input className="mk-input" value={searchForm.searchCondition} placeholder="姓名/手机号码/服务号码" onChange={e => updateForm({ searchCondition: e.target.value })} style={{ width: 160 }}/>
        <Select 
          allowClear 
          className="mk-select" 
          value={searchForm.isContainChild} 
          placeholder="选择部门" 
          onChange={(e) => updateForm({isContainChild: e})} 
          style={{ width: 160 }}>
          {profileArr.map((item) => {
            return <Option title={item.id} key={item.id} value={item.id}>{item.name}</Option>
          })}
        </Select>
        <Button type="primary" onClick={onSearch}>查询</Button>
        <Button onClick={onClear}>重置</Button>
      </div>
      <div className="ttk-table-app-simplelist-header-right">
        <Button
          icon="plus" 
          type="primary" 
          onClick={onAdd}>新增用户
        </Button>
      </div>
    </div>
  )
}