新增 招标表格组件

src/components/TenderTable.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-table class="mb10" :data="tableData" border stripe>
+    <el-table-column label="序号" type="index" width="60" />
+    <el-table-column label="货种" prop="cargo" />
+    <el-table-column label="发货吨位" prop="tons" />
+    <el-table-column label="装货港" prop="loadPort" />
+    <el-table-column label="卸货港" prop="dischargePorts" />
+    <el-table-column label="截止时间" prop="cutOffTime" />
+    <el-table-column label="发起人" prop="initiator" />
+    <el-table-column label="投标数量" prop="tenderQuantity" />
+    <el-table-column label="操作">
+      <template #default="scope">
+        <el-button
+          size="small"
+          type="primary"
+          @click="router.push(`/tenderManage/tenderDetail?id=${scope.row.id}`)"
+        >
+          详情
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <div class="df aic jcfe" style="width: 100%">
+    <el-pagination
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="[10, 50, 100, 200]"
+      background
+      layout="sizes, prev, pager, next"
+      :total="total"
+      @size-change="getTenderList()"
+      @current-change="getTenderList()"
+    />
+  </div>
+</template>
+<script setup>
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import api from "apis/fetch";
+const props = defineProps({
+  transType: {
+    type: Number,
+    default: 1,
+  },
+  status: {
+    type: Number,
+    default: 1,
+  },
+  term: {
+    type: String,
+    default: "",
+  },
+});
+
+const tableData = ref([]);
+const total = ref(0);
+const currentPage = ref(1);
+const pageSize = ref(10);
+async function getTenderList() {
+  let { data } = await api.getTenderList({
+    transType: props.transType,
+    status: props.status,
+    currentPage: currentPage.value,
+    size: pageSize.value,
+    term: props.term,
+  });
+  if (data.status === 0) {
+    tableData.value = data.result;
+  } else {
+    tableData.value = [];
+  }
+  total.value = data.total;
+}
+watch(
+  () => [props.transType, props.status],
+  () => {
+    getTenderList();
+  }
+);
+defineExpose({
+  getTenderList,
+});
+onMounted(() => {
+  getTenderList();
+});
+</script>
+
+<style scoped></style>

src/main.js

@@ -12,10 +12,12 @@ import Certs from "./components/Certs.vue";
 // import RemoteSearch from "./components/RemoteSearch.vue";
 import RemoteSelect from "./components/RemoteSelect.vue";
 import AMapContainer from "./components/AMapContainer.vue";
+import TenderTable from "./components/TenderTable.vue";
 
 const app = createApp(App);
 app.component("RemoteSelect", RemoteSelect);
 app.component("AMapContainer", AMapContainer);
+app.component("TenderTable", TenderTable);
 
 // app.component("RemoteSearch", RemoteSearch);
 app.component("Certs", Certs);

src/views/tenderManage/tenderConsole.vue

@@ -16,62 +16,20 @@
   </div>
   <el-divider class="mt20 mb20"></el-divider>
   <div class="data ml20">
-    <div class="t20 mb10">海运招标</div>
-    <el-table class="mb30" :data="oceanShippingData" border stripe>
-      <el-table-column label="序号" type="index" width="60" />
-      <el-table-column label="货种" prop="cargo" />
-      <el-table-column label="发货吨位" prop="tons" />
-      <el-table-column label="装货港" prop="loadPort" />
-      <el-table-column label="卸货港" prop="dischargePorts" />
-      <el-table-column label="截止时间" prop="cutOffTime" />
-      <el-table-column label="发起人" prop="initiator" />
-      <el-table-column label="投标数量" prop="tenderQuantity" />
-      <el-table-column label="操作">
-        <template #default="scope">
-          <el-button
-            size="small"
-            type="primary"
-            @click="
-              router.push(`/tenderManage/tenderDetail?id=${scope.row.id}`)
-            "
-          >
-            详情
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
     <div class="t20 mb10">江运招标</div>
-    <el-table class="mb30" :data="riverShippingData" border stripe>
-      <el-table-column label="序号" type="index" width="60" />
-      <el-table-column label="货种" prop="cargo" />
-      <el-table-column label="发货吨位" prop="tons" />
-      <el-table-column label="装货港" prop="loadPort" />
-      <el-table-column label="卸货港" prop="dischargePorts" />
-      <el-table-column label="截止时间" prop="cutOffTime" />
-      <el-table-column label="发起人" prop="initiator" />
-      <el-table-column label="投标数量" prop="tenderQuantity" />
-      <el-table-column label="操作">
-        <template #default="scope">
-          <el-button size="small" type="primary">详情</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- <div class="t20 mb10">汽运招标</div>
-      <el-table class="mb30" :data="motorTransData" border stripe>
-        <el-table-column label="序号" type="index" width="60" />
-        <el-table-column label="货种" prop="cargo" />
-        <el-table-column label="发货吨位" prop="tons" />
-        <el-table-column label="装货港" prop="loadPort" />
-        <el-table-column label="卸货港" prop="dischargePorts" />
-        <el-table-column label="截止时间" prop="cutOffTime" />
-        <el-table-column label="发起人" prop="initiator" />
-        <el-table-column label="投标数量" prop="tenderQuantity" />
-        <el-table-column label="操作">
-          <template #default="scope">
-            <el-button size="small" type="primary">详情</el-button>
-          </template>
-        </el-table-column>
-      </el-table> -->
+    <TenderTable
+      ref="tableRef"
+      class="mb30"
+      :transType="1"
+      :status="1"
+    ></TenderTable>
+    <div class="t20 mb10">海运招标</div>
+    <TenderTable
+      ref="tableRef"
+      class="mb30"
+      :transType="2"
+      :status="1"
+    ></TenderTable>
   </div>
 </template>
 
@@ -85,98 +43,12 @@ import { mapGetters } from "vuex";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
-
-const riverCurrentPage = ref(1);
-const riveTotal = ref(0);
-const riverShippingData = ref([
-  {
-    id: 1,
-    cargo: "玉米",
-    tons: 200000,
-    loadPort: "张家港",
-    dischargePorts: "上海",
-    cutOffTime: "2024-05-01 14:00",
-    initiator: "投标专员1",
-    tenderQuantity: 20,
-  },
-  {
-    id: 2,
-    cargo: "豆粕",
-    tons: 300000,
-    loadPort: "武汉",
-    dischargePorts: "南通",
-    cutOffTime: "2024-05-15 14:00",
-    initiator: "投标专员2",
-    tenderQuantity: 30,
-  },
-]);
-const oceanCurrentPage = ref(1);
-const oceanTotal = ref(0);
-const oceanShippingData = ref([
-  {
-    id: 1,
-    cargo: "煤炭",
-    tons: 200000,
-    loadPort: "张家港",
-    dischargePorts: "宁波",
-    cutOffTime: "2024-05-01 14:00",
-    initiator: "投标专员1",
-    tenderQuantity: 20,
-  },
-  {
-    id: 2,
-    cargo: "石油焦",
-    tons: 300000,
-    loadPort: "南通",
-    dischargePorts: "厦门",
-    cutOffTime: "2024-05-15 14:00",
-    initiator: "投标专员2",
-    tenderQuantity: 30,
-  },
-]);
-
-const motorCurrentPage = ref(1);
-const motorTotal = ref(0);
-const motorTransData = ref([]);
 async function getShipPoints() {
   let { data } = await api.getShipPoints({});
   console.log(data);
 }
-async function getTenderList(transType = 1, currentPage = 1) {
-  let { data } = await api.getTenderList({
-    transType,
-    status: 1,
-    currentPage,
-    size: 10,
-    term: "",
-  });
-  if (data.status === 0) {
-    let { result, total } = data;
-    switch (transType) {
-      case 1: {
-        riverShippingData.value = result;
-        riveTotal.value = total;
-        break;
-      }
-      case 2: {
-        oceanShippingData.value = result;
-        oceanTotal.value = total;
-        break;
-      }
-      case 3: {
-        motorTransData.value = result;
-        motorTotal.value = total;
-        break;
-      }
-    }
-  }
-
-  console.log(data);
-}
 onMounted(() => {
   getShipPoints();
-  getTenderList(1);
-  getTenderList(2);
 });
 </script>
 <style scoped>

src/views/tenderManage/tenderList.vue

@@ -1,5 +1,60 @@
 <template>
-  <el-card>招标列表</el-card>
+  <div class="line-container-p24">
+    <div class="mb10">
+      <el-button-group>
+        <el-button
+          :type="transType === 1 ? 'primary' : ''"
+          @click="changeTransType(1)"
+        >
+          江运
+        </el-button>
+        <el-button
+          :type="transType === 2 ? 'primary' : ''"
+          @click="changeTransType(2)"
+        >
+          海运
+        </el-button>
+      </el-button-group>
+    </div>
+    <div class="mb20 df aic">
+      <el-button-group>
+        <el-button
+          :type="status === 0 ? 'primary' : ''"
+          @click="changeStatus(0)"
+        >
+          未发布
+        </el-button>
+        <el-button
+          :type="status === 1 ? 'primary' : ''"
+          @click="changeStatus(1)"
+        >
+          招标中
+        </el-button>
+        <el-button
+          :type="status === 2 ? 'primary' : ''"
+          @click="changeStatus(2)"
+        >
+          历史招标
+        </el-button>
+      </el-button-group>
+      <el-input
+        class="ml20 mr10"
+        style="width: 200px"
+        v-model="term"
+        clearable
+        @clear="tableRef.getTenderList()"
+        @blur="tableRef.getTenderList()"
+        placeholder="搜索"
+        @keyup.enter="tableRef.getTenderList()"
+      ></el-input>
+    </div>
+    <TenderTable
+      ref="tableRef"
+      :transType="transType"
+      :status="status"
+      :term="term"
+    ></TenderTable>
+  </div>
 </template>
 
 <script setup>
@@ -12,6 +67,19 @@ import { mapGetters } from "vuex";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
+const tableRef = ref(null);
+const transType = ref(1);
+const status = ref(1);
+const term = ref("");
+function changeTransType(t) {
+  transType.value = t;
+}
+
+function changeStatus(s) {
+  status.value = s;
+}
+
+onMounted(() => {});
 </script>
 
 <style scoped></style>