|
@@ -0,0 +1,475 @@
|
|
|
+<template>
|
|
|
+ <div class='app-container'>
|
|
|
+ <el-form class="form" label-width="auto" ref="form" :model="data.form" :rules="data.rules">
|
|
|
+ <el-form-item class="chooseAudio" label="内容音频:" prop="audioList">
|
|
|
+ <div class="audioList" v-for="(item, index) in data.form.audioList" :key="item.id">
|
|
|
+ <el-tag v-show="item.type === 0 || item.type === 1" size="large" :closable="checkClose()"
|
|
|
+ @close="handleClose(index)">
|
|
|
+ {{ item.audioName }}
|
|
|
+ </el-tag>
|
|
|
+ <div v-show="item.type === 2" class="audio">
|
|
|
+ <img src="@/assets/icons/svg/file.svg" width="70" height="70" />
|
|
|
+ <span>{{ item.audioName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button v-if="checkClose()" icon="Plus" @click="getDialog">选择音频</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="内容设定:" prop="name">
|
|
|
+ <el-button icon="Plus" @click="getContentDialog">选择内容</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="播放时间:" prop="listDate">
|
|
|
+ <div class="date" v-for="(item, index) in data.dateList">
|
|
|
+ <el-date-picker v-model="data.dateList[index]" type="datetimerange" start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ @change="handleChangeDate($event, index)" />
|
|
|
+ <el-link v-show="data.dateList.length > 1" icon="CircleClose" :underline="false"
|
|
|
+ @click="handleDeleteDate(index)" />
|
|
|
+ <el-link v-show="data.dateList.length - 1 === index" icon="CirclePlus" :underline="false"
|
|
|
+ @click="handlePushDate" />
|
|
|
+ </div>
|
|
|
+ </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_audio" title="选择音频" width="1000px">
|
|
|
+ <el-form inline>
|
|
|
+ <el-form-item label="内容分类:">
|
|
|
+ <el-select v-model="audioData.form.type" placeholder="请选择内容分类">
|
|
|
+ <el-option v-for="item in data.radioOptions" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="名称:">
|
|
|
+ <el-input v-model="audioData.form.name" placeholder="请输入名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分类:">
|
|
|
+ <el-select v-model="audioData.form.sceneId" placeholder="请选择分类">
|
|
|
+ <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 label="当前状态:">
|
|
|
+ <el-select v-model="audioData.form.status" placeholder="请选择当前状态">
|
|
|
+ <el-option v-for="item in sys_change_status" :key="item.value" :value="item.value" :label="item.label" />
|
|
|
+ </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 v-if="audioData.form.type !== 2" ref="table" :data="audioData.tableData" :row-key="rowKey"
|
|
|
+ @selection-change="handleSelectionChange" v-loading="audioData.loading">
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+ <el-table-column label="ID" prop="id" align="center" show-overflow-tooltip />
|
|
|
+ <el-table-column label="名称" prop="name" align="center" show-overflow-tooltip />
|
|
|
+ <el-table-column label="时长" prop="playTime" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ playTime(scope.row.playTime) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="分类" prop="sceneId" align="center" :formatter="sceneFormatter" />
|
|
|
+ <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
|
|
|
+ <el-table-column label="更新时间" prop="updateTime" align="center" show-overflow-tooltip />
|
|
|
+ </el-table>
|
|
|
+ <div class="audio_table" v-else>
|
|
|
+ <div class="audio" v-for="item in audioData.tableData" :key="item.id" @click="handleChooseAudio(item)">
|
|
|
+ <img src="@/assets/icons/svg/file.svg" width="70" height="70" />
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <pagination v-show="audioData.total > 0" :total="audioData.total" v-model:page="audioData.form.pageNum"
|
|
|
+ v-model:limit="audioData.form.pageSize" @pagination="getAudio" />
|
|
|
+ <template #footer>
|
|
|
+ <el-button type="primary" @click="getPush">确定</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog v-model="dialogVisible_content" title="选择内容" width="1000px">
|
|
|
+ <el-form inline>
|
|
|
+ <el-form-item label="内容名称:">
|
|
|
+ <el-input v-model="settingData.form.name" placeholder="请输入内容名称" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="getSearch">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-table>
|
|
|
+ <el-table-column label="内容ID" align="center"></el-table-column>
|
|
|
+ <el-table-column label="内容名称" align="center"></el-table-column>
|
|
|
+ <el-table-column label="当前状态" align="center"></el-table-column>
|
|
|
+ <el-table-column label="播放时段" align="center"></el-table-column>
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button type="primary" link>选择</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { useAudioList, useAudioClass, useSettingList } from '@/hooks/index'
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+
|
|
|
+const { audioData, getAudio } = useAudioList()
|
|
|
+const { audioClassData, getAudioClass } = useAudioClass()
|
|
|
+getAudioClass()
|
|
|
+const { settingData, getSetting } = useSettingList()
|
|
|
+
|
|
|
+const { sys_change_status } = proxy.useDict("sys_change_status")
|
|
|
+
|
|
|
+const data = reactive({
|
|
|
+ // 表单
|
|
|
+ form: {
|
|
|
+ audioList: [],
|
|
|
+ listDate: []
|
|
|
+ },
|
|
|
+ // 时间段
|
|
|
+ dateList: [[]],
|
|
|
+ // 分页
|
|
|
+ radioOptions: [{
|
|
|
+ value: 0,
|
|
|
+ label: '内容列表'
|
|
|
+ }, {
|
|
|
+ value: 1,
|
|
|
+ label: 'Ohplay音频'
|
|
|
+ }, {
|
|
|
+ value: 2,
|
|
|
+ label: '场景预设'
|
|
|
+ }],
|
|
|
+ // 多选
|
|
|
+ selectionList: [],
|
|
|
+ // 校验
|
|
|
+ rules: {
|
|
|
+ audioList: [{
|
|
|
+ required: true, message: '请选择音频', trigger: 'change'
|
|
|
+ }],
|
|
|
+ listDate: [{
|
|
|
+ required: true, message: '请选择播放时间', trigger: 'change'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ business_store: []
|
|
|
+})
|
|
|
+
|
|
|
+const getPushTime = (e) => {
|
|
|
+ if (e.startTime) {
|
|
|
+ let y = new Date().getFullYear()
|
|
|
+ let m = new Date().getMonth() + 1
|
|
|
+ let d = new Date().getDate()
|
|
|
+ let startTime = proxy.parseTime(new Date(`${y}-${m}-${d} ${e.startTime}`).getTime(), '{y}-{m}-{d} {h}:{i}:{s}')
|
|
|
+ let endTime = proxy.parseTime(new Date(`${y}-${m}-${d} ${e.endTime}`).getTime(), '{y}-{m}-{d} {h}:{i}:{s}')
|
|
|
+ data.dateList[0] = [startTime, endTime]
|
|
|
+ data.form.listDate.push({
|
|
|
+ startTime: startTime,
|
|
|
+ endTime: endTime
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 传参
|
|
|
+const getAudioList = () => {
|
|
|
+ if (proxy.$route.query.audioList) {
|
|
|
+ var e = JSON.parse(proxy.$route.query.audioList)
|
|
|
+ data.form.audioList.push({
|
|
|
+ audioId: e.id,
|
|
|
+ audioName: e.name,
|
|
|
+ audioType: e.audioType,
|
|
|
+ categoryId: e.sceneId,
|
|
|
+ type: e.type,
|
|
|
+ })
|
|
|
+ getPushTime(e)
|
|
|
+ }
|
|
|
+}
|
|
|
+getAudioList()
|
|
|
+
|
|
|
+// 详情
|
|
|
+const getDetail = () => {
|
|
|
+ let e = proxy.$route.query
|
|
|
+ if (e.id) {
|
|
|
+ detail({ id: e.id, storeId: e.storeId }).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ data.form = res.data
|
|
|
+ data.dateList = []
|
|
|
+ res.data.listDate.map(i => {
|
|
|
+ data.dateList.push([i.startTime, i.endTime])
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+getDetail()
|
|
|
+
|
|
|
+// 检测是否是编辑
|
|
|
+const checkClose = () => {
|
|
|
+ return proxy.$route.query.disabled == undefined ? true : false
|
|
|
+}
|
|
|
+
|
|
|
+// 弹窗
|
|
|
+const dialogVisible_audio = ref(false)
|
|
|
+// 打开弹窗
|
|
|
+function getDialog() {
|
|
|
+ dialogVisible_audio.value = true
|
|
|
+ getAudio()
|
|
|
+ // 监听
|
|
|
+ watch(() => audioData.tableData, (val) => {
|
|
|
+ if (audioData.form.type !== 2) {
|
|
|
+ nextTick(() => {
|
|
|
+ proxy.$refs.table.clearSelection()
|
|
|
+ if (val && data.form.audioList.length > 0) {
|
|
|
+ data.form.audioList.map(i => {
|
|
|
+ let row = val.find(j => j.id === i.audioId)
|
|
|
+ if (row) {
|
|
|
+ proxy.$refs.table.toggleRowSelection(row, true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const dialogVisible_content = ref(false)
|
|
|
+const getContentDialog = () => {
|
|
|
+ dialogVisible_content.value = true
|
|
|
+ getSetting()
|
|
|
+}
|
|
|
+
|
|
|
+// 搜索
|
|
|
+const getSearch = () => {
|
|
|
+ audioData.form.pageNum = 1
|
|
|
+ getAudio()
|
|
|
+}
|
|
|
+
|
|
|
+// 重置
|
|
|
+const getRefresh = () => {
|
|
|
+ audioData.form = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ type: 0
|
|
|
+ }
|
|
|
+ getAudio()
|
|
|
+}
|
|
|
+
|
|
|
+// 返回id
|
|
|
+const rowKey = (e) => {
|
|
|
+ return e.id
|
|
|
+}
|
|
|
+
|
|
|
+// 多选
|
|
|
+const handleSelectionChange = (e) => {
|
|
|
+ data.selectionList = []
|
|
|
+ e.map(i => {
|
|
|
+ if (data.selectionList.findIndex(j => j.id === i.id) === -1) {
|
|
|
+ data.selectionList.push({
|
|
|
+ audioId: i.id,
|
|
|
+ audioName: i.name,
|
|
|
+ audioType: i.audioType,
|
|
|
+ categoryId: i.sceneId,
|
|
|
+ type: i.type
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 单选
|
|
|
+const handleChooseAudio = (e) => {
|
|
|
+ data.form.audioList = []
|
|
|
+ data.form.audioList.push({
|
|
|
+ audioId: e.id,
|
|
|
+ audioName: e.name,
|
|
|
+ audioType: e.audioType,
|
|
|
+ categoryId: e.sceneId,
|
|
|
+ type: e.type
|
|
|
+ })
|
|
|
+ getPushTime(e)
|
|
|
+ proxy.$modal.msgSuccess('选择成功!')
|
|
|
+ dialogVisible_audio.value = false
|
|
|
+}
|
|
|
+
|
|
|
+// 确定
|
|
|
+const getPush = () => {
|
|
|
+ data.form.audioList = []
|
|
|
+ data.form.audioList = JSON.parse(JSON.stringify(data.selectionList))
|
|
|
+ proxy.$modal.msgSuccess('选择成功!')
|
|
|
+ dialogVisible_audio.value = false
|
|
|
+}
|
|
|
+
|
|
|
+// 删除音频
|
|
|
+const handleClose = (index) => {
|
|
|
+ data.form.audioList.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+// 删除所属门店
|
|
|
+const getDelete = (index) => {
|
|
|
+ data.form.tpresetContentInfoReq.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+// 增加时间
|
|
|
+function handlePushDate() {
|
|
|
+ let boolean = false
|
|
|
+ data.dateList.map(i => boolean = i.length === 0 ? true : false)
|
|
|
+ if (boolean) {
|
|
|
+ proxy.$modal.msgError('有时间段未填')
|
|
|
+ } else {
|
|
|
+ data.dateList.push([])
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 删除时间
|
|
|
+function handleDeleteDate(index) {
|
|
|
+ data.dateList.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+// 校验时间
|
|
|
+const handleChangeDate = (e, index) => {
|
|
|
+ if (e !== null) {
|
|
|
+ data.listDate = []
|
|
|
+ data.form.listDate = []
|
|
|
+ const start = new Date(e[0]).getTime()
|
|
|
+ const end = new Date(e[1]).getTime()
|
|
|
+
|
|
|
+ for (let i = 0; i < data.dateList.length; i++) {
|
|
|
+ if (i !== index) {
|
|
|
+ let st = new Date(data.dateList[i][0]).getTime()
|
|
|
+ let en = new Date(data.dateList[i][1]).getTime()
|
|
|
+
|
|
|
+ if (start >= st && start <= en || end >= st && end <= en || start <= st && end >= en || end <= st && start >= en) {
|
|
|
+ data.dateList.splice(index, 1)
|
|
|
+ proxy.$modal.msgError("该时间段已设置!")
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ data.form.listDate.push({
|
|
|
+ startTime: data.dateList[i][0],
|
|
|
+ endTime: data.dateList[i][1]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 所属企业
|
|
|
+const index = ref(0)
|
|
|
+const handleChangeTenant = (e, i) => {
|
|
|
+ storeData.form.tenantId = e
|
|
|
+ index.value = i
|
|
|
+ getStore()
|
|
|
+}
|
|
|
+
|
|
|
+// 取消
|
|
|
+const getClose = () => {
|
|
|
+ proxy.$tab.closeOpenPage('/content/setting')
|
|
|
+}
|
|
|
+
|
|
|
+// 提交
|
|
|
+const getSubmit = () => {
|
|
|
+ proxy.$refs.form.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ submit(data.form).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ proxy.$modal.msgSuccess('提交成功!')
|
|
|
+ getClose()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 字典
|
|
|
+const statusFormatter = (row) => {
|
|
|
+ return proxy.selectDictLabel(sys_change_status.value, row.status)
|
|
|
+}
|
|
|
+
|
|
|
+const sceneFormatter = (row) => {
|
|
|
+ let e = audioClassData.options.find(i => i.id === row.sceneId)
|
|
|
+ if (row.sceneId && e) {
|
|
|
+ return audioClassData.options.find(i => i.id === row.sceneId).name
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 监听
|
|
|
+watch(() => audioData.form.type, (val) => {
|
|
|
+ data.selectionList = []
|
|
|
+ getAudio()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.form {
|
|
|
+ .el-form-item {
|
|
|
+ width: 500px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table__row {
|
|
|
+ .el-form-item {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.chooseAudio {
|
|
|
+ :deep(.el-form-item__content) {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .audioList {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .el-tag {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.audio_table {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .audio {
|
|
|
+ margin: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.audio {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ border: 1px solid #e9e9eb;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 0 6px 0 #e9e9eb;
|
|
|
+
|
|
|
+ span {
|
|
|
+ width: 160px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.date {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+
|
|
|
+ .el-link {
|
|
|
+ margin-left: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|