change: 统计已选行的重量体积离岸价格.

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

@@ -2,7 +2,7 @@
   <div class="w-[100vw] bg-white page-cargo-consolidation">
     <div
       v-loading="loading"
-      class="pt-2 w-[100%] min-h-[100vh]"
+      class="w-[100%] min-h-[100vh]"
     >
       <el-form
         style="width: 100%"
@@ -10,8 +10,12 @@
         :loading="loading"
         @submit.prevent="getList"
       >
-        <el-form-item label="ETD Range">
+        <el-form-item
+          label="ETD Range"
+          style="margin-bottom: 10px"
+        >
           <el-date-picker
+            size="small"
             v-model="dateRange"
             type="daterange"
             unlink-panels
@@ -21,7 +25,7 @@
             :shortcuts="dateShortcuts"
           />
         </el-form-item>
-        <el-form-item>
+        <el-form-item style="margin-bottom: 10px">
           <el-tooltip content="时间范围最好不要选太大, 不然数据太多会卡">
             <el-button
               class="custom-button"
@@ -265,12 +269,35 @@
             >
               保存更改
             </el-button>
+            <!-- <el-tooltip
+              content="下方复选框勾上的行可以被转移到新的航次.有新增编辑删除的不能勾."
+            >
+              <el-button
+                v-if="
+                  ['Arrangement'].includes(currentTab) ||
+                  (['可用'].includes(currentRow.Status) &&
+                    ['my_request'].includes(currentTab))
+                "
+                size="small"
+                type="danger"
+                @click="dialogFlyVisible = true"
+              >
+                转移
+              </el-button>
+            </el-tooltip>-->
           </div>
         </div>
-        <div class="flex justify-end min-w-[380px] gap-2">
-          <div class="flex">总重量: {{ computedWeight }}</div>
-          <div class="flex">总体积: {{ computedCube }}</div>
-          <div class="flex">总离岸价: {{ computedTotalFOB }}</div>
+        <div>
+          <div class="flex justify-end min-w-[380px] gap-2">
+            <div class="flex">总重量: {{ computedWeight }}</div>
+            <div class="flex">总体积: {{ computedCube }}</div>
+            <div class="flex">总离岸价: {{ computedTotalFOB }}</div>
+          </div>
+          <div class="flex justify-end min-w-[380px] gap-2">
+            <div class="flex">已选重量: {{ computedSelectedWeight }}</div>
+            <div class="flex">已选体积: {{ computedSelectedCube }}</div>
+            <div class="flex">已选离岸价: {{ computedSelectedTotalFOB }}</div>
+          </div>
         </div>
       </div>
       <el-table
@@ -285,12 +312,13 @@
             ? '暂无数据'
             : '请点击voyage表格其中一行以查询相应记录'
         "
+        @selection-change="handleSelectionChange"
         border
       >
         <el-table-column
           fixed
           type="index"
-          width="50"
+          width="40"
         ></el-table-column>
         <el-table-column
           :sortable="currentTab === 'Arrangement'"
@@ -493,7 +521,7 @@
           "
           fixed="right"
           label="操作"
-          width="90"
+          width="100"
         >
           <template #default="scope">
             <el-tooltip
@@ -524,7 +552,7 @@
           label="重量 (KG)"
           :sortable="currentTab === 'Arrangement'"
           :sort-method="customSort4"
-          width="95"
+          width="100"
         >
           <template #default="scope">
             <el-input
@@ -574,12 +602,18 @@
           :sort-method="refSort"
           label="Reference"
           fixed="right"
-          width="115"
+          width="110"
         >
           <template #default="scope">
             <div class="">{{ scope.row.Reference || scope.row.PO_Number }}</div>
           </template>
         </el-table-column>
+        <el-table-column
+          :selectable="calcSelectAble"
+          type="selection"
+          width="40"
+          fixed="right"
+        />
       </el-table>
 
       <el-drawer
@@ -658,6 +692,43 @@
         </el-form-item>
       </el-form>
     </el-dialog>
+    <!--<el-dialog
+      style="margin-top: 35vh"
+      title="将已选记录转移到新的航次"
+      :modelValue="dialogFlyVisible"
+      @close="closeFlyDialog"
+      width="600px"
+    >
+      <el-form>
+        <el-form-item label="航次">
+          <el-select v-model="flyTarget">
+            <el-option
+              v-for="item in computedList"
+              :key="item.id"
+              :label="item.Name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <div class="w-full flex justify-center">
+            <el-button
+              size="small"
+              type="primary"
+              @click="fly"
+            >
+              确定
+            </el-button>
+            <el-button
+              size="small"
+              @click="closeFlyDialog"
+            >
+              取消
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-dialog> -->
   </div>
 </template>
 
@@ -804,8 +875,8 @@ let getList = () => {
           duration: 3000,
         })
         list.value = []
-        clearSubList()
       }
+      clearSubList()
     })
     .finally(() => (loading.value = false))
 }
@@ -1453,6 +1524,30 @@ let computedTotalFOB = computed(() => {
     }, 0)
     .toFixed(2)
 })
+let computedSelectedWeight = computed(() => {
+  return selectedRow.value
+    .reduce((t, c) => {
+      t = t + Number(c.Weight)
+      return t
+    }, 0)
+    .toFixed(2)
+})
+let computedSelectedCube = computed(() => {
+  return selectedRow.value
+    .reduce((t, c) => {
+      t = t + Number(c.Cube)
+      return t
+    }, 0)
+    .toFixed(2)
+})
+let computedSelectedTotalFOB = computed(() => {
+  return selectedRow.value
+    .reduce((t, c) => {
+      t = t + Number(c.Total_FOB)
+      return t
+    }, 0)
+    .toFixed(2)
+})
 
 // 订单轨迹地图插件
 let mapDrawerVisible = ref(false)
@@ -1575,6 +1670,52 @@ let batchRecordSort = (a: any, b: any) => {
   }
   return 0
 }
+
+// ===== 控制把部分行数据飞(转移)到另一个航次, 选中子表的行, 然后弹窗展示航次列表选一个航次提交, 实际上是把选中子表行的parent_id改为新航次的id ======
+let selectedRow = ref([] as any[])
+const handleSelectionChange = (val: any[]) => {
+  selectedRow.value = val
+}
+let calcSelectAble = (row: any) =>
+  !row.addFlag && !row.deleteFlag && !row.editFlag
+// let dialogFlyVisible = ref(false)
+// let flyTarget = ref('')
+/* let closeFlyDialog = () => {
+  dialogFlyVisible.value = false
+  flyTarget.value = ''
+} */
+/*let fly = () => {
+  console.log(selectedRow.value, 'selectedRow')
+  if (!flyTarget.value || !selectedRow.value.length) {
+    ElMessage.error('请选择航次和要转移的记录')
+    return
+  }
+  zoho.CRM.API.updateRecord({
+    Entity: 'Sea_Freight_Details',
+    Trigger: ['workflow'],
+    APIData: selectedRow.value.map((i: any) => {
+      return {
+        id: i.id,
+        Parent_Id: flyTarget.value,
+      }
+    }),
+  }).then((res: any) => {
+    if (
+      Array.isArray(res.data) &&
+      res.data.length &&
+      res.data[0].code === 'SUCCESS'
+    ) {
+      ElMessage.success('操作成功, 正在刷新数据')
+      loading.value = false
+      closeFlyDialog()
+      clearSubList()
+      getSubList(currentRow.value)
+    } else {
+      loading.value = false
+      ElMessage.error('操作失败, 请稍后再试或者联系管理员')
+    }
+  })
+}*/
 </script>
 <style lang="scss">
 .page-cargo-consolidation {