|
|
@@ -0,0 +1,172 @@
|
|
|
+<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
|
|
|
+ class="btn-add"
|
|
|
+ @click="handleAddProductCate()"
|
|
|
+ size="mini">
|
|
|
+ 添加
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="table-container">
|
|
|
+ <el-table ref="productCateTable"
|
|
|
+ style="width: 100%"
|
|
|
+ :data="list"
|
|
|
+ v-loading="listLoading" border>
|
|
|
+ <el-table-column label="编号" width="100" 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.level | levelFilter}}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="商品数量" width="100" align="center">
|
|
|
+ <template slot-scope="scope">{{scope.row.productCount }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="数量单位" width="100" align="center">
|
|
|
+ <template slot-scope="scope">{{scope.row.productUnit }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="导航栏" width="100" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-switch
|
|
|
+ @change="handleNavStatusChange(scope.$index, scope.row)"
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="0"
|
|
|
+ v-model="scope.row.navStatus">
|
|
|
+ </el-switch>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="是否显示" width="100" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-switch
|
|
|
+ @change="handleShowStatusChange(scope.$index, scope.row)"
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="0"
|
|
|
+ v-model="scope.row.showStatus">
|
|
|
+ </el-switch>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="排序" width="100" 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="handleShowNextLevel(scope.$index, scope.row)">查看下级
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ @click="handleTransferProduct(scope.$index, scope.row)">转移商品
|
|
|
+ </el-button>
|
|
|
+ </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="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} from '@/api/productCate'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "productCateList",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: null,
|
|
|
+ total: null,
|
|
|
+ listLoading: true,
|
|
|
+ listQuery: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 5
|
|
|
+ },
|
|
|
+ parentId: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleAddProductCate() {
|
|
|
+ console.log('handleAddProductCate');
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ this.listLoading = true;
|
|
|
+ fetchList(this.parentId, this.listQuery).then(response => {
|
|
|
+ this.listLoading = false;
|
|
|
+ this.list = response.data.list;
|
|
|
+ this.total = response.data.total;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.listQuery.pageNum = 1;
|
|
|
+ this.listQuery.pageSize = val;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.listQuery.pageNum = val;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ handleNavStatusChange(index, row) {
|
|
|
+ console.log('handleAddProductCate');
|
|
|
+ },
|
|
|
+ handleShowStatusChange(index, row) {
|
|
|
+ console.log('handleAddProductCate');
|
|
|
+ },
|
|
|
+ handleShowNextLevel(index, row) {
|
|
|
+ console.log('handleAddProductCate');
|
|
|
+ },
|
|
|
+ handleTransferProduct(index, row) {
|
|
|
+ console.log('handleAddProductCate');
|
|
|
+ },
|
|
|
+ handleUpdate(index, row) {
|
|
|
+ console.log('handleAddProductCate');
|
|
|
+ },
|
|
|
+ handleDelete(index, row) {
|
|
|
+ console.log('handleAddProductCate');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ levelFilter(value) {
|
|
|
+ if (value === 0) {
|
|
|
+ return '一级';
|
|
|
+ } else if (value === 1) {
|
|
|
+ return '二级';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
zhh