新增修改分类

src/views/business/banner/components/BannerCreate.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-dialog
-      title="添加banner"
+      :title="title"
       :visible.sync="dialogShow"
       width="800px"
       :before-close="close"
@@ -148,6 +148,9 @@ export default {
     };
   },
   computed: {
+    title() {
+      return this.bannerId ? '编辑banner' : '添加banner';
+    },
     bannerPicUrl: {
       get() {
         return this.form.picUrl ? this.form.picUrl.split(',').map(item => {
@@ -166,7 +169,6 @@ export default {
     this.getGoodsTagItems();
     if(this.bannerId){
       goodsBannerDetail({ bannerId: this.bannerId }).then(res => {
-        console.log('res', res)
         const { location, name, sort, picUrl, type, linkUrl, goodsTags } = res.data
         this.form = {
           location: JSON.parse(location).value,
@@ -192,11 +194,6 @@ export default {
       this.$refs["form"].clearValidate();
     },
 
-    // 添加图片
-    pictureSelect(data) {
-      this.form.picUrl = data;
-    },
-
     // 关闭弹框
     close() {
       this.$emit("close");

src/views/business/category/components/CategoryCreate.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-dialog
-      title="添加分类"
+      :title="title"
       :visible.sync="dialogShow"
       width="800px"
       :before-close="close"
@@ -25,11 +25,8 @@
         </el-form-item>
         <el-form-item label="分类图片" prop="picUrl">
           <image-upload
+            v-model="categoryPicUrl"
             :limit="1"
-            :value="form.picUrl"
-            :file-size="50"
-            :is-public="true"
-            @input="pictureSelect"
           />
         </el-form-item>
         <el-form-item label="是否显示" prop="isShow">
@@ -52,7 +49,7 @@
 </template>
 <script>
 import CustomFieldsMixin from "@/mixins/CustomFields";
-import { goodsCategoryCreate } from "@/api/business/category";
+import { goodsCategoryCreate, goodsCategoryDetail, goodsCategoryUpdate } from "@/api/business/category";
 export default {
   mixins: [CustomFieldsMixin],
   props: {
@@ -61,15 +58,16 @@ export default {
       type: Boolean,
       default: false,
     },
-  },
-  created() {
-
+    // 分类ID
+    categoryId: {
+      type: [String, Number],
+      default: null
+    }
   },
   data() {
     return {
       loading: false,
       form: {
-        picUrl: [],
         isShow: 1,
         sort: 0
       },
@@ -79,7 +77,6 @@ export default {
         ],
         picUrl: [
           {
-            type: "array",
             required: true,
             message: "请上传分类图片",
             trigger: "change",
@@ -99,17 +96,34 @@ export default {
       },
     };
   },
-  methods: {
-
-    changeType(){
-      this.$refs["form"].clearValidate();
-    },
-
-    // 添加图片
-    pictureSelect(data) {
-      this.form.picUrl = data;
+  computed: {
+    title() {
+      return this.categoryId ? '编辑分类' : '添加分类';
     },
-
+    categoryPicUrl: {
+      get() {
+        return this.form.picUrl ? this.form.picUrl.split(',').map(item => {
+          return {
+            fileName: item
+          }
+        }) : []
+      },
+      set(val) {
+        this.$set(this.form, 'picUrl', val.map(item => { return item.fileName }).toString())
+      }
+    }
+  },
+  created() {
+    if(this.categoryId){
+      goodsCategoryDetail({ categoryId: this.categoryId }).then(res => {
+        const { name, sort, picUrl, isShow } = res && res.data
+        this.form = {
+          name, sort, picUrl, isShow
+        }
+      })
+    }
+  },
+  methods: {
     // 关闭弹框
     close() {
       this.$emit("close");
@@ -135,14 +149,14 @@ export default {
 
     // 提交
     submitForm(form) {
-      let data = {
-        ... form,
-        picUrl: this.form.picUrl[0].fileName,
-      };
-      goodsCategoryCreate(data)
+      let request = this.categoryId ? goodsCategoryUpdate : goodsCategoryCreate
+      if(this.categoryId){
+        form.categoryId = this.categoryId
+      }
+      request(form)
         .then((res) => {
           if (res.code == 0) {
-            this.msgSuccess("添加成功");
+            this.msgSuccess(this.categoryId ? "修改成功" : '添加成功');
             this.close();
           }
         })

src/views/business/category/index.vue

@@ -78,7 +78,10 @@
       <el-table-column label="操作" align="center">
         <template slot-scope="{ row }">
           <div>
-            <el-button v-hasPermi="['order:deliver:query']" type="text" disabled
+            <el-button
+              v-hasPermi="['business:category:edit']"
+              type="text"
+              @click="edit(row)"
               >编辑</el-button
             >
             <el-button
@@ -104,6 +107,7 @@
 
     <category-create
       v-if="createShow"
+      :category-id="categoryId"
       :dialog-show="createShow"
       @close="close"
     />
@@ -134,6 +138,7 @@ export default {
       total: 0,
       list: [],
       createShow: false,
+      categoryId: '',
     };
   },
   created() {
@@ -180,6 +185,11 @@ export default {
       });
     },
 
+    edit(item){
+      this.categoryId = item.categoryId
+      this.createShow = true;
+    },
+
     // 重置
     resetQuery() {
       this.pageParams.pageNum = 1
@@ -193,6 +203,7 @@ export default {
     // 关闭发货弹框
     close() {
       this.createShow = false;
+      this.categoryId = ''
       this.getList();
     },
   },