ProTabs 多 Tab Crud

基本使用

扩展 Tabs 支持，多标签页的 Crud

tsx

import { ProTabs } from "@lite-code/pro-shineout";
import { Message, Tag } from "shineout";
import { create } from "@lite-code/reactive";
import axios from "axios";

const sleep = async () => {
  await new Promise((res) => setTimeout(res, 500));
};

/** 状态管理 */
export const store = create({
  visible: false,
  visible2: false,
  title: "新增组件",
  record: {},
});

export default () => {
  const snap = store.useSnapshot();
  return (
    <ProTabs
      tabs={{
        baseInfo: {
          keygen: "id",
          label: "基本信息",
          height: 400,
          fixed: "both",
          tools: [
            {
              type: "primary",
              label: "新增",
              icon: "plus",
              onClick() {
                store.title = "新增组件";
                store.visible = true;
                store.record = {};
              },
            },
          ],
          rowOperations: {
            width: 140,
            menus: [
              {
                label: "编辑",
                onClick({ record }) {
                  store.title = "编辑组件";
                  store.visible = true;
                  store.record = record;
                },
              },
              {
                label: "删除",
                confirm: "是否确认删除?",
                async onClick({ search, record }) {
                  console.log(record);
                  await sleep();
                  Message.success("已删除!");
                  await search?.();
                },
              },
            ],
          },
          request: async (params) => {
            console.log("params =>", params);
            const { data } = await axios.get(
              "http://111.229.112.107:3003/mock/table2",
              {
                params,
              }
            );
            return data;
          },
          columns: [
            {
              title: "ID",
              dataIndex: "id",
              width: 100,
            },
            {
              title: "组件名称",
              dataIndex: "name",
            },
            {
              title: "英文名称",
              dataIndex: "enName",
            },
            {
              title: "组件类型",
              dataIndex: "type",
              render(type) {
                return <Tag>{type}</Tag>;
              },
            },
            {
              title: "描述",
              dataIndex: "desc",
            },
            {
              title: "最后更新时间",
              dataIndex: "update",
            },
          ],
          search: {
            schema: [
              {
                type: "Input",
                label: "组件名称",
                name: "name",
              },
              {
                type: "Input",
                label: "英文名称",
                name: "enName",
              },
              {
                type: "Select",
                label: "组件类型",
                name: "type",
                props: {
                  data: [
                    {
                      value: "A",
                      label: "A",
                    },
                    {
                      value: "B",
                      label: "B",
                    },
                    {
                      value: "C",
                      label: "C",
                    },
                    {
                      value: "D",
                      label: "D",
                    },
                  ],
                },
              },
            ],
          },
          pages: {
            add: {
              type: "modal",
              title: snap.title,
              visible: snap.visible,
              defaultValue: snap.record,
              schema: [
                {
                  type: "Input",
                  label: "组件名称",
                  name: "name",
                  required: true,
                },
                {
                  type: "Input",
                  label: "英文名称",
                  name: "enName",
                  required: true,
                },
                {
                  type: "Select",
                  label: "组件类型",
                  name: "type",
                  required: true,
                  props: {
                    data: [
                      {
                        value: "A",
                        label: "A",
                      },
                      {
                        value: "B",
                        label: "B",
                      },
                      {
                        value: "C",
                        label: "C",
                      },
                      {
                        value: "D",
                        label: "D",
                      },
                    ],
                  },
                },
                {
                  type: "TextArea",
                  label: "组件描述",
                  name: "desc",
                  props: {
                    rows: 3,
                  },
                },
              ],
              async onSubmit(values, api) {
                alert(JSON.stringify(values));
                values.id ? api?.refresh?.() : api?.search?.();
                await sleep();
              },
              onClose() {
                store.visible = false;
              },
            },
          },
        },
        otherInfo: {
          keygen: "id",
          label: "其他信息",
          height: 400,
          fixed: "both",
          tools: [
            {
              type: "primary",
              label: "新增其他",
              icon: "plus",
              onClick() {
                store.title = "新增其他信息";
                store.visible2 = true;
                store.record = {};
              },
            },
          ],
          rowOperations: {
            width: 140,
            menus: [
              {
                label: "编辑",
                onClick({ record }) {
                  store.title = "编辑其他信息";
                  store.visible2 = true;
                  store.record = record;
                },
              },
              {
                label: "删除",
                confirm: "是否确认删除?",
                async onClick({ search, record }) {
                  console.log(record);
                  await sleep();
                  Message.success("已删除!");
                  await search?.();
                },
              },
            ],
          },
          request: async (params) => {
            console.log("params =>", params);
            const { data } = await axios.get(
              "http://111.229.112.107:3003/mock/table2",
              {
                params,
              }
            );
            return data;
          },
          columns: [
            {
              title: "ID",
              dataIndex: "id",
              width: 60,
            },
            {
              title: "组件名称",
              dataIndex: "name",
            },
            {
              title: "英文名称",
              dataIndex: "enName",
            },
            {
              title: "组件类型",
              dataIndex: "type",
              render(type) {
                return <Tag>{type}</Tag>;
              },
            },
            {
              title: "描述",
              dataIndex: "desc",
            },
            {
              title: "最后更新时间",
              dataIndex: "update",
            },
          ],
          search: {
            schema: [
              {
                type: "Input",
                label: "组件名称",
                name: "name",
              },
              {
                type: "Input",
                label: "英文名称",
                name: "enName",
              },
              {
                type: "Select",
                label: "组件类型",
                name: "type",
                props: {
                  data: [
                    {
                      value: "A",
                      label: "A",
                    },
                    {
                      value: "B",
                      label: "B",
                    },
                    {
                      value: "C",
                      label: "C",
                    },
                    {
                      value: "D",
                      label: "D",
                    },
                  ],
                },
              },
            ],
          },
          pages: {
            add: {
              type: "drawer",
              title: snap.title,
              visible: snap.visible2,
              defaultValue: snap.record,
              schema: [
                {
                  type: "Input",
                  label: "组件名称",
                  name: "name",
                  required: true,
                },
                {
                  type: "Input",
                  label: "英文名称",
                  name: "enName",
                  required: true,
                },
                {
                  type: "Select",
                  label: "组件类型",
                  name: "type",
                  required: true,
                  props: {
                    data: [
                      {
                        value: "A",
                        label: "A",
                      },
                      {
                        value: "B",
                        label: "B",
                      },
                      {
                        value: "C",
                        label: "C",
                      },
                      {
                        value: "D",
                        label: "D",
                      },
                    ],
                  },
                },
                {
                  type: "TextArea",
                  label: "组件描述",
                  name: "desc",
                  props: {
                    rows: 3,
                  },
                },
              ],
              async onSubmit(values, api) {
                Message.success(JSON.stringify(values));
                await sleep();
                setTimeout(() => {
                  values.id ? api?.refresh() : api?.search();
                }, 500);
              },
              onClose() {
                store.visible2 = false;
              },
            },
          },
        },
      }}
    />
  );
};

API

ProTabsProps 继承 TabsProps 额外的属性描述

属性名	描述	类型	默认值	是否必需
tabs	tab 属性配置	{ [key: string]: ProTabProps }	无	否

ProTabProps 继承 ProCrudProps 额外的属性描述

属性名	描述	类型	默认值	是否必需
label	标签名称	ReactNode	无	是
disabled	是否禁用	boolean	无	否