新增 航次添加

src/apis/fetch.js

@@ -44,4 +44,9 @@ export default {
   auditMedia(data) {
     return $http("post", "/media/backstage/audit", data);
   },
+
+  // 模糊搜索用户
+  seachUser(data) {
+    return $http("post", "/user/backstage/search", data);
+  },
 };

src/views/voyage/voyageList.vue

@@ -31,8 +31,78 @@
         ></el-input>
         <div class="seach-btn" @click="getVoyageList()">查询</div>
       </div>
-      <div class="voyage-add" @click="goToVoyageAdd">添加航次</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"
@@ -118,7 +188,6 @@ import api from "../../apis/fetch";
 export default {
   setup() {
     let currentbtn = ref(true);
-
     let currentPage = ref(1);
     let term = ref();
     let tableData = ref();
@@ -137,8 +206,6 @@ export default {
       if (res.data.status == 0) {
         tableData.value = res.data.result;
       }
-
-      console.log(res);
     }
     function changeVoyageType(s) {
       currentbtn.value = s == 1;
@@ -146,7 +213,6 @@ export default {
       getVoyageList();
     }
     async function voyageDetail(id) {
-      console.log(id);
       router.push({
         path: "/voyage/voyageDetail",
         query: {
@@ -164,8 +230,131 @@ export default {
         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();
+    }
+
     getVoyageList();
     onMounted(() => {});
+
     return {
       currentPage,
       term,
@@ -177,6 +366,16 @@ export default {
       voyageDetail,
       pageChange,
       goToVoyageAdd,
+      addVoyage,
+      voyageAddDialogVisible,
+      addVoyageForm,
+      ...toRefs(rules),
+      ...toRefs(voyageForm),
+      seachShipOwner,
+      selectShipOwner,
+      seachCargoOwner,
+      selectCargoOwner,
+      resetAddVoyageForm,
     };
   },
 };
@@ -303,4 +502,20 @@ export default {
   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>