新增 货主详情

src/App.vue

@@ -76,14 +76,42 @@ export default {
   overflow: scroll;
 }
 
-.line-container {
+.line-container-p18 {
+  padding: 18px;
+  background: #fff;
+}
+.line-container-p24 {
   padding: 24px;
   background: #fff;
 }
 
-.full-container {
+.full-container-p24 {
   padding: 24px;
   height: calc(100% - 48px);
   background: #fff;
 }
+
+.df {
+  display: flex;
+}
+
+.aic {
+  align-items: center;
+}
+
+.dib {
+  display: inline-block;
+}
+
+.ml8 {
+  margin-left: 8px;
+}
+
+.container-title {
+  font-size: 18px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #0094fe;
+  margin: 30px 0 15px 0;
+}
 </style>

src/apis/fetch.js

@@ -14,4 +14,14 @@ export default {
   addUser(data) {
     return $http("post", "user/backstage/add", data);
   },
+
+  // 用户详情
+  getUserDetail(data) {
+    return $http("post", "user/backstage/details", data);
+  },
+
+  // 获取航次列表
+  getVoyageList(data) {
+    return $http("post", "voyage/list", data);
+  },
 };

src/views/cargoOwnerManage/cargoOwnerDetail.vue

@@ -1,9 +1,280 @@
-<template>cargoOwnerDetail</template>
+<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="height: 32px; width: 330px; line-height: 32px"
+      ></el-input>
+      <div class="seach-btn" @click="getVoyageList">查询</div>
+    </div>
+
+    <el-table :data="tableData" 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="contactName"
+        label="装货港-卸货港"
+        min-width="120"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        prop="开始时间-结束时间"
+        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
+        prop="createTime"
+        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
+        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, 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 { Notification, Msgbox, Message } from "element3";
+import store from "../../store";
+import router from "../../router";
+import { useRoute } from "vue-router";
+import api from "../../apis/fetch";
+
 export default {
   setup() {
-    return {};
+    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) {
+        console.log(res.data.result.userName);
+
+        userName.value = res.data.result.userName;
+        contactName.value = res.data.result.contactName;
+        userPhone.value = res.data.result.userPhone;
+      }
+    }
+    getUserDetail();
+
+    async function getVoyageList(status) {
+      let res = await api.getVoyageList({
+        cargoOwnerId: route.query.userId,
+        shipId: 0,
+        status,
+        term: term.value,
+        currentPage: currentPage.value,
+        size: 10,
+      });
+
+      console.log(res);
+    }
+    function changeVoyageType(status) {
+      currentbtn.value = status == 1;
+      getVoyageList(status);
+    }
+
+    function pageChange(e) {
+      currentPage.value = e;
+      getVoyageList();
+    }
+
+    function voyageDetail() {
+      router.push({
+        path: "/voyage/voyageDetail",
+        query: {},
+      });
+    }
+
+    return {
+      userName,
+      contactName,
+      userPhone,
+      status,
+      term,
+      currentPage,
+      currentbtn,
+      changeVoyageType,
+      getVoyageList,
+      voyageDetail,
+      pageChange,
+    };
   },
 };
 </script>
-<style scoped></style>
+<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: 34px;
+  width: 103px;
+  border: 1px solid #1486f9;
+  line-height: 34px;
+  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: 17px;
+  border-bottom-left-radius: 17px;
+}
+
+.right-radius {
+  border-top-right-radius: 17px;
+  border-bottom-right-radius: 17px;
+}
+.currentbtn {
+  background: #1486f9;
+  color: #fff;
+}
+
+.seach-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;
+}
+
+:deep().el-input__icon {
+  line-height: 100% !important;
+}
+</style>

src/views/cargoOwnerManage/cargoOwnerList.vue

@@ -91,7 +91,7 @@
         <el-table-column label="操作" min-width="80" align="center">
           <template v-slot="scope">
             <el-button
-              @click="cargoOwnerDetail(scope.row, tableData)"
+              @click="cargoOwnerDetail(scope.row.userId, tableData)"
               type="text"
               size="small"
             >
@@ -199,17 +199,19 @@ export default {
       });
     }
 
-    async function cargoOwnerDetail(e1, e2) {
-      console.log(e1);
-      console.log(e2);
+    async function cargoOwnerDetail(userId) {
+      router.push({
+        path: "/cargoOwnerManage/cargoOwnerDetail",
+        query: {
+          userId,
+        },
+      });
     }
     function pageChange(e) {
       currentPage.value = e;
       getCargoOwnerList();
     }
-    onMounted(() => {
-      store.commit("changefirstTitle", "货主列表");
-    });
+    onMounted(() => {});
     return {
       currentPage,
       term,