ToDo 发起招标

src/main.js

@@ -6,7 +6,7 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import md5 from "md5";
-import "./styles/index.css";
+import "./style/index.css";
 import Uploader from "./components/Uploader.vue";
 import Certs from "./components/Certs.vue";
 // import RemoteSearch from "./components/RemoteSearch.vue";

src/style/color.css

@@ -0,0 +1,76 @@
+.black {
+  color: #000 !important;
+}
+
+.c1 {
+  color: #111 !important;
+}
+
+.c2 {
+  color: #222 !important;
+}
+
+.c3 {
+  color: #333 !important;
+}
+
+.c4 {
+  color: #444 !important;
+}
+
+.c5 {
+  color: #555 !important;
+}
+
+.c6 {
+  color: #666 !important;
+}
+
+.c7 {
+  color: #777 !important;
+}
+
+.c8 {
+  color: #888 !important;
+}
+
+.c9 {
+  color: #999 !important;
+}
+
+.ca {
+  color: #aaa !important;
+}
+
+.cb {
+  color: #bbb !important;
+}
+
+.cc {
+  color: #ccc !important;
+}
+
+.cd {
+  color: #ddd !important;
+}
+
+.ce {
+  color: #eee !important;
+}
+
+.white,.cf {
+  color: #fff !important;
+}
+
+.red {
+  color: red !important;
+}
+
+.primary {
+  padding: 20px !important;
+  font-size: 32px !important;
+  border-radius: 52px !important;
+  color: #fff !important;
+  text-align: center !important;
+  background: linear-gradient(270deg, #0089fd 0%, #43a9ff 100%) !important;
+}

src/style/font-size.css

@@ -0,0 +1,71 @@
+.fs10 {
+  font-size: 10px !important;
+}
+
+.fs12 {
+  font-size: 12px !important;
+}
+
+.fs14 {
+  font-size: 14px !important;
+}
+
+.fs16 {
+  font-size: 16px !important;
+}
+
+.fs18 {
+  font-size: 18px !important;
+}
+
+.fs20 {
+  font-size: 20px !important;
+}
+
+.fs22 {
+  font-size: 22px !important;
+}
+
+.fs24 {
+  font-size: 24px !important;
+}
+
+.fs26 {
+  font-size: 26px !important;
+}
+
+.fs28 {
+  font-size: 28px !important;
+}
+
+.fs30 {
+  font-size: 28px !important;
+}
+
+.fs32 {
+  font-size: 32px !important;
+}
+
+.fs34 {
+  font-size: 34px !important;
+}
+
+.fs36 {
+  font-size: 36px !important;
+}
+
+.fs38 {
+  font-size: 38px !important;
+}
+
+.fs40 {
+  font-size: 40px !important;
+}
+
+.fs48 {
+  font-size: 48px !important;
+}
+
+.fs50 {
+  font-size: 50px !important;
+}

src/style/height.css

@@ -0,0 +1,71 @@
+.h10 {
+  height: 10px !important;
+}
+
+.h12 {
+  height: 12px !important;
+}
+
+.h14 {
+  height: 14px !important;
+}
+
+.h16 {
+  height: 16px !important;
+}
+
+.h18 {
+  height: 18px !important;
+}
+
+.h20 {
+  height: 20px !important;
+}
+
+.h22 {
+  height: 22px !important;
+}
+
+.h24 {
+  height: 24px !important;
+}
+
+.h26 {
+  height: 26px !important;
+}
+
+.h28 {
+  height: 28px !important;
+}
+
+.h30 {
+  height: 28px !important;
+}
+
+.h32 {
+  height: 32px !important;
+}
+
+.h34 {
+  height: 34px !important;
+}
+
+.h36 {
+  height: 36px !important;
+}
+
+.h38 {
+  height: 38px !important;
+}
+
+.h40 {
+  height: 40px !important;
+}
+
+.h48 {
+  height: 48px !important;
+}
+
+.h50 {
+  height: 50px !important;
+}

src/style/index.css

@@ -0,0 +1,172 @@
+@import "./margin.css";
+@import "./padding.css";
+@import "./font-size.css";
+@import "./color.css";
+@import "./width.css";
+@import "./height.css";
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "mjn2", "mjn3", Arial;
+}
+
+.tac {
+  text-align: center;
+}
+
+.tal {
+  text-align: left;
+}
+
+.tar {
+  text-align: right;
+}
+
+.df {
+  display: flex;
+}
+
+.jcsb {
+  justify-content: space-between;
+}
+
+.jcc {
+  justify-content: center !important;
+}
+
+.jcfe {
+  justify-content: flex-end;
+}
+
+.jcsa {
+  justify-content: space-around;
+}
+
+.jcs {
+  justify-content: start;
+}
+
+.aic {
+  align-items: center;
+}
+
+.aib {
+  align-items: baseline;
+}
+
+.fdc {
+  flex-direction: column;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.fww {
+  flex-wrap: wrap;
+}
+
+.fs1 {
+  flex-shrink: 1;
+}
+
+.fg1 {
+  flex-grow: 1;
+}
+
+.wsn {
+  white-space: nowrap;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 6px;
+}
+
+.t32 {
+  border-left: 5px solid #409eff;
+  padding-left: 10px;
+  font-size: 32px;
+  height: 32px;
+  line-height: 32px;
+}
+
+.t28 {
+  border-left: 5px solid #409eff;
+  padding-left: 10px;
+  font-size: 28px;
+  height: 28px;
+  line-height: 28px;
+}
+
+.t24 {
+  border-left: 5px solid #409eff;
+  padding-left: 10px;
+  font-size: 24px;
+  height: 24px;
+  line-height: 24px;
+}
+
+.t22 {
+  border-left: 5px solid #409eff;
+  padding-left: 10px;
+  font-size: 22px;
+  height: 22px;
+  line-height: 22px;
+}
+
+.t20 {
+  border-left: 5px solid #409eff;
+  padding-left: 10px;
+  font-size: 20px;
+  height: 20px;
+  line-height: 20px;
+}
+
+.t18 {
+  border-left: 5px solid #409eff;
+  padding-left: 10px;
+  font-size: 18px;
+  height: 18px;
+  line-height: 18px;
+}
+
+.t16 {
+  border-left: 5px solid #409eff;
+  padding-left: 10px;
+  font-size: 16px;
+  height: 16px;
+  line-height: 16px;
+}
+
+.t14 {
+  border-left: 5px solid #409eff;
+  padding-left: 10px;
+  font-size: 14px;
+  height: 14px;
+  line-height: 14px;
+}
+
+.t12 {
+  border-left: 5px solid #409eff;
+  padding-left: 10px;
+  font-size: 12px;
+  height: 12px;
+  line-height: 12px;
+}
+
+.tips {
+  margin: 6px;
+  font-size: 13px;
+  color: #555;
+}
+
+.card {
+  border: 1px solid rgb(228, 231, 237);
+  padding: 20px;
+  background: #fff;
+  border-radius: 4px;
+}

src/style/margin.css

@@ -0,0 +1,166 @@
+.m10 {
+  margin: 10px !important;
+}
+
+.m20 {
+  margin: 20px !important;
+}
+
+.m30 {
+  margin: 30px !important;
+}
+
+.m40 {
+  margin: 40px !important;
+}
+
+.m50 {
+  margin: 50px !important;
+}
+
+.m10a {
+  margin: 10px auto !important;
+}
+
+.m20a {
+  margin: 20px auto !important;
+}
+
+.m30a {
+  margin: 30px auto !important;
+}
+
+.m40a {
+  margin: 40px auto !important;
+}
+
+.m50a {
+  margin: 50px auto !important;
+}
+
+.mt10 {
+  margin-top: 10px !important;
+}
+
+.mt20 {
+  margin-top: 20px !important;
+}
+
+.mt30 {
+  margin-top: 30px !important;
+}
+
+.mt40 {
+  margin-top: 40px !important;
+}
+
+.mt50 {
+  margin-top: 50px !important;
+}
+
+.mt60 {
+  margin-top: 60px !important;
+}
+
+.mt80 {
+  margin-top: 80px !important;
+}
+
+.mt100 {
+  margin-top: 100px !important;
+}
+
+.mr10 {
+  margin-right: 10px !important;
+}
+
+.mr20 {
+  margin-right: 20px !important;
+}
+
+.mr30 {
+  margin-right: 30px !important;
+}
+
+.mr40 {
+  margin-right: 40px !important;
+}
+
+.mr50 {
+  margin-right: 50px !important;
+}
+
+.mr60 {
+  margin-right: 60px !important;
+}
+.mr70 {
+  margin-right: 70px !important;
+}
+.mr80 {
+  margin-right: 80px !important;
+}
+.mr90 {
+  margin-right: 90px !important;
+}
+.mr100 {
+  margin-right: 100px !important;
+}
+
+.mb10 {
+  margin-bottom: 10px !important;
+}
+
+.mb20 {
+  margin-bottom: 20px !important;
+}
+
+.mb30 {
+  margin-bottom: 30px !important;
+}
+
+.mb40 {
+  margin-bottom: 40px !important;
+}
+
+.mb50 {
+  margin-bottom: 50px !important;
+}
+
+.ml10 {
+  margin-left: 10px !important;
+}
+
+.ml20 {
+  margin-left: 20px !important;
+}
+
+.ml30 {
+  margin-left: 30px !important;
+}
+
+.ml40 {
+  margin-left: 40px !important;
+}
+
+.ml50 {
+  margin-left: 50px !important;
+}
+
+.ml60 {
+  margin-left: 60px !important;
+}
+.mt15 {
+  margin-top: 15px !important;
+}
+
+.mr15 {
+  margin-right: 15px !important;
+}
+
+.mb15 {
+  margin-bottom: 15px !important;
+}
+
+.ml15 {
+  margin-left: 15px !important;
+}

src/style/padding.css

@@ -0,0 +1,172 @@
+.p10 {
+  padding: 10px !important;
+}
+
+.p20 {
+  padding: 20px !important;
+}
+
+.p30 {
+  padding: 30px !important;
+}
+
+.p40 {
+  padding: 40px !important;
+}
+
+.p50 {
+  padding: 50px !important;
+}
+
+.pt10 {
+  padding-top: 10px !important;
+}
+
+.pr10 {
+  padding-right: 10px !important;
+}
+
+.pb10 {
+  padding-bottom: 10px !important;
+}
+
+.pl10 {
+  padding-left: 10px !important;
+}
+
+.pt20 {
+  padding-top: 20px !important;
+}
+
+.pr20 {
+  padding-right: 20px !important;
+}
+
+.pb20 {
+  padding-bottom: 20px !important;
+}
+
+.pl20 {
+  padding-left: 20px !important;
+}
+
+.pt30 {
+  padding-top: 30px !important;
+}
+
+.pr30 {
+  padding-right: 30px !important;
+}
+
+.pb30 {
+  padding-bottom: 30px !important;
+}
+
+.pl30 {
+  padding-left: 30px !important;
+}
+
+.pt40 {
+  padding-top: 40px !important;
+}
+
+.pr40 {
+  padding-right: 40px !important;
+}
+
+.pb40 {
+  padding-bottom: 40px !important;
+}
+
+.pl40 {
+  padding-left: 40px !important;
+}
+
+.pt50 {
+  padding-top: 50px !important;
+}
+
+.pr50 {
+  padding-right: 50px !important;
+}
+
+.pb50 {
+  padding-bottom: 50px !important;
+}
+
+.pl50 {
+  padding-left: 50px !important;
+}
+
+.pt10p {
+  padding-top: 10%;
+}
+.pr10p {
+  padding-right: 10%;
+}
+
+.pb10p {
+  padding-bottom: 10%;
+}
+
+.pl10p {
+  padding-left: 10%;
+}
+
+.pt20p {
+  padding-top: 20%;
+}
+
+.pr20p {
+  padding-right: 20%;
+}
+
+.pb20p {
+  padding-bottom: 20%;
+}
+
+.pl20p {
+  padding-left: 20%;
+}
+
+.pt30p {
+  padding-top: 30%;
+}
+.pr30p {
+  padding-right: 30%;
+}
+.pb30p {
+  padding-bottom: 30%;
+}
+
+.pl30p {
+  padding-left: 30%;
+}
+
+.pt40p {
+  padding-top: 40%;
+}
+.pr40p {
+  padding-right: 40%;
+}
+.pb40p {
+  padding-bottom: 40%;
+}
+
+.pl40p {
+  padding-left: 40%;
+}
+
+.pt50p {
+  padding-top: 50%;
+}
+.pr50p {
+  padding-right: 50%;
+}
+.pb50p {
+  padding-bottom: 50%;
+}
+
+.pl50p {
+  padding-left: 50%;
+}

src/style/width.css

@@ -0,0 +1,117 @@
+.w10 {
+  width: 10px !important;
+}
+
+.w20 {
+  width: 20px !important;
+}
+
+.w30 {
+  width: 30px !important;
+}
+
+.w40 {
+  width: 40px !important;
+}
+
+.w50 {
+  width: 50px !important;
+}
+
+.w60 {
+  width: 60px !important;
+}
+
+.w70 {
+  width: 70px !important;
+}
+
+.w80 {
+  width: 80px !important;
+}
+
+.w100 {
+  width: 100px !important;
+}
+
+.w120 {
+  width: 120px !important;
+}
+
+.w140 {
+  width: 140px !important;
+}
+
+.w160 {
+  width: 160px !important;
+}
+
+.w180 {
+  width: 180px !important;
+}
+
+.w200 {
+  width: 200px !important;
+}
+
+.w220 {
+  width: 220px !important;
+}
+
+.w240 {
+  width: 240px !important;
+}
+
+.w300 {
+  width: 300px !important;
+}
+.w400 {
+  width: 400px !important;
+}
+.w500 {
+  width: 500px !important;
+}
+
+.w10p {
+  width: 10% !important;
+}
+
+.w20p {
+  width: 20% !important;
+}
+
+.w30p {
+  width: 30% !important;
+}
+
+.w40p {
+  width: 40% !important;
+}
+
+.w50p {
+  width: 50% !important;
+}
+
+.w60p {
+  width: 60% !important;
+}
+
+.w70p {
+  width: 70% !important;
+}
+
+.w80p {
+  width: 80% !important;
+}
+
+.w90p {
+  width: 90% !important;
+}
+
+.w100p {
+  width: 100% !important;
+}
+
+.wfc {
+  width: fit-content;
+}

src/views/tenderManage/inviteTender.vue

@@ -1,5 +1,166 @@
 <template>
-  <el-card>发起招标</el-card>
+  <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">
+          <el-select
+            class="w300"
+            v-model="ruleForm.cargoId"
+            placeholder="请选择货种"
+          >
+            <el-option label="大豆" value="大豆"></el-option>
+            <el-option label="玉米" value="玉米"></el-option>
+            <el-option label="豆粕" value="豆粕"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="装货港" prop="loadPortId">
+          <el-select
+            class="w300"
+            v-model="ruleForm.loadPort"
+            placeholder="请选择装货港"
+          >
+            <el-option label="武汉" value="武汉"></el-option>
+            <el-option label="张家港" value="张家港"></el-option>
+            <el-option label="南通" value="南通"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="卸货港" prop="dischargePortId">
+          <div class="df aic">
+            <el-select
+              v-model="ruleForm.dischargePort"
+              placeholder="请选择卸货港"
+              class="mr20 w300"
+            >
+              <el-option label="武汉" value="武汉"></el-option>
+              <el-option label="张家港" value="张家港"></el-option>
+              <el-option label="南通" value="南通"></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="发货吨位" prop="tons">
+          <el-input-number
+            class="w300"
+            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="mb10"
+            v-model="currentProxyCompanies"
+            value-key="value"
+            placeholder="请选择参与竞标代理公司"
+            multiple
+            clearable
+          >
+            <el-option
+              v-for="item in proxyCompanies"
+              :key="item.value"
+              :label="item.label"
+              :value="item"
+            ></el-option>
+          </el-select>
+          <el-table :data="currentProxyCompanies" border stripe>
+            <el-table-column label="公司名称" prop="label" />
+            <el-table-column label="联系人" prop="contect" />
+            <el-table-column label="手机号" prop="phone" />
+            <el-table-column label="邮箱" prop="email" />
+            <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>
@@ -12,6 +173,90 @@ 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([
+  {
+    value: "1",
+    label: "公司1",
+    contect: "联系人1",
+    phone: "12345678901",
+  },
+  {
+    value: "2",
+    label: "公司2",
+    contect: "联系人2",
+    phone: "12345678902",
+  },
+  {
+    value: "3",
+    label: "公司3",
+    contect: "联系人3",
+    phone: "12345678903",
+  },
+]);
+
+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();
+});
 </script>
 
 <style scoped></style>

src/views/tenderManage/tenderList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="line-container-p24">
-    <div class="mb10">
+    <div class="mb10 df aic jcsb">
       <el-button-group>
         <el-button
           :type="transType === 1 ? 'primary' : ''"
@@ -15,6 +15,12 @@
           海运
         </el-button>
       </el-button-group>
+      <el-button
+        type="primary"
+        @click="router.push('/tenderManage/inviteTender')"
+      >
+        发起招标
+      </el-button>
     </div>
     <div class="mb20 df aic">
       <el-button-group>