海空联运

src/api/ecw/boxSeaAir.js

+import request from "@/utils/request";
+
+/**
+ * 起飞
+ *
+ * @export
+ * @param {*} data
+ * @return {*}
+ */
+ export function takeoffCreate(data) {
+    if (data.id) {
+      return request({
+        url: "/ecw/box-takeoff/update",
+        method: "put",
+        data,
+      });
+    }
+    return request({
+      url: "/ecw/box-takeoff/create",
+      method: "post",
+      data,
+    });
+  }
+
+  /**
+ * 到港
+ *
+ * @export
+ * @param {*} data
+ * @return {*}
+ */
+ export function arrivalCreate(data) {
+    if (data.id) {
+      return request({
+        url: "/ecw/box-arrival/update",
+        method: "put",
+        data,
+      });
+    }
+    return request({
+      url: "/ecw/box-arrival/create",
+      method: "post",
+      data,
+    });
+  }
\ No newline at end of file

src/router/index.js

@@ -406,6 +406,28 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/boxSeaAir',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'query/:shipmentId(\\d+)',
+        component: (resolve) => import('@/views/ecw/box/query'),
+        props: true,
+        name: 'shippingDetail',
+        meta: {title: '出货详情', icon: '', activeMenu: '/shipment/boxDetail'}
+      },
+      {
+        path: 'shippingSeaAir/:shipmentId(\\d+)',
+        component: (resolve) => import('@/views/ecw/box/shippingSeaAir/shippingSeaAir'),
+        props: true,
+        name: 'shippingSeaAir',
+        meta: {title: '海空联运出货操作', icon: '', activeMenu: '/shipment/boxSeaAir'}
+      }
+    ]
+  },
 ]
 
 // 防止连续点击多次路由报错

src/views/ecw/box/indexSeaAir.vue

@@ -90,14 +90,18 @@
         </template>
       </el-table-column>
 
-      <el-table-column label="方数（预装/已装）" align="center" prop="squareNumber"/>
-      <el-table-column label="重量（预装/已装）" align="center" prop="weight"/>
-
-      <el-table-column label="状态" align="center" prop="boxStatus">
-        <template slot-scope="scope">
-          <dict-tag :type="DICT_TYPE.BOX_SHIPMENT_STATUS" :value="scope.row.boxStatus"/>
+      <el-table-column label="方数（预装/已装）" align="center" prop="squareNumber">
+        <template slot-scope="{row}">
+          {{row.boxStatistics.volume}}/{{row.boxStatistics.loadVolume}}
         </template>
       </el-table-column>
+      <el-table-column label="重量（预装/已装）" align="center" prop="weight">
+        <template slot-scope="{row}">
+          {{row.boxStatistics.weight}}/{{row.boxStatistics.loadWeight}}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="状态" align="center" prop="shipmentStatusText" />
 
       <el-table-column label="日期" align="center" prop="createTime" width="180">
       <template slot-scope="scope">
@@ -402,8 +406,8 @@
       /** 查看按钮操作 */
       handleCommand(row, command) {
         switch (command) {
-          case 'sea':
-            this.$router.push('/box/shippingSea/' + row.id)
+          case 'seaAir':
+            this.$router.push('/boxSeaAir/shippingSeaAir/' + row.id)
             break;
 
           case 'edit':

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

+<template>
+  <div>
+    <el-form ref="twoWayArrivalForm" :rules="rules" :model="twoWayArrivalObj" label-width="120px">
+      <el-form-item label="实际到港时间" prop="apRealTime">
+        <el-date-picker type="datetime" placeholder="请选择日期" v-model="twoWayArrivalObj.apRealTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="确认到港时间" prop="apConfirmTime">
+        <el-date-picker type="datetime" placeholder="请选择日期" v-model="twoWayArrivalObj.apConfirmTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="卸港时间" prop="apUnloadPortTime">
+        <el-date-picker type="datetime" placeholder="请选择日期" v-model="twoWayArrivalObj.apUnloadPortTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+      </el-form-item>
+    </el-form>
+
+    <el-row class="operate-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-button type="primary" @click="exceptionReg">异常登记</el-button>
+    </el-row>
+
+    <!-- 对话框 -->
+    <el-dialog custom-class="shipping-dialog" title="异常登记" :visible.sync="dialogVisible" width="700px" :modal-append-to-body=false append-to-body destroy-on-close>
+      <regError @closeDialog="dialogVisible = false" v-bind="$attrs" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import regError from "../../regError";
+import { arrivalCreate } from "@/api/ecw/boxSeaAir";
+import { formatDateStr, serviceMsg } from "../utils";
+
+/**
+ * 起飞
+ */
+export default {
+  name: "twoWayArrival",
+  inheritAttrs: false,
+  components: {
+    regError,
+  },
+  data() {
+    return {
+      // 清关对象
+      twoWayArrivalObj: {},
+      // 校验
+      rules: {
+        actHeadTime: [{ required: true, message: "必填", trigger: "blur" }],
+        estHeadTime: [{ required: true, message: "必填", trigger: "blur" }],
+        estSecondTime: [{ required: true, message: "必填", trigger: "blur" }],
+      },
+      // 弹窗配置
+      dialogVisible: false,
+      // 提示消息
+      showMsg: false,
+    };
+  },
+  created() {
+    const voName = this.$attrs.currNode.voName;
+    let oldData = { ...this.$attrs.shipmentObj[voName] };
+    oldData = formatDateStr(oldData, ["apConfirmTime"], "YYYY-MM-DD HH:mm:ss");
+    oldData = formatDateStr(oldData, ["apRealTime"], "YYYY-MM-DD HH:mm:ss");
+    oldData = formatDateStr(oldData, ["apUnloadPortTime"], "YYYY-MM-DD HH:mm:ss");
+    this.twoWayArrivalObj = oldData;
+  },
+  watch: {
+  },
+  methods: {
+    // 异常登记
+    exceptionReg() {
+      this.dialogVisible = true;
+    },
+    /** 提交 */
+    onSubmit(operateType) {
+      this.$refs["twoWayArrivalForm"].validate((valid) => {
+        if (valid) {
+          arrivalCreate({
+            ...this.twoWayArrivalObj,
+            shipmentId: this.$attrs.shipmentObj.id,
+            operateType,
+          }).then((res) => {
+            serviceMsg(res, this).then(() => {
+              this.cancel("submit");
+            });
+          });
+        }
+      });
+    },
+    /** 取消 */
+    cancel(type) {
+      this.$emit("closeDialog", type);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.message-area {
+  margin: 0;
+  color: red;
+}
+</style>

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

+<template>
+  <div>
+    <el-form ref="twoWayTakeoffForm" :rules="rules" :model="twoWayTakeoffObj" label-width="120px">
+      <el-form-item label="预计头程时间" prop="estHeadTime">
+        <el-date-picker type="datetime" placeholder="请选择日期" v-model="twoWayTakeoffObj.estHeadTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="实际头程时间" prop="actHeadTime">
+        <el-date-picker type="datetime" placeholder="请选择日期" v-model="twoWayTakeoffObj.actHeadTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+      </el-form-item>
+      <el-form-item label="预计二程时间" prop="estSecondTime">
+        <el-date-picker type="datetime" placeholder="请选择日期" v-model="twoWayTakeoffObj.estSecondTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
+      </el-form-item>
+    </el-form>
+
+    <el-row class="operate-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-button type="primary" @click="exceptionReg">异常登记</el-button>
+    </el-row>
+
+    <!-- 对话框 -->
+    <el-dialog custom-class="shipping-dialog" title="异常登记" :visible.sync="dialogVisible" width="700px" :modal-append-to-body=false append-to-body destroy-on-close>
+      <regError @closeDialog="dialogVisible = false" v-bind="$attrs" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import regError from "../../regError";
+import { takeoffCreate } from "@/api/ecw/boxSeaAir";
+import { formatDateStr, serviceMsg } from "../utils";
+
+/**
+ * 起飞
+ */
+export default {
+  name: "twoWayTakeoff",
+  inheritAttrs: false,
+  components: {
+    regError,
+  },
+  data() {
+    return {
+      // 清关对象
+      twoWayTakeoffObj: {},
+      // 校验
+      rules: {
+        actHeadTime: [{ required: true, message: "必填", trigger: "blur" }],
+        estHeadTime: [{ required: true, message: "必填", trigger: "blur" }],
+        estSecondTime: [{ required: true, message: "必填", trigger: "blur" }],
+      },
+      // 弹窗配置
+      dialogVisible: false,
+      // 提示消息
+      showMsg: false,
+    };
+  },
+  created() {
+    const voName = this.$attrs.currNode.voName;
+    let oldData = { ...this.$attrs.shipmentObj[voName] };
+    oldData = formatDateStr(oldData, ["actHeadTime"], "YYYY-MM-DD HH:mm:ss");
+    oldData = formatDateStr(oldData, ["estHeadTime"], "YYYY-MM-DD HH:mm:ss");
+    oldData = formatDateStr(oldData, ["estSecondTime"], "YYYY-MM-DD HH:mm:ss");
+    this.twoWayTakeoffObj = oldData;
+  },
+  watch: {
+  },
+  methods: {
+    // 异常登记
+    exceptionReg() {
+      this.dialogVisible = true;
+    },
+    /** 提交 */
+    onSubmit(operateType) {
+      this.$refs["twoWayTakeoffForm"].validate((valid) => {
+        if (valid) {
+          takeoffCreate({
+            ...this.twoWayTakeoffObj,
+            shipmentId: this.$attrs.shipmentObj.id,
+            operateType,
+          }).then((res) => {
+            serviceMsg(res, this).then(() => {
+              this.cancel("submit");
+            });
+          });
+        }
+      });
+    },
+    /** 取消 */
+    cancel(type) {
+      this.$emit("closeDialog", type);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.message-area {
+  margin: 0;
+  color: red;
+}
+</style>

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

@@ -40,6 +40,8 @@ import blCopyWidget from "./nodePage/blCopy.vue";
 import clrDocumentWidget from "./nodePage/clrDocument.vue";
 import arrivalWidget from "./nodePage/arrival.vue";
 import cusClearanceWidget from "./nodePage/cusClearance.vue";
+import twoWayTakeoffWidget from "./nodePage/twoWayTakeoff.vue";
+import twoWayArrivalWidget from "./nodePage/twoWayArrival.vue";
 import unloadingWidget from "./nodePage/unloading/index.vue";
 import settlementWidget from "./nodePage/settlement.vue";
 import reviewWidget from "./nodePage/review.vue";
@@ -66,6 +68,8 @@ export default {
     clrDocumentWidget,
     arrivalWidget,
     cusClearanceWidget,
+    twoWayTakeoffWidget,
+    twoWayArrivalWidget,
     unloadingWidget,
     settlementWidget,
     reviewWidget,

src/views/ecw/box/shippingSeaAir/shippingSeaAir.vue

+<template>
+  <div>
+    <el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="19">
+        <div style="display: flex; justify-content: space-between;align-items: flex-end;">
+          <h2>海空联运出货操作</h2>
+        </div>
+
+        <!-- 信息 -->
+        <el-card style="margin-top: 15px">
+          <el-descriptions :column="5" border>
+            <el-descriptions-item label="自编号">{{shipmentObj.selfNo}}</el-descriptions-item>
+            <el-descriptions-item label="出货渠道">
+              {{ channelName(shipmentObj.shippingChannelId) }}
+            </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="状态">
+              {{statusLabel}}
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
+        <!-- 海运流程图 -->
+        <seaProcess :seaBaseData="seaAirBaseData" :shipmentObj="shipmentObj" :allSupplier="allSupplier" :allDocks="allDocks" :allUsers="allUsers" :warehouseList="warehouseList" @getBoxInfo="getBoxInfo" />
+
+        <!-- 海运步骤图 -->
+        <seaStepDetail :seaBaseData="seaAirBaseData" :shipmentObj="shipmentObj" :allSupplier="allSupplier" :allDocks="allDocks" :allUsers="allUsers" :warehouseList="warehouseList" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import seaProcess from "../shippingSea/seaProcess.vue";
+import seaStepDetail from "../shippingSea/seaStepDetail.vue";
+import { getbox } from "@/api/ecw/box";
+import { getWarehouseList } from "@/api/ecw/warehouse";
+import { getSupplierPage } from "@/api/ecw/supplier";
+import { getChannelList } from '@/api/ecw/channel';
+import { getDockPage } from "@/api/ecw/dock";
+import { listUser } from "@/api/system/user";
+import { getSeaStatus, getStatusName, seaAirBaseData } from "../shippingSea/utils";
+import {arrryToKeyedObjectBy} from '@/utils/index'
+
+/**
+ * 海运操作主页面
+ */
+export default {
+  name: "shippingSea",
+  components: {
+    seaProcess,
+    seaStepDetail,
+  },
+  props: {
+    shipmentId: String,
+  },
+  data() {
+    return {
+      shipmentObj: {},
+      warehouseList: [],
+      // 供应商
+      allSupplier: [],
+      // 码头
+      allDocks: [],
+      // 用户
+      allUsers: [],
+      // 流程图节点
+      seaAirBaseData: seaAirBaseData(),
+      // 状态
+      statusLabel: "",
+      channelList:[] , // 渠道
+    };
+  },
+  computed: {
+    // 渠道用id做键值
+    keyedChannel(){
+      return arrryToKeyedObjectBy(this.channelList, 'channelId')
+    },
+    // 根据渠道id获取渠道名
+    channelName(){
+      return id => {
+        return this.keyedChannel[id] ? this.keyedChannel[id].nameZh : null
+      }
+    },
+  },
+  created() {
+    this.getBoxInfo();
+    // 仓库
+    getWarehouseList().then((r) => {
+      this.warehouseList = r.data;
+    });
+    // 供应商
+    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;
+      });
+    });
+    // 码头
+    getDockPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
+      const { data } = res;
+      this.allDocks = data.list;
+    });
+    // 用户
+    listUser({ pageNo: "1", pageSize: "10000" }).then((res) => {
+      const { data } = res;
+      this.allUsers = data.list ?? [];
+    });
+    getChannelList().then(res => this.channelList = res.data)
+  },
+  methods: {
+    /* 获取仓库 */
+    importCityName(id) {
+      var arr = this.warehouseList.filter((item) => item.id == id);
+      return arr.length > 0 ? arr[0].titleZh : "无";
+    },
+    // 出货
+    getBoxInfo() {
+      getbox(this.shipmentId).then((res) => {
+        const { data } = res;
+        this.shipmentObj = data ?? {};
+      });
+    },
+  },
+  watch: {
+    /* 监听发货对象 */
+    shipmentObj(val) {
+      this.statusLabel = getStatusName(getSeaStatus(val));
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+// 海运操作统一弹窗样式
+.shipping-dialog {
+  .el-dialog__body {
+    height: calc(100% - 54px);
+    > :first-child {
+      height: 100%;
+    }
+  }
+  // 页面内元素弹窗form控件宽度设置
+  .el-form-item__content {
+    > div:not(.el-input-number) {
+      width: 100%;
+    }
+  }
+  .operate-button {
+    padding-top: 10px;
+    text-align: center;
+  }
+  .two-element {
+    .el-form-item__content {
+      display: flex;
+      > :last-child {
+        margin-left: 10px;
+      }
+    }
+  }
+}
+</style>