新增 航次新增页面

src/views/voyage/voyageAdd.vue

@@ -1,9 +1,117 @@
-<template>voyageAdd</template>
+<template>
+  <div class="line-container-p18">
+    <i class="el-icon-arrow-left"></i>
+    <div class="dib go-back ml8">返回航次列表</div>
+  </div>
+  <div id="map-container" class="map-container"></div>
+
+  <div class="line-container-p24">
+    <el-form
+      :rules="rules"
+      label-position="right"
+      label-width="80px"
+      :model="voyageForm"
+    >
+      <div class="line1 df" style="flex-wrap: wrap">
+        <el-form-item prop="voyageName" label="航次名称">
+          <el-input v-model="voyageForm.voyageName"></el-input>
+        </el-form-item>
+        <el-form-item label="货主">
+          <el-input v-model="voyageForm.cargoOwnerId"></el-input>
+        </el-form-item>
+        <el-form-item label="开始时间">
+          <el-input v-model="voyageForm.startTime"></el-input>
+        </el-form-item>
+        <el-form-item label="结束时间">
+          <el-input v-model="voyageForm.endTime"></el-input>
+        </el-form-item>
+        <el-form-item label="装货港">
+          <el-input v-model="voyageForm.loadPort"></el-input>
+        </el-form-item>
+        <el-form-item label="卸货港">
+          <el-input v-model="voyageForm.dischargPort"></el-input>
+        </el-form-item>
+        <el-form-item label="货种">
+          <el-input v-model="voyageForm.cargo"></el-input>
+        </el-form-item>
+        <el-form-item label="吨位">
+          <el-input v-model="voyageForm.tons"></el-input>
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
 <script>
+import { onMounted, ref, toRefs, reactive } from "vue";
 export default {
   setup() {
-    return {};
+    let map = ref();
+    const rules = reactive({
+      rules: {
+        voyageName: [{ 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" }],
+        dischargPort: [{ 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: "",
+        dischargPort: "",
+        cargo: "",
+        tons: "",
+      },
+    });
+
+    function initMap() {
+      var center = new TMap.LatLng(31.228721, 121.524761);
+      //初始化地图
+      map.value = new TMap.Map("map-container", {
+        zoom: 12, //设置地图缩放级别
+        center: center, //设置地图中心点坐标
+      });
+    }
+
+    onMounted(() => {
+      initMap();
+    });
+
+    return {
+      ...toRefs(voyageForm),
+      ...toRefs(rules),
+    };
   },
 };
 </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;
+}
+
+.map-container {
+  width: 100%;
+  height: 658px;
+  margin: 20px 0;
+}
+
+:deep() .el-form-item {
+  margin-right: 22px;
+  width: 280px;
+}
+:deep() .el-input__inner {
+  text-align: center;
+}
+</style>