浅念
360 lines
10 KiB
Vue
360 lines
10 KiB
Vue
<template>
|
|
<div class="modification-page">
|
|
<div class="modification-toolbar boxshadow">
|
|
<div class="modification-search-group">
|
|
<el-form-item label="关键字:" label-width="70px">
|
|
<el-input
|
|
style="min-width: 120px"
|
|
v-model="keyword"
|
|
placeholder="请输入关键字"
|
|
clearable
|
|
@keyup.enter="getModificationList"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="getModificationList" v-ripple>搜索</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
<div class="boxshadow">
|
|
<ElRow>
|
|
<div style="width: 12px"></div>
|
|
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
|
|
<ElButton
|
|
@click="showDialog('add')"
|
|
v-ripple
|
|
v-if="hasAuth('modification@add')"
|
|
type="primary"
|
|
>
|
|
新增改装项目
|
|
</ElButton>
|
|
</ElCol>
|
|
</ElRow>
|
|
<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>
|
|
<ElTableColumn label="项目编码" prop="code" min-width="120" />
|
|
<ElTableColumn label="项目名称" prop="name" min-width="150" />
|
|
<ElTableColumn label="改装类型" prop="type" width="120">
|
|
<template #default="scope">
|
|
<ElTag :type="getTypeTagType(scope.row.type)">
|
|
{{ getTypeLabel(scope.row.type) }}
|
|
</ElTag>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="排序" prop="sort" width="80" />
|
|
<ElTableColumn label="状态" prop="status" width="100">
|
|
<template #default="scope">
|
|
<ElTag :type="scope.row.status ? 'success' : 'info'">
|
|
{{ scope.row.status ? '启用' : '停用' }}
|
|
</ElTag>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="创建时间" prop="created_at" min-width="160" />
|
|
<ElTableColumn fixed="right" label="操作" width="200px">
|
|
<template #default="scope">
|
|
<ElRow>
|
|
<el-button link @click="showDialog('edit', scope.row)">编辑</el-button>
|
|
<el-button
|
|
type="danger"
|
|
link
|
|
@click="deleteModification(scope.row)"
|
|
v-if="hasAuth('modification@destroy')"
|
|
>
|
|
删除
|
|
</el-button>
|
|
</ElRow>
|
|
</template>
|
|
</ElTableColumn>
|
|
</template>
|
|
</ArtTable>
|
|
</div>
|
|
|
|
<!-- 新增/编辑对话框 -->
|
|
<ElDialog
|
|
v-model="dialogVisible"
|
|
:title="dialogType === 'add' ? '新增改装项目' : '编辑改装项目'"
|
|
align-center
|
|
width="600px"
|
|
>
|
|
<ElForm ref="formRef" :model="form" :rules="rules" label-width="100px" class="form">
|
|
<ElFormItem label="项目编码" prop="code">
|
|
<ElInput v-model="form.code" placeholder="请输入改装项目编码" />
|
|
</ElFormItem>
|
|
<ElFormItem label="项目名称" prop="name">
|
|
<ElInput v-model="form.name" placeholder="请输入改装项目名称" />
|
|
</ElFormItem>
|
|
<ElFormItem label="改装类型" prop="type">
|
|
<el-select v-model="form.type" placeholder="请选择改装类型" style="width: 100%">
|
|
<el-option label="外观改装" :value="1" />
|
|
<el-option label="性能改装" :value="2" />
|
|
<el-option label="内饰改装" :value="3" />
|
|
<el-option label="电子设备" :value="4" />
|
|
<el-option label="其他" :value="5" />
|
|
</el-select>
|
|
</ElFormItem>
|
|
<ElFormItem label="排序" prop="sort">
|
|
<ElInputNumber v-model="form.sort" :min="0" :max="999" style="width: 100%" />
|
|
</ElFormItem>
|
|
<ElFormItem label="状态">
|
|
<ElSwitch v-model="form.status" :active-value="1" :inactive-value="0" />
|
|
</ElFormItem>
|
|
</ElForm>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<ElButton @click="dialogVisible = false">取消</ElButton>
|
|
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
|
|
</div>
|
|
</template>
|
|
</ElDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|
import { vehicleService } from '@/api/vehicleApi'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
|
|
const { hasAuth } = useAuth()
|
|
defineOptions({ name: 'AdminVehicleModification' })
|
|
|
|
// 响应式数据
|
|
const loading = ref(false)
|
|
const dialogVisible = ref(false)
|
|
const dialogType = ref('add')
|
|
const formRef = ref<FormInstance>()
|
|
const keyword = ref<string>('')
|
|
const typeFilter = ref<number | undefined>(undefined)
|
|
const statusFilter = ref<number | undefined>(undefined)
|
|
|
|
// 表单数据
|
|
const form = reactive<any>({
|
|
id: '',
|
|
code: '',
|
|
name: '',
|
|
type: 1,
|
|
status: 1,
|
|
sort: 0
|
|
})
|
|
|
|
// 表单验证规则
|
|
const rules = reactive<FormRules>({
|
|
code: [{ required: true, message: '请输入改装项目编码', trigger: 'blur' }],
|
|
name: [{ required: true, message: '请输入改装项目名称', trigger: 'blur' }],
|
|
type: [{ required: true, message: '请选择改装类型', trigger: 'change' }]
|
|
})
|
|
|
|
// 分页数据
|
|
const pagination = reactive({
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
total: 0
|
|
})
|
|
|
|
// 表格数据
|
|
const tableData = ref<any[]>([])
|
|
const tableRef = ref()
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
getModificationList()
|
|
})
|
|
|
|
// 监听搜索条件变化
|
|
watch([keyword, typeFilter, statusFilter], () => {
|
|
pagination.currentPage = 1
|
|
getModificationList()
|
|
})
|
|
|
|
// 获取改装项目列表
|
|
const getModificationList = async () => {
|
|
loading.value = true
|
|
try {
|
|
const { currentPage, pageSize } = pagination
|
|
const params = {
|
|
current: currentPage,
|
|
size: pageSize,
|
|
keyword: keyword.value
|
|
}
|
|
|
|
const { records, current, size, total } = await vehicleService.getModificationList(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 = (newPageSize: number) => {
|
|
pagination.pageSize = newPageSize
|
|
getModificationList()
|
|
}
|
|
|
|
const handleCurrentChange = (newCurrentPage: number) => {
|
|
pagination.currentPage = newCurrentPage
|
|
getModificationList()
|
|
}
|
|
|
|
// 显示对话框
|
|
const showDialog = (type: string, row?: any) => {
|
|
dialogVisible.value = true
|
|
dialogType.value = type
|
|
if (type === 'edit' && row) {
|
|
// 编辑模式
|
|
Object.assign(form, {
|
|
id: row.id,
|
|
code: row.code,
|
|
name: row.name,
|
|
type: row.type,
|
|
status: row.status,
|
|
sort: row.sort || 0
|
|
})
|
|
} else {
|
|
// 新增模式
|
|
Object.assign(form, {
|
|
id: '',
|
|
code: '',
|
|
name: '',
|
|
type: 1,
|
|
status: 1,
|
|
sort: 0
|
|
})
|
|
}
|
|
}
|
|
|
|
// 删除改装项目
|
|
const deleteModification = (row: any) => {
|
|
ElMessageBox.confirm('确定删除该改装项目吗？', '删除确认', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'error'
|
|
}).then(async () => {
|
|
try {
|
|
const { message } = await vehicleService.modificationDelete({ id: row.id })
|
|
ElMessage.success(message)
|
|
getModificationList()
|
|
} catch (error) {
|
|
console.error('删除失败:', error)
|
|
ElMessage.error('删除失败')
|
|
}
|
|
})
|
|
}
|
|
|
|
// 提交表单
|
|
const handleSubmit = async (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return
|
|
await formEl.validate(async (valid) => {
|
|
if (!valid) return
|
|
try {
|
|
if (dialogType.value === 'add') {
|
|
// 新增
|
|
const { message } = await vehicleService.modificationAdd({
|
|
code: form.code,
|
|
name: form.name,
|
|
type: form.type,
|
|
status: form.status,
|
|
sort: form.sort
|
|
})
|
|
ElMessage.success(message)
|
|
} else {
|
|
// 编辑
|
|
const { message } = await vehicleService.modificationEdit({
|
|
id: form.id,
|
|
code: form.code,
|
|
name: form.name,
|
|
type: form.type,
|
|
status: form.status,
|
|
sort: form.sort
|
|
})
|
|
ElMessage.success(message)
|
|
}
|
|
dialogVisible.value = false
|
|
getModificationList()
|
|
} catch (error) {
|
|
console.error('操作失败:', error)
|
|
ElMessage.error('操作失败')
|
|
}
|
|
})
|
|
}
|
|
|
|
// 获取类型标签样式
|
|
const getTypeTagType = (type: number): 'primary' | 'success' | 'warning' | 'info' | 'danger' => {
|
|
const typeMap: Record<number, 'primary' | 'success' | 'warning' | 'info' | 'danger'> = {
|
|
1: 'primary', // 外观改装
|
|
2: 'success', // 性能改装
|
|
3: 'warning', // 内饰改装
|
|
4: 'info', // 电子设备
|
|
5: 'danger' // 其他
|
|
}
|
|
return typeMap[type] || 'info'
|
|
}
|
|
|
|
// 获取类型标签文本
|
|
const getTypeLabel = (type: number) => {
|
|
const typeMap: Record<number, string> = {
|
|
1: '外观改装',
|
|
2: '性能改装',
|
|
3: '内饰改装',
|
|
4: '电子设备',
|
|
5: '其他'
|
|
}
|
|
return typeMap[type] || '未知类型'
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.el-table__empty-block) {
|
|
height: 100% !important;
|
|
min-height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modification-page {
|
|
background: var(--art-main-bg-color);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.modification-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
padding: 20px 20px;
|
|
background: var(--art-main-bg-color);
|
|
}
|
|
|
|
.modification-search-group {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.form {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.dialog-footer {
|
|
text-align: right;
|
|
}
|
|
|
|
.el-col2 {
|
|
margin-bottom: 16px;
|
|
}
|
|
</style>
|