新增 招标模板

src/views/tenderManage/tenderTemplate.vue

@@ -1,5 +1,90 @@
 <template>
-  <el-card>招标模板</el-card>
+  <div class="card" v-loading="isLoading">
+    <el-form
+      ref="ruleFormRef"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="100px"
+    >
+      <el-form-item label="运输类型" prop="transType">
+        <el-button-group>
+          <el-button
+            :type="transType === 1 ? 'primary' : ''"
+            @click="changeTransType(1)"
+          >
+            江运
+          </el-button>
+          <el-button
+            :type="transType === 2 ? 'primary' : ''"
+            @click="changeTransType(2)"
+          >
+            海运
+          </el-button>
+          <!-- <el-button
+              :type="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="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>
+    <div class="df aic jcfe">
+      <el-button type="primary" @click="editTenderTemplate()">修改</el-button>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -12,6 +97,82 @@ import { mapGetters } from "vuex";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
+const transType = ref(1);
+const isLoading = ref(false);
+async function getTenderTemplateDetail() {
+  isLoading.value = true;
+  let { data } = await api.getTenderTemplateDetail({
+    transType: transType.value,
+  });
+  isLoading.value = false;
+  if (data.status === 0) {
+    ruleForm.value = data.result;
+  } else {
+    ruleForm.value = {};
+  }
+}
+function changeTransType(t) {
+  transType.value = t;
+  getTenderTemplateDetail();
+}
+
+const ruleFormRef = ref(null);
+const ruleForm = ref({});
+const rules = ref({
+  cargoId: [{ required: true, message: "请选择货种", trigger: "blur" }],
+  loadPortId: [{ required: true, message: "请选择装货港", trigger: "blur" }],
+  dischargePortId: [
+    { required: true, message: "请选择卸货港", trigger: "blur" },
+  ],
+  tons: [
+    { required: true, message: "请输入发货吨位", trigger: "blur" },
+    {
+      pattern: /^[0-9]+(.[0-9]{1,2})?$/,
+      message: "请输入正确的数字",
+      trigger: "blur",
+    },
+  ],
+  capacityRequirements: [
+    { required: true, message: "请输入报价要求", trigger: "blur" },
+  ],
+  quotationRequest: [
+    { required: true, message: "请输入报价要求", trigger: "blur" },
+  ],
+});
+function selectItem({ value, key }, valueField, keyField) {
+  ruleForm.value[valueField] = value;
+  ruleForm.value[keyField] = key;
+}
+async function editTenderTemplate() {
+  ruleFormRef.value.validate(async (valid) => {
+    if (valid) {
+      isLoading.value = true;
+      let { data } = await api.editTenderTemplate({
+        ...ruleForm.value,
+        transType: transType.value,
+      });
+      isLoading.value = false;
+      if (data.status === 0) {
+        ElNotification({
+          title: "成功",
+          message: data.msg,
+          type: "success",
+        });
+        getTenderTemplateDetail();
+      } else {
+        console.log(data);
+        ElNotification({
+          title: "失败",
+          message: data.msg,
+          type: "error",
+        });
+      }
+    }
+  });
+}
+onMounted(() => {
+  getTenderTemplateDetail();
+});
 </script>
 
 <style scoped></style>