菜单栏

src/locales/lang/zh-CN/menu.js

@@ -1,5 +1,5 @@
-import refund from "../../../router/routes/refund";
+import refund from "../../../router/routes/computing";
-import user from "../../../router/routes/user";
+// import user from "../../../router/routes/user";
 
 export default {
     welcome: '欢迎',
@@ -35,41 +35,57 @@ export default {
     account: '个人页',
     'account.trigger': '触发报错',
     'account.logout': '退出登录',
-    topUpOrder: '充值订单',
+    resource: 'GPU资源管理',
-    paddingOrder: '待支付订单',
+    resourceAdmin: '资源池管理',
-    paidOrder: '已支付订单',
+    resourceStatistics: '资源池统计信息',
-    canceledOrder: '已取消订单',
+    userControl: '用户管理',
-    water: '流水账单管理',
-    userList: '用户流水列表',
-    refund: '退款管理',
-    toBeConfirmed: '待确认列表',
-    refunded: '已退款列表',
-    refundFailed: '退款失败列表',
-    payChannel: '支付渠道设置',
-    paySet:'支付设置(待开发)',
-    messageMgt: '短信管理(待开发)',
-    invoice: '开票管理(待开发)',
-    contractMgt: '合同管理(待开发)',
-    activityMgt: '活动管理(待开发)',
-    userUpgrade: '用户升级管理(待开发)',
-    bannerMgt: '轮播图管理',
-    resource: '资源管理',
-    host: '主机列表',
-    computerCard: '计算卡列表',
-    computerArea: '主机区域列表',
-    mirror: '镜像管理',
-    mirrorPublic: '公共镜像列表',
-    mirrorSystem: '系统镜像列表',
-    mirrorUser: '用户镜像列表',
-    example: '实例管理',
-    exampleList: '实例列表',
-    user: '用户管理',
     userList: '用户列表',
-    userSure: '待认证列表',
+    blackList: '黑名单列表 ',
-    userBlack: '黑名单列表',
+    certification: '认证管理',
-    order: '订单管理',
+    certificationList: '认证列表',
-    orderAll: '全部订单',
+    computingCenter: '算力中心',
-    orderIng: '运营中订单',
+    computing: '算力管理',
-    orderArrearage: '欠费订单',
+    host: '主机',
-    orderTally: '结算订单',
+    computingCard: '算力卡',
+    container: '容器/实例管理',
+    containerList: '实例',
+    img: '镜像管理 ',
+    imgList: '镜像',
+    order: '实例订单管理',
+    orderList: '订单列表',
+    balance: '余额管理',
+    balanceList: '余额',
+    computingPoints: '算力点管理',
+    pointsList: '算力点',
+    computingTicket: '算力券管理',
+    ticketList: '算力券',
+    rechargeRecord: '充值记录管理',
+    rechargeList: '充值记录',
+    exchangeRecord: '算力兑换记录管理',
+    exchangeList: '算力兑换记录',
+    withdrawal: '提现管理',
+    pendingReviewList: '待审核列表',
+    withdrawList: '待提现列表',
+    withdrawErrorList: '提现失败列表',
+    withdrawSuccessList: '提现成功列表',
+    withdrawRejectList: '审核拒绝',
+    contract: '合同管理',
+    contractPendingList: '待审核列表',
+    signatureList: '待签章列表',
+
+    sealedtrueList: '已签章列表',
+    rejectContractList: '审核拒绝列表',
+    invoice: '发票管理',
+    invoiceReviewList: '待审核列表',
+    invoicePendingList: '待开票列表',
+    invoceBeSentList: '待寄送列表',
+    invoceFailedList: '审核失败列表',
+    invoicingFailedList: '开票失败列表',
+    invoiceDeliveriesFailed: '寄送失败列表',
+    invoiceSuccessList: '已完成',
+    eventCopy: '活动文案',
+    activities: '活动管理',
+    newConfiguration: '带新配置',
+    systemSettings: '系统设置',
+    allSetting: '短息，支付参数系统配置 ',
 }

src/router/routes/balance.js

@@ -0,0 +1,29 @@
+import { SettingOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'balance',
+        name: 'balance',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: 'icon-zhifudingjin',
+            title: '余额管理',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'balanceList',
+                name: 'balanceList',
+                component: 'balance/balanceList/index.vue',
+                 meta: {
+                    title: '余额列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+        ],
+    },
+]

src/router/routes/certification.js

@@ -2,23 +2,23 @@ import { SettingOutlined } from '@ant-design/icons-vue'
 
 export default [
     {
-        path: 'water',
+        path: 'certification',
-        name: 'water',
+        name: 'certification',
         component: 'RouteViewLayout',
         meta: {
             icon: 'icon-liushui',
-            title: '流水账单管理',
+            title: '认证管理',
             isMenu: true,
             keepAlive: true,
             permission: '*',
         },
         children: [
             {
-                path: 'userList',
+                path: 'certificationList',
-                name: 'userList',
+                name: 'certificationList',
-                component: 'water/userList/index.vue',
+                component: 'certification/certificationList/index.vue',
                 meta: {
-                    title: '用户流水列表',
+                    title: '认证列表',
                     isMenu: true,
                     keepAlive: true,
                     permission: '*',

src/router/routes/computing.js

@@ -0,0 +1,51 @@
+import { SettingOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'computing',
+        name: 'computing',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: 'icon-zhifudingjin',
+            title: '算力管理',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'computingCenter',
+                name: 'computingCenter',
+                component: 'computing/computingCenter/index.vue',
+                 meta: {
+                    title: '算力中心',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'host',
+                name: 'host',
+                component: 'computing/host/index.vue',
+                 meta: {
+                    title: '主机',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'computingCard',
+                name: 'computingCard',
+                component: 'computing/computingCard/index.vue',
+                 meta: {
+                    title: '算力卡',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+        ],
+    },
+]

src/router/routes/computingPoints.js

@@ -0,0 +1,29 @@
+import { SettingOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'computingPoints',
+        name: 'computingPoints',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: 'icon-zhifudingjin',
+            title: '算力点管理',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'pointsList',
+                name: 'pointsList',
+                component: 'computingPoints/pointsList/index.vue',
+                 meta: {
+                    title: '算力点列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+        ],
+    },
+]

src/router/routes/computingTicket.js

@@ -0,0 +1,29 @@
+import { SettingOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'computingTicket',
+        name: 'computingTicket',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: 'icon-zhifudingjin',
+            title: '算力券管理',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'ticketList',
+                name: 'ticketList',
+                component: 'computingTicket/ticketList/index.vue',
+                 meta: {
+                    title: '算力券列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+        ],
+    },
+]

src/router/routes/container.js

@@ -0,0 +1,29 @@
+import { SettingOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'container',
+        name: 'container',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: 'icon-zhifudingjin',
+            title: '容器/实例管理',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'containerList',
+                name: 'containerList',
+                component: 'container/containerList/index.vue',
+                 meta: {
+                    title: '实例',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+        ],
+    },
+]

src/router/routes/contract.js

@@ -0,0 +1,62 @@
+import { SettingOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'contract',
+        name: 'contract',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: 'icon-chongzhi',
+            title: '提现管理',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'contractPendingList',
+                name: 'contractPendingList',
+                component: 'contract/contractPendingList/index.vue',
+                meta: {
+                    title: '待审核列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'signatureList',
+                name: 'signatureList',
+                component: 'contract/signatureList/index.vue',
+                meta: {
+                    title: '待签章列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'sealedtrueList',
+                name: 'sealedtrueList',
+                component: 'contract/sealedtrueList/index.vue',
+                meta: {
+                    title: '已签章列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'rejectContractList',
+                name: 'rejectContractList',
+                component: 'contract/rejectContractList/index.vue',
+                meta: {
+                    title: '审核拒绝列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            }
+        ],
+    },
+]

src/router/routes/exchangeRecord.js

@@ -0,0 +1,29 @@
+import { SettingOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'exchangeRecord',
+        name: 'exchangeRecord',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: 'icon-zhifudingjin',
+            title: '算力兑换记录管理',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'exchangeList',
+                name: 'exchangeList',
+                component: 'exchangeRecord/exchangeList/index.vue',
+                meta: {
+                    title: '算力兑换记录 ',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            }
+        ],
+    }
+]

src/router/routes/img.js

@@ -0,0 +1,29 @@
+import { SettingOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'img',
+        name: 'img',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: 'icon-zhifudingjin',
+            title: '镜像管理',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'imgList',
+                name: 'imgList',
+                component: 'img/imgList/index.vue',
+                 meta: {
+                    title: '镜像列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+        ],
+    },
+]

src/router/routes/index.js

@@ -10,14 +10,24 @@ import link from './link'
 import iframe from './iframe'
 import other from './other'
 import topUp from './topUp'
-import water from './water'
+import certification from './certification'
-import refund from './refund'
+import computing from './computing'
 import common from './common'
 import resource from './resource'
 import mirror from './mirror'
-import user from './user'
+import userControl from './userControl'
 import order from './order'
 import example from './example'
+import container from './container'
+import img from './img'
+import balance from './balance'
+import computingPoints from './computingPoints'
+import computingTicket from './computingTicket'
+import rechargeRecord from './rechargeRecord'
+import exchangeRecord from './exchangeRecord'
+import contract from './contract'
+import withdrawal from './withdrawal'
+import invoice from './invoice'
 export default [
     ...home,
     ...form,
@@ -31,12 +41,22 @@ export default [
     ...iframe,
     ...other,
     ...topUp,
-    ...water,
+    ...certification,
-    ...refund,
+    ...computing,
     ...common,
     ...resource,
     ...mirror,
-    ...user,
+    ...userControl,
     ...order,
     ...example,
+    ...container,
+    ...img,
+    ...balance,
+    ...computingPoints,
+    ...computingTicket,
+    ...rechargeRecord,
+    ...exchangeRecord,
+    ...contract,
+    ...withdrawal,
+    ...invoice,
 ]

src/router/routes/invoice.js

@@ -0,0 +1,96 @@
+import { SettingOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'invoice',
+        name: 'invoice',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: 'icon-zhifudingjin',
+            title: '发票管理',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'invoiceReviewList',
+                name: 'invoiceReviewList',
+                component: 'invoice/invoiceReviewList/index.vue',
+                 meta: {
+                    title: '待审核列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'invoicePendingList',
+                name: 'invoicePendingList',
+                component: 'invoice/invoicePendingList/index.vue',
+                 meta: {
+                    title: '待开票列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'invoceBeSentList',
+                name: 'invoceBeSentList',
+                component: 'invoice/invoceBeSentList/index.vue',
+                 meta: {
+                    title: '待寄送列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'invoceFailedList',
+                name: 'invoceFailedList',
+                component: 'invoice/invoceFailedList/index.vue',
+                 meta: {
+                    title: '审核失败列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'invoicingFailedList',
+                name: 'invoicingFailedList',
+                component: 'invoice/invoicingFailedList/index.vue',
+                 meta: {
+                    title: '开票失败列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'invoiceDeliveriesFailed',
+                name: 'invoiceDeliveriesFailed',
+                component: 'invoice/invoiceDeliveriesFailed/index.vue',
+                 meta: {
+                    title: '寄送失败列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'invoiceSuccessList',
+                name: 'invoiceSuccessList',
+                component: 'invoice/invoiceSuccessList/index.vue',
+                 meta: {
+                    title: '已完成列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+
+        ],
+    },
+]

src/router/routes/order.js

@@ -7,56 +7,23 @@ export default [
         component: 'RouteViewLayout',
         meta: {
             icon: 'icon-zhifudingjin',
-            title: '订单管理',
+            title: '实例订单管理',
             isMenu: true,
             keepAlive: true,
             permission: '*',
         },
         children: [
             {
-                path: 'orderAll',
+                path: 'orderList',
-                name: 'orderAll',
+                name: 'orderList',
-                component: 'order/orderAll/index.vue',
+                component: 'order/orderList/index.vue',
                 meta: {
-                    title: '全部订单',
+                    title: '订单列表',
                     isMenu: true,
                     keepAlive: true,
                     permission: '*',
                 },
             },
-            {
-                path: 'orderIng',
-                name: 'orderIng',
-                component: 'order/orderIng/index.vue',
-                meta: {
-                    title: '运营中订单',
-                    isMenu: true,
-                    keepAlive: true,
-                    permission: '*',
-                },
-            },
-            {
-                path: 'orderArrearage',
-                name: 'orderArrearage',
-                component: 'order/orderArrearage/index.vue',
-                meta: {
-                    title: '欠费订单',
-                    isMenu: true,
-                    keepAlive: true,
-                    permission: '*',
-                },
-            },
-            {
-                path: 'orderTally',
-                name: 'orderTally',
-                component: 'order/orderTally/index.vue',
-                meta: {
-                    title: '结算订单',
-                    isMenu: true,
-                    keepAlive: true,
-                    permission: '*',
-                },
-            }, 
         ],
     }
 

src/router/routes/rechargeRecord.js

@@ -0,0 +1,29 @@
+import { SettingOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'rechargeRecord',
+        name: 'rechargeRecord',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: 'icon-zhifudingjin',
+            title: '充值记录管理',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'rechargeRecord',
+                name: 'rechargeRecord',
+                component: 'rechargeRecord/rechargeList/index.vue',
+                meta: {
+                    title: '充值记录 ',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            }
+        ],
+    }
+]

src/router/routes/refund.js

@@ -1,76 +0,0 @@
-import { SettingOutlined } from '@ant-design/icons-vue'
-
-export default [
-    {
-        path: 'paySet',
-        name: 'paySet',
-        component: 'RouteViewLayout',
-        meta: {
-            icon: 'icon-zhifudingjin',
-            title: '支付设置',
-            isMenu: true,
-            keepAlive: true,
-            permission: '*',
-        },
-        children: [
-            {
-                path: 'payChannel',
-                name: 'payChannel',
-                component: 'paySet/payChannel/index.vue',
-                 meta: {
-                    title: '支付渠道设置',
-                    isMenu: true,
-                    keepAlive: true,
-                    permission: '*',
-                },
-            },
-        ],
-    },
-    {
-        path: 'refund',
-        name: 'refund',
-        component: 'RouteViewLayout',
-        meta: {
-            icon: 'icon-icon',
-            title: '退款管理',
-            isMenu: true,
-            keepAlive: true,
-            permission: '*',
-        },
-        children: [
-            {
-                path: 'toBeConfirmed',
-                name: 'toBeConfirmed',
-                component: 'refund/toBeConfirmed/index.vue',
-                meta: {
-                    title: '待确认列表',
-                    isMenu: true,
-                    keepAlive: true,
-                    permission: '*',
-                },
-            },
-            {
-                path: 'refunded',
-                name: 'refunded',
-                component: 'refund/refunded/index.vue',
-                meta: {
-                    title: '已退款列表',
-                    isMenu: true,
-                    keepAlive: true,
-                    permission: '*',
-                },
-            },
-            {
-                path: 'refundFailed',
-                name: 'refundFailed',
-                component: 'refund/refundFailed/index.vue',
-                meta: {
-                    title: '退款失败列表',
-                    isMenu: true,
-                    keepAlive: true,
-                    permission: '*',
-                },
-            },
-        ],
-    },
-]

src/router/routes/resource.js

@@ -7,40 +7,29 @@ export default [
         component: 'RouteViewLayout',
         meta: {
             icon: 'icon-zhifudingjin',
-            title: '资源管理',
+            title: 'GPU资源管理',
             isMenu: true,
             keepAlive: true,
             permission: '*',
         },
         children: [
             {
-                path: 'host',
+                path: 'resourceAdmin',
-                name: 'host',
+                name: 'resourceAdmin',
-                component: 'resource/host/index.vue',
+                component: 'resource/resourceAdmin/index.vue',
-                 meta: {
+                meta: {
-                    title: '主机列表',
+                    title: '资源池管理 ',
                     isMenu: true,
                     keepAlive: true,
                     permission: '*',
                 },
             },
             {
-                path: 'computerCard',
+                path: 'resourceStatistics',
-                name: 'computerCard',
+                name: 'resourceStatistics',
-                component: 'resource/computerCard/index.vue',
+                component: 'resource/resourceStatistics/index.vue',
-                 meta: {
+                meta: {
-                    title: '计算卡列表',
+                    title: '资源池统计信息',
-                    isMenu: true,
-                    keepAlive: true,
-                    permission: '*',
-                },
-            },
-            {
-                path: 'computerArea',
-                name: 'computerArea',
-                component: 'resource/computerArea/index.vue',
-                 meta: {
-                    title: '主机区域列表',
                     isMenu: true,
                     keepAlive: true,
                     permission: '*',
@@ -48,5 +37,4 @@ export default [
             },
         ],
     }
-
 ]

src/router/routes/userControl.js

@@ -2,8 +2,8 @@ import { SettingOutlined } from '@ant-design/icons-vue'
 
 export default [
     {
-        path: 'user',
+        path: 'userControl',
-        name: 'user',
+        name: 'userControl',
         component: 'RouteViewLayout',
         meta: {
             icon: 'icon-zhifudingjin',
@@ -13,21 +13,10 @@ export default [
             permission: '*',
         },
         children: [
-            {
-                path: 'userSure',
-                name: 'userSure',
-                component: 'user/userSure/index.vue',
-                 meta: {
-                    title: '待认证列表',
-                    isMenu: true,
-                    keepAlive: true,
-                    permission: '*',
-                },
-            },
             {
                 path: 'userList',
                 name: 'userList',
-                component: 'user/userList/index.vue',
+                component: 'userControl/userList/index.vue',
                  meta: {
                     title: '用户列表',
                     isMenu: true,
@@ -36,9 +25,9 @@ export default [
                 },
             },
             {
-                path: 'userBlack',
+                path: 'blackList',
-                name: 'userBlack',
+                name: 'blackList',
-                component: 'user/userBlack/index.vue',
+                component: 'userControl/blackList/index.vue',
                  meta: {
                     title: '黑名单列表',
                     isMenu: true,

src/router/routes/withdrawal.js

@@ -0,0 +1,73 @@
+import { SettingOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'withdrawal',
+        name: 'withdrawal',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: 'icon-chongzhi',
+            title: '',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'pendingReviewList',
+                name: 'pendingReviewList',
+                component: 'withdrawal/pendingReviewList/index.vue',
+                meta: {
+                    title: '待审核列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'withdrawList',
+                name: 'withdrawList',
+                component: 'withdrawal/withdrawList/index.vue',
+                meta: {
+                    title: '待提现列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'withdrawErrorList',
+                name: 'withdrawErrorList',
+                component: 'withdrawal/withdrawErrorList/index.vue',
+                meta: {
+                    title: '已取消订单',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'withdrawSuccessList',
+                name: 'withdrawSuccessList',
+                component: 'withdrawal/withdrawSuccessList/index.vue',
+                meta: {
+                    title: '提现成功列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'withdrawRejectList',
+                name: 'withdrawRejectList',
+                component: 'withdrawal/withdrawRejectList/index.vue',
+                meta: {
+                    title: '审核拒绝',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            }
+        ],
+    },
+]

src/views/balance/components/EditDialog.vue

@@ -0,0 +1,158 @@
+<template>
+    <a-modal :open="modal.open" :title="modal.title" :width="640" :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose" :cancel-text="cancelText" :ok-text="okText" @ok="handleOk" @cancel="handleCancel">
+        <a-form ref="formRef" :model="formData" :rules="formRules">
+            <a-card class="mb-8-2">
+                <a-row :gutter="24">
+                    <a-col :span="24">
+                        <a-form-item :label="$t('pages.system.role.form.name')" name="name">
+                            <a-input v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col :span="24">
+                        <a-form-item :label="$t('pages.system.role.form.sequence')" name="sequence">
+                            <a-input :defaultValue="0" type="number" v-model:value="formData.sequence"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                        <a-form-item :label="$t('pages.system.role.form.status')" name="status">
+                            <a-radio-group v-model:value="formData.status" :options="[
+                                { label: $t('pages.system.role.form.status.enabled'), value: 'enabled' },
+                                { label: $t('pages.system.role.form.status.disabled'), value: 'disabled' },
+                            ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                        <a-form-item :label="'描述'">
+                            <a-textarea v-model:value="formData.description"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="24">
+                        <a-form-item :label="'上传图片'" name="permissions">
+                            <GxUpload :fileNumber="1" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { message } from 'ant-design-vue'
+import { ref, watch } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import GxUpload from '@/components/GxUpload/index.vue'
+const emit = defineEmits(['ok'])
+import { useI18n } from 'vue-i18n'
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const { t } = useI18n() // 解构出t方法
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+formData.value.enabled='enabled'
+formRules.value = {
+    name: { required: true, message: t('pages.system.role.form.name.placeholder') },
+    code: { required: true, message: t('pages.system.role.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.role.form.status.placeholder') },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: t('pages.system.role.add'),
+    })
+}
+
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.role.edit'),
+    })
+
+    const { data, success } = await apis.role.getRole(record.id).catch()
+    if (!success) {
+        message.error(t('component.message.error.save'))
+        hideModal()
+        return
+    }
+    let menus = []
+    if (data.menus) {
+        for (let item of data.menus) {
+            menus.push(item.menu_id)
+        }
+    }
+    checkedKeys.value = menus
+    formRecord.value = data
+    formData.value = cloneDeep(data)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {...values}
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.banner.createBanner(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.banner.updateBanner(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/balance/index.vue

@@ -0,0 +1,199 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form  :model="searchFormData" layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item :label="$t('pages.system.role.form.name')" name="name">
+                            <a-input :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col class="align-right" v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button ghost type="primary" @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row :gutter="8" :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        添加图片
+                    </a-button>
+                </x-action-bar>
+                <a-table :columns="columns" :data-source="listData" :loading="loading" :pagination="paginationState"
+                    :scroll="{ x: 1000 }" @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'statusType' === column.key">
+                            <!--状态-->
+                            <a-tag v-if="statusTypeEnum.is('enabled', record.status)" color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag v-if="statusTypeEnum.is('disabled', record.status)" color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog ref="editDialogRef" @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: '缩略图', dataIndex: 'code', width: 240 },
+    { title: '名称', dataIndex: 'name' },
+    { title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.role
+            .getRoleList({
+                pageSize,
+                current: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/computingPoints/pointsList/components/EditDialog.vue

@@ -0,0 +1,315 @@
+<template>
+    <a-modal
+        :width="640"
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            layout="vertical"
+            ref="formRef"
+            :model="formData"
+            :rules="formRules">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.parent_name')"
+                            name="parent_id">
+                            <a-tree-select
+                                v-model:value="formData.parent_id"
+                                tree-default-expand-all></a-tree-select>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.type')"
+                            name="type">
+                            <a-radio-group
+                                v-model:value="formData.type"
+                                :options="menuTypeEnum.getOptions()"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.name')"
+                            name="name">
+                            <a-input v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.resource.form.path')"
+                            name="path">
+                            <a-input v-model:value="formData.path"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item name="code">
+                            <template #label>
+                                <span class="mr-4-1">{{ $t('pages.system.menu.form.code') }}</span>
+                                <a-tooltip :title="$t('pages.system.menu.form.code')">
+                                    <question-circle-outlined class="color-secondary"></question-circle-outlined>
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="formData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="statusTypeEnum.getOptions()"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            style="width: 200px"
+                            :label="$t('pages.system.menu.form.sequence')"
+                            name="sequence">
+                            <a-input
+                                :defaultValue="0"
+                                type="number"
+                                v-model:value="formData.sequence"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.description')"
+                            name="description">
+                            <a-input v-model:value="formData.description"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.properties')"
+                            name="properties">
+                            <a-textarea v-model:value="formData.properties"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+            <a-card :title="$t('pages.system.menu.resource.form.title')">
+                <a-table
+                    :columns="columns"
+                    :data-source="formData.resources"
+                    :pagination="false"
+                    row-key="id">
+                    <template #bodyCell="{ column, record, index }">
+                        <template v-if="column.key === 'types'">
+                            <a-form-item :label="$t('pages.system.menu.resource.form.method')">
+                                <a-input-group
+                                    style="display: inline-block; vertical-align: middle"
+                                    :compact="true">
+                                    <a-form-item-rest>
+                                        <a-select
+                                            v-model:value="record.method"
+                                            :default-value="record.method || 'GET'"
+                                            style="width: 100px">
+                                            <a-select-option
+                                                v-for="item of reqType"
+                                                :key="item"
+                                                :value="item"
+                                                >{{ item }}</a-select-option
+                                            >
+                                        </a-select>
+                                    </a-form-item-rest>
+                                    <a-input
+                                        v-model:value="record.path"
+                                        :style="{ width: 'calc(100% - 100px)' }" />
+                                </a-input-group>
+                            </a-form-item>
+                        </template>
+                        <template v-if="column.key === 'action'">
+                            <x-action-button @click="handleDelete(index)"> {{ $t('button.delete') }}</x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+
+                <a-button
+                    @click="handleAddApi"
+                    block
+                    class="mt-8-2"
+                    type="dashed">
+                    <template #icon>
+                        <plus-outlined></plus-outlined>
+                    </template>
+                    {{ $t('button.add') }}
+                </a-button>
+            </a-card>
+            <template v-if="menuTypeEnum.is('menu', formData.type)"> </template>
+            <template v-if="statusTypeEnum.is('enabled', formData.status)"> </template>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { QuestionCircleOutlined } from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { useModal, useForm } from '@/hooks'
+import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
+import { ref } from 'vue'
+import { config } from '@/config'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formData, formRef, formRules, resetForm } = useForm()
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.menu.form.name.placeholder') },
+    code: { required: true, message: t('pages.system.menu.form.code.placeholder') },
+}
+
+const columns = [
+    { title: t('pages.system.menu.form.path'), dataIndex: 'types', key: 'types' },
+    { title: t('button.action'), dataIndex: 'action', key: 'action' },
+]
+const reqType = ['GET', 'POST', 'PUT', 'PATCH', 'HEAD', 'DELETE']
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    formData.value.resources = []
+    showModal({
+        type: 'create',
+        title: t('pages.system.menu.add'),
+    })
+}
+
+/**
+ * 添加下级
+ * handleCreateChild
+ */
+
+function handleCreateChild(record = {}) {
+    formData.value.resources = []
+    showModal({
+        type: 'create',
+        title: t('pages.system.menu.button.addChild'),
+    })
+    formData.value.parent_id = record.id
+}
+
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.menu.edit'),
+    })
+    const { data } = await apis.menu.getMenu(record.id).catch(() => {
+        throw new Error()
+    })
+    formData.value = cloneDeep(data)
+    formData.value.properties = formData.value.properties ? JSON.parse(formData.value.properties) : ''
+    formData.value.resources = formData.value.resources || (formData.value.resources = [])
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                params.sequence = Number.parseInt(params.sequence) || 0
+                params.properties = JSON.stringify(params.properties)
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.menu.createMenu(params).catch(() => {
+                            throw new Error()
+                        })
+
+                        break
+                    case 'edit':
+                        newApiData()
+                        params.resources = formData.value.resources
+                        result = await apis.menu.updateMenu(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 针对API 做一次 menu_id
+ */
+function newApiData() {
+    if (formData.value.resources)
+        formData.value.resources.forEach((item) => {
+            item.menu_id = formData.value.id
+        })
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+/**
+ * 添加API
+ */
+
+function handleAddApi() {
+    formData.value.resources.push({
+        method: 'GET',
+        path: '',
+    })
+} /**
+ * 删除API
+ */
+
+function handleDelete(index) {
+    formData.value.resources.splice(index, 1)
+}
+
+defineExpose({
+    handleCreate,
+    handleCreateChild,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/computingPoints/pointsList/index.vue

@@ -0,0 +1,218 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form :label-col="{ style: { width: '100px' } }" :model="searchFormData" layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item :label="$t('pages.system.menu.form.name')" name="name">
+                            <a-input :placeholder="$t('pages.system.menu.form.name.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.menu.form.code') }}
+                                <a-tooltip :title="$t('pages.system.menu.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input :placeholder="$t('pages.system.menu.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col class="align-right" v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button ghost type="primary" @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <i class="iconfont icon-gonggao" style="color: red;"></i>
+        <span>引入阿里巴巴图标</span>
+        <x-action-bar class="mb-8-2">
+            <a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                {{ $t('pages.system.menu.add') }}
+            </a-button>
+        </x-action-bar>
+        <a-table rowKey="id" :loading="loading" :pagination="true" :columns="columns" :data-source="listData">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'menuType' === column.key">
+                    <!--菜单-->
+                    <a-tag v-if="menuTypeEnum.is('page', record.type)" color="processing">
+                        {{ menuTypeEnum.getDesc(record.type) }}
+                    </a-tag>
+                    <!--按钮-->
+                    <a-tag v-if="menuTypeEnum.is('button', record.type)" color="success">
+                        {{ menuTypeEnum.getDesc(record.type) }}
+                    </a-tag>
+                </template>
+
+                <template v-if="'createAt' === column.key">
+                    {{ formatUtcDateTime(record.created_at) }}
+                </template>
+
+                <template v-if="'statusType' === column.key">
+                    <!--状态-->
+                    <a-tag v-if="statusTypeEnum.is('enabled', record.status)" color="processing">
+                        {{ statusTypeEnum.getDesc(record.status) }}
+                    </a-tag>
+                    <!--状态-->
+                    <a-tag v-if="statusTypeEnum.is('disabled', record.status)" color="processing">
+                        {{ statusTypeEnum.getDesc(record.status) }}
+                    </a-tag>
+                </template>
+
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                        <a-tooltip>
+                            <template #title>{{ $t('pages.system.menu.edit') }}</template>
+                            <edit-outlined />
+                        </a-tooltip>
+                    </x-action-button>
+
+                    <x-action-button @click="$refs.editDialogRef.handleCreateChild(record)">
+                        <a-tooltip>
+                            <template #title>{{ $t('pages.system.menu.button.addChild') }}</template>
+                            <plus-circle-outlined />
+                        </a-tooltip>
+                    </x-action-button>
+                    <x-action-button @click="handleDelete(record)">
+                        <a-tooltip>
+                            <template #title>{{ $t('pages.system.delete') }}</template>
+                            <delete-outlined style="color: #ff4d4f" />
+                        </a-tooltip>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog @ok="onOk" ref="editDialogRef" />
+</template>
+
+<script setup>
+import { Modal, message } from 'ant-design-vue'
+import { ref } from 'vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import { formatUtcDateTime } from '@/utils/util'
+import EditDialog from './components/EditDialog.vue'
+import { useI18n } from 'vue-i18n'
+defineOptions({
+    // eslint-disable-next-line vue/no-reserved-component-names
+    name: 'menu',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = ref([
+    { title: t('pages.system.menu.form.name'), dataIndex: 'name', key: 'name', fixed: true },
+    { title: t('pages.system.menu.form.code'), dataIndex: 'code', key: 'code' },
+
+    { title: t('pages.system.menu.form.type'), dataIndex: 'type', key: 'menuType', width: 80 },
+    { title: t('pages.system.menu.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.menu.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.menu.form.created_at'), dataIndex: 'created_at', key: 'createAt', width: 180 },
+    { title: t('button.action'), key: 'action', width: 180 },
+])
+const { listData, loading, showLoading, hideLoading, searchFormData, paginationState, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getMenuList()
+
+/**
+ * 获取菜单列表
+ * @return {Promise<void>}
+ */
+async function getMenuList() {
+    try {
+        showLoading()
+        // const { current } = paginationState
+        const { data, success, total } = await apis.menu
+            .getMenuList({
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            data.forEach((item) => {
+                item.name = t(item.code) || item.name
+            })
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getMenuList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getMenuList()
+}
+/**
+ * 删除
+ * @param id
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: t('pages.system.menu.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success } = await apis.menu.delMenu(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getMenuList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getMenuList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/computingTicket/ticketList/components/EditDialog.vue

@@ -0,0 +1,315 @@
+<template>
+    <a-modal
+        :width="640"
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            layout="vertical"
+            ref="formRef"
+            :model="formData"
+            :rules="formRules">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.parent_name')"
+                            name="parent_id">
+                            <a-tree-select
+                                v-model:value="formData.parent_id"
+                                tree-default-expand-all></a-tree-select>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.type')"
+                            name="type">
+                            <a-radio-group
+                                v-model:value="formData.type"
+                                :options="menuTypeEnum.getOptions()"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.name')"
+                            name="name">
+                            <a-input v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.resource.form.path')"
+                            name="path">
+                            <a-input v-model:value="formData.path"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item name="code">
+                            <template #label>
+                                <span class="mr-4-1">{{ $t('pages.system.menu.form.code') }}</span>
+                                <a-tooltip :title="$t('pages.system.menu.form.code')">
+                                    <question-circle-outlined class="color-secondary"></question-circle-outlined>
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="formData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="statusTypeEnum.getOptions()"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            style="width: 200px"
+                            :label="$t('pages.system.menu.form.sequence')"
+                            name="sequence">
+                            <a-input
+                                :defaultValue="0"
+                                type="number"
+                                v-model:value="formData.sequence"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.description')"
+                            name="description">
+                            <a-input v-model:value="formData.description"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.properties')"
+                            name="properties">
+                            <a-textarea v-model:value="formData.properties"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+            <a-card :title="$t('pages.system.menu.resource.form.title')">
+                <a-table
+                    :columns="columns"
+                    :data-source="formData.resources"
+                    :pagination="false"
+                    row-key="id">
+                    <template #bodyCell="{ column, record, index }">
+                        <template v-if="column.key === 'types'">
+                            <a-form-item :label="$t('pages.system.menu.resource.form.method')">
+                                <a-input-group
+                                    style="display: inline-block; vertical-align: middle"
+                                    :compact="true">
+                                    <a-form-item-rest>
+                                        <a-select
+                                            v-model:value="record.method"
+                                            :default-value="record.method || 'GET'"
+                                            style="width: 100px">
+                                            <a-select-option
+                                                v-for="item of reqType"
+                                                :key="item"
+                                                :value="item"
+                                                >{{ item }}</a-select-option
+                                            >
+                                        </a-select>
+                                    </a-form-item-rest>
+                                    <a-input
+                                        v-model:value="record.path"
+                                        :style="{ width: 'calc(100% - 100px)' }" />
+                                </a-input-group>
+                            </a-form-item>
+                        </template>
+                        <template v-if="column.key === 'action'">
+                            <x-action-button @click="handleDelete(index)"> {{ $t('button.delete') }}</x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+
+                <a-button
+                    @click="handleAddApi"
+                    block
+                    class="mt-8-2"
+                    type="dashed">
+                    <template #icon>
+                        <plus-outlined></plus-outlined>
+                    </template>
+                    {{ $t('button.add') }}
+                </a-button>
+            </a-card>
+            <template v-if="menuTypeEnum.is('menu', formData.type)"> </template>
+            <template v-if="statusTypeEnum.is('enabled', formData.status)"> </template>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { QuestionCircleOutlined } from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { useModal, useForm } from '@/hooks'
+import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
+import { ref } from 'vue'
+import { config } from '@/config'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formData, formRef, formRules, resetForm } = useForm()
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.menu.form.name.placeholder') },
+    code: { required: true, message: t('pages.system.menu.form.code.placeholder') },
+}
+
+const columns = [
+    { title: t('pages.system.menu.form.path'), dataIndex: 'types', key: 'types' },
+    { title: t('button.action'), dataIndex: 'action', key: 'action' },
+]
+const reqType = ['GET', 'POST', 'PUT', 'PATCH', 'HEAD', 'DELETE']
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    formData.value.resources = []
+    showModal({
+        type: 'create',
+        title: t('pages.system.menu.add'),
+    })
+}
+
+/**
+ * 添加下级
+ * handleCreateChild
+ */
+
+function handleCreateChild(record = {}) {
+    formData.value.resources = []
+    showModal({
+        type: 'create',
+        title: t('pages.system.menu.button.addChild'),
+    })
+    formData.value.parent_id = record.id
+}
+
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.menu.edit'),
+    })
+    const { data } = await apis.menu.getMenu(record.id).catch(() => {
+        throw new Error()
+    })
+    formData.value = cloneDeep(data)
+    formData.value.properties = formData.value.properties ? JSON.parse(formData.value.properties) : ''
+    formData.value.resources = formData.value.resources || (formData.value.resources = [])
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                params.sequence = Number.parseInt(params.sequence) || 0
+                params.properties = JSON.stringify(params.properties)
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.menu.createMenu(params).catch(() => {
+                            throw new Error()
+                        })
+
+                        break
+                    case 'edit':
+                        newApiData()
+                        params.resources = formData.value.resources
+                        result = await apis.menu.updateMenu(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 针对API 做一次 menu_id
+ */
+function newApiData() {
+    if (formData.value.resources)
+        formData.value.resources.forEach((item) => {
+            item.menu_id = formData.value.id
+        })
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+/**
+ * 添加API
+ */
+
+function handleAddApi() {
+    formData.value.resources.push({
+        method: 'GET',
+        path: '',
+    })
+} /**
+ * 删除API
+ */
+
+function handleDelete(index) {
+    formData.value.resources.splice(index, 1)
+}
+
+defineExpose({
+    handleCreate,
+    handleCreateChild,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/computingTicket/ticketList/index.vue

@@ -0,0 +1,218 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form :label-col="{ style: { width: '100px' } }" :model="searchFormData" layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item :label="$t('pages.system.menu.form.name')" name="name">
+                            <a-input :placeholder="$t('pages.system.menu.form.name.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.menu.form.code') }}
+                                <a-tooltip :title="$t('pages.system.menu.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input :placeholder="$t('pages.system.menu.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col class="align-right" v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button ghost type="primary" @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <i class="iconfont icon-gonggao" style="color: red;"></i>
+        <span>引入阿里巴巴图标</span>
+        <x-action-bar class="mb-8-2">
+            <a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                {{ $t('pages.system.menu.add') }}
+            </a-button>
+        </x-action-bar>
+        <a-table rowKey="id" :loading="loading" :pagination="true" :columns="columns" :data-source="listData">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'menuType' === column.key">
+                    <!--菜单-->
+                    <a-tag v-if="menuTypeEnum.is('page', record.type)" color="processing">
+                        {{ menuTypeEnum.getDesc(record.type) }}
+                    </a-tag>
+                    <!--按钮-->
+                    <a-tag v-if="menuTypeEnum.is('button', record.type)" color="success">
+                        {{ menuTypeEnum.getDesc(record.type) }}
+                    </a-tag>
+                </template>
+
+                <template v-if="'createAt' === column.key">
+                    {{ formatUtcDateTime(record.created_at) }}
+                </template>
+
+                <template v-if="'statusType' === column.key">
+                    <!--状态-->
+                    <a-tag v-if="statusTypeEnum.is('enabled', record.status)" color="processing">
+                        {{ statusTypeEnum.getDesc(record.status) }}
+                    </a-tag>
+                    <!--状态-->
+                    <a-tag v-if="statusTypeEnum.is('disabled', record.status)" color="processing">
+                        {{ statusTypeEnum.getDesc(record.status) }}
+                    </a-tag>
+                </template>
+
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                        <a-tooltip>
+                            <template #title>{{ $t('pages.system.menu.edit') }}</template>
+                            <edit-outlined />
+                        </a-tooltip>
+                    </x-action-button>
+
+                    <x-action-button @click="$refs.editDialogRef.handleCreateChild(record)">
+                        <a-tooltip>
+                            <template #title>{{ $t('pages.system.menu.button.addChild') }}</template>
+                            <plus-circle-outlined />
+                        </a-tooltip>
+                    </x-action-button>
+                    <x-action-button @click="handleDelete(record)">
+                        <a-tooltip>
+                            <template #title>{{ $t('pages.system.delete') }}</template>
+                            <delete-outlined style="color: #ff4d4f" />
+                        </a-tooltip>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog @ok="onOk" ref="editDialogRef" />
+</template>
+
+<script setup>
+import { Modal, message } from 'ant-design-vue'
+import { ref } from 'vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import { formatUtcDateTime } from '@/utils/util'
+import EditDialog from './components/EditDialog.vue'
+import { useI18n } from 'vue-i18n'
+defineOptions({
+    // eslint-disable-next-line vue/no-reserved-component-names
+    name: 'menu',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = ref([
+    { title: t('pages.system.menu.form.name'), dataIndex: 'name', key: 'name', fixed: true },
+    { title: t('pages.system.menu.form.code'), dataIndex: 'code', key: 'code' },
+
+    { title: t('pages.system.menu.form.type'), dataIndex: 'type', key: 'menuType', width: 80 },
+    { title: t('pages.system.menu.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.menu.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.menu.form.created_at'), dataIndex: 'created_at', key: 'createAt', width: 180 },
+    { title: t('button.action'), key: 'action', width: 180 },
+])
+const { listData, loading, showLoading, hideLoading, searchFormData, paginationState, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getMenuList()
+
+/**
+ * 获取菜单列表
+ * @return {Promise<void>}
+ */
+async function getMenuList() {
+    try {
+        showLoading()
+        // const { current } = paginationState
+        const { data, success, total } = await apis.menu
+            .getMenuList({
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            data.forEach((item) => {
+                item.name = t(item.code) || item.name
+            })
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getMenuList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getMenuList()
+}
+/**
+ * 删除
+ * @param id
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: t('pages.system.menu.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success } = await apis.menu.delMenu(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getMenuList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getMenuList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/container/containerList/components/EditDialog.vue

@@ -0,0 +1,315 @@
+<template>
+    <a-modal
+        :width="640"
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            layout="vertical"
+            ref="formRef"
+            :model="formData"
+            :rules="formRules">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.parent_name')"
+                            name="parent_id">
+                            <a-tree-select
+                                v-model:value="formData.parent_id"
+                                tree-default-expand-all></a-tree-select>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.type')"
+                            name="type">
+                            <a-radio-group
+                                v-model:value="formData.type"
+                                :options="menuTypeEnum.getOptions()"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.name')"
+                            name="name">
+                            <a-input v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.resource.form.path')"
+                            name="path">
+                            <a-input v-model:value="formData.path"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item name="code">
+                            <template #label>
+                                <span class="mr-4-1">{{ $t('pages.system.menu.form.code') }}</span>
+                                <a-tooltip :title="$t('pages.system.menu.form.code')">
+                                    <question-circle-outlined class="color-secondary"></question-circle-outlined>
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="formData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="statusTypeEnum.getOptions()"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            style="width: 200px"
+                            :label="$t('pages.system.menu.form.sequence')"
+                            name="sequence">
+                            <a-input
+                                :defaultValue="0"
+                                type="number"
+                                v-model:value="formData.sequence"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.description')"
+                            name="description">
+                            <a-input v-model:value="formData.description"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.menu.form.properties')"
+                            name="properties">
+                            <a-textarea v-model:value="formData.properties"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+            <a-card :title="$t('pages.system.menu.resource.form.title')">
+                <a-table
+                    :columns="columns"
+                    :data-source="formData.resources"
+                    :pagination="false"
+                    row-key="id">
+                    <template #bodyCell="{ column, record, index }">
+                        <template v-if="column.key === 'types'">
+                            <a-form-item :label="$t('pages.system.menu.resource.form.method')">
+                                <a-input-group
+                                    style="display: inline-block; vertical-align: middle"
+                                    :compact="true">
+                                    <a-form-item-rest>
+                                        <a-select
+                                            v-model:value="record.method"
+                                            :default-value="record.method || 'GET'"
+                                            style="width: 100px">
+                                            <a-select-option
+                                                v-for="item of reqType"
+                                                :key="item"
+                                                :value="item"
+                                                >{{ item }}</a-select-option
+                                            >
+                                        </a-select>
+                                    </a-form-item-rest>
+                                    <a-input
+                                        v-model:value="record.path"
+                                        :style="{ width: 'calc(100% - 100px)' }" />
+                                </a-input-group>
+                            </a-form-item>
+                        </template>
+                        <template v-if="column.key === 'action'">
+                            <x-action-button @click="handleDelete(index)"> {{ $t('button.delete') }}</x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+
+                <a-button
+                    @click="handleAddApi"
+                    block
+                    class="mt-8-2"
+                    type="dashed">
+                    <template #icon>
+                        <plus-outlined></plus-outlined>
+                    </template>
+                    {{ $t('button.add') }}
+                </a-button>
+            </a-card>
+            <template v-if="menuTypeEnum.is('menu', formData.type)"> </template>
+            <template v-if="statusTypeEnum.is('enabled', formData.status)"> </template>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { QuestionCircleOutlined } from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { useModal, useForm } from '@/hooks'
+import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
+import { ref } from 'vue'
+import { config } from '@/config'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formData, formRef, formRules, resetForm } = useForm()
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.menu.form.name.placeholder') },
+    code: { required: true, message: t('pages.system.menu.form.code.placeholder') },
+}
+
+const columns = [
+    { title: t('pages.system.menu.form.path'), dataIndex: 'types', key: 'types' },
+    { title: t('button.action'), dataIndex: 'action', key: 'action' },
+]
+const reqType = ['GET', 'POST', 'PUT', 'PATCH', 'HEAD', 'DELETE']
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    formData.value.resources = []
+    showModal({
+        type: 'create',
+        title: t('pages.system.menu.add'),
+    })
+}
+
+/**
+ * 添加下级
+ * handleCreateChild
+ */
+
+function handleCreateChild(record = {}) {
+    formData.value.resources = []
+    showModal({
+        type: 'create',
+        title: t('pages.system.menu.button.addChild'),
+    })
+    formData.value.parent_id = record.id
+}
+
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.menu.edit'),
+    })
+    const { data } = await apis.menu.getMenu(record.id).catch(() => {
+        throw new Error()
+    })
+    formData.value = cloneDeep(data)
+    formData.value.properties = formData.value.properties ? JSON.parse(formData.value.properties) : ''
+    formData.value.resources = formData.value.resources || (formData.value.resources = [])
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                params.sequence = Number.parseInt(params.sequence) || 0
+                params.properties = JSON.stringify(params.properties)
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.menu.createMenu(params).catch(() => {
+                            throw new Error()
+                        })
+
+                        break
+                    case 'edit':
+                        newApiData()
+                        params.resources = formData.value.resources
+                        result = await apis.menu.updateMenu(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 针对API 做一次 menu_id
+ */
+function newApiData() {
+    if (formData.value.resources)
+        formData.value.resources.forEach((item) => {
+            item.menu_id = formData.value.id
+        })
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+/**
+ * 添加API
+ */
+
+function handleAddApi() {
+    formData.value.resources.push({
+        method: 'GET',
+        path: '',
+    })
+} /**
+ * 删除API
+ */
+
+function handleDelete(index) {
+    formData.value.resources.splice(index, 1)
+}
+
+defineExpose({
+    handleCreate,
+    handleCreateChild,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/container/containerList/index.vue

@@ -0,0 +1,218 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form :label-col="{ style: { width: '100px' } }" :model="searchFormData" layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item :label="$t('pages.system.menu.form.name')" name="name">
+                            <a-input :placeholder="$t('pages.system.menu.form.name.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.menu.form.code') }}
+                                <a-tooltip :title="$t('pages.system.menu.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input :placeholder="$t('pages.system.menu.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col class="align-right" v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button ghost type="primary" @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <i class="iconfont icon-gonggao" style="color: red;"></i>
+        <span>引入阿里巴巴图标</span>
+        <x-action-bar class="mb-8-2">
+            <a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                {{ $t('pages.system.menu.add') }}
+            </a-button>
+        </x-action-bar>
+        <a-table rowKey="id" :loading="loading" :pagination="true" :columns="columns" :data-source="listData">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'menuType' === column.key">
+                    <!--菜单-->
+                    <a-tag v-if="menuTypeEnum.is('page', record.type)" color="processing">
+                        {{ menuTypeEnum.getDesc(record.type) }}
+                    </a-tag>
+                    <!--按钮-->
+                    <a-tag v-if="menuTypeEnum.is('button', record.type)" color="success">
+                        {{ menuTypeEnum.getDesc(record.type) }}
+                    </a-tag>
+                </template>
+
+                <template v-if="'createAt' === column.key">
+                    {{ formatUtcDateTime(record.created_at) }}
+                </template>
+
+                <template v-if="'statusType' === column.key">
+                    <!--状态-->
+                    <a-tag v-if="statusTypeEnum.is('enabled', record.status)" color="processing">
+                        {{ statusTypeEnum.getDesc(record.status) }}
+                    </a-tag>
+                    <!--状态-->
+                    <a-tag v-if="statusTypeEnum.is('disabled', record.status)" color="processing">
+                        {{ statusTypeEnum.getDesc(record.status) }}
+                    </a-tag>
+                </template>
+
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                        <a-tooltip>
+                            <template #title>{{ $t('pages.system.menu.edit') }}</template>
+                            <edit-outlined />
+                        </a-tooltip>
+                    </x-action-button>
+
+                    <x-action-button @click="$refs.editDialogRef.handleCreateChild(record)">
+                        <a-tooltip>
+                            <template #title>{{ $t('pages.system.menu.button.addChild') }}</template>
+                            <plus-circle-outlined />
+                        </a-tooltip>
+                    </x-action-button>
+                    <x-action-button @click="handleDelete(record)">
+                        <a-tooltip>
+                            <template #title>{{ $t('pages.system.delete') }}</template>
+                            <delete-outlined style="color: #ff4d4f" />
+                        </a-tooltip>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog @ok="onOk" ref="editDialogRef" />
+</template>
+
+<script setup>
+import { Modal, message } from 'ant-design-vue'
+import { ref } from 'vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { menuTypeEnum, statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import { formatUtcDateTime } from '@/utils/util'
+import EditDialog from './components/EditDialog.vue'
+import { useI18n } from 'vue-i18n'
+defineOptions({
+    // eslint-disable-next-line vue/no-reserved-component-names
+    name: 'menu',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = ref([
+    { title: t('pages.system.menu.form.name'), dataIndex: 'name', key: 'name', fixed: true },
+    { title: t('pages.system.menu.form.code'), dataIndex: 'code', key: 'code' },
+
+    { title: t('pages.system.menu.form.type'), dataIndex: 'type', key: 'menuType', width: 80 },
+    { title: t('pages.system.menu.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.menu.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.menu.form.created_at'), dataIndex: 'created_at', key: 'createAt', width: 180 },
+    { title: t('button.action'), key: 'action', width: 180 },
+])
+const { listData, loading, showLoading, hideLoading, searchFormData, paginationState, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getMenuList()
+
+/**
+ * 获取菜单列表
+ * @return {Promise<void>}
+ */
+async function getMenuList() {
+    try {
+        showLoading()
+        // const { current } = paginationState
+        const { data, success, total } = await apis.menu
+            .getMenuList({
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            data.forEach((item) => {
+                item.name = t(item.code) || item.name
+            })
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getMenuList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getMenuList()
+}
+/**
+ * 删除
+ * @param id
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: t('pages.system.menu.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ; (async () => {
+                    try {
+                        const { success } = await apis.menu.delMenu(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getMenuList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getMenuList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/contract/rejectContractList/index.vue

@@ -171,19 +171,13 @@ defineOptions({
 })
 
 const columns = [
-    { title: '主机ID', dataIndex: 'hostId' },
+    { title: '区域ID', dataIndex: 'hostId' },
-    { title: '主机名称', dataIndex: 'hostName' },
+    { title: '区域名称', dataIndex: 'hostName' },
-    { title: '所属区域ID', dataIndex: 'regionId' },
+    { title: '区域编码', dataIndex: 'regionId' },
-    { title: '硬件配置—CPU', dataIndex: 'cpu' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
-    { title: '硬件配置—内存', dataIndex: 'memory' },
+    { title: '状态', dataIndex: 'memory' },
-    { title: '硬件配置—存储（硬盘容量）', dataIndex: 'storage' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
-    { title: '挂载计算卡信息', dataIndex: 'gpu' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
-    { title: 'IP地址', dataIndex: 'ip' },
-    { title: '运行状态', dataIndex: 'status' },
-    { title: '网络带宽', dataIndex: 'bandwidth' },
-    { title: '创建时间', dataIndex: 'createdAt' },
-    { title: '更新时间（最后更新时间）', dataIndex: 'updatedAt' },
-    { title: '操作人', dataIndex: 'operator' },
     { title: '操作', key: 'action', width: 160 },
 ]
 // const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =

src/views/contract/sealedtrueList/index.vue

@@ -171,22 +171,13 @@ defineOptions({
 })
 
 const columns = [
-    { title: '用户ID', dataIndex: 'hostId' },
+    { title: '区域ID', dataIndex: 'hostId' },
-    { title: '用户名', dataIndex: 'hostName' },
+    { title: '区域名称', dataIndex: 'hostName' },
-    { title: '手机号', dataIndex: 'regionId' },
+    { title: '区域编码', dataIndex: 'regionId' },
-    { title: '邮箱', dataIndex: 'cpu' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
-    { title: '认证类型', dataIndex: 'memory' },
+    { title: '状态', dataIndex: 'memory' },
-    { title: '真实姓名', dataIndex: 'ip' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
-    { title: '身份证号', dataIndex: 'hostId' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
-    { title: '企业名称', dataIndex: 'hostName' },
-    { title: '统一社会信用代码', dataIndex: 'regionId' },
-    { title: '认证材料（认证材料URL）', dataIndex: 'cpu' },
-    { title: '提交时间（提交认证时间）', dataIndex: 'memory' },
-    { title: '驳回原因（备注）', dataIndex: 'storage' },
-    { title: '审核时间', dataIndex: 'ip' },
-    { title: '审核人ID', dataIndex: 'storage' },
-    { title: '审核时间', dataIndex: 'storage' },
-    { title: '备注', dataIndex: 'ip' },
     { title: '操作', key: 'action', width: 160 },
 ]
 // const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =

src/views/exchangeRecord/exchangeList/index.vue

@@ -171,28 +171,13 @@ defineOptions({
 })
 
 const columns = [
-    { title: '订单ID', dataIndex: 'hostId' },
+    { title: '区域ID', dataIndex: 'hostId' },
-    { title: '订单编号', dataIndex: 'hostName' },
+    { title: '区域名称', dataIndex: 'hostName' },
-    { title: '所属用户ID', dataIndex: 'regionId' },
+    { title: '区域编码', dataIndex: 'regionId' },
-    { title: '用户名', dataIndex: 'cpu' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
-    { title: '手机号', dataIndex: 'memory' },
+    { title: '状态', dataIndex: 'memory' },
-    { title: '实例ID', dataIndex: 'ip' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
-    { title: '实例名称', dataIndex: 'hostId' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
-    { title: '租赁配置', dataIndex: 'hostName' },
-    { title: '计费方式', dataIndex: 'regionId' },
-    { title: '订单金额', dataIndex: 'cpu' },
-    { title: '实付金额', dataIndex: 'hostId' },
-    { title: '创建时间', dataIndex: 'hostName' },
-    { title: '支付时间', dataIndex: 'regionId' },
-    { title: '订单状态', dataIndex: 'cpu' },
-    { title: '到期时间', dataIndex: 'hostName' },
-    { title: '续费状态', dataIndex: 'regionId' },
-    { title: '支付方式', dataIndex: 'cpu' },
-    { title: '支付订单ID', dataIndex: 'hostId' },
-    { title: '发票状态', dataIndex: 'hostName' },
-    { title: '合同ID', dataIndex: 'regionId' },
-    { title: '是否开票', dataIndex: 'cpu' },
-    { title: '备注', dataIndex: 'hostId' },
     { title: '操作', key: 'action', width: 160 },
 ]
 // const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =

src/views/img/imgList/index.vue

@@ -171,30 +171,13 @@ defineOptions({
 })
 
 const columns = [
-    { title: '订单ID', dataIndex: 'hostId' },
+    { title: '区域ID', dataIndex: 'hostId' },
-    { title: '订单编号', dataIndex: 'hostName' },
+    { title: '区域名称', dataIndex: 'hostName' },
-    { title: '所属用户ID', dataIndex: 'regionId' },
+    { title: '区域编码', dataIndex: 'regionId' },
-    { title: '用户名', dataIndex: 'cpu' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
-    { title: '手机号', dataIndex: 'memory' },
+    { title: '状态', dataIndex: 'memory' },
-    { title: '实例ID', dataIndex: 'ip' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
-    { title: '实例名称', dataIndex: 'hostId' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
-    { title: '租赁配置', dataIndex: 'hostName' },
-    { title: '计费方式', dataIndex: 'regionId' },
-    { title: '订单金额', dataIndex: 'cpu' },
-    { title: '实付金额', dataIndex: 'hostId' },
-    { title: '创建时间', dataIndex: 'hostName' },
-    { title: '支付时间', dataIndex: 'regionId' },
-    { title: '订单状态', dataIndex: 'cpu' },
-    { title: '到期时间', dataIndex: 'hostName' },
-    { title: '续费状态', dataIndex: 'regionId' },
-    { title: '支付方式', dataIndex: 'cpu' },
-    { title: '支付订单ID', dataIndex: 'hostId' },
-    { title: '发票状态', dataIndex: 'hostName' },
-    { title: '合同ID', dataIndex: 'regionId' },
-    { title: '是否开票', dataIndex: 'cpu' },
-    { title: '备注', dataIndex: 'hostId' },
-    { title: '当前运行状态', dataIndex: 'cpu' },
-    { title: '剩余时长', dataIndex: 'hostId' },
     { title: '操作', key: 'action', width: 160 },
 ]
 // const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =

src/views/invoice/index.vue

@@ -1,3 +0,0 @@
-<template>
-    <div>开票管理</div>
-</template>

src/views/invoice/invoceBeSentList/index.vue

@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/invoice/invoceFailedList/index.vue

@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/invoice/invoiceDeliveriesFailed/index.vue

@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/invoice/invoicePendingList/index.vue

@@ -0,0 +1,285 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '计算卡ID', dataIndex: 'hostId' },
+    { title: '型号', dataIndex: 'hostName' },
+    { title: '显存容量', dataIndex: 'regionId' },
+    { title: '核心数', dataIndex: 'cpu' },
+    { title: '所属主机ID', dataIndex: 'memory' },
+    { title: '运行状态', dataIndex: 'storage' },
+    { title: '当前使用实例', dataIndex: 'ip' },
+    { title: '用户信息（租用者）', dataIndex: 'status' },
+    { title: '开始使用时间', dataIndex: 'bandwidth' },
+    { title: '预计释放时间', dataIndex: 'createdAt' },
+    { title: '固件版本', dataIndex: 'updatedAt' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/invoice/invoiceReviewList/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/invoice/invoiceReviewList/index.vue

@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/invoice/invoiceSuccessList/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/invoice/invoiceSuccessList/index.vue

@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/invoice/invoicingFailedList/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/invoice/invoicingFailedList/index.vue

@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/order/orderArrearage/index.vue

@@ -1,301 +0,0 @@
-<template>
-    <x-search-bar class="mb-8-2">
-        <template #default="{ gutter, colSpan }">
-            <a-form
-                :label-col="{ style: { width: '100px' } }"
-                :model="searchFormData"
-                layout="inline">
-                <a-row :gutter="gutter">
-                    <a-col v-bind="colSpan">
-                        <a-form-item name="title">
-                            <template #label>
-                                规则名称
-                                <a-tooltip title="规则名称是唯一的 key">
-                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
-                                </a-tooltip>
-                            </template>
-                            <a-input v-model:value="searchFormData.title"></a-input>
-                        </a-form-item>
-                    </a-col>
-                    <a-col v-bind="colSpan">
-                        <a-form-item label="描述">
-                            <a-input></a-input>
-                        </a-form-item>
-                    </a-col>
-                    <template v-if="searchBarExpand">
-                        <a-col v-bind="colSpan">
-                            <a-form-item label="服务调用次数">
-                                <a-input></a-input>
-                            </a-form-item>
-                        </a-col>
-                        <a-col v-bind="colSpan">
-                            <a-form-item label="状态">
-                                <a-select></a-select>
-                            </a-form-item>
-                        </a-col>
-                        <a-col v-bind="colSpan">
-                            <a-form-item label="上次调度时间">
-                                <a-date-picker placeholder=""></a-date-picker>
-                            </a-form-item>
-                        </a-col>
-                    </template>
-                    <a-col
-                        class="align-right"
-                        v-bind="colSpan">
-                        <a-space>
-                            <a-button>重置</a-button>
-                            <a-button
-                                ghost
-                                type="primary"
-                                @click="handleSearch">
-                                搜索
-                            </a-button>
-                            <a @click="() => (searchBarExpand = !searchBarExpand)">
-                                展开
-                                <template v-if="searchBarExpand">
-                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
-                                </template>
-                                <template v-else>
-                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
-                                </template>
-                            </a>
-                        </a-space>
-                    </a-col>
-                </a-row>
-            </a-form>
-        </template>
-    </x-search-bar>
-    <a-card>
-        <x-action-bar class="mb-8-2">
-            <a-button
-                type="primary"
-                @click="$refs.editDialogRef.handleCreate()">
-                <template #icon>
-                    <plus-outlined></plus-outlined>
-                </template>
-                新建
-            </a-button>
-            <template #extra>
-                <a-space>
-                    <a-tooltip title="刷新">
-                        <a-button
-                            type="text"
-                            @click="handleSearch">
-                            <template #icon>
-                                <reload-outlined></reload-outlined>
-                            </template>
-                        </a-button>
-                    </a-tooltip>
-                    <a-dropdown>
-                        <a-tooltip title="密度">
-                            <a-button type="text">
-                                <template #icon>
-                                    <column-height-outlined></column-height-outlined>
-                                </template>
-                            </a-button>
-                        </a-tooltip>
-                        <template #overlay>
-                            <a-menu
-                                :selectedKeys="[size]"
-                                @click="handleSize">
-                                <a-menu-item key="default">默认</a-menu-item>
-                                <a-menu-item key="middle">中等</a-menu-item>
-                                <a-menu-item key="small">紧凑</a-menu-item>
-                            </a-menu>
-                        </template>
-                    </a-dropdown>
-                    <a-tooltip title="设置">
-                        <a-button type="text">
-                            <template #icon>
-                                <setting-outlined></setting-outlined>
-                            </template>
-                        </a-button>
-                    </a-tooltip>
-                </a-space>
-            </template>
-        </x-action-bar>
-        <a-table
-            :columns="columns"
-            :data-source="listData"
-            :loading="loading"
-            :pagination="paginationState"
-            :size="size"
-            row-key="id"
-            @change="onTableChange">
-            <template #bodyCell="{ column, record }">
-                <template v-if="'action' === column.key">
-                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
-                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
-                    <x-action-button>
-                        <a-dropdown :trigger="['click']">
-                            <more-outlined></more-outlined>
-                            <template #overlay>
-                                <a-menu>
-                                    <a-menu-item>菜单1</a-menu-item>
-                                    <a-menu-item>菜单2</a-menu-item>
-                                    <a-menu-item>菜单3</a-menu-item>
-                                </a-menu>
-                            </template>
-                        </a-dropdown>
-                    </x-action-button>
-                </template>
-            </template>
-        </a-table>
-    </a-card>
-
-    <edit-dialog
-        ref="editDialogRef"
-        @ok="onOk" />
-</template>
-
-<script setup>
-import { message, Modal } from 'ant-design-vue'
-import { ref } from 'vue'
-import {
-    ColumnHeightOutlined,
-    DownOutlined,
-    QuestionCircleOutlined,
-    ReloadOutlined,
-    SettingOutlined,
-    UpOutlined,
-    PlusOutlined,
-    MoreOutlined,
-} from '@ant-design/icons-vue'
-import apis from '@/apis'
-import { config } from '@/config'
-import { usePagination } from '@/hooks'
-import EditDialog from './components/EditDialog.vue'
-
-defineOptions({
-    name: 'listTable',
-})
-
-const columns = [
-    { title: '订单ID', dataIndex: 'hostId' },
-    { title: '订单编号', dataIndex: 'hostName' },
-    { title: '所属用户ID', dataIndex: 'regionId' },
-    { title: '用户名', dataIndex: 'cpu' },
-    { title: '手机号', dataIndex: 'memory' },
-    { title: '实例ID', dataIndex: 'ip' },
-    { title: '实例名称', dataIndex: 'hostId' },
-    { title: '租赁配置', dataIndex: 'hostName' },
-    { title: '计费方式', dataIndex: 'regionId' },
-    { title: '订单金额', dataIndex: 'cpu' },
-    { title: '实付金额', dataIndex: 'hostId' },
-    { title: '创建时间', dataIndex: 'hostName' },
-    { title: '支付时间', dataIndex: 'regionId' },
-    { title: '订单状态', dataIndex: 'cpu' },
-    { title: '到期时间', dataIndex: 'hostName' },
-    { title: '续费状态', dataIndex: 'regionId' },
-    { title: '支付方式', dataIndex: 'cpu' },
-    { title: '支付订单ID', dataIndex: 'hostId' },
-    { title: '发票状态', dataIndex: 'hostName' },
-    { title: '合同ID', dataIndex: 'regionId' },
-    { title: '是否开票', dataIndex: 'cpu' },
-    { title: '备注', dataIndex: 'hostId' },
-    { title: '欠费金额', dataIndex: 'cpu' },
-    { title: '欠费时间（欠费开始时间）', dataIndex: 'hostId' },
-    { title: '催缴次数（提醒次数）', dataIndex: 'regionId' },
-    { title: '补缴截止时间', dataIndex: 'cpu' },
-    { title: '是否已停机', dataIndex: 'hostId' },
-    { title: '操作', key: 'action', width: 160 },
-]
-// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
-//     usePagination()
-const listData = ref([])
-const editDialogRef = ref()
-const searchBarExpand = ref(false)
-const size = ref('default')
-
-// getPageList()
-
-/**
- * 获取分页列表
- */
-async function getPageList() {
-    try {
-        // showLoading()
-        // const { pageSize, current } = paginationState
-        // const { code, data } = await apis.common
-        //     .getPageList({
-        //         pageSize,
-        //         current: current,
-        //     })
-        //     .catch(() => {
-        //         throw new Error()
-        //     })
-        // hideLoading()
-        // if (config('http.code.success') === code) {
-        //     const { records, pagination } = data
-        //     listData.value = records
-        //     paginationState.total = pagination.total
-        // }
-    } catch (error) {
-        // hideLoading()
-    }
-}
-
-/**
- * 搜索
- */
-function handleSearch() {
-    // resetPagination()
-    // getPageList()
-}
-
-/**
- * 删除
- */
-function handleDelete({ id }) {
-    Modal.confirm({
-        title: '删除提示',
-        content: '确认删除？',
-        onOk: () => {
-            return new Promise((resolve, reject) => {
-                ;(async () => {
-                    try {
-                        const { code } = await apis.common.del(id).catch(() => {
-                            throw new Error()
-                        })
-                        if (config('http.code.success') === code) {
-                            resolve()
-                            message.success('删除成功')
-                            await getPageList()
-                        }
-                    } catch (error) {
-                        reject()
-                    }
-                })()
-            })
-        },
-    })
-}
-
-/**
- * 密度
- * @param {string} key
- */
-function handleSize({ key }) {
-    size.value = key
-}
-
-/**
- * 表格发生改变
- * @param current
- * @param pageSize
- */
-function onTableChange({ current, pageSize }) {
-    // paginationState.current = current
-    // paginationState.pageSize = pageSize
-    // getPageList()
-}
-
-/**
- * 完成
- */
-function onOk() {
-    // getPageList()
-}
-</script>
-
-<style lang="less" scoped></style>

src/views/order/orderList/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/rechargeRecord/rechargeList/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/rechargeRecord/rechargeList/index.vue

@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/resource/resourceAdmin/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/resource/resourceAdmin/index.vue

@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/resource/resourceStatistics/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/resource/resourceStatistics/index.vue

@@ -0,0 +1,285 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '计算卡ID', dataIndex: 'hostId' },
+    { title: '型号', dataIndex: 'hostName' },
+    { title: '显存容量', dataIndex: 'regionId' },
+    { title: '核心数', dataIndex: 'cpu' },
+    { title: '所属主机ID', dataIndex: 'memory' },
+    { title: '运行状态', dataIndex: 'storage' },
+    { title: '当前使用实例', dataIndex: 'ip' },
+    { title: '用户信息（租用者）', dataIndex: 'status' },
+    { title: '开始使用时间', dataIndex: 'bandwidth' },
+    { title: '预计释放时间', dataIndex: 'createdAt' },
+    { title: '固件版本', dataIndex: 'updatedAt' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/userControl/ blackList/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/userControl/userList/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/withdrawal/pendingReviewList/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/withdrawal/pendingReviewList/index.vue

@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/withdrawal/withdrawErrorList/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/withdrawal/withdrawErrorList/index.vue

@@ -0,0 +1,285 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '计算卡ID', dataIndex: 'hostId' },
+    { title: '型号', dataIndex: 'hostName' },
+    { title: '显存容量', dataIndex: 'regionId' },
+    { title: '核心数', dataIndex: 'cpu' },
+    { title: '所属主机ID', dataIndex: 'memory' },
+    { title: '运行状态', dataIndex: 'storage' },
+    { title: '当前使用实例', dataIndex: 'ip' },
+    { title: '用户信息（租用者）', dataIndex: 'status' },
+    { title: '开始使用时间', dataIndex: 'bandwidth' },
+    { title: '预计释放时间', dataIndex: 'createdAt' },
+    { title: '固件版本', dataIndex: 'updatedAt' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/withdrawal/withdrawList/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/withdrawal/withdrawList/index.vue

@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/withdrawal/withdrawRejectList/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/withdrawal/withdrawRejectList/index.vue

@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>

src/views/withdrawal/withdrawSuccessList/components/EditDialog.vue

@@ -0,0 +1,119 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            scroll-to-first-error
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '80px' } }">
+            <a-form-item
+                label="标题"
+                name="title">
+                <a-input v-model:value="formData.title"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRef, formRules, formRecord, formData, resetForm } = useForm()
+
+formRules.value = {
+    title: { required: true, message: '请输入标题' },
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(formRecord.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (200 === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>

src/views/withdrawal/withdrawSuccessList/index.vue

@@ -0,0 +1,281 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="title">
+                            <template #label>
+                                规则名称
+                                <a-tooltip title="规则名称是唯一的 key">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input v-model:value="searchFormData.title"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col v-bind="colSpan">
+                        <a-form-item label="描述">
+                            <a-input></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <template v-if="searchBarExpand">
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="服务调用次数">
+                                <a-input></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="状态">
+                                <a-select></a-select>
+                            </a-form-item>
+                        </a-col>
+                        <a-col v-bind="colSpan">
+                            <a-form-item label="上次调度时间">
+                                <a-date-picker placeholder=""></a-date-picker>
+                            </a-form-item>
+                        </a-col>
+                    </template>
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button>重置</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                搜索
+                            </a-button>
+                            <a @click="() => (searchBarExpand = !searchBarExpand)">
+                                展开
+                                <template v-if="searchBarExpand">
+                                    <up-outlined :style="{ fontSize: '12px' }"></up-outlined>
+                                </template>
+                                <template v-else>
+                                    <down-outlined :style="{ fontSize: '12px' }"></down-outlined>
+                                </template>
+                            </a>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-card>
+        <x-action-bar class="mb-8-2">
+            <a-button
+                type="primary"
+                @click="$refs.editDialogRef.handleCreate()">
+                <template #icon>
+                    <plus-outlined></plus-outlined>
+                </template>
+                新建
+            </a-button>
+            <template #extra>
+                <a-space>
+                    <a-tooltip title="刷新">
+                        <a-button
+                            type="text"
+                            @click="handleSearch">
+                            <template #icon>
+                                <reload-outlined></reload-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                    <a-dropdown>
+                        <a-tooltip title="密度">
+                            <a-button type="text">
+                                <template #icon>
+                                    <column-height-outlined></column-height-outlined>
+                                </template>
+                            </a-button>
+                        </a-tooltip>
+                        <template #overlay>
+                            <a-menu
+                                :selectedKeys="[size]"
+                                @click="handleSize">
+                                <a-menu-item key="default">默认</a-menu-item>
+                                <a-menu-item key="middle">中等</a-menu-item>
+                                <a-menu-item key="small">紧凑</a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-tooltip title="设置">
+                        <a-button type="text">
+                            <template #icon>
+                                <setting-outlined></setting-outlined>
+                            </template>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </x-action-bar>
+        <a-table
+            :columns="columns"
+            :data-source="listData"
+            :loading="loading"
+            :pagination="paginationState"
+            :size="size"
+            row-key="id"
+            @change="onTableChange">
+            <template #bodyCell="{ column, record }">
+                <template v-if="'action' === column.key">
+                    <x-action-button @click="$refs.editDialogRef.handleEdit(record)">编辑</x-action-button>
+                    <x-action-button @click="handleDelete(record)">删除</x-action-button>
+                    <x-action-button>
+                        <a-dropdown :trigger="['click']">
+                            <more-outlined></more-outlined>
+                            <template #overlay>
+                                <a-menu>
+                                    <a-menu-item>菜单1</a-menu-item>
+                                    <a-menu-item>菜单2</a-menu-item>
+                                    <a-menu-item>菜单3</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </x-action-button>
+                </template>
+            </template>
+        </a-table>
+    </a-card>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk" />
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import {
+    ColumnHeightOutlined,
+    DownOutlined,
+    QuestionCircleOutlined,
+    ReloadOutlined,
+    SettingOutlined,
+    UpOutlined,
+    PlusOutlined,
+    MoreOutlined,
+} from '@ant-design/icons-vue'
+import apis from '@/apis'
+import { config } from '@/config'
+import { usePagination } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+
+defineOptions({
+    name: 'listTable',
+})
+
+const columns = [
+    { title: '区域ID', dataIndex: 'hostId' },
+    { title: '区域名称', dataIndex: 'hostName' },
+    { title: '区域编码', dataIndex: 'regionId' },
+    { title: '数据中心地址', dataIndex: 'cpu' },
+    { title: '状态', dataIndex: 'memory' },
+    { title: '部署主机数量（主机数量）', dataIndex: 'storage' },
+    { title: '可用计算卡总数', dataIndex: 'ip' },
+    { title: '操作', key: 'action', width: 160 },
+]
+// const { listData, paginationState, loading, showLoading, hideLoading, resetPagination, searchFormData } =
+//     usePagination()
+const listData = ref([])
+const editDialogRef = ref()
+const searchBarExpand = ref(false)
+const size = ref('default')
+
+// getPageList()
+
+/**
+ * 获取分页列表
+ */
+async function getPageList() {
+    try {
+        // showLoading()
+        // const { pageSize, current } = paginationState
+        // const { code, data } = await apis.common
+        //     .getPageList({
+        //         pageSize,
+        //         current: current,
+        //     })
+        //     .catch(() => {
+        //         throw new Error()
+        //     })
+        // hideLoading()
+        // if (config('http.code.success') === code) {
+        //     const { records, pagination } = data
+        //     listData.value = records
+        //     paginationState.total = pagination.total
+        // }
+    } catch (error) {
+        // hideLoading()
+    }
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    // resetPagination()
+    // getPageList()
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 密度
+ * @param {string} key
+ */
+function handleSize({ key }) {
+    size.value = key
+}
+
+/**
+ * 表格发生改变
+ * @param current
+ * @param pageSize
+ */
+function onTableChange({ current, pageSize }) {
+    // paginationState.current = current
+    // paginationState.pageSize = pageSize
+    // getPageList()
+}
+
+/**
+ * 完成
+ */
+function onOk() {
+    // getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>