YueCaiqi_wm/MallVue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

商品表格功能完善

Browse Source
This commit is contained in:
zhh 2018-05-15 16:48:27 +08:00
parent 250b3fcb66
commit 3756dfcb3c
3 changed files with 146 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/brand.js Normal file
View File

@ -0,0 +1,8 @@
import request from '@/utils/request'
export function fetchList(params) {
return request({
url:'/brand/list',
method:'get',
params
})
}

2
src/main.js
View File

@ -4,7 +4,7 @@ import 'normalize.css/normalize.css'// A modern alternative to CSS resets
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
import '@/styles/index.scss' // global css

143
src/views/pms/brand/index.vue
View File

@ -1,13 +1,144 @@
<template> 
<div> {{msg}}</div>
<div class="app-container">
<div class="filter-container"></div>
<el-table ref="brandTable"
: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="80" 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.name}}</template>
</el-table-column>
<el-table-column label="品牌首字母" width="100" align="center">
<template slot-scope="scope">{{scope.row.firstLetter}}</template>
</el-table-column>
<el-table-column label="排序" width="80" align="center">
<template slot-scope="scope">{{scope.row.sort}}</template>
</el-table-column>
<el-table-column label="品牌制造商" width="100" align="center">
<template slot-scope="scope">
<el-switch
:active-value="1"
:inactive-value="0"
v-model="scope.row.factoryStatus">
</el-switch>
</template>
</el-table-column>
<el-table-column label="是否显示" width="100" align="center">
<template slot-scope="scope">
<el-switch
:active-value="1"
:inactive-value="0"
v-model="scope.row.showStatus">
</el-switch>
</template>
</el-table-column>
<el-table-column label="相关" width="220" align="center">
<template slot-scope="scope">
<span>商品：</span>
<el-button
size="mini"
type="text"
@click="handleProductList(scope.$index, scope.row)">100
</el-button>
<span>评价：</span>
<el-button
size="mini"
type="text"
@click="handleProductCommentList(scope.$index, scope.row)">1000
</el-button>
</template>
</el-table-column>
<el-table-column label="操作" width="220" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
background
@current-change="handleCurrentChange"
layout="total, prev, pager, next,jumper"
:page-size="listQuery.pageSize"
:current-page.sync="listQuery.pageNum"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
export default{
data() {
return {msg: '品牌管理'}
}
import {fetchList} from '@/api/brand'
export default {
name: 'brandList',
data() {
return {
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 10
},
list: null,
total: null,
listLoading: true,
multipleSelection: []
}
},
created() {
this.getList();
},
methods: {
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
this.list = response.data.list;
this.total = response.data.total;
this.totalPage = response.data.totalPage;
this.pageSize = response.data.pageSize;
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleProductList(index, row) {
console.log(index, row);
},
handleProductCommentList(index, row) {
console.log(index, row);
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
}
}
}
</script>
<style></style>
<style>
.pagination-container {
float: right;
margin-top: 20px;
}
</style>