fix(frontend): 周期轮值提单参数问题修复 #9109

TencentBlueKing · Jan 16, 2025 · d2ef8de · d2ef8de
1 parent 5f2c33e
commit d2ef8de
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 84 deletions.
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
@@ -56,7 +56,6 @@
   const tableData = computed(() => {
     if (props.data.category === 'regular') {
       // 自定义轮值
-      // eslint-disable-next-line max-len
       return (isShowAllData.value ? props.data.duty_arranges as DutyCustomItem[] : props.data.duty_arranges.slice(0, 8) as DutyCustomItem[]).map(item => ({
         dateTime: item.date,
         timeRange: item.work_times.map(data => data.replace('--', '~')),
@@ -71,7 +70,7 @@
     if (dutyArranges[0].work_type !== 'daily') {
       // 按周
       dateArr = dateArr.filter((item) => {
-        let weekday = dayjs(item).day();
+        let weekday = dayjs(item).day() as number;
         weekday = weekday === 0 ? 7 : weekday;
         if (dutyArranges[0].work_days.includes(weekday)) {
           return true;
@@ -82,7 +81,7 @@
     return dutyArranges.map((item, index) => ({
       dateTime: dateArr[index],
       timeRange: item.work_times.map(data => data.replace('--', '~')),
-      peoples: item.members,
+      peoples: item.members.slice(0, item.duty_number),
     }));
   });
 

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
@@ -34,10 +34,10 @@
       :label="t('轮值排班')"
       property="tableData"
       required>
-      <DbOriginalTable
-        class="custom-table-box"
+      <BkTable
         :columns="columns"
-        :data="formModel.tableData" />
+        :data="formModel.tableData"
+        :show-overflow="false" />
     </BkFormItem>
   </BkForm>
 </template>
@@ -107,6 +107,7 @@
               <div class="time-item" key={item.id}>
                 <bk-time-picker
                   v-model={item.value}
+                  style="width: 200px"
                   clearable={false}
                   type="timerange"
                   append-to-body />
@@ -127,6 +128,7 @@
     {
       label: t('轮值人员'),
       field: 'members',
+      width: 510,
       render: ({data, index}: {data: RowData, index: number}) =>(
         <MemberSelector
           modelValue={data.members}
@@ -229,77 +231,23 @@
       color: #979ba5;
     }
   }
-
-  .custom-table-box {
-    :deep(td) {
-      background-color: #f5f7fa !important;
-    }
-
-    :deep(.members) {
-      position: relative;
-      display: flex;
-      width: 100%;
-      flex-wrap: wrap;
-
-      &:hover {
-        .operate-box {
-          .operate-icon {
-            display: block !important;
-          }
-        }
-      }
-
-      .people-select {
-        width: 100%;
-
-        .angle-up {
-          display: none !important;
-        }
-      }
-
-      .bk-tag-input {
-        width: 100%;
-      }
-
-      .operate-box {
-        position: absolute;
-        top: 0;
-        right: 0;
-        z-index: 9999;
-        display: flex;
-        height: 100%;
-        padding-right: 12px;
-        align-items: center;
-
-        .operate-icon {
-          display: none !important;
-          font-size: 16px;
-          color: #737987;
-          cursor: pointer;
-        }
-      }
-    }
-
-    :deep(.time-group-mutiple) {
-      padding: 10px 0;
-    }
-
-    :deep(.time-group-box) {
+</style>
+<style lang="less">
+  .time-group-box {
+    display: flex;
+    width: 100%;
+    flex-flow: column wrap;
+    gap: 8px;
+
+    .time-item {
       display: flex;
       width: 100%;
-      flex-flow: column wrap;
-      gap: 8px;
-
-      .time-item {
-        display: flex;
-        width: 100%;
-        align-items: center;
+      align-items: center;
 
-        .icon {
-          font-size: 18px;
-          color: #979ba5;
-          cursor: pointer;
-        }
+      .icon {
+        font-size: 18px;
+        color: #979ba5;
+        cursor: pointer;
       }
     }
   }

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
@@ -98,6 +98,7 @@
         class="time-select">
         <BkTimePicker
           v-model="item.value"
+          append-to-body
           :clearable="false"
           type="timerange" />
         <DbIcon
@@ -117,7 +118,7 @@
     <div class="title">
       {{ t('排班预览') }}
     </div>
-    <DbOriginalTable
+    <BkTable
       class="table-box"
       :columns="columns"
       :data="tableData" />
@@ -256,13 +257,14 @@
     {
       label: t('时段'),
       field: 'timeRange',
-      showOverflowTooltip: true,
+      showOverflow: 'tooltip',
       width: 200,
       render: ({ data }: {data: RowData}) => data.timeRange.join(','),
     },
     {
       label: t('轮值人员'),
       field: 'peoples',
+      width: 528,
       render: ({ data }: {data: RowData}) => <div class="peoples">{data.peoples.map(item => <bk-tag>{item}</bk-tag>)}</div>,
     },
   ];
@@ -410,14 +412,16 @@
       return {
         effective_time: dayjs(dateTimeRange.value![0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
         end_time: dayjs(dateTimeRange.value![1]).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
-        duty_arranges: tableData.value.map(item => ({
-          duty_number: formModel.singleDutyPeoples,
-          duty_day: formModel.sinlgeDutyDays,
-          members: item.peoples,
-          work_type: dateSelect.value.date,
-          work_days: dateSelect.value.date === 'weekly' ? dateSelect.value.weekday.map(num => (num === 0 ? 7 : num)) : [],
-          work_times: dateSelect.value.timeList.map(item => item.value.map(str => splitTimeToMinute(str)).join('--')),
-        })),
+        duty_arranges: [
+          {
+            duty_number: formModel.singleDutyPeoples,
+            duty_day: formModel.sinlgeDutyDays,
+            members: formModel.peopleList,
+            work_type: dateSelect.value.date,
+            work_days: dateSelect.value.date === 'weekly' ? dateSelect.value.weekday.map(num => (num === 0 ? 7 : num)) : [],
+            work_times: dateSelect.value.timeList.map(item => item.value.map(str => splitTimeToMinute(str)).join('--')),
+          }
+        ],
       };
     },
   });
@@ -526,3 +530,8 @@
     }
   }
 </style>
+<style lang="less">
+  .vxe-table--tooltip-wrapper {
+    z-index: 99999 !important;
+  }
+</style>
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
@@ -226,6 +226,7 @@
     await formRef.value.validate();
     const bizConfig = await rotateBizsRef.value!.getValue();
     if (rotateType.value === 'handoff') {
+      // 周期轮值
       const cycleValues = await cycleRef.value.getValue();
       const cycleParams = {
         name: formModel.ruleName,