feat(frontend): 工具箱支持资源池协议变更_table全局注册、新增ticket-payload组件 #8076

# Reviewed, transaction id: 29559
TencentBlueKing · Jan 17, 2025 · ced3c6e · ced3c6e
1 parent 927deb7
commit ced3c6e
Show file tree

Hide file tree

Showing 50 changed files with 402 additions and 402 deletions.
diff --git a/dbm-ui/frontend/src/common/importComps.ts b/dbm-ui/frontend/src/common/importComps.ts
@@ -30,19 +30,43 @@ import DbStatus from '@components/db-status/index.vue';
 import DbTable from '@components/db-table/index.vue';
 import DbOriginalTable from '@components/db-table/OriginalTable.vue';
 import DbTextarea from '@components/db-textarea/DbTextarea.vue';
+import EditTable, {
+  Block as EditTableBlock,
+  Column as EditTableColumn,
+  DatePicker as EditTableDatePicker,
+  Input as EditTableInput,
+  Row as EditTableRow,
+  Select as EditTableSelect,
+  TagInput as EditTableTagInput,
+  Textarea as EditTableTextarea,
+  TimePicker as EditTableTimePicker,
+} from '@components/editable-table/Index.vue';
 import FunController from '@components/function-controller/FunController.vue';
 import MoreActionExtend from '@components/more-action-extend/Index.vue';
 import ScrollFaker from '@components/scroll-faker/Index.vue';
 import SkeletonLoading from '@components/skeleton-loading/Index.vue';
 import SmartAction from '@components/smart-action/Index.vue';
 import { ipSelector } from '@components/vue2/ip-selector';
 
+import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
+
 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('EditTable', EditTable);
+  app.component('EditTableBlock', EditTableBlock);
+  app.component('EditTableColumn', EditTableColumn);
+  app.component('EditTableDatePicker', EditTableDatePicker);
+  app.component('EditTableInput', EditTableInput);
+  app.component('EditTableRow', EditTableRow);
+  app.component('EditTableSelect', EditTableSelect);
+  app.component('EditTableTagInput', EditTableTagInput);
+  app.component('EditTableTextarea', EditTableTextarea);
+  app.component('EditTableTimePicker', EditTableTimePicker);
+  app.component('OperationColumn', OperationColumn);
   app.component('DbCard', DbCard);
   app.component('DbForm', DbForm);
   app.component('DbFormItem', DbFormItem);

diff --git a/dbm-ui/frontend/src/hooks/useCreateTicket.tsx b/dbm-ui/frontend/src/hooks/useCreateTicket.tsx
@@ -13,11 +13,12 @@ export function useCreateTicket<T>(ticketType: TicketTypes, options?: { onSucces
   const router = useRouter();
   const { t, locale } = useI18n();
 
-  const run = async (formData: { details: T; remark: string; ignore_duplication?: boolean }) => {
+  const run = async (formData: { details: T; remark?: string; ignore_duplication?: boolean }) => {
     const params = {
       ticket_type: ticketType,
       bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
-      ...formData,
+      details: formData.details,
+      remark: formData.remark || '',
     };
     try {
       loading.value = true;

diff --git a/dbm-ui/frontend/src/types/biz-components.d.ts b/dbm-ui/frontend/src/types/biz-components.d.ts
@@ -14,6 +14,18 @@ declare module 'vue' {
     DbStatus: typeof import('@components/db-status/index.vue').default;
     DbTable: typeof import('@blueking/table/typings/BkTable.vue');
     DbTable: typeof import('@blueking/table/typings/BkTableColumn.vue');
+    EditTable: typeof import('@components/editable-table/Index.vue').default;
+    EditTableBlock: typeof import('@components/editable-table/Index.vue').Block;
+    EditTableColumn: typeof import('@components/editable-table/Index.vue').Column;
+    EditTableDatePicker: typeof import('@components/editable-table/Index.vue').DatePicker;
+    EditTableInput: typeof import('@components/editable-table/Index.vue').Input;
+    EditTableRow: typeof import('@components/editable-table/Index.vue').Row;
+    EditTableSelect: typeof import('@components/editable-table/Index.vue').Select;
+    EditTableTagInput: typeof import('@components/editable-table/Index.vue').TagInput;
+    EditTableTextarea: typeof import('@components/editable-table/Index.vue').Textarea;
+    EditTableTimePicker: typeof import('@components/editable-table/Index.vue').TimePicker;
+    OperationColumn: typeof import('@views/db-manage/common/toolbox-field/column/operation-column/Index.vue').default;
+    OperationRow: typeof import('@views/db-manage/common/toolbox-field/row/operation-row/Index.vue').default;
     FunController: typeof import('@components/function-controller/FunController.vue').default;
     MoreActionExtend: typeof import('@components/more-action-extend/Index.vue').default;
     ScrollFaker: typeof import('@components/scroll-faker/Index.vue').default;

diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/hybrid-host-column/Index.vue
@@ -12,13 +12,13 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :field="field"
     :label="label"
     :min-width="minWidth"
     required
     :rule="rules">
-    <Select
+    <EditTableSelect
       v-model="modelValue"
       :list="selectList"
       @change="handleSelectChange">
@@ -29,7 +29,7 @@
         </div>
       </template>
       <template #trigger>
-        <Input
+        <EditTableInput
           v-if="modelValue === HostSelectType.MANUAL"
           v-model="localValue"
           :placeholder="t('请选择主机')">
@@ -43,7 +43,7 @@
               type="host-select"
               @click.stop="handleShowSelector" />
           </template>
-        </Input>
+        </EditTableInput>
         <div
           v-else-if="modelValue === HostSelectType.AUTO"
           class="table-cell">
@@ -55,8 +55,8 @@
           {{ t(placeholder) }}
         </div>
       </template>
-    </Select>
-  </Column>
+    </EditTableSelect>
+  </EditTableColumn>
   <ResourceHostSelector
     v-model:is-show="showSelector"
     v-mode="hostList"
@@ -77,7 +77,6 @@
 
   import { getSpecResourceCount } from '@services/source/dbresourceResource';
 
-  import { Column, Input, Select } from '@components/editable-table/Index.vue';
   import ResourceHostSelector, { type IValue } from '@components/resource-host-selector/Index.vue';
 
   export type HostInfo = IValue;

diff --git a/...i/frontend/src/views/db-manage/common/toolbox-field/column/multiple-host-column/Index.vue b/...i/frontend/src/views/db-manage/common/toolbox-field/column/multiple-host-column/Index.vue
@@ -12,14 +12,14 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="editable ? rules : []"
     :field="field"
     :label="label"
     :loading="loading"
     :min-width="300"
     required>
-    <Input
+    <EditTableInput
       v-if="editable"
       v-model="localValue"
       :placeholder="t('请选择主机')"
@@ -34,8 +34,8 @@
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </Input>
-    <Block
+    </EditTableInput>
+    <EditTableBlock
       v-else
       v-model="localValue"
       :placeholder="t('请选择主机')">
@@ -49,8 +49,8 @@
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </Block>
-  </Column>
+    </EditTableBlock>
+  </EditTableColumn>
   <ResourceHostSelector
     v-model:is-show="showSelector"
     v-mode="modelValue"
@@ -77,7 +77,6 @@
 
   import { ipv4 } from '@common/regex';
 
-  import { Block, Column, Input } from '@components/editable-table/Index.vue';
   import ResourceHostSelector, { type IValue } from '@components/resource-host-selector/Index.vue';
 
   interface Props {

diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/single-host-column/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/column/single-host-column/Index.vue
@@ -12,14 +12,14 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="editable ? rules : []"
     :field="field"
     :label="label"
     :loading="loading"
     :min-width="minWidth"
     required>
-    <Input
+    <EditTableInput
       v-if="editable"
       v-model="modelValue.ip"
       :placeholder="t('请选择主机')"
@@ -31,8 +31,8 @@
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </Input>
-    <Block
+    </EditTableInput>
+    <EditTableBlock
       v-else
       v-model="modelValue.ip"
       :placeholder="t('请选择主机')">
@@ -43,8 +43,8 @@
           type="host-select"
           @click="handleShowSelector" />
       </template>
-    </Block>
-  </Column>
+    </EditTableBlock>
+  </EditTableColumn>
   <ResourceHostSelector
     v-model="selected"
     v-model:is-show="showSelector"
@@ -60,7 +60,6 @@
 
   import { ipv4 } from '@common/regex';
 
-  import { Block, Column, Input } from '@components/editable-table/Index.vue';
   import ResourceHostSelector, { type IValue } from '@components/resource-host-selector/Index.vue';
 
   interface Props {

diff --git a/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue b/dbm-ui/frontend/src/views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue
@@ -0,0 +1,24 @@
+<template>
+  <BkFormItem :label="t('备注')">
+    <BkInput
+      v-model="modelValue.remark"
+      :maxlength="500"
+      :placeholder="t('请提供更多有用信息申请信息_以获得更快审批')"
+      style="width: 700px"
+      type="textarea" />
+  </BkFormItem>
+</template>
+<script lang="ts">
+  export const createTickePayload = () => ({
+    remark: '',
+  });
+</script>
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<ReturnType<typeof createTickePayload>>({
+    required: true,
+  });
+</script>
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_ADD_SLAVE/Create.vue
@@ -21,12 +21,12 @@
       class="mb-20"
       form-type="vertical"
       :model="formData">
-      <EditableTable
+      <EditTable
         ref="table"
         class="mb-20"
         :model="formData.tableData"
         :rules="rules">
-        <EditableTableRow
+        <EditTableRow
           v-for="(item, index) in formData.tableData"
           :key="index">
           <WithRelatedClustersColumn
@@ -40,10 +40,10 @@
           <OperationColumn
             v-model:table-data="formData.tableData"
             :create-row-method="createTableRow" />
-        </EditableTableRow>
-      </EditableTable>
+        </EditTableRow>
+      </EditTable>
       <BackupSource v-model="formData.backupSource" />
-      <TicketRemark v-model="formData.remark" />
+      <TicketPayload v-model="formData.ticketPayload" />
     </BkForm>
     <template #action>
       <BkButton
@@ -77,12 +77,11 @@
 
   import { TicketTypes } from '@common/const';
 
-  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
   import BackupSource from '@views/db-manage/common/toolbox-field/form-item/backup-source/Index.vue';
-  import TicketRemark from '@views/db-manage/common/toolbox-field/form-item/ticket-remark/Index.vue';
+  import TicketPayload, {
+    createTickePayload,
+  } from '@views/db-manage/common/toolbox-field/form-item/ticket-payload/Index.vue';
   import WithRelatedClustersColumn from '@views/db-manage/mysql/common/edit-table-column/WithRelatedClustersColumn.vue';
 
   interface RowData {
@@ -122,7 +121,7 @@
   const defaultData = () => ({
     tableData: [createTableRow()],
     backupSource: BackupSourceType.REMOTE,
-    remark: '',
+    ticketPayload: createTickePayload(),
   });
 
   const formData = reactive(defaultData());
@@ -182,7 +181,7 @@
           new_slave: item.slave,
         })),
       },
-      remark: formData.remark,
+      remark: formData.ticketPayload.remark,
     });
   };
 

diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue b/dbm-ui/frontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterColumn.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <Column
+  <EditTableColumn
     :append-rules="rules"
     field="cluster.cluster_domains"
     fixed="left"
@@ -28,11 +28,11 @@
         <DbIcon type="batch-host-select" />
       </span>
     </template>
-    <Textarea
+    <EditTableTextarea
       v-model="modelValue.cluster_domains"
       :placeholder="t('请输入集群域名_多个集群用分隔符输入')"
       @change="handleInputChange" />
-  </Column>
+  </EditTableColumn>
   <ClusterSelector
     v-model:is-show="showSelector"
     :cluster-types="[ClusterTypes.TENDBHA]"
@@ -53,7 +53,6 @@
   import { batchSplitRegex, domainRegex } from '@common/regex';
 
   import ClusterSelector from '@components/cluster-selector/Index.vue';
-  import { Column, Textarea } from '@components/editable-table/Index.vue';
 
   interface Props {
     selectedIds: number[];

diff --git a/...ontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue b/...ontend/src/views/db-manage/mysql/MYSQL_MIGRATE_CLUSTER/components/ClusterMigrateTable.vue
@@ -12,11 +12,11 @@
 -->
 
 <template>
-  <EditableTable
+  <EditTable
     ref="table"
     class="mb-20"
     :model="tableData">
-    <EditableTableRow
+    <EditTableRow
       v-for="(item, index) in tableData"
       :key="index">
       <ClusterColumn
@@ -34,18 +34,15 @@
       <OperationColumn
         v-model:table-data="tableData"
         :create-row-method="createTableRow" />
-    </EditableTableRow>
-  </EditableTable>
+    </EditTableRow>
+  </EditTable>
 </template>
 <script lang="ts" setup>
   import { useTemplateRef } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import TendbhaModel from '@services/model/mysql/tendbha';
 
-  import EditableTable, { Row as EditableTableRow } from '@components/editable-table/Index.vue';
-
-  import OperationColumn from '@views/db-manage/common/toolbox-field/column/operation-column/Index.vue';
   import SingleHostColumn from '@views/db-manage/common/toolbox-field/column/single-host-column/Index.vue';
 
   import { MigrateTypes } from '../types';