生成音频资源

src/api/audioResources.js

@@ -47,3 +47,11 @@ export function uploadAudio(file) {
         upload: true
     });
 }
+// 生成音频文件
+export function generateAudio(data) {
+    return request({
+        url: `/api/audioResources/generate`,
+        method: 'post',
+        data
+    });
+}

src/views/fileManage/voiceManage/generate.vue

@@ -0,0 +1,148 @@
+<template>
+  <el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="580px" :before-close="handleClose" center :close-on-click-modal="false">
+    <el-form ref="ruleForm" :model="formModel" :rules="rules" label-width="60px">
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="formModel.name" />
+      </el-form-item>
+      <el-form-item label="描述" prop="desc">
+        <el-input v-model="formModel.desc" />
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button v-loading="loading" type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
+      <el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { generateAudio } from '@/api/audioResources';
+export default {
+    name: 'Generate',
+    data() {
+        return {
+            replaceList: [],
+            dialogVisible: false,
+            formModel: {
+                id: '',
+                name: '',
+                desc: ''
+            },
+            loading: false
+        };
+    },
+    computed: {
+        rules() {
+            const crules = {
+                name: [
+                    { required: true, message: '请输入音频资源名称', trigger: 'blur' }
+                ],
+                desc: [
+                    { required: true, message: '请输入音频资源描述', trigger: 'blur' }
+                ]
+            };
+            return crules;
+        },
+        title() {
+            return '生成音频资源';
+        }
+    },
+    mounted() {
+    },
+    methods: {
+        handleRemove() {
+            this.formModel.url = '';
+        },
+
+        show() {
+            this.dialogVisible = true;
+            this.$nextTick(() => {
+                this.$refs.ruleForm.resetFields();
+            });
+        },
+        doSave() {
+            this.$refs.ruleForm.validate((valid) => {
+                if (valid) {
+                    this.loading = true;
+                    const data = {
+                        id: this.formModel.id,
+                        name: this.formModel.name,
+                        desc: this.formModel.desc
+                    };
+                    generateAudio(data).then(resp => {
+                        this.$message.success('生成音频资源数据成功！');
+                        this.handleClose();
+                        this.$emit('reloadTable');
+                    }).catch(error => {
+                        this.$message.error(error.message);
+                        this.loading = false;
+                    });
+                }
+            });
+        },
+        handleClose() {
+            this.formModel = {
+                id: '',
+                name: '',
+                desc: ''
+            };
+            this.$refs.ruleForm.resetFields();
+            this.dialogVisible = false;
+            this.loading = false;
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.chat-box-footer-create{
+	font-size: 16px;
+	text-align: center;
+	color: #fff;
+	position: relative;
+	left: 5px;
+	top: 6px;
+	line-height: 30px;
+	cursor: pointer;
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	background: green;
+	border: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.chat-box-footer-send{
+	background: #F2F2F2;
+	right: 55px;
+	cursor: pointer;
+	.icon-yuyin{
+		color: #333;
+		font-size: 24px;
+		margin: 0;
+	}
+	&.active{
+		.icon-yuyin{
+			color: green;
+		}
+	}
+	.close_icon{
+		position: absolute;
+		top: 8px;
+		left: 45px;
+		font-size: 16px;
+		color: #333;
+		font-weight: 600;
+		padding: 3px;
+	}
+}
+#record_progress_bar{
+	width: 40px;
+	height: 40px;
+	position: absolute;
+	left: 0;
+	top: 0;
+	border-radius: 50%;
+}
+</style>

src/views/fileManage/voiceManage/index.vue

@@ -2,15 +2,18 @@
   <div>
     <QueryListPage ref="queryListPage" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
     <add-voice ref="addVoice" @reloadTable="reloadTable" />
+    <generate-voice ref="generateVoice" @reloadTable="reloadTable" />
   </div>
 </template>
 
 <script>
 import { pagedAudioResources, deleteAudioResources } from '@/api/audioResources';
 import AddVoice from './add';
+import GenerateVoice from './generate';
 export default {
     name: 'DeviceManage',
     components: {
+        GenerateVoice,
         AddVoice
     },
     data() {
@@ -77,7 +80,8 @@ export default {
                     }
                 ],
                 actions: [
-                    { text: this.$t('global.add'), handler: this.createAudioResources}
+                    { text: this.$t('global.add'), handler: this.createAudioResources},
+                    { text: '生成', handler: this.generateAudioResources }
                 ]
             },
             currentModel: {}
@@ -120,6 +124,9 @@ export default {
         createAudioResources() {
             this.$refs.addVoice.show();
         },
+        generateAudioResources() {
+            this.$refs.generateVoice.show();
+        },
         editConfig(index, row) {
             this.$refs.addVoice.show(row);
         },