商品分类添加编辑功能

feirui · May 22, 2018 · d93e76c · d93e76c
1 parent 8a90048
commit d93e76c
Show file tree

Hide file tree

Showing 8 changed files with 278 additions and 11 deletions.
diff --git a/src/api/productCate.js b/src/api/productCate.js
@@ -6,3 +6,32 @@ export function fetchList(parentId,params) {
  params:params
  })
 }
+export function deleteProductCate(id) {
+ return request({
+ url:'/productCategory/delete/'+id,
+ method:'get'
+ })
+}
+
+export function createProductCate(data) {
+ return request({
+ url:'/productCategory/create',
+ method:'post',
+ data:data
+ })
+}
+
+export function updateProductCate(id,data) {
+ return request({
+ url:'/productCategory/update/'+id,
+ method:'post',
+ data:data
+ })
+}
+
+export function getProductCate(id) {
+ return request({
+ url:'/productCategory/'+id,
+ method:'get',
+ })
+}
diff --git a/src/router/index.js b/src/router/index.js
@@ -68,6 +68,20 @@ export const constantRouterMap = [
  component: () => import('@/views/pms/productCate/index'),
  meta: {title: '商品分类', icon: 'product-cate'}
  },
+ {
+ path: 'addProductCate',
+ name: 'addProductCate',
+ component: () => import('@/views/pms/productCate/add'),
+ meta: {title: '添加商品分类'},
+ hidden:true
+ },
+ {
+ path: 'updateProductCate',
+ name: 'updateProductCate',
+ component: () => import('@/views/pms/productCate/update'),
+ meta: {title: '修改商品分类'},
+ hidden:true
+ },
  {
  path: 'productAttr',
  name: 'productAttr',

diff --git a/src/views/pms/brand/components/BrandDetail.vue b/src/views/pms/brand/components/BrandDetail.vue
@@ -4,7 +4,7 @@
  <el-form-item label="品牌名称：" prop="name">
  <el-input v-model="brand.name"></el-input>
  </el-form-item>
- <el-form-item label="品牌首字母：" property="">
+ <el-form-item label="品牌首字母：">
  <el-input v-model="brand.firstLetter"></el-input>
  </el-form-item>
  <el-form-item label="品牌LOGO：" prop="logo">
@@ -66,7 +66,7 @@
  },
  data() {
  return {
- brand:null,
+ brand:Object.assign({}, defaultBrand),
  rules: {
  name: [
  {required: true, message: '请输入品牌名称', trigger: 'blur'},
@@ -107,7 +107,7 @@
  type: 'success',
  duration:1000
  });
- this.$router.push({path: '/pms/brand'});
+ this.$router.back();
  });
  } else {
  createBrand(this.brand).then(response => {

diff --git a/src/views/pms/productAttr/components/ProductAttrDetail.vue b/src/views/pms/productAttr/components/ProductAttrDetail.vue
@@ -93,7 +93,7 @@
  },
  data() {
  return {
- productAttr: null,
+ productAttr: Object.assign({}, defaultProductAttr),
  rules: {
  name: [
  {required: true, message: '请输入属性名称', trigger: 'blur'},

diff --git a/src/views/pms/productCate/add.vue b/src/views/pms/productCate/add.vue
@@ -0,0 +1,14 @@
+<template> 
+ <product-cate-detail :is-edit='false'></product-cate-detail>
+</template>
+<script>
+ import ProductCateDetail from './components/ProductCateDetail'
+ export default {
+ name: 'addProductCate',
+ components: { ProductCateDetail }
+ }
+</script>
+<style>
+</style>
+
+
diff --git a/src/views/pms/productCate/components/ProductCateDetail.vue b/src/views/pms/productCate/components/ProductCateDetail.vue
@@ -0,0 +1,161 @@
+<template>
+ <div class="form-container container-frame">
+ <el-form :model="productCate"
+ :rules="rules"
+ ref="productCateFrom"
+ label-width="150px">
+ <el-form-item label="分类名称：" prop="name">
+ <el-input v-model="productCate.name"></el-input>
+ </el-form-item>
+ <el-form-item label="上级分类：">
+ <el-select v-model="productCate.parentId"
+ placeholder="请选择分类">
+ <el-option
+ v-for="item in selectProductCateList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="数量单位：">
+ <el-input v-model="productCate.productUnit"></el-input>
+ </el-form-item>
+ <el-form-item label="排序：">
+ <el-input v-model="productCate.sort"></el-input>
+ </el-form-item>
+ <el-form-item label="是否显示：">
+ <el-radio-group v-model="productCate.showStatus">
+ <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="productCate.navStatus">
+ <el-radio :label="1">是</el-radio>
+ <el-radio :label="0">否</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="分类图标：">
+ <single-upload v-model="productCate.icon"></single-upload>
+ </el-form-item>
+ <el-form-item label="关键词：">
+ <el-input v-model="productCate.keywords"></el-input>
+ </el-form-item>
+ <el-form-item label="分类描述：">
+ <el-input type="textarea" :autosize="true" v-model="productCate.description"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="onSubmit('productCateFrom')">提交</el-button>
+ <el-button v-if="!isEdit" @click="resetForm('productCateFrom')">重置</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+</template>
+
+<script>
+ import {fetchList, createProductCate, updateProductCate, getProductCate} from '@/api/productCate';
+ import SingleUpload from '@/components/Upload/singleUpload';
+
+ const defaultProductCate = {
+ description: '',
+ icon: '',
+ keywords: '',
+ name: '',
+ navStatus: 0,
+ parentId: 0,
+ productUnit: '',
+ showStatus: 0,
+ sort: 0
+ };
+ export default {
+ name: "ProductCateDetail",
+ components: {SingleUpload},
+ props: {
+ isEdit: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ return {
+ productCate: Object.assign({}, defaultProductCate),
+ selectProductCateList: [],
+ rules: {
+ name: [
+ {required: true, message: '请输入品牌名称', trigger: 'blur'},
+ {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+ ]
+ }
+ }
+ },
+ created() {
+ if (this.isEdit) {
+ getProductCate(this.$route.query.id).then(response => {
+ this.productCate = response.data;
+ });
+ } else {
+ this.productCate = Object.assign({}, defaultProductCate);
+ }
+ this.getSelectProductCateList();
+ },
+ methods: {
+ getSelectProductCateList() {
+ fetchList(0, {pageSize: 100, pageNum: 1}).then(response => {
+ this.selectProductCateList = response.data.list;
+ this.selectProductCateList.unshift({id: 0, name: '无上级分类'});
+ });
+ },
+ onSubmit(formName) {
+ this.$refs[formName].validate((valid) => {
+ if (valid) {
+ this.$confirm('是否提交数据', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
+ }).then(() => {
+ if (this.isEdit) {
+ updateProductCate(this.$route.query.id, this.productCate).then(response => {
+ this.$refs[formName].resetFields();
+ this.$message({
+ message: '修改成功',
+ type: 'success',
+ duration: 1000
+ });
+ this.$router.back();
+ });
+ } else {
+ createProductCate(this.productCate).then(response => {
+ this.$refs[formName].resetFields();
+ this.brand = Object.assign({}, defaultProductCate);
+ this.$message({
+ message: '提交成功',
+ type: 'success',
+ duration: 1000
+ });
+ });
+ }
+ });
+
+ } else {
+ this.$message({
+ message: '验证失败',
+ type: 'error',
+ duration: 1000
+ });
+ return false;
+ }
+ });
+ },
+ resetForm(formName) {
+ this.$refs[formName].resetFields();
+ this.productCate = Object.assign({}, defaultProductCate);
+ this.getSelectProductCateList();
+ }
+ }
+ }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/pms/productCate/index.vue b/src/views/pms/productCate/index.vue
@@ -57,6 +57,7 @@
  <template slot-scope="scope">
  <el-button
  size="mini"
+ :disabled="scope.row.level | disableNextLevel"
  @click="handleShowNextLevel(scope.$index, scope.row)">查看下级
  </el-button>
  <el-button
@@ -96,7 +97,7 @@
 </template>
 
 <script>
- import {fetchList} from '@/api/productCate'
+ import {fetchList,deleteProductCate} from '@/api/productCate'
 
  export default {
  name: "productCateList",
@@ -113,11 +114,25 @@
  }
  },
  created() {
+ this.resetParentId();
  this.getList();
  },
+ watch: {
+ $route(route) {
+ this.resetParentId();
+ this.getList();
+ }
+ },
  methods: {
+ resetParentId(){
+ if (this.$route.query.parentId != null) {
+ this.parentId = this.$route.query.parentId;
+ } else {
+ this.parentId = 0;
+ }
+ },
  handleAddProductCate() {
- console.log('handleAddProductCate');
+ this.$router.push('/pms/addProductCate');
  },
  getList() {
  this.listLoading = true;
@@ -137,22 +152,35 @@
  this.getList();
  },
  handleNavStatusChange(index, row) {
- console.log('handleAddProductCate');
+ console.log('handleNavStatusChange');
  },
  handleShowStatusChange(index, row) {
- console.log('handleAddProductCate');
+ console.log('handleShowStatusChange');
  },
  handleShowNextLevel(index, row) {
- console.log('handleAddProductCate');
+ this.$router.push({path: '/pms/productCate', query: {parentId: row.id}})
  },
  handleTransferProduct(index, row) {
  console.log('handleAddProductCate');
  },
  handleUpdate(index, row) {
- console.log('handleAddProductCate');
+ this.$router.push({path:'/pms/updateProductCate',query:{id:row.id}});
  },
  handleDelete(index, row) {
- console.log('handleAddProductCate');
+ this.$confirm('是否要删除该品牌', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
+ }).then(() => {
+ deleteProductCate(row.id).then(response => {
+ this.$message({
+ message: '删除成功',
+ type: 'success',
+ duration: 1000
+ });
+ this.getList();
+ });
+ });
  }
  },
  filters: {
@@ -162,6 +190,13 @@
  } else if (value === 1) {
  return '二级';
  }
+ },
+ disableNextLevel(value) {
+ if (value === 0) {
+ return false;
+ } else {
+ return true;
+ }
  }
  }
  }

diff --git a/src/views/pms/productCate/update.vue b/src/views/pms/productCate/update.vue
@@ -0,0 +1,14 @@
+<template> 
+ <product-cate-detail :is-edit='true'></product-cate-detail>
+</template>
+<script>
+ import ProductCateDetail from './components/ProductCateDetail'
+ export default {
+ name: 'updateProductCate',
+ components: { ProductCateDetail }
+ }
+</script>
+<style>
+</style>
+
+