feat(frontend): 单据管理迭代 #7190

dbm-ui/frontend/.prettierignore

@@ -1,3 +1,6 @@
 node_modules
 dist
+lib
+patch
+public
 src/types/auto-imports.d.ts

dbm-ui/frontend/package.json

@@ -24,78 +24,78 @@
     "@blueking/login-modal": "^1.0.5",
     "@blueking/notice-component": "2.0.5",
     "@blueking/sub-saas": "0.0.0-beta.6",
-    "@icon-cool/bk-icon-bk-biz-components": "0.0.4",
-    "@jridgewell/gen-mapping": "0.3.5",
-    "@vueuse/core": "^11.0.3",
-    "axios": "^1.7.7",
+    "@blueking/table": "^0.0.1-beta.20",
+    "@icon-cool/bk-icon-bk-biz-components": "^0.0.4",
+    "@vueuse/core": "^12.0.0",
+    "axios": "^1.7.9",
     "bkui-vue": "2.0.1-beta.78",
-    "date-fns": "3.6.0",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
     "html-to-image": "1.11.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "lodash": "4.17.21",
     "mitt": "3.0.1",
-    "monaco-editor": "^0.51.0",
-    "pinia": "2.2.2",
-    "qs": "6.13.0",
+    "monaco-editor": "^0.52.0",
+    "pinia": "^2.3.0",
+    "qs": "^6.13.1",
     "screenfull": "6.0.2",
     "tiny-pinyin": "1.3.2",
     "tippy.js": "6.3.7",
     "url-join": "5.0.0",
-    "vue": "^3.5.4",
+    "vue": "^3.5.13",
     "vue-content-loader": "2.0.1",
-    "vue-i18n": "^10.0.1",
+    "vue-i18n": "^10.0.5",
     "vue-request": "2.0.4",
-    "vue-router": "^4.4.5",
+    "vue-router": "^4.5.0",
     "vue-types": "^5.1.3",
     "vuedraggable": "4.1.0",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^19.5.0",
-    "@trivago/prettier-plugin-sort-imports": "4.3.0",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.1.0",
     "@tsconfig/node20": "20.1.4",
-    "@types/lodash": "4.17.7",
-    "@types/node": "^22.5.4",
-    "@types/qs": "6.9.15",
-    "@vitejs/plugin-basic-ssl": "1.1.0",
-    "@vitejs/plugin-vue": "^5.1.3",
-    "@vitejs/plugin-vue-jsx": "4.0.1",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.10.1",
+    "@types/qs": "^6.9.17",
+    "@vitejs/plugin-basic-ssl": "^1.2.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/eslint-config-typescript": "13.0.0",
-    "@vue/tsconfig": "0.5.1",
-    "commitlint": "^19.5.0",
+    "@vue/tsconfig": "^0.7.0",
+    "commitlint": "^19.6.0",
     "cross-env": "7.0.3",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-config-tencent": "1.0.4",
+    "eslint-config-tencent": "^1.1.1",
     "eslint-plugin-simple-import-sort": "12.1.1",
-    "eslint-plugin-vue": "^9.28.0",
-    "less": "4.2.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "less": "^4.2.1",
     "lint-staged": "^15.2.10",
-    "npm-run-all2": "6.2.2",
+    "npm-run-all2": "^7.0.1",
     "postcss-html": "1.7.0",
     "postcss-less": "6.0.0",
-    "prettier": "3.3.3",
-    "prettier-plugin-curly": "0.2.2",
+    "prettier": "^3.4.2",
+    "prettier-plugin-curly": "^0.3.1",
     "simple-git-hooks": "2.11.1",
-    "stylelint": "^16.9.0",
+    "stylelint": "^16.11.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-less": "3.0.1",
     "stylelint-order": "6.0.4",
-    "typescript": "5.6.2",
-    "unplugin-auto-import": "^0.18.3",
-    "unplugin-vue-components": "0.27.4",
-    "vite": "^5.4.5",
-    "vite-plugin-babel": "1.2.0",
+    "typescript": "^5.7.2",
+    "unplugin-auto-import": "^0.18.6",
+    "unplugin-vue-components": "^0.27.5",
+    "vite": "^6.0.3",
+    "vite-plugin-babel": "^1.3.0",
     "vite-plugin-html-env": "1.2.8",
     "vite-plugin-imp": "2.4.0",
     "vite-plugin-monaco-editor": "1.1.0",
-    "vite-plugin-static-copy": "^1.0.6",
+    "vite-plugin-static-copy": "^2.2.0",
     "vite-plugin-style-import": "2.0.0",
-    "vue-component-type-helpers": "^2.1.6",
-    "vue-tsc": "^2.1.6"
+    "vue-component-type-helpers": "^2.1.10",
+    "vue-tsc": "^2.1.10"
   },
   "simple-git-hooks": {
     "pre-commit": "cd dbm-ui/frontend && npx lint-staged",

dbm-ui/frontend/src/common/const/clusterAffinity.ts

@@ -0,0 +1,10 @@
+import { t } from '@locales/index';
+
+export const ClusterAffinityMap = {
+  CROS_SUBZONE: t('同城跨园区'),
+  SAME_SUBZONE_CROSS_SWTICH: t('同城同园区跨机架'),
+  CROSS_RACK: t('跨机架'),
+  SAME_SUBZONE: t('同城同园区'),
+  NONE: t('同城无园区要求'),
+  MAX_EACH_ZONE_EQUAL: t('尽量均匀分布'),
+};

dbm-ui/frontend/src/common/const/index.ts

@@ -1,4 +1,5 @@
 export * from './accountTypes';
+export * from './clusterAffinity';
 export * from './clusterInsStatus';
 export * from './clusterTypeInfos';
 export * from './clusterTypes';

dbm-ui/frontend/src/common/const/ticketTypes.ts

@@ -36,50 +36,52 @@ export enum TicketTypes {
   MYSQL_HA_FULL_BACKUP = 'MYSQL_HA_FULL_BACKUP',
   MYSQL_OPEN_AREA = 'MYSQL_OPEN_AREA', // 开区
   MYSQL_PARTITION = 'MYSQL_PARTITION',
-  MYSQL_DUMP_DATA = 'MYSQL_DUMP_DATA', // mysql mysql 数据导出
+  MYSQL_DUMP_DATA = 'MYSQL_DUMP_DATA', // mysql 数据导出
+  MYSQL_DATA_REPAIR = 'MYSQL_DATA_REPAIR', // mysql 数据修复
   MYSQL_PROXY_UPGRADE = 'MYSQL_PROXY_UPGRADE', // MySQL Proxy 升级
   MYSQL_LOCAL_UPGRADE = 'MYSQL_LOCAL_UPGRADE', // MySQL 原地升级
   MYSQL_MIGRATE_UPGRADE = 'MYSQL_MIGRATE_UPGRADE', // MySQL 迁移升级
   MYSQL_SLAVE_MIGRATE_UPGRADE = 'MYSQL_SLAVE_MIGRATE_UPGRADE', // MySQL 从库迁移升级
   MYSQL_ACCOUNT_RULE_CHANGE = 'MYSQL_ACCOUNT_RULE_CHANGE', // MySQL 权限变更
 }
 export enum TicketTypes {
-  REDIS_CLUSTER_APPLY = 'REDIS_CLUSTER_APPLY',
-  REDIS_KEYS_EXTRACT = 'REDIS_KEYS_EXTRACT',
-  REDIS_KEYS_DELETE = 'REDIS_KEYS_DELETE',
   REDIS_BACKUP = 'REDIS_BACKUP',
-  REDIS_PURGE = 'REDIS_PURGE',
+  REDIS_CLUSTER_ADD_SLAVE = 'REDIS_CLUSTER_ADD_SLAVE',
+  REDIS_CLUSTER_APPLY = 'REDIS_CLUSTER_APPLY',
+  REDIS_CLUSTER_CUTOFF = 'REDIS_CLUSTER_CUTOFF',
+  REDIS_CLUSTER_DATA_COPY = 'REDIS_CLUSTER_DATA_COPY',
+  REDIS_CLUSTER_ROLLBACK_DATA_COPY = 'REDIS_CLUSTER_ROLLBACK_DATA_COPY',
+  REDIS_CLUSTER_SHARD_NUM_UPDATE = 'REDIS_CLUSTER_SHARD_NUM_UPDATE',
+  REDIS_CLUSTER_TYPE_UPDATE = 'REDIS_CLUSTER_TYPE_UPDATE',
+  REDIS_DATACOPY_CHECK_REPAIR = 'REDIS_DATACOPY_CHECK_REPAIR',
   REDIS_DESTROY = 'REDIS_DESTROY',
-  REDIS_PROXY_OPEN = 'REDIS_PROXY_OPEN',
-  REDIS_PROXY_CLOSE = 'REDIS_PROXY_CLOSE',
-  REDIS_PLUGIN_DNS_BIND_CLB = 'REDIS_PLUGIN_DNS_BIND_CLB',
-  REDIS_PLUGIN_DNS_UNBIND_CLB = 'REDIS_PLUGIN_DNS_UNBIND_CLB',
+  REDIS_INS_APPLY = 'REDIS_INS_APPLY',
+  REDIS_INSTANCE_PROXY_CLOSE = 'REDIS_INSTANCE_PROXY_CLOSE',
+  REDIS_INSTANCE_PROXY_OPEN = 'REDIS_INSTANCE_PROXY_OPEN',
+  REDIS_INSTANCE_DESTROY = 'REDIS_INSTANCE_DESTROY', // redis 主从集群删除
+  REDIS_KEYS_DELETE = 'REDIS_KEYS_DELETE',
+  REDIS_KEYS_EXTRACT = 'REDIS_KEYS_EXTRACT',
+  REDIS_MASTER_SLAVE_SWITCH = 'REDIS_MASTER_SLAVE_SWITCH',
   REDIS_PLUGIN_CREATE_CLB = 'REDIS_PLUGIN_CREATE_CLB',
-  REDIS_PLUGIN_DELETE_CLB = 'REDIS_PLUGIN_DELETE_CLB',
   REDIS_PLUGIN_CREATE_POLARIS = 'REDIS_PLUGIN_CREATE_POLARIS',
+  REDIS_PLUGIN_DELETE_CLB = 'REDIS_PLUGIN_DELETE_CLB',
   REDIS_PLUGIN_DELETE_POLARIS = 'REDIS_PLUGIN_DELETE_POLARIS',
-  REDIS_CLUSTER_CUTOFF = 'REDIS_CLUSTER_CUTOFF', // redis 整机替换
-  REDIS_PROXY_SCALE_UP = 'REDIS_PROXY_SCALE_UP', // redis 接入层扩容
-  REDIS_PROXY_SCALE_DOWN = 'REDIS_PROXY_SCALE_DOWN', // redis 接入层缩容
-  REDIS_SCALE_UPDOWN = 'REDIS_SCALE_UPDOWN', // redis 集群容量变更
-  REDIS_SCALE_UP = 'REDIS_SCALE_UP', // redis 存储层扩容
-  REDIS_SCALE_DOWN = 'REDIS_SCALE_DOWN', // redis 存储层缩容
-  REDIS_MASTER_SLAVE_SWITCH = 'REDIS_MASTER_SLAVE_SWITCH', // redis 主故障切换
-  REDIS_SLOTS_MIGRATE = 'REDIS_SLOTS_MIGRATE', // redis slots 迁移
+  REDIS_PLUGIN_DNS_BIND_CLB = 'REDIS_PLUGIN_DNS_BIND_CLB',
+  REDIS_PLUGIN_DNS_UNBIND_CLB = 'REDIS_PLUGIN_DNS_UNBIND_CLB',
   REDIS_DATA_STRUCTURE = 'REDIS_DATA_STRUCTURE', // redis 定点构造
   REDIS_DATA_STRUCTURE_TASK_DELETE = 'REDIS_DATA_STRUCTURE_TASK_DELETE', // redis 构造销毁
-  REDIS_CLUSTER_ADD_SLAVE = 'REDIS_CLUSTER_ADD_SLAVE', // redis 新建从库
-  REDIS_CLUSTER_DATA_COPY = 'REDIS_CLUSTER_DATA_COPY', // redis 数据复制
-  REDIS_CLUSTER_SHARD_NUM_UPDATE = 'REDIS_CLUSTER_SHARD_NUM_UPDATE', // redis 集群分片变更
-  REDIS_CLUSTER_TYPE_UPDATE = 'REDIS_CLUSTER_TYPE_UPDATE', // redis 集群类型变更
-  REDIS_DATACOPY_CHECK_REPAIR = 'REDIS_DATACOPY_CHECK_REPAIR', // redis 数据校验与修复
-  REDIS_CLUSTER_ROLLBACK_DATA_COPY = 'REDIS_CLUSTER_ROLLBACK_DATA_COPY', // redis 数据回写
-  REDIS_VERSION_UPDATE_ONLINE = 'REDIS_VERSION_UPDATE_ONLINE', // redis 版本升级
-  REDIS_INS_APPLY = 'REDIS_INS_APPLY', // redis 主从集群部署
   REDIS_INSTANCE_OPEN = 'REDIS_INSTANCE_OPEN', // redis 主从集群启用
   REDIS_INSTANCE_CLOSE = 'REDIS_INSTANCE_CLOSE', // redis 主从集群禁用
-  REDIS_INSTANCE_DESTROY = 'REDIS_INSTANCE_DESTROY', // redis 主从集群删除
   REDIS_CLUSTER_LOAD_MODULES = 'REDIS_CLUSTER_LOAD_MODULES', // redis 安装Module
+  REDIS_PURGE = 'REDIS_PURGE',
+  REDIS_PROXY_CLOSE = 'REDIS_PROXY_CLOSE',
+  REDIS_PROXY_OPEN = 'REDIS_PROXY_OPEN',
+  REDIS_PROXY_SCALE_DOWN = 'REDIS_PROXY_SCALE_DOWN',
+  REDIS_PROXY_SCALE_UP = 'REDIS_PROXY_SCALE_UP',
+  REDIS_SCALE_DOWN = 'REDIS_SCALE_DOWN',
+  REDIS_SCALE_UP = 'REDIS_SCALE_UP',
+  REDIS_SCALE_UPDOWN = 'REDIS_SCALE_UPDOWN',
+  REDIS_VERSION_UPDATE_ONLINE = 'REDIS_VERSION_UPDATE_ONLINE',
 }
 export enum TicketTypes {
   TENDBCLUSTER_APPLY = 'TENDBCLUSTER_APPLY',
@@ -115,31 +117,34 @@ export enum TicketTypes {
   TENDBCLUSTER_RESTORE_LOCAL_SLAVE = 'TENDBCLUSTER_RESTORE_LOCAL_SLAVE', // spider 重建从库-原地重建
   TENDBCLUSTER_RESTORE_SLAVE = 'TENDBCLUSTER_RESTORE_SLAVE', // spider 重建从库-新机重建
   TENDBCLUSTER_DUMP_DATA = 'TENDBCLUSTER_DUMP_DATA', // spider 数据导出
+  TENDBCLUSTER_DATA_REPAIR = 'TENDBCLUSTER_DATA_REPAIR', // spider 数据修复
   TENDBCLUSTER_SEMANTIC_CHECK = 'TENDBCLUSTER_SEMANTIC_CHECK', // spider 模拟执行
   TENDBCLUSTER_ACCOUNT_RULE_CHANGE = 'TENDBCLUSTER_ACCOUNT_RULE_CHANGE', // spider 权限变更
+  TENDBCLUSTER_TEMPORARY_DESTROY = 'TENDBCLUSTER_TEMPORARY_DESTROY', // 临时集群销毁
 }
 export enum TicketTypes {
+  MONGODB_ADD_MONGOS = 'MONGODB_ADD_MONGOS', // mongo 扩容接入层
+  MONGODB_ADD_SHARD_NODES = 'MONGODB_ADD_SHARD_NODES', // mongo 扩容 shard 节点数
+  MONGODB_AUTHORIZE_RULES = 'MONGODB_AUTHORIZE_RULES', // MongoDB 集群授权
+  MONGODB_BACKUP = 'MONGODB_BACKUP', // mongo 库表备份
+  MONGODB_CUTOFF = 'MONGODB_CUTOFF', // mongo 整机替换
   MONGODB_DISABLE = 'MONGODB_DISABLE', // mongodb禁用
-  MONGODB_INSTANCE_RELOAD = 'MONGODB_INSTANCE_RELOAD', // mongodb重启
-  MONGODB_SHARD_APPLY = 'MONGODB_SHARD_APPLY', // MongoDB 分片式集群部署申请
-  MONGODB_REPLICASET_APPLY = 'MONGODB_REPLICASET_APPLY', // MongoDB 副本集部署申请
-  MONGODB_ENABLE = 'MONGODB_ENABLE', // MongoDB 集群启用
   MONGODB_DESTROY = 'MONGODB_DESTROY', // MongoDB 集群删除
-  MONGODB_SCALE_UPDOWN = 'MONGODB_SCALE_UPDOWN', // MongoDB 分片式集群单个容量变更
+  MONGODB_ENABLE = 'MONGODB_ENABLE', // MongoDB 集群启用
   MONGODB_EXCEL_AUTHORIZE = 'MONGODB_EXCEL_AUTHORIZE', // MongoDB 导入授权
-  MONGODB_AUTHORIZE_RULES = 'MONGODB_AUTHORIZE_RULES', // MongoDB 集群授权
   MONGODB_EXCEL_AUTHORIZE_RULES = 'MONGODB_EXCEL_AUTHORIZE_RULES', // MongoDB 导入授权
   MONGODB_EXEC_SCRIPT_APPLY = 'MONGODB_EXEC_SCRIPT_APPLY', // mongo 变更脚本执行
-  MONGODB_ADD_SHARD_NODES = 'MONGODB_ADD_SHARD_NODES', // mongo 扩容 shard 节点数
-  MONGODB_REDUCE_SHARD_NODES = 'MONGODB_REDUCE_SHARD_NODES', // mongo 缩容 shard 节点数
-  MONGODB_ADD_MONGOS = 'MONGODB_ADD_MONGOS', // mongo 扩容接入层
-  MONGODB_REDUCE_MONGOS = 'MONGODB_REDUCE_MONGOS', // mongo 缩容接入层
-  MONGODB_CUTOFF = 'MONGODB_CUTOFF', // mongo 整机替换
-  MONGODB_FULL_BACKUP = 'MONGODB_FULL_BACKUP', // mongo 全库备份
+  MONGODB_INSTANCE_RELOAD = 'MONGODB_INSTANCE_RELOAD', // mongodb重启
   MONGODB_REMOVE_NS = 'MONGODB_REMOVE_NS', // mongo 清档
-  MONGODB_BACKUP = 'MONGODB_BACKUP', // mongo 库表备份
+  MONGODB_REDUCE_MONGOS = 'MONGODB_REDUCE_MONGOS', // mongo 缩容接入层
+  MONGODB_REDUCE_SHARD_NODES = 'MONGODB_REDUCE_SHARD_NODES', // mongo 缩容 shard 节点数
   MONGODB_RESTORE = 'MONGODB_RESTORE', // mongo 定点构造
+  MONGODB_SCALE_UPDOWN = 'MONGODB_SCALE_UPDOWN', // MongoDB 分片式集群单个容量变更
+  MONGODB_SHARD_APPLY = 'MONGODB_SHARD_APPLY', // MongoDB 分片式集群部署申请
+  MONGODB_REPLICASET_APPLY = 'MONGODB_REPLICASET_APPLY', // MongoDB 副本集部署申请
   MONGODB_TEMPORARY_DESTROY = 'MONGODB_TEMPORARY_DESTROY', // mongo 临时集群销毁
+  MONGODB_FULL_BACKUP = 'MONGODB_FULL_BACKUP', // mongo 全库备份
+  MONGODB_INSTANCE_DEINSTALL = 'MONGODB_INSTANCE_DEINSTALL', // mongo 实例下架
 }
 export enum TicketTypes {
   SQLSERVER_SINGLE_APPLY = 'SQLSERVER_SINGLE_APPLY', // sqlserver单节点部署
@@ -164,6 +169,7 @@ export enum TicketTypes {
   SQLSERVER_FULL_MIGRATE = 'SQLSERVER_FULL_MIGRATE', // sqlserver 全量迁移
   SQLSERVER_INCR_MIGRATE = 'SQLSERVER_INCR_MIGRATE', // sqlserver 增量迁移
   SQLSERVER_BUILD_DB_SYNC = 'SQLSERVER_BUILD_DB_SYNC', // DB建立同步
+  SQLSERVER_MODIFY_STATUS = 'SQLSERVER_MODIFY_STATUS', // SQLServer 修改故障实例状态
 }
 
 export enum TicketTypes {

dbm-ui/frontend/src/common/importComps.ts

@@ -11,8 +11,8 @@
  * the specific language governing permissions and limitations under the License.
  */
 
-import { Table } from 'bkui-vue';
 import type { App } from 'vue';
+import { VxeTooltip } from 'vxe-pc-ui';
 
 import AuthButton from '@components/auth-component/button.vue';
 import AuthTemplate from '@components/auth-component/component.vue';
@@ -37,8 +37,11 @@ import SkeletonLoading from '@components/skeleton-loading/Index.vue';
 import SmartAction from '@components/smart-action/Index.vue';
 import { ipSelector } from '@components/vue2/ip-selector';
 
+import { Table, TableColumn } from '@blueking/table';
 import UserSelector from '@patch/user-selector/selector.vue';
 
+import('@blueking/table/vue3/vue3.css');
+
 export const setGlobalComps = (app: App<Element>) => {
   app.component('DbCard', DbCard);
   app.component('DbForm', DbForm);
@@ -63,5 +66,14 @@ export const setGlobalComps = (app: App<Element>) => {
   app.component('AuthOption', AuthOption);
   app.component('AuthSwitcher', AuthSwitch);
   app.component('AuthRouterLink', AuthRouterLink);
-  app.component('BKTableColumn', Table.Column);
+  setTimeout(() => {
+    // eslint-disable-next-line
+    delete app._context.components.BkTable;
+    // eslint-disable-next-line
+    delete app._context.components.BkTableColumn;
+
+    app.component('BkTable', Table);
+    app.component('BkTableColumn', TableColumn);
+    app.component('VxeTooltip', VxeTooltip);
+  });
 };