Quellcode durchsuchen

🔧fix(item): clear selected files on dialog close and improve code formatting

Shinohara Haruna vor 6 Monaten
Ursprung
Commit
ef8d314c2e
1 geänderte Dateien mit 31 neuen und 27 gelöschten Zeilen
  1. 31 27
      smsb-plus-ui/src/views/smsb/item/index.vue

+ 31 - 27
smsb-plus-ui/src/views/smsb/item/index.vue

@@ -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 = [];
 };
 
 /** 表单重置 */