fix： 增加页签

.umirc.ts

@@ -15,7 +15,7 @@ export default defineConfig({
   proxy: {
     '/api/': {
       // target: 'http://yt:8003',
-      target: 'http://10.39.13.80:8003',
+      target: 'http://10.39.13.80:8006',
       // target: 'http://we6f9c65.natappfree.cc',
       // target: 'https://loanos-test.nchl.net/',
       changeOrigin: true,

.vercel/project.json

@@ -0,0 +1 @@
+{"projectName":"trae_pay-admin_tj5u"}

gencode.json

@@ -1,4 +1,4 @@
 {
-  "url": "http://10.39.13.80:8003/api/docs/openapi",
+  "url": "http://10.39.13.80:8006/api/docs/openapi",
   "module": "Admin"
 }

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
-    "@ant-design/pro-components": "^2.4.4",
+    "@ant-design/pro-components": "^2.8.10",
+    "@antv/g2": "^5.3.5",
     "@antv/s2": "^2.0.0-next.25",
     "@antv/s2-react": "^2.0.0-next.24",
     "@umijs/max": "^4.3.10",

src/common/components/layout/MyPageContainer.scss

@@ -0,0 +1,49 @@
+.tabs-header-only {
+  .ant-tabs-content-holder {
+    display: none !important;
+  }
+
+  .ant-tabs-tab {
+    position: relative;
+
+    &:hover {
+      .tab-close-btn {
+        opacity: 1;
+      }
+    }
+  }
+
+  .tab-close-btn {
+    opacity: 0;
+    transition: opacity 0.2s;
+    margin-left: 4px;
+
+    &:hover {
+      color: #ff4d4f;
+    }
+  }
+
+  .ant-tabs-tab-active {
+    .tab-close-btn {
+      opacity: 0.7;
+    }
+  }
+}
+
+// 右键菜单样式优化
+.ant-dropdown-menu {
+  .ant-dropdown-menu-item {
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    &.ant-dropdown-menu-item-disabled {
+      color: #bfbfbf;
+      cursor: not-allowed;
+    }
+  }
+
+  .ant-dropdown-menu-item-divider {
+    margin: 4px 0;
+  }
+}

src/common/components/layout/MyPageContainer.tsx

@@ -1,11 +1,298 @@
+import { CloseOutlined, ReloadOutlined } from '@ant-design/icons';
 import { PageContainer, PageContainerProps } from '@ant-design/pro-components';
-import { Space } from 'antd';
+import { history, useLocation } from '@umijs/max';
+import type { MenuProps } from 'antd';
+import { Dropdown, message, Space, Tabs } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import './MyPageContainer.scss';
+
+export interface TabItem {
+  key: string;
+  label: string;
+  path: string;
+  closable?: boolean;
+}
+
+export interface MyPageContainerProps extends PageContainerProps {
+  enableTabs?: boolean;
+  tabKey?: string;
+  tabLabel?: string;
+  onTabChange?: (activeKey: string) => void;
+}
+
+// 全局标签页状态管理
+class TabsManager {
+  private tabs: TabItem[] = [];
+  private activeKey: string = '';
+  private listeners: Set<() => void> = new Set();
+
+  subscribe(listener: () => void) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  private notify() {
+    this.listeners.forEach((listener) => listener());
+  }
+
+  getTabs() {
+    return this.tabs;
+  }
+
+  getActiveKey() {
+    return this.activeKey;
+  }
+
+  addTab(tab: TabItem) {
+    const existingIndex = this.tabs.findIndex((t) => t.key === tab.key);
+    if (existingIndex === -1) {
+      this.tabs.push(tab);
+    } else {
+      this.tabs[existingIndex] = { ...this.tabs[existingIndex], ...tab };
+    }
+    this.activeKey = tab.key;
+    this.notify();
+  }
+
+  removeTab(targetKey: string) {
+    const targetIndex = this.tabs.findIndex((tab) => tab.key === targetKey);
+    if (targetIndex === -1) return;
+
+    const newTabs = this.tabs.filter((tab) => tab.key !== targetKey);
+
+    if (newTabs.length === 0) {
+      this.tabs = [];
+      this.activeKey = '';
+      history.push('/');
+    } else {
+      this.tabs = newTabs;
+      if (this.activeKey === targetKey) {
+        // 如果关闭的是当前激活的标签，激活相邻的标签
+        const newActiveKey =
+          targetIndex > 0 ? newTabs[targetIndex - 1].key : newTabs[0].key;
+        this.activeKey = newActiveKey;
+        const targetTab = newTabs.find((tab) => tab.key === newActiveKey);
+        if (targetTab) {
+          history.push(targetTab.path);
+        }
+      }
+    }
+    this.notify();
+  }
+
+  setActiveKey(key: string) {
+    this.activeKey = key;
+    const targetTab = this.tabs.find((tab) => tab.key === key);
+    if (targetTab) {
+      history.push(targetTab.path);
+    }
+    this.notify();
+  }
+
+  closeOtherTabs(currentKey: string) {
+    const currentTab = this.tabs.find((tab) => tab.key === currentKey);
+    if (currentTab) {
+      this.tabs = [currentTab];
+      this.activeKey = currentKey;
+      this.notify();
+    }
+  }
+
+  closeLeftTabs(currentKey: string) {
+    const currentIndex = this.tabs.findIndex((tab) => tab.key === currentKey);
+    if (currentIndex > 0) {
+      this.tabs = this.tabs.slice(currentIndex);
+      this.notify();
+    }
+  }
+
+  closeRightTabs(currentKey: string) {
+    const currentIndex = this.tabs.findIndex((tab) => tab.key === currentKey);
+    if (currentIndex !== -1) {
+      this.tabs = this.tabs.slice(0, currentIndex + 1);
+      this.notify();
+    }
+  }
+
+  refreshTab(key: string) {
+    // 通过路由跳转的方式刷新当前标签页，避免整个页面刷新导致标签页状态丢失
+    const targetTab = this.tabs.find((tab) => tab.key === key);
+    if (targetTab) {
+      const originalPath = targetTab.path;
+      // 移除可能存在的刷新参数，确保获取干净的原始路径
+      const cleanPath = originalPath
+        .replace(/[?&]_refresh=\d+/g, '')
+        .replace(/\?$/, '');
+
+      // 添加时间戳参数强制刷新
+      const refreshPath = cleanPath.includes('?')
+        ? `${cleanPath}&_refresh=${Date.now()}`
+        : `${cleanPath}?_refresh=${Date.now()}`;
+
+      // 先更新为带刷新参数的路径并跳转
+      targetTab.path = refreshPath;
+      this.setActiveKey(key);
+
+      // 延迟恢复原始路径，确保路由跳转完成
+      setTimeout(() => {
+        // 恢复为干净的原始路径
+        targetTab.path = cleanPath;
+        // 再次跳转到干净路径，移除URL中的刷新参数
+        history.push(cleanPath);
+        this.notify();
+      }, 300);
+    }
+  }
+}
+
+// 全局标签页管理器实例
+const tabsManager = new TabsManager();
 
 export function MyPageContainer({
   title,
   children,
+  enableTabs = true,
+  tabKey,
+  tabLabel,
+  onTabChange,
   ...rest
-}: PageContainerProps) {
+}: MyPageContainerProps) {
+  const location = useLocation();
+  const [tabs, setTabs] = useState<TabItem[]>([]);
+  const [activeKey, setActiveKey] = useState<string>('');
+  const contextMenuRef = useRef<{
+    x: number;
+    y: number;
+    targetKey: string;
+  } | null>(null);
+
+  // 订阅标签页状态变化
+  useEffect(() => {
+    const unsubscribe = tabsManager.subscribe(() => {
+      setTabs([...tabsManager.getTabs()]);
+      setActiveKey(tabsManager.getActiveKey());
+    });
+
+    // 初始化状态
+    setTabs([...tabsManager.getTabs()]);
+    setActiveKey(tabsManager.getActiveKey());
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  // 当组件挂载时，添加当前页面到标签页
+  useEffect(() => {
+    if (enableTabs && tabKey && tabLabel) {
+      tabsManager.addTab({
+        key: tabKey,
+        label: tabLabel,
+        path: location.pathname + location.search,
+        closable: true,
+      });
+    }
+  }, [enableTabs, tabKey, tabLabel, location.pathname, location.search]);
+
+  const handleTabChange = useCallback(
+    (key: string) => {
+      tabsManager.setActiveKey(key);
+      onTabChange?.(key);
+    },
+    [onTabChange],
+  );
+
+  const handleTabEdit = useCallback(
+    (
+      targetKey: string | React.MouseEvent | React.KeyboardEvent,
+      action: 'add' | 'remove',
+    ) => {
+      if (action === 'remove' && typeof targetKey === 'string') {
+        tabsManager.removeTab(targetKey);
+      }
+    },
+    [],
+  );
+
+  // 右键菜单配置
+  const getContextMenuItems = useCallback(
+    (targetKey: string): MenuProps['items'] => {
+      const currentIndex = tabs.findIndex((tab) => tab.key === targetKey);
+      const hasLeftTabs = currentIndex > 0;
+      const hasRightTabs = currentIndex < tabs.length - 1;
+      const hasOtherTabs = tabs.length > 1;
+
+      return [
+        {
+          key: 'refresh',
+          label: '刷新',
+          icon: <ReloadOutlined />,
+          onClick: () => tabsManager.refreshTab(targetKey),
+        },
+        {
+          key: 'close',
+          label: '关闭',
+          icon: <CloseOutlined />,
+          onClick: () => tabsManager.removeTab(targetKey),
+        },
+        {
+          type: 'divider',
+        },
+        {
+          key: 'closeOthers',
+          label: '关闭其他',
+          disabled: !hasOtherTabs,
+          onClick: () => {
+            tabsManager.closeOtherTabs(targetKey);
+            message.success('已关闭其他标签页');
+          },
+        },
+        {
+          key: 'closeLeft',
+          label: '关闭左侧',
+          disabled: !hasLeftTabs,
+          onClick: () => {
+            tabsManager.closeLeftTabs(targetKey);
+            message.success('已关闭左侧标签页');
+          },
+        },
+        {
+          key: 'closeRight',
+          label: '关闭右侧',
+          disabled: !hasRightTabs,
+          onClick: () => {
+            tabsManager.closeRightTabs(targetKey);
+            message.success('已关闭右侧标签页');
+          },
+        },
+      ];
+    },
+    [tabs],
+  );
+
+  // 自定义标签页渲染
+  const renderTabBar: React.ComponentProps<typeof Tabs>['renderTabBar'] = (
+    props,
+    DefaultTabBar,
+  ) => {
+    return (
+      <DefaultTabBar {...props}>
+        {(node) => {
+          const tabKey = node.key as string;
+          return (
+            <Dropdown
+              menu={{ items: getContextMenuItems(tabKey) }}
+              trigger={['contextMenu']}
+            >
+              <div>{node}</div>
+            </Dropdown>
+          );
+        }}
+      </DefaultTabBar>
+    );
+  };
+
+  if (!enableTabs || tabs.length === 0) {
     return (
       <PageContainer
         fixedHeader
@@ -25,3 +312,45 @@ export function MyPageContainer({
       </PageContainer>
     );
   }
+
+  return (
+    <PageContainer
+      fixedHeader
+      header={{
+        title: (
+          <Tabs
+            type="editable-card"
+            activeKey={activeKey}
+            onChange={handleTabChange}
+            onEdit={handleTabEdit}
+            hideAdd
+            size="small"
+            renderTabBar={renderTabBar}
+            items={tabs.map((tab) => ({
+              key: tab.key,
+              label: tab.label,
+              closable: tab.closable,
+            }))}
+            style={{
+              marginBottom: 0,
+            }}
+            className="tabs-header-only"
+          />
+        ),
+        style: { backgroundColor: '#FFF' },
+      }}
+      token={{
+        paddingBlockPageContainerContent: 0,
+        paddingInlinePageContainerContent: 0,
+      }}
+      {...rest}
+    >
+      <Space direction="vertical" size="middle" style={{ width: '100%' }}>
+        {children}
+      </Space>
+    </PageContainer>
+  );
+}
+
+// 导出标签页管理器，供其他组件使用
+export { tabsManager };

src/common/components/layout/MyRootContainer.tsx

@@ -5,10 +5,11 @@ import { MyLoading } from './MyLoading';
 export function MyRootContainer({ children }: { children: ReactNode }) {
   return (
     <ConfigProvider
+      // 输入框圆角
       theme={{
         token: {
           fontSize: 14,
-          borderRadius: 1,
+          borderRadius: 5,
           // colorPrimary: '#00928a',
           // colorInfo: '#00928a',
         },

src/common/components/layout/README.md

@@ -0,0 +1,294 @@
+# MyPageContainer 多标签页功能
+
+基于 Ant Design Pro Components 的企业级多标签页解决方案，提供完整的标签页管理功能。
+
+## ✨ 特性
+
+- 🎯 **多标签页支持** - 支持同时打开多个页面标签
+- 🖱️ **右键菜单** - 丰富的标签页操作菜单
+- 🔄 **智能导航** - 关闭标签时自动切换到相邻标签
+- 💾 **状态管理** - 全局标签页状态管理
+- 🎨 **主题适配** - 完美适配 Ant Design 主题
+- 📱 **响应式设计** - 支持不同屏幕尺寸
+
+## 🚀 快速开始
+
+### 基础用法
+
+```tsx
+import { MyPageContainer, usePageTabs } from '@/common';
+
+function UserListPage() {
+  // 使用 Hook 简化标签页管理
+  usePageTabs({
+    tabKey: 'user-list',
+    tabLabel: '用户列表'
+  });
+
+  return (
+    <MyPageContainer
+      enableTabs
+      tabKey="user-list"
+      tabLabel="用户列表"
+      title="用户管理"
+    >
+      {/* 页面内容 */}
+      <div>用户列表内容</div>
+    </MyPageContainer>
+  );
+}
+```
+
+### 高级用法
+
+```tsx
+import { MyPageContainer, usePageTabs, tabsManager } from '@/common';
+import { Button, Space } from 'antd';
+import { history } from '@umijs/max';
+
+function DashboardPage() {
+  const tabsApi = usePageTabs({
+    tabKey: 'dashboard',
+    tabLabel: '仪表盘',
+    closable: false // 首页不可关闭
+  });
+
+  const openUserPage = () => {
+    tabsApi.addTab({
+      key: 'user-list',
+      label: '用户列表',
+      path: '/users'
+    });
+    history.push('/users');
+  };
+
+  return (
+    <MyPageContainer
+      enableTabs
+      tabKey="dashboard"
+      tabLabel="仪表盘"
+      title="系统仪表盘"
+    >
+      <Space>
+        <Button type="primary" onClick={openUserPage}>
+          打开用户列表
+        </Button>
+        <Button onClick={() => tabsApi.closeOtherTabs()}>
+          关闭其他标签
+        </Button>
+      </Space>
+    </MyPageContainer>
+  );
+}
+```
+
+## 📚 API 文档
+
+### MyPageContainer Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| enableTabs | 是否启用多标签页功能 | `boolean` | `true` |
+| tabKey | 标签页唯一标识 | `string` | - |
+| tabLabel | 标签页显示标题 | `string` | - |
+| onTabChange | 标签页切换回调 | `(activeKey: string) => void` | - |
+| ...rest | 继承 PageContainerProps 的所有属性 | `PageContainerProps` | - |
+
+### usePageTabs Hook
+
+#### 参数
+
+```tsx
+interface UsePageTabsOptions {
+  tabKey: string;        // 标签页唯一标识
+  tabLabel: string;      // 标签页显示标题
+  closable?: boolean;    // 是否可关闭，默认 true
+  autoAdd?: boolean;     // 是否自动添加，默认 true
+}
+```
+
+#### 返回值
+
+```tsx
+interface UsePageTabsReturn {
+  addTab: (tab: TabItem) => void;           // 添加标签页
+  removeTab: (key: string) => void;         // 关闭标签页
+  switchTab: (key: string) => void;         // 切换标签页
+  closeOtherTabs: (currentKey?: string) => void;  // 关闭其他标签
+  closeLeftTabs: (currentKey?: string) => void;   // 关闭左侧标签
+  closeRightTabs: (currentKey?: string) => void;  // 关闭右侧标签
+  refreshTab: (key?: string) => void;       // 刷新标签页
+  getTabs: () => TabItem[];                 // 获取所有标签
+  getActiveKey: () => string;               // 获取当前激活标签
+}
+```
+
+### TabsManager 全局管理器
+
+```tsx
+import { tabsManager } from '@/common';
+
+// 直接操作标签页管理器
+tabsManager.addTab({
+  key: 'new-page',
+  label: '新页面',
+  path: '/new-page',
+  closable: true
+});
+
+// 监听标签页变化
+const unsubscribe = tabsManager.subscribe(() => {
+  console.log('标签页状态已更新');
+});
+
+// 取消监听
+unsubscribe();
+```
+
+## 🎨 样式定制
+
+### CSS 变量
+
+```scss
+// 自定义标签页样式
+.tabs-header-only {
+  .ant-tabs-tab {
+    // 标签页样式
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+  
+  .ant-tabs-tab-active {
+    // 激活状态样式
+    background-color: #e6f7ff;
+  }
+}
+```
+
+### 主题定制
+
+```tsx
+import { ConfigProvider } from 'antd';
+
+<ConfigProvider
+  theme={{
+    components: {
+      Tabs: {
+        cardBg: '#ffffff',
+        itemActiveColor: '#1890ff',
+        itemHoverColor: '#40a9ff'
+      }
+    }
+  }}
+>
+  <MyPageContainer enableTabs tabKey="page" tabLabel="页面" />
+</ConfigProvider>
+```
+
+## 🔧 最佳实践
+
+### 1. 标签页命名规范
+
+```tsx
+// ✅ 推荐：使用语义化的 key
+usePageTabs({
+  tabKey: 'user-list',
+  tabLabel: '用户列表'
+});
+
+// ❌ 不推荐：使用随机或无意义的 key
+usePageTabs({
+  tabKey: 'page1',
+  tabLabel: '页面1'
+});
+```
+
+### 2. 路由集成
+
+```tsx
+// 在路由配置中使用
+export default {
+  path: '/users',
+  component: () => import('./UserListPage'),
+  // 可以在路由元信息中定义标签页信息
+  meta: {
+    tabKey: 'user-list',
+    tabLabel: '用户列表'
+  }
+};
+```
+
+### 3. 权限控制
+
+```tsx
+function ProtectedPage() {
+  const { hasPermission } = useAccess();
+  
+  usePageTabs({
+    tabKey: 'admin-panel',
+    tabLabel: '管理面板',
+    // 根据权限决定是否可关闭
+    closable: hasPermission('admin')
+  });
+  
+  return (
+    <MyPageContainer
+      enableTabs
+      tabKey="admin-panel"
+      tabLabel="管理面板"
+    >
+      {/* 内容 */}
+    </MyPageContainer>
+  );
+}
+```
+
+### 4. 性能优化
+
+```tsx
+// 使用 React.memo 优化组件渲染
+const OptimizedPage = React.memo(() => {
+  usePageTabs({
+    tabKey: 'heavy-page',
+    tabLabel: '重型页面'
+  });
+  
+  return (
+    <MyPageContainer
+      enableTabs
+      tabKey="heavy-page"
+      tabLabel="重型页面"
+    >
+      {/* 复杂内容 */}
+    </MyPageContainer>
+  );
+});
+```
+
+## 🐛 常见问题
+
+### Q: 标签页不显示？
+A: 确保设置了 `enableTabs={true}` 并提供了 `tabKey` 和 `tabLabel`。
+
+### Q: 右键菜单不工作？
+A: 检查是否正确导入了 CSS 样式文件。
+
+### Q: 标签页状态丢失？
+A: 标签页状态是全局的，但在页面刷新后会重置。如需持久化，可以结合 localStorage 实现。
+
+### Q: 如何禁用某些标签页的关闭功能？
+A: 在添加标签页时设置 `closable: false`。
+
+## 🔄 更新日志
+
+### v1.0.0
+- ✨ 新增多标签页功能
+- ✨ 新增右键菜单操作
+- ✨ 新增 usePageTabs Hook
+- ✨ 新增全局状态管理
+- 🎨 优化样式和交互体验
+
+## 📄 许可证
+
+MIT License

src/common/components/layout/TabsExample.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Button, Card, Space, Divider } from 'antd';
+import { PlusOutlined, UserOutlined, SettingOutlined } from '@ant-design/icons';
+import { MyPageContainer } from './MyPageContainer';
+import { usePageTabs } from './usePageTabs';
+import { history } from '@umijs/max';
+
+/**
+ * 标签页使用示例组件
+ * 展示如何使用MyPageContainer的多标签页功能
+ */
+export function TabsExample() {
+  const tabsApi = usePageTabs({
+    tabKey: 'tabs-example',
+    tabLabel: '标签页示例'
+  });
+
+  const handleAddTab = (key: string, label: string, path: string) => {
+    tabsApi.addTab({
+      key,
+      label,
+      path,
+      closable: true
+    });
+    history.push(path);
+  };
+
+  return (
+    <MyPageContainer
+      enableTabs
+      tabKey="tabs-example"
+      tabLabel="标签页示例"
+      title="多标签页功能演示"
+    >
+      <Card title="标签页操作示例" style={{ marginBottom: 16 }}>
+        <Space wrap>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => handleAddTab('user-list', '用户列表', '/users')}
+          >
+            打开用户列表
+          </Button>
+          
+          <Button
+            icon={<UserOutlined />}
+            onClick={() => handleAddTab('user-profile', '用户详情', '/users/profile')}
+          >
+            打开用户详情
+          </Button>
+          
+          <Button
+            icon={<SettingOutlined />}
+            onClick={() => handleAddTab('settings', '系统设置', '/settings')}
+          >
+            打开系统设置
+          </Button>
+        </Space>
+        
+        <Divider />
+        
+        <Space wrap>
+          <Button onClick={() => tabsApi.closeOtherTabs()}>
+            关闭其他标签
+          </Button>
+          
+          <Button onClick={() => tabsApi.closeLeftTabs()}>
+            关闭左侧标签
+          </Button>
+          
+          <Button onClick={() => tabsApi.closeRightTabs()}>
+            关闭右侧标签
+          </Button>
+          
+          <Button onClick={() => tabsApi.refreshTab()}>
+            刷新当前标签
+          </Button>
+        </Space>
+      </Card>
+      
+      <Card title="功能说明">
+        <div style={{ lineHeight: '1.8' }}>
+          <h4>🎯 核心功能</h4>
+          <ul>
+            <li><strong>多标签页支持</strong>：支持同时打开多个页面标签</li>
+            <li><strong>右键菜单</strong>：右键点击标签页显示操作菜单</li>
+            <li><strong>智能导航</strong>：关闭标签时自动切换到相邻标签</li>
+            <li><strong>状态持久化</strong>：标签页状态在组件间共享</li>
+          </ul>
+          
+          <h4>🖱️ 右键菜单操作</h4>
+          <ul>
+            <li><strong>刷新</strong>：重新加载当前标签页</li>
+            <li><strong>关闭</strong>：关闭当前标签页</li>
+            <li><strong>关闭其他</strong>：关闭除当前标签外的所有标签</li>
+            <li><strong>关闭左侧</strong>：关闭当前标签左侧的所有标签</li>
+            <li><strong>关闭右侧</strong>：关闭当前标签右侧的所有标签</li>
+          </ul>
+          
+          <h4>💻 使用方法</h4>
+          <pre style={{ background: '#f5f5f5', padding: '12px', borderRadius: '4px' }}>
+{`// 1. 在页面组件中使用
+import { MyPageContainer, usePageTabs } from '@/common';
+
+function YourPage() {
+  usePageTabs({
+    tabKey: 'your-page',
+    tabLabel: '页面标题'
+  });
+
+  return (
+    <MyPageContainer
+      enableTabs
+      tabKey="your-page"
+      tabLabel="页面标题"
+    >
+      {/* 页面内容 */}
+    </MyPageContainer>
+  );
+}`}
+          </pre>
+        </div>
+      </Card>
+    </MyPageContainer>
+  );
+}

src/common/components/layout/usePageTabs.ts

@@ -0,0 +1,100 @@
+import { useEffect } from 'react';
+import { useLocation } from '@umijs/max';
+import { tabsManager } from './MyPageContainer';
+
+export interface UsePageTabsOptions {
+  /** 标签页的唯一标识 */
+  tabKey: string;
+  /** 标签页显示的标题 */
+  tabLabel: string;
+  /** 是否可关闭，默认为true */
+  closable?: boolean;
+  /** 是否自动添加到标签页，默认为true */
+  autoAdd?: boolean;
+}
+
+/**
+ * 页面标签页Hook
+ * 用于简化页面标签页的管理
+ */
+export function usePageTabs(options: UsePageTabsOptions) {
+  const location = useLocation();
+  const { tabKey, tabLabel, closable = true, autoAdd = true } = options;
+
+  useEffect(() => {
+    if (autoAdd) {
+      tabsManager.addTab({
+        key: tabKey,
+        label: tabLabel,
+        path: location.pathname + location.search,
+        closable
+      });
+    }
+  }, [tabKey, tabLabel, closable, autoAdd, location.pathname, location.search]);
+
+  return {
+    /** 添加新标签页 */
+    addTab: (tab: { key: string; label: string; path?: string; closable?: boolean }) => {
+      tabsManager.addTab({
+        ...tab,
+        path: tab.path || location.pathname + location.search,
+        closable: tab.closable ?? true
+      });
+    },
+    
+    /** 关闭指定标签页 */
+    removeTab: (key: string) => {
+      tabsManager.removeTab(key);
+    },
+    
+    /** 切换到指定标签页 */
+    switchTab: (key: string) => {
+      tabsManager.setActiveKey(key);
+    },
+    
+    /** 关闭其他标签页 */
+    closeOtherTabs: (currentKey?: string) => {
+      tabsManager.closeOtherTabs(currentKey || tabKey);
+    },
+    
+    /** 关闭左侧标签页 */
+    closeLeftTabs: (currentKey?: string) => {
+      tabsManager.closeLeftTabs(currentKey || tabKey);
+    },
+    
+    /** 关闭右侧标签页 */
+    closeRightTabs: (currentKey?: string) => {
+      tabsManager.closeRightTabs(currentKey || tabKey);
+    },
+    
+    /** 刷新标签页 */
+    refreshTab: (key?: string) => {
+      tabsManager.refreshTab(key || tabKey);
+    },
+    
+    /** 获取当前所有标签页 */
+    getTabs: () => tabsManager.getTabs(),
+    
+    /** 获取当前激活的标签页key */
+    getActiveKey: () => tabsManager.getActiveKey()
+  };
+}
+
+/**
+ * 标签页管理器Hook
+ * 用于在组件中监听标签页状态变化
+ */
+export function useTabsManager() {
+  return {
+    tabsManager,
+    addTab: tabsManager.addTab.bind(tabsManager),
+    removeTab: tabsManager.removeTab.bind(tabsManager),
+    setActiveKey: tabsManager.setActiveKey.bind(tabsManager),
+    closeOtherTabs: tabsManager.closeOtherTabs.bind(tabsManager),
+    closeLeftTabs: tabsManager.closeLeftTabs.bind(tabsManager),
+    closeRightTabs: tabsManager.closeRightTabs.bind(tabsManager),
+    refreshTab: tabsManager.refreshTab.bind(tabsManager),
+    getTabs: tabsManager.getTabs.bind(tabsManager),
+    getActiveKey: tabsManager.getActiveKey.bind(tabsManager)
+  };
+}

src/common/components/props/MyProTableProps.ts

@@ -4,8 +4,9 @@ import { SortOrder } from 'antd/es/table/interface';
 export const MyProTableProps = {
   props: {
     scroll: { x: 'max-content', scrollToFirstRowOnChange: true },
-    bordered: true,
+    //修改列表的样式
-    size: 'small',
+    // bordered: true,
+    size: 'middle',
     rowKey: 'id',
     pagination: {
       showTotal: (total) => `总共${total}条`,

src/common/components/schema/MyColumns.tsx

@@ -153,13 +153,14 @@ export const MyColumns = {
   },
   EnumTag({ ...rest }: ReturnType): ReturnType {
     return {
-      align: 'center',
+      align: 'left',
       renderText(text: string | number) {
         const _enum = rest.valueEnum ?? {};
         if (!_enum) return <>-</>;
         const item = _enum[text] ?? undefined;
         if (!item) return <>-</>;
-        return <Tag color={item.color}>{item.text}</Tag>;
+        return <Tag style={{ color: item?.color }}>{item.text}</Tag>;
+        //修改列表的标签样式
       },
       ...rest,
     };

src/common/index.tsx

@@ -10,6 +10,8 @@ export * from './components/layout/MyCommonModal';
 export * from './components/layout/MyImportModal';
 export * from './components/layout/MyPageContainer';
 export * from './components/layout/MyRootContainer';
+export * from './components/layout/usePageTabs';
+export * from './components/layout/TabsExample';
 
 export * from './components/props/MyDrawerProps';
 export * from './components/props/MyModalFormProps';

src/common/utils/renderTextHelper.tsx

@@ -28,10 +28,11 @@ export const renderTextHelper = {
       return data.value === '' + value;
     });
     return isColor ? (
-      <Tag color={item?.color}>{item?.text}</Tag>
+      <Tag style={{ color: item?.color }}>{item?.text}</Tag>
     ) : (
       <>{item?.text}</>
     );
+    //  return <Tag style={{ color: item.color }}>{item.text}</Tag>;
   },
   Images(images: string[]) {
     return (

src/gen/ApiTypes.d.ts

@@ -35,6 +35,7 @@ declare namespace ApiTypes {
         "house_name"?: string; // 模糊搜索：房屋名称 
         "type"?: string; // 类型,[enum:HouseRegistersTypeEnum] 
         "status"?: string; // 状态,[enum:HouseRegistersStatusEnum] 
+        "asset_houses_id"?: number; // 房屋ID 
       };
       type Store = {
         "asset_houses_id": number; // 房屋ID 
@@ -57,6 +58,8 @@ declare namespace ApiTypes {
       };
       type MoveOut = {
         "house_occupants_id": number; // 房客id 
+        "move_out_date"?: Date; // 搬离时间 
+        "apply_reason"?: string; // 搬离原因 
       };
       type RemoveOwner = {
         "house_occupants_id": number; // 房客id 

src/gen/Enums.ts

@@ -1,290 +1,398 @@
 // AssetHousesOrientationEnum
 export const AssetHousesOrientationEnum = {
-  'East': {"text":"东","color":"#007bff","value":"East"}, 
+  East: { text: '东', color: '#007bff', value: 'East' },
-  'South': {"text":"南","color":"#28a745","value":"South"}, 
+  South: { text: '南', color: '#28a745', value: 'South' },
-  'West': {"text":"西","color":"#ffc107","value":"West"}, 
+  West: { text: '西', color: '#ffc107', value: 'West' },
-  'North': {"text":"北","color":"#dc3545","value":"North"}, 
+  North: { text: '北', color: '#dc3545', value: 'North' },
-  'Southeast': {"text":"东南","color":"#20c997","value":"Southeast"}, 
+  Southeast: { text: '东南', color: '#20c997', value: 'Southeast' },
-  'Northeast': {"text":"东北","color":"#6f42c1","value":"Northeast"}, 
+  Northeast: { text: '东北', color: '#6f42c1', value: 'Northeast' },
-  'Southwest': {"text":"西南","color":"#fd7e14","value":"Southwest"}, 
+  Southwest: { text: '西南', color: '#fd7e14', value: 'Southwest' },
-  'Northwest': {"text":"西北","color":"#17a2b8","value":"Northwest"}, 
+  Northwest: { text: '西北', color: '#17a2b8', value: 'Northwest' },
-  'EastWest': {"text":"东西","color":"#6610f2","value":"EastWest"}, 
+  EastWest: { text: '东西', color: '#6610f2', value: 'EastWest' },
-  'SouthNorth': {"text":"南北","color":"#e83e8c","value":"SouthNorth"}, 
+  SouthNorth: { text: '南北', color: '#e83e8c', value: 'SouthNorth' },
 };
 
 // AssetHousesOwnershipTypeEnum
 export const AssetHousesOwnershipTypeEnum = {
-  'CommodityHousing': {"text":"商品房","color":"#007bff","value":"CommodityHousing"}, 
+  CommodityHousing: {
-  'FundedHousing': {"text":"集资房","color":"#28a745","value":"FundedHousing"}, 
+    text: '商品房',
-  'MilitaryHousing': {"text":"军产房","color":"#17a2b8","value":"MilitaryHousing"}, 
+    color: '#007bff',
-  'AffordableHousing': {"text":"保障房","color":"#ffc107","value":"AffordableHousing"}, 
+    value: 'CommodityHousing',
-  'RuralHousing': {"text":"农民房","color":"#6f42c1","value":"RuralHousing"}, 
+  },
-  'CommercialOffice': {"text":"商业写字楼","color":"#fd7e14","value":"CommercialOffice"}, 
+  FundedHousing: { text: '集资房', color: '#28a745', value: 'FundedHousing' },
-  'CommercialComplex': {"text":"商业综合体","color":"#dc3545","value":"CommercialComplex"}, 
+  MilitaryHousing: {
-  'ResettlementHousing': {"text":"回迁房","color":"#20c997","value":"ResettlementHousing"}, 
+    text: '军产房',
+    color: '#17a2b8',
+    value: 'MilitaryHousing',
+  },
+  AffordableHousing: {
+    text: '保障房',
+    color: '#ffc107',
+    value: 'AffordableHousing',
+  },
+  RuralHousing: { text: '农民房', color: '#6f42c1', value: 'RuralHousing' },
+  CommercialOffice: {
+    text: '商业写字楼',
+    color: '#fd7e14',
+    value: 'CommercialOffice',
+  },
+  CommercialComplex: {
+    text: '商业综合体',
+    color: '#dc3545',
+    value: 'CommercialComplex',
+  },
+  ResettlementHousing: {
+    text: '回迁房',
+    color: '#20c997',
+    value: 'ResettlementHousing',
+  },
 };
 
 // AssetHousesStatusEnum
 export const AssetHousesStatusEnum = {
-  'Unsold': {"text":"未售","color":"#6c757d","value":"Unsold"}, 
+  Unsold: { text: '未售', color: '#6c757d', value: 'Unsold' },
-  'SoldNotDelivered': {"text":"已售未交房","color":"#ffc107","value":"SoldNotDelivered"}, 
+  SoldNotDelivered: {
-  'SelfOccupied': {"text":"自住","color":"#28a745","value":"SelfOccupied"}, 
+    text: '已售未交房',
-  'Rented': {"text":"出租","color":"#007bff","value":"Rented"}, 
+    color: '#ffc107',
-  'Vacant': {"text":"空置","color":"#dc3545","value":"Vacant"}, 
+    value: 'SoldNotDelivered',
+  },
+  SelfOccupied: { text: '自住', color: '#28a745', value: 'SelfOccupied' },
+  Rented: { text: '出租', color: '#007bff', value: 'Rented' },
+  Vacant: { text: '空置', color: '#dc3545', value: 'Vacant' },
 };
 
 // AssetHousesUsageEnum
 export const AssetHousesUsageEnum = {
-  'Residence': {"text":"住宅","color":"#007bff","value":"Residence"}, 
+  Residence: { text: '住宅', color: '#007bff', value: 'Residence' },
-  'Apartment': {"text":"公寓","color":"#28a745","value":"Apartment"}, 
+  Apartment: { text: '公寓', color: '#28a745', value: 'Apartment' },
-  'Villa': {"text":"别墅","color":"#17a2b8","value":"Villa"}, 
+  Villa: { text: '别墅', color: '#17a2b8', value: 'Villa' },
-  'Shop': {"text":"商铺","color":"#ffc107","value":"Shop"}, 
+  Shop: { text: '商铺', color: '#ffc107', value: 'Shop' },
-  'ParkingSpace': {"text":"车位","color":"#6c757d","value":"ParkingSpace"}, 
+  ParkingSpace: { text: '车位', color: '#6c757d', value: 'ParkingSpace' },
-  'Office': {"text":"写字楼","color":"#6610f2","value":"Office"}, 
+  Office: { text: '写字楼', color: '#6610f2', value: 'Office' },
-  'Clubhouse': {"text":"会所","color":"#fd7e14","value":"Clubhouse"}, 
+  Clubhouse: { text: '会所', color: '#fd7e14', value: 'Clubhouse' },
-  'PropertyRoom': {"text":"物业用房","color":"#dc3545","value":"PropertyRoom"}, 
+  PropertyRoom: { text: '物业用房', color: '#dc3545', value: 'PropertyRoom' },
 };
 
 // AssetProjectsChargeEnum
 export const AssetProjectsChargeEnum = {
-  'Contract': {"text":"包干制","color":"#007bff","value":"Contract"}, 
+  Contract: { text: '包干制', color: '#007bff', value: 'Contract' },
-  'Commission': {"text":"酬金制","color":"#28a745","value":"Commission"}, 
+  Commission: { text: '酬金制', color: '#28a745', value: 'Commission' },
 };
 
 // AssetProjectsEntrustTypeEnum
 export const AssetProjectsEntrustTypeEnum = {
-  'DeveloperJointEntrust': {"text":"开发商全委","color":"#007bff","value":"DeveloperJointEntrust"}, 
+  DeveloperJointEntrust: {
-  'OwnersFullEntrust': {"text":"业委会全委","color":"#28a745","value":"OwnersFullEntrust"}, 
+    text: '开发商全委',
-  'GovernmentFullEntrust': {"text":"政府类全委","color":"#ffc107","value":"GovernmentFullEntrust"}, 
+    color: '#007bff',
+    value: 'DeveloperJointEntrust',
+  },
+  OwnersFullEntrust: {
+    text: '业委会全委',
+    color: '#28a745',
+    value: 'OwnersFullEntrust',
+  },
+  GovernmentFullEntrust: {
+    text: '政府类全委',
+    color: '#ffc107',
+    value: 'GovernmentFullEntrust',
+  },
 };
 
 // AssetProjectsPropertyTypeEnum
 export const AssetProjectsPropertyTypeEnum = {
-  'Residence': {"text":"住宅","color":"#ff0000","value":"Residence"}, 
+  Residence: { text: '住宅', color: '#ff0000', value: 'Residence' },
-  'Commercial': {"text":"商业","color":"#ff6600","value":"Commercial"}, 
+  Commercial: { text: '商业', color: '#ff6600', value: 'Commercial' },
-  'Office': {"text":"办公","color":"#ffcc00","value":"Office"}, 
+  Office: { text: '办公', color: '#ffcc00', value: 'Office' },
-  'IndustrialPark': {"text":"产业园","color":"#00cc66","value":"IndustrialPark"}, 
+  IndustrialPark: { text: '产业园', color: '#00cc66', value: 'IndustrialPark' },
-  'Complex': {"text":"综合体","color":"#0099ff","value":"Complex"}, 
+  Complex: { text: '综合体', color: '#0099ff', value: 'Complex' },
-  'Municipal': {"text":"市政设施","color":"#6633cc","value":"Municipal"}, 
+  Municipal: { text: '市政设施', color: '#6633cc', value: 'Municipal' },
-  'Venue': {"text":"场馆","color":"#9966ff","value":"Venue"}, 
+  Venue: { text: '场馆', color: '#9966ff', value: 'Venue' },
-  'Education': {"text":"教育","color":"#339999","value":"Education"}, 
+  Education: { text: '教育', color: '#339999', value: 'Education' },
-  'Medical': {"text":"医疗","color":"#cc3366","value":"Medical"}, 
+  Medical: { text: '医疗', color: '#cc3366', value: 'Medical' },
 };
 
 // AssetProjectsStatusEnum
 export const AssetProjectsStatusEnum = {
-  'SignedNotDelivered': {"text":"签约未交付","color":"#6c757d","value":"SignedNotDelivered"}, 
+  SignedNotDelivered: {
-  'RollingDevelopment': {"text":"滚动开发","color":"#007bff","value":"RollingDevelopment"}, 
+    text: '签约未交付',
-  'ManagedAndClosed': {"text":"在管封园","color":"#ffc107","value":"ManagedAndClosed"}, 
+    color: '#6c757d',
-  'Exited': {"text":"退出","color":"#dc3545","value":"Exited"}, 
+    value: 'SignedNotDelivered',
+  },
+  RollingDevelopment: {
+    text: '滚动开发',
+    color: '#007bff',
+    value: 'RollingDevelopment',
+  },
+  ManagedAndClosed: {
+    text: '在管封园',
+    color: '#ffc107',
+    value: 'ManagedAndClosed',
+  },
+  Exited: { text: '退出', color: '#dc3545', value: 'Exited' },
 };
 
 // AssetUnitsBuildingStructureEnum
 export const AssetUnitsBuildingStructureEnum = {
-  'SteelConcrete': {"text":"钢混","color":"#007bff","value":"SteelConcrete"}, 
+  SteelConcrete: { text: '钢混', color: '#007bff', value: 'SteelConcrete' },
-  'SteelStructure': {"text":"钢结构","color":"#28a745","value":"SteelStructure"}, 
+  SteelStructure: { text: '钢结构', color: '#28a745', value: 'SteelStructure' },
-  'BrickConcrete': {"text":"砖混","color":"#ffc107","value":"BrickConcrete"}, 
+  BrickConcrete: { text: '砖混', color: '#ffc107', value: 'BrickConcrete' },
-  'BrickWood': {"text":"砖木","color":"#dc3545","value":"BrickWood"}, 
+  BrickWood: { text: '砖木', color: '#dc3545', value: 'BrickWood' },
 };
 
 // AssetUnitsBuildingTypeEnum
 export const AssetUnitsBuildingTypeEnum = {
-  'SlabAndTower': {"text":"板塔结合","color":"#007bff","value":"SlabAndTower"}, 
+  SlabAndTower: { text: '板塔结合', color: '#007bff', value: 'SlabAndTower' },
-  'Slab': {"text":"板楼","color":"#28a745","value":"Slab"}, 
+  Slab: { text: '板楼', color: '#28a745', value: 'Slab' },
-  'Tower': {"text":"塔楼","color":"#ffc107","value":"Tower"}, 
+  Tower: { text: '塔楼', color: '#ffc107', value: 'Tower' },
 };
 
 // 缓存类型
 export const CacheTypeEnum = {
-  'MobilePhoneVerificationCode': {"text":"手机验证码","color":"#6c905c","value":"MobilePhoneVerificationCode"}, 
+  MobilePhoneVerificationCode: {
+    text: '手机验证码',
+    color: '#012ab0',
+    value: 'MobilePhoneVerificationCode',
+  },
 };
 
 // CompaniesMerchantTypeEnum
 export const CompaniesMerchantTypeEnum = {
-  'PropertyManagement': {"text":"物业公司","color":"#007bff","value":"PropertyManagement"}, 
+  PropertyManagement: {
-  'ServiceProvider': {"text":"服务商","color":"#28a745","value":"ServiceProvider"}, 
+    text: '物业公司',
+    color: '#007bff',
+    value: 'PropertyManagement',
+  },
+  ServiceProvider: {
+    text: '服务商',
+    color: '#28a745',
+    value: 'ServiceProvider',
+  },
 };
 
 // CompanyAppsAppTypeEnum
 export const CompanyAppsAppTypeEnum = {
-  'MiniProgram': {"text":"微信小程序","color":"#3b82f6","value":"MiniProgram"}, 
+  MiniProgram: { text: '微信小程序', color: '#3b82f6', value: 'MiniProgram' },
-  'MpOfficial': {"text":"微信公众号","color":"#22c55e","value":"MpOfficial"}, 
+  MpOfficial: { text: '微信公众号', color: '#22c55e', value: 'MpOfficial' },
-  'WorkWechat': {"text":"企业微信","color":"#6366f1","value":"WorkWechat"}, 
+  WorkWechat: { text: '企业微信', color: '#6366f1', value: 'WorkWechat' },
 };
 
 // CompanyAppsModuleEnum
 export const CompanyAppsModuleEnum = {
-  'Employee': {"text":"员工端","color":"#3b82f6","value":"Employee"}, 
+  Employee: { text: '员工端', color: '#3b82f6', value: 'Employee' },
-  'Customer': {"text":"客户端","color":"#10b981","value":"Customer"}, 
+  Customer: { text: '客户端', color: '#10b981', value: 'Customer' },
 };
 
 // CompanyReceiptAccountsPayChannelEnum
 export const CompanyReceiptAccountsPayChannelEnum = {
-  'WeChat': {"text":"微信","color":"#07c160","value":"WeChat"}, 
+  WeChat: { text: '微信', color: '#07c160', value: 'WeChat' },
-  'Alipay': {"text":"支付宝","color":"#1677ff","value":"Alipay"}, 
+  Alipay: { text: '支付宝', color: '#1677ff', value: 'Alipay' },
-  'BankTransfer': {"text":"银行转账","color":"#6c757d","value":"BankTransfer"}, 
+  BankTransfer: { text: '银行转账', color: '#6c757d', value: 'BankTransfer' },
-  'TongLian': {"text":"通联支付","color":"#ff9f0a","value":"TongLian"}, 
+  TongLian: { text: '通联支付', color: '#ff9f0a', value: 'TongLian' },
 };
 
 // CustomerBacklogsStatusEnum
 export const CustomerBacklogsStatusEnum = {
-  'Pending': {"text":"待办","color":"#faad14","value":"Pending"}, 
+  Pending: { text: '待办', color: '#faad14', value: 'Pending' },
-  'Done': {"text":"已办","color":"#52c41a","value":"Done"}, 
+  Done: { text: '已办', color: '#52c41a', value: 'Done' },
 };
 
 // CustomerBacklogsTypeEnum
 export const CustomerBacklogsTypeEnum = {
-  'RegisterApply': {"text":"登记申请","color":"#2db7f5","value":"RegisterApply"}, 
+  RegisterApply: { text: '登记申请', color: '#2db7f5', value: 'RegisterApply' },
-  'PaymentPending': {"text":"费用待缴","color":"#faad14","value":"PaymentPending"}, 
+  PaymentPending: {
-  'ContractTodo': {"text":"合同待办","color":"#722ed1","value":"ContractTodo"}, 
+    text: '费用待缴',
+    color: '#faad14',
+    value: 'PaymentPending',
+  },
+  ContractTodo: { text: '合同待办', color: '#722ed1', value: 'ContractTodo' },
 };
 
 // 账单状态枚举
 export const HouseBillsBillStatusEnum = {
-  'PendingPayment': {"text":"待支付","color":"#facc15","value":"PendingPayment"}, 
+  PendingPayment: { text: '待支付', color: '#facc15', value: 'PendingPayment' },
-  'PartiallyPaid': {"text":"部分支付","color":"#60a5fa","value":"PartiallyPaid"}, 
+  PartiallyPaid: { text: '部分支付', color: '#60a5fa', value: 'PartiallyPaid' },
-  'Paid': {"text":"已支付","color":"#10b981","value":"Paid"}, 
+  Paid: { text: '已支付', color: '#10b981', value: 'Paid' },
-  'Overdue': {"text":"已逾期","color":"#ef4444","value":"Overdue"}, 
+  Overdue: { text: '已逾期', color: '#ef4444', value: 'Overdue' },
-  'Cancelled': {"text":"已取消","color":"#9ca3af","value":"Cancelled"}, 
+  Cancelled: { text: '已取消', color: '#9ca3af', value: 'Cancelled' },
 };
 
 // 房屋账单类型枚举
 export const HouseBillsTypeEnum = {
-  'PropertyFee': {"text":"物业费","color":"#3b82f6","value":"PropertyFee"}, 
+  PropertyFee: { text: '物业费', color: '#3b82f6', value: 'PropertyFee' },
-  'MaintenanceFund': {"text":"维修基金","color":"#10b981","value":"MaintenanceFund"}, 
+  MaintenanceFund: {
-  'WaterFee': {"text":"水费","color":"#06b6d4","value":"WaterFee"}, 
+    text: '维修基金',
-  'ElectricityFee': {"text":"电费","color":"#f59e0b","value":"ElectricityFee"}, 
+    color: '#10b981',
-  'SharedWaterFee': {"text":"公摊水费","color":"#8b5cf6","value":"SharedWaterFee"}, 
+    value: 'MaintenanceFund',
-  'SharedElectricityFee': {"text":"公摊电费","color":"#ec4899","value":"SharedElectricityFee"}, 
+  },
+  WaterFee: { text: '水费', color: '#06b6d4', value: 'WaterFee' },
+  ElectricityFee: { text: '电费', color: '#f59e0b', value: 'ElectricityFee' },
+  SharedWaterFee: {
+    text: '公摊水费',
+    color: '#8b5cf6',
+    value: 'SharedWaterFee',
+  },
+  SharedElectricityFee: {
+    text: '公摊电费',
+    color: '#ec4899',
+    value: 'SharedElectricityFee',
+  },
 };
 
 // HouseOccupantsCardTypeEnum
 export const HouseOccupantsCardTypeEnum = {
-  'MainlandID': {"text":"中国大陆居民身份证","color":"#2db7f5","value":"MainlandID"}, 
+  MainlandID: {
-  'HKPermit': {"text":"香港来往大陆通行证（回乡证）","color":"#fa8c16","value":"HKPermit"}, 
+    text: '中国大陆居民身份证',
-  'MOPermit': {"text":"澳门来往大陆通行证（回乡证）","color":"#faad14","value":"MOPermit"}, 
+    color: '#2db7f5',
-  'TWPermit': {"text":"台湾来往大陆通行证（台胞证）","color":"#87d068","value":"TWPermit"}, 
+    value: 'MainlandID',
-  'Passport': {"text":"护照","color":"#108ee9","value":"Passport"}, 
+  },
-  'BusinessLicense': {"text":"营业执照","color":"#f5222d","value":"BusinessLicense"}, 
+  HKPermit: {
+    text: '香港来往大陆通行证（回乡证）',
+    color: '#fa8c16',
+    value: 'HKPermit',
+  },
+  MOPermit: {
+    text: '澳门来往大陆通行证（回乡证）',
+    color: '#faad14',
+    value: 'MOPermit',
+  },
+  TWPermit: {
+    text: '台湾来往大陆通行证（台胞证）',
+    color: '#87d068',
+    value: 'TWPermit',
+  },
+  Passport: { text: '护照', color: '#108ee9', value: 'Passport' },
+  BusinessLicense: {
+    text: '营业执照',
+    color: '#f5222d',
+    value: 'BusinessLicense',
+  },
 };
 
 // HouseOccupantsHouseRelationEnum
 export const HouseOccupantsHouseRelationEnum = {
-  'Owner': {"text":"产权人","color":"#2db7f5","value":"Owner"}, 
+  Owner: { text: '产权人', color: '#2db7f5', value: 'Owner' },
-  'Resident': {"text":"住户","color":"#87d068","value":"Resident"}, 
+  Resident: { text: '住户', color: '#87d068', value: 'Resident' },
-  'Tenant': {"text":"租客","color":"#fa8c16","value":"Tenant"}, 
+  Tenant: { text: '租客', color: '#fa8c16', value: 'Tenant' },
 };
 
 // HouseOccupantsRelationWithOwnerEnum
 export const HouseOccupantsRelationWithOwnerEnum = {
-  'Self': {"text":"本人","color":"#52c41a","value":"Self"}, 
+  Self: { text: '本人', color: '#52c41a', value: 'Self' },
-  'Spouse': {"text":"夫妻","color":"#2db7f5","value":"Spouse"}, 
+  Spouse: { text: '夫妻', color: '#2db7f5', value: 'Spouse' },
-  'FatherSon': {"text":"父子","color":"#faad14","value":"FatherSon"}, 
+  FatherSon: { text: '父子', color: '#faad14', value: 'FatherSon' },
-  'MotherSon': {"text":"母子","color":"#fa8c16","value":"MotherSon"}, 
+  MotherSon: { text: '母子', color: '#fa8c16', value: 'MotherSon' },
-  'Children': {"text":"子女","color":"#87d068","value":"Children"}, 
+  Children: { text: '子女', color: '#87d068', value: 'Children' },
-  'ContactPerson': {"text":"指定联系人","color":"#f5222d","value":"ContactPerson"}, 
+  ContactPerson: {
+    text: '指定联系人',
+    color: '#f5222d',
+    value: 'ContactPerson',
+  },
 };
 
 // HouseOccupantsStatusEnum
 export const HouseOccupantsStatusEnum = {
-  'Normal': {"text":"正常","color":"#52c41a","value":"Normal"}, 
+  Normal: { text: '正常', color: '#52c41a', value: 'Normal' },
-  'Unbound': {"text":"已解除","color":"#f5222d","value":"Unbound"}, 
+  Unbound: { text: '已解除', color: '#f5222d', value: 'Unbound' },
 };
 
 // 订单状态枚举
 export const HouseOrdersOrderStatusEnum = {
-  'Pending': {"text":"待支付","color":"#facc15","value":"Pending"}, 
+  Pending: { text: '待支付', color: '#facc15', value: 'Pending' },
-  'Paid': {"text":"已支付","color":"#10b981","value":"Paid"}, 
+  Paid: { text: '已支付', color: '#10b981', value: 'Paid' },
-  'Refunded': {"text":"已退款","color":"#60a5fa","value":"Refunded"}, 
+  Refunded: { text: '已退款', color: '#60a5fa', value: 'Refunded' },
-  'Cancelled': {"text":"已取消","color":"#9ca3af","value":"Cancelled"}, 
+  Cancelled: { text: '已取消', color: '#9ca3af', value: 'Cancelled' },
-  'Failed': {"text":"支付失败","color":"#ef4444","value":"Failed"}, 
+  Failed: { text: '支付失败', color: '#ef4444', value: 'Failed' },
 };
 
 // HouseOrdersPaymentMethodEnum
 export const HouseOrdersPaymentMethodEnum = {
-  'WeChat': {"text":"微信","color":"#07c160","value":"WeChat"}, 
+  WeChat: { text: '微信', color: '#07c160', value: 'WeChat' },
-  'Alipay': {"text":"支付宝","color":"#1677ff","value":"Alipay"}, 
+  Alipay: { text: '支付宝', color: '#1677ff', value: 'Alipay' },
-  'BankTransfer': {"text":"银行转账","color":"#6c757d","value":"BankTransfer"}, 
+  BankTransfer: { text: '银行转账', color: '#6c757d', value: 'BankTransfer' },
-  'TongLian': {"text":"通联支付","color":"#ff9f0a","value":"TongLian"}, 
+  TongLian: { text: '通联支付', color: '#ff9f0a', value: 'TongLian' },
 };
 
 // HouseRegistersCustomerTypeEnum
 export const HouseRegistersCustomerTypeEnum = {
-  'Individual': {"text":"个人客户","color":"#2db7f5","value":"Individual"}, 
+  Individual: { text: '个人客户', color: '#2db7f5', value: 'Individual' },
-  'Enterprise': {"text":"普通企业","color":"#87d068","value":"Enterprise"}, 
+  Enterprise: { text: '普通企业', color: '#87d068', value: 'Enterprise' },
-  'Developer': {"text":"开发企业","color":"#fa8c16","value":"Developer"}, 
+  Developer: { text: '开发企业', color: '#fa8c16', value: 'Developer' },
-  'Government': {"text":"政府组织","color":"#f5222d","value":"Government"}, 
+  Government: { text: '政府组织', color: '#f5222d', value: 'Government' },
 };
 
 // HouseRegistersHouseStatusEnum
 export const HouseRegistersHouseStatusEnum = {
-  'SelfOccupied': {"text":"自住","color":"#28a745","value":"SelfOccupied"}, 
+  SelfOccupied: { text: '自住', color: '#28a745', value: 'SelfOccupied' },
-  'Rented': {"text":"出租","color":"#007bff","value":"Rented"}, 
+  Rented: { text: '出租', color: '#007bff', value: 'Rented' },
-  'Vacant': {"text":"空置","color":"#dc3545","value":"Vacant"}, 
+  Vacant: { text: '空置', color: '#dc3545', value: 'Vacant' },
 };
 
 // 房屋登记身份类型
 export const HouseRegistersIdentityTypeEnum = {
-  'Owner': {"text":"产权人","color":"#2db7f5","value":"Owner"}, 
+  Owner: { text: '产权人', color: '#2db7f5', value: 'Owner' },
-  'Tenant': {"text":"租客","color":"#87d068","value":"Tenant"}, 
+  Tenant: { text: '租客', color: '#87d068', value: 'Tenant' },
-  'CoResident': {"text":"同住人(亲属)","color":"#108ee9","value":"CoResident"}, 
+  CoResident: { text: '同住人(亲属)', color: '#108ee9', value: 'CoResident' },
 };
 
 // HouseRegistersStatusEnum
 export const HouseRegistersStatusEnum = {
-  'Pending': {"text":"待审","color":"#faad14","value":"Pending"}, 
+  Pending: { text: '待审', color: '#faad14', value: 'Pending' },
-  'Approved': {"text":"已审","color":"#52c41a","value":"Approved"}, 
+  Approved: { text: '已审', color: '#52c41a', value: 'Approved' },
-  'Rejected': {"text":"驳回","color":"#f5222d","value":"Rejected"}, 
+  Rejected: { text: '驳回', color: '#f5222d', value: 'Rejected' },
 };
 
 // HouseRegistersTypeEnum
 export const HouseRegistersTypeEnum = {
-  'Delivery': {"text":"交付登记","color":"#2db7f5","value":"Delivery"}, 
+  Delivery: { text: '入户登记', color: '#2db7f5', value: 'Delivery' },
-  'Transfer': {"text":"过户登记","color":"#87d068","value":"Transfer"}, 
+  Transfer: { text: '过户登记', color: '#87d068', value: 'Transfer' },
-  'AddOccupant': {"text":"添加住户","color":"#108ee9","value":"AddOccupant"}, 
+  AddOccupant: { text: '添加住户', color: '#108ee9', value: 'AddOccupant' },
-  'MoveOut': {"text":"搬离登记","color":"#f50","value":"MoveOut"}, 
+  MoveOut: { text: '搬离登记', color: '#f50', value: 'MoveOut' },
-  'RemoveOwner': {"text":"减少产权人","color":"#d9363e","value":"RemoveOwner"}, 
+  MoveIn: { text: '搬入登记', color: '#ffc53d', value: 'MoveIn' },
+  RemoveOwner: { text: '减少产权人', color: '#d9363e', value: 'RemoveOwner' },
 };
 
 // HouseRegistersUsagePlanEnum
 export const HouseRegistersUsagePlanEnum = {
-  'Permanent': {"text":"常住","color":"#52c41a","value":"Permanent"}, 
+  Permanent: { text: '常住', color: '#52c41a', value: 'Permanent' },
-  'Vacation': {"text":"度假","color":"#faad14","value":"Vacation"}, 
+  Vacation: { text: '度假', color: '#faad14', value: 'Vacation' },
-  'Rental': {"text":"出租","color":"#2db7f5","value":"Rental"}, 
+  Rental: { text: '出租', color: '#2db7f5', value: 'Rental' },
-  'Commercial': {"text":"商用","color":"#f5222d","value":"Commercial"}, 
+  Commercial: { text: '商用', color: '#f5222d', value: 'Commercial' },
 };
 
 // OrganizationsTypeEnum
 export const OrganizationsTypeEnum = {
-  'Group': {"text":"集团","color":"#007bff","value":"Group"}, 
+  Group: { text: '集团', color: '#007bff', value: 'Group' },
-  'Company': {"text":"公司","color":"#28a745","value":"Company"}, 
+  Company: { text: '公司', color: '#28a745', value: 'Company' },
-  'ManagementOffice': {"text":"管理处","color":"#ffc107","value":"ManagementOffice"}, 
+  ManagementOffice: {
-  'Department': {"text":"部门","color":"#dc3545","value":"Department"}, 
+    text: '管理处',
+    color: '#ffc107',
+    value: 'ManagementOffice',
+  },
+  Department: { text: '部门', color: '#dc3545', value: 'Department' },
 };
 
 // 性别
 export const SexEnum = {
-  'Male': {"text":"男","color":"#0000ff","value":"Male"}, 
+  Male: { text: '男', color: '#0000ff', value: 'Male' },
-  'FeMale': {"text":"女","color":"#ff0000","value":"FeMale"}, 
+  FeMale: { text: '女', color: '#ff0000', value: 'FeMale' },
 };
 
 // SysModuleEnum
 export const SysModuleEnum = {
-  'Admin': {"text":"管理员","color":"#cf1322","value":"Admin"}, 
+  Admin: { text: '管理员', color: '#cf1322', value: 'Admin' },
-  'Customer': {"text":"客户","color":"#d4b106","value":"Customer"}, 
+  Customer: { text: '客户', color: '#d4b106', value: 'Customer' },
 };
 
 // SysPermissionsTypeEnum
 export const SysPermissionsTypeEnum = {
-  'Directory': {"text":"目录","color":"#6d7e14","value":"Directory"}, 
+  Directory: { text: '目录', color: '#6d7e14', value: 'Directory' },
-  'Page': {"text":"页面","color":"#4d9a13","value":"Page"}, 
+  Page: { text: '页面', color: '#4d9a13', value: 'Page' },
-  'Button': {"text":"按钮","color":"#97224f","value":"Button"}, 
+  Button: { text: '按钮', color: '#97224f', value: 'Button' },
 };
 
 // WechatAuthsPlatformEnum
 export const WechatAuthsPlatformEnum = {
-  'MiniProgram': {"text":"微信小程序","color":"#3b82f6","value":"MiniProgram"}, 
+  MiniProgram: { text: '微信小程序', color: '#3b82f6', value: 'MiniProgram' },
-  'MpOfficial': {"text":"微信公众号","color":"#22c55e","value":"MpOfficial"}, 
+  MpOfficial: { text: '微信公众号', color: '#22c55e', value: 'MpOfficial' },
-  'WorkWechat': {"text":"企业微信","color":"#6366f1","value":"WorkWechat"}, 
+  WorkWechat: { text: '企业微信', color: '#6366f1', value: 'WorkWechat' },
 };
-

src/pages/archive/asset_house/$id.tsx

@@ -5,7 +5,9 @@ import { useParams } from '@umijs/max';
 import { Tabs } from 'antd';
 import { useEffect, useState } from 'react';
 import HouseInfo from './components/HouseInfo';
+import OccupantsHistory from './table/OccupantsHistory';
 import OccupantsNow from './table/OccupantsNow';
+import RegistersList from './table/RegistersList';
 
 export default function Show({ title = '房屋详情' }) {
   const { id } = useParams<{ id: string }>();
@@ -22,21 +24,29 @@ export default function Show({ title = '房屋详情' }) {
 
   let items = [
     {
-      label: '当前档案',
+      label: '当前客户',
       key: '1',
       closable: false,
-      children: (
+      children: data?.id ? (
         <OccupantsNow
-          item={{ asset_houses_id: id }}
+          item={{ ...data, asset_houses_id: id }}
           reload={() => loadShow()}
         />
+      ) : (
+        ''
       ),
     },
     {
-      label: '历史档案',
+      label: '历史客户',
       key: '2',
       closable: false,
-      // children: <MyAssetBuildings item={data} />,
+      children: <OccupantsHistory item={{ ...data, asset_houses_id: id }} />,
+    },
+    {
+      label: '操作记录',
+      key: '3',
+      closable: false,
+      children: <RegistersList item={{ ...data, asset_houses_id: id }} />,
     },
   ];
 

src/pages/archive/asset_house/index.tsx

@@ -3,6 +3,7 @@ import {
   MyColumns,
   MyPageContainer,
   MyProTableProps,
+  usePageTabs,
 } from '@/common';
 import { Apis } from '@/gen/Apis';
 import {
@@ -17,7 +18,11 @@ import Delivery from './modals/Delivery';
 
 export default function Index({ title = '房屋档案' }) {
   const navigate = useNavigate();
-
+  // 注册当前页面为标签页
+  usePageTabs({
+    tabKey: 'archive-asset-houses',
+    tabLabel: title,
+  });
   return (
     <MyPageContainer title={title}>
       <ProTable
@@ -39,21 +44,20 @@ export default function Index({ title = '房屋档案' }) {
             dataIndex: 'usage',
             valueEnum: AssetHousesUsageEnum,
             search: false,
-            width: 80,
           }),
           {
             title: '房屋名称',
             dataIndex: 'full_name',
           },
-          {
+          // {
-            title: '楼层',
+          //   title: '楼层',
-            dataIndex: 'floor',
+          //   dataIndex: 'floor',
-            render(_, record) {
+          //   render(_, record) {
-              return `${record?.floor}层`;
+          //     return `${record?.floor}层`;
-            },
+          //   },
-            search: false,
+          //   search: false,
-            width: 60,
+          //   width: 60,
-          },
+          // },
           {
             title: '建筑面积',
             dataIndex: 'built_area',
@@ -63,15 +67,15 @@ export default function Index({ title = '房屋档案' }) {
             search: false,
             width: 80,
           },
-          {
+          // {
-            title: '套内面积',
+          //   title: '套内面积',
-            dataIndex: 'inside_area',
+          //   dataIndex: 'inside_area',
-            render(_, record) {
+          //   render(_, record) {
-              return `${record?.inside_area} m²`;
+          //     return `${record?.inside_area} m²`;
-            },
+          //   },
-            search: false,
+          //   search: false,
-            width: 80,
+          //   width: 80,
-          },
+          // },
           {
             title: '计费面积',
             dataIndex: 'chargeable_area',
@@ -81,7 +85,19 @@ export default function Index({ title = '房屋档案' }) {
             search: false,
             width: 80,
           },
-
+          {
+            title: '产权人',
+            render(_, record) {
+              return (
+                record?.house_occupants
+                  ?.filter((res: any) => res?.house_relation !== 'Resident') // 过滤掉 Resident
+                  .map((res: any) => res?.name)
+                  .join(';') || '-'
+              ); // 无数据时显示 -
+            },
+            search: false,
+            width: 200,
+          },
           MyColumns.EnumTag({
             title: '房屋状态',
             dataIndex: 'status',

src/pages/archive/asset_house/modals/AddOccupant.tsx

@@ -80,7 +80,7 @@ export default function Create(props: MyBetaModalFormProps) {
                 MyFormItems.EnumRadio({
                   key: 'house_relation',
                   title: '房客关系',
-                  colProps: { span: 4 },
+                  colProps: { span: 6 },
                   valueEnum: () => {
                     let obj: any = JSON.parse(
                       JSON.stringify(HouseOccupantsHouseRelationEnum),
@@ -98,8 +98,8 @@ export default function Create(props: MyBetaModalFormProps) {
                       ? [
                           MyFormItems.EnumRadio({
                             key: 'relation_with_owner',
-                            title: '住户类型',
+                            title: '关系标记',
-                            colProps: { span: 12 },
+                            colProps: { span: 18 },
                             valueEnum: () => {
                               let obj: any = JSON.parse(
                                 JSON.stringify(
@@ -116,8 +116,8 @@ export default function Create(props: MyBetaModalFormProps) {
                       : [
                           MyFormItems.EnumRadio({
                             key: 'relation_with_owner',
-                            title: '住户类型',
+                            title: '关系标记',
-                            colProps: { span: 12 },
+                            colProps: { span: 18 },
                             // valueEnum: HouseOccupantsRelationWithOwnerEnum,
                             valueEnum: () => {
                               let obj: any = JSON.parse(
@@ -133,32 +133,7 @@ export default function Create(props: MyBetaModalFormProps) {
                         ];
                   },
                 },
-                {
+
-                  title: '是否入住',
-                  dataIndex: 'is_live_in',
-                  colProps: { span: 4 },
-                  valueType: 'switch',
-                },
-                {
-                  name: ['is_live_in'],
-                  valueType: 'dependency',
-                  columns: ({ is_live_in }: any) => {
-                    return is_live_in
-                      ? [
-                          {
-                            title: '入住日期',
-                            dataIndex: 'move_in_date',
-                            valueType: 'date',
-                            colProps: { span: 4 },
-                            fieldProps: {
-                              style: { width: '100%' },
-                            },
-                            formItemProps: { ...rulesHelper.text },
-                          },
-                        ]
-                      : [,];
-                  },
-                },
                 {
                   title: '姓名',
                   dataIndex: 'name',
@@ -205,9 +180,35 @@ export default function Create(props: MyBetaModalFormProps) {
                       key: 'card_back_image',
                       title: '证件反面',
                       max: 1,
-                      colProps: { span: 4 },
+                      colProps: { span: 8 },
                       formItemProps: { ...rulesHelper.text },
                     }),
+                    {
+                      title: '是否入住',
+                      dataIndex: 'is_live_in',
+                      colProps: { span: 6 },
+                      valueType: 'switch',
+                    },
+                    {
+                      name: ['is_live_in'],
+                      valueType: 'dependency',
+                      columns: ({ is_live_in }: any) => {
+                        return is_live_in
+                          ? [
+                              {
+                                title: '入住日期',
+                                dataIndex: 'move_in_date',
+                                valueType: 'date',
+                                colProps: { span: 6 },
+                                fieldProps: {
+                                  style: { width: '100%' },
+                                },
+                                formItemProps: { ...rulesHelper.text },
+                              },
+                            ]
+                          : [];
+                      },
+                    },
                   ],
                 },
               ],

src/pages/archive/asset_house/modals/AddOwner.tsx

@@ -9,7 +9,6 @@ import { Apis } from '@/gen/Apis';
 import {
   HouseOccupantsCardTypeEnum,
   HouseOccupantsHouseRelationEnum,
-  HouseRegistersCustomerTypeEnum,
 } from '@/gen/Enums';
 import { BetaSchemaForm, ProCard } from '@ant-design/pro-components';
 import { Form, message } from 'antd';
@@ -19,23 +18,31 @@ export default function Create(props: MyBetaModalFormProps) {
   return (
     <BetaSchemaForm<ApiTypes.Archive.HouseRegisters.Store>
       {...MyModalFormProps.props}
-      title={`添加${props.title}`}
+      title={`${props.title}`}
       wrapperCol={{ span: 24 }}
       width="900px"
       form={form}
       trigger={
-        <MyButtons.Default title={props.title} size="middle" type="primary" />
+        <MyButtons.Default title={props.title} type="primary" size="middle" />
       }
       onOpenChange={(open: any) => {
         if (open) {
           form.resetFields(); // 清空表单数据
         }
       }}
-      onFinish={async (values) =>
+      onFinish={async (values: any) =>
         Apis.Archive.HouseRegisters.Store({
           ...values,
           asset_houses_id: props?.item?.asset_houses_id,
           type: 'Delivery',
+          house_status: props?.item?.status,
+          customer_info: values.customer_info?.map((res: any) => {
+            return {
+              ...res,
+              house_relation: 'Owner',
+              relation_with_owner: 'Self',
+            };
+          }),
         })
           .then(() => {
             props.reload?.();
@@ -45,26 +52,6 @@ export default function Create(props: MyBetaModalFormProps) {
           .catch(() => false)
       }
       columns={[
-        MyFormItems.EnumRadio({
-          key: 'house_relation',
-          title: '住户类型',
-          colProps: { span: 6 },
-          valueEnum: () => {
-            let obj: any = JSON.parse(
-              JSON.stringify(HouseOccupantsHouseRelationEnum),
-            );
-            delete obj.Resident;
-            delete obj.Tenant;
-            return obj;
-          },
-          required: true,
-        }),
-        MyFormItems.EnumRadio({
-          key: 'customer_type',
-          title: '客户类型',
-          colProps: { span: 12 },
-          valueEnum: HouseRegistersCustomerTypeEnum,
-        }),
         {
           valueType: 'formList',
           dataIndex: 'customer_info',
@@ -100,49 +87,44 @@ export default function Create(props: MyBetaModalFormProps) {
                 {
                   title: '姓名',
                   dataIndex: 'name',
-                  colProps: { span: 12 },
+                  colProps: { span: 5 },
                   formItemProps: { ...rulesHelper.text },
                 },
                 {
                   title: '手机号',
                   dataIndex: 'phone',
-                  colProps: { span: 6 },
+                  colProps: { span: 5 },
-                  fieldProps: {
-                    maxLength: 11,
-                  },
-                  formItemProps: { ...rulesHelper.text },
-                },
-                {
-                  title: '备用手机号',
-                  dataIndex: 'reserve_phone',
-                  colProps: { span: 6 },
                   fieldProps: {
                     maxLength: 11,
                   },
+                  formItemProps: { ...rulesHelper.phone },
                 },
                 MyFormItems.EnumSelect({
                   key: 'card_type',
                   title: '证件类型',
-                  colProps: { span: 12 },
+                  colProps: { span: 6 },
                   valueEnum: HouseOccupantsCardTypeEnum,
                   required: true,
                 }),
                 {
                   title: '证件号码',
                   dataIndex: 'id_card',
-                  colProps: { span: 12 },
+                  colProps: { span: 8 },
                   fieldProps: {
                     maxLength: 18,
                   },
                   formItemProps: { ...rulesHelper.text },
                 },
-
+                MyFormItems.EnumRadio({
-                // {
+                  key: 'house_relation',
-                //   title: '是否在居住中',
+                  title: '住户类型',
-                //   dataIndex: 'is_live_in',
+                  colProps: { span: 6 },
-                //   colProps: { span: 8 },
+                  valueEnum: HouseOccupantsHouseRelationEnum,
-                //   valueType: 'switch',
+                  fieldProps: {
-                // },
+                    defaultValue: 'Owner',
+                  },
+                  hideInForm: true,
+                }),
                 {
                   valueType: 'group',
                   columns: [
@@ -157,9 +139,35 @@ export default function Create(props: MyBetaModalFormProps) {
                       key: 'card_back_image',
                       title: '证件反面',
                       max: 1,
-                      colProps: { span: 4 },
+                      colProps: { span: 8 },
                       formItemProps: { ...rulesHelper.text },
                     }),
+                    {
+                      title: '是否入住',
+                      dataIndex: 'is_live_in',
+                      colProps: { span: 6 },
+                      valueType: 'switch',
+                    },
+                    {
+                      name: ['is_live_in'],
+                      valueType: 'dependency',
+                      columns: ({ is_live_in }: any) => {
+                        return is_live_in
+                          ? [
+                              {
+                                title: '入住日期',
+                                dataIndex: 'move_in_date',
+                                valueType: 'date',
+                                colProps: { span: 6 },
+                                fieldProps: {
+                                  style: { width: '100%' },
+                                },
+                                formItemProps: { ...rulesHelper.text },
+                              },
+                            ]
+                          : [];
+                      },
+                    },
                   ],
                 },
               ],

src/pages/archive/asset_house/modals/Delivery.tsx

@@ -8,9 +8,9 @@ import {
 import { Apis } from '@/gen/Apis';
 import {
   HouseOccupantsCardTypeEnum,
+  HouseOccupantsHouseRelationEnum,
   HouseRegistersCustomerTypeEnum,
   HouseRegistersHouseStatusEnum,
-  HouseRegistersUsagePlanEnum,
 } from '@/gen/Enums';
 import { BetaSchemaForm, ProCard } from '@ant-design/pro-components';
 import { Form, message } from 'antd';
@@ -32,11 +32,18 @@ export default function Create(props: MyBetaModalFormProps) {
           form.resetFields(); // 清空表单数据
         }
       }}
-      onFinish={async (values) =>
+      onFinish={async (values: any) =>
         Apis.Archive.HouseRegisters.Store({
           ...values,
           asset_houses_id: props?.item?.id,
           type: 'Delivery',
+          customer_info: values.customer_info?.map((res: any) => {
+            return {
+              ...res,
+              house_relation: 'Owner',
+              relation_with_owner: 'Self',
+            };
+          }),
         })
           .then(() => {
             props.reload?.();
@@ -59,12 +66,6 @@ export default function Create(props: MyBetaModalFormProps) {
           valueEnum: HouseRegistersHouseStatusEnum,
           formItemProps: { ...rulesHelper.text },
         }),
-        MyFormItems.EnumSelect({
-          key: 'usage_plan',
-          title: '使用计划',
-          colProps: { span: 6 },
-          valueEnum: HouseRegistersUsagePlanEnum,
-        }),
         {
           valueType: 'formList',
           dataIndex: 'customer_info',
@@ -100,49 +101,44 @@ export default function Create(props: MyBetaModalFormProps) {
                 {
                   title: '姓名',
                   dataIndex: 'name',
-                  colProps: { span: 12 },
+                  colProps: { span: 5 },
                   formItemProps: { ...rulesHelper.text },
                 },
                 {
                   title: '手机号',
                   dataIndex: 'phone',
-                  colProps: { span: 6 },
+                  colProps: { span: 5 },
-                  fieldProps: {
-                    maxLength: 11,
-                  },
-                  formItemProps: { ...rulesHelper.text },
-                },
-                {
-                  title: '备用手机号',
-                  dataIndex: 'reserve_phone',
-                  colProps: { span: 6 },
                   fieldProps: {
                     maxLength: 11,
                   },
+                  formItemProps: { ...rulesHelper.phone },
                 },
                 MyFormItems.EnumSelect({
                   key: 'card_type',
                   title: '证件类型',
-                  colProps: { span: 12 },
+                  colProps: { span: 6 },
                   valueEnum: HouseOccupantsCardTypeEnum,
                   required: true,
                 }),
                 {
                   title: '证件号码',
                   dataIndex: 'id_card',
-                  colProps: { span: 12 },
+                  colProps: { span: 8 },
                   fieldProps: {
                     maxLength: 18,
                   },
                   formItemProps: { ...rulesHelper.text },
                 },
-
+                MyFormItems.EnumRadio({
-                // {
+                  key: 'house_relation',
-                //   title: '是否在居住中',
+                  title: '住户类型',
-                //   dataIndex: 'is_live_in',
+                  colProps: { span: 6 },
-                //   colProps: { span: 8 },
+                  valueEnum: HouseOccupantsHouseRelationEnum,
-                //   valueType: 'switch',
+                  fieldProps: {
-                // },
+                    defaultValue: 'Owner',
+                  },
+                  hideInForm: true,
+                }),
                 {
                   valueType: 'group',
                   columns: [
@@ -157,9 +153,35 @@ export default function Create(props: MyBetaModalFormProps) {
                       key: 'card_back_image',
                       title: '证件反面',
                       max: 1,
-                      colProps: { span: 4 },
+                      colProps: { span: 8 },
                       formItemProps: { ...rulesHelper.text },
                     }),
+                    {
+                      title: '是否入住',
+                      dataIndex: 'is_live_in',
+                      colProps: { span: 6 },
+                      valueType: 'switch',
+                    },
+                    {
+                      name: ['is_live_in'],
+                      valueType: 'dependency',
+                      columns: ({ is_live_in }: any) => {
+                        return is_live_in
+                          ? [
+                              {
+                                title: '入住日期',
+                                dataIndex: 'move_in_date',
+                                valueType: 'date',
+                                colProps: { span: 6 },
+                                fieldProps: {
+                                  style: { width: '100%' },
+                                },
+                                formItemProps: { ...rulesHelper.text },
+                              },
+                            ]
+                          : [];
+                      },
+                    },
                   ],
                 },
               ],

src/pages/archive/asset_house/modals/MoveIn.tsx

@@ -1,31 +1,48 @@
-import { MyBetaModalFormProps, MyButtons, MyModalFormProps } from '@/common';
+import {
+  MyBetaModalFormProps,
+  MyButtons,
+  MyFormItems,
+  MyModalFormProps,
+  rulesHelper,
+} from '@/common';
 import { Apis } from '@/gen/Apis';
-import { BetaSchemaForm } from '@ant-design/pro-components';
+import {
+  HouseOccupantsCardTypeEnum,
+  HouseOccupantsHouseRelationEnum,
+} from '@/gen/Enums';
+import { BetaSchemaForm, ProCard } from '@ant-design/pro-components';
 import { Form, message } from 'antd';
 
 export default function Create(props: MyBetaModalFormProps) {
   const [form] = Form.useForm();
   return (
-    <BetaSchemaForm<ApiTypes.Archive.HouseRegisters.Update>
+    <BetaSchemaForm<ApiTypes.Archive.HouseRegisters.Store>
       {...MyModalFormProps.props}
-      title={`添加${props.title}`}
+      title={`${props.title}`}
       wrapperCol={{ span: 24 }}
-      width="500px"
+      width="900px"
       form={form}
+      trigger={
+        <MyButtons.Default title={props.title} type="primary" size="middle" />
+      }
       onOpenChange={(open: any) => {
-        if (open && props.item) {
+        if (open) {
-          form.setFieldsValue(props.item);
+          form.resetFields(); // 清空表单数据
         }
       }}
-      trigger={
+      onFinish={async (values: any) =>
-        <MyButtons.Default title={props.title} size="small" type="link" />
+        Apis.Archive.HouseRegisters.Store({
-      }
-      onFinish={async (values) =>
-        Apis.Archive.HouseRegisters.Update({
           ...values,
-          id: props?.item?.id ?? 0,
+          asset_houses_id: props?.item?.asset_houses_id,
-          is_live_in: 1,
+          type: 'Delivery',
-          customer_info: props?.item?.id,
+          house_status: props?.item?.status,
+          customer_info: values.customer_info?.map((res: any) => {
+            return {
+              ...res,
+              house_relation: 'Owner',
+              relation_with_owner: 'Self',
+            };
+          }),
         })
           .then(() => {
             props.reload?.();
@@ -36,16 +53,126 @@ export default function Create(props: MyBetaModalFormProps) {
       }
       columns={[
         {
-          title: '入住日期',
+          valueType: 'formList',
-          valueType: 'date',
+          dataIndex: 'customer_info',
-          dataIndex: 'move_in_date',
           colProps: { span: 24 },
+          fieldProps: {
+            copyIconProps: false,
+            creatorButtonProps: {
+              creatorButtonText: '增加产权人',
+              style: { color: 'red' },
+              danger: true,
+            },
+            itemRender: (
+              { listDom, action }: any,
+              { index }: { index: number },
+            ) => {
+              return (
+                <ProCard
+                  bordered
+                  style={{ marginBlockEnd: 8 }}
+                  title={`产权人${index + 1}`}
+                  extra={action}
+                  bodyStyle={{ paddingBlockEnd: 0 }}
+                >
+                  {listDom}
+                </ProCard>
+              );
+            },
+          },
+          columns: [
+            {
+              valueType: 'group',
+              columns: [
+                {
+                  title: '姓名',
+                  dataIndex: 'name',
+                  colProps: { span: 5 },
+                  formItemProps: { ...rulesHelper.text },
+                },
+                {
+                  title: '手机号',
+                  dataIndex: 'phone',
+                  colProps: { span: 5 },
                   fieldProps: {
                     maxLength: 11,
-            style: {
+                  },
-              width: '100%',
+                  formItemProps: { ...rulesHelper.phone },
+                },
+                MyFormItems.EnumSelect({
+                  key: 'card_type',
+                  title: '证件类型',
+                  colProps: { span: 6 },
+                  valueEnum: HouseOccupantsCardTypeEnum,
+                  required: true,
+                }),
+                {
+                  title: '证件号码',
+                  dataIndex: 'id_card',
+                  colProps: { span: 8 },
+                  fieldProps: {
+                    maxLength: 18,
+                  },
+                  formItemProps: { ...rulesHelper.text },
+                },
+                MyFormItems.EnumRadio({
+                  key: 'house_relation',
+                  title: '住户类型',
+                  colProps: { span: 6 },
+                  valueEnum: HouseOccupantsHouseRelationEnum,
+                  fieldProps: {
+                    defaultValue: 'Owner',
+                  },
+                  hideInForm: true,
+                }),
+                {
+                  valueType: 'group',
+                  columns: [
+                    MyFormItems.UploadImages({
+                      key: 'card_front_image',
+                      title: '证件正面',
+                      max: 1,
+                      colProps: { span: 4 },
+                      formItemProps: { ...rulesHelper.text },
+                    }),
+                    MyFormItems.UploadImages({
+                      key: 'card_back_image',
+                      title: '证件反面',
+                      max: 1,
+                      colProps: { span: 8 },
+                      formItemProps: { ...rulesHelper.text },
+                    }),
+                    {
+                      title: '是否入住',
+                      dataIndex: 'is_live_in',
+                      colProps: { span: 6 },
+                      valueType: 'switch',
+                    },
+                    {
+                      name: ['is_live_in'],
+                      valueType: 'dependency',
+                      columns: ({ is_live_in }: any) => {
+                        return is_live_in
+                          ? [
+                              {
+                                title: '入住日期',
+                                dataIndex: 'move_in_date',
+                                valueType: 'date',
+                                colProps: { span: 6 },
+                                fieldProps: {
+                                  style: { width: '100%' },
+                                },
+                                formItemProps: { ...rulesHelper.text },
+                              },
+                            ]
+                          : [];
                       },
                     },
+                  ],
+                },
+              ],
+            },
+          ],
         },
       ]}
     />

src/pages/archive/asset_house/modals/MoveIn00.tsx

@@ -0,0 +1,60 @@
+import {
+  MyBetaModalFormProps,
+  MyButtons,
+  MyModalFormProps,
+  rulesHelper,
+} from '@/common';
+import { Apis } from '@/gen/Apis';
+import { BetaSchemaForm } from '@ant-design/pro-components';
+import { Form, message } from 'antd';
+
+export default function MoveIn(props: MyBetaModalFormProps) {
+  const [form] = Form.useForm();
+  return (
+    <BetaSchemaForm<ApiTypes.Archive.HouseOccupants.Update>
+      {...MyModalFormProps.props}
+      title={`添加${props.title}`}
+      wrapperCol={{ span: 24 }}
+      width="500px"
+      form={form}
+      onOpenChange={(open: any) => {
+        if (open && props.item) {
+          form.setFieldsValue(props.item);
+        }
+      }}
+      trigger={
+        <MyButtons.Default title={props.title} size="small" type="link" />
+      }
+      onFinish={async (values) =>
+        Apis.Archive.HouseOccupants.Update({
+          ...values,
+          id: props?.item?.id ?? 0,
+          is_live_in: 1,
+          name: props?.item?.name,
+          phone: props?.item?.phone,
+        })
+          .then(() => {
+            props.reload?.();
+            message.success(props.title + '成功');
+            return true;
+          })
+          .catch(() => false)
+      }
+      columns={[
+        {
+          title: '入住日期',
+          valueType: 'date',
+          dataIndex: 'move_in_date',
+          colProps: { span: 24 },
+          fieldProps: {
+            maxLength: 11,
+            style: {
+              width: '100%',
+            },
+          },
+          formItemProps: { ...rulesHelper.text },
+        },
+      ]}
+    />
+  );
+}

src/pages/archive/asset_house/modals/MoveOut.tsx

@@ -1,14 +1,19 @@
-import { MyBetaModalFormProps, MyButtons, MyModalFormProps } from '@/common';
+import {
+  MyBetaModalFormProps,
+  MyButtons,
+  MyModalFormProps,
+  rulesHelper,
+} from '@/common';
 import { Apis } from '@/gen/Apis';
 import { BetaSchemaForm } from '@ant-design/pro-components';
 import { Form, message } from 'antd';
 
-export default function Create(props: MyBetaModalFormProps) {
+export default function MoveOut(props: MyBetaModalFormProps) {
   const [form] = Form.useForm();
   return (
-    <BetaSchemaForm<ApiTypes.Archive.HouseRegisters.Store>
+    <BetaSchemaForm<ApiTypes.Archive.HouseRegisters.MoveOut>
       {...MyModalFormProps.props}
-      title={`添加${props.title}`}
+      title={`设置${props.title}`}
       wrapperCol={{ span: 24 }}
       width="500px"
       form={form}
@@ -16,11 +21,9 @@ export default function Create(props: MyBetaModalFormProps) {
         <MyButtons.Default title={props.title} size="small" type="link" />
       }
       onFinish={async (values) =>
-        Apis.Archive.HouseRegisters.Store({
+        Apis.Archive.HouseRegisters.MoveOut({
           ...values,
-          asset_houses_id: props?.item?.id,
+          house_occupants_id: props?.item?.id,
-          type: 'MoveOut',
-          customer_info: props?.item?.id,
         })
           .then(() => {
             props.reload?.();
@@ -33,14 +36,21 @@ export default function Create(props: MyBetaModalFormProps) {
         {
           title: '搬离日期',
           valueType: 'date',
-          dataIndex: '',
+          dataIndex: 'unbound_time',
           colProps: { span: 24 },
           fieldProps: {
-            maxLength: 11,
             style: {
               width: '100%',
             },
           },
+          formItemProps: { ...rulesHelper.text },
+        },
+        {
+          title: '搬离原因',
+          valueType: 'textarea',
+          dataIndex: 'unbound_reason',
+          colProps: { span: 24 },
+          // formItemProps: { ...rulesHelper.text },
         },
       ]}
     />

src/pages/archive/asset_house/modals/OccupantShow.tsx

@@ -0,0 +1,119 @@
+import { MyBetaModalFormProps, renderTextHelper } from '@/common';
+import { MyModal } from '@/components/MyModal';
+import {
+  HouseOccupantsCardTypeEnum,
+  HouseOccupantsHouseRelationEnum,
+  HouseOccupantsRelationWithOwnerEnum,
+  HouseOccupantsStatusEnum,
+} from '@/gen/Enums';
+import { ProCard, ProDescriptions } from '@ant-design/pro-components';
+import { Image, Space } from 'antd';
+
+export default function OccupantShow(props: MyBetaModalFormProps) {
+  return (
+    <MyModal
+      title={props.title || '查看'}
+      width="900px"
+      node={
+        <>
+          <ProCard extra={props.extra}>
+            <ProDescriptions bordered>
+              <ProDescriptions.Item label="姓名">
+                {props?.item?.name}
+              </ProDescriptions.Item>
+              <ProDescriptions.Item label="电话">
+                {props?.item?.phone}
+              </ProDescriptions.Item>
+              <ProDescriptions.Item label="状态">
+                <renderTextHelper.Tag
+                  Enums={HouseOccupantsStatusEnum}
+                  value={props?.item?.status}
+                  key="status "
+                />
+              </ProDescriptions.Item>
+              <ProDescriptions.Item label="房客关系">
+                <renderTextHelper.Tag
+                  Enums={HouseOccupantsHouseRelationEnum}
+                  value={props?.item?.house_relation}
+                  key="house_relation"
+                />
+              </ProDescriptions.Item>
+              <ProDescriptions.Item label="关系">
+                <renderTextHelper.Tag
+                  Enums={HouseOccupantsRelationWithOwnerEnum}
+                  value={props?.item?.relation_with_owner}
+                  key="relation_with_owner"
+                />
+              </ProDescriptions.Item>
+              <ProDescriptions.Item label="入住日期">
+                {props?.item?.is_live_in ? props?.item?.move_in_date : '未入住'}
+              </ProDescriptions.Item>
+              <ProDescriptions.Item label="证件类型">
+                <renderTextHelper.Tag
+                  Enums={HouseOccupantsCardTypeEnum}
+                  value={props?.item?.card_type}
+                  key="card_type"
+                />
+              </ProDescriptions.Item>
+              <ProDescriptions.Item label="证件号码" span={2}>
+                {props?.item?.id_card}
+              </ProDescriptions.Item>
+              <ProDescriptions.Item label="证件材料" span={3}>
+                <Space>
+                  <Image.PreviewGroup>
+                    {props?.item?.card_front_image?.map(
+                      (res: any, index: number) => {
+                        return (
+                          <Image
+                            width={160}
+                            height={120}
+                            src={res?.url || ''}
+                            key={`${res?.name}_${index}`}
+                          />
+                        );
+                      },
+                    )}
+                  </Image.PreviewGroup>
+                  <Image.PreviewGroup>
+                    {props?.item?.card_back_image?.map(
+                      (res: any, index: number) => {
+                        return (
+                          <Image
+                            width={160}
+                            height={120}
+                            src={res?.url || ''}
+                            key={`${res?.name}_${index}`}
+                          />
+                        );
+                      },
+                    )}
+                  </Image.PreviewGroup>
+                </Space>
+              </ProDescriptions.Item>
+              {props?.item?.house_relation === 'Owner' && (
+                <ProDescriptions.Item label="产证材料" span={3}>
+                  <Space>
+                    <Image.PreviewGroup>
+                      {props?.item?.ownership_info?.map(
+                        (res: any, index: number) => {
+                          return (
+                            <Image
+                              width={160}
+                              height={120}
+                              src={res?.url || ''}
+                              key={`${res?.name}_${index}`}
+                            />
+                          );
+                        },
+                      )}
+                    </Image.PreviewGroup>
+                  </Space>
+                </ProDescriptions.Item>
+              )}
+            </ProDescriptions>
+          </ProCard>
+        </>
+      }
+    />
+  );
+}

src/pages/archive/asset_house/modals/RegistersShow.tsx

@@ -0,0 +1,137 @@
+import {
+  MyBetaModalFormProps,
+  MyColumns,
+  MyProTableProps,
+  renderTextHelper,
+} from '@/common';
+import { MyModal } from '@/components/MyModal';
+import {
+  HouseOccupantsCardTypeEnum,
+  HouseOccupantsHouseRelationEnum,
+  HouseOccupantsRelationWithOwnerEnum,
+  HouseRegistersStatusEnum,
+  HouseRegistersTypeEnum,
+} from '@/gen/Enums';
+import { ProCard, ProDescriptions, ProTable } from '@ant-design/pro-components';
+import { Image, Space } from 'antd';
+
+export default function RegistersShow(props: MyBetaModalFormProps) {
+  return (
+    <MyModal
+      title={props.title || '查看'}
+      width="900px"
+      node={
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <ProCard title="基本信息" extra={props.extra}>
+            <ProDescriptions bordered>
+              <ProDescriptions.Item label="登记类型">
+                <renderTextHelper.Tag
+                  Enums={HouseRegistersTypeEnum}
+                  value={props?.item?.type}
+                  key="type "
+                />
+              </ProDescriptions.Item>
+
+              <ProDescriptions.Item label="申请时间" span={2}>
+                {props?.item?.created_at}
+              </ProDescriptions.Item>
+              <ProDescriptions.Item label="登记状态">
+                <renderTextHelper.Tag
+                  Enums={HouseRegistersStatusEnum}
+                  value={props?.item?.status}
+                  key="status "
+                />
+              </ProDescriptions.Item>
+              <ProDescriptions.Item label="审核时间" span={2}>
+                {props?.item?.updated_at}
+              </ProDescriptions.Item>
+            </ProDescriptions>
+          </ProCard>
+
+          <ProCard title="客户信息">
+            <ProTable
+              {...MyProTableProps.props}
+              search={false}
+              toolBarRender={false}
+              pagination={false}
+              dataSource={props?.item?.customer_info}
+              rowKey="id_card"
+              columns={[
+                MyColumns.EnumTag({
+                  title: '房客关系',
+                  dataIndex: 'house_relation',
+                  valueEnum: HouseOccupantsHouseRelationEnum,
+                }),
+                MyColumns.EnumTag({
+                  title: '关系说明',
+                  dataIndex: 'relation_with_owner',
+                  valueEnum: HouseOccupantsRelationWithOwnerEnum,
+                }),
+                {
+                  title: '姓名',
+                  dataIndex: 'name',
+                },
+                {
+                  title: '手机号',
+                  dataIndex: 'phone',
+                },
+                {
+                  title: '证件号码',
+                  dataIndex: 'id_card',
+                },
+                MyColumns.EnumTag({
+                  title: '证件类型',
+                  dataIndex: 'card_type',
+                  valueEnum: HouseOccupantsCardTypeEnum,
+                }),
+                {
+                  title: '证件资料',
+                  render: (_, item) => {
+                    return (
+                      <Space>
+                        <Image
+                          height={40}
+                          src={
+                            item?.card_front_image
+                              ? item?.card_front_image[0]?.url
+                              : ''
+                          }
+                        />
+                        <Image
+                          height={40}
+                          src={
+                            item?.card_back_image
+                              ? item?.card_back_image[0]?.url
+                              : ''
+                          }
+                        />
+                      </Space>
+                    );
+                  },
+                },
+              ]}
+            />
+          </ProCard>
+
+          {props?.item?.type === 'Delivery' && (
+            <ProCard title="产证信息" style={{ paddingRight: 10 }}>
+              <Image.PreviewGroup>
+                {props?.item?.ownership_info?.map((res: any, index: number) => {
+                  return (
+                    <Space style={{ paddingRight: 10 }}>
+                      <Image
+                        height={80}
+                        src={res?.url || ''}
+                        key={`${res?.name}_${index}`}
+                      />
+                    </Space>
+                  );
+                })}
+              </Image.PreviewGroup>
+            </ProCard>
+          )}
+        </Space>
+      }
+    />
+  );
+}

src/pages/archive/asset_house/table/OccupantsHistory.tsx

@@ -0,0 +1,101 @@
+import { MyColumns, MyProTableProps } from '@/common';
+import { Apis } from '@/gen/Apis';
+import {
+  HouseOccupantsHouseRelationEnum,
+  HouseOccupantsRelationWithOwnerEnum,
+  HouseOccupantsStatusEnum,
+} from '@/gen/Enums';
+import { ProTable } from '@ant-design/pro-components';
+import { Space } from 'antd';
+import { useEffect, useRef } from 'react';
+import OccupantsUpdate from '../modals/OccupantsUpdate';
+
+export default function Index({ ...rest }) {
+  const actionLooks = useRef<any>();
+  useEffect(() => {
+    actionLooks?.current.reloadAndRest();
+  }, [rest.loadmore]);
+
+  return (
+    <>
+      <ProTable<Record<any, any>>
+        {...MyProTableProps.props}
+        actionRef={actionLooks}
+        request={async (params, sort) =>
+          MyProTableProps.request(
+            {
+              ...params,
+              asset_houses_id: rest.item?.asset_houses_id,
+              status: 'Unbound',
+            },
+            sort,
+            Apis.Archive.HouseOccupants.List,
+          )
+        }
+        // toolBarRender={(action) => [
+        //   <AddOwner
+        //     key="add"
+        //     item={rest.item}
+        //     reload={action?.reload}
+        //     title="添加产权人"
+        //   />,
+
+        // ]}
+        search={false}
+        columns={[
+          MyColumns.EnumTag({
+            title: '房客关系',
+            dataIndex: 'house_relation',
+            valueEnum: HouseOccupantsHouseRelationEnum,
+            search: false,
+          }),
+          MyColumns.EnumTag({
+            title: '关系说明',
+            dataIndex: 'relation_with_owner',
+            valueEnum: HouseOccupantsRelationWithOwnerEnum,
+            search: false,
+          }),
+          {
+            title: '姓名',
+            dataIndex: 'name',
+          },
+          {
+            title: '电话',
+            dataIndex: 'phone',
+          },
+
+          {
+            title: '是否入住',
+            dataIndex: 'is_live_in',
+            render(_, record) {
+              return `${record?.is_live_in ? '是' : '-'} `;
+            },
+          },
+          {
+            title: '入住日期',
+            dataIndex: 'is_live_in',
+            render(_, record) {
+              return `${record?.move_in_date || '-'}`;
+            },
+          },
+          MyColumns.EnumTag({
+            title: '状态',
+            dataIndex: 'status',
+            valueEnum: HouseOccupantsStatusEnum,
+            search: false,
+          }),
+          // MyColumns.UpdatedAt(),
+          MyColumns.Option({
+            render: (_, item: any, index, action) => (
+              <Space key={index}>
+                {item?.house_relation !== 'Owner' && (
+                  <OccupantsUpdate item={item} reload={action?.reload} />
+                )}
+              </Space>
+            ),
+          }),
+        ]}
+      />
+    </>
+  );
+}

src/pages/archive/asset_house/table/OccupantsNow.tsx

@@ -10,8 +10,9 @@ import { Space } from 'antd';
 import { useEffect, useRef } from 'react';
 import AddOccupant from '../modals/AddOccupant';
 import AddOwner from '../modals/AddOwner';
-import MoveIn from '../modals/MoveIn';
+import MoveIn from '../modals/MoveIn00';
 import MoveOut from '../modals/MoveOut';
+import OccupantShow from '../modals/OccupantShow';
 import OccupantsUpdate from '../modals/OccupantsUpdate';
 import Transfer from '../modals/Transfer';
 
@@ -66,7 +67,8 @@ export default function Index({ ...rest }) {
             search: false,
           }),
           MyColumns.EnumTag({
-            title: '关系说明',
+            title:
+              rest?.item?.status === 'Rented' ? '与租客关系' : '与业主关系',
             dataIndex: 'relation_with_owner',
             valueEnum: HouseOccupantsRelationWithOwnerEnum,
             search: false,
@@ -91,7 +93,7 @@ export default function Index({ ...rest }) {
             title: '入住日期',
             dataIndex: 'is_live_in',
             render(_, record) {
-              return `待补充`;
+              return `${record?.move_in_date || '-'}`;
             },
           },
           MyColumns.EnumTag({
@@ -104,18 +106,23 @@ export default function Index({ ...rest }) {
           MyColumns.Option({
             render: (_, item: any, index, action) => (
               <Space key={index}>
+                <OccupantShow item={item} reload={action?.reload} />
                 {item?.house_relation !== 'Owner' && (
                   <OccupantsUpdate item={item} reload={action?.reload} />
                 )}
-                {item?.is_live_in && (
+                {!item?.is_live_in && (
                   <MoveIn item={item} reload={action?.reload} title="入住" />
                 )}
                 {item?.move_in_date && (
                   <MoveOut item={item} reload={action?.reload} title="搬离" />
                 )}
-                {/* {item?.HouseOccupantsHouseRelationEnum === 'Owner' && (
+                {/* <MyButtons.Delete
-                  <MoveOut item={item} reload={action?.reload} title="移除" />
+                  onConfirm={() =>
-                )} */}
+                    Apis.Archive.HouseOccupants.Delete({ id: item.id }).then(
+                      () => action?.reload(),
+                    )
+                  }
+                /> */}
               </Space>
             ),
           }),

src/pages/archive/asset_house/table/RegistersList.tsx

@@ -0,0 +1,80 @@
+import { MyColumns, MyProTableProps } from '@/common';
+import { Apis } from '@/gen/Apis';
+import { HouseRegistersStatusEnum, HouseRegistersTypeEnum } from '@/gen/Enums';
+import { ProTable } from '@ant-design/pro-components';
+import { Space } from 'antd';
+import { useEffect, useRef } from 'react';
+import RegistersShow from '../modals/RegistersShow';
+
+export default function Index({ ...rest }) {
+  const actionLooks = useRef<any>();
+  useEffect(() => {
+    actionLooks?.current.reloadAndRest();
+  }, [rest.loadmore]);
+
+  return (
+    <>
+      <ProTable<Record<any, any>>
+        {...MyProTableProps.props}
+        actionRef={actionLooks}
+        request={async (params, sort) =>
+          MyProTableProps.request(
+            {
+              ...params,
+              asset_houses_id: rest.item?.asset_houses_id,
+              // status: 'Approved',
+            },
+            sort,
+            Apis.Archive.HouseRegisters.List,
+          )
+        }
+        // toolBarRender={(action) => [
+        //   <AddOwner
+        //     key="add"
+        //     item={rest.item}
+        //     reload={action?.reload}
+        //     title="添加产权人"
+        //   />,
+        // ]}
+        search={false}
+        columns={[
+          MyColumns.ID(),
+
+          // {
+          //   title: '房屋',
+          //   dataIndex: ['asset_house', 'full_name'],
+          // },
+          MyColumns.EnumTag({
+            title: '类型',
+            dataIndex: 'type',
+            valueEnum: HouseRegistersTypeEnum,
+          }),
+          {
+            title: '客户信息',
+            render(_, record) {
+              return (
+                record?.customer_info.map((res: any) => res?.name).join(';') ||
+                '-'
+              ); // 无数据时显示 -
+            },
+            search: false,
+            width: 200,
+          },
+          MyColumns.EnumTag({
+            title: '登记状态',
+            dataIndex: 'status',
+            valueEnum: HouseRegistersStatusEnum,
+          }),
+          MyColumns.UpdatedAt(),
+          MyColumns.Option({
+            render: (_, item: any, index, action) => (
+              <Space key={index}>
+                <RegistersShow item={item} reload={action?.reload} />
+              </Space>
+            ),
+          }),
+        ]}
+      />
+    </>
+  );
+}

src/pages/archive/house_registers/index.tsx

@@ -3,6 +3,7 @@ import {
   MyColumns,
   MyPageContainer,
   MyProTableProps,
+  usePageTabs,
 } from '@/common';
 import { Apis } from '@/gen/Apis';
 import {
@@ -19,6 +20,13 @@ import OccupantsCreate from './modals/OccupantsCreate';
 
 export default function Index({ title = '房屋登记' }) {
   const navigate = useNavigate();
+
+  // 注册当前页面为标签页
+  usePageTabs({
+    tabKey: 'archive-house-registers',
+    tabLabel: title,
+  });
+
   return (
     <MyPageContainer title={title}>
       <ProTable

src/pages/asset/asset_projects/components/AssetInfo.tsx

@@ -87,9 +87,12 @@ export default function info(props: MyBetaModalFormProps) {
             <Space>
               <div>
                 【{props?.item?.company?.id}】{props?.item?.company?.name}
-                
               </div>
-              <BindCompany item={props?.item} title="项目" reload={props?.reload}/>
+              <BindCompany
+                item={props?.item}
+                title="项目"
+                reload={props?.reload}
+              />
             </Space>
           </ProDescriptions.Item>
         </ProDescriptions>

src/pages/asset/asset_projects/index.tsx

@@ -3,6 +3,7 @@ import {
   MyColumns,
   MyPageContainer,
   MyProTableProps,
+  usePageTabs,
 } from '@/common';
 import { Apis } from '@/gen/Apis';
 import { AssetProjectsPropertyTypeEnum } from '@/gen/Enums';
@@ -13,6 +14,12 @@ import Create from './modals/AssetCreate';
 
 export default function Index({ title = '项目管理' }) {
   const navigate = useNavigate();
+
+  // 注册当前页面为标签页
+  usePageTabs({
+    tabKey: 'asset-projects',
+    tabLabel: title,
+  });
   return (
     <MyPageContainer title={title}>
       <ProTable
@@ -21,6 +28,7 @@ export default function Index({ title = '项目管理' }) {
         request={async (params, sort) =>
           MyProTableProps.request(params, sort, Apis.Asset.AssetProjects.List)
         }
+        // headerTitle="项目列表"
         toolBarRender={(action) => [
           <Create key="Create" reload={action?.reload} title={'项目'} />,
         ]}

src/pages/company/companies/components/Employees.tsx

@@ -30,7 +30,7 @@ export default function Index(props: MyBetaModalFormProps) {
           title="员工"
         />,
       ]}
-      options={false}
+      // options={false}
       columns={[
         MyColumns.ID(),
         //to-do 按层级选择

src/pages/company/companies/components/Organizations.tsx

@@ -83,7 +83,6 @@ export default function Organizations(props: MyBetaModalFormProps) {
                   reload={action?.reload}
                   title="组织"
                 />
-
                 <MyButtons.Delete
                   onConfirm={() =>
                     Apis.Company.Organizations.Delete({ id: item.id }).then(

src/pages/company/companies/components/Projects.tsx

@@ -5,12 +5,11 @@ import {
   MyProTableProps,
 } from '@/common';
 import { Apis } from '@/gen/Apis';
-import { AssetProjectsChargeEnum, AssetProjectsEntrustTypeEnum, AssetProjectsPropertyTypeEnum, AssetProjectsStatusEnum, OrganizationsTypeEnum } from '@/gen/Enums';
+import { AssetProjectsPropertyTypeEnum } from '@/gen/Enums';
 import { ProTable } from '@ant-design/pro-components';
 import { Space } from 'antd';
 import { useNavigate } from 'react-router-dom';
 
-
 export default function Index(props: MyBetaModalFormProps) {
   const navigate = useNavigate();
 
@@ -47,10 +46,7 @@ export default function Index(props: MyBetaModalFormProps) {
             title: '项目名称',
             dataIndex: 'name',
           },
-          {
+
-            title: '项目别名',
-            dataIndex: 'alias_name',
-          },
           // {
           //   title: '项目编码',
           //   dataIndex: 'code',
@@ -65,25 +61,25 @@ export default function Index(props: MyBetaModalFormProps) {
             },
             search: false,
           },
-          MyColumns.EnumTag({
+          // MyColumns.EnumTag({
-            title: '项目状态',
+          //   title: '项目状态',
-            dataIndex: 'status',
+          //   dataIndex: 'status',
-            valueEnum: AssetProjectsStatusEnum,
+          //   valueEnum: AssetProjectsStatusEnum,
-            search: false,
+          //   search: false,
-          }),
+          // }),
 
-          MyColumns.EnumTag({
+          // MyColumns.EnumTag({
-            title: '委托类型',
+          //   title: '委托类型',
-            dataIndex: 'entrust_type',
+          //   dataIndex: 'entrust_type',
-            valueEnum: AssetProjectsEntrustTypeEnum,
+          //   valueEnum: AssetProjectsEntrustTypeEnum,
-            search: false,
+          //   search: false,
-          }),
+          // }),
-          MyColumns.EnumTag({
+          // MyColumns.EnumTag({
-            title: '收费方式',
+          //   title: '收费方式',
-            dataIndex: 'charge',
+          //   dataIndex: 'charge',
-            valueEnum: AssetProjectsChargeEnum,
+          //   valueEnum: AssetProjectsChargeEnum,
-            search: false,
+          //   search: false,
-          }),
+          // }),
           MyColumns.SoftDelete({
             title: '启/禁用',
             onRestore: Apis.Asset.AssetProjects.Restore,

src/pages/company/companies/index.tsx

@@ -3,6 +3,7 @@ import {
   MyColumns,
   MyPageContainer,
   MyProTableProps,
+  usePageTabs,
 } from '@/common';
 import { Apis } from '@/gen/Apis';
 import { CompaniesMerchantTypeEnum } from '@/gen/Enums';
@@ -13,8 +14,20 @@ import Create from './modals/Create';
 
 export default function Index({ title = '机构管理' }) {
   const navigate = useNavigate();
+  
+  // 注册当前页面为标签页
+  usePageTabs({
+    tabKey: 'company-companies',
+    tabLabel: title,
+  });
+  
   return (
-    <MyPageContainer title={title}>
+    <MyPageContainer 
+      title={title}
+      enableTabs={true}
+      tabKey="company-companies"
+      tabLabel={title}
+    >
       <ProTable
         {...MyProTableProps.props}
         request={async (params, sort) =>

src/pages/company/companies/modals/EmployeesCreate.tsx

@@ -26,8 +26,12 @@ export default function Create(props: MyBetaModalFormProps) {
           form.resetFields(); // 清空表单数据
         }
       }}
-      onFinish={async (values) =>
+      onFinish={async (values: any) =>
-        Apis.Company.CompanyEmployees.Store(values)
+        Apis.Company.CompanyEmployees.Store({
+          ...values,
+          organizations_id:
+            values?.organizations_id?.[values.organizations_id.length - 1],
+        })
           .then(() => {
             props.reload?.();
             message.success(props.title + '成功');
@@ -36,11 +40,17 @@ export default function Create(props: MyBetaModalFormProps) {
           .catch(() => false)
       }
       columns={[
-        Selects?.Organizations({
+        // Selects?.Organizations({
-          title: '设置所属组织',
+        //   title: '设置所属组织',
-          params: { companies_id: props?.item?.companies_id },
+        //   params: { companies_id: props?.item?.companies_id },
+        //   key: 'organizations_id',
+        //   formItemProps: { ...rulesHelper.text },
+        // }),
+        Selects?.OrganizationsTree({
+          title: '选择新的上级组织',
           key: 'organizations_id',
-          formItemProps: { ...rulesHelper.text },
+          params: { companies_id: props?.item?.companies_id },
+          colProps: { span: 24 },
         }),
         {
           key: 'name',

src/pages/company/companies/modals/EmployeesUpdate.tsx

@@ -29,10 +29,13 @@ export default function Update(props: MyBetaModalFormProps) {
           });
         }
       }}
-      onFinish={async (values) =>
+      onFinish={async (values: any) =>
         Apis.Company.CompanyEmployees.Update({
           ...values,
           id: props.item?.id ?? 0,
+          organizations_id:
+            values?.organizations_id?.[values.organizations_id.length - 1] ||
+            props.item?.organizations_id,
         })
           .then(() => {
             props.reload?.();
@@ -42,11 +45,20 @@ export default function Update(props: MyBetaModalFormProps) {
           .catch(() => false)
       }
       columns={[
-        Selects?.Organizations({
+        // Selects?.Organizations({
-          title: '所属组织',
+        //   title: '所属组织',
-          params: { companies_id: props?.item?.companies_id },
+        //   params: { companies_id: props?.item?.companies_id },
+        //   key: 'organizations_id',
+        //   formItemProps: { ...rulesHelper.text },
+        // }),
+        Selects?.OrganizationsTree({
+          title: '选择新的上级组织',
           key: 'organizations_id',
-          formItemProps: { ...rulesHelper.text },
+          params: { companies_id: props?.item?.companies_id },
+          colProps: { span: 24 },
+          fieldProps: {
+            showSearch: true,
+          },
         }),
         {
           key: 'name',

src/pages/company/companies/modals/OrganizationsChange.tsx

@@ -9,11 +9,9 @@ export default function Update(props: MyBetaModalFormProps) {
   return (
     <BetaSchemaForm<ApiTypes.Company.Organizations.Update>
       {...MyModalFormProps.props}
-      title={`调整上级${props.title}`}
+      title={`选择新的上级${props.title}`}
       form={form}
-      trigger={
+      trigger={<MyButtons.Edit title="组织调整" type="link" size="middle" />}
-        <MyButtons.Default title="组织调整" type="primary" size="small" />
-      }
       wrapperCol={{ span: 24 }}
       width="500px"
       onOpenChange={(open: any) => {
@@ -27,7 +25,9 @@ export default function Update(props: MyBetaModalFormProps) {
           id: props.item?.id ?? 0,
           name: props.item?.name,
           type: props.item?.type,
-          parent_id: values?.parent_id?.[values.parent_id.length - 1],
+          parent_id:
+            values?.parent_id?.[values.parent_id.length - 1] ||
+            props.item?.parent_id,
         })
           .then(() => {
             props.reload?.();

src/pages/employees/index.tsx

@@ -3,16 +3,29 @@ import {
   MyColumns,
   MyPageContainer,
   MyProTableProps,
+  usePageTabs,
 } from '@/common';
 import { Apis } from '@/gen/Apis';
 import { ProTable } from '@ant-design/pro-components';
 import { Space } from 'antd';
-import Create from './modals/Create';
+import EmployeesCreate from '../company/companies/modals/EmployeesCreate';
-import Update from './modals/Update';
+import EmployeesUpdate from '../company/companies/modals/EmployeesUpdate';
 
 export default function Index({ title = '员工管理' }) {
+  // 使用多标签页功能
+  usePageTabs({
+    tabKey: 'employees-list',
+    tabLabel: title,
+    closable: true
+  });
+
   return (
-    <MyPageContainer title={title}>
+    <MyPageContainer 
+      enableTabs
+      tabKey="employees-list"
+      tabLabel={title}
+      title={title}
+    >
       <ProTable
         {...MyProTableProps.props}
         // search={false}
@@ -24,7 +37,11 @@ export default function Index({ title = '员工管理' }) {
           )
         }
         toolBarRender={(action) => [
-          <Create key="Create" reload={action?.reload} title={title} />,
+          <EmployeesCreate
+            key="Create"
+            reload={action?.reload}
+            title={title}
+          />,
         ]}
         columns={[
           MyColumns.ID(),
@@ -35,35 +52,34 @@ export default function Index({ title = '员工管理' }) {
             title: '机构',
             dataIndex: ['company', 'name'],
             search: false,
-            width: 220,
           },
           {
             title: '组织',
             dataIndex: ['organization', 'name'],
             search: false,
-            width: 150,
           },
           {
             title: '姓名',
             dataIndex: 'name',
-            width: 150,
           },
           {
             title: '手机号',
             dataIndex: 'phone',
-            width: 150,
           },
           {
             title: '岗位',
             dataIndex: ['position', 'name'],
-            width: 150,
           },
           MyColumns.UpdatedAt(),
           // MyColumns.CreatedAt(),
           MyColumns.Option({
             render: (_, item: any, index, action) => (
               <Space key={index}>
-                <Update item={item} reload={action?.reload} title={title} />
+                <EmployeesUpdate
+                  item={item}
+                  reload={action?.reload}
+                  title={title}
+                />
                 <MyButtons.Delete
                   onConfirm={() =>
                     Apis.Common.Admins.Delete({ id: item.id }).then(() =>

src/pages/employees/modals/Create.tsx

@@ -1,104 +0,0 @@
-import {
-  MyBetaModalFormProps,
-  MyButtons,
-  MyFormItems,
-  MyModalFormProps,
-  rulesHelper,
-} from '@/common';
-import { Selects } from '@/components/Select';
-import { Apis } from '@/gen/Apis';
-import { SexEnum } from '@/gen/Enums';
-import { BetaSchemaForm } from '@ant-design/pro-components';
-import { Form, message } from 'antd';
-
-export default function Create(props: MyBetaModalFormProps) {
-  const [form] = Form.useForm();
-  return (
-    <BetaSchemaForm<ApiTypes.Company.CompanyEmployees.Store>
-      {...MyModalFormProps.props}
-      title={`添加员工`}
-      wrapperCol={{ span: 24 }}
-      width="500px"
-      trigger={<MyButtons.Create title={`添加`} />}
-      form={form}
-      onOpenChange={(open: any) => {
-        if (open) {
-          form.resetFields(); // 清空表单数据
-        }
-      }}
-      onFinish={async (values) =>
-        Apis.Company.CompanyEmployees.Store(values)
-          .then(() => {
-            props.reload?.();
-            message.success(props.title + '成功');
-            return true;
-          })
-          .catch(() => false)
-      }
-      columns={[
-        Selects?.Companies({
-          title: '所属机构',
-          key: 'companies_id',
-          formItemProps: { ...rulesHelper.text },
-        }),
-        {
-          valueType: 'dependency',
-          name: ['companies_id'],
-          columns: ({ companies_id }) => [
-            Selects?.Organizations({
-              title: '所属组织',
-              params: { companies_id: companies_id },
-              key: 'organizations_id',
-              formItemProps: { ...rulesHelper.text },
-            }),
-          ],
-        },
-        {
-          key: 'name',
-          title: '姓名',
-          colProps: { span: 6 },
-          formItemProps: { ...rulesHelper.text },
-        },
-        {
-          key: 'phone',
-          title: '手机号',
-          valueType: 'number',
-          fieldProps: {
-            maxLength: 11,
-          },
-          colProps: { span: 12 },
-          formItemProps: { ...rulesHelper.phone },
-        },
-        MyFormItems.EnumRadio({
-          key: 'sex',
-          title: '性别',
-          colProps: { span: 6 },
-          valueEnum: SexEnum,
-          required: true,
-        }),
-        {
-          valueType: 'dependency',
-          name: ['companies_id'],
-          columns: ({ companies_id }) => [
-            Selects?.Positions({
-              title: '岗位',
-              params: { companies_id: companies_id },
-              key: 'positions_id',
-              formItemProps: { ...rulesHelper.text },
-              fieldProps: {
-                showSearch: true,
-              },
-            }),
-          ],
-        },
-
-        {
-          key: 'remark',
-          title: '备注',
-          colProps: { span: 24 },
-          valueType: 'textarea',
-        },
-      ]}
-    />
-  );
-}

src/pages/employees/modals/Update.tsx

@@ -1,109 +0,0 @@
-import {
-  MyBetaModalFormProps,
-  MyButtons,
-  MyFormItems,
-  MyModalFormProps,
-  rulesHelper,
-} from '@/common';
-
-import { Selects } from '@/components/Select';
-import { Apis } from '@/gen/Apis';
-import { SexEnum } from '@/gen/Enums';
-import { BetaSchemaForm } from '@ant-design/pro-components';
-import { Form, message } from 'antd';
-export default function Update(props: MyBetaModalFormProps) {
-  const [form] = Form.useForm();
-  return (
-    <BetaSchemaForm<ApiTypes.Company.CompanyEmployees.Update>
-      {...MyModalFormProps.props}
-      title={`编辑员工`}
-      trigger={<MyButtons.Edit />}
-      wrapperCol={{ span: 24 }}
-      width="500px"
-      form={form}
-      onOpenChange={(open: any) => {
-        if (open && props.item) {
-          form.setFieldsValue({
-            ...props.item,
-            roles_id: props.item?.roles?.map((item: any) => item.value),
-          });
-        }
-      }}
-      onFinish={async (values) =>
-        Apis.Company.CompanyEmployees.Update({
-          ...values,
-          id: props.item?.id ?? 0,
-        })
-          .then(() => {
-            props.reload?.();
-            message.success(props.title + '成功');
-            return true;
-          })
-          .catch(() => false)
-      }
-      columns={[
-        Selects?.Companies({
-          title: '所属机构',
-          key: 'companies_id',
-          formItemProps: { ...rulesHelper.text },
-        }),
-        {
-          valueType: 'dependency',
-          name: ['companies_id'],
-          columns: ({ companies_id }) => [
-            Selects?.Organizations({
-              title: '所属组织',
-              params: { companies_id: companies_id },
-              key: 'organizations_id',
-              formItemProps: { ...rulesHelper.text },
-            }),
-          ],
-        },
-        {
-          key: 'name',
-          title: '姓名',
-          colProps: { span: 6 },
-          formItemProps: { ...rulesHelper.text },
-        },
-        {
-          key: 'phone',
-          title: '手机号',
-          valueType: 'number',
-          fieldProps: {
-            maxLength: 11,
-          },
-          colProps: { span: 12 },
-          formItemProps: { ...rulesHelper.phone },
-        },
-        MyFormItems.EnumRadio({
-          key: 'sex',
-          title: '性别',
-          colProps: { span: 6 },
-          valueEnum: SexEnum,
-          required: true,
-        }),
-        {
-          valueType: 'dependency',
-          name: ['companies_id'],
-          columns: ({ companies_id }) => [
-            Selects?.Positions({
-              title: '岗位',
-              params: { companies_id: companies_id },
-              key: 'positions_id',
-              formItemProps: { ...rulesHelper.text },
-              fieldProps: {
-                showSearch: true,
-              },
-            }),
-          ],
-        },
-        {
-          key: 'remark',
-          title: '备注',
-          colProps: { span: 24 },
-          valueType: 'textarea',
-        },
-      ]}
-    />
-  );
-}

src/pages/examine/house_registers_audit/index.tsx

@@ -1,4 +1,9 @@
-import { MyColumns, MyPageContainer, MyProTableProps } from '@/common';
+import {
+  MyColumns,
+  MyPageContainer,
+  MyProTableProps,
+  usePageTabs,
+} from '@/common';
 import { Apis } from '@/gen/Apis';
 import {
   HouseRegistersCustomerTypeEnum,
@@ -12,6 +17,11 @@ import { Space } from 'antd';
 import Audit from './modals/Audit';
 
 export default function Index({ title = '房屋登记审核' }) {
+  // 注册当前页面为标签页
+  usePageTabs({
+    tabKey: 'examine-house-registers-audit',
+    tabLabel: title,
+  });
   return (
     <MyPageContainer title={title}>
       <ProTable

src/pages/house_bills/index.tsx

@@ -3,6 +3,7 @@ import {
   MyColumns,
   MyPageContainer,
   MyProTableProps,
+  usePageTabs,
 } from '@/common';
 import { Apis } from '@/gen/Apis';
 import { HouseBillsTypeEnum } from '@/gen/Enums';
@@ -12,8 +13,19 @@ import Create from './modals/Create';
 import Update from './modals/Update';
 
 export default function Index({ title = '账单' }) {
+  // 注册当前页面为标签页
+  usePageTabs({
+    tabKey: 'house-bills',
+    tabLabel: title,
+  });
+  
   return (
-    <MyPageContainer title={title}>
+    <MyPageContainer 
+      title={title}
+      enableTabs={true}
+      tabKey="house-bills"
+      tabLabel={title}
+    >
       <ProTable
         {...MyProTableProps.props}
         request={async (params, sort) =>

src/pages/system/admins/index.tsx

@@ -4,6 +4,7 @@ import {
   MyPageContainer,
   MyProTableProps,
   renderTextHelper,
+  usePageTabs,
 } from '@/common';
 import { Apis } from '@/gen/Apis';
 import { ProTable } from '@ant-design/pro-components';
@@ -12,8 +13,19 @@ import Create from './modals/Create';
 import Update from './modals/Update';
 
 export default function Index({ title = '管理员' }) {
+  // 注册当前页面为标签页
+  usePageTabs({
+    tabKey: 'system-admins',
+    tabLabel: title,
+  });
+  
   return (
-    <MyPageContainer title={title}>
+    <MyPageContainer 
+      title={title}
+      enableTabs={true}
+      tabKey="system-admins"
+      tabLabel={title}
+    >
       <ProTable
         {...MyProTableProps.props}
         search={false}

src/pages/system/sys_permissions/index.tsx

@@ -3,6 +3,7 @@ import {
   MyColumns,
   MyPageContainer,
   MyProTableProps,
+  usePageTabs,
 } from '@/common';
 import MyEnumRadioGroup from '@/common/components/formFields/MyEnumRadioGroup';
 import { Apis } from '@/gen/Apis';
@@ -19,6 +20,12 @@ export default function Index({ title = '功能' }) {
   const actionRef = useRef<ActionType>();
   const [guardName, setGuardName] = useState<string>('Admin');
 
+  // 注册当前页面为标签页
+  usePageTabs({
+    tabKey: 'system-permissions',
+    tabLabel: title,
+  });
+
   const getData = async () => {
     let data = await Apis.Permission.SysPermissions.List({
       guard_name: guardName,
@@ -150,7 +157,12 @@ export default function Index({ title = '功能' }) {
   };
 
   return (
-    <MyPageContainer title={title}>
+    <MyPageContainer
+      title={title}
+      enableTabs={true}
+      tabKey="system-permissions"
+      tabLabel={title}
+    >
       <ShowTable />
     </MyPageContainer>
   );

src/pages/system/sys_roles/index.tsx

@@ -3,6 +3,7 @@ import {
   MyColumns,
   MyPageContainer,
   MyProTableProps,
+  usePageTabs,
 } from '@/common';
 import { Apis } from '@/gen/Apis';
 import { ProTable } from '@ant-design/pro-components';
@@ -12,8 +13,19 @@ import EditPermissions from './modals/EditPermissions';
 import Update from './modals/Update';
 
 export default function Index({ title = '角色' }) {
+  // 注册当前页面为标签页
+  usePageTabs({
+    tabKey: 'system-roles',
+    tabLabel: title,
+  });
+  
   return (
-    <MyPageContainer title={title}>
+    <MyPageContainer 
+      title={title}
+      enableTabs={true}
+      tabKey="system-roles"
+      tabLabel={title}
+    >
       <ProTable
         {...MyProTableProps.props}
         search={false}

src/pages/tabs-demo.tsx

@@ -0,0 +1,243 @@
+import React from 'react';
+import { Button, Card, Space, Divider, Row, Col, Statistic, Alert } from 'antd';
+import { 
+  PlusOutlined, 
+  UserOutlined, 
+  SettingOutlined, 
+  HomeOutlined,
+  FileTextOutlined,
+  TeamOutlined
+} from '@ant-design/icons';
+import { MyPageContainer, usePageTabs } from '@/common';
+import { history } from '@umijs/max';
+
+/**
+ * 多标签页功能演示页面
+ * 展示完整的标签页管理功能
+ */
+export default function TabsDemo() {
+  const tabsApi = usePageTabs({
+    tabKey: 'tabs-demo',
+    tabLabel: '标签页演示',
+    closable: false // 演示页面不可关闭
+  });
+
+  // 模拟打开不同的页面标签
+  const openTab = (key: string, label: string, path: string) => {
+    tabsApi.addTab({
+      key,
+      label,
+      path,
+      closable: true
+    });
+    // 注意：在实际项目中，这里应该使用 history.push(path)
+    // 由于这是演示，我们只是添加标签而不实际跳转
+    console.log(`模拟跳转到: ${path}`);
+  };
+
+  const demoTabs = [
+    {
+      key: 'employees',
+      label: '员工管理',
+      path: '/employees',
+      icon: <TeamOutlined />,
+      description: '管理公司员工信息'
+    },
+    {
+      key: 'companies',
+      label: '公司管理',
+      path: '/company/companies',
+      icon: <HomeOutlined />,
+      description: '管理公司基本信息'
+    },
+    {
+      key: 'house-bills',
+      label: '房屋账单',
+      path: '/house_bills',
+      icon: <FileTextOutlined />,
+      description: '查看和管理房屋账单'
+    },
+    {
+      key: 'system-admins',
+      label: '系统管理员',
+      path: '/system/admins',
+      icon: <UserOutlined />,
+      description: '管理系统管理员账户'
+    },
+    {
+      key: 'system-roles',
+      label: '角色管理',
+      path: '/system/sys_roles',
+      icon: <SettingOutlined />,
+      description: '管理系统角色权限'
+    }
+  ];
+
+  return (
+    <MyPageContainer
+      enableTabs
+      tabKey="tabs-demo"
+      tabLabel="标签页演示"
+      title="多标签页功能演示"
+    >
+      <Alert
+        message="多标签页功能演示"
+        description="这个页面展示了 MyPageContainer 的多标签页功能。您可以点击下方按钮打开新的标签页，然后右键点击标签体验各种操作。"
+        type="info"
+        showIcon
+        style={{ marginBottom: 24 }}
+      />
+      
+      {/* 统计信息 */}
+      <Row gutter={16} style={{ marginBottom: 24 }}>
+        <Col span={6}>
+          <Card>
+            <Statistic
+              title="当前标签数量"
+              value={tabsApi.getTabs().length}
+              prefix={<FileTextOutlined />}
+            />
+          </Card>
+        </Col>
+        <Col span={6}>
+          <Card>
+            <Statistic
+              title="激活标签"
+              value={tabsApi.getActiveKey()}
+              valueStyle={{ fontSize: '16px' }}
+            />
+          </Card>
+        </Col>
+        <Col span={6}>
+          <Card>
+            <Statistic
+              title="可用操作"
+              value={6}
+              suffix="种"
+              prefix={<SettingOutlined />}
+            />
+          </Card>
+        </Col>
+        <Col span={6}>
+          <Card>
+            <Statistic
+              title="演示页面"
+              value={demoTabs.length}
+              suffix="个"
+              prefix={<PlusOutlined />}
+            />
+          </Card>
+        </Col>
+      </Row>
+
+      {/* 快速打开标签页 */}
+      <Card title="🚀 快速打开页面" style={{ marginBottom: 24 }}>
+        <Row gutter={[16, 16]}>
+          {demoTabs.map(tab => (
+            <Col span={8} key={tab.key}>
+              <Card
+                size="small"
+                hoverable
+                onClick={() => openTab(tab.key, tab.label, tab.path)}
+                style={{ cursor: 'pointer', textAlign: 'center' }}
+              >
+                <div style={{ fontSize: '24px', marginBottom: '8px' }}>
+                  {tab.icon}
+                </div>
+                <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
+                  {tab.label}
+                </div>
+                <div style={{ fontSize: '12px', color: '#666' }}>
+                  {tab.description}
+                </div>
+              </Card>
+            </Col>
+          ))}
+        </Row>
+      </Card>
+
+      {/* 标签页操作 */}
+      <Card title="🎛️ 标签页操作" style={{ marginBottom: 24 }}>
+        <Space wrap size="middle">
+          <Button 
+            type="primary"
+            onClick={() => tabsApi.closeOtherTabs()}
+            disabled={tabsApi.getTabs().length <= 1}
+          >
+            关闭其他标签
+          </Button>
+          
+          <Button 
+            onClick={() => tabsApi.closeLeftTabs()}
+            disabled={tabsApi.getTabs().length <= 1}
+          >
+            关闭左侧标签
+          </Button>
+          
+          <Button 
+            onClick={() => tabsApi.closeRightTabs()}
+            disabled={tabsApi.getTabs().length <= 1}
+          >
+            关闭右侧标签
+          </Button>
+          
+          <Button 
+            onClick={() => tabsApi.refreshTab()}
+          >
+            刷新当前标签
+          </Button>
+          
+          <Button 
+            danger
+            onClick={() => {
+              const tabs = tabsApi.getTabs();
+              const closableTabs = tabs.filter(tab => tab.closable);
+              closableTabs.forEach(tab => tabsApi.removeTab(tab.key));
+            }}
+            disabled={tabsApi.getTabs().filter(tab => tab.closable).length === 0}
+          >
+            关闭所有可关闭标签
+          </Button>
+        </Space>
+      </Card>
+
+      {/* 功能说明 */}
+      <Card title="📖 功能说明">
+        <Row gutter={24}>
+          <Col span={12}>
+            <h4>🎯 核心功能</h4>
+            <ul style={{ lineHeight: '1.8' }}>
+              <li><strong>多标签页支持</strong>：支持同时打开多个页面标签</li>
+              <li><strong>右键菜单</strong>：右键点击标签页显示操作菜单</li>
+              <li><strong>智能导航</strong>：关闭标签时自动切换到相邻标签</li>
+              <li><strong>状态持久化</strong>：标签页状态在组件间共享</li>
+              <li><strong>自定义样式</strong>：支持主题定制和样式覆盖</li>
+            </ul>
+          </Col>
+          
+          <Col span={12}>
+            <h4>🖱️ 右键菜单操作</h4>
+            <ul style={{ lineHeight: '1.8' }}>
+              <li><strong>刷新</strong>：重新加载当前标签页</li>
+              <li><strong>关闭</strong>：关闭当前标签页</li>
+              <li><strong>关闭其他</strong>：关闭除当前标签外的所有标签</li>
+              <li><strong>关闭左侧</strong>：关闭当前标签左侧的所有标签</li>
+              <li><strong>关闭右侧</strong>：关闭当前标签右侧的所有标签</li>
+            </ul>
+          </Col>
+        </Row>
+        
+        <Divider />
+        
+        <h4>💡 使用提示</h4>
+        <ul style={{ lineHeight: '1.8' }}>
+          <li>点击上方的页面卡片可以快速打开对应的标签页</li>
+          <li>右键点击任意标签页可以看到完整的操作菜单</li>
+          <li>使用工具栏按钮可以批量操作标签页</li>
+          <li>演示页面（当前页面）被设置为不可关闭</li>
+          <li>在实际项目中，标签页会自动与路由系统集成</li>
+        </ul>
+      </Card>
+    </MyPageContainer>
+  );
+}