pc-admin/src/pages/certificateIssuance/index.jsx

import React, { useRef, useState } from 'react'
import moment from 'moment';
import { history } from 'umi';
import { DatePicker, Button, Modal, Table, message, Form, Input, Select } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import PageTable from '@/components/PageTable'
import { getMakeList, getApplicationDetail, updateBindCard, updateMake, exportCardList } from '@/services/application'

const { RangePicker } = DatePicker;
const { Option } = Select;

const formatterTime = (val) => {
  return val ? moment(val).format('YYYY-MM-DD HH:mm') : '';
};
const FormItem = Form.Item;

export default (props) => {
  const actionRef = useRef();
  const [applyStart, setStart] = useState()
  const [applyEnd, setEnd] = useState()
  //选中的id列表
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const [selectedRows, setSelectedRows] = useState([])
  const [application, setApplication] = useState();

  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
  //绑卡弹窗
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);

  //发证弹窗
  const [outForm] = Form.useForm();
  const [outVisible, setOutVisible] = useState(false);
  const [outLoading, setOutLoading] = useState(false);

  const goDetail = (id) => {
    history.push(`certificateIssuance/issuance.jsx?id=${id}`);
  }
  const handelApplyDateChange = (date, dateStrings) => {
    setStart(dateStrings[0])
    setEnd(dateStrings[1])
  }
  const handleReset = () => {
    setStart()
    setEnd()
  }
  const handleExport = () => {
    // console.log(selectedRows);

    const cardNoList = selectedRows.map(item => item.originCardNo)
    if (cardNoList.some(item => item == null)) {
      message.info('您选中的犬证有未绑卡数据，请先绑卡再导出数据')
    } else {
      exportCardList({ cardNoList: cardNoList }).then((res) => {
        message.success('导出' + cardNoList.length + '条数据');

      })
    }
    // setSelectedRows([])
    // setSelectedRowKeys([])
  }


  //绑卡弹窗
  const bindCard = (val) => {
    setLoading(true)
    updateBindCard(
      application.applyId,
      { cardNo: val.originCardNo }
    ).then((res) => {
      message.success('绑卡成功')
      handleBindCancel();
      actionRef.current.reload()
      setLoading(false)
    }).catch(err => {
      setLoading(false)
      console.log(err.message)
    })
  }
  const handleBindShow = (id) => {
    getApplicationDetail(id).then((res) => {
      form.setFieldsValue(res);
      setApplication(res)
      setVisible(true)
    }).catch((err) => {
      console.log(err.message)
    });
  }
  const handleBindCancel = () => {
    setVisible(false)
    setTimeout(() => {
      setApplication();
      form.resetFields()
    }, 100);
  }

  //发证弹窗
  const outCard = (val) => {
    setOutLoading(true)
    updateMake(application.applyId, {
      makeStatus: application.makeStatus,
      trackingType: val.trackingType,
      trackingNo: val.trackingNo
    }).then((res) => {
      message.success('发证成功')
      handleOutCancel();
      actionRef.current.reload()
      setOutLoading(false)
    }).catch((err) => {
      console.log(err.message)
      setOutLoading(false)
    })
  }
  const handleOutShow = (id) => {
    getApplicationDetail(id).then((res) => {
      outForm.setFieldsValue(res);
      setApplication(res)
      setOutVisible(true)
    }).catch((err) => {
      console.log(err.message)
    });
  }
  const handleOutCancel = () => {
    setOutVisible(false)
    setTimeout(() => {
      setApplication();
      outForm.resetFields()
    }, 100);
  }
  const columns = [
    {
      title: '证件号',
      dataIndex: 'originCardNo',
      key: 'originCardNo',
      search: true,
    },
    {
      title: '犬主',
      dataIndex: 'personName',
      key: 'personName',
      search: true,
    },
    {
      title: '是否企业',
      dataIndex: 'isOrg',
      key: 'isOrg',
      search: true,
      hideInTable: true,
      render: (_, record) => {
        return record.isOrg
          ? '企业' : '个人'
      },
      valueType: 'select',
      valueEnum: {
        true: { text: '企业' },
        false: { text: '个人' },
      },
    },
    {
      title: '企业名称',
      dataIndex: 'orgName',
      key: 'orgName',
      search: true,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      search: true,
    },
    {
      title: '犬名',
      dataIndex: 'petName',
      key: 'petName',
      search: false,
    },
    {
      title: '申领方式',
      dataIndex: 'applyMethod',
      key: 'applyMethod',
      search: true,
      render: (_, record) => {
        return record.applyMethod === 1
          ? '上门自取'
          : record.applyMethod === 2
            ? '快递到家' : ''
      },
      valueType: 'select',
      valueEnum: {
        1: { text: '上门自取' },
        2: { text: '快递到家' },
      },
    },
    {
      title: '申请时间',
      dataIndex: 'createDate',
      key: 'createDate',
      width: 160,
      render: (t) => formatterTime(t),
      renderFormItem: (_, record) => <RangePicker placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD' onChange={handelApplyDateChange} />
    },
    {
      title: '制证状态',
      dataIndex: 'status',
      key: 'status',
      render: (_, record) => {
        return record.status === 2
          ? '待发放'
          : record.status === 3
            ? '已发放' : ''
      },
      valueType: 'select',
      valueEnum: {
        2: { text: '待发放' },
        3: { text: '已发放' },
      },
    },
    {
      title: '发放人',
      dataIndex: 'makeUserName',
      key: 'makeUserName',
      search: false,
    },
    {
      title: '发放时间',
      dataIndex: 'makeDate',
      width: 160,
      key: 'makeDate',
      render: (t) => t != '-' ? formatterTime(t) : '-',
      search: false
    },
    {
      title: '操作',
      valueType: 'option',
      width: 160,
      render: (_, record) => [
        <Button key={1} style={{ padding: 0 }} type="link"
          onClick={() => handleBindShow(record.applyId)}
        >绑卡</Button>,
        <Button key={2} style={{ padding: 0 }} type="link"
          onClick={() => handleOutShow(record.applyId)}
        >发证
        </Button>,
        <Button key={3} style={{ padding: 0 }} type="link"
          onClick={() => goDetail(record.applyId)}
        >详情</Button>
      ],
    },
  ]

  return (
    <PageHeaderWrapper>
      <PageTable
        rowSelection={{
          selectedRowKeys,
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
          onChange: (selectedRowKeys, selectedRows) => {
            setSelectedRowKeys(selectedRowKeys);
            setSelectedRows(selectedRows)
          },
        }}
        tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
          <>
            已选 {selectedRowKeys.length} 张犬证
            <a style={{ marginLeft: 8 }} onClick={onCleanSelected}>
              取消选择
            </a>
          </>
        )}
        tableAlertOptionRender={() => {
          return (
            <Button style={{ padding: 0 }} type="link" onClick={handleExport}>导出制证</Button>
          );
        }}
        actionRef={actionRef}
        columns={columns}
        request={getMakeList}
        params={{ applyStart, applyEnd }}
        options={false}
        onReset={handleReset}
        rowKey="applyId"
      />
      <Modal
        forceRender
        title='犬证绑卡'
        visible={visible}
        onCancel={handleBindCancel}
        keyboard={false}
        maskClosable={false}
        destroyOnClose={true}
        footer={null}
      >
        <Form {...formItemLayout} onFinish={bindCard} form={form}>
          <FormItem label="证件号" name="originCardNo" rules={[{ required: true, message: '请输入证件号' }]}>
            <Input placeholder="请输入证件号" readOnly={application?.originCardNo != null} />
          </FormItem>
          {
            !application?.originCardNo &&
            <FormItem label=" " colon={false}>
              <Button type="default" onClick={handleBindCancel}>
                取消
              </Button>
              <Button
                type="primary"
                loading={loading}
                htmlType="Submit"
                style={{ marginLeft: '4em' }}
              >
                确认
              </Button>
            </FormItem>
          }
        </Form>
      </Modal>

      <Modal
        forceRender
        title='犬证发放'
        visible={outVisible}
        onCancel={handleOutCancel}
        keyboard={false}
        maskClosable={false}
        destroyOnClose={true}
        footer={null}
      >
        <Form {...formItemLayout} onFinish={outCard} form={outForm}>
          <FormItem label="证件号" name='originCardNo' rules={[{ required: true, message: '请先绑卡再发证' }]}>
            <Input
              readOnly
              placeholder='请先绑卡再发证'
            />
          </FormItem>
          {
            application?.applyMethod == 2 && <>
              <FormItem label="快递公司" name='trackingType' rules={[{ required: true, message: '请选择快递公司' }]}>
                {
                  application?.makeStatus == 0 ?
                    <Select placeholder="请选择快递公司">
                      <Option value={'中国邮政'}>中国邮政</Option>
                      <Option value={'圆通快递'}>圆通快递</Option>
                      <Option value={'中通快递'}>中通快递</Option>
                      <Option value={'申通快递'}>申通快递</Option>
                      <Option value={'韵达快递'}>韵达快递</Option>
                      <Option value={'顺丰快递'}>顺丰快递</Option>
                      <Option value={'京东快递'}>京东快递</Option>
                      <Option value={'极兔快递'}>极兔快递</Option>
                      <Option value={'百世快递'}>百世快递</Option>
                      <Option value={'天天快递'}>天天快递</Option>
                    </Select> :
                    <Input
                      readOnly={application?.makeStatus != 0}
                    />
                }
              </FormItem>
              <FormItem label="快递单号" name='trackingNo' rules={[{ required: true, message: '请输入快递单号' }]}>
                <Input
                  placeholder='请输入快递单号（必填）'
                  readOnly={application?.makeStatus != 0}
                />
              </FormItem>
            </>
          }
          {
            application?.makeStatus == 0 &&
            <FormItem label=" " colon={false}>
              <Button type="default" onClick={handleOutCancel}>
                取消
              </Button>
              <Button
                type="primary"
                loading={outLoading}
                htmlType="Submit"
                style={{ marginLeft: '4em' }}
              >
                确认
              </Button>
            </FormItem>
          }
        </Form>
      </Modal>

    </PageHeaderWrapper>
  )
}