Skip to content

E
ElectricitySheep
Commit 9bda343f authored by 吴春's avatar 吴春
Browse files
Options

11

parent 15a62820
Hide whitespace changes
Inline Side-by-side
Showing with 162 additions and 196 deletions
src/components/tradePavilion/brandClassification.vue
View file @ 9bda343f
<template> <template>
<div class="brandClassification"> <div class="brandClassification">
<div class="head-title"> <div class="head-title">
<span>品牌分类管理</span> 品牌分类管理
<el-button style="float: right; margin-top: -5px" size="small" type="primary" @click="goAdd"> <div>
新增分类 <el-button style="float: right; margin-top: -25px" size="small" type="primary" @click="goAdd">
</el-button> 新增分类
</el-button>
</div>
</div> </div>
<div style="margin-top: 10px; background: #fff; padding: 20px"> <div style="margin-top: 10px; background: #fff; padding: 20px">
<div v-loading="loading" class="cat-container"> <div v-loading="loading" class="cat-container">
...@@ -56,8 +58,10 @@ ...@@ -56,8 +58,10 @@
</div> </div>
</div> </div>
<div class="item-actions"> <div class="item-actions">
<el-button @click.stop="editChildNews(item)" type="text" size="small" class="action-btn edit">编辑</el-button> <el-button @click.stop="editChildNews(item)" type="text" size="small" class="action-btn edit">编辑
<el-button @click.stop="delChildNews(item)" type="text" size="small" class="action-btn delete">删除</el-button> </el-button>
<el-button @click.stop="delChildNews(item)" type="text" size="small" class="action-btn delete">删除
</el-button>
</div> </div>
</div> </div>
<div v-if="childTableData.length == 0" class="empty-state"> <div v-if="childTableData.length == 0" class="empty-state">
...@@ -84,7 +88,7 @@ ...@@ -84,7 +88,7 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="上级分类" v-if="addLevel === 2" class="is-required" prop="ParentId"> <el-form-item label="上级分类" v-if="addLevel === 2" class="is-required" prop="ParentId">
<el-select v-model="addMsg.ParentId" placeholder="请选择上级分类" size="small" style="width: 100%"> <el-select v-model="addMsg.ParentId" placeholder="请选择上级分类" size="small" style="width: 100%" filterable>
<el-option v-for="item in tableData" :key="item.ID" :label="item.ClassName" :value="item.ID"></el-option> <el-option v-for="item in tableData" :key="item.ID" :label="item.ClassName" :value="item.ID"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -92,7 +96,8 @@ ...@@ -92,7 +96,8 @@
<el-input type="text" v-model="addMsg.ClassName" size="small" placeholder="品牌分类名称" maxlength="100"> <el-input type="text" v-model="addMsg.ClassName" size="small" placeholder="品牌分类名称" maxlength="100">
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item label="Logo" class="is-required" prop="Logo"> <!--class="is-required" prop="Logo"-->
<el-form-item label="Logo" >
<el-button @click="isShowImage = true" size="small">选择文件</el-button> <el-button @click="isShowImage = true" size="small">选择文件</el-button>
<div style="position: relative; width: 100px; margin-top: 10px; border: none"> <div style="position: relative; width: 100px; margin-top: 10px; border: none">
<img v-if="!addMsg.Logo || addMsg.Logo == ''" src="../../assets/img/default.png" <img v-if="!addMsg.Logo || addMsg.Logo == ''" src="../../assets/img/default.png"
...@@ -114,19 +119,14 @@ ...@@ -114,19 +119,14 @@
<script> <script>
import ChooseImg from "@/components/global/ChooseImg.vue"; import ChooseImg from "@/components/global/ChooseImg.vue";
import draggable from "vuedraggable";
export default { export default {
name: "brandClassification", name: "brandClassification",
components: { components: {
ChooseImg, ChooseImg,
draggable,
}, },
data() { data() {
return { return {
val: "", val: "",
dragState: false,
checkAll1: false,
checkAll2: false,
loading: false, loading: false,
msg: { msg: {
ClassName: "", ClassName: "",
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
ClassName: "", ClassName: "",
ParentId: 0, ParentId: 0,
BrandCategory: 3, BrandCategory: 3,
SortNum:0, SortNum: 0,
}, },
rules: { rules: {
ClassName: [{ ClassName: [{
...@@ -173,16 +173,6 @@ ...@@ -173,16 +173,6 @@
this.getList(); this.getList();
}, },
methods: { methods: {
handleCheckAll1(val) {
this.tableData.forEach((item) => {
item.checked = val;
});
},
handleCheckAll2(val) {
this.childTableData.forEach((item) => {
item.checked = val;
});
},
goAdd() { goAdd() {
this.addMsg.ID = 0; this.addMsg.ID = 0;
this.addMsg.Logo = ""; this.addMsg.Logo = "";
...@@ -201,18 +191,6 @@ ...@@ -201,18 +191,6 @@
} }
} }
}, },
goAddChild() {
if (!this.currentParentId) {
this.Error("请先选择一级分类");
return;
}
this.addMsg.ID = 0;
this.addMsg.Logo = "";
this.addMsg.ClassName = "";
this.addMsg.ParentId = this.currentParentId;
this.addLevel = 2;
this.dialogVisible = true;
},
SelectId(msg) { SelectId(msg) {
let url = this.getIconLink(msg.url); let url = this.getIconLink(msg.url);
this.addMsg.Logo = url; this.addMsg.Logo = url;
...@@ -222,47 +200,44 @@ ...@@ -222,47 +200,44 @@
this.activeIndex = item.ID; this.activeIndex = item.ID;
this.currentParentId = item.ID; this.currentParentId = item.ID;
this.currentParentName = item.ClassName; this.currentParentName = item.ClassName;
this.getChildList(); // 从树形数据的 subList 获取二级分类
this.childTableData = item.subList || [];
}, },
getList() { getList() {
this.loading = true; this.loading = true;
this.apipost("/api/Trade/GetBrandClassList", this.msg, (res) => { this.apipost("/api/Trade/GetBrandClassTreeEdit", this.msg, (res) => {
this.loading = false; this.loading = false;
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
let pageData = res.data.data || []; let pageData = res.data.data || [];
pageData.forEach((item) => { pageData.forEach((item) => {
item.checked = false; item.checked = false;
if (item.subList && item.subList.length > 0) {
item.subList.forEach((child) => {
child.checked = false;
});
}
}); });
this.tableData = pageData; this.tableData = pageData;
if (pageData.length > 0 && !this.activeIndex) { // 刷新后保持之前选中的分类
if (this.currentParentId) {
// 找到之前选中的一级分类
const selectedItem = pageData.find((item) => item.ID === this.currentParentId);
if (selectedItem) {
this.getChild(selectedItem, 0);
} else if (pageData.length > 0) {
// 之前选中的被删了，选中第一个
this.getChild(pageData[0], 0);
} else {
this.childTableData = [];
this.activeIndex = 0;
}
} else if (pageData.length > 0) {
// 首次加载默认选中第一大类
this.getChild(pageData[0], 0); this.getChild(pageData[0], 0);
} }
} }
}); });
}, },
getChildList() {
if (!this.currentParentId) {
this.childTableData = [];
return;
}
this.loading = true;
this.apipost(
"/api/Trade/GetBrandClassList", {
BrandCategory:this.msg.BrandCategory,
ParentId: this.currentParentId
},
(res) => {
this.loading = false;
if (res.data.resultCode == 1) {
let pageData = res.data.data || [];
pageData.forEach((item) => {
item.checked = false;
});
this.childTableData = pageData;
}
}
);
},
delNews(item) { delNews(item) {
let that = this; let that = this;
that.Confirm("删除一级分类会对应删除相应的二级分类,是否继续?", function () { that.Confirm("删除一级分类会对应删除相应的二级分类,是否继续?", function () {
...@@ -314,7 +289,7 @@ ...@@ -314,7 +289,7 @@
(res) => { (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
that.Success(res.data.message); that.Success(res.data.message);
that.getChildList(); that.getList();
} else { } else {
that.Error(res.data.message); that.Error(res.data.message);
} }
...@@ -349,11 +324,7 @@ ...@@ -349,11 +324,7 @@
this.apipost("/api/Trade/GetSetBrandClass", this.addMsg, (res) => { this.apipost("/api/Trade/GetSetBrandClass", this.addMsg, (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.dialogVisible = false; this.dialogVisible = false;
if (this.addLevel === 1) { this.getList();
this.getList();
} else {
this.getChildList();
}
this.Success(res.data.message); this.Success(res.data.message);
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
...@@ -370,155 +341,150 @@ ...@@ -370,155 +341,150 @@
</script> </script>
<style> <style>
.brandClassification .head-title {
font-size: 16px; .brandClassification .cat-container {
color: #303133; display: flex;
padding: 0 0 15px 0; gap: 16px;
font-weight: 600; min-height: 400px;
} }
.brandClassification .cat-container { .brandClassification .card-item-box {
display: flex; flex: 1;
gap: 16px; min-width: 0;
min-height: 400px; }
}
.brandClassification .card-item-box { .brandClassification .card-header {
flex: 1; display: flex;
min-width: 0; justify-content: space-between;
} align-items: center;
}
.brandClassification .card-header { .brandClassification .header-title {
display: flex; font-size: 15px;
justify-content: space-between; font-weight: 600;
align-items: center; color: #303133;
} }
.brandClassification .header-title { .brandClassification .header-count {
font-size: 15px; font-size: 12px;
font-weight: 600; color: #909399;
color: #303133; background: #f4f4f5;
} padding: 2px 8px;
border-radius: 10px;
}
.brandClassification .header-count { .brandClassification .card-body {
font-size: 12px; max-height: 500px;
color: #909399; overflow-y: auto;
background: #f4f4f5; }
padding: 2px 8px;
border-radius: 10px;
}
.brandClassification .card-body { .brandClassification .list-item {
max-height: 500px; display: flex;
overflow-y: auto; align-items: center;
} justify-content: space-between;
padding: 12px 8px;
border-bottom: 1px solid #f0f2f5;
transition: background-color 0.2s;
cursor: pointer;
}
.brandClassification .list-item { .brandClassification .list-item:hover {
display: flex; background-color: #f5f7fa;
align-items: center; }
justify-content: space-between;
padding: 12px 8px;
border-bottom: 1px solid #f0f2f5;
transition: background-color 0.2s;
cursor: pointer;
}
.brandClassification .list-item:hover { .brandClassification .list-item.active {
background-color: #f5f7fa; background-color: #ecf5ff;
} }
.brandClassification .list-item.active { .brandClassification .list-item:last-child {
background-color: #ecf5ff; border-bottom: none;
} }
.brandClassification .list-item:last-child { .brandClassification .item-left {
border-bottom: none; display: flex;
} align-items: center;
flex: 1;
min-width: 0;
}
.brandClassification .item-left { .brandClassification .item-logo {
display: flex; width: 36px;
align-items: center; height: 36px;
flex: 1; border-radius: 6px;
min-width: 0; background-size: cover;
} background-position: center;
margin-right: 12px;
flex-shrink: 0;
border: 1px solid #ebeef5;
}
.brandClassification .item-logo { .brandClassification .item-logo.noIcon {
width: 36px; background-image: url("../../assets/img/default.png");
height: 36px; background-size: 100% 100%;
border-radius: 6px; }
background-size: cover;
background-position: center;
margin-right: 12px;
flex-shrink: 0;
border: 1px solid #ebeef5;
}
.brandClassification .item-logo.noIcon { .brandClassification .item-info {
background-image: url("../../assets/img/default.png"); display: flex;
background-size: 100% 100%; flex-direction: column;
} min-width: 0;
}
.brandClassification .item-info { .brandClassification .item-name {
display: flex; font-size: 14px;
flex-direction: column; color: #303133;
min-width: 0; white-space: nowrap;
} overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
.brandClassification .item-name { .brandClassification .item-id {
font-size: 14px; font-size: 12px;
color: #303133; color: #909399;
white-space: nowrap; margin-top: 2px;
overflow: hidden; }
text-overflow: ellipsis;
max-width: 150px;
}
.brandClassification .item-id { .brandClassification .item-actions {
font-size: 12px; display: flex;
color: #909399; gap: 8px;
margin-top: 2px; flex-shrink: 0;
} }
.brandClassification .item-actions { .brandClassification .action-btn {
display: flex; padding: 4px 8px;
gap: 8px; font-size: 13px;
flex-shrink: 0; border-radius: 4px;
} transition: all 0.2s;
}
.brandClassification .action-btn { .brandClassification .action-btn.edit {
padding: 4px 8px; color: #409eff;
font-size: 13px; }
border-radius: 4px;
transition: all 0.2s;
}
.brandClassification .action-btn.edit { .brandClassification .action-btn.edit:hover {
color: #409eff; background-color: #ecf5ff;
} }
.brandClassification .action-btn.edit:hover { .brandClassification .action-btn.delete {
background-color: #ecf5ff; color: #f56c6c;
} }
.brandClassification .action-btn.delete { .brandClassification .action-btn.delete:hover {
color: #f56c6c; background-color: #fef0f0;
} }
.brandClassification .action-btn.delete:hover { .brandClassification .empty-state {
background-color: #fef0f0; display: flex;
} flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 0;
color: #909399;
}
.brandClassification .empty-state { .brandClassification .empty-state p {
display: flex; margin-top: 12px;
flex-direction: column; font-size: 14px;
align-items: center; }
justify-content: center;
padding: 60px 0;
color: #909399;
}
.brandClassification .empty-state p { </style>
margin-top: 12px;
font-size: 14px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment