修改声音选择，添加状态保存

Flex

2025-06-05 0a01d54bc1c4cc8d3a2c7aab5b90343b734c4049

修改声音选择，添加状态保存

 easegen-front/src/views/chooseTemplate/index.vue

@@ -540,6 +540,7 @@
                v-model="selectLanguage.value"
                placeholder="请选择语种"
                @change="LanguageChange"
                size="small"
              >
                <el-option
                  v-for="item in languageList"
@@ -551,7 +552,12 @@
            </div>
            <!-- 性别 -->
            <div>
              <el-select v-model="changeAudio" placeholder="请选择性别" @change="AudioChange()">
              <el-select
                v-model="changeAudio"
                placeholder="请选择性别"
                @change="AudioChange()"
                size="small"
              >
                <el-option
                  v-for="item in audioType"
                  :key="item.value"
@@ -566,6 +572,7 @@
                v-model="ChangeSoundTypeList.value"
                placeholder="请选择声音类型"
                @change="SoundTypeChange"
                size="small"
              >
                <el-option
                  v-for="item in SoundTypeList"
@@ -732,6 +739,7 @@
import { ElMessage, ElMessageBox } from 'element-plus'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
import { measureMemory } from 'vm'
import { any } from 'vue-types'

const editorHtml = useEditorHtml()
const router = useRouter()
@@ -986,16 +994,27 @@
    getList1()
  } else if (item.name == t('courseCenter.sound')) {
    // 声音的处理       selectAudio
    // 获取语言种类
    getLanguageList()
    //获取性别种类
    getAudioType()
    // 获取声音类别
    getVoiceType()
    // 获取模型列表
    getSoundModelList()
    // 获取可选的声音类型列表
    GetSoundTypeList()
    
    if (selectLanguage.value === undefined) {
      // 获取语言种类
      getLanguageList()
    }
    if (changeAudio.value === undefined) {
      //获取性别种类
      getAudioType()
    }
    if (activeSoundType.value === undefined) {
      // 获取声音类别
      getVoiceType()
    }
    if( selectList.value === undefined ){
      // 获取模型列表
      getSoundModelList()
    }
    if( ChangeSoundTypeList.value === undefined ){
      // 获取可选的声音类型列表
      GetSoundTypeList()
    }
  }
  showHeadImageTool.value = item.name === t('courseCenter.background')
  showTemplateTool.value = item.name === t('courseCenter.template')
@@ -1016,7 +1035,7 @@
// 可选的性别列表
const audioType = ref()
// 当前选择的性别
const changeAudio = ref<any>({ value: '' })
const changeAudio = ref<any>()
//获取性别字典
const getAudioType = () => {
  const list = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)
@@ -1030,7 +1049,7 @@
const ChangeSoundTypeList = ref()
// 获取可选的声音类型列表
const GetSoundTypeList = () => {
  const res = getIntDictOptions(DICT_TYPE.DIGITALCOURSE_VOICES_TYPE)
  const res = getIntDictOptions(DICT_TYPE.CHANGE_SOUND_TYPE_LIST)
  SoundTypeList.value = res
  ChangeSoundTypeList.value = { ...res[0] }
}
@@ -1038,7 +1057,7 @@
//可选的声音模型的声音类别列表
const SoundvoiceTypeList = ref()
// 当前选择的声音模型的声音类别
const activeSoundType = ref<any>({ value: '' })
const activeSoundType = ref<any>()
//获取的声音模型的声音类别
const getVoiceType = () => {
  const list1 = getIntDictOptions(DICT_TYPE.DIGITALCOURSE_VOICES_TYPE)
@@ -1114,11 +1133,20 @@
    }
  })
}
// 用于存贮用户选择的声音信息
const AudioDetail = ref({
  language: any, //语言
  sex: any, //性别
  type: any, //类型
  model: any //声音模型
})
// 确定按钮点击处理函数
const submitForm = () => {
  console.log(ChangeSoundTypeList.value.value)
  if (ChangeSoundTypeList.value.value === 2) {
    //此时为通用
    if (activeSoundType.value === 1 && selectList.value.length === 0) {
    console.log(selectList.value)
    if (selectList.value === undefined) {
      message.warning('请选择声音模型')
      return false
    }
@@ -1127,12 +1155,12 @@
  } else if (ChangeSoundTypeList.value.value === 1) {
    // 清除选中的音频
    selectList.value = null
    // 清除列表中所有选中状态
    if (audioList.value) {
      audioList.value.forEach((item) => {
        item.isSelect = false
      })
    }
    // // 清除列表中所有选中状态
    // if (audioList.value) {
    //   audioList.value.forEach((item) => {
    //     item.isSelect = false
    //   })
    // }

    // 停止当前播放的音频
    if (SoundcurrentAudio.value) {
@@ -1148,6 +1176,20 @@

    selectAudio(undefined)
  }
  // 记录用户选择的声音信息
  AudioDetail.value = {
    language: selectLanguage.value, //语言
    sex: changeAudio.value, //性别
    type: ChangeSoundTypeList.value, //类型
    model: selectList.value !== undefined ? selectList.value : '' //声音模型
  }

  SoundTool.value = false
  rightTools.forEach((child) => {
    if (child.name == '声音' || child.name == 'sound') {
      child.isActive = false
    }
  })
}
// 鼠标移入与移出
const handleMouseenter = (item) => {
@@ -1868,7 +1910,10 @@
    }
  } else {
    try {
      if (ChangeSoundTypeList.value?.value === undefined || selectLanguage.value?.value === undefined) {
      if (
        ChangeSoundTypeList.value?.value === undefined ||
        selectLanguage.value?.value === undefined
      ) {
        message.error('请先选择语种与声音类型')
        return
      }
@@ -1882,9 +1927,6 @@
      let warningStrArr = []
      for (let i = 0; i < PPTArr.value.length; i++) {
        const item = PPTArr.value[i]
        console.log(item)
        console.log('宽度', item.width)
        console.log('高度', item.height)
        // 校验背景宽高
        if (!item.width || !item.height) {
          message.warning('背景尺寸无效，请检查宽高设置，或者重新选择模板')
@@ -2807,15 +2849,20 @@

// 声音部分
.SoundArea {
  margin-top: 10px;
  margin-top: 16px;
  height: 100%;
  .SoundClassArea {
    width: 100%;
    display: flex;
    justify-content: space-around;
    justify-content: center;
    align-items: center;
    > div {
      width: 30%;
      width: 20%;
      margin: 0 8px;
      ::v-deep .el-select--small .el-select__wrapper {
        height: 28px;
        line-height: 28px;
      }
    }
  }
  .SoundModelArea {
@@ -2827,20 +2874,24 @@
    flex-wrap: wrap;
    align-content: flex-start;
    > .ModealBox {
      width: 30%;
      width: 47%;
      margin: 10px 1%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: relative;
      > .ImgBox {
        width: 70%;
        width: 26%;
        margin: 0 auto;
        img {
          width: 100%;
        }
      }
      > .TextArea {
        width: 100%;
        width: 48%;
        p {
          margin: 3px 0;
          font-size: 12px;
          margin: 4px 0;
          padding-left: 6px;
          box-sizing: border-box;
          text-align: left;