VUE后台管理系统(二)

SPU管理

• 先搞定静态组件(类似Attr管理的页面结构)

### product.Spu.index.vue
<template>
  <div>
    <!--三级联动结构(全局组件)-->
    <el-card style="margin: 20px 0px;">
      <!--传值show过去-->
      <CategorySelect @getCategoryId="getCategoryId" :show="!show"></CategorySelect>
    </el-card>

    <!--下半部分结构(有三部分要进行切换)-->
    <el-card>
      <!--第一部分SPU结构-->
      <div>
        <el-button type="primary" icon="el-icon-plus">添加SPU</el-button>
        <el-table style="width: 100%" border>

          <el-table-column type="index" label="序号" width="80px" align="center">
          </el-table-column>

          <el-table-column prop="prop" label="SPU名称" width="width">
          </el-table-column>

          <el-table-column prop="prop" label="SPU描述" width="width">
          </el-table-column>

          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row, $index }">
              <el-button type="success" icon="el-icon-plus" size="mini"></el-button>
              <el-button type="warning" icon="el-icon-edit" size="mini"></el-button>
              <el-button type="info" icon="el-icon-info" size="mini"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--分页器
          @current-change="getPageList" @size-change="handleSizeChange"
        -->
        <el-pagination style="textAlign:center" :current-page="6" :page-size="3"
          :page-sizes="[3,5,10]" :total="23" layout="prev,pager,next,jumper,->,sizes,total">
        </el-pagination>

      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    name:'Spu',
    data(){
      return {
        show:true, // 初始化数据
        category1Id:'',
        category2Id:'',
        category3Id:'',
      }
    },
    methods:{
      getCategoryId({categoryId,level}){ // 收集categoryId
        if(level == 1){
          this.category1Id = categoryId
          this.category2Id = '',
          this.category3Id = ''
        }else if(level == 2){
          this.category2Id = categoryId
          this.category3Id = ''
        }else{
          this.category3Id = categoryId
          this.getSpuList()
        }
      },
      getSpuList(){ // 占位

      }
    }
  }
</script>

• 发请求获取SPU列表数据

### api.product.spu.js
import request from '@/utils/request'
// 接口从外表看,只需要两个数据,category3Id通过params参数传给后端
export const reqSpuList = (page,limit,category3Id)=>request({url:`/admin/product/${page}/${limit}`,method:'get',params:{category3Id}})

### Spu.index.vue
......
<script>
  export default {
    name:'Spu',
    data(){
      return {
       ......
        page:1, // 分页器数据相关
        limit:3,
        total:0,

        records:[] // SPU列表数据
      }
    },
    methods:{
      getCategoryId({categoryId,level}){
        ......
      },
      async getSpuList(){ //发请求获取SPU数据和分页相关数据
        const {page,limit,category3Id} = this;
        let res = await this.$API.spu.reqSpuList(page,limit,category3Id)
		if(res.code == 200){
			this.total = res.data.total
			this.records = res.data.records
		}
      }
    }
  }
</script>

• 把按钮打包成全局组件并运用

### components.HintButton.index.vue
<template>
  <!--这里若使用div,则每个按钮都独立一行,不符合需求-->
  <!--使用title来展示"当用户把鼠标移动到图标而显示的提示信息"-->
  <a :title="title" style="margin: 10px;">
    <!--$attrs获取组件传过来的所有原生属性-->
    <!--$listeners用来监听,这里暂时没有用到,是个空对象-->
    <el-button v-bind="$attrs" v-on="$listeners"></el-button>
  </a>
</template>

<script>

  export default {
    name:"HintButton",
    props:['title'], // 接收传过来的title
  }
</script>

### main.js
......
import HintButton from '@/components/HintButton'
Vue.component(HintButton.name,HintButton)

### Spu.index.vue
......
<el-table-column prop="prop" label="操作" width="width">
	<template slot-scope="{ row, $index }">
	  <!--type,icon,size都被 $attrs接收,title被 props 接收-->
	  <hint-button type="success" icon="el-icon-plus" size="mini" title="添加sku"></hint-button>
	  <hint-button type="warning" icon="el-icon-edit" size="mini" title="修改spu"></hint-button>
	  <hint-button type="info" icon="el-icon-info" size="mini" title="查看当前spu的全部sku列表"></hint-button>
	  <hint-button type="danger" icon="el-icon-delete" size="mini" title="删除spu"></hint-button>
	  <!--以下默认写法当然可以,上面的写法vue也支持-->
	  <!-- <HintButton type="danger" icon="el-icon-delete" size="mini" title="我的测试"></HintButton> -->
	</template>
</el-table-column>

• 把分页器参数搞成动态的

### Spu.index.vue
......
<!--动态参数并绑定事件-->
<el-pagination style="textAlign:center" :current-page="page" :page-size="limit"
  :page-sizes="[3,5,10]" :total="total" layout="prev,pager,next,jumper,->,sizes,total"
  @current-change="getSpuList" @size-change="handleSizeChange">
  <!-- @current-change="handleCurrentChange"> -->
</el-pagination>
......
<script>
  export default {
    name:'Spu',
    ......
    methods:{
      getCategoryId({categoryId,level}){
        ......
      },
      <!--默认页码数设置为1-->
      async getSpuList(pages=1){
        this.page = pages;
        const {page,limit,category3Id} = this;
        let res = await this.$API.spu.reqSpuList(page,limit,category3Id)
   
        if(res.code == 200){
          this.total = res.data.total
          this.records = res.data.records
        }
      },
      <!--当用户改变"每页显示的页码数"时,触发-->
      handleSizeChange(limit){
        this.limit = limit;
        this.getSpuList();
      }
      // 把以下逻辑合并到了getSpuList
      // handleCurrentChange(page){
      //   this.page = page;
      //   this.getSpuList()
      // }
    }
  }
</script>