caimei-authentic-manager/src/views/normal/club/edit.vue

<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.authImageType === 0 ? '' : 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;
}
::v-deep .el-tabs__item {
  font-size: 20px;
  font-weight: bold;
  color: #82848a;
}
::v-deep .el-tabs__item.is-active {
  color: #1890ff;
}
</style>