更新 航次详情

package.json

@@ -17,6 +17,7 @@
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "moment": "^2.29.4",
+    "pinia": "^2.0.26",
     "vite-plugin-compression": "^0.3.5",
     "vue": "^3.2.16",
     "vue-router": "^4.0.4",

src/components/Uploader.vue → src/components/Upload.vue

@@ -1,28 +1,31 @@
 <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>
+  <div>
+    <el-upload
+      :class="{ hide: hidden || fileList.length == limit }"
+      :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>
+  </div>
 </template>
 <script>
 import { defineComponent, computed, ref, onMounted, watch } from "vue";
@@ -40,9 +43,10 @@ export default defineComponent({
       default: 100,
     },
     params: Object,
-    actionUrl: {
-      type: String,
-      default: store.state.uploadUrl,
+    actionUrl: String,
+    hidden: {
+      type: Boolean,
+      default: true,
     },
     disabled: {
       type: Boolean,
@@ -74,19 +78,13 @@ export default defineComponent({
         type: "warning",
       });
     }
-    watch(
-      () => props.disabled,
-      (a, b) => {
-        changeDragVisable(!a);
-      }
-    );
     function changeDragVisable(boo) {
-      try {
-        let d = document.getElementById(props.uploaderId);
-        d.childNodes[1].style.display = boo ? "inline-block" : "none";
-      } catch (error) {}
+      //   try {
+      //     let d = document.getElementById(props.uploaderId);
+      //     d.childNodes[1].style.display = boo ? "inline-block" : "none";
+      //   } catch (error) {}
 
-      return;
+      //   return;
       let a = document.getElementsByClassName("el-upload-dragger");
       let b = document.getElementsByClassName("el-upload--picture-card");
       for (let i of a) {
@@ -96,9 +94,7 @@ export default defineComponent({
         i.style.display = boo ? "inline-block" : "none";
       }
     }
-    onMounted(() => {
-      changeDragVisable(!props.disabled);
-    });
+    onMounted(() => {});
 
     return {
       preview,
@@ -129,7 +125,11 @@ export default defineComponent({
   display: none;
 }
 :deep().el-upload-dragger {
-  width: 100%;
+  width: 148px !important;
   height: 148px !important;
 }
+
+.hide:deep() .el-upload--picture-card {
+  display: none !important;
+}
 </style>

src/main.js

@@ -5,19 +5,23 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import "./styles/index.css";
-import Uploader from "./components/Uploader.vue";
+
+import Uploader from "./components/Upload.vue";
 import Certs from "./components/Certs.vue";
 import RemoteSearch from "./components/RemoteSearch.vue";
 import RemoteSelect from "./components/RemoteSelect.vue";
 import zhCn from "element-plus/dist/locale/zh-cn.mjs";
 import Layout from "./layout/Layout.vue";
-
+import { createPinia } from "pinia";
+const pinia = createPinia();
 const app = createApp(App);
 app.use(ElementPlus, {
   locale: zhCn,
 });
+app.use(pinia);
 app.component("Layout", Layout);
 app.component("Certs", Certs);
+
 app.component("Uploader", Uploader);
 app.component("RemoteSearch", RemoteSearch);
 app.component("RemoteSelect", RemoteSelect);

src/store/index.js

@@ -2,9 +2,9 @@ import { createStore } from "vuex";
 
 console.log(import.meta.env.VITE_PROJECT_ENV);
 let baseurl = import.meta.env.VITE_BASEURL;
-const uploadUrl = `${baseurl}cos/upload`;
-const wayBillUrl = `${baseurl}voyage/uploadVoyageWayBill`;
-const fydi = `${baseurl}fydi/upload`;
+const idCardUrl = `${baseurl}cos/uploadIdCard`;
+const addCertsUrl = `${baseurl}cos/uploadShipCertNew`;
+const updateCertsUrl = `${baseurl}cos/uploadShipCerUpdate`;
 
 const store = createStore({
   state: {
@@ -13,9 +13,9 @@ const store = createStore({
     secondTitle: "",
     currentMenuItem: "/voyage/voyageList",
     baseurl,
-    uploadUrl,
-    wayBillUrl,
-    fydi,
+    idCardUrl,
+    addCertsUrl,
+    updateCertsUrl,
     versions: [],
   },
   mutations: {

src/store/pinia.js

@@ -0,0 +1,15 @@
+import { defineStore } from "pinia";
+let baseurl = import.meta.env.VITE_BASEURL;
+const uploadId = `${baseurl}cos/upload`;
+const wayBillUrl = `${baseurl}voyage/uploadVoyageWayBill`;
+const fydi = `${baseurl}fydi/upload`;
+
+// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
+// 第一个参数是你的应用中 Store 的唯一 ID。
+export const useStore = defineStore("main", {
+  state: () => ({
+    firstTitle: "",
+  }),
+  getters: {},
+  actions: {},
+});

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -42,15 +42,29 @@
     <div class="line">
       <div class="info-line aic">
         <div class="info-line-title">上传身份证 :</div>
-        <el-upload
-          class="upload-demo"
-          drag
-          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-          multiple
-        >
-          <div class="fs30 c9">+</div>
-          <div class="el-upload__text c9">拖动或点击上传</div>
-        </el-upload>
+        <Upload
+          uploaderId="idfront"
+          :limit="1"
+          :params="{}"
+          :actionUrl="store.state.idCardUrl"
+          :hidden="false"
+          :disabled="false"
+          :fileList="idFrontList"
+          @onSendFileList="idFrontUploadSuccess"
+          uploadText="身份证人像面"
+          class="mr20"
+        ></Upload>
+        <Upload
+          uploaderId="idback"
+          :limit="1"
+          :params="{}"
+          :actionUrl="store.state.idCardUrl"
+          :hidden="false"
+          :disabled="false"
+          :fileList="idBackList"
+          @onSendFileList="idBackUploadSuccess"
+          uploadText="身份证国徽面"
+        ></Upload>
       </div>
     </div>
     <div class="df aic jcfe">
@@ -154,6 +168,8 @@ import _ from "lodash";
 const route = useRoute();
 let shipOwnerDetail = ref({});
 let shipDetail = ref({});
+let unchangeableShipOwner = ref(false);
+let unchangeableShip = ref(false);
 async function getShipOwnerDetail() {
   let res = await api.getShipOwnerDetail({
     shipOwnerId: route.query.shipOwnerId,
@@ -235,8 +251,75 @@ async function getShipOwnerDetail() {
   }
 }
 
+let idFrontList = ref([]);
+function idFrontUploadSuccess(list) {
+  if (list.length) {
+    let { url, response } = list[0];
+    let { downloadUrl, viewUrl, key } = response.result;
+    idFrontList.value = [{ url, downloadUrl, viewUrl, key }];
+  } else {
+    idFrontList.value = [];
+  }
+}
+let idBackList = ref([]);
+function idBackUploadSuccess(list) {
+  if (list.length) {
+    let { url, response } = list[0];
+    let { downloadUrl, viewUrl, key } = response.result;
+    idBackList.value = [{ url, downloadUrl, viewUrl, key }];
+  } else {
+    idBackList.value = [];
+  }
+}
+function checkShipOwner() {
+  let { userName, userPhone } = shipOwnerDetail.value;
+  if (!userName) {
+    ElNotification.error({
+      title: "请填写船东姓名",
+      duration: 1500,
+    });
+    return false;
+  }
+  if (!userPhone) {
+    ElNotification.error({
+      title: "请填写船东手机号",
+      duration: 1500,
+    });
+    return false;
+  }
+  return true;
+}
 function addShipOwner() {
-  console.log();
+  if (!checkShipOwner()) return;
+  let postData = shipOwnerDetail.value;
+  if (idFrontList.value.length) {
+    let {
+      downloadUrl: idcardFrontDownloadUrl,
+      viewUrl: idcardFrontViewUrl,
+      key: idcardFrontFileKey,
+    } = idFrontList.value[0];
+    postData = {
+      ...postData,
+      idcardFrontDownloadUrl,
+      idcardFrontViewUrl,
+      idcardFrontFileKey,
+    };
+  }
+  if (idBackList.value.length) {
+    let {
+      downloadUrl: idcardBackDownloadUrl,
+      viewUrl: idcardBackViewUrl,
+      key: idcardBackFileKey,
+    } = idBackList.value[0];
+    postData = {
+      ...postData,
+      idcardBackDownloadUrl,
+      idcardBackViewUrl,
+      idcardBackFileKey,
+    };
+  }
+
+  console.log(postData);
 }
 
 onMounted(() => {