JiangYunPhotosManage_WebApp/src/views/shipInfo/shipDetail.vue

<template>
  <div class="line-container-p24">
    <i class="el-icon-arrow-left"></i>
    <div
      class="dib go-back ml8 pointer"
      @click="router.replace('/shipInfo/shipList')"
    >
      返回船舶列表
    </div>
  </div>
  <div class="container-title">船舶信息</div>
  <div class="line-container-p24">
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">船名</div>
        <el-input
          class="info-line-text"
          v-model="shipDetail.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="shipDetail.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="shipDetail.length"
          :disabled="unchangeable"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">船宽</div>
        <el-input
          class="info-line-text"
          v-model="shipDetail.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="shipDetail.tonnage"
          :disabled="unchangeable"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">载货吨位</div>
        <el-input
          class="info-line-text"
          v-model="shipDetail.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="shipDetail.draught"
          :disabled="unchangeable"
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line">
        <div class="info-line-title">船舶证书</div>
        <el-upload
          drag
          multiple
          action="https://interface.huihenduo.com.cn/hhd-pat/cos/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :data="shipParams"
          :on-success="shipUploadSuccess"
          :file-list="shipFileList"
          :disabled="unchangeable"
        >
          <div class="upload-plus-icon">+</div>
          <div class="upload-text">拖拽或点击上传</div>
        </el-upload>
      </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>
    <div
      style="margin-top: 60px; min-width: 800px; width: 90%; margin-left: 60px"
    >
      <el-table border :data="shipOwnerTableData" stripe style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          min-width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="船东名称"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="userPhone"
          label="手机号"
          min-width="160"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="入驻时间"
          min-width="200"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" min-width="80" align="center">
          <template v-slot="scope">
            <el-button
              @click="shipOwnerDetail(scope.row.userId, tableData)"
              type="text"
              size="small"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="width: 100%; text-align: right; margin-top: 43px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="shipOwnerTotal"
          @current-change="shipOwnerPageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
  <div class="container-title">航次信息</div>
  <div class="full-container-p24">
    <div style="display: flex; justify-content: space-between">
      <div class="df aic">
        <div
          @click="changeVoyageType(1)"
          :class="
            currentbtn
              ? 'currentbtn radio-btns left-radius'
              : 'radio-btns left-radius'
          "
        >
          执行中航次
        </div>
        <div
          @click="changeVoyageType(2)"
          :class="
            currentbtn
              ? ' radio-btns right-radius'
              : 'radio-btns right-radius currentbtn'
          "
          style="margin-right: 40px"
        >
          历史航次
        </div>
        <el-input
          placeholder="请输入货主名称/联系人/联系人手机号"
          prefix-icon="el-icon-search"
          v-model="term"
          clearable
          style="width: 330px"
        ></el-input>
        <div class="search-btn" @click="getVoyageList()">查询</div>
      </div>
      <div class="cargo-owner-add" @click="voyageAddDialogVisible = true">
        添加航次
      </div>
    </div>
    <el-dialog v-model="voyageAddDialogVisible" title="添加航次">
      <el-form
        :rules="rules"
        label-position="right"
        label-width="80px"
        ref="addVoyageForm"
        :model="voyageForm"
        :before-close="resetAddVoyageForm"
      >
        <div class="df ffw">
          <!-- <el-form-item prop="voyageName" label="航次名称">
            <el-input v-model="voyageForm.voyageName"></el-input>
          </el-form-item>
          <el-form-item label=""></el-form-item> -->
          <el-form-item prop="shipName" label="船舶">
            <!-- <el-input v-model="voyageForm.shipOwnerId"></el-input> -->
            <el-autocomplete
              v-model="voyageForm.shipName"
              :fetch-suggestions="searchShip"
              placeholder="选择船舶"
              @select="selectShip"
              disabled
            />
          </el-form-item>
          <el-form-item prop="cargoOwnerId" label="货主">
            <el-autocomplete
              v-model="voyageForm.cargoOwnerName"
              :fetch-suggestions="searchCargoOwner"
              placeholder="选择货主"
              @select="selectCargoOwner"
            />
          </el-form-item>
          <el-form-item prop="startTime" label="开始时间">
            <el-date-picker
              v-model="voyageForm.startTime"
              type="date"
              value-format="YYYY/MM/DD"
              placeholder="航次开始时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="endTime" label="结束时间">
            <el-date-picker
              v-model="voyageForm.endTime"
              type="date"
              value-format="YYYY/MM/DD"
              placeholder="航次结束时间"
              disabled
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="loadPort" label="装货港">
            <el-autocomplete
              v-model="voyageForm.loadPort"
              :fetch-suggestions="getCol"
              placeholder="选择装货港"
              @select="selectLoadPort"
            />
          </el-form-item>
          <el-form-item prop="dischargeProt" label="卸货港">
            <el-autocomplete
              v-model="voyageForm.dischargeProt"
              :fetch-suggestions="getCol"
              placeholder="选择卸货港"
              @select="selectDischargeProt"
            />
          </el-form-item>
          <el-form-item prop="cargo" label="货种">
            <el-input v-model="voyageForm.cargo"></el-input>
          </el-form-item>
          <el-form-item prop="tons" label="吨位">
            <el-input v-model="voyageForm.tons"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetAddVoyageForm">取消</el-button>
          <el-button type="primary" @click="addVoyage">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-table :data="tableData" stripe style="width: 100%; margin-top: 24px">
      <el-table-column
        type="index"
        label="序号"
        min-width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="voyageName"
        label="航次名称"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="loadDiscPort"
        label="装货港-卸货港"
        min-width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="setSailTime"
        label="开航时间"
        min-width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="todayPhotoCount"
        label="今日照片"
        min-width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="cargo"
        label="货种"
        min-width="80"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="tons"
        label="吨位(吨)"
        min-width="80"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="transStatus"
        label="船舶状态"
        min-width="100"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="remark"
        label="备注"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" min-width="80" align="center">
        <template v-slot="scope">
          <el-button
            @click="voyageDetail(scope.row.id, tableData)"
            type="text"
            size="small"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; text-align: right; margin-top: 43px">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="pageChange"
      ></el-pagination>
    </div>
  </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 { uploadUrl } from "../../apis/config";
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 shipDetail = ref({});
    let shipFileList = ref([]);

    async function getShipDetail() {
      let res = await api.getShipDetail({
        shipId: route.query.shipId,
      });
      if (res.data.status == 0) {
        shipDetail.value = res.data.result;
        voyageForm.voyageForm.shipName = res.data.result.shipname;
        voyageForm.voyageForm.shipId = res.data.result.id;
        for (let i of shipDetail.value.shipCertificates) {
          i.url = i.viewUrl;
        }
        shipFileList.value = shipDetail.value.shipCertificates;
      } else {
        console.log(res);
      }
    }
    let shipDetailCache = ref({});
    let shipFileListCache = ref([]);
    function change() {
      shipDetailCache.value = _.cloneDeep(shipDetail.value);
      shipFileListCache.value = _.cloneDeep(shipFileList.value);
      unchangeable.value = false;
    }

    function cancelChange() {
      shipDetail.value = _.cloneDeep(shipDetailCache.value);
      shipFileList.value = _.cloneDeep(shipFileListCache.value);
      unchangeable.value = true;
    }

    let unchangeable = ref(true);
    let dialogVisible = ref(false);
    let dialogImageUrl = ref("");
    let shipParams = ref({
      type: 2,
      userId: 0,
      location: "",
    });

    function handlePictureCardPreview(file) {
      dialogVisible.value = true;
      dialogImageUrl.value = file.url;
    }
    function handleRemove(file, list) {
      shipFileList.value = list;
      console.log("shipFileList", shipFileList.value);
    }

    function shipUploadSuccess(res, file, list) {
      shipFileList.value = list;
      console.log("shipFileList", shipFileList.value);
    }
    async function submitChange() {
      shipDetail.value.shipId = shipDetail.value.id;
      shipDetail.value.shipCerts = [];
      for (let i of shipFileList.value) {
        if (i.id) {
          shipDetail.value.shipCerts.push(i);
        } else {
          shipDetail.value.shipCerts.push({
            downloadUrl: i.response.result.downloadUrl,
            fileKey: i.response.result.key,
            viewUrl: i.response.result.viewUrl,
          });
        }
      }
      delete shipDetail.value.shipCertificates;
      let postData = {
        ...shipDetail.value,
        userId: 0,
      };
      let res = await api.updateShip(postData);
      if (res.data.status == 0) {
        unchangeable.value = true;
        ElNotification({
          type: "success",
          title: res.data.msg,
        });
      } else {
        ElNotification({
          type: "error",
          title: res.data.msg,
        });
        console.log(res);
      }
      getShipDetail();
    }
    let currentbtn = ref(true);
    let currentPage = ref(1);
    let term = ref();
    let tableData = ref();
    let total = ref();
    let status = ref(1);
    async function getVoyageList() {
      tableData.value = [];

      let res = await api.getVoyageList({
        cargoOwnerId: 0,
        shipId: route.query.shipId,
        status: status.value,
        term: term.value,
        currentPage: currentPage.value,
        size: 10,
      });
      term.value = "";
      if (res.data.status == 0) {
        tableData.value = res.data.result;
      }
    }
    function changeVoyageType(s) {
      currentPage.value = 1;
      currentbtn.value = s == 1;
      status.value = s;
      getVoyageList();
    }
    async function voyageDetail(id) {
      router.push({
        path: "/voyage/voyageDetail",
        query: {
          id,
        },
      });
    }
    function pageChange(e) {
      currentPage.value = e;
      getVoyageList();
    }

    function goToVoyageAdd() {
      router.push({
        path: "/voyage/voyageAdd",
      });
    }
    let voyageAddDialogVisible = ref(false);
    const rules = reactive({
      rules: {
        voyageName: [
          { required: false, message: "请填写航次名称", trigger: "blur" },
        ],
        shipOwnerId: [
          { required: true, message: "请选择船东", trigger: "blur" },
        ],
        cargoOwnerId: [
          { required: true, message: "请选择货主", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请填写开始时间", trigger: "blur" },
        ],
        endTime: [
          { required: false, message: "请填写结束时间", trigger: "blur" },
        ],
        loadPort: [
          { required: true, message: "请填写装货港", trigger: "blur" },
        ],
        dischargeProt: [
          { required: true, message: "请填写卸货港", trigger: "blur" },
        ],
        cargo: [{ required: true, message: "请填写货种", trigger: "blur" }],
        tons: [{ required: true, message: "请填写吨位", trigger: "blur" }],
      },
    });
    let voyageForm = reactive({
      voyageForm: {
        voyageName: "",
        cargoOwnerId: "",
        startTime: "",
        endTime: "",
        loadPort: "",
        dischargeProt: "",
        cargo: "",
        tons: "",
      },
    });
    let addVoyageForm = ref(null);

    async function addVoyage() {
      console.log("提交", voyageForm.voyageForm);
      addVoyageForm.value.validate(async (valid) => {
        if (valid) {
          // console.log("提交", voyageForm.voyageForm);
          let res = await api.addVoyage({
            ...voyageForm.voyageForm,
          });
          if (res.data.status == 0) {
            ElNotification({
              title: res.data.msg,
              type: "success",
            });
            resetAddVoyageForm();
          } else {
            console.log(res);
            ElNotification({
              title: res.data.msg,
              type: "error",
            });
          }
        }
      });
    }

    async function searchShip(queryString, cb) {
      if (!queryString) return;
      let res = await api.searchShip({
        term: queryString,
      });
      let ships = [];
      if (res.data.status == 0) {
        ships = res.data.result;
        for (let i of ships) {
          i.value = `${i.shipName}`;
        }
        cb(ships);
      }
    }
    const selectShip = (item) => {
      voyageForm.voyageForm.shipId = item.shipId;
    };

    async function searchCargoOwner(queryString, cb) {
      if (!queryString) return;
      let res = await api.searchUser({
        term: queryString,
        identity: 2,
      });
      let cargoOwners = [];
      if (res.data.status == 0) {
        cargoOwners = res.data.result;
        for (let i of cargoOwners) {
          i.value = `${i.userName}`;
        }
        cb(cargoOwners);
      }
    }

    const selectCargoOwner = (item) => {
      voyageForm.voyageForm.cargoOwnerId = item.userId;
    };

    const getCol = _.debounce(
      async (queryString, cb) => {
        if (!queryString) return;
        let res = await api.getCol({
          term: queryString,
        });
        if (res.data.status == 0) {
          cb(res.data.result);
        }
      },
      1500,
      { leading: true }
    );

    const selectLoadPort = (item) => {
      voyageForm.voyageForm.loadPortId = item.key;
      voyageForm.voyageForm.loadPort = item.value;
    };

    const selectDischargeProt = (item) => {
      voyageForm.voyageForm.dischargeProtId = item.key;
      voyageForm.voyageForm.dischargeProt = item.value;
    };

    function resetAddVoyageForm() {
      voyageAddDialogVisible.value = false;
      addVoyageForm.value.resetFields();
    }
    let shipCurrentPage = ref(1);
    let shipOwnerTableData = ref([]);
    let shipOwnerCurrentPage = ref(1);
    let shipOwnerTotal = ref();

    async function getShipOwnerListByShipId() {
      let res = await api.getShipOwnerListByShipId({
        shipId: route.query.shipId,
        currentPage: shipOwnerCurrentPage.value,
        size: 10,
      });
      if (res.data.status == 0) {
        shipOwnerTableData.value = res.data.result;
        shipOwnerTotal.value = res.data.total;
      } else {
        console.log(res);
      }
    }

    function shipOwnerDetail(userId) {
      router.push({
        path: "/shipOwnerManage/shipOwnerDetail",
        query: {
          userId,
        },
      });
    }

    function shipOwnerPageChange(e) {
      shipOwnerCurrentPage.value = e;
      getShipOwnerListByShipId();
    }

    onMounted(() => {
      getShipDetail();
      getVoyageList();
      getShipOwnerListByShipId();
    });
    return {
      unchangeable,
      change,
      cancelChange,
      submitChange,
      dialogVisible,
      dialogImageUrl,
      shipDetail,
      router,
      handlePictureCardPreview,
      handleRemove,
      shipParams,
      shipUploadSuccess,
      shipFileList,
      currentPage,
      term,
      tableData,
      total,
      currentbtn,
      changeVoyageType,
      getVoyageList,
      voyageDetail,
      pageChange,
      goToVoyageAdd,
      addVoyage,
      voyageAddDialogVisible,
      addVoyageForm,
      ...toRefs(rules),
      ...toRefs(voyageForm),
      searchCargoOwner,
      selectCargoOwner,
      resetAddVoyageForm,
      shipCurrentPage,
      shipOwnerTableData,
      shipOwnerCurrentPage,
      getShipOwnerListByShipId,
      shipOwnerDetail,
      shipOwnerPageChange,
      shipOwnerTotal,
      getCol,
      selectLoadPort,
      selectDischargeProt,
      searchShip,
      selectShip,
      // uploadUrl,
    };
  },
};
</script>
<style scoped>
.search-btn {
  display: inline-block;
  width: 60px;
  height: 32px;
  background: #0094fe;
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 32px;
  margin-left: 10px;
  cursor: pointer;
}

.cargo-owner-add {
  width: 80px;
  height: 32px;
  border-radius: 2px;
  border: 1px solid #0094fe;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0094fe;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
}
:deep().el-dialog {
  width: 560px;
  padding: 20px 50px;
  border-radius: 6px;
}

:deep() .el-dialog__title {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0094fe;
}

.normal-label {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #353a42;
  margin-right: 10px;
}

.show-input {
  width: 280px;
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #dee0e3;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32px;
  padding-left: 12px;
  margin-right: 40px;
}

.radio-btns {
  height: 38px;
  width: 103px;
  border: 1px solid #1486f9;
  line-height: 38px;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0094fe;
  cursor: pointer;
}

.left-radius {
  border-top-left-radius: 19px;
  border-bottom-left-radius: 19px;
}

.right-radius {
  border-top-right-radius: 19px;
  border-bottom-right-radius: 19px;
}
.currentbtn {
  background: #1486f9;
  color: #fff;
}

.search-btn {
  display: inline-block;
  width: 60px;
  height: 38px;
  background: #0094fe;
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 38px;
  margin-left: 10px;
  cursor: pointer;
}

.voyage-add {
  width: 80px;
  height: 36px;
  border-radius: 2px;
  border: 1px solid #0094fe;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0094fe;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}

:deep() .el-dialog {
  width: 800px;
}

:deep() .el-form-item {
  margin-right: 22px;
  width: 300px;
}

:deep() .el-autocomplete {
  width: 220px;
}

.upload-text {
  height: 25%;
  color: rgb(139, 147, 156);
}

.upload-plus-icon {
  height: 15%;
  color: rgb(139, 147, 156);
  line-height: 100px;
  font-size: 40px;
  font-weight: 200;
}
</style>