change: cargo-consolidation-request应要求调整部分业务逻辑.

src/pages/cargo-consolidation-request/index.vue

@@ -2,17 +2,16 @@
   <div class="w-[100vw] bg-white">
     <div
       v-loading="loading"
-      class="p-4 pt-2 w-[100%] max-w-[1900px] min-h-[100vh] mx-auto shadow"
+      class="pt-2 w-[100%] min-h-[100vh]"
     >
-      <div class="text-xl text-slate-700">Cargo Consolidation Request</div>
-
+      <!-- <div class="text-xl text-slate-700">Cargo Consolidation Request</div> -->
       <el-form
         style="width: 100%"
         inline
         :loading="loading"
         @submit.prevent="getList"
       >
-        <el-form-item label="Voyage Date Range">
+        <el-form-item label="ETD Range">
           <el-date-picker
             v-model="dateRange"
             type="daterange"
@@ -41,7 +40,7 @@
       </el-tabs>
       <el-table
         border
-        :data="list"
+        :data="computedList"
         highlight-current-row
         style="width: 100%"
         max-height="330"
@@ -189,6 +188,20 @@
             </el-select>
           </template>
         </el-table-column>
+        <el-table-column
+          label="User Notes"
+          width="250"
+          fixed
+        >
+          <template #default="scope">
+            <el-input
+              v-model="scope.row.User_Notes"
+              :rows="2"
+              type="textarea"
+              :disabled="scope.row.disableFlag"
+            ></el-input>
+          </template>
+        </el-table-column>
         <el-table-column
           label="Sample"
           width="80"
@@ -308,19 +321,6 @@
             ></el-input>
           </template>
         </el-table-column>
-        <el-table-column
-          label="User_Notes"
-          width="250"
-        >
-          <template #default="scope">
-            <el-input
-              v-model="scope.row.User_Notes"
-              :rows="2"
-              type="textarea"
-              :disabled="scope.row.disableFlag"
-            ></el-input>
-          </template>
-        </el-table-column>
         <el-table-column
           label="负责人(Owner)"
           fixed="right"
@@ -360,7 +360,7 @@
               type="danger"
               size="small"
               link
-              @click="() => onDeleteRow(scope.row, scope.$index)"
+              @click="onDeleteRow"
             >
               删除
             </el-button>
@@ -498,14 +498,19 @@ const currentUserName = ref('')
 let show = ref(false) // 新增货物对话框
 let loading = ref(false)
 let list = ref([] as any[])
-let currentTab = ref('avaliable')
+let currentTab = ref('all')
+
 let tabs = [
+  {
+    label: 'All',
+    value: 'all',
+  },
   {
     label: 'Avaliable',
     value: 'avaliable',
   },
   {
-    label: 'Voyage Closed',
+    label: 'Closed Voyage',
     value: 'voyage_closed',
   },
   {
@@ -513,6 +518,21 @@ let tabs = [
     value: 'my_request',
   },
 ]
+let computedList = computed(() => {
+  return list.value.filter((i: any) => {
+    let condition = true
+    switch (currentTab.value) {
+      case 'avaliable':
+        condition = i.Status && i.Status === '可用'
+        break
+      case 'voyage_closed':
+        condition = ['已截仓', '已确认', '已发出'].includes(i.Status)
+        break
+    }
+    return condition
+  })
+})
+
 let dateRange = ref([] as any[])
 const generateDateRange = (days = 7) => {
   const today = new Date()
@@ -576,43 +596,25 @@ dateRange.value = generateDateRange(-14) // todo 提交前改为-7
 const clearSubList = () => {
   subList.value = []
   subListBackup = []
-}
-watch(currentTab, () => {
-  getList()
-  clearSubList()
   currentRow.value = {}
-})
+}
 
 let getList = () => {
   loading.value = true
   zoho.CRM.API.coql({
     select_query:
       'select Name,Port_From,Port_To,ETD,ETA,Cut_Off_Date,Owner,Status,Modified_Time from Sea_Freight_Table' +
-      " where Modified_Time between '" +
-      `${dateRange.value.map((i) => dayjs(i).format('YYYY-MM-DDTHH:mm:ssZ')).join("' and '")}` +
+      " where ETD between '" +
+      `${dateRange.value.map((i) => dayjs(i).format('YYYY-MM-DD')).join("' and '")}` +
       "'",
   })
     .then((res: any) => {
-      console.log(res, 'res get list')
+      // console.log(res, 'res get list')
       if (Array.isArray(res.data) && res.data.length) {
-        list.value = res.data.filter((i: any) => {
-          let condition = true
-          switch (currentTab.value) {
-            case 'avaliable':
-              condition = i.Status && i.Status === '可用'
-              break
-            case 'voyage_closed':
-              condition = i.Status && i.Status === '关闭'
-              break
-            // case 'my_request':
-            // condition = i.Owner?.id && i.Owner.id === currentUser.value
-          }
-          return condition
-        })
+        list.value = res.data
       } else if (res.status === 204) {
         ElMessage.info(res.statusText || 'zoho api return:' + res.status)
         list.value = []
-        currentRow.value = {}
         clearSubList()
       }
     })
@@ -622,6 +624,21 @@ let getList = () => {
 let currentRow = ref({} as any)
 let subList = ref([] as any[])
 let subListBackup: any[] = []
+
+watch(currentTab, (value: string) => {
+  // 切到可用tab, 但是当前行是不是 可用 状态
+  let notAvaliable = value === 'avaliable' && currentRow.value.Status !== '可用'
+
+  // 切到关闭tab, 但当前行不是‘关闭’状态
+  let notClose =
+    value === 'voyage_closed' &&
+    !['已截仓', '已确认', '已发出'].includes(currentRow.value.Status)
+  // console.log(notClose, 'notClose')
+  if (notAvaliable || notClose) {
+    clearSubList()
+  }
+})
+
 /**
  *  用来增加新行的数据模版
  */
@@ -769,7 +786,7 @@ const addNewSubList = (formEl: FormInstance | undefined) => {
     form.value = {}
   })
 }
-const onDeleteRow = (row: any, index: number) => {
+const onDeleteRow = (row: any) => {
   row.deleteFlag = true
   ElNotification({
     type: 'warning',