12

src/api/product/productAttr.js

@@ -1,6 +1,13 @@
 import request from '@/utils/request'
 var service_name = 'oil-mall' 
 export default {
+  classifySave(page) {  
+    return request({
+      url: `/${service_name}/mallProductClassification/save`,
+      method: 'post',
+      data: page
+    })
+  },  
   classifyGetByPage(page) { // 分页查询
     return request({
       url: `/${service_name}/mallProductClassification/getByPage`,
@@ -35,6 +42,13 @@ delete(page) {
       data: page
     })
   },  
+  classifyDelete(page) { 
+    return request({
+      url: `/${service_name}/mallProductClassification/delete`,
+      method: 'post',
+      data: page
+    })
+  },  
   typeSave(page) {  
     return request({
       url: `/${service_name}/mallProductAttributesType/save`,

src/components/Category/edit.vue

@@ -1,98 +1,98 @@
 <template>
-  <div>
-    
+  <div> 
     <el-form ref="editPram" :model="editPram" label-width="130px">
-      <el-form-item
-        label="分类名称"
-        prop="name"
-        :rules="[{ required:true,message:'请输入分类名称',trigger:['blur','change'] }]"
-      >
-        <el-input v-model="editPram.name"   placeholder="分类名称" />
+      <el-form-item label="分类名称" prop="categoryName" :rules="[{ required: true, message: '请输入分类名称', trigger: ['blur', 'change'] }]">
+        <el-input v-model="editPram.categoryName" placeholder="分类名称" />
       </el-form-item>
-      <!-- <el-form-item label="URL">
-        <el-input v-model="editPram.url" placeholder="URL" />
-      </el-form-item> -->
-      <el-form-item label="父级" >
-        <el-cascader v-model="editPram.pid" :options="parentOptions" :props="categoryProps" style="width:100%" />
+      <el-form-item v-if="editPram.parentCategoryName" label="父级"  > 
+          {{  editPram.parentCategoryName  }}
       </el-form-item>
-      <!-- <el-form-item label="菜单图标" >
-        <el-input placeholder="请选择菜单图标" v-model="editPram.extra">
-          <el-button slot="append" icon="el-icon-circle-plus-outline" @click="addIcon"></el-button>
-        </el-input>
-      </el-form-item> -->
-      <!-- <el-form-item label="分类图标(180*180)">
+      <el-form-item label="分类图标(180*180)">
         <div class="upLoadPicBox" @click="modalPicTap('1')">
-          <div v-if="editPram.extra" class="pictrue">
-            <img :src="editPram.extra">
-          </div>
-          <div v-else class="upLoad">
-            <i class="el-icon-camera cameraIconfont" />
-          </div>
+          <upload :photo="editPram.icon" @success="uploadSuccess" tip="图标尺寸为18*18比例，大小不能超过200KB，图片只能为jpg、png、gif格式"></upload>
         </div>
-      </el-form-item> -->
+      </el-form-item>
       <el-form-item label="排序">
-        <el-input-number v-model="editPram.sort" :min="0"/>
+        <el-input-number v-model="editPram.sort" :min="0" />
       </el-form-item>
       <el-form-item label="状态">
-        <el-switch v-model="editPram.status"  active-text="显示"
-                   inactive-text="隐藏" :active-value="true" :inactive-value="false" />
+        <el-switch v-model="editPram.showFlag" active-text="显示" inactive-text="隐藏" :active-value="1"
+          :inactive-value="2" />
       </el-form-item>
-      <!-- <el-form-item label="扩展字段" >
-        <el-input v-model="editPram.extra" type="textarea" placeholder="扩展字段" />
-      </el-form-item> -->
       <el-form-item>
-        <el-button type="primary" :loading="loadingBtn" @click="handlerSubmit('editPram')">确定</el-button>
+        <el-button type="primary" :loading="loadingBtn" @click="handlerSubmit">确定</el-button>
         <el-button @click="close">取消</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 <!--创建和编辑公用一个组件-->
-<script> 
+<script>
+import upload from '@/components/Upload/index'
+import productApi from '@/api/product/productAttr.js';
+import { loadingFn } from "@/utils/validate"
+
 export default {
-  // name: "edit"
-  props: { },
+  // name: "edit",
+  components: { upload },
+  props: {
+    parentOptions: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
-    return {
+    return { 
       loadingBtn: false,
       constants: [],
       editPram: {
-        extra: null,
-        name: null,
-        pid: null,
-        sort: 0,
-        status: true,
-        type: 1,
-        url: null,
-        id: 0
+        level: 1,
+        icon:"",
+        showFlag: 1,
+        categoryName: "",
+        sort:1,
+        parentId:"",
+        parentCategoryName:""
       },
       categoryProps: {
         value: 'id',
-        label: 'name',
-        children: 'child',
-        expandTrigger: 'hover',
-        checkStrictly: true,
-        emitPath: false
-      },
-      parentOptions: []
+        label: 'categoryName',
+        children: 'children'
+      }
     }
   },
   mounted() {
     // this.initEditData()
   },
   methods: {
+    uploadSuccess(e, res) {
+      if (res.code == 20000) {
+        ({ publicUrl: this.editPram.icon } = res.data);
+      }
+    },
     // 点击图标
-    addIcon() {},
+    addIcon() { },
     // 点击商品图
-    modalPicTap (tit, num, i) {
+    modalPicTap(tit, num, i) {
     },
     close() {
+      this.$parent.$parent.editDialogConfig.visible=false; 
     },
     initEditData() {
     },
     addTreeListLabelForCasCard(arr, child) {
     },
-    handlerSubmit(formName) {
+    handlerSubmit() {  
+      productApi.classifySave(this.editPram,).then((result) => {
+        if(result.code==20000){
+          this.$parent.$parent.editDialogConfig.visible=false;
+          this.$message.success("添加成功！");
+          this.$parent.$parent.handleCurrentChange();
+
+        }        
+      }).catch((err) => {
+        
+      });
     },
     handlerSaveOrUpdate(isSave) {
     }
@@ -101,5 +101,7 @@ export default {
 </script>
 
 <style scoped>
-
+::v-deep .photo-container {
+  align-items: flex-start !important;
+}
 </style>

src/components/Upload/index.vue

@@ -6,14 +6,14 @@
       :limit="1"
       :show-file-list="false"
       :on-success="uploadSuccess"
-      :on-remove="removeUrl"
-      :data="{'code':code}"
+      :on-remove="removeUrl" 
+      :data="{'code':code,'ossKey':'xingyou2','pathKey':'banner-group','encrypt':'PUBLIC'}"
     >
       <img v-if="photoUrl" :src="photoUrl" class="avatar">
       <i v-else class="el-icon-plus avatar-uploader-icon" />
     </el-upload>
     <span class="upload-span">
-      <slot name="bottom">请上传图片</slot>
+      <slot name="bottom">{{ tip }}</slot>
     </span>
   </div>
 </template>
@@ -21,6 +21,10 @@
 <script>
 export default {
   props: {
+    tip:{
+      type: String,
+      default: "请上传图片"
+    },
     photo: { // 传参用的url
       type: String,
       default: null
@@ -67,9 +71,9 @@ export default {
         this.$message.success(res.msg)
         this.photoUrl = res.data.url
         if (this.isPrivate) {
-          this.$emit('success', this.res.path)
+          this.$emit('success', this.res.path,res)
         } else {
-          this.$emit('success', this.photoUrl)
+          this.$emit('success', this.photoUrl,res)
         }
       } else {
         this.$message.error(res.msg)

src/utils/validate.js

@@ -28,18 +28,18 @@ export function checkN(string) {
  * @constructor
  */
 export const Debounce = (fn, t) => {
-	const delay = t || 500
-	let timer
-	return function() {
-		const args = arguments
-		if (timer) {
-			clearTimeout(timer)
-		}
-		timer = setTimeout(() => {
-			timer = null
-			fn.apply(this, args)
-		}, delay)
-	}
+  const delay = t || 500
+  let timer
+  return function () {
+    const args = arguments
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(() => {
+      timer = null
+      fn.apply(this, args)
+    }, delay)
+  }
 }
 /**
  * @param {string} string
@@ -152,16 +152,16 @@ export function isArray(arg) {
 }
 export function isStrictPromise(value) {
   return !!value
-      && typeof value === 'object'
-      && typeof value.then === 'function'
-      && typeof value.finally === 'function';
+    && typeof value === 'object'
+    && typeof value.then === 'function'
+    && typeof value.finally === 'function';
 }
-export function loadingFn(_loading,callback) {
-  console.log(isStrictPromise(callback),_loading,'isStrictPromise(callback)')
-  _loading = true;
+export function loadingFn(loading, callback) {
+  this[loading] = true
   if (isStrictPromise(callback)) {
-      callback.finally(() => {
-          // _loading = false;
-      })
+    callback.finally(() => {
+      console.log("运行")
+      this[loading] = false
+    })
   };
 }

src/views/product/productAttr/addAttr.vue

@@ -142,8 +142,7 @@ export default {
           if (this.formDynamic.spec.length === 0) {
             return this.$message.warning('请至少添加一条商品规格！');
           }
-          this.modal_loading = true;  
-          console.log('this.formDynamic',this.model,this.formDynamic)
+          this.modal_loading = true;   
           Promise.all([...this.formDynamic.spec.map(item => { 
             return productApi[this.model]({
               "attributeName": item.value,

src/views/product/productAttr/components/attrList.vue

@@ -34,7 +34,7 @@
     </div>
 </template> 
 <script>
-import productApi from '@/api/product/productAttr.js'; 
+import productApi from '@/api/product/productAttr.js';
 
 export default {
     name: "attrList",
@@ -104,7 +104,7 @@ export default {
         },
         edit(row) {
             let data = Object.assign({}, row, {
-                name:this.selectAttrId.split("/")[1],
+                name: this.selectAttrId.split("/")[1] || "",
                 spec: [{
                     value: row.attributeName,
                     detail: row.attributeContent.split(",")
@@ -114,7 +114,12 @@ export default {
             this.$parent.$parent.addAttr('update');
         },
         init() {
-            if (this.selectAttrId) this.page.params.typeId = this.selectAttrId.split("/")[0] && this.getByPage();
+            if (this.selectAttrId && this.selectAttrId.indexOf("/") !== -1) {
+                this.page.params.typeId = this.selectAttrId.split("/")[0] || "";
+                this.getByPage();
+            } else {
+                this.$message.warning("初始化出错")
+            }
         }
     }
 }

src/views/product/productClassify/index.vue

@@ -28,47 +28,63 @@
       </div>
     </el-card> -->
     <el-card :bordered="false" shadow="never" class="ivu-mt-16">
-      <el-button type="primary" class="bnt" @click="addClass">添加分类</el-button>
-      <el-table class="mt14" :loading="loading"  :data="tableData">
-        <el-table-column field="id" label="ID" tooltip width="80"></el-table-column>
-        <el-table-column field="cate_name" tree-node label="分类名称" min-width="250"></el-table-column>
-        <el-table-column field="pic" label="分类图标" min-width="100">
-          <template v-slot="{ row }">
-            <div class="tabBox_img" v-viewer v-if="row.pic">
-              <img v-lazy="row.pic" />
-            </div>
+      <el-button type="primary" class="bnt" @click="addClass(null)">添加分类</el-button>
+      <el-table row-key="id" class="mt14" v-loading="loading" :tree-props="{ children: 'children' }" :data="tableData">
+        <el-table-column prop="categoryNum" label="编号"></el-table-column>
+        <el-table-column prop="categoryName" label="分类名称"></el-table-column>
+        <el-table-column prop="level" label="级别"></el-table-column>
+        <el-table-column prop="icon" label="分类图标" min-width="100">
+          <template slot-scope="scope">
+            <el-image style="width: 50px; height: 50px" :src="scope.row.icon" :preview-src-list="[scope.row.icon]">
+            </el-image>
           </template>
         </el-table-column>
-        <el-table-column field="sort" label="排序" min-width="100" tooltip="true"></el-table-column>
-        <el-table-column field="is_show" label="状态" min-width="120">
-          <template v-slot="{ row }">
-            <el-switch class="defineSwitch" :active-value="1" :inactive-value="0" v-model="row.is_show"
-              :value="row.is_show" @change="onchangeIsShow(row)" size="large" active-text="开启" inactive-text="关闭">
+        <el-table-column prop="showFlag" label="是否显示">
+          <template slot-scope="scope">
+            <el-switch active-value="1" inactive-value="0" v-model="scope.row.showFlag" active-color="#13ce66"
+              inactive-color="#ff4949">
             </el-switch>
           </template>
         </el-table-column>
-        <el-table-column field="date" label="操作" width="120" fixed="right">
-          <template v-slot="{ row, index }">
-            <a @click="edit(row)">编辑</a>
-            <el-divider direction="vertical"></el-divider>
-            <a @click="del(row, '删除商品分类', index)">删除</a>
+        <el-table-column prop="sort" label="排序" min-width="100" tooltip="true"></el-table-column>
+        <el-table-column prop="date" label="操作" width="120" fixed="right">
+          <template slot-scope="scope">
+            <el-dropdown>
+              <el-button type=text>设置<i class="el-icon-arrow-down el-icon--right"></i></el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click="edit(scope.row)">编辑</el-dropdown-item>
+                <el-dropdown-item v-if="scope.row.level == 1">
+                  <span @click="addClass(scope.row)">新增下级</span>
+                </el-dropdown-item>
+                <el-dropdown-item v-if="scope.row.level == 1">查看下级 </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <el-button type=text>
+            </el-button>
+            <el-button @click="del(scope.row, scope)" type=text>删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </el-card>
+    <div class="acea-row row-right page">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+        :current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
+    </div>
+
     <!-- 添加 编辑表单-->
     <edit-from ref="edits" :FromData="FromData" @submitFail="userSearchs"></edit-from>
     <el-dialog title="添加分类" :visible.sync="editDialogConfig.visible" destroy-on-close :close-on-click-modal="false">
-      <edit />
+      <edit ref="edit" :parentOptions="tableData" />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import edit from '@/components/Category/edit'  
+import edit from '@/components/Category/edit'
 import editFrom from '../../../components/from/from';
-import productApi from '@/api/product/productAttr.js'; 
- import {loadingFn} from "@/utils/validate"
+import productApi from '@/api/product/productAttr.js';
+import { loadingFn } from "@/utils/validate"
 export default {
   name: 'product_productClassify',
   components: {
@@ -99,47 +115,60 @@ export default {
       total: 0,
       tableData: [],
     };
-  }, 
+  },
   mounted() {
-    // this.goodsCategory();
-    // this.getList();
+    this.getList();
   },
   methods: {
+    handleCommand(e) {
+
+    },
+    handleSizeChange(val) {
+      this.page.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.page.currentPage = val
+      this.getList()
+    },
     // 商品分类；
-    goodsCategory() { 
+    goodsCategory() {
     },
     // 列表
     getList() {
-      this.loading = true;
-      // console.log(,'loadingFn')
-      // loadingFn(this.loading,productApi.classifyGetByPage(this.page))
-      // this.artFrom.is_show = this.artFrom.is_show || '';
-      // this.artFrom.pid = this.artFrom.pid || '';
-      // productListApi(this.artFrom)
-      //   .then(async (res) => {
-      //     let data = res.data;
-      //     this.tableData = data.list;
-      //     this.total = data.count;
-      //     this.loading = false;
-      //   })
-      //   .catch((res) => {
-      //     this.loading = false;
-      //     this.$message.error(res.msg);
-      //   });
-      // productApi.classifyGetByPage()
+      loadingFn.call(this, "loading", productApi.classifyGetByPage(this.page).then(res => {
+        if (res.code = 20000) ({ list: this.tableData = [], totalCount: this.page.totalCount = 0 } = res.data);
+      }));
     },
     pageChange(index) {
       this.artFrom.page = index;
       this.getList();
     },
     // 添加
-    addClass() {
-      this.editDialogConfig.visible = true
-      // this.$modalForm(productCreateApi()).then(() => this.getList());
+    addClass(parent = null) {
+      this.editDialogConfig.visible = true;
+      // this.$nextTick(()=>{
+      //   this.$refs.edit.parent = parent;  
+      // });   
+      if (parent) {
+        let { categoryName, id } = parent;
+        this.$nextTick(() => {
+          this.$refs.edit.editPram = Object.assign(this.$refs.edit.editPram, { parentCategoryName: categoryName, parentId: id, level: 2 });
+        })
+      }
     },
     // 编辑
     edit(row) {
-      // this.$modalForm(productEditApi(row.id)).then(() => this.getList());
+      console.log(row.level);
+      this.editDialogConfig.visible = true; 
+     this.$nextTick(()=>{
+      let { level, icon, showFlag, categoryName, sort, parentId } = row;
+      if (row.level == 1) {
+        this.$refs.edit.editPram = Object.assign(this.$refs.edit.editPram, { level, icon, showFlag, categoryName, sort, parentId })
+      } else {
+        this.$refs.edit.editPram = Object.assign(this.$refs.edit.editPram, { level, icon, showFlag,parentCategoryName:this.tableData.find(item=>item==parentId).categoryName, categoryName, sort, parentId })
+      }
+     })
     },
     // 修改状态
     onchangeIsShow(row) {
@@ -175,22 +204,21 @@ export default {
       this.getList();
     },
     // 删除
-    del(row, tit, num) {
-      let delfromData = {
-        title: tit,
-        num: num,
-        url: `product/category/${row.id}`,
-        method: 'DELETE',
-        ids: '',
-      };
-      this.$modalSure(delfromData)
-        .then((res) => {
-          this.$message.success(res.msg);
-          this.getList();
-        })
-        .catch((res) => {
-          this.$message.error(res.msg);
-        });
+    del(row, scope) {
+      console.log(scope)
+      this.$alert('请确定删除！', '提示', {
+        confirmButtonText: '确定',
+        callback: action => {
+          if (action == "confirm") {
+            loadingFn.call(this, "loading", productApi.classifyDelete(row).then(res => {
+              if (res.code = 20000) {
+                this.$message.success("操作成功！")
+                this.handleCurrentChange()
+              }
+            }));
+          }
+        }
+      });
     },
     // 表格搜索
     userSearchs() {