art-design/src/views/crmpc/vehicle/vehicle_list.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'
  defineOptions({ name: 'CrmVehicleList' })
  // 搜索表单
  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>