ttk-app-core/src/apps/app-demo/invoice-manage/e-invoice-normal/components/CustomModal.js

@ttk/recat enterprise develop framework

import React, { useState, useCallback, useEffect } from 'react'
import { Spin, Card, Layout, Row, Col, Form, Input, Checkbox, AntdSelect as Select, Button, DataGrid, Pagination } from '@ttk/component'
import { Modal, Table } from "antd"
import { Link } from "@ttk/router"
import { useData, useActions, useCommit } from '@ttk/app-loader'

export default function Component(props) {

  const commit = useCommit()
  const actions = useActions(props)
  const customSearchForm = useData([props, 'customSearchForm']).toJS()
  const customTableData = useData([props, 'customTableData']).toJS()
  const { showCustomModal: showModal  } = useData([props, 'tempState']).toJS()
  const { pageIndex, pageSize, recordCount } = useData([props, 'customPagination']).toJS()
  
  // 内部管理loading状态
  const [loading, setLoading] = useState(false)

  async function fetchData() {
    setLoading(true)
    await actions.customTableData()
    setLoading(false)
  }

  // 初始化
  useEffect(() => {
    fetchData()
  }, []) 

  // 更新表单方法
  const updateForm = useCallback((e) => {
    async function asyncFun(arges) {
      await actions.updateCustomSearchForm(e)
    }
    asyncFun(e)
  }, [])

  const onChose = useCallback((row) => {
    let custom = {
      ghdwmc: row.qyMc,
      ghdwsbh: row.qyNsrsbh,
      ghdwdzdh: (row.dz || "") + " " + (row.dh || ""),
      ghdwyhzh: (row.yh || "") + " " + (row.yh_zh || "")
    }
    // commit([props, 'formObj'], { type: "update", data: custom })
    actions.updateForm(custom)
    commit([props, 'customSearchForm'], { type: "init" })
    commit([props, 'tempState'], { type: "setCustomModal", data: false })
    commit([props, "customTableData"], { type: "update", data: []})
  }, [])

  const onPageSizeChange = useCallback((current, pageSize) => {
    return async function () {
      await actions.updateCustomSearchForm({ pageSize })
      fetchData()
    }()
  })

  const onPageChange = useCallback((page, pageSize) => {
    return async function () {
      await actions.updateCustomSearchForm({ pageIndex: page })
      fetchData()
    }()
  })

  const onSearch = useCallback(() => {
    return async function () {
      await actions.updateCustomSearchForm({ pageIndex: 1 })
      fetchData()
    }()
  })

  // 清除方法
  const onCancel = useCallback(() => {
    commit([props, 'customSearchForm'], { type: "init" })
    commit([props, 'tempState'], { type: 'setCustomModal', data: false })
    commit([props, "customTableData"], { type: "update", data: []})
  }, [])

  const tableThead = [{
    title: '序号',
    width:80,
    align: "center",
    key: "sortnum",
    render:(text,record,index)=>`${index+1}`
  }, {
    dataIndex: 'bm',
    title: '客户编号',
    key: "bm",
    align: "center",
    width: 120
  }, {
    dataIndex: 'qyNsrsbh',
    title: '纳税人识别号',
    key: "qyNsrsbh",
    align: "center",
    width: 180
  }, {
    dataIndex: 'qyMc',
    title: '企业名称',
    align: "center",
    key: "qyMc",
    flexGrow: 1,
    width: 100
  }, {
    dataIndex: 'operation',
    key: 'operation',
    className: "operationcell",
    title: '操作',
    width: 80,
    render: (text, row, rowIndex) => {
      return (
        <span onClick={() => onChose(row)}>选择</span>)
      }
  }]

  return (
    <Modal
      className="ttk-card-form"
      width={900}
      height={600}
      title="选择客户信息"
      visible={showModal}
      footer={false}
      maskClosable={false}
      onCancel={onCancel}
    >
        <Spin>
            <Card bordered={true} style={{marginBottom:10}}>
              <Row>
                <Form layout="inline">
                  <Form.Item>
                    <Input allowClear className="mk-input" value={customSearchForm.keyword} placeholder="请输入客户编码/税号/企业名称进行查询" onChange={e => updateForm({ keyword: e.target.value })} style={{ width: 300 }}/>
                    <Button type="primary" onClick={onSearch} style={{ marginLeft: "10px" }}>查询</Button>
                  </Form.Item>
                </Form>
              </Row>
              <Row>
              
                <Table loading={loading} bordered className="mk-table" dataSource={customTableData} columns={tableThead} pagination={false} rowKey="id"/>
              </Row>
            </Card>
            <Row style={{ margin: "10px 0", padding: "0 10px" }}>
              <Pagination
                pageSize={pageSize}
                total={recordCount}
                current={pageIndex}
                showSizeChanger={true}
                pageSizeOptions={['10', '20', '50', '100', '200', '300', '400']}
                onChange={onPageChange}
                onShowSizeChange={onPageSizeChange}
              />
            </Row>
        </Spin>
        <span>没有找到所需的客户信息? </span><Link to="/app-root/layout/client-maintain">去新增</Link>
    </Modal>
  )
}