商品属性列表功能完善

src/api/productAttr.js

@@ -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
+  })
+}

src/router/index.js

@@ -74,6 +74,13 @@ export const constantRouterMap = [
         component: () => import('@/views/pms/productAttr/index'),
         meta: {title: '商品类型', icon: 'product-attr'}
       },
+      {
+        path: 'productAttrList',
+        name: 'productAttrList',
+        component: () => import('@/views/pms/productAttr/productAttrList'),
+        meta: {title: '商品属性列表'},
+        hidden:true
+      },
       {
         path: 'addProductAttr',
         name: 'addProductAttr',

src/views/pms/productAttr/index.vue

@@ -157,10 +157,10 @@
         this.productAttrCate.id = row.id;
       },
       getAttrList(index, row) {
-        console.log('addProductAttrCate')
+        this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:0}})
       },
       getParamList(index, row) {
-        console.log('addProductAttrCate')
+        this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:1}})
       },
       handleConfirm(formName){
         this.$refs[formName].validate((valid) => {

src/views/pms/productAttr/productAttrList.vue

@@ -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>
+
+