py4fbma29
/
mall-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

brand

Browse Source
branch_lyj
Liuyujie 3 months ago
parent 3a5b0032d5
commit 6cacfd11d1
1 changed files with 54 additions and 9 deletions
Show Stats Download Patch File Download Diff File

63
src/views/sms/brand/index.vue
Unescape View File

@ -1,9 +1,14 @@
<template> 
<template>
<!-- 页面整体的外层容器，用于布局和包裹内部各部分内容 -->
<div class="app-container">
<!-- 筛选搜索区域的卡片容器，设置无阴影效果 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 显示搜索图标 -->
<i class="el-icon-search"></i>
<!-- 显示筛选搜索的文字提示 -->
<span>筛选搜索</span>
<!-- 用于触发查询搜索的按钮，绑定对应点击事件，设置样式等属性 -->
<el-button
style="float:right"
type="primary"
@ -11,6 +16,7 @@
size="small">
查询搜索
</el-button>
<!-- 用于重置筛选条件的按钮，绑定对应点击事件，设置样式等属性 -->
<el-button
style="float:right;margin-right: 15px"
@click="handleResetSearch()"
@ -19,12 +25,18 @@
</el-button>
</div>
<div style="margin-top: 15px">
<!-- 行内表单，绑定数据模型，设置尺寸、标签宽度等属性 -->
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<!-- 品牌名称输入框的表单项 -->
<el-form-item label="品牌名称：">
<!-- 输入框，双向绑定品牌名称数据，设置类名和占位提示 -->
<el-input v-model="listQuery.brandName" class="input-width" placeholder="品牌名称"></el-input>
</el-form-item>
<!-- 推荐状态选择框的表单项 -->
<el-form-item label="推荐状态：">
<!-- 下拉选择框，双向绑定推荐状态数据，设置占位提示等属性 -->
<el-select v-model="listQuery.recommendStatus" placeholder="全部" clearable class="input-width">
<!-- 循环生成下拉选项 -->
<el-option v-for="item in recommendOptions"
:key="item.value"
:label="item.label"
@ -35,40 +47,51 @@
</el-form>
</div>
</el-card>
<!-- 操作区域的卡片容器，无阴影效果 -->
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- 用于触发选择品牌操作的按钮，绑定点击事件 -->
<el-button size="mini" class="btn-add" @click="handleSelectBrand()">选择品牌</el-button>
</el-card>
<!-- 放置数据表格的容器 -->
<div class="table-container">
<!-- 数据表格组件，绑定数据、设置宽度等属性，还有选择改变等相关事件 -->
<el-table ref="homeBrandTable"
:data="list"
style="width: 100%;"
@selection-change="handleSelectionChange"
v-loading="listLoading" border>
<!-- 显示选择框的表格列 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 显示编号的表格列 -->
<el-table-column label="编号" width="120" align="center">
<template slot-scope="scope">{{scope.row.id}}</template>
</el-table-column>
<!-- 显示品牌名称的表格列 -->
<el-table-column label="品牌名称" align="center">
<template slot-scope="scope">{{scope.row.brandName}}</template>
</el-table-column>
<!-- 通过开关显示是否推荐的表格列，绑定状态改变事件 -->
<el-table-column label="是否推荐" width="200" align="center">
<template slot-scope="scope">
<el-switch
@change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.recommendStatus">
</el-switch>
@change="handleRecommendStatusStatusChange(scope.$index, scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.recommendStatus">
</el-switch>
</template>
</el-table-column>
<!-- 显示排序的表格列 -->
<el-table-column label="排序" width="160" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<!-- 显示状态的表格列，使用过滤器格式化内容 -->
<el-table-column label="状态" width="160" align="center">
<template slot-scope="scope">{{scope.row.recommendStatus | formatRecommendStatus}}</template>
</el-table-column>
<!-- 显示操作按钮的表格列 -->
<el-table-column label="操作" width="180" align="center">
<template slot-scope="scope">
<el-button size="mini"
@ -83,10 +106,13 @@
</el-table-column>
</el-table>
</div>
<!-- 批量操作相关选择框和按钮的容器 -->
<div class="batch-operate-container">
<!-- 选择批量操作类型的下拉框，双向绑定操作类型数据 -->
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<!-- 循环生成下拉选项 -->
<el-option
v-for="item in operates"
:key="item.value"
@ -94,6 +120,7 @@
:value="item.value">
</el-option>
</el-select>
<!-- 触发批量操作的按钮，设置样式、类型等属性，绑定点击事件 -->
<el-button
style="margin-left: 20px"
class="search-button"
@ -103,7 +130,9 @@
确定
</el-button>
</div>
<!-- 分页组件的容器 -->
<div class="pagination-container">
<!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
<el-pagination
background
@size-change="handleSizeChange"
@ -115,19 +144,26 @@
:total="total">
</el-pagination>
</div>
<!-- 选择品牌的对话框组件，设置标题、可见性绑定、宽度等属性 -->
<el-dialog title="选择品牌" :visible.sync="selectDialogVisible" width="40%">
<!-- 对话框内的品牌名称搜索输入框，绑定数据、设置样式等属性 -->
<el-input v-model="dialogData.listQuery.keyword"
style="width: 250px;margin-bottom: 20px"
size="small"
placeholder="品牌名称搜索">
<!-- 输入框后的搜索按钮，绑定点击事件 -->
<el-button slot="append" icon="el-icon-search" @click="handleSelectSearch()"></el-button>
</el-input>
<!-- 对话框内展示品牌相关数据的表格，设置数据绑定、选择改变事件等属性 -->
<el-table :data="dialogData.list"
@selection-change="handleDialogSelectionChange" border>
<!-- 显示选择框的表格列 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 显示品牌名称的表格列 -->
<el-table-column label="品牌名称"align="center">
<template slot-scope="scope">{{scope.row.name}}</template>
</el-table-column>
<!-- 显示相关商品和评价数量信息的表格列 -->
<el-table-column label="相关" width="220" align="center">
<template slot-scope="scope">
商品：<span class="color-main">{{scope.row.productCount}}</span>
@ -135,7 +171,9 @@
</template>
</el-table-column>
</el-table>
<!-- 对话框内的分页组件容器 -->
<div class="pagination-container">
<!-- 分页组件，设置背景、各类事件绑定、页面尺寸等属性 -->
<el-pagination
background
@size-change="handleDialogSizeChange"
@ -149,23 +187,30 @@
</div>
<div style="clear: both;"></div>
<div slot="footer">
<!-- 对话框取消按钮，点击隐藏对话框 -->
<el-button size="small" @click="selectDialogVisible = false">取 消</el-button>
<!-- 对话框确认按钮，绑定点击事件 -->
<el-button size="small" type="primary" @click="handleSelectDialogConfirm()">确 定</el-button>
</div>
</el-dialog>
<!-- 设置排序的对话框组件，设置标题、可见性绑定、宽度等属性 -->
<el-dialog title="设置排序"
:visible.sync="sortDialogVisible"
width="40%">
<!-- 对话框内的表单，绑定数据模型，设置标签宽度等属性 -->
<el-form :model="sortDialogData"
label-width="150px">
<!-- 排序输入框的表单项 -->
<el-form-item label="排序：">
<el-input v-model="sortDialogData.sort" style="width: 200px"></el-input>
</el-form-item>
</el-form>
<span slot="footer">
<el-button @click="sortDialogVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="handleUpdateSort" size="small">确 定</el-button>
</span>
<!-- 对话框取消按钮，点击隐藏对话框 -->
<el-button @click="sortDialogVisible = false" size="small">取 消</el-button>
<!-- 对话框确认按钮，绑定点击事件 -->
<el-button type="primary" @click="handleUpdateSort" size="small">确 定</el-button>
</span>
</el-dialog>
</div>
</template>

Write Preview
Loading…
Cancel
Save