From f435c3ff046c8a450a5e1edf4ea9e0d4a65e289e Mon Sep 17 00:00:00 2001
From: Austin <1344583166@qq.com>
Date: Tue, 7 Jan 2025 17:49:33 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/db-member-selector/index.vue   |  2 +-
 .../index/components/content/Index.vue        |  6 +-
 .../components/edit-rule/CustomRotate.vue     | 82 ++++++++++++-------
 .../components/edit-rule/CycleRotate.vue      | 15 ++--
 .../index/components/edit-rule/RotateBizs.vue |  6 +-
 5 files changed, 70 insertions(+), 41 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
index b4fe4867c1..d0188e148d 100644
--- 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/views/duty-rule-manage/index/components/content/Index.vue b/dbm-ui/frontend/src/views/duty-rule-manage/index/components/content/Index.vue
index 06f633e5ca..655674906d 100644
--- 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>;
@@ -245,7 +245,7 @@
       label: t('轮值表'),
       field: 'duty_arranges',
       showOverflowTooltip: false,
-      width: 250,
+      width: 280,
       render: ({ data }: {data: DutyRuleModel}) => {
         let title = '';
         if (data.status in statusMap) {
@@ -331,7 +331,7 @@
       fixed: 'right',
       showOverflowTooltip: false,
       field: '',
-      width: 180,
+      width: 120,
       render: ({ data }: {data: DutyRuleModel}) => (
       <div class="operate-box">
         <auth-button
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
index 6141a31406..b2e2e120cf 100644
--- 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,7 +67,7 @@
   }
 
   interface Exposes {
-    getValue: () => {
+    getValue: () => Promise<{
       effective_time: string,
       end_time: string,
       duty_arranges:{
@@ -61,15 +75,19 @@
         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,7 +155,7 @@
         members: item.members,
       }));
     } else {
-      tableData.value = []
+      formModel.tableData = []
     }
   }, {
     immediate: true,
@@ -145,9 +163,9 @@
 
 
   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(),
@@ -155,26 +173,30 @@
       }],
       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
index d137ba1e6a..1bf7434b0a 100644
--- 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) {
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
index 1e0dbc97e5..c10c245f03 100644
--- 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
@@ -107,8 +107,12 @@
   const errorMessage = ref('');
 
   watch(
-    () => props.data.biz_config,
+    () => props.data?.biz_config,
     (bizConfig) => {
+      if (!bizConfig) {
+        return;
+      }
+
       if (bizConfig.exclude) {
         excludeBizs.value = bizConfig.exclude;
         modelValue.value = 'all';