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

# Reviewed, transaction id: 26048
TencentBlueKing · Dec 6, 2024 · f957f9f · f957f9f
1 parent 98d7ac1
commit f957f9f
Show file tree

Hide file tree

Showing 9 changed files with 168 additions and 176 deletions.
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis/backup.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis/backup.ts
@@ -11,7 +11,7 @@ export interface Backup extends DetailBase {
     white_regex: string;
     create_at: string;
     target: string;
-    backup_type: string;
+    backup_type: 'normal_backup' | 'forever_backup';
   }[];
   clusters: DetailClusters;
 }
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/Index.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/Index.vue
@@ -26,10 +26,6 @@
               mode="collapse"
               :title="t('需求信息')">
               <TaskInfo :data="ticketData" />
-              <div class="ticket-details-item">
-                <span class="ticket-details-item-label">{{ t('备注') }}：</span>
-                <span class="ticket-details-item-value">{{ ticketData.remark || '--' }}</span>
-              </div>
             </DbCard>
             <DbCard
               class="ticket-flows"

diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/Index.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/Index.vue
@@ -12,12 +12,16 @@
 -->
 
 <template>
-  <ComFactory
-    class="ticket-details-page"
-    :data="data" />
+  <ComFactory :data="data" />
+  <div class="ticket-details-item">
+    <span class="ticket-details-item-label">{{ t('备注') }}：</span>
+    <span class="ticket-details-item-value">{{ data.remark || '--' }}</span>
+  </div>
 </template>
 
 <script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
   import TicketModel from '@services/model/ticket/ticket';
 
   import ComFactory from './com-factory/Index.vue';
@@ -32,6 +36,8 @@
   defineOptions({
     name: 'TicketTaskInfo',
   });
+
+  const { t } = useI18n();
 </script>
 
 <style lang="less">

diff --git a/...er/common/ticket-detail/components/task-info/com-factory/common/mysql-dump-data/Index.vue b/...er/common/ticket-detail/components/task-info/com-factory/common/mysql-dump-data/Index.vue
@@ -46,7 +46,7 @@
         {
           label: t('目标集群'),
           render: () => (
-            <TextOverflowLayout class="detail-item">
+            <TextOverflowLayout>
               {{
                 default: () => domain,
                 append: () => (
@@ -65,12 +65,10 @@
         {
           label: t('目标 DB'),
           render: () => (
-            <div class="detail-item">
-              <div class="target-dbs">
-                {
-                  databases.map((database) => <bk-tag class="mb-4">{database}</bk-tag>)
-                }
-              </div>
+            <div>
+              {
+                databases.map((database) => <bk-tag class="mb-4">{database}</bk-tag>)
+              }
               <bk-button
                 class="ml-4"
                 theme="primary"
@@ -84,7 +82,7 @@
         {
           label: t('目标表名'),
           render: () => (
-            <TextOverflowLayout class="detail-item">
+            <TextOverflowLayout>
               {{
                 default: () => tables.join(','),
                 append: () => (
@@ -103,7 +101,7 @@
         {
           label: t('忽略表名'),
           render: () => (
-            <TextOverflowLayout class="detail-item">
+            <TextOverflowLayout>
               {{
                 default: () => tableIgnore.join(',') || '--',
                 append: () => (
@@ -126,8 +124,8 @@
           iswhole: true,
           render: () => (
             where ? (
-              <div class="detail-item">
-                <div class="where-box">{where}</div>
+              <div>
+                { where }
                 <bk-button
                   class="ml-4"
                   theme="primary"

diff --git a/...et-center/common/ticket-detail/components/task-info/com-factory/components/DemandInfo.vue b/...et-center/common/ticket-detail/components/task-info/com-factory/components/DemandInfo.vue
@@ -1,36 +1,34 @@
 <template>
-  <div class="demand-info">
-    <div
-      v-for="(dataItem, dataKey) in config"
-      :key="dataKey"
-      class="demand-info-info"
-      :class="{ 'demand-info-info-no-title': !dataItem.title }">
-      <strong
-        v-if="dataItem.title"
-        class="demand-info-info-title">
-        {{ dataItem.title }}
-      </strong>
-      <div class="demand-info-list">
-        <template
-          v-for="(listItem, listKey) in dataItem.list"
-          :key="listKey">
-          <div
-            v-if="!listItem.isHidden && (listItem.key || listItem.render)"
-            class="demand-info-item"
-            :class="{
-              whole: listItem.iswhole,
-              table: listItem.isTable,
-            }">
-            <span class="demand-info-item-label">{{ listItem.label }}：</span>
-            <span class="demand-info-item-value">
-              <Component
-                :is="listItem.render"
-                v-if="listItem.render" />
-              <template v-else>{{ getValue(listItem.key as string) }} </template>
-            </span>
-          </div>
-        </template>
-      </div>
+  <div
+    v-for="(dataItem, dataKey) in config"
+    :key="dataKey"
+    class="demand-info"
+    :class="{ 'demand-info-no-title': !dataItem.title }">
+    <strong
+      v-if="dataItem.title"
+      class="demand-info-title">
+      {{ dataItem.title }}
+    </strong>
+    <div class="demand-info-list">
+      <template
+        v-for="(listItem, listKey) in dataItem.list"
+        :key="listKey">
+        <div
+          v-if="!listItem.isHidden && (listItem.key || listItem.render)"
+          class="demand-info-item"
+          :class="{
+            whole: listItem.iswhole,
+            table: listItem.isTable,
+          }">
+          <span class="demand-info-item-label">{{ listItem.label }}：</span>
+          <span class="demand-info-item-value">
+            <Component
+              :is="listItem.render"
+              v-if="listItem.render" />
+            <template v-else>{{ getValue(listItem.key as string) }} </template>
+          </span>
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -76,16 +74,13 @@
   @import '@styles/mixins.less';
 
   .demand-info {
-    .demand-info-info {
-      padding-left: 82px;
-      font-size: @font-size-mini;
+    font-size: @font-size-mini;
 
-      .demand-info-info-title {
-        color: @title-color;
-      }
+    .demand-info-title {
+      color: @title-color;
     }
 
-    .demand-info-info-no-title {
+    .demand-info-no-title {
       padding-left: 0;
     }
 
@@ -112,6 +107,7 @@
       }
 
       .demand-info-item-value {
+        display: ruby;
         overflow: hidden;
         color: @title-color;
         text-overflow: ellipsis;

diff --git a/...icket-center/common/ticket-detail/components/task-info/com-factory/mysql/HaFullBackup.vue b/...icket-center/common/ticket-detail/components/task-info/com-factory/mysql/HaFullBackup.vue
@@ -11,7 +11,7 @@
  * the specific language governing permissions and limitations under the License.
 -->
 <template>
-  <BkTable :data="ticketDetails.details.infos">
+  <BkTable :data="tableData">
     <BkTableColumn :label="t('目标集群')">
       <template #default="{ data }: { data: RowData }">
         {{ ticketDetails.details.clusters[data.cluster_id].immute_domain }}
@@ -25,14 +25,15 @@
   </BkTable>
   <InfoList>
     <InfoItem :label="t('备份类型:')">
-      {{ backupTypeMap[ticketDetails.details.backup_type] }}
+      {{ backupType }}
     </InfoItem>
     <InfoItem :label="t('备份保存时间:')">
-      {{ fileTagMap[ticketDetails.details.file_tag] }}
+      {{ fileTag }}
     </InfoItem>
   </InfoList>
 </template>
 <script setup lang="ts">
+  import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
   import TicketModel, { type Mysql } from '@services/model/ticket/ticket';
@@ -47,7 +48,13 @@
 
   type RowData = Props['ticketDetails']['details']['infos'][number];
 
-  defineProps<Props>();
+  interface OldInfo {
+    clusters: RowData[];
+    file_tag: Mysql.HaFullBackup['file_tag'];
+    backup_type: Mysql.HaFullBackup['backup_type'];
+  }
+
+  const props = defineProps<Props>();
 
   defineOptions({
     name: TicketTypes.MYSQL_HA_FULL_BACKUP,
@@ -56,17 +63,36 @@
 
   const { t } = useI18n();
 
+  const tableData = ref<RowData[]>([]);
+  const backupType = ref('--');
+  const fileTag = ref('--');
+
   // 备份类型
   const backupTypeMap = {
     logical: t('逻辑备份'),
     physical: t('物理备份'),
   };
 
   // 备份保存时间
-  const fileTagMap: Record<string, string> = {
+  const fileTagMap = {
     DBFILE1M: t('1个月'),
     DBFILE6M: t('6个月'),
     DBFILE1Y: t('1年'),
     DBFILE3Y: t('3年'),
   };
+
+  watchEffect(() => {
+    // 兼容老数据
+    if (_.isObject(props.ticketDetails.details.infos)) {
+      const oldInfo = props.ticketDetails.details.infos as unknown as OldInfo;
+      tableData.value = oldInfo.clusters;
+      backupType.value = backupTypeMap[oldInfo.backup_type];
+      fileTag.value = fileTagMap[oldInfo.file_tag];
+    }
+    if (Array.isArray(props.ticketDetails.details.infos)) {
+      tableData.value = props.ticketDetails.details.infos;
+      backupType.value = backupTypeMap[props.ticketDetails.details.backup_type];
+      fileTag.value = fileTagMap[props.ticketDetails.details.file_tag];
+    }
+  });
 </script>