ToDo 多投标状态

src/views/tenderManage/tenderDetail.vue

@@ -75,36 +75,111 @@
     </div>
     <el-divider></el-divider>
     <div class="t20 mb10">投标信息</div>
+    <div class="df aic mb10">
+      <div class="mr10">参与竞标公司数量:</div>
+      <div class="mr20">{{ tenderData.participateProxyNum }}</div>
+      <el-button size="small" type="primary" @click="showAddTenderCompany()">
+        增加竞标公司
+      </el-button>
+      <el-dialog v-model="isAddProxyCompanyVisible" title="增加竞标公司">
+        <div class="df aic mb10">
+          <div class="red">*</div>
+          <div>请选择新代理公司(可多选):</div>
+          <el-select
+            class="w300 ml20"
+            v-model="currentProxyCompanies"
+            value-key="value"
+            placeholder="请选择参与竞标代理公司"
+            multiple
+            clearable
+            @change="proxyCompaniesChange"
+          >
+            <el-option
+              v-for="item in proxyCompanies"
+              :key="item.id"
+              :label="item.companyName"
+              :value="item"
+            ></el-option>
+          </el-select>
+        </div>
+        <el-table
+          v-if="currentProxyCompanies.length > 0"
+          :data="currentProxyCompanies"
+          border
+          stripe
+        >
+          <el-table-column label="公司名称" prop="companyName" />
+          <el-table-column label="联系人" prop="contactName" />
+          <el-table-column label="手机号" prop="contactPhone" />
+          <el-table-column label="邮箱" prop="contactEmail" />
+          <el-table-column label="操作" width="80">
+            <template #default="scope">
+              <el-button type="danger" @click="remove(scope)" size="small">
+                移除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="df aic jcfe mt20 pr20">
+          <el-button @click="cancelAddTenderCompany()">取消</el-button>
+
+          <el-button type="primary" @click="addTenderProxy()">
+            确定添加
+          </el-button>
+        </div>
+      </el-dialog>
+    </div>
+    <div class="df aic mb10">
+      <div class="mr10">未参与竞标公司数量:</div>
+      <div class="mr20">{{ tenderData.notCompleteBidProxyNum }}</div>
+      <div class="mr10">完成竞标公司数量:</div>
+      <div class="mr20">{{ tenderData.completeBidProxyNum }}</div>
+    </div>
     <div class="card">
-      <div class="card mb30" v-for="(item, index) in tenderTableData">
+      <div class="card mb30" v-for="(item, index) in tenderData.tenderProxies">
+        <div class="df aic jcsb mb10">
+          <div>{{ item.proxyCompanyName }}</div>
+          <div class="df aic">
+            <div class="mr10">邮件通知状态:</div>
+            <div
+              class="mr10 fs18"
+              :style="{
+                color: item.emailSendStatus === 0 ? '#9d0016' : '#00B050',
+              }"
+            >
+              {{ item.emailSendStatus === 0 ? "未发送" : "" }}
+              {{ item.emailSendStatus === 1 ? "已发送" : "" }}
+            </div>
+            <el-button
+              v-if="item.emailSendStatus === 0"
+              size="small"
+              type="primary"
+            >
+              发送
+            </el-button>
+            <el-button
+              v-if="item.emailSendStatus === 1"
+              size="small"
+              type="primary"
+            >
+              再次发送
+            </el-button>
+          </div>
+        </div>
         <AMapContainer
           :mapId="'map' + index"
-          :ships="item"
-          style="width: 80%; height: 300px"
+          :ships="[item.tenderProxyBids]"
+          style="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"
+          :data="item.tenderProxyBids"
           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>
@@ -133,7 +208,7 @@ import api from "../../apis/fetch";
 import store from "../../store";
 import router from "../../router";
 import { ref, onMounted, reactive, computed } from "vue";
-import { ElNotification, ElMessageBox } from "element-plus";
+import { ElNotification, ElMessage, ElMessageBox } from "element-plus";
 import { mapGetters } from "vuex";
 import { useRoute } from "vue-router";
 
@@ -149,6 +224,7 @@ const tenderData = ref({
   participateProxyNum: "",
   capacityRequirements: "",
   quotationRequest: "",
+  tenderProxies: [],
 });
 
 function handleTender(type) {
@@ -223,6 +299,67 @@ function getLeftTime(givenTime = "2099-12-31 23:59:59") {
   );
   return `${days}天${hours}小时`;
 }
+
+const isAddProxyCompanyVisible = ref(false);
+const proxyCompanies = ref([]);
+
+async function getTenderProxySelect() {
+  let { data } = await api.getTenderProxySelect({});
+  if (data.status === 0) {
+    proxyCompanies.value = data.result;
+  } else {
+    proxyCompanies.value = [];
+  }
+}
+const currentProxyCompanies = ref([]);
+
+function proxyCompaniesChange(e) {
+  // ruleForm.value.proxyCompanyIds = currentProxyCompanies.value
+  //   .map((item) => item.id)
+  //   .join(",");
+}
+
+function remove(scope) {
+  currentProxyCompanies.value.splice(scope.$index, 1);
+}
+
+function showAddTenderCompany() {
+  isAddProxyCompanyVisible.value = true;
+  getTenderProxySelect();
+}
+
+function cancelAddTenderCompany() {
+  currentProxyCompanies.value = [];
+  isAddProxyCompanyVisible.value = false;
+}
+async function addTenderProxy() {
+  if (currentProxyCompanies.value.length === 0) {
+    ElMessage({
+      type: "warning",
+      message: "请选择代理公司!",
+    });
+    return;
+  }
+
+  let { data } = await api.addTenderProxy({
+    tenderId: route.query.id,
+    proxyCompanyIds: currentProxyCompanies.value
+      .map((item) => item.id)
+      .join(","),
+  });
+  if (data.status === 0) {
+    ElNotification({
+      type: "success",
+      message: "添加成功!",
+    });
+  } else {
+    ElNotification({
+      type: "error",
+      message: data.msg,
+    });
+  }
+  cancelAddTenderCompany();
+}
 onMounted(() => {
   getTenderDetail();
 });