JiangYunPhotosManage_WebApp/src/views/shipOwnerManage/shipOwnerDetail.vue

<template>
  <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="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";
import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
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() {
    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>
: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>