xiaozhi-esp32-server/main/manager-web/src/components/VoiceResourceDialog.vue

<template>
  <CustomDialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="600px"
    @close="handleClose"
    @open="handleOpen"
    @cancel="handleCancel"
    @confirm="handleSubmit"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="auto">
      <el-form-item :label="$t('voiceClone.platformName')" prop="modelId">
        <el-select v-model="form.modelId" :placeholder="$t('voiceClone.platformNamePlaceholder')" filterable
          style="width: 100%" @change="handlePlatformChange">
          <el-option v-for="model in platformList" :key="model.id" :label="model.modelName" :value="model.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('voiceClone.voiceId')" prop="voiceIds">
        <el-select v-model="form.voiceIds" :placeholder="$t('voiceClone.voiceIdPlaceholder')" filterable multiple
          allow-create default-first-option style="width: 100%">
          <el-option v-for="voiceId in voiceIdList" :key="voiceId" :label="voiceId" :value="voiceId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('voiceClone.userId')" prop="userId">
        <el-select v-model="form.userId" :placeholder="$t('voiceClone.userIdPlaceholder')" filterable remote
          :remote-method="remoteSearchUser" :loading="userLoading" style="width: 100%">
          <el-option v-for="user in userList" :key="user.userid" :label="user.mobile" :value="user.userid">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('voiceClone.languages')" prop="languages">
        <el-input v-model="form.languages" :placeholder="$t('voiceClone.languagesPlaceholder')" style="width: 100%">
        </el-input>
      </el-form-item>
    </el-form>
  </CustomDialog>
</template>

<script>
import Api from '@/apis/api';
import CustomDialog from './CustomDialog.vue';

export default {
  name: 'VoiceCloneDialog',
  components: { CustomDialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    form: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      dialogVisible: this.visible,
      platformList: [],
      voiceIdList: [],
      userList: [],
      userLoading: false,
      rules: {
        modelId: [
          { required: true, message: this.$t('voiceClone.platformNameRequired'), trigger: 'change' }
        ],
        voiceIds: [
          { required: true, message: this.$t('voiceClone.voiceIdRequired'), trigger: 'change' }
        ],
        userId: [
          { required: true, message: this.$t('voiceClone.userIdRequired'), trigger: 'change' }
        ],
        languages: [
          { required: true, message: this.$t('voiceClone.languagesRequired'), trigger: 'blur' }
        ]
      }
    }
  },

  watch: {
    visible(val) {
      this.dialogVisible = val;
    },
    dialogVisible(val) {
      this.$emit('update:visible', val);
    }
  },

  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$emit('cancel');
    },

    handleCancel() {
      this.$refs.form.clearValidate();
      this.$emit('cancel');
    },

    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', this.form);
        }
      });
    },

    handleOpen() {
      // 对话框打开时加载平台列表
      this.fetchPlatformList();
      // 重置音色ID列表
      this.voiceIdList = [];
    },

    handlePlatformChange(modelId) {
      // 清空音色ID选择
      this.form.voiceIds = [];
    },

    // 获取TTS平台列表
    fetchPlatformList() {
      Api.voiceResource.getTtsPlatformList((res) => {
        if (res.data.code === 0) {
          this.platformList = res.data.data;
        }
      });
    },

    // 远程搜索用户
    remoteSearchUser(query) {
      if (query !== '') {
        this.userLoading = true;
        const params = {
          page: 1,
          limit: 20,
          mobile: query
        };
        Api.admin.getUserList(params, (res) => {
          this.userLoading = false;
          if (res.data.code === 0) {
            this.userList = res.data.data.list;
          }
        });
      } else {
        this.userList = [];
      }
    }
  }
}
</script>