.

config/routes.js

@@ -90,6 +90,12 @@ export default [
     hideInMenu: true,
     component: '@/pages/certificateIssuance/issuance.jsx',
   },
+  {
+    path: '/cardNoList',
+    name: '证件制卡',
+    icon: 'CreditCardOutlined',
+    component: '@/pages/cardNoList',
+  },
   {
     path: '/cardList',
     name: '证件列表',

src/pages/cardNoList/index.jsx

@@ -0,0 +1,109 @@
+import { history } from 'umi';
+import { useRef,useState } from 'react';
+import { Button, Modal, message, Image,Form,Input, InputNumber } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import PageTable from '@/components/PageTable';
+import { getCardNoList,addCarNoBatch } from '@/services/card';
+import moment from 'moment';
+
+const formatterTime = (val) => {
+  return val && val !== '-' ? moment(val).format('YYYY-MM-DD') : '-';
+};
+const FormItem = Form.Item;
+export default (props) => {
+  const actionRef = useRef();
+
+  const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+  const [form] = Form.useForm();
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const Submit=(val)=>{
+    setLoading(true)
+    addCarNoBatch(val).then(()=>{
+      message.success('制卡成功，制卡时长较长请10分钟后刷新页面查看卡号')
+      onCancel()
+      setLoading(false)
+    }).catch(err=>{
+      console.log(err)
+      setLoading(false)
+    })
+  }
+  const onCancel=()=>{
+    form.resetFields()
+    setVisible(false)
+  }
+
+  const actions = () => [
+    <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => setVisible(true)}>
+      批量制卡
+    </Button>,
+  ];
+  const columns = [
+    {
+      title: '卡号',
+      key: 'cardNo',
+      dataIndex: 'cardNo',
+    },
+    {
+      title: '二维码',
+      key: 'qrcode',
+      dataIndex: 'qrcode',
+      render: (t) => <Image width={110} src={t} alt="" />,
+      search:false
+    },    
+    {
+      title: '创建时间',
+      key: 'createDate',
+      dataIndex: 'createDate',
+      render: formatterTime,
+    },
+  ];
+
+  return (
+    <PageHeaderWrapper>
+      <PageTable
+        columns={columns}
+        request={getCardNoList}
+        rowKey="bannerId"
+        options={false}
+        toolBarRender={actions}
+        actionRef={actionRef}
+      />
+      <Modal
+        forceRender
+        title='犬证制卡'
+        visible={visible}
+        onCancel={onCancel}
+        keyboard={false}
+        maskClosable={false}
+        destroyOnClose={true}
+        footer={null}
+      >
+        <Form {...formItemLayout} onFinish={Submit} form={form}>
+          <FormItem label="卡号前缀" name="prefix" rules={[{ required: true, message: '请输入' }]}>
+            <Input placeholder="请输入" />
+          </FormItem>
+          <FormItem label="生成数量" name="num" tooltip='生成数建议至多1000' rules={[{ required: true, message: '请输入正整数' }]}>
+            <InputNumber style={{width:'100%'}} min={1} placeholder="请输入" />
+          </FormItem>
+          <FormItem label=" " colon={false}>
+            <Button type="default" onClick={onCancel}>
+              取消
+            </Button>
+            <Button
+              type="primary"
+              loading={loading}
+              htmlType="Submit"
+              style={{ marginLeft: '4em' }}
+            >
+              确认
+            </Button>
+          </FormItem>
+        </Form>
+      </Modal>
+    
+    </PageHeaderWrapper>
+  );
+};

src/services/card.js

@@ -13,3 +13,17 @@ import request from '@/utils/request';
  * @returns
  */
 export const getCardDetail = (id) => request(`/card/${id}`);
+
+/**
+ * 查询制卡列表
+ * @param {*} params
+ * @returns
+ */
+ export const getCardNoList = (params) => request('/cardNo', { params });
+
+ /**
+ * 批量制卡
+ * @param {*} data
+ * @returns
+ */
+export const addCarNoBatch = (data) => request('/carNo/batch', { method: 'post', data });