出货开发

src/api/ecw/boxSea.js

+import request from "@/utils/request";
+
+// booking
+export function booking(data) {
+  return request({
+    url: "/ecw/box-book-sea/create",
+    method: "post",
+    data,
+  });
+}
+
+// trailer
+export function trailer(data) {
+  return request({
+    url: "/ecw/box-trailer/create",
+    method: "post",
+    data,
+  });
+}
+
+/*****************************  预装 **********************************/
+
+/**
+ * 获得已预装部分列表
+ *
+ * @export
+ * @param {*} params
+ * @return {*}
+ */
+export function secGoodsList(params) {
+  return request({
+    url: "/ecw/box-preload-goods/secGoodsList",
+    method: "get",
+    params,
+  });
+}
+
+/**
+ * 获得订单预装分页
+ *
+ * @export
+ * @param {*} params
+ * @return {*}
+ */
+export function preloadPage(params) {
+  return request({
+    url: "/ecw/order/preloadPage",
+    method: "get",
+    params,
+  });
+}
+
+/**
+ * 创建预装部分
+ *
+ * @export
+ * @param {*} params
+ * @return {*}
+ */
+export function createSection(data) {
+  return request({
+    url: "/ecw/box-preload-section/create",
+    method: "post",
+    data,
+  });
+}
+
+/**
+ * 删除预装部分
+ *
+ * @export
+ * @param {*} params
+ * @return {*}
+ */
+export function deleteSection(id) {
+  return request({
+    url: "/ecw/box-preload-goods/deleteSection?id=" + id,
+    method: "delete",
+  });
+}
+
+/**
+ * 删除预装货物
+ *
+ * @export
+ * @param {*} params
+ * @return {*}
+ */
+export function deleteGoods(id) {
+  return request({
+    url: "/ecw/box-preload-goods/delete?ids=" + id.join(","),
+    method: "delete",
+  });
+}
+
+/**
+ * 预装
+ *
+ * @export
+ * @param {*} params
+ * @return {*}
+ */
+export function createGoods(data) {
+  return request({
+    url: "/ecw/box-preload-goods/create",
+    method: "post",
+    data,
+  });
+}
+
+/**
+ * 服务提示消息回调
+ *
+ * @export
+ * @param {*} result
+ * @param {*} _vue
+ * @return {*}
+ */
+export function serviceMsg(result, _vue) {
+  return new Promise((resolve, reject) => {
+    const { code, msg } = result;
+    if (code === 0) {
+      _vue.$message.success("提交成功");
+      resolve();
+    } else {
+      _vue.$message.error(msg);
+      reject();
+    }
+  });
+}

src/router/index.js

@@ -381,7 +381,7 @@ export const constantRoutes = [
         meta: {title: '出货详情', icon: '', activeMenu: '/shipment/box'}
       }, */
       {
-        path: 'shippingSea/:boxId(\\d+)',
+        path: 'shippingSea/:shipmentId(\\d+)',
         component: (resolve) => import('@/views/ecw/box/shippingSea/shippingSea'),
         props: true,
         name: 'shippingSea',

src/utils/dict.js

@@ -152,8 +152,9 @@ export const DICT_TYPE = {
   RECEIVE_FLAG:'receive_flag',
   COMDINED_VALUE_ADDED_FEE:'combined_value_added_fee',
   ORDER_SPECIAL_NEEDS:'order_special_needs',
-  ORDER_ABNORMAL_STATE:'order_abnormal_state'
-
+  ORDER_ABNORMAL_STATE:'order_abnormal_state',
+  // ========== 出货模块 ==========
+  BOX_SHIPMENT_TRAILER_STATUS: 'shipment_trailer_status', // 拖车状态
 }
 
 /**

src/views/ecw/box/shippingSea/nodePage/booking.vue

 <template>
   <div>
-    <el-form ref="bookingForm" :rules="rules" :model="booking" label-width="140px">
-      <el-form-item label="SO NO">
-        <el-input v-model="booking.soNo" placeholder="请输入SO NO"></el-input>
+    <el-form ref="bookingForm" :rules="rules" :model="bookingObj" label-width="140px">
+      <el-form-item label="SO NO.">
+        <el-input v-model="bookingObj.sono" placeholder="请输入SO NO."></el-input>
       </el-form-item>
       <el-form-item label="船公司类型">
-        <el-select v-model="booking.type" placeholder="请选择船公司类型">
-          <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
+        <el-select v-model="bookingObj.shipCompanyType" placeholder="请选择船公司类型">
+          <el-option v-for="supplier in shipCompany" :key="supplier.id" :label="supplier.companyZh" :value="supplier.id"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="驳船港">
-        <el-select v-model="booking.bargePort" placeholder="请选择驳船港">
-          <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
+        <el-select v-model="bookingObj.bargePort" placeholder="请选择驳船港">
+          <el-option v-for="dock in docks" :key="dock.id" :label="dock.titleZh" :value="dock.id"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="大船港">
-        <el-select v-model="booking.bigShipPort" placeholder="请选择大船港">
-          <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
+        <el-select v-model="bookingObj.bigPort" placeholder="请选择大船港">
+          <el-option v-for="dock in docks" :key="dock.id" :label="dock.titleZh" :value="dock.id"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="目的港">
-        <el-select v-model="booking.destination" placeholder="请选择目的港">
-          <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
+        <el-select v-model="bookingObj.destPort" placeholder="请选择目的港">
+          <el-option v-for="dock in docks" :key="dock.id" :label="dock.titleZh" :value="dock.id"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="订舱公司">
-        <el-select v-model="booking.bookingCompany" placeholder="请选择订舱公司">
-          <el-option v-for="type in types" :key="type" :label="type" :value="type"></el-option>
+        <el-select v-model="bookingObj.spaceCompany" placeholder="请选择订舱公司">
+          <el-option v-for="supplier in suppliers" :key="supplier.id" :label="supplier.companyZh" :value="supplier.id"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="预计驳船时间" prop="time">
-        <el-date-picker type="date" placeholder="请选择日期" v-model="booking.bargeTime"></el-date-picker>
+      <el-form-item label="预计驳船时间" prop="bargeTime">
+        <el-date-picker type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" v-model="bookingObj.bargeTime"></el-date-picker>
       </el-form-item>
 
       <el-row>
         <el-col :span="12">
-          <el-form-item label="预计开船时间" prop="time">
-            <el-date-picker type="date" placeholder="请选择日期" v-model="booking.departureTime"></el-date-picker>
+          <el-form-item label="预计开船时间" prop="sailTime">
+            <el-date-picker type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" v-model="bookingObj.sailTime"></el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="通知人" label-width="80px">
-            <el-select v-model="booking.feedTimePerson" placeholder="请选择通知人">
+            <el-select v-model="bookingObj.feedTimePerson1" placeholder="请选择通知人">
             </el-select>
           </el-form-item>
         </el-col>
@@ -50,12 +50,12 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="预计提单补料时间">
-            <el-date-picker type="date" placeholder="请选择日期" v-model="booking.feedTime"></el-date-picker>
+            <el-date-picker type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" v-model="bookingObj.feedTime"></el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="通知人" label-width="80px">
-            <el-select v-model="booking.feedTimePerson" placeholder="请选择通知人">
+            <el-select v-model="bookingObj.feedTimePerson" placeholder="请选择通知人">
             </el-select>
           </el-form-item>
         </el-col>
@@ -64,12 +64,12 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="预计报关时间">
-            <el-date-picker type="date" placeholder="请选择日期" v-model="booking.declarationTime"></el-date-picker>
+            <el-date-picker type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" v-model="bookingObj.declarationTime"></el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="通知人" label-width="80px">
-            <el-select v-model="booking.feedTimePerson" placeholder="请选择通知人">
+            <el-select v-model="bookingObj.feedTimePerson" placeholder="请选择通知人">
             </el-select>
           </el-form-item>
         </el-col>
@@ -78,12 +78,12 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="预计截关时间">
-            <el-date-picker type="date" placeholder="请选择日期" v-model="booking.cutOffTime"></el-date-picker>
+            <el-date-picker type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" v-model="bookingObj.cutOffTime"></el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="通知人" label-width="80px">
-            <el-select v-model="booking.feedTimePerson" placeholder="请选择通知人">
+            <el-select v-model="bookingObj.feedTimePerson" placeholder="请选择通知人">
             </el-select>
           </el-form-item>
         </el-col>
@@ -99,29 +99,58 @@
 </template>
 
 <script>
+import { getDockPage } from "@/api/ecw/dock";
+import { booking, serviceMsg } from "@/api/ecw/boxSea";
 /**
  * 订舱
  */
 export default {
   name: "booking",
+  props: {
+    shipmentObj: Object,
+    allSupplier: Array,
+  },
   data() {
     return {
-      // 船公司类型
-      types: ["PIL", "MSK", "CMA", "COSCO", "ZIM", "ONE", "OOCL", "MSC", "HPL"],
       // 订舱对象
-      booking: {},
+      bookingObj: {},
       // 校验
       rules: {
-        time: [{ required: true, message: "必填", trigger: "change" }],
+        bargeTime: [{ required: true, message: "必填", trigger: "change" }],
+        sailTime: [{ required: true, message: "必填", trigger: "change" }],
       },
+      // 码头
+      docks: [],
+      // 供应商
+      suppliers: this.allSupplier.filter((item) =>
+        item.companyTypes.includes("1")
+      ),
+      // 船公司
+      shipCompany: this.allSupplier.filter((item) =>
+        item.companyTypes.includes("9")
+      ),
     };
   },
+  created() {
+    getDockPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
+      const { data } = res;
+      this.docks = data.list;
+    });
+  },
   methods: {
     /** 提交 */
     onSubmit() {
       this.$refs["bookingForm"].validate((valid) => {
         if (valid) {
-          alert("submit!");
+          booking({
+            shipmentId: shipmentObj.id,
+            ...this.bookingObj,
+            operateType: 2,
+          }).then((res) => {
+            serviceMsg(res, this).then(() => {
+              this.cancel();
+            });
+          });
         }
       });
     },

src/views/ecw/box/shippingSea/nodePage/settlement.vue

+<template>
+  <div>
+    <el-form ref="settlementForm" :model="settlementObj" label-width="80px">
+      <el-form-item label="可结算">
+        <el-date-picker type="date" placeholder="请选择日期" v-model="settlementObj.billable"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="已结算">
+        <el-date-picker type="date" placeholder="请选择日期" v-model="settlementObj.settled"></el-date-picker>
+      </el-form-item>
+    </el-form>
+
+    <el-row class="operate-button">
+      <el-button type="primary">保存</el-button>
+      <el-button type="success" @click="onSubmit">提交</el-button>
+      <el-button @click="cancel">关闭</el-button>
+    </el-row>
+  </div>
+</template>
+
+<script>
+/**
+ * 结算
+ */
+export default {
+  name: "settlement",
+  data() {
+    return {
+      // 结算对象
+      settlementObj: {},
+    };
+  },
+  methods: {
+    /** 提交 */
+    onSubmit() {
+      this.$refs["settlementForm"].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        }
+      });
+    },
+    /** 取消 */
+    cancel() {
+      this.$emit("closeDialog");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/ecw/box/shippingSea/nodePage/trailer.vue

 <template>
   <div>
-    <el-form ref="trailerForm" :rules="rules" :model="trailer" label-width="120px" class="trailer-form">
+    <el-form ref="trailerForm" :rules="rules" :model="trailerObj" label-width="120px">
       <el-form-item label="状态">
-        <el-select v-model="trailer.status" placeholder="请选择状态">
-          <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        <el-select v-model="trailerObj.tlContainerStatus" placeholder="请选择状态">
+          <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SHIPMENT_TRAILER_STATUS)" :key="type.value" :label="type.label" :value="type.value"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="拖车公司">
-        <el-select v-model="trailer.trailerCompany" placeholder="请选择拖车公司">
-          <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        <el-select v-model="trailerObj.tlCompanyId" placeholder="请选择拖车公司">
+          <el-option v-for="supplier in suppliers" :key="supplier.id" :label="supplier.companyZh" :value="supplier.id"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="拖车时间" prop="time">
-        <el-date-picker type="date" placeholder="请选择日期" v-model="trailer.trailerTime"></el-date-picker>
+      <el-form-item label="拖车时间" prop="tlTime">
+        <el-date-picker type="date" placeholder="请选择日期" value-format="yyyy-MM-dd" v-model="trailerObj.tlTime"></el-date-picker>
       </el-form-item>
       <el-form-item label="车牌">
-        <el-input v-model="trailer.licensePlate" placeholder="请输入车牌"></el-input>
+        <el-input v-model="trailerObj.tlLicensePlate	" placeholder="请输入车牌"></el-input>
       </el-form-item>
       <el-form-item label="司机">
-        <el-input v-model="trailer.driver" placeholder="请输入司机"></el-input>
+        <el-input v-model="trailerObj.tlDriver" placeholder="请输入司机"></el-input>
       </el-form-item>
       <el-form-item label="司机联系方式">
-        <el-input v-model="trailer.telephone" placeholder="请输入司机联系方式"></el-input>
+        <el-input v-model="trailerObj.tlDriverContact" placeholder="请输入司机联系方式"></el-input>
       </el-form-item>
       <el-form-item label="货柜号">
-        <el-input v-model="trailer.containerNumber" placeholder="请输入货柜号"></el-input>
+        <el-input v-model="trailerObj.tlContainerNo" placeholder="请输入货柜号"></el-input>
       </el-form-item>
       <el-form-item label="封条">
-        <el-input v-model="trailer.seal" placeholder="请输入封条"></el-input>
+        <el-input v-model="trailerObj.tlStripSeal" placeholder="请输入封条"></el-input>
       </el-form-item>
     </el-form>
     <el-row class="operate-button">
-      <el-button type="primary" @click="onSubmit">保存</el-button>
-      <el-button type="success" @click="onSubmit">提交</el-button>
+      <el-button type="primary" @click="onSubmit(1)">保存</el-button>
+      <el-button type="success" @click="onSubmit(2)">提交</el-button>
       <el-button @click="cancel">关闭</el-button>
     </el-row>
   </div>
 </template>
 
 <script>
+import { trailer, serviceMsg } from "@/api/ecw/boxSea";
 /**
  * 拖车
  */
 export default {
   name: "trailer",
+  props: {
+    shipmentObj: Object,
+    allSupplier: Array,
+  },
   data() {
     return {
-      // 状态
-      status: [
-        {
-          value: "1",
-          label: "已派车，待提柜",
-        },
-        {
-          value: "2",
-          label: "已提柜，待还柜",
-        },
-        {
-          value: "3",
-          label: "已还柜",
-        },
-      ],
       // 拖车对象
-      trailer: {},
+      trailerObj: {},
       // 校验
       rules: {
-        time: [{ required: true, message: "必填", trigger: "change" }],
+        tlTime: [{ required: true, message: "必填", trigger: "change" }],
       },
+      // 拖车公司
+      suppliers: this.allSupplier.filter((item) =>
+        item.companyTypes.includes("4")
+      ),
     };
   },
   methods: {
     /** 提交 */
-    onSubmit() {
+    onSubmit(operateType) {
       this.$refs["trailerForm"].validate((valid) => {
         if (valid) {
-          alert("submit!");
+          trailer({
+            ...this.trailerObj,
+            shipmentId: shipmentObj.id,
+            operateType,
+          }).then((res) => {
+            serviceMsg(res, this).then(() => {
+              this.cancel();
+            });
+          });
         }
       });
     },

src/views/ecw/box/shippingSea/seaProcess.vue

@@ -22,7 +22,7 @@
 
     <!-- 弹窗 -->
     <el-dialog custom-class="shipping-dialog" :title="dialogConfig.title" :visible.sync="dialogConfig.dialogVisible" :width="dialogConfig.width" :fullscreen="dialogConfig.fullscreen" :close-on-click-modal=false :modal-append-to-body=false append-to-body destroy-on-close>
-      <component v-bind:is="currentComponent" @closeDialog="closeDialog"></component>
+      <component v-bind:is="currentComponent" @closeDialog="closeDialog" :shipmentObj="shipmentObj" :allSupplier="allSupplier"></component>
     </el-dialog>
   </div>
 </template>
@@ -43,6 +43,8 @@ import clrDocumentWidget from "./nodePage/clrDocument.vue";
 import arrivalWidget from "./nodePage/arrival.vue";
 import cusClearanceWidget from "./nodePage/cusClearance.vue";
 import unloadingWidget from "./nodePage/unloading/index.vue";
+import settlementWidget from "./nodePage/settlement.vue";
+import { getSupplierPage } from "@/api/ecw/supplier";
 
 /**
  * 海运流程图
@@ -65,10 +67,11 @@ export default {
     arrivalWidget,
     cusClearanceWidget,
     unloadingWidget,
+    settlementWidget,
   },
   props: {
     shippingType: String,
-    boxId: String,
+    shipmentObj: Object,
   },
   data() {
     return {
@@ -101,9 +104,9 @@ export default {
               type: "trailer",
             },
             {
-              unNode: true,
-              type: "agent",
               title: "AGENT",
+              imgSrc: require("@/assets/images/shipping/agent-start.png"),
+              type: "agent",
             },
           ],
           [
@@ -151,13 +154,13 @@ export default {
               type: "clearanceDocument",
             }, */
             {
-              unNode: true,
-              type: "blCopy",
               title: "提单Copy",
+              imgSrc: require("@/assets/images/shipping/tdcopy-start.png"),
+              type: "blCopy",
             },
             {
-              unNode: true,
               type: "clrDocument",
+              imgSrc: require("@/assets/images/shipping/qg-start.png"),
               title: "清关文件",
             },
           ],
@@ -193,8 +196,21 @@ export default {
       },
       // 当前组件
       currentComponent: "",
+      // 供应商
+      allSupplier: [],
     };
   },
+  created() {
+    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
+      const { data } = res;
+      this.allSupplier = data.list.map((item) => {
+        if (item.companyType) {
+          item.companyTypes = item.companyType.split(",");
+        }
+        return item;
+      });
+    });
+  },
   methods: {
     /** 关闭弹窗 */
     closeDialog() {
@@ -228,6 +244,11 @@ export default {
       this.$set(this.dialogConfig, "dialogVisible", true);
     },
   },
+  watch: {
+    shipmentObj(val) {
+      this.shipmentObj = val;
+    },
+  },
 };
 </script>
 

src/views/ecw/box/shippingSea/shippingSea.vue

@@ -9,17 +9,23 @@
         <!-- 信息 -->
         <el-card style="margin-top: 15px">
           <el-descriptions :column="5" border>
-            <el-descriptions-item label="自编号"></el-descriptions-item>
-            <el-descriptions-item label="运输方式"></el-descriptions-item>
-            <el-descriptions-item label="始发地"></el-descriptions-item>
-            <el-descriptions-item label="目的地"></el-descriptions-item>
+            <el-descriptions-item label="自编号">{{shipmentObj.selfNo}}</el-descriptions-item>
+            <el-descriptions-item label="运输方式">
+              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="shipmentObj.transportType" />
+            </el-descriptions-item>
+            <el-descriptions-item label="始发地">
+              {{importCityName(shipmentObj.startWarehouseId)}}
+            </el-descriptions-item>
+            <el-descriptions-item label="目的地">
+              {{importCityName(shipmentObj.destWarehouseId)}}
+            </el-descriptions-item>
             <el-descriptions-item label="状态"></el-descriptions-item>
           </el-descriptions>
         </el-card>
 
         <!-- 海运流程图 -->
         <div class="shipping-flow">
-          <shippingChart :boxId="boxId" />
+          <shippingChart :shipmentObj="shipmentObj" />
         </div>
       </el-col>
     </el-row>
@@ -28,6 +34,9 @@
 
 <script>
 import shippingChart from "../shippingSea/seaProcess";
+import { getbox } from "@/api/ecw/box";
+import { getWarehouseList } from "@/api/ecw/warehouse";
+
 /**
  * 海运操作主页面
  */
@@ -37,7 +46,28 @@ export default {
     shippingChart,
   },
   props: {
-    boxId: String,
+    shipmentId: String,
+  },
+  data() {
+    return {
+      shipmentObj: {},
+      warehouseList: [],
+    };
+  },
+  created() {
+    getbox(this.shipmentId).then((res) => {
+      const { data } = res;
+      this.shipmentObj = data ?? {};
+    });
+    getWarehouseList().then((r) => {
+      this.warehouseList = r.data;
+    });
+  },
+  methods: {
+    importCityName(id) {
+      var arr = this.warehouseList.filter((item) => item.id == id);
+      return arr.length > 0 ? arr[0].titleZh : "无";
+    },
   },
 };
 </script>
@@ -48,6 +78,12 @@ export default {
 }
 // 海运操作统一弹窗样式
 .shipping-dialog {
+  .el-dialog__body {
+    height: calc(100% - 54px);
+    > :first-child {
+      height: 100%;
+    }
+  }
   // 页面内元素弹窗form控件宽度设置
   .el-form-item__content {
     > div {
@@ -57,7 +93,7 @@ export default {
   .operate-button {
     text-align: center;
   }
-  .two-element{
+  .two-element {
     .el-form-item__content {
       display: flex;
       > :last-child {