feat: 联调Report页面接口

src/api/module/report.ts

@@ -110,4 +110,125 @@ export const editReportTemplate = (params: any, config: any) => {
     },
     config
   )
+}
+
+
+/**
+ * 获取Report页表格数据
+ */
+export const getReportPageTable = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'shipment_status_report',
+      operate: 'report_search',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 获取Report detail页表格数据
+ */
+export const getReportDetailTable = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'shipment_status_report',
+      operate: 'report_detail',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 导出Report detail页表格数据
+ */
+export const exportReportDetailTable = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'shipment_status_report',
+      operate: 'excel',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 获取 Manage Fields 列表数据
+ */
+export const getManageFieldsList = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'shipment_status_report',
+      operate: 'manage_fileds',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 保存 Manage Fields 列表数据
+ */
+export const saveManageFieldsList = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'shipment_status_report',
+      operate: 'manage_fileds',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 获取 report schedule 页面数据
+ */
+export const getReportScheduleData = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'shipment_status_report',
+      operate: 'report_schedule',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 保存 report schedule 页面数据
+ */
+export const saveReportScheduleData = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'shipment_status_report',
+      operate: 'report_schedule',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 获取 report schedule 表格数据
+ */
+export const getReportScheduleTable = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'shipment_status_report',
+      operate: 'report_schedule_search',
+      ...params
+    },
+    config
+  )
 }

src/components/AutoComplete/src/AutoComplete.vue

@@ -133,9 +133,7 @@ const handleSearch = _.debounce(() => {
   }, 800)
 }, 500)
 // 分页 请求接口
-const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`)
-}
+const handleCurrentChange = (val: number) => {}
 </script>
 <template>
   <div>
@@ -233,4 +231,4 @@ const handleCurrentChange = (val: number) => {
 :deep(.el-popper) {
   border-radius: 12px !important;
 }
-</style>
+</style>

src/components/DateRange/src/components/CalendarDate.vue

@@ -128,10 +128,6 @@ const handlePanelChange = (value: any, mode: any) => {
     isShowExtra.value = true
   }
 }
-// 判断失焦时是否两个都有值
-const isTwoDate = (date: any) => {
-  console.log(date)
-}
 </script>
 <template>
   <div>

src/components/TransportMode/src/TransportMode.vue

@@ -19,7 +19,6 @@ const TransportList = ref(props.TransportListItem)
 watch(
   () => props.TransportListItem,
   (current) => {
-    console.log(current)
     TransportList.value = current
     TransportList.value.forEach((item: any) => {
       if (item.checked) {

src/hooks/calculatingHeight.ts

@@ -15,7 +15,7 @@ export const useCalculatingHeight = (
     if (parentElement) {
       containerHeight.value = parentElement.offsetHeight - fixedHeight
       elementList.forEach((item: any) => {
-        if (item.value) {
+        if (item?.value) {
           containerHeight.value -= item.value.offsetHeight || 0
         }
       })
@@ -32,19 +32,19 @@ export const useCalculatingHeight = (
       resizeObserver.observe(parentElement)
     }
     elementList.forEach((item) => {
-      if (item.value) {
+      if (item?.value) {
         resizeObserver.observe(item.value)
       }
     })
   }
 
   // Vue 生命周期钩子
-  onMounted(() => {
-    nextTick(() => {
-      calculatingHeight()
-      startObserving()
-    })
-  })
+  // onMounted(() => {
+  //   nextTick(() => {
+  //     calculatingHeight()
+  //     startObserving()
+  //   })
+  // })
 
   // 停止观察
   const stopObserving = () => {

src/views/Booking/src/components/BookingTable/src/BookingTable.vue

@@ -376,7 +376,6 @@ const exportTable = (status: number) => {
       return index !== -1
     }
   }
-    console.log(exportConfig)
   allTableRef.value?.exportData(exportConfig)
   // 将所有表格的值赋值为当前表格的值
   allTable.value.data = curTableData.value

src/views/Dashboard/src/components/RecentStatus.vue

@@ -45,7 +45,6 @@ const SubscribeShipments = (val: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        console.log(res.data)
       }
     })
 }

src/views/DestinationDelivery/src/components/ConfiguRations/src/components/CreateNewRule.vue

@@ -42,37 +42,36 @@ const CountryCheckboxList = ref([])
 
 // 页面初始化
 const InitRuleData = () => {
-  if ( a!= undefined ) {
+  if (a != undefined) {
     $api
-    .InitCreateRule({
-      a: a
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        const { returnData } = res.data
-        KLNPLCvalue.value = returnData.KLNPLCvalue
-        selectedCountry.value = returnData.country
-        setbookingdata.value = returnData.SetBookingWindow
-        windowRadio.value = returnData.SetBookingWindow.windowradio
-        if(windowRadio.value != 1) {
-          windowBeforeDays.value = returnData.booking_window_date_start
-          windowAfterDays.value = returnData.booking_window_date_end
-        }
-        recommendRadio.value = returnData.RcommendDeliveryDate.Recommendradio
-        if(recommendRadio.value != 1) {
-          recommendCheckedList.value = returnData.RcommendDeliveryDate.RecommendCheckedList
-          recommendCheckedAirList.value = returnData.RcommendDeliveryDate.RecommendCheckedAirList
-          recommendCheckedSeaList.value = returnData.RcommendDeliveryDate.RecommendCheckedSeaList
+      .InitCreateRule({
+        a: a
+      })
+      .then((res: any) => {
+        if (res.code === 200) {
+          const { returnData } = res.data
+          KLNPLCvalue.value = returnData.KLNPLCvalue
+          selectedCountry.value = returnData.country
+          setbookingdata.value = returnData.SetBookingWindow
+          windowRadio.value = returnData.SetBookingWindow.windowradio
+          if (windowRadio.value != 1) {
+            windowBeforeDays.value = returnData.booking_window_date_start
+            windowAfterDays.value = returnData.booking_window_date_end
+          }
+          recommendRadio.value = returnData.RcommendDeliveryDate.Recommendradio
+          if (recommendRadio.value != 1) {
+            recommendCheckedList.value = returnData.RcommendDeliveryDate.RecommendCheckedList
+            recommendCheckedAirList.value = returnData.RcommendDeliveryDate.RecommendCheckedAirList
+            recommendCheckedSeaList.value = returnData.RcommendDeliveryDate.RecommendCheckedSeaList
+          }
+          countryCheckedList.value = returnData.station
+          CountryCheckboxList.value = returnData.CountryCheckedList
+          recommendata.value = returnData.RcommendDeliveryDate
         }
-        countryCheckedList.value = returnData.station
-        CountryCheckboxList.value = returnData.CountryCheckedList
-        recommendata.value = returnData.RcommendDeliveryDate
-      }
-    })
+      })
   }
 }
 
-
 const CreateRuleDisabled = computed(() => {
   // 1. 检查基本条件是否满足
   if (
@@ -82,14 +81,14 @@ const CreateRuleDisabled = computed(() => {
     recommendRadio.value === undefined ||
     KLNPLCvalue.value.length === 0
   ) {
-    return true;
+    return true
   }
 
   // 2. 处理时间窗口条件
   if (windowRadio.value !== 1) {
     // 当 windowRadio 不为 1 时，需要验证时间窗口字段
     if (windowBeforeDays.value === '' || windowAfterDays.value === '') {
-      return true;
+      return true
     }
   }
 
@@ -97,55 +96,54 @@ const CreateRuleDisabled = computed(() => {
   if (recommendRadio.value !== 1) {
     // 3.1 确保至少选择了一个运输方式
     if (recommendCheckedList.value.length === 0) {
-      return true;
+      return true
     }
 
     // 3.2 验证航空规则（如果选择了 Air）
-    console.log(recommendCheckedList.value)
     if (recommendCheckedList.value.includes('Air')) {
-      const isAirValid = recommendCheckedAirList.value.every(item => 
-        item.ports.length > 0 && 
-        item.recommended_delivery_from !== '' && 
-        item.recommended_delivery_to !== ''
-      );
-      
-      if (!isAirValid) return true;
+      const isAirValid = recommendCheckedAirList.value.every(
+        (item) =>
+          item.ports.length > 0 &&
+          item.recommended_delivery_from !== '' &&
+          item.recommended_delivery_to !== ''
+      )
+
+      if (!isAirValid) return true
     }
 
     // 3.3 验证海运规则（如果选择了 Sea）
     if (recommendCheckedList.value.includes('Sea')) {
-      const hasInvalidSeaItem = recommendCheckedSeaList.value.some(item => {
-        const hasValidDeliveryTime = 
-          item.recommended_delivery_from && 
-          item.recommended_delivery_to;
-        
-        const hasRequiredFields = item.rule_type !== 'Single Dimension'
-          ? item.ports.length > 0 && item.carrier.length > 0
-          : item.ports.length > 0 || item.carrier.length > 0;
-        
-        return !hasValidDeliveryTime || !hasRequiredFields;
-      });
-      
-      if (hasInvalidSeaItem) return true;
+      const hasInvalidSeaItem = recommendCheckedSeaList.value.some((item) => {
+        const hasValidDeliveryTime = item.recommended_delivery_from && item.recommended_delivery_to
+
+        const hasRequiredFields =
+          item.rule_type !== 'Single Dimension'
+            ? item.ports.length > 0 && item.carrier.length > 0
+            : item.ports.length > 0 || item.carrier.length > 0
+
+        return !hasValidDeliveryTime || !hasRequiredFields
+      })
+
+      if (hasInvalidSeaItem) return true
     }
   }
   // 4. 所有条件都满足，返回 false（不禁用）
-  return false;
-});
-// select country 
-const handleClickSelectCountry = (val:any) =>{
+  return false
+})
+// select country
+const handleClickSelectCountry = (val: any) => {
   selectedCountry.value = val
   countryCheckedList.value = []
 }
 // select station list
-const handleChangeStation = (val:any) =>{
+const handleChangeStation = (val: any) => {
   countryCheckedList.value = val
 }
 
 // select booking window
 const bookingWindow = ref('')
 const bookingdetail = ref('')
-const changeBookingWindow = (radio: number, beforedays:any, afterdays:any) => {
+const changeBookingWindow = (radio: number, beforedays: any, afterdays: any) => {
   windowRadio.value = radio
   windowBeforeDays.value = beforedays
   windowAfterDays.value = afterdays
@@ -169,10 +167,11 @@ const querySearchAsync = (query: string) => {
   if (query) {
     loading.value = true
     setTimeout(() => {
-      $api.getKLNEmployeeList({ 
-        term: query,
-        station: countryCheckedList.value
-      })
+      $api
+        .getKLNEmployeeList({
+          term: query,
+          station: countryCheckedList.value
+        })
         .then((res: any) => {
           if (res.code === 200) {
             loading.value = false
@@ -189,17 +188,17 @@ const querySearchAsync = (query: string) => {
 }
 // 保存
 const handleSubmitRule = () => {
-  const airlist = recommendCheckedAirList.value.map(item => {
-    const {PortList, ...rest} = item
-    if(recommendRadio.value == 2) {
+  const airlist = recommendCheckedAirList.value.map((item) => {
+    const { PortList, ...rest } = item
+    if (recommendRadio.value == 2) {
       return rest
     } else {
       return []
     }
   })
-  const seaList = recommendCheckedSeaList.value.map(item => {
-    const {PortList,CarrierList, ...rest} = item
-    if(recommendRadio.value == 2) {
+  const seaList = recommendCheckedSeaList.value.map((item) => {
+    const { PortList, CarrierList, ...rest } = item
+    if (recommendRadio.value == 2) {
       return rest
     } else {
       return []
@@ -208,39 +207,59 @@ const handleSubmitRule = () => {
   let airData = []
   let airlistInfo = {}
   let mergeData = []
-  if(windowRadio.value == 1) {
+  if (windowRadio.value == 1) {
     bookingWindow.value = 'No_Restrictions'
     bookingdetail.value = 'No Specific time restrictions for creating booking'
-  } else if(windowRadio.value == 2) {
+  } else if (windowRadio.value == 2) {
     bookingWindow.value = 'Restrictions_ETD_ATD'
-    bookingdetail.value = 'ETD/ATD: ' + windowBeforeDays.value + ' days before to ' + windowAfterDays.value + ' days after'
-  } else if(windowRadio.value == 3) {
+    bookingdetail.value =
+      'ETD/ATD: ' +
+      windowBeforeDays.value +
+      ' days before to ' +
+      windowAfterDays.value +
+      ' days after'
+  } else if (windowRadio.value == 3) {
     bookingWindow.value = 'Restrictions_ETA_ATA'
-    bookingdetail.value = 'ETA/ATA: ' + windowBeforeDays.value + ' days before to ' + windowAfterDays.value + ' days after'
+    bookingdetail.value =
+      'ETA/ATA: ' +
+      windowBeforeDays.value +
+      ' days before to ' +
+      windowAfterDays.value +
+      ' days after'
   }
-  if(recommendRadio.value == 1) {
+  if (recommendRadio.value == 1) {
     recommendDelivery.value = 'No_Recommended'
     recommenddetail.value = 'No Specific recommended time for choosing delivery date'
   } else {
     recommendDelivery.value = 'Delivery_ETA_ATA'
-    if(recommendCheckedList.value.includes('Air')) {
-      recommenddetail.value += 'Air:\nDefault Rule- Air Port: ALL,\nRecommend Delivery Date: ETA/ATA+' + airlist[0].recommended_delivery_from + ' Days to ETA/ATA+'+ airlist[0].recommended_delivery_to + ' Days;\n'
+    if (recommendCheckedList.value.includes('Air')) {
+      recommenddetail.value +=
+        'Air:\nDefault Rule- Air Port: ALL,\nRecommend Delivery Date: ETA/ATA+' +
+        airlist[0].recommended_delivery_from +
+        ' Days to ETA/ATA+' +
+        airlist[0].recommended_delivery_to +
+        ' Days;\n'
       airlist.forEach((item) => {
         item.ports = item.ports.join(',')
         item.carrier = ''
       })
       mergeData = [...airlist]
     }
-    if(recommendCheckedList.value.includes('Sea')) {
-      recommenddetail.value += 'Sea:\nDefault Rule- ort: ALL, Carrier: ALL,\nRecommend Delivery Date: ETA/ATA+' + seaList[0].recommended_delivery_from + ' Days to ETA/ATA+'+ seaList[0].recommended_delivery_to + ' Days;' 
+    if (recommendCheckedList.value.includes('Sea')) {
+      recommenddetail.value +=
+        'Sea:\nDefault Rule- ort: ALL, Carrier: ALL,\nRecommend Delivery Date: ETA/ATA+' +
+        seaList[0].recommended_delivery_from +
+        ' Days to ETA/ATA+' +
+        seaList[0].recommended_delivery_to +
+        ' Days;'
       seaList.forEach((item) => {
         item.ports = item.ports.join(',')
         item.carrier = item.carrier.join(',')
       })
-      mergeData = [...mergeData , ...seaList]
+      mergeData = [...mergeData, ...seaList]
     }
   }
-  if(seaList.length != 0) {
+  if (seaList.length != 0) {
     airData = Object.keys(seaList?.[0])
     airData.forEach((item) => {
       Object.assign(airlistInfo, {
@@ -248,36 +267,37 @@ const handleSubmitRule = () => {
       })
     })
   }
-  $api.handelSaveRule({
-    serial_no: a != undefined ? a: '',
-    country: selectedCountry.value,
-    station: countryCheckedList.value,
-    booking_window: bookingWindow.value,
-    booking_window_date_start: windowBeforeDays.value,
-    booking_window_date_end: windowAfterDays.value,
-    recommended_delivery: recommendDelivery.value,
-    booking_window_desc: bookingdetail.value,
-    kln_pic: KLNPLCvalue.value,
-    recommended_delivery_date_desc: recommenddetail.value,
-    ...airlistInfo
-  }).then((res: any) => {
-    if (res.code === 200 && res.data.msg == 'success') {
-      SaveedVisible.value = true
-      setTimeout(() => {
-        SaveedVisible.value = false
-        router.push({ name: 'Configurations'})
-      }, 3000)
-    } else {
+  $api
+    .handelSaveRule({
+      serial_no: a != undefined ? a : '',
+      country: selectedCountry.value,
+      station: countryCheckedList.value,
+      booking_window: bookingWindow.value,
+      booking_window_date_start: windowBeforeDays.value,
+      booking_window_date_end: windowAfterDays.value,
+      recommended_delivery: recommendDelivery.value,
+      booking_window_desc: bookingdetail.value,
+      kln_pic: KLNPLCvalue.value,
+      recommended_delivery_date_desc: recommenddetail.value,
+      ...airlistInfo
+    })
+    .then((res: any) => {
+      if (res.code === 200 && res.data.msg == 'success') {
+        SaveedVisible.value = true
+        setTimeout(() => {
+          SaveedVisible.value = false
+          router.push({ name: 'Configurations' })
+        }, 3000)
+      } else {
         UnableSaveVisible.value = true
         missingmessage.value = res.data.msg
-    }
-  })
+      }
+    })
 }
 
 onMounted(() => {
   InitRuleData()
 })
-
 </script>
 
 <template>
@@ -286,11 +306,20 @@ onMounted(() => {
       <div v-if="a != undefined">Modify Rule</div>
       <div v-else>Create New Rule</div>
       <div class="operator">
-        <el-button @click="CancelRulesVisible = true" style="height: 40px; width: 115px" type="default">
+        <el-button
+          @click="CancelRulesVisible = true"
+          style="height: 40px; width: 115px"
+          type="default"
+        >
           <span style="margin-right: 4px" class="font_family icon-icon_return_b"></span>
           <span style="font-weight: 400">Cancel</span></el-button
         >
-        <el-button style="height: 40px; width: 120px" class="el-button--main el-button--pain-theme" :disabled="CreateRuleDisabled" @click="handleSubmitRule">
+        <el-button
+          style="height: 40px; width: 120px"
+          class="el-button--main el-button--pain-theme"
+          :disabled="CreateRuleDisabled"
+          @click="handleSubmitRule"
+        >
           <span
             style="
               display: inline-block;
@@ -355,7 +384,9 @@ onMounted(() => {
         </el-dialog>
         <!-- 保存成功 -->
         <el-dialog v-model="SaveedVisible" width="320" style="height: 212px">
-          <div style="text-align: center"><el-image :src="submitsucessful" style="width: 64px;" /></div>
+          <div style="text-align: center">
+            <el-image :src="submitsucessful" style="width: 64px" />
+          </div>
           <div style="text-align: center; margin-top: 20px">Saved successfully</div>
         </el-dialog>
       </div>
@@ -364,107 +395,107 @@ onMounted(() => {
       <div class="setting-top-title">Setting</div>
       <el-collapse v-model="activeRules" @change="IsFirstActive = !IsFirstActive">
         <el-collapse-item name="SelectStation">
-            <template #title>
-              <div class="Rules_Title">
-                <span class="iconfont_icon icon_dark">
-                  <svg class="iconfont" aria-hidden="true">
-                    <use
-                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
-                    ></use>
-                  </svg>
-                </span>
-                <span class="stars_red">*</span>Select Station (Enable Booking)
-              </div>
-            </template>
-            <div>
-              <SelectStation
+          <template #title>
+            <div class="Rules_Title">
+              <span class="iconfont_icon icon_dark">
+                <svg class="iconfont" aria-hidden="true">
+                  <use
+                    :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                  ></use>
+                </svg>
+              </span>
+              <span class="stars_red">*</span>Select Station (Enable Booking)
+            </div>
+          </template>
+          <div>
+            <SelectStation
               @handleClickSelectCountry="handleClickSelectCountry"
               @handleChangeStation="handleChangeStation"
               :CheckboxList="CountryCheckboxList"
               :CheckedList="countryCheckedList"
               :SelectCountry="selectedCountry"
-              ></SelectStation>
-            </div>
-          </el-collapse-item>
+            ></SelectStation>
+          </div>
+        </el-collapse-item>
       </el-collapse>
       <el-collapse v-model="activeRules" @change="IsTwoActive = !IsTwoActive">
         <el-collapse-item name="SelectBooking">
-            <template #title>
-              <div class="Rules_Title">
-                <span class="iconfont_icon icon_dark">
-                  <svg class="iconfont" aria-hidden="true">
-                    <use
-                      :xlink:href="IsTwoActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
-                    ></use>
-                  </svg>
-                </span>
-                <span class="stars_red">*</span>Set Booking Window
-              </div>
-            </template>
-            <div>
-              <SetBookingWindow
-                :setbookingdata="setbookingdata"
-                @changeBookingWindow="changeBookingWindow"
-              ></SetBookingWindow>
+          <template #title>
+            <div class="Rules_Title">
+              <span class="iconfont_icon icon_dark">
+                <svg class="iconfont" aria-hidden="true">
+                  <use
+                    :xlink:href="IsTwoActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                  ></use>
+                </svg>
+              </span>
+              <span class="stars_red">*</span>Set Booking Window
             </div>
-          </el-collapse-item>
+          </template>
+          <div>
+            <SetBookingWindow
+              :setbookingdata="setbookingdata"
+              @changeBookingWindow="changeBookingWindow"
+            ></SetBookingWindow>
+          </div>
+        </el-collapse-item>
       </el-collapse>
       <el-collapse v-model="activeRules" @change="IsThreeActive = !IsThreeActive">
         <el-collapse-item name="RecommendDeliveryDate">
-            <template #title>
-              <div class="Rules_Title">
-                <span class="iconfont_icon icon_dark">
-                  <svg class="iconfont" aria-hidden="true">
-                    <use
-                      :xlink:href="IsThreeActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
-                    ></use>
-                  </svg>
-                </span>
-                <span class="stars_red">*</span>Recommend Delivery Date 
-              </div>
-            </template>
-            <div>
-              <RecommendDate
-                :recommendata="recommendata"
-                @chackchangerecommend="checkRecommend"
-              ></RecommendDate>
+          <template #title>
+            <div class="Rules_Title">
+              <span class="iconfont_icon icon_dark">
+                <svg class="iconfont" aria-hidden="true">
+                  <use
+                    :xlink:href="IsThreeActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                  ></use>
+                </svg>
+              </span>
+              <span class="stars_red">*</span>Recommend Delivery Date
             </div>
-          </el-collapse-item>
+          </template>
+          <div>
+            <RecommendDate
+              :recommendata="recommendata"
+              @chackchangerecommend="checkRecommend"
+            ></RecommendDate>
+          </div>
+        </el-collapse-item>
       </el-collapse>
       <el-collapse v-model="activeRules" @change="IsFourActive = !IsFourActive">
         <el-collapse-item name="KLNPLC">
-            <template #title>
-              <div class="Rules_Title">
-                <span class="iconfont_icon icon_dark">
-                  <svg class="iconfont" aria-hidden="true">
-                    <use
-                      :xlink:href="IsFourActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
-                    ></use>
-                  </svg>
-                </span>
-                <span class="stars_red">*</span>KLN PIC
-              </div>
-            </template>
-            <div>
-              <el-select
-                v-model="KLNPLCvalue"
-                filterable
-                remote
-                multiple
-                placeholder="Select Employee Account"
-                :remote-method="querySearchAsync"
-                :loading="loading"
-                style="width: 400px;margin-bottom: 5px;"
-              >
-                <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
+          <template #title>
+            <div class="Rules_Title">
+              <span class="iconfont_icon icon_dark">
+                <svg class="iconfont" aria-hidden="true">
+                  <use
+                    :xlink:href="IsFourActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
+                  ></use>
+                </svg>
+              </span>
+              <span class="stars_red">*</span>KLN PIC
             </div>
-          </el-collapse-item>
+          </template>
+          <div>
+            <el-select
+              v-model="KLNPLCvalue"
+              filterable
+              remote
+              multiple
+              placeholder="Select Employee Account"
+              :remote-method="querySearchAsync"
+              :loading="loading"
+              style="width: 400px; margin-bottom: 5px"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+        </el-collapse-item>
       </el-collapse>
     </div>
   </div>
@@ -550,7 +581,7 @@ onMounted(() => {
   box-shadow: none;
   border: 1px solid var(--color-theme);
 }
-:deep(.el-select__wrapper.is-focused ){
+:deep(.el-select__wrapper.is-focused) {
   box-shadow: none;
   border: 1px solid var(--color-theme);
 }
@@ -580,4 +611,4 @@ onMounted(() => {
 :deep(.el-dialog__body) {
   font-weight: 400;
 }
-</style>
+</style>

src/views/Report/src/ReportView.vue

@@ -7,33 +7,32 @@ import { useRouter } from 'vue-router'
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
 
 const router = useRouter()
-const ReportSearch = ref('')
+const textSearch = ref('')
 // search report name
-const SearchInput = () => {
-  console.log(ReportSearch.value)
-}
+const SearchInput = () => {}
 
 const filterRef: Ref<HTMLElement | null> = ref(null)
 const containerHeight = useCalculatingHeight(document.documentElement, 266, [filterRef])
 
-const columnstest = ref([
-  {
-    field: 'report_name',
-    title: 'Report Name',
-    type: 'normal',
-    formatter: ''
-  },
-  {
-    field: 'description',
-    title: 'Description',
-    type: 'normal',
-    formatter: ''
-  }
-])
 const tableData = ref<VxeGridProps<any>>({
   border: true,
   round: true,
-  columns: [],
+  columns: [
+    {
+      title: 'Action',
+      fixed: 'left',
+      width: 178,
+      slots: { default: 'action' }
+    },
+    {
+      field: 'name',
+      title: 'Report Name'
+    },
+    {
+      field: 'description',
+      title: 'Description'
+    }
+  ],
   data: [],
   scrollY: { enabled: true, oSize: 20, gt: 30 },
   stripe: true,
@@ -48,33 +47,14 @@ const tableData = ref<VxeGridProps<any>>({
 })
 
 const tableRef = ref<VxeGridInstance | null>(null)
+const tableLoading = ref(false)
 const pageInfo = ref({ pageNo: 1, pageSize: 50, total: 0 })
 
-const handleColumns = (columns: any) => {
-  const newColumns = columns.map((item: any) => {
-    let curColumn: any = {
-      title: item.title,
-      field: item.field,
-      width: item.width
-    }
-    return curColumn
-  })
-  return newColumns
-}
-// 获取表格列
-const getTableColumns = async () => {
-  tableData.value.columns = handleColumns(columnstest.value)
-  tableData.value.columns?.push({
-    title: 'Action',
-    fixed: 'left',
-    width: 178,
-    slots: { default: 'action' }
-  })
-}
 // 获取表格数据
 const getTableData = (isPageChange?: boolean) => {
+  tableLoading.value = true
   $api
-    .getConfigurationList({
+    .getReportPageTable({
       cp: pageInfo.value.pageNo,
       ps: pageInfo.value.pageSize,
       rc: isPageChange ? pageInfo.value.total : -1
@@ -87,6 +67,9 @@ const getTableData = (isPageChange?: boolean) => {
         tableData.value.data = res.data.searchData
       }
     })
+    .finally(() => {
+      tableLoading.value = false
+    })
 }
 
 // 实现行点击样式
@@ -95,22 +78,21 @@ useRowClickStyle(tableRef)
 const handleClickDetail = (row: any) => {
   router.push({
     name: 'ReportDetail',
-    params: {
-      id: row.id
+    query: {
+      id: row.serial_no
     }
   })
 }
 const handleClickSchedule = (row: any) => {
   router.push({
     name: 'ReportSchedule',
-    params: {
-      id: row.id
+    query: {
+      id: row.serial_no
     }
   })
 }
 
 onMounted(() => {
-  getTableColumns()
   getTableData()
 })
 </script>
@@ -123,7 +105,7 @@ onMounted(() => {
     <div class="search">
       <el-input
         placeholder="Search Report Name"
-        v-model="ReportSearch"
+        v-model="textSearch"
         class="log_input"
         @keyup.enter="SearchInput"
       >
@@ -142,6 +124,7 @@ onMounted(() => {
       :style="{ border: 'none' }"
       v-bind="tableData"
       :height="containerHeight"
+      v-vloading="tableLoading"
     >
       <!-- 空数据时的插槽 -->
       <template #empty>

src/views/Report/src/components/ReportDetail/src/ReportDetail.vue

@@ -1,95 +1,65 @@
 <script setup lang="ts">
 import ManageReportFields from './components/ManageReportFields.vue'
 import FieldsTable from './components/FieldsTable.vue'
+import { useCalculatingHeight } from '@/hooks/calculatingHeight'
+import { useUserStore } from '@/stores/modules/user'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const userStore = useUserStore()
+const formatDate = userStore.dateFormat
+const filterRef: Ref<HTMLElement | null> = ref(null)
+const containerHeight = useCalculatingHeight(document.documentElement, 336, [filterRef])
 
 const DownloadVisible = ref(false)
 const isFolded = ref(false)
 const ManageReportFieldsRef = ref()
-const FieldsTableRef = ref()
-const ManageCoulumns = ref([])
-const ShipperValue = ref('')
-const StatusValue = ref('')
-const VesselValue = ref('')
-const ContainerValue = ref('')
-const ServiceValue = ref('')
+const fieldsTableRef = ref()
 
-const Statusoptions = [
-  {
-    value: 'Option1',
-    label: 'Option1'
-  },
-  {
-    value: 'Option2',
-    label: 'Option2'
-  },
-  {
-    value: 'Option3',
-    label: 'Option3'
-  },
-  {
-    value: 'Option4',
-    label: 'Option4'
-  },
-  {
-    value: 'Option5',
-    label: 'Option5'
-  }
-]
-const Serviceoptions = [
-  {
-    value: 'Option1',
-    label: 'Option1'
-  },
-  {
-    value: 'Option2',
-    label: 'Option2'
-  },
-  {
-    value: 'Option3',
-    label: 'Option3'
-  },
-  {
-    value: 'Option4',
-    label: 'Option4'
-  },
-  {
-    value: 'Option5',
-    label: 'Option5'
-  }
-]
-const getManageCoulumns = (column: any) => {
-  ManageCoulumns.value = column
+const filterList = ref([])
+const handleFilterData = (data) => {
+  if (filterList.value.length) return
+  filterList.value = data.map((item) => {
+    let curData: any = {}
+    if (item.data_type === 'string') {
+      curData.value = ''
+    } else if (item.data_type === 'number' || item.data_type === 'date') {
+      curData.value = []
+    }
+    return {
+      label: item.label,
+      field: item.field,
+      type: item.data_type,
+      ...curData
+    }
+  })
 }
 
 const handleClickManageFields = () => {
-  ManageReportFieldsRef.value.openDialog(ManageCoulumns.value)
+  ManageReportFieldsRef.value.openDialog(route.query.id as string)
 }
 
 const handelSearchFilters = () => {
-  let obj = {
-    Shipper: ShipperValue.value,
-    Status: StatusValue.value,
-    Vessel: VesselValue.value,
-    Container: ContainerValue.value,
-    Service: ServiceValue.value
-  }
-  FieldsTableRef.value.handleSearch(obj)
+  fieldsTableRef.value.handleSearch()
 }
 const handleClickReset = () => {
-  ShipperValue.value = ''
-  StatusValue.value = ''
-  VesselValue.value = ''
-  ContainerValue.value = ''
-  ServiceValue.value = ''
+  filterList.value.forEach((item) => {
+    if (item.type === 'string') {
+      item.value = ''
+    } else if (item.type === 'number' || item.type === 'date') {
+      item.value = []
+    }
+  })
 }
 const downloadCoulumn = ref()
 const handleClickDownload = (val: string) => {
   DownloadVisible.value = false
-  FieldsTableRef.value.getExportTableData(val, downloadCoulumn.value)
+  fieldsTableRef.value.getExportTableData(val, downloadCoulumn.value)
 }
 
-const ApplyNewColumn = (column: any) => {
-  downloadCoulumn.value = column
+const applyNewColumn = () => {
+  fieldsTableRef.value.handleSearch()
 }
 </script>
 <template>
@@ -117,7 +87,7 @@ const ApplyNewColumn = (column: any) => {
         </el-button>
         <ManageReportFields
           ref="ManageReportFieldsRef"
-          @ApplyNewColumn="ApplyNewColumn"
+          @applyNewColumn="applyNewColumn"
         ></ManageReportFields>
       </div>
     </div>
@@ -144,44 +114,67 @@ const ApplyNewColumn = (column: any) => {
           >
         </div>
       </div>
-      <div class="filter-search">
-        <div class="filters-input">
-          <div class="filters-input-title">Shipper</div>
-          <el-input placeholder="Please enter..." v-model="ShipperValue"></el-input>
-        </div>
-        <div class="filters-input">
-          <div class="filters-input-title">Status</div>
-          <el-select v-model="StatusValue" placeholder="Please select...">
+      <div class="filter-search" ref="filterRef">
+        <div class="filters-input" v-for="item in filterList" :key="item.label">
+          <div class="filters-input-title">{{ item.label }}</div>
+          <el-input
+            v-if="item.type === 'string'"
+            placeholder="Please enter..."
+            v-model="item.value"
+          ></el-input>
+          <el-select
+            v-else-if="item.type === 'select'"
+            v-model="item.value"
+            placeholder="Please select..."
+          >
             <el-option
-              v-for="item in Statusoptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              v-for="ite in item.options"
+              :key="ite.value"
+              :label="ite.label"
+              :value="ite.value"
             />
           </el-select>
-        </div>
-        <div class="filters-input">
-          <div class="filters-input-title">Vessel</div>
-          <el-input placeholder="Please enter..." v-model="VesselValue"></el-input>
-        </div>
-        <div class="filters-input">
-          <div class="filters-input-title">Container</div>
-          <el-input placeholder="Please enter..." v-model="ContainerValue"></el-input>
-        </div>
-        <div class="filters-input">
-          <div class="filters-input-title">Service</div>
-          <el-select v-model="ServiceValue" placeholder="Please select...">
-            <el-option
-              v-for="item in Serviceoptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+          <div v-if="item.type === 'number'" style="display: flex; gap: 4px; align-items: center">
+            <el-input
+              placeholder="Please enter..."
+              class="no-spinner"
+              type="number"
+              v-model="item.value[0]"
+            ></el-input>
+            -
+            <el-input
+              placeholder="Please enter..."
+              class="no-spinner"
+              type="number"
+              v-model="item.value[1]"
+            ></el-input>
+          </div>
+          <div v-if="item.type === 'date'" style="display: flex; gap: 4px; align-items: center">
+            <el-date-picker
+              v-model="item.value[0]"
+              type="date"
+              placeholder="Pick a Date"
+              :format="formatDate"
+              valueFormat="MM/DD/YYYY"
             />
-          </el-select>
+            -
+            <el-date-picker
+              v-model="item.value[1]"
+              type="date"
+              placeholder="Pick a Date"
+              :format="formatDate"
+              valueFormat="MM/DD/YYYY"
+            />
+          </div>
         </div>
       </div>
     </div>
-    <FieldsTable ref="FieldsTableRef" @getManageCoulumns="getManageCoulumns"></FieldsTable>
+    <FieldsTable
+      ref="fieldsTableRef"
+      :containerHeight="containerHeight"
+      :filterData="filterList"
+      @filterOptionsLoaded="handleFilterData"
+    ></FieldsTable>
   </div>
 </template>
 
@@ -235,16 +228,11 @@ const ApplyNewColumn = (column: any) => {
     }
   }
   .filter-search {
-    // display: flex;
-    // flex-wrap: wrap;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
     grid-auto-rows: auto;
     gap: 8px;
     .filters-input {
-      // width: 24.5%;
-      // margin-right: 8px;
-      // margin-bottom: 8px;
       .filters-input-title {
         font-size: 12px;
         font-weight: 400;
@@ -252,13 +240,15 @@ const ApplyNewColumn = (column: any) => {
         margin-bottom: 4px;
       }
     }
-    // .filters-input:nth-child(4n){
-    //   margin-right: 0;
-    // }
   }
 }
-.fold-filter {
-  height: 48px;
-  overflow: hidden;
+:deep(.no-spinner input::-webkit-inner-spin-button),
+:deep(.no-spinner input::-webkit-outer-spin-button) {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+:deep(.no-spinner input[type='number']) {
+  -moz-appearance: textfield;
 }
 </style>

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

@@ -5,115 +5,30 @@ import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import { formatNumber } from '@/utils/tools'
 import dayjs from 'dayjs'
 import { autoWidth } from '@/utils/table'
-import { useLoadingState } from '@/stores/modules/loadingState'
-import { useCalculatingHeight } from '@/hooks/calculatingHeight'
+import { useRoute } from 'vue-router'
 
-const filterRef: Ref<HTMLElement | null> = ref(null)
+const route = useRoute()
+// const filterRef: Ref<HTMLElement | null> = ref(null)
 
-const containerHeight = useCalculatingHeight(document.documentElement, 446, [filterRef])
+const props = defineProps<{
+  containerHeight: any
+  filterData: any[]
+}>()
 
-const columnstest = ref([
-  {
-    title: 'Reference No. ',
-    field: 'reference_no',
-    displayName: 'Reference No. ',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'Purchase',
-    field: 'purchase',
-    displayName: 'Purchase',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'House Bill of Lading',
-    field: 'house_bill_of_lading',
-    displayName: '',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'Master Bill of Lading',
-    field: 'master_bill_of_lading',
-    displayName: '',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'Vessel Name',
-    field: 'vessel_name',
-    displayName: '',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'Status',
-    field: 'status',
-    displayName: '',
-    type: 'status',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'Container Number',
-    field: 'container_number',
-    displayName: '',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'Service Type',
-    field: 'service_type',
-    displayName: '',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  }
-])
-const ColumnSortValue = ref('')
-const SelectedValue = ref('')
-const ColumnSortoptions = [
-  {
-    value: 'Option1',
-    label: 'Option1'
-  },
-  {
-    value: 'Option2',
-    label: 'Option2'
-  },
-  {
-    value: 'Option3',
-    label: 'Option3'
-  },
-  {
-    value: 'Option4',
-    label: 'Option4'
-  },
-  {
-    value: 'Option5',
-    label: 'Option5'
-  }
-]
+const sortBy = ref('')
+const sortOrder = ref('')
+const sortByOptions = ref([])
 const sortOptions = ref([
   {
     label: 'Ascending',
-    value: 'Ascending'
+    value: 'asc'
   },
   {
     label: 'Descending',
-    value: 'Descending'
+    value: 'desc'
   }
 ])
 
-const tableLoadingColumn = ref(false)
 const tableLoadingTable = ref(false)
 const exportLoading = ref(false)
 
@@ -159,59 +74,55 @@ const handleColumns = (columns: any) => {
   })
   return newColumns
 }
-const emit = defineEmits(['getManageCoulumns'])
-// 获取表格列
-const getTableColumns = async () => {
-  // tableLoadingColumn.value = true
-  tableData.value.columns = handleColumns(columnstest.value)
-  emit('getManageCoulumns', columnstest.value)
-  // nextTick(() => {
-  //   tableRef.value && autoWidth(tableData.value, tableRef.value)
-  //   tableLoadingColumn.value = false
-  // })
-}
+const emit = defineEmits(['filterOptionsLoaded'])
+
 // 获取表格数据
 const getTableData = (isPageChange?: boolean) => {
   tableLoadingTable.value = true
+  let queryParams = {}
+  props.filterData.forEach((item) => {
+    if (item.type === 'string') {
+      queryParams[item.field] = item.value
+    } else if (item.type === 'number' || item.type === 'date') {
+      queryParams[item.field] = item.value
+    }
+  })
   $api
-    .getConfigurationList({
+    .getReportDetailTable({
       cp: pageInfo.value.pageNo,
       ps: pageInfo.value.pageSize,
-      rc: isPageChange ? pageInfo.value.total : -1
+      rc: isPageChange ? pageInfo.value.total : -1,
+      serial_no: route.query.id,
+      ...queryParams
     })
     .then((res: any) => {
       if (res.code === 200) {
-        pageInfo.value.total = Number(res.data.rc)
-        pageInfo.value.pageNo = res.data.cp
-        pageInfo.value.pageSize = res.data.ps
-        tableData.value.data = [
-          {
-            reference_no: '1234567890',
-            purchase: 'Purchase',
-            house_bill_of_lading: 'House Bill of Lading',
-            master_bill_of_lading: 'Master Bill of Lading',
-            vessel_name: 'Vessel Name',
-            status: 'Created',
-            container_number: 'Container Number',
-            service_type: 'Service Type'
-          }
-        ]
+        const tableDataValue = res.data.tableData
+
+        pageInfo.value.total = Number(tableDataValue.rc)
+        pageInfo.value.pageNo = tableDataValue.cp
+        pageInfo.value.pageSize = tableDataValue.ps
+        tableData.value.data = tableDataValue.searchData
+        tableData.value.columns = handleColumns(res.data.tableColumns)
+
+        const sortByData = res.data.sortBy
+        sortByOptions.value = sortByData.options
+        sortBy.value = sortByData.field
+        sortOrder.value = sortByData.order
+        emit('filterOptionsLoaded', res.data.filtersList)
       }
     })
     .finally(() => {
       nextTick(() => {
-        // tableRef.value && autoWidth(tableData.value, tableRef.value)
+        tableRef.value && autoWidth(tableData.value, tableRef.value)
         tableLoadingTable.value = false
       })
     })
 }
 
 // 查询时调用接口
-const handleSearch = (val: any) => {
-  tableLoadingTable.value = true
-  setTimeout(() => {
-    tableLoadingTable.value = false
-  }, 1000)
+const handleSearch = () => {
+  getTableData()
 }
 // 下载
 const getExportTableData = (type: string, column: any) => {
@@ -244,7 +155,6 @@ const getExportTableData = (type: string, column: any) => {
 useRowClickStyle(tableRef)
 
 onMounted(() => {
-  getTableColumns()
   getTableData()
 })
 
@@ -263,21 +173,16 @@ defineExpose({
     <div class="SettingTable">
       <div class="flex">
         <div class="Title">Report Data Review</div>
-        <div class="flex">
+        <div class="flex" style="margin-bottom: 6px">
           <span class="sort-text">Sort by:</span>
           <el-select
-            style="width: 160px; margin: 0 8px"
-            v-model="ColumnSortValue"
+            style="width: 200px; margin: 0 8px"
+            v-model="sortBy"
             placeholder="Please select..."
           >
-            <el-option
-              v-for="item in ColumnSortoptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
+            <el-option v-for="item in sortByOptions" :key="item" :label="item" :value="item" />
           </el-select>
-          <el-select style="width: 124px" v-model="SelectedValue" placeholder="Please select...">
+          <el-select style="width: 124px" v-model="sortOrder" placeholder="Please select...">
             <el-option
               v-for="item in sortOptions"
               :key="item.value"
@@ -291,8 +196,8 @@ defineExpose({
         ref="tableRef"
         :style="{ border: 'none' }"
         v-bind="tableData"
-        :height="containerHeight"
-        v-vloading="tableLoadingColumn"
+        :height="props.containerHeight"
+        v-vloading="tableLoadingTable"
       >
         <!-- 空数据时的插槽 -->
         <template #empty>

src/views/Report/src/components/ReportDetail/src/components/ManageReportFields.vue

@@ -1,116 +1,147 @@
 <script setup lang="ts">
-import { Item } from 'ant-design-vue/es/menu'
 import { VueDraggable } from 'vue-draggable-plus'
 interface ColumnItem {
-  name: string
-  title: string
-  field: string
-  checked: boolean
-  displayName: string
-  formatter: string
-  type: string
+  id: string
+  field_display_name: string
+  is_enabled: boolean
+  field_display_name_user: string
 }
 
-const ManageFieldsVisible = ref(false)
-const ManageFieldsColumns = ref<ColumnItem[]>([])
-const openDialog = (column: any) => {
-  ManageFieldsColumns.value = column
-  ManageFieldsVisible.value = true
-}
-const curSelectedColumns = computed(() => {
-  if (!ManageFieldsColumns.value) return []
-  return ManageFieldsColumns.value.filter((i: any) => i.checked)
+const manageFieldsVisible = ref(false)
+const manageFieldsColumns = ref<ColumnItem[]>([])
+const loading = ref(false)
+const serialNo = ref('')
+const openDialog = (id: string) => {
+  loading.value = true
+  manageFieldsVisible.value = true
+  serialNo.value = id
+  $api
+    .getManageFieldsList({ serial_no: id })
+    .then((res: any) => {
+      if (res.code === 200) {
+        manageFieldsColumns.value = res.data.data
+      }
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+const curSelectedNumber = computed(() => {
+  if (!manageFieldsColumns.value) return 0
+  return manageFieldsColumns.value.filter((item: any) => item.is_enabled).length
 })
-const handleMoveUpSelect = (item: any) => {
-  const index = ManageFieldsColumns.value.findIndex((i: any) => i.title === item.title)
+const handleMoveUpSelect = (data: any) => {
+  const index = manageFieldsColumns.value.findIndex((item: any) => item.id === data.id)
   if (index === 0) return
-  const temp = ManageFieldsColumns.value[index]
-  ManageFieldsColumns.value[index] = ManageFieldsColumns.value[index - 1]
-  ManageFieldsColumns.value[index - 1] = temp
+  const temp = manageFieldsColumns.value[index]
+  manageFieldsColumns.value[index] = manageFieldsColumns.value[index - 1]
+  manageFieldsColumns.value[index - 1] = temp
 }
-const handleMoveDownSelect = (item: any) => {
-  const index = ManageFieldsColumns.value.findIndex((i: any) => i.title === item.title)
-  if (index === ManageFieldsColumns.value.length - 1) return
-  const temp = ManageFieldsColumns.value[index]
-  ManageFieldsColumns.value[index] = ManageFieldsColumns.value[index + 1]
-  ManageFieldsColumns.value[index + 1] = temp
+const handleMoveDownSelect = (data: any) => {
+  const index = manageFieldsColumns.value.findIndex((item: any) => item.id === data.id)
+  if (index === manageFieldsColumns.value.length - 1) return
+  const temp = manageFieldsColumns.value[index]
+  manageFieldsColumns.value[index] = manageFieldsColumns.value[index + 1]
+  manageFieldsColumns.value[index + 1] = temp
 }
 
 const ShowAll = (type: string) => {
-  ManageFieldsColumns.value.forEach((item: any) => {
-    item.checked = type === 'show'
+  manageFieldsColumns.value.forEach((item: any) => {
+    item.is_enabled = type === 'show'
   })
 }
-const emit = defineEmits(['ApplyNewColumn'])
+const emit = defineEmits(['applyNewColumn'])
 const handleApply = () => {
-  ManageFieldsVisible.value = false
-  emit('ApplyNewColumn', curSelectedColumns.value)
+  console.log(manageFieldsColumns.value, 'value')
+  $api
+    .saveManageFieldsList({ serial_no: serialNo.value, fieldsList: manageFieldsColumns.value })
+    .then((res: any) => {
+      console.log(res, 'value')
+      if (res.code === 200) {
+        emit('applyNewColumn')
+        manageFieldsVisible.value = false
+      }
+    })
+}
+
+const clearData = () => {
+  manageFieldsColumns.value = []
 }
 
 defineExpose({
   openDialog
 })
-
 </script>
 <template>
   <el-dialog
     title="Manage Report Fields"
-    v-model="ManageFieldsVisible"
+    v-model="manageFieldsVisible"
     :show-close="false"
     footer-class="manage-footer-class"
-    width="800px">
+    width="800px"
+    @closed="clearData"
+  >
+    <div class="flex">
       <div class="flex">
-        <div class="flex">
-          <el-button style="height: 32px; padding: 0 13px;" type="default" @click="ShowAll('show')">Show All</el-button>
-          <el-button style="height: 32px; padding: 0 13px;" type="default" @click="ShowAll('hide')">Hide All</el-button>
-        </div>
-        <div class="fields-title">{{ curSelectedColumns.length }} of {{ ManageFieldsColumns.length }} Fields Visible</div>
+        <el-button style="height: 32px; padding: 0 13px" type="default" @click="ShowAll('show')"
+          >Show All</el-button
+        >
+        <el-button style="height: 32px; padding: 0 13px" type="default" @click="ShowAll('hide')"
+          >Hide All</el-button
+        >
       </div>
-      <div class="system-list">
-        <div class="system-list-one"></div>
-        <div class="system-list-two"></div>
-        <div class="system-list-name">System Name</div>
-        <div class="system-list-display-name">Display Name in Report</div>
-        <div class="system-list-icon"></div>
+      <div class="fields-title">
+        {{ curSelectedNumber }} of {{ manageFieldsColumns.length }} Fields Visible
       </div>
-      <VueDraggable
-        v-model="ManageFieldsColumns"  
-        class="column-list"
-        ghost-class="ghost-column"
-        :forceFallback="true"
-        fallback-class="fallback-class"
-      >
-        <template v-for="item in ManageFieldsColumns" :key="item.name">
-          <div class="column-item">
-            <div class="system-list-one">
-              <span class="font_family icon-icon_dragsort__b draggable-icon"></span>
-            </div>
-            <div class="system-list-two">
-              <el-checkbox v-model="item.checked"></el-checkbox>
-            </div>
-            <div class="system-list-name" :class="{'hide-class' : !item.checked}">{{ item.title }}</div>
-            <div class="system-list-display-name">
-              <el-input v-model="item.displayName"></el-input>
-            </div>
-            <div class="system-list-icon">
-              <span
-                class="font_family icon-icon_moveup_b move-icon"
-                style="margin-right: 16px;"
-                @click="handleMoveUpSelect(item)"
-              ></span>
-              <span
-                class="font_family icon-icon_movedown_b move-icon"
-                @click="handleMoveDownSelect(item)"
-              ></span>
-            </div>
+    </div>
+    <div class="system-list">
+      <div class="system-list-one"></div>
+      <div class="system-list-two"></div>
+      <div class="system-list-name">System Name</div>
+      <div class="system-list-display-name">Display Name in Report</div>
+      <div class="system-list-icon"></div>
+    </div>
+    <VueDraggable
+      v-vloading="loading"
+      v-model="manageFieldsColumns"
+      class="column-list"
+      ghost-class="ghost-column"
+      :forceFallback="true"
+      fallback-class="fallback-class"
+    >
+      <template v-for="item in manageFieldsColumns" :key="item.id">
+        <div class="column-item">
+          <div class="system-list-one">
+            <span class="font_family icon-icon_dragsort__b draggable-icon"></span>
+          </div>
+          <div class="system-list-two">
+            <el-checkbox v-model="item.is_enabled"></el-checkbox>
+          </div>
+          <div class="system-list-name" :class="{ 'hide-class': !item.is_enabled }">
+            {{ item.field_display_name }}
           </div>
-        </template>
-      </VueDraggable>
+          <div class="system-list-display-name">
+            <el-input v-model="item.field_display_name_user"></el-input>
+          </div>
+          <div class="system-list-icon">
+            <span
+              class="font_family icon-icon_moveup_b move-icon"
+              style="margin-right: 16px"
+              @click="handleMoveUpSelect(item)"
+            ></span>
+            <span
+              class="font_family icon-icon_movedown_b move-icon"
+              @click="handleMoveDownSelect(item)"
+            ></span>
+          </div>
+        </div>
+      </template>
+    </VueDraggable>
     <template #footer>
       <el-button
         type="default"
         style="height: 40px; padding: 8px 40px"
-        @click="ManageFieldsVisible = false"
+        @click="manageFieldsVisible = false"
         >Cancel</el-button
       >
       <el-button
@@ -143,7 +174,8 @@ defineExpose({
   border-radius: 6px;
   margin: 10px 0 0 0;
   color: var(--color-neutral-2);
-  .system-list-name,.system-list-display-name {
+  .system-list-name,
+  .system-list-display-name {
     font-size: 12px;
     color: var(--color-neutral-2);
     font-weight: 400;
@@ -228,4 +260,4 @@ defineExpose({
   background-color: var(--color-customize-column-item-hover-bg) !important;
   cursor: move !important;
 }
-</style>
+</style>

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

@@ -3,16 +3,51 @@ import ValidityPeriod from './components/ValidityPeriod.vue'
 import TimeRange from './components/TimeRange.vue'
 import EmailConfiguration from './components/EmailConfiguration.vue'
 import FieldsTable from './components/FieldsTable.vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const serialNo = route.query.id as string
 const isSaveDisabled = computed(() => {
   return true
 })
-const FieldsTableRef = ref()
+
+const fieldsTableRef = ref()
 
 const customStartDate = ref('')
 const customEndDate = ref('')
 const rollingStartDate = ref('')
 const rollingEndDate = ref('')
 const dataTimeField = ref('')
+
+const pageData: any = ref({
+  validityPeriod: {
+    type: '',
+    startDate: '',
+    endDate: ''
+  },
+  timeRange: {
+    endDate: '',
+    startDate: '',
+    type: '',
+    fieldType: ''
+  },
+  deliveryFrequency: {
+    deliveryFrequency: '',
+    emailRecipients: '',
+    scheduleDetails: {},
+    timezone: ''
+  }
+})
+
+onMounted(() => {
+  $api.getReportScheduleData({ serial_no: serialNo }).then((res: any) => {
+    if (res.code === 200) {
+      console.log(res.data)
+      pageData.value = res.data.showData
+    }
+  })
+})
+
 // 提交ValidityPeriod组件数据
 const handleSubmitValidity = (data: any) => {
   customStartDate.value = data.startDate
@@ -20,41 +55,27 @@ const handleSubmitValidity = (data: any) => {
   console.log(data)
 }
 
-// 提交TimeRange组件数据
-const handleSubmitRolling = (data: any) => {
-  dataTimeField.value = data.DataTimeSelection
-  rollingStartDate.value = data.rollingStartDate
-  rollingEndDate.value = data.rollingEndDate
+const handleSave = () => {
+  $api.saveReportScheduleData({}).then((res: any) => {})
 }
-interface data {
-  scheduleRuleValidityPeriod: {
-    type: 'permanent vaild' | 'custom period'
-    startDate: string
-    endDate: string
-  }
-  reportDataTimeRange: {
-    dateField: 'ETA' | 'ETD'
-    configurationMethod: 'Dynamic Rolling Range' | 'Fixed Range'
-    startDate: string
-    endDate: string
-  }
-  reportDeliveryFrequency: {
-    emailRecipients: string
-    timezone: string
-    deliveryFrequency: 'Daily' | 'Weekly' | 'Monthly' | 'Quarterly' | 'Yearly'
-    time: string
+
+const changeTimeRange = (data: any) => {
+  console.log(data, 'value')
+  const queryData = {
+    startDate: data.startDate,
+    endDate: data.endDate,
+    fieldType: data.fieldType,
+    type: data.type
   }
-  reportDataReview: {
-    searchData: []
-    tableColumns: []
-    sortOptions: []
+  if (data.type && (data.startDate || data.endDate)) {
+    fieldsTableRef.value.handleSearch(queryData)
   }
 }
 </script>
 <template>
   <div class="Title">
     <span>Schedule Configuration - Shipment Status Report</span>
-    <el-button :disabled="isSaveDisabled" class="el-button--main save_button"
+    <el-button @click="handleSave" :disabled="isSaveDisabled" class="el-button--main save_button"
       ><span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px"></span
       >Save</el-button
     >
@@ -66,22 +87,26 @@ interface data {
         Schedule Rule Validity Period
       </div>
       <div class="schedule_container">
-        <ValidityPeriod @handleSubmitValidity="handleSubmitValidity"> </ValidityPeriod>
+        <ValidityPeriod
+          :data="pageData.validityPeriod"
+          @handleSubmitValidity="handleSubmitValidity"
+        >
+        </ValidityPeriod>
       </div>
     </div>
     <div class="schedule_rule" style="margin: 8px 0">
       <div class="schedule_title">Report Data Time Range</div>
       <div class="schedule_container">
-        <TimeRange @handleSubmitRolling="handleSubmitRolling"> </TimeRange>
+        <TimeRange :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></EmailConfiguration>
+        <EmailConfiguration :data="pageData.deliveryFrequency"></EmailConfiguration>
       </div>
     </div>
-    <FieldsTable ref="FieldsTableRef"></FieldsTable>
+    <FieldsTable ref="fieldsTableRef"></FieldsTable>
   </div>
 </template>
 

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

@@ -1,423 +1,232 @@
 <script setup lang="ts">
-import { ElMessage } from 'element-plus'
-import type { SelectProps } from 'ant-design-vue';
+import { time } from 'console'
+import moment from 'moment-timezone'
+
+const props = defineProps<{
+  data: any
+}>()
+watch(
+  () => props.data,
+  (newVal) => {
+    emailValue.value = newVal.emailRecipients
+    timeZoneValue.value = newVal.timeZone
+    frequencyValue.value = newVal.deliveryFrequency
+    const dateData = newVal.scheduleDetails
+    timeValue.value = dateData.time
+    weeklyChecked.value = dateData.week
+    monthlyChecked.value = dateData.monthlyDay
+    quarterMonthValue.value = dateData.quarterMonth
+    dayValue.value = dateData.day
+    yearlyMonth.value = dateData.yearlyMonth
+  }
+)
 
 const emailValue = ref('')
-const TimeZoneValue = ref('')
-const FrequencyValue = ref('')
+const timeZoneValue = ref('UTC' + moment().tz(moment.tz.guess()).format('Z'))
+const frequencyValue = ref('Daily')
 const timeValue = ref('')
-const TimeItem = ref<SelectProps['options']>([
-  {
-    value: '00:00',
-    label: '00:00'
-  },
-  {
-    value: '00:30',
-    label: '00:30'
-  },
-  {
-    value: '01:00',
-    label: '01:00'
-  },
-  {
-    value: '01:30',
-    label: '01:30'
-  },
-  {
-    value: '02:00',
-    label: '02:00'
-  },
-  {
-    value: '02:30',
-    label: '02:30'
-  },
-  {
-    value: '03:00',
-    label: '03:00'
-  },
-  {
-    value: '03:30',
-    label: '03:30'
-  },
-  {
-    value: '04:00',
-    label: '04:00'
-  },
-  {
-    value: '04:30',
-    label: '04:30'
-  },
-  {
-    value: '05:00',
-    label: '05:00'
-  },
-  {
-    value: '05:30',
-    label: '05:30'
-  },
-  {
-    value: '06:00',
-    label: '06:00'
-  },
-  {
-    value: '06:30',
-    label: '06:30'
-  },
-  {
-    value: '07:00',
-    label: '07:00'
-  },
-  {
-    value: '07:30',
-    label: '07:30'
-  },
-  {
-    value: '08:00',
-    label: '08:00'
-  },
-  {
-    value: '08:30',
-    label: '08:30'
-  },
-  {
-    value: '09:00',
-    label: '09:00'
-  },
-  {
-    value: '09:30',
-    label: '09:30'
-  },
-  {
-    value: '10:00',
-    label: '10:00'
-  },
+const generateTimeOptions = (intervalMinutes = 30): Array<{ value: string; label: string }> => {
+  const options = []
+  const totalMinutesInDay = 24 * 60 // 1440
+
+  for (let i = 0; i < totalMinutesInDay; i += intervalMinutes) {
+    const hours = String(Math.floor(i / 60)).padStart(2, '0')
+    const minutes = String(i % 60).padStart(2, '0')
+    const timeStr = `${hours}:${minutes}`
+    options.push({
+      value: timeStr,
+      label: timeStr
+    })
+  }
+
+  return options
+}
+
+const timeItem = generateTimeOptions(30)
+
+const timezoneoptions = ref([
   {
-    value: '10:30',
-    label: '10:30'
+    label: 'UTC-08',
+    value: 'UTC-08:00'
   },
   {
-    value: '11:00',
-    label: '11:00'
+    label: 'UTC-07',
+    value: 'UTC-07:00'
   },
   {
-    value: '11:30',
-    label: '11:30'
+    label: 'UTC-06',
+    value: 'UTC-06:00'
   },
   {
-    value: '12:00',
-    label: '12:00'
+    label: 'UTC-05',
+    value: 'UTC-05:00'
   },
   {
-    value: '12:30',
-    label: '12:30'
+    label: 'UTC-04',
+    value: 'UTC-04:00'
   },
   {
-    value: '13:00',
-    label: '13:00'
+    label: 'UTC-03',
+    value: 'UTC-03:00'
   },
   {
-    value: '13:30',
-    label: '13:30'
+    label: 'UTC-02',
+    value: 'UTC-02:00'
   },
   {
-    value: '14:00',
-    label: '14:00'
+    label: 'UTC-01',
+    value: 'UTC-01:00'
   },
   {
-    value: '14:30',
-    label: '14:30'
+    label: 'UTC-00',
+    value: 'UTC-00:00'
   },
   {
-    value: '15:00',
-    label: '15:00'
+    label: 'UTC+01',
+    value: 'UTC+01:00'
   },
   {
-    value: '15:30',
-    label: '15:30'
+    label: 'UTC+02',
+    value: 'UTC+02:00'
   },
   {
-    value: '16:00',
-    label: '16:00'
+    label: 'UTC+03',
+    value: 'UTC+03:00'
   },
   {
-    value: '16:30',
-    label: '16:30'
+    label: 'UTC+04',
+    value: 'UTC+04:00'
   },
   {
-    value: '17:00',
-    label: '17:00'
+    label: 'UTC+05',
+    value: 'UTC+05:00'
   },
   {
-    value: '17:30',
-    label: '17:30'
+    label: 'UTC+05:30',
+    value: 'UTC+05:30'
   },
   {
-    value: '18:00',
-    label: '18:00'
+    label: 'UTC+06',
+    value: 'UTC+06:00'
   },
   {
-    value: '18:30',
-    label: '18:30'
+    label: 'UTC+07',
+    value: 'UTC+07:00'
   },
   {
-    value: '19:00',
-    label: '19:00'
+    label: 'UTC+08',
+    value: 'UTC+08:00'
   },
   {
-    value: '19:30',
-    label: '19:30'
+    label: 'UTC+09',
+    value: 'UTC+09:00'
   },
   {
-    value: '20:00',
-    label: '20:00'
+    label: 'UTC+10',
+    value: 'UTC+10:00'
   },
   {
-    value: '20:30',
-    label: '20:30'
+    label: 'UTC+11',
+    value: 'UTC+11:00'
   },
   {
-    value: '21:00',
-    label: '21:00'
-  },
+    label: 'UTC+12',
+    value: 'UTC+12:00'
+  }
+])
+
+const frequencyOptions = ref([
   {
-    value: '21:30',
-    label: '21:30'
+    value: 'Daily',
+    label: 'Daily'
   },
   {
-    value: '22:00',
-    label: '22:00'
+    value: 'Weekly',
+    label: 'Weekly'
   },
   {
-    value: '22:30',
-    label: '22:30'
+    value: 'Monthly',
+    label: 'Monthly'
   },
   {
-    value: '23:00',
-    label: '23:00'
+    value: 'Quarterly',
+    label: 'Quarterly'
   },
   {
-    value: '23:30',
-    label: '23:30'
+    value: 'Yearly',
+    label: 'Yearly'
   }
 ])
-const Timezoneoptions = ref(
-  [
-    {
-      label: 'UTC-08',
-      value: 'UTC-08:00'
-    },
-    {
-      label: 'UTC-07',
-      value: 'UTC-07:00'
-    },
-    {
-      label: 'UTC-06',
-      value: 'UTC-06:00'
-    },
-    {
-      label: 'UTC-05',
-      value: 'UTC-05:00'
-    },
-    {
-      label: 'UTC-04',
-      value: 'UTC-04:00'
-    },
-    {
-      label: 'UTC-03',
-      value: 'UTC-03:00'
-    },
-    {
-      label: 'UTC-02',
-      value: 'UTC-02:00'
-    },
-    {
-      label: 'UTC-01',
-      value: 'UTC-01:00'
-    },
-    {
-      label: 'UTC-00',
-      value: 'UTC-00:00'
-    },
-    {
-      label: 'UTC+01',
-      value: 'UTC+01:00'
-    },
-    {
-      label: 'UTC+02',
-      value: 'UTC+02:00'
-    },
-    {
-      label: 'UTC+03',
-      value: 'UTC+03:00'
-    },
-    {
-      label: 'UTC+04',
-      value: 'UTC+04:00'
-    },
-    {
-      label: 'UTC+05',
-      value: 'UTC+05:00'
-    },
-    {
-      label: 'UTC+05:30',
-      value: 'UTC+05:30'
-    },
-    {
-      label: 'UTC+06',
-      value: 'UTC+06:00'
-    },
-    {
-      label: 'UTC+07',
-      value: 'UTC+07:00'
-    },
-    {
-      label: 'UTC+08',
-      value: 'UTC+08:00'
-    },
-    {
-      label: 'UTC+09',
-      value: 'UTC+09:00'
-    },
-    {
-      label: 'UTC+10',
-      value: 'UTC+10:00'
-    },
-    {
-      label: 'UTC+11',
-      value: 'UTC+11:00'
-    },
-    {
-      label: 'UTC+12',
-      value: 'UTC+12:00'
-    }
-  ]
-)
-const Frequencyoptions = ref(
-  [
-    {
-      value: 'Daily',
-      label: 'Daily'
-    },
-    {
-      value: 'Weekly',
-      label: 'Weekly'
-    },
-    {
-      value: 'Monthly',
-      label: 'Monthly'
-    },
-    {
-      value: 'Quarterly',
-      label: 'Quarterly'
-    },
-    {
-      value: 'Yearly',
-      label: 'Yearly'
-    }
-  ]
-)
 
-const weeklyCheckList = ref(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'])
-const maxWeeklySelected = computed(() => weeklyCheckList.value.length - 1)
+const weeklyCheckList = ref([
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+  'Sunday'
+])
 const weeklyChecked = ref([])
 
-const MonthlyCheckList = computed(() => {
-  const now = new Date()
-  const year = now.getFullYear()
-  const month = now.getMonth()
-  const lastDay = new Date(year, month + 1, 0).getDate()
-  const daysArray: string[] = []
-  for (let i = 1; i <= lastDay; i++) {
-    daysArray.push(i.toString())
-  }
-  return daysArray
-})
-const maxMonthlySelected = computed(() => MonthlyCheckList.value.length - 1)
 const monthlyChecked = ref([])
 
-const isFebruary = computed(() => MonthlyCheckList.value.length <= 28)
-const is29 = computed(() => MonthlyCheckList.value.length == 29)
-
-const YearlyCheckList = ref(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'])
-const dayList = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', 'Last Day'])
-const maxYearlySelected = computed(() => YearlyCheckList.value.length - 1)
-const yearlyChecked = ref([])
-const YearlyDayValue = ref('')
+const yearlyCheckList = ref([
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
+])
 
-const QuarterMonth = ref(['1st Month', '2nd Month', '3rd Month'])
-const QuarterMonthValue = ref('')
+const yearlyMonth = ref([])
+const dayValue = ref('')
 
-const showWarning = () => {
-  ElMessage({
-    message: 'If you want to select all, please choose the Daily option!',
-    type: 'warning'
-  })
-}
-const handleChangeCheckbox = (value: any) => {
-  if(value == 'weekly') {
-    if(weeklyChecked.value.length == maxWeeklySelected.value) {
-      showWarning()
-    }
-  } else if(value == 'monthly') { 
-    if(monthlyChecked.value.length == maxMonthlySelected.value) {
-      showWarning()
-    }
-  } else if(value == 'yearly') { 
-    if(yearlyChecked.value.length == maxYearlySelected.value) {
-      showWarning()
-    }
-  }
-}
+const quarterMonth = ref(['1st Month', '2nd Month', '3rd Month'])
+const quarterMonthValue = ref('')
 
 // 切换frequency时，清空内容
-const handleClickFrequency = (value: string) => {
-  if(value == 'Daily') {
-    weeklyChecked.value = []
-    monthlyChecked.value = []
-    yearlyChecked.value = []
-    QuarterMonthValue.value = ''
-    YearlyDayValue.value = ''
-  } else if(value == 'Weekly') { 
-    monthlyChecked.value = []
-    yearlyChecked.value = []
-    QuarterMonthValue.value = ''
-    YearlyDayValue.value = ''
-  } else if(value == 'Monthly') { 
-    weeklyChecked.value = []
-    yearlyChecked.value = []
-    QuarterMonthValue.value = ''
-    YearlyDayValue.value = ''
-  } else if(value == 'Quarterly') { 
-    weeklyChecked.value = []
-    monthlyChecked.value = []
-    yearlyChecked.value = []
-    YearlyDayValue.value = ''
-  } else if(value == 'Yearly') { 
-    weeklyChecked.value = []
-    monthlyChecked.value = []
-    QuarterMonthValue.value = ''
-  }
+const handleClickFrequency = () => {
+  weeklyChecked.value = []
+  monthlyChecked.value = []
+  yearlyMonth.value = []
+  timeValue.value = ''
+  quarterMonthValue.value = ''
+  dayValue.value = ''
 }
 </script>
 <template>
-  <div style="padding: 8px 16px 0 16px;">
+  <div style="padding: 8px 16px 0 16px">
     <div class="title">
       <span class="stars_red">*</span>
       Email Recipients
     </div>
-    <el-input v-model="emailValue" :rows="4" type="textarea" placeholder="Enter email address separated by commas" style="margin-top: 4px;"></el-input>
+    <el-input
+      v-model="emailValue"
+      :rows="4"
+      type="textarea"
+      placeholder="Enter email address separated by commas"
+      style="margin-top: 4px"
+    ></el-input>
   </div>
   <div class="line"></div>
-  <div style="padding: 0 16px;">
+  <div style="padding: 0 16px">
     <div class="flex">
-      <div class="timezone" style="margin-right: 8px;">
+      <div class="timezone" style="margin-right: 8px">
         <div class="title">
           <span class="stars_red">*</span>
           Timezone
         </div>
-        <el-select class="select_time" v-model="TimeZoneValue" placeholder="Please select...">
+        <el-select class="select_time" v-model="timeZoneValue" placeholder="Please select...">
           <el-option
-            v-for="item in Timezoneoptions"
+            v-for="item in timezoneoptions"
             :key="item.value"
             :label="item.label"
             :value="item.value"
@@ -429,9 +238,14 @@ const handleClickFrequency = (value: string) => {
           <span class="stars_red">*</span>
           Delivery Frequency
         </div>
-        <el-select class="select_time" v-model="FrequencyValue" placeholder="Please select..." @change="handleClickFrequency">
+        <el-select
+          class="select_time"
+          v-model="frequencyValue"
+          placeholder="Please select..."
+          @change="handleClickFrequency"
+        >
           <el-option
-            v-for="item in Frequencyoptions"
+            v-for="item in frequencyOptions"
             :key="item.value"
             :label="item.label"
             :value="item.value"
@@ -440,90 +254,69 @@ const handleClickFrequency = (value: string) => {
       </div>
     </div>
     <div class="schedule_details">
-      <div class="detail_title">
-        Schedule Details
-      </div>
-      <div class="weelkly_detailes" v-if="FrequencyValue == 'Weekly'">
+      <div class="detail_title">Schedule Details</div>
+      <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
-          :max="maxWeeklySelected"
-          v-model="weeklyChecked"
-          style="margin: 4px 0 16px 0;"
-          @change="handleChangeCheckbox('weekly')"
-        >
-          <el-checkbox border v-for="item in weeklyCheckList" :key="item" :value="item">
+        <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">
             {{ item }}
           </el-checkbox>
         </el-checkbox-group>
       </div>
-      <div class="monthly_detailes" :class="{'february_class' : isFebruary, 'nine_class' : is29}" 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)
         </div>
-        <el-checkbox-group
-          :max="maxMonthlySelected"
-          v-model="monthlyChecked"
-          style="margin: 4px 0 16px 0;"
-          @change="handleChangeCheckbox('monthly')"
-        >
-          <el-checkbox border v-for="item in MonthlyCheckList" :key="item" :value="item">
+        <el-checkbox-group v-model="monthlyChecked" style="margin: 4px 0 16px 0">
+          <el-checkbox border v-for="item in 31" :key="item" :value="item">
             {{ item }}
           </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
-          :max="maxYearlySelected"
-          v-model="yearlyChecked"
-          style="margin: 4px 0 16px 0;"
-          @change="handleChangeCheckbox('yearly')"
-        >
-          <el-checkbox border v-for="item in YearlyCheckList" :key="item" :value="item">
+        <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">
             {{ item }}
           </el-checkbox>
         </el-checkbox-group>
       </div>
-      <div style="display: flex;">
-        <div class="details_time" v-if="FrequencyValue == 'Quarterly'">
+      <div class="schedule-details-selects" style="display: flex">
+        <div class="details_time" v-if="frequencyValue == 'Quarterly'">
           <div class="title">
             <span class="stars_red">*</span>
             Quarter Month
           </div>
-          <el-select 
-            style="width: 480px;margin: 4px 8px 0 0;"
-            v-model="QuarterMonthValue"
-            placeholder="Please select...">
+          <el-select
+            style="margin: 4px 8px 0 0"
+            v-model="quarterMonthValue"
+            placeholder="Please select..."
+          >
             <el-option
-              v-for="item in QuarterMonth"
+              v-for="(item, index) in quarterMonth"
               :key="item"
               :label="item"
-              :value="item"
+              :value="index"
             />
           </el-select>
         </div>
-        <div class="details_time" v-if="FrequencyValue == 'Yearly'">
+        <div
+          class="details_time"
+          v-if="frequencyValue == 'Yearly' || frequencyValue == 'Quarterly'"
+        >
           <div class="title">
             <span class="stars_red">*</span>
             Day
           </div>
-          <el-select 
-            style="width: 480px;margin: 4px 8px 0 0;"
-            v-model="YearlyDayValue"
-            placeholder="Please select...">
-            <el-option
-              v-for="item in dayList"
-              :key="item"
-              :label="item"
-              :value="item"
-            />
+          <el-select style="margin: 4px 8px 0 0" v-model="dayValue" placeholder="Please select...">
+            <el-option v-for="item in 31" :key="item" :label="item" :value="item" />
           </el-select>
         </div>
         <div class="details_time">
@@ -533,8 +326,17 @@ const handleClickFrequency = (value: string) => {
           </div>
           <a-select
             v-model:value="timeValue"
-            :options="TimeItem"
-            style="width: 480px;margin: 4px 0 0 0;"
+            :options="timeItem"
+            style="width: 100%; margin: 4px 0 0 0"
+            :style="{
+              maxWidth:
+                frequencyValue === 'Daily' ||
+                frequencyValue === 'Weekly' ||
+                frequencyValue === 'Monthly' ||
+                !frequencyValue
+                  ? '472px'
+                  : '100%'
+            }"
             placeholder="Please select..."
           >
             <template #suffixIcon>
@@ -564,7 +366,7 @@ const handleClickFrequency = (value: string) => {
   }
 }
 .line {
-  margin: 16px 0 ;
+  margin: 16px 0;
   border-bottom: 1px solid var(--color-border);
 }
 .flex {
@@ -590,6 +392,16 @@ const handleClickFrequency = (value: string) => {
     margin-bottom: 20px;
   }
 }
+.schedule-details-selects {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  padding-right: 8px;
+  .details_time {
+    flex: 1;
+  }
+}
+
 :deep(.el-checkbox.is-bordered) {
   width: 14.2%;
   margin-right: 0;
@@ -643,4 +455,4 @@ const handleClickFrequency = (value: string) => {
 :deep(.yearly_detailes .el-checkbox.is-bordered:last-child) {
   border-radius: 0 0 6px 0;
 }
-</style>
+</style>

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

@@ -5,108 +5,25 @@ import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import { formatNumber } from '@/utils/tools'
 import dayjs from 'dayjs'
 import { autoWidth } from '@/utils/table'
-import { useLoadingState } from '@/stores/modules/loadingState'
-import { useCalculatingHeight } from '@/hooks/calculatingHeight'
 import ManageReportFields from './ManageReportFields.vue'
+import { useRoute } from 'vue-router'
 
-const filterRef: Ref<HTMLElement | null> = ref(null)
+const route = useRoute()
 
-const containerHeight = useCalculatingHeight(document.documentElement, 446, [filterRef])
-
-const columnstest = ref([
-  {
-    title: 'Reference No. ',
-    field: 'reference_no',
-    displayName: 'Reference No. ',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'Purchase',
-    field: 'purchase',
-    displayName: 'Purchase',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'House Bill of Lading',
-    field: 'house_bill_of_lading',
-    displayName: '',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'Master Bill of Lading',
-    field: 'master_bill_of_lading',
-    displayName: '',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'Vessel Name',
-    field: 'vessel_name',
-    displayName: '',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'Status',
-    field: 'status',
-    displayName: '',
-    type: 'status',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'Container Number',
-    field: 'container_number',
-    displayName: '',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  },
-  {
-    title: 'Service Type',
-    field: 'service_type',
-    displayName: '',
-    type: 'normal',
-    formatter: '',
-    checked: true
-  }
-])
-const ColumnSortValue = ref('')
+const orderBy = ref('')
 const ManageReportFieldsRef = ref()
 const ColumnSortoptions = [
   {
-    value: 'Option1',
-    label: 'Option1'
-  },
-  {
-    value: 'Option2',
-    label: 'Option2'
+    label: 'ETA',
+    value: 'eta'
   },
   {
-    value: 'Option3',
-    label: 'Option3'
-  },
-  {
-    value: 'Option4',
-    label: 'Option4'
-  },
-  {
-    value: 'Option5',
-    label: 'Option5'
+    label: 'ETD',
+    value: 'etd'
   }
 ]
 
-const loadingState = useLoadingState()
-const tableLoadingColumn = ref(false)
-const tableLoadingTable = ref(false)
+const tableLoading = ref(false)
 const exportLoading = ref(false)
 
 const tableData = ref<VxeGridProps<any>>({
@@ -151,57 +68,54 @@ const handleColumns = (columns: any) => {
   })
   return newColumns
 }
-// 获取表格列
-const getTableColumns = async () => {
-  // tableLoadingColumn.value = true
-  tableData.value.columns = handleColumns(columnstest.value)
-  // nextTick(() => {
-  //   tableRef.value && autoWidth(tableData.value, tableRef.value)
-  //   tableLoadingColumn.value = false
-  // })
-}
+
 // 获取表格数据
 const getTableData = (isPageChange?: boolean) => {
-  tableLoadingTable.value = true
+  tableLoading.value = true
+  console.log(queryParams.value, 'params')
+  console.log(pageInfo.value, 'params')
   $api
-    .getConfigurationList({
+    .getReportScheduleTable({
       cp: pageInfo.value.pageNo,
       ps: pageInfo.value.pageSize,
-      rc: isPageChange ? pageInfo.value.total : -1
+      rc: isPageChange ? pageInfo.value.total : -1,
+      orderBy: orderBy.value,
+      ...queryParams.value
     })
     .then((res: any) => {
       if (res.code === 200) {
         pageInfo.value.total = Number(res.data.rc)
         pageInfo.value.pageNo = res.data.cp
         pageInfo.value.pageSize = res.data.ps
-        tableData.value.data = [
-          {
-            reference_no: '1234567890',
-            purchase: 'Purchase',
-            house_bill_of_lading: 'House Bill of Lading',
-            master_bill_of_lading: 'Master Bill of Lading',
-            vessel_name: 'Vessel Name',
-            status: 'Created',
-            container_number: 'Container Number',
-            service_type: 'Service Type'
-          }
-        ]
+        const tableDataValue = res.data.tableData
+
+        pageInfo.value.total = Number(tableDataValue.rc)
+        pageInfo.value.pageNo = tableDataValue.cp
+        pageInfo.value.pageSize = tableDataValue.ps
+        tableData.value.data = tableDataValue.searchData
+
+        tableData.value.columns = handleColumns(res.data.tableColumns)
       }
     })
     .finally(() => {
       nextTick(() => {
-        // tableRef.value && autoWidth(tableData.value, tableRef.value)
-        tableLoadingTable.value = false
+        tableRef.value && autoWidth(tableData.value, tableRef.value)
+        tableLoading.value = false
       })
     })
 }
 
+const queryParams = ref({
+  serial_no: route.query.id
+})
 // 查询时调用接口
 const handleSearch = (val: any) => {
-  tableLoadingTable.value = true
-  setTimeout(() => {
-    tableLoadingTable.value = false
-  }, 1000)
+  queryParams.value = val
+  if (!orderBy.value) {
+    orderBy.value = val.fieldType
+  }
+
+  getTableData()
 }
 // 下载
 const getExportTableData = (type: string, column: any) => {
@@ -231,21 +145,16 @@ const getExportTableData = (type: string, column: any) => {
 }
 
 const handleClickManageFields = () => {
-  ManageReportFieldsRef.value.openDialog(tableData.value.columns)
+  ManageReportFieldsRef.value.openDialog(route.query.id as string)
 }
 
-const ApplyNewColumn = (column: any) => {
-  tableData.value.columns = column
+const applyNewColumn = () => {
+  getTableData()
 }
 
 // 实现行点击样式
 useRowClickStyle(tableRef)
 
-onMounted(() => {
-  getTableColumns()
-  getTableData()
-})
-
 defineExpose({
   handleSearch,
   getExportTableData
@@ -265,7 +174,7 @@ defineExpose({
           <span class="sort-text">Sort by:</span>
           <el-select
             style="width: 160px; margin: 0 8px"
-            v-model="ColumnSortValue"
+            v-model="orderBy"
             placeholder="Please select..."
           >
             <el-option
@@ -280,7 +189,7 @@ defineExpose({
           </el-button>
           <ManageReportFields
             ref="ManageReportFieldsRef"
-            @ApplyNewColumn="ApplyNewColumn"
+            @applyNewColumn="applyNewColumn"
           ></ManageReportFields>
         </div>
       </div>
@@ -288,8 +197,8 @@ defineExpose({
         ref="tableRef"
         :style="{ border: 'none' }"
         v-bind="tableData"
-        :height="containerHeight"
-        v-vloading="tableLoadingColumn || tableLoadingTable || loadingState.trackingTableLoading"
+        height="450"
+        v-vloading="tableLoading"
       >
         <!-- 空数据时的插槽 -->
         <template #empty>

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

@@ -1,116 +1,147 @@
 <script setup lang="ts">
-import { Item } from 'ant-design-vue/es/menu'
 import { VueDraggable } from 'vue-draggable-plus'
 interface ColumnItem {
-  name: string
-  title: string
-  field: string
-  checked: boolean
-  displayName: string
-  formatter: string
-  type: string
+  id: string
+  field_display_name: string
+  is_enabled: boolean
+  field_display_name_user: string
 }
 
-const ManageFieldsVisible = ref(false)
-const ManageFieldsColumns = ref<ColumnItem[]>([])
-const openDialog = (column: any) => {
-  ManageFieldsColumns.value = column
-  ManageFieldsVisible.value = true
-}
-const curSelectedColumns = computed(() => {
-  if (!ManageFieldsColumns.value) return []
-  return ManageFieldsColumns.value.filter((i: any) => i.checked)
+const manageFieldsVisible = ref(false)
+const manageFieldsColumns = ref<ColumnItem[]>([])
+const loading = ref(false)
+const serialNo = ref('')
+const openDialog = (id: string) => {
+  loading.value = true
+  manageFieldsVisible.value = true
+  serialNo.value = id
+  $api
+    .getManageFieldsList({ serial_no: id })
+    .then((res: any) => {
+      if (res.code === 200) {
+        manageFieldsColumns.value = res.data.data
+      }
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+const curSelectedNumber = computed(() => {
+  if (!manageFieldsColumns.value) return 0
+  return manageFieldsColumns.value.filter((item: any) => item.is_enabled).length
 })
-const handleMoveUpSelect = (item: any) => {
-  const index = ManageFieldsColumns.value.findIndex((i: any) => i.title === item.title)
+const handleMoveUpSelect = (data: any) => {
+  const index = manageFieldsColumns.value.findIndex((item: any) => item.id === data.id)
   if (index === 0) return
-  const temp = ManageFieldsColumns.value[index]
-  ManageFieldsColumns.value[index] = ManageFieldsColumns.value[index - 1]
-  ManageFieldsColumns.value[index - 1] = temp
+  const temp = manageFieldsColumns.value[index]
+  manageFieldsColumns.value[index] = manageFieldsColumns.value[index - 1]
+  manageFieldsColumns.value[index - 1] = temp
 }
-const handleMoveDownSelect = (item: any) => {
-  const index = ManageFieldsColumns.value.findIndex((i: any) => i.title === item.title)
-  if (index === ManageFieldsColumns.value.length - 1) return
-  const temp = ManageFieldsColumns.value[index]
-  ManageFieldsColumns.value[index] = ManageFieldsColumns.value[index + 1]
-  ManageFieldsColumns.value[index + 1] = temp
+const handleMoveDownSelect = (data: any) => {
+  const index = manageFieldsColumns.value.findIndex((item: any) => item.id === data.id)
+  if (index === manageFieldsColumns.value.length - 1) return
+  const temp = manageFieldsColumns.value[index]
+  manageFieldsColumns.value[index] = manageFieldsColumns.value[index + 1]
+  manageFieldsColumns.value[index + 1] = temp
 }
 
 const ShowAll = (type: string) => {
-  ManageFieldsColumns.value.forEach((item: any) => {
-    item.checked = type === 'show'
+  manageFieldsColumns.value.forEach((item: any) => {
+    item.is_enabled = type === 'show'
   })
 }
-const emit = defineEmits(['ApplyNewColumn'])
+const emit = defineEmits(['applyNewColumn'])
 const handleApply = () => {
-  ManageFieldsVisible.value = false
-  emit('ApplyNewColumn', curSelectedColumns.value)
+  console.log(manageFieldsColumns.value, 'value')
+  $api
+    .saveManageFieldsList({ serial_no: serialNo.value, fieldsList: manageFieldsColumns.value })
+    .then((res: any) => {
+      console.log(res, 'value')
+      if (res.code === 200) {
+        emit('applyNewColumn')
+        manageFieldsVisible.value = false
+      }
+    })
+}
+
+const clearData = () => {
+  manageFieldsColumns.value = []
 }
 
 defineExpose({
   openDialog
 })
-
 </script>
 <template>
   <el-dialog
     title="Manage Report Fields"
-    v-model="ManageFieldsVisible"
+    v-model="manageFieldsVisible"
     :show-close="false"
     footer-class="manage-footer-class"
-    width="800px">
+    width="800px"
+    @closed="clearData"
+  >
+    <div class="flex">
       <div class="flex">
-        <div class="flex">
-          <el-button style="height: 32px; padding: 0 13px;" type="default" @click="ShowAll('show')">Show All</el-button>
-          <el-button style="height: 32px; padding: 0 13px;" type="default" @click="ShowAll('hide')">Hide All</el-button>
-        </div>
-        <div class="fields-title">{{ curSelectedColumns.length }} of {{ ManageFieldsColumns.length }} Fields Visible</div>
+        <el-button style="height: 32px; padding: 0 13px" type="default" @click="ShowAll('show')"
+          >Show All</el-button
+        >
+        <el-button style="height: 32px; padding: 0 13px" type="default" @click="ShowAll('hide')"
+          >Hide All</el-button
+        >
       </div>
-      <div class="system-list">
-        <div class="system-list-one"></div>
-        <div class="system-list-two"></div>
-        <div class="system-list-name">System Name</div>
-        <div class="system-list-display-name">Display Name in Report</div>
-        <div class="system-list-icon"></div>
+      <div class="fields-title">
+        {{ curSelectedNumber }} of {{ manageFieldsColumns.length }} Fields Visible
       </div>
-      <VueDraggable
-        v-model="ManageFieldsColumns"  
-        class="column-list"
-        ghost-class="ghost-column"
-        :forceFallback="true"
-        fallback-class="fallback-class"
-      >
-        <template v-for="item in ManageFieldsColumns" :key="item.name">
-          <div class="column-item">
-            <div class="system-list-one">
-              <span class="font_family icon-icon_dragsort__b draggable-icon"></span>
-            </div>
-            <div class="system-list-two">
-              <el-checkbox v-model="item.checked"></el-checkbox>
-            </div>
-            <div class="system-list-name" :class="{'hide-class' : !item.checked}">{{ item.title }}</div>
-            <div class="system-list-display-name">
-              <el-input v-model="item.displayName"></el-input>
-            </div>
-            <div class="system-list-icon">
-              <span
-                class="font_family icon-icon_moveup_b move-icon"
-                style="margin-right: 16px;"
-                @click="handleMoveUpSelect(item)"
-              ></span>
-              <span
-                class="font_family icon-icon_movedown_b move-icon"
-                @click="handleMoveDownSelect(item)"
-              ></span>
-            </div>
+    </div>
+    <div class="system-list">
+      <div class="system-list-one"></div>
+      <div class="system-list-two"></div>
+      <div class="system-list-name">System Name</div>
+      <div class="system-list-display-name">Display Name in Report</div>
+      <div class="system-list-icon"></div>
+    </div>
+    <VueDraggable
+      v-vloading="loading"
+      v-model="manageFieldsColumns"
+      class="column-list"
+      ghost-class="ghost-column"
+      :forceFallback="true"
+      fallback-class="fallback-class"
+    >
+      <template v-for="item in manageFieldsColumns" :key="item.id">
+        <div class="column-item">
+          <div class="system-list-one">
+            <span class="font_family icon-icon_dragsort__b draggable-icon"></span>
+          </div>
+          <div class="system-list-two">
+            <el-checkbox v-model="item.is_enabled"></el-checkbox>
+          </div>
+          <div class="system-list-name" :class="{ 'hide-class': !item.is_enabled }">
+            {{ item.field_display_name }}
           </div>
-        </template>
-      </VueDraggable>
+          <div class="system-list-display-name">
+            <el-input v-model="item.field_display_name_user"></el-input>
+          </div>
+          <div class="system-list-icon">
+            <span
+              class="font_family icon-icon_moveup_b move-icon"
+              style="margin-right: 16px"
+              @click="handleMoveUpSelect(item)"
+            ></span>
+            <span
+              class="font_family icon-icon_movedown_b move-icon"
+              @click="handleMoveDownSelect(item)"
+            ></span>
+          </div>
+        </div>
+      </template>
+    </VueDraggable>
     <template #footer>
       <el-button
         type="default"
         style="height: 40px; padding: 8px 40px"
-        @click="ManageFieldsVisible = false"
+        @click="manageFieldsVisible = false"
         >Cancel</el-button
       >
       <el-button
@@ -143,7 +174,8 @@ defineExpose({
   border-radius: 6px;
   margin: 10px 0 0 0;
   color: var(--color-neutral-2);
-  .system-list-name,.system-list-display-name {
+  .system-list-name,
+  .system-list-display-name {
     font-size: 12px;
     color: var(--color-neutral-2);
     font-weight: 400;
@@ -228,4 +260,4 @@ defineExpose({
   background-color: var(--color-customize-column-item-hover-bg) !important;
   cursor: move !important;
 }
-</style>
+</style>

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

@@ -3,155 +3,99 @@ import { useUserStore } from '@/stores/modules/user'
 import dayjs from 'dayjs'
 
 const userStore = useUserStore()
-const DataTimeSelection = ref('')
+const fieldType = ref('')
 const startDate = ref('')
 const endDate = ref('')
-const RollingValueStart = ref()
-const RollingValueeEnd = ref()
-const radio = ref(0)
+const rollingValueStart = ref(0)
+const rollingValueEnd = ref(0)
+const type = ref('')
 const fixedRangeRadio = ref('')
 const rollingRangeRadio = ref('')
-const DataTimeoptions = ref([
+const dataTimeoptions = ref([
   {
-    value: 'ETD',
-    label: 'ETD'
+    label: 'ETD',
+    value: 'etd'
   },
   {
-    value: 'ETA',
-    label: 'ETA'
+    label: 'ETA',
+    value: 'eta'
   }
 ])
 
-const isshowRolling = computed(() => radio.value === 1)
-const isShowFixed = computed(() => radio.value === 2)
+const props = defineProps<{
+  data: any
+}>()
+watch(
+  () => props.data,
+  (newVal) => {
+    fieldType.value = newVal.fieldType
+    type.value = newVal.type
+    if (type.value === 'dynamic_rolling') {
+      rollingValueStart.value = newVal.startDate
+      rollingValueEnd.value = newVal.endDate
+    } else if (type.value === 'fixed') {
+      startDate.value = newVal.startDate
+      endDate.value = newVal.endDate
+    }
+  }
+)
+const isShowRolling = computed(() => type.value === 'dynamic_rolling')
+const isShowFixed = computed(() => type.value === 'fixed')
 
 const clampedValueStart = computed({
-  get: () => RollingValueStart.value,
-  set: (newVal) => {
+  get: () => rollingValueStart.value,
+  set: (newVal: any) => {
     // 转换为整数
     const num = parseInt(newVal, 10)
     // 处理非数字和NaN情况
     if (isNaN(num)) {
-      RollingValueStart.value = 0
-      return
+      rollingValueStart.value = 0
+      return 0
     }
     // 范围限制
-    RollingValueStart.value = Math.max(0, Math.min(365, num))
+    rollingValueStart.value = Math.max(0, Math.min(365, num))
   }
 })
 const clampedValueEnd = computed({
-  get: () => RollingValueeEnd.value,
-  set: (newVal) => {
+  get: () => rollingValueEnd.value,
+  set: (newVal: any) => {
     // 转换为整数
     const num = parseInt(newVal, 10)
     // 处理非数字和NaN情况
     if (isNaN(num)) {
-      RollingValueeEnd.value = 0
-      return
+      rollingValueEnd.value = 0
+      return 0
     }
     // 范围限制
-    RollingValueeEnd.value = Math.max(0, Math.min(365, num))
+    rollingValueEnd.value = Math.max(0, Math.min(365, num))
   }
 })
 
-let RollingRangeTimeStr: any = ''
-
-const emits = defineEmits(['handleSubmitRolling'])
-
+const emits = defineEmits<{
+  (e: 'changeTimeRange', val: any): void
+}>()
 // 输入时间
 const changeTime = (val: any) => {
-  if (val == 1) {
+  if (val === 'dynamic_rolling') {
     startDate.value = ''
     endDate.value = ''
-    if (typeof clampedValueStart.value == 'number' && typeof clampedValueEnd.value == 'number') {
-      if (clampedValueStart.value == 0 && clampedValueEnd.value == 30) {
-        rollingRangeRadio.value = 'Next 30 days'
-      } else if (clampedValueStart.value == 0 && clampedValueEnd.value == 60) {
-        rollingRangeRadio.value = 'Next 60 days'
-      } else if (clampedValueStart.value == 10 && clampedValueEnd.value == 60) {
-        rollingRangeRadio.value = 'Past 10 days to next 60 day'
-      } else if (clampedValueStart.value == 30 && clampedValueEnd.value == 0) {
-        rollingRangeRadio.value = 'Past 30 days'
-      } else {
-        rollingRangeRadio.value = 'Customize'
-      }
-      if (clampedValueStart.value == 0 && clampedValueEnd.value == 0) {
-        RollingRangeTimeStr = ''
-      } else {
-        RollingRangeTimeStr =
-          'ETD: minus ' +
-          clampedValueStart.value +
-          ' Day(s) to Plus ' +
-          clampedValueEnd.value +
-          ' Day(s)'
-      }
-    } else {
-      RollingRangeTimeStr = ''
-    }
-    emits('handleSubmitRolling', {
-      rollingStartDate: clampedValueStart.value,
-      rollingEndDate: clampedValueEnd.value,
-      DataTimeSelection: DataTimeSelection.value
+
+    emits('changeTimeRange', {
+      startDate: clampedValueStart.value,
+      endDate: clampedValueEnd.value,
+      fieldType: fieldType.value,
+      type: type.value
     })
-  } else if (val == 2) {
+  } else if (val === 'fixed') {
     clampedValueStart.value = 0
     clampedValueEnd.value = 0
-    if (
-      startDate.value == dayjs().startOf('month').format('YYYY.MM.DD') &&
-      endDate.value == dayjs().endOf('month').format('YYYY.MM.DD')
-    ) {
-      fixedRangeRadio.value = 'This Month'
-    } else if (
-      startDate.value == dayjs().subtract(1, 'month').startOf('month').format('YYYY.MM.DD') &&
-      endDate.value == dayjs().subtract(1, 'month').endOf('month').format('YYYY.MM.DD')
-    ) {
-      fixedRangeRadio.value = 'Last Month'
-    } else if (
-      startDate.value ==
-        dayjs()
-          .month(Math.floor(dayjs().month() / 3) * 3)
-          .startOf('month')
-          .format('YYYY.MM.DD') &&
-      endDate.value ==
-        dayjs()
-          .month(Math.floor(dayjs().month() / 3) * 3 + 2)
-          .endOf('month')
-          .format('YYYY.MM.DD')
-    ) {
-      fixedRangeRadio.value = 'This Quarter'
-    } else if (
-      startDate.value ==
-        dayjs()
-          .month(Math.floor(dayjs().month() / 3) * 3 - 3)
-          .startOf('month')
-          .format('YYYY.MM.DD') &&
-      endDate.value ==
-        dayjs()
-          .month(Math.floor(dayjs().month() / 3) * 3 - 1)
-          .endOf('month')
-          .format('YYYY.MM.DD')
-    ) {
-      fixedRangeRadio.value = 'Last Quarter'
-    } else if (
-      startDate.value == dayjs().startOf('year').format('YYYY.MM.DD') &&
-      endDate.value == dayjs().endOf('year').format('YYYY.MM.DD')
-    ) {
-      fixedRangeRadio.value = 'This Year'
-    } else if (
-      startDate.value == dayjs().subtract(1, 'year').startOf('year').format('YYYY.MM.DD') &&
-      endDate.value == dayjs().subtract(1, 'year').endOf('year').format('YYYY.MM.DD')
-    ) {
-      fixedRangeRadio.value = 'Last Year'
-    } else {
-      fixedRangeRadio.value = 'Customize'
-    }
-    emits('handleSubmitRolling', {
-      rollingStartDate: startDate.value,
-      rollingEndDate: endDate.value,
-      DataTimeSelection: DataTimeSelection.value
+
+    emits('changeTimeRange', {
+      startDate: startDate.value,
+      endDate: endDate.value,
+      fieldType: fieldType.value,
+      type: type.value
     })
-  } else {
-    RollingRangeTimeStr = ''
   }
 }
 // 选择Dynamic Rolling Range默认值
@@ -172,21 +116,16 @@ const ChangeRollingRangeRadio = (val: any) => {
     clampedValueStart.value = 0
     clampedValueEnd.value = 0
   }
-  if (clampedValueStart.value == 0 && clampedValueEnd.value == 0) {
-    RollingRangeTimeStr = ''
-  } else {
-    RollingRangeTimeStr =
-      'ETD: minus ' +
-      clampedValueStart.value +
-      ' Day(s) to Plus ' +
-      clampedValueEnd.value +
-      ' Day(s)'
-  }
-  emits('handleSubmitRolling', {
-    rollingStartDate: clampedValueStart.value,
-    rollingEndDate: clampedValueEnd.value,
-    DataTimeSelection: DataTimeSelection.value
+
+  emits('changeTimeRange', {
+    startDate: clampedValueStart.value,
+    endDate: clampedValueEnd.value,
+    fieldType: fieldType.value,
+    type: type.value
   })
+  setTimeout(() => {
+    rollingRangeRadio.value = ''
+  }, 300)
 }
 
 // 选择fixed range默认值
@@ -222,11 +161,15 @@ const changeFixedRange = (val: any) => {
     startDate.value = dayjs().subtract(1, 'year').startOf('year').format('YYYY.MM.DD')
     endDate.value = dayjs().subtract(1, 'year').endOf('year').format('YYYY.MM.DD')
   }
-  emits('handleSubmitRolling', {
-    rollingStartDate: startDate.value,
-    rollingEndDate: endDate.value,
-    DataTimeSelection: DataTimeSelection.value
+  emits('changeTimeRange', {
+    startDate: startDate.value,
+    endDate: endDate.value,
+    fieldType: fieldType.value,
+    type: type.value
   })
+  setTimeout(() => {
+    fixedRangeRadio.value = ''
+  }, 300)
 }
 </script>
 <template>
@@ -235,9 +178,9 @@ const changeFixedRange = (val: any) => {
       <span class="stars_red">*</span>
       Data Time Reference Field Selection
     </div>
-    <el-select class="select_time" v-model="DataTimeSelection" placeholder="Please select...">
+    <el-select class="select_time" v-model="fieldType" placeholder="Please select...">
       <el-option
-        v-for="item in DataTimeoptions"
+        v-for="item in dataTimeoptions"
         :key="item.value"
         :label="item.label"
         :value="item.value"
@@ -249,8 +192,8 @@ const changeFixedRange = (val: any) => {
         Data Range Configuration Method
       </div>
       <div class="schedule_container">
-        <el-radio-group v-model="radio" @change="changeTime">
-          <el-radio :value="1">
+        <el-radio-group v-model="type" @change="changeTime">
+          <el-radio value="dynamic_rolling">
             <div class="radio_custom">
               <div style="height: 38px">
                 Dynamic Rolling Range
@@ -269,7 +212,7 @@ const changeFixedRange = (val: any) => {
                   <span class="font_family icon-icon_info_b"></span>
                 </el-tooltip>
               </div>
-              <div v-if="isshowRolling" class="oceanCheckbox2">
+              <div v-if="isShowRolling" class="oceanCheckbox2">
                 <el-radio-group v-model="rollingRangeRadio" @change="ChangeRollingRangeRadio">
                   <el-radio-button label="Next 30 days" value="Next 30 days" />
                   <el-radio-button label="Next 60 days" value="Next 60 days" />
@@ -287,7 +230,7 @@ const changeFixedRange = (val: any) => {
                       <div class="currentTime">Past</div>
                       <el-input
                         v-model="clampedValueStart"
-                        @input="changeTime('1')"
+                        @input="changeTime('dynamic_rolling')"
                         class="input-with-select"
                       >
                       </el-input>
@@ -300,7 +243,7 @@ const changeFixedRange = (val: any) => {
                       <div class="currentTime">Future</div>
                       <el-input
                         v-model="clampedValueEnd"
-                        @input="changeTime('1')"
+                        @input="changeTime('dynamic_rolling')"
                         class="input-with-select"
                       >
                       </el-input>
@@ -311,7 +254,7 @@ const changeFixedRange = (val: any) => {
               </div>
             </div>
           </el-radio>
-          <el-radio :value="2">
+          <el-radio value="fixed">
             <div class="radio_custom">
               <div style="height: 38px">
                 Fixed Range
@@ -352,7 +295,7 @@ const changeFixedRange = (val: any) => {
                       :format="userStore.dateFormat"
                       valueFormat="YYYY.MM.DD"
                       :showToday="false"
-                      @change="changeTime('2')"
+                      @change="changeTime('fixed')"
                       style="width: 100%"
                       v-model:value="startDate"
                     >
@@ -367,7 +310,7 @@ const changeFixedRange = (val: any) => {
                       :format="userStore.dateFormat"
                       valueFormat="YYYY.MM.DD"
                       :showToday="false"
-                      @change="changeTime('2')"
+                      @change="changeTime('fixed')"
                       style="width: 100%"
                       v-model:value="endDate"
                     >

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

@@ -2,12 +2,31 @@
 import { useUserStore } from '@/stores/modules/user'
 
 const userStore = useUserStore()
+const formatDate = userStore.dateFormat
 
-const radio = ref(0)
+const props = defineProps<{
+  data: {
+    type: 'Custom Period' | 'Permanent Valid' | ''
+    startDate: string
+    endDate: string
+  }
+}>()
+
+const validityPeriodType = ref('')
 const startDate = ref('')
 const endDate = ref('')
+watch(
+  () => props.data,
+  (newVal) => {
+    startDate.value = newVal.startDate
+    endDate.value = newVal.endDate
+    validityPeriodType.value = newVal.type
+  },
+  { immediate: true }
+)
+
 const isShowEffective = computed(() => {
-  return radio.value == 2
+  return validityPeriodType.value === 'Custom Period'
 })
 const emit = defineEmits(['handleSubmitValidity'])
 // 选择Validity Period部分
@@ -27,8 +46,8 @@ const ChangeValidity = (val: any) => {
 </script>
 <template>
   <div style="padding: 8px 16px 16px 16px">
-    <el-radio-group v-model="radio" @change="ChangeValidity">
-      <el-radio :value="1">
+    <el-radio-group v-model="validityPeriodType" @change="ChangeValidity">
+      <el-radio value="Permanent Valid">
         Permanent Valid
         <el-tooltip
           popper-class="schedule-popper"
@@ -40,7 +59,7 @@ const ChangeValidity = (val: any) => {
           <span class="font_family icon-icon_info_b"></span>
         </el-tooltip>
       </el-radio>
-      <el-radio :value="2">
+      <el-radio value="Custom Period">
         <div class="radio_custom">
           <div style="height: 38px">
             Custom Period
@@ -57,33 +76,25 @@ const ChangeValidity = (val: any) => {
           <div v-if="isShowEffective" style="display: flex">
             <div style="margin-right: 9px">
               <div class="date_text">Effective Start Date</div>
-              <a-date-picker
-                :format="userStore.dateFormat"
-                valueFormat="YYYY.MM.DD"
-                :showToday="false"
+              <el-date-picker
+                v-model="startDate"
+                type="date"
                 style="width: 320px"
-                @change="ChangeValidity(2)"
-                v-model:value="startDate"
-              >
-                <template #suffixIcon>
-                  <span class="font_family icon-icon_date_b"></span>
-                </template>
-              </a-date-picker>
+                placeholder="Pick a Date"
+                :format="formatDate"
+                valueFormat="MM/DD/YYYY"
+              />
             </div>
             <div>
               <div class="date_text">Effective End Date</div>
-              <a-date-picker
-                :format="userStore.dateFormat"
-                valueFormat="YYYY.MM.DD"
-                :showToday="false"
-                @change="ChangeValidity(2)"
+              <el-date-picker
+                v-model="endDate"
+                type="date"
                 style="width: 320px"
-                v-model:value="endDate"
-              >
-                <template #suffixIcon>
-                  <span class="font_family icon-icon_date_b"></span>
-                </template>
-              </a-date-picker>
+                placeholder="Pick a Date"
+                :format="formatDate"
+                valueFormat="MM/DD/YYYY"
+              />
             </div>
           </div>
         </div>

src/views/TemplateManagement/src/TemplateManagement.vue

@@ -5,7 +5,7 @@ import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const filterRef: Ref<HTMLElement | null> = ref(null)
-const containerHeight = useCalculatingHeight(document.documentElement, 290, [filterRef])
+const containerHeight = useCalculatingHeight(document.documentElement, 250, [filterRef])
 const queryData = ref({
   text_search: '',
   is_active: '',

src/views/TemplateManagement/src/components/CreateReportTemplate/src/CreateReportTemplate.vue

@@ -20,7 +20,6 @@ onMounted(() => {
     $api
       .editReportTemplate({ serial_no: route.query.serial_no })
       .then((res) => {
-        console.log('editReportTemplate', res)
         infoData.value = {
           reportName: res.data.reportName,
           reportLevel: res.data.reportLevel,
@@ -118,7 +117,6 @@ const handleFieldTypeChange = () => {
   newFieldInfo.value.value = ''
 }
 const addNewField = () => {
-  console.log(newFieldInfo.value.name?.trim(), 'newFieldInfo', newFieldInfo.value)
   if (!newFieldInfo.value.name?.trim()) {
     ElMessage.warning('Please enter the new field name.')
     return
@@ -146,7 +144,6 @@ const addNewField = () => {
 }
 // 调整应用字段
 const handleApplay = (data: any) => {
-  console.log('data', data)
   const customizeData = fieldsList.value.filter((item: any) => item.field_type === 'Custom')
   fieldsList.value = data.map((item: any) => {
     return {
@@ -187,6 +184,28 @@ const handleCancel = () => {
 }
 
 const handleSave = () => {
+  const tipsLabel = [
+    {
+      label: 'Report Name',
+      key: 'reportName'
+    }
+  ]
+  if (!infoData.value.reportName.trim()) {
+    ElMessage.warning('Please enter the Report Name.')
+  }
+  if (!infoData.value.reportLevel) {
+    ElMessage.warning('Please enter the Report Level')
+  }
+  if (!infoData.value.reportDescription.trim()) {
+    ElMessage.warning('Please enter the Report Description.')
+  }
+  if (
+    accessControlType.value === 'Specific Roles' &&
+    (specificRoles.value.partyId.length === 0 || specificRoles.value.groupName.length === 0)
+  ) {
+    ElMessage.warning('Please select Party ID or Group Name for Specific Roles access control.')
+  }
+
   const data = {
     report_name: infoData.value.reportName,
     report_level: infoData.value.reportLevel,
@@ -197,7 +216,6 @@ const handleSave = () => {
     fieldsList: fieldsList.value,
     serial_no: route.query.serial_no || ''
   }
-  console.log('Saved Data:', data)
   $api.saveNewReportTemplate(data).then((res: any) => {
     if (res.code === 200) {
       ElMessage.success('Report Template saved successfully!')

src/views/TemplateManagement/src/components/CreateReportTemplate/src/components/AdjustmentField.vue

@@ -146,7 +146,6 @@ const getData = async (reset?: string) => {
       // allDataCopy就是所有的数据
       allDataCopy.value = res.data.GroupColumnsAll
       groupColumns.value = res.data.GroupColumnsLeft
-      console.log('groupColumns.value', groupColumns.value)
       activeName.value = allDataCopy.value?.[0]?.name
       searchOptions.value = res.data.GroupColumnsLeft?.[0]?.children
       // 右侧选中的数据
@@ -302,22 +301,6 @@ const handleReset = () => {
   getData('yes')
 }
 const handleApply = () => {
-  // const columnsList = selectColumns.value.map((item: any) => {
-  //   return item.ids
-  // })
-  // $api
-  //   .saveTableSettingColumns({
-  //     ...params.value.saveData,
-  //     ids: columnsList
-  //   })
-  //   .then((res: any) => {
-  //     if (res.code === 200) {
-  //       // ElMessage.success('Save successfully')
-  //       emits('customize')
-  //       dialogVisible.value = false
-  //     }
-  //   })
-  console.log('selectColumns.value', selectColumns.value)
   emits('apply', selectColumns.value)
   dialogVisible.value = false
 }

src/views/TemplateManagement/src/components/CreateReportTemplate/src/components/GroupNameSelect.vue

@@ -57,9 +57,6 @@ const remoteMethod = (query: string) => {
 }
 
 const testRef = ref(null)
-onMounted(() => {
-  console.log('testRef offsetWidth:', testRef.value?.$el?.offsetWidth)
-})
 </script>
 
 <template>

src/views/TemplateManagement/src/components/CreateReportTemplate/src/components/PartyIDSelect.vue

@@ -12,7 +12,6 @@ const selectData = ref<string[]>([])
 watch(
   () => props.data,
   (newValue) => {
-    console.log('Props data changed:', newValue)
     selectData.value = cloneDeep(newValue) || []
   },
   {
@@ -22,7 +21,6 @@ watch(
 )
 const emit = defineEmits(['changeData'])
 const changeData = (val: string[]) => {
-  console.log('Selected Party IDs:', val)
   // 同步选中状态
   emit('changeData', val)
 }

src/views/TemplateManagement/src/components/TableView/src/TableView.vue

@@ -4,7 +4,7 @@ import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
 import { autoWidth } from '@/utils/table'
 import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import dayjs from 'dayjs'
-import { formatTimezone } from '@/utils/tools'
+import { formatTimezone, formatNumber } from '@/utils/tools'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -345,6 +345,20 @@ defineExpose({
         </div>
       </template>
     </vxe-grid>
+    <div class="pagination">
+      <span>Total {{ formatNumber(pageInfo.total) }}</span>
+      <el-pagination
+        v-model:current-page="pageInfo.pageNo"
+        v-model:page-size="pageInfo.pageSize"
+        :page-sizes="[50, 100, 200, 300, 400]"
+        :pagerCount="5"
+        background
+        layout="sizes, prev, pager, next"
+        :total="pageInfo.total"
+        @size-change="getTableData(true)"
+        @current-change="getTableData(true)"
+      />
+    </div>
   </div>
 </template>
 
@@ -399,4 +413,15 @@ defineExpose({
     }
   }
 }
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  font-weight: 400;
+  font-size: 15px;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-top: none;
+  padding: 4px 8px;
+  border-radius: 0 0 6px 6px;
+}
 </style>

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -140,7 +140,6 @@ const SubscribeShipments = () => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        console.log(res.data)
       }
     })
 }

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -605,7 +605,6 @@ const SubscribeShipments = (row: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        console.log(res.data)
       }
     })
 }