素材管理添加图片表格

yudao-admin-vue3/src/views/infra/file/index.vue

@@ -34,14 +34,6 @@
     <div class="content-wrap">
       <ContentWrap>
         <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
-					<!-- <el-form-item label="文件路径" prop="path">
-                <el-input
-                  v-model="queryParams.path"
-                  placeholder="请输入文件路径"
-                  clearable
-                  @keyup.enter="handleQuery"
-                />
-              </el-form-item> -->
           <el-form-item label="文件类型" prop="type" width="80">
             <el-input v-model="queryParams.type" placeholder="请输入文件类型" clearable
                       @keyup.enter="handleQuery" />
@@ -63,12 +55,15 @@
               <Icon icon="ep:upload" class="mr-5px" /> 上传文件
             </el-button>
           </el-form-item>
+          <span><img @click="liebiao" style="cursor: pointer;" class="mr-10px h-30px w-30px" src="@/assets/imgs/liebiao.png" /></span>
+          <span><img @click="tubiao" style="cursor: pointer;" class="mr-10px h-30px w-30px" src="@/assets/imgs/tubiao.png" /></span>
         </el-form>
+
       </ContentWrap>
 
 
-			<ContentWrap>
+
-				<el-table v-loading="loading" :data="list">
+      <el-table v-loading="loading" :data="list" v-show="panduan == '1'">
         <el-table-column label="文件内容" align="center" prop="url" width="110px">
           <template #default="{ row }">
             <el-image v-if="row.type.includes('image')" class="h-80px w-80px" lazy :src="row.url"
@@ -82,14 +77,6 @@
         <el-table-column label="文件名" align="center" prop="name" :show-overflow-tooltip="true" />
         <!-- <el-table-column label="文件路径" align="center" prop="path" :show-overflow-tooltip="true" /> -->
         <el-table-column label="URL" align="center" prop="url" :show-overflow-tooltip="true" />
-					<!-- <el-table-column label="文件大小" align="center" prop="size" width="120"
-						:formatter="fileSizeFormatter" /> -->
-					<!-- <el-table-column label="文件类型" align="center" prop="type" width="180px" />
-					<el-table-column label="图片分类" align="center" prop="picType">
-						<template #default="scope">
-							<dict-tag :type="DICT_TYPE.INFRA_FILE_TYPE" :value="scope.row.picType" />
-						</template>
-					</el-table-column> -->
 
         <el-table-column label="上传时间" align="center" prop="createTime" width="180"
                          :formatter="dateFormatter" />
@@ -106,7 +93,18 @@
           </template>
         </el-table-column>
       </el-table>
-			</ContentWrap>
+
+      <div v-show="panduan == '2'">
+        <!-- 图片展示区域 -->
+        <div class="image-container">
+          <div v-for="item in tubiaoData" :key="item.id" class="image-item">
+            <img :src="item.url" alt="图表" />
+          </div>
+        </div>
+      </div>
+
+
+
       <!-- 分页 -->
       <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
                   @pagination="getList" />
@@ -169,6 +167,8 @@
   const dialogVisibles = ref(false) // 弹窗的是否展示
   const dialogTitles = ref('') // 弹窗的标题
   const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+  const panduan = ref('1')
+  const tubiaoData = ref<FileDataVO[]>([]);
   const formData = ref({
     id: undefined,
     sort: undefined,
@@ -210,17 +210,37 @@
     try {
       const data = await FileApi.getFilePage(queryParams)
       list.value = data.list
+      tubiaoData.value = data.list
+      console.log('111111',tubiaoData)
       total.value = data.total
     } finally {
       loading.value = false
     }
   }
+  interface FileDataVO {
+    id: string
+    configId: string
+    path: string
+    name: string
+    url: string
+    type: string
+    picType: string
+    size: string
+    createTime: Date
+  }
+
+  const tubiao = () => {
+    panduan.value = '2'
+  }
+
+  const liebiao = () => {
+    panduan.value = '1'
+  }
 
   //新增分类
   const createType = () => {
     dialogVisibles.value = true
     dialogTitles.value = '新增分类'
-
   }
 
   /** 添加分类菜单 */
@@ -291,7 +311,6 @@
   const getTypeList = async () => {
     const data = await DictDataApi.getTypeList()
     typeMenu.value = data
-		console.log('1111111111', typeMenu)
   }
 
 
@@ -373,4 +392,29 @@
     overflow-y: auto;
     /* 允许内容区域滚动 */
   }
+
+
+  /* 图片容器样式 */
+  .image-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;  /* 设置图片之间的间距 */
+    justify-content: flex-start; /* 如果图片少于5张，会平均分布 */
+    max-width: 1000px; /* 设置外部容器的最大宽度 */
+    margin: 0 auto;  /* 居中显示 */
+  }
+
+  /* 每张图片占用的宽度，使每行显示5张 */
+  .image-item {
+    width: calc(20% - 8px);  /* 宽度设为容器的20%，减去间距 */
+  }
+
+  /* 设置图片的最大宽度 */
+  .image-item img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px; /* 图片边缘圆角（可选） */
+  }
+
+
 </style>