浅念
655 lines
22 KiB
Vue
655 lines
22 KiB
Vue
<template>
|
||
<div class="page-content">
|
||
<div v-if="!isMobile" class="dict-layout">
|
||
<ElRow :gutter="16">
|
||
<ElCol :xs="24" :sm="10" :lg="10">
|
||
<div class="dict-type-card">
|
||
<div class="card-header">
|
||
<div style="display: flex; align-items: center">
|
||
<ElInput
|
||
v-model="brandKeyword"
|
||
placeholder="搜索品牌名称/编码"
|
||
clearable
|
||
@keyup.enter="getBrandList"
|
||
/>
|
||
<ElButton style="margin-left: 8px" @click="getBrandList" v-ripple>搜索</ElButton>
|
||
</div>
|
||
<ElButton
|
||
type="primary"
|
||
style="margin-left: 8px"
|
||
@click="showBrandDialog('add')"
|
||
v-if="hasAuth('brand@add')"
|
||
>新增品牌</ElButton
|
||
>
|
||
</div>
|
||
<el-table
|
||
:data="brandTableData"
|
||
v-loading="brandLoading"
|
||
height="calc(100vh - 280px)"
|
||
@row-click="handleBrandRowClick"
|
||
:highlight-current-row="true"
|
||
:row-key="'id'"
|
||
>
|
||
<el-table-column prop="brand_code" label="品牌编码" />
|
||
<el-table-column prop="brand_name" label="品牌名称" />
|
||
<el-table-column label="Logo" width="80">
|
||
<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="140" align="center">
|
||
<template #default="scope">
|
||
<el-button
|
||
link
|
||
size="small"
|
||
@click.stop="showBrandDialog('edit', scope.row)"
|
||
v-if="hasAuth('brand@update')"
|
||
>编辑</el-button
|
||
>
|
||
<el-button
|
||
link
|
||
type="danger"
|
||
size="small"
|
||
@click.stop="handleBrandDelete(scope.row)"
|
||
v-if="hasAuth('brand@destroy')"
|
||
>删除</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
<template #empty>
|
||
<el-empty description="暂无品牌" v-show="!brandLoading" />
|
||
</template>
|
||
</el-table>
|
||
<div class="type-pagination">
|
||
<el-pagination
|
||
background
|
||
layout="total, prev, pager, next"
|
||
:current-page="brandPagination.currentPage"
|
||
:page-size="brandPagination.pageSize"
|
||
:total="brandPagination.total"
|
||
:page-sizes="[10, 20, 30, 50]"
|
||
:pager-count="4"
|
||
@current-change="handleBrandCurrentChange"
|
||
@size-change="handleBrandSizeChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :xs="24" :sm="14" :lg="14">
|
||
<div class="dict-item-card">
|
||
<div class="card-header">
|
||
<div class="left">
|
||
<span v-if="activeBrand"
|
||
>当前品牌：{{ activeBrand.brand_name }}（{{ activeBrand.brand_code }}）</span
|
||
>
|
||
<span v-else class="muted">请选择左侧车辆品牌</span>
|
||
<ElButton
|
||
type="primary"
|
||
style="margin-left: 8px"
|
||
@click="showSeriesDialog('add')"
|
||
:disabled="!activeBrand"
|
||
v-if="hasAuth('series@add')"
|
||
>新增系列</ElButton
|
||
>
|
||
</div>
|
||
<div class="right">
|
||
<ElInput
|
||
v-model="seriesKeyword"
|
||
placeholder="搜索系列名称/编码"
|
||
clearable
|
||
style="width: 240px"
|
||
@keyup.enter="getSeriesList"
|
||
/>
|
||
<ElButton style="margin-left: 8px" @click="getSeriesList" v-ripple>搜索</ElButton>
|
||
</div>
|
||
</div>
|
||
<ArtTable
|
||
ref="seriesTableRef"
|
||
row-key="id"
|
||
:loading="seriesLoading"
|
||
:data="seriesTableData"
|
||
:currentPage="seriesPagination.currentPage"
|
||
:pageSize="seriesPagination.pageSize"
|
||
:total="seriesPagination.total"
|
||
@size-change="handleSeriesSizeChange"
|
||
@current-change="handleSeriesCurrentChange"
|
||
>
|
||
<template #default>
|
||
<ElTableColumn label="系列编码" prop="series_code" min-width="120" />
|
||
<ElTableColumn label="系列名称" prop="series_name" min-width="140" />
|
||
<ElTableColumn
|
||
label="描述"
|
||
prop="description"
|
||
min-width="160"
|
||
show-overflow-tooltip
|
||
/>
|
||
<!-- <ElTableColumn label="排序" prop="sort" width="80" /> -->
|
||
<ElTableColumn label="状态" prop="status">
|
||
<template #default="scope">
|
||
<ElTag :type="scope.row.status ? 'success' : 'info'">{{
|
||
scope.row.status ? '启用' : '停用'
|
||
}}</ElTag>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn fixed="right" label="操作" min-width="140px" align="center">
|
||
<template #default="scope">
|
||
<ElRow>
|
||
<el-button
|
||
link
|
||
@click="showSeriesDialog('edit', scope.row)"
|
||
v-if="hasAuth('series@update')"
|
||
>编辑</el-button
|
||
>
|
||
<el-button
|
||
type="danger"
|
||
link
|
||
@click="handleSeriesDelete(scope.row)"
|
||
v-if="hasAuth('series@destroy')"
|
||
>删除</el-button
|
||
>
|
||
</ElRow>
|
||
</template>
|
||
</ElTableColumn>
|
||
</template>
|
||
</ArtTable>
|
||
</div>
|
||
</ElCol>
|
||
</ElRow>
|
||
|
||
<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="
|
||
activeBrand ? `${activeBrand.brand_name}（${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>
|
||
</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/vehicleApi'
|
||
import { useAuth } from '@/composables/useAuth'
|
||
import { useWindowSize } from '@vueuse/core'
|
||
import { useUploadHeaders } from '@/composables/useUploadHeaders'
|
||
const { uploadHeaders } = useUploadHeaders()
|
||
let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
|
||
const { hasAuth } = useAuth()
|
||
defineOptions({ name: 'AdminVehicleBrand' })
|
||
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 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 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()
|
||
})
|
||
}
|
||
const handleSeriesSubmit = async (formEl: FormInstance | undefined) => {
|
||
if (!formEl || !activeBrand.value) return
|
||
await formEl.validate(async (valid) => {
|
||
if (!valid) return
|
||
if (seriesDialogType.value === 'add') {
|
||
const { message } = await vehicleService.seriesAdd({
|
||
brand_id: activeBrand.value.id,
|
||
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: activeBrand.value.id,
|
||
series_name: seriesForm.series_name,
|
||
description: seriesForm.description,
|
||
sort: seriesForm.sort,
|
||
status: seriesForm.status
|
||
})
|
||
ElMessage.success(message)
|
||
}
|
||
seriesDialogVisible.value = false
|
||
getSeriesList()
|
||
})
|
||
}
|
||
|
||
// Logo上传处理
|
||
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
|
||
}
|
||
|
||
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;
|
||
}
|
||
</style>
|