更新 同步员工版航次详情

src/App.vue

@@ -146,6 +146,14 @@ export default {
   margin: 15px 0 15px 0;
 }
 
+.container-second-title {
+  font-size: 16px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0094fe;
+  margin: 15px 0 15px 0;
+}
+
 .line {
   display: flex;
   align-items: center;
@@ -198,4 +206,33 @@ export default {
 .el-upload--picture-card {
   border: none;
 }
+
+.ml20 {
+  margin-left: 20px;
+}
+
+.hr {
+  border-bottom: 2px solid #3b91fa;
+  opacity: 0.2;
+}
+
+.m10-0 {
+  margin: 10px 0;
+}
+
+.m30-0 {
+  margin: 30px 0;
+}
+
+.fww {
+  flex-wrap: wrap;
+}
+
+.tar {
+  text-align: right;
+}
+
+.mr20 {
+  margin-right: 20px;
+}
 </style>

src/apis/fetch.js

@@ -42,4 +42,9 @@ export default {
   getDischargeList(data) {
     return $http("post", "/voyage/getDischargeList", data);
   },
+
+  // 获取汽车装货记录
+  getTruckLoadRecord(data) {
+    return $http("post", "/voyage/getCarLoadRecordList", data);
+  },
 };

src/components/Certs.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="line" v-show="!disabled || shipFileList.length">
+    <div class="info-line">
+      <div class="info-line-title">船舶证书 :</div>
+      <Uploader
+        :uploaderId="certsId + 'shipFileList'"
+        :params="{ type: '2', userId: 0, location: '' }"
+        :disabled="disabled"
+        @onSendFileList="getShipFileList"
+        :fileList="shipFileList"
+      ></Uploader>
+    </div>
+  </div>
+  <div class="line" v-show="!disabled || annualFileList.length">
+    <div class="info-line">
+      <div class="info-line-title">船舶年审合格证 :</div>
+      <Uploader
+        :uploaderId="certsId + 'annualFileList'"
+        :params="{ type: '5', userId: 0, location: '' }"
+        :disabled="disabled"
+        @onSendFileList="getAnnualFileList"
+        :fileList="annualFileList"
+      ></Uploader>
+    </div>
+  </div>
+  <div class="line" v-show="!disabled || shipNationFileList.length">
+    <div class="info-line">
+      <div class="info-line-title">船舶国籍证书 :</div>
+      <Uploader
+        :uploaderId="certsId + 'shipNationFileList'"
+        :params="{ type: '6', userId: 0, location: '' }"
+        :disabled="disabled"
+        @onSendFileList="getShipNationFileList"
+        :fileList="shipNationFileList"
+      ></Uploader>
+    </div>
+  </div>
+  <div class="line" v-show="!disabled || operatingFileList.length">
+    <div class="info-line">
+      <div class="info-line-title">营运证 :</div>
+      <Uploader
+        :uploaderId="certsId + 'operatingFileList'"
+        :params="{ type: '7', userId: 0, location: '' }"
+        :disabled="disabled"
+        @onSendFileList="getOperatingFileList"
+        :fileList="operatingFileList"
+      ></Uploader>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed, ref, onMounted, watch } from "vue";
+import _ from "lodash";
+
+export default defineComponent({
+  props: {
+    certsId: {
+      type: String,
+      default: "cert",
+    },
+    disabled: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  emits: ["onPreview", "onSendFileList"],
+  setup(props, { emit }) {
+    let disabled = ref(true);
+    let shipFileList = ref([]);
+    let annualFileList = ref([]);
+    let shipNationFileList = ref([]);
+    let operatingFileList = ref([]);
+    function getShipFileList(list) {
+      shipFileList.value = list;
+    }
+
+    function getAnnualFileList(list) {
+      annualFileList.value = list;
+    }
+
+    function getShipNationFileList(list) {
+      shipNationFileList.value = list;
+    }
+    function getOperatingFileList(list) {
+      operatingFileList.value = list;
+    }
+
+    function initCerts(arr) {
+      shipFileList.value = [];
+      annualFileList.value = [];
+      shipNationFileList.value = [];
+      operatingFileList.value = [];
+      let t = setTimeout(() => {
+        for (let i of arr) {
+          i.url = i.viewUrl;
+          switch (i.type) {
+            case 5: {
+              annualFileList.value.push(i);
+              break;
+            }
+
+            case 6: {
+              shipNationFileList.value.push(i);
+              break;
+            }
+
+            case 7: {
+              operatingFileList.value.push(i);
+              break;
+            }
+            default: {
+              shipFileList.value.push(i);
+              break;
+            }
+          }
+        }
+        clearTimeout(t);
+      }, 500);
+    }
+
+    let shipFileListCache = ref([]);
+    let annualFileListCache = ref([]);
+    let shipNationFileListCache = ref([]);
+    let operatingFileListCache = ref([]);
+
+    function editCerts() {
+      shipFileListCache.value = _.cloneDeep(shipFileList.value);
+      annualFileListCache.value = _.cloneDeep(annualFileList.value);
+      shipNationFileListCache.value = _.cloneDeep(shipNationFileList.value);
+      operatingFileListCache.value = _.cloneDeep(operatingFileList.value);
+      disabled.value = false;
+    }
+
+    function sendCerts() {
+      let certs = [];
+      for (let i of shipFileList.value) {
+        if (i.id) {
+          certs.push(i);
+        } else {
+          certs.push({
+            downloadUrl: i.response.result.downloadUrl,
+            fileKey: i.response.result.key,
+            viewUrl: i.response.result.viewUrl,
+            type: 2,
+          });
+        }
+      }
+      for (let i of annualFileList.value) {
+        if (i.id) {
+          certs.push(i);
+        } else {
+          certs.push({
+            downloadUrl: i.response.result.downloadUrl,
+            fileKey: i.response.result.key,
+            viewUrl: i.response.result.viewUrl,
+            type: 5,
+          });
+        }
+      }
+      for (let i of shipNationFileList.value) {
+        if (i.id) {
+          certs.push(i);
+        } else {
+          certs.push({
+            downloadUrl: i.response.result.downloadUrl,
+            fileKey: i.response.result.key,
+            viewUrl: i.response.result.viewUrl,
+            type: 6,
+          });
+        }
+      }
+      for (let i of operatingFileList.value) {
+        if (i.id) {
+          certs.push(i);
+        } else {
+          certs.push({
+            downloadUrl: i.response.result.downloadUrl,
+            fileKey: i.response.result.key,
+            viewUrl: i.response.result.viewUrl,
+            type: 7,
+          });
+        }
+      }
+      return certs;
+    }
+    function cancelEditCerts() {
+      if (!_.isEqual(shipFileList.value, shipFileListCache.value)) {
+        shipFileList.value = _.cloneDeep(shipFileListCache.value);
+      }
+      if (!_.isEqual(annualFileList.value, annualFileListCache.value)) {
+        annualFileList.value = _.cloneDeep(annualFileListCache.value);
+      }
+      if (!_.isEqual(shipNationFileList.value, shipNationFileListCache.value)) {
+        shipNationFileList.value = _.cloneDeep(shipNationFileListCache.value);
+      }
+      if (!_.isEqual(operatingFileList.value, operatingFileListCache.value)) {
+        operatingFileList.value = _.cloneDeep(operatingFileListCache.value);
+      }
+      disabled.value = true;
+    }
+    onMounted(() => {});
+
+    return {
+      disabled,
+      shipFileList,
+      annualFileList,
+      shipNationFileList,
+      operatingFileList,
+      getShipFileList,
+      getAnnualFileList,
+      getShipNationFileList,
+      getOperatingFileList,
+      initCerts,
+      sendCerts,
+      cancelEditCerts,
+      editCerts,
+    };
+  },
+});
+</script>
+
+<style>
+</style>

src/components/Uploader.vue

@@ -0,0 +1,135 @@
+<template>
+  <el-upload
+    :id="uploaderId"
+    drag
+    multiple
+    :action="actionUrl"
+    list-type="picture-card"
+    :on-preview="preview"
+    :on-remove="remove"
+    :data="params"
+    :on-success="uploadSuccess"
+    :file-list="fileList"
+    :disabled="disabled"
+    :on-exceed="onExceed"
+    :limit="limit"
+  >
+    <div :class="['upload-plus-icon']">+</div>
+    <div :class="['upload-text']">{{ uploadText }}</div>
+  </el-upload>
+  <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
+    <el-image
+      :src="dialogImageUrl"
+      style="height: 100%; width: 100%"
+    ></el-image>
+  </el-dialog>
+</template>
+<script>
+import { defineComponent, computed, ref, onMounted, watch } from "vue";
+import {
+  ElMessage,
+  ElNotification,
+} from "_element-plus@1.1.0-beta.24@element-plus";
+import store from "../store/index";
+
+export default defineComponent({
+  props: {
+    uploaderId: {
+      type: String,
+      default: "uploader",
+    },
+    limit: {
+      type: Number,
+      default: 100,
+    },
+    params: Object,
+    actionUrl: {
+      type: String,
+      default: store.state.uploadUrl,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    fileList: Array,
+    uploadText: {
+      type: String,
+      default: "拖拽或点击上传",
+    },
+  },
+  emits: ["onPreview", "onSendFileList"],
+  setup(props, { emit }) {
+    let dialogVisible = ref(false);
+    let dialogImageUrl = ref("");
+    function preview(file) {
+      dialogVisible.value = true;
+      dialogImageUrl.value = file.url;
+    }
+    function remove(file, list) {
+      emit("onSendFileList", list);
+    }
+    function uploadSuccess(res, file, list) {
+      emit("onSendFileList", list);
+    }
+    function onExceed(files, fileList) {
+      ElMessage({
+        message: `超出文件数量限制 (最大数量:${props.limit})`,
+        type: "warning",
+      });
+    }
+    watch(
+      () => props.disabled,
+      (a, b) => {
+        changeDragVisable(!a);
+      }
+    );
+    function changeDragVisable(boo) {
+      let d = document.getElementById(props.uploaderId);
+      d.childNodes[1].style.display = boo ? "inline-block" : "none";
+      return;
+      let a = document.getElementsByClassName("el-upload-dragger");
+      let b = document.getElementsByClassName("el-upload--picture-card");
+      for (let i of a) {
+        i.style.display = boo ? "inline-block" : "none";
+      }
+      for (let i of b) {
+        i.style.display = boo ? "inline-block" : "none";
+      }
+    }
+    onMounted(() => {
+      changeDragVisable(!props.disabled);
+    });
+
+    return {
+      preview,
+      remove,
+      uploadSuccess,
+      dialogVisible,
+      dialogImageUrl,
+      preview,
+      onExceed,
+    };
+  },
+});
+</script>
+<style scoped>
+.upload-plus-icon {
+  height: 15%;
+  color: rgb(139, 147, 156);
+  line-height: 100px;
+  font-size: 40px;
+  font-weight: 200;
+}
+.upload-text {
+  height: 25%;
+  color: rgb(139, 147, 156);
+}
+
+.dn {
+  display: none;
+}
+:deep().el-upload-dragger {
+  width: 100%;
+  height: 148px !important;
+}
+</style>

src/main.js

@@ -6,9 +6,12 @@ import router from "./router";
 import store from "./store";
 import md5 from "md5";
 import "./styles/index.css";
+import Uploader from "./components/Uploader.vue";
+import Certs from "./components/Certs.vue";
 
 const app = createApp(App);
-
+app.component("Certs", Certs);
+app.component("Uploader", Uploader);
 router.beforeEach(async (to, from, next) => {
   let userId = localStorage.userId;
   if (userId) {

src/router/index.js

@@ -4,6 +4,8 @@ import {
   createMemoryHistory,
   createRouter,
 } from "vue-router";
+import Login from "../views/index/Index.vue";
+import VoyageList from "../views/voyage/voyageList.vue";
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -11,7 +13,7 @@ const router = createRouter({
     {
       path: "/",
       name: "index",
-      component: import("../views/index/Index.vue"),
+      component: () => import("../views/index/Index.vue"),
     },
     {
       path: "/login",
@@ -19,7 +21,7 @@ const router = createRouter({
       meta: {
         title: "登录",
       },
-      component: import("../views/index/Login.vue"),
+      component: Login,
     },
     {
       path: "/voyage/voyageAdd",
@@ -27,7 +29,7 @@ const router = createRouter({
       meta: {
         title: "添加航次",
       },
-      component: import("../views/voyage/voyageAdd.vue"),
+      component: () => import("../views/voyage/voyageAdd.vue"),
     },
     {
       path: "/voyage/voyageDetail",
@@ -35,7 +37,7 @@ const router = createRouter({
       meta: {
         title: "航次详情",
       },
-      component: import("../views/voyage/voyageDetail.vue"),
+      component: () => import("../views/voyage/voyageDetail.vue"),
     },
 
     {
@@ -44,7 +46,7 @@ const router = createRouter({
       meta: {
         title: "航次列表",
       },
-      component: import("../views/voyage/voyageList.vue"),
+      component: VoyageList,
     },
   ],
 });

src/views/voyage/voyageList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="full-container-p24">
+  <div class="line-container-p24">
     <div style="display: flex; justify-content: space-between">
       <div class="df aic">
         <div
@@ -45,6 +45,14 @@
         >
           历史航次
         </div>
+        <!-- <div style="color: #333; margin-right: 10px; font-size: 14px">
+          预计到港时间:
+        </div>
+        <el-radio-group v-model="sortradio">
+          <el-radio :label="-1">默认排序</el-radio>
+          <el-radio :label="0">降序</el-radio>
+          <el-radio :label="1">升序</el-radio>
+        </el-radio-group> -->
         <el-input
           placeholder="请输入船名/MMSI"
           prefix-icon="el-icon-search"
@@ -172,6 +180,12 @@
         min-width="180"
         align="center"
       ></el-table-column>
+      <el-table-column
+        prop="daysInPort"
+        label="在港天数"
+        min-width="80"
+        align="center"
+      ></el-table-column>
       <el-table-column
         prop="todayPhotoCount"
         label="今日照片"
@@ -271,8 +285,8 @@ import _ from "lodash";
 export default {
   setup() {
     let currentPage = ref(1);
-    let term = ref();
-    let tableData = ref();
+    let term = ref("");
+    let tableData = ref([]);
     let total = ref(0);
     let status = ref(0);
     async function getVoyageList() {
@@ -590,6 +604,8 @@ export default {
       addVoyageForm.value.resetFields();
     }
 
+    let sortradio = ref(0);
+
     getVoyageList();
     onMounted(() => {});
 
@@ -618,6 +634,7 @@ export default {
       selectLoadPort,
       selectDischargeProt,
       clear,
+      sortradio,
     };
   },
 };
@@ -759,4 +776,11 @@ export default {
 :deep() .el-autocomplete {
   width: 220px;
 }
+
+.el-radio {
+  margin-right: 10px;
+}
+.el-radio:last-child {
+  margin-right: 20px;
+}
 </style>