no message

src/router/index.js

@@ -178,7 +178,22 @@ export const dynamicRoutes = [
       },
     ],
   },
-  // 场景预设
+  // 场景
+  {
+    path: "/scene",
+    component: Layout,
+    hidden: true,
+    permissions: ["scene:presets:list"],
+    children: [
+      {
+        path: "presets/sceneDetail",
+        component: () => import("@/views/scene/presets/sceneDetail"),
+        name: "sceneDetail",
+        meta: { title: "预设详情", activeMenu: "/scene/presets" },
+      },
+    ],
+  },
+  // 预设
   {
     path: "/scene",
     component: Layout,

src/views/content/setting/detail.vue

@@ -336,6 +336,7 @@ const handleSelectChange = (arr, row) => {
   }
 }
 
+// 取消全选
 const handleSelectAllChange = (e) => {
   if (e.length === 0) {
     for (let i = 0; i < audioData.tableData.length; i++) {
@@ -413,21 +414,26 @@ const handleChangeDate = (e, index) => {
     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[index] = []
-          proxy.$modal.msgError("该时间段已设置！")
-          return false
+    if (new Date(e[0]).getDate() !== new Date(e[1]).getDate()) {
+      proxy.$modal.msgError('不支持跨天！')
+      data.dateList[index] = []
+    } else {
+      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[index] = []
+            proxy.$modal.msgError("该时间段已设置！")
+            return false
+          }
         }
+        data.form.listDate.push({
+          startTime: data.dateList[i][0],
+          endTime: data.dateList[i][1]
+        })
       }
-      data.form.listDate.push({
-        startTime: data.dateList[i][0],
-        endTime: data.dateList[i][1]
-      })
     }
   }
 }

src/views/content/setting/index.vue

@@ -142,7 +142,7 @@ function getRouter(query) {
 
 // 拖动样式
 const chosenClass = () => {
-  return '  background: none !important;color: #3979F9 !important; line-height: 60px;'
+  return 'background: none !important;color: #3979F9 !important; line-height: 60px;'
 }
 
 </script>

src/views/scene/presets/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='app-container'>
     <div class="left">
-      <el-button type="primary" plain icon="Plus" @click="getAddDialog()"
+      <el-button type="primary" plain icon="Plus" @click="getRouter('/scene/presets/sceneDetail')"
         v-hasPermi="['scene:presets:addScene']">新增场景</el-button>
       <el-input class="search" v-model="data.form.takeName" placeholder="搜索场景名称" clearable>
         <template #append>
@@ -9,11 +9,11 @@
         </template>
       </el-input>
       <draggable class="contentList" v-model="data.tableData" item-key="id" chosenClass="chosenClass" data-id="content"
-        :group="{ name: 'componentGroup', pull: 'clone', put: false }" :sort="false" filter=".auditStatus" @end="onEnd"
-        forceFallback v-loading="loading">
+        :group="{ name: 'componentGroup', pull: 'clone', put: false }" :sort="false" @end="onEnd" forceFallback
+        v-loading="loading">
         <template #item="{ element, index }">
-          <div :class="['item', element.auditStatus === 0 ? 'auditStatus' : '']" @click="getDialog(element)">
-            <el-icon v-if="element.auditStatus === 2" class="close" size="18" @click.stop="getDelete(element)"
+          <div class="item" @click="getDetail(element)">
+            <el-icon class="close" size="18" @click.stop="getDelete(element)"
               v-hasPermi="['scene:presets:deleteScene']">
               <CircleClose />
             </el-icon>
@@ -21,7 +21,6 @@
             <span style="margin-top: 10px">
               {{ element.takeName }}
             </span>
-            <span v-if="element.auditStatus === 0">(待审核)</span>
           </div>
         </template>
       </draggable>
@@ -31,31 +30,11 @@
     <div class="right">
       <gantt-chart path="/scene/presets/detail" type="scene" />
     </div>
-
-    <!-- 弹窗 -->
-    <el-dialog v-model="dialogVisible" :title="title" width="500px" :before-close="getClose">
-      <el-form :model="data.dialogForm" ref="dialogForm" :rules="data.rules">
-        <el-form-item label="播放音频：" prop="list">
-          <CustomUpload v-if="title !== '编辑'" ref="customUpload" :url="`${baseUrl}/radio/tProgram/mp3/upload`" multiple
-            showFileList @upload="upload" />
-          <div v-else>
-            <div v-for="item in data.dialogForm.list" :key="item.id">{{ item.name }}</div>
-          </div>
-        </el-form-item>
-        <el-form-item label="场景名称：" prop="takeName">
-          <el-input v-model="data.dialogForm.takeName" placeholder="请输入场景名称" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="getClose">取消</el-button>
-        <el-button type="primary" @click="getSubmit">确定</el-button>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { list, submit, detail, remove } from '@/api/scene/presets'
+import { list, remove } from '@/api/scene/presets'
 import { checkPermi } from '@/utils/permission'
 import GanttChart from '@/components/GanttChart/index.vue'
 
@@ -73,8 +52,6 @@ const data = reactive({
   },
   // 列表
   tableData: [],
-  // 弹窗表单
-  dialogForm: {},
   // 校验
   rules: {
     list: [{
@@ -101,23 +78,19 @@ function getList() {
   })
 }
 getList()
+
 // 搜索
 function getSearch() {
   data.form.pageNum = 1
   getList()
 }
 
-// 拖拽前
-const onMove = () => {
-
-}
-
 // 拖拽结束
 function onEnd(params) {
   if (checkPermi(['scene:presets:add'])) {
     if (params.from.className !== params.to.className) {
       proxy.$modal.confirm(`是否要添加?`).then(() => {
-        getRouter({ audioList: JSON.stringify(params.item.__draggable_context.element), disabled: true })
+        getRouter('/scene/presets/detail', { audioList: JSON.stringify(params.item.__draggable_context.element), disabled: true })
       }).catch(() => { })
     }
   } else {
@@ -125,62 +98,14 @@ function onEnd(params) {
   }
 }
 
-// 弹窗
-const dialogVisible = ref(false)
-// 弹窗标题
-const title = ref('')
-const getAddDialog = () => {
-  dialogVisible.value = true
-  title.value = '新增'
-}
-// 打开弹窗
-function getDialog(row) {
-  if (row.auditStatus === 2) {
-    if (checkPermi(['scene:presets:editScene'])) {
-      dialogVisible.value = true
-      getDetail(row.takeId)
-    }
+// 场景详情
+const getDetail = (query) => {
+  if (checkPermi(['scene:presets:editScene'])) {
+    getRouter('/scene/presets/sceneDetail', query)
   }
 }
-// 详情
-function getDetail(id) {
-  title.value = '编辑'
-  detail({ id: id }).then(res => {
-    if (res.code === 0) {
-      data.dialogForm = res.data
-    }
-  })
-}
-// 上传音频
-function upload(file) {
-  data.dialogForm.list = file
-}
-// 提交
-function getSubmit() {
-  proxy.$refs.dialogForm.validate((valid) => {
-    if (valid) {
-      submit(data.dialogForm).then(res => {
-        if (res.code === 0) {
-          proxy.$modal.msgSuccess('提交成功！')
-          getClose()
-          getList()
-        }
-      })
-    } else {
-      return false
-    }
-  })
-}
-// 取消
-function getClose() {
-  dialogVisible.value = false
-  data.dialogForm = {}
-  proxy.$refs.dialogForm.resetFields()
-  if (title.value === '新增') {
-    proxy.$refs.customUpload.onRefresh()
-  }
-}
-// 删除
+
+// 删除场景
 function getDelete(row) {
   proxy.$modal.confirm(`是否删除${row.takeName}`).then(() => {
     remove(row.takeId).then(res => {
@@ -193,9 +118,9 @@ function getDelete(row) {
 }
 
 // 新增预设
-function getRouter(query) {
+function getRouter(path, query) {
   proxy.$router.push({
-    path: `/scene/presets/detail`,
+    path: path,
     query
   })
 }

src/views/scene/presets/sceneDetail.vue

@@ -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>