SichuanDaily/src/views/textToaudio/index.vue

<template>
  <div class="textToaudio p-4">
    <div class="tablehader flex justify-between items-center mb-2.5 text-wrap">
      <div class="title">文字语音互转</div>
      <div class="bottomList">
        <n-space>
          <n-button type="primary" @click="handleAddTTS"> 文转音</n-button>
          <n-button type="primary" @click="showSTTModel.show = true">
            音转文
          </n-button>
        </n-space>
      </div>
    </div>

    <!-- <n-scrollbar style="max-height: calc(100vh - 100px)" trigger="none"> -->
    <n-data-table
      pagination-behavior-on-filter="first"
      :columns="columns"
      :data="data"
      :pagination="paginationReactive"
    />
    <TtsModel
      :show="showTTSModel.show"
      :is-editing="showTTSModel.isEditing"
      :data="showTTSModel.data"
      @close="showTTSModel.show = false"
      @submit="noticeTTsModelDone"
    ></TtsModel>

    <SttModel
      :show="showSTTModel.show"
      :is-editing="showSTTModel.isEditing"
      :data="showSTTModel.data"
      @close="showSTTModel.show = false"
      @submit="noticeSTTModelDone"
    ></SttModel>
  </div>
</template>

<script setup lang="ts">
import { h, reactive, onMounted, watchEffect, ref } from 'vue'
import { NButton, NTooltip, useDialog } from 'naive-ui'
import { fetchTtsList, deleteTTS } from '@/api'
import { useMainStore } from '@/store'
import type { TTSItem } from './type'
import TtsModel from './ttsModel.vue'
import SttModel from './sttModel.vue'

defineProps<{ msg: string }>()

const dialog = useDialog()
const main = useMainStore()

const data = ref<TTSItem[]>([])

const showTTSModel = ref({
  show: false,
  isEditing: false,
  data: {}
})
const showSTTModel = ref({
  show: false,
  isEditing: false,
  data: {}
})
const paginationReactive = reactive({
  page: 1,
  pageSize: 5,
  showSizePicker: true,
  pageSizes: [3, 5, 7],
  onChange: (page) => {
    paginationReactive.page = page
  },
  onUpdatePageSize: (pageSize) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
  }
})

onMounted(async () => {
  watchEffect(async () => {
    if (main.sceneCode) {
      await refresh()
    }
  })
})

const refresh = async () => {
  console.warn('refresh')
  const res = await fetchTtsList(main.sceneCode)
  console.log('data', res)
  data.value = res as never as TTSItem[]
}

const columns = [
  {
    title: '序号',
    key: 'id',
    width: 70
  },
  {
    title: '类型',
    key: 'type',
    width: 80,
    render(row) {
      return row.type === 'asr' ? h('span', '语音') : h('span', '文字')
    }
  },
  {
    title: '名称',
    key: 'name',
    width: 100
  },
  {
    title: '内容',
    key: 'document',
    width: 500,
    resizable: true,
    render(row) {
      return h(
        NTooltip,
        { trigger: 'hover', placement: 'top', style: { maxWidth: '500px' } },
        {
          trigger: () => h('span', row.document.slice(0, 100) + '...'),
          default: () => h('span', row.document)
        }
      )
    }
    // resizable: true,
  },
  {
    title: '语音文件',
    key: 'voicePath',
    width: 300,
    resizable: true
  },
  {
    title: '状态',
    key: 'status',
    minWidth: 100,
    render(row) {
      return row.status == 1
        ? h('span', '转换成功')
        : row.status == 0
          ? h('span', '转换中')
          : h('span', '转换失败')
    }
  },
  {
    title: '创建时间',
    key: 'updateTime'
  },
  {
    title: '操作',
    key: 'actions',
    fixed: 'right',
    minWidth: 200,
    render(row, index) {
      return [
        h(
          NButton,
          {
            quaternary: true,
            type: 'info',
            size: 'small',
            onClick: () => {
              openEdit(row)
            }
          },
          {
            default: () => '编辑'
          }
        ),
        h(
          NButton,
          {
            quaternary: true,
            type: 'error',
            size: 'small',
            style: { marginLeft: '2px' },
            onClick: () => {
              handleDelTTS(row.id)
            }
          },
          {
            default: () => '删除'
          }
        )
      ]
    }
  }
]

const handleAddTTS = () => {
  showTTSModel.value.show = true
}

const handleDelTTS = (id: number) => {
  console.log('handleDelTTS', id)

  dialog.warning({
    title: '删除',
    content: '是否确定删除？',
    negativeText: '取消',
    positiveText: '确认',
    onPositiveClick: async () => {
      await deleteTTS({
        id,
        num: main.sceneCode
      })
      await refresh()
    }
  })
}

const openEdit = (row) => {
  console.log('openEdit', row.type)
  if (row.type === 'tts') {
    showTTSModel.value.show = true
    showTTSModel.value.isEditing = true
    showTTSModel.value.data = row
  } else {
    showSTTModel.value.show = true
    showSTTModel.value.isEditing = true
    showSTTModel.value.data = row
  }
}

const noticeTTsModelDone = async () => {
  await refresh()
  showTTSModel.value.show = false
  location.reload()

}
const noticeSTTModelDone = async () => {
  await refresh()
  showSTTModel.value.show = false
  location.reload()

}
</script>

<style lang="sass" scoped>
a
  color: #42b983

label
  margin: 0 0.5em
  font-weight: bold

code
  background-color: #eee
  padding: 2px 4px
  border-radius: 4px
  color: #304455

.textToaudio
  min-height: 100%
//border-left: 1px solid
</style>