feat(frontend): 轮值支持排除业务、指定部分业务 TencentBlueKing#8922

jinquantianxia · Jan 9, 2025 · 50fe58b · 50fe58b
1 parent 7f235c4
commit 50fe58b
Show file tree

Hide file tree

Showing 11 changed files with 367 additions and 94 deletions.
diff --git a/dbm-ui/frontend/src/components/db-member-selector/index.vue b/dbm-ui/frontend/src/components/db-member-selector/index.vue
@@ -166,7 +166,7 @@
       display: none;
       width: 20px;
       height: 20px;
-      margin-top: -15px;
+      margin-top: -10px;
       font-size: 12px;
       line-height: 20px;
       color: #979ba5;

diff --git a/dbm-ui/frontend/src/components/render-table/columns/input/index.vue b/dbm-ui/frontend/src/components/render-table/columns/input/index.vue
@@ -22,6 +22,7 @@
       'is-clearable': clearable,
     }">
     <BkInput
+      ref="inputRef"
       class="input-box"
       :disabled="disabled"
       :max="max"
@@ -60,6 +61,7 @@
   import useValidtor, { type Rules } from '../../hooks/useValidtor';
 
   interface Props {
+    autoFocus?: boolean;
     placeholder?: string;
     rules?: Rules;
     disabled?: boolean;
@@ -90,6 +92,7 @@
   }
 
   const props = withDefaults(defineProps<Props>(), {
+    autoFocus: false,
     placeholder: '请输入',
     rules: undefined,
     disabled: false,
@@ -109,6 +112,7 @@
   });
 
   const rootRef = ref<HTMLElement>();
+  const inputRef = ref();
   const isBlur = ref(true);
 
   const isPassword = computed(() => props.type === 'password');
@@ -216,6 +220,12 @@
     window.changeConfirm = true;
   };
 
+  onMounted(() => {
+    if (props.autoFocus) {
+      inputRef.value.focus();
+    }
+  });
+
   defineExpose<Exposes>({
     getValue() {
       return validator(modelValue.value)

diff --git a/dbm-ui/frontend/src/locales/en.json b/dbm-ui/frontend/src/locales/en.json
@@ -1655,5 +1655,6 @@
   "Mongo分片集群": "",
   "sqlserver单节点版": "",
   "sqlserver主从版": "",
+  "排除业务": "",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3889,5 +3889,6 @@
   "1. 群聊添加群机器人: 蓝鲸审批助手": "1. 群聊添加群机器人: 蓝鲸审批助手",
   "2. 手动蓝鲸审批助手，获取会话ID": "2. 手动 {'@'}蓝鲸审批助手，获取会话ID",
   "3. 将获取到的会话ID粘贴到输入框，多个会话ID使用逗号分隔": "3. 将获取到的会话ID粘贴到输入框，多个会话ID使用逗号分隔",
+  "排除业务": "排除业务",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git 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/content/Index.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/content/Index.vue
@@ -156,7 +156,7 @@
     {
       label: t('状态'),
       field: 'status',
-      minWidth: 150,
+      width: 120,
       render: ({ data }: {data: DutyRuleModel}) => {
         const { label, theme } = statusMap[data.status as RuleStatus];
         return <bk-tag theme={theme}>{label}</bk-tag>;
@@ -189,6 +189,7 @@
                 resource={props.activeDbType}>
                 <NumberInput
                   type='number'
+                  autoFocus
                   model-value={level}
                   min={1}
                   max={100}
@@ -241,11 +242,25 @@
         );
       },
     },
+    {
+      label: t('轮值业务'),
+      field: 'status',
+      width: 250,
+      render: ({ data }: {data: DutyRuleModel}) => {
+        if (data.biz_config_display.include) {
+          return data.biz_config_display.include.map((biz) => biz.bk_biz_name).join(' , ')
+        }
+        if (data.biz_config_display.exclude) {
+          return `${t('全部业务')} (${t('排除业务')} : ${data.biz_config_display.exclude.map((biz) => biz.bk_biz_name).join(' , ')}) `
+        }
+        return t('全部业务')
+      },
+    },
     {
       label: t('轮值表'),
       field: 'duty_arranges',
       showOverflowTooltip: false,
-      width: 250,
+      width: 280,
       render: ({ data }: {data: DutyRuleModel}) => {
         let title = '';
         if (data.status in statusMap) {
@@ -331,7 +346,7 @@
       fixed: 'right',
       showOverflowTooltip: false,
       field: '',
-      width: 180,
+      width: 120,
       render: ({ data }: {data: DutyRuleModel}) => (
       <div class="operate-box">
         <auth-button
@@ -402,7 +417,7 @@
         field: 'is_enabled',
       },
     ],
-    checked: ['name', 'status', 'priority', 'duty_arranges', 'effective_time', 'update_at', 'updater', 'is_enabled'],
+    checked: ['name', 'status', 'priority', 'duty_arranges', 'effective_time', 'updater', 'is_enabled'],
   };
 
   const { run: runGetPriorityDistinct } = useRequest(getPriorityDistinct, {

diff --git a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/content/RenderRotateTable.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/content/RenderRotateTable.vue
@@ -90,7 +90,7 @@
     {
       label: t('日期'),
       field: 'dateTime',
-      width: 120,
+      minWidth: 120,
       render: ({ data }: {data: RowData}) => {
         let tag = null;
         const today = dayjs(new Date()).format('YYYY-MM-DD');
@@ -104,7 +104,7 @@
       label: t('时段'),
       field: 'timeRange',
       showOverflowTooltip: true,
-      width: 200,
+      minWidth: 200,
       render: ({ data }: {data: RowData}) => data.timeRange.join(' , '),
     },
     {

diff --git a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/CustomRotate.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/CustomRotate.vue
@@ -12,20 +12,34 @@
 -->
 
 <template>
-  <div class="title-spot custom-item-title mt-24">{{ t('轮值起止时间') }}<span class="required" /></div>
-  <BkDatePicker
-    ref="datePickerRef"
-    v-model="dateTimeRange"
-    append-to-body
-    :clearable="false"
-    style="width: 100%"
-    type="daterange"
-    @change="handleDatetimeRangeChange" />
-  <div class="title-spot custom-item-title mt-24">{{ t('轮值排班') }}<span class="required" /></div>
-  <DbOriginalTable
-    class="custom-table-box"
-    :columns="columns"
-    :data="tableData" />
+  <BkForm
+    ref="formRef"
+    class="mt-24"
+    form-type="vertical"
+    :model="formModel">
+    <BkFormItem
+      :label="t('轮值起止时间')"
+      property="dateTimeRange"
+      required>
+      <BkDatePicker
+        ref="datePickerRef"
+        v-model="formModel.dateTimeRange"
+        append-to-body
+        :clearable="false"
+        style="width: 100%"
+        type="daterange"
+        @change="handleDatetimeRangeChange" />
+    </BkFormItem>
+    <BkFormItem
+      :label="t('轮值排班')"
+      property="tableData"
+      required>
+      <DbOriginalTable
+        class="custom-table-box"
+        :columns="columns"
+        :data="formModel.tableData" />
+    </BkFormItem>
+  </BkForm>
 </template>
 
 <script setup lang="tsx">
@@ -53,23 +67,27 @@
   }
 
   interface Exposes {
-    getValue: () => {
+    getValue: () => Promise<{
       effective_time: string,
       end_time: string,
       duty_arranges:{
         date: string,
         work_times: string[],
         members: string[],
       }[],
-    }
+    }>
   }
 
   const props = defineProps<Props>();
 
   const { t } = useI18n();
 
-  const dateTimeRange = ref<[string, string]>();
-  const tableData = ref<RowData[]>([]);
+  const formRef = ref();
+
+  const formModel = reactive({
+    dateTimeRange: undefined as [string, string] | undefined,
+    tableData: [] as RowData[],
+  });
 
   const columns = [
     {
@@ -127,8 +145,8 @@
     }
 
     if (data && data.category === 'regular') {
-      dateTimeRange.value = [data.effective_time, data.end_time];
-      tableData.value = (data.duty_arranges as DutyCustomItem[]).map(item => ({
+      formModel.dateTimeRange = [data.effective_time, data.end_time];
+      formModel.tableData = (data.duty_arranges as DutyCustomItem[]).map(item => ({
         dateTime: item.date,
         timeRange: item.work_times.map(i => ({
           id: random(),
@@ -137,44 +155,48 @@
         members: item.members,
       }));
     } else {
-      tableData.value = []
+      formModel.tableData = []
     }
   }, {
     immediate: true,
   });
 
 
   const handleDatetimeRangeChange = (value: [string, string]) => {
-    dateTimeRange.value = value;
+    formModel.dateTimeRange = value;
     const dateArr = getDiffDays(value[0], value[1]);
-    tableData.value = dateArr.map(item => ({
+    formModel.tableData = dateArr.map(item => ({
       dateTime: item,
       timeRange: [{
         id: random(),
         value: ['00:00:00', '23:59:59'],
       }],
       members: [],
     }));
+    nextTick(() => {
+      formRef.value.validate('tableData');
+    })
   }
 
   const handelPeopleChange = (value: string[], index: number) => {
-    tableData.value[index].members = value
+    formModel.tableData[index].members = value
   }
 
   const handleAddTime = (index: number) => {
-    tableData.value[index].timeRange.push({
+    formModel.tableData[index].timeRange.push({
       id: random(),
       value: ['00:00:00', '23:59:59'],
     });
   };
 
   const handleDeleteTime = (outerIndex: number, innerIndex: number) => {
-    tableData.value[outerIndex].timeRange.splice(innerIndex, 1);
+    formModel.tableData[outerIndex].timeRange.splice(innerIndex, 1);
   };
 
 
   defineExpose<Exposes>({
-    getValue() {
+    async getValue() {
+      await formRef.value.validate();
       const splitTimeToMinute = (str: string) => {
         const strArr = str.split(':');
         if (strArr.length <= 2) {
@@ -184,9 +206,9 @@
         return strArr.join(':');
       };
       return {
-        effective_time: dayjs(dateTimeRange.value![0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
-        end_time: dayjs(dateTimeRange.value![1]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
-        duty_arranges: tableData.value.map(item => ({
+        effective_time: dayjs(formModel.dateTimeRange![0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+        end_time: dayjs(formModel.dateTimeRange![1]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+        duty_arranges: formModel.tableData.map(item => ({
           date: item.dateTime,
           work_times: item.timeRange.map(data => data.value.map(str => splitTimeToMinute(str)).join('--')),
           members: item.members,

diff --git a/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/CycleRotate.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/edit-rule/CycleRotate.vue
@@ -23,7 +23,9 @@
       property="peopleList"
       required>
       <span class="cycle-title-tip">（{{ t('排班时将会按照人员的顺序进行排班，可拖动 Tag 进行排序') }}）</span>
-      <MemberSelector v-model="formModel.peopleList" />
+      <MemberSelector
+        v-model="formModel.peopleList"
+        @change="handleMemberSelectorChange" />
     </BkFormItem>
     <div class="cycle-duty-box">
       <BkFormItem
@@ -137,10 +139,7 @@
 
   import MemberSelector from '@components/db-member-selector/index.vue';
 
-  import {
-    getDiffDays,
-    random,
-  } from '@utils';
+  import { getDiffDays, random } from '@utils';
 
   interface RowData {
     dateTime: string,
@@ -375,12 +374,15 @@
       dateSelect.value.date = workType;
       let workdays = arranges[0].work_days;
       workdays = workType === 'weekly' ? workdays.map(num => (num === 7 ? 0 : num)) : workdays;
-      dateSelect.value.weekday = workdays;
+      dateSelect.value.weekday = workdays || [];
     }
   }, {
     immediate: true,
   });
 
+  const handleMemberSelectorChange = () => {
+    formRef.value.validate('peopleList');
+  }
 
   const handleAddTime = () => {
     dateSelect.value.timeList.push({
@@ -396,6 +398,7 @@
 
   defineExpose<Exposes>({
     async getValue() {
+      await formRef.value.validate();
       const splitTimeToMinute = (str: string) => {
         const strArr = str.split(':');
         if (strArr.length <= 2) {