fix(frontend): 单据前端交互问题 #8656

TencentBlueKing · Dec 18, 2024 · 192b371 · 192b371
1 parent da2defb
commit 192b371
Show file tree

Hide file tree

Showing 43 changed files with 258 additions and 5,710 deletions.
diff --git a/dbm-ui/frontend/src/components/db-table/OriginalTable.vue b/dbm-ui/frontend/src/components/db-table/OriginalTable.vue
@@ -40,12 +40,13 @@
     (e: 'clearSearch'): void;
   }
   interface Props {
-    columns: InstanceType<typeof Table>['$props']['columns'];
+    columns?: InstanceType<typeof Table>['$props']['columns'];
     isAnomalies?: boolean;
     isSearching?: boolean;
   }
 
   const props = withDefaults(defineProps<Props>(), {
+    columns: undefined,
     isAnomalies: false,
     isSearching: false,
   });

diff --git a/dbm-ui/frontend/src/router/index.ts b/dbm-ui/frontend/src/router/index.ts
@@ -36,10 +36,6 @@ import getTicketRoutes from '@views/ticket-center/routes';
 import getTicketCooperationSettingRoutes from '@views/ticket-cooperation-setting/routes';
 import getTicketFlowSettingBizRoutes from '@views/ticket-flow-setting-biz/routes';
 import getTicketFlowSettingGlobalRoutes from '@views/ticket-flow-setting-global/routes';
-// import getTicketManageRoutes from '@views/ticket-manage/routes';
-// import getTicketSelfApplyRoutes from '@views/ticket-self-apply/routes';
-// import getTicketSelfManageRoutes from '@views/ticket-self-manage/routes';
-// import getTicketSelfTodoRoutes from '@views/ticket-self-todo/routes';
 import getVersionFilesRoutes from '@views/version-files/routes';
 import getWhitelistRoutes from '@views/whitelist/routes';
 

diff --git a/dbm-ui/frontend/src/services/source/package.ts b/dbm-ui/frontend/src/services/source/package.ts
@@ -75,13 +75,13 @@ export function updatePackage(params: {
   id: number;
   priority?: number;
   enable?: boolean;
-  name: string;
-  version: string;
-  pkg_type: string;
-  db_type: string;
-  path: string;
-  size: number;
-  md5: string;
+  name?: string;
+  version?: string;
+  pkg_type?: string;
+  db_type?: string;
+  path?: string;
+  size?: number;
+  md5?: string;
   allow_biz_ids?: number[];
   mode?: string;
 }) {

diff --git a/dbm-ui/frontend/src/views/db-configure/components/ParameterTable.vue b/dbm-ui/frontend/src/views/db-configure/components/ParameterTable.vue
@@ -28,8 +28,6 @@
   </DbForm>
 </template>
 <script lang="tsx">
-  import type { Column } from 'bkui-vue/lib/table/props';
-  // import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
 
   import { getLevelConfig } from '@services/source/configs';
@@ -46,9 +44,9 @@
     index: number;
   };
 
-  export default {
+  defineOptions({
     name: 'ParameterTable',
-  };
+  });
 </script>
 
 <script setup lang="tsx">
@@ -101,10 +99,10 @@
   // 配合 controlShow 控制当前行显示隐藏
   const lockTipsList = computed(() => Array.from({ length: props.data.length }, () => false));
 
-  const columns: Column[] = [{
+  const columns = [{
     label: t('参数项'),
     field: 'conf_name',
-    showOverflowTooltip: false,
+    minWidth: 300,
     render: ({ cell, data, index }: TableColumn) => {
       if (data.op_type === 'add') {
         return (

diff --git a/dbm-ui/frontend/src/views/db-configure/components/ReadonlyTable.vue b/dbm-ui/frontend/src/views/db-configure/components/ReadonlyTable.vue
@@ -84,6 +84,7 @@
     {
       label: t('参数项'),
       field: 'conf_name',
+      minWidth: 300,
       render: ({ data }: {data: ParameterConfigItem}) => (
         <>
           <div

diff --git a/dbm-ui/frontend/src/views/db-manage/common/sql-execute/cluster-ids/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/sql-execute/cluster-ids/Index.vue
@@ -91,6 +91,7 @@
     {
       label: t('集群'),
       field: 'master_domain',
+      minWidth: 250,
     },
     {
       label: t('类型'),

diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue
@@ -222,7 +222,6 @@
     },
     {
       label: t('操作'),
-      field: 'action',
       width: 220,
       fixed: 'right',
       render: ({ data }: { data: PartitionModel }) => {

diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue
@@ -230,7 +230,6 @@
     },
     {
       label: t('操作'),
-      field: 'action',
       width: 220,
       fixed: 'right',
       render: ({ data }: { data: PartitionModel }) => {

diff --git a/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-search-select.ts b/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-search-select.ts
@@ -24,7 +24,7 @@ const create = (options = {} as { exclude: string[] }) => {
     const serachList = [
       {
         name: t('单号'),
-        id: 'id',
+        id: 'ids',
       },
       {
         name: t('单据类型'),

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
@@ -107,7 +107,6 @@
       }
 
       .demand-info-item-value {
-        display: ruby;
         overflow: hidden;
         color: @title-color;
         text-overflow: ellipsis;

diff --git a/...ws/ticket-center/common/ticket-detail/components/task-info/com-factory/dumper/Install.vue b/...ws/ticket-center/common/ticket-detail/components/task-info/com-factory/dumper/Install.vue
@@ -12,45 +12,37 @@
 -->
 
 <template>
-  <div
-    class="ticket-details-item"
-    style="align-items: flex-start">
-    <span class="ticket-details-item-label">{{ t('订阅的库表') }}：</span>
-    <span class="ticket-details-item-value">
+  <InfoList>
+    <InfoItem
+      :label="t('订阅的库表：')"
+      style="flex: 0 0 100%">
       <BkTable
-        class="subscribe-table"
         :columns="subscribeColumns"
         :data="subscribeTableData" />
-    </span>
-  </div>
-  <div
-    class="ticket-details-item mt-16"
-    style="align-items: flex-start">
-    <span class="ticket-details-item-label">{{ t('数据源与接收端') }}：</span>
-    <span class="ticket-details-item-value">
+    </InfoItem>
+    <InfoItem
+      :label="t('数据源与接收端：')"
+      style="flex: 0 0 100%">
       <BkTable
-        class="subscribe-table"
         :columns="receiverColumns"
         :data="receiverTableData" />
-    </span>
-  </div>
-
-  <div class="ticket-details-list">
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('订阅名称') }}：</span>
-      <span class="ticket-details-item-value">{{ name }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('Dumper部署位置') }}：</span>
-      <span class="ticket-details-item-value">{{ t('集群Master所在主机') }}</span>
-    </div>
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('数据同步方式') }}：</span>
-      <span class="ticket-details-item-value">
-        {{ addType === 'incr_sync' ? t('增量同步') : t('全量同步') }}
-      </span>
-    </div>
-  </div>
+    </InfoItem>
+    <InfoItem
+      :label="t('订阅名称：')"
+      style="flex: 0 0 100%">
+      {{ name }}
+    </InfoItem>
+    <InfoItem
+      :label="t('Dumper部署位置：')"
+      style="flex: 0 0 100%">
+      {{ t('集群Master所在主机') }}
+    </InfoItem>
+    <InfoItem
+      :label="t('数据同步方式：')"
+      style="flex: 0 0 100%">
+      {{ addType === 'incr_sync' ? t('增量同步') : t('全量同步') }}
+    </InfoItem>
+  </InfoList>
 </template>
 
 <script setup lang="tsx">
@@ -60,6 +52,8 @@
 
   import { TicketTypes } from '@common/const';
 
+  import InfoList, { Item as InfoItem } from '../components/info-list/Index.vue';
+
 
   interface Props {
     ticketDetails: TicketModel<Dumper.Install>
@@ -193,31 +187,3 @@
     };
   });
 </script>
-<style lang="less" scoped>
-  .subscribe-table {
-    :deep(.table-names-box) {
-      display: flex;
-      width: 100%;
-      flex-wrap: wrap;
-      padding-top: 10px;
-      padding-bottom: 2px;
-
-      .name-item {
-        height: 22px;
-        padding: 0 8px;
-        margin-right: 4px;
-        margin-bottom: 8px;
-        line-height: 22px;
-        color: #63656e;
-        background: #f0f1f5;
-        border-radius: 2px;
-      }
-    }
-
-    :deep(th) {
-      .head-text {
-        color: #313238;
-      }
-    }
-  }
-</style>
diff --git a/...er/common/ticket-detail/components/task-info/com-factory/riak/common/ScaleIn&ScaleOut.vue b/...er/common/ticket-detail/components/task-info/com-factory/riak/common/ScaleIn&ScaleOut.vue
@@ -12,47 +12,37 @@
 -->
 
 <template>
-  <BkLoading :loading="loading">
-    <div class="ticket-details-list">
-      <div class="ticket-details-item">
-        <span class="ticket-details-item-label">{{ t('集群') }}：</span>
-        <span class="ticket-details-item-value">{{ rowData?.clusterName || '--' }}</span>
-      </div>
-      <div class="ticket-details-item">
-        <span class="ticket-details-item-label">{{ t('集群ID') }}：</span>
-        <span class="ticket-details-item-value">{{ rowData?.clusterId || '--' }}</span>
-      </div>
+  <BkLoading :loading="isLoading">
+    <InfoList>
+      <InfoItem :label="t('集群：')">
+        {{ rowData?.clusterName || '--' }}
+      </InfoItem>
+      <InfoItem :label="t('集群ID：')">
+        {{ rowData?.clusterId || '--' }}
+      </InfoItem>
       <template v-if="isScaleUp">
-        <div class="ticket-details-item">
-          <span class="ticket-details-item-label">{{ t('服务器选择方式') }}：</span>
-          <span class="ticket-details-item-value">
-            {{ isFromResourcePool ? t('从资源池匹配') : t('手动选择') }}
-          </span>
-        </div>
+        <InfoItem :label="t('服务器选择方式：')">
+          {{ isFromResourcePool ? t('从资源池匹配') : t('手动选择') }}
+        </InfoItem>
         <template v-if="isFromResourcePool">
-          <div class="ticket-details-item">
-            <span class="ticket-details-item-label">{{ t('扩容规格') }}：</span>
-            <span class="ticket-details-item-value">{{ rowData?.specName || '--' }}</span>
-          </div>
-          <div class="ticket-details-item">
-            <span class="ticket-details-item-label">{{ t('扩容数量') }}：</span>
-            <span class="ticket-details-item-value">
-              {{ t('n台', [rowData?.count]) || '--' }}
-            </span>
-          </div>
+          <InfoItem :label="t('扩容规格：')">
+            {{ rowData?.specName || '--' }}
+          </InfoItem>
+          <InfoItem :label="t('扩容数量：')">
+            {{ t('n台', [rowData?.count]) || '--' }}
+          </InfoItem>
         </template>
         <template v-else>
-          <div class="ticket-details-item table">
-            <span class="ticket-details-item-label">{{ t('已选IP') }}：</span>
-            <span class="ticket-details-item-value">
-              <BkTable
-                :columns="tableColumns"
-                :data="ipList" />
-            </span>
-          </div>
+          <InfoItem
+            :label="t('已选IP：')"
+            style="width: 100%">
+            <BkTable
+              :columns="tableColumns"
+              :data="ipList" />
+          </InfoItem>
         </template>
       </template>
-    </div>
+    </InfoList>
   </BkLoading>
 </template>
 
@@ -63,6 +53,8 @@
   import TicketModel, { type Riak } from '@services/model/ticket/ticket';
   import { getResourceSpecList } from '@services/source/dbresourceSpec';
 
+  import InfoList, { Item as InfoItem } from '../../components/info-list/Index.vue';
+
   interface Props {
     ticketDetails: TicketModel<Riak.ScaleIn>
   }
@@ -101,7 +93,7 @@
 
   const ipList = computed(() => props.ticketDetails.details?.nodes?.riak || []);
 
-  const { loading } = useRequest(getResourceSpecList, {
+  const { loading: isLoading } = useRequest(getResourceSpecList, {
     defaultParams: [{
       spec_cluster_type: 'riak',
       offset: 0,

diff --git a/...ticket-center/common/ticket-detail/components/task-info/com-factory/sqlserver/HaApply.vue b/...ticket-center/common/ticket-detail/components/task-info/com-factory/sqlserver/HaApply.vue
@@ -61,7 +61,9 @@
         </template>
       </BkPopover>
     </InfoItem>
-    <InfoItem :label="t('集群设置：')">
+    <InfoItem
+      :label="t('集群设置：')"
+      style="width: 100%">
       <BkTable :data="ticketDetails.details.domains">
         <BkTableColumn
           field="master"

diff --git a/...et-center/common/ticket-detail/components/task-info/com-factory/sqlserver/SingleApply.vue b/...et-center/common/ticket-detail/components/task-info/com-factory/sqlserver/SingleApply.vue
@@ -58,7 +58,9 @@
         </template>
       </BkPopover>
     </InfoItem>
-    <InfoItem :label="t('集群设置：')">
+    <InfoItem
+      :label="t('集群设置：')"
+      style="width: 100%">
       <BkTable :data="ticketDetails.details.domains">
         <BkTableColumn
           field="master"

diff --git a/...ter/common/ticket-detail/components/task-info/com-factory/tendbCluster/MasterFailOver.vue b/...ter/common/ticket-detail/components/task-info/com-factory/tendbCluster/MasterFailOver.vue
@@ -23,9 +23,7 @@
       {{ ticketDetails.details.is_verify_checksum ? t('是') : t('否') }}
     </InfoItem>
   </InfoList>
-  <BkTable
-    :data="ticketDetails.details.infos"
-    show-overflow-tooltip>
+  <BkTable :data="ticketDetails.details.infos">
     <BkTableColumn :label="t('故障主库主机')">
       <template #default="{ data }: { data: RowData }">
         {{ data.switch_tuples[0]?.master?.ip }}