1332 lines
43 KiB
Vue
1332 lines
43 KiB
Vue
|
<template>
|
|||
|
|
<div class="page-content">
|
|||
|
|
<div v-if="!isMobile" class="dict-layout">
|
|||
|
|
<div class="dict-type-card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
<div style="display: flex; align-items: center">
|
|||
|
|
<ElInput
|
|||
|
|
v-model="brandKeyword"
|
|||
|
|
placeholder="搜索品牌名称/编码"
|
|||
|
|
clearable
|
|||
|
|
@keyup.enter="getBrandListseach"
|
|||
|
|
/>
|
|||
|
|
<ElButton style="margin-left: 8px" @click="getBrandListseach" v-ripple>搜索</ElButton>
|
|||
|
|
</div>
|
|||
|
|
<ElButton
|
|||
|
|
type="primary"
|
|||
|
|
style="margin-left: 8px"
|
|||
|
|
@click="showBrandDialog('add')"
|
|||
|
|
v-if="hasAuth('brand@add')"
|
|||
|
|
>新增品牌</ElButton
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
<ArtTable
|
|||
|
|
ref="tableRef"
|
|||
|
|
row-key="id"
|
|||
|
|
:loading="brandLoading"
|
|||
|
|
:data="brandTableData"
|
|||
|
|
:currentPage="brandPagination.currentPage"
|
|||
|
|
:pageSize="brandPagination.pageSize"
|
|||
|
|
:total="brandPagination.total"
|
|||
|
|
@size-change="handleBrandCurrentChange"
|
|||
|
|
@current-change="handleBrandCurrentChange"
|
|||
|
|
>
|
|||
|
|
<el-table-column prop="brand_code" label="品牌编码" />
|
|||
|
|
<el-table-column prop="brand_name" label="品牌名称" />
|
|||
|
|
<el-table-column label="Logo">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<div class="brand-logo-cell">
|
|||
|
|
<img
|
|||
|
|
v-if="scope.row.logo_full"
|
|||
|
|
:src="scope.row.logo_full"
|
|||
|
|
:alt="scope.row.brand_name"
|
|||
|
|
/>
|
|||
|
|
<div v-else class="logo-placeholder">{{ scope.row.brand_name?.charAt(0) }}</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<!-- <el-table-column prop="description" label="描述" show-overflow-tooltip /> -->
|
|||
|
|
<!-- <el-table-column prop="sort" label="排序" width="80" /> -->
|
|||
|
|
<el-table-column label="是否热门" prop="hot">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<ElTag :type="scope.row.hot == 1 ? 'danger' : 'info'">
|
|||
|
|
{{ scope.row.hot == 1 ? '是' : '否' }}
|
|||
|
|
</ElTag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="状态" prop="status">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<ElTag :type="scope.row.status ? 'success' : 'info'">
|
|||
|
|
{{ scope.row.status ? '启用' : '停用' }}
|
|||
|
|
</ElTag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column fixed="right" label="操作" min-width="120" align="center">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-link
|
|||
|
|
type="success"
|
|||
|
|
underline="never"
|
|||
|
|
style="margin-right: 8px"
|
|||
|
|
@click="Vehicleseries(scope.row)"
|
|||
|
|
>
|
|||
|
|
<i class="iconfont-sys"> </i>采集车系
|
|||
|
|
</el-link>
|
|||
|
|
<el-link
|
|||
|
|
type="success"
|
|||
|
|
underline="never"
|
|||
|
|
style="margin-right: 8px"
|
|||
|
|
@click="showSeriesListDialog(scope.row)"
|
|||
|
|
>
|
|||
|
|
<i class="iconfont-sys"></i>查看车系
|
|||
|
|
</el-link>
|
|||
|
|
<el-link
|
|||
|
|
type="primary"
|
|||
|
|
underline="never"
|
|||
|
|
style="margin-right: 8px"
|
|||
|
|
@click="showBrandDialog('edit', scope.row)"
|
|||
|
|
v-if="hasAuth('brand@update')"
|
|||
|
|
>
|
|||
|
|
<i class="iconfont-sys"> </i>编辑
|
|||
|
|
</el-link>
|
|||
|
|
<el-link
|
|||
|
|
type="danger"
|
|||
|
|
underline="never"
|
|||
|
|
style="margin-right: 8px"
|
|||
|
|
@click="handleBrandDelete(scope.row)"
|
|||
|
|
v-if="hasAuth('brand@destroy')"
|
|||
|
|
>
|
|||
|
|
<i class="iconfont-sys"></i>删除
|
|||
|
|
</el-link>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</ArtTable>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<ElDialog
|
|||
|
|
v-model="brandDialogVisible"
|
|||
|
|
:title="brandDialogType === 'add' ? '新增品牌' : '编辑品牌'"
|
|||
|
|
width="750px"
|
|||
|
|
align-center
|
|||
|
|
>
|
|||
|
|
<ElForm ref="brandFormRef" :model="brandForm" :rules="brandRules" label-width="100px">
|
|||
|
|
<ElFormItem label="品牌编码" prop="brand_code">
|
|||
|
|
<ElInput v-model="brandForm.brand_code" />
|
|||
|
|
</ElFormItem>
|
|||
|
|
<ElFormItem label="品牌名称" prop="brand_name">
|
|||
|
|
<ElInput v-model="brandForm.brand_name" />
|
|||
|
|
</ElFormItem>
|
|||
|
|
<ElFormItem label="品牌Logo" prop="logo">
|
|||
|
|
<ElUpload
|
|||
|
|
class="logo-uploader"
|
|||
|
|
:action="actionImageUplode"
|
|||
|
|
:headers="uploadHeaders"
|
|||
|
|
:show-file-list="false"
|
|||
|
|
:on-success="handleLogoSuccess"
|
|||
|
|
:before-upload="beforeLogoUpload"
|
|||
|
|
accept="image/*"
|
|||
|
|
>
|
|||
|
|
<img v-if="brandForm.logo" :src="logourl" class="logo-preview" />
|
|||
|
|
<ElIcon v-else class="logo-uploader-icon"><Plus /></ElIcon>
|
|||
|
|
</ElUpload>
|
|||
|
|
</ElFormItem>
|
|||
|
|
<ElFormItem label="是否热门" prop="hot">
|
|||
|
|
<el-radio-group v-model="brandForm.hot">
|
|||
|
|
<el-radio :label="1">是</el-radio>
|
|||
|
|
<el-radio :label="0">否</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</ElFormItem>
|
|||
|
|
<ElFormItem label="品牌描述" prop="description">
|
|||
|
|
<ElInput v-model="brandForm.description" type="textarea" :rows="3" />
|
|||
|
|
</ElFormItem>
|
|||
|
|
<ElFormItem label="排序" prop="sort">
|
|||
|
|
<ElInputNumber v-model="brandForm.sort" :min="0" :max="999" style="width: 100%" />
|
|||
|
|
</ElFormItem>
|
|||
|
|
<ElFormItem label="状态" prop="status">
|
|||
|
|
<ElSwitch v-model="brandForm.status" :active-value="1" :inactive-value="0" />
|
|||
|
|
</ElFormItem>
|
|||
|
|
</ElForm>
|
|||
|
|
<template #footer>
|
|||
|
|
<div class="dialog-footer">
|
|||
|
|
<ElButton @click="brandDialogVisible = false">取消</ElButton>
|
|||
|
|
<ElButton type="primary" @click="handleBrandSubmit(brandFormRef)">提交</ElButton>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</ElDialog>
|
|||
|
|
|
|||
|
|
<ElDialog
|
|||
|
|
v-model="seriesDialogVisible"
|
|||
|
|
:title="seriesDialogType === 'add' ? '新增系列' : '编辑系列'"
|
|||
|
|
width="750px"
|
|||
|
|
align-center
|
|||
|
|
>
|
|||
|
|
<ElForm ref="seriesFormRef" :model="seriesForm" :rules="seriesRules" label-width="100px">
|
|||
|
|
<ElFormItem label="所属品牌">
|
|||
|
|
<ElInput
|
|||
|
|
:model-value="
|
|||
|
|
(currentBrand || activeBrand) ? `${(currentBrand || activeBrand).brand_name}（${(currentBrand || activeBrand).brand_code}）` : ''
|
|||
|
|
"
|
|||
|
|
disabled
|
|||
|
|
/>
|
|||
|
|
</ElFormItem>
|
|||
|
|
<!-- <ElFormItem label="系列编码" prop="series_code">
|
|||
|
|
<ElInput v-model="seriesForm.series_code" />
|
|||
|
|
</ElFormItem> -->
|
|||
|
|
<ElFormItem label="系列名称" prop="series_name">
|
|||
|
|
<ElInput v-model="seriesForm.series_name" />
|
|||
|
|
</ElFormItem>
|
|||
|
|
<ElFormItem label="系列描述" prop="description">
|
|||
|
|
<ElInput v-model="seriesForm.description" type="textarea" :rows="3" />
|
|||
|
|
</ElFormItem>
|
|||
|
|
<ElFormItem label="排序" prop="sort">
|
|||
|
|
<ElInputNumber v-model="seriesForm.sort" :min="0" :max="999" style="width: 100%" />
|
|||
|
|
</ElFormItem>
|
|||
|
|
<ElFormItem label="状态" prop="status">
|
|||
|
|
<ElSwitch v-model="seriesForm.status" :active-value="1" :inactive-value="0" />
|
|||
|
|
</ElFormItem>
|
|||
|
|
</ElForm>
|
|||
|
|
<template #footer>
|
|||
|
|
<div class="dialog-footer">
|
|||
|
|
<ElButton @click="seriesDialogVisible = false">取消</ElButton>
|
|||
|
|
<ElButton type="primary" @click="handleSeriesSubmit(seriesFormRef)">提交</ElButton>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</ElDialog>
|
|||
|
|
|
|||
|
|
<!-- 系列列表弹出层 -->
|
|||
|
|
<ElDialog
|
|||
|
|
v-model="seriesListDialogVisible"
|
|||
|
|
:title="`${currentBrand?.brand_name} - 系列列表`"
|
|||
|
|
width="900px"
|
|||
|
|
align-center
|
|||
|
|
>
|
|||
|
|
<div class="series-list-container">
|
|||
|
|
<div class="series-header">
|
|||
|
|
<div style="display: flex; align-items: center">
|
|||
|
|
<ElInput
|
|||
|
|
v-model="seriesListKeyword"
|
|||
|
|
placeholder="搜索系列名称"
|
|||
|
|
clearable
|
|||
|
|
@keyup.enter="getSeriesListForDialog"
|
|||
|
|
style="width: 200px"
|
|||
|
|
/>
|
|||
|
|
<ElButton style="margin-left: 8px" @click="getSeriesListForDialog" v-ripple>搜索</ElButton>
|
|||
|
|
</div>
|
|||
|
|
<ElButton
|
|||
|
|
type="primary"
|
|||
|
|
style="margin-left: 8px"
|
|||
|
|
@click="showSeriesDialog('add')"
|
|||
|
|
v-if="hasAuth('series@add')"
|
|||
|
|
>新增系列</ElButton
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
<ArtTable
|
|||
|
|
ref="seriesListTableRef"
|
|||
|
|
row-key="id"
|
|||
|
|
:loading="seriesListLoading"
|
|||
|
|
:data="seriesListTableData"
|
|||
|
|
:currentPage="seriesListPagination.currentPage"
|
|||
|
|
:pageSize="seriesListPagination.pageSize"
|
|||
|
|
:total="seriesListPagination.total"
|
|||
|
|
@size-change="handleSeriesListSizeChange"
|
|||
|
|
@current-change="handleSeriesListCurrentChange"
|
|||
|
|
>
|
|||
|
|
<el-table-column prop="series_name" label="系列名称" />
|
|||
|
|
<el-table-column prop="description" label="系列描述" show-overflow-tooltip />
|
|||
|
|
<el-table-column prop="sort" label="排序" width="80" />
|
|||
|
|
<el-table-column label="状态" prop="status" width="100">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<ElTag :type="scope.row.status ? 'success' : 'info'">
|
|||
|
|
{{ scope.row.status ? '启用' : '停用' }}
|
|||
|
|
</ElTag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column fixed="right" label="操作" min-width="140" align="center">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-link
|
|||
|
|
type="success"
|
|||
|
|
underline="never"
|
|||
|
|
style="margin-right: 8px"
|
|||
|
|
@click="collectVehicleModels(scope.row)"
|
|||
|
|
v-if="hasAuth('brand@update')"
|
|||
|
|
>
|
|||
|
|
<i class="iconfont-sys"> </i>采集车型
|
|||
|
|
</el-link>
|
|||
|
|
<el-link
|
|||
|
|
type="success"
|
|||
|
|
underline="never"
|
|||
|
|
style="margin-right: 8px"
|
|||
|
|
@click="showVehicleListDialog(scope.row)"
|
|||
|
|
v-if="hasAuth('brand@destroy')"
|
|||
|
|
>
|
|||
|
|
<i class="iconfont-sys"></i>查看车型
|
|||
|
|
</el-link>
|
|||
|
|
<el-link
|
|||
|
|
type="primary"
|
|||
|
|
underline="never"
|
|||
|
|
style="margin-right: 8px"
|
|||
|
|
@click="showSeriesDialog('edit', scope.row)"
|
|||
|
|
v-if="hasAuth('series@update')"
|
|||
|
|
>
|
|||
|
|
<i class="iconfont-sys"> </i>编辑
|
|||
|
|
</el-link>
|
|||
|
|
<el-link
|
|||
|
|
type="danger"
|
|||
|
|
underline="never"
|
|||
|
|
style="margin-right: 8px"
|
|||
|
|
@click="handleSeriesDelete(scope.row)"
|
|||
|
|
v-if="hasAuth('series@destroy')"
|
|||
|
|
>
|
|||
|
|
<i class="iconfont-sys"></i>删除
|
|||
|
|
</el-link>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</ArtTable>
|
|||
|
|
</div>
|
|||
|
|
<template #footer>
|
|||
|
|
<div class="dialog-footer">
|
|||
|
|
<ElButton @click="seriesListDialogVisible = false">关闭</ElButton>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</ElDialog>
|
|||
|
|
|
|||
|
|
<!-- 车系采集弹出层 -->
|
|||
|
|
<ElDialog
|
|||
|
|
v-model="collectSeriesDialogVisible"
|
|||
|
|
:title="`${currentCollectBrand?.brand_name} - 车系采集`"
|
|||
|
|
width="900px"
|
|||
|
|
align-center
|
|||
|
|
>
|
|||
|
|
<div class="collect-series-container">
|
|||
|
|
<div class="collect-series-header">
|
|||
|
|
<div style="display: flex; align-items: center">
|
|||
|
|
<ElButton
|
|||
|
|
type="info"
|
|||
|
|
size="small"
|
|||
|
|
@click="selectAllCollectSeries"
|
|||
|
|
style="margin-right: 8px"
|
|||
|
|
>
|
|||
|
|
全选
|
|||
|
|
</ElButton>
|
|||
|
|
<ElButton type="warning" size="small" @click="unselectAllCollectSeries">
|
|||
|
|
取消全选
|
|||
|
|
</ElButton>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="collect-series-content">
|
|||
|
|
<div v-if="collectSeriesLoading" class="loading-container">
|
|||
|
|
<ElLoading text="正在采集车系数据..." />
|
|||
|
|
</div>
|
|||
|
|
<div v-else-if="collectSeriesData.length === 0" class="empty-container">
|
|||
|
|
<ElEmpty description="暂无车系数据" />
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="series-grid">
|
|||
|
|
<div
|
|||
|
|
v-for="series in collectSeriesData"
|
|||
|
|
:key="series.id || series.series_name || series"
|
|||
|
|
class="series-item"
|
|||
|
|
:class="{ selected: isSeriesSelected(series) }"
|
|||
|
|
@click="onSeriesItemClick(series)"
|
|||
|
|
>
|
|||
|
|
<div class="series-checkbox">
|
|||
|
|
<ElCheckbox
|
|||
|
|
:model-value="isSeriesSelected(series)"
|
|||
|
|
@click.stop
|
|||
|
|
@change="(val:any) => setSeriesSelected(series, val)"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="series-info">
|
|||
|
|
<div class="series-name">{{ series.series_name || series }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<template #footer>
|
|||
|
|
<div class="dialog-footer">
|
|||
|
|
<ElButton @click="collectSeriesDialogVisible = false">取消</ElButton>
|
|||
|
|
<ElButton
|
|||
|
|
type="primary"
|
|||
|
|
@click="saveCollectSeries"
|
|||
|
|
:disabled="selectedSeriesIds.length === 0"
|
|||
|
|
>
|
|||
|
|
保存选中车系 ({{ selectedSeriesIds.length }})
|
|||
|
|
</ElButton>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</ElDialog>
|
|||
|
|
|
|||
|
|
<!-- 车型列表弹出层 -->
|
|||
|
|
<ElDialog
|
|||
|
|
v-model="vehicleListDialogVisible"
|
|||
|
|
:title="`${currentVehicleBrand?.series_name} - 车型列表`"
|
|||
|
|
width="1200px"
|
|||
|
|
align-center
|
|||
|
|
>
|
|||
|
|
<div class="vehicle-list-container">
|
|||
|
|
<div class="vehicle-header">
|
|||
|
|
<div style="display: flex; align-items: center">
|
|||
|
|
<ElInput
|
|||
|
|
v-model="vehicleListKeyword"
|
|||
|
|
placeholder="搜索车型名称"
|
|||
|
|
clearable
|
|||
|
|
@keyup.enter="getVehicleListForDialog"
|
|||
|
|
style="width: 200px"
|
|||
|
|
/>
|
|||
|
|
<ElButton style="margin-left: 8px" @click="getVehicleListForDialog" v-ripple>搜索</ElButton>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<ArtTable
|
|||
|
|
ref="vehicleListTableRef"
|
|||
|
|
row-key="id"
|
|||
|
|
:loading="vehicleListLoading"
|
|||
|
|
:data="vehicleListTableData"
|
|||
|
|
:currentPage="vehicleListPagination.currentPage"
|
|||
|
|
:pageSize="vehicleListPagination.pageSize"
|
|||
|
|
:total="vehicleListPagination.total"
|
|||
|
|
@size-change="handleVehicleListSizeChange"
|
|||
|
|
@current-change="handleVehicleListCurrentChange"
|
|||
|
|
>
|
|||
|
|
<el-table-column prop="model_name" label="车型名称" min-width="200" show-overflow-tooltip />
|
|||
|
|
<el-table-column prop="model_year" label="年款" width="100" />
|
|||
|
|
<el-table-column prop="msrp" label="指导价(CNY)" width="120">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<span v-if="scope.row.msrp" class="price-text">
|
|||
|
|
¥{{ formatPrice(scope.row.msrp) }}
|
|||
|
|
</span>
|
|||
|
|
<span v-else>-</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="状态" prop="is_active" width="100">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<ElTag :type="scope.row.is_active ? 'success' : 'danger'">
|
|||
|
|
{{ scope.row.is_active ? '启用' : '禁用' }}
|
|||
|
|
</ElTag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</ArtTable>
|
|||
|
|
</div>
|
|||
|
|
<template #footer>
|
|||
|
|
<div class="dialog-footer">
|
|||
|
|
<ElButton @click="vehicleListDialogVisible = false">关闭</ElButton>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</ElDialog>
|
|||
|
|
|
|||
|
|
<!-- 车型采集弹出层 -->
|
|||
|
|
<ElDialog
|
|||
|
|
v-model="collectModelsDialogVisible"
|
|||
|
|
:title="`${currentCollectSeries?.series_name} - 车型采集`"
|
|||
|
|
width="900px"
|
|||
|
|
align-center
|
|||
|
|
>
|
|||
|
|
<div class="collect-models-container">
|
|||
|
|
<div class="collect-models-header">
|
|||
|
|
<div style="display: flex; align-items: center">
|
|||
|
|
<ElButton
|
|||
|
|
type="info"
|
|||
|
|
size="small"
|
|||
|
|
@click="selectAllCollectModels"
|
|||
|
|
style="margin-right: 8px"
|
|||
|
|
>
|
|||
|
|
全选
|
|||
|
|
</ElButton>
|
|||
|
|
<ElButton type="warning" size="small" @click="unselectAllCollectModels">
|
|||
|
|
取消全选
|
|||
|
|
</ElButton>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="collect-models-content">
|
|||
|
|
<div v-if="collectModelsLoading" class="loading-container">
|
|||
|
|
<ElLoading text="正在采集车型数据..." />
|
|||
|
|
</div>
|
|||
|
|
<div v-else-if="collectModelsData.length === 0" class="empty-container">
|
|||
|
|
<ElEmpty description="暂无车型数据" />
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="models-table-container">
|
|||
|
|
<ElTable
|
|||
|
|
:data="collectModelsData"
|
|||
|
|
style="width: 100%"
|
|||
|
|
max-height="400"
|
|||
|
|
@selection-change="handleModelSelectionChange"
|
|||
|
|
>
|
|||
|
|
<ElTableColumn type="selection" width="55" />
|
|||
|
|
<ElTableColumn prop="brand_name" label="品牌" width="100" />
|
|||
|
|
<ElTableColumn prop="series_name" label="车系" width="120" />
|
|||
|
|
<ElTableColumn prop="title" label="车型名称" min-width="200" show-overflow-tooltip />
|
|||
|
|
<ElTableColumn prop="year" label="年款" width="80" />
|
|||
|
|
<ElTableColumn prop="msrp" label="指导价" width="120">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<span v-if="scope.row.msrp" class="price-text">
|
|||
|
|
¥{{ formatPrice(scope.row.msrp) }}
|
|||
|
|
</span>
|
|||
|
|
<span v-else>-</span>
|
|||
|
|
</template>
|
|||
|
|
</ElTableColumn>
|
|||
|
|
</ElTable>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<template #footer>
|
|||
|
|
<div class="dialog-footer">
|
|||
|
|
<ElButton @click="collectModelsDialogVisible = false">取消</ElButton>
|
|||
|
|
<ElButton
|
|||
|
|
type="primary"
|
|||
|
|
@click="saveCollectModels"
|
|||
|
|
:disabled="selectedModels.length === 0"
|
|||
|
|
>
|
|||
|
|
保存选中车型 ({{ selectedModels.length }})
|
|||
|
|
</ElButton>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</ElDialog>
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="mobile-hide-tip">
|
|||
|
|
<p>该页面暂不支持移动端访问</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|||
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|||
|
|
import { Plus } from '@element-plus/icons-vue'
|
|||
|
|
import { vehicleService } from '@/api/crmpc/vehicleApi'
|
|||
|
|
import { useAuth } from '@/composables/useAuth'
|
|||
|
|
import { useWindowSize } from '@vueuse/core'
|
|||
|
|
import { useUploadHeaders } from '@/composables/useUploadHeaders'
|
|||
|
|
import { ElLoading } from 'element-plus'
|
|||
|
|
const { uploadHeaders } = useUploadHeaders()
|
|||
|
|
let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
|
|||
|
|
const { hasAuth } = useAuth()
|
|||
|
|
defineOptions({ name: 'CrmVehicleBrand' })
|
|||
|
|
const { width } = useWindowSize()
|
|||
|
|
const isMobile = computed(() => width.value < 500)
|
|||
|
|
const logourl = ref('')
|
|||
|
|
// 左侧 品牌
|
|||
|
|
const brandLoading = ref(false)
|
|||
|
|
const brandKeyword = ref<string>('')
|
|||
|
|
const brandTableData = ref<any[]>([])
|
|||
|
|
const brandPagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
|
|||
|
|
const activeBrand = ref<any | null>(null)
|
|||
|
|
|
|||
|
|
const brandFormRef = ref<FormInstance>()
|
|||
|
|
const brandDialogVisible = ref(false)
|
|||
|
|
const brandDialogType = ref<'add' | 'edit'>('add')
|
|||
|
|
const brandForm = reactive<any>({
|
|||
|
|
id: '',
|
|||
|
|
brand_code: '',
|
|||
|
|
brand_name: '',
|
|||
|
|
logo: '',
|
|||
|
|
hot: 0,
|
|||
|
|
description: '',
|
|||
|
|
sort: 0,
|
|||
|
|
status: 1
|
|||
|
|
})
|
|||
|
|
const brandRules = reactive<FormRules>({
|
|||
|
|
brand_code: [{ required: true, message: '请输入品牌编码', trigger: 'blur' }],
|
|||
|
|
brand_name: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }]
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const getBrandList = async () => {
|
|||
|
|
brandLoading.value = true
|
|||
|
|
try {
|
|||
|
|
const { currentPage, pageSize } = brandPagination
|
|||
|
|
const { records, current, size, total } = await vehicleService.getBrandList({
|
|||
|
|
current: currentPage,
|
|||
|
|
size: pageSize,
|
|||
|
|
keyword: brandKeyword.value
|
|||
|
|
})
|
|||
|
|
brandTableData.value = records
|
|||
|
|
Object.assign(brandPagination, { currentPage: current, pageSize: size, total })
|
|||
|
|
if (!activeBrand.value && records && records.length) {
|
|||
|
|
activeBrand.value = records[0]
|
|||
|
|
await getSeriesList()
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
brandLoading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const getBrandListseach = async () => {
|
|||
|
|
brandPagination.currentPage = 1
|
|||
|
|
await getBrandList()
|
|||
|
|
}
|
|||
|
|
const handleBrandRowClick = async (row: any) => {
|
|||
|
|
activeBrand.value = row
|
|||
|
|
seriesPagination.currentPage = 1
|
|||
|
|
await getSeriesList()
|
|||
|
|
}
|
|||
|
|
const handleBrandSizeChange = (val: number) => {
|
|||
|
|
brandPagination.pageSize = val
|
|||
|
|
getBrandList()
|
|||
|
|
}
|
|||
|
|
const handleBrandCurrentChange = (val: number) => {
|
|||
|
|
brandPagination.currentPage = val
|
|||
|
|
getBrandList()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const showBrandDialog = (type: 'add' | 'edit', row?: any) => {
|
|||
|
|
brandDialogVisible.value = true
|
|||
|
|
brandDialogType.value = type
|
|||
|
|
if (type === 'edit' && row) {
|
|||
|
|
logourl.value = row.logo_full
|
|||
|
|
Object.assign(brandForm, {
|
|||
|
|
id: row.id,
|
|||
|
|
brand_code: row.brand_code,
|
|||
|
|
brand_name: row.brand_name,
|
|||
|
|
hot: row.hot,
|
|||
|
|
logo: row.logo,
|
|||
|
|
description: row.description,
|
|||
|
|
sort: row.sort ?? 0,
|
|||
|
|
status: row.status ?? 1
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
Object.assign(brandForm, {
|
|||
|
|
id: '',
|
|||
|
|
brand_code: '',
|
|||
|
|
brand_name: '',
|
|||
|
|
logo: '',
|
|||
|
|
hot: 0,
|
|||
|
|
description: '',
|
|||
|
|
sort: 0,
|
|||
|
|
status: 1
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const handleBrandDelete = (row: any) => {
|
|||
|
|
ElMessageBox.confirm('确定删除该品牌吗？删除后其系列也可能被清理。', '删除确认', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'error'
|
|||
|
|
}).then(async () => {
|
|||
|
|
const { message } = await vehicleService.brandDelete({ id: row.id })
|
|||
|
|
ElMessage.success(message)
|
|||
|
|
if (activeBrand.value && activeBrand.value.id === row.id) {
|
|||
|
|
activeBrand.value = null
|
|||
|
|
seriesTableData.value = []
|
|||
|
|
seriesPagination.total = 0
|
|||
|
|
}
|
|||
|
|
getBrandList()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const handleBrandSubmit = async (formEl: FormInstance | undefined) => {
|
|||
|
|
if (!formEl) return
|
|||
|
|
await formEl.validate(async (valid) => {
|
|||
|
|
if (!valid) return
|
|||
|
|
if (brandDialogType.value === 'add') {
|
|||
|
|
const { message } = await vehicleService.brandAdd({
|
|||
|
|
brand_code: brandForm.brand_code,
|
|||
|
|
brand_name: brandForm.brand_name,
|
|||
|
|
logo: brandForm.logo,
|
|||
|
|
hot: brandForm.hot,
|
|||
|
|
description: brandForm.description,
|
|||
|
|
sort: brandForm.sort,
|
|||
|
|
status: brandForm.status
|
|||
|
|
})
|
|||
|
|
ElMessage.success(message)
|
|||
|
|
} else {
|
|||
|
|
const { message } = await vehicleService.brandEdit(brandForm)
|
|||
|
|
ElMessage.success(message)
|
|||
|
|
}
|
|||
|
|
brandDialogVisible.value = false
|
|||
|
|
getBrandList()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 右侧 系列
|
|||
|
|
const seriesLoading = ref(false)
|
|||
|
|
const seriesKeyword = ref<string>('')
|
|||
|
|
const seriesTableData = ref<any[]>([])
|
|||
|
|
const seriesTableRef = ref()
|
|||
|
|
const seriesPagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
|
|||
|
|
|
|||
|
|
const seriesFormRef = ref<FormInstance>()
|
|||
|
|
const seriesDialogVisible = ref(false)
|
|||
|
|
const seriesDialogType = ref<'add' | 'edit'>('add')
|
|||
|
|
const seriesForm = reactive<any>({
|
|||
|
|
series_code: '',
|
|||
|
|
series_name: '',
|
|||
|
|
description: '',
|
|||
|
|
sort: 0,
|
|||
|
|
status: 1
|
|||
|
|
})
|
|||
|
|
const seriesRules = reactive<FormRules>({
|
|||
|
|
series_name: [{ required: true, message: '请输入系列名称', trigger: 'blur' }]
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 系列列表弹出层相关
|
|||
|
|
const seriesListDialogVisible = ref(false)
|
|||
|
|
const currentBrand = ref<any | null>(null)
|
|||
|
|
const seriesListLoading = ref(false)
|
|||
|
|
const seriesListKeyword = ref<string>('')
|
|||
|
|
const seriesListTableData = ref<any[]>([])
|
|||
|
|
const seriesListTableRef = ref()
|
|||
|
|
const seriesListPagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
|
|||
|
|
|
|||
|
|
// 车系采集弹出层相关
|
|||
|
|
const collectSeriesDialogVisible = ref(false)
|
|||
|
|
const currentCollectBrand = ref<any | null>(null)
|
|||
|
|
const collectSeriesLoading = ref(false)
|
|||
|
|
const collectSeriesData = ref<any[]>([])
|
|||
|
|
const selectedSeriesIds = ref<string[]>([])
|
|||
|
|
|
|||
|
|
// 车型列表弹出层相关
|
|||
|
|
const vehicleListDialogVisible = ref(false)
|
|||
|
|
const currentVehicleBrand = ref<any | null>(null)
|
|||
|
|
const vehicleListLoading = ref(false)
|
|||
|
|
const vehicleListKeyword = ref<string>('')
|
|||
|
|
const vehicleListTableData = ref<any[]>([])
|
|||
|
|
const vehicleListTableRef = ref()
|
|||
|
|
const vehicleListPagination = reactive({ currentPage: 1, pageSize: 10, total: 0 })
|
|||
|
|
|
|||
|
|
// 车型采集弹出层相关
|
|||
|
|
const collectModelsDialogVisible = ref(false)
|
|||
|
|
const currentCollectSeries = ref<any | null>(null)
|
|||
|
|
const collectModelsLoading = ref(false)
|
|||
|
|
const collectModelsData = ref<any[]>([])
|
|||
|
|
const selectedModels = ref<any[]>([])
|
|||
|
|
|
|||
|
|
const getSeriesList = async () => {
|
|||
|
|
if (!activeBrand.value) return
|
|||
|
|
seriesLoading.value = true
|
|||
|
|
try {
|
|||
|
|
const { currentPage, pageSize } = seriesPagination
|
|||
|
|
const { records, current, size, total } = await vehicleService.getSeriesList({
|
|||
|
|
current: currentPage,
|
|||
|
|
size: pageSize,
|
|||
|
|
keyword: seriesKeyword.value,
|
|||
|
|
brand_id: activeBrand.value.id
|
|||
|
|
})
|
|||
|
|
seriesTableData.value = records
|
|||
|
|
Object.assign(seriesPagination, { currentPage: current, pageSize: size, total })
|
|||
|
|
} finally {
|
|||
|
|
seriesLoading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const handleSeriesSizeChange = (val: number) => {
|
|||
|
|
seriesPagination.pageSize = val
|
|||
|
|
getSeriesList()
|
|||
|
|
}
|
|||
|
|
const handleSeriesCurrentChange = (val: number) => {
|
|||
|
|
seriesPagination.currentPage = val
|
|||
|
|
getSeriesList()
|
|||
|
|
}
|
|||
|
|
const showSeriesDialog = (type: 'add' | 'edit', row?: any) => {
|
|||
|
|
seriesDialogVisible.value = true
|
|||
|
|
seriesDialogType.value = type
|
|||
|
|
if (type === 'edit' && row) {
|
|||
|
|
Object.assign(seriesForm, {
|
|||
|
|
id: row.id,
|
|||
|
|
series_code: row.series_code,
|
|||
|
|
series_name: row.series_name,
|
|||
|
|
description: row.description,
|
|||
|
|
sort: row.sort ?? 0,
|
|||
|
|
status: row.status ?? 1
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
Object.assign(seriesForm, {
|
|||
|
|
id: '',
|
|||
|
|
series_code: '',
|
|||
|
|
series_name: '',
|
|||
|
|
description: '',
|
|||
|
|
sort: 0,
|
|||
|
|
status: 1
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const handleSeriesDelete = (row: any) => {
|
|||
|
|
ElMessageBox.confirm('确定删除该系列吗？', '删除确认', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'error'
|
|||
|
|
}).then(async () => {
|
|||
|
|
const { message } = await vehicleService.seriesDelete({ id: row.id })
|
|||
|
|
ElMessage.success(message)
|
|||
|
|
getSeriesList()
|
|||
|
|
// 如果系列列表弹出层打开，也要刷新弹出层的数据
|
|||
|
|
if (seriesListDialogVisible.value) {
|
|||
|
|
getSeriesListForDialog()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
const handleSeriesSubmit = async (formEl: FormInstance | undefined) => {
|
|||
|
|
if (!formEl) return
|
|||
|
|
// 优先使用当前品牌（弹出层中的品牌），否则使用活跃品牌
|
|||
|
|
const brandId = currentBrand.value?.id || activeBrand.value?.id
|
|||
|
|
if (!brandId) return
|
|||
|
|
await formEl.validate(async (valid) => {
|
|||
|
|
if (!valid) return
|
|||
|
|
if (seriesDialogType.value === 'add') {
|
|||
|
|
const { message } = await vehicleService.seriesAdd({
|
|||
|
|
brand_id: brandId,
|
|||
|
|
series_name: seriesForm.series_name,
|
|||
|
|
description: seriesForm.description,
|
|||
|
|
sort: seriesForm.sort,
|
|||
|
|
status: seriesForm.status
|
|||
|
|
})
|
|||
|
|
ElMessage.success(message)
|
|||
|
|
} else {
|
|||
|
|
const { message } = await vehicleService.seriesEdit({
|
|||
|
|
id: seriesForm.id,
|
|||
|
|
brand_id: brandId,
|
|||
|
|
series_name: seriesForm.series_name,
|
|||
|
|
description: seriesForm.description,
|
|||
|
|
sort: seriesForm.sort,
|
|||
|
|
status: seriesForm.status
|
|||
|
|
})
|
|||
|
|
ElMessage.success(message)
|
|||
|
|
}
|
|||
|
|
seriesDialogVisible.value = false
|
|||
|
|
getSeriesList()
|
|||
|
|
// 如果系列列表弹出层打开，也要刷新弹出层的数据
|
|||
|
|
if (seriesListDialogVisible.value) {
|
|||
|
|
getSeriesListForDialog()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示系列列表弹出层
|
|||
|
|
const showSeriesListDialog = async (brand: any) => {
|
|||
|
|
currentBrand.value = brand
|
|||
|
|
seriesListDialogVisible.value = true
|
|||
|
|
seriesListPagination.currentPage = 1
|
|||
|
|
seriesListKeyword.value = ''
|
|||
|
|
await getSeriesListForDialog()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取系列列表数据（用于弹出层）
|
|||
|
|
const getSeriesListForDialog = async () => {
|
|||
|
|
if (!currentBrand.value) return
|
|||
|
|
seriesListLoading.value = true
|
|||
|
|
try {
|
|||
|
|
const { currentPage, pageSize } = seriesListPagination
|
|||
|
|
const { records, current, size, total } = await vehicleService.getSeriesList({
|
|||
|
|
current: currentPage,
|
|||
|
|
size: pageSize,
|
|||
|
|
keyword: seriesListKeyword.value,
|
|||
|
|
brand_id: currentBrand.value.id
|
|||
|
|
})
|
|||
|
|
seriesListTableData.value = records
|
|||
|
|
Object.assign(seriesListPagination, { currentPage: current, pageSize: size, total })
|
|||
|
|
} finally {
|
|||
|
|
seriesListLoading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 系列列表分页处理
|
|||
|
|
const handleSeriesListSizeChange = (val: number) => {
|
|||
|
|
seriesListPagination.pageSize = val
|
|||
|
|
getSeriesListForDialog()
|
|||
|
|
}
|
|||
|
|
const handleSeriesListCurrentChange = (val: number) => {
|
|||
|
|
seriesListPagination.currentPage = val
|
|||
|
|
getSeriesListForDialog()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 车型列表弹出层相关方法
|
|||
|
|
const showVehicleListDialog = async (brand: any) => {
|
|||
|
|
currentVehicleBrand.value = brand
|
|||
|
|
vehicleListDialogVisible.value = true
|
|||
|
|
vehicleListPagination.currentPage = 1
|
|||
|
|
vehicleListKeyword.value = ''
|
|||
|
|
await getVehicleListForDialog()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取车型列表数据（用于弹出层）
|
|||
|
|
const getVehicleListForDialog = async () => {
|
|||
|
|
if (!currentVehicleBrand.value) return
|
|||
|
|
vehicleListLoading.value = true
|
|||
|
|
try {
|
|||
|
|
const { currentPage, pageSize } = vehicleListPagination
|
|||
|
|
const { records, current, size, total } = await vehicleService.getVehicleList({
|
|||
|
|
current: currentPage,
|
|||
|
|
size: pageSize,
|
|||
|
|
keyword: vehicleListKeyword.value,
|
|||
|
|
series_id: currentVehicleBrand.value.id
|
|||
|
|
})
|
|||
|
|
vehicleListTableData.value = records
|
|||
|
|
Object.assign(vehicleListPagination, { currentPage: current, pageSize: size, total })
|
|||
|
|
} finally {
|
|||
|
|
vehicleListLoading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 车型列表分页处理
|
|||
|
|
const handleVehicleListSizeChange = (val: number) => {
|
|||
|
|
vehicleListPagination.pageSize = val
|
|||
|
|
getVehicleListForDialog()
|
|||
|
|
}
|
|||
|
|
const handleVehicleListCurrentChange = (val: number) => {
|
|||
|
|
vehicleListPagination.currentPage = val
|
|||
|
|
getVehicleListForDialog()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Logo上传处理collectVehicleSeries
|
|||
|
|
const handleLogoSuccess = (response: any) => {
|
|||
|
|
brandForm.logo = response.url || (response.data && response.data.file_name) || ''
|
|||
|
|
// 如需同步到 form.picture
|
|||
|
|
logourl.value = response.url || (response.data && response.data.file_url) || ''
|
|||
|
|
ElMessage.success('Logo上传成功')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const beforeLogoUpload = (file: File) => {
|
|||
|
|
const isImage = file.type.startsWith('image/')
|
|||
|
|
const isLt2M = file.size / 1024 / 1024 < 2
|
|||
|
|
|
|||
|
|
if (!isImage) {
|
|||
|
|
ElMessage.error('只能上传图片文件!')
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
if (!isLt2M) {
|
|||
|
|
ElMessage.error('图片大小不能超过 2MB!')
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
return true
|
|||
|
|
}
|
|||
|
|
// 车系采集
|
|||
|
|
const Vehicleseries = async (row: any) => {
|
|||
|
|
try {
|
|||
|
|
currentCollectBrand.value = row
|
|||
|
|
collectSeriesDialogVisible.value = true
|
|||
|
|
collectSeriesLoading.value = true
|
|||
|
|
collectSeriesData.value = []
|
|||
|
|
selectedSeriesIds.value = []
|
|||
|
|
// 调用后端接口获取车系数据
|
|||
|
|
const response = await vehicleService.collectVehicleSeries({ brand_id: row.id })
|
|||
|
|
// 假设后端返回的数据格式为 { data: [...] } 或直接是数组
|
|||
|
|
collectSeriesData.value = response.series || response || []
|
|||
|
|
ElMessage.success(`成功采集到 ${collectSeriesData.value.length} 个车系`)
|
|||
|
|
} catch (error: any) {
|
|||
|
|
ElMessage.error(error.message || '车系采集失败')
|
|||
|
|
} finally {
|
|||
|
|
collectSeriesLoading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 车系采集相关方法
|
|||
|
|
const getSeriesKey = (series: any) => (series && (series.id ?? series.series_name)) ?? series
|
|||
|
|
const isSeriesSelected = (series: any) => selectedSeriesIds.value.includes(getSeriesKey(series))
|
|||
|
|
const setSeriesSelected = (series: any, checked: boolean) => {
|
|||
|
|
const key = getSeriesKey(series)
|
|||
|
|
const index = selectedSeriesIds.value.indexOf(key)
|
|||
|
|
if (checked) {
|
|||
|
|
if (index === -1) selectedSeriesIds.value.push(key)
|
|||
|
|
} else {
|
|||
|
|
if (index > -1) selectedSeriesIds.value.splice(index, 1)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const onSeriesItemClick = (series: any) => {
|
|||
|
|
setSeriesSelected(series, !isSeriesSelected(series))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const selectAllCollectSeries = () => {
|
|||
|
|
selectedSeriesIds.value = collectSeriesData.value.map((series) => getSeriesKey(series))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const unselectAllCollectSeries = () => {
|
|||
|
|
selectedSeriesIds.value = []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const saveCollectSeries = async () => {
|
|||
|
|
if (!currentCollectBrand.value || selectedSeriesIds.value.length === 0) {
|
|||
|
|
ElMessage.warning('请选择要保存的车系')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 支持后端返回为字符串数组或对象数组两种格式
|
|||
|
|
const selectedSeriesRaw = collectSeriesData.value.filter((series: any) => {
|
|||
|
|
const key = (series && (series.id ?? series.series_name)) ?? series
|
|||
|
|
return selectedSeriesIds.value.includes(key)
|
|||
|
|
})
|
|||
|
|
// const selectedSeries = selectedSeriesRaw.map((item: any) =>
|
|||
|
|
// typeof item === 'string' ? { series_name: item } : item
|
|||
|
|
// )
|
|||
|
|
await vehicleService.saveVehicleSeries({
|
|||
|
|
brand_id: currentCollectBrand.value.id,
|
|||
|
|
series: selectedSeriesRaw
|
|||
|
|
})
|
|||
|
|
ElMessage.success(`成功保存 ${selectedSeriesIds.value.length} 个车系`)
|
|||
|
|
collectSeriesDialogVisible.value = false
|
|||
|
|
// 刷新品牌列表和系列列表
|
|||
|
|
await getBrandList()
|
|||
|
|
if (activeBrand.value && activeBrand.value.id === currentCollectBrand.value.id) {
|
|||
|
|
await getSeriesList()
|
|||
|
|
}
|
|||
|
|
} catch (error: any) {
|
|||
|
|
ElMessage.error(error.message || '保存车系失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 车型采集相关方法
|
|||
|
|
const collectVehicleModels = async (series: any) => {
|
|||
|
|
try {
|
|||
|
|
currentCollectSeries.value = series
|
|||
|
|
collectModelsDialogVisible.value = true
|
|||
|
|
collectModelsData.value = []
|
|||
|
|
selectedModels.value = []
|
|||
|
|
|
|||
|
|
collectModelsLoading.value = true
|
|||
|
|
|
|||
|
|
// 调用后端接口获取车型数据
|
|||
|
|
const response = await vehicleService.collectVehicleModels({ brand_series_id: series.id })
|
|||
|
|
|
|||
|
|
// 后端返回的数据格式为数组
|
|||
|
|
collectModelsData.value = response || []
|
|||
|
|
|
|||
|
|
ElMessage.success(`成功采集到 ${collectModelsData.value.length} 个车型`)
|
|||
|
|
} catch (error: any) {
|
|||
|
|
ElMessage.error(error.message || '车型采集失败')
|
|||
|
|
} finally {
|
|||
|
|
collectModelsLoading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleModelSelectionChange = (selection: any[]) => {
|
|||
|
|
selectedModels.value = selection
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const selectAllCollectModels = () => {
|
|||
|
|
// 表格全选通过ref调用
|
|||
|
|
const tableRef = document.querySelector('.models-table-container .el-table')
|
|||
|
|
if (tableRef) {
|
|||
|
|
// 触发全选
|
|||
|
|
const checkboxes = tableRef.querySelectorAll('thead .el-checkbox')
|
|||
|
|
if (checkboxes.length > 0) {
|
|||
|
|
(checkboxes[0] as HTMLElement).click()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const unselectAllCollectModels = () => {
|
|||
|
|
selectedModels.value = []
|
|||
|
|
// 清空表格选择
|
|||
|
|
const tableRef = document.querySelector('.models-table-container .el-table')
|
|||
|
|
if (tableRef) {
|
|||
|
|
const checkboxes = tableRef.querySelectorAll('tbody .el-checkbox')
|
|||
|
|
checkboxes.forEach((checkbox: any) => {
|
|||
|
|
if (checkbox.querySelector('input')?.checked) {
|
|||
|
|
checkbox.click()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const saveCollectModels = async () => {
|
|||
|
|
if (!currentCollectSeries.value || selectedModels.value.length === 0) {
|
|||
|
|
ElMessage.warning('请选择要保存的车型')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await vehicleService.saveVehicleModels({
|
|||
|
|
series_id: currentCollectSeries.value.id,
|
|||
|
|
models: selectedModels.value
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
ElMessage.success(`成功保存 ${selectedModels.value.length} 个车型`)
|
|||
|
|
collectModelsDialogVisible.value = false
|
|||
|
|
|
|||
|
|
// 刷新品牌列表和系列列表
|
|||
|
|
await getBrandList()
|
|||
|
|
if (activeBrand.value) {
|
|||
|
|
await getSeriesList()
|
|||
|
|
}
|
|||
|
|
} catch (error: any) {
|
|||
|
|
ElMessage.error(error.message || '保存车型失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化价格显示
|
|||
|
|
const formatPrice = (price: number | string) => {
|
|||
|
|
if (!price) return '0'
|
|||
|
|
const numPrice = typeof price === 'string' ? parseFloat(price) : price
|
|||
|
|
return numPrice.toLocaleString()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(async () => {
|
|||
|
|
await getBrandList()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
:deep(.el-table__empty-block) {
|
|||
|
|
height: 100% !important;
|
|||
|
|
min-height: 200px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.dict-layout {
|
|||
|
|
.dict-type-card,
|
|||
|
|
.dict-item-card {
|
|||
|
|
background: var(--el-bg-color);
|
|||
|
|
padding: 12px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.card-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
.left {
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.right {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.muted {
|
|||
|
|
color: var(--el-text-color-secondary);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.type-pagination {
|
|||
|
|
margin-top: 8px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.brand-logo-cell {
|
|||
|
|
display: flex;
|
|||
|
|
//justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
object-fit: cover;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-placeholder {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
background: var(--el-color-primary-light-8);
|
|||
|
|
color: var(--el-color-primary);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-uploader {
|
|||
|
|
:deep(.el-upload) {
|
|||
|
|
border: 1px dashed var(--el-border-color);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
transition: var(--el-transition-duration-fast);
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
border-color: var(--el-color-primary);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-uploader-icon {
|
|||
|
|
font-size: 28px;
|
|||
|
|
color: #8c939d;
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-preview {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
display: block;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-footer {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.series-list-container {
|
|||
|
|
background: transparent;
|
|||
|
|
.series-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
:deep(.art-table) {
|
|||
|
|
background: transparent;
|
|||
|
|
.el-table {
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
.el-table tr {
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
.el-table th.el-table__cell {
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
.el-table__header-wrapper {
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
.el-table__body-wrapper {
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
.el-table__empty-block {
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.collect-series-container {
|
|||
|
|
background: transparent;
|
|||
|
|
|
|||
|
|
.collect-series-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
padding-bottom: 15px;
|
|||
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.collect-series-content {
|
|||
|
|
min-height: 400px;
|
|||
|
|
|
|||
|
|
.loading-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 400px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 400px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.series-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|||
|
|
gap: 12px;
|
|||
|
|
max-height: 500px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding: 8px;
|
|||
|
|
|
|||
|
|
.series-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding:5px 12px;
|
|||
|
|
border: 1px solid var(--el-border-color-lighter);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
background: var(--el-bg-color);
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
border-color: var(--el-color-primary);
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.selected {
|
|||
|
|
border-color: var(--el-color-primary);
|
|||
|
|
background: var(--el-color-primary-light-9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.series-checkbox {
|
|||
|
|
margin-right: 12px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.series-info {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
|
|||
|
|
.series-name {
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--el-text-color-primary);
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.series-description {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--el-text-color-secondary);
|
|||
|
|
margin-bottom: 2px;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.series-code {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--el-text-color-placeholder);
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.collect-models-container {
|
|||
|
|
background: transparent;
|
|||
|
|
|
|||
|
|
.collect-models-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
padding-bottom: 15px;
|
|||
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.collect-models-content {
|
|||
|
|
min-height: 400px;
|
|||
|
|
|
|||
|
|
.loading-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 400px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 400px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.models-table-container {
|
|||
|
|
.price-text {
|
|||
|
|
color: var(--el-color-danger);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 车型列表弹出层样式
|
|||
|
|
.vehicle-list-container {
|
|||
|
|
.vehicle-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
padding-bottom: 12px;
|
|||
|
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-text {
|
|||
|
|
color: var(--el-color-danger);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|