mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-22 23:23:55 +08:00
144 lines
3.7 KiB
Vue
144 lines
3.7 KiB
Vue
<template>
|
|
<el-dialog :visible.sync="dialogVisible" width="700px" @close="handleClose" class="compact-dialog" :append-to-body="true">
|
|
<el-form :model="voiceForm" :rules="rules" ref="voiceForm" label-width="80px">
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="音色编码" prop="voiceCode">
|
|
<el-input v-model="voiceForm.voiceCode" placeholder="请输入内容" class="compact-input"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="音色名称" prop="voiceName">
|
|
<el-input v-model="voiceForm.voiceName" placeholder="请输入内容" class="compact-input"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<el-form-item label="语言类型" prop="languageType">
|
|
<el-input v-model="voiceForm.languageType" placeholder="请输入内容" class="compact-input"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="排序号" prop="sortNumber">
|
|
<el-input-number v-model="voiceForm.sortNumber" :min="1" :controls="false" class="compact-number"></el-input-number>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-form-item label="备注" prop="remark">
|
|
<el-input v-model="voiceForm.remark" type="textarea" :rows="2" placeholder="请输入内容" class="compact-textarea"
|
|
></el-input>
|
|
<div class="audio-controls">
|
|
<span class="counter">000 / 001</span>
|
|
<el-button type="primary" size="mini" class="preview-btn">生成试听</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="handleSave">保存</el-button>
|
|
<el-button type="primary" @click="handleClose">关闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'EditVoiceDialog',
|
|
props: {
|
|
showDialog: Boolean,
|
|
voiceData: {
|
|
type: Object,
|
|
default: () => ({
|
|
voiceCode: 'wawaxiaohe',
|
|
voiceName: '湾湾小何',
|
|
languageType: '中文',
|
|
sortNumber: 123
|
|
})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dialogVisible: this.showDialog,
|
|
voiceForm: { ...this.voiceData },
|
|
rules: {
|
|
voiceCode: [{ required: true, message: '请输入音色编码', trigger: 'blur' }],
|
|
voiceName: [{ required: true, message: '请输入音色名称', trigger: 'blur' }]
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
showDialog(newVal) {
|
|
this.dialogVisible = newVal
|
|
if (newVal) this.voiceForm = { ...this.voiceData }
|
|
}
|
|
},
|
|
methods: {
|
|
handleClose() {
|
|
this.dialogVisible = false
|
|
this.$emit('update:showDialog', false)
|
|
},
|
|
handleSave() {
|
|
this.$refs.voiceForm.validate(valid => {
|
|
if (valid) this.$emit('save', this.voiceForm)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.compact-dialog {
|
|
/deep/ .el-dialog__body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.compact-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.compact-number {
|
|
width: 100%;
|
|
/deep/ .el-input__inner {
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
|
|
.compact-textarea {
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.audio-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 8px;
|
|
|
|
.counter {
|
|
color: #909399;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.preview-btn {
|
|
padding: 7px 15px;
|
|
}
|
|
}
|
|
|
|
.dialog-footer {
|
|
padding: 16px 20px 0;
|
|
text-align: right;
|
|
border-top: 1px solid #EBEEF5;
|
|
|
|
.el-button {
|
|
min-width: 80px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|