feat: 联调Report Schedule页面接口

src/api/module/report.ts

@@ -181,7 +181,7 @@ export const saveManageFieldsList = (params: any, config: any) => {
     `${baseUrl}`,
     {
       action: 'shipment_status_report',
-      operate: 'manage_fileds',
+      operate: 'manage_fileds_save',
       ...params
     },
     config

src/styles/Antdui.scss

@@ -167,9 +167,7 @@ tr
 .ant-picker .ant-picker-input > input::placeholder {
   color: var(--color-neutral-1);
 }
-.ant-picker-dropdown .ant-picker-cell .ant-picker-cell-inner {
-  color: var(--color-neutral-1);
-}
+
 .ant-picker-dropdown .ant-picker-header {
   border-bottom: 1px solid var(--border-color-2);
 }
@@ -200,6 +198,16 @@ tr
   height: 32px !important;
   border-radius: 6px !important;
 }
+:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown  div.ant-picker-cell-inner{
+  color: var(--color-el-date-prev);
+}
+
+:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown .ant-picker-cell-in-view .ant-picker-cell-inner{
+  color: var(--color-neutral-1);
+}
+// :not(.ant-picker-cell-in-view).ant-picker-dropdown .ant-picker-cell .ant-picker-cell-inner {
+//   color: var(--color-el-date-prev);
+// }
 .ant-checkbox-checked .ant-checkbox-inner {
   background-color: var(--color-theme) !important;
   border-color: var(--color-theme) !important;

src/styles/elementui.scss

@@ -580,6 +580,9 @@ div .el-badge__content--warning {
 div .el-badge {
   margin: 8px 0 0 8px;
 }
+.el-date-table td.next-month .el-date-table-cell__text, .el-date-table td.prev-month .el-date-table-cell__text{
+  color: var(--color-el-date-prev);
+}
 
 .el-date-table td.current:not(.disabled) span.el-date-table-cell__text {
   background-color: var(--color-theme);

src/styles/theme.scss

@@ -360,6 +360,8 @@
   --color-schedule-details-bg: #F5F7FA;
   
   --color-attchment-summary-bg: #f9fafb;
+
+  --color-el-date-prev: #bfc1c3;
 }
 
 :root.dark {
@@ -589,5 +591,7 @@
   --color-json-item-hover: #3e5966;
 
   --color-attchment-summary-bg: #2b2f36;
+
+  --color-el-date-prev: #737980;
 }
   

src/views/Report/src/components/ReportSchedule/src/ReportSchedule.vue

@@ -7,17 +7,11 @@ import { useRoute } from 'vue-router'
 
 const route = useRoute()
 const serialNo = route.query.id as string
-const isSaveDisabled = computed(() => {
-  return true
-})
 
 const fieldsTableRef = ref()
 
 const customStartDate = ref('')
 const customEndDate = ref('')
-const rollingStartDate = ref('')
-const rollingEndDate = ref('')
-const dataTimeField = ref('')
 
 const pageData: any = ref({
   validityPeriod: {
@@ -55,10 +49,6 @@ const handleSubmitValidity = (data: any) => {
   console.log(data)
 }
 
-const handleSave = () => {
-  $api.saveReportScheduleData({}).then((res: any) => {})
-}
-
 const changeTimeRange = (data: any) => {
   console.log(data, 'value')
   const queryData = {
@@ -67,15 +57,46 @@ const changeTimeRange = (data: any) => {
     fieldType: data.fieldType,
     type: data.type
   }
-  if (data.type && (data.startDate || data.endDate)) {
+  if (data.type && (data.startDate || data.endDate) && data.fieldType) {
     fieldsTableRef.value.handleSearch(queryData)
   }
 }
+
+const validityPeriodRef = ref()
+const timeRangeRef = ref()
+const emailConfigurationRef = ref()
+
+const handleSave = () => {
+  const validityPeriod = validityPeriodRef.value.getData()
+  const timeRange = timeRangeRef.value.getData()
+  const emailConfiguration = emailConfigurationRef.value.getData()
+  // 如果有一个返回false, 则代表有未填选项 结束保存
+  if (!validityPeriod || !timeRange || !emailConfiguration) return
+  const queryData = {
+    validityPeriodType: validityPeriod.type,
+    validityPeriodStartDate: validityPeriod.startDate,
+    validityPeriodEndDate: validityPeriod.endDate,
+    type: timeRange.type,
+    fieldType: timeRange.fieldType,
+    startDate: timeRange.startValue,
+    endDate: timeRange.endValue,
+    emailRecipients: emailConfiguration.emailRecipients,
+    deliveryFrequency: emailConfiguration.deliveryFrequency,
+    scheduleDetails: emailConfiguration.scheduleDetails,
+    timezone: emailConfiguration.timezone
+  }
+  $api
+    .saveReportScheduleData({
+      serial_no: serialNo,
+      ...queryData
+    })
+    .then((res: any) => {})
+}
 </script>
 <template>
   <div class="Title">
     <span>Schedule Configuration - Shipment Status Report</span>
-    <el-button @click="handleSave" :disabled="isSaveDisabled" class="el-button--main save_button"
+    <el-button @click="handleSave" class="el-button--main save_button"
       ><span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px"></span
       >Save</el-button
     >
@@ -88,6 +109,7 @@ const changeTimeRange = (data: any) => {
       </div>
       <div class="schedule_container">
         <ValidityPeriod
+          ref="validityPeriodRef"
           :data="pageData.validityPeriod"
           @handleSubmitValidity="handleSubmitValidity"
         >
@@ -97,13 +119,17 @@ const changeTimeRange = (data: any) => {
     <div class="schedule_rule" style="margin: 8px 0">
       <div class="schedule_title">Report Data Time Range</div>
       <div class="schedule_container">
-        <TimeRange :data="pageData.timeRange" @changeTimeRange="changeTimeRange"> </TimeRange>
+        <TimeRange ref="timeRangeRef" :data="pageData.timeRange" @changeTimeRange="changeTimeRange">
+        </TimeRange>
       </div>
     </div>
     <div class="schedule_rule" style="margin: 8px 0">
       <div class="schedule_title">Report Delivery Frequency & Email Configuration</div>
       <div class="schedule_container">
-        <EmailConfiguration :data="pageData.deliveryFrequency"></EmailConfiguration>
+        <EmailConfiguration
+          ref="emailConfigurationRef"
+          :data="pageData.deliveryFrequency"
+        ></EmailConfiguration>
       </div>
     </div>
     <FieldsTable ref="fieldsTableRef"></FieldsTable>

src/views/Report/src/components/ReportSchedule/src/components/EmailConfiguration.vue

@@ -23,7 +23,7 @@ watch(
 
 const emailValue = ref('')
 const timeZoneValue = ref('UTC' + moment().tz(moment.tz.guess()).format('Z'))
-const frequencyValue = ref('Daily')
+const frequencyValue = ref('daily')
 const timeValue = ref('')
 const generateTimeOptions = (intervalMinutes = 30): Array<{ value: string; label: string }> => {
   const options = []
@@ -137,24 +137,24 @@ const timezoneoptions = ref([
 
 const frequencyOptions = ref([
   {
-    value: 'Daily',
-    label: 'Daily'
+    label: 'Daily',
+    value: 'daily'
   },
   {
-    value: 'Weekly',
-    label: 'Weekly'
+    label: 'Weekly',
+    value: 'weekly'
   },
   {
-    value: 'Monthly',
-    label: 'Monthly'
+    label: 'Monthly',
+    value: 'monthly'
   },
   {
-    value: 'Quarterly',
-    label: 'Quarterly'
+    label: 'Quarterly',
+    value: 'quarterly'
   },
   {
-    value: 'Yearly',
-    label: 'Yearly'
+    label: 'Yearly',
+    value: 'yearly'
   }
 ])
 
@@ -201,6 +201,43 @@ const handleClickFrequency = () => {
   quarterMonthValue.value = ''
   dayValue.value = ''
 }
+
+const getData = () => {
+  if (!frequencyValue.value || !emailValue.value || !timeZoneValue.value) {
+    ElMessage.error('Please select the Report Delivery Frequency & Email Configuration')
+    return false
+  }
+  if (
+    (frequencyValue.value === 'daily' && !timeValue.value) ||
+    (frequencyValue.value === 'weekly' && (weeklyChecked.value.length === 0 || !timeValue.value)) ||
+    (frequencyValue.value === 'monthly' &&
+      (monthlyChecked.value.length === 0 || !timeValue.value)) ||
+    (frequencyValue.value === 'quarterly' &&
+      (!quarterMonthValue.value || !dayValue.value || !timeValue.value)) ||
+    (frequencyValue.value === 'yearly' &&
+      (yearlyMonth.value.length === 0 || !dayValue.value || !timeValue.value))
+  ) {
+    ElMessage.error('Please select the Report Delivery Frequency & Email Configuration')
+    return false
+  }
+  return {
+    emailRecipients: emailValue.value,
+    timeZone: timeZoneValue.value,
+    deliveryFrequency: frequencyValue.value,
+    scheduleDetails: {
+      time: timeValue.value,
+      week: weeklyChecked.value,
+      monthlyDay: monthlyChecked.value,
+      quarterMonth: quarterMonthValue.value,
+      day: dayValue.value,
+      yearlyMonth: yearlyMonth.value
+    }
+  }
+}
+
+defineExpose({
+  getData
+})
 </script>
 <template>
   <div style="padding: 8px 16px 0 16px">
@@ -255,18 +292,23 @@ const handleClickFrequency = () => {
     </div>
     <div class="schedule_details">
       <div class="detail_title">Schedule Details</div>
-      <div class="weelkly_detailes" v-if="frequencyValue == 'Weekly'">
+      <div class="weelkly_detailes" v-if="frequencyValue == 'weekly'">
         <div class="title">
           <span class="stars_red">*</span>
           Days of Week (Select multiple)
         </div>
         <el-checkbox-group v-model="weeklyChecked" style="margin: 4px 0 16px 0">
-          <el-checkbox border v-for="(item, index) in weeklyCheckList" :key="item" :value="index">
+          <el-checkbox
+            border
+            v-for="(item, index) in weeklyCheckList"
+            :key="item"
+            :value="index + 1"
+          >
             {{ item }}
           </el-checkbox>
         </el-checkbox-group>
       </div>
-      <div class="monthly_detailes" v-else-if="frequencyValue == 'Monthly'">
+      <div class="monthly_detailes" v-else-if="frequencyValue == 'monthly'">
         <div class="title">
           <span class="stars_red">*</span>
           Days of Month (Select multiple)
@@ -277,19 +319,24 @@ const handleClickFrequency = () => {
           </el-checkbox>
         </el-checkbox-group>
       </div>
-      <div class="yearly_detailes" v-else-if="frequencyValue == 'Yearly'">
+      <div class="yearly_detailes" v-else-if="frequencyValue == 'yearly'">
         <div class="title">
           <span class="stars_red">*</span>
           Months (Select multiple)
         </div>
         <el-checkbox-group v-model="yearlyMonth" style="margin: 4px 0 16px 0">
-          <el-checkbox border v-for="(item, index) in yearlyCheckList" :key="item" :value="index">
+          <el-checkbox
+            border
+            v-for="(item, index) in yearlyCheckList"
+            :key="item"
+            :value="index + 1"
+          >
             {{ item }}
           </el-checkbox>
         </el-checkbox-group>
       </div>
       <div class="schedule-details-selects" style="display: flex">
-        <div class="details_time" v-if="frequencyValue == 'Quarterly'">
+        <div class="details_time" v-if="frequencyValue == 'quarterly'">
           <div class="title">
             <span class="stars_red">*</span>
             Quarter Month
@@ -303,13 +350,13 @@ const handleClickFrequency = () => {
               v-for="(item, index) in quarterMonth"
               :key="item"
               :label="item"
-              :value="index"
+              :value="index + 1"
             />
           </el-select>
         </div>
         <div
           class="details_time"
-          v-if="frequencyValue == 'Yearly' || frequencyValue == 'Quarterly'"
+          v-if="frequencyValue == 'yearly' || frequencyValue == 'quarterly'"
         >
           <div class="title">
             <span class="stars_red">*</span>
@@ -324,15 +371,16 @@ const handleClickFrequency = () => {
             <span class="stars_red">*</span>
             Time
           </div>
+
           <a-select
             v-model:value="timeValue"
             :options="timeItem"
             style="width: 100%; margin: 4px 0 0 0"
             :style="{
               maxWidth:
-                frequencyValue === 'Daily' ||
-                frequencyValue === 'Weekly' ||
-                frequencyValue === 'Monthly' ||
+                frequencyValue === 'daily' ||
+                frequencyValue === 'weekly' ||
+                frequencyValue === 'monthly' ||
                 !frequencyValue
                   ? '472px'
                   : '100%'

src/views/Report/src/components/ReportSchedule/src/components/FieldsTable.vue

@@ -3,7 +3,6 @@ import { ref, onMounted } from 'vue'
 import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import { formatNumber } from '@/utils/tools'
-import dayjs from 'dayjs'
 import { autoWidth } from '@/utils/table'
 import ManageReportFields from './ManageReportFields.vue'
 import { useRoute } from 'vue-router'
@@ -24,7 +23,6 @@ const ColumnSortoptions = [
 ]
 
 const tableLoading = ref(false)
-const exportLoading = ref(false)
 
 const tableData = ref<VxeGridProps<any>>({
   border: true,
@@ -72,13 +70,12 @@ const handleColumns = (columns: any) => {
 // 获取表格数据
 const getTableData = (isPageChange?: boolean) => {
   tableLoading.value = true
-  console.log(queryParams.value, 'params')
-  console.log(pageInfo.value, 'params')
   $api
     .getReportScheduleTable({
       cp: pageInfo.value.pageNo,
       ps: pageInfo.value.pageSize,
       rc: isPageChange ? pageInfo.value.total : -1,
+      serial_no: route.query.id,
       orderBy: orderBy.value,
       ...queryParams.value
     })
@@ -87,8 +84,8 @@ const getTableData = (isPageChange?: boolean) => {
         pageInfo.value.total = Number(res.data.rc)
         pageInfo.value.pageNo = res.data.cp
         pageInfo.value.pageSize = res.data.ps
-        const tableDataValue = res.data.tableData
 
+        const tableDataValue = res.data.tableData
         pageInfo.value.total = Number(tableDataValue.rc)
         pageInfo.value.pageNo = tableDataValue.cp
         pageInfo.value.pageSize = tableDataValue.ps
@@ -117,32 +114,6 @@ const handleSearch = (val: any) => {
 
   getTableData()
 }
-// 下载
-const getExportTableData = (type: string, column: any) => {
-  if (column) {
-    const newColumns = column.map((item: any) => {
-      let curColumn: any = {
-        title: item.displayName != '' ? item.displayName : item.title,
-        field: item.field,
-        width: item.width
-      }
-      return curColumn
-    })
-    column = newColumns
-  }
-  exportLoading.value = true
-  const exportConfig: any = {
-    type: type,
-    message: false,
-    filename: `Report List_${dayjs().format('YYYYMMDDHH[h]mm[m]ss[s]')}`,
-    columns: column || tableData.value.columns
-  }
-
-  tableRef.value.exportData(exportConfig)
-  setTimeout(() => {
-    exportLoading.value = false
-  }, 1000)
-}
 
 const handleClickManageFields = () => {
   ManageReportFieldsRef.value.openDialog(route.query.id as string)
@@ -156,17 +127,11 @@ const applyNewColumn = () => {
 useRowClickStyle(tableRef)
 
 defineExpose({
-  handleSearch,
-  getExportTableData
+  handleSearch
 })
 </script>
 <template>
-  <div
-    v-loading.fullscreen.lock="exportLoading"
-    element-loading-text="Loading..."
-    element-loading-custom-class="element-loading"
-    element-loading-background="rgb(43, 47, 54, 0.7)"
-  >
+  <div>
     <div class="SettingTable">
       <div class="flex">
         <div class="Title">Report Data Review</div>

src/views/Report/src/components/ReportSchedule/src/components/TimeRange.vue

@@ -131,35 +131,35 @@ const ChangeRollingRangeRadio = (val: any) => {
 // 选择fixed range默认值
 const changeFixedRange = (val: any) => {
   if (val == 'This Month') {
-    startDate.value = dayjs().startOf('month').format('YYYY.MM.DD')
-    endDate.value = dayjs().endOf('month').format('YYYY.MM.DD')
+    startDate.value = dayjs().startOf('month').format('MM/DD/YYYY')
+    endDate.value = dayjs().endOf('month').format('MM/DD/YYYY')
   } else if (val == 'Last Month') {
-    startDate.value = dayjs().subtract(1, 'month').startOf('month').format('YYYY.MM.DD')
-    endDate.value = dayjs().subtract(1, 'month').endOf('month').format('YYYY.MM.DD')
+    startDate.value = dayjs().subtract(1, 'month').startOf('month').format('MM/DD/YYYY')
+    endDate.value = dayjs().subtract(1, 'month').endOf('month').format('MM/DD/YYYY')
   } else if (val == 'This Quarter') {
     startDate.value = dayjs()
       .month(Math.floor(dayjs().month() / 3) * 3)
       .startOf('month')
-      .format('YYYY.MM.DD')
+      .format('MM/DD/YYYY')
     endDate.value = dayjs()
       .month(Math.floor(dayjs().month() / 3) * 3 + 2)
       .endOf('month')
-      .format('YYYY.MM.DD')
+      .format('MM/DD/YYYY')
   } else if (val == 'Last Quarter') {
     startDate.value = dayjs()
       .month(Math.floor(dayjs().month() / 3) * 3 - 3)
       .startOf('month')
-      .format('YYYY.MM.DD')
+      .format('MM/DD/YYYY')
     endDate.value = dayjs()
       .month(Math.floor(dayjs().month() / 3) * 3 - 1)
       .endOf('month')
-      .format('YYYY.MM.DD')
+      .format('MM/DD/YYYY')
   } else if (val == 'This Year') {
-    startDate.value = dayjs().startOf('year').format('YYYY.MM.DD')
-    endDate.value = dayjs().endOf('year').format('YYYY.MM.DD')
+    startDate.value = dayjs().startOf('year').format('MM/DD/YYYY')
+    endDate.value = dayjs().endOf('year').format('MM/DD/YYYY')
   } else if (val == 'Last Year') {
-    startDate.value = dayjs().subtract(1, 'year').startOf('year').format('YYYY.MM.DD')
-    endDate.value = dayjs().subtract(1, 'year').endOf('year').format('YYYY.MM.DD')
+    startDate.value = dayjs().subtract(1, 'year').startOf('year').format('MM/DD/YYYY')
+    endDate.value = dayjs().subtract(1, 'year').endOf('year').format('MM/DD/YYYY')
   }
   emits('changeTimeRange', {
     startDate: startDate.value,
@@ -171,6 +171,33 @@ const changeFixedRange = (val: any) => {
     fixedRangeRadio.value = ''
   }, 300)
 }
+
+const getData = () => {
+  if (!fieldType.value || !type.value) {
+    ElMessage.error('Please select the Report Data Time Range')
+    return false
+  }
+
+  let startValue: any = ''
+  let endValue: any = ''
+  if (type.value === 'dynamic_rolling') {
+    startValue = clampedValueStart.value
+    endValue = clampedValueEnd.value
+  } else if (type.value === 'fixed') {
+    startValue = startDate.value
+    endValue = endDate.value
+  }
+  return {
+    type: type.value,
+    fieldType: fieldType.value,
+    startValue,
+    endValue
+  }
+}
+
+defineExpose({
+  getData
+})
 </script>
 <template>
   <div style="padding: 8px 16px 16px 16px">
@@ -178,7 +205,12 @@ const changeFixedRange = (val: any) => {
       <span class="stars_red">*</span>
       Data Time Reference Field Selection
     </div>
-    <el-select class="select_time" v-model="fieldType" placeholder="Please select...">
+    <el-select
+      class="select_time"
+      v-model="fieldType"
+      @change="changeTime(type)"
+      placeholder="Please select..."
+    >
       <el-option
         v-for="item in dataTimeoptions"
         :key="item.value"
@@ -288,36 +320,30 @@ const changeFixedRange = (val: any) => {
                     <el-radio-button label="Customize" value="Customize" />
                   </el-radio-group>
                 </div>
-                <div style="display: flex">
+                <div style="display: flex; padding-bottom: 2px">
                   <div style="margin-right: 9px; width: 50%">
                     <div class="date_text">Start Date</div>
-                    <a-date-picker
+                    <el-date-picker
+                      v-model="startDate"
+                      type="date"
+                      class="date-picker"
+                      placeholder="Pick a Date"
                       :format="userStore.dateFormat"
-                      valueFormat="YYYY.MM.DD"
-                      :showToday="false"
+                      valueFormat="MM/DD/YYYY"
                       @change="changeTime('fixed')"
-                      style="width: 100%"
-                      v-model:value="startDate"
-                    >
-                      <template #suffixIcon>
-                        <span class="font_family icon-icon_date_b"></span>
-                      </template>
-                    </a-date-picker>
+                    />
                   </div>
                   <div style="width: 50%">
                     <div class="date_text">End Date</div>
-                    <a-date-picker
+                    <el-date-picker
+                      v-model="endDate"
+                      type="date"
+                      class="date-picker"
+                      placeholder="Pick a Date"
                       :format="userStore.dateFormat"
-                      valueFormat="YYYY.MM.DD"
-                      :showToday="false"
+                      valueFormat="MM/DD/YYYY"
                       @change="changeTime('fixed')"
-                      style="width: 100%"
-                      v-model:value="endDate"
-                    >
-                      <template #suffixIcon>
-                        <span class="font_family icon-icon_date_b"></span>
-                      </template>
-                    </a-date-picker>
+                    />
                   </div>
                 </div>
               </div>
@@ -475,4 +501,10 @@ const changeFixedRange = (val: any) => {
 .date_flex {
   flex: 1;
 }
+:deep(.date-picker) {
+  width: 100%;
+  .el-input__wrapper {
+    border-radius: 6px;
+  }
+}
 </style>

src/views/Report/src/components/ReportSchedule/src/components/ValidityPeriod.vue

@@ -6,7 +6,7 @@ const formatDate = userStore.dateFormat
 
 const props = defineProps<{
   data: {
-    type: 'Custom Period' | 'Permanent Valid' | ''
+    type: 'custom' | 'permanent' | ''
     startDate: string
     endDate: string
   }
@@ -26,28 +26,36 @@ watch(
 )
 
 const isShowEffective = computed(() => {
-  return validityPeriodType.value === 'Custom Period'
+  return validityPeriodType.value === 'custom'
 })
-const emit = defineEmits(['handleSubmitValidity'])
 // 选择Validity Period部分
-const ChangeValidity = (val: any) => {
-  if (val == 2) {
-    emit('handleSubmitValidity', {
-      type: 'Custom Period',
-      startDate: startDate.value ? startDate.value : '',
-      endDate: endDate.value ? endDate.value : ''
-    })
-  } else if (val == 1) {
-    emit('handleSubmitValidity', { type: 'Permanent Valid' })
-    startDate.value = ''
-    endDate.value = ''
+const ChangeValidity = () => {
+  startDate.value = ''
+  endDate.value = ''
+}
+const getData = () => {
+  if (
+    !validityPeriodType.value ||
+    (validityPeriodType.value === 'custom' && (!startDate.value || !endDate.value))
+  ) {
+    ElMessage.warning('Please select the Schedule Rule Validity Period')
+    return false
+  }
+  return {
+    type: validityPeriodType.value,
+    startDate: startDate.value ? startDate.value : '',
+    endDate: endDate.value ? endDate.value : ''
   }
 }
+
+defineExpose({
+  getData
+})
 </script>
 <template>
   <div style="padding: 8px 16px 16px 16px">
     <el-radio-group v-model="validityPeriodType" @change="ChangeValidity">
-      <el-radio value="Permanent Valid">
+      <el-radio value="permanent">
         Permanent Valid
         <el-tooltip
           popper-class="schedule-popper"
@@ -59,7 +67,7 @@ const ChangeValidity = (val: any) => {
           <span class="font_family icon-icon_info_b"></span>
         </el-tooltip>
       </el-radio>
-      <el-radio value="Custom Period">
+      <el-radio value="custom">
         <div class="radio_custom">
           <div style="height: 38px">
             Custom Period