ToDo 招标详情:投标信息

src/apis/fetch.js

@@ -308,12 +308,12 @@ export default {
 
   // 发起新招标-历史招标
   getTenderHistory(data) {
-    return $http("/tender/history", data);
+    return $http("/tender/new/history", data);
   },
 
   // 发起新招标-模板数据
   getTenderTemplate(data) {
-    return $http("/tender/template", data);
+    return $http("/tender/new/template", data);
   },
 
   // 代理公司选择

src/views/tenderManage/inviteTender.vue

@@ -234,9 +234,13 @@ const rules = ref({
 
 function changeTransType(t) {
   ruleForm.value.transType = t;
-  if (ruleForm.value.initMethod !== 2) return;
+  if (ruleForm.value.initMethod === 2) {
+    getTenderTemplateDetail();
+  }
+  if (ruleForm.value.initMethod === 3) {
+    getTenderHistory();
+  }
   currentProxyCompanies.value = [];
-  getTenderTemplateDetail();
 }
 
 async function getTenderProxyList() {
@@ -365,6 +369,17 @@ async function getTenderTemplateDetail() {
     };
   }
 }
+const historyCurrentPage = ref(1);
+const historyTotal = ref(0);
+const historyTableData = ref([]);
+async function getTenderHistory() {
+  let { data } = await api.getTenderHistory({
+    transType: ruleForm.value.transType,
+    currentPage: historyCurrentPage.value,
+    size: 10,
+    term: "",
+  });
+}
 
 onMounted(() => {
   if (route.query.id) {

src/views/tenderManage/tenderDetail.vue

@@ -1,5 +1,131 @@
 <template>
-  <el-card>招标详情</el-card>
+  <div class="card">
+    <div class="df aic jcsb mb10">
+      <div class="t20">招标信息</div>
+      <div class="df aic">
+        <div
+          class="mr10 fs18"
+          :style="{ color: tenderData.status === 1 ? '#00B050' : '#FFA500' }"
+        >
+          {{ tenderData.status === 1 ? "招标中" : "" }}
+          {{ tenderData.status === 2 ? "招标完成" : "" }}
+        </div>
+        <div class="mr10" v-if="tenderData.status === 1">
+          竞标截止剩余: {{ getLeftTime(tenderData.bidDeadlineDatetime) }}
+        </div>
+      </div>
+    </div>
+    <div class="card mb20">
+      <div class="df aic mb10">
+        <div class="info-title">发起时间:</div>
+        <div class="info-text">{{ tenderData.operatorDate }}</div>
+        <div class="info-title">货种:</div>
+        <div class="info-text">{{ tenderData.cargo }}</div>
+        <div class="info-title">装货港:</div>
+        <div class="info-text">{{ tenderData.loadPortName }}</div>
+      </div>
+      <div class="df aic mb10">
+        <div class="info-title">截止时间:</div>
+        <div class="info-text">{{ tenderData.bidDeadlineDatetime }}</div>
+        <div class="info-title">发货吨位:</div>
+        <div class="info-text">{{ tenderData.tons }} 吨</div>
+        <div class="info-title">卸货港:</div>
+        <div class="info-text">{{ tenderData.dischargePortName }}</div>
+      </div>
+    </div>
+    <div v-if="tenderData.initMethod === 3">
+      <div class="t20 mb10">前置航次信息</div>
+      <div class="card">
+        <AMapContainer
+          :ships="[voyage]"
+          :loadPorts="loadPorts"
+          :dischargePorts="dischargePorts"
+          style="width: 100%; height: 500px"
+        ></AMapContainer>
+        <div class="card mt10">
+          <div class="t16 mb10">航次信息</div>
+          <div class="df aic mb10">
+            <div class="info-title">船名:</div>
+            <div class="info-text">{{ voyage.shipName }}</div>
+            <div class="info-title">装货港:</div>
+            <div class="info-text">{{ voyage.loadPort }}</div>
+            <div class="info-title">货种:</div>
+            <div class="info-text">{{ voyage.cargo }}</div>
+          </div>
+          <div class="df aic mb10">
+            <div class="info-title">MMSI:</div>
+            <div class="info-text">{{ voyage.mmsi }}</div>
+            <div class="info-title">卸货港:</div>
+            <div class="info-text">{{ voyage.dischargePorts }}</div>
+            <div class="info-title">装载吨位:</div>
+            <div class="info-text">{{ voyage.tons }} 吨</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="t20 mt20 mb10">运力要求</div>
+    <div class="card w50p">
+      <pre style="white-space: pre-wrap">{{
+        tenderData.capacityRequirements
+      }}</pre>
+    </div>
+    <div class="t20 mt20 mb10">报价要求</div>
+    <div class="card w50p">
+      <pre style="white-space: pre-wrap">{{ tenderData.quotationRequest }}</pre>
+    </div>
+    <el-divider></el-divider>
+    <div class="t20 mb10">投标信息</div>
+    <div class="card">
+      <div class="card mb30" v-for="(item, index) in tenderTableData">
+        <AMapContainer
+          :mapId="'map' + index"
+          :ships="item"
+          style="width: 80%; height: 300px"
+          class="mb10"
+        ></AMapContainer>
+        <div class="df aic mt20 mb10">
+          <div class="table-title">公司名称:</div>
+          <div class="table-text">{{ item[0].companyName }}</div>
+          <div class="table-title">联系人姓名:</div>
+          <div class="table-text">{{ item[0].contectName }}</div>
+          <div class="table-title">手机号:</div>
+          <div class="table-text">{{ item[0].contectPhone }}</div>
+        </div>
+        <el-table
+          :data="item"
+          border
+          stripe
+          style="width: 80%"
+          show-summary
+          :summary-method="getSummaries"
+        >
+          <!-- <el-table-column label="公司名称" prop="companyName"></el-table-column>
+        <el-table-column
+          label="联系人姓名"
+          prop="contectName"
+        ></el-table-column>
+        <el-table-column label="手机号" prop="contectPhone"></el-table-column> -->
+          <el-table-column label="船名" prop="shipName"></el-table-column>
+          <el-table-column label="MMSI" prop="mmsi"></el-table-column>
+          <el-table-column label="装载吨位" prop="loadTons"></el-table-column>
+          <el-table-column
+            label="报价(元/吨)"
+            prop="quotation"
+          ></el-table-column>
+          <el-table-column
+            label="预计运费(单船)"
+            prop="estimatedCost"
+          ></el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div class="df aic jcfe mt30">
+      <div>
+        <el-button type="primary" @click="handleTender(1)">取消</el-button>
+        <el-button type="primary" @click="handleTender(2)">完成招标</el-button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -12,6 +138,114 @@ import { mapGetters } from "vuex";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
+
+const tenderData = ref({
+  operatorDate: "",
+  bidDeadlineDatetime: "",
+  cargo: "",
+  loadPortName: "",
+  tons: "",
+  dischargePortName: "",
+  participateProxyNum: "",
+  capacityRequirements: "",
+  quotationRequest: "",
+});
+
+function handleTender(type) {
+  ElMessageBox.confirm(`确认${type === 1 ? "取消" : "完成"}招标?`, "提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      ElNotification({
+        type: "success",
+        message: `${type === 1 ? "取消" : "提交"}成功!`,
+      });
+    })
+    .catch(() => {});
+}
+
+const voyage = ref({
+  // shipName: "航次船舶",
+  // loadPort: "武汉",
+  // cargo: "豆粕",
+  // mmsi: "998221222",
+  // dischargePorts: "北仑",
+  // tons: 5000,
+  // longitude: 120.487381,
+  // latitude: 32.042158,
+});
+
+const tenderTableData = ref([]);
+
+const getSummaries = (param) => {
+  const { columns, data } = param;
+  const sums = [];
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = "预估总运费";
+      return;
+    }
+    const values = data.map((item) => Number(item[column.property]));
+    if (index == 4) {
+      sums[index] = `${values.reduce((prev, curr) => {
+        const value = Number(curr);
+        if (!Number.isNaN(value)) {
+          return prev + curr;
+        } else {
+          return prev;
+        }
+      }, 0)} 元`;
+    }
+  });
+
+  return sums;
+};
+
+const loadPorts = ref([]);
+const dischargePorts = ref([]);
+
+async function getTenderDetail() {
+  let { data } = await api.getTenderDetail({
+    tenderId: route.query.id,
+  });
+  tenderData.value = data.result;
+}
+
+function getLeftTime(givenTime = "2099-12-31 23:59:59") {
+  givenTime = new Date(givenTime);
+  const currentTime = new Date();
+  const differenceInMilliseconds = Math.abs(givenTime - currentTime);
+  const days = Math.floor(differenceInMilliseconds / (1000 * 60 * 60 * 24));
+  const hours = Math.floor(
+    (differenceInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+  );
+  return `${days}天${hours}小时`;
+}
+onMounted(() => {
+  getTenderDetail();
+});
 </script>
 
-<style scoped></style>
+<style scoped>
+.info-title {
+  width: 110px;
+  text-align: right;
+  color: #666;
+  margin-right: 10px;
+}
+
+.info-text {
+  width: 160px;
+  color: #333;
+}
+.table-title {
+  color: #666;
+  margin-right: 10px;
+}
+.table-text {
+  color: #333;
+  margin-right: 30px;
+}
+</style>