ToDo 新增货种/货种绑定货主公司

src/apis/fetch.js

@@ -489,4 +489,28 @@ export default {
   getEmailConfig() {
     return $http("/mail/get/account");
   },
+
+  // 添加货种
+  addCargo(data) {
+    return $http("/cargo/add", data);
+  },
+
+  // 添加货种-关联货主公司-select
+  getCargoOwnerCompanySelect(data) {
+    return $http("/cargo/add/cargoOwner/select", data);
+  },
+
+  // 货种绑定货主公司
+  bindCargoOwnerCompany(data) {
+    return $http("/cargo/bind/cargoOwner", data);
+  },
+  // 启用禁用货种货主公司
+  enableDisableCargoOwnerCompany(data) {
+    return $http("/cargo/enableDisable", data);
+  },
+
+  // 货种列表
+  getCargoList(data) {
+    return $http("/cargo/list", data);
+  },
 };

src/components/Aside.vue

@@ -98,6 +98,16 @@ export default {
           },
         ],
       },
+      {
+        icon: "Box",
+        title: "货种管理",
+        items: [
+          {
+            path: "/cargoManage/cargoList",
+            name: "货种列表",
+          },
+        ],
+      },
       {
         icon: "Place",
         title: "港口信息",

src/router/index.js

@@ -159,6 +159,14 @@ const router = createRouter({
       },
       component: () => import("../views/agencyManage/agencyCompanyDetail.vue"),
     },
+    {
+      path: "/cargoManage/cargoList",
+      name: "cargoList",
+      meta: {
+        title: "货种列表",
+      },
+      component: () => import("../views/cargoManage/cargoList.vue"),
+    },
     {
       path: "/portsManage/portsList",
       name: "portsList",

src/views/cargoManage/cargoList.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="full-container-p24">
+    <div class="df aic jcsb">
+      <div class="df aic">
+        <el-input
+          placeholder="请输入货种/货主公司"
+          prefix-icon="el-icon-search"
+          v-model="term"
+          clearable
+          @clear="getCargoList(1)"
+          style="height: 32px; width: 330px; line-height: 32px"
+        ></el-input>
+        <el-button
+          @click="getCargoList(1)"
+          type="primary"
+          style="margin-left: 10px"
+        >
+          查询
+        </el-button>
+      </div>
+      <el-button type="primary" @click="bindModel = true">新增货种</el-button>
+    </div>
+    <div style="margin-top: 24px">
+      <el-table :data="tableData" stripe style="width: 100%" border>
+        <el-table-column
+          type="index"
+          label="序号"
+          width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="cargoName"
+          label="货种名称"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="操作" align="center">
+          <template v-slot="scope">
+            <el-button
+              @click="checkCargoOwner(scope.row)"
+              link
+              type="primary"
+              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"
+          :current-page="currentPage"
+          :total="total"
+          @current-change="pageChange"
+        ></el-pagination>
+      </div>
+    </div>
+    <el-dialog v-model="cargoOwnerModelVisible" style="width: 800px">
+      <template #header="{ close, titleId, titleClass }">
+        <div class="df jcsb" style="color: #409eff">
+          <div>{{ currentCargo + " - 货主公司列表" }}</div>
+          <el-button type="primary" @click="bindModel = true">
+            新增绑定货主公司
+          </el-button>
+        </div>
+      </template>
+      <el-table :data="cargoOwnerInfos" border>
+        <el-table-column
+          type="index"
+          label="序号"
+          width="60"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="cargoOwnerName"
+          label="货主公司名称"
+          min-width="120"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="create_time"
+          label="创建时间"
+          width="180"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="启用/禁用" width="160" align="center">
+          <template v-slot="scope">
+            <el-switch
+              v-model="scope.row.status"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              active-text="启用"
+              inactive-text="禁用"
+              :active-value="1"
+              :inactive-value="0"
+              @change="enableDisableCargoOwnerCompany($event, scope.row)"
+            >
+              >
+            </el-switch>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+    <el-dialog
+      v-model="bindModel"
+      :title="
+        cargoOwnerModelVisible
+          ? currentCargo + ' - 新增绑定货主公司'
+          : '新增货种'
+      "
+    >
+      <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="100px"
+      ></el-form>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, h, reactive, toRefs, onMounted } from "vue";
+import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
+import store from "../../store";
+import router from "../../router";
+import md5 from "md5";
+import api from "../../apis/fetch";
+
+let currentPage = ref(1);
+let term = ref("");
+let tableData = ref([]);
+let total = ref(0);
+async function getCargoList(page) {
+  currentPage.value = page || currentPage.value;
+  let res = await api.getCargoList({
+    currentPage: currentPage.value,
+    size: 10,
+    term: term.value,
+  });
+  if (res.data.status == 0) {
+    tableData.value = res.data.result;
+    total.value = res.data.total;
+  } else {
+    tableData.value = [];
+    total.value = 0;
+  }
+}
+
+async function cargoDetail(cargoName) {
+  console.log(cargoName);
+}
+function pageChange(e) {
+  currentPage.value = e;
+  getCargoList();
+}
+
+const cargoOwnerInfos = ref([]);
+const cargoOwnerModelVisible = ref(false);
+const currentCargo = ref("");
+function checkCargoOwner(row) {
+  cargoOwnerModelVisible.value = true;
+  currentCargo.value = row.cargoName;
+  cargoOwnerInfos.value = row.cargoOwnerInfos;
+}
+
+async function enableDisableCargoOwnerCompany(status, row) {
+  let { data } = await api.enableDisableCargoOwnerCompany({
+    cargoId: row.cargoId,
+    status,
+  });
+  if (data.status == 0) {
+    ElMessage({
+      message: data.msg,
+      type: "success",
+    });
+  } else {
+    ElMessage({
+      message: data.msg,
+      type: "error",
+    });
+    row.status = status === 1 ? 0 : 1;
+  }
+}
+const bindModel = ref(false);
+const cargoOwnerOptions = ref([]);
+async function getCargoOwnerCompanySelect() {
+  let { data } = await api.getCargoOwnerCompanySelect({});
+  cargoOwnerOptions.value = data.result;
+}
+const ruleFormRef = ref(null);
+const ruleForm = ref({
+  cargoName: "",
+  cargoOwnerIds: [],
+});
+const rules = ref({
+  cargoName: [{ required: true, message: "请输入货种名称", trigger: "blur" }],
+  cargoOwnerIds: [
+    { required: true, message: "请选择货主公司", trigger: "blur" },
+  ],
+});
+function cancel() {}
+
+function submit() {
+  ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      console.log(ruleForm.value);
+    }
+  });
+}
+
+onMounted(() => {
+  getCargoList();
+  getCargoOwnerCompanySelect();
+});
+</script>
+<style scoped>
+.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;
+}
+
+.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;
+}
+</style>