浅念
1427 lines
48 KiB
Vue
1427 lines
48 KiB
Vue
<template>
|
||
<div class="vehicle-page">
|
||
<!-- 搜索工具栏 -->
|
||
<div class="search-toolbar boxshadow">
|
||
<div class="toolbar-left">
|
||
<ElButton type="primary" v-ripple @click="handleAdd">新增车辆</ElButton>
|
||
</div>
|
||
<div class="toolbar-right">
|
||
<el-input
|
||
v-model="searchForm.keyword"
|
||
placeholder="请输入关键字"
|
||
clearable
|
||
style="width: 300px"
|
||
@keyup.enter="getList"
|
||
>
|
||
<template #suffix>
|
||
<el-icon class="clickable" @click="getList"><Search /></el-icon>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据表格 -->
|
||
<div class="table-container boxshadow">
|
||
<ArtTable
|
||
ref="tableRef"
|
||
row-key="id"
|
||
:loading="loading"
|
||
:data="tableData"
|
||
:currentPage="pagination.currentPage"
|
||
:pageSize="pagination.pageSize"
|
||
:total="pagination.total"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
>
|
||
<template #default>
|
||
<el-table-column prop="id" label="编码" min-width="170" show-overflow-tooltip align="center">
|
||
<template #default="scope">
|
||
<div class="ellipsis" :title="scope.row.fingerprint">指纹：{{ scope.row.fingerprint }}</div>
|
||
<div class="ellipsis" :title="scope.row.sku_code">sku_code：{{ scope.row.sku_code }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<ElTableColumn label="车型" prop="model_name" min-width="150" align="center">
|
||
<template #default="scope">
|
||
<span class="primary">{{ scope.row.model_name }}</span>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn label="品牌" prop="brand_name" min-width="100" align="center" />
|
||
<ElTableColumn label="车系" prop="series_name" min-width="120" align="center" />
|
||
<ElTableColumn label="年款" prop="model_year" align="center" />
|
||
<ElTableColumn label="版型" prop="trim" align="center" />
|
||
<ElTableColumn label="配置等级" prop="trim_level" align="center" />
|
||
<ElTableColumn label="排量" prop="engine_disp_l" align="center">
|
||
<template #default="scope">
|
||
{{ scope.row.engine_disp_l ? scope.row.engine_disp_l + 'L' : '-' }}
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn label="功率" prop="engine_power_kw" align="center">
|
||
<template #default="scope">
|
||
{{ scope.row.engine_power_kw ? scope.row.engine_power_kw + 'kW' : '-' }}
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn label="续航" prop="range_km" align="center">
|
||
<template #default="scope">
|
||
{{ scope.row.range_km ? scope.row.range_km + 'km' : '-' }}
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn label="指导价(CNY)" prop="msrp" align="center" min-width="100">
|
||
<template #default="scope">
|
||
{{ scope.row.msrp ? scope.row.msrp : '-' }}
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn label="状态" prop="is_active" align="center">
|
||
<template #default="scope">
|
||
<ElTag :type="scope.row.is_active ? 'success' : 'danger'">
|
||
{{ scope.row.is_active ? '启用' : '禁用' }}
|
||
</ElTag>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn label="操作" fixed="right" width="150" align="center">
|
||
<template #default="scope">
|
||
<ElButton link type="primary" @click="handleEdit(scope.row)">编辑</ElButton>
|
||
<ElButton link type="primary" @click="handleView(scope.row)">查看</ElButton>
|
||
<ElButton link type="danger" @click="handleDelete(scope.row)">删除</ElButton>
|
||
</template>
|
||
</ElTableColumn>
|
||
</template>
|
||
</ArtTable>
|
||
</div>
|
||
|
||
<!-- 新增/编辑弹出层 -->
|
||
<ElDialog
|
||
v-model="dialogVisible"
|
||
:title="dialogTitle"
|
||
width="1200px"
|
||
top="40px"
|
||
:close-on-click-modal="false"
|
||
:close-on-press-escape="false"
|
||
>
|
||
<ElForm
|
||
ref="formRef"
|
||
:model="formData"
|
||
:rules="formRules"
|
||
label-width="120px"
|
||
class="vehicle-form"
|
||
>
|
||
<!-- 基础信息 -->
|
||
<div class="form-section">
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<ElFormItem label="品牌名称" prop="brand_name">
|
||
<ElSelect v-model="formData.brand_name" placeholder="请选择品牌名称">
|
||
<ElOption
|
||
v-for="item in brandOptions"
|
||
:key="item.brand_code || item.code"
|
||
:label="item.brand_name || item.name"
|
||
:value="item.brand_name || item.name"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput v-model="formData.brand_code" placeholder="品牌编码" readonly disabled />
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="车系名称" prop="series_name">
|
||
<ElSelect v-model="formData.series_name" placeholder="请选择车系名称">
|
||
<ElOption
|
||
v-for="s in seriesOptions"
|
||
:key="s.series_code || s.code"
|
||
:label="s.series_name || s.name"
|
||
:value="s.series_name || s.name"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput v-model="formData.series_code" placeholder="车系编码" readonly disabled />
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="排量(L)" prop="engine_disp_l">
|
||
<ElInput v-model="formData.engine_disp_l" placeholder="请输入排量" />
|
||
<el-text class="mx-1" type="warning">如:1.5；纯电为空</el-text>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<ElFormItem label="版型/细分配置" prop="trim">
|
||
<ElSelect
|
||
v-model="formData.trim"
|
||
placeholder="请选择版型/细分配置"
|
||
filterable
|
||
clearable
|
||
>
|
||
<ElOption label="请选择" value="" />
|
||
<ElOption
|
||
v-for="item in trimOptions"
|
||
:key="item.item_label"
|
||
:label="item.item_label"
|
||
:value="item.item_label"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput
|
||
v-model="formData.trim_code"
|
||
placeholder="版型/细分配置编码"
|
||
readonly
|
||
disabled
|
||
/>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="配置等级" prop="trim_level">
|
||
<ElSelect
|
||
v-model="formData.trim_level"
|
||
placeholder="请选择配置等级"
|
||
filterable
|
||
clearable
|
||
>
|
||
<ElOption label="请选择" value="" />
|
||
<ElOption
|
||
v-for="item in trim_levelOptions"
|
||
:key="item.item_label"
|
||
:label="item.item_label"
|
||
:value="item.item_label"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput
|
||
v-model="formData.trim_level_code"
|
||
placeholder="配置等级编码"
|
||
readonly
|
||
disabled
|
||
/>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="版本名称" prop="edition_name">
|
||
<ElSelect
|
||
v-model="formData.edition_name"
|
||
placeholder="请选择版本名称"
|
||
filterable
|
||
clearable
|
||
>
|
||
<ElOption label="请选择" value="" />
|
||
<ElOption
|
||
v-for="item in editionOptions"
|
||
:key="item.item_label"
|
||
:label="item.item_label"
|
||
:value="item.item_label"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput v-model="formData.edition_code" placeholder="版本编码" readonly disabled />
|
||
</ElFormItem>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<ElFormItem label="车型/配置名称" prop="model_name">
|
||
<ElInput v-model="formData.model_name" placeholder="请输入车型名称" />
|
||
<el-text class="mx-1" type="warning">如:伊兰特,海狮07(不填则自动生成)</el-text>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="车型/配置代码" prop="model_code">
|
||
<ElInput v-model="formData.model_code" placeholder="请输入车型代码" />
|
||
<el-text class="mx-1" type="warning">如:工厂/内部编码(不填则自动生成)</el-text>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="挡位数" prop="gears">
|
||
<ElInput v-model="formData.gears" placeholder="请输入挡位数" />
|
||
<el-text class="mx-1" type="warning">如:EV多为1</el-text>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<ElFormItem label="官方指导价" prop="msrp">
|
||
<ElInput v-model="formData.msrp" placeholder="请输入官方指导价" />
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="年款" prop="model_year">
|
||
<ElInput v-model="formData.model_year" placeholder="YYYY" />
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="最大功率(kW)" prop="engine_power_kw">
|
||
<ElInput v-model="formData.engine_power_kw" placeholder="请输入最大功率" />
|
||
</ElFormItem>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<ElFormItem label="电池容量(kWh)" prop="battery_kwh">
|
||
<ElInput v-model="formData.battery_kwh" placeholder="请输入电池容量" />
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="续航里程(km)" prop="range_km">
|
||
<ElInput v-model="formData.range_km" placeholder="请输入续航里程" />
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="门数" prop="doors">
|
||
<ElInput v-model="formData.doors" placeholder="请输入门数" />
|
||
</ElFormItem>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<ElFormItem label="是否涡轮" prop="engine_turbo">
|
||
<ElSelect v-model="formData.engine_turbo" placeholder="请选择">
|
||
<ElOption label="否" :value="0" />
|
||
<ElOption label="是" :value="1" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="整备质量(kg)" prop="weight_kg">
|
||
<ElInput v-model="formData.weight_kg" placeholder="请输入整备质量" />
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="座位数" prop="seats">
|
||
<ElInput v-model="formData.seats" placeholder="请输入座位数" />
|
||
</ElFormItem>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<!-- <ElCol :span="8">
|
||
<ElFormItem label="原产国" prop="origin_country">
|
||
<ElSelect v-model="formData.origin_country" placeholder="请选择原产国" filterable>
|
||
<ElOption label="中国" value="CN" />
|
||
<ElOption label="德国" value="DE" />
|
||
<ElOption label="日本" value="JP" />
|
||
<ElOption label="韩国" value="KR" />
|
||
<ElOption label="美国" value="US" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="币种" prop="currency">
|
||
<ElSelect v-model="formData.currency" placeholder="请选择币种">
|
||
<ElOption label="人民币" value="CNY" />
|
||
<ElOption label="美元" value="USD" />
|
||
<ElOption label="欧元" value="EUR" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
</ElCol> -->
|
||
<ElCol :span="8">
|
||
<ElFormItem label="外观颜色" prop="color_exterior_text">
|
||
<ElSelect
|
||
v-model="formData.color_exterior_text"
|
||
placeholder="请选择外观颜色"
|
||
filterable
|
||
clearable
|
||
>
|
||
<ElOption label="请选择" value="" />
|
||
<ElOption
|
||
v-for="item in wcolorOptions"
|
||
:key="item.color_code"
|
||
:label="item.color_text"
|
||
:value="item.color_text"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput
|
||
v-model="formData.color_exterior_code"
|
||
placeholder="外观颜色编码"
|
||
readonly
|
||
disabled
|
||
/>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="内饰颜色" prop="color_interior_text">
|
||
<ElSelect
|
||
v-model="formData.color_interior_text"
|
||
placeholder="请选择内饰颜色"
|
||
filterable
|
||
clearable
|
||
>
|
||
<ElOption label="请选择" value="" />
|
||
<ElOption
|
||
v-for="item in ncolorOptions"
|
||
:key="item.color_code"
|
||
:label="item.color_text"
|
||
:value="item.color_text"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput
|
||
v-model="formData.color_interior_code"
|
||
placeholder="内饰颜色编码"
|
||
readonly
|
||
disabled
|
||
/>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="车身类型" prop="body_type_code">
|
||
<ElSelect v-model="formData.body_type" placeholder="请选择车身类型" clearable>
|
||
<ElOption label="请选择" value="" />
|
||
<ElOption
|
||
v-for="item in body_typeOptions"
|
||
:key="item.item_label"
|
||
:label="item.item_label"
|
||
:value="item.item_label"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput
|
||
v-model="formData.body_type_code"
|
||
placeholder="车身类型编码"
|
||
readonly
|
||
disabled
|
||
/>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
</ElRow>
|
||
<!-- <el-divider /> -->
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<ElFormItem label="驱动类型" prop="drive_type">
|
||
<ElSelect v-model="formData.drive_type" placeholder="请选择驱动类型" clearable>
|
||
<ElOption label="请选择" value="" />
|
||
<ElOption
|
||
v-for="item in drive_typeOptions"
|
||
:key="item.item_label"
|
||
:label="item.item_label"
|
||
:value="item.item_label"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput
|
||
v-model="formData.drive_type_code"
|
||
placeholder="驱动类型编码"
|
||
readonly
|
||
disabled
|
||
/>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="电驱/电机" prop="motor_layout">
|
||
<ElSelect v-model="formData.motor_layout" placeholder="请选择电驱/电机" clearable>
|
||
<ElOption label="请选择" value="" />
|
||
<ElOption
|
||
v-for="item in motor_layoutOptions"
|
||
:key="item.item_label"
|
||
:label="item.item_label"
|
||
:value="item.item_label"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput
|
||
v-model="formData.motor_layout_code"
|
||
placeholder="电驱/电机编码"
|
||
readonly
|
||
disabled
|
||
/>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="排放标准" prop="emission_std_code">
|
||
<ElSelect
|
||
v-model="formData.emission_std_code"
|
||
placeholder="请选择排放标准"
|
||
clearable
|
||
>
|
||
<ElOption label="请选择" value="" />
|
||
<ElOption
|
||
v-for="item in emission_stdOptions"
|
||
:key="item.item_label"
|
||
:label="item.item_label"
|
||
:value="item.item_label"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput
|
||
v-model="formData.emission_std_code"
|
||
placeholder="排放标准编码"
|
||
readonly
|
||
disabled
|
||
/>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<ElFormItem label="能源类型" prop="fuel_type">
|
||
<ElSelect v-model="formData.fuel_type" placeholder="请选择能源类型" clearable>
|
||
<ElOption label="请选择" value="" />
|
||
<ElOption
|
||
v-for="item in fuel_typeOptions"
|
||
:key="item.item_label"
|
||
:label="item.item_label"
|
||
:value="item.item_label"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput
|
||
v-model="formData.fuel_type_code"
|
||
placeholder="能源类型编码"
|
||
readonly
|
||
disabled
|
||
/>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="变速箱" prop="transmission">
|
||
<ElSelect v-model="formData.transmission" placeholder="请选择变速箱" clearable>
|
||
<ElOption label="请选择" value="" />
|
||
<ElOption
|
||
v-for="item in transmissionOptions"
|
||
:key="item.item_label"
|
||
:label="item.item_label"
|
||
:value="item.item_label"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput
|
||
v-model="formData.transmission_code"
|
||
placeholder="变速箱编码"
|
||
readonly
|
||
disabled
|
||
/>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="续航标准" prop="range_std">
|
||
<ElSelect v-model="formData.range_std" placeholder="请选择续航标准" clearable>
|
||
<ElOption label="请选择" value="" />
|
||
<ElOption
|
||
v-for="item in range_stdOptions"
|
||
:key="item.item_label"
|
||
:label="item.item_label"
|
||
:value="item.item_label"
|
||
/>
|
||
</ElSelect>
|
||
<ElInput
|
||
v-model="formData.range_std_code"
|
||
placeholder="续航标准编码"
|
||
readonly
|
||
disabled
|
||
/>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<ElFormItem label="状态" prop="is_active">
|
||
<ElSelect v-model="formData.is_active" placeholder="请选择状态">
|
||
<ElOption label="启用" :value="1" />
|
||
<ElOption label="禁用" :value="0" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<ElFormItem label="备注" prop="remark">
|
||
<ElInput
|
||
v-model="formData.remark"
|
||
type="textarea"
|
||
:rows="1"
|
||
placeholder="请输入备注信息"
|
||
/>
|
||
</ElFormItem>
|
||
</ElCol>
|
||
</ElRow>
|
||
</div>
|
||
</ElForm>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<ElButton @click="dialogVisible = false">取消</ElButton>
|
||
<ElButton type="primary" @click="handleSubmit" :loading="submitLoading">确定</ElButton>
|
||
</div>
|
||
</template>
|
||
</ElDialog>
|
||
|
||
<!-- 查看详情弹出层 -->
|
||
<ElDialog v-model="viewDialogVisible" title="车辆详情" width="1200px">
|
||
<div class="vehicle-detail">
|
||
<!-- 基础信息 -->
|
||
<div class="detail-section">
|
||
<h4>基础信息</h4>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">品牌名称：</span>
|
||
<span class="value">{{ viewData.brand_name }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">车系名称：</span>
|
||
<span class="value">{{ viewData.series_name }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">车型/配置名称：</span>
|
||
<span class="value">{{ viewData.model_name }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">年款：</span>
|
||
<span class="value">{{ viewData.model_year }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">版型/细分配置：</span>
|
||
<span class="value">{{ viewData.trim }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">配置等级：</span>
|
||
<span class="value">{{ viewData.trim_level }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">版本名称：</span>
|
||
<span class="value">{{ viewData.edition_name }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">排量(L)：</span>
|
||
<span class="value">{{
|
||
viewData.engine_disp_l ? viewData.engine_disp_l + 'L' : '-'
|
||
}}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">是否涡轮：</span>
|
||
<span class="value">{{ viewData.engine_turbo === 1 ? '是' : '否' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">车身类型：</span>
|
||
<span class="value">{{ viewData.body_type || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">驱动类型：</span>
|
||
<span class="value">{{ viewData.drive_type || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">电驱/电机：</span>
|
||
<span class="value">{{ viewData.motor_layout || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">能源类型：</span>
|
||
<span class="value">{{ viewData.fuel_type || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">变速箱：</span>
|
||
<span class="value">{{ viewData.transmission || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">续航标准：</span>
|
||
<span class="value">{{ viewData.range_std || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">排放标准：</span>
|
||
<span class="value">{{ viewData.emission_std || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
</div>
|
||
|
||
<!-- 动力系统 -->
|
||
<div class="detail-section">
|
||
<h4>动力系统</h4>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">最大功率(kW)：</span>
|
||
<span class="value">{{
|
||
viewData.engine_power_kw ? viewData.engine_power_kw + 'kW' : '-'
|
||
}}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">电池容量(kWh)：</span>
|
||
<span class="value">{{
|
||
viewData.battery_kwh ? viewData.battery_kwh + 'kWh' : '-'
|
||
}}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">挡位数：</span>
|
||
<span class="value">{{ viewData.gears || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">续航里程(km)：</span>
|
||
<span class="value">{{ viewData.range_km ? viewData.range_km + 'km' : '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">门数：</span>
|
||
<span class="value">{{ viewData.doors || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">座位数：</span>
|
||
<span class="value">{{ viewData.seats || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
</div>
|
||
|
||
<!-- 车身信息 -->
|
||
<div class="detail-section">
|
||
<h4>车身信息</h4>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">整备质量(kg)：</span>
|
||
<span class="value">{{
|
||
viewData.weight_kg ? viewData.weight_kg + 'kg' : '-'
|
||
}}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">外观颜色：</span>
|
||
<span class="value">{{ viewData.color_exterior_text || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">内饰颜色：</span>
|
||
<span class="value">{{ viewData.color_interior_text || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">官方指导价：</span>
|
||
<span class="value">{{
|
||
viewData.msrp ? viewData.currency + ' ' + viewData.msrp : '-'
|
||
}}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">状态：</span>
|
||
<span class="value">
|
||
<ElTag :type="viewData.is_active ? 'success' : 'danger'">
|
||
{{ viewData.is_active ? '启用' : '禁用' }}
|
||
</ElTag>
|
||
</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">备注：</span>
|
||
<span class="value">{{ viewData.remark || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
</div>
|
||
|
||
<!-- 代码信息 -->
|
||
<div class="detail-section">
|
||
<h4>编码信息</h4>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">品牌编码：</span>
|
||
<span class="value">{{ viewData.brand_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">车系编码：</span>
|
||
<span class="value">{{ viewData.series_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">车型/配置编码：</span>
|
||
<span class="value">{{ viewData.model_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">版型编码：</span>
|
||
<span class="value">{{ viewData.trim_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">配置等级编码：</span>
|
||
<span class="value">{{ viewData.trim_level_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">版本编码：</span>
|
||
<span class="value">{{ viewData.edition_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">车身类型编码：</span>
|
||
<span class="value">{{ viewData.body_type_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">驱动类型编码：</span>
|
||
<span class="value">{{ viewData.drive_type_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">电驱/电机编码：</span>
|
||
<span class="value">{{ viewData.motor_layout_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">能源类型编码：</span>
|
||
<span class="value">{{ viewData.fuel_type_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">变速箱编码：</span>
|
||
<span class="value">{{ viewData.transmission_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">续航标准编码：</span>
|
||
<span class="value">{{ viewData.range_std_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
<ElRow :gutter="16">
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">外观色编码：</span>
|
||
<span class="value">{{ viewData.color_exterior_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">内饰色编码：</span>
|
||
<span class="value">{{ viewData.color_interior_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="8">
|
||
<div class="detail-item">
|
||
<span class="label">排放标准编码：</span>
|
||
<span class="value">{{ viewData.emission_std_code || '-' }}</span>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
</div>
|
||
</div>
|
||
</ElDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { Search } from '@element-plus/icons-vue'
|
||
import { vehicleService } from '@/api/crmpc/vehicleApi'
|
||
import { commonService } from '@/api/commonApi'
|
||
|
||
// 搜索表单
|
||
const searchForm = reactive({
|
||
keyword: ''
|
||
})
|
||
|
||
// 分页
|
||
const pagination = reactive({
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
total: 0
|
||
})
|
||
|
||
// 表格数据
|
||
const loading = ref(false)
|
||
const tableRef = ref()
|
||
const tableData = ref<any[]>([])
|
||
|
||
// 弹出层控制
|
||
const dialogVisible = ref(false)
|
||
const viewDialogVisible = ref(false)
|
||
const dialogTitle = ref('新增车辆')
|
||
const submitLoading = ref(false)
|
||
|
||
// 表单数据
|
||
const formRef = ref()
|
||
const formData = reactive({
|
||
id: '',
|
||
brand_name: '',
|
||
series_name: '',
|
||
model_name: '',
|
||
model_year: '',
|
||
trim: '',
|
||
trim_level: '',
|
||
edition_name: '',
|
||
engine_disp_l: '',
|
||
engine_turbo: 0,
|
||
engine_power_kw: '',
|
||
battery_kwh: '',
|
||
gears: '',
|
||
range_km: '',
|
||
doors: '',
|
||
seats: '',
|
||
weight_kg: '',
|
||
dimensions_mm: '',
|
||
color_exterior_text: '',
|
||
color_interior_text: '',
|
||
options_official: '',
|
||
features: '',
|
||
origin_country: '',
|
||
currency: 'CNY',
|
||
msrp: '',
|
||
is_active: 1,
|
||
remark: '',
|
||
brand_code: '',
|
||
series_code: '',
|
||
model_code: '',
|
||
trim_code: '',
|
||
trim_level_code: '',
|
||
edition_code: '',
|
||
body_type_code: '',
|
||
drive_type_code: '',
|
||
motor_layout_code: '',
|
||
fuel_type_code: '',
|
||
transmission_code: '',
|
||
range_std_code: '',
|
||
color_exterior_code: '',
|
||
color_interior_code: '',
|
||
emission_std_code: '',
|
||
body_type: '',
|
||
drive_type: '',
|
||
motor_layout: '',
|
||
fuel_type: '',
|
||
transmission: '',
|
||
range_std: '',
|
||
emission_std: ''
|
||
})
|
||
|
||
// 查看数据
|
||
const viewData = ref<any>({})
|
||
|
||
// 品牌选项
|
||
const brandOptions = ref<any>([])
|
||
|
||
// 车系选项
|
||
const seriesOptions = ref<Array<any>>([])
|
||
|
||
// 外观颜色
|
||
const wcolorOptions = ref<Array<any>>([])
|
||
// 内饰颜色
|
||
const ncolorOptions = ref<Array<any>>([])
|
||
|
||
// 表单验证规则
|
||
const formRules = {
|
||
brand_name: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }],
|
||
series_name: [{ required: true, message: '请输入车系名称', trigger: 'blur' }],
|
||
msrp: [{ required: true, message: '填写指导价', trigger: 'blur' }]
|
||
}
|
||
|
||
// 获取品牌列表
|
||
const loadBrandOptions = async () => {
|
||
try {
|
||
const response = await commonService.getBrandSelect()
|
||
brandOptions.value = response
|
||
} catch (error) {
|
||
console.error('获取品牌列表失败:', error)
|
||
ElMessage.error('获取品牌列表失败')
|
||
}
|
||
}
|
||
|
||
// 获取车系列表
|
||
const loadSeriesOptions = async (brandCode?: string) => {
|
||
if (!brandCode) {
|
||
seriesOptions.value = []
|
||
return
|
||
}
|
||
try {
|
||
const matched = brandOptions.value.find((b: any) => b.brand_code === brandCode)
|
||
const brandId = matched ? matched.id : ''
|
||
if (!brandId) {
|
||
seriesOptions.value = []
|
||
return
|
||
}
|
||
const response = await commonService.getSeriesSelect({
|
||
brand_id: brandId
|
||
})
|
||
seriesOptions.value = response
|
||
} catch (error) {
|
||
console.error('获取车系列表失败:', error)
|
||
ElMessage.error('获取车系列表失败')
|
||
}
|
||
}
|
||
//颜色下拉列表
|
||
const loadColorOptions = async () => {
|
||
try {
|
||
const res = await commonService.getColorSelect({ type: 1 })
|
||
wcolorOptions.value = res
|
||
const response = await commonService.getColorSelect({ type: 2 })
|
||
ncolorOptions.value = response
|
||
} catch (error) {
|
||
console.error('获取颜色列表失败:', error)
|
||
ElMessage.error('获取颜色列表失败')
|
||
}
|
||
}
|
||
//字典下拉框
|
||
const trimOptions = ref<Array<any>>([])
|
||
const trim_levelOptions = ref<Array<any>>([])
|
||
const editionOptions = ref<Array<any>>([])
|
||
const emission_stdOptions = ref<Array<any>>([])
|
||
const range_stdOptions = ref<Array<any>>([])
|
||
const transmissionOptions = ref<Array<any>>([])
|
||
const fuel_typeOptions = ref<Array<any>>([])
|
||
const motor_layoutOptions = ref<Array<any>>([])
|
||
const drive_typeOptions = ref<Array<any>>([])
|
||
const body_typeOptions = ref<Array<any>>([])
|
||
const loadDictOptions = async () => {
|
||
const response = await commonService.getDictSelect({ scope: '5,6,7,8,9,10,11,12,13,14' })
|
||
trimOptions.value = response.trim
|
||
trim_levelOptions.value = response.trim_level
|
||
editionOptions.value = response.edition
|
||
emission_stdOptions.value = response.emission_std
|
||
range_stdOptions.value = response.range_std
|
||
transmissionOptions.value = response.transmission
|
||
fuel_typeOptions.value = response.fuel_type
|
||
motor_layoutOptions.value = response.motor_layout
|
||
drive_typeOptions.value = response.drive_type
|
||
body_typeOptions.value = response.body_type
|
||
}
|
||
// 获取列表数据
|
||
const getList = async () => {
|
||
loading.value = true
|
||
try {
|
||
const { currentPage, pageSize } = pagination
|
||
const params = {
|
||
current: currentPage,
|
||
size: pageSize,
|
||
keyword: searchForm.keyword
|
||
}
|
||
|
||
const { records, current, size, total } = await vehicleService.getVehicleList(params)
|
||
tableData.value = records || []
|
||
Object.assign(pagination, { currentPage: current, pageSize: size, total })
|
||
} catch (error) {
|
||
console.error('获取改装项目列表失败:', error)
|
||
ElMessage.error('获取改装项目列表失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 分页处理
|
||
const handleSizeChange = (size: number) => {
|
||
pagination.pageSize = size
|
||
getList()
|
||
}
|
||
|
||
const handleCurrentChange = (page: number) => {
|
||
pagination.currentPage = page
|
||
getList()
|
||
}
|
||
|
||
// 新增车辆
|
||
const handleAdd = () => {
|
||
loadBrandOptions()
|
||
loadColorOptions()
|
||
loadDictOptions()
|
||
dialogTitle.value = '新增车辆'
|
||
resetForm()
|
||
dialogVisible.value = true
|
||
}
|
||
|
||
// 编辑车辆
|
||
const handleEdit = (row: any) => {
|
||
loadBrandOptions()
|
||
loadColorOptions()
|
||
loadDictOptions()
|
||
dialogTitle.value = '编辑车辆'
|
||
Object.assign(formData, row)
|
||
dialogVisible.value = true
|
||
}
|
||
|
||
// 查看车辆
|
||
const handleView = async (row: any) => {
|
||
try {
|
||
if (row.id) {
|
||
const response = await vehicleService.vehicleDetail({ id: row.id })
|
||
if (response.data) {
|
||
viewData.value = response.data
|
||
} else {
|
||
viewData.value = row
|
||
}
|
||
} else {
|
||
viewData.value = row
|
||
}
|
||
viewDialogVisible.value = true
|
||
} catch (error) {
|
||
console.error('获取车辆详情失败:', error)
|
||
ElMessage.error('获取车辆详情失败')
|
||
viewData.value = row
|
||
viewDialogVisible.value = true
|
||
}
|
||
}
|
||
|
||
// 删除车辆
|
||
const handleDelete = async (row: any) => {
|
||
try {
|
||
await ElMessageBox.confirm('确定要删除该车辆信息吗？', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
if (row.id) {
|
||
await vehicleService.vehicleDelete({ id: row.id })
|
||
ElMessage.success('删除成功')
|
||
getList()
|
||
}
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
console.error('删除车辆失败:', error)
|
||
ElMessage.error('删除车辆失败')
|
||
}
|
||
}
|
||
}
|
||
|
||
// 重置表单
|
||
const resetForm = () => {
|
||
Object.keys(formData).forEach((key) => {
|
||
if (key === 'is_active') {
|
||
(formData as any)[key] = 1
|
||
} else if (key === 'currency') {
|
||
(formData as any)[key] = 'CNY'
|
||
} else {
|
||
(formData as any)[key] = ''
|
||
}
|
||
})
|
||
formRef.value?.clearValidate()
|
||
}
|
||
|
||
// 提交表单
|
||
const handleSubmit = async () => {
|
||
try {
|
||
await formRef.value?.validate()
|
||
submitLoading.value = true
|
||
if (formData.id) {
|
||
// 编辑
|
||
const { id, ...payload } = formData
|
||
await vehicleService.vehicleEdit({ id, ...payload })
|
||
// await vehicleService.vehicleEdit({ id: formData.id, ...formData })
|
||
ElMessage.success('编辑成功')
|
||
} else {
|
||
// 新增
|
||
await vehicleService.vehicleAdd(formData)
|
||
ElMessage.success('新增成功')
|
||
}
|
||
dialogVisible.value = false
|
||
getList()
|
||
} catch (error) {
|
||
console.error('提交失败:', error)
|
||
ElMessage.error('提交失败')
|
||
} finally {
|
||
submitLoading.value = false
|
||
}
|
||
}
|
||
|
||
// 监听搜索条件变化
|
||
watch(
|
||
() => searchForm.keyword,
|
||
() => {
|
||
pagination.currentPage = 1
|
||
})
|
||
|
||
// 页面加载时获取数据
|
||
onMounted(async () => {
|
||
await getList()
|
||
})
|
||
|
||
// 品牌名称变更时，联动设置品牌代码
|
||
watch(
|
||
() => formData.brand_name,
|
||
(newName) => {
|
||
const matched = brandOptions.value.find((b: any) => b.brand_name === newName)
|
||
formData.brand_code = matched ? matched.brand_code : ''
|
||
// 品牌变更后，清空车系相关字段并加载对应车系
|
||
formData.series_name = ''
|
||
formData.series_code = ''
|
||
if (formData.brand_code) {
|
||
loadSeriesOptions(formData.brand_code)
|
||
} else {
|
||
seriesOptions.value = []
|
||
}
|
||
}
|
||
)
|
||
|
||
// 车系名称变更时，联动设置车系代码
|
||
watch(
|
||
() => formData.series_name,
|
||
(newSeriesName) => {
|
||
const matchedSeries = seriesOptions.value.find(
|
||
(s: any) => s.series_name === newSeriesName || s.name === newSeriesName
|
||
)
|
||
formData.series_code = matchedSeries ? matchedSeries.series_code || matchedSeries.code : ''
|
||
}
|
||
)
|
||
|
||
// 外观颜色变更时，联动设置外观颜色代码
|
||
watch(
|
||
() => formData.color_exterior_text,
|
||
(newColorName) => {
|
||
const matchedColor = wcolorOptions.value.find((c: any) => c.color_text === newColorName)
|
||
formData.color_exterior_code = matchedColor ? matchedColor.color_code : ''
|
||
}
|
||
)
|
||
|
||
// 内饰颜色变更时，联动设置内饰颜色代码
|
||
watch(
|
||
() => formData.color_interior_text,
|
||
(newColorName) => {
|
||
const matchedColor = ncolorOptions.value.find((c: any) => c.color_text === newColorName)
|
||
formData.color_interior_code = matchedColor ? matchedColor.color_code : ''
|
||
}
|
||
)
|
||
|
||
// 版型/细分配置变更时，联动设置版型代码
|
||
watch(
|
||
() => formData.trim,
|
||
(newTrimName) => {
|
||
const matchedTrim = trimOptions.value.find((t: any) => t.item_label === newTrimName)
|
||
formData.trim_code = matchedTrim ? matchedTrim.item_value : ''
|
||
}
|
||
)
|
||
|
||
// 配置等级变更时，联动设置配置等级代码
|
||
watch(
|
||
() => formData.trim_level,
|
||
(newTrimLevelName) => {
|
||
const matchedTrimLevel = trim_levelOptions.value.find(
|
||
(t: any) => t.item_label === newTrimLevelName
|
||
)
|
||
formData.trim_level_code = matchedTrimLevel ? matchedTrimLevel.item_value : ''
|
||
}
|
||
)
|
||
|
||
// 特别版/纪念版变更时，联动设置特别版代码
|
||
watch(
|
||
() => formData.edition_name,
|
||
(newEditionName) => {
|
||
const matchedEdition = editionOptions.value.find((e: any) => e.item_label === newEditionName)
|
||
formData.edition_code = matchedEdition ? matchedEdition.item_value : ''
|
||
}
|
||
)
|
||
|
||
// 车身类型变更时，联动设置车身类型代码
|
||
watch(
|
||
() => formData.body_type,
|
||
(newBodyTypeName) => {
|
||
const matchedBodyType = body_typeOptions.value.find(
|
||
(t: any) => t.item_label === newBodyTypeName
|
||
)
|
||
formData.body_type_code = matchedBodyType ? matchedBodyType.item_value : ''
|
||
}
|
||
)
|
||
|
||
// 驱动类型变更时，联动设置驱动类型代码
|
||
watch(
|
||
() => formData.drive_type,
|
||
(newDriveTypeName) => {
|
||
const matchedDriveType = drive_typeOptions.value.find(
|
||
(t: any) => t.item_label === newDriveTypeName
|
||
)
|
||
formData.drive_type_code = matchedDriveType ? matchedDriveType.item_value : ''
|
||
}
|
||
)
|
||
|
||
// 电驱/电机变更时，联动设置电驱/电机代码
|
||
watch(
|
||
() => formData.motor_layout,
|
||
(newMotorLayoutName) => {
|
||
const matchedMotorLayout = motor_layoutOptions.value.find(
|
||
(t: any) => t.item_label === newMotorLayoutName
|
||
)
|
||
formData.motor_layout_code = matchedMotorLayout ? matchedMotorLayout.item_value : ''
|
||
}
|
||
)
|
||
|
||
// 能源类型变更时，联动设置能源类型代码
|
||
watch(
|
||
() => formData.fuel_type,
|
||
(newFuelTypeName) => {
|
||
const matchedFuelType = fuel_typeOptions.value.find(
|
||
(t: any) => t.item_label === newFuelTypeName
|
||
)
|
||
formData.fuel_type_code = matchedFuelType ? matchedFuelType.item_value : ''
|
||
}
|
||
)
|
||
|
||
// 变速箱变更时，联动设置变速箱代码
|
||
watch(
|
||
() => formData.transmission,
|
||
(newTransmissionName) => {
|
||
const matchedTransmission = transmissionOptions.value.find(
|
||
(t: any) => t.item_label === newTransmissionName
|
||
)
|
||
formData.transmission_code = matchedTransmission ? matchedTransmission.item_value : ''
|
||
}
|
||
)
|
||
|
||
// 续航标准变更时，联动设置续航标准代码
|
||
watch(
|
||
() => formData.range_std,
|
||
(newRangeStdName) => {
|
||
const matchedRangeStd = range_stdOptions.value.find(
|
||
(t: any) => t.item_label === newRangeStdName
|
||
)
|
||
formData.range_std_code = matchedRangeStd ? matchedRangeStd.item_value : ''
|
||
}
|
||
)
|
||
|
||
// 排放标准变更时，联动设置排放标准代码
|
||
watch(
|
||
() => formData.emission_std,
|
||
(newEmissionStdName) => {
|
||
const matchedEmissionStd = emission_stdOptions.value.find(
|
||
(t: any) => t.item_label === newEmissionStdName
|
||
)
|
||
formData.emission_std_code = matchedEmissionStd ? matchedEmissionStd.item_value : ''
|
||
}
|
||
)
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.vehicle-page {
|
||
background: var(--art-main-bg-color);
|
||
min-height: 100vh;
|
||
padding: 16px;
|
||
}
|
||
:deep(.el-dialog__body) {
|
||
padding: 0px !important;
|
||
}
|
||
.search-toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
padding: 16px;
|
||
background: var(--art-main-bg-color);
|
||
}
|
||
|
||
.toolbar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.toolbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.clickable {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.table-container {
|
||
background: var(--art-main-bg-color);
|
||
}
|
||
|
||
// 表单样式
|
||
.vehicle-form {
|
||
.form-section {
|
||
// margin-bottom: 24px;
|
||
// padding: 0px 20px 0px 0px;
|
||
// border: 1px solid #e4e7ed;
|
||
// border-radius: 6px;
|
||
// background: #fafafa;
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #409eff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dialog-footer {
|
||
text-align: right;
|
||
}
|
||
|
||
// 详情样式
|
||
.vehicle-detail {
|
||
.detail-section {
|
||
margin-bottom: 20px;
|
||
h4 {
|
||
margin: 0 0 12px 0;
|
||
color: #303133;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
.detail-item {
|
||
margin-bottom: 8px;
|
||
.label {
|
||
color: #606266;
|
||
margin-right: 8px;
|
||
}
|
||
.value {
|
||
color: #303133;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.primary {
|
||
color: var(--el-color-primary);
|
||
}
|
||
.ellipsis {
|
||
display: block;
|
||
max-width: 220px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin: 0 auto;
|
||
}
|
||
</style>
|