|
|
@@ -38,6 +38,9 @@
|
|
|
|
|
|
<div class="list-toolbar">
|
|
|
<div class="list-toolbar-row">
|
|
|
+ <div class="list-toolbar-selected">
|
|
|
+ 已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
|
|
|
+ </div>
|
|
|
<el-button class="btn-main" type="primary" @click="handleAdd">
|
|
|
<el-icon><Plus /></el-icon>
|
|
|
新增分类
|
|
|
@@ -73,7 +76,7 @@
|
|
|
@import-success="handleCategoryImportSuccess"
|
|
|
@import-error="handleExcelImportError"
|
|
|
>
|
|
|
- 批量导入
|
|
|
+ <el-button class="btn-ghost">批量导入</el-button>
|
|
|
</ArtExcelImport>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -87,8 +90,15 @@
|
|
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
@selection-change="handleCategoryTableSelectionChange"
|
|
|
>
|
|
|
- <el-table-column type="selection" width="55" />
|
|
|
- <el-table-column prop="name" label="分类名称" min-width="150" class-name="col-category-name">
|
|
|
+ <el-table-column type="selection" width="55" align="center" header-align="center" />
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="分类名称"
|
|
|
+ min-width="150"
|
|
|
+ class-name="col-category-name"
|
|
|
+ align="center"
|
|
|
+ header-align="center"
|
|
|
+ >
|
|
|
<template #default="{ row }">
|
|
|
<div class="category-name-cell" :class="{ 'is-child': row.parentId }">
|
|
|
<span class="category-name-text">{{ row.name }}</span>
|
|
|
@@ -96,7 +106,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="图片" width="80">
|
|
|
+ <el-table-column label="图片" width="80" align="center" header-align="center">
|
|
|
<template #default="{ row }">
|
|
|
<el-image
|
|
|
v-if="row.imageUrl"
|
|
|
@@ -118,19 +128,21 @@
|
|
|
<span>{{ formatPriceCoefficient(row.priceCoefficient) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="sortOrder" label="排序" width="80" />
|
|
|
- <el-table-column prop="isActive" label="状态" width="80">
|
|
|
+ <el-table-column prop="sortOrder" label="排序" width="80" align="center" header-align="center" />
|
|
|
+ <el-table-column prop="isActive" label="状态" width="80" align="center" header-align="center">
|
|
|
<template #default="{ row }">
|
|
|
- <el-tag :type="row.isActive ? 'success' : 'danger'" size="small">
|
|
|
+ <el-tag :type="row.isActive ? 'success' : 'info'" size="small">
|
|
|
{{ row.isActive ? '启用' : '禁用' }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="createAt" label="创建时间" width="160" />
|
|
|
- <el-table-column label="操作" width="200" fixed="right">
|
|
|
+ <el-table-column prop="createAt" label="创建时间" width="160" align="center" header-align="center" />
|
|
|
+ <el-table-column label="操作" width="320" fixed="right" align="center" header-align="center">
|
|
|
<template #default="{ row }">
|
|
|
- <el-button type="primary" link @click="handleAddChild(row)" v-if="!row.parentId">新增子分类</el-button>
|
|
|
- <el-button class="btn-op-item primary" @click="handleEdit(row)">编辑</el-button>
|
|
|
+ <el-button class="btn-op-item primary" @click="handleAddChild(row)" v-if="!row.parentId">
|
|
|
+ 新增子分类
|
|
|
+ </el-button>
|
|
|
+ <el-button class="btn-op-item" :class="{ primary: row.parentId }" @click="handleEdit(row)">编辑</el-button>
|
|
|
<el-button class="btn-op-item" @click="handleDelete(row)">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -153,7 +165,13 @@
|
|
|
<!-- 基本信息区域 -->
|
|
|
<div class="form-section">
|
|
|
<div class="section-title">基本信息</div>
|
|
|
- <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="formData"
|
|
|
+ :rules="formRules"
|
|
|
+ label-position="top"
|
|
|
+ class="category-dialog-form"
|
|
|
+ >
|
|
|
<div class="form-row">
|
|
|
<el-form-item label="上级分类" class="flex-1">
|
|
|
<el-select v-model="formData.parentId" placeholder="请选择上级分类（空为顶级）" clearable>
|
|
|
@@ -179,8 +197,6 @@
|
|
|
<span class="price-coefficient-hint">填写数字表示对应百分比，例如 5 表示 5%</span>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
- </div>
|
|
|
- <div class="form-row">
|
|
|
<el-form-item label="分类图片" class="flex-1">
|
|
|
<div class="category-image-row">
|
|
|
<el-image
|
|
|
@@ -209,7 +225,7 @@
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
<div class="form-row">
|
|
|
- <el-form-item label="状态" v-if="isEdit" class="status-item">
|
|
|
+ <el-form-item label="状态" v-if="isEdit" class="flex-1">
|
|
|
<el-switch v-model="formData.isActive" />
|
|
|
</el-form-item>
|
|
|
</div>
|
|
|
@@ -319,8 +335,14 @@
|
|
|
</div>
|
|
|
|
|
|
<template #footer>
|
|
|
- <el-button class="btn-ghost" @click="dialogVisible = false">取消</el-button>
|
|
|
- <el-button class="btn-main" type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
|
|
|
+ <el-button class="btn-ghost" @click="dialogVisible = false">
|
|
|
+ <el-icon><Close /></el-icon>
|
|
|
+ 取消
|
|
|
+ </el-button>
|
|
|
+ <el-button class="btn-main" type="primary" @click="handleSubmit" :loading="submitLoading">
|
|
|
+ <el-icon><Check /></el-icon>
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
|
|
|
@@ -343,7 +365,6 @@
|
|
|
<el-table
|
|
|
ref="parameterTableRef"
|
|
|
:data="filteredAvailableParameters"
|
|
|
- border
|
|
|
stripe
|
|
|
row-key="id"
|
|
|
height="400"
|
|
|
@@ -377,8 +398,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
- <el-button @click="selectParameterVisible = false">取消</el-button>
|
|
|
- <el-button type="primary" @click="confirmSelectParameters">确定</el-button>
|
|
|
+ <el-button class="btn-ghost" @click="selectParameterVisible = false">
|
|
|
+ <el-icon><Close /></el-icon>
|
|
|
+ 取消
|
|
|
+ </el-button>
|
|
|
+ <el-button class="btn-main" type="primary" @click="confirmSelectParameters">
|
|
|
+ <el-icon><Check /></el-icon>
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</section>
|
|
|
@@ -390,7 +417,7 @@
|
|
|
import { ref, reactive, onMounted, nextTick, watch, computed } from 'vue'
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
import { withFullscreenLoading, fullscreenLoadingText } from '@/utils/fullscreen-loading'
|
|
|
- import { Plus, Search, Rank } from '@element-plus/icons-vue'
|
|
|
+ import { Plus, Search, Rank, Close, Check } from '@element-plus/icons-vue'
|
|
|
import { VueDraggable as draggable } from 'vue-draggable-plus'
|
|
|
import type { UploadFile } from 'element-plus'
|
|
|
import {
|
|
|
@@ -1186,6 +1213,24 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.list-toolbar {
|
|
|
+ border-bottom: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination.list-pager-bar {
|
|
|
+ border-top: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+.category-dialog-form {
|
|
|
+ :deep(.el-form-item__label) {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: var(--mint-text-muted);
|
|
|
+ padding: 0 0 4px;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.category-image-row { display: flex; gap: 12px; align-items: center; }
|
|
|
.category-image-placeholder {
|
|
|
width: 80px; height: 80px; border-radius: 8px;
|
|
|
@@ -1230,10 +1275,6 @@
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
- .status-item {
|
|
|
- width: 100px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.form-row:last-child {
|
|
|
@@ -1404,8 +1445,9 @@
|
|
|
}
|
|
|
|
|
|
.parameter-select-list {
|
|
|
- border: 1px solid #ebeef5;
|
|
|
- border-radius: 4px;
|
|
|
+ border: 1px solid var(--mint-border);
|
|
|
+ border-radius: var(--mint-radius);
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
/* 选择参数弹窗：可选值列多行完整展示 */
|
|
|
@@ -1429,8 +1471,7 @@
|
|
|
|
|
|
.parameter-select-filter {
|
|
|
padding: 12px;
|
|
|
- border-bottom: 1px solid #ebeef5;
|
|
|
- background: #fafafa;
|
|
|
+ background: transparent;
|
|
|
}
|
|
|
|
|
|
.text-gray {
|
