供应商编辑页面优化

src/components/UploadFile/index.vue

@@ -1,26 +1,24 @@
 <template>
   <div>
     <el-upload
+      ref="fileUpload"
+      :auto-upload="autoUpload"
       :class="{ 'el-upload-hidden': !chooseState}"
-      :list-type="listType"
       :action="action"
       :headers="headers"
-      :on-success="uploadImageSuccess"
-      :on-remove="handleImageRemove"
+      :on-success="uploadSuccess"
+      :on-remove="handleRemove"
+      :on-change="handleChange"
       :before-upload="beforeUpload"
       :on-error="uploadError"
-      :on-preview="handlePictureCardPreview"
       :limit="limit"
       :multiple="multiple"
       :accept="accept"
-      :file-list="imageList"
+      :file-list="fileList"
     >
       <div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
-      <i slot="default" class="el-icon-plus" />
+      <el-button size="mini" type="primary">选择文件</el-button>
     </el-upload>
-    <el-dialog :visible.sync="dialogVisible">
-      <img width="100%" :src="dialogImageUrl">
-    </el-dialog>
   </div>
 </template>
 
@@ -43,13 +41,13 @@ export default {
     },
     accept: {
       type: String,
-      default: '.jpg,.png,.gif'
+      default: '.doc,.ppt,.pdf'
     },
     listType: {
       type: String,
       default: 'picture-card'
     },
-    imageList: {
+    fileList: {
       type: Array,
       default: () => []
     },
@@ -60,6 +58,10 @@ export default {
     beforeUpload: {
       type: Function,
       default: () => true
+    },
+    autoUpload: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -71,10 +73,10 @@ export default {
   computed: {
     ...mapGetters(['token']),
     chooseState() {
-      return this.imageList.length < this.limit
+      return this.fileList.length < this.limit
     },
     action() {
-      return process.env.VUE_APP_UPLOAD_API + '/upload/image'
+      return process.env.VUE_APP_UPLOAD_API + '/shop/upload/file'
     },
     headers() {
       return {
@@ -84,20 +86,20 @@ export default {
   },
   methods: {
     // 上传成功
-    uploadImageSuccess(response, file, fileList) {
+    uploadSuccess(response, file, fileList) {
       this.$emit('success', { response, file, fileList })
     },
     // 删除
-    handleImageRemove(file, fileList) {
+    handleRemove(file, fileList) {
       this.$emit('remove', { file, fileList })
     },
+    // 变化
+    handleChange(file, fileList) {
+      this.$emit('change', { file, fileList })
+    },
     // 上传失败
     uploadError(err, file, fileList) {
       this.$emit('error', { err, file, fileList })
-    },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
     }
   }
 }

src/views/admin/supplier/edit.vue

@@ -6,6 +6,7 @@
           v-model="submitForm.shopType"
           placeholder="请选择供应商类型"
           style="width: 100%"
+          :disabled="editType === 'edit'"
           @change="handleTypeChange"
         >
           <el-option label="品牌方" :value="1" />
@@ -15,11 +16,12 @@
 
       <!-- 供应商名称 -->
       <el-form-item v-if="submitForm.shopType === 2" label="供应商名称:" prop="shopName">
-        <el-input v-model="submitForm.shopName" placeholder="请输入供应商名称" maxlength="50" show-word-limit />
+        <el-input v-model="submitForm.shopName" placeholder="请输入供应商名称" maxlength="50" show-word-limit :disabled="editType === 'edit'" />
       </el-form-item>
 
       <el-form-item v-if="submitForm.shopType === 1" clearable label="供应商名称:" prop="brandId">
         <el-select
+          v-if="editType === 'add'"
           v-model="submitForm.brandId"
           placeholder="请选择品牌"
           style="width: 100%"
@@ -28,6 +30,7 @@
         >
           <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
+        <el-input v-model="submitForm.shopName" placeholder="请输入供应商名称" maxlength="50" show-word-limit :disabled="editType === 'edit'" />
       </el-form-item>
       <!-- 供应商名称END -->
 
@@ -91,25 +94,33 @@
       <!-- 公众号信息 -->
       <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>
-      <el-form-item label="appID:">
-        <el-input v-model="submitForm.appId" placeholder="微信公众号appID，没有就不填" />
-      </el-form-item>
-      <el-form-item label="appSecret:">
-        <el-input v-model="submitForm.appSecret" placeholder="微信公众号appsecret，没有就不填" />
-      </el-form-item>
-      <el-form-item 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>
+
+      <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 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%">
@@ -160,7 +171,7 @@
           <el-input v-show="false" v-model="subForm.brandAuthLogo" />
         </el-form-item>
 
-        <el-form-item label="代理声明:">
+        <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>
@@ -195,19 +206,17 @@
 
         <el-form-item v-else ref="statement" label="文件:" prop="statementFileId">
           <upload-file
-            ref="uploadFileRef"
-            :auth-user-id="subForm.authUserId"
-            :brand-id="subForm.brandId"
-            :file-list="fileList4"
-            @success="fileUploadSuccess"
-            @error="fileUploadFaild"
-            @remove="fileRemove"
-            @change="fileChange"
+            ref="fileUpload"
+            :auto-upload="false"
+            :file-list="statementFileList"
+            @success="uploadStatementFileSuccess"
+            @remove="removeStatementFile"
+            @change="changeStatementFile"
           />
           <el-input v-show="false" v-model="subForm.statementFileId" />
         </el-form-item>
 
-        <el-form-item label="官网认证链接:">
+        <el-form-item label="官网认证链接:" prop="securityLink">
           <el-input v-model="subForm.securityLink" placeholder="请输入官网认证链接" />
         </el-form-item>
 
@@ -223,13 +232,13 @@
 </template>
 
 <script>
-import UploadFile from '@/views/components/uploadFile'
+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 } from '@/api/supplier'
+import { addSupplier, getSupplierById } from '@/api/supplier'
 let uuid = 0
 
 export default {
@@ -242,6 +251,8 @@ export default {
       return callback()
     }
     return {
+      id: '', // 供应商id
+      editType: '',
       isLoading: false,
       dialogLoading: false,
       dialogAddBrand: false,
@@ -262,7 +273,7 @@ export default {
         securityLink: '', // 官网认证链接
         shopStatus: 1, // 供应商状态,
         shopInfo: '',
-        wxAccountType: 2,
+        wxAccountType: 0,
         appId: '',
         appSecret: '',
         qrCodeImage: '', // 微信公众号二维码
@@ -276,7 +287,7 @@ export default {
         securityLink: '', // 官网认证链接
         statementType: 1, // 代理声明类型
         statementContent: '', // 声明内容
-        statementFileId: '', // 声明文件id
+        statementFileId: null, // 声明文件id
         statementImage: '', // 声明图片
         statementLink: '' // 声明链接
       },
@@ -306,7 +317,8 @@ export default {
       // brandAuthLogoList:[],
       statementImageList: [],
       // 上传的文件列表
-      fileList4: [] // 文件
+      statementFileList: [], // 文件
+      statementFileName: '' // 声明文件名称 临时
     }
   },
   computed: {
@@ -326,21 +338,89 @@ export default {
     }
   },
   watch: {
-
+    selectedShopType(nVal) {
+      this.getBrandList(nVal)
+    }
   },
   created() {
+    this.editType = this.$route.query.type || 'edit'
+    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) {
+      // 表单1
+      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.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 }]
+        }
+      }
+
+      // 微信公众号二维码
+      if (this.submitForm.qrCodeImage) {
+        this.qrCodeImageList = [{ name: '', url: this.submitForm.qrCodeImage }]
+      }
+
+      console.log(this.submitForm)
+    },
+
     // 提交保存
     submit() {
+      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('添加供应商成功')
+      }).finally(() => {
+        this.isLoading = false
+      })
     },
 
     /** 封装请求参数 */
@@ -364,6 +444,13 @@ export default {
           params[key] = this.submitForm[key]
         }
       }
+
+      params.shopInfo = deepClone(this.supplierBrands).map(item => {
+        delete item.statementFileName
+        delete item.uuid
+        return item
+      })
+
       return params
     },
 
@@ -371,12 +458,8 @@ export default {
     getBrandParams() {
       const params = {
         shopType: 1, // 供应商类型
-        brandId: '', // 品牌id
         mobile: '', // 手机号
         linkMan: '', // 联系人
-        countryId: 1, // 产地id
-        brandAuthLogo: '', // 品牌logo
-        securityLink: '', // 官网认证链接
         wxAccountType: 2,
         appId: '',
         appSecret: '',
@@ -388,6 +471,20 @@ export default {
           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,
+        statementType: 1,
+        statementContent: '',
+        statementFileId: null,
+        statementImage: '',
+        statementLink: ''
+      }]
+
       return params
     },
     // 大理上添加
@@ -399,6 +496,7 @@ export default {
       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
     },
 
     /** 品牌标签操作 */
@@ -415,6 +513,7 @@ export default {
       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 }]
@@ -424,6 +523,10 @@ export default {
         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]
@@ -441,13 +544,20 @@ export default {
       this.supplierBrands.splice(findIndex, 1)
     },
     // 保存品牌
-    handleSaveBrand() {
+    async handleSaveBrand() {
       if (this.subForm.statementType === 4) {
         console.log('有文件上传')
-      } else {
+        if (!this.subForm.statementFileId || this.subForm.statementFileId === -1) {
+          this.$refs.fileUpload.$refs.fileUpload.submit()
+          return
+        }
+      }
+      try {
+        await this.$refs.subFormRef.validate()
         this.handleSaveBrandAction()
+      } catch (error) {
+        console.log(error)
       }
-
       console.log(this.supplierBrands)
     },
     // 保存品牌操作
@@ -459,6 +569,7 @@ export default {
       // 设置品牌名称（显示使用）
       brandInfo.brandName = this.currentBrand.name
       brandInfo.brandAuthLogo = this.currentBrand.authLogo
+      brandInfo.statementFileName = this.statementFileName
       if (this.brandTagClickType === 'add') {
         // 设置唯一id
         brandInfo.uuid = ++uuid
@@ -473,20 +584,23 @@ export default {
       this.dialogAddBrand = false
     },
 
-    // 保存供应信息
-    saveShopInfo() {
-
-    },
     // 添加品牌对话框关闭
     handleDialogAddBrandClosed() {
+      this.subForm.securityLink = ''
+      this.subForm.statementType = 1
+      this.statementFileName = ''
       this.statementImageList = []
+      this.statementFileList = []
       this.brandAuthLogoList = []
       this.currentBrand = {}
       this.$refs.subFormRef.resetFields()
+      console.log(this.subForm)
     },
 
     // 声明类型切换
-    handleStatementChange() {},
+    handleStatementChange() {
+      this.$refs.statement.clearValidate()
+    },
     // 供应商类型改变事件
     handleTypeChange(type) {
       this.selectedShopType = type
@@ -496,15 +610,6 @@ export default {
       // this.selectedBrandIds = []
       this.currentBrand = {}
     },
-    // 添加排除品牌
-    addExcludeBrand(id) {
-
-    },
-    // 移除排除品牌
-    removeExcludeBrand(id) {
-
-    },
-
     // 获取品牌列表
     getBrandList(type) {
       fetchBrandList({ type }).then(res => {
@@ -535,10 +640,12 @@ export default {
     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 = ''
     },
 
     // 公众号二维码
@@ -561,25 +668,24 @@ export default {
       this.subForm.statementImage = ''
     },
 
-    /** 文件上传成功 */
-    fileUploadSuccess(data) {
-      this.subForm.statementFileName = data.data.fileName
-      this.subForm.statementFileId = data.data.fileId
-      if (data.code === 0) {
-        this.saveShopInfo()
-      }
-    },
-    fileUploadFaild(err, file, fileList) {
-      this.$message.error('文件上传失败')
-      console.log(err)
+    /** 声明文件上传 */
+    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()
+      })
     },
-    fileRemove() {
+    removeStatementFile({ file, fileList }) {
+      this.statementFileList = []
       this.subForm.statementFileId = null
-      console.log('删除文件')
     },
-    fileChange() {
-      console.log('文件改变')
-      this.$refs.statementFileRef.clearValidate()
+    changeStatementFile({ file, fileList }) {
+      this.statementFileList = fileList
+      this.subForm.statementFileId = -1
     }
   }
 }

src/views/admin/supplier/index.vue

@@ -60,7 +60,7 @@
       <el-table-column label="创建人" class-name="status-col" width="100px" prop="createBy" />
       <el-table-column label="操作" align="center" width="360" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
-          <el-button size="mini" type="primary" @click="$_navigationTo(`supplier-edit?id=${row.authUserId}`)">
+          <el-button size="mini" type="primary" @click="$_navigationTo(`supplier-edit?id=${row.authUserId}&type=edit`)">
             编辑
           </el-button>
           <el-button size="mini" type="primary" @click="handleProxy(row)">