CargoOwner_WebApp/src/views/tenderManage/inviteTender.vue

<template>
  <div class="line-container-p24">
    <div class="df aic mb30">
      <div class="t18 mr20">招标发起方式</div>
      <el-button-group>
        <el-button
          :type="ruleForm.initMethod === 1 ? 'primary' : ''"
          @click="changeInitMethod(1)"
        >
          全新
        </el-button>
        <el-button
          :type="ruleForm.initMethod === 2 ? 'primary' : ''"
          @click="changeInitMethod(2)"
        >
          模板
        </el-button>
        <el-button
          :type="ruleForm.initMethod === 3 ? 'primary' : ''"
          @click="changeInitMethod(3)"
        >
          历史招标
        </el-button>
      </el-button-group>
    </div>
    <div class="card">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="运输类型" prop="transType">
          <el-button-group>
            <el-button
              :type="ruleForm.transType === 1 ? 'primary' : ''"
              @click="changeTransType(1)"
            >
              江运
            </el-button>
            <el-button
              :type="ruleForm.transType === 2 ? 'primary' : ''"
              @click="changeTransType(2)"
            >
              海运
            </el-button>
            <!-- <el-button
              :type="ruleForm.transType === 3 ? 'primary' : ''"
              @click="changeTransType(3)"
            >
              汽运
            </el-button> -->
          </el-button-group>
        </el-form-item>
        <el-form-item label="货种" prop="cargoId">
          <RemoteSelect
            class="w300"
            api="getCargoSelect"
            v-model="ruleForm.cargo"
            :params="{}"
            placeholder="请选择"
            @selectItem="selectItem($event, 'cargo', 'cargoId')"
          ></RemoteSelect>
        </el-form-item>
        <el-form-item label="装货港" prop="loadPortId">
          <RemoteSelect
            class="w300"
            api="getCol"
            v-model="ruleForm.loadPort"
            placeholder="选择装货港"
            @selectItem="selectItem($event, 'loadPort', 'loadPortId')"
          ></RemoteSelect>
        </el-form-item>
        <el-form-item label="卸货港" prop="dischargePortId">
          <RemoteSelect
            class="w300"
            api="getCol"
            v-model="ruleForm.dischargePort"
            placeholder="选择卸货港货港"
            @selectItem="selectItem($event, 'dischargePort', 'dischargePortId')"
          ></RemoteSelect>
        </el-form-item>
        <el-form-item label="发货吨位" prop="tons">
          <el-input-number
            class="w300 mr10"
            v-model="ruleForm.tons"
            :min="0"
            :precision="2"
            :controls="false"
          />
          吨
        </el-form-item>
        <el-form-item label="投标截止时间" prop="bidDeadlineDatetime">
          <el-date-picker
            class="w300"
            v-model="ruleForm.bidDeadlineDatetime"
            type="datetime"
            placeholder="请选择"
            format="YYYY/MM/DD hh:mm"
            value-format="YYYY-MM-DD h:m"
          />
        </el-form-item>
        <el-form-item label="运力要求" prop="capacityRequirements">
          <el-input
            type="textarea"
            :rows="5"
            v-model="ruleForm.capacityRequirements"
          ></el-input>
        </el-form-item>
        <el-form-item label="报价要求" prop="quotationRequest">
          <el-input
            type="textarea"
            :rows="8"
            v-model="ruleForm.quotationRequest"
          ></el-input>
        </el-form-item>
        <el-form-item label="参与竞标代理公司" prop="whiteList">
          <el-select
            class="w300 mb10"
            v-model="currentProxyCompanies"
            value-key="value"
            placeholder="请选择参与竞标代理公司"
            multiple
            clearable
          >
            <el-option
              v-for="item in proxyCompanies"
              :key="item.id"
              :label="item.companyName"
              :value="item"
            ></el-option>
          </el-select>
          <el-table :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="操作">
              <template #default="scope">
                <el-button type="danger" @click="remove(scope)" size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <div class="df aic jcfe w100p">
            <el-button class="mr20" type="primary" @click="save()">
              保存
            </el-button>
            <el-button type="primary" @click="submit()">发起招标</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
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 { mapGetters } from "vuex";
import { useRoute } from "vue-router";

const route = useRoute();
function changeInitMethod(e) {
  ruleForm.value.initMethod = e;
}
const ruleFormRef = ref(null);
const ruleForm = ref({
  tenderId: "",
  initMethod: 1,
  historyTenderId: "",
  transType: 1,
  cargoId: "",
  loadPortId: "",
  dischargePortId: "",
  tons: 0,
  bidDeadlineDatetime: "",
  capacityRequirements: "",
  quotationRequest: "",
  proxyCompanyIds: "",
});
const rules = ref({});
function changeTransType(t) {
  ruleForm.value.transType = t;
}

async function getTenderProxyList() {
  let { data } = await api.getTenderProxyList({
    currentPage: 1,
    size: 100,
    term: "",
  });
  console.log(data);
}
const proxyCompanies = ref([]);

async function getTenderProxySelect() {
  let { data } = await api.getTenderProxySelect({});
  if (data.status === 0) {
    proxyCompanies.value = data.result;
  } else {
    proxyCompanies.value = [];
  }
  console.log(data);
}

function selectItem({ value, key }, valueField, keyField) {
  ruleForm.value[valueField] = value;
  ruleForm.value[keyField] = key;
}

function save() {
  console.log(ruleForm.value);
  ElNotification.success({
    title: "保存成功",
  });
}
const currentProxyCompanies = ref([]);
function remove(scope) {
  currentProxyCompanies.value.splice(scope.$index, 1);
}
function submit() {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm("确认发起招标?", "提示", {
        confirmButtonText: "发起",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          ElMessage({
            type: "success",
            message: "发起成功!",
          });
        })
        .catch(() => {});
    }
  });
}

onMounted(() => {
  getTenderProxyList();
  getTenderProxySelect();
});
</script>

<style scoped></style>