供应商添加修改

src/components/UploadFile/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <el-upload
+      :class="{ 'el-upload-hidden': !chooseState}"
+      :list-type="listType"
+      :action="action"
+      :headers="headers"
+      :on-success="uploadImageSuccess"
+      :on-remove="handleImageRemove"
+      :before-upload="beforeUpload"
+      :on-error="uploadError"
+      :on-preview="handlePictureCardPreview"
+      :limit="limit"
+      :multiple="multiple"
+      :accept="accept"
+      :file-list="imageList"
+    >
+      <div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
+      <i slot="default" class="el-icon-plus" />
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'UploadFile',
+  props: {
+    tip: {
+      type: String,
+      default: ''
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    limit: {
+      type: Number,
+      default: 1
+    },
+    accept: {
+      type: String,
+      default: '.jpg,.png,.gif'
+    },
+    listType: {
+      type: String,
+      default: 'picture-card'
+    },
+    imageList: {
+      type: Array,
+      default: () => []
+    },
+    uuid: {
+      type: Number,
+      default: 0
+    },
+    beforeUpload: {
+      type: Function,
+      default: () => true
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      dialogImageUrl: ''
+    }
+  },
+  computed: {
+    ...mapGetters(['token']),
+    chooseState() {
+      return this.imageList.length < this.limit
+    },
+    action() {
+      return process.env.VUE_APP_UPLOAD_API + '/upload/image'
+    },
+    headers() {
+      return {
+        'X-Token': this.token
+      }
+    }
+  },
+  methods: {
+    // 上传成功
+    uploadImageSuccess(response, file, fileList) {
+      this.$emit('success', { response, file, fileList })
+    },
+    // 删除
+    handleImageRemove(file, fileList) {
+      this.$emit('remove', { file, fileList })
+    },
+    // 上传失败
+    uploadError(err, file, fileList) {
+      this.$emit('error', { err, file, fileList })
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    }
+  }
+}
+</script>

src/views/admin/supplier/edit.vue

@@ -55,9 +55,9 @@
       <transition name="fade">
         <el-form-item v-if="submitForm.shopType === 2" label="代理品牌:" prop="shopInfo" class="brand-list">
           <template v-if="supplierBrands !== []">
-            <el-tag v-for="(brand , index) in supplierBrands" :key="index" closable type="success" @close="handleRemove(index)" @click="handleShowInfo(index)">{{ brand.brandName }}</el-tag>
+            <el-tag v-for="(brand , index) in supplierBrands" :key="index" closable type="success" @close="handleRemoveBrand(brand)" @click="handleEditBrand(brand)">{{ brand.brandName }}</el-tag>
           </template>
-          <el-tag type="primary" @click="handleShowDialog">添加品牌<span class="el-icon-plus" /></el-tag>
+          <el-tag type="primary" @click="handleAddBrand">添加品牌<span class="el-icon-plus" /></el-tag>
         </el-form-item>
       </transition>
 
@@ -124,7 +124,7 @@
     </div>
 
     <!-- 供应商添加品牌的对话框 -->
-    <el-dialog title="添加供应商品牌" :visible.sync="dialogAddBrand" width="width" @closed="handleDialogAddBrandClosed">
+    <el-dialog title="添加供应商品牌" :visible.sync="dialogAddBrand" width="width" @close="handleDialogAddBrandClosed">
       <el-form ref="subFormRef" :model="subForm" label-width="120px" :rules="formDataRules">
 
         <el-form-item label="选择品牌:" prop="brandId">
@@ -135,7 +135,7 @@
             filterable
             @change="handleBrandChange"
           >
-            <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
+            <el-option v-for="item in otherBrandList" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
         </el-form-item>
 
@@ -169,27 +169,22 @@
           </el-radio-group>
         </el-form-item>
 
-        <el-form-item v-if="subForm.statementType === 1" ref="statement1" label="弹窗:" prop="statementContent">
-          <el-input
-            v-if="subForm.statementType === 1"
-            v-model="subForm.statementContent"
-            type="textarea"
-          />
+        <el-form-item v-if="subForm.statementType === 1" ref="statement" label="弹窗:" prop="statementContent">
+          <el-input v-model="subForm.statementContent" type="textarea" />
         </el-form-item>
 
-        <el-form-item v-else-if="subForm.statementType === 2" ref="statement2" label="链接:" prop="statementLink">
-          <el-input v-if="subForm.statementType === 2" v-model="subForm.statementLink" />
+        <el-form-item v-else-if="subForm.statementType === 2" ref="statement" label="链接:" prop="statementLink">
+          <el-input v-model="subForm.statementLink" />
         </el-form-item>
 
         <el-form-item
           v-else-if="subForm.statementType === 3"
-          ref="statement3"
+          ref="statement"
           label="图片:"
           class="no-input"
           prop="statementImage"
         >
           <upload-image
-            v-if="subForm.statementType === 3"
             tip="建议尺寸：200px * 200px"
             :image-list="statementImageList"
             @success="uploadStatementImageSuccess"
@@ -198,9 +193,8 @@
           <el-input v-show="false" v-model="subForm.statementImage" />
         </el-form-item>
 
-        <el-form-item v-else ref="statementFileRef" label="文件:" prop="statementFileId">
+        <el-form-item v-else ref="statement" label="文件:" prop="statementFileId">
           <upload-file
-            v-if="subForm.statementType === 4"
             ref="uploadFileRef"
             :auth-user-id="subForm.authUserId"
             :brand-id="subForm.brandId"
@@ -221,7 +215,7 @@
 
       <div slot="footer">
         <el-button @click="dialogAddBrand = false">取 消</el-button>
-        <el-button type="primary" :loading="dialogLoading" @click="handleAddBrand">确 定</el-button>
+        <el-button type="primary" :loading="dialogLoading" @click="handleSaveBrand">确 定</el-button>
       </div>
     </el-dialog>
 
@@ -234,7 +228,9 @@ import UploadImage from '@/components/UploadImage'
 import { mapGetters } from 'vuex'
 import { isMobile } from '@/utils/validate'
 import { fetchBrandList } from '@/api/brand'
+import { deepClone } from '@/utils'
 // import { addSupplier } from '@/api/supplier'
+let uuid = 0
 
 export default {
   components: { UploadImage, UploadFile },
@@ -249,11 +245,11 @@ export default {
       isLoading: false,
       dialogLoading: false,
       dialogAddBrand: false,
-      excludeBrandList: [], // 已经选择的品牌，需要被排除在外的
+      brandTagClickType: '', // 品牌表单点击类型
       selectedShopType: 1, // 当前选中的供应商类型
-      currentIndex: '',
-      prevBrandId: '',
-      dialogTitle: '添加',
+      currentBrand: {}, // 当前选中的品牌
+      selectedBrandIds: [], // 代理商已添加的品牌id
+      editBrandInfo: {},
       // 表单1
       submitForm: {
         shopType: 1, // 供应商类型
@@ -274,19 +270,15 @@ export default {
       },
       // 表单2
       subForm: {
-        index: '',
-        isNew: true,
-        brandName: '',
         brandId: '', // 品牌id
         countryId: 1, // 产地id
         brandAuthLogo: '', // 品牌logo
         securityLink: '', // 官网认证链接
         statementType: 1, // 代理声明类型
         statementContent: '', // 声明内容
-        statementFileId: null, // 声明文件id
+        statementFileId: '', // 声明文件id
         statementImage: '', // 声明图片
-        statementLink: '', // 声明链接
-        statementFileName: '' // 上传图片的名称
+        statementLink: '' // 声明链接
       },
       supplierBrands: [],
       brandList: [],
@@ -318,7 +310,20 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['countryList', 'authUserId'])
+    ...mapGetters(['countryList', 'authUserId']),
+    // 去除重复的品牌后的列表
+    otherBrandList() {
+      if (this.brandTagClickType === 'add') {
+        return this.brandList.filter(item => this.selectedBrandIds.indexOf(item.id) === -1)
+      }
+
+      if (this.brandTagClickType === 'edit') {
+        const exclude = this.selectedBrandIds.filter(id => id !== this.editBrandInfo.brandId)
+        return this.brandList.filter(item => exclude.indexOf(item.id) === -1)
+      }
+
+      return this.brandList
+    }
   },
   watch: {
 
@@ -390,39 +395,106 @@ export default {
 
     // 品牌改变事件
     handleBrandChange(id) {
-      const currentBrand = this.brandList.find(item => item.id === id)
-      this.brandAuthLogoList = [{ name: currentBrand.name, url: currentBrand.authLogo }]
-      this.submitForm.brandAuthLogo = currentBrand.authLogo
+      console.log(id)
+      this.currentBrand = this.brandList.find(item => item.id === id)
+      this.brandAuthLogoList = [{ name: this.currentBrand.name, url: this.currentBrand.authLogo }]
+      this.submitForm.brandAuthLogo = this.currentBrand.authLogo
     },
+
+    /** 品牌标签操作 */
     // 添加品牌对话框
-    handleShowDialog() {
-      this.dialogAddBrand = true
-    },
-    // 添加品牌
     handleAddBrand() {
-      this.supplierBrands.push(this.subForm)
+      this.brandTagClickType = 'add'
+      this.dialogAddBrand = true
     },
-    // 保存供应信息
-    saveShopInfo() {
+    // 修改品牌
+    handleEditBrand(row) {
+      this.brandTagClickType = 'edit'
+      this.editBrandInfo = row
+      // 设置选中品牌信息
+      this.currentBrand.id = row.brandId
+      this.currentBrand.name = row.brandName
+      this.currentBrand.authLogo = row.brandAuthLogo
+
+      if (row.brandAuthLogo) {
+        this.brandAuthLogoList = [{ name: row.brandName, url: row.brandAuthLogo }]
+      }
+
+      if (row.statementImage) {
+        this.statementImageList = [{ name: row.brandName, url: row.statementImage }]
+      }
+
+      for (const key in this.subForm) {
+        if (Object.hasOwnProperty.call(this.editBrandInfo, key)) {
+          this.subForm[key] = this.editBrandInfo[key]
+        }
+      }
 
+      this.dialogAddBrand = true
     },
     // 移除品牌
-    handleRemove(index) {
+    handleRemoveBrand(row) {
+      // 从已选品牌id列表中移除
+      this.selectedBrandIds.splice(this.selectedBrandIds.indexOf(row.brandId), 1)
+      // 从已添加品牌列表中移除
+      const findIndex = this.supplierBrands.findIndex(item => item.uuid === row.uuid)
+      this.supplierBrands.splice(findIndex, 1)
+    },
+    // 保存品牌
+    handleSaveBrand() {
+      if (this.subForm.statementType === 4) {
+        console.log('有文件上传')
+      } else {
+        this.handleSaveBrandAction()
+      }
 
+      console.log(this.supplierBrands)
+    },
+    // 保存品牌操作
+    handleSaveBrandAction() {
+      // 深度克隆数据
+      const brandInfo = deepClone(this.subForm)
+      // 保存已添加品牌id
+      this.selectedBrandIds.push(this.currentBrand.id)
+      // 设置品牌名称（显示使用）
+      brandInfo.brandName = this.currentBrand.name
+      brandInfo.brandAuthLogo = this.currentBrand.authLogo
+      if (this.brandTagClickType === 'add') {
+        // 设置唯一id
+        brandInfo.uuid = ++uuid
+        // 保存数据到代理商品牌列表
+        this.supplierBrands.push(brandInfo)
+      }
+      if (this.brandTagClickType === 'edit') {
+        // 使用新数据替换旧数据
+        const findIndex = this.supplierBrands.findIndex(item => item.uuid === this.editBrandInfo.uuid)
+        this.supplierBrands.splice(findIndex, 1, brandInfo)
+      }
+      this.dialogAddBrand = false
     },
-    // 修改品牌
-    handleShowInfo(index) {
+
+    // 保存供应信息
+    saveShopInfo() {
 
     },
     // 添加品牌对话框关闭
     handleDialogAddBrandClosed() {
-
+      this.statementImageList = []
+      this.brandAuthLogoList = []
+      this.currentBrand = {}
+      this.$refs.subFormRef.resetFields()
     },
+
     // 声明类型切换
     handleStatementChange() {},
     // 供应商类型改变事件
     handleTypeChange(type) {
       this.selectedShopType = type
+      this.brandAuthLogoList = []
+      this.statementImageList = []
+      // this.supplierBrands = []
+      // this.selectedBrandIds = []
+      this.currentBrand = {}
     },
     // 添加排除品牌
     addExcludeBrand(id) {
@@ -508,17 +580,6 @@ export default {
     fileChange() {
       console.log('文件改变')
       this.$refs.statementFileRef.clearValidate()
-    },
-
-    // 克隆
-    clone(data) {
-      const result = {}
-      for (const key in data) {
-        if (Object.hasOwnProperty.call(data, key)) {
-          result[key] = data[key]
-        }
-      }
-      return result
     }
   }
 }