feat(frontend): 工具箱支持资源池协议变更_验收问题处理 TencentBlueKing#8076

# Reviewed, transaction id: 28599
JustaCattt · Jan 7, 2025 · 83beb58 · 83beb58
1 parent a71fdef
commit 83beb58
Show file tree

Hide file tree

Showing 34 changed files with 296 additions and 415 deletions.
diff --git a/dbm-ui/frontend/src/components/editable-table/Index.vue b/dbm-ui/frontend/src/components/editable-table/Index.vue
@@ -67,7 +67,6 @@
   import Input from './edit/Input.vue';
   import Select from './edit/Select.vue';
   import TagInput from './edit/TagInput.vue';
-  import Text from './edit/Text.vue';
   import Textarea from './edit/Textarea.vue';
   import TimePicker from './edit/TimePicker.vue';
   import useResize from './hooks/use-resize';
@@ -113,7 +112,7 @@
     } & Expose
   > = Symbol.for('bk-editable-table');
 
-  export { Block, Column, DatePicker, Input, Row, Select, TagInput, Text, Textarea, TimePicker, useColumn, useTable };
+  export { Block, Column, DatePicker, Input, Row, Select, TagInput, Textarea, TimePicker, useColumn, useTable };
 </script>
 <script setup lang="ts">
   const props = defineProps<Props>();

diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Block.vue b/dbm-ui/frontend/src/components/editable-table/edit/Block.vue
@@ -56,7 +56,6 @@
   const modelValue = defineModel<string>();
 
   const contentRef = useTemplateRef('content');
-
   const isShowPlacehoder = ref(true);
 
   watch(modelValue, () => {

diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Text.vue b/dbm-ui/frontend/src/components/editable-table/edit/Text.vue
diff --git a/dbm-ui/frontend/src/components/resource-host-selector/Index.vue b/dbm-ui/frontend/src/components/resource-host-selector/Index.vue
@@ -23,12 +23,11 @@
             :width="60">
             <template #default="{ data }">
               <BkCheckbox
-                v-if="multiple"
-                label
-                :model-value="Boolean(rowSelectMemo[data.bk_host_id])"
-                @change="() => handleSelectChange(data)" />
-              <BkRadio
-                v-else
+                v-bk-tooltips="{
+                  content: t('已选够n台', { n: needNum }),
+                  disabled: selectedNum < needNum,
+                }"
+                :disabled="selectedNum === needNum && !Boolean(rowSelectMemo[data.bk_host_id])"
                 label
                 :model-value="Boolean(rowSelectMemo[data.bk_host_id])"
                 @change="() => handleSelectChange(data)" />
@@ -51,16 +50,14 @@
               <HostAgentStatus :data="data.agent_status" />
             </template>
           </BkTableColumn>
-          <!-- <BkTableColumn
+          <BkTableColumn
             field="bk_cpu"
             :label="t('资源归属')"
             :min-width="300">
             <template #default="{ data }">
-              <ResourceHostOwner
-                v-if="false"
-                :data="data" />
+              <ResourceHostOwner :data="data" />
             </template>
-          </BkTableColumn> -->
+          </BkTableColumn>
           <BkTableColumn
             field="rack_id"
             :label="t('机架')"
@@ -137,7 +134,20 @@
       </div>
     </div>
     <template #footer>
+      <I18nT
+        class="mr-20"
+        keypath="需n台_已选n台"
+        style="font-size: 14px; color: #63656e"
+        tag="span">
+        <span style="font-weight: bold; color: #2dcb56"> {{ needNum }} </span>
+        <span style="font-weight: bold; color: #3a84ff"> {{ selectedNum }} </span>
+      </I18nT>
       <BkButton
+        v-bk-tooltips="{
+          content: t('还差n台_请先勾选足够的IP', { n: needNum - selectedNum }),
+          disabled: selectedNum === needNum,
+        }"
+        :disabled="selectedNum !== needNum"
         theme="primary"
         @click="handleSubmit">
         {{ t('确定') }}
@@ -159,8 +169,8 @@
 
   import DiskPopInfo from '@components/disk-pop-info/DiskPopInfo.vue';
   import HostAgentStatus from '@components/host-agent-status/Index.vue';
+  import ResourceHostOwner from '@components/resource-host-owner/Index.vue';
 
-  // import ResourceHostOwner from '@components/resource-host-owner/Index.vue';
   import PanelTab from './components/PanelTab.vue';
   import useSearchSelectData from './hooks/use-search-select-data';
 
@@ -172,7 +182,7 @@
   }
 
   interface Props {
-    multiple?: boolean;
+    needNum: number;
     params?: {
       for_biz?: number;
       bk_cloud_ids?: string;
@@ -186,7 +196,6 @@
   }
 
   const props = withDefaults(defineProps<Props>(), {
-    multiple: true,
     params: () => ({}),
   });
 
@@ -209,6 +218,8 @@
   const currentPanelTab = ref('host');
   const rowSelectMemo = shallowRef<Record<number, DbResourceModel>>({});
 
+  const selectedNum = computed(() => Object.keys(rowSelectMemo.value).length);
+
   const dataSource = (params: ServiceParameters<typeof fetchList>) =>
     fetchList({
       ...params,
@@ -234,18 +245,12 @@
 
   const handleSelectChange = (data: DbResourceModel) => {
     const latestSelectMemo = { ...rowSelectMemo.value };
-    if (props.multiple) {
-      if (latestSelectMemo[data.bk_host_id]) {
-        delete latestSelectMemo[data.bk_host_id];
-      } else {
-        latestSelectMemo[data.bk_host_id] = data;
-      }
-      rowSelectMemo.value = latestSelectMemo;
+    if (latestSelectMemo[data.bk_host_id]) {
+      delete latestSelectMemo[data.bk_host_id];
     } else {
-      rowSelectMemo.value = {
-        [data.bk_host_id]: data,
-      };
+      latestSelectMemo[data.bk_host_id] = data;
     }
+    rowSelectMemo.value = latestSelectMemo;
   };
 
   const handleSubmit = () => {
@@ -256,9 +261,7 @@
       bk_host_id: item.bk_host_id,
       ip: item.ip,
     }));
-
     modelValue.value = latestValue;
-
     emits('change', latestValue);
   };
 

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -4020,6 +4020,8 @@
   "目标Master主机": "目标 Master 主机",
   "请输入集群域名_多个集群用分隔符输入": "请输入集群域名，多个集群用分隔符输入",
   "单据创建成功": "单据创建成功",
+  "从资源池选择": "从资源池选择",
+  "还差n台_请先勾选足够的IP": "还差 {n} 台，请先勾选足够的 IP",
+  "已选够n台": "已选够 {n} 台",
   "这行勿动！新增翻译请在上一行添加！": ""
-
 }
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
@@ -38,6 +38,7 @@
           </template>
           <template #append>
             <DbIcon
+              v-bk-tooltips="t('从资源池选择')"
               class="select-icon"
               type="host-select"
               @click.stop="handleShowSelector" />
@@ -59,6 +60,7 @@
   <ResourceHostSelector
     v-model:is-show="showSelector"
     v-mode="hostList"
+    :need-num="needNum"
     :params="params"
     @change="handleSelectorChange" />
 </template>
@@ -83,6 +85,7 @@
   interface Props {
     field: string; // 绑选项值的vmodel，不绑主机列表
     label: string;
+    needNum: number;
     minWidth?: number;
     placeholder?: string;
     bkCloudId?: number;

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
@@ -29,6 +29,7 @@
       </template>
       <template #append>
         <DbIcon
+          v-bk-tooltips="t('从资源池选择')"
           class="select-icon"
           type="host-select"
           @click="handleShowSelector" />
@@ -43,6 +44,7 @@
       </template>
       <template #append>
         <DbIcon
+          v-bk-tooltips="t('从资源池选择')"
           class="select-icon"
           type="host-select"
           @click="handleShowSelector" />
@@ -52,6 +54,7 @@
   <ResourceHostSelector
     v-model:is-show="showSelector"
     v-mode="modelValue"
+    :need-num="needNum"
     :params="params"
     @change="handleSelectorChange" />
   <div style="display: none">
@@ -83,6 +86,7 @@
      */
     field: string;
     label: string;
+    needNum: number;
     editable?: boolean;
     params?: {
       for_biz?: number;
@@ -201,6 +205,7 @@
   const handleInputChange = (value: string) => {
     if (value) {
       queryHost({
+        bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
         search_content: value,
         limit: -1,
         offset: 0,