修复机构切换图片的问题

src/views/normal/club/components/ClubAuthorizeBrand.vue

@@ -39,11 +39,11 @@
         <el-input v-show="false" v-model="formData.authImageLogo" />
       </div>
     </el-form-item>
-    <el-form-item v-if="formData.authImageType !== 0" label="认证编号:" prop="authCode">
+    <el-form-item v-if="formData.authImageType === 1" label="认证编号:" prop="authCode">
       <el-input v-model="formData.authCode" placeholder="请输认证编号" clearable />
     </el-form-item>
 
-    <el-form-item v-if="formData.authImageType !== 0" label="认证日期:" prop="authDate">
+    <el-form-item v-if="formData.authImageType === 1" label="认证日期:" prop="authDate">
       <el-date-picker v-model="formData.authDate" type="date" placeholder="选择日期" style="width: 100%" />
     </el-form-item>
   </el-form>
@@ -85,7 +85,8 @@ export default {
         authImageLogoHeight: 100
       },
       // 授权牌模板标识
-      authTempFlag: false
+      authTempFlag: false,
+      initFormData: null
     }
   },
   computed: {
@@ -98,12 +99,25 @@ export default {
   watch: {
     'formData.authImageType': {
       handler(val) {
-        if (val === 0) {
+        if (val === 1) {
+          this.fetchAuthTempUsed()
+        } else if (val === 0) {
           this.formData.authCode = ''
           this.formData.authDate = ''
+          this.formData.authImageLogo = ''
           this.formData.authImage = ''
+        } else if (val === 2) {
+          this.formData.authCode = ''
+          this.formData.authDate = ''
           this.formData.authImageLogo = ''
-        } else {
+          this.fetchAuthTempUsed()
+        }
+        if (this.$route.query.isAdd === 'true') {
+          this.formData.authCode = ''
+          this.formData.authDate = ''
+          this.formData.authImageLogo = ''
+          this.formData.authImage = ''
+          this.authImageList = []
           this.fetchAuthTempUsed()
         }
       },
@@ -116,6 +130,7 @@ export default {
   methods: {
     // 初始化表单
     initForm(data) {
+      this.initFormData = data
       // 授权牌相关字段
       this.formData.authCode = data.authCode
       this.formData.authDate = data.authDate
@@ -125,7 +140,6 @@ export default {
       if (data.authImageLogo) {
         this.authImageLogoList = [{ name: '授权牌logo', url: data.authImageLogo }]
       }
-
       this.formData.authImage = data.authImage
       if (data.authImage) {
         this.authImageList = [{ name: '自定义授权牌', url: data.authImage }]
@@ -144,26 +158,96 @@ export default {
 
     // 获取当前机构可用授权牌模板
     async fetchAuthTempUsed() {
-      try {
-        const res = await authTempUsed({
-          authUserId: this.authUserId,
-          authFlag: 1,
-          status: 1
-        })
-        if (res.data) {
-          const [width, height] = res.data.logoSize.split(',')
-          this.validatorFields.authImageLogoWidth = width
-          this.validatorFields.authImageLogoHeight = height
-          this.authTempFlag = true
-          console.log(res.data)
-          // if (this.$route.query.isAdd === 'true') {
-          // }
-          // this.formData.authImage = res.data.templateImage
-        } else {
-          this.authTempFlag = false
+      if (this.$route.query.type === 'edit' && this.initFormData && this.initFormData.authImageType === 1) {
+        this.formData.authImage = this.initFormData.authImage
+        this.formData.authCode = this.initFormData.authCode
+        this.formData.authDate = this.initFormData.authDate
+        this.formData.authImageLogo = this.initFormData.authImageLogo
+        this.authImageList = []
+        if (this.initFormData.authImageLogo) {
+          this.authImageLogoList = [{ name: '授权牌logo', url: this.initFormData.authImageLogo }]
+        }
+        try {
+          const res = await authTempUsed({
+            authUserId: this.authUserId,
+            authFlag: 1,
+            status: 1
+          })
+          if (res.data) {
+            const [width, height] = res.data.logoSize.split(',')
+            this.validatorFields.authImageLogoWidth = width
+            this.validatorFields.authImageLogoHeight = height
+            this.authTempFlag = true
+            if (this.$route.query.isAdd === 'true') {
+              this.formData.authImage = res.data.templateImage
+            }
+          } else {
+            this.authTempFlag = false
+          }
+        } catch (error) {
+          console.log(error)
+        }
+      } else if (this.$route.query.type === 'edit' && this.initFormData && this.initFormData.authImageType === 0) {
+        try {
+          const res = await authTempUsed({
+            authUserId: this.authUserId,
+            authFlag: 1,
+            status: 1
+          })
+          if (res.data) {
+            const [width, height] = res.data.logoSize.split(',')
+            this.validatorFields.authImageLogoWidth = width
+            this.validatorFields.authImageLogoHeight = height
+            this.authTempFlag = true
+            this.formData.authImage = res.data.templateImage
+          } else {
+            this.authTempFlag = false
+          }
+        } catch (error) {
+          console.log(error)
+        }
+      } else if (this.$route.query.type === 'edit' && this.initFormData && this.initFormData.authImageType === 2) {
+        this.formData.authImage = this.initFormData.authImage
+        if (this.initFormData.authImage) {
+          this.authImageList = [{ name: '自定义授权牌', url: this.initFormData.authImage }]
+        }
+        try {
+          const res = await authTempUsed({
+            authUserId: this.authUserId,
+            authFlag: 1,
+            status: 1
+          })
+          if (res.data) {
+            const [width, height] = res.data.logoSize.split(',')
+            this.validatorFields.authImageLogoWidth = width
+            this.validatorFields.authImageLogoHeight = height
+            this.authTempFlag = true
+            this.formData.authImage = res.data.templateImage
+          } else {
+            this.authTempFlag = false
+          }
+        } catch (error) {
+          console.log(error)
+        }
+      } else {
+        try {
+          const res = await authTempUsed({
+            authUserId: this.authUserId,
+            authFlag: 1,
+            status: 1
+          })
+          if (res.data) {
+            const [width, height] = res.data.logoSize.split(',')
+            this.validatorFields.authImageLogoWidth = width
+            this.validatorFields.authImageLogoHeight = height
+            this.authTempFlag = true
+            this.formData.authImage = res.data.templateImage
+          } else {
+            this.authTempFlag = false
+          }
+        } catch (error) {
+          console.log(error)
         }
-      } catch (error) {
-        console.log(error)
       }
     },
 

src/views/normal/club/device/edit.vue

@@ -72,7 +72,7 @@
               <el-input v-show="false" v-model="formData.authImageLogo" />
             </div>
           </el-form-item>
-          <el-form-item v-if="formData.certificateImageType !== 0" label="认证日期:" prop="authDate">
+          <el-form-item v-if="formData.certificateImageType === 1" label="认证日期:" prop="authDate">
             <el-date-picker v-model="formData.authDate" type="date" placeholder="选择日期" style="width: 100%" />
           </el-form-item>
 
@@ -142,7 +142,8 @@ export default {
         authImageLogoWidth: 100,
         authImageLogoHeight: 100
       },
-      authImageLogoList: []
+      authImageLogoList: [],
+      initProductData: null
     }
   },
   computed: {
@@ -158,16 +159,23 @@ export default {
     'formData.certificateImageType': {
       handler(val) {
         if (val === 1) {
-          if (this.$route.query.isAdd === 'true') {
-            this.fetchAuthTempUsed()
-          } else {
-            this.fetchProductDetail()
-          }
-        } else {
+          this.fetchAuthTempUsed()
+        } else if (val === 0) {
           this.formData.certificateImage = ''
           this.formData.authDate = ''
+          this.formData.authImageLogo = ''
+        } else if (val === 2) {
+          this.formData.authDate = ''
+          this.formData.authImageLogo = ''
+          this.fetchAuthTempUsed()
+        }
+        if (this.$route.query.isAdd === 'true') {
+          this.formData.authDate = ''
+          this.formData.authImageLogo = ''
+          this.formData.certificateImage = ''
+          this.certificateImageList = []
+          this.fetchAuthTempUsed()
         }
-        console.log(this.formData)
       },
       deep: true
     }
@@ -181,8 +189,9 @@ export default {
     this.fetchProductCateList()
     if (this.editType === 'edit') {
       this.fetchProductDetail()
+    } else {
+      this.fetchAuthTempUsed()
     }
-    this.fetchAuthTempUsed()
   },
   methods: {
     // 提交
@@ -227,6 +236,7 @@ export default {
 
     // 初始化表单数据
     initFormData(data) {
+      this.initProductData = data
       for (const key in this.formData) {
         if (Object.hasOwnProperty.call(data, key)) {
           if (key === 'productTypeId') {
@@ -235,7 +245,6 @@ export default {
             this.formData[key] = data[key]
           }
         }
-
         this.formData.authImageLogo = data.authImageLogo
         if (data.authImageLogo) {
           this.authImageLogoList = [{ name: '授权牌logo', url: data.authImageLogo }]
@@ -261,22 +270,85 @@ export default {
 
     // 获取当前机构可用授权牌模板
     async fetchAuthTempUsed() {
-      try {
-        const res = await authTempUsed({
-          authUserId: this.authUserId,
-          authFlag: 1,
-          status: 1
-        })
-        this.authTempFlag = !!res.data.templateImage
-        console.log(this.authTempFlag)
-        if (this.$route.query.isAdd === 'true') {
+      if (this.initProductData && this.editType === 'edit' && this.initProductData.certificateImageType === 0) {
+        try {
+          const res = await authTempUsed({
+            authUserId: this.authUserId,
+            authFlag: 1,
+            status: 1
+          })
+          this.authTempFlag = !!res.data.templateImage
           this.formData.certificateImage = res.data.templateImage
+          const [width, height] = res.data.logoSize.split(',')
+          this.validatorFields.authImageLogoWidth = width
+          this.validatorFields.authImageLogoHeight = height
+        } catch (error) {
+          console.log(error)
+        }
+      } else if (this.initProductData && this.editType === 'edit' && this.initProductData.certificateImageType === 1) {
+        this.certificateImageList = []
+        this.formData.authCode = this.initProductData.authCode
+        this.formData.authDate = this.initProductData.authDate
+        this.formData.authImageLogo = this.initProductData.authImageLogo
+        this.formData.certificateImage = this.initProductData.certificateImage
+        if (this.initProductData.authImageLogo) {
+          this.authImageLogoList = [{ name: '授权牌logo', url: this.initProductData.authImageLogo }]
+        }
+        try {
+          const res = await authTempUsed({
+            authUserId: this.authUserId,
+            authFlag: 1,
+            status: 1
+          })
+          this.authTempFlag = !!res.data.templateImage
+          console.log(this.authTempFlag)
+          if (this.$route.query.isAdd === 'true') {
+            this.formData.certificateImage = res.data.templateImage
+          }
+          const [width, height] = res.data.logoSize.split(',')
+          this.validatorFields.authImageLogoWidth = width
+          this.validatorFields.authImageLogoHeight = height
+        } catch (error) {
+          console.log(error)
+        }
+      } else if (this.initProductData && this.editType === 'edit' && this.initProductData.certificateImageType === 2) {
+        this.formData.certificateImage = this.initProductData.certificateImage
+        if (this.initProductData.authImage) {
+          this.certificateImageList = [{ name: '自定义授权牌', url: this.initProductData.authImage }]
+        }
+        try {
+          const res = await authTempUsed({
+            authUserId: this.authUserId,
+            authFlag: 1,
+            status: 1
+          })
+          this.authTempFlag = !!res.data.templateImage
+          console.log(this.authTempFlag)
+          this.formData.certificateImage = res.data.templateImage
+          const [width, height] = res.data.logoSize.split(',')
+          this.validatorFields.authImageLogoWidth = width
+          this.validatorFields.authImageLogoHeight = height
+        } catch (error) {
+          console.log(error)
+        }
+      } else {
+        try {
+          const res = await authTempUsed({
+            authUserId: this.authUserId,
+            authFlag: 1,
+            status: 1
+          })
+          this.authTempFlag = !!res.data.templateImage
+          console.log(this.authTempFlag)
+          if (this.$route.query.isAdd === 'true') {
+            this.formData.certificateImage = res.data.templateImage
+          }
+          const [width, height] = res.data.logoSize.split(',')
+          this.validatorFields.authImageLogoWidth = width
+          this.validatorFields.authImageLogoHeight = height
+        } catch (error) {
+          console.log(error)
         }
-        const [width, height] = res.data.logoSize.split(',')
-        this.validatorFields.authImageLogoWidth = width
-        this.validatorFields.authImageLogoHeight = height
-      } catch (error) {
-        console.log(error)
       }
     },
 

src/views/normal/club/edit.vue

@@ -1,149 +1,149 @@
-<template>
-  <div class="club-edit page-form-container">
-    <el-tabs v-model="activeName">
-      <el-tab-pane label="基础资料" name="first">
-        <ClubBasicsInfo ref="ClubBasicsInfo" />
-      </el-tab-pane>
-      <el-tab-pane label="授权牌资料" name="second">
-        <ClubAuthorizeBrand ref="ClubAuthorizeBrand" />
-      </el-tab-pane>
-      <el-tab-pane label="机构关联" name="third">
-        <ClubAssociated ref="ClubAssociated" />
-      </el-tab-pane>
-      <el-tab-pane label="特殊属性" name="fourth">
-        <ClubSpecialInfo ref="ClubSpecialInfo" />
-      </el-tab-pane>
-    </el-tabs>
-
-    <!-- 表单提交 返回 -->
-    <div class="control-box">
-      <el-button type="primary" @click="submit">保存</el-button>
-      <el-button type="warning" @click="navigateBack">返回</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getAuthFormData, saveBrandAuth } from '@/api/auth'
-import { ClubAssociated, ClubBasicsInfo, ClubAuthorizeBrand, ClubSpecialInfo } from './components/index'
-import { formatDate } from '@/utils'
-import { mapGetters } from 'vuex'
-export default {
-  name: 'ClubEdit',
-  components: {
-    ClubAssociated,
-    ClubBasicsInfo,
-    ClubAuthorizeBrand,
-    ClubSpecialInfo
-  },
-  data() {
-    return {
-      editType: 'add',
-      authId: '',
-      activeName: 'first'
-    }
-  },
-  computed: {
-    ...mapGetters(['authUserId', 'proxyInfo'])
-  },
-  created() {
-    this.editType = this.$route.query.type || 'add'
-    this.authId = this.$route.query.id
-    this.initFormData()
-    this.fetchAuthTempUsed()
-  },
-  methods: {
-    // 提交表单数据
-    async submit() {
-      // 验证表单
-      const first = this.$refs.ClubBasicsInfo.validateForm()
-      const second = this.$refs.ClubAuthorizeBrand.validateForm()
-      const third = this.$refs.ClubAssociated.validateForm()
-      const fourth = this.$refs.ClubSpecialInfo.validateForm()
-      try {
-        const formData = {}
-        const result = await Promise.all([first, second, third, fourth])
-        console.log(result)
-        result.forEach((item) => Object.assign(formData, item))
-        this.save(formData)
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    // 保存表单数据
-    async save(formData) {
-      console.log(formData)
-      const params = Object.create(null)
-      const [provinceId, cityId, townId] = formData.address
-      params.authId = Number(this.authId)
-      params.authParty = formData.authParty
-      params.authUserId = this.authUserId
-      params.createBy = this.authUserId
-      params.provinceId = provinceId
-      params.cityId = cityId
-      params.townId = townId
-      params.address = formData.fullAddress
-      params.mobile = formData.mobile
-      params.logo = formData.logo
-      params.lngAndLat = formData.point
-      params.remarks = formData.remarks
-      params.customFlag = formData.customFlag
-      params.empNum = formData.empNum
-      params.firstClubType = formData.firstClubType
-      params.secondClubType = formData.secondClubType
-      params.medicalLicenseImage = formData.medicalLicenseImage
-      params.userMobile = formData.userMobile
-      params.authCode = formData.authCode
-      params.authDate = formData.authDate ? formatDate(formData.authDate, 'yyyy.MM.DD') : ''
-      params.authImageType = formData.authImageType
-      params.authImageLogo = formData.authImageLogo
-      params.authImage = formData.authImage
-      params.linkMan = formData.linkMan
-      params.linkMobile = formData.linkMobile
-      params.relationId = formData.selectAssClubListAll.map((item) => item.authId).join(',')
-      params.relationName = formData.selectAssClubListAll.map((item) => item.authParty).join(',')
-      params.bannerList = formData.bannerList.map((item) => (item.response ? item.response.data : item.url))
-      // 保存
-      try {
-        console.log(params)
-        await saveBrandAuth(params)
-        const h = this.$createElement
-        this.$notify.success({
-          title: `修改授权机构`,
-          message: h('i', { style: 'color: #333' }, `已修改授权机构："${params.authParty}"`),
-          duration: 3000
-        })
-        this.$store.dispatch('tagsView/delView', this.$route)
-        this.$router.push('/club/list')
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    // 初始化机构数据
-    initFormData() {
-      if (!this.authId) return
-      getAuthFormData({ authId: this.authId })
-        .then((res) => {
-          this.$refs.ClubBasicsInfo.initForm(res.data)
-          this.$refs.ClubAuthorizeBrand.initForm(res.data)
-          this.$refs.ClubAssociated.initForm(res.data)
-          this.$refs.ClubSpecialInfo.initForm(res.data)
-        })
-        .catch((error) => {
-          console.log(error)
-        })
-    },
-    // 获取授权牌模板
-    fetchAuthTempUsed() {}
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.el-tab-pane {
-  margin-top: 24px;
-}
-.page-form-container {
-  padding: 60px 0;
-}
-</style>
+<template>
+  <div class="club-edit page-form-container">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="基础资料" name="first">
+        <ClubBasicsInfo ref="ClubBasicsInfo" />
+      </el-tab-pane>
+      <el-tab-pane label="授权牌资料" name="second">
+        <ClubAuthorizeBrand ref="ClubAuthorizeBrand" />
+      </el-tab-pane>
+      <el-tab-pane label="机构关联" name="third">
+        <ClubAssociated ref="ClubAssociated" />
+      </el-tab-pane>
+      <el-tab-pane label="特殊属性" name="fourth">
+        <ClubSpecialInfo ref="ClubSpecialInfo" />
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 表单提交 返回 -->
+    <div class="control-box">
+      <el-button type="primary" @click="submit">保存</el-button>
+      <el-button type="warning" @click="navigateBack">返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAuthFormData, saveBrandAuth } from '@/api/auth'
+import { ClubAssociated, ClubBasicsInfo, ClubAuthorizeBrand, ClubSpecialInfo } from './components/index'
+import { formatDate } from '@/utils'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'ClubEdit',
+  components: {
+    ClubAssociated,
+    ClubBasicsInfo,
+    ClubAuthorizeBrand,
+    ClubSpecialInfo
+  },
+  data() {
+    return {
+      editType: 'add',
+      authId: '',
+      activeName: 'first'
+    }
+  },
+  computed: {
+    ...mapGetters(['authUserId', 'proxyInfo'])
+  },
+  created() {
+    this.editType = this.$route.query.type || 'add'
+    this.authId = this.$route.query.id
+    this.initFormData()
+    this.fetchAuthTempUsed()
+  },
+  methods: {
+    // 提交表单数据
+    async submit() {
+      // 验证表单
+      const first = this.$refs.ClubBasicsInfo.validateForm()
+      const second = this.$refs.ClubAuthorizeBrand.validateForm()
+      const third = this.$refs.ClubAssociated.validateForm()
+      const fourth = this.$refs.ClubSpecialInfo.validateForm()
+      try {
+        const formData = {}
+        const result = await Promise.all([first, second, third, fourth])
+        console.log(result)
+        result.forEach((item) => Object.assign(formData, item))
+        this.save(formData)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 保存表单数据
+    async save(formData) {
+      console.log(formData)
+      const params = Object.create(null)
+      const [provinceId, cityId, townId] = formData.address
+      params.authId = Number(this.authId)
+      params.authParty = formData.authParty
+      params.authUserId = this.authUserId
+      params.createBy = this.authUserId
+      params.provinceId = provinceId
+      params.cityId = cityId
+      params.townId = townId
+      params.address = formData.fullAddress
+      params.mobile = formData.mobile
+      params.logo = formData.logo
+      params.lngAndLat = formData.point
+      params.remarks = formData.remarks
+      params.customFlag = formData.customFlag
+      params.empNum = formData.empNum
+      params.firstClubType = formData.firstClubType
+      params.secondClubType = formData.secondClubType
+      params.medicalLicenseImage = formData.medicalLicenseImage
+      params.userMobile = formData.userMobile
+      params.authCode = formData.authCode
+      params.authDate = formData.authDate ? formatDate(formData.authDate, 'yyyy.MM.DD') : ''
+      params.authImageType = formData.authImageType
+      params.authImageLogo = formData.authImageLogo
+      params.authImage = formData.authImage
+      params.linkMan = formData.linkMan
+      params.linkMobile = formData.linkMobile
+      params.relationId = formData.selectAssClubListAll.map((item) => item.authId).join(',')
+      params.relationName = formData.selectAssClubListAll.map((item) => item.authParty).join(',')
+      params.bannerList = formData.bannerList.map((item) => (item.response ? item.response.data : item.url))
+      // 保存
+      try {
+        console.log(params)
+        await saveBrandAuth(params)
+        const h = this.$createElement
+        this.$notify.success({
+          title: `修改授权机构`,
+          message: h('i', { style: 'color: #333' }, `已修改授权机构："${params.authParty}"`),
+          duration: 3000
+        })
+        this.$store.dispatch('tagsView/delView', this.$route)
+        this.$router.push('/club/list')
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 初始化机构数据
+    initFormData() {
+      if (!this.authId) return
+      getAuthFormData({ authId: this.authId })
+        .then((res) => {
+          this.$refs.ClubBasicsInfo.initForm(res.data)
+          this.$refs.ClubAuthorizeBrand.initForm(res.data)
+          this.$refs.ClubAssociated.initForm(res.data)
+          this.$refs.ClubSpecialInfo.initForm(res.data)
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    // 获取授权牌模板
+    fetchAuthTempUsed() {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-tab-pane {
+  margin-top: 24px;
+}
+.page-form-container {
+  padding: 60px 0;
+}
+</style>