更新 船东详情

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -11,6 +11,29 @@
 
   <div class="container-title">船东信息</div>
   <div class="line-container-p24">
+    <div class="df jcfe">
+      <el-button
+        v-if="unchangeableShipOwner"
+        type="primary"
+        @click="showUpdate"
+      >
+        更新船东信息
+      </el-button>
+      <el-button
+        v-if="!unchangeableShipOwner"
+        type="primary"
+        @click="confirmUpdate"
+      >
+        确认更新
+      </el-button>
+      <el-button
+        v-if="!unchangeableShipOwner"
+        type="primary"
+        @click="cancelUpdate"
+      >
+        取消更新
+      </el-button>
+    </div>
     <div class="line">
       <div class="info-line">
         <div class="info-line-title">船东姓名</div>
@@ -49,7 +72,8 @@
           :actionUrl="store.state.idCardUrl"
           :disabled="unchangeableShipOwner"
           :fileList="idFrontList"
-          @onUploadFileList="idFrontUploadSuccess"
+          @onUploadFileList="idFrontUpload"
+          @onRemoveFileList="idFrontRemove"
           uploadText="身份证人像面"
           class="mr20"
         ></Uploader>
@@ -60,7 +84,8 @@
           :actionUrl="store.state.idCardUrl"
           :disabled="unchangeableShipOwner"
           :fileList="idBackList"
-          @onUploadFileList="idBackUploadSuccess"
+          @onUploadFileList="idBackUpload"
+          @onRemoveFileList="idBackRemove"
           uploadText="身份证国徽面"
         ></Uploader>
       </div>
@@ -111,27 +136,39 @@ let shipDetail = ref({
 });
 
 let idFrontList = ref([]);
-function idFrontUploadSuccess(res, file, list) {
-  console.log(res, file, list);
-  return;
-  if (list.length) {
-    let { url, response } = list[0];
-    let { downloadUrl, viewUrl, key } = response.result;
-    idFrontList.value = [{ url, downloadUrl, viewUrl, key }];
-  } else {
-    idFrontList.value = [];
+function idFrontUpload({ response, file, list }) {
+  if (response.status == 0) {
+    let { downloadUrl, key, viewUrl } = response.result;
+    shipOwnerDetail.value.idcardFrontDownloadUrl = downloadUrl;
+    shipOwnerDetail.value.idcardFrontFileKey = key;
+    shipOwnerDetail.value.idcardFrontViewUrl = viewUrl;
+    idFrontList.value = [{ url: viewUrl }];
   }
 }
+
+function idFrontRemove({ file, list }) {
+  idFrontList.value = [];
+  shipOwnerDetail.value.idcardFrontDownloadUrl = "";
+  shipOwnerDetail.value.idcardFrontFileKey = "";
+  shipOwnerDetail.value.idcardFrontViewUrl = "";
+}
 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 idBackUpload({ response, file, list }) {
+  if (response.status == 0) {
+    let { downloadUrl, key, viewUrl } = response.result;
+    shipOwnerDetail.value.idcardBackDownloadUrl = downloadUrl;
+    shipOwnerDetail.value.idcardBackFileKey = key;
+    shipOwnerDetail.value.idcardBackViewUrl = viewUrl;
+    idBackList.value = [{ url: viewUrl }];
   }
 }
+function idBackRemove({ file, list }) {
+  idBackList.value = [];
+  shipOwnerDetail.value.idcardBackDownloadUrl = "";
+  shipOwnerDetail.value.idcardBackFileKey = "";
+  shipOwnerDetail.value.idcardBackViewUrl = "";
+}
+
 function checkShipOwner() {
   let { userName, userPhone } = shipOwnerDetail.value;
   if (!userName) {
@@ -199,33 +236,6 @@ let initShipInfo = {
 async function addShipOwner() {
   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,
-    };
-  }
-
   let { data } = await api.addShipOwner(postData);
   if (data.status == 0) {
     ElMessageBox.confirm("添加船东成功,是否添加新船舶?", "添加成功", {
@@ -253,7 +263,22 @@ async function getShipOwnerDetail(shipOwnerId) {
   let { data } = await api.getShipOwnerDetail({
     shipOwnerId,
   });
+  data.result.shipOwnerId = data.result.id;
   shipOwnerDetail.value = data.result;
+  idFrontList.value = data.result.idcardFrontViewUrl
+    ? [
+        {
+          url: data.result.idcardFrontViewUrl,
+        },
+      ]
+    : [];
+  idBackList.value = data.result.idcardBackViewUrl
+    ? [
+        {
+          url: data.result.idcardBackViewUrl,
+        },
+      ]
+    : [];
   for (let i of shipOwnerDetail.value.shipInfo) {
     i.disabled = true;
     for (let j of i.shipCerts) {
@@ -269,6 +294,24 @@ function addShip() {
   shipOwnerDetail.value.shipInfo = [initShipInfo];
 }
 
+let isUpdate = ref(false);
+let cacheDetail = ref({});
+function showUpdate() {
+  unchangeableShipOwner.value = false;
+  cacheDetail.value = _.cloneDeep(shipOwnerDetail.value);
+}
+async function confirmUpdate() {
+  let { data } = await api.updateShipOwner({
+    ...shipOwnerDetail.value,
+  });
+  getShipOwnerDetail(route.query.shipOwnerId);
+  unchangeableShipOwner.value = true;
+}
+function cancelUpdate() {
+  shipOwnerDetail.value = _.cloneDeep(cacheDetail.value);
+  unchangeableShipOwner.value = true;
+}
+
 onMounted(() => {
   if (route.query.shipOwnerId) {
     getShipOwnerDetail(route.query.shipOwnerId);