ToDo 投标

src/components/RemoteSelect.vue

@@ -10,12 +10,13 @@
     :loading="loading"
     @change="selectItem"
     @focus="getSelectList"
+    @clear="clearSelect"
   >
     <el-option
       v-for="item in options"
       :key="item.key"
       :label="item.value"
-      :value="{ value: item.value, key: item.key, phone: item.phone }"
+      :value="{ value: item.value, key: item.key, phone: item.phone, item }"
     />
   </el-select>
 </template>
@@ -46,7 +47,7 @@ export default {
     },
   },
 
-  emits: ["selectItem"],
+  emits: ["selectItem", "clearSelect"],
   setup(props, { emit }) {
     let loading = ref(true);
     const getSelectList = _.debounce(
@@ -71,9 +72,13 @@ export default {
       emit("selectItem", item);
     };
 
+    const clearSelect = () => {
+      emit("clearSelect", "");
+    };
     onMounted(() => {});
     return {
       getSelectList,
+      clearSelect,
       selectItem,
       options,
       loading,

src/views/tenderManage/tenderDetail.vue

@@ -75,7 +75,162 @@
       <pre style="white-space: pre-wrap">{{ tenderData.quotationRequest }}</pre>
     </div>
     <el-divider></el-divider>
-    <div class="t20 mb10">投标信息</div>
+    <div class="t20 mb20">投标信息</div>
+    <div class="df aic ml10 mb20">
+      <div class="fs16 mr10">是否参与竞标:</div>
+      <el-button-group class="mr20">
+        <el-button
+          :type="bidStatus === 1 ? 'primary' : ''"
+          @click="changeBidType(1)"
+          size="small"
+          :disabled="tenderData.bidStatus !== 0"
+        >
+          参与
+        </el-button>
+        <el-button
+          :type="bidStatus === 2 ? 'primary' : ''"
+          @click="changeBidType(2)"
+          size="small"
+          :disabled="tenderData.bidStatus !== 0"
+        >
+          不参与
+        </el-button>
+      </el-button-group>
+      <div v-if="bidStatus === 1">
+        <el-button type="primary" size="small" @click="showAddShip()">
+          <i class="el-icon-plus"></i>
+          <span>添加船舶</span>
+        </el-button>
+        <el-button @click="print">print</el-button>
+      </div>
+    </div>
+    <div v-if="bidStatus === 1">
+      <div class="df fww">
+        <div
+          class="card mr20 mb10"
+          style="width: 380px"
+          v-for="(item, index) in tenderData.proxyBids"
+          :key="index"
+        >
+          <div class="df aic mb10">
+            <div class="info-title">船名:</div>
+            <div class="info-text">
+              <RemoteSelect
+                api="tenderSelectShip"
+                v-model="item.shipName"
+                :params="{
+                  tenderId: route.query.id,
+                }"
+                placeholder="请选择船舶"
+                @selectItem="selectShip($event, index)"
+                @clearSelect="clearSelect(index)"
+              ></RemoteSelect>
+            </div>
+          </div>
+          <div class="df aic mb10">
+            <div class="info-title">MMSI:</div>
+            <div class="info-text">
+              <el-input v-model="item.shipMmsi"></el-input>
+            </div>
+          </div>
+          <div class="df aic mb10">
+            <div class="info-title">装载吨位:</div>
+            <div class="info-text df aic">
+              <el-input v-model="item.loadTons">
+                <template #append>吨</template>
+              </el-input>
+            </div>
+          </div>
+          <div class="df aic mb10">
+            <div class="info-title">预计船期:</div>
+            <div class="info-text df aic">
+              <el-input v-model="item.estimatedSailingDays">
+                <template #append>天</template>
+              </el-input>
+            </div>
+          </div>
+          <div class="df aic mb10">
+            <div class="info-title">装卸天数:</div>
+            <div class="info-text df aic">
+              <el-input v-model="item.loadDiscDays">
+                <template #append>天</template>
+              </el-input>
+            </div>
+          </div>
+          <div class="df aic mb10">
+            <div class="info-title">报价:</div>
+            <div class="info-text df aic">
+              <el-input v-model="item.quotePrice">
+                <template #append>元/吨</template>
+              </el-input>
+            </div>
+          </div>
+          <div class="df aic mb10">
+            <div class="info-title">船舶证书:</div>
+            <div class="info-text">
+              <el-image
+                class="card w200 h200"
+                style="height: 200px; line-height: 165px"
+                :src="item.viewUrl || ''"
+                :preview-src-list="[item.viewUrl || '']"
+              >
+                <template #error>
+                  <div class="tac">
+                    {{ item.viewUrl ? "加载失败" : "暂无证书" }}
+                  </div>
+                </template>
+              </el-image>
+            </div>
+          </div>
+          <div class="df aic jcfe mt20">
+            <el-button type="danger" size="small" @click="deleteTender(index)">
+              删除
+            </el-button>
+            <el-button
+              v-if="item.proxyBidId"
+              type="primary"
+              size="small"
+              @click="tenderShip(index, 0)"
+            >
+              修改
+            </el-button>
+            <el-button
+              v-else
+              type="primary"
+              size="small"
+              @click="tenderShip(index, 0)"
+            >
+              暂存
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              @click="tenderShip(index, 1)"
+            >
+              投标
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="bidStatus === 2">
+      <div class="df mb20">
+        <div class="info-title">
+          {{ tenderData.bidStatus === 0 ? "请填写备注:" : "备注信息:" }}
+        </div>
+        <el-input
+          style="margin-left: 6px"
+          input-style="color: #333;"
+          type="textarea"
+          v-model="tenderData.giveUpRemark"
+          :rows="5"
+          :disabled="tenderData.bidStatus !== 0"
+        ></el-input>
+      </div>
+      <div class="df jcfe" v-if="tenderData.bidStatus === 0">
+        <el-button type="primary" @click="giveupTender">放弃投标</el-button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -101,6 +256,7 @@ const tenderData = ref({
   capacityRequirements: "",
   quotationRequest: "",
   tenderProxies: [],
+  proxyBids: [],
 });
 
 const voyage = ref({});
@@ -112,6 +268,11 @@ async function getTenderDetail() {
     tenderId: route.query.id,
   });
   tenderData.value = data.result;
+  if (tenderData.value.proxyBids.length) {
+    bidStatus.value = 1;
+  } else {
+    bidStatus.value = data.result.bidStatus;
+  }
 }
 
 function getLeftTime(givenTime = "2099-12-31 23:59:59") {
@@ -124,6 +285,143 @@ function getLeftTime(givenTime = "2099-12-31 23:59:59") {
   );
   return `${days}天${hours}小时`;
 }
+const bidStatus = ref("");
+function changeBidType(type) {
+  bidStatus.value = type;
+}
+
+function giveupTender() {
+  if (tenderData.value.giveUpRemark === "") {
+    ElMessage.error("请填写备注");
+    return;
+  }
+  ElMessageBox.confirm("是否放弃投标?", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(async () => {
+    let { data } = await api.giveupTender({
+      tenderId: route.query.id,
+      giveUpRemark: tenderData.value.giveUpRemark,
+    });
+    if (data.status === 0) {
+      ElNotification({
+        title: "成功",
+        message: "放弃投标成功",
+        type: "success",
+      });
+      getTenderDetail();
+    } else {
+      ElNotification({
+        title: "失败",
+        message: data.msg,
+        type: "error",
+      });
+    }
+  });
+}
+
+function showAddShip() {
+  tenderData.value.proxyBids.push({});
+}
+
+function selectShip({ item }, index) {
+  console.log(item);
+  tenderData.value.proxyBids[index] = {
+    ...tenderData.value.proxyBids[index],
+    viewUrl: item?.certificates?.[0]?.viewUrl || "",
+    shipId: item?.key,
+    shipName: item?.value,
+    shipMmsi: item?.mmsi,
+  };
+}
+
+function clearSelect(index) {
+  let { proxyBidId } = tenderData.value.proxyBids[index];
+  tenderData.value.proxyBids[index] = { proxyBidId };
+}
+
+function deleteTender(index) {
+  let { id: proxyBidId } = tenderData.value.proxyBids[index];
+  if (proxyBidId) {
+    ElMessageBox.confirm("是否删除?", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(async () => {
+      let { data } = await api.deleteTender({
+        tenderId: route.query.id,
+        proxyBidId,
+      });
+      if (data.status === 0) {
+        ElNotification({
+          title: "成功",
+          message: "删除成功",
+          type: "success",
+        });
+        getTenderDetail();
+      } else {
+        ElNotification({
+          title: "失败",
+          message: data.msg,
+          type: "error",
+        });
+        console.log(data);
+      }
+    });
+  } else {
+    tenderData.value.proxyBids.splice(index, 1);
+  }
+}
+
+function tenderShip(index, bidType) {
+  let {
+    shipId,
+    loadTons,
+    estimatedSailingDays,
+    loadDiscDays,
+    quotePrice,
+    id: proxyBidId,
+  } = tenderData.value.proxyBids[index];
+  if (!shipId) {
+    ElMessage.error("请选择船舶");
+    return;
+  }
+  ElMessageBox.confirm(`是否确定${bidType === 0 ? "暂存" : "投标"}?`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(async () => {
+    let { data } = await api.tenderShip({
+      tenderId: route.query.id,
+      proxyBidId,
+      bidType,
+      shipId,
+      loadTons,
+      estimatedSailingDays,
+      loadDiscDays,
+      quotePrice,
+    });
+    if (data.status === 0) {
+      ElNotification({
+        title: "成功",
+        message: bidType === 0 ? "暂存成功" : "投标成功",
+        type: "success",
+      });
+      getTenderDetail();
+    } else {
+      ElNotification({
+        title: "失败",
+        message: data.msg,
+        type: "error",
+      });
+    }
+  });
+}
+
+function print() {
+  console.log(tenderData.value);
+}
 
 onMounted(() => {
   getTenderDetail();
@@ -139,7 +437,7 @@ onMounted(() => {
 }
 
 .info-text {
-  width: 160px;
+  width: 200px;
   color: #333;
 }
 .table-title {