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

# Reviewed, transaction id: 28579
TencentBlueKing · Jan 6, 2025 · 49e10d6 · 49e10d6
1 parent a71fdef
commit 49e10d6
Show file tree

Hide file tree

Showing 35 changed files with 299 additions and 433 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
@@ -14,13 +14,9 @@
         'is-show-prepend': Boolean(slots.prepend),
         'is-show-append': Boolean(slots.append),
       }">
-      <span ref="content">
-        <slot>
-          {{ modelValue }}
-        </slot>
-      </span>
+      <span v-if="modelValue">{{ modelValue }}</span>
       <div
-        v-if="isShowPlacehoder"
+        v-else
         class="bk-editable-text-content-placeholder">
         {{ placeholder }}
       </div>
@@ -33,7 +29,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { nextTick, onUpdated, ref, useTemplateRef, type VNode, watch } from 'vue';
+  import { type VNode, watch } from 'vue';
 
   import useColumn from '../useColumn';
 
@@ -47,18 +43,13 @@
 
   const slots = defineSlots<{
     prepend?: () => VNode;
-    default?: () => VNode;
     append?: () => VNode;
   }>();
 
   const columnContext = useColumn();
 
   const modelValue = defineModel<string>();
 
-  const contentRef = useTemplateRef('content');
-
-  const isShowPlacehoder = ref(true);
-
   watch(modelValue, () => {
     columnContext?.validate('change');
   });
@@ -71,12 +62,6 @@
   const handleFocus = () => {
     columnContext?.focus();
   };
-
-  onUpdated(() => {
-    nextTick(() => {
-      isShowPlacehoder.value = !contentRef.value?.innerText;
-    });
-  });
 </script>
 <style lang="less">
   .bk-editable-text {

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/editable-table/edit/Textarea.vue b/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue
@@ -44,7 +44,6 @@
 
   const slots = defineSlots<{
     prepend?: () => VNode;
-    default?: () => VNode;
     append?: () => VNode;
   }>();
 

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;