添加、修改商品属性功能

src/api/productAttr.js

@@ -14,3 +14,25 @@ export function deleteProductAttr(data) {
     data:data
   })
 }
+
+export function createProductAttr(data) {
+  return request({
+    url:'/productAttribute/create',
+    method:'post',
+    data:data
+  })
+}
+
+export function updateProductAttr(id,data) {
+  return request({
+    url:'/productAttribute/update/'+id,
+    method:'post',
+    data:data
+  })
+}
+export function getProductAttr(id) {
+  return request({
+    url:'/productAttribute/'+id,
+    method:'get'
+  })
+}

src/router/index.js

@@ -84,11 +84,18 @@ export const constantRouterMap = [
       {
         path: 'addProductAttr',
         name: 'addProductAttr',
-        component: () => import('@/views/pms/productAttr/index'),
+        component: () => import('@/views/pms/productAttr/addProductAttr'),
         meta: {title: '添加商品属性'},
         hidden:true
       },
       {
+        path: 'updateProductAttr',
+        name: 'updateProductAttr',
+        component: () => import('@/views/pms/productAttr/updateProductAttr'),
+        meta: {title: '修改商品属性'},
+        hidden:true
+      },
+      {
         path: 'brand',
         name: 'brand',
         component: () => import('@/views/pms/brand/index'),

src/styles/index.scss

@@ -99,3 +99,13 @@ a:hover {
   float: right;
   margin-top: 20px;
 }
+
+//添加、更新表单样式
+.form-container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 600px;
+  padding: 35px 35px 15px 35px;
+  margin: 20px auto;
+}

src/views/pms/brand/components/BrandDetail.vue

@@ -140,14 +140,6 @@
   }
 </script>
 <style>
-  .form-container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    width: 520px;
-    padding: 35px 35px 15px 35px;
-    margin: 20px auto;
-  }
 </style>
 
 

src/views/pms/productAttr/addProductAttr.vue

@@ -0,0 +1,15 @@
+<template>
+  <product-attr-detail :is-edit='false'></product-attr-detail>
+</template>
+
+<script>
+  import ProductAttrDetail from './components/ProductAttrDetail'
+  export default {
+    name: 'addProductAttr',
+    components: { ProductAttrDetail }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/pms/productAttr/components/ProductAttrDetail.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="form-container container-frame">
+    <el-form :model="productAttr" :rules="rules" ref="productAttrFrom" label-width="150px">
+      <el-form-item label="属性名称：" prop="name">
+        <el-input v-model="productAttr.name"></el-input>
+      </el-form-item>
+      <el-form-item label="商品类型：">
+        <el-select v-model="productAttr.productAttributeCategoryId" placeholder="请选择">
+          <el-option
+            v-for="item in productAttrCateList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="分类筛选样式:">
+        <el-radio-group v-model="productAttr.filterType">
+          <el-radio :label="0">普通</el-radio>
+          <el-radio :label="1">颜色</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="能否进行检索:">
+        <el-radio-group v-model="productAttr.searchType">
+          <el-radio :label="0">不需要检索</el-radio>
+          <el-radio :label="1">关键字检索</el-radio>
+          <el-radio :label="2">范围检索</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="商品属性关联:">
+        <el-radio-group v-model="productAttr.relatedStatus">
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="属性是否可选:">
+        <el-radio-group v-model="productAttr.selectType">
+          <el-radio :label="0">唯一</el-radio>
+          <el-radio :label="1">单选</el-radio>
+          <el-radio :label="1">复选</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="属性值的录入方式:">
+        <el-radio-group v-model="productAttr.inputType">
+          <el-radio :label="0">手工录入</el-radio>
+          <el-radio :label="1">从下面列表中选择</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="属性值可选值列表:">
+        <el-input :autosize="true" type="textarea" v-model="productAttr.inputList"></el-input>
+      </el-form-item>
+      <el-form-item label="是否支持手动新增:">
+        <el-radio-group v-model="productAttr.handAddStatus">
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="排序属性：">
+        <el-input v-model="productAttr.sort"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('productAttrFrom')">提交</el-button>
+        <el-button  v-if="!isEdit" @click="resetForm('productAttrFrom')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import {fetchList} from '@/api/productAttrCate'
+  import {createProductAttr,getProductAttr,updateProductAttr} from '@/api/productAttr'
+
+  const defaultProductAttr = {
+    filterType: 0,
+    handAddStatus: 0,
+    inputList: '',
+    inputType: 0,
+    name: '',
+    productAttributeCategoryId: 0,
+    relatedStatus: 0,
+    searchType: 0,
+    selectType: 0,
+    sort: 0,
+    type: 0
+  };
+  export default {
+    name: "ProductAttrDetail",
+    props: {
+      isEdit: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        productAttr: null,
+        rules: {
+          name: [
+            {required: true, message: '请输入属性名称', trigger: 'blur'},
+            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+          ]
+        },
+        productAttrCateList: null
+      }
+    },
+    created() {
+      if(this.isEdit){
+        getProductAttr(this.$route.query.id).then(response => {
+          this.productAttr = response.data;
+        });
+      }else{
+        this.resetProductAttr();
+      }
+      this.getCateList();
+    },
+    methods: {
+      getCateList() {
+        let listQuery = {pageNum: 1, pageSize: 100};
+        fetchList(listQuery).then(response => {
+          this.productAttrCateList = response.data.list;
+        });
+      },
+      resetProductAttr() {
+        this.productAttr = Object.assign({}, defaultProductAttr);
+        this.productAttr.productAttributeCategoryId = Number(this.$route.query.cid);
+        this.productAttr.type = Number(this.$route.query.type);
+      },
+      onSubmit(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$confirm('是否提交数据', '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              if(this.isEdit){
+                updateProductAttr(this.$route.query.id,this.productAttr).then(response=>{
+                  this.$message({
+                    message: '修改成功',
+                    type: 'success',
+                    duration: 1000
+                  });
+                  this.$router.back();
+                });
+              }else{
+                createProductAttr(this.productAttr).then(response=>{
+                  this.$message({
+                    message: '提交成功',
+                    type: 'success',
+                    duration: 1000
+                  });
+                  this.resetForm('productAttrFrom');
+                });
+              }
+            });
+
+          } else {
+            this.$message({
+              message: '验证失败',
+              type: 'error',
+              duration: 1000
+            });
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+        this.resetProductAttr();
+      }
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/pms/productAttr/productAttrList.vue

@@ -127,7 +127,7 @@
         });
       },
       addProductAttr() {
-        console.log("addProductAttr");
+        this.$router.push({path:'/pms/addProductAttr',query:{cid:this.$route.query.cid,type:this.$route.query.type}});
       },
       handleSelectionChange(val) {
         this.multipleSelection = val;
@@ -165,7 +165,7 @@
         this.getList();
       },
       handleUpdate(index, row) {
-        console.log("handleUpdate");
+        this.$router.push({path:'/pms/updateProductAttr',query:{id:row.id}});
       },
       handleDeleteProductAttr(ids) {
         this.$confirm('是否要删除该属性', '提示', {

src/views/pms/productAttr/updateProductAttr.vue

@@ -0,0 +1,15 @@
+<template>
+  <product-attr-detail :is-edit='true'></product-attr-detail>
+</template>
+
+<script>
+  import ProductAttrDetail from './components/ProductAttrDetail'
+  export default {
+    name: 'updateProductAttr',
+    components: { ProductAttrDetail }
+  }
+</script>
+
+<style scoped>
+
+</style>