From d4d337b5489e5fb1fe9aad643408e3e21b5f5f39 Mon Sep 17 00:00:00 2001
From: Austin <1344583166@qq.com>
Date: Tue, 7 Jan 2025 15:42:17 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E8=BD=AE=E5=80=BC=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=8E=92=E9=99=A4=E4=B8=9A=E5=8A=A1=E3=80=81=E6=8C=87?=
 =?UTF-8?q?=E5=AE=9A=E9=83=A8=E5=88=86=E4=B8=9A=E5=8A=A1=20#8922=20#=20Rev?=
 =?UTF-8?q?iewed,=20transaction=20id:=2028647?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/services/model/monitor/duty-rule.ts   |  20 +-
 .../index/components/edit-rule/Index.vue      |  61 +----
 .../index/components/edit-rule/RotateBizs.vue | 239 ++++++++++++++++++
 3 files changed, 269 insertions(+), 51 deletions(-)
 create mode 100644 dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/RotateBizs.vue

diff --git a/dbm-ui/frontend/src/services/model/monitor/duty-rule.ts b/dbm-ui/frontend/src/services/model/monitor/duty-rule.ts
index 2379865017..16d12ed2d4 100644
--- a/dbm-ui/frontend/src/services/model/monitor/duty-rule.ts
+++ b/dbm-ui/frontend/src/services/model/monitor/duty-rule.ts
@@ -30,6 +30,20 @@ export interface DutyCustomItem {
 }
 
 export default class DutyRule {
+  biz_config: {
+    exclude?: number[];
+    include?: number[];
+  };
+  biz_config_display: {
+    exclude?: {
+      bk_biz_id: number;
+      bk_biz_name: string;
+    };
+    include?: {
+      bk_biz_id: number;
+      bk_biz_name: string;
+    };
+  };
   category: string;
   creator: string;
   create_at: string;
@@ -52,16 +66,18 @@ export default class DutyRule {
   update_at: string;
 
   constructor(payload = {} as DutyRule) {
-    this.id = payload.id;
+    this.biz_config = payload.biz_config;
+    this.biz_config_display = payload.biz_config_display;
     this.creator = payload.creator;
     this.create_at = payload.create_at;
     this.category = payload.category;
     this.db_type = payload.db_type;
     this.duty_arranges = payload.duty_arranges;
     this.effective_time = payload.effective_time;
+    this.end_time = payload.end_time;
+    this.id = payload.id;
     this.is_enabled = payload.is_enabled;
     this.is_show_edit = false;
-    this.end_time = payload.end_time;
     this.name = payload.name;
     this.permission = payload.permission;
     this.priority = payload.priority;
diff --git a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/Index.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/Index.vue
index a8ad21db66..5280d0d6cd 100644
--- a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/Index.vue
+++ b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/Index.vue
@@ -55,15 +55,9 @@
         </BkRadioButton>
       </BkRadioGroup>
       <div class="title-spot item-title mt-24">{{ t('轮值业务') }}<span class="required" /></div>
-      <BkRadioGroup
-        v-model="bizType"
-        class="rotate-biz">
-        <div class="biz-box">
-          <BkRadio :label="0">
-            {{ t('全部业务') }}
-          </BkRadio>
-        </div>
-      </BkRadioGroup>
+      <RotateBizs
+        ref="rotateBizsRef"
+        :data="data" />
       <KeepAlive>
         <CycleRotate
           v-if="rotateType === 'handoff'"
@@ -105,6 +99,7 @@
 
   import CustomRotate from './CustomRotate.vue';
   import CycleRotate from './CycleRotate.vue';
+  import RotateBizs from './RotateBizs.vue';
 
   interface Props {
     dbType: string;
@@ -130,10 +125,10 @@
 
   const nameTip = ref('');
   const rotateType = ref('handoff');
-  const bizType = ref(0);
   const customRef = ref();
   const cycleRef = ref();
   const formRef = ref();
+  const rotateBizsRef = ref<InstanceType<typeof RotateBizs>>();
   const formModel = reactive({
     ruleName: '',
   });
@@ -229,6 +224,7 @@
   // 点击确定
   const handleConfirm = async () => {
     await formRef.value.validate();
+    const bizConfig = await rotateBizsRef.value!.getValue();
     if (rotateType.value === 'handoff') {
       const cycleValues = await cycleRef.value.getValue();
       const cycleParams = {
@@ -239,16 +235,17 @@
         effective_time: cycleValues.effective_time,
         end_time: cycleValues.end_time,
         duty_arranges: cycleValues.duty_arranges,
+        ...bizConfig,
       };
       if (isCreate.value) {
         // 新建/克隆
-        await runCreateDutyRule(cycleParams);
+        runCreateDutyRule(cycleParams);
       } else {
         // 克隆或者编辑
         if (props.data) {
           cycleParams.effective_time = cycleValues.effective_time;
           cycleParams.end_time = cycleValues.end_time;
-          await runUpdateDutyRule(props.data.id, cycleParams);
+          runUpdateDutyRule(props.data.id, cycleParams);
         }
       }
     } else {
@@ -262,14 +259,15 @@
         effective_time: customValues.effective_time,
         end_time: customValues.end_time,
         duty_arranges: customValues.duty_arranges,
+        ...bizConfig,
       };
       if (isCreate.value) {
         // 新建/克隆
-        await runCreateDutyRule(customParams);
+        runCreateDutyRule(customParams);
       } else {
         // 克隆或者编辑
         if (props.data) {
-          await runUpdateDutyRule(props.data.id, customParams);
+          runUpdateDutyRule(props.data.id, customParams);
         }
       }
     }
@@ -312,40 +310,5 @@
       font-size: 12px;
       color: #ea3636;
     }
-
-    .rotate-biz {
-      width: 100%;
-      flex-direction: column;
-      gap: 12px;
-
-      .biz-box {
-        display: flex;
-        width: 100%;
-        height: 54px;
-        padding-left: 17px;
-        background: #f5f7fa;
-        border-radius: 2px;
-        align-items: center;
-
-        .biz-box-control {
-          display: flex;
-          width: 100%;
-          margin-left: 36px;
-          align-items: center;
-
-          .biz-select {
-            width: 710px;
-          }
-
-          .biz-box-append {
-            display: flex;
-            font-size: 12px;
-            color: #3a84ff;
-            align-items: center;
-            cursor: pointer;
-          }
-        }
-      }
-    }
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/RotateBizs.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/RotateBizs.vue
new file mode 100644
index 0000000000..1e0dbc97e5
--- /dev/null
+++ b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/RotateBizs.vue
@@ -0,0 +1,239 @@
+<template>
+  <BkRadioGroup
+    v-model="modelValue"
+    class="rotate-bizs-main"
+    @change="handleBizChange">
+    <div class="biz-box">
+      <BkRadio label="all">
+        {{ t('全部业务') }}
+      </BkRadio>
+      <template v-if="modelValue === 'all'">
+        <BkButton
+          v-if="!showExcludeBizs"
+          class="ml-40"
+          text
+          theme="primary"
+          @click="handleAppendExcludeBizs">
+          <DbIcon type="add" />
+          <span class="ml-3">{{ t('追加排除业务') }}</span>
+        </BkButton>
+        <div
+          v-else
+          class="exclude-bizs-main">
+          <BkSelect
+            v-model="excludeBizs"
+            class="exclude-biz-list"
+            collapse-tags
+            display-key="name"
+            enable-virtual-render
+            filterable
+            id-key="bk_biz_id"
+            :list="bizs"
+            multiple
+            multiple-mode="tag" />
+          <div
+            class="clear-exclude-icon"
+            @click="handleClearSelectedExcludes">
+            <DbIcon
+              v-bk-tooltips="t('删除排除项')"
+              type="delete" />
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="biz-box">
+      <BkRadio label="partial">
+        {{ t('部分业务') }}
+      </BkRadio>
+      <div
+        class="include-biz-list"
+        :class="{ 'is-error': !!errorMessage }">
+        <BkSelect
+          v-if="modelValue === 'partial'"
+          v-model="includeBizs"
+          collapse-tags
+          display-key="name"
+          enable-virtual-render
+          filterable
+          id-key="bk_biz_id"
+          :list="bizs"
+          multiple
+          multiple-mode="tag"
+          @change="handleIncludeBizsChange" />
+        <div
+          v-if="errorMessage"
+          class="input-error">
+          <DbIcon
+            v-bk-tooltips="errorMessage"
+            type="exclamation-fill" />
+        </div>
+      </div>
+    </div>
+  </BkRadioGroup>
+</template>
+<script setup lang="tsx">
+  import BkButton from 'bkui-vue/lib/button';
+  import { useI18n } from 'vue-i18n';
+
+  import { useGlobalBizs } from '@stores';
+
+  interface BizConfig {
+    biz_config: {
+      exclude?: number[];
+      include?: number[];
+    };
+  }
+
+  interface Props {
+    data: BizConfig;
+  }
+
+  interface Exposes {
+    getValue: () => Promise<BizConfig>;
+  }
+
+  const props = defineProps<Props>();
+
+  const modelValue = defineModel<string>({
+    default: 'all',
+  });
+
+  const { t } = useI18n();
+  const { bizs } = useGlobalBizs();
+
+  const showExcludeBizs = ref(false);
+  const excludeBizs = ref<number[]>([]);
+  const includeBizs = ref<number[]>([]);
+  const errorMessage = ref('');
+
+  watch(
+    () => props.data.biz_config,
+    (bizConfig) => {
+      if (bizConfig.exclude) {
+        excludeBizs.value = bizConfig.exclude;
+        modelValue.value = 'all';
+        showExcludeBizs.value = true;
+      }
+      if (bizConfig.include) {
+        includeBizs.value = bizConfig.include;
+        modelValue.value = 'partial';
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  const handleIncludeBizsChange = (list: number[]) => {
+    if (list.length) {
+      errorMessage.value = '';
+    }
+  };
+
+  const handleAppendExcludeBizs = () => {
+    showExcludeBizs.value = true;
+  };
+
+  const handleClearSelectedExcludes = () => {
+    excludeBizs.value = [];
+    showExcludeBizs.value = false;
+  };
+
+  const handleBizChange = () => {
+    handleClearSelectedExcludes();
+    includeBizs.value = [];
+  };
+
+  defineExpose<Exposes>({
+    getValue() {
+      const bizConfig = {};
+      if (modelValue.value === 'all' && excludeBizs.value.length) {
+        Object.assign(bizConfig, {
+          exclude: excludeBizs.value,
+        });
+      }
+      if (modelValue.value === 'partial') {
+        if (!includeBizs.value.length) {
+          errorMessage.value = t('不能为空');
+          return Promise.reject();
+        }
+        Object.assign(bizConfig, {
+          include: includeBizs.value,
+        });
+      }
+      return Promise.resolve({
+        biz_config: bizConfig,
+      });
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .rotate-bizs-main {
+    width: 100%;
+    flex-direction: column;
+    gap: 12px;
+
+    .biz-box {
+      display: flex;
+      width: 100%;
+      height: 54px;
+      padding-left: 17px;
+      font-size: 12px;
+      background: #f5f7fa;
+      border-radius: 2px;
+      align-items: center;
+
+      :deep(.bk-radio-label) {
+        font-size: 12px;
+      }
+
+      .exclude-bizs-main {
+        flex: 1;
+        display: flex;
+        margin-left: 36px;
+        align-items: center;
+
+        .exclude-biz-list {
+          flex: 1;
+        }
+
+        .clear-exclude-icon {
+          padding: 0 15px 0 12px;
+          font-size: 14px;
+          color: #979ba5;
+          cursor: pointer;
+        }
+      }
+
+      .include-biz-list {
+        position: relative;
+        margin-right: 40px;
+        margin-left: 36px;
+        flex: 1;
+
+        &.is-error {
+          :deep(.bk-select-tag) {
+            background-color: #fff0f1 !important;
+
+            .angle-down {
+              display: none !important;
+            }
+          }
+
+          .input-error {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            padding-right: 10px;
+            font-size: 14px;
+            color: #ea3636;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+</style>