|
@@ -9,32 +9,36 @@
|
|
</template>
|
|
</template>
|
|
</el-calendar>
|
|
</el-calendar>
|
|
<div class="list">
|
|
<div class="list">
|
|
- <el-input placeholder="搜索" suffix-icon="Search" />
|
|
|
|
|
|
+ <el-input v-model="audioData.form.name" placeholder="搜索" clearable>
|
|
|
|
+ <template #append>
|
|
|
|
+ <el-button icon="Search" @click="getSearch" />
|
|
|
|
+ </template>
|
|
|
|
+ </el-input>
|
|
<el-tabs v-model="activeName" @tab-click="handleChangeTabs">
|
|
<el-tabs v-model="activeName" @tab-click="handleChangeTabs">
|
|
- <el-tab-pane v-for="item in data.tabOptions" :key="item.value" :label="item.label" :name="item.value"
|
|
|
|
- v-loading="loading">
|
|
|
|
|
|
+ <el-tab-pane v-for="item in data.tabOptions" :key="item.value" :name="item.value" :label="item.label"
|
|
|
|
+ v-loading="audioData.loading">
|
|
<el-scrollbar :height="220">
|
|
<el-scrollbar :height="220">
|
|
- <draggable :class="['contentList', activeName !== 'scene' ? 'noScene' : 'scene']" v-model="data.tableData"
|
|
|
|
|
|
+ <draggable :class="['contentList', activeName !== 2 ? 'noScene' : 'scene']" v-model="audioData.tableData"
|
|
item-key="id" chosen-class="chosenClass" data-id="content"
|
|
item-key="id" chosen-class="chosenClass" data-id="content"
|
|
:group="{ name: 'componentGroup', pull: 'clone', put: false }" :sort="false" :move="onMove"
|
|
:group="{ name: 'componentGroup', pull: 'clone', put: false }" :sort="false" :move="onMove"
|
|
@end="onEnd">
|
|
@end="onEnd">
|
|
<template #item="{ element, index }">
|
|
<template #item="{ element, index }">
|
|
<div class="item">
|
|
<div class="item">
|
|
- <span v-show="activeName !== 'scene'" class="item_line" :title="element.name">
|
|
|
|
|
|
+ <span v-show="activeName !== 2" class="item_line" :title="element.name">
|
|
<el-icon style="margin-right: 10px; line-height:40px">
|
|
<el-icon style="margin-right: 10px; line-height:40px">
|
|
<VideoPlay />
|
|
<VideoPlay />
|
|
</el-icon>
|
|
</el-icon>
|
|
{{ element.name }}
|
|
{{ element.name }}
|
|
</span>
|
|
</span>
|
|
- <span v-show="activeName === 'scene'" class="item_box">
|
|
|
|
|
|
+ <span v-show="activeName === 2" class="item_box">
|
|
<img src="@/assets/icons/svg/file.svg" width="50" height="50" />
|
|
<img src="@/assets/icons/svg/file.svg" width="50" height="50" />
|
|
- <span class="takeName">{{ element.takeName }}</span>
|
|
|
|
|
|
+ <span class="takeName">{{ element.name }}</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</draggable>
|
|
</draggable>
|
|
</el-scrollbar>
|
|
</el-scrollbar>
|
|
- <el-pagination v-show="total > 10" layout="prev,pager,next" :total="total"
|
|
|
|
|
|
+ <el-pagination v-show="audioData.total > 10" layout="prev,pager,next" :total="audioData.total"
|
|
@current-change="handleChangeCurrent" />
|
|
@current-change="handleChangeCurrent" />
|
|
</el-tab-pane>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-tabs>
|
|
@@ -50,29 +54,29 @@
|
|
import { list as contentList } from '@/api/content/list'
|
|
import { list as contentList } from '@/api/content/list'
|
|
import { list as ohplayList } from '@/api/content/ohplay'
|
|
import { list as ohplayList } from '@/api/content/ohplay'
|
|
import { list as sceneList } from '@/api/content/scene'
|
|
import { list as sceneList } from '@/api/content/scene'
|
|
-import { useAudioSelect } from '@/hooks/index'
|
|
|
|
|
|
+import { useAudioList } from '@/hooks/index'
|
|
import GanttChart from '@/components/GanttChart'
|
|
import GanttChart from '@/components/GanttChart'
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
|
-const { audioData, getAudio } = useAudioSelect()
|
|
|
|
|
|
+const { audioData, getAudio } = useAudioList()
|
|
getAudio()
|
|
getAudio()
|
|
|
|
|
|
// 遮罩层
|
|
// 遮罩层
|
|
const loading = ref(false)
|
|
const loading = ref(false)
|
|
// tab页
|
|
// tab页
|
|
-const activeName = ref("content")
|
|
|
|
|
|
+const activeName = ref(0)
|
|
// 数据
|
|
// 数据
|
|
const data = reactive({
|
|
const data = reactive({
|
|
// tab数组
|
|
// tab数组
|
|
tabOptions: [{
|
|
tabOptions: [{
|
|
- value: 'content',
|
|
|
|
|
|
+ value: 0,
|
|
label: '内容列表'
|
|
label: '内容列表'
|
|
}, {
|
|
}, {
|
|
- value: 'ohplay',
|
|
|
|
|
|
+ value: 1,
|
|
label: 'ohplay音频'
|
|
label: 'ohplay音频'
|
|
}, {
|
|
}, {
|
|
- value: 'scene',
|
|
|
|
|
|
+ value: 2,
|
|
label: '场景预设'
|
|
label: '场景预设'
|
|
}],
|
|
}],
|
|
// 表单
|
|
// 表单
|
|
@@ -80,13 +84,8 @@ const data = reactive({
|
|
pageNum: 1,
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
pageSize: 10
|
|
},
|
|
},
|
|
- // 列表
|
|
|
|
- tableData: []
|
|
|
|
})
|
|
})
|
|
|
|
|
|
-// 总数据
|
|
|
|
-const total = ref(0)
|
|
|
|
-
|
|
|
|
|
|
|
|
// 日历
|
|
// 日历
|
|
const calendar = ref()
|
|
const calendar = ref()
|
|
@@ -100,66 +99,27 @@ function getDate(e) {
|
|
console.log(new Date().getTime());
|
|
console.log(new Date().getTime());
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+// 切换tab
|
|
const handleChangeTabs = (e) => {
|
|
const handleChangeTabs = (e) => {
|
|
- activeName.value = e.props.name
|
|
|
|
- data.form = {
|
|
|
|
|
|
+ audioData.tableData = []
|
|
|
|
+ audioData.form = {
|
|
pageNum: 1,
|
|
pageNum: 1,
|
|
- pageSize: 10
|
|
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ type: e.props.name
|
|
}
|
|
}
|
|
- data.tableData = []
|
|
|
|
- modalChange(e.props.name)
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-// 内容列表
|
|
|
|
-const getContentList = () => {
|
|
|
|
- loading.value = true
|
|
|
|
- contentList(data.form).then(res => {
|
|
|
|
- if (res.code === 0) {
|
|
|
|
- data.tableData = res.data.records
|
|
|
|
- total.value = res.data.total
|
|
|
|
- loading.value = false
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
-}
|
|
|
|
-getContentList()
|
|
|
|
-
|
|
|
|
-// Ohplay音频
|
|
|
|
-const getOhplayList = () => {
|
|
|
|
- loading.value = true
|
|
|
|
- ohplayList(data.form).then(res => {
|
|
|
|
- if (res.code === 0) {
|
|
|
|
- data.tableData = res.data.records
|
|
|
|
- total.value = res.data.total
|
|
|
|
- loading.value = false
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-// 场景预设
|
|
|
|
-const getSceneList = () => {
|
|
|
|
- loading.value = true
|
|
|
|
- sceneList(data.form).then(res => {
|
|
|
|
- if (res.code === 0) {
|
|
|
|
- data.tableData = res.data.records
|
|
|
|
- total.value = res.data.total
|
|
|
|
- loading.value = false
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ getAudio()
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+// 翻页
|
|
const handleChangeCurrent = (e) => {
|
|
const handleChangeCurrent = (e) => {
|
|
- data.form.pageNum = e
|
|
|
|
- modalChange(activeName.value)
|
|
|
|
|
|
+ audioData.form.pageNum = e
|
|
|
|
+ getAudio()
|
|
}
|
|
}
|
|
|
|
|
|
-const modalChange = (e) => {
|
|
|
|
- if (e === 'content') {
|
|
|
|
- getContentList()
|
|
|
|
- } else if (e === 'ohplay') {
|
|
|
|
- getOhplayList()
|
|
|
|
- } else {
|
|
|
|
- getSceneList()
|
|
|
|
- }
|
|
|
|
|
|
+// 搜索
|
|
|
|
+const getSearch = () => {
|
|
|
|
+ audioData.form.pageNum = 1
|
|
|
|
+ getAudio()
|
|
}
|
|
}
|
|
|
|
|
|
// 拖拽内容
|
|
// 拖拽内容
|