feat(): 新增停车卡证件认证页面

1 year ago · 3cfb2f9ae8
8 changed files with 373 additions and 3 deletions
--- a/src/pages/OperationCenter/OtherBusiness/ParkingCard/CertificateReview/index.jsx
+++ b/src/pages/OperationCenter/OtherBusiness/ParkingCard/CertificateReview/index.jsx
@ -0,0 +1,6 @@
+import React from "react"
+import loadable from "@loadable/component"
+import { LoadingImg } from "@/components"
+
+const MonitorCarAlarmLoadable = loadable(() => import("./loadable"))
+export default (pros) => <MonitorCarAlarmLoadable {...pros} fallback={<LoadingImg />} />
--- a/src/pages/OperationCenter/OtherBusiness/ParkingCard/CertificateReview/index.scss
+++ b/src/pages/OperationCenter/OtherBusiness/ParkingCard/CertificateReview/index.scss
@ -0,0 +1,64 @@
+@import "@/assets/css/mixin.scss";
+$color-container-bg : var(--color-container-bg);
+$color-user-list-bg : var(--color-user-list-bg);
+$color-text : var(--color-text);
+$color-primary : var(--color-primary);
+
+.certificate-modal {
+  .form-box {
+    width: 400px;
+    display: flex;
+    margin-bottom: 30px;
+
+    >label {
+      text-align: right;
+      padding-right: 10px;
+      min-width: 120px;
+
+      &.required::before {
+        margin-right: 4px;
+        color: #f56c6c;
+        font-family: SimSun, sans-serif;
+        content: "*";
+      }
+    }
+
+    .form-con {
+      flex: 1;
+      min-width: 190px;
+    }
+  }
+
+  .pic-box {
+    margin-left: 80px;
+    margin-bottom: 30px;
+    width: 400px;
+    height: 300px;
+
+    .ant-image {
+      width: 100%;
+      height: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+
+  .submitBtn {
+    text-align: center;
+    margin: 15px 0 5px;
+    cursor: pointer;
+
+    .ant-btn {
+      min-width: 90px;
+      height: 34px;
+
+      &:not(&:first-child) {
+        margin-left: 20px;
+      }
+    }
+  }
+}
--- a/src/pages/OperationCenter/OtherBusiness/ParkingCard/CertificateReview/loadable.jsx
+++ b/src/pages/OperationCenter/OtherBusiness/ParkingCard/CertificateReview/loadable.jsx
@ -0,0 +1,262 @@
+import React, { useState, useRef, useEffect } from "react";
+import { message, Input, Select, Image, Modal, Button } from "antd";
+import { dictionary, utils } from "@/config/common";
+import moment from "moment";
+import ajax from "@/services";
+import { TableModule } from "@/components";
+import errorImg from "@/assets/images/layout/error.png";
+import "./index.scss";
+
+function CertificateReview() {
+  const tableRef = useRef(null);
+  // 弹窗
+  const [visible, setVisible] = useState(false);
+  // 拒绝弹窗
+  const [visible1, setVisible1] = useState(false);
+  // 图片预览
+  const [preview, setPreview] = useState(false);
+  // 表格数据
+  const [rowData, setRowData] = useState({});
+  const columns = [
+    {
+      title: "提交人",
+      dataIndex: "submit",
+      align: "center",
+    },
+    {
+      title: "审核人",
+      dataIndex: "check",
+      align: "center",
+    },
+    {
+      title: "提交时间",
+      dataIndex: "submit_time",
+      align: "center",
+    },
+    {
+      title: "审核时间",
+      dataIndex: "check_time",
+      align: "center",
+    },
+    {
+      title: "状态",
+      dataIndex: "status",
+      align: "center",
+      render: (val, row, index) =>
+        val == 2 ? "已拒绝" : val == 3 ? "已通过" : "待审核",
+    },
+    {
+      title: "操作",
+      dataIndex: "handle",
+      align: "center",
+      width: 120,
+      render: (val, row, index) => {
+        const _status = row?.status;
+        return (
+          <a
+            className="blue"
+            onClick={() => {
+              setRowData(row);
+              setPreview(true);
+              setVisible(true);
+            }}
+          >
+            {_status == 2 || _status == 3 ? "查看" : "审核"}
+          </a>
+        );
+      },
+    },
+  ];
+  const formSearch = [
+    {
+      name: "status",
+      type: "Select",
+      label: "状态",
+      placeholder: "请选择状态",
+      options: [
+        {
+          value: "",
+          label: "全部",
+        },
+        {
+          value: "1",
+          label: "待审核",
+        },
+        {
+          value: "2",
+          label: "已拒绝",
+        },
+        {
+          value: "3",
+          label: "已通过",
+        },
+      ],
+    },
+  ];
+  //搜索参数初始化
+  const initFormData = {
+    status: "",
+  };
+
+  //搜索的结果
+  const [tableData, setTableData] = useState([]);
+  //搜索的总结果数
+  const [total, setTotal] = useState(0);
+
+  // 列表查询
+  function fetch(params) {
+    ajax.getCredentialList(params).then(
+      (res) => {
+        if (parseInt(res?.status) === 20000) {
+          const { list, total } = res?.data || {};
+          setTableData(list || []);
+          setTotal(total || 0);
+        }
+      },
+      (err) => {
+        console.log(err);
+        message.error("服务器异常");
+      }
+    );
+  }
+
+  // 提交
+  function handleSave(flag) {
+    if (flag == 2) {
+      setRowData({ ...rowData, text: "" });
+      setVisible1(true);
+    } else {
+      doPost(flag);
+    }
+  }
+
+  // 调用接口
+  function doPost(flag) {
+    if (flag == 2 && !rowData?.text) {
+      message.error("请输入拒绝原因");
+      return;
+    }
+    ajax
+      .doCredentialCheck({ id: rowData?.id, status: flag, text: rowData?.text })
+      .then(
+        (res) => {
+          if (parseInt(res?.status) === 20000) {
+            message.success(res?.message);
+            setVisible1(false);
+            setVisible(false);
+            tableRef.current.fetch();
+          } else {
+            message.error(res?.message);
+          }
+        },
+        (err) => {
+          console.log(err);
+          message.error("服务器异常");
+        }
+      );
+  }
+
+  return (
+    <>
+      <TableModule
+        ref={tableRef}
+        columns={columns}
+        tableData={tableData}
+        formSearch={formSearch}
+        total={total}
+        pagename="停车卡证件认证"
+        search={fetch}
+        pageName={"certificateReview"}
+        initFormData={initFormData}
+        isExport={false}
+        showSerial={true}
+      />
+      <Modal
+        className="certificate-modal"
+        visible={visible}
+        title={"认证信息"}
+        // centered
+        width={"600px"}
+        onCancel={() => setVisible(false)}
+        footer={null}
+      >
+        <div className="form-box">
+          <label>姓名：</label>
+          <span>{rowData?.submit || "-"}</span>
+        </div>
+        <div className="pic-box">
+          <Image
+            src={rowData?.img}
+            fallback={errorImg}
+            preview={preview}
+            onError={() => setPreview(false)}
+          />
+        </div>
+        {rowData?.status == 2 ? (
+          <div className="form-box">
+            <label>拒绝原因：</label>
+            <span>{rowData?.text || "-"}</span>
+          </div>
+        ) : null}
+        <div className="submitBtn">
+          {rowData?.status != 2 && rowData?.status != 3 ? (
+            <>
+              <Button type="primary" onClick={() => handleSave(3)}>
+                通过
+              </Button>
+              <Button type="primary" onClick={() => handleSave(2)}>
+                拒绝
+              </Button>
+            </>
+          ) : null}
+          <Button
+            type="primary"
+            className="cancel colorReset"
+            onClick={() => setVisible(false)}
+          >
+            返回
+          </Button>
+        </div>
+      </Modal>
+      <Modal
+        className="certificate-modal"
+        visible={visible1}
+        title={"拒绝原因"}
+        // centered
+        width={"600px"}
+        onCancel={() => setVisible1(false)}
+        footer={null}
+      >
+        <div className="form-box">
+          <label className="required">拒绝原因</label>
+          <Input.TextArea
+            className="form-con"
+            placeholder="请输入"
+            maxLength={2000}
+            value={rowData?.text || undefined}
+            onChange={(e) =>
+              setRowData({
+                ...rowData,
+                text: e.target.value,
+              })
+            }
+          />
+        </div>
+        <div className="submitBtn">
+          <Button type="primary" onClick={() => doPost(2)}>
+            确认
+          </Button>
+          <Button
+            type="primary"
+            className="cancel colorReset"
+            onClick={() => setVisible1(false)}
+          >
+            取消
+          </Button>
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+export default CertificateReview;
--- a/src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardMgm/loadable.jsx
+++ b/src/pages/OperationCenter/OtherBusiness/ParkingCard/ParkingCardMgm/loadable.jsx
@ -121,6 +121,11 @@ function ParkingCardMgm(props) {
            key: 'card_num',
        },
        {
+            title: '剩余停车卡数量',
+            dataIndex: 'residue',
+            key: 'residue',
+        },
+        {
            title: '商品原价',
            dataIndex: 'original_price',
            key: 'original_price',
--- a/src/pages/OperationCenter/OtherBusiness/ParkingCard/index.jsx
+++ b/src/pages/OperationCenter/OtherBusiness/ParkingCard/index.jsx
@ -1,9 +1,11 @@
 import ParkingCardMgm from "./ParkingCardMgm"
 import ParkingCardOrder from "./ParkingCardOrder"
 import ParkingCardStat from "./ParkingCardStat"
+import CertificateReview from "./CertificateReview"

 export default {
    ParkingCardMgm,
    ParkingCardOrder,
-    ParkingCardStat
+    ParkingCardStat,
+    CertificateReview
 }
--- a/src/router/menu.js
+++ b/src/router/menu.js
@ -152,7 +152,8 @@
      "parkingCardStat",
      "StaggeredMgm",
      "staggeredOrder",
-      "staggeredStat"
+      "staggeredStat",
+      "certificateReview"
    ],
    "menus_new": {
      "inRoad": [{
@ -848,6 +849,10 @@
              "text": "停车卡",
              "icon": "",
              "children": [{
+                  "path": "/operationCenter/certificateReview",
+                  "text": "停车卡证件认证",
+                  "name": "certificateReview"
+                },{
                  "path": "/operationCenter/parkingCardMgm",
                  "text": "停车卡管理",
                  "name": "parkingCardMgm"
--- a/src/router/router.config.js
+++ b/src/router/router.config.js
@ -784,6 +784,12 @@ let routes = [
        component: pages.CreditScoreMgm,
      },
      {
+        path: "/operationCenter/certificateReview",
+        text: "停车卡证件认证",
+        name: "certificateReview",
+        component: pages.CertificateReview,
+      },
+      {
        path: "/operationCenter/parkingCardMgm",
        text: "停车卡管理",
        name: "parkingCardMgm",
--- a/src/services/OperationCenter/ParkingCardMgm/index.js
+++ b/src/services/OperationCenter/ParkingCardMgm/index.js
@ -96,6 +96,24 @@ const cardStaData = (params) => {
    data:params
  })
 }
+
+// 停车卡-证件审核-列表
+const getCredentialList = (params) => {
+  return ajax({
+    url:'/api/ope/parkcard/credential_list',
+    type:'post',
+    data:params
+  })
+}
+
+// 停车卡-证件审核-审核
+const doCredentialCheck = (params) => {
+  return ajax({
+    url:'/api/ope/parkcard/credential_check',
+    type:'post',
+    data:params
+  })
+}
 export default {
    getParkcardrList,
    getParkList,
@ -108,5 +126,7 @@ export default {
    exportOrder,
    editCardOrder,
    cardStaData,
-    addCardOrder
+    addCardOrder,
+    getCredentialList,
+    doCredentialCheck,
 }