From 9e286bb6f62d73fe292900a537103c83864ff7d4 Mon Sep 17 00:00:00 2001 From: royalpioneer Date: Thu, 31 Oct 2024 14:02:21 +0800 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E6=B7=BB=E5=8A=A0=E5=85=A8?= =?UTF-8?q?=E5=B1=80=E5=8F=8A=E4=B8=9A=E5=8A=A1=E4=B8=8B=E7=9A=84=E8=B5=84?= =?UTF-8?q?=E6=BA=90=E6=A0=87=E7=AD=BE=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=20#7285=20#=20Reviewed,=20transaction=20id:=2022487?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/review-data-dialog/Index.vue | 160 ------------------ .../services/model/db-resource/ResourceTag.ts | 10 -- dbm-ui/frontend/src/services/source/tag.ts | 19 ++- .../resource-manage/pool/business/Index.vue | 1 - .../pool/components/host-list/Index.vue | 65 ++++--- ...tOperationBtn.vue => HostOperationTip.vue} | 26 +-- .../components/batch-assign/Index.vue | 16 +- .../batch-assign/components/FormPanel.vue | 42 +---- .../batch-assign/components/ListPanel.vue | 57 ++----- .../components/batch-setting/Index.vue | 33 ++-- .../components/import-host/Index.vue | 8 +- .../import-host/components/FormPanel.vue | 60 +++---- .../resource-search-selector/Index.vue | 40 ++--- .../components/review-data-dialog/Index.vue | 4 +- .../components/tag-research/panel/Index.vue | 3 +- .../tag-research/selector/Index.vue | 4 +- .../components/tag-selector/Index.vue | 4 +- .../components/update-assign/Index.vue | 26 ++- .../resource-manage/pool/global/Index.vue | 1 - .../frontend/src/views/tag-manage/Index.vue | 77 ++++----- .../tag-manage/components/AutoFocusInput.vue | 51 ------ .../components/BusinessSelector.vue | 4 +- .../views/tag-manage/components/CreateTag.vue | 11 +- .../tag-manage/components/EditableCell.vue | 38 +++-- 24 files changed, 230 insertions(+), 530 deletions(-) delete mode 100644 dbm-ui/frontend/src/components/review-data-dialog/Index.vue rename dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/components/{HostOperationBtn.vue => HostOperationTip.vue} (86%) delete mode 100644 dbm-ui/frontend/src/views/tag-manage/components/AutoFocusInput.vue diff --git a/dbm-ui/frontend/src/components/review-data-dialog/Index.vue b/dbm-ui/frontend/src/components/review-data-dialog/Index.vue deleted file mode 100644 index ffc6fc8c6c..0000000000 --- a/dbm-ui/frontend/src/components/review-data-dialog/Index.vue +++ /dev/null @@ -1,160 +0,0 @@ - - - - - - - - - diff --git a/dbm-ui/frontend/src/services/model/db-resource/ResourceTag.ts b/dbm-ui/frontend/src/services/model/db-resource/ResourceTag.ts index f026a47813..f461debeeb 100644 --- a/dbm-ui/frontend/src/services/model/db-resource/ResourceTag.ts +++ b/dbm-ui/frontend/src/services/model/db-resource/ResourceTag.ts @@ -15,7 +15,6 @@ import dayjs from 'dayjs'; import { utcDisplayTime } from '@utils'; export default class ResourceTag { - count: number; // 绑定IP数量 create_at: string; // 创建时间 creator: string; // 创建人 id: number; // 标签ID @@ -24,7 +23,6 @@ export default class ResourceTag { value: string; // 标签名 constructor(payload = {} as ResourceTag) { - this.count = payload.count || 0; this.create_at = payload.create_at || ''; this.creator = payload.creator || ''; this.id = payload.id || 0; @@ -44,12 +42,4 @@ export default class ResourceTag { get updatedAtDisplay() { return utcDisplayTime(this.update_at); } - - get isBinded() { - return this.count > 0; - } - - get tag() { - return this.value; - } } diff --git a/dbm-ui/frontend/src/services/source/tag.ts b/dbm-ui/frontend/src/services/source/tag.ts index 9d0b7f58ea..43b391e157 100644 --- a/dbm-ui/frontend/src/services/source/tag.ts +++ b/dbm-ui/frontend/src/services/source/tag.ts @@ -16,7 +16,10 @@ export function listTag(params: { limit?: number; offset?: number; }) { - return http.get>(`${path}`, params); + return http.get>(`${path}`, params).then((res) => ({ + ...res, + results: res.results.map((item: ResourceTagModel) => new ResourceTagModel(item)), + })); } /** @@ -24,10 +27,10 @@ export function listTag(params: { */ export function createTag(params: { bk_biz_id: number; - tags: Array<{ + tags: { key: string; // 固定为 dbresource value: string; - }>; + }[]; }) { return http.post(`${path}batch_create/`, params); } @@ -51,12 +54,12 @@ export function updateTag(params: { bk_biz_id: number; id: number; value: string */ export function validateTag(params: { bk_biz_id: number; - tags: Array<{ + tags: { key: string; value: string; - }>; + }[]; }) { - return http.post>(`${path}verify_duplicated/`, params); + return http.post<{ key: string; value: string }[]>(`${path}verify_duplicated/`, params); } /** @@ -64,12 +67,12 @@ export function validateTag(params: { */ export function getTagRelatedResource(params: { bk_biz_id: number; ids: number[]; resource_type?: string }) { return http.post< - Array<{ + { id: number; related_resources: { resource_type: string; count: number; }[]; - }> + }[] >(`${path}related_resources/`, params); } diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/business/Index.vue b/dbm-ui/frontend/src/views/resource-manage/pool/business/Index.vue index f5f8bd12ea..af3d5b9d48 100644 --- a/dbm-ui/frontend/src/views/resource-manage/pool/business/Index.vue +++ b/dbm-ui/frontend/src/views/resource-manage/pool/business/Index.vue @@ -67,7 +67,6 @@ params: { page: value, }, - query: {}, }); }; diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/Index.vue b/dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/Index.vue index c96b818af3..ab37213adc 100644 --- a/dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/Index.vue +++ b/dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/Index.vue @@ -167,7 +167,7 @@ import BatchMoveToRecyclePool from './components/batch-move-to-recycle-pool/Index.vue'; import BatchSetting from './components/batch-setting/Index.vue'; import BatchUndoImport from './components/batch-undo-import/Index.vue'; - import HostOperationBtn from './components/HostOperationBtn.vue'; + import HostOperationTip from './components/HostOperationTip.vue'; import ImportHost from './components/import-host/Index.vue'; import ImportHostBtn from './components/ImportHostBtn.vue'; import RenderTable from './components/RenderTable.vue'; @@ -212,9 +212,9 @@ const isSelectedSameBiz = ref(false); const isBatchOperationShow = ref(false); - watch(researchTags, (val) => { - if (val.length) { - searchParams.labels = val.map((item) => item.id).join(','); + watch(researchTags, () => { + if (researchTags.value.length) { + searchParams.labels = researchTags.value.map((item) => item.id).join(','); } else { delete searchParams.labels; } @@ -336,39 +336,59 @@ fixed: 'right', render: ({ data }: { data: DbResourceModel }) => ( props.type === ResourcePool.public ? ( - + > + + {t('转入业务资源池')} + + ) : ( <> - - + + {t('移入待回收池')} + + + - + + {t('移入故障池')} + + + + onRefresh={fetchData}> + + {t('撤销导入')} + + ) @@ -377,14 +397,7 @@ ]; watch( - () => props.type, - () => { - fetchData(); - } - ); - - watch( - () => searchValue.value, + searchValue, () => { fetchData(); } diff --git a/dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/components/HostOperationBtn.vue b/dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/components/HostOperationTip.vue similarity index 86% rename from dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/components/HostOperationBtn.vue rename to dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/components/HostOperationTip.vue index 9fda6363d3..24aa75af38 100644 --- a/dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/components/HostOperationBtn.vue +++ b/dbm-ui/frontend/src/views/resource-manage/pool/components/host-list/components/HostOperationTip.vue @@ -17,12 +17,7 @@ trigger="click" width="360" @confirm="handleConfirm"> - - {{ buttonText }} - + diff --git a/dbm-ui/frontend/src/views/tag-manage/Index.vue b/dbm-ui/frontend/src/views/tag-manage/Index.vue index af2e00b657..d5dc4be50e 100644 --- a/dbm-ui/frontend/src/views/tag-manage/Index.vue +++ b/dbm-ui/frontend/src/views/tag-manage/Index.vue @@ -63,12 +63,13 @@ ref="tableRef" class="table-box" :columns="tableColumn" - :data-source="getDataSource" + :data-source="listTag" :disable-select-method="disableSelectMethod" primary-key="tag" remote-sort selectable @clear-search="clearSearchValue" + @request-success="handleRequestSuccess" @selection="handleSelection" /> @@ -85,7 +86,7 @@ import { useI18n } from 'vue-i18n'; import { useRequest } from 'vue-request'; - import ResourceTag from '@services/model/db-resource/ResourceTag'; + import ResourceTagModel from '@services/model/db-resource/ResourceTag'; import { deleteTag, getTagRelatedResource, listTag, updateTag } from '@services/source/tag'; import type { BizItem } from '@services/types'; @@ -97,8 +98,6 @@ import { getSearchSelectorParams, messageSuccess } from '@utils'; - type ResourceTagModel = ServiceReturnType['results'][number]; - const { t } = useI18n(); const { bizIdMap, currentBizInfo } = useGlobalBizs(); const route = useRoute(); @@ -110,6 +109,7 @@ const curBiz = ref(currentBizInfo); const curEditId = ref(-1); const searchValue = ref([]); + const bindIpMap = ref>(new Map()); // 标签ID与当前标签绑定的IP数的映射 const hasSelected = computed(() => selected.value.length > 0); const selectedIds = computed(() => selected.value.map(item => item.id)); @@ -147,7 +147,7 @@ label: t('标签'), field: 'tag', render: ({ data }: { data: ResourceTagModel }) => ( - data.isBinded ? data.tag : + bindIpMap.value.get(data.id) ? data.value : { - if (!data.count) return 0; - const {href} = router.resolve({ + if (bindIpMap.value.get(data.id) === 0) return 0; + const { href } = router.resolve({ name: isBusiness ? 'BizResourcePool' : 'resourcePool', }); - return ( - {data.count} - ) + return ({bindIpMap.value.get(data.id)}) }, }, { @@ -193,18 +191,22 @@ > {{ default: ( - ), content: ( -
-
{t('标签：')}{data.tag}
+ <> +
{t('标签：')}{data.value}
{t('删除操作无法撤回，请谨慎操作！')}
-
+ ) }} @@ -212,6 +214,13 @@ } ]; + const { run: getRelatedResource } = useRequest(getTagRelatedResource, { + manual: true, + onSuccess: (data) => { + bindIpMap.value = new Map(data.map((item) => [item.id, item.related_resources.length])); + } + }); + watch(searchValue, () => { fetchData(); }); @@ -245,7 +254,7 @@
{ - selected.value.map(v => v.tag).join(',') + selected.value.map(v => v.value).join(',') }
@@ -278,8 +287,8 @@ curEditId.value = data.id; } - const handleDelete = async (data: ResourceTagModel) => { - await runDelete({ + const handleDelete = (data: ResourceTagModel) => { + runDelete({ bk_biz_id: curBiz.value?.bk_biz_id as number, ids: [data.id] }); @@ -290,40 +299,24 @@ fetchData(); } - const disableSelectMethod = (data: ResourceTagModel) => data.isBinded ? t('该标签已被绑定 ，不能删除') : false; + const disableSelectMethod = (data: ResourceTagModel) => bindIpMap.value.get(data.id) ? t('该标签已被绑定 ，不能删除') : false; const clearSearchValue = () => { searchValue.value = []; tableRef.value?.fetchData(); }; - const handleCreateSuccess = async () => { - await fetchData(); + const handleCreateSuccess = () => { + fetchData(); messageSuccess(t('创建成功')); }; - const getDataSource = async (params: ServiceParameters) => { - const tagListRes = await listTag(params); - const ids = tagListRes.results.map(item => item.id); - const resourceData = await getTagRelatedResource({ + const handleRequestSuccess = (data: ServiceReturnType) => { + getRelatedResource({ bk_biz_id: curBiz.value?.bk_biz_id as number, - ids, + ids: data.results.map(item => item.id), resource_type: 'resource', }); - const map = new Map(); - resourceData.forEach(item => { - const dbResource = item.related_resources.find(resource => resource.resource_type === 'db_resource'); - if (dbResource) { - map.set(item.id, dbResource.count); - } - }); - return { - ...tagListRes, - results: tagListRes.results.map((item: ResourceTag) => new ResourceTag({ - ...item, - count: map.get(item.id), - })), - } }; onMounted(() => { diff --git a/dbm-ui/frontend/src/views/tag-manage/components/AutoFocusInput.vue b/dbm-ui/frontend/src/views/tag-manage/components/AutoFocusInput.vue deleted file mode 100644 index 27fcf68e35..0000000000 --- a/dbm-ui/frontend/src/views/tag-manage/components/AutoFocusInput.vue +++ /dev/null @@ -1,51 +0,0 @@ - - - - - diff --git a/dbm-ui/frontend/src/views/tag-manage/components/BusinessSelector.vue b/dbm-ui/frontend/src/views/tag-manage/components/BusinessSelector.vue index 5941bb0c2d..5f46660903 100644 --- a/dbm-ui/frontend/src/views/tag-manage/components/BusinessSelector.vue +++ b/dbm-ui/frontend/src/views/tag-manage/components/BusinessSelector.vue @@ -56,9 +56,9 @@ import { cloneDeep } from 'lodash'; import { defineEmits, ref } from 'vue'; - import { useGlobalBizs, useUserProfile } from '@stores'; + import { getProfile, upsertProfile } from '@services/source/profile'; - import { getProfile, upsertProfile } from '@/services/source/profile'; + import { useGlobalBizs, useUserProfile } from '@stores'; interface Emits { (e: 'change', value: number): void; diff --git a/dbm-ui/frontend/src/views/tag-manage/components/CreateTag.vue b/dbm-ui/frontend/src/views/tag-manage/components/CreateTag.vue index cca2ccbb15..1c34f050ca 100644 --- a/dbm-ui/frontend/src/views/tag-manage/components/CreateTag.vue +++ b/dbm-ui/frontend/src/views/tag-manage/components/CreateTag.vue @@ -35,7 +35,7 @@ :label="t('标签')" property="tag"> @@ -74,7 +88,7 @@ .tag-content { display: flex; - align-items: center; // 确保文字和图标垂直居中对齐 + align-items: center; } }