|
|
@@ -0,0 +1,242 @@
|
|
|
+<template>
|
|
|
+ <div class='app-container'>
|
|
|
+ <el-form class="form" :model="data.form" ref="form" :rules="data.rules" label-width="100">
|
|
|
+ <el-form-item label="场景名称：" prop="takeName">
|
|
|
+ <el-input v-model="data.form.takeName" placeholder="请输入场景名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="选择音频：">
|
|
|
+ <el-button type="primary" icon="Plus" plain @click="getDialog">选择音频</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="width: 1000px;" prop="list">
|
|
|
+ <el-table :data="data.form.list">
|
|
|
+ <el-table-column label="音频ID" prop="id" align="center"></el-table-column>
|
|
|
+ <el-table-column label="音频名称" prop="name" align="center"></el-table-column>
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button type="danger" link @click="handleClose(scope.$index)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="form-btn">
|
|
|
+ <el-button @click="getClose">取消</el-button>
|
|
|
+ <el-button type="primary" @click="getSubmit">确认</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-dialog v-model="dialogVisible" title="选择音频" width="1000px">
|
|
|
+ <el-form inline>
|
|
|
+ <el-form-item label="音频ID：">
|
|
|
+ <el-input v-model="data.dialogForm.id" placeholder="请输入音频ID" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="音频名称：">
|
|
|
+ <el-input v-model="data.dialogForm.name" placeholder="请输入音频名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="音频分类：">
|
|
|
+ <el-select v-model="data.dialogForm.sceneId" placeholder="请选择音频分类" clearable>
|
|
|
+ <el-option v-for="item in audioClassData.options" :key="item.id" :value="item.id" :label="item.name" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" @click="getSearch">搜索</el-button>
|
|
|
+ <el-button icon="Refresh" @click="getRefresh">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table :data="data.tableData" ref="table" :row-key="rowKey" @selection-change="handleSelectionChange"
|
|
|
+ @select="handleSelectChange" @select-all="handleSelectAllChange" v-loading="loading">
|
|
|
+ <el-table-column type="selection" align="center" />
|
|
|
+ <el-table-column label="音频ID" prop="id" align="center" />
|
|
|
+ <el-table-column label="音频名称" prop="name" align="center" />
|
|
|
+ <el-table-column label="时长" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ playTime(scope.row.playTime) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="音频分类" align="center" :formatter="sceneFormatter" />
|
|
|
+ </el-table>
|
|
|
+ <pagination v-show="total > 0" :total="total" v-model:page="data.dialogForm.pageNum"
|
|
|
+ v-model:limit="data.dialogForm.pageSize" @pagination="getList" />
|
|
|
+ <template #footer>
|
|
|
+ <el-button type="primary" @click="getPush">确定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { list } from '@/api/content/list'
|
|
|
+import { submit, detail } from '@/api/scene/presets'
|
|
|
+import { useAudioClass } from '@/hooks/index.js'
|
|
|
+const { audioClassData, getAudioClass } = useAudioClass()
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const { sys_change_status } = proxy.useDict("sys_change_status")
|
|
|
+
|
|
|
+const data = reactive({
|
|
|
+ // 表单
|
|
|
+ form: {},
|
|
|
+ // 弹窗表单
|
|
|
+ dialogForm: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ status: 0
|
|
|
+ },
|
|
|
+ // 弹窗列表
|
|
|
+ tableData: [],
|
|
|
+ // 校验
|
|
|
+ rules: {
|
|
|
+ list: [{
|
|
|
+ required: true, message: '请上传音频', trigger: 'change'
|
|
|
+ }],
|
|
|
+ takeName: [{
|
|
|
+ required: true, message: '请输入场景名称', trigger: 'blur'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ // 多选
|
|
|
+ selectionList: []
|
|
|
+})
|
|
|
+
|
|
|
+// 遮罩层
|
|
|
+const loading = ref(false)
|
|
|
+
|
|
|
+// 详情
|
|
|
+const getDetail = () => {
|
|
|
+ if (proxy.$route.query.takeId) {
|
|
|
+ detail({ id: proxy.$route.query.takeId }).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ data.form = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+getDetail()
|
|
|
+
|
|
|
+// 总数据
|
|
|
+const total = ref(0)
|
|
|
+
|
|
|
+// 弹窗
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const getDialog = () => {
|
|
|
+ dialogVisible.value = true
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+// 音频列表
|
|
|
+const getList = () => {
|
|
|
+ loading.value = true
|
|
|
+ list(data.dialogForm).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ data.tableData = res.data.records
|
|
|
+ total.value = res.data.total
|
|
|
+ loading.value = false
|
|
|
+ nextTick(() => {
|
|
|
+ proxy.$refs.table.clearSelection()
|
|
|
+ if (data.selectionList.length > 0) {
|
|
|
+ data.selectionList.map(i => {
|
|
|
+ let row = data.tableData.find(j => j.id === i.id)
|
|
|
+ if (row) {
|
|
|
+ proxy.$refs.table.toggleRowSelection(row, true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const rowKey = (e) => {
|
|
|
+ return e.id
|
|
|
+}
|
|
|
+
|
|
|
+// 搜索
|
|
|
+const getSearch = () => {
|
|
|
+ data.dialogForm.pageNum = 1
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+// 重置
|
|
|
+const getRefresh = () => {
|
|
|
+ data.dialogForm = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ status: 0
|
|
|
+ }
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+const handleSelectionChange = (e) => {
|
|
|
+ e.map(i => {
|
|
|
+ if (data.selectionList.findIndex(j => j.id === i.id) === -1) {
|
|
|
+ data.selectionList.push(i)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 取消勾选
|
|
|
+const handleSelectChange = (arr, row) => {
|
|
|
+ if (arr.findIndex(i => i.id === row.id) === -1) {
|
|
|
+ let index = data.selectionList.findIndex(i => i.id === row.id)
|
|
|
+ data.selectionList.splice(index, 1)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 取消全选
|
|
|
+const handleSelectAllChange = (e) => {
|
|
|
+ if (e.length === 0) {
|
|
|
+ for (let i = 0; i < data.tableData.length; i++) {
|
|
|
+ for (let j = 0; j < data.selectionList.length; j++) {
|
|
|
+ if (data.tableData[i].id === data.selectionList[j].id) {
|
|
|
+ data.selectionList.splice(j, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 删除音频
|
|
|
+const handleClose = (index) => {
|
|
|
+ data.form.list.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+// 确定选择
|
|
|
+const getPush = () => {
|
|
|
+ data.form.list = []
|
|
|
+ data.form.list = data.selectionList
|
|
|
+ dialogVisible.value = false
|
|
|
+}
|
|
|
+
|
|
|
+// 取消
|
|
|
+const getClose = () => {
|
|
|
+ proxy.$tab.closeOpenPage('/scene/presets')
|
|
|
+}
|
|
|
+
|
|
|
+// 提交
|
|
|
+function getSubmit() {
|
|
|
+ proxy.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ submit(data.form).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ proxy.$modal.msgSuccess('提交成功！')
|
|
|
+ getClose()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 字典翻译
|
|
|
+function sceneFormatter(row) {
|
|
|
+ let e = audioClassData.options.find(i => i.id === row.sceneId)
|
|
|
+ return e ? e.name : '无'
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.form {
|
|
|
+ .el-form-item {
|
|
|
+ width: 500px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
