.

config/routes.js

@@ -96,7 +96,7 @@ export default [
   },
   {
     path: '/cardNoList',
-    name: '证件制卡',
+    name: '物料制作',
     access:'admin',
     icon: 'CreditCardOutlined',
     component: '@/pages/cardNoList',

src/pages/cardNoList/index.jsx

@@ -36,7 +36,7 @@ export default (props) => {
 
   const actions = () => [
     <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setVisible(true)}>
-      批量制卡
+      批量制作
     </Button>,
   ];
   const columns = [

src/pages/certificateIssuance/index.jsx

@@ -1,21 +1,39 @@
-import React, { useRef,useState } from 'react'
+import React, { useRef, useState } from 'react'
 import moment from 'moment';
 import { history } from 'umi';
-import { DatePicker, Button } from 'antd';
+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 } from '@/services/application'
+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}`);
   }
@@ -27,6 +45,89 @@ export default (props) => {
     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: '证件号',
@@ -45,10 +146,10 @@ export default (props) => {
       dataIndex: 'isOrg',
       key: 'isOrg',
       search: true,
-      hideInTable:true,
+      hideInTable: true,
       render: (_, record) => {
         return record.isOrg
-          ? '企业':'个人'
+          ? '企业' : '个人'
       },
       valueType: 'select',
       valueEnum: {
@@ -95,9 +196,9 @@ export default (props) => {
       title: '申请时间',
       dataIndex: 'createDate',
       key: 'createDate',
-      width:160,
+      width: 160,
       render: (t) => formatterTime(t),
-      renderFormItem: (_, record) => <RangePicker placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD'onChange={handelApplyDateChange} />
+      renderFormItem: (_, record) => <RangePicker placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD' onChange={handelApplyDateChange} />
     },
     {
       title: '制证状态',
@@ -124,10 +225,10 @@ export default (props) => {
     {
       title: '发放时间',
       dataIndex: 'makeDate',
-      width:160,
+      width: 160,
       key: 'makeDate',
       render: (t) => t != '-' ? formatterTime(t) : '-',
-      search:false
+      search: false
     },
     {
       title: '操作',
@@ -135,18 +236,43 @@ export default (props) => {
       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)}
-        >
-          {record.makeStatus==1?'详情':'发证'}
-        </Button>
+        >详情</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}
@@ -155,6 +281,105 @@ export default (props) => {
         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>
   )
 }

src/pages/certificateIssuance/issuance.jsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { history } from 'umi';
-import { Card, Form, Button, message, Input, Image } from 'antd';
+import { Card, Form, Button, Image } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { getApplicationDetail, updateMake } from '@/services/application'
+import { getApplicationDetail } from '@/services/application'
 
 const FormItem = Form.Item;
 const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
@@ -13,50 +13,17 @@ export default (props) => {
   const { location } = props;
   const { id } = location.query;
   const [application, setApplication] = useState({});
-  const [loading, setLoading] = useState(false)
-  const [form] = Form.useForm();
-  const handleMake = (value) => {
-    if (value.originCardNo) {
-      if (
-        (application.applyMethod == 2
-          && value.trackingType
-          && value.trackingNo)
-        || application.applyMethod == 1) {
-        setLoading(true)
-        var data = {
-          cardNo: value.originCardNo,
-          makeStatus: application.makeStatus,
-          trackingType: value.trackingType,
-          trackingNo: value.trackingNo
-        }
-        updateMake(id, data).then(() => {
-          message.success('操作成功');
-          goBack()
-          setLoading(false)
-        }).catch(err => {
-          console.log(err.message)
-          setLoading(false)
-        })
-      } else {
-        message.success('请输入快递信息');
-      }
-    }
-    else {
-      message.success('请输入证件号');
-    }
-  }
   useEffect(() => {
     getApplicationDetail(id).then((res) => {
-      form.setFieldsValue(res);
       setApplication(res)
     }).catch((err) => {
       console.log(err.message)
     });
   }, [id])
   return (
-    <PageHeaderWrapper    >
+    <PageHeaderWrapper>
       <Card>
-        <Form {...formItemLayout} onFinish={handleMake} form={form}>
+        <Form {...formItemLayout}>
           <FormItem label="犬主">
             {application?.personName}
           </FormItem>
@@ -132,52 +99,21 @@ export default (props) => {
               <Image src={application.penaltyInfo} width={100} />
             </FormItem>
           }
-          <FormItem label="付款状态">
-            {
-              application.payStatus === 0
-                ? '待支付'
-                : application.payStatus === 1
-                  ? '支付中'
-                  : application.payStatus === 2
-                    ? '已支付' : ''
-            }
-          </FormItem>
-          <FormItem label="证件号" name='originCardNo' rules={[{ required: true, message: '请输入证件号' }]}>
-            <Input
-              style={{ width: '360px' }}
-              readOnly={application?.makeStatus != 0}
-              placeholder='请输入证件号（必填）'
-            />
+          <FormItem label="证件号">
+            {application.originCardNo}
           </FormItem>
           {
-            application.applyMethod == 2 && <>
-              <FormItem label="快递公司" name='trackingType' rules={[{ required: true, message: '请输入快递公司' }]}>
-                <Input
-                  style={{ width: '360px' }}
-                  placeholder='请输入快递公司（必填）'
-                  readOnly={application?.makeStatus != 0}
-                 />
+            application.applyMethod == 2 &&
+            <>
+              <FormItem label="快递公司" >
+                {application.trackingType}
               </FormItem>
-              <FormItem label="快递单号" name='trackingNo' rules={[{ required: true, message: '请输入快递公司' }]}>
-                <Input
-                  style={{ width: '360px' }}
-                  placeholder='请输入快递单号（必填）'
-                  readOnly={application?.makeStatus != 0}
-                />
+              <FormItem label="快递单号">
+                {application.trackingNo}
               </FormItem>
             </>
           }
           <FormItem label=" " colon={false}>
-            {
-              application?.makeStatus == 0 &&
-              <>
-                <Button type="primary" loading={loading}
-                htmlType="Submit"
-                  style={{ marginRight: '16px' }}>
-                  发放
-                </Button>
-              </>
-            }
             <Button type="default" onClick={() => goBack()}>
               返回
             </Button>

src/services/application.js

@@ -7,6 +7,12 @@ import request from '@/utils/request';
  */
 export const updateAudit = (id, data) => request(`/application/${id}/audit`, { method: 'put', data });
 
+/**
+ * 绑卡
+ * @param {*} data
+ * @returns
+ */
+export const updateBindCard = (id, data) => request(`/application/${id}/bindCard`, { method: 'put', data });
 /**
  * 发证
  * @param {*} data
@@ -49,3 +55,9 @@ export const getApplicationDetail = (id) => request(`/application/${id}`);
  */
 export const getPetCardNo = (id) => request(`/pet/${id}/card`);
 
+/**
+ * 导出制证数据
+ * @param {*} params
+ * @returns
+ */
+ export const exportCardList = (data) => request('/application/card/export', { method: 'post',data });