shalu-marketplace/src/pages/management/AppTab.tsx

import { useState, useRef } from "react";
import {
  ActionType,
  ProColumns,
  TableDropdown,
} from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import { Popconfirm, Tag, message } from "antd";
import AddAppDrawer from "./AddAppDrawer";
import {
  GetAppList,
  DeleteAppTemplate,
  OffMarketApp,
  OnMarketApp,
} from "@/api/appStore";
import type { AppItem } from "@/api/appStore";
import { history } from "umi";

export default () => {
  const actionRef = useRef<ActionType>();
  const [editData, setEditData] = useState<AppItem>();
  const handleToDetail = (id?: string) => {
    history.push(`/detail/application/${id}`);
  };

  const handleOffMarket = async (id?: string) => {
    if (id) {
      await OffMarketApp({ ids: [id] });
      actionRef.current?.reload();
      message.success("下架成功");
    }
  };

  const handleOnMarket = async (id?: string) => {
    if (id) {
      await OnMarketApp({ ids: [id] });
      actionRef.current?.reload();
      message.success("上架成功");
    }
  };

  const handleDelete = async (id?: string) => {
    if (id) {
      await DeleteAppTemplate({ ids: [id] });
      actionRef.current?.reload();
      message.success("删除成功");
    }
  };

  const columns: ProColumns<AppItem>[] = [
    {
      title: "图标",
      dataIndex: "icon",
      search: false,
      render: (_, record) => (
        <img
          src={`/api/File/Download?fileId=${record.icon}`}
          alt=""
          style={{
            width: 30,
            height: 30,
            borderRadius: "50%",
          }}
        />
      ),
    },
    {
      title: "应用名称",
      dataIndex: "name",
      copyable: true,
      ellipsis: true,
    },
    {
      title: "作者",
      dataIndex: "createByName",
      ellipsis: true,
      search: false,
    },
    // {
    //   title: "应用场景",
    //   dataIndex: "applicationScenarios",
    //   ellipsis: true,
    //   search: false,
    //   renderText: (text) => {
    //     return (JSON.parse(text || '[]')).map((item: string) => (
    //       <Tag key={item}>{item}</Tag>
    //     ));
    //   },
    // },
    // {
    //   title: "应用行业",
    //   dataIndex: "industries",
    //   ellipsis: true,
    //   search: false,
    //   renderText: (text) => {
    //     return (JSON.parse(text || '[]')).map((item: string) => (
    //       <Tag key={item}>{item}</Tag>
    //     ));
    //   },
    // },
    {
      disable: true,
      title: "标签",
      dataIndex: "tags",
      search: false,
    },
    {
      title: "上架状态",
      dataIndex: "isOnMarket",
      filters: true,
      ellipsis: true,
      valueType: "select",
      valueEnum: {
        on: {
          text: "已上架",
          status: "Error",
        },
        off: {
          text: "未上架",
          status: "Success",
        },
      },
      render: (_, record) => (
        <Tag color={record.isOnMarket ? "green" : "red"}>
          {record.isOnMarket ? "已上架" : "未上架"}
        </Tag>
      ),
    },
    {
      title: "使用量",
      dataIndex: "useNum",
      search: false,
    },
    {
      title: "价格",
      dataIndex: "price",
      search: false,
      renderText: (text) => {
        return text ? `¥${text}` : "免费";
      },
    },
    {
      title: "试用地址",
      dataIndex: "trialUrl",
      search: false,
      renderText: (text) =>
        text ? (
          <a target="_blank" rel="noopener noreferrer" href={text}>
            {text}
          </a>
        ) : (
          "-"
        ),
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      search: false,
    },
    {
      title: "更新时间",
      dataIndex: "updateTime",
      search: false,
    },
    {
      title: "操作",
      valueType: "option",
      key: "option",
      width: 180,
      render: (text, record, _, action) => [
        <a key="edit" onClick={() => setEditData(record)}>
          编辑
        </a>,
        <a
          target="_blank"
          rel="noopener noreferrer"
          key="view"
          onClick={() => handleToDetail(record.id)}
        >
          详情
        </a>,
        record.isOnMarket ? (
          <a
            target="_blank"
            rel="noopener noreferrer"
            key="off"
            onClick={() => handleOffMarket(record.id)}
          >
            下架
          </a>
        ) : (
          <a
            target="_blank"
            rel="noopener noreferrer"
            key="on"
            onClick={() => handleOnMarket(record.id)}
          >
            上架
          </a>
        ),
        <Popconfirm
          key="delete"
          title="确定删除吗？"
          onConfirm={() => handleDelete(record.id)}
        >
          <a className="text-red-500" target="_blank" rel="noopener noreferrer">
            删除
          </a>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <ProTable<AppItem>
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params, sort, filter) => {
        console.log(params, sort, filter);
        const isOnMarket =
          params?.isOnMarket === "on"
            ? 1
            : params?.isOnMarket === "off"
              ? 0
              : undefined;
        const res = await GetAppList({
          currentPage: params.current || 1,
          pageSize: params.pageSize || 10,
          filters: [
            { name: "name", value: params?.name },
            { name: "isFree", value: params?.isFree },
            { name: "isOnMarket", value: isOnMarket },
            { name: "isDel", value: 0 },
          ],
        });
        const data = res?.result || {};
        return {
          data: data.model || [],
          success: true,
          total: data.totalCount || 0,
        };
      }}
      columnsState={{
        persistenceKey: "shalu-marketplace",
        persistenceType: "localStorage",
        defaultValue: {
          option: { fixed: "right", disable: true },
        },
      }}
      rowKey="id"
      search={{
        labelWidth: "auto",
      }}
      options={{
        setting: {
          listsHeight: 400,
        },
      }}
      pagination={{
        pageSize: 10,
      }}
      dateFormatter="string"
      headerTitle={
        <AddAppDrawer
          editData={editData}
          onClose={() => setEditData(undefined)}
          onSuccess={() => {
            actionRef.current?.reload();
          }}
        />
      }
    />
  );
};