新增修改banner

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

@@ -40,11 +40,8 @@
         </el-form-item>
         <el-form-item label="图片" prop="picUrl">
           <image-upload
+            v-model="bannerPicUrl"
             :limit="1"
-            :value="form.picUrl"
-            :file-size="50"
-            :is-public="true"
-            @input="pictureSelect"
           />
         </el-form-item>
         <el-form-item label="类型" prop="type">
@@ -91,7 +88,7 @@
 </template>
 <script>
 import CustomFieldsMixin from "@/mixins/CustomFields";
-import { goodsBannerCreate } from "@/api/business/banner";
+import { goodsBannerCreate, goodsBannerDetail, goodsBannerUpdate } from "@/api/business/banner";
 import { goodsTagItems } from "@/api/business/tag";
 export default {
   mixins: [CustomFieldsMixin],
@@ -101,16 +98,16 @@ export default {
       type: Boolean,
       default: false,
     },
-  },
-  created() {
-    this.getBannerLocation();
-    this.getGoodsTagItems();
+    // ID
+    bannerId: {
+      type:[Number, String],
+      default: ''
+    }
   },
   data() {
     return {
       loading: false,
       form: {
-        picUrl: [],
         type: 'link',
         sort: 0
       },
@@ -133,7 +130,6 @@ export default {
         ],
         picUrl: [
           {
-            type: "array",
             required: true,
             message: "请上传banner图片",
             trigger: "change",
@@ -151,6 +147,35 @@ export default {
       },
     };
   },
+  computed: {
+    bannerPicUrl: {
+      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() {
+    this.getBannerLocation();
+    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,
+          goodsTags: goodsTags ? goodsTags.split(',').map(item => Number(item)) : [],
+          name, sort, picUrl, type, linkUrl
+        }
+      })
+    }
+  },
   methods: {
     getBannerLocation() {
       this.getDicts("banner_location").then((res) => {
@@ -199,13 +224,16 @@ export default {
     submitForm(form) {
       let data = {
         ... form,
-        picUrl: this.form.picUrl[0].fileName,
         goodsTags: form.goodsTags ? form.goodsTags.join(',') : ''
       };
-      goodsBannerCreate(data)
+      let request = this.bannerId ? goodsBannerUpdate : goodsBannerCreate
+      if(this.bannerId){
+        data.bannerId = this.bannerId
+      }
+      request(data)
         .then((res) => {
           if (res.code == 0) {
-            this.msgSuccess("添加成功");
+            this.msgSuccess(this.bannerId ? "修改成功" : '添加成功');
             this.close();
           }
         })

src/views/business/banner/index.vue

@@ -84,7 +84,7 @@
             <el-button
               v-hasPermi="['business:banner:edit']"
               type="text"
-              disabled
+              @click="edit(row)"
               >编辑</el-button
             >
             <el-button
@@ -108,7 +108,12 @@
       @pagination="getList"
     />
 
-    <banner-create v-if="createShow" :dialog-show="createShow" @close="close" />
+    <banner-create
+      v-if="createShow"
+      :dialog-show="createShow"
+      :banner-id="bannerId"
+      @close="close"
+    />
   </div>
 </template>
 <script>
@@ -134,6 +139,7 @@ export default {
       list: [],
       bannerLocationList: [],
       createShow: false,
+      bannerId: '',
     };
   },
   created() {
@@ -172,6 +178,11 @@ export default {
         });
     },
 
+    edit(item) {
+      this.bannerId = item.bannerId;
+      this.createShow = true;
+    },
+
     del(item) {
       this.$confirm(`确认删除banner “${item.name}” 吗？`, "删除banner", {
         confirmButtonText: "确定",
@@ -194,6 +205,7 @@ export default {
     // 关闭发货弹框
     close() {
       this.createShow = false;
+      this.bannerId = "";
       this.getList();
     },
   },