更新 船东详情

src/apis/fetch.js

@@ -15,11 +15,16 @@ export default {
     return $http("post", "user/backstage/add", data);
   },
 
-  // 用户详情
+  // 获取用户详情
   getUserDetail(data) {
     return $http("post", "user/backstage/details", data);
   },
 
+  // 更新用户详情
+  updateUserDetail(data) {
+    return $http("post", "/user/backstage/update", data);
+  },
+
   // 获取航次列表
   getVoyageList(data) {
     return $http("post", "voyage/list", data);
@@ -64,4 +69,8 @@ export default {
   seachUser(data) {
     return $http("post", "/user/backstage/search", data);
   },
+
+  getShipList(data) {
+    return $http("post", "/ship/backstage/list", data);
+  },
 };

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -1,18 +1,178 @@
 <template>
-  <div class="line-container-p24">
-    <el-card style="width: 500px">
-      <template v-slot:header>
-        <span>船东信息</span>
-      </template>
-    </el-card>
+  <div class="container-title">航次信息</div>
+  <div class="line-container-p18">
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">船东姓名</div>
+        <el-input
+          class="info-line-text"
+          v-model="userDetail.userName"
+          :disabled="unchangeable"
+        ></el-input>
+      </div>
+      <div class="info-line">
+        <div class="info-line-title">船东手机号</div>
+        <el-input
+          class="info-line-text"
+          v-model="userDetail.phone"
+          :disabled="unchangeable"
+        ></el-input>
+      </div>
+    </div>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">船东身份证</div>
+        <el-input
+          class="info-line-text"
+          v-model="userDetail.idcardNo"
+          :disabled="unchangeable"
+        ></el-input>
+      </div>
+      <div class="info-line">
+        <div class="info-line-title">偏好货种</div>
+        <el-input
+          class="info-line-text"
+          v-model="userDetail.preferenceCargo"
+          :disabled="unchangeable"
+        ></el-input>
+      </div>
+    </div>
+    <div class="line">
+      <div class="info-line aic">
+        <div class="info-line-title">上传身份证</div>
+        <el-upload
+          class="id-front"
+          action="http://49.234.214.168:8080/hhd-pat/cos/upload"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+          :data="idParams"
+          :on-success="idFrontUploadSuccess"
+          :file-list="idFront"
+          :limit="2"
+          :disabled="unchangeable"
+        >
+          <div class="upload-plus-icon">+</div>
+          <div class="upload-text">身份证人像面</div>
+        </el-upload>
+        <el-upload
+          class="id-front"
+          action="http://49.234.214.168:8080/hhd-pat/cos/upload"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+          :data="idParams"
+          :on-success="idEndUploadSuccess"
+          :file-list="idEnd"
+          :limit="2"
+          :disabled="unchangeable"
+        >
+          <div class="upload-plus-icon">+</div>
+          <div class="upload-text">身份证国徽面</div>
+        </el-upload>
+      </div>
+    </div>
   </div>
-  <div class="line-container-p24">
-    <el-card style="width: 500px">
-      <template v-slot:header>
-        <span>船舶信息</span>
-      </template>
-    </el-card>
+  <div class="container-title">船舶信息</div>
+  <div class="line-container-p18">
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">船名</div>
+        <el-input
+          class="info-line-text"
+          v-model="userDetail.shipname"
+          :disabled="unchangeable"
+        ></el-input>
+      </div>
+      <div class="info-line">
+        <div class="info-line-title">MMSI</div>
+        <el-input
+          class="info-line-text"
+          v-model="userDetail.mmsi"
+          :disabled="unchangeable"
+        ></el-input>
+      </div>
+    </div>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">船长</div>
+        <el-input
+          class="info-line-text"
+          v-model="userDetail.length"
+          :disabled="unchangeable"
+        ></el-input>
+      </div>
+      <div class="info-line">
+        <div class="info-line-title">船宽</div>
+        <el-input
+          class="info-line-text"
+          v-model="userDetail.breadth"
+          :disabled="unchangeable"
+        ></el-input>
+      </div>
+    </div>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">吨位</div>
+        <el-input
+          class="info-line-text"
+          v-model="userDetail.tonnage"
+          :disabled="unchangeable"
+        ></el-input>
+      </div>
+      <div class="info-line">
+        <div class="info-line-title">载货吨位</div>
+        <el-input
+          class="info-line-text"
+          v-model="userDetail.loadTons"
+          :disabled="unchangeable"
+        ></el-input>
+      </div>
+    </div>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">吃水</div>
+        <el-input
+          class="info-line-text"
+          v-model="userDetail.draught"
+          :disabled="unchangeable"
+        ></el-input>
+      </div>
+    </div>
+    <div class="line">
+      <div class="info-line">
+        <div class="info-line-title">船舶证书</div>
+        <el-upload
+          action="http://49.234.214.168:8080/hhd-pat/cos/upload"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+          :data="shipParams"
+          :on-success="idUploadSuccess"
+          :file-list="shipfileList"
+          :limit="2"
+          :disabled="unchangeable"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </div>
+    </div>
   </div>
+  <div class="df aic jcfe">
+    <el-button v-if="unchangeable" type="primary" @click="change">
+      修改
+    </el-button>
+    <el-button v-if="!unchangeable" @click="cancelChange">取消</el-button>
+    <el-button v-if="!unchangeable" type="primary" @click="submitChange">
+      提交
+    </el-button>
+  </div>
+  <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
+    <el-image
+      :src="dialogImageUrl"
+      style="height: 100%; width: 100%"
+    ></el-image>
+  </el-dialog>
 </template>
 <script>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
@@ -21,8 +181,117 @@ import store from "../../store";
 import router from "../../router";
 import md5 from "md5";
 import api from "../../apis/fetch";
+import { useRoute } from "_vue-router@4.0.12@vue-router";
+import _ from "lodash";
 export default {
-  setup() {},
+  setup() {
+    const route = useRoute();
+    let userDetail = ref({});
+    let userDetailCache = ref({});
+    let unchangeable = ref(false);
+    async function getUserDetail() {
+      let res = await api.getUserDetail({
+        userId: route.query.userId,
+      });
+      console.log(res);
+      if (res.data.status == 0) {
+        formatData(res.data.result);
+      } else {
+        ElNotification({
+          type: "error",
+          title: res.data.msg,
+        });
+        console.log(res);
+      }
+    }
+
+    let idParams = ref({
+      type: 1,
+      location: "",
+      userId: 0,
+    });
+
+    let shipParams = ref({
+      type: 2,
+      userId: 0,
+      location: "",
+    });
+
+    let dialogImageUrl = ref();
+    let dialogVisible = ref();
+
+    let idFront = ref([]);
+    function idFrontUploadSuccess(response, file, list) {
+      console.log(file);
+      idFront.value[0] = null;
+    }
+
+    function handleRemove(file, list) {
+      console.log(list);
+    }
+
+    function handlePictureCardPreview(file) {
+      dialogImageUrl.value = file.url;
+      dialogVisible.value = true;
+    }
+
+    function change() {
+      userDetailCache.value = _.cloneDeep(userDetail.value);
+      unchangeable.value = false;
+    }
+
+    function cancelChange() {
+      formatData(userDetailCache.value);
+      unchangeable.value = true;
+    }
+
+    function formatData(data) {
+      userDetail.value = data;
+    }
+
+    async function submitChange() {
+      let data = userDetail.value;
+      console.log(data);
+      return;
+      let res = await api.updateUserDetail(data);
+      console.log(res);
+    }
+    onMounted(() => {
+      getUserDetail();
+    });
+    return {
+      idFrontUploadSuccess,
+      getUserDetail,
+      userDetail,
+      unchangeable,
+      dialogImageUrl,
+      dialogVisible,
+      handleRemove,
+      idParams,
+      shipParams,
+      handlePictureCardPreview,
+      submitChange,
+      change,
+      cancelChange,
+    };
+  },
 };
 </script>
-<style scoped></style>
+<style scoped>
+:deep().el-upload-list__item-thumbnail {
+  object-fit: contain;
+}
+
+.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);
+}
+</style>