forked from macrozheng/mall-admin-web
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
zhh
committed
May 21, 2018
1 parent
5c51207
commit d24e109
Showing
4 changed files
with
264 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import request from '@/utils/request' | ||
export function fetchList(cid,params) { | ||
return request({ | ||
url:'/productAttribute/list/'+cid, | ||
method:'get', | ||
params:params | ||
}) | ||
} | ||
|
||
export function deleteProductAttr(data) { | ||
return request({ | ||
url:'/productAttribute/delete', | ||
method:'post', | ||
data:data | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,239 @@ | ||
<template> | ||
<div class="app-container"> | ||
<div class="operate-container container-frame"> | ||
|
||
<i class="el-icon-tickets" style="margin-top: 5px"></i> | ||
<span style="margin-top: 5px">数据列表</span> | ||
<el-button | ||
@click="addProductAttr()" | ||
size="mini"> | ||
添加 | ||
</el-button> | ||
</div> | ||
<div class="table-container"> | ||
<el-table ref="productAttrTable" | ||
: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="属性名称" width="140" align="center"> | ||
<template slot-scope="scope">{{scope.row.name}}</template> | ||
</el-table-column> | ||
<el-table-column label="商品类型" width="140" align="center"> | ||
<template slot-scope="scope">{{$route.query.cname}}</template> | ||
</el-table-column> | ||
<el-table-column label="属性是否可选" width="120" align="center"> | ||
<template slot-scope="scope">{{scope.row.selectType|selectTypeFilter}}</template> | ||
</el-table-column> | ||
<el-table-column label="属性值的录入方式" width="150" align="center"> | ||
<template slot-scope="scope">{{scope.row.inputType|inputTypeFilter}}</template> | ||
</el-table-column> | ||
<el-table-column label="可选值列表" align="center"> | ||
<template slot-scope="scope">{{scope.row.inputList}}</template> | ||
</el-table-column> | ||
<el-table-column label="排序" width="120" align="center"> | ||
<template slot-scope="scope">{{scope.row.sort}}</template> | ||
</el-table-column> | ||
<el-table-column label="操作" width="200" align="center"> | ||
<template slot-scope="scope"> | ||
<el-button | ||
size="mini" | ||
@click="handleUpdate(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> | ||
<div class="batch-operate-container"> | ||
<el-select | ||
size="small" | ||
v-model="operateType" placeholder="批量操作"> | ||
<el-option | ||
v-for="item in operates" | ||
:key="item.value" | ||
:label="item.label" | ||
:value="item.value"> | ||
</el-option> | ||
</el-select> | ||
<el-button | ||
style="margin-left: 20px" | ||
class="search-button" | ||
@click="handleBatchOperate()" | ||
type="primary" | ||
size="small"> | ||
确定 | ||
</el-button> | ||
</div> | ||
<div class="pagination-container"> | ||
<el-pagination | ||
background | ||
@size-change="handleSizeChange" | ||
@current-change="handleCurrentChange" | ||
layout="total, sizes,prev, pager, next,jumper" | ||
:page-size="listQuery.pageSize" | ||
:page-sizes="[5,10,15]" | ||
:current-page.sync="listQuery.pageNum" | ||
:total="total"> | ||
</el-pagination> | ||
</div> | ||
</div> | ||
</template> | ||
<script> | ||
import {fetchList, deleteProductAttr} from '@/api/productAttr' | ||
export default { | ||
name: 'productAttrList', | ||
data() { | ||
return { | ||
list: null, | ||
total: null, | ||
listLoading: true, | ||
listQuery: { | ||
pageNum: 1, | ||
pageSize: 5, | ||
type: this.$route.query.type | ||
}, | ||
operateType: null, | ||
multipleSelection: [], | ||
operates: [ | ||
{ | ||
label: "删除", | ||
value: "deleteProductAttr" | ||
} | ||
] | ||
} | ||
}, | ||
created() { | ||
this.getList(); | ||
}, | ||
methods: { | ||
getList() { | ||
this.listLoading = true; | ||
fetchList(this.$route.query.cid, this.listQuery).then(response => { | ||
this.listLoading = false; | ||
this.list = response.data.list; | ||
this.total = response.data.total; | ||
}); | ||
}, | ||
addProductAttr() { | ||
console.log("addProductAttr"); | ||
}, | ||
handleSelectionChange(val) { | ||
this.multipleSelection = val; | ||
}, | ||
handleBatchOperate() { | ||
if (this.multipleSelection < 1) { | ||
this.$message({ | ||
message: '请选择一条记录', | ||
type: 'warning', | ||
duration: 1000 | ||
}); | ||
return; | ||
} | ||
if (this.operateType !== 'deleteProductAttr') { | ||
this.$message({ | ||
message: '请选择批量操作类型', | ||
type: 'warning', | ||
duration: 1000 | ||
}); | ||
return; | ||
} | ||
let ids = []; | ||
for (let i = 0; i < this.multipleSelection.length; i++) { | ||
ids.push(this.multipleSelection[i].id); | ||
} | ||
this.handleDeleteProductAttr(ids); | ||
}, | ||
handleSizeChange(val) { | ||
this.listQuery.pageNum = 1; | ||
this.listQuery.pageSize = val; | ||
this.getList(); | ||
}, | ||
handleCurrentChange(val) { | ||
this.listQuery.pageNum = val; | ||
this.getList(); | ||
}, | ||
handleUpdate(index, row) { | ||
console.log("handleUpdate"); | ||
}, | ||
handleDeleteProductAttr(ids) { | ||
this.$confirm('是否要删除该属性', '提示', { | ||
confirmButtonText: '确定', | ||
cancelButtonText: '取消', | ||
type: 'warning' | ||
}).then(() => { | ||
let data = new URLSearchParams(); | ||
data.append("ids", ids); | ||
deleteProductAttr(data).then(response => { | ||
this.$message({ | ||
message: '删除成功', | ||
type: 'success', | ||
duration: 1000 | ||
}); | ||
this.getList(); | ||
}); | ||
}); | ||
}, | ||
handleDelete(index, row) { | ||
let ids = []; | ||
ids.push(row.id); | ||
this.handleDeleteProductAttr(ids); | ||
}, | ||
}, | ||
filters: { | ||
inputTypeFilter(value) { | ||
if (value === 1) { | ||
return '手工录入'; | ||
} else { | ||
return '手工录入' | ||
} | ||
}, | ||
selectTypeFilter(value) { | ||
if (value === 1) { | ||
return '单选'; | ||
} else if (value === 2) { | ||
return '多选'; | ||
} else { | ||
return '唯一' | ||
} | ||
}, | ||
} | ||
} | ||
</script> | ||
|
||
<style rel="stylesheet/scss" lang="scss" scoped> | ||
.operate-container { | ||
margin-top: 20px; | ||
} | ||
.operate-container .el-button { | ||
float: right; | ||
} | ||
.table-container { | ||
margin-top: 20px; | ||
} | ||
.batch-operate-container { | ||
display: inline-block; | ||
margin-top: 20px; | ||
} | ||
.pagination-container { | ||
display: inline-block; | ||
float: right; | ||
margin-top: 20px; | ||
} | ||
</style> | ||
|
||
|