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

hLinx · Nov 11, 2024 · cd41a75 · cd41a75
1 parent ddac6e1
commit cd41a75
Show file tree

Hide file tree

Showing 42 changed files with 715 additions and 534 deletions.
diff --git a/dbm-ui/frontend/src/components/stretch-layout/StretchLayout.vue b/dbm-ui/frontend/src/components/stretch-layout/StretchLayout.vue
@@ -42,6 +42,22 @@
 <script lang="ts">
   import { type InjectionKey, nextTick, provide, type Ref } from 'vue';
 
+  interface Props {
+    name: string;
+    leftWidth?: number;
+    minLeftWidth?: number;
+  }
+
+  interface Slots {
+    list(): any;
+    default(): any;
+    right(): any;
+  }
+
+  interface Emits {
+    (e: 'change', split: boolean): void;
+  }
+
   export const provideKey: InjectionKey<{
     isOpen: Ref<boolean>;
     isSplited: Ref<boolean>;
@@ -54,23 +70,14 @@
 
   import DragResize from './components/DragResize.vue';
 
-  const props = withDefaults(
-    defineProps<{
-      name: string;
-      leftWidth?: number;
-      minLeftWidth?: number;
-    }>(),
-    {
-      leftWidth: 456,
-      minLeftWidth: 200,
-    },
-  );
+  const props = withDefaults(defineProps<Props>(), {
+    leftWidth: 456,
+    minLeftWidth: 200,
+  });
 
-  defineSlots<{
-    list(): any;
-    default(): any;
-    right(): any;
-  }>();
+  const emits = defineEmits<Emits>();
+
+  defineSlots<Slots>();
 
   const getMaxWidth = () => rootRef.value.getBoundingClientRect().width;
 
@@ -79,6 +86,7 @@
   const isOpen = ref(false);
   const renderLeftWidth = ref(0);
   const isRightHidden = ref(true);
+  // 左右分屏状态
   const isSplited = ref(false);
 
   const calcSplited = () => {
@@ -87,6 +95,7 @@
         isSplited.value = false;
       }
       isSplited.value = renderLeftWidth.value < getMaxWidth();
+      emits('change', isSplited.value);
     });
   };
 

diff --git a/dbm-ui/frontend/src/components/stretch-layout/components/DragResize.vue b/dbm-ui/frontend/src/components/stretch-layout/components/DragResize.vue
@@ -32,11 +32,12 @@
       v-if="showTrigger"
       class="resize-trigger">
       <span
+        v-if="!isRightHidden"
         class="resize-trigger-button resize-trigger-left"
         @click="handleDirection('left')">
         <DbIcon
           v-bk-tooltips="{
-            content: isRightHidden ? t('展开详情') : t('收起列表'),
+            content: t('收起列表'),
             placement: 'left',
           }"
           style="display: inline-block; transform: rotate(180deg)"

diff --git a/.../views/ticket-center/common/StatusTag.vue → ...rc/components/ticket-status-tag/Index.vue b/.../views/ticket-center/common/StatusTag.vue → ...rc/components/ticket-status-tag/Index.vue
@@ -21,31 +21,29 @@
 
   const backgroundcolor = computed(() => {
     const colorMap = {
-      [TicketModel.STATUS_PENDING]: '#FFF1DB',
+      [TicketModel.STATUS_APPROVE]: '#FDEED8',
+      [TicketModel.STATUS_FAILED]: '#EA3636',
+      [TicketModel.STATUS_RESOURCE_REPLENISH]: '#DFF5FD',
       [TicketModel.STATUS_RUNNING]: '#E1ECFF',
       [TicketModel.STATUS_SUCCEEDED]: '#DAF6E5',
-      [TicketModel.STATUS_FAILED]: '#EA3636',
       [TicketModel.STATUS_TERMINATED]: '#FFEBEB',
-      [TicketModel.STATUS_APPROVE]: '#FDEED8',
-      [TicketModel.STATUS_RESOURCE_REPLENISH]: '#DFF5FD',
-      [TicketModel.STATUS_TODO]: '#DAE9FD',
       [TicketModel.STATUS_TIMER]: '#C8E8E6',
+      [TicketModel.STATUS_TODO]: '#DAE9FD',
     };
 
     return colorMap[props.data.status] || '#f0f1f5';
   });
 
   const fontdcolor = computed(() => {
     const colorMap = {
-      [TicketModel.STATUS_PENDING]: '#FE9C00',
+      [TicketModel.STATUS_APPROVE]: '#E38B02',
+      [TicketModel.STATUS_FAILED]: '#FFFFFF',
+      [TicketModel.STATUS_RESOURCE_REPLENISH]: '#2F96A7',
       [TicketModel.STATUS_RUNNING]: '#1768EF',
       [TicketModel.STATUS_SUCCEEDED]: '#299E56',
-      [TicketModel.STATUS_FAILED]: '#FFFFFF',
       [TicketModel.STATUS_TERMINATED]: '#E71818',
-      [TicketModel.STATUS_APPROVE]: '#E38B02',
-      [TicketModel.STATUS_RESOURCE_REPLENISH]: '#2F96A7',
-      [TicketModel.STATUS_TODO]: '#267BCF',
       [TicketModel.STATUS_TIMER]: '#3F726F',
+      [TicketModel.STATUS_TODO]: '#267BCF',
     };
 
     return colorMap[props.data.status] || '#63656e';

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -86,7 +86,7 @@
   "权限": "权限",
   "权限明细": "权限明细",
   "架构版本": "架构版本",
-  "查看详情": "查看详情",
+  "查看详情": "查看详情 >",
   "模块信息": "模块信息",
   "模块名称": "模块名称",
   "模块名称不能为空": "模块名称不能为空",
@@ -1005,6 +1005,7 @@
   "角色": "角色",
   "请输入实例": "请输入实例",
   "请输入IP_Port_如_1_1_1_1_10000_多个可使用换行_空格或_分隔": "请输入 IP:Port，如（127.0.0.1:10000）\n多个可使用换行、空格或；，｜分隔",
+  "请输入IP_如_1_1_1_1_多个可使用换行_空格或_分隔": "请输入 IP，如（127.0.0.1）\n多个可使用换行、空格或；，｜分隔",
   "清空": "清空",
   "解析并添加": "解析并添加",
   "n处IP_Port不存在": "{0} 处 IP:Port 不存在",
@@ -3499,6 +3500,112 @@
   "固定为n台": "固定为 {0} 台",
   "查询端口": "查询端口",
   "主机已被Follower节点使用": "主机已被 Follower 节点使用",
+  "主机已被Observer节点使用": "主机已被 Observer 节点使用",
+  "Follower节点IP": "Follower 节点 IP",
+  "Observer节点IP": "Observer 节点 IP",
+  "9010 和 9020 为服务内部占用端口": "9010 和 9020 为服务内部占用端口",
+  "与http端口互斥": "与 http 端口互斥",
+  "与查询端口互斥": "与查询端口互斥",
+  "至少添加一种节点IP": "至少添加一种节点 IP",
+  "name容量从n台扩容至n台": "{name} 容量从 {hostNumBefore} 台扩容至 {hostNumAfter} 台",
+  "name容量从n台缩容至n台": "{name} 容量从 {hostNumBefore} 台缩容至 {hostNumAfter} 台",
+  "至少缩容一种类型": "至少缩容一种类型",
+  "当前数量": "当前数量",
+  "确认禁用该集群？": "确认禁用该集群？",
+  "确认启用该集群？": "确认启用该集群？",
+  "启用后，将会恢复访问": "启用后，将会恢复访问",
+  "删除后将产生以下影响": "删除后将产生以下影响：",
+  "删除xxx集群": "删除 {0} 集群",
+  "删除xxx实例数据，停止相关进程": "删除 {xxx} 实例数据，停止相关进程",
+  "确认扩容集群？": "确认扩容集群？",
+  "若选择至少需要n台": "若选择至少需要 {0} 台",
+  "若选择至少需要n台，已选m台": "若选择至少需要 {0} 台，已选 {1} 台",
+  "扩容中": "扩容中",
+  "缩容中": "缩容中",
+  "替换中": "替换中",
+  "请保证冷/热节点至少存在一种": "请保证冷/热节点至少存在一种",
+  "Follower节点不支持缩容": "Follower节点不支持缩容",
+  "Follower类型节点若存在至少保留两台": "Follower类型节点若存在至少保留两台",
+  "冷/热 数据节点必选 1 种以上，每个角色至少需要 2 台": "冷/热 数据节点必选 1 种以上，每个角色至少需要 2 台",
+  "未完善": "未完善",
+  "扩容的节点 IP": "扩容的节点 IP",
+  "实例正在重启中，不能勾选": "实例正在重启中，不能勾选",
+  "较目标容量相差n台": "，较目标容量相差 {0} 台",
+  "较目标容量超出n台": "，较目标容量超出 {0} 台",
+  "Observer类型节点若存在至少保留两台": "Observer类型节点若存在至少保留两台",
+  "主从主机": "主从主机",
+  "只读主机": "只读主机",
+  "新主从主机": "新主从主机",
+  "新只读主机": "新只读主机",
+  "请输入n台IP_英文逗号或换行分隔": "请输入 {n} 台IP_英文逗号或换行分隔",
+  "请输入n台IP": "请输入 {n} 台IP",
+  "IP 视角": "IP 视角",
+  "导出结果表": "导出结果表",
+  "复制 IP": "复制 IP",
+  "查询条件": "查询条件",
+  "源客户端 IP": "源客户端 IP",
+  "权限查询": "权限查询",
+  "请选择或输入，支持%": "请选择或输入，支持%",
+  "至多n台_已选n台": "至多 {0} 台，已选 {1} 台",
+  "至多n台": "至多 {n} 台",
+  "无权限的IP共n个": "无权限的 IP 共 {n} 个",
+  "有权限的IP共n个": "有权限的 IP 共 {n} 个",
+  "访问的 DB": "访问的 DB",
+  "匹配中的访问源": "匹配中的访问源",
+  "匹配中的 DB": "匹配中的 DB",
+  "访问 DB": "访问 DB",
+  "请输入DB，支持%": "请输入DB，支持%",
+  "最多输入n个": "最多输入 {n} 个",
+  "请输入，多个英文逗号或换行分隔，最多n个": "请输入，多个英文逗号或换行分隔，最多 {n} 个",
+  "查询的对象": "查询的对象",
+  "匹配的规则": "匹配的规则",
+  "域名不能为空": "域名不能为空",
+  "请选择或直接输入账号，Enter完成输入": "请选择或直接输入账号，Enter完成输入",
+  "Mongo 分片集群": "Mongo 分片集群",
+  "不允许输入系统库和特殊库，如admin、config、local": "不允许输入系统库和特殊库，如admin、config、local",
+  "DB名、表名不允许为空，忽略DB名、忽略表名要么同时为空, 要么同时不为空": "DB名、表名不允许为空，忽略DB名、忽略表名要么同时为空, 要么同时不为空",
+  "支持通配符 *（指代任意长度字符串）": "支持通配符 *（指代任意长度字符串）",
+  "库表名支持数字、字母、中划线、下划线，最大64字符": "库表名支持数字、字母、中划线、下划线，最大64字符",
+  "请输入表名称，支持通配符“*”": "请输入表名称，支持通配符“*”",
+  "请输入DB 名称，支持通配符“*”": "请输入DB 名称，支持通配符“*”",
+  "连接字符串": "连接字符串",
+  "连接字符串（CLB）": "连接字符串（CLB）",
+  "复制xxx": "复制{0}",
+  "是否备份 Oplog": "是否备份 Oplog",
+  "缩容接入层：减加集群的Proxy数量，但集群Proxy数量不能少于2": "缩容接入层：减加集群的Proxy数量，但集群Proxy数量不能少于2",
+  "Mongo 主机": "Mongo 主机",
+  "机器类型": "机器类型",
+  "Proxy数量不足，至少 2 台": "Proxy数量不足，至少 2 台",
+  "忽略DB名、忽略表名要么同时为空, 要么同时不为空": "忽略DB名、忽略表名要么同时为空, 要么同时不为空",
+  "同一个副本集，一次只能替换一个节点": "同一个副本集，一次只能替换一个节点",
+  "同一个分片集群，config一次只能替换一个节点": "同一个分片集群，config一次只能替换一个节点",
+  "config一次只能替换一个节点": "config一次只能替换一个节点",
+  "同一个shard，同时只能替换一个节点": "同一个shard，同时只能替换一个节点",
+  "扩容数量（台）": "扩容数量（台）",
+  "缩容数量（台）": "缩容数量（台）",
+  "ShardSvr 名称": "ShardSvr 名称",
+  "回档至指定时间": "回档至指定时间",
+  "待替换的主机 ": "待替换的主机",
+  "后端存储": "后端存储",
+  "TendisCache后端存储": "TendisCache 后端存储",
+  "TendisSSD后端存储": "TendisSSD 后端存储",
+  "TendisPlus后端存储": "TendisPlus 后端存储",
+  "DataNode节点": "DataNode 节点",
+  "副本集/ShardSvr": "副本集/ShardSvr",
+  "必须要能除尽总分片数": "必须要能除尽总分片数",
+  "变更机器组数": "变更机器组数",
+  "CPU/内存": "CPU/内存",
+  "添加机型": "添加机型",
+  "TendisCache/RedisCluster/Redis主从 后端存储": "TendisCache/RedisCluster/Redis主从 后端存储",
+  "扩容数量（当前n台）": "扩容数量（当前 {0} 台）",
+  "当前容量：nG": "当前容量：{0} G",
+  "扩容后预估：nG": "扩容后预估：{0} G",
+  "缩容后预估：nG": "缩容后预估：{0} G",
+  "存储层（Nodes）": "存储层（Nodes）",
+  "存储层（Nodes）域名": "存储层（Nodes）域名",
+  "请按行输入IP，每行代表一个单元格的值。多个IP用逗号、空格、｜分隔": "请按行输入IP，每行代表一个单元格的值。多个IP用逗号、空格、｜分隔",
+  "无只读主机": "无只读主机",
+  "批量录入：按行录入，快速批量输入多个单元格的值": "批量录入：按行录入，快速批量输入多个单元格的值",
   "MySQL 单节点": "MySQL 单节点",
   "MySQL 主从": "MySQL 主从",
   "定时中": "定时中",
@@ -3544,5 +3651,7 @@
   "单节点规格": "单节点规格",
   "主从规格": "主从规格",
   "等待中": "等待中",
+  "已通过": "已通过",
+  "单据执行确认": "单据执行确认",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/model/ticket/ticket.ts b/dbm-ui/frontend/src/services/model/ticket/ticket.ts
@@ -33,51 +33,36 @@ export type * as Riak from './details/riak';
 export type * as Sqlserver from './details/sqlserver';
 export type * as TendbCluster from './details/tendbCluster';
 
-const STATUS_PENDING = 'PENDING';
 const STATUS_APPROVE = 'APPROVE';
+const STATUS_FAILED = 'FAILED';
 const STATUS_RESOURCE_REPLENISH = 'RESOURCE_REPLENISH';
-const STATUS_TODO = 'TODO';
-const STATUS_TIMER = 'TIMER';
-const STATUS_RUNNING = 'RUNNING';
 const STATUS_SUCCEEDED = 'SUCCEEDED';
-const STATUS_FAILED = 'FAILED';
+const STATUS_RUNNING = 'RUNNING';
 const STATUS_TERMINATED = 'TERMINATED';
+const STATUS_TIMER = 'TIMER';
+const STATUS_TODO = 'TODO';
 
 export default class Ticket<T extends unknown | DetailBase = unknown> {
-  static STATUS_PENDING = STATUS_PENDING;
   static STATUS_APPROVE = STATUS_APPROVE;
+  static STATUS_FAILED = STATUS_FAILED;
   static STATUS_RESOURCE_REPLENISH = STATUS_RESOURCE_REPLENISH;
-  static STATUS_TODO = STATUS_TODO;
-  static STATUS_TIMER = STATUS_TIMER;
-  static STATUS_RUNNING = STATUS_RUNNING;
   static STATUS_SUCCEEDED = STATUS_SUCCEEDED;
-  static STATUS_FAILED = STATUS_FAILED;
+  static STATUS_RUNNING = STATUS_RUNNING;
   static STATUS_TERMINATED = STATUS_TERMINATED;
+  static STATUS_TIMER = STATUS_TIMER;
+  static STATUS_TODO = STATUS_TODO;
 
   static statusTextMap = {
-    [STATUS_PENDING]: t('等待中'),
-    [STATUS_RUNNING]: t('执行中'),
-    [STATUS_SUCCEEDED]: t('已完成'),
-    [STATUS_FAILED]: t('已失败'),
-    [STATUS_TERMINATED]: t('已终止'),
     [STATUS_APPROVE]: t('待审批'),
+    [STATUS_FAILED]: t('已失败'),
     [STATUS_RESOURCE_REPLENISH]: t('待补货'),
-    [STATUS_TODO]: t('待执行'),
+    [STATUS_SUCCEEDED]: t('已完成'),
+    [STATUS_RUNNING]: t('执行中'),
+    [STATUS_TERMINATED]: t('已终止'),
     [STATUS_TIMER]: t('定时中'),
+    [STATUS_TODO]: t('待执行'),
   };
 
-  static themeMap = {
-    [STATUS_PENDING]: 'warning',
-    [STATUS_RUNNING]: 'info',
-    [STATUS_SUCCEEDED]: 'success',
-    [STATUS_FAILED]: 'danger',
-    [STATUS_TERMINATED]: 'danger',
-    [STATUS_APPROVE]: undefined,
-    [STATUS_RESOURCE_REPLENISH]: undefined,
-    [STATUS_TODO]: undefined,
-    [STATUS_TIMER]: undefined,
-  } as const;
-
   bk_biz_id: number;
   bk_biz_name: string;
   cost_time: number;
@@ -123,11 +108,6 @@ export default class Ticket<T extends unknown | DetailBase = unknown> {
     this.related_object = payload.related_object || {};
   }
 
-  // 获取状态对应文案
-  get tagTheme() {
-    return Ticket.themeMap[this.status] as (typeof Ticket.themeMap)[keyof typeof Ticket.themeMap];
-  }
-
   get statusText() {
     return Ticket.statusTextMap[this.status];
   }

diff --git a/dbm-ui/frontend/src/views/quick-search/components/Ticket.vue b/dbm-ui/frontend/src/views/quick-search/components/Ticket.vue
@@ -41,6 +41,7 @@
 
   import EmptyStatus from '@components/empty-status/EmptyStatus.vue';
   import HightLightText from '@components/system-search/components/search-result/render-result/components/HightLightText.vue';
+  import TicketStatusTag from '@components/ticket-status-tag/Index.vue';
 
   interface Props {
     keyword: string,
@@ -117,11 +118,7 @@
       label: t('单据状态'),
       field: 'status',
       sort: true,
-      render: ({ data }: { data: TicketModel }) => (
-        <bk-tag theme={data.tagTheme}>
-          {t(data.statusText)}
-        </bk-tag>
-      ),
+      render: ({ data }: { data: TicketModel }) => <TicketStatusTag data={data} />,
     },
     {
       label: t('业务'),