bug修改

src/settings.js

@@ -5,7 +5,7 @@ module.exports = {
    * @type {boolean} true | false
    * @description Whether show the settings right-panel
    */
-  showSettings: true,
+  showSettings: false,
 
   /**
    * @type {boolean} true | false

src/views/supplier/components/uploadFile.vue

@@ -12,6 +12,7 @@
       :on-success="success"
       :accept="accept"
       :before-upload="beforeUpload"
+      :on-remove="remove"
     >
       <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
       <!-- <el-button style="margin-left: 10px;" size="mini" type="success" @click="uploadFile">上传</el-button> -->
@@ -31,6 +32,10 @@ export default {
     authUserId: {
       type: Number,
       default: -1
+    },
+    brandId: {
+      type: [Number, String],
+      default: 0
     }
   },
 
@@ -41,7 +46,8 @@ export default {
       accept: '.doc,.ppt,.pdf',
       // 请求参数
       params: {
-        authUserId: null
+        authUserId: null,
+        brandId: null
       },
       headers: {
         'X-Token': ''
@@ -54,6 +60,7 @@ export default {
   },
   created() {
     this.headers['X-Token'] = this.token
+    this.params.brandId = this.brandId || 0
   },
   methods: {
     success(response) {
@@ -74,6 +81,9 @@ export default {
         this.$message.warning('文件上传大小超出限制(≤2MB)')
         return false
       }
+    },
+    remove() {
+      this.$emit('remove')
     }
   }
 }

src/views/supplier/components/uploadImage.vue

@@ -11,6 +11,7 @@
       :accept="accept"
       :auto-upload="true"
       :on-success="success"
+      :on-remove="remove"
       :file-list="fileList"
     >
       <!-- :class="{hidden:(hasUpload && fileList===[]) || !hasUpload}" -->
@@ -71,6 +72,9 @@ export default {
         this.$message.warning('文件上传大小超出限制(≤1MB)')
         return false
       }
+    },
+    remove() {
+      this.$emit('remove')
     }
   }
 }

src/views/supplier/user/add.vue

@@ -1,89 +1,81 @@
 <template>
   <div v-loading="isLoading" class="addSupplier">
-    <el-form ref="addFormRef" :model="addData" :rules="rules" label-width="120px" class="addForm">
+    <el-form ref="addFromDataRef" :model="addFromData" :rules="addFromDataRules" label-width="120px" class="addForm">
       <el-form-item label="供应商类型:" prop="shopType">
-        <el-select v-model="addData.shopType" placeholder="请选择供应商类型" style="width: 100%" @change="getBrandList">
+        <el-select
+          v-model="addFromData.shopType"
+          placeholder="请选择供应商类型"
+          style="width: 100%"
+          @change="handleTypeChange"
+        >
           <el-option label="品牌方" :value="1" />
           <el-option label="代理商" :value="2" />
         </el-select>
       </el-form-item>
 
       <!-- 供应商名称 -->
-      <el-form-item v-if="addData.shopType===2" label="供应商名称:" prop="shopName">
-        <el-input v-model="addData.shopName" placeholder="请输入供应商名称" />
+      <el-form-item v-if="addFromData.shopType === 2" label="供应商名称:" prop="shopName">
+        <el-input v-model="addFromData.shopName" placeholder="请输入供应商名称" maxlength="50" show-word-limit />
       </el-form-item>
 
-      <el-form-item v-if="addData.shopType===1" label="供应商名称:" prop="shopName">
-        <el-select v-model="addData.brandId" placeholder="请选择品牌" style="width: 100%" filterable @change="setShopName">
-          <el-option
-            v-for="(item) in brandList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
+      <el-form-item v-if="addFromData.shopType === 1" label="供应商名称:" prop="brandId">
+        <el-select
+          v-model="addFromData.brandId"
+          placeholder="请选择品牌"
+          style="width: 100%"
+          filterable
+          @change="setShopName"
+        >
+          <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
       <!-- 供应商名称END -->
 
       <el-form-item label="手机号:" prop="mobile">
-        <el-input v-model="addData.mobile" placeholder="请输入手机号" />
+        <el-input v-model="addFromData.mobile" placeholder="请输入手机号" maxlength="11" show-word-limit />
       </el-form-item>
+
       <el-form-item label="联系人:" prop="linkMan">
-        <el-input v-model="addData.linkMan" placeholder="请输入联系人" />
-      </el-form-item>
-      <el-form-item v-if="addData.shopType===2" label="所属品牌:" prop="brandId">
-        <el-select v-model="addData.brandId" placeholder="请选择所属品牌" style="width: 100%" filterable @change="setShopName">
-          <el-option
-            v-for="item in brandList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
+        <el-input v-model="addFromData.linkMan" placeholder="请输入联系人" />
       </el-form-item>
-      <el-form-item label="产地:" prop="countryId">
-        <el-select v-model="addData.countryId" placeholder="产地" style="width: 100%" filterable>
-          <el-option
-            v-for="item in countryList"
-            :key="item.countryId"
-            :label="item.countryName"
-            :value="item.countryId"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="品牌logo:" class="no-input" prop="brandAuthLogo">
-        <upload-image ref="uploadImageRef1" :file-list="fileList1" @success="imageUploadSuccess1" @error="imageUploadFaild1" />
-        <el-input v-model="addData.brandAuthLogo" type="hidden" class="hiddenInput" />
-      </el-form-item>
-      <el-form-item label="官网认证链接:">
-        <el-input v-model="addData.securityLink" placeholder="请输入官网认证链接" />
+
+      <el-form-item v-if="addFromData.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>
+        </template>
+        <el-tag type="primary" @click="handleShowDialog">添加品牌<span class="el-icon-plus" /></el-tag>
       </el-form-item>
-      <template v-if="addData.shopType===2">
-        <el-form-item label="代理声明:">
-          <el-radio v-model="addData.statementType" :label="1">弹窗</el-radio>
-          <el-radio v-model="addData.statementType" :label="2">链接</el-radio>
-          <el-radio v-model="addData.statementType" :label="3">图片</el-radio>
-          <el-radio v-model="addData.statementType" :label="4">文件</el-radio>
-        </el-form-item>
 
-        <el-form-item v-if="addData.statementType === 1" label="弹窗:" prop="statementContent">
-          <el-input v-if="addData.statementType === 1" v-model="addData.statementContent" type="textarea" />
-        </el-form-item>
-        <el-form-item v-else-if="addData.statementType === 2" label="链接:" prop="statementLink">
-          <el-input v-if="addData.statementType === 2" v-model="addData.statementLink" />
+      <template v-if="addFromData.shopType === 1">
+        <el-form-item label="产地:" prop="countryId">
+          <el-select v-model="addFromData.countryId" placeholder="产地" style="width: 100%" filterable>
+            <el-option
+              v-for="item in countryList"
+              :key="item.countryId"
+              :label="item.countryName"
+              :value="item.countryId"
+            />
+          </el-select>
         </el-form-item>
-        <el-form-item v-else-if="addData.statementType === 3" label="图片:" class="no-input" prop="statementImage">
-          <upload-image v-if="addData.statementType === 3" ref="uploadImageRef2" @success="imageUploadSuccess2" @error="imageUploadFaild2" />
-          <el-input v-model="addData.statementImage" type="hidden" class="hiddenInput" />
-        </el-form-item>
-        <el-form-item v-else label="文件:" prop="statementFileId">
-          <upload-file v-if="addData.statementType === 4" ref="uploadFileRef" :auth-user-id="addData.authUserId" @success="fileUploadSuccess" @error="fileUploadFaild" />
-          <el-input v-model="addData.statementFileId" type="hidden" class="hiddenInput" />
+
+        <el-form-item label="品牌logo:" class="no-input" prop="brandAuthLogo">
+          <upload-image
+            ref="uploadImageRef1"
+            :file-list="fileList1"
+            @success="imageUploadSuccess1"
+            @error="imageUploadFaild1"
+            @remove="imageRemove1"
+          />
+          <el-input v-model="addFromData.brandAuthLogo" type="hidden" class="hiddenInput" />
         </el-form-item>
 
+        <el-form-item label="官网认证链接:">
+          <el-input v-model="addFromData.securityLink" placeholder="请输入官网认证链接" />
+        </el-form-item>
       </template>
+
       <el-form-item label="供应商状态:">
-        <el-select v-model="addData.shopStatus" placeholder="请选择供应商状态" style="width: 100%">
+        <el-select v-model="addFromData.shopStatus" placeholder="请选择供应商状态" style="width: 100%">
           <el-option label="启用" :value="1" />
           <el-option label="禁用" :value="0" />
         </el-select>
@@ -93,6 +85,103 @@
       <el-button type="primary" @click="submit">保存</el-button>
       <el-button type="warning" @click="$_back()">返回</el-button>
     </div>
+
+    <!-- 供应商添加品牌的对话框 -->
+    <el-dialog v-loading="dialogLoading" title="添加代理品牌" :visible.sync="showDialog" width="width" @closed="dialogClosed">
+      <el-form ref="brandDataRef" :model="brandData" :rules="brandDataRules" label-width="100px">
+        <el-form-item label="产地:" prop="countryId">
+          <el-select v-model="brandData.countryId" placeholder="产地" style="width: 100%" filterable>
+            <el-option
+              v-for="item in countryList"
+              :key="item.countryId"
+              :label="item.countryName"
+              :value="item.countryId"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="选择品牌:" prop="brandId">
+          <el-select
+            v-model="brandData.brandId"
+            placeholder="请选择品牌"
+            style="width: 100%"
+            filterable
+            @change="setShopName"
+          >
+            <el-option v-for="item in brandListCody" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="品牌logo:" class="no-input" prop="brandAuthLogo">
+          <upload-image
+            ref="uploadImageRef1"
+            :file-list="fileList1"
+            @success="imageUploadSuccess1"
+            @error="imageUploadFaild1"
+          />
+          <el-input v-model="brandData.brandAuthLogo" type="hidden" class="hiddenInput" />
+        </el-form-item>
+
+        <el-form-item label="代理声明:">
+          <el-radio-group v-model="brandData.statementType" @change="handleStatementChange">
+            <el-radio :label="1">弹窗</el-radio>
+            <el-radio :label="2">链接</el-radio>
+            <el-radio :label="3">图片</el-radio>
+            <el-radio :label="4">文件</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item v-if="brandData.statementType === 1" ref="statement1" label="弹窗:" prop="statementContent">
+          <el-input
+            v-if="brandData.statementType === 1"
+            v-model="brandData.statementContent"
+            type="textarea"
+          />
+        </el-form-item>
+
+        <el-form-item v-else-if="brandData.statementType === 2" ref="statement2" label="链接:" prop="statementLink">
+          <el-input v-if="brandData.statementType === 2" v-model="brandData.statementLink" />
+        </el-form-item>
+
+        <el-form-item
+          v-else-if="brandData.statementType === 3"
+          ref="statement3"
+          label="图片:"
+          class="no-input"
+          prop="statementImage"
+        >
+          <upload-image
+            v-if="brandData.statementType === 3"
+            ref="uploadImageRef2"
+            :file-list="fileList2"
+            @success="imageUploadSuccess2"
+            @error="imageUploadFaild2"
+            @remove="imageRemove2"
+          />
+          <el-input v-model="brandData.statementImage" type="hidden" class="hiddenInput" />
+        </el-form-item>
+
+        <el-form-item v-else ref="statement4" label="文件:" prop="statementFileId">
+          <upload-file
+            v-if="brandData.statementType === 4"
+            ref="uploadFileRef"
+            :auth-user-id="brandData.authUserId"
+            :brand-id="brandData.brandId"
+            :file-list="fileList3"
+            @success="fileUploadSuccess"
+            @error="fileUploadFaild"
+            @remove="fileRemove"
+          />
+          <el-input v-model="brandData.statementFileId" type="hidden" class="hiddenInput" />
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer">
+        <el-button @click="showDialog = false">取 消</el-button>
+        <el-button type="primary" @click="handleAddBrand">确 定</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -115,214 +204,400 @@ export default {
       }
     }
     return {
+      dialogLoading: false,
       isLoading: false,
-
-      addData: {
+      // 是否显示对话框
+      showDialog: false,
+      // 需要排除的品牌列表
+      excludeBrand: [],
+      // 上1个选中的品牌
+      prevBrandId: -1,
+      // 品牌列表
+      brandList: [],
+      // 品牌列表处理后的结果
+      brandListCody: [],
+      // 加入的品牌列表
+      supplierBrands: [],
+      // 当前选中的品牌索引在数组中的id
+      currentBrandIndex: '',
+      // 表单校验数据1
+      addFromData: {
         authUserId: null, // 供应商id
-        brandAuthLogo: '', //	品牌授权logo
+        shopType: 1, //	供应商类型：1品牌方，2代理商
         brandId: '', // 品牌id
+        shopName: '', // 供应商名称
+        mobile: '', // 手机号
+        linkMan: '', // 联系人
         countryId: 1, // 产地国家id
+        brandAuthLogo: '', //	品牌授权logo
         createBy: '', // 创建人用户id
-        linkMan: '', // 联系人
-        mobile: '', // 手机号
         securityLink: '', // 官网认证链接
-        shopName: '', // 供应商名称
         shopStatus: 1, // 供应商状态：0停用 1启用
-        shopType: 1, //	供应商类型：1品牌方，2代理商
+        shopInfo: 1
+      },
+      // 表单校验数据2
+      brandData: {
+        isNew: true,
+        brandId: '', // 供应商id
+        countryId: 1, // 产地国家id
+        brandAuthLogo: '', //	品牌授权logo
+        brandName: '',
+        securityLink: '', // 官网认证链接
+        statementType: 1, // 声明类型
         statementContent: '', // 声明弹窗内容
-        statementLink: '', // 声明链接
-        statementFileId: -1, //	声明文件id
+        statementFileId: null, // 声明文件id
         statementImage: '', // 声明图片
-        statementType: 1 // 代理声明类型：1弹窗 2链接 3图片 4文件（.doc .ppt .pdf）
+        statementLink: '' // 声明链接
       },
-      selectedBrandIndex: '',
-      brandList: [], // 品牌列表
-      rules: {
-        shopType: [{ required: true, message: '供应商类型不能为空', trigger: 'change' }],
-        shopName: [{ required: true, message: '供应商名称不能为空', trigger: ['blur', 'change'] }],
+      // 表单校验规则1
+      addFromDataRules: {
+        shopType: { required: true, message: '供应商类型不能为空', trigger: 'change' },
+        brandId: { required: true, message: '品牌不能为空', trigger: 'change' },
+        shopName: { required: true, message: '请输入供应商名称', trigger: 'change' },
         mobile: [
           { required: true, message: '手机号不能为空', trigger: 'blur' },
           { validator: valideMobile, trigger: 'blur' }
-        ], // 手机号格式校验
-        linkMan: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
-        countryId: [{ required: true, message: '产地不能为空', trigger: 'change' }],
-        brandAuthLogo: [{ required: true, message: '品牌logo不能为空' }],
-        brandId: [{ required: true, message: '所属品牌不能为空', trigger: 'blur' }],
-        statementContent: [{ required: true, message: '声明不能为空', trigger: 'blur' }],
-        statementLink: [{ required: true, message: '声明链接不能为空', trigger: 'blur' }],
-        statementImage: [{ required: true, message: '声明图片不能为空' }],
-        statementFileId: [{ required: true, message: '声明文件不能为空' }]
+        ],
+        linkMan: { required: true, message: '联系人不能为空', trigger: 'blur' },
+        countryId: { required: true, message: '产地不能为空', trigger: 'change' },
+        brandAuthLogo: { required: true, message: '品牌logo不能为空', trigger: 'change' }
+      },
+      // 表单校验规则2
+      brandDataRules: {
+        brandId: { required: true, message: '品牌不能为空', trigger: 'change' },
+        countryId: { required: true, message: '产地不能为空', trigger: 'change' },
+        brandAuthLogo: { required: true, message: '品牌logo不能为空', trigger: 'change' },
+        statementContent: { required: true, message: '声明内容不能为空', trigger: 'blur' },
+        statementLink: { required: true, message: '声明链接不能为空', trigger: 'blur' },
+        statementFileId: { required: true, message: '请上传声明文件', trigger: 'change' },
+        statementImage: { required: true, message: '请上传声明图片', trigger: 'change' }
       },
+      // 上传成功的文件列表
       fileList1: [], // 已上传的图片列表 品牌logo
       fileList2: [], // 已上传的图片列表 声明图片
       fileList3: [] // 已上传的图片列表 声明文件
-      // countryList: []
     }
   },
   computed: {
     ...mapGetters(['userIdentity', 'name', 'countryList', 'authUserId'])
   },
+  watch: {
+    excludeBrand() {
+      this.excludeBrandHandle()
+    }
+  },
   created() {
     this.initAddForm()
   },
   methods: {
     // 初始添加供应商时的表单数据
     initAddForm() {
-      // this.addData.authUserId = this.authUserId
+      // this.addFromData.authUserId = this.authUserId
       this.getBrandList()
-      this.addData.shopName = ''
+      this.addFromData.shopName = ''
     },
-    // 获取品牌列表
-    getBrandList() {
-      // 获取品牌列表
-      fetchBrandList({ type: this.addData.shopType }).then(res => {
-        console.log(res)
-        if (res.code === 0) {
-          this.brandList = res.data
+
+    // 提交表单数据
+    submit() {
+      this.$refs.addFromDataRef.validate(valide => {
+        if (valide) {
+          console.log('校验通过')
+          if (this.addFromData.shopType === 1) {
+            this.save()
+          } else if (this.addFromData.shopType === 2) {
+            if (this.supplierBrands.length < 1) {
+              this.$alert('请至少添加一个代理品牌', '不满足提交要求', { type: 'warning' })
+              return
+            }
+            this.save()
+          }
         }
-      }).catch(err => console.log(err))
+      })
     },
-    // 提交表单数据
-    async submit() {
+    // 保存
+    save() {
       this.isLoading = true
-      if (this.addData.statementType === 4) {
-        debugger
-        console.log(this.$refs)
-        this.$refs.uploadFileRef.$refs.upload.submit()
-      } else {
-        await this.$refs.addFormRef.validate(valide => {
-          if (!valide) {
-            this.isLoading = false
-            return
-          }
-          this.save()
+      addSupplier(this.createAddData())
+        .then(res => {
+          console.log(res)
+          this.$message.success('添加成功')
+          this.$router.replace('/supplier')
+        })
+        .finally(() => {
+          this.isLoading = false
         })
+    },
+    // 创建请求参数
+    createAddData() {
+      let addData = {}
+      // 参数模板
+      const temp1 = {
+        authUserId: '',
+        createBy: '',
+        linkMan: '',
+        mobile: '',
+        shopName: '',
+        shopStatus: '',
+        shopType: '',
+        shopInfo: []
+      }
+      const temp2 = {
+        brandId: 1,
+        countryId: 2,
+        brandAuthLogo: '',
+        securityLink: '',
+        statementType: 1,
+        statementContent: '',
+        statementFileId: null,
+        statementImage: '',
+        statementLink: ''
+      }
+      // 指定创建者为当前登录的账号id
+      this.addFromData.createBy = this.authUserId
+      for (const key in temp1) {
+        if (Object.hasOwnProperty.call(temp1, key)) {
+          temp1[key] = this.addFromData[key]
+        }
+      }
+      // 如果为品牌方
+      if (this.addFromData.shopType === 1) {
+        for (const key in temp2) {
+          if (Object.hasOwnProperty.call(temp2, key)) {
+            temp2[key] = this.addFromData[key] || ''
+          }
+        }
+        temp2.statementType = 1
+        temp2.statementFileId = null
+        addData = {
+          ...temp1,
+          shopInfo: [temp2]
+        }
       }
+      // 如果为代理商
+      if (this.addFromData.shopType === 2) {
+        addData = {
+          ...temp1,
+          shopInfo: this.supplierBrands
+        }
+      }
+
+      return addData
     },
-    // 保存
-    async save() {
-      this.addData.createBy = this.authUserId
-      addSupplier(this.addData).then(res => {
-        console.log(res)
-        this.$message.success('添加成功')
-        this.$refs.addFormRef.resetFields()
-        this.clearFormData()
-        this.$router.replace('/supplier')
-      }).finally(() => {
-        this.isLoading = false
-        this.$refs.addFormRef.resetFields()
-        this.addData.securityLink = ''
-      })
+    // 获取品牌列表
+    getBrandList(type) {
+      // 获取品牌列表
+      fetchBrandList({ type })
+        .then(res => {
+          console.log(res)
+          if (res.code === 0) {
+            this.brandList = res.data
+            this.brandListCody = res.data
+          }
+        })
+        .catch(err => console.log(err))
+    },
+    // 供应商类型切换
+    handleTypeChange(id) {
+      const type = id
+      this.$refs.addFromDataRef.clearValidate()
+      this.addFromData = {
+        authUserId: null, // 供应商id
+        shopType: type, //	供应商类型：1品牌方，2代理商
+        brandId: '', // 品牌id
+        shopName: '', // 供应商名称
+        mobile: '', // 手机号
+        linkMan: '', // 联系人
+        countryId: 1, // 产地国家id
+        brandAuthLogo: '', //	品牌授权logo
+        createBy: '', // 创建人用户id
+        securityLink: '', // 官网认证链接
+        shopStatus: 1, // 供应商状态：0停用 1启用
+        shopInfo: 1
+      }
+      this.fileList1 = []
+      this.getBrandList(type)
     },
     // 设置品牌名称
     setShopName(id) {
-      const fileList = []
-      let selectBrand = {}
-      this.brandList.forEach((item, index) => {
-        if (item.id === id) {
-          selectBrand = item
-          return
+      const selectBrand = this.brandList.filter(item => {
+        return item.id === id
+      })[0]
+      const str = this.addFromData.shopType === 1 ? 'addFromData' : 'brandData'
+      this[str].shopName = selectBrand.name
+      this[str].brandAuthLogo = selectBrand.authLogo
+      this[str].brandId = selectBrand.id
+      if (str === 'brandData') {
+        this[str].brandName = selectBrand.name
+      }
+      if (selectBrand.authLogo) {
+        this.fileList1 = [{ name: '文件已上传', url: selectBrand.authLogo }]
+      }
+    },
+    // 添加品牌对话框开启
+    handleShowDialog() {
+      this.showDialog = true
+    },
+    // 添加品牌
+    handleAddBrand() {
+      // 如果声明类型为文件
+      if (this.brandData.statementType === 4 && (this.brandData.statementFileId === null || this.brandData.statementFileId === '')) {
+        this.brandData.statementFileId = this.brandData.statementFileId === null ? '' : null
+        this.$refs.uploadFileRef.$refs.upload.submit()
+      } else {
+        this.saveBrand()
+      }
+    },
+    // 保存品牌信息
+    saveBrand() {
+      this.$refs.brandDataRef.validate(valide => {
+        if (valide) {
+          const brandInfo = this.clone(this.brandData)
+          console.log(brandInfo)
+          if (brandInfo.isNew) {
+            brandInfo.isNew = false
+            this.supplierBrands.push(brandInfo)
+          } else {
+            this.supplierBrands.splice(this.currentBrandIndex, 1, brandInfo)
+          }
+
+          if (this.addFromData.shopType === 2) {
+            this.excludeBrand.push(this.brandData.brandId)
+            this.prevBrandId = -1
+            console.log('添加：' + this.excludeBrand)
+          }
+
+          this.showDialog = false
         }
       })
-      console.log(selectBrand)
-      if (this.addData.shopType === 1) {
-        this.addData.shopName = selectBrand.name
+    },
+    // 修改
+    handleShowInfo(index) {
+      this.currentBrandIndex = index
+      this.brandData = this.clone(this.supplierBrands[index])
+      this.brandData.isNew = false
+      this.prevBrandId = this.brandData.brandId
+      if (this.addFromData.shopType === 2) {
+        const i = this.excludeBrand.indexOf(this.brandData.brandId)
+        this.excludeBrand.splice(i, 1)
       }
-      this.addData.brandAuthLogo = selectBrand.authLogo
-      if (selectBrand.authLogo) {
-        fileList.push({ name: this.addData.shopName, url: selectBrand.authLogo || '' })
+      if (this.brandData.brandAuthLogo) {
+        this.fileList1 = [{ name: '文件已上传', url: this.brandData.brandAuthLogo }]
+      }
+      if (this.brandData.statementImage) {
+        this.fileList2 = [{ name: '文件已上传', url: this.brandData.statementImage }]
+      }
+      if (this.brandData.statementFileId) {
+        this.fileList3 = [{ name: '文件已上传', url: '' }]
+      }
+      this.showDialog = true
+    },
+    // 删除
+    handleRemove(index) {
+      const i = this.excludeBrand.indexOf(this.supplierBrands[index].brandId)
+      this.excludeBrand.splice(i, 1)
+      this.supplierBrands.splice(index, 1)
+      console.log('删除：' + this.excludeBrand)
+    },
+    // 对话框关闭
+    dialogClosed() {
+      this.$refs.brandDataRef.resetFields()
+      this.fileList1 = []
+      this.fileList2 = []
+      this.fileList3 = []
+      this.brandData.isNew = true
+      // 如果部位-1 代表没有保存 则恢复到上一次的排除结果
+      if (this.prevBrandId !== -1) {
+        this.excludeBrand.push(this.prevBrandId)
+        this.prevBrandId = -1
       }
-      this.fileList1 = fileList
-      // const fileList = []
-      // if (this.addData.shopType === 1) {
-      //   this.addData.shopName = this.brandList[index]?.name
-      // }
-      // this.addData.brandAuthLogo = this.brandList[index]?.authLogo || ''
-      // if (this.brandList[index]?.authLogo) {
-      //   fileList.push({ name: this.addData.shopName, url: this.brandList[index]?.authLogo || '' })
-      // }
-      // this.fileList1 = fileList
+    },
+    // 声明类型切换
+    handleStatementChange(index) {
+      console.log(index)
+      const ref = 'statement' + index
+      this.$refs[ref].clearValidate()
     },
     // 文件上传成功
     fileUploadSuccess(data) {
-      this.addData.statementFileId = data.data
-      // this.uploadFile()
-      console.log(data)
-      this.$refs.addFormRef.validate(valide => {
-        if (!valide) {
-          this.isLoading = false
-          return
-        }
-        console.log(2)
-        this.save()
-      })
+      this.brandData.statementFileId = data.data
+      this.saveBrand()
     },
     fileUploadFaild(err, file, fileList) {
       console.log(err)
     },
+    fileRemove() {
+      console.log('删除文件')
+      this.brandData.statementFileId = null
+    },
 
     // 图片上传成功 品牌logo
     imageUploadSuccess1(data) {
-      this.addData.brandAuthLogo = data.data
+      const str = this.addFromData.shopType === 1 ? 'addFromData' : 'brandData'
+      this[str].brandAuthLogo = data.data
     },
     imageUploadFaild1(err, file, fileList) {
       console.log(err)
     },
+    imageRemove1() {
+      const str = this.addFromData.shopType === 1 ? 'addFromData' : 'brandData'
+      this[str].brandAuthLogo = ''
+      console.log('删除文件')
+    },
 
     // 图片上传成功 声明图片
     imageUploadSuccess2(data) {
-      this.addData.statementImage = data.data
+      this.brandData.statementImage = data.data
     },
     imageUploadFaild2(err, file, fileList) {
       console.log(err)
-    }, // removeImage1() {
-    //   this.fileList1 = []
-    // },
+    },
+    imageRemove2() {
+      this.brandData.statementImage = ''
+      console.log('删除文件')
+    },
+    // 对品牌列表做排除操作
+    excludeBrandHandle() {
+      this.brandListCody = this.brandList.filter((item, index) => {
+        return this.excludeBrand.indexOf(item.id) === -1
+      })
+    },
 
-    clearFormData() {
-      this.addData = {
-        authUserId: '', // 供应商id
-        brandAuthLogo: '', //	品牌授权logo
-        brandId: '', // 品牌id
-        countryId: 1, // 产地国家id
-        createBy: '', // 创建人用户id
-        linkMan: '', // 联系人
-        mobile: '', // 手机号
-        securityLink: '', // 官网认证链接
-        shopName: '', // 供应商名称
-        shopStatus: 1, // 供应商状态：0停用 1启用
-        shopType: 1, //	供应商类型：1品牌方，2代理商
-        statementContent: '', // 声明弹窗内容
-        statementLink: '', // 声明链接
-        statementFileId: '', //	声明文件id
-        statementImage: '', // 声明图片
-        statementType: 1 // 代理声明类型：1弹窗 2链接 3图片 4文件（.doc .ppt .pdf）
+    // 克隆
+    clone(data) {
+      const result = {}
+      for (const key in data) {
+        if (Object.hasOwnProperty.call(data, key)) {
+          result[key] = data[key]
+        }
       }
-      this.fileList1 = []
-      this.fileList2 = []
-      this.fileList3 = []
+      return result
     }
-
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .addSupplier {
-  margin-bottom: 80px;
+    margin-bottom: 80px;
 }
 .addForm {
-  width: 500px;
-  margin: 0 auto;
-  margin-top: 80px;
+    width: 500px;
+    margin: 0 auto;
+    margin-top: 80px;
+    .brand-list{
+      .el-tag{
+        margin-right: 5px;
+        cursor: pointer;
+      }
+    }
 }
 .submit-btn {
-  text-align: center;
-  .el-button {
-    width: 140px;
-  }
+    text-align: center;
+    .el-button {
+        width: 140px;
+    }
 }
-.hiddenInput{
-  display: none;
+.hiddenInput {
+    display: none;
 }
 </style>

src/views/supplier/user/edit.vue

@@ -1,89 +1,83 @@
 <template>
   <div v-loading="isLoading" class="addSupplier">
-    <el-form ref="addFormRef" :model="addData" :rules="rules" label-width="120px" class="addForm">
+    <el-form ref="addFromDataRef" :model="addFromData" :rules="addFromDataRules" label-width="120px" class="addForm">
       <el-form-item label="供应商类型:" prop="shopType">
-        <el-select v-model="addData.shopType" placeholder="请选择供应商类型" style="width: 100%" disabled @change="getBrandList">
+        <el-select
+          v-model="addFromData.shopType"
+          placeholder="请选择供应商类型"
+          style="width: 100%"
+          disabled
+          @change="handleTypeChange"
+        >
           <el-option label="品牌方" :value="1" />
           <el-option label="代理商" :value="2" />
         </el-select>
       </el-form-item>
 
       <!-- 供应商名称 -->
-      <el-form-item v-if="addData.shopType===2" label="供应商名称:" prop="shopName">
-        <el-input v-model="addData.shopName" placeholder="请输入供应商名称" disabled />
+      <el-form-item v-if="addFromData.shopType === 2" label="供应商名称:" prop="shopName">
+        <el-input v-model="addFromData.shopName" placeholder="请输入供应商名称" disabled />
       </el-form-item>
 
-      <el-form-item v-if="addData.shopType===1" label="供应商名称:" prop="shopName">
-        <el-select v-model="addData.brandId" placeholder="请选择品牌" style="width: 100%" filterable disabled>
-          <el-option
-            v-for="(item) in brandList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
+      <el-form-item v-if="addFromData.shopType === 1" label="供应商名称:" prop="brandId">
+        <el-select
+          v-model="addFromData.brandId"
+          disabled
+          placeholder="请选择品牌"
+          style="width: 100%"
+          filterable
+          @change="setShopName"
+        >
+          <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </el-form-item>
       <!-- 供应商名称END -->
 
       <el-form-item label="手机号:" prop="mobile">
-        <el-input v-model="addData.mobile" placeholder="请输入手机号" />
+        <el-input v-model="addFromData.mobile" placeholder="请输入手机号" maxlength="11" show-word-limit />
       </el-form-item>
+
       <el-form-item label="联系人:" prop="linkMan">
-        <el-input v-model="addData.linkMan" placeholder="请输入联系人" />
-      </el-form-item>
-      <el-form-item v-if="addData.shopType===2" label="所属品牌:" prop="brandId">
-        <el-select v-model="addData.brandId" placeholder="请选择所属品牌" style="width: 100%" filterable @change="setShopName">
-          <el-option
-            v-for="(item) in brandList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
+        <el-input v-model="addFromData.linkMan" placeholder="请输入联系人" />
       </el-form-item>
-      <el-form-item label="产地:" prop="countryId">
-        <el-select v-model="addData.countryId" placeholder="产地" style="width: 100%" filterable>
-          <el-option
-            v-for="item in countryList"
-            :key="item.countryId"
-            :label="item.countryName"
-            :value="item.countryId"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="品牌logo:" class="no-input" prop="brandAuthLogo">
-        <upload-image ref="uploadImageRef1" :file-list="fileList1" @success="imageUploadSuccess1" @error="imageUploadFaild1" />
-        <el-input v-model="addData.brandAuthLogo" type="hidden" class="hiddenInput" />
-      </el-form-item>
-      <el-form-item label="官网认证链接:">
-        <el-input v-model="addData.securityLink" placeholder="请输入官网认证链接" />
+
+      <el-form-item v-if="addFromData.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>
+        </template>
+        <el-tag type="primary" @click="handleShowDialog">添加品牌<span class="el-icon-plus" /></el-tag>
       </el-form-item>
-      <template v-if="addData.shopType===2">
-        <el-form-item label="代理声明:">
-          <el-radio v-model="addData.statementType" :label="1">弹窗</el-radio>
-          <el-radio v-model="addData.statementType" :label="2">链接</el-radio>
-          <el-radio v-model="addData.statementType" :label="3">图片</el-radio>
-          <el-radio v-model="addData.statementType" :label="4">文件</el-radio>
-        </el-form-item>
 
-        <el-form-item v-if="addData.statementType === 1" label="弹窗:" prop="statementContent">
-          <el-input v-if="addData.statementType === 1" v-model="addData.statementContent" type="textarea" />
-        </el-form-item>
-        <el-form-item v-else-if="addData.statementType === 2" label="链接:" prop="statementLink">
-          <el-input v-if="addData.statementType === 2" v-model="addData.statementLink" />
+      <template v-if="addFromData.shopType === 1">
+        <el-form-item label="产地:" prop="countryId">
+          <el-select v-model="addFromData.countryId" placeholder="产地" style="width: 100%" filterable>
+            <el-option
+              v-for="item in countryList"
+              :key="item.countryId"
+              :label="item.countryName"
+              :value="item.countryId"
+            />
+          </el-select>
         </el-form-item>
-        <el-form-item v-else-if="addData.statementType === 3" label="图片:" class="no-input" prop="statementImage">
-          <upload-image v-if="addData.statementType === 3" ref="uploadImageRef2" :file-list="fileList2" @success="imageUploadSuccess2" @error="imageUploadFaild2" />
-          <el-input v-model="addData.statementImage" type="hidden" class="hiddenInput" />
-        </el-form-item>
-        <el-form-item v-else label="文件:" prop="statementFileId">
-          <upload-file v-if="addData.statementType === 4" ref="uploadFileRef" :auth-user-id="addData.authUserId" :file-list="fileList3" @success="fileUploadSuccess" @error="fileUploadFaild" />
-          <el-input v-model="addData.statementFileId" type="hidden" class="hiddenInput" />
+
+        <el-form-item label="品牌logo:" class="no-input" prop="brandAuthLogo">
+          <upload-image
+            ref="uploadImageRef1"
+            :file-list="fileList1"
+            @success="imageUploadSuccess1"
+            @error="imageUploadFaild1"
+            @remove="imageRemove1"
+          />
+          <el-input v-model="addFromData.brandAuthLogo" type="hidden" class="hiddenInput" />
         </el-form-item>
 
+        <el-form-item label="官网认证链接:">
+          <el-input v-model="addFromData.securityLink" placeholder="请输入官网认证链接" />
+        </el-form-item>
       </template>
+
       <el-form-item label="供应商状态:">
-        <el-select v-model="addData.shopStatus" placeholder="请选择供应商状态" style="width: 100%">
+        <el-select v-model="addFromData.shopStatus" placeholder="请选择供应商状态" style="width: 100%">
           <el-option label="启用" :value="1" />
           <el-option label="禁用" :value="0" />
         </el-select>
@@ -93,6 +87,103 @@
       <el-button type="primary" @click="submit">保存</el-button>
       <el-button type="warning" @click="$_back()">返回</el-button>
     </div>
+
+    <!-- 供应商添加品牌的对话框 -->
+    <el-dialog v-loading="dialogLoading" title="添加代理品牌" :visible.sync="showDialog" width="width" @closed="dialogClosed">
+      <el-form ref="brandDataRef" :model="brandData" :rules="brandDataRules" label-width="100px">
+        <el-form-item label="产地:" prop="countryId">
+          <el-select v-model="brandData.countryId" placeholder="产地" style="width: 100%" filterable>
+            <el-option
+              v-for="item in countryList"
+              :key="item.countryId"
+              :label="item.countryName"
+              :value="item.countryId"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="选择品牌:" prop="brandId">
+          <el-select
+            v-model="brandData.brandId"
+            placeholder="请选择品牌"
+            style="width: 100%"
+            filterable
+            @change="setShopName"
+          >
+            <el-option v-for="item in brandListCody" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="品牌logo:" class="no-input" prop="brandAuthLogo">
+          <upload-image
+            ref="uploadImageRef1"
+            :file-list="fileList1"
+            @success="imageUploadSuccess1"
+            @error="imageUploadFaild1"
+          />
+          <el-input v-model="brandData.brandAuthLogo" type="hidden" class="hiddenInput" />
+        </el-form-item>
+
+        <el-form-item label="代理声明:">
+          <el-radio-group v-model="brandData.statementType" @change="handleStatementChange">
+            <el-radio :label="1">弹窗</el-radio>
+            <el-radio :label="2">链接</el-radio>
+            <el-radio :label="3">图片</el-radio>
+            <el-radio :label="4">文件</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item v-if="brandData.statementType === 1" ref="statement1" label="弹窗:" prop="statementContent">
+          <el-input
+            v-if="brandData.statementType === 1"
+            v-model="brandData.statementContent"
+            type="textarea"
+          />
+        </el-form-item>
+
+        <el-form-item v-else-if="brandData.statementType === 2" ref="statement2" label="链接:" prop="statementLink">
+          <el-input v-if="brandData.statementType === 2" v-model="brandData.statementLink" />
+        </el-form-item>
+
+        <el-form-item
+          v-else-if="brandData.statementType === 3"
+          ref="statement3"
+          label="图片:"
+          class="no-input"
+          prop="statementImage"
+        >
+          <upload-image
+            v-if="brandData.statementType === 3"
+            ref="uploadImageRef2"
+            :file-list="fileList2"
+            @success="imageUploadSuccess2"
+            @error="imageUploadFaild2"
+            @remove="imageRemove2"
+          />
+          <el-input v-model="brandData.statementImage" type="hidden" class="hiddenInput" />
+        </el-form-item>
+
+        <el-form-item v-else ref="statement4" label="文件:" prop="statementFileId">
+          <upload-file
+            v-if="brandData.statementType === 4"
+            ref="uploadFileRef"
+            :auth-user-id="brandData.authUserId"
+            :brand-id="brandData.brandId"
+            :file-list="fileList3"
+            @success="fileUploadSuccess"
+            @error="fileUploadFaild"
+            @remove="fileRemove"
+          />
+          <el-input v-model="brandData.statementFileId" type="hidden" class="hiddenInput" />
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer">
+        <el-button @click="showDialog = false">取 消</el-button>
+        <el-button type="primary" @click="handleAddBrand">确 定</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -115,223 +206,410 @@ export default {
       }
     }
     return {
+      dialogLoading: false,
       isLoading: false,
-
-      addData: {
+      // 是否显示对话框
+      showDialog: false,
+      // 需要排除的品牌列表
+      excludeBrand: [],
+      // 上1个选中的品牌
+      prevBrandId: -1,
+      // 品牌列表
+      brandList: [],
+      // 品牌列表处理后的结果
+      brandListCody: [],
+      // 加入的品牌列表
+      supplierBrands: [],
+      // 当前选中的品牌索引在数组中的id
+      currentBrandIndex: '',
+      // 表单校验数据1
+      addFromData: {
         authUserId: null, // 供应商id
-        brandAuthLogo: '', //	品牌授权logo
+        shopType: 1, //	供应商类型：1品牌方，2代理商
         brandId: '', // 品牌id
+        shopName: '', // 供应商名称
+        mobile: '', // 手机号
+        linkMan: '', // 联系人
         countryId: 1, // 产地国家id
+        brandAuthLogo: '', //	品牌授权logo
         createBy: '', // 创建人用户id
-        linkMan: '', // 联系人
-        mobile: '', // 手机号
         securityLink: '', // 官网认证链接
-        shopName: '', // 供应商名称
         shopStatus: 1, // 供应商状态：0停用 1启用
-        shopType: 1, //	供应商类型：1品牌方，2代理商
+        shopInfo: 1
+      },
+      // 表单校验数据2
+      brandData: {
+        isNew: true,
+        brandId: '', // 供应商id
+        countryId: 1, // 产地国家id
+        brandAuthLogo: '', //	品牌授权logo
+        brandName: '',
+        securityLink: '', // 官网认证链接
+        statementType: 1, // 声明类型
         statementContent: '', // 声明弹窗内容
-        statementLink: '', // 声明链接
-        statementFileId: 'no file', //	声明文件id
+        statementFileId: null, // 声明文件id
         statementImage: '', // 声明图片
-        statementType: 1 // 代理声明类型：1弹窗 2链接 3图片 4文件（.doc .ppt .pdf）
+        statementLink: '' // 声明链接
       },
-      selectedBrandIndex: '',
-      brandList: [], // 品牌列表
-      // 表单校验规则
-      rules: {
-        shopType: [{ required: true, message: '供应商类型不能为空', trigger: 'change' }],
-        shopName: [{ required: true, message: '供应商名称不能为空', trigger: ['blur', 'change'] }],
+      // 表单校验规则1
+      addFromDataRules: {
+        shopType: { required: true, message: '供应商类型不能为空', trigger: 'change' },
+        brandId: { required: true, message: '品牌不能为空', trigger: 'change' },
+        shopName: { required: true, message: '请输入供应商名称', trigger: 'change' },
         mobile: [
           { required: true, message: '手机号不能为空', trigger: 'blur' },
           { validator: valideMobile, trigger: 'blur' }
-        ], // 手机号格式校验
-        linkMan: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
-        countryId: [{ required: true, message: '产地不能为空', trigger: 'change' }],
-        brandAuthLogo: [{ required: true, message: '品牌logo不能为空' }],
-        brandId: [{ required: true, message: '所属品牌不能为空', trigger: 'change' }],
-        statementContent: [{ required: true, message: '声明不能为空', trigger: 'blur' }],
-        statementLink: [{ required: true, message: '声明链接不能为空', trigger: 'blur' }],
-        statementImage: [{ required: false, message: '声明图片不能为空' }],
-        statementFileId: [{ required: false, message: '声明文件不能为空' }]
+        ],
+        linkMan: { required: true, message: '联系人不能为空', trigger: 'blur' },
+        countryId: { required: true, message: '产地不能为空', trigger: 'change' },
+        brandAuthLogo: { required: true, message: '品牌logo不能为空', trigger: 'change' }
+      },
+      // 表单校验规则2
+      brandDataRules: {
+        brandId: { required: true, message: '品牌不能为空', trigger: 'change' },
+        countryId: { required: true, message: '产地不能为空', trigger: 'change' },
+        brandAuthLogo: { required: true, message: '品牌logo不能为空', trigger: 'change' },
+        statementContent: { required: true, message: '声明内容不能为空', trigger: 'blur' },
+        statementLink: { required: true, message: '声明链接不能为空', trigger: 'blur' },
+        statementFileId: { required: true, message: '请上传声明文件', trigger: 'change' },
+        statementImage: { required: true, message: '请上传声明图片', trigger: 'change' }
       },
+      // 上传成功的文件列表
       fileList1: [], // 已上传的图片列表 品牌logo
       fileList2: [], // 已上传的图片列表 声明图片
       fileList3: [] // 已上传的图片列表 声明文件
-      // countryList: []
     }
   },
   computed: {
     ...mapGetters(['userIdentity', 'name', 'countryList', 'authUserId'])
   },
+  watch: {
+    excludeBrand(list) {
+      console.log(list)
+      this.brandListCody = this.excludeBrandHandle()
+    }
+  },
   created() {
-    // 获取供应商id
-    this.addData.authUserId = this.$route.query.id
-    this.getInfoById(this.addData.authUserId)
+    this.getSupplierData()
+    this.initAddForm()
   },
   methods: {
     // 初始添加供应商时的表单数据
-    initAddForm(data) {
-      this.setFormData(data)
-      this.getBrandList(data.type)
+    initAddForm() {
+      // this.addFromData.authUserId = this.authUserId
+
+      this.addFromData.shopName = ''
     },
-    // 查询供应商信息
-    getInfoById(id) {
+    // 接口通过id获取数据
+    getSupplierData() {
       this.isLoading = true
-      getSupplierById({ authUserId: id })
-        .then(res => {
-          if (res.code === 0) {
-            console.log(res.data)
-            this.initAddForm(res.data)
+      const id = this.$route.query.id
+      getSupplierById({ authUserId: id }).then(res => {
+        this.getBrandList(res.data.shopType)
+        this.setFormData(res.data)
+      })
+    },
+    // 将返回结果绑定到对应的表单
+    setFormData(data) {
+      this.addFromData = {
+        ...this.addFromData,
+        ...data
+      }
+      if (this.addFromData.shopType === 1) {
+        this.addFromData = {
+          ...this.addFromData,
+          ...data.shopInfo[0]
+        }
+        this.addFromData.shopInfo = []
+      }
+      if (this.addFromData.shopType === 2) {
+        this.addFromData.shopInfo = []
+        data.shopInfo.forEach((item, index) => {
+          item.index = index
+          item.isNew = false
+          this.excludeBrand.push(item.brandId)
+        })
+        this.supplierBrands = data.shopInfo
+      }
+      this.isLoading = false
+    },
+    // 提交表单数据
+    submit() {
+      this.$refs.addFromDataRef.validate(valide => {
+        if (valide) {
+          console.log('校验通过')
+          if (this.addFromData.shopType === 1) {
+            this.save()
+          } else if (this.addFromData.shopType === 2) {
+            if (this.supplierBrands.length < 1) {
+              this.$alert('请至少添加一个代理品牌', '不满足提交要求', { type: 'warning' })
+              return
+            }
+            this.save()
           }
+        }
+      })
+    },
+    // 保存
+    save() {
+      this.isLoading = true
+      addSupplier(this.createAddData())
+        .then(res => {
+          console.log(res)
+          this.$message.success('保存成功')
+          this.$router.replace('/supplier')
         })
-        .catch(err => { console.log(err) })
         .finally(() => {
           this.isLoading = false
         })
     },
-    // 为表单设置数据
-    setFormData(data) {
-      for (const key in this.addData) {
-        if (Object.hasOwnProperty.call(data, key)) {
-          this.addData[key] = data[key] || ''
-        }
+    // 创建请求参数
+    createAddData() {
+      let addData = {}
+      // 参数模板
+      const temp1 = {
+        authUserId: '',
+        createBy: '',
+        linkMan: '',
+        mobile: '',
+        shopName: '',
+        shopStatus: '',
+        shopType: '',
+        shopInfo: []
       }
-      if (this.addData.brandAuthLogo) {
-        this.fileList1.push({ name: 'authLogo', url: this.addData.brandAuthLogo })
+      const temp2 = {
+        brandId: 1,
+        countryId: 2,
+        brandAuthLogo: '',
+        securityLink: '',
+        statementType: 1,
+        statementContent: '',
+        statementFileId: null,
+        statementImage: '',
+        statementLink: ''
+      }
+      // 指定创建者为当前登录的账号id
+      this.addFromData.createBy = this.authUserId
+      for (const key in temp1) {
+        if (Object.hasOwnProperty.call(temp1, key)) {
+          temp1[key] = this.addFromData[key]
+        }
       }
-      if (this.addData.statementImage) {
-        this.fileList2.push({ name: '声明图片', url: this.addData.statementImage })
+      // 如果为品牌方
+      if (this.addFromData.shopType === 1) {
+        for (const key in temp2) {
+          if (Object.hasOwnProperty.call(temp2, key)) {
+            temp2[key] = this.addFromData[key] || ''
+          }
+        }
+        temp2.statementType = 1
+        temp2.statementFileId = null
+        addData = {
+          ...temp1,
+          shopInfo: [temp2]
+        }
       }
-      if (data.statementFileName) {
-        // this.fileList3.push({ name: '您已上传文件，不支持预览，可删除后重新上传', url: '' })
-        this.fileList3.push({ name: data.statementFileName, url: '' })
+      // 如果为代理商
+      if (this.addFromData.shopType === 2) {
+        addData = {
+          ...temp1,
+          shopInfo: this.supplierBrands
+        }
       }
+
+      return addData
     },
     // 获取品牌列表
     getBrandList(type) {
-      fetchBrandList({ type }).then(res => {
-        if (res.code === 0) {
+      // 获取品牌列表
+      fetchBrandList({ type })
+        .then(res => {
           this.brandList = res.data
-        }
-      }).catch(err => console.log(err))
+          this.brandListCody = this.excludeBrandHandle()
+        })
+        .catch(err => console.log(err))
+    },
+    // 供应商类型切换
+    handleTypeChange(id) {
+      const type = id
+      this.$refs.addFromDataRef.clearValidate()
+      this.addFromData = {
+        authUserId: null, // 供应商id
+        shopType: type, //	供应商类型：1品牌方，2代理商
+        brandId: '', // 品牌id
+        shopName: '', // 供应商名称
+        mobile: '', // 手机号
+        linkMan: '', // 联系人
+        countryId: 1, // 产地国家id
+        brandAuthLogo: '', //	品牌授权logo
+        createBy: '', // 创建人用户id
+        securityLink: '', // 官网认证链接
+        shopStatus: 1, // 供应商状态：0停用 1启用
+        shopInfo: 1
+      }
+      this.fileList1 = []
+      this.getBrandList(type)
     },
+    // 设置品牌名称
+    setShopName(id) {
+      const selectBrand = this.brandList.filter(item => {
+        return item.id === id
+      })[0]
+      const str = this.addFromData.shopType === 1 ? 'addFromData' : 'brandData'
+      this[str].shopName = selectBrand.name
+      this[str].brandAuthLogo = selectBrand.authLogo
+      this[str].brandId = selectBrand.id
+      if (str === 'brandData') {
+        this[str].brandName = selectBrand.name
+      }
 
-    // 保存表单数据
-    // async save() {
-    //   this.isLoading = true
-    //   this.addData.createBy = this.authUserId
-    //   // this.uploadFile()
-    //   await this.$refs.addFormRef.validate(valide => {
-    //     if (!valide) {
-    //       this.isLoading = false
-    //       return
-    //     }
-    //     if (this.addData.statementFileId === 'no file') {
-    //       this.addData.statementFileId = null
-    //     }
-    //     addSupplier(this.addData).then(res => {
-    //       this.$message.success('修改成功')
-    //       // this.$refs.addFormRef.resetFields()
-    //     }).catch(err => {
-    //       console.log(err)
-    //       this.$message.danger('修改失败')
-    //     }).finally(() => {
-    //       this.isLoading = false
-    //       // this.addData.securityLink = ''
-    //     })
-    //   })
-    // },
-    // 提交表单数据
-    async submit() {
-      this.isLoading = true
-      if (this.addData.statementType === 4 && this.addData.statementFileId !== 'no file') {
-        console.log(this.$refs)
+      if (selectBrand.authLogo) {
+        this.fileList1 = [{ name: '文件已上传', url: selectBrand.authLogo }]
+      }
+    },
+    // 添加品牌对话框开启
+    handleShowDialog() {
+      this.showDialog = true
+    },
+    // 添加品牌
+    handleAddBrand() {
+      // 如果声明类型为文件
+      if (this.brandData.statementType === 4 && (this.brandData.statementFileId === null || this.brandData.statementFileId === '')) {
+        this.brandData.statementFileId = this.brandData.statementFileId === null ? '' : null
         this.$refs.uploadFileRef.$refs.upload.submit()
       } else {
-        this.addData.statementFileId = null
-        await this.$refs.addFormRef.validate(valide => {
-          if (!valide) {
-            this.isLoading = false
-            return
-          }
-          this.save()
-        })
+        this.saveBrand()
       }
     },
-    // 保存
-    async save() {
-      this.addData.createBy = this.authUserId
-      addSupplier(this.addData).then(res => {
-        console.log(res)
-        this.$message.success('修改成功')
-        // this.$refs.addFormRef.resetFields()
-        // this.clearFormData()
-      }).finally(() => {
-        this.isLoading = false
-        // this.$refs.addFormRef.resetFields()
-        this.addData.securityLink = ''
-      })
-    },
-    // 设置品牌名称
-    setShopName(id) {
-      const fileList = []
-      let selectBrand = {}
-      this.brandList.forEach((item, index) => {
-        if (item.id === id) {
-          selectBrand = item
-          return
+    // 保存品牌信息
+    saveBrand() {
+      this.$refs.brandDataRef.validate(valide => {
+        if (valide) {
+          const brandInfo = this.clone(this.brandData)
+          // brandInfo.brandName = brandInfo.shopName
+          console.log(brandInfo)
+          if (brandInfo.isNew) {
+            brandInfo.isNew = false
+            this.supplierBrands.push(brandInfo)
+          } else {
+            this.supplierBrands.splice(this.currentBrandIndex, 1, brandInfo)
+          }
+          if (this.addFromData.shopType === 2) {
+            this.excludeBrand.push(this.brandData.brandId)
+            this.prevBrandId = -1
+            console.log('添加：' + this.excludeBrand)
+          }
         }
+        this.showDialog = false
       })
-      console.log(selectBrand)
-      if (this.addData.shopType === 1) {
-        this.addData.shopName = selectBrand.name
+    },
+    // 修改
+    handleShowInfo(index) {
+      this.currentBrandIndex = index
+      this.brandData = this.clone(this.supplierBrands[index])
+      this.brandData.isNew = false
+      this.prevBrandId = this.brandData.brandId
+      console.log(this.brandData)
+      if (this.addFromData.shopType === 2) {
+        const i = this.excludeBrand.indexOf(this.brandData.brandId)
+        this.excludeBrand.splice(i, 1)
       }
-      this.addData.brandAuthLogo = selectBrand.authLogo
-      if (selectBrand.authLogo) {
-        fileList.push({ name: this.addData.shopName, url: selectBrand.authLogo || '' })
+      if (this.brandData.brandAuthLogo) {
+        this.fileList1 = [{ name: '文件已上传', url: this.brandData.brandAuthLogo }]
+      }
+      if (this.brandData.statementImage) {
+        this.fileList2 = [{ name: '文件已上传', url: this.brandData.statementImage }]
+      }
+      if (this.brandData.statementFileId) {
+        const name = this.brandData.statementFileName || '文件已上传'
+        this.fileList3 = [{ name: name, url: '' }]
+      }
+      this.showDialog = true
+    },
+    // 删除
+    handleRemove(index) {
+      const i = this.excludeBrand.indexOf(this.supplierBrands[index].brandId)
+      this.excludeBrand.splice(i, 1)
+      this.supplierBrands.splice(index, 1)
+      console.log('删除：' + this.excludeBrand)
+    },
+    // 对话框关闭
+    dialogClosed() {
+      this.$refs.brandDataRef.resetFields()
+      this.fileList1 = []
+      this.fileList2 = []
+      this.fileList3 = []
+      this.brandData.isNew = true
+      // 如果部位-1 代表没有保存 则恢复到上一次的排除结果
+      if (this.prevBrandId !== -1) {
+        this.excludeBrand.push(this.prevBrandId)
+        this.prevBrandId = -1
       }
-      this.fileList1 = fileList
-      // const fileList = []
-      // if (this.addData.shopType === 1) {
-      //   this.addData.shopName = this.brandList[index]?.name
-      // }
-      // this.addData.brandAuthLogo = this.brandList[index]?.authLogo || ''
-      // if (this.brandList[index]?.authLogo) {
-      //   fileList.push({ name: this.addData.shopName, url: this.brandList[index]?.authLogo || '' })
-      // }
-      // this.fileList1 = fileList
+    },
+    // 声明类型切换
+    handleStatementChange(index) {
+      console.log(index)
+      const ref = 'statement' + index
+      this.$refs[ref].clearValidate()
+      // this.brandData.statementContent = ''
+      // this.brandData.statementLink = ''
+      // this.brandData.statementFileId = ''
+      // this.brandData.statementImage = ''
     },
     // 文件上传成功
     fileUploadSuccess(data) {
-      this.addData.statementFileId = data.data
-      console.log(data)
-      this.$refs.addFormRef.validate(valide => {
-        if (!valide) {
-          this.isLoading = false
-          return
-        }
-        console.log(2)
-        this.save()
-      })
+      this.brandData.statementFileId = data.data
+      this.saveBrand()
     },
     fileUploadFaild(err, file, fileList) {
       console.log(err)
     },
+    fileRemove() {
+      console.log('删除文件')
+      this.brandData.statementFileId = null
+    },
 
     // 图片上传成功 品牌logo
     imageUploadSuccess1(data) {
-      this.addData.brandAuthLogo = data.data
+      const str = this.addFromData.shopType === 1 ? 'addFromData' : 'brandData'
+      this[str].brandAuthLogo = data.data
     },
     imageUploadFaild1(err, file, fileList) {
       console.log(err)
     },
+    imageRemove1() {
+      const str = this.addFromData.shopType === 1 ? 'addFromData' : 'brandData'
+      this[str].brandAuthLogo = ''
+      console.log('删除文件')
+    },
 
     // 图片上传成功 声明图片
     imageUploadSuccess2(data) {
-      this.addData.statementImage = data.data
+      this.brandData.statementImage = data.data
     },
     imageUploadFaild2(err, file, fileList) {
       console.log(err)
+    },
+    imageRemove2() {
+      this.brandData.statementImage = ''
+      console.log('删除文件')
+    },
+    // 对品牌列表做排除操作
+    excludeBrandHandle() {
+      return this.brandList.filter((item, index) => {
+        return this.excludeBrand.indexOf(item.id) === -1
+      })
+    },
+
+    // 克隆
+    clone(data) {
+      const result = {}
+      for (const key in data) {
+        if (Object.hasOwnProperty.call(data, key)) {
+          result[key] = data[key]
+        }
+      }
+      return result
     }
   }
 }
@@ -339,20 +617,26 @@ export default {
 
 <style lang="scss" scoped>
 .addSupplier {
-  margin-bottom: 80px;
+    margin-bottom: 80px;
 }
 .addForm {
-  width: 500px;
-  margin: 0 auto;
-  margin-top: 80px;
+    width: 500px;
+    margin: 0 auto;
+    margin-top: 80px;
+    .brand-list{
+      .el-tag{
+        margin-right: 5px;
+        cursor: pointer;
+      }
+    }
 }
 .submit-btn {
-  text-align: center;
-  .el-button {
-    width: 140px;
-  }
+    text-align: center;
+    .el-button {
+        width: 140px;
+    }
 }
-.hiddenInput{
-  display: none;
+.hiddenInput {
+    display: none;
 }
 </style>

src/views/supplier/user/index.vue

@@ -5,11 +5,13 @@
       <el-input v-model="listQuery.shopName" placeholder="供应商名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
       <span>供应商类型:</span>
       <el-select v-model="listQuery.shopType" placeholder="供应商类型" clearable style="width: 200px" class="filter-item">
-        <el-option label="代理商" :value="1" />
-        <el-option label="品牌方" :value="2" />
+        <el-option label="所有类型" value="" />
+        <el-option label="代理商" :value="2" />
+        <el-option label="品牌方" :value="1" />
       </el-select>
       <span>所属品牌:</span>
       <el-select v-model="listQuery.brandId" placeholder="所属品牌" clearable class="filter-item" style="width: 200px">
+        <el-option label="所有品牌" value="" />
         <el-option
           v-for="item in brandList"
           :key="item.id"
@@ -38,11 +40,11 @@
       <el-table-column label="供应商名称" align="center" prop="name" />
       <el-table-column label="供应商类型" width="150px" align="center">
         <template v-slot="{row}">
-          <span v-if="row.type === 1">品牌方</span>
-          <span v-if="row.type === 2">代理商</span>
+          <span v-if="row.shopType === 1">品牌方</span>
+          <span v-if="row.shopType === 2">代理商</span>
         </template>
       </el-table-column>
-      <el-table-column label="所属品牌" width="150px" align="center" prop="brandName" />
+      <!-- <el-table-column label="所属品牌" width="150px" align="center" prop="brandName" /> -->
       <el-table-column label="手机号" width="120px" align="center" prop="mobile" />
       <el-table-column label="联系人" width="100px" align="center" prop="linkMan" />
       <el-table-column label="供应商状态" align="center" width="100px">