JiangYunPhotosManage_WebApp/src/views/shipOwnerManage/shipOwnerDetail.vue

<template>
  <div class="line-container-p18">
    <i class="el-icon-arrow-left"></i>
    <div
      class="dib go-back ml8 pointer"
      @click="router.replace('/shipOwnerManage/shipOwnerList')"
    >
      返回船东列表
    </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.userName"
          :disabled="unchangeableShipOwner"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">船东手机号</div>
        <el-input
          class="info-line-text"
          v-model="userDetail.phone"
          :disabled="unchangeableShipOwner"
        ></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="unchangeableShipOwner"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">偏好货种</div>
        <el-input
          class="info-line-text"
          v-model="userDetail.preferenceCargo"
          :disabled="unchangeableShipOwner"
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line aic">
        <div class="info-line-title">上传身份证</div>
        <el-upload
          action="https://interface.huihenduo.com.cn/hhd-pat/cos/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemoveIdFront"
          :data="idParams"
          :on-success="idFrontUploadSuccess"
          :file-list="idFrontFile"
          :disabled="unchangeableShipOwner"
          :limit="1"
        >
          <div class="upload-plus-icon">+</div>
          <div class="upload-text">身份证人像面</div>
        </el-upload>
        <el-upload
          style="margin-left: 40px"
          action="https://interface.huihenduo.com.cn/hhd-pat/cos/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemoveIdBack"
          :data="idParams"
          :on-success="idBackUploadSuccess"
          :file-list="idBackFile"
          :disabled="unchangeableShipOwner"
          :limit="1"
        >
          <div class="upload-plus-icon">+</div>
          <div class="upload-text">身份证国徽面</div>
        </el-upload>
      </div>
    </div>
    <div class="df aic jcfe">
      <el-button v-if="unchangeableShipOwner" type="primary" @click="change(1)">
        修改
      </el-button>
      <el-button v-if="!unchangeableShipOwner" @click="cancelChange(1)">
        取消
      </el-button>
      <el-button
        v-if="!unchangeableShipOwner"
        type="primary"
        @click="submitChange(1)"
      >
        提交
      </el-button>
    </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="shipDetail.shipname"
          :disabled="unchangeableShip"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">MMSI</div>
        <el-input
          class="info-line-text"
          v-model="shipDetail.mmsi"
          :disabled="unchangeableShip"
        ></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="shipDetail.length"
          :disabled="unchangeableShip"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">船宽</div>
        <el-input
          class="info-line-text"
          v-model="shipDetail.breadth"
          :disabled="unchangeableShip"
        ></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="shipDetail.tonnage"
          :disabled="unchangeableShip"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">载货吨位</div>
        <el-input
          class="info-line-text"
          v-model="shipDetail.loadTons"
          :disabled="unchangeableShip"
        ></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="shipDetail.draught"
          :disabled="unchangeableShip"
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">船舶证书</div>
        <el-upload
          action="https://interface.huihenduo.com.cn/hhd-pat/cos/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemoveShip"
          :data="shipParams"
          :on-success="shipUploadSuccess"
          :file-list="shipfileList"
          :limit="2"
          :disabled="unchangeableShip"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>
  </div>
  <div class="df aic jcfe">
    <el-button v-if="unchangeableShip" type="primary" @click="change(0)">
      修改
    </el-button>
    <el-button v-if="!unchangeableShip" @click="cancelChange(0)">
      取消
    </el-button>
    <el-button v-if="!unchangeableShip" type="primary" @click="submitChange(0)">
      提交
    </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 { uploadUrl } from "../../apis/config";
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 shipDetail = ref({});
    let idFrontFile = ref([]);
    let idBackFile = ref([]);
    let shipFileList = ref([]);
    let unchangeableShipOwner = ref(true);
    let unchangeableShip = ref(true);
    async function getUserDetail() {
      let res = await api.getUserDetail({
        userId: route.query.userId,
      });
      console.log(res.data.result);
      if (res.data.status == 0) {
        let r = res.data.result;

        let {
          //船东信息
          idcardBackDownloadUrl,
          idcardBackFileKey,
          idcardBackViewUrl,
          idcardFrontDownloadUrl,
          idcardFrontFileKey,
          idcardFrontViewUrl,
          idcardNo,
          phone,
          preferenceCargo,
          userId,
          userName,

          // 船舶信息
          breadth,
          draught,
          length,
          loadTons,
          mmsi,
          shipId,
          shipname,
          tonnage,
          shipCerts,
        } = r;

        userDetail.value = {
          idcardNo,
          phone,
          preferenceCargo,
          userId,
          userName,
        };

        idFrontFile.value = [
          {
            url: idcardFrontViewUrl,
            idcardFrontDownloadUrl,
            idcardFrontFileKey,
            idcardFrontViewUrl,
          },
        ];
        idBackFile.value = [
          {
            url: idcardBackViewUrl,
            idcardBackDownloadUrl,
            idcardBackFileKey,
            idcardBackViewUrl,
          },
        ];

        shipDetail.value = {
          breadth,
          draught,
          length,
          loadTons,
          mmsi,
          shipId,
          shipname,
          tonnage,
          shipCerts,
        };
      } 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();

    function idFrontUploadSuccess(response, file, list) {
      idFrontFile.value = list;
    }
    function idBackUploadSuccess(response, file, list) {
      idBackFile.value = list;
    }
    function shipUploadSuccess(response, file, list) {
      shipFileList.value = list;
    }

    function handlePictureCardPreview(file) {
      dialogVisible.value = true;
      dialogImageUrl.value = file.url;
    }

    function handleRemoveIdFront(file, list) {
      idFrontFile.value = list;
      console.log("idFrontFile", idFrontFile.value);
    }

    let userDetailCache = ref({});
    let idFrontFileCache = ref([]);
    let idBackFileCache = ref([]);
    let shipDetailCache = ref({});
    let shipFileListCache = ref([]);
    function change(type) {
      if (type) {
        userDetailCache.value = _.cloneDeep(userDetail.value);
        idFrontFileCache.value = _.cloneDeep(idFrontFile.value);
        idBackFileCache.value = _.cloneDeep(idBackFile.value);
        unchangeableShipOwner.value = false;
      } else {
        shipDetailCache.value = _.cloneDeep(shipDetail.value);
        shipFileListCache.value = _.cloneDeep(shipFileList.value);
        unchangeableShip.value = false;
      }
    }

    function cancelChange(type) {
      if (type) {
        if (!_.isEqual(userDetail.value, userDetailCache.value)) {
          userDetail.value = _.cloneDeep(userDetailCache.value);
        }
        if (!_.isEqual(idFrontFile.value, idFrontFileCache.value)) {
          idFrontFile.value = [];
          idFrontFile.value = _.cloneDeep(idFrontFileCache.value);
        }
        if (!_.isEqual(idBackFile.value, idBackFileCache.value)) {
          idBackFile.value = [];
          idBackFile.value = _.cloneDeep(idBackFileCache.value);
        }
        unchangeableShipOwner.value = true;
      } else {
        if (!_.isEqual(shipDetail.value, shipDetailCache.value)) {
          shipDetail.value = _.cloneDeep(shipDetailCache.value);
        }
        if (!_.isEqual(shipFileList.value, shipFileListCache.value)) {
          shipFileList.value = _.cloneDeep(shipFileListCache.value);
        }
        unchangeableShip.value = true;
      }
    }

    function handleRemoveIdFront(file, list) {
      idFrontFile.value = list;
    }
    function handleRemoveIdBack(file, list) {
      idBackFile.value = list;
    }
    function handleRemoveShip(file, list) {
      shipFileList.value = list;
    }

    async function submitChange(type) {
      if (type) {
        console.log(userDetail.value);
        console.log(idFrontFile.value);
        console.log(idBackFile.value);
      } else {
      }

      return;
      let res = await api.updateUserDetail(data);
      console.log(res);
    }
    onMounted(() => {
      getUserDetail();
    });
    return {
      idFrontUploadSuccess,
      idBackUploadSuccess,
      shipUploadSuccess,
      getUserDetail,
      userDetail,
      shipDetail,
      unchangeableShipOwner,
      unchangeableShip,
      dialogImageUrl,
      dialogVisible,
      handleRemoveIdFront,
      handleRemoveIdBack,
      handleRemoveShip,
      idParams,
      shipParams,
      handlePictureCardPreview,
      submitChange,
      change,
      cancelChange,
      router,
      idFrontFile,
      idBackFile,
      // uploadUrl,
    };
  },
};
</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>