添加、修改商品属性功能

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,10 +84,17 @@ 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',

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>