优化

src/components/CarModelDialog.vue

@@ -0,0 +1,114 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="车型信息"
+    width="800px"
+    :close-on-click-modal="false"
+    :modal-append-to-body="false"
+  >
+    <div class="car-model-info">
+      <div class="info-content">
+        <div class="text-info">
+          <h3>{{ carModel.name }}</h3>
+          <p class="description">{{ carModel.description }}</p>
+          <div class="specs">
+            <div class="spec-item" v-for="(spec, key) in carModel.specifications" :key="key">
+              <span class="label">{{ key }}:</span>
+              <span class="value">{{ spec }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="image-info">
+          <img :src="carModel.image" :alt="carModel.name" class="car-image" />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closeDialog">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+  modelValue: Boolean,
+  carModel: {
+    type: Object,
+    required: true
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+});
+
+const closeDialog = () => {
+  dialogVisible.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+.car-model-info {
+  padding: 20px;
+  
+  .info-content {
+    display: flex;
+    gap: 30px;
+    
+    .text-info {
+      flex: 1;
+      
+      h3 {
+        margin: 0 0 15px 0;
+        font-size: 20px;
+        color: #333;
+      }
+      
+      .description {
+        color: #666;
+        line-height: 1.6;
+        margin-bottom: 20px;
+      }
+      
+      .specs {
+        .spec-item {
+          margin-bottom: 10px;
+          
+          .label {
+            font-weight: bold;
+            margin-right: 10px;
+            color: #333;
+          }
+          
+          .value {
+            color: #666;
+          }
+        }
+      }
+    }
+    
+    .image-info {
+      width: 400px;
+      
+      .car-image {
+        width: 100%;
+        height: auto;
+        border-radius: 8px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+}
+
+.dialog-footer {
+  text-align: right;
+  padding-top: 20px;
+}
+</style> 

src/data/stepMockData.js

@@ -20,19 +20,77 @@ export const customerOptions = {
 
 export const carTypeOptions = [
   {
-    label: "最近常选",
+    label: "最常选择",
     options: [
-      { label: "CR400AF", value: "CR400AF" },
+      {
-    ],
+        value: "CR400AF",
+        label: "CR400AF",
+        description: "中国标准动车组，最高运营速度350km/h",
+        specifications: {
+          "最高运营速度": "350km/h",
+          "编组方式": "8辆编组",
+          "定员": "556人",
+          "轴重": "≤17t"
+        },
+        image: "/images/cars/CR400AF.jpg"
+      }
+    ]
   },
   {
-    label: "全部车型",
+    label: "高速动车组",
     options: [
-      { label: "CR400AF", value: "CR400AF" },
+      {
-      { label: "JR800AF", value: "JR800AF" },
+        value: "CR400AF",
-      { label: "其他", value: "其他" },
+        label: "CR400AF",
-    ],
+        description: "中国标准动车组，最高运营速度350km/h",
+        specifications: {
+          "最高运营速度": "350km/h",
+          "编组方式": "8辆编组",
+          "定员": "556人",
+          "轴重": "≤17t"
+        },
+        image: "/images/cars/CR400AF.jpg"
+      },
+      {
+        value: "CR400BF",
+        label: "CR400BF",
+        description: "中国标准动车组，最高运营速度350km/h",
+        specifications: {
+          "最高运营速度": "350km/h",
+          "编组方式": "8辆编组",
+          "定员": "556人",
+          "轴重": "≤17t"
+        },
+        image: "/images/cars/CR400BF.jpg"
+      }
+    ]
   },
+  {
+    label: "城际动车组",
+    options: [
+      {
+        value: "CRH3A",
+        label: "CRH3A",
+        description: "城际动车组，最高运营速度250km/h",
+        specifications: {
+          "最高运营速度": "250km/h",
+          "编组方式": "8辆编组",
+          "定员": "613人",
+          "轴重": "≤16t"
+        },
+        image: "/images/cars/CRH3A.jpg"
+      }
+    ]
+  },
+  {
+    label: "其他",
+    options: [
+      {
+        value: "其他",
+        label: "其他"
+      }
+    ]
+  }
 ];
 
 export const treeData = [

src/views/order/intention/Step2.vue

@@ -2,27 +2,20 @@
   <div class="step2-container">
     <div class="main-row">
       <div class="step-indicator">
-        <div
+        <div :class="['circle', currentStep === 1 ? 'active' : '']">1</div>
-          :class="['circle', selectedCarTypeProxy === '其他' ? 'active' : '']"
-        >
-          1
-        </div>
         <div class="line"></div>
-        <div
+        <div :class="['circle', currentStep === 2 ? 'active' : '']">2</div>
-          :class="['circle', selectedCarTypeProxy !== '其他' ? 'active' : '']"
-        >
-          2
-        </div>
       </div>
       <div class="right-content">
-        <div v-if="selectedCarTypeProxy === '其他'">
+        <div v-if="currentStep === 1">
           <div class="step-title">第一步：选择车型</div>
           <el-form label-width="120px" class="model-form">
-            <el-form-item label="可参考车型列表" required>
+            <el-form-item label="车型列表" required>
               <el-select
                 v-model="selectedCarTypeProxy"
                 placeholder="请选择车型"
                 filterable
+                @change="handleCarTypeChange"
               >
                 <el-option-group
                   v-for="group in carTypeOptions"
@@ -38,55 +31,91 @@
                 </el-option-group>
               </el-select>
             </el-form-item>
-            <el-form-item label="计划购买数量">
+            <el-form-item label="计划购买数量" required>
-              <el-input v-model="planCount" placeholder="请输入计划购买数量" />
+              <el-input-number v-model="planCount" :min="1" :max="999" />
             </el-form-item>
-            <el-form-item label="车型输入">
+            <el-form-item label="计划交付时间" required>
-              <el-input v-model="modelInput" placeholder="请输入车型" />
+              <el-date-picker
-            </el-form-item>
+                v-model="deliveryTime"
-            <el-form-item label="车型描述">
+                type="date"
-              <el-input
+                placeholder="选择日期"
-                type="textarea"
+                format="YYYY-MM-DD"
-                :rows="5"
+                value-format="YYYY-MM-DD"
-                v-model="modelDesc"
-                placeholder="请输入车型描述"
               />
             </el-form-item>
+            <el-form-item label="计划交付方式" required>
+              <el-radio-group v-model="deliveryMethod">
+                <el-radio label="self">自行提货</el-radio>
+                <el-radio label="logistics">物流配送</el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <!-- 其他车型的额外表单 -->
+            <template v-if="selectedCarTypeProxy === '其他'">
+              <el-form-item label="可参考车型列表">
+                <el-select
+                  v-model="referenceCarType"
+                  placeholder="请选择参考车型"
+                  filterable
+                  @change="handleReferenceCarTypeChange"
+                >
+                  <el-option-group
+                    v-for="group in referenceCarTypeOptions"
+                    :key="group.label"
+                    :label="group.label"
+                  >
+                    <el-option
+                      v-for="option in group.options"
+                      :key="option.value"
+                      :label="option.label"
+                      :value="option.value"
+                    />
+                  </el-option-group>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="车型输入">
+                <el-input v-model="modelInput" placeholder="请输入车型" />
+              </el-form-item>
+              <el-form-item label="车型描述">
+                <el-input
+                  type="textarea"
+                  :rows="5"
+                  v-model="modelDesc"
+                  placeholder="请输入车型描述"
+                />
+              </el-form-item>
+            </template>
           </el-form>
         </div>
         <div v-else>
           <div class="step">
             <div class="step-left">
               <div class="step-title">
-                第一步：选择车型
+                第一步：车型{{
-                <el-form label-width="120px" class="model-form">
+                  selectedCarTypeProxy === "其他"
-                  <el-form-item label="可参考车型列表" required>
+                    ? "其他"
-                    <el-select
+                    : selectedCarTypeProxy
-                      v-model="selectedCarTypeProxy"
+                }}
-                      placeholder="请选择车型"
+                <div
-                      filterable
+                  v-if="selectedCarTypeProxy === '其他'"
-                    >
+                  class="reference-model"
-                      <el-option-group
+                >
-                        v-for="group in carTypeOptions"
+                  参考车型：{{ referenceCarType || "未选择" }}
-                        :key="group.label"
+                </div>
-                        :label="group.label"
+              </div>
-                      >
+              <div
-                        <el-option
+                class="step-title"
-                          v-for="option in group.options"
+                :style="{
-                          :key="option.value"
+                  marginTop:
-                          :label="option.label"
+                    selectedCarTypeProxy === '其他' ? '165px' : '192px',
-                          :value="option.value"
+                }"
-                        />
+              >
-                      </el-option-group>
+                第二步：选择轮对商品
-                    </el-select>
-                  </el-form-item>
-                </el-form>
               </div>
-              <div class="step-title">第二步：选择轮对商品</div>
             </div>
             <div class="image-box right-align">
               <img
-                src="../../../assets/images/3D.png"
+                src="/images/3D.png"
                 alt="3D结构图"
                 class="main-img"
               />
@@ -109,26 +138,43 @@
               class="part-table"
               style="width: 600px; margin-left: 24px"
             >
-              <el-table-column prop="name" label="部件名称" />
+              <el-table-column prop="name" label="部件名称">
-              <el-table-column prop="spec" label="规格" />
+                <template #default="scope">
-              <el-table-column prop="desc" label="描述" />
+                  <el-input v-model="scope.row.name" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="spec" label="规格">
+                <template #default="scope">
+                  <el-input v-model="scope.row.spec" />
+                </template>
+              </el-table-column>
+              <el-table-column prop="desc" label="描述">
+                <template #default="scope">
+                  <el-input v-model="scope.row.desc" />
+                </template>
+              </el-table-column>
             </el-table>
           </div>
         </div>
         <div class="btn-row">
-          <el-button @click="$emit('prev-step')">上一步</el-button>
+          <el-button @click="handlePrevStep">上一步</el-button>
-          <el-button type="primary" @click="$emit('next-step')"
+          <el-button type="primary" @click="handleNextStep">下一步</el-button>
-            >下一步</el-button
-          >
         </div>
       </div>
     </div>
+
+    <!-- 车型信息弹窗 -->
+    <car-model-dialog
+      v-model="carModelDialogVisible"
+      :car-model="selectedCarModel"
+    />
   </div>
 </template>
 
 <script setup>
 import { ref, computed, watch } from "vue";
-import { carTypeOptions, treeData, partInfoMap } from '@/data/stepMockData';
+import { carTypeOptions, treeData, partInfoMap } from "@/data/stepMockData";
+import CarModelDialog from "@/components/CarModelDialog.vue";
 
 const props = defineProps({
   form: Object,
@@ -137,6 +183,21 @@ const props = defineProps({
 
 const emit = defineEmits(["update:form", "prev-step", "next-step"]);
 
+const currentStep = ref(1);
+const carModelDialogVisible = ref(false);
+const selectedCarModel = ref(null);
+const referenceCarType = ref("");
+const deliveryTime = ref("");
+const deliveryMethod = ref("");
+
+// 计算属性：参考车型选项（排除"其他"选项）
+const referenceCarTypeOptions = computed(() => {
+  return carTypeOptions.map((group) => ({
+    ...group,
+    options: group.options.filter((option) => option.value !== "其他"),
+  }));
+});
+
 // 彻底双向绑定
 const selectedCarTypeProxy = computed({
   get() {
@@ -217,11 +278,63 @@ const treeProps = { children: "children", label: "label" };
 
 function handleTreeSelect(node) {
   if (node && node.id && partInfoMap[node.id]) {
-    selectedPartInfo.value = partInfoMap[node.id];
+    selectedPartInfo.value = { ...partInfoMap[node.id] };
   } else {
     selectedPartInfo.value = null;
   }
 }
+
+function handleCarTypeChange(value) {
+  // 只有非"其他"选项才显示车型信息弹窗
+  if (value !== "其他") {
+    const selectedOption = carTypeOptions
+      .flatMap((group) => group.options)
+      .find((option) => option.value === value);
+
+    if (selectedOption) {
+      selectedCarModel.value = {
+        name: selectedOption.label,
+        description: selectedOption.description || "",
+        specifications: selectedOption.specifications || {},
+        image: selectedOption.image || "",
+      };
+      carModelDialogVisible.value = true;
+    }
+  }
+}
+
+function handleReferenceCarTypeChange(value) {
+  // 显示参考车型信息弹窗
+  const selectedOption = referenceCarTypeOptions.value
+    .flatMap((group) => group.options)
+    .find((option) => option.value === value);
+
+  if (selectedOption) {
+    selectedCarModel.value = {
+      name: selectedOption.label,
+      description: selectedOption.description || "",
+      specifications: selectedOption.specifications || {},
+      image: selectedOption.image || "",
+    };
+    carModelDialogVisible.value = true;
+  }
+}
+
+function handlePrevStep() {
+  if (currentStep.value === 2) {
+    currentStep.value = 1;
+  } else {
+    emit("prev-step");
+  }
+}
+
+function handleNextStep() {
+  if (currentStep.value === 1) {
+    currentStep.value = 2;
+  } else {
+    emit("next-step");
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -268,6 +381,7 @@ function handleTreeSelect(node) {
 .step {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 20px;
 }
 .step-left {
   flex: 1;
@@ -276,9 +390,32 @@ function handleTreeSelect(node) {
 .step-title {
   font-size: 18px;
   margin: 15px 0;
-}
+  color: #333;
-.step-title:last-child {
+  font-weight: 500;
-  margin-top: 145px;
+
+  &.active {
+    color: #2156f3;
+  }
+
+  .reference-model {
+    font-size: 14px;
+    color: #666;
+    margin-top: 8px;
+    padding-left: 20px;
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 12px;
+      height: 12px;
+      background: #2156f3;
+      border-radius: 50%;
+    }
+  }
 }
 .image-box.right-align {
   display: flex;
@@ -289,6 +426,7 @@ function handleTreeSelect(node) {
 .table-title {
   font-weight: bold;
   margin: 16px 0 8px 0;
+  color: #333;
 }
 .tree-table-row {
   display: flex;

src/views/order/intention/Step3.vue

@@ -75,7 +75,7 @@ import {
   defaultDisputeTerms,
 } from "@/data/stepMockData";
 
-const activeTab = ref('pay');
+const activeTab = ref("pay");
 
 const form = reactive({
   pay: defaultPaymentTerms,
@@ -91,7 +91,7 @@ const form = reactive({
   background: #fff;
   padding: 24px;
   border-radius: 8px;
-  height: calc(100vh - 200px);
+  height: calc(100vh - 320px);
   display: flex;
   flex-direction: column;
 }
@@ -103,12 +103,12 @@ const form = reactive({
 
 .left-tabs {
   height: 100%;
-  
+
   :deep(.el-tabs__content) {
     height: 100%;
     padding: 20px;
   }
-  
+
   :deep(.el-tabs__nav-wrap) {
     padding-right: 20px;
   }
@@ -117,10 +117,10 @@ const form = reactive({
 .editor-container {
   height: 100%;
   padding: 0 20px;
-  
+
   :deep(.el-textarea__inner) {
     height: 100%;
-    min-height: 400px;
+    min-height: 300px;
   }
 }
 
@@ -128,8 +128,8 @@ const form = reactive({
   display: flex;
   justify-content: flex-end;
   gap: 16px;
-  margin-top: 20px;
+  margin-top: 16px;
-  padding-top: 20px;
+  padding-top: 16px;
   border-top: 1px solid #eee;
 }
 </style> 

src/views/order/intention/index.vue

@@ -56,18 +56,18 @@
           icon="Plus"
           @click="handleAdd"
           v-hasPermi="['order:intention:add']"
-          >新增</el-button
+          >新增订单/意向单</el-button
         >
       </el-col>
       <el-col :span="1.5">
         <el-button
           type="success"
           plain
-          icon="Edit"
+          icon="View"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['order:intention:edit']"
-          >修改</el-button
+          >查看</el-button
         >
       </el-col>
       <el-col :span="1.5">
@@ -78,7 +78,7 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['order:intention:remove']"
-          >删除</el-button
+          >取消</el-button
         >
       </el-col>
       <right-toolbar
@@ -105,10 +105,22 @@
                 :key="index"
                 style="margin-bottom: 10px"
               >
-                <span style="font-weight: bold; margin-right: 5px"
+                <span
-                  >{{ index + 1 }}、{{ item.date }}:</span
+                  :style="{
+                    fontWeight: 'bold',
+                    marginRight: '5px',
+                    color: isPastDate(item.date) ? '#409eff' : 'inherit',
+                  }"
                 >
-                {{ item.description }}
+                  {{ index + 1 }}、{{ item.date }}:
+                </span>
+                <span
+                  :style="{
+                    color: isPastDate(item.date) ? '#409eff' : 'inherit',
+                  }"
+                >
+                  {{ item.description }}
+                </span>
               </li>
             </ul>
           </div>
@@ -142,17 +154,17 @@
         <template #default="scope">
           <el-button
             type="text"
-            icon="Edit"
+            icon="View"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['order:intention:edit']"
-            >修改</el-button
+            >查看</el-button
           >
           <el-button
             type="text"
             icon="Delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['order:intention:remove']"
-            >删除</el-button
+            >取消</el-button
           >
         </template>
       </el-table-column>
@@ -166,7 +178,7 @@
       @pagination="getList"
     />
 
-    <!-- 添加或修改意向订单对话框 -->
+    <!-- 添加或查看意向订单对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
       <el-form
         ref="intentionRef"
@@ -319,14 +331,14 @@ function handleAdd() {
   router.push("/order/create");
 }
 
-/** 修改按钮操作 */
+/** 查看按钮操作 */
 function handleUpdate(row) {
   const id = row.id || ids.value[0];
   // const intention = mockData.value.find(item => item.id === id)
   // if (intention) {
   //   form.value = { ...intention }
   //   open.value = true
-  //   title.value = "修改意向订单"
+  //   title.value = "查看意向订单"
   // }
   router.push({ path: "/order/create", query: { id: id } });
 }
@@ -340,7 +352,7 @@ function handleUpdate(row) {
 //         const index = mockData.value.findIndex(item => item.id === form.value.id);
 //         if (index !== -1) {
 //           mockData.value[index] = { ...form.value };
-//           ElMessage.success("修改成功");
+//           ElMessage.success("查看成功");
 //         }
 //       } else {
 //         // Add operation
@@ -355,11 +367,11 @@ function handleUpdate(row) {
 //   });
 // }
 
-/** 删除按钮操作 */
+/** 取消按钮操作 */
 function handleDelete(row) {
   const intentionIds = row.id ? [row.id] : ids.value;
   ElMessageBox.confirm(
-    '是否确认删除意向订单编号为"' + intentionIds + '"的数据项?',
+    '是否确认取消意向订单编号为"' + intentionIds + '"的数据项?',
     "警告",
     {
       confirmButtonText: "确定",
@@ -368,14 +380,14 @@ function handleDelete(row) {
     }
   )
     .then(() => {
-      // 模拟删除
+      // 模拟取消
       mockData.value = mockData.value.filter(
         (item) => !intentionIds.includes(item.id)
       );
       ids.value = []; // Clear selection after deletion
       single.value = true;
       multiple.value = true;
-      ElMessage.success("删除成功");
+      ElMessage.success("取消成功");
       getList();
     })
     .catch(() => {}); // Catch cancel to avoid console error
@@ -394,6 +406,15 @@ function handleDelete(row) {
 //   }
 // }
 
+// Add isPastDate function
+function isPastDate(dateStr) {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const itemDate = new Date(dateStr);
+  itemDate.setHours(0, 0, 0, 0);
+  return itemDate <= today;
+}
+
 onMounted(() => {
   getList();
 });