update:商品分类

src/views/store/storeProductCategory/index.vue

@@ -28,6 +28,14 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+        >新增</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button
           type="warning"
@@ -65,6 +73,22 @@
           <dict-tag :options="orOptions" :value="scope.row.isShow"/>
         </template>
       </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
     
     </el-table>
 
@@ -73,33 +97,23 @@
     <!-- 添加或修改商品分类对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="上级分类" prop="pid">
-
-              <treeselect  v-model="form.pid"  style="width:205.4px" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择上级分类" />
+        <el-form-item label="上级分类" prop="pid"  >
+          <treeselect v-model="form.pid" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择上级分类" />
         </el-form-item>
         <el-form-item label="分类名称" prop="cateName">
           <el-input v-model="form.cateName" placeholder="请输入分类名称" />
         </el-form-item>
-        <el-form-item label="排序" prop="sort">
-           <el-input-number v-model="form.sort"  :min="0" :max="100" label="排序"></el-input-number>
+        <el-form-item label="图标"  prop="pic" v-if="form.pid!=0">
+           <Material v-model="picArr" type="image" :num="1" :width="150" :height="150" />
         </el-form-item>
-        <el-form-item label="图标" prop="pic">
-          <el-upload
-                      v-model="form.pic"
-                      class="avatar-uploader"
-                      :action="uploadUrl"
-                      :show-file-list="false"
-                      :on-success="handleAvatarSuccess"
-                      :before-upload="beforeAvatarUpload">
-                      <img v-if="form.pic" :src="form.pic" class="avatar" width="200px">
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+        <el-form-item label="状态" prop="isShow">
+            <el-radio v-model="form.isShow" label="1">显示</el-radio>
+            <el-radio v-model="form.isShow" label="0">隐藏</el-radio>
         </el-form-item>
-        <el-form-item label="是否推荐" prop="isShow">
-      <el-radio-group v-model="form.isShow">
-         <el-radio :label="item.dictValue" v-for="item in orOptions" >{{item.dictLabel}}</el-radio>
-      </el-radio-group>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" placeholder="请输入排序" />
         </el-form-item>
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -113,11 +127,13 @@
 import { getPidList,getAllStoreProductCategory,pidlist, listCategory, getCategory, delCategory, addCategory, updateCategory, exportCategory } from "@/api/store/storeProductCategory";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import Material from '@/components/Material'
 export default {
   name: "Category",
-  components: {Treeselect},
+  components: {Treeselect,Material},
   data() {
     return {
+      picArr: [],
       categoryOptions:[],
       uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
       baseUrl: process.env.VUE_APP_BASE_API,
@@ -169,7 +185,7 @@ export default {
   },
   created() {
 
-      this.getpidList();
+    this.getpidList();
     this.getList();
     this.getDicts("sys_company_or").then(response => {
       this.orOptions = response.data;
@@ -179,6 +195,11 @@ export default {
           });
 
   },
+  watch: {
+    picArr: function(val) {
+      this.form.pic = val.join(',')
+    }
+  },
   methods: {
     /** 查询商品分类列表 */
     getList() {
@@ -250,6 +271,7 @@ export default {
         updateTime: null,
         isDel: null
       };
+      this.picArr=[];
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -283,6 +305,9 @@ export default {
         this.form = response.data;
         this.open = true;
         this.title = "修改商品分类";
+        if(this.form.pic){
+          this.picArr=this.form.pic.split(",");
+        }
         this.form.isShow = String(this.form.isShow)
         this.getTree();
       });