英泽防锈 1.车辆管理页面开发联调

gaoluyang

2026-05-29 4762afb6cb043a3e539ed7ec8da5bde997bfaf65

 src/views/inventoryManagement/vehicleManagement/index.vue

@@ -136,6 +136,14 @@
          width="120"
          show-overflow-tooltip
        />
        <el-table-column label="当前公里数" prop="currentMileage" width="120" align="center" />
        <el-table-column label="使用状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="usageStatusTagType(scope.row.usageStatus)">
              {{ usageStatusLabel(scope.row.usageStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="statusTagType(scope.row.status)">
@@ -303,6 +311,30 @@
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前公里数：" prop="currentMileage">
              <el-input-number
                v-model="form.currentMileage"
                :min="0"
                :precision="1"
                :step="0.1"
                style="width: 100%"
                placeholder="请输入当前公里数"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="使用状态：" prop="usageStatus">
              <el-select v-model="form.usageStatus" placeholder="请选择使用状态" style="width: 100%">
                <el-option label="闲置" value="idle" />
                <el-option label="使用中" value="in_use" />
                <el-option label="维修中" value="repair" />
                <el-option label="保养中" value="maintenance" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
@@ -333,6 +365,10 @@
    licenseExpireDate: "2026-03-10",
    status: "在用",
    archived: false,
    currentMileage: 12580.5,
    lastRecordMileage: 12000.0,
    mileagePhoto: "",
    usageStatus: "idle",
  },
  {
    id: 2,
@@ -346,6 +382,10 @@
    licenseExpireDate: "2025-07-28",
    status: "维修",
    archived: false,
    currentMileage: 8920.0,
    lastRecordMileage: 8920.0,
    mileagePhoto: "",
    usageStatus: "repair",
  },
  {
    id: 3,
@@ -359,6 +399,10 @@
    licenseExpireDate: "2024-05-18",
    status: "闲置",
    archived: false,
    currentMileage: 45600.0,
    lastRecordMileage: 45600.0,
    mileagePhoto: "",
    usageStatus: "idle",
  },
  {
    id: 4,
@@ -372,6 +416,10 @@
    licenseExpireDate: "2023-11-08",
    status: "在用",
    archived: true,
    currentMileage: 67890.5,
    lastRecordMileage: 67890.5,
    mileagePhoto: "",
    usageStatus: "archived",
  },
]);

@@ -394,6 +442,7 @@
  { label: "在用", value: "在用" },
  { label: "闲置", value: "闲置" },
  { label: "维修", value: "维修" },
  { label: "使用中", value: "使用中" },
];

// 查询表单
@@ -425,6 +474,10 @@
  licenseExpireDate: "",
  status: "在用",
  archived: false,
  currentMileage: 0,
  lastRecordMileage: 0,
  mileagePhoto: "",
  usageStatus: "idle",
});

const rules = {
@@ -569,8 +622,33 @@
  if (status === "在用") return "success";
  if (status === "闲置") return "info";
  if (status === "维修") return "warning";
  if (status === "使用中") return "primary";
  return "default";
};

// 使用状态标签样式
const usageStatusTagType = (usageStatus) => {
  const typeMap = {
    idle: "info",
    in_use: "primary",
    repair: "warning",
    maintenance: "warning",
    archived: "info",
  };
  return typeMap[usageStatus] || "default";
};

// 使用状态标签文字
const usageStatusLabel = (usageStatus) => {
  const labelMap = {
    idle: "闲置",
    in_use: "使用中",
    repair: "维修中",
    maintenance: "保养中",
    archived: "已归档",
  };
  return labelMap[usageStatus] || usageStatus;
};
</script>

<style scoped lang="scss">