Skip to content

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

11

parent e0fd8865
Hide 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 style="float: right; margin-top: -5px" size="small" type="primary" @click="goAdd">
<el-button 新增分类
style="float: right; margin-top: -5px" </el-button>
size="small" </div>
type="primary" <div style="margin-top: 10px; background: #fff; padding: 20px">
@click="(isShowAdd = true), clearMsg()" <div v-loading="loading" class="cat-container">
> <el-card class="card-item-box" shadow="never">
新增</el-button <div slot="header" class="card-header">
> <span class="header-title">一级分类</span>
</div> <span class="header-count">{{ tableData.length }} 条</span>
<div class="content">
<div>
<div class="searchInput" style="width: 250px">
<el-input
@keyup.enter.native="(msg.pageIndex = 1), getList()"
@clear="(msg.pageIndex = 1), getList()"
style="display: inline-block; width: 225px; height: 30px"
placeholder="请输入品牌分类名称"
v-model="msg.ClassName"
size="small"
clearable
>
</el-input>
<span
@click="(msg.pageIndex = 1), getList()"
class="el-icon-search"
style="
color: #979dad;
font-size: 14px;
position: relative;
top: 1px;
"
></span>
</div> </div>
</div> <div class="card-body">
<el-table <div class="list-item" :class="{ active: activeIndex == item.ID }" @click="getChild(item, index)"
:data="tableData" v-for="(item, index) in tableData" :key="index">
v-loading="loading" <div class="item-left">
border <div v-if="!item.Logo" class="item-logo noIcon"></div>
style="width: 100%; margin: 20px 0" <div v-else class="item-logo" :style="{ backgroundImage: 'url(' + item.Logo + ')' }"></div>
> <div class="item-info">
<el-table-column prop="ID" label="编号" width="100"> <el-tooltip class="item" effect="dark" :content="item.ClassName" placement="top">
</el-table-column> <span class="item-name">{{ item.ClassName }}</span>
<el-table-column prop="ClassName" label="品牌分类名称"> </el-tooltip>
</el-table-column> <span class="item-id">ID: {{ item.ID }}</span>
<el-table-column prop="Logo" width="150" label="封面图"> </div>
<template slot-scope="scope"> </div>
<div <div class="item-actions">
class="app-image" <el-button @click.stop="editNews(item)" type="text" size="small" class="action-btn edit">编辑</el-button>
:style="{ <el-button @click.stop="delNews(item)" type="text" size="small" class="action-btn delete">删除</el-button>
backgroundImage: 'url(' + scope.row.Logo + ')', </div>
backgroundSize: 'cover', </div>
}" <div v-if="tableData.length == 0" class="empty-state">
></div> <i class="el-icon-folder-opened" style="font-size: 48px; color: #c0c4cc"></i>
</template> <p>暂无数据</p>
</el-table-column> </div>
<el-table-column prop="CreateDate" width="200" label="创建时间"> </div>
</el-table-column> </el-card>
<el-table-column prop="address" width="200" label="操作">
<template slot-scope="scope">
<el-tooltip
class="item"
effect="dark"
content="编辑"
placement="top"
>
<img
@click="editNews(scope.row)"
style="width: 32px; height: 32px"
src="../../assets/img/userman/edit.png"
alt=""
/>
</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>
</template>
</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>
</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 class="content">
<el-form
label-width="120px"
: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 <el-card class="card-item-box" shadow="never">
label="Logo" <div slot="header" class="card-header">
size="small" <span class="header-title">二级分类</span>
class="is-required" <span class="header-count">{{ childTableData.length }} 条</span>
prop="Logo" </div>
> <div class="card-body">
<el-button @click="isShowImage = true" size="small" <div class="list-item" v-for="(item, index) in childTableData" :key="index">
>选择文件</el-button <div class="item-left">
> <div v-if="!item.Logo" class="item-logo noIcon"></div>
<div <div v-else class="item-logo" :style="{ backgroundImage: 'url(' + item.Logo + ')' }"></div>
class="app-gallery-item" <div class="item-info">
style=" <el-tooltip class="item" effect="dark" :content="item.ClassName" placement="top">
position: relative; <span class="item-name">{{ item.ClassName }}</span>
width: 100px; </el-tooltip>
margin-top: 10px; <span class="item-id">ID: {{ item.ID }}</span>
border: none; </div>
" </div>
> <div class="item-actions">
<img <el-button @click.stop="editChildNews(item)" type="text" size="small" class="action-btn edit">编辑</el-button>
v-if="!addMsg.Logo || addMsg.Logo == ''" <el-button @click.stop="delChildNews(item)" type="text" size="small" class="action-btn delete">删除</el-button>
src="../../assets/img/default.png" </div>
style="width: 80px; height: 80px" </div>
alt="" <div v-if="childTableData.length == 0" class="empty-state">
/> <i class="el-icon-folder-opened" style="font-size: 48px; color: #c0c4cc"></i>
<img <p>请先选择一级分类</p>
v-else
style="width: 80px; height: 80px"
:src="addMsg.Logo"
alt=""
/>
</div> </div>
</el-form-item> </div>
</el-form> </el-card>
</div> </div>
<el-button </div>
size="small"
style="margin-top: 20px; padding: 9px 25px"
type="primary"
@click="submitform('addMsg')"
>保存
</el-button>
</template>
<!-- 选择文件 --> <!-- 选择文件 -->
<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 {
components: { name: "brandClassification",
ChooseImg, components: {
UE, ChooseImg,
}, draggable,
data() { },
return { data() {
defaultMsg: "", return {
config: { val: "",
initialFrameWidth: null, dragState: false,
initialFrameHeight: 350, checkAll1: false,
}, checkAll2: false,
msg: { loading: false,
pageIndex: 1, msg: {
pageSize: 10, ClassName: "",
ClassName: "", BrandCategory: 3,
}, ParentId: 0,
total: 0, },
tableData: [], //数据列表 total: 0,
isShowImage: false, //是否显示选择图片弹窗 tableData: [],
isShowAdd: false, //是否显示新增 childTableData: [],
addMsg: { activeIndex: 0,
ID: 0, //主键编号 currentParentId: null,
Logo: "", //封面图 currentParentName: "",
ClassName: "", //品牌分类标题 addLevel: 1,
}, isShowImage: false,
rules: { dialogVisible: false,
ClassName: [ addMsg: {
{ ID: 0,
Logo: "",
ClassName: "",
ParentId: 0,
BrandCategory: 3,
SortNum:0,
},
rules: {
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",
created() { }, ],
this.getList(); },
}, };
methods: {
SelectId(msg) {
let url = this.getIconLink(msg.url);
this.addMsg.Logo = url;
this.isShowImage = false;
},
clearMsg() {
this.addMsg.ID = 0;
this.addMsg.Logo = "";
this.addMsg.ClassName = "";
},
getList() {
this.loading = true;
this.apipost("/api/Trade/GetBrandClassPageList", this.msg, (res) => {
this.loading = false;
if (res.data.resultCode == 1) {
this.total = res.data.data.count;
let pageData = res.data.data.pageData;
this.tableData = pageData;
}
});
}, },
handleCurrentChange(val) { created() {
this.msg.pageIndex = val;
this.getList(); this.getList();
}, },
//删除品牌分类 methods: {
delNews(item) { handleCheckAll1(val) {
let that = this; this.tableData.forEach((item) => {
that.Confirm("是否删除?", function () { item.checked = val;
that.apipost( });
"/api/Trade/RemoveBrandClass", },
{ handleCheckAll2(val) {
Id: item.ID, this.childTableData.forEach((item) => {
Status: 1, 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) {
let url = this.getIconLink(msg.url);
this.addMsg.Logo = url;
this.isShowImage = false;
},
getChild(item, index) {
this.activeIndex = item.ID;
this.currentParentId = item.ID;
this.currentParentName = item.ClassName;
this.getChildList();
},
getList() {
this.loading = true;
this.apipost("/api/Trade/GetBrandClassList", this.msg, (res) => {
this.loading = false;
if (res.data.resultCode == 1) {
let pageData = res.data.data || [];
pageData.forEach((item) => {
item.checked = false;
});
this.tableData = pageData;
if (pageData.length > 0 && !this.activeIndex) {
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) => { (res) => {
this.loading = false;
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
that.Success(res.data.message); let pageData = res.data.data || [];
that.getList(); pageData.forEach((item) => {
} else { item.checked = false;
that.Error(res.data.message); });
this.childTableData = pageData;
} }
} }
); );
}); },
}, delNews(item) {
//修改品牌分类 let that = this;
editNews(item) { that.Confirm("删除一级分类会对应删除相应的二级分类,是否继续?", function () {
this.apipost( that.apipost(
"/api/Trade/GetBrandClassDetails", "/api/Trade/RemoveBrandClass", {
{ Id: item.ID,
ID: item.ID, Status: 1
}, },
(res) => { (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.isShowAdd = true; that.Success(res.data.message);
var tempData = res.data.data; that.getList();
this.addMsg.ID = tempData.ID; } else {
this.addMsg.Logo = tempData.Logo; that.Error(res.data.message);
this.addMsg.ClassName = tempData.ClassName; }
} else { }
this.Error(res.data.message); );
});
},
editNews(item) {
this.apipost(
"/api/Trade/GetBrandClassDetails", {
ID: item.ID
},
(res) => {
if (res.data.resultCode == 1) {
this.dialogVisible = true;
this.addLevel = 1;
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);
}
} }
} );
); },
}, //新增修改 delChildNews(item) {
submitform(formName) { let that = this;
this.$refs[formName].validate((valid) => { that.Confirm("是否删除?", function () {
if (valid) { that.apipost(
this.apipost("/api/Trade/GetSetBrandClass", this.addMsg, (res) => { "/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) { if (res.data.resultCode == 1) {
this.isShowAdd = false; this.dialogVisible = true;
this.getList(); this.addLevel = 2;
this.clearMsg(); var tempData = res.data.data;
this.Success(res.data.message); 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 { } else {
this.Error(res.data.message); this.Error(res.data.message);
} }
}); }
} else { );
return false; },
} submitform(formName) {
}); this.$refs[formName].validate((valid) => {
if (valid) {
this.apipost("/api/Trade/GetSetBrandClass", this.addMsg, (res) => {
if (res.data.resultCode == 1) {
this.dialogVisible = false;
if (this.addLevel === 1) {
this.getList();
} else {
this.getChildList();
}
this.Success(res.data.message);
} else {
this.Error(res.data.message);
}
});
} else {
return false;
}
});
},
}, },
}, };
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 .item-logo.noIcon {
background-image: url("../../assets/img/default.png");
background-size: 100% 100%;
} }
.brandClassification .content .searchInput { .brandClassification .item-info {
border: 1px solid #dcdfe6; 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 .action-btn.edit {
color: #409eff;
}
.brandClassification .action-btn.edit:hover {
background-color: #ecf5ff;
} }
.brandClassification .content .searchInput .el-input__inner { .brandClassification .action-btn.delete {
border: none; color: #f56c6c;
outline: none;
height: 30px;
line-height: 30px;
} }
.brandClassification .content .searchInput { .brandClassification .action-btn.delete:hover {
line-height: normal; background-color: #fef0f0;
display: inline-table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
width: 250px;
margin-right: 20px;
} }
.brandClassification .content { .brandClassification .empty-state {
background: #fff; display: flex;
margin-top: 10px; flex-direction: column;
padding: 20px; align-items: center;
box-sizing: border-box; justify-content: center;
padding: 60px 0;
color: #909399;
} }
.brandClassification .el-form-item__content { .brandClassification .empty-state p {
line-height: 0; 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