JiangYunPhotosManage_WebApp/src/views/cargoOwnerManage/cargoOwnerDetail.vue

<template>
  <div class="line-container-p18">
    <i class="el-icon-arrow-left"></i>
    <div class="dib go-back ml8">返回货主列表</div>
  </div>
  <div class="container-title">货主信息</div>
  <div class="line-container-p24 df aic">
    <div class="normal-label">货主名称</div>
    <div class="show-input">{{ userName }}</div>

    <div class="normal-label">联系人</div>
    <div class="show-input">{{ contactName }}</div>

    <div class="normal-label">联系人手机号</div>
    <div class="show-input">{{ userPhone }}</div>
  </div>
  <div class="container-title">航次信息</div>
  <div class="line-container-p24">
    <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"
        style="width: 330px"
        clearable
      ></el-input>
      <div class="seach-btn" @click="getVoyageList">查询</div>
    </div>

    <el-table :data="tableData" stripe style="width: 100%; margin-top: 20px">
      <el-table-column
        type="index"
        label="序号"
        min-width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="voyageName"
        label="航次名称"
        min-width="160"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="loadDiscPort"
        label="装货港-卸货港"
        min-width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="startEndTime"
        label="开始时间-结束时间"
        min-width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="cargo"
        label="货种"
        min-width="100"
        align="center"
      ></el-table-column>

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

      <el-table-column
        prop="transStatus"
        label="船舶状态"
        min-width="200"
        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="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>
</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 { useRoute } from "vue-router";
import api from "../../apis/fetch";

export default {
  setup() {
    const route = useRoute();
    let currentbtn = ref(true);
    let userName = ref();
    let contactName = ref();
    let userPhone = ref();
    let status = ref(1);
    let term = ref();
    let currentPage = ref(1);
    async function getUserDetail() {
      let res = await api.getUserDetail({
        userId: route.query.userId,
      });
      if (res.data.status == 0) {
        userName.value = res.data.result.userName;
        contactName.value = res.data.result.contactName;
        userPhone.value = res.data.result.userPhone;
      } else {
        console.log(res);
      }
    }
    getUserDetail();
    getVoyageList();
    const tableData = ref();
    async function getVoyageList() {
      let res = await api.getVoyageList({
        cargoOwnerId: route.query.userId,
        shipId: 0,
        status: status.value,
        term: term.value,
        currentPage: currentPage.value,
        size: 10,
      });
      if (res.data.status == 0) {
        tableData.value = res.data.result;
      } else {
        console.log(res);
      }
    }
    function changeVoyageType(s) {
      currentPage.value = 1;
      tableData.value = [];
      currentbtn.value = s == 1;
      status.value = s;
      getVoyageList();
    }

    function pageChange(e) {
      currentPage.value = e;
      getVoyageList();
    }

    function voyageDetail(id) {
      router.push({
        path: "/voyage/voyageDetail",
        query: {
          id,
        },
      });
    }

    return {
      userName,
      contactName,
      userPhone,
      status,
      term,
      currentPage,
      currentbtn,
      changeVoyageType,
      getVoyageList,
      voyageDetail,
      pageChange,
      tableData,
    };
  },
};
</script>
<style scoped>
.go-back {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333d43;
  line-height: 100%;
  cursor: pointer;
}

.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;
}

.seach-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: 15px;
  cursor: pointer;
  box-sizing: border-box;
}
</style>