10/18

src/Views/BookingOrder/index.vue

@@ -23,6 +23,17 @@
       :before-close="dialogF"
       :fullscreen="true"
     >
+      <div class="buttonBox">
+        <el-button type="primary" @click="FnRefresh"> 刷新 </el-button>
+        <el-button type="primary" @click="FnSave"> 保存 </el-button>
+        <el-button type="primary" @click="FnChangePage('prev')">
+          上一票
+        </el-button>
+        <el-button type="primary" @click="FnChangePage('next')">
+          下一票
+        </el-button>
+        <el-button type="primary" @click="dialogF"> 返回 </el-button>
+      </div>
       <el-form :model="DialogForm" :label-width="100" size="default">
         <el-row>
           <el-col :span="18">
@@ -90,7 +101,10 @@
               </el-col>
               <el-col :span="20">
                 <el-form-item label="备注">
-                  <el-input :disabled="false" v-model="DialogForm.Remark" />
+                  <el-input
+                    :disabled="false"
+                    v-model="DialogForm.customRemark"
+                  />
                 </el-form-item>
               </el-col>
               <!-- <el-col :span="6">
@@ -833,6 +847,18 @@
             </el-row> -->
           </el-col>
           <el-col :span="6">
+            <el-row class="UnitBox">
+              <el-col :span="24">
+                <p><span> </span>服务项目</p>
+              </el-col>
+              <span
+                class="CsGoods"
+                v-for="item in DialogForm.serviceItemList"
+                :key="item.id"
+              >
+                {{ item.value }}
+              </span>
+            </el-row>
             <el-row class="UnitBox">
               <el-col :span="24">
                 <p><span> </span>船舶动态</p>
@@ -888,9 +914,28 @@
               <el-col :span="24">
                 <p><span> </span>文件列表</p>
               </el-col>
-              <span v-for="item in DialogForm.bookingFileList" :key="item.id">
+              <div class="FileBox">
+                <div v-for="item in DialogForm.bookingFileList" :key="item.id">
+                  <span class="fileName" @click="FnClick(item)">
+                    <el-icon><Document /></el-icon>
                     {{ item.fileName }}
                   </span>
+                  <div>
+                    <span>
+                      <el-icon><MessageBox /></el-icon>
+                      {{ item.typeName }}
+                    </span>
+                    <span>
+                      <el-icon><User /></el-icon>
+                      {{ item.createByName ? item.createByName : "-" }}
+                    </span>
+                    <span>
+                      <el-icon><Clock /></el-icon>
+                      {{ item.createTime }}
+                    </span>
+                  </div>
+                </div>
+              </div>
             </el-row>
             <el-row class="UnitBox">
               <el-col :span="24">
@@ -1097,11 +1142,15 @@ import SearchBox from "@/components/SearchBox.vue";
 import TableBox from "@/components/TableBox.vue";
 import {
   bookingOrderList,
+  bookingOrderSave,
   bookingOrderInfo,
   bookingTemplateSave,
   bookingTemplateDelete,
+  tenantDownFile,
 } from "@/api/Index";
+import { useStore } from "vuex";
 import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
 export default {
   name: "ViewBooking",
   components: {
@@ -1109,6 +1158,7 @@ export default {
     TableBox,
   },
   setup() {
+    const store = useStore();
     const dialogFormVisible = ref(false);
     const DialogForm = ref({});
     const bizStatusData = [
@@ -1129,39 +1179,29 @@ export default {
         name: "已驳回",
       },
     ];
-
+    // 主提单号，订单编号，开船日期，船公司
     const SearchBoxData = reactive([
       {
-        title: "业务状态",
+        title: "主提单号",
-        EType: "Select",
-        DName: "bizStatus",
-        SelectList: bizStatusData,
-      },
-      {
-        title: "代码",
-        EType: "Input",
-        DName: "title",
-      },
-      {
-        title: "名称",
         EType: "Input",
-        DName: "name",
+        DName: "mblNo",
       },
       {
-        title: "地址",
+        title: "订单编号",
         EType: "Input",
-        DName: "addr",
+        DName: "billNo",
       },
       {
-        title: "模板内容",
+        title: "开船日期",
-        EType: "Input",
+        EType: "DatePicker",
-        DName: "content",
+        DName: "etdBegin",
+        DName2: "etdEnd",
       },
       {
-        title: "订舱日期",
+        title: "船公司",
-        EType: "DatePicker",
+        EType: "Select",
-        DName: "createTimeBegin",
+        DName: "carrierCode",
-        DName2: "createTimeEnd",
+        SelectList: store.state.Data.Carrierlist,
       },
     ]);
     const ClickAdd = () => {
@@ -1187,25 +1227,33 @@ export default {
       // return ;
     };
     const TableData = reactive([
+      { label: "船公司代号", prop: "carrierCode" },
       { label: "订单编号", prop: "billNo" },
+      { label: "主提单号", prop: "mblNo" },
       {
-        label: "业务状态",
+        label: "船名/航次",
-        prop: "bizStatus",
+        prop: "vessel",
-        StateType: "multiple",
+        multiple: true,
-        StateChange: bizStatusData,
+        multipleData: ["vessel", "voyageNo"],
       },
-      { label: "船公司代号", prop: "carrierCode" },
+      { label: "开船日期", prop: "etdBegin" },
-      { label: "提单号", prop: "mblNo" },
       {
-        label: "船名/航次",
+        label: "箱型/箱量",
         prop: "vessel",
         multiple: true,
         multipleData: ["vessel", "voyageNo"],
       },
-      { label: "订舱日期", prop: "createTime", width: "100" },
+      {
-      { label: "操作人", prop: "createByName" },
+        label: "业务状态",
+        prop: "bizStatus",
+        StateType: "multiple",
+        StateChange: bizStatusData,
+      },
+
+      // { label: "订舱日期", prop: "createTime", width: "100" },
+      // { label: "操作人", prop: "createByName" },
       // { label: "航次", prop: "createTimeEnd" },
-      { label: "开船日期", prop: "etdBegin" },
+
       // { label: "航次", prop: "etdEnd" },
       {
         label: "操作",
@@ -1268,6 +1316,113 @@ export default {
     const TableRowDblclick = (e) => {
       ClickEdit(e);
     };
+    const FnClick = (uploadFile) => {
+      console.log(uploadFile);
+      tenantDownFile({
+        businessLicenseUrl: uploadFile.filePath,
+      }).then((res) => {
+        console.log(res);
+        const blob = new Blob([res]);
+        // for IE
+        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+          const fileName = uploadFile.fileName;
+          window.navigator.msSaveOrOpenBlob(blob, fileName);
+        } else {
+          // for Non-IE (chrome, firefox etc.)
+          const fileName = uploadFile.fileName;
+          const elink = document.createElement("a");
+          elink.download = fileName;
+          elink.style.display = "none";
+          elink.href = URL.createObjectURL(blob);
+          document.body.appendChild(elink);
+          elink.click();
+          URL.revokeObjectURL(elink.href);
+          document.body.removeChild(elink);
+        }
+      });
+    };
+    const FnRefresh = () => {
+      ClickEdit(DialogForm.value);
+    };
+    const FnSave = () => {
+      let ApiData = {
+        customRemark: DialogForm.value.customRemark,
+        id: DialogForm.value.id,
+      };
+      bookingOrderSave(ApiData).then((res) => {
+        if (res.code == 200) {
+          ElMessage({
+            message: "保存成功",
+            type: "success",
+          });
+        }
+      });
+    };
+    const FnChangePage = (type) => {
+      let NID = "";
+      let currentPage = TableBoxRef.value.search_data.currentPage;
+      let pageSize = TableBoxRef.value.search_data.pageSize;
+      let total = TableBoxRef.value.search_data.total;
+      let TData = TableBoxRef.value.TData;
+      TData.forEach((item, index) => {
+        if (item.id == DialogForm.value.id) {
+          if (type === "prev") {
+            if (index == 0) {
+              if (currentPage == 1) {
+                ElMessage({
+                  message: "已是第一票",
+                  type: "warning",
+                });
+              } else {
+                --TableBoxRef.value.search_data.currentPage;
+                TableBoxRef.value.Search();
+                let ApiData = { ...TableBoxRef.value.search_data };
+                console.log("查询", ApiData);
+                bookingOrderList(ApiData).then((res) => {
+                  if (res.code == 200) {
+                    console.log(res.data.list);
+                    NID = res.data.list[9].id;
+                    ClickEdit({ id: NID });
+                  }
+                });
+              }
+            } else {
+              NID = TData[index - 1].id;
+            }
+          } else {
+            console.log(TData);
+            if (index < TData.length - 1) {
+              console.log(index, TData.length - 1);
+              NID = TData[index + 1].id;
+            } else {
+              let Y = Math.ceil(total / pageSize);
+              console.log(Y);
+              if (currentPage < Y) {
+                ++TableBoxRef.value.search_data.currentPage;
+                TableBoxRef.value.Search();
+                let ApiData = { ...TableBoxRef.value.search_data };
+                console.log("查询", ApiData);
+                bookingOrderList(ApiData).then((res) => {
+                  if (res.code == 200) {
+                    console.log(res.data.list);
+                    NID = res.data.list[0].id;
+                    ClickEdit({ id: NID });
+                  }
+                });
+              } else {
+                ElMessage({
+                  message: "已是最后一票",
+                  type: "warning",
+                });
+              }
+            }
+          }
+        }
+      });
+      if (NID) {
+        ClickEdit({ id: NID });
+      }
+    };
     return {
       bizStatusData,
       DialogForm,
@@ -1284,6 +1439,10 @@ export default {
       dialogF,
       dialogS,
       TableRowDblclick,
+      FnClick,
+      FnRefresh,
+      FnSave,
+      FnChangePage,
     };
   },
 };
@@ -1291,6 +1450,10 @@ export default {
 <style lang="scss" scoped>
 :deep(.CsDialog) {
   background: #e9ecf5;
+  .buttonBox {
+    margin-top: -30px;
+    margin-left: 10px;
+  }
   .UnitBox {
     background: #ffffff;
     border: 1px solid #eaf0f7;
@@ -1314,6 +1477,47 @@ export default {
       font-weight: bolder;
     }
   }
+  .FileBox {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    > div {
+      border-bottom: 1px solid #e2e2e2;
+      span {
+        padding: 5px 0;
+        &.fileName {
+          cursor: pointer;
+          &:hover {
+            color: #13c2c2;
+          }
+        }
+        display: inline-block;
+        margin-right: 5px;
+        height: 16px;
+        line-height: 16px;
+        .el-icon {
+          margin-right: 3px;
+          color: #13c2c2;
+          font-size: 16px;
+        }
+      }
+      > div {
+        padding: 5px 0;
+
+        // span {
+        //   display: inline-block;
+        //   margin-right: 5px;
+        //   height: 16px;
+        //   line-height: 16px;
+        //   .el-icon {
+        //     margin-right: 3px;
+        //     color: #13c2c2;
+        //     font-size: 16px;
+        //   }
+        // }
+      }
+    }
+  }
 }
 .BookingMain {
   width: 100%;
@@ -1334,4 +1538,7 @@ export default {
     border: 1px solid #409eff;
   }
 }
+.el-form-item--default {
+  margin-bottom: 12px;
+}
 </style>

src/api/Index.js

@@ -230,7 +230,17 @@ const bookingOrderList = (params) => {
     },
   });
 };
-
+// 保存客户订单(2023-10增加)
+const bookingOrderSave = (data) => {
+  return request({
+    data: {
+      url: "/api/bookingAip/bookingOrder/save",
+      method: "post",
+      data,
+      // headers: { Authorization: localStorage.getItem("token") },
+    },
+  });
+};
 // 船公司信息
 const GetCarrierlist = (params) => {
   return request({
@@ -544,6 +554,7 @@ export {
   bookingTemplateDelete,
   bookingOrderInfo,
   bookingOrderList,
+  bookingOrderSave,
   GetCarrierlist,
   GetCtnlist,
   Getportloadlist,

src/components/SearchBox.vue

@@ -31,6 +31,7 @@
               class="ECs"
               v-model="Data[item.DName]"
               :placeholder="`请输入${item.title}`"
+              clearable
             />
             <el-select
               v-else-if="item.EType == 'Select'"
@@ -38,6 +39,7 @@
               v-model="Data[item.DName]"
               :placeholder="`请选择${item.title}`"
               size="large"
+              clearable
             >
               <el-option
                 v-for="e in item.SelectList"

src/components/TableBox.vue

@@ -92,7 +92,7 @@
       "
     >
       <span>
-        <el-table :data="DialogTableData" style="width: 100%">
+        <el-table :data="DialogTableData" style="width: 100%" height="400">
           <el-table-column prop="status" label="业务状态" width="80" />
           <el-table-column prop="opTime" label="状态时间" width="160" />
           <el-table-column prop="remak" label="备注" />