Skip to content

E
ElectricitySheep
Commit 445a6e1d authored by 吴春's avatar 吴春
Browse files
Options

11

parent e0fd8865
Show whitespace changes
Inline Side-by-side
Showing with 472 additions and 327 deletions
src/components/tradePavilion/brandClassification.vue
View file @ 445a6e1d
<template> <template>
<div class="brandClassification"> <div class="brandClassification">
<template v-if="!isShowAdd">
<div class="head-title"> <div class="head-title">
品牌分类管理 <span>品牌分类管理</span>
<el-button <el-button style="float: right; margin-top: -5px" size="small" type="primary" @click="goAdd">
style="float: right; margin-top: -5px" 新增分类
size="small" </el-button>
type="primary"
@click="(isShowAdd = true), clearMsg()"
>
新增</el-button
>
</div> </div>
<div class="content"> <div style="margin-top: 10px; background: #fff; padding: 20px">
<div> <div v-loading="loading" class="cat-container">
<div class="searchInput" style="width: 250px"> <el-card class="card-item-box" shadow="never">
<el-input <div slot="header" class="card-header">
@keyup.enter.native="(msg.pageIndex = 1), getList()" <span class="header-title">一级分类</span>
@clear="(msg.pageIndex = 1), getList()" <span class="header-count">{{ tableData.length }} 条</span>
style="display: inline-block; width: 225px; height: 30px" </div>
placeholder="请输入品牌分类名称" <div class="card-body">
v-model="msg.ClassName" <div class="list-item" :class="{ active: activeIndex == item.ID }" @click="getChild(item, index)"
size="small" v-for="(item, index) in tableData" :key="index">
clearable <div class="item-left">
> <div v-if="!item.Logo" class="item-logo noIcon"></div>
</el-input> <div v-else class="item-logo" :style="{ backgroundImage: 'url(' + item.Logo + ')' }"></div>
<span <div class="item-info">
@click="(msg.pageIndex = 1), getList()" <el-tooltip class="item" effect="dark" :content="item.ClassName" placement="top">
class="el-icon-search" <span class="item-name">{{ item.ClassName }}</span>
style=" </el-tooltip>
color: #979dad; <span class="item-id">ID: {{ item.ID }}</span>
font-size: 14px;
position: relative;
top: 1px;
"
></span>
</div> </div>
</div> </div>
<el-table <div class="item-actions">
:data="tableData" <el-button @click.stop="editNews(item)" type="text" size="small" class="action-btn edit">编辑</el-button>
v-loading="loading" <el-button @click.stop="delNews(item)" type="text" size="small" class="action-btn delete">删除</el-button>
border </div>
style="width: 100%; margin: 20px 0" </div>
> <div v-if="tableData.length == 0" class="empty-state">
<el-table-column prop="ID" label="编号" width="100"> <i class="el-icon-folder-opened" style="font-size: 48px; color: #c0c4cc"></i>
</el-table-column> <p>暂无数据</p>
<el-table-column prop="ClassName" label="品牌分类名称"> </div>
</el-table-column> </div>
<el-table-column prop="Logo" width="150" label="封面图"> </el-card>
<template slot-scope="scope">
<div
class="app-image"
:style="{
backgroundImage: 'url(' + scope.row.Logo + ')',
backgroundSize: 'cover',
}"
></div>
</template>
</el-table-column>
<el-table-column prop="CreateDate" width="200" label="创建时间">
</el-table-column>
<el-table-column prop="address" width="200" label="操作"> <el-card class="card-item-box" shadow="never">
<template slot-scope="scope"> <div slot="header" class="card-header">
<el-tooltip <span class="header-title">二级分类</span>
class="item" <span class="header-count">{{ childTableData.length }} 条</span>
effect="dark" </div>
content="编辑" <div class="card-body">
placement="top" <div class="list-item" v-for="(item, index) in childTableData" :key="index">
> <div class="item-left">
<img <div v-if="!item.Logo" class="item-logo noIcon"></div>
@click="editNews(scope.row)" <div v-else class="item-logo" :style="{ backgroundImage: 'url(' + item.Logo + ')' }"></div>
style="width: 32px; height: 32px" <div class="item-info">
src="../../assets/img/userman/edit.png" <el-tooltip class="item" effect="dark" :content="item.ClassName" placement="top">
alt="" <span class="item-name">{{ item.ClassName }}</span>
/>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="删除"
placement="top-start"
>
<img
@click="delNews(scope.row)"
style="width: 32px; height: 32px; margin: 0 10px"
src="../../assets/img/userman/del.png"
alt=""
/>
</el-tooltip> </el-tooltip>
</template> <span class="item-id">ID: {{ item.ID }}</span>
</el-table-column>
</el-table>
<el-pagination
style="text-align: right"
background
@current-change="handleCurrentChange"
:page-size="msg.pageSize"
:current-page.sync="msg.pageIndex"
layout="total,prev, pager, next"
:total="total"
>
</el-pagination>
</div> </div>
</template>
<template v-else>
<div class="head-title">
<span
@click="isShowAdd = false"
style="color: rgb(64, 158, 255); cursor: pointer"
>品牌分类管理</span
><span style="margin: 0 9px; color: #c0c4cc">/</span
><span>品牌分类信息</span>
</div> </div>
<div class="content"> <div class="item-actions">
<el-form <el-button @click.stop="editChildNews(item)" type="text" size="small" class="action-btn edit">编辑</el-button>
label-width="120px" <el-button @click.stop="delChildNews(item)" type="text" size="small" class="action-btn delete">删除</el-button>
:model="addMsg"
:rules="rules"
ref="addMsg"
>
<el-form-item
label="品牌分类名称"
class="is-required"
prop="ClassName"
>
<el-input
type="text"
class="w400"
v-model="addMsg.ClassName"
size="small"
placeholder="品牌分类名称"
maxlength="100"
>
</el-input>
</el-form-item>
<el-form-item
label="Logo"
size="small"
class="is-required"
prop="Logo"
>
<el-button @click="isShowImage = true" size="small"
>选择文件</el-button
>
<div
class="app-gallery-item"
style="
position: relative;
width: 100px;
margin-top: 10px;
border: none;
"
>
<img
v-if="!addMsg.Logo || addMsg.Logo == ''"
src="../../assets/img/default.png"
style="width: 80px; height: 80px"
alt=""
/>
<img
v-else
style="width: 80px; height: 80px"
:src="addMsg.Logo"
alt=""
/>
</div> </div>
</el-form-item>
</el-form>
</div> </div>
<el-button <div v-if="childTableData.length == 0" class="empty-state">
size="small" <i class="el-icon-folder-opened" style="font-size: 48px; color: #c0c4cc"></i>
style="margin-top: 20px; padding: 9px 25px" <p>请先选择一级分类</p>
type="primary" </div>
@click="submitform('addMsg')" </div>
>保存 </el-card>
</el-button> </div>
</template> </div>
<!-- 选择文件 --> <!-- 选择文件 -->
<el-dialog title="选择文件" :visible.sync="isShowImage" width="1240px"> <el-dialog title="选择文件" :visible.sync="isShowImage" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg> <ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog> </el-dialog>
<!-- 新增/编辑弹窗 -->
<el-dialog :title="addMsg.ID > 0 ? '编辑品牌分类' : '新增品牌分类'" :visible.sync="dialogVisible" width="500px">
<el-form label-width="100px" :model="addMsg" :rules="rules" ref="addMsgForm">
<el-form-item label="分类级别" label-width="100px" class="is-required">
<el-radio-group v-model="addLevel" @change="onLevelChange">
<el-radio :label="1">一级分类</el-radio>
<el-radio :label="2">二级分类</el-radio>
</el-radio-group>
</el-form-item>
<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-option v-for="item in tableData" :key="item.ID" :label="item.ClassName" :value="item.ID"></el-option>
</el-select>
</el-form-item>
<el-form-item label="分类名称" class="is-required" prop="ClassName">
<el-input type="text" v-model="addMsg.ClassName" size="small" placeholder="品牌分类名称" maxlength="100">
</el-input>
</el-form-item>
<el-form-item label="Logo" class="is-required" prop="Logo">
<el-button @click="isShowImage = true" size="small">选择文件</el-button>
<div style="position: relative; width: 100px; margin-top: 10px; border: none">
<img v-if="!addMsg.Logo || addMsg.Logo == ''" src="../../assets/img/default.png"
style="width: 80px; height: 80px" alt="" />
<img v-else style="width: 80px; height: 80px" :src="addMsg.Logo" alt="" />
</div>
</el-form-item>
<el-form-item label="排序">
<el-input-number v-model="addMsg.SortNum" :min="0" :max="9999" size="small"></el-input-number>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small">取消</el-button>
<el-button type="primary" @click="submitform('addMsgForm')" size="small">保存</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import ChooseImg from "@/components/global/ChooseImg.vue"; import ChooseImg from "@/components/global/ChooseImg.vue";
import UE from "@/components/global/UE.vue"; import draggable from "vuedraggable";
export default { export default {
name: "brandClassification",
components: { components: {
ChooseImg, ChooseImg,
UE, draggable,
}, },
data() { data() {
return { return {
defaultMsg: "", val: "",
config: { dragState: false,
initialFrameWidth: null, checkAll1: false,
initialFrameHeight: 350, checkAll2: false,
}, loading: false,
msg: { msg: {
pageIndex: 1,
pageSize: 10,
ClassName: "", ClassName: "",
BrandCategory: 3,
ParentId: 0,
}, },
total: 0, total: 0,
tableData: [], //数据列表 tableData: [],
isShowImage: false, //是否显示选择图片弹窗 childTableData: [],
isShowAdd: false, //是否显示新增 activeIndex: 0,
currentParentId: null,
currentParentName: "",
addLevel: 1,
isShowImage: false,
dialogVisible: false,
addMsg: { addMsg: {
ID: 0, //主键编号 ID: 0,
Logo: "", //封面图 Logo: "",
ClassName: "", //品牌分类标题 ClassName: "",
ParentId: 0,
BrandCategory: 3,
SortNum:0,
}, },
rules: { rules: {
ClassName: [ ClassName: [{
{
required: true, required: true,
message: "请输入品牌分类名称", message: "请输入品牌分类名称",
trigger: "blur", trigger: "blur",
}, }, ],
], Logo: [{
Logo: [
{
required: true, required: true,
message: "请输入品牌Logo", message: "请选择Logo",
trigger: "blur", trigger: "blur",
}, }, ],
], ParentId: [{
required: true,
message: "请选择上级分类",
trigger: "change",
}, ],
}, },
}; };
}, },
...@@ -235,40 +173,103 @@ export default { ...@@ -235,40 +173,103 @@ export default {
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() {
this.addMsg.ID = 0;
this.addMsg.Logo = "";
this.addMsg.ClassName = "";
this.addMsg.ParentId = 0;
this.addMsg.SortNum = 0;
this.addLevel = 1;
this.dialogVisible = true;
},
onLevelChange(val) {
if (val === 1) {
this.addMsg.ParentId = 0;
} else {
if (this.tableData.length > 0) {
this.addMsg.ParentId = this.tableData[0].ID;
}
}
},
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;
this.isShowImage = false; this.isShowImage = false;
}, },
clearMsg() { getChild(item, index) {
this.addMsg.ID = 0; this.activeIndex = item.ID;
this.addMsg.Logo = ""; this.currentParentId = item.ID;
this.addMsg.ClassName = ""; this.currentParentName = item.ClassName;
this.getChildList();
}, },
getList() { getList() {
this.loading = true; this.loading = true;
this.apipost("/api/Trade/GetBrandClassPageList", this.msg, (res) => { this.apipost("/api/Trade/GetBrandClassList", this.msg, (res) => {
this.loading = false; this.loading = false;
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.total = res.data.data.count; let pageData = res.data.data || [];
let pageData = res.data.data.pageData; pageData.forEach((item) => {
item.checked = false;
});
this.tableData = pageData; this.tableData = pageData;
if (pageData.length > 0 && !this.activeIndex) {
this.getChild(pageData[0], 0);
}
} }
}); });
}, },
handleCurrentChange(val) { getChildList() {
this.msg.pageIndex = val; if (!this.currentParentId) {
this.getList(); 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 () {
that.apipost( that.apipost(
"/api/Trade/RemoveBrandClass", "/api/Trade/RemoveBrandClass", {
{
Id: item.ID, Id: item.ID,
Status: 1, Status: 1
}, },
(res) => { (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
...@@ -281,34 +282,78 @@ export default { ...@@ -281,34 +282,78 @@ export default {
); );
}); });
}, },
//修改品牌分类
editNews(item) { editNews(item) {
this.apipost( this.apipost(
"/api/Trade/GetBrandClassDetails", "/api/Trade/GetBrandClassDetails", {
{ ID: item.ID
ID: item.ID,
}, },
(res) => { (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.isShowAdd = true; this.dialogVisible = true;
this.addLevel = 1;
var tempData = res.data.data; var tempData = res.data.data;
this.addMsg.ID = tempData.ID; this.addMsg.ID = tempData.ID;
this.addMsg.Logo = tempData.Logo; this.addMsg.Logo = tempData.Logo;
this.addMsg.ClassName = tempData.ClassName; this.addMsg.ClassName = tempData.ClassName;
this.addMsg.ParentId = tempData.ParentId || 0;
this.addMsg.SortNum = tempData.SortNum || 0;
} else { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
} }
); );
}, //新增修改 },
delChildNews(item) {
let that = this;
that.Confirm("是否删除?", function () {
that.apipost(
"/api/Trade/RemoveBrandClass", {
Id: item.ID,
Status: 1
},
(res) => {
if (res.data.resultCode == 1) {
that.Success(res.data.message);
that.getChildList();
} else {
that.Error(res.data.message);
}
}
);
});
},
editChildNews(item) {
this.apipost(
"/api/Trade/GetBrandClassDetails", {
ID: item.ID
},
(res) => {
if (res.data.resultCode == 1) {
this.dialogVisible = true;
this.addLevel = 2;
var tempData = res.data.data;
this.addMsg.ID = tempData.ID;
this.addMsg.Logo = tempData.Logo;
this.addMsg.ClassName = tempData.ClassName;
this.addMsg.ParentId = tempData.ParentId || 0;
this.addMsg.SortNum = tempData.SortNum || 0;
} else {
this.Error(res.data.message);
}
}
);
},
submitform(formName) { submitform(formName) {
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
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.isShowAdd = false; this.dialogVisible = false;
if (this.addLevel === 1) {
this.getList(); this.getList();
this.clearMsg(); } 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);
...@@ -320,60 +365,160 @@ export default { ...@@ -320,60 +365,160 @@ export default {
}); });
}, },
}, },
mounted() {}, };
};
</script> </script>
<style> <style>
.brandClassification .remark_name { .brandClassification .head-title {
color: #888888; font-size: 16px;
color: #303133;
padding: 0 0 15px 0;
font-weight: 600;
}
.brandClassification .cat-container {
display: flex;
gap: 16px;
min-height: 400px;
}
.brandClassification .card-item-box {
flex: 1;
min-width: 0;
}
.brandClassification .card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.brandClassification .header-title {
font-size: 15px;
font-weight: 600;
color: #303133;
}
.brandClassification .header-count {
font-size: 12px; font-size: 12px;
margin-left: 10px; color: #909399;
float: right; background: #f4f4f5;
padding: 2px 8px;
border-radius: 10px;
} }
.brandClassification .app-image { .brandClassification .card-body {
background-position: center center; max-height: 500px;
width: 50px; overflow-y: auto;
height: 50px;
border-radius: 0%;
float: left;
margin-right: 8px;
} }
.brandClassification .blue { .brandClassification .list-item {
color: #409eff; display: flex;
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 {
background-color: #f5f7fa;
}
.brandClassification .list-item.active {
background-color: #ecf5ff;
}
.brandClassification .list-item:last-child {
border-bottom: none;
}
.brandClassification .item-left {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
.brandClassification .item-logo {
width: 36px;
height: 36px;
border-radius: 6px;
background-size: cover;
background-position: center;
margin-right: 12px;
flex-shrink: 0;
border: 1px solid #ebeef5;
} }
.brandClassification .content .searchInput { .brandClassification .item-logo.noIcon {
border: 1px solid #dcdfe6; background-image: url("../../assets/img/default.png");
background-size: 100% 100%;
}
.brandClassification .item-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.brandClassification .item-name {
font-size: 14px;
color: #303133;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
.brandClassification .item-id {
font-size: 12px;
color: #909399;
margin-top: 2px;
}
.brandClassification .item-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.brandClassification .action-btn {
padding: 4px 8px;
font-size: 13px;
border-radius: 4px; border-radius: 4px;
transition: all 0.2s;
} }
.brandClassification .content .searchInput .el-input__inner { .brandClassification .action-btn.edit {
border: none; color: #409eff;
outline: none;
height: 30px;
line-height: 30px;
} }
.brandClassification .content .searchInput { .brandClassification .action-btn.edit:hover {
line-height: normal; background-color: #ecf5ff;
display: inline-table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
width: 250px;
margin-right: 20px;
} }
.brandClassification .content { .brandClassification .action-btn.delete {
background: #fff; color: #f56c6c;
margin-top: 10px;
padding: 20px;
box-sizing: border-box;
} }
.brandClassification .el-form-item__content { .brandClassification .action-btn.delete:hover {
line-height: 0; background-color: #fef0f0;
}
.brandClassification .empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 0;
color: #909399;
}
.brandClassification .empty-state p {
margin-top: 12px;
font-size: 14px;
} }
</style> </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