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"> 文转音</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"
      @close="showTTSModel.show = false"
    ></TtsModel>
  </div>
</template>

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

defineProps<{ msg: string }>()

const main = useMainStore()

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

const showTTSModel = 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) {
      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: '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: () => {
              // _doDelete(row.id)
            }
          },
          {
            default: () => '删除'
          }
        )
      ]
    }
  }
]

const handleAddTTS = () => {
  showTTSModel.value.show = true
}
const openEdit = () => {}
</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>