exhibition_service_admin/src/views/exhibitorManage/exhibitorSetting.vue

<script>
import Vue from 'vue'

import hugerte from 'hugerte'
import 'hugerte/models/dom'
import 'hugerte/icons/default'
import 'hugerte/themes/silver'
import 'hugerte/skins/ui/oxide/skin.js'
import 'hugerte/skins/ui/oxide/content.js'
import 'hugerte/skins/content/default/content.js'
import 'hugerte/plugins/autoresize'

import { saveExpo, getMyExpoInfo } from '@/api/expo'
import { getFormList} from '@/api/form'
import { getTemplateList } from '@/api/template'
import { upload } from '@/api/system'
export default Vue.extend({
  name: 'ExhibitorSetting',
  data() {
    return {
      exhibitorSetting: {
        id: '',
        expo_name: '',
        start_date: '',
        end_date: '',
        location: '',
        organizer: '',
        contact_phone: '',
        contact_email: '',
        content: '',
        logo: '/common/2025/0915/68c7b25cc9e26.webp',
        images: ['/common/2025/0915/68c7b263bc4b1.webp'],
        social_links: {
          facebook: ''
        },
        form_template_id: '',
        urla: '',
        seo_title: '',
        seo_description: '',
        seo_keywords: '',
        invitation_price: 0,
        invitation_template_ids: [],
        show_official_footer: 1
      },
      isShowMore: false,
      formList: [],
      templateList: [],
      loading: false,
      ossUrl: process.env.VUE_APP_OSS_DOMAIN
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (this.$route.params.id) {
        this.loading = true
        this.exhibitorSetting.id = this.$route.params.id
        getMyExpoInfo(this.exhibitorSetting.id).then(res => {
          this.exhibitorSetting = res.data
          this.exhibitorSetting.images = JSON.parse(this.exhibitorSetting.images)
          this.exhibitorSetting.social_links = JSON.parse(this.exhibitorSetting.social_links)
          this.initEditor()
          this.loading = false
        }).catch(err => {
          this.$notify({
            title: '提示',
            message: '获取被展会数据失败：' + err,
            type: 'error'
          })
          this.loading = false
        })
      } else if (this.$route.query.copy) {
        this.loading = true
        getMyExpoInfo(this.$route.query.copy).then(res => {
          this.exhibitorSetting = res.data
          this.exhibitorSetting.images = JSON.parse(this.exhibitorSetting.images)
          this.exhibitorSetting.social_links = JSON.parse(this.exhibitorSetting.social_links)
          this.exhibitorSetting.id = ''
          this.initEditor()
          this.loading = false
        }).catch(err => {
          this.$notify({
            title: '提示',
            message: '获取被复制展会数据失败：' + err,
            type: 'error'
          })
          this.loading = false
        })
      } else {
        this.initEditor()
      }
      getTemplateList(1, 1000).then(res => {
        this.templateList = res.data.data
      })
      getFormList(1, 1000).then(res => {
        this.formList = res.data.data
      }).catch(err => {
        this.$notify({
          title: '提示',
          message: '获取预登记表单数据失败：' + err,
          type: 'error'
        })
      })
    },
    initEditor() {
      hugerte.PluginManager.add('insertImage', (editor) => {
        editor.ui.registry.addButton('insertImage', {
          icon: 'image',
          onAction: () => {
            const input = document.createElement('input')
            input.setAttribute('type', 'file')
            input.setAttribute('accept', 'image/*')
            input.onchange = () => {
              upload(input.files[0]).then(res => {
                const image = this.ossUrl + res.data.file
                editor.insertContent(`<img src="${image}" />`)
              })
            }
            input.click()
          }
        })
      })
      hugerte.remove()
      hugerte.init({
        selector: '#expoManangeEditor',
        skin_url: 'default',
        content_css: 'default',
        inline: true,
        statusbar: false,
        plugins: 'insertImage',
        placeholder: '请输入展会介绍',
        toolbar: [
          'undo redo | bold italic underline | fontsize',
          'forecolor backcolor | alignleft aligncenter alignright | insertImage'
        ],
        font_size_formats: '0.7em 0.8em 0.9em 1em 1.1em 1.2em 1.3em 1.4em 1.5em 1.6em 1.7em 1.8em',
        menubar: false,
        height: '100%',
        width: '100%',
        setup: editor => {
          console.log(editor)
          editor.on('init', () => {
            editor.setContent(this.exhibitorSetting.content)
          })
          editor.on('change', () => {
            this.exhibitorSetting.content = editor.getContent()
          })
        }
      })
    },
    uploadImage(event, type) {
      this.loading = true
      upload(event.target.files[0]).then(res => {
        if (type === 'logo') {
          this.exhibitorSetting.logo = res.data.file
        }
        if (type === 'cover') {
          this.exhibitorSetting.images[0] = res.data.file
          this.exhibitorSetting.images.push()
        }
        this.loading = false
      }).catch(err => {
        this.loading = false
        this.$notify({
          title: '提示',
          message: '图片上传失败：' + err,
          type: 'error'
        })
      })
    },
    save() {
      if (
        this.exhibitorSetting.expo_name === '' ||
        this.exhibitorSetting.start_date === '' ||
        this.exhibitorSetting.end_date === '' ||
        this.exhibitorSetting.location === '' ||
        this.exhibitorSetting.organizer === '' ||
        this.exhibitorSetting.contact_phone === '' ||
        this.exhibitorSetting.contact_email === ''
      ) {
        this.$notify({
          title: '提示',
          message: '请将展会数据填写完整',
          type: 'warning'
        })
        return
      }
      if (this.loading) {
        return
      }
      if (this.exhibitorSetting.urla === '') {
        this.exhibitorSetting.urla = this.exhibitorSetting.expo_name
      }
      this.loading = true
      saveExpo(
        this.exhibitorSetting.id,
        this.exhibitorSetting.expo_name,
        this.exhibitorSetting.start_date,
        this.exhibitorSetting.end_date,
        this.exhibitorSetting.location,
        this.exhibitorSetting.organizer,
        this.exhibitorSetting.contact_phone,
        this.exhibitorSetting.contact_email,
        this.exhibitorSetting.content,
        this.exhibitorSetting.logo,
        this.exhibitorSetting.images,
        this.exhibitorSetting.social_links,
        this.exhibitorSetting.form_template_id,
        this.exhibitorSetting.page_template_id,
        this.exhibitorSetting.urla,
        this.exhibitorSetting.show_official_footer,
        this.exhibitorSetting.seo_title,
        this.exhibitorSetting.seo_description,
        this.exhibitorSetting.seo_keywords,
        this.exhibitorSetting.invitation_price,
        this.exhibitorSetting.invitation_template_ids
      ).then(res => {
        this.$notify({
          title: '提示',
          message: '展会保存成功',
          type: 'success'
        })
        this.loading = false
        this.$router.push('/exhibitor/list')
      }).catch(err => {
        this.loading = false
        this.$notify({
          title: '提示',
          message: '保存展会失败：' + err,
          type: 'error'
        })
      })
    },
    canAddSocialShow() {
      if (this.exhibitorSetting.social_links.facebook === undefined ||
          this.exhibitorSetting.social_links.twitter === undefined ||
          this.exhibitorSetting.social_links.linkedin === undefined) {
        return true
      } else {
        return false
      }
    },
    removeSocial(key) {
      delete this.exhibitorSetting.social_links[key]
      this.exhibitorSetting.social_links = { ...this.exhibitorSetting.social_links }
    },
    addSocial() {
      console.log(this.exhibitorSetting.social_links)
      if (this.exhibitorSetting.social_links.facebook === undefined) {
        this.exhibitorSetting.social_links.facebook = ''
        this.exhibitorSetting.social_links = { ...this.exhibitorSetting.social_links }
        return
      }
      if (this.exhibitorSetting.social_links.twitter === undefined) {
        this.exhibitorSetting.social_links.twitter = ''
        this.exhibitorSetting.social_links = { ...this.exhibitorSetting.social_links }
        return
      }
      if (this.exhibitorSetting.social_links.linkedin === undefined) {
        this.exhibitorSetting.social_links.linkedin = ''
        this.exhibitorSetting.social_links = { ...this.exhibitorSetting.social_links }
        return
      }
    },
    socialInput(key, value) {
      this.exhibitorSetting.social_links[key] = value
    },
    changeSocialType(oldType, type) {
      console.log(oldType, type)
      this.exhibitorSetting.social_links[type] = this.exhibitorSetting.social_links[oldType]
      delete this.exhibitorSetting.social_links[oldType]
      this.exhibitorSetting.social_links = { ...this.exhibitorSetting.social_links }
    }
  }
})
</script>

<template>
  <div v-loading="loading" class="main-box">
    <div class="save">
      <el-button v-permission="'exhibitor.save'" type="primary" @click="save">{{ exhibitorSetting.id?'保存修改':'新建展商' }}</el-button>
    </div>
    <div class="info">
      <div class="scroll">
        <div class="form-item required">
          <div class="label">展会名称 </div>
          <el-input v-model="exhibitorSetting.expo_name" class="input" placeholder="请输入展会名称" />
        </div>
        <div class="form-item required">
          <div class="label">展会时间</div>
          <div class="time-cont">
            <el-date-picker
              v-model="exhibitorSetting.start_date"
              type="date"
              placeholder="开始时间"
              value-format="yyyy-MM-dd"
              style="width: 100%;"
            />
            <el-date-picker
              v-model="exhibitorSetting.end_date"
              type="date"
              placeholder="结束时间"
              value-format="yyyy-MM-dd"
              style="width: 100%;"
            />
          </div>
        </div>
        <div class="form-item required">
          <div class="label">展会地点</div>
          <el-input v-model="exhibitorSetting.location" class="input" placeholder="请输入展会地点" />
        </div>
        <div class="form-item required">
          <div class="label">主办单位</div>
          <el-input v-model="exhibitorSetting.organizer" class="input" placeholder="请输入主办单位" />
        </div>
        <div class="form-item required">
          <div class="label">联系电话</div>
          <el-input v-model="exhibitorSetting.contact_phone" class="input" placeholder="请输入联系电话" />
        </div>
        <div class="form-item required">
          <div class="label">联系邮箱</div>
          <el-input v-model="exhibitorSetting.contact_email" class="input" placeholder="请输入联系邮箱" />
        </div>
        <div class="form-item">
          <div class="label">社交账号</div>
          <div class="social-list">
            <div v-for="(value,key) in exhibitorSetting.social_links" class="social-item">
              <el-input :value="value" :placeholder="'请输入'+key+'主页地址'" @input="socialInput(key,$event)">
                <el-select slot="prepend" :value="key" @change="changeSocialType(key,$event)">
                  <el-option :disabled="exhibitorSetting.social_links.facebook!==undefined" value="facebook" label="facebook" />
                  <el-option :disabled="exhibitorSetting.social_links.twitter!==undefined" value="twitter" label="twitter" />
                  <el-option :disabled="exhibitorSetting.social_links.linkedin!==undefined" value="linkedin" label="linkedin" />
                </el-select>
                <el-button slot="append" icon="el-icon-delete" @click="removeSocial(key)" />
              </el-input>
            </div>
            <el-button v-if="canAddSocialShow()" type="primary" class="add-social el-icon-plus" @click="addSocial()">添加</el-button>
          </div>
        </div>
        <div class="form-item">
          <div class="label">表单模板</div>
          <el-select v-model="exhibitorSetting.form_template_id">
            <el-option v-for="item in formList" :key="item.id" :value="item.id" :label="item.template_name" />
          </el-select>
        </div>
        <div class="form-item">
          <div class="label">邀请函模板</div>
          <el-select v-model="exhibitorSetting.invitation_template_ids" multiple >
            <el-option v-for="item in templateList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </div>
        <div class="form-item">
          <div class="label">邀请函费用</div>
          <el-input v-model="exhibitorSetting.invitation_price" placeholder="请输入邀请函费用" />
        </div>
        <div v-permission="'exhibitor.copyright'" class="form-item required">
          <div class="label">表单底部显示系统信息</div>
          <el-switch v-model="exhibitorSetting.show_official_footer" :active-value="1" :inactive-value="0" class="input" />
        </div>
        <div class="form-item">
          <div class="label">高级设置</div>
          <el-switch v-model="isShowMore" />
        </div>
        <template v-if="isShowMore">
          <div class="form-item required">
            <div class="label">url短名称</div>
            <el-input v-model="exhibitorSetting.urla" class="input" placeholder="请输入url" />
          </div>
          <div class="form-item">
            <div class="label">SEO标题</div>
            <el-input v-model="exhibitorSetting.seo_title" class="input" placeholder="请输入SEO标题" />
          </div>
          <div class="form-item">
            <div class="label">SEO关键字</div>
            <el-input v-model="exhibitorSetting.seo_keywords" class="input" placeholder="请输入SEO关键字" />
          </div>
          <div class="form-item">
            <div class="label">SEO描述</div>
            <el-input v-model="exhibitorSetting.seo_description" class="input" placeholder="请输入SEO描述" />
          </div>
        </template>
      </div>
    </div>
    <div class="desc">
      <div class="scroll">
        <div class="vision-cont">
          <img :src="ossUrl + exhibitorSetting.images[0]" alt="" class="image loading">
          <div class="avatar-name">
            <img :src="ossUrl + exhibitorSetting.logo" alt="" class="avatar loading">
            <div>
              <div class="name">
                {{ exhibitorSetting.expo_name||'示例展会名称' }}
              </div>
              <div class="exhibitor">
                {{ exhibitorSetting.organizer||'示例主办方名称' }}
              </div>
            </div>
            <div class="avatar-upload">
              <div class="upload-icon">
                <span class="el-icon-upload icon" />
                <span class="text">上传logo</span>
              </div>
              <input type="file" class="uploader" @change="uploadImage($event,'logo')">
            </div>
          </div>
          <div class="cover-upload">
            <div class="upload-icon">
              <span class="el-icon-upload icon" />
              <span class="text">上传主视觉图</span>
            </div>
            <input type="file" class="uploader" @change="uploadImage($event,'cover')">
          </div>
        </div>
        <div class="text-area">
          <div id="expoManangeEditor" />
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .main-box{
    height: 100%;
    width: 100%;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    .save{
      display: flex;
      justify-content: flex-end;
      grid-column: span 2;
    }
    .info{
      position: relative;
      height: 100%;
      width: 100%;
      .scroll{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
        overflow-y: auto;
      }
      .form-item{
        margin: 16px 0;
        .el-select{
          width: 100%;
        }
        .label{
          margin-bottom: 8px;
        }
        .social-list{
          margin-bottom: 12px;
          display: flex;
          flex-direction: column;
          grid-gap: 8px;
          .add-social{
            margin-left: auto;
            width: fit-content;
          }
          .social-item{
            position: relative;
            margin-bottom: 6px;
            .el-select{
              width: 120px;
            }
          }
        }
        .time-cont{
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-gap: 16px;
        }
        &.required{
          .label::after{
            content: '*';
            color: red;
            margin-left: 4px;
          }
        }
      }
    }
    .desc{
      height: 100%;
      width: 100%;
      position: relative;
      #expoManangeEditor{
        outline: 2px dashed lightgray;
      }
      .scroll{
        padding: 8px;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
        overflow-y: auto;
      }
      .text-area{
        width: 100%;
        margin-top: 24px;
        .mce-content-body{
          min-height: 200px;
        }
      }
      .vision-cont{
        position: relative;
        box-shadow: 0 0 8px 0 #00000022;
        overflow: hidden;
        width: 100%;
        border-radius: 16px;
        transition-duration: 300ms;
        &:hover{
          transform: translateY(-2px);
          box-shadow: 0 2px 12px 0 #00000022;
        }
        .cover-upload{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          aspect-ratio: 2.4;
          .upload-icon{
            overflow: hidden;
            transition-duration: 300ms;
            opacity: 0;
            color: gray;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(0px);
            .icon{
              font-size: 48px;
            }
          }
          &:hover{
            .upload-icon{
              backdrop-filter: blur(8px);
              opacity: 1;
            }
          }
          .uploader{
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
        .avatar-name{
          position: relative;
          padding: 24px;
          display: grid;
          grid-template-columns: auto 1fr;
          align-items: center;
          grid-gap: 24px;
          .avatar-upload{
            position: absolute;
            top: 24px;
            left: 24px;
            width: 80px;
            height: 80px;
            .upload-icon{
              border-radius: 50%;
              transition-duration: 300ms;
              opacity: 0;
              color: gray;
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .icon{
                margin-top: -8px;
                font-size: 32px;
              }
              .text{
                line-height: 1;
                font-size: 12px;
              }
            }
            &:hover{
              .upload-icon{
                backdrop-filter: blur(8px);
                opacity: 1;
              }
            }
            .uploader{
              opacity: 0;
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
            }
          }
          .avatar{
            width: 80px;
            height: 80px;
            border-radius: 50%;
          }
          .name{
            font-size: 24px;
            font-weight: bold;
          }
          .exhibitor{
            color: gray;
          }
        }
        .image{
          object-fit: cover;
          width: 100%;
          aspect-ratio: 2.4;
        }
      }
    }
  }
</style>