新需求

src/views/kaihe/domesticTrade/myOrder/index.vue

@@ -365,9 +365,11 @@
     <el-table
       v-loading="loading"
       :data="corpsList"
+      show-summary
+      :summary-method="getSummaries"
       @selection-change="handleSelectionChange"
     >
-      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="selection" width="60" align="center" />
       <el-table-column label="行号" align="center" type="index" />
       <el-table-column
         v-for="(item, index) in getRowList"
@@ -622,97 +624,104 @@ export default {
         },
         {
           surface: "7",
+          label: "loadCntr",
+          name: "返箱数",
+          checked: 0,
+          width: 120,
+        },
+        {
+          surface: "8",
           label: "fBsdate",
           name: "装货时间",
           checked: 0,
           width: 120,
         },
         {
-          surface: "8",
+          surface: "9",
           label: "fBillstatus",
           name: "状态",
           checked: 0,
           width: 120,
         },
         {
-          surface: "9",
+          surface: "10",
           label: "vslName",
           name: "船名",
           checked: 0,
           width: 120,
         },
         {
-          surface: "10",
+          surface: "11",
           label: "voyNo",
           name: "航次",
           checked: 0,
           width: 120,
         },
         {
-          surface: "11",
+          surface: "12",
           label: "fMblno",
           name: "提单号",
           checked: 0,
           width: 120,
         },
         {
-          surface: "12",
+          surface: "13",
           label: "corpName",
           name: "订舱单位",
           checked: 0,
           width: 120,
         },
         {
-          surface: "13",
+          surface: "14",
           label: "goodsName",
           name: "货名",
           checked: 0,
           width: 120,
         },
         {
-          surface: "14",
+          surface: "15",
           label: "createBy",
           name: "订舱人",
           checked: 0,
           width: 120,
         },
         {
-          surface: "15",
+          surface: "16",
           label: "createTime",
           name: "订舱时间",
           checked: 0,
           width: 120,
         },
         {
-          surface: "16",
+          surface: "17",
           label: "loadportName",
           name: "起运港",
           checked: 0,
           width: 120,
         },
         {
-          surface: "17",
+          surface: "18",
           label: "destportName",
           name: "目的港",
           checked: 0,
           width: 120,
         },
         {
-          surface: "18",
+          surface: "19",
           label: "moneyStatus",
           name: "费用状态",
           checked: 0,
           width: 120,
         },
         {
-          surface: "19",
+          surface: "20",
           label: "fCargoPlanning",
           name: "配船",
           checked: 0,
           width: 120,
         },
         {
-          surface: "20",
+          surface: "21",
           label: "remark",
           name: "备注",
           checked: 0,
@@ -1053,6 +1062,31 @@ export default {
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((item, index) => {
+        if (index === 0) {
+          sums[index] = "合计";
+          return;
+        }
+        if (item.property == "fCntrcount" || item.property == "loadCntr") {
+          let num1 = 0;
+          let num2 = 0;
+          data.forEach((e) => {
+            num1+=e.fCntrcount;
+            num2+=e.loadCntr;
+          });
+          if (item.property == "fCntrcount") {
+            sums[index] = num1 ? num1.toFixed(2) : "0.00";
+          }
+          if (item.property == "loadCntr") {
+            sums[index] = num2 ? num2.toFixed(2) : "0.00";
+          }
+        }
+      });
+      return sums;
+    },
   },
 };
 </script>

src/views/kaihe/singleVoyageShip/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"  label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-row>
         <el-col :span="6">
           <el-form-item label-width="100px" label="船名" prop="fVslid">
@@ -33,7 +39,8 @@
                 v-for="item in voyageOptions"
                 :key="item.fId"
                 :label="item.fNo"
-                :value="item.fId"/>
+                :value="item.fId"
+              />
             </el-select>
           </el-form-item>
         </el-col>
@@ -41,8 +48,14 @@
     </el-form>
 
     <el-row :gutter="10" style="padding-bottom: 10px">
-      <el-col :span="1.5">
-        <el-button type="primary" size="mini" :disabled="single" @click="departureShipment">离港出运</el-button>
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="primary"
+          size="mini"
+          :disabled="single"
+          @click="departureShipment"
+          >离港出运</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-date-picker
@@ -55,7 +68,13 @@
         ></el-date-picker>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="primary" size="mini" :disabled="single" @click="unloading">到港卸船</el-button>
+        <el-button
+          type="primary"
+          size="mini"
+          :disabled="single"
+          @click="unloading"
+          >到港卸船</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-date-picker
@@ -66,14 +85,24 @@
           size="mini"
           v-model="arrival"
         ></el-date-picker>
-      </el-col>
+      </el-col> -->
       <el-col :span="1.5">
-        <el-button type="primary" size="mini" @click="shipInventoryExport">导出装卸船清单</el-button>
+        <el-button type="primary" size="mini" @click="shipInventoryExport"
+          >导出装卸船清单</el-button
+        >
       </el-col>
 
-      <el-col  style="position: absolute;left:70%" :span="5" >
-        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      <el-col style="position: absolute; left: 70%" :span="5">
+        <el-button
+          type="cyan"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-col>
 
       <div class="tabSetting">
@@ -92,12 +121,26 @@
       </div>
     </el-row>
 
-    <el-dialog title="提示" :visible.sync="showSetting" width="700px" v-dialogDrag>
+    <el-dialog
+      title="提示"
+      :visible.sync="showSetting"
+      width="700px"
+      v-dialogDrag
+    >
       <template slot="title">
         <div class="avue-crud__dialog__header">
-            <span class="el-dialog__title">
-            <span style="display:inline-block;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
-            </span>
+          <span class="el-dialog__title">
+            <span
+              style="
+                display: inline-block;
+                width: 3px;
+                height: 20px;
+                margin-right: 5px;
+                float: left;
+                margin-top: 2px;
+              "
+            ></span>
+          </span>
         </div>
       </template>
       <div>配置排序列数据（拖动调整顺序）</div>
@@ -130,7 +173,7 @@
                     v-model="item.checked"
                     :true-label="0"
                     :false-label="1"
-                  >{{ item.name }}
+                    >{{ item.name }}
                   </el-checkbox>
                 </div>
               </div>
@@ -152,8 +195,7 @@
       </span>
     </el-dialog>
 
-    <el-table :data="singleShipList" style="width: 100%" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" fixed="left" align="center"></el-table-column>
+    <el-table :data="singleShipList" style="width: 100%">
       <el-table-column type="expand" fixed="left">
         <slot slot-scope="props">
           <el-form label-position="left" inline id="demo-table-expand">
@@ -162,15 +204,28 @@
               :key="index"
               label="提单号"
             >
-              <el-tooltip class="item" effect="dark" content="点击查看详情" placement="top">
-                <span class="blNo" v-text="item.fMblno" @click="$refs.blNo.openDialog(item)"></span>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="点击查看详情"
+                placement="top"
+              >
+                <span
+                  class="blNo"
+                  v-text="item.fMblno"
+                  @click="$refs.blNo.openDialog(item)"
+                ></span>
               </el-tooltip>
-
             </el-form-item>
           </el-form>
         </slot>
       </el-table-column>
-      <el-table-column type="index" fixed="left" align="center" label="行号"></el-table-column>
+      <el-table-column
+        type="index"
+        fixed="left"
+        align="center"
+        label="行号"
+      ></el-table-column>
       <el-table-column
         v-for="(item, index) in getRowList"
         :key="index"
@@ -183,42 +238,11 @@
         sortable
       >
       </el-table-column>
-
-<!--      <el-table-column-->
-<!--        prop="vslName"-->
-<!--        label="船名"-->
-<!--        align="center"-->
-<!--      ></el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="voyNo"-->
-<!--        label="航次"-->
-<!--        align="center"-->
-<!--      ></el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="fAtd"-->
-<!--        label="开始日期"-->
-<!--        align="center"-->
-<!--      ></el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="fAta"-->
-<!--        label="到港日期"-->
-<!--        align="center"-->
-<!--      ></el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="fName"-->
-<!--        label="航线"-->
-<!--        align="center"-->
-<!--      ></el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="loadportName"-->
-<!--        label="装港"-->
-<!--        align="center"-->
-<!--      ></el-table-column>-->
-<!--      <el-table-column-->
-<!--        prop="destportName"-->
-<!--        label="卸港"-->
-<!--        align="center"-->
-<!--      ></el-table-column>-->
+      <el-table-column fixed="right" label="操作" width="80" align="center">
+        <template slot-scope="scope">
+          <el-button @click="openItem(scope.row)" type="text" size="small">操作</el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
     <pagination
@@ -230,25 +254,33 @@
     />
 
     <blno ref="blNo"></blno>
+    <index-item ref="indexItem" @refresh="refresh"></index-item>
   </div>
 </template>
 
 <script>
 import blno from "./BLNo";
-import { getVesselName } from '@/api/finance/applyForInvoice/chargeInvoice';
-import { getVoyageName } from '@/api/finance/applyForInvoice/feeDetail';
+import indexItem from "./indexItem";
+import { getVesselName } from "@/api/finance/applyForInvoice/chargeInvoice";
+import { getVoyageName } from "@/api/finance/applyForInvoice/feeDetail";
 import { download } from "../../../utils/ruoyi";
-import { listSingleVoyageByShip, listBLNo, cargoStatus, shipInventoryExport } from '@/api/kaihe/singleVoyageShip/index';
+import {
+  listSingleVoyageByShip,
+  listBLNo,
+  cargoStatus,
+  shipInventoryExport,
+} from "@/api/kaihe/singleVoyageShip/index";
 import moment from "moment";
 import draggable from "vuedraggable";
-import { addSet, resetModule, select } from '@/api/system/set';
-import Cookies from 'js-cookie';
+import { addSet, resetModule, select } from "@/api/system/set";
+import Cookies from "js-cookie";
 
 export default {
   name: "index",
   components: {
     blno,
     draggable,
+    indexItem
   },
   data() {
     return {
@@ -307,9 +339,9 @@ export default {
       ],
       singleShipList: [],
       // 航次
-      voyageOptions:[],
+      voyageOptions: [],
       // 船名
-      vesselOptions:[],
+      vesselOptions: [],
       // 离港时间
       departure: null,
       // 到港时间
@@ -338,9 +370,9 @@ export default {
       showSearch: true,
       //自定义列宽
       allCheck: false,
-      showSetting:false,
+      showSetting: false,
       drag: false,
-    }
+    };
   },
   created() {
     // this.getList();
@@ -353,95 +385,103 @@ export default {
     this.getList();
   },
   methods: {
+    refresh(){
+      this.getList()
+    },
     async getList() {
       this.loading = false;
-      await listSingleVoyageByShip(this.queryParams).then(response => {
-        console.log(response.rows)
+      await listSingleVoyageByShip(this.queryParams).then((response) => {
+        console.log(response.rows);
         this.singleShipList = response.rows;
         this.singleShipList.forEach((item, index) => {
           let blNo = {
             fCargoPlanning: 0,
+            fArrivalStatus:3,
             fVslid: item.fVslid,
             fVoyid: item.fVoyid,
-          }
-          listBLNo(blNo).then(res => {
-            this.singleShipList[index].children = res.rows
-          })
-        })
+          };
+          listBLNo(blNo).then((res) => {
+            this.singleShipList[index].children = res.rows;
+          });
+        });
 
         this.total = response.total;
         this.loading = false;
-      })
+      });
     },
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.queryParams.pageSize = 10;
       this.getList();
     },
+    openItem(row){
+      this.$refs.indexItem.init(row)
+    },
     /** 重置按钮操作 */
     resetQuery() {
       this.departure = null;
       this.arrival = null;
-      this.queryParams = {
+      (this.queryParams = {
         vslName: null,
         voyNo: null,
-      },
+      }),
         this.resetForm("queryForm");
       this.handleQuery();
     },
     //获取船名
     vessleRemthod() {
-      getVesselName().then(response => {
+      getVesselName().then((response) => {
         this.vesselOptions = response.rows;
-      })
+      });
     },
     // 获取航次
-    voyageRemthods(){
-      getVoyageName().then(response=>{
+    voyageRemthods() {
+      getVoyageName().then((response) => {
         this.voyageOptions = response.rows;
-      })
+      });
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
+      console.log(selection);
       this.ship = selection;
       // this.ids = selection.map(item => item.fId)
-      this.single = selection.length!==1;
+      this.single = selection.length !== 1;
       // this.multiple = !selection.length
     },
     // 离港出运
     departureShipment() {
       // if (this.ship[0].fArrivalStatus === 0) {
-        if (this.departure === null) {
-          this.$message({
-            showClose: true,
-            message: '离港时间未选择',
-            type: 'warning'
+      if (this.departure === null) {
+        this.$message({
+          showClose: true,
+          message: "离港时间未选择",
+          type: "warning",
+        });
+      } else {
+        const data = {
+          fVsl: this.ship[0].vslName,
+          fVoy: this.ship[0].voyNo,
+          fVslid: this.ship[0].fVslid,
+          fVoyid: this.ship[0].fVoyid,
+          fUpdatetime: this.departure,
+          updateStatus: "1",
+        };
+        cargoStatus(data).then((response) => {
+          this.$alert("离港操作成功", "提示", {
+            confirmButtonText: "确定",
+            type: "success",
+            callback: (action) => {
+              this.getList();
+            },
           });
-        } else {
-          const data = {
-            fVsl: this.ship[0].vslName,
-            fVoy: this.ship[0].voyNo,
-            fVslid: this.ship[0].fVslid,
-            fVoyid: this.ship[0].fVoyid,
-            fUpdatetime: this.departure,
-            updateStatus: '1',
-          }
-          cargoStatus(data).then(response => {
-            this.$alert('离港操作成功', '提示', {
-              confirmButtonText: '确定',
-              type: 'success',
-              callback: action => {
-                this.getList();
-              }
-            })
-            // this.$message({
-            //   showClose: true,
-            //   message: '出港操作成功',
-            //   type: 'success'
-            // });
-            // this.getList();
-          })
-        }
+          // this.$message({
+          //   showClose: true,
+          //   message: '出港操作成功',
+          //   type: 'success'
+          // });
+          // this.getList();
+        });
+      }
       // }
       // else {
       //   this.$message({
@@ -454,38 +494,37 @@ export default {
     // 到港卸船
     unloading() {
       // if (this.ship[0].fArrivalStatus === 1) {
-        if (this.arrival === null) {
-
-          this.$message({
-            showClose: true,
-            message: '到港时间未选择',
-            type: 'warning'
+      if (this.arrival === null) {
+        this.$message({
+          showClose: true,
+          message: "到港时间未选择",
+          type: "warning",
+        });
+      } else {
+        const data = {
+          fVsl: this.ship[0].vslName,
+          fVoy: this.ship[0].voyNo,
+          fVslid: this.ship[0].fVslid,
+          fVoyid: this.ship[0].fVoyid,
+          fUpdatetime: this.arrival,
+          updateStatus: "2",
+        };
+        cargoStatus(data).then((response) => {
+          this.$alert("到港操作成功", "提示", {
+            confirmButtonText: "确定",
+            type: "success",
+            callback: (action) => {
+              this.getList();
+            },
           });
-        } else {
-          const data = {
-            fVsl: this.ship[0].vslName,
-            fVoy: this.ship[0].voyNo,
-            fVslid: this.ship[0].fVslid,
-            fVoyid: this.ship[0].fVoyid,
-            fUpdatetime: this.arrival,
-            updateStatus: '2',
-          }
-          cargoStatus(data).then(response => {
-            this.$alert('到港操作成功', '提示', {
-              confirmButtonText: '确定',
-              type: 'success',
-              callback: action => {
-                this.getList();
-              }
-            })
-            // this.$message({
-            //   showClose: true,
-            //   message: '到港操作成功',
-            //   type: 'success'
-            // });
-            // this.getList();
-          })
-        }
+          // this.$message({
+          //   showClose: true,
+          //   message: '到港操作成功',
+          //   type: 'success'
+          // });
+          // this.getList();
+        });
+      }
       // } else {
       //   this.$message({
       //     showClose: true,
@@ -496,9 +535,9 @@ export default {
     },
     // 导出清单
     shipInventoryExport() {
-      shipInventoryExport(this.queryParams).then(response => {
-        this.download(response.msg)
-      })
+      shipInventoryExport(this.queryParams).then((response) => {
+        this.download(response.msg);
+      });
     },
 
     //列设置全选
@@ -531,7 +570,7 @@ export default {
         if (res.code == 200) {
           this.showSetting = false;
           this.setRowList = this.tableDate;
-          console.log(this.setRowList)
+          console.log(this.setRowList);
           this.getRowList = this.tableDate;
         }
       });
@@ -548,8 +587,8 @@ export default {
         this.getRowList = this.setRowList.filter((e) => e.checked == 0);
       });
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/kaihe/singleVoyageShip/indexItem.vue

@@ -0,0 +1,216 @@
+<template>
+  <el-dialog title="提单号明细" width="80%" :visible.sync="open" @close="close">
+    <div style="display: flex; margin-bottom: 10px">
+      <el-date-picker
+        type="datetime"
+        placeholder="选择离港时间"
+        format="yyyy-MM-dd HH:mm"
+        value-format="yyyy-MM-dd HH:mm"
+        size="mini"
+        v-model="departure"
+        style="margin-right: 10px"
+      ></el-date-picker>
+      <el-button
+        type="primary"
+        size="mini"
+        :disabled="!selecList.length"
+        @click="departureShipment"
+        style="margin-right: 10px"
+        >离港出运</el-button
+      >
+      <el-date-picker
+        type="datetime"
+        placeholder="选择到港时间"
+        format="yyyy-MM-dd HH:mm"
+        value-format="yyyy-MM-dd HH:mm"
+        size="mini"
+        v-model="arrival"
+        style="margin-right: 10px"
+      ></el-date-picker>
+      <el-select
+        v-model="fLoadportid"
+        filterable
+        clearable
+        size="mini"
+        placeholder="请选择港口"
+        style="margin-right: 10px"
+      >
+        <el-scrollbar>
+          <el-option
+            v-for="(item, index) in fMblnoOptions"
+            :key="index"
+            :label="item.fName"
+            :value="item.fId"
+          ></el-option>
+        </el-scrollbar>
+      </el-select>
+      <el-button
+        type="primary"
+        size="mini"
+        :disabled="!selecList.length"
+        @click="unloading"
+        >到港卸船</el-button
+      >
+    </div>
+    <el-table
+      :data="dataList"
+      ref="multipleTable"
+      style="width: 100%"
+      height="60vh"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column
+        type="selection"
+        fixed="left"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="fMblno"
+        label="提单号"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="corpName"
+        label="客户名称"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="loadportName"
+        label="起运港"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="destportName"
+        label="目的港"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column prop="fNo" label="箱型" :show-overflow-tooltip="true" />
+      <el-table-column
+        prop="fCntrcount"
+        label="箱量"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="fConsigneername"
+        label="收货人"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="createBy"
+        label="发货人"
+        :show-overflow-tooltip="true"
+      />
+    </el-table>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="open = false">关闭</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { portInquiry } from "@/api/kaihe/domesticTrade/orderInformation";
+import { listBLNo,cargoStatus } from "@/api/kaihe/singleVoyageShip/index";
+export default {
+  name: "BLNo",
+  data() {
+    return {
+      open: false,
+      dataList: [],
+      selecList: [],
+      fMblnoOptions: [],
+      fLoadportid: null,
+      departure: null,
+      arrival: null,
+      form: null,
+    };
+  },
+  created() {
+    portInquiry().then((res) => {
+      this.fMblnoOptions = res.rows;
+    });
+  },
+  methods: {
+    init(row) {
+      this.open = true;
+      this.form = row;
+      this.dataList = row.children;
+    },
+    handleSelectionChange(list) {
+      this.selecList = list;
+    },
+    close() {
+      this.$refs.multipleTable.clearSelection();
+      this.dataList = [];
+      this.fLoadportid = null;
+      this.departure = null;
+      this.arrival = null;
+      this.form = null;
+    },
+    // 离港出运
+    departureShipment() {
+      let arr = [];
+      this.selecList.forEach((e) => {
+        arr.push(e.fMblno);
+      });
+      if (!this.departure) {
+        return this.$message.error("离港时间未选择");
+      }
+      const data = {
+        billList: arr,
+        fUpdatetime: this.departure,
+        updateStatus: "1",
+      };
+      cargoStatus(data).then((response) => {
+        this.$emit("refresh");
+        this.$alert("离港操作成功", "提示", {
+          confirmButtonText: "确定",
+          type: "success",
+          callback: (action) => {
+            this.$refs.multipleTable.clearSelection();
+          },
+        });
+      });
+    },
+    // 到港卸船
+    unloading() {
+      let arr = [];
+      this.selecList.forEach((e) => {
+        arr.push(e.fMblno);
+      });
+      if (!this.arrival) {
+        return this.$message.error("到港时间未选择");
+      }
+      if (!this.fLoadportid) {
+        return this.$message.error("港口地点未选择");
+      }
+      const data = {
+        billList: arr,
+        fUpdatetime: this.arrival,
+        fUpdateaddress: this.fLoadportid,
+        updateStatus: "2",
+      };
+      cargoStatus(data).then((response) => {
+        this.$emit("refresh");
+        let blNo = {
+          fCargoPlanning: 0,
+          fArrivalStatus: 3,
+          fVslid: this.form.fVslid,
+          fVoyid: this.form.fVoyid,
+        };
+        listBLNo(blNo).then((res) => {
+          this.dataList= res.rows;
+        });
+        this.$alert("到港操作成功", "提示", {
+          confirmButtonText: "确定",
+          type: "success",
+          callback: (action) => {
+            this.$refs.multipleTable.clearSelection();
+          },
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style scoped></style>