caimei-authentic-manager/src/views/admin/supplier/edit.vue

<template>
  <div v-loading="isLoading" class="page-form-container">
    <el-form ref="submitFormRef" :model="submitForm" :rules="formDataRules" label-width="120px" class="addForm">
      <el-form-item label="供应商类型:" prop="shopType">
        <el-select
          v-model="submitForm.shopType"
          placeholder="请选择供应商类型"
          style="width: 100%"
          :disabled="editType === 'edit'"
          @change="handleTypeChange"
        >
          <el-option label="品牌方" :value="1" />
          <el-option label="代理商" :value="2" />
        </el-select>
      </el-form-item>

      <!-- 供应商名称 -->
      <el-form-item v-if="submitForm.shopType === 2" label="供应商名称:" prop="shopName">
        <el-input
          v-model="submitForm.shopName"
          placeholder="请输入供应商名称"
          maxlength="50"
          show-word-limit
          :disabled="editType === 'edit'"
        />
      </el-form-item>

      <template v-if="submitForm.shopType === 1">
        <el-form-item clearable label="供应商名称:" prop="brandId">
          <el-select
            v-if="editType === 'add'"
            v-model="submitForm.brandId"
            placeholder="请选择品牌"
            style="width: 100%"
            filterable
            @change="handleBrandChange"
          >
            <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-input
            v-else
            v-model="submitForm.shopName"
            placeholder="请输入供应商名称"
            maxlength="50"
            show-word-limit
            :disabled="editType === 'edit'"
          />
        </el-form-item>

        <!-- 制造商 -->
        <el-form-item label="制造商:">
          <el-input v-model="submitForm.manufacturer" placeholder="请输入制造商名称" maxlength="50" show-word-limit />
        </el-form-item>
      </template>
      <!-- 供应商名称END -->

      <el-form-item label="手机号:" prop="mobile">
        <el-input
          v-model="submitForm.mobile"
          placeholder="请输入手机号"
          maxlength="11"
          show-word-limit
          @input="handleMobileInput"
        />
      </el-form-item>

      <el-form-item label="联系人:" prop="linkMan">
        <el-input v-model="submitForm.linkMan" placeholder="请输入联系人" />
      </el-form-item>

      <!-- 代理商logo -->
      <transition name="fade">
        <el-form-item v-if="submitForm.shopType === 2" label="代理商logo:" prop="logo">
          <el-input v-show="false" v-model="submitForm.logo" />
          <upload-image
            :limit="1"
            tip="建议尺寸：200px * 200px"
            :image-list="logoList"
            @success="uploadLogoImageSuccess"
            @remove="handleLogoImageRemove"
          />
        </el-form-item>
      </transition>
      <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="handleRemoveBrand(brand)"
              @click="handleEditBrand(brand)"
            >{{ brand.brandName }}</el-tag>
          </template>
          <el-tag type="primary" @click="handleAddBrand">添加品牌<span class="el-icon-plus" /></el-tag>
          <el-input v-show="false" v-model="submitForm.shopInfo" />
        </el-form-item>
      </transition>

      <template v-if="submitForm.shopType === 1">
        <el-form-item label="产地:" prop="countryId">
          <el-select v-model="submitForm.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
            tip="建议尺寸：200px * 200px"
            :image-list="brandAuthLogoList"
            @success="uploadBrandAuthSuccess"
            @remove="handleRemoveBrandAuthLogo"
          />
          <el-input v-show="false" v-model="submitForm.brandAuthLogo" />
        </el-form-item>

        <el-form-item label="官网认证链接:">
          <el-input v-model="submitForm.securityLink" placeholder="请输入官网认证链接" />
        </el-form-item>
      </template>

      <!-- 公众号信息 -->
      <el-form-item label="微信公众号:">
        <el-select v-model="submitForm.wxAccountType" placeholder="请选择微信公众号类型" style="width: 100%">
          <el-option label="请选择" :value="0" />
          <el-option label="服务号" :value="2" />
          <el-option label="订阅号" :value="1" />
        </el-select>
      </el-form-item>

      <transition-group name="fade">
        <template v-if="submitForm.wxAccountType !== 0">
          <el-form-item key="appID" label="appID:">
            <el-input v-model="submitForm.appId" placeholder="微信公众号appID" />
          </el-form-item>
          <el-form-item v-if="submitForm.wxAccountType === 2" key="appSecret" label="appSecret:">
            <el-input v-model="submitForm.appSecret" placeholder="微信公众号appsecret" />
          </el-form-item>
          <el-form-item key="qrCodeImage" label="公众号二维码:" prop="qrCodeImage">
            <upload-image
              tip="建议尺寸：200px * 200px"
              :image-list="qrCodeImageList"
              @success="uploadQrCodeImageSuccess"
              @remove="handleRemoveQrCodeImage"
            />
            <el-input v-show="false" v-model="submitForm.qrCodeImage" />
          </el-form-item>
        </template>
      </transition-group>

      <!-- 公众号信息END -->
      <el-form-item label="供应商状态:">
        <el-select v-model="submitForm.shopStatus" placeholder="请选择供应商状态" style="width: 100%">
          <el-option label="启用" :value="1" />
          <el-option label="禁用" :value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="control-box">
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button type="warning" @click="navigateBack()">返回</el-button>
    </div>

    <!-- 供应商添加品牌的对话框 -->
    <el-dialog :title="editBrandText" :visible.sync="dialogAddBrand" width="width" @close="handleDialogAddBrandClosed">
      <el-form ref="subFormRef" :model="subForm" label-width="120px" :rules="formDataRules">
        <el-form-item label="选择品牌:" prop="brandId">
          <el-select
            v-model="subForm.brandId"
            placeholder="请选择品牌"
            style="width: 100%"
            filterable
            @change="handleBrandChange"
          >
            <el-option v-for="item in otherBrandList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="产地:" prop="countryId">
          <el-select v-model="subForm.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="制造商:">
          <el-input v-model="subForm.manufacturer" placeholder="请输入制造商名称" maxlength="50" show-word-limit />
        </el-form-item>

        <el-form-item label="品牌logo:" class="no-input" prop="brandAuthLogo">
          <upload-image
            tip="建议尺寸：200px * 200px"
            :image-list="brandAuthLogoList"
            @success="uploadBrandAuthSuccess"
            @remove="handleRemoveBrandAuthLogo"
          />
          <el-input v-show="false" v-model="subForm.brandAuthLogo" />
        </el-form-item>

        <el-form-item label="代理声明:" prop="statementType">
          <el-radio-group v-model="subForm.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="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="statement" label="链接:" prop="statementLink">
          <el-input v-model="subForm.statementLink" />
        </el-form-item>

        <el-form-item
          v-else-if="subForm.statementType === 3"
          ref="statement"
          label="图片:"
          class="no-input"
          prop="statementImage"
        >
          <upload-image
            tip="建议尺寸：200px * 200px"
            :image-list="statementImageList"
            @success="uploadStatementImageSuccess"
            @remove="handleRemoveStatementImage"
          />
          <el-input v-show="false" v-model="subForm.statementImage" />
        </el-form-item>

        <el-form-item v-else ref="statement" label="文件:" prop="statementFileId">
          <upload-file
            ref="fileUpload"
            :auto-upload="false"
            :data="uploadParams"
            :file-list="statementFileList"
            :before-upload="beforeUploadStatementFile"
            @success="uploadStatementFileSuccess"
            @remove="removeStatementFile"
            @change="changeStatementFile"
          />
          <el-input v-show="false" v-model="subForm.statementFileId" />
        </el-form-item>

        <el-form-item label="官网认证链接:" prop="securityLink">
          <el-input v-model="subForm.securityLink" placeholder="请输入官网认证链接" />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="addBrandSubmitCancel">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="handleSaveBrand">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadFile from '@/components/UploadFile'
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, getSupplierById } from '@/api/supplier'
import { Promise } from 'jszip/lib/external'
let uuid = 0

export default {
  components: { UploadImage, UploadFile },
  data() {
    const validMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        return callback(new Error('手机号格式不正确'))
      }
      return callback()
    }

    const validShopInfo = (rule, value, callback) => {
      console.log(value)
      if (value <= 0) {
        return callback(new Error('代理品牌不能为空'))
      }
      return callback()
    }

    return {
      id: '', // 供应商id
      editType: '',
      isLoading: false,
      submitLoading: false,
      dialogAddBrand: false,
      brandTagClickType: '', // 品牌表单点击类型
      selectedShopType: 1, // 当前选中的供应商类型
      currentBrand: {}, // 当前选中的品牌
      selectedBrandIds: [], // 代理商已添加的品牌id
      editBrandInfo: {},
      // 表单1
      submitForm: {
        shopType: 1, // 供应商类型
        shopName: '', // 供应商名称
        brandId: '', // 品牌id
        mobile: '', // 手机号
        linkMan: '', // 联系人
        countryId: 1, // 产地id
        brandAuthLogo: '', // 品牌logo
        securityLink: '', // 官网认证链接
        shopStatus: 1, // 供应商状态,
        shopInfo: '',
        wxAccountType: 0,
        appId: '',
        appSecret: '',
        qrCodeImage: '', // 微信公众号二维码
        logo: '', // 代理商logo
        manufacturer: '' // 制造商
      },
      // 表单2
      subForm: {
        brandId: '', // 品牌id
        countryId: 1, // 产地id
        brandAuthLogo: '', // 品牌logo
        securityLink: '', // 官网认证链接
        statementType: 1, // 代理声明类型
        statementContent: '', // 声明内容
        statementFileId: null, // 声明文件id
        statementImage: '', // 声明图片
        statementLink: '', // 声明链接
        manufacturer: '' // 制造商
      },
      supplierBrands: [],
      brandList: [],
      // 表单数据校验
      formDataRules: {
        shopType: { required: true, message: '供应商类型不能为空', tigger: 'change', type: 'number' },
        shopName: { required: true, message: '供应名称不能为空', tigger: 'change' },
        mobile: [
          { required: true, message: '手机号不能为空', tigger: 'change' },
          { validator: validMobile, tigger: 'change' }
        ],
        linkMan: { required: true, message: '联系人不能为空', tigger: 'blur' },
        countryId: { required: true, message: '产地不能为空', tigger: 'change', type: 'number' },
        brandAuthLogo: { required: true, message: '品牌logo不能为空', tigger: 'change' },
        shopInfo: [
          { required: true, message: '代理品牌不能为空', tigger: 'change', type: 'number' },
          { validator: validShopInfo, tigger: 'change' }
        ],
        brandId: { required: true, message: '品牌不能为空', tigger: 'change', type: 'number' },
        statementContent: { required: true, message: '声明内容不能为空', tigger: 'change' }, // 声明内容
        statementFileId: { required: true, message: '声明文件不能为空', tigger: 'change', type: 'number' }, // 声明文件id
        statementImage: { required: true, message: '声明图片不能为空', tigger: 'change' }, // 声明图片
        statementLink: { required: true, message: '声明链接不能为空', tigger: 'change' }, // 声明链接,
        logo: { required: true, message: '代理商logo不能为空', tigger: 'change' }
      },

      // 上传图片列表
      logoList: [],
      brandAuthLogoList: [],
      qrCodeImageList: [],
      // brandAuthLogoList:[],
      statementImageList: [],
      // 上传的文件列表
      statementFileList: [], // 文件
      statementFileName: '' // 声明文件名称 临时
    }
  },
  computed: {
    ...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
    },
    // 文件上传参数
    uploadParams() {
      return {
        brandId: this.currentBrand.id,
        authUserId: this.id
      }
    },
    // 文案提示
    editTypeText() {
      return this.editType === 'edit' ? '修改' : '添加'
    },
    editBrandText() {
      return this.brandTagClickType === 'edit' ? '修改品牌' : '添加品牌'
    }
  },
  watch: {
    // 根据供应商类型变化获取品牌列表
    selectedShopType(nVal) {
      this.getBrandList(nVal)
    }
  },
  created() {
    this.editType = this.$route.query.type || 'add'
    this.id = parseInt(this.$route.query.id) || ''
    this.getBrandList(this.selectedShopType)
    this.fetchSupplierInfo()
  },
  methods: {
    /** 数据回显 */
    // 获取供应商信息
    fetchSupplierInfo() {
      if (!this.id) return
      getSupplierById({ authUserId: this.id }).then((res) => {
        this.initSupplierInfo(res.data)
      })
    },

    // 初始化供应商信息
    initSupplierInfo(info) {
      for (const key in this.submitForm) {
        if (Object.hasOwnProperty.call(info, key)) {
          this.submitForm[key] = info[key]
        }
      }

      this.selectedShopType = info.shopType
      if (this.selectedShopType === 1) {
        // 品牌方
        const shopInfo = info.shopInfo[0]
        this.submitForm.brandId = shopInfo.brandId
        this.submitForm.countryId = shopInfo.countryId
        this.submitForm.brandAuthLogo = shopInfo.brandAuthLogo
        this.submitForm.securityLink = shopInfo.securityLink
        this.submitForm.manufacturer = shopInfo.manufacturer
        this.submitForm.brandName = shopInfo.brandName

        if (shopInfo.brandAuthLogo) {
          this.brandAuthLogoList = [{ name: shopInfo.brandName, url: shopInfo.brandAuthLogo }]
        }
      } else {
        // 代理商
        this.supplierBrands = info.shopInfo.map((item) => {
          item.uuid = ++uuid
          this.selectedBrandIds.push(item.brandId)
          return item
        })

        // 代理商logo
        if (this.submitForm.logo) {
          this.logoList = [{ name: this.submitForm.brandName, url: this.submitForm.logo }]
        }

        this.submitForm.shopInfo = this.supplierBrands.length
      }

      // 微信公众号二维码
      if (this.submitForm.qrCodeImage) {
        this.qrCodeImageList = [{ name: '', url: this.submitForm.qrCodeImage }]
      }
    },
    /** 数据回显END */

    // 提交保存
    async submit() {
      try {
        await this.$refs.submitFormRef.validate()
      } catch (err) {
        return
      }

      this.isLoading = true
      let params = {}
      if (this.selectedShopType === 1) {
        params = this.getBrandParams()
      } else {
        params = this.getShopParams()
      }

      // 设置创建人
      params.createBy = this.authUserId
      params.authUserId = this.id

      console.log(params)
      addSupplier(params)
        .then((res) => {
          this.$message.success(`${this.editTypeText}供应商成功`)
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.replace('/supplier/list')
        })
        .finally(() => {
          this.isLoading = false
        })
    },

    /** 封装请求参数 */
    // 代理商参数
    getShopParams() {
      const params = {
        shopType: 2, // 供应商类型
        shopName: '', // 供应商名称
        logo: '', // 代理商logo
        mobile: '', // 手机号
        linkMan: '', // 联系人
        securityLink: '', // 官网认证链接
        shopStatus: 1, // 供应商状态,
        wxAccountType: 2,
        appId: '',
        appSecret: '',
        qrCodeImage: '', // 微信公众号二维码
        manufacturer: '' // 制造商
      }
      for (const key in params) {
        if (Object.hasOwnProperty.call(this.submitForm, key)) {
          params[key] = this.submitForm[key]
        }
      }

      params.shopInfo = deepClone(this.supplierBrands).map((item) => {
        delete item.statementFileName
        delete item.uuid
        return item
      })

      return params
    },

    // 品牌方参数
    getBrandParams() {
      const params = {
        shopType: 1, // 供应商类型
        mobile: '', // 手机号
        linkMan: '', // 联系人
        wxAccountType: 2,
        appId: '',
        appSecret: '',
        qrCodeImage: '', // 微信公众号二维码
        shopStatus: 1 // 供应商状态,
      }
      for (const key in params) {
        if (Object.hasOwnProperty.call(this.submitForm, key)) {
          params[key] = this.submitForm[key]
        }
      }

      params.shopName = this.currentBrand.name
      params.shopInfo = [
        {
          brandId: this.submitForm.brandId,
          countryId: this.submitForm.countryId,
          brandAuthLogo: this.submitForm.brandAuthLogo,
          securityLink: this.submitForm.securityLink,
          manufacturer: this.submitForm.manufacturer, // 制造商
          statementType: 1,
          statementContent: '',
          statementFileId: null,
          statementImage: '',
          statementLink: ''
        }
      ]
      return params
    },
    // 大理上添加
    /** 封装请求参数 end */

    // 品牌改变事件
    handleBrandChange(id) {
      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
      this.subForm.brandAuthLogo = this.currentBrand.authLogo
    },

    /** 品牌标签操作 */
    // 添加品牌对话框
    handleAddBrand() {
      this.brandTagClickType = 'add'
      // 文件上传参数
      this.dialogAddBrand = true
    },
    // 修改品牌
    handleEditBrand(row) {
      this.brandTagClickType = 'edit'
      // 等待dialog表单渲染完成后再设置值
      this.$nextTick(() => {
        this.editBrandInfo = row
        // 设置选中品牌信息
        this.currentBrand.id = row.brandId
        this.currentBrand.name = row.brandName
        this.currentBrand.authLogo = row.brandAuthLogo
        this.statementFileName = row.statementFileName

        if (row.brandAuthLogo) {
          this.brandAuthLogoList = [{ name: row.brandName, url: row.brandAuthLogo }]
        }

        if (row.statementImage) {
          this.statementImageList = [{ name: row.brandName, url: row.statementImage }]
        }

        if (row.statementFileId) {
          this.statementFileList = [{ name: row.statementFileName }]
        }

        for (const key in this.subForm) {
          if (Object.hasOwnProperty.call(this.editBrandInfo, key)) {
            this.subForm[key] = this.editBrandInfo[key]
          }
        }

        console.log(this.subForm)
      })

      this.dialogAddBrand = true
    },
    // 移除品牌
    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)
      this.submitForm.shopInfo = this.supplierBrands.length
    },
    // 保存品牌
    async handleSaveBrand() {
      if (this.subForm.statementType === 4) {
        console.log('有文件上传')
        if (!this.subForm.statementFileId || this.subForm.statementFileId === -1) {
          this.submitLoading = true
          this.$refs.fileUpload.$refs.fileUpload.submit()
          return
        }
      }
      try {
        await this.$refs.subFormRef.validate()
        this.handleSaveBrandAction()
      } catch (error) {
        console.log(error)
      }
    },

    // 取消保存品牌
    addBrandSubmitCancel() {
      // 取消上传文件
      if (this.$refs.fileUpload) {
        this.$refs.fileUpload.$refs.fileUpload.abort()
        this.$message.info('文件上传已取消')
      }
      this.dialogAddBrand = false
    },

    // 保存品牌操作
    handleSaveBrandAction() {
      // 深度克隆数据
      const brandInfo = deepClone(this.subForm)
      // 保存已添加品牌id
      this.selectedBrandIds.push(this.currentBrand.id)
      // 设置品牌名称（显示使用）
      brandInfo.brandName = this.currentBrand.name
      brandInfo.brandAuthLogo = this.currentBrand.authLogo
      brandInfo.statementFileName = this.statementFileName
      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
    },

    // 添加品牌对话框关闭
    handleDialogAddBrandClosed() {
      this.subForm.securityLink = ''
      this.subForm.manufacturer = ''
      this.subForm.statementType = 1
      this.statementFileName = ''
      this.statementImageList = []
      this.statementFileList = []
      this.brandAuthLogoList = []
      this.currentBrand = {}
      this.submitForm.shopInfo = this.supplierBrands.length
      // 按钮loading结束
      this.submitLoading = false
      // 初始化表单
      this.$refs.subFormRef.resetFields()
      console.log(this.subForm)
    },

    // 声明类型切换
    handleStatementChange() {
      this.$refs.statement.clearValidate()
    },
    // 供应商类型改变事件
    handleTypeChange(type) {
      this.selectedShopType = type
      this.brandAuthLogoList = []
      this.statementImageList = []
      this.currentBrand = {}
    },
    // 获取品牌列表
    getBrandList(type) {
      fetchBrandList({ type }).then((res) => {
        if (res.code !== 0) {
          return
        }
        this.brandList = res.data
      })
    },
    /** 品牌标签操作END */

    // 输入框输入时
    handleMobileInput() {
      this.submitForm.mobile = this.submitForm.mobile.replace(/[^\w\.\/]/gi, '')
    },

    /** 图片上传 */
    // 代理商logo
    uploadLogoImageSuccess({ response, file, fileList }) {
      this.logoList = fileList
      this.submitForm.logo = response.data
    },
    handleLogoImageRemove({ file, fileList }) {
      this.logoList = fileList
      this.submitForm.logo = ''
    },

    // 品牌logo
    uploadBrandAuthSuccess({ response, file, fileList }) {
      this.brandAuthLogoList = fileList
      this.submitForm.brandAuthLogo = response.data
      this.subForm.brandAuthLogo = response.data
    },
    handleRemoveBrandAuthLogo({ file, fileList }) {
      this.brandAuthLogoList = fileList
      this.submitForm.brandAuthLogo = ''
      this.subForm.brandAuthLogo = ''
    },

    // 公众号二维码
    uploadQrCodeImageSuccess({ response, file, fileList }) {
      this.qrCodeImageList = fileList
      this.submitForm.qrCodeImage = response.data
    },
    handleRemoveQrCodeImage({ file, fileList }) {
      this.qrCodeImageList = fileList
      this.submitForm.qrCodeImage = ''
    },

    // 声明图片
    uploadStatementImageSuccess({ response, file, fileList }) {
      this.statementImageList = fileList
      this.subForm.statementImage = response.data
    },
    handleRemoveStatementImage({ file, fileList }) {
      this.statementImageList = fileList
      this.subForm.statementImage = ''
    },

    /** 文件上传 */
    uploadStatementFileSuccess({ response, file, fileList }) {
      this.statementFileList = fileList
      this.subForm.statementFileId = response.data.fileId
      this.statementFileName = response.data.fileName
      // 验证表单数据并保存
      this.$refs.subFormRef.validate((valide) => {
        if (!valide) return
        this.handleSaveBrandAction()
      })
    },
    removeStatementFile({ file, fileList }) {
      this.statementFileList = []
      this.subForm.statementFileId = null
    },
    changeStatementFile({ file, fileList }) {
      this.statementFileList = fileList
      this.subForm.statementFileId = -1
    },
    beforeUploadStatementFile(file) {
      const maxSize = 30
      if (file.size <= maxSize * 1024 * 1024) return true
      return this.$confirm(`您上传的文件大于${maxSize}MB，是否继续上传？文件上传过程中请您耐心等待!`, '文件上传提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return Promise.resolve()
        })
        .catch(() => {
          this.$message.info('已取消上传')
          this.submitLoading = false
          return Promise.reject()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.addForm {
  .brand-list {
    .el-tag {
      margin-right: 5px;
      cursor: pointer;
    }
  }
}
</style>