更新 船舶详情

src/views/shipInfo/shipDetail.vue

@@ -101,6 +101,185 @@
       </el-button>
     </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="seach-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="shipOwnerId" label="船东">
+            <!-- <el-input v-model="voyageForm.shipOwnerId"></el-input> -->
+            <el-autocomplete
+              v-model="voyageForm.shipOwnerName"
+              :fetch-suggestions="seachShipOwner"
+              placeholder="选择船东"
+              @select="selectShipOwner"
+            />
+          </el-form-item>
+          <el-form-item prop="cargoOwnerId" label="货主">
+            <el-autocomplete
+              v-model="voyageForm.cargoOwnerName"
+              :fetch-suggestions="seachCargoOwner"
+              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="航次结束时间"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item prop="loadPort" label="装货港">
+            <el-input v-model="voyageForm.loadPort"></el-input>
+          </el-form-item>
+          <el-form-item prop="dischargeProt" label="卸货港">
+            <el-input v-model="voyageForm.dischargeProt"></el-input>
+          </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="260"
+        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="60"
+        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="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>
   <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
     <el-image
       :src="dialogImageUrl"
@@ -188,8 +367,6 @@ export default {
         }
       }
       delete shipDetail.value.shipCertificates;
-      console.log(shipDetail.value);
-      return;
       let res = await api.updateShip(shipDetail.value);
       if (res.data.status == 0) {
         unchangeable.value = true;
@@ -205,9 +382,177 @@ export default {
         console.log(res);
       }
     }
+    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: true, message: "请填写航次名称", trigger: "blur" },
+        ],
+        shipOwnerId: [
+          { required: true, message: "请选择船东", trigger: "blur" },
+        ],
+        cargoOwnerId: [
+          { required: true, message: "请选择货主", trigger: "blur" },
+        ],
+        startTime: [
+          { required: true, message: "请填写开始时间", trigger: "blur" },
+        ],
+        endTime: [
+          { required: true, 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" }],
+        // -----------
+        shipOwnerName: [
+          { required: true, message: "请选择船东", trigger: "blur" },
+        ],
+        cargoOwnerName: [
+          { required: true, message: "请选择货主", trigger: "blur" },
+        ],
+      },
+    });
+    let voyageForm = reactive({
+      voyageForm: {
+        voyageName: "",
+        cargoOwnerId: "",
+        startTime: "",
+        endTime: "",
+        loadPort: "",
+        dischargeProt: "",
+        cargo: "",
+        tons: "",
+        // -----
+        shipOwnerName: "",
+        cargoOwnerName: "",
+      },
+    });
+    let addVoyageForm = ref(null);
+
+    async function addVoyage() {
+      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 seachShipOwner(queryString, cb) {
+      if (!queryString) return;
+      let res = await api.getUserInfoAndShipInfo({
+        term: queryString,
+      });
+      let shipOwners = [];
+      if (res.data.status == 0) {
+        shipOwners = res.data.result;
+        for (let i of shipOwners) {
+          i.value = `${i.shipOwnerName}-${i.shipName}`;
+        }
+        cb(shipOwners);
+      }
+    }
+    const selectShipOwner = (item) => {
+      voyageForm.voyageForm.shipOwnerId = item.shipOwnerId;
+      voyageForm.voyageForm.shipId = item.shipId;
+    };
+
+    async function seachCargoOwner(queryString, cb) {
+      if (!queryString) return;
+      let res = await api.seachUser({
+        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;
+    };
+
+    function resetAddVoyageForm() {
+      voyageAddDialogVisible.value = false;
+      voyageForm.voyageForm.shipOwnerName = "";
+      voyageForm.voyageForm.cargoOwnerName = "";
+      addVoyageForm.value.resetFields();
+    }
 
     onMounted(() => {
       getShipDetail();
+      getVoyageList();
     });
     return {
       unchangeable,
@@ -223,8 +568,166 @@ export default {
       shipParams,
       idUploadSuccess,
       shipFileList,
+      currentPage,
+      term,
+      tableData,
+      total,
+      currentbtn,
+      changeVoyageType,
+      getVoyageList,
+      voyageDetail,
+      pageChange,
+      goToVoyageAdd,
+      addVoyage,
+      voyageAddDialogVisible,
+      addVoyageForm,
+      ...toRefs(rules),
+      ...toRefs(voyageForm),
+      seachShipOwner,
+      selectShipOwner,
+      seachCargoOwner,
+      selectCargoOwner,
+      resetAddVoyageForm,
     };
   },
 };
 </script>
-<style scoped></style>
+<style scoped>
+.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;
+}
+
+.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;
+}
+
+.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: 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;
+}
+:deep() .el-input__inner {
+  text-align: center;
+}
+</style>