FEV2 / fw-cms

import React, { useState } from "react";
import {
  Card,
  Table,
  Button,
  Image,
  Modal,
  Input,
  Row,
  Col,
  Badge,
  message,
  Popconfirm,
  Select,
} from "antd";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import ProDescriptions from "@ant-design/pro-descriptions";
import usePagination from "@/hooks/usePagination";
import { debounce } from "lodash";
import { MemberRecordListApi, removeMemberRecordApi } from "./api";
import { placeholderImage } from "@/utils";
import moment from "moment";
import copy from "copy-to-clipboard";
import { CopyOutlined } from "@ant-design/icons";
import {
  BadgeIcon,
  StatusEnum,
  useIdentifyInfoListHook,
} from "@/pages/identify/entity";
import FeeweeFilterOption from "@/pages/notice/components/FeeweeFilterOption";

const Column = Table.Column;
const Search = Input.Search;

export default function MemberRecord() {
  const { list, loading, paginationConfig, setParams, setLoading } =
    usePagination<MemberRecord.ListVO>(MemberRecordListApi, {}, {});
  const [currentFile, setCurrentFile] = useState<string[]>([]);
  const [filesView, setFilesView] = useState<boolean>(false);

  const [extraData, setExtraData] = useState<string>();
  const [extraDataVisible, setExtraDataVisible] = useState<boolean>(false);
  const { Databases } = useIdentifyInfoListHook();

  //按手机号搜索
  const searchPhone = debounce((val: string) => {
    setParams({ phone: val.trim(), current: 1 }, true);
  }, 500);

  //按会员名称搜索
  const searchMemberId = debounce((val: string) => {
    setParams({ memberId: val.trim(), current: 1 }, true);
  }, 500);

  //按认证码搜索;
  const searchCode = debounce((val: string) => {
    setParams({ identifyCode: val, current: 1 }, true);
  }, 0);

  // 删除认证记录
  const removeMemberReord = debounce((val: number) => {
    removeMemberRecordApi(val)
      .then((res) => {
        message.success(res.result);
        setLoading(true);
      })
      .catch((e) => {
        message.error(e.message);
      });
  }, 500);

  return (
    <PageHeaderWrapper title="会员认证记录">
      <Card>
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: 20,
          }}
        >
          <div style={{ display: "flex" }}>
            <FeeweeFilterOption title="手机号">
              <Search
                allowClear
                placeholder="手机号"
                onChange={(e) => searchPhone(e.target.value)}
                style={{ maxWidth: 260, marginRight: 15 }}
              />
            </FeeweeFilterOption>
            <div style={{ width: 10 }} />
            <FeeweeFilterOption title="会员ID">
              <Search
                allowClear
                placeholder="会员ID"
                onChange={(e) => searchMemberId(e.target.value)}
                style={{ maxWidth: 260, marginRight: 15 }}
              />
            </FeeweeFilterOption>
            <div style={{ width: 10 }} />
            <FeeweeFilterOption title="资料项">
              <Select
                allowClear
                placeholder="请选择资料项"
                showSearch
                optionFilterProp="children"
                onChange={(identifyCode: string) => searchCode(identifyCode)}
                style={{
                  minWidth: 260,
                  marginRight: 10,
                  marginBottom: 10,
                }}
                getPopupContainer={(triggerNode) => triggerNode.parentNode}
              >
                {Databases.map((data) => (
                  <Select.Option key={data.code} value={data.code}>
                    {data.name}
                  </Select.Option>
                ))}
              </Select>
            </FeeweeFilterOption>
          </div>
        </div>
        <Table
          dataSource={list}
          pagination={paginationConfig}
          rowKey="id"
          loading={loading}
        >
          <Column title="资料代码" dataIndex="identifyCode" align="center" />
          <Column
            title="资料名称"
            dataIndex="identifyName"
            align="center"
            render={(text) => text || "-"}
          />
          <Column title="会员号" dataIndex="memberId" align="center" />
          <Column title="会员昵称" dataIndex="memberName" align="center" />
          <Column
            title="生效时间"
            dataIndex="effectiveDate"
            align="center"
            render={(value) => (value && moment(value).format("YYYY-MM-DD")) || "-"}
          />
          <Column
            title="过期时间"
            dataIndex="expireDate"
            align="center"
            render={(value) => (value && moment(value).format("YYYY-MM-DD")) || "-"}
          />
          <Column
            title="额外资料"
            dataIndex="extraData"
            align="center"
            render={(value: string) => (
              <Button
                type="link"
                onClick={() => {
                  setExtraData(value);
                  setExtraDataVisible(true);
                }}
              >
                查看
              </Button>
            )}
          />
          <Column
            title="附件"
            dataIndex="fileList"
            align="center"
            render={(value: string[]) => (
              <Button
                type="link"
                onClick={() => {
                  setCurrentFile(value || []);
                  setFilesView(true);
                }}
              >
                查看
              </Button>
            )}
          />
          <Column
            title="状态"
            dataIndex="status"
            align="center"
            render={(status) => {
              if (typeof status === "number") {
                return (
                  <Badge
                    status={BadgeIcon[status + 1]}
                    text={StatusEnum[status]}
                  />
                );
              }
              return "-";
            }}
          />
          <Column
            title="认证时间"
            dataIndex="createTime"
            align="center"
            render={(value) => (value && moment(value).format("YYYY-MM-DD HH:mm:SS")) || "-"}
          />
          <Column
            title="操作"
            align="center"
            render={(text, record: Database.ListVO) => (
              <Popconfirm
                title="是否删除此项？"
                onConfirm={() => removeMemberReord(record.id!)}
                okText="确定"
                cancelText="取消"
              >
                <a style={{ color: "red" }}>删除</a>
              </Popconfirm>
            )}
          />
        </Table>
      </Card>
      <Modal
        title="资料列表"
        visible={filesView}
        footer={null}
        onCancel={() => {
          setFilesView(false);
          setCurrentFile([]);
        }}
        width="50%"
        keyboard
        destroyOnClose
      >
        <Card>
          <Row gutter={16}>
            {currentFile.map((item, index) => (
              <Col key={`${item}+${index}`} span={8}>
                <Card
                  hoverable
                  style={{ width: 220 }}
                  cover={
                    <Image
                      width={220}
                      placeholder
                      height={220}
                      fallback={placeholderImage}
                      src={`api/file/show?fid=${item}`}
                    />
                  }
                >
                  <Card.Meta title={`图片${index + 1}`} />
                </Card>
              </Col>
            ))}
          </Row>
        </Card>
      </Modal>

      <Modal
        title="额外数据"
        visible={extraDataVisible}
        footer={null}
        destroyOnClose
        onCancel={() => {
          setExtraDataVisible(false);
          setExtraData(undefined);
        }}
        width={450}
        keyboard
      >
        <ProDescriptions
          title="额外数据:"
          tooltip="点击旁边复制按钮可复制数据到剪切板"
          extra={
            <CopyOutlined
              onClick={() => extraData && copy(extraData) && message.success("复制成功")}
            />
          }
        >
          <ProDescriptions.Item valueType="jsonCode">
            {extraData}
          </ProDescriptions.Item>
        </ProDescriptions>
      </Modal>
    </PageHeaderWrapper>
  );
}