ToDo 发起;暂存,表单验证,模板,历史

src/views/tenderManage/inviteTender.vue

@@ -44,57 +44,51 @@
             >
               海运
             </el-button>
-            <el-button
+            <!-- <el-button
               :type="ruleForm.transType === 3 ? 'primary' : ''"
               @click="changeTransType(3)"
             >
               汽运
-            </el-button>
+            </el-button> -->
           </el-button-group>
         </el-form-item>
         <el-form-item label="货种" prop="cargoId">
-          <el-select
+          <RemoteSelect
             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>
+            api="getCargoSelect"
+            v-model="ruleForm.cargo"
+            :params="{}"
+            placeholder="请选择"
+            @selectItem="selectItem($event, 'cargo', 'cargoId')"
+          ></RemoteSelect>
         </el-form-item>
         <el-form-item label="装货港" prop="loadPortId">
-          <el-select
+          <RemoteSelect
             class="w300"
+            api="getCol"
             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>
+            placeholder="选择装货港"
+            @selectItem="selectItem($event, 'loadPort', 'loadPortId')"
+          ></RemoteSelect>
         </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>
+          <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"
+            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
@@ -122,7 +116,7 @@
         </el-form-item>
         <el-form-item label="参与竞标代理公司" prop="whiteList">
           <el-select
-            class="mb10"
+            class="w300 mb10"
             v-model="currentProxyCompanies"
             value-key="value"
             placeholder="请选择参与竞标代理公司"
@@ -131,16 +125,16 @@
           >
             <el-option
               v-for="item in proxyCompanies"
-              :key="item.value"
-              :label="item.label"
+              :key="item.id"
+              :label="item.companyName"
               :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="公司名称" 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">
@@ -204,26 +198,22 @@ async function getTenderProxyList() {
   });
   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",
-  },
-]);
+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);
@@ -256,6 +246,7 @@ function submit() {
 
 onMounted(() => {
   getTenderProxyList();
+  getTenderProxySelect();
 });
 </script>