|
|
@@ -107,14 +107,15 @@
|
|
|
v-model:limit="queryParams.pageSize" @pagination="getList" />
|
|
|
</el-card>
|
|
|
<!-- 添加或修改轮播组对话框 -->
|
|
|
- <el-dialog :title="dialog.title" v-model="dialog.visible" width="1200px" append-to-body>
|
|
|
+ <el-dialog :title="dialog.title" v-model="dialog.visible" width="1200px" append-to-body @close="onDialogClose">
|
|
|
<div class="dialog-container">
|
|
|
<!-- 左侧文件列表 -->
|
|
|
<div class="table-container">
|
|
|
<!-- 界面名称输入框 -->
|
|
|
<el-input v-model="itemName" placeholder="请输入轮播组名称" class="interface-input"></el-input>
|
|
|
|
|
|
- <el-table ref="fileTable" :data="minioDataList" reserve-selection row-key="id" @selection-change="handleSelectionFile" @select="handleSelect" @select-all="handleSelectAll">
|
|
|
+ <el-table ref="fileTable" :data="minioDataList" reserve-selection row-key="id"
|
|
|
+ @selection-change="handleSelectionFile" @select="handleSelect" @select-all="handleSelectAll">
|
|
|
<el-table-column type="selection" width="55" header-align="center" />
|
|
|
<el-table-column label="类型" header-align="center" prop="type" width="80">
|
|
|
<template #default="scope">
|
|
|
@@ -137,31 +138,28 @@
|
|
|
|
|
|
<!-- 右侧选中文件列表 -->
|
|
|
<div class="selected-container">
|
|
|
- <!-- 自定义表头 -->
|
|
|
- <div class="draggable-header" style="display: flex; align-items: center; background: #fafafa; border-bottom: 1px solid #eee; min-height: 48px; font-weight: bold;">
|
|
|
- <span style="width:80px; text-align:center;">排序</span>
|
|
|
- <span style="flex:1;">文件名</span>
|
|
|
- <span style="width:120px; margin-left:8px;">播放时长</span>
|
|
|
- </div>
|
|
|
- <!-- 拖拽列表体 -->
|
|
|
- <draggable
|
|
|
- v-model="selectedFiles"
|
|
|
- item-key="id"
|
|
|
- @end="onSelectedFilesDragEnd"
|
|
|
- :animation="200"
|
|
|
- tag="div"
|
|
|
- >
|
|
|
- <template #item="{ element, index }">
|
|
|
- <div class="draggable-row" :draggable="true" style="display: flex; align-items: center; border-bottom: 1px solid #eee; min-height: 48px; cursor: move;">
|
|
|
- <span class="order-number" style="width:80px; text-align:center;">{{ element.order }}</span>
|
|
|
- <span style="flex:1;">{{ element.name }}</span>
|
|
|
- <el-input-number :disabled="element.type !== 1" v-model="element.duration" :min="1" :max="300" style="width:120px; margin-left:8px;" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </draggable>
|
|
|
- <!-- 空数据提示 -->
|
|
|
- <div v-if="selectedFiles.length === 0" style="text-align:center; color:#999; padding: 16px 0;">暂无数据</div>
|
|
|
-</div>
|
|
|
+ <!-- 自定义表头 -->
|
|
|
+ <div class="draggable-header"
|
|
|
+ style="display: flex; align-items: center; background: #fafafa; border-bottom: 1px solid #eee; min-height: 48px; font-weight: bold;">
|
|
|
+ <span style="width:80px; text-align:center;">排序</span>
|
|
|
+ <span style="flex:1;">文件名</span>
|
|
|
+ <span style="width:120px; margin-left:8px;">播放时长</span>
|
|
|
+ </div>
|
|
|
+ <!-- 拖拽列表体 -->
|
|
|
+ <draggable v-model="selectedFiles" item-key="id" @end="onSelectedFilesDragEnd" :animation="200" tag="div">
|
|
|
+ <template #item="{ element, index }">
|
|
|
+ <div class="draggable-row" :draggable="true"
|
|
|
+ style="display: flex; align-items: center; border-bottom: 1px solid #eee; min-height: 48px; cursor: move;">
|
|
|
+ <span class="order-number" style="width:80px; text-align:center;">{{ element.order }}</span>
|
|
|
+ <span style="flex:1;">{{ element.name }}</span>
|
|
|
+ <el-input-number :disabled="element.type !== 1" v-model="element.duration" :min="1" :max="300"
|
|
|
+ style="width:120px; margin-left:8px;" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </draggable>
|
|
|
+ <!-- 空数据提示 -->
|
|
|
+ <div v-if="selectedFiles.length === 0" style="text-align:center; color:#999; padding: 16px 0;">暂无数据</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<div class="dialog-footer">
|
|
|
@@ -453,6 +451,12 @@ const cancel = () => {
|
|
|
reset();
|
|
|
dialog.visible = false;
|
|
|
splitDialog.visible = false;
|
|
|
+ onDialogClose();
|
|
|
+};
|
|
|
+
|
|
|
+/** 新建轮播组弹窗关闭时清空选中文件 */
|
|
|
+const onDialogClose = () => {
|
|
|
+ selectedFiles.value = [];
|
|
|
};
|
|
|
|
|
|
/** 表单重置 */
|