修改

src/views/other-file/image-data.vue

@@ -9,7 +9,19 @@
                     </el-button>
                 </HcTooltip>
             </template>
-            <HcTable :column="tableListColumn" :datas="tableListData" :loading="tableLoading" is-new :index-style="{ width: 60 }">
+            <template #extra>
+                <HcTooltip keys="image-data-manage">
+                    <el-button v-if="!isShowImageList" hc-btn type="primary" @click="showImageList">
+                        <HcIcon name="file-list" />
+                        <span>相册列表</span>
+                    </el-button>
+                </HcTooltip>
+                <el-button v-if="isShowImageList" hc-btn type="primary" @click="goBackList">
+                    <HcIcon name="arrow-left" />
+                    <span>返回主页</span>
+                </el-button>
+            </template>
+            <HcTable v-if="!isShowImageList" :column="tableListColumn" :datas="tableListData" :loading="tableLoading" is-new :index-style="{ width: 60 }">
                 <template #fileType="{ row }">
                     {{ row.fileType == 1 ? '视频文件' : '图片文件' }}
                 </template>
@@ -20,6 +32,18 @@
                     </HcTooltip>
                 </template>
             </HcTable>
+            <HcTable v-else :column="imageListColumn" :datas="imageListData" :loading="imageLoading" is-new :index-style="{ width: 60 }">
+                <template #count="{ row }">
+                    <span v-if="!row.isEditing">{{ row.count }}</span>
+                    
+                    <el-input v-else v-model="row.count" placeholder="请输入内容" />
+                </template>
+                <template #action="{ row }">
+                    <el-link v-if="!row.isEditing" type="primary" @click="startEditing(row)">编辑</el-link>
+                    <el-link v-else type="success" @click="saveEditing(row)">保存</el-link>
+                    <el-link type="danger" @click="handleDelete(row)">删除</el-link>
+                </template>
+            </HcTable>
         </HcNewCard>
         <!-- 分类管理 弹框 -->
         <hc-new-dialog v-model="showSortModal" is-table title="分类管理" widths="62rem">
@@ -158,6 +182,44 @@ const saveConfig = async (row) => {
         getClassIfyList()
     }
 }
+
+//显示相册列表
+const isShowImageList = ref(false)
+const showImageList = () => {
+    isShowImageList.value = true
+  
+}
+const goBackList = () => {
+    isShowImageList.value = false
+  
+}
+const imageListColumn = ref([
+    { key: 'className', name: '分类名称' },
+    { key: 'count', name: '分组号', width:100 },
+    { key: 'user', name: '主要拍摄者', width: 100 },
+    { key: 'date', name: '拍摄起止日期' },
+    { key: 'fileName', name: '文件题名' },
+    { key: 'action', name: '操作', width: 100 },
+])
+const imageListData = ref([
+    { className:'基础设施1', count: '1', user: '张三', date: '2023-01-01 至 2023-01-31', fileName: '基础设施照片1.jpg' },
+    { className:'基础设施2', count: '1', user: '张三', date: '2023-01-01 至 2023-01-31', fileName: '基础设施照片1.jpg' },
+    { className:'基础设施3', count: '1', user: '张三', date: '2023-01-01 至 2023-01-31', fileName: '基础设施照片1.jpg' },
+])
+const imageLoading = ref(false)
+
+const handleDelete = (row) => {
+    // 这里可以添加删除逻辑
+    console.log('删除:', row)
+}
+const startEditing = (row) => {
+    // 这里可以添加删除逻辑
+
+    row.isEditing = true
+}
+const saveEditing = (row) => {
+       row.isEditing = false
+}
 </script>
 
 <style lang="scss" scoped>