Merge branch 'master' of http://192.168.0.115:3000/tangning/SichuanDaily

src/styles/index.sass

@@ -11,7 +11,9 @@ pointerNo
 pointer
   pointer-events: auto
 
-
+.n-popover__content
+  max-height: 350px
+  overflow-y: scroll
 :root
   //.n-layout-header, .n-layout-sider, .n-drawer
   //  --n-color: rgba(0, 21, 41, 0.6)

src/views/textToaudio/index.vue

@@ -5,7 +5,7 @@
       <div class="bottomList">
         <n-space>
           <n-button type="primary" @click="handleAddTTS"> 文转音</n-button>
-          <n-button type="primary" @click="showSTTModel.show = true">
+          <n-button type="primary" @click="showSTTModel.show = true, showSTTModel.data = {}">
             音转文
           </n-button>
         </n-space>
@@ -15,6 +15,8 @@
     <!-- <n-scrollbar style="max-height: calc(100vh - 100px)" trigger="none"> -->
     <n-data-table
       pagination-behavior-on-filter="first"
+      max-height="calc(100vh - 288px)"
+      :virtual-scroll="true"
       :columns="columns"
       :data="data"
       :pagination="paginationReactive"
@@ -89,13 +91,19 @@ const refresh = async () => {
   console.warn('refresh')
   const res = await fetchTtsList(main.sceneCode)
   console.log('data', res)
-  data.value = res as never as TTSItem[]
+  let list = res as TTSItem[]
+  data.value = list.map((item,index) => {
+    return {
+      ...item,
+      no: index + 1
+    }
+  })
 }
 
 const columns = [
   {
     title: '序号',
-    key: 'id',
+    key: 'no',
     width: 70
   },
   {
@@ -121,7 +129,7 @@ const columns = [
         NTooltip,
         { trigger: 'hover', placement: 'top', style: { maxWidth: '500px' } },
         {
-          trigger: () => h('span', row.document.slice(0, 100) + '...'),
+          trigger: () => h('span', row && row.document.slice(0, 100) + '...'),
           default: () => h('span', row.document)
         }
       )
@@ -193,6 +201,8 @@ const columns = [
 
 const handleAddTTS = () => {
   showTTSModel.value.show = true
+  showTTSModel.value.data = {}
+
 }
 
 const handleDelTTS = (id: number) => {

src/views/textToaudio/sttModel.vue

@@ -27,6 +27,7 @@
       <n-form
         ref="formRef"
         :model="form"
+        :rules="rules"
         label-placement="left"
         label-width="auto"
         require-mark-placement="right-hanging"
@@ -34,7 +35,7 @@
           maxWidth: '100%'
         }"
       >
-        <n-form-item label="名称" path="inputValue">
+        <n-form-item label="名称" path="name">
           <n-input v-model:value="form.name" />
         </n-form-item>
       </n-form>
@@ -62,7 +63,9 @@
 
       <template #footer>
         <n-flex justify="end">
-          <n-button type="primary" @click="handleSave">提交并转写</n-button>
+          <n-button type="primary" :loading="loading" @click="handleSave"
+            >提交并转写</n-button
+          >
         </n-flex>
       </template>
     </n-card>
@@ -84,18 +87,27 @@ import { saveTOSTT } from '@/api'
 import { useMainStore } from '@/store'
 import { ArchiveOutline as ArchiveIcon } from '@vicons/ionicons5'
 import type { UploadFileInfo } from 'naive-ui'
+import type { FormInst } from 'naive-ui'
 
 const main = useMainStore()
 const showModal = ref(false)
 const message = useMessage()
-
-const form = reactive<{ file: File | null; name: string }>({
+const formId = ref()
+const loading = ref(false)
+const form = ref<{ file: File | null; name: string }>({
   file: null,
   name: ''
 })
+const formRef = ref<FormInst | null>()
 
 const emits = defineEmits(['close', 'submit'])
-
+const rules = {
+  name: {
+    required: true,
+    message: '请输入名称',
+    trigger: 'blur'
+  }
+}
 const props = defineProps({
   show: {
     type: Boolean,
@@ -117,18 +129,27 @@ const handleShow = (show: boolean) => {
 }
 
 const handleSave = async () => {
-  if (form.file) {
-    const data = {
-      file: form.file,
-      name: form.name,
-      num: main.sceneCode
+  formRef.value?.validate(async (errors) => {
+    console.log('errors', errors, form)
+    if (!errors) {
+      if (form.file) {
+        loading.value = true
+        const data = {
+          file: form.file,
+          name: form.name,
+          num: main.sceneCode,
+          id: formId.value
+        }
+        await saveTOSTT(data)
+        loading.value = true
+
+        message.success('新增成功！')
+        emits('submit')
+      } else {
+        message.error('请上传语音文件')
+      }
     }
-    await saveTOSTT(data)
-    message.success('新增成功！')
-    emits('submit')
-  } else {
-    message.error('请上传语音文件')
-  }
+  })
 }
 const handleFileChange = (options: { fileList: UploadFileInfo[] }) => {
   form.file = options.fileList[0].file
@@ -136,6 +157,15 @@ const handleFileChange = (options: { fileList: UploadFileInfo[] }) => {
 
 watchEffect(() => {
   showModal.value = props.show
+  console.log('props.data', props.isEditing, props.data)
+  if (props.isEditing) {
+    formId.value = props.data.id
+    form.name = props.data.name
+    // form.document = props.data.document
+  } else {
+    formId.value = ''
+    form.name = ''
+  }
 })
 </script>
 <style scoped lang="scss">

src/views/textToaudio/ttsModel.vue

@@ -48,11 +48,7 @@
                 @click="handleCharterSelect(card)"
               >
                 <n-flex style="flex: 1">
-                  <n-avatar
-                    round
-                    size="small"
-                    :src="card.icon"
-                  />
+                  <n-avatar round size="small" :src="card.icon" />
                   <n-flex style="flex: 1" vertical>
                     <span> {{ card.name }}</span>
                     <span> {{ card.desc }}</span>
@@ -64,6 +60,7 @@
           <n-form
             ref="formRef"
             :model="form"
+            :rules="rules"
             label-placement="left"
             label-width="auto"
             require-mark-placement="right-hanging"
@@ -71,7 +68,7 @@
               maxWidth: '640px'
             }"
           >
-            <n-form-item label="名称" path="inputValue">
+            <n-form-item label="名称" path="name">
               <n-input v-model:value="form.name" />
             </n-form-item>
             <n-form-item label="语速" path="inputValue">
@@ -110,12 +107,13 @@
 import { ref, reactive, watchEffect, computed } from 'vue'
 import { NSlider, NForm, NFormItem, NAvatar, useMessage } from 'naive-ui'
 import { saveTOTTS, SaveTOTTSParams } from '@/api'
+import type { FormInst } from 'naive-ui'
 import { useMainStore } from '@/store'
 import Avatar3 from '@/assets/Avatar3.png'
 import Avatar2 from '@/assets/Avatar2.png'
 const main = useMainStore()
 const showModal = ref(false)
-
+const formRef = ref<FormInst | null>()
 const formId = ref()
 const form = reactive({
   document: '',
@@ -124,6 +122,13 @@ const form = reactive({
   speed: 1,
   volume: 5
 })
+const rules = {
+  name: {
+    required: true,
+    message: '请输入名称',
+    trigger: 'blur'
+  }
+}
 const message = useMessage()
 const emits = defineEmits(['close', 'submit'])
 
@@ -181,26 +186,44 @@ const handleCharterSelect = (card) => {
 const handleSave = async () => {
   const data: SaveTOTTSParams = {
     ...form,
-    num: main.sceneCode
+    num: main.sceneCode,
+    id: formId.value
   }
   if (!form.document) {
     message.error('内容不能为空！')
+    return
   }
-  console.log(data)
-  await saveTOTTS(data)
-  message.success('新增成功！')
-  emits('submit')
+  formRef.value?.validate(async (errors) => {
+    console.log('errors', errors, form)
+    if (!errors) {
+      console.log(data)
+      await saveTOTTS(data)
+      message.success('新增成功！')
+      emits('submit')
+    }
+  })
 }
 
 const activeType = computed(() => (type) => form.voiceType === type)
 
 watchEffect(() => {
   showModal.value = props.show
+  console.log('props.data', props.isEditing, props.data)
   if (props.isEditing) {
     formId.value = props.data.id
-    console.log('props.data', props.data)
     form.document = props.data.document
+    form.name = props.data.name
+    form.voiceType = props.data.voiceType || '501001'
+    form.speed = props.data.speed || 1
+    form.volume = props.data.volume || 5
     // form.document = props.data.document
+  } else {
+    formId.value = ''
+    form.document = ''
+    form.name = ''
+    form.voiceType = '501001'
+    form.speed = 1
+    form.volume = 5
   }
 })
 </script>