新增 船舶详情-新增船东列表

src/apis/fetch.js

@@ -94,4 +94,9 @@ export default {
   searchShip(data) {
     return $http("post", "ship/backstage/search", data);
   },
+
+  // 根据shipId获取船东列表
+  getShipOwnerListByShipId(data) {
+    return $http("post", "/user/backstage/shopOwnerlist", data);
+  },
 };

src/views/shipInfo/shipDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="line-container-p18">
+  <div class="line-container-p24">
     <i class="el-icon-arrow-left"></i>
     <div
       class="dib go-back ml8 pointer"
@@ -9,7 +9,7 @@
     </div>
   </div>
   <div class="container-title">船舶信息</div>
-  <div class="line-container-p18">
+  <div class="line-container-p24">
     <div class="line">
       <div class="info-line">
         <div class="info-line-title">船名</div>
@@ -102,6 +102,55 @@
         提交
       </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">
@@ -553,11 +602,42 @@ export default {
       addVoyageForm.value.resetFields();
     }
     let shipCurrentPage = ref(1);
-    async function getShipOwnerListByShipId(shipOd) {}
+    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,
@@ -593,6 +673,13 @@ export default {
       seachCargoOwner,
       selectCargoOwner,
       resetAddVoyageForm,
+      shipCurrentPage,
+      shipOwnerTableData,
+      shipOwnerCurrentPage,
+      getShipOwnerListByShipId,
+      shipOwnerDetail,
+      shipOwnerPageChange,
+      shipOwnerTotal,
       // uploadUrl,
     };
   },