From 20c946cdee699f70538680398e5f1d3041d51e3c Mon Sep 17 00:00:00 2001
From: sonjinyon <2476687577@qq.com>
Date: Fri, 8 Nov 2024 18:59:44 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B4=A0=E6=9D=90=E7=AE=A1=E7=90=86=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=9B=BE=E7=89=87=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yudao-admin-vue3/src/assets/imgs/liebiao.png  | Bin 0 -> 2873 bytes
 yudao-admin-vue3/src/assets/imgs/tubiao.png   | Bin 0 -> 3746 bytes
 .../src/views/infra/file/index.vue            | 700 ++++++++++--------
 3 files changed, 372 insertions(+), 328 deletions(-)
 create mode 100644 yudao-admin-vue3/src/assets/imgs/liebiao.png
 create mode 100644 yudao-admin-vue3/src/assets/imgs/tubiao.png

diff --git a/yudao-admin-vue3/src/assets/imgs/liebiao.png b/yudao-admin-vue3/src/assets/imgs/liebiao.png
new file mode 100644
index 0000000000000000000000000000000000000000..49c5948616f7dbb58f6e95c778fa052e8780e8dd
GIT binary patch
literal 2873
zcmds3`#aO^AD>Ud2g#5_Av0{!BIU3Ww%HtWK8+-olv0^P4ok8Pg(<^R4pS5<l@yQX
zNj8T}Mm6M6QOhYKhaOhRX?^!R-~ZvcuJ8AU`+oiKy06!Lz3=P&x?k@sPj^Q}`R(!$
z2t?7@iQp|k-roz9k?b|3M>i!P73b}UhdknI&p;sZB4+~5Hz{Pk)Gg<5fEu;uJ5+h6
zv4YA-&$+(hMM#D;T>LD}w<g_J?j6>PQLdAvgELkbexrV}diYWuB<r!gi#$RtLlN$W
z2b7;Eq#C2ksWubn?6M6cI*2HL`v=jq1gHGEvRP=ew#r{&Hw$mZHH&O*T69O`bU|$B
zQDBQDjM^%O!qO`?0dMuFaP1v1EbOWjI1NV2^u_3RgHlkly(fnUl(8@!tJ^seQa`QA
zO-Bm)FOv6;FdO`5kL==q8Y9|HZ?CiczJ%0ApV|k|E)^7R`2JDKBclX1EjBxTHS+gH
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

literal 0
HcmV?d00001

diff --git a/yudao-admin-vue3/src/assets/imgs/tubiao.png b/yudao-admin-vue3/src/assets/imgs/tubiao.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b76ca448e1f59ae42c3f84ae2ba35503e7229ad
GIT binary patch
literal 3746
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
b0sG?Ho9C{p-B<}cHk~N^RWnSPp(FA?IRDn@

literal 0
HcmV?d00001

diff --git a/yudao-admin-vue3/src/views/infra/file/index.vue b/yudao-admin-vue3/src/views/infra/file/index.vue
index f2c18c9..e415b94 100644
--- a/yudao-admin-vue3/src/views/infra/file/index.vue
+++ b/yudao-admin-vue3/src/views/infra/file/index.vue
@@ -1,376 +1,420 @@
 <template>
-	<doc-alert title="上传下载" url="https://doc.iocoder.cn/file/" />
+  <doc-alert title="上传下载" url="https://doc.iocoder.cn/file/" />
 
-	<div class="flex-container">
-		<!-- 菜单区域 -->
-		<div class="menu-area">
+  <div class="flex-container">
+    <!-- 菜单区域 -->
+    <div class="menu-area">
 
-			<el-button type="primary" plain @click="createType" style="width: 90;font-size: 12px;">
-				<Icon icon="ep:plus" class="mr-5px" /> 新增分类
-			</el-button>
+      <el-button type="primary" plain @click="createType" style="width: 90;font-size: 12px;">
+        <Icon icon="ep:plus" class="mr-5px" /> 新增分类
+      </el-button>
 
-			<el-menu :default-active="targetMenuId" style="width:182px">
-				<el-menu-item :index="targetMenuId" :key="targetMenuId" @click="clickMenu(targetMenuId)">
-					全部类型
-				</el-menu-item>
-				<el-menu-item v-for="item in typeMenu" :index="item.value" :key="item.value"
-					@click="clickMenu(item.value)">
-					{{ item.label }}
-					<el-icon style="margin-left: 60px;width: 10px;" @mouseover="showActions = item.value"
-						@mouseleave="showActions = null">
-						<MoreFilled />
-						<div v-if="showActions === item.value" class="action-buttons">
-							<el-button size="small" @click.stop="editItem(item.id,item.label)">编辑</el-button>
-							<br />
-							<el-button size="small" @click.stop="deleteItem(item.id)">删除</el-button>
-						</div>
-					</el-icon>
-				</el-menu-item>
-			</el-menu>
+      <el-menu :default-active="targetMenuId" style="width:182px">
+        <el-menu-item :index="targetMenuId" :key="targetMenuId" @click="clickMenu(targetMenuId)">
+          全部类型
+        </el-menu-item>
+        <el-menu-item v-for="item in typeMenu" :index="item.value" :key="item.value"
+                      @click="clickMenu(item.value)">
+          {{ item.label }}
+          <el-icon style="margin-left: 60px;width: 10px;" @mouseover="showActions = item.value"
+                   @mouseleave="showActions = null">
+            <MoreFilled />
+            <div v-if="showActions === item.value" class="action-buttons">
+              <el-button size="small" @click.stop="editItem(item.id,item.label)">编辑</el-button>
+              <br />
+              <el-button size="small" @click.stop="deleteItem(item.id)">删除</el-button>
+            </div>
+          </el-icon>
+        </el-menu-item>
+      </el-menu>
 
-		</div>
+    </div>
 
-		<!-- 内容区域 -->
-		<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" />
-					</el-form-item>
+    <!-- 内容区域 -->
+    <div class="content-wrap">
+      <ContentWrap>
+        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+          <el-form-item label="文件类型" prop="type" width="80">
+            <el-input v-model="queryParams.type" placeholder="请输入文件类型" clearable
+                      @keyup.enter="handleQuery" />
+          </el-form-item>
 
-					<el-form-item label="创建时间" prop="createTime">
-						<el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss"
-							type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
-							:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" />
-					</el-form-item>
-					<el-form-item>
-						<el-button @click="handleQuery">
-							<Icon icon="ep:search" class="mr-5px" /> 搜索
-						</el-button>
-						<el-button @click="resetQuery">
-							<Icon icon="ep:refresh" class="mr-5px" /> 重置
-						</el-button>
-						<el-button type="primary" plain @click="openForm">
-							<Icon icon="ep:upload" class="mr-5px" /> 上传文件
-						</el-button>
-					</el-form-item>
-				</el-form>
-			</ContentWrap>
+          <el-form-item label="创建时间" prop="createTime">
+            <el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss"
+                            type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
+                            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" />
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery">
+              <Icon icon="ep:search" class="mr-5px" /> 搜索
+            </el-button>
+            <el-button @click="resetQuery">
+              <Icon icon="ep:refresh" class="mr-5px" /> 重置
+            </el-button>
+            <el-button type="primary" plain @click="openForm">
+              <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-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"
-								:preview-src-list="[row.url]" preview-teleported fit="cover" />
-							<el-link v-else-if="row.type.includes('pdf')" type="primary" :href="row.url"
-								:underline="false" target="_blank">预览</el-link>
-							<el-link v-else type="primary" download :href="row.url" :underline="false"
-								target="_blank">下载</el-link>
-						</template>
-					</el-table-column>
-					<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" />
-					<el-table-column label="操作" align="center">
-						<template #default="scope">
-							<el-button link type="primary"
-								@click="updateForm('update', scope.row.id , scope.row.picType)">
-								更改类型
-							</el-button>
-							<el-button link type="danger" @click="handleDelete(scope.row.id)"
-								v-hasPermi="['infra:file:delete']">
-								删除
-							</el-button>
-						</template>
-					</el-table-column>
-				</el-table>
-			</ContentWrap>
-			<!-- 分页 -->
-			<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
-				@pagination="getList" />
+      <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"
+                      :preview-src-list="[row.url]" preview-teleported fit="cover" />
+            <el-link v-else-if="row.type.includes('pdf')" type="primary" :href="row.url"
+                     :underline="false" target="_blank">预览</el-link>
+            <el-link v-else type="primary" download :href="row.url" :underline="false"
+                     target="_blank">下载</el-link>
+          </template>
+        </el-table-column>
+        <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" />
 
-		</div>
-	</div>
-	<!-- 表单弹窗：添加/修改 -->
-	<FileForm ref="formRef" @success="getList" />
+        <el-table-column label="上传时间" align="center" prop="createTime" width="180"
+                         :formatter="dateFormatter" />
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+            <el-button link type="primary"
+                       @click="updateForm('update', scope.row.id , scope.row.picType)">
+              更改类型
+            </el-button>
+            <el-button link type="danger" @click="handleDelete(scope.row.id)"
+                       v-hasPermi="['infra:file:delete']">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-	<UpdateForm ref="forRef" @success="getList" />
+      <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>
 
-	<Dialog v-model="dialogVisibles" :title="dialogTitles">
-		<el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="80px">
 
-			<el-form-item label="数据标签" prop="label">
-				<el-input v-model="formData.label" placeholder="请输入数据标签" />
-			</el-form-item>
-			<el-form-item label="显示排序" prop="sort">
-				<el-input-number v-model="formData.sort" :min="0" controls-position="right" />
-			</el-form-item>
 
-		</el-form>
-		<template #footer>
-			<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-			<el-button @click="dialogVisibles = false">取 消</el-button>
-		</template>
-	</Dialog>
+      <!-- 分页 -->
+      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
+                  @pagination="getList" />
 
-	<Dialog v-model="dialogVisible" :title="dialogTitle">
-		<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
-			<el-form-item label="数据标签" prop="label">
-				<el-input v-model="updateLabel" placeholder="请输入数据标签" />
-			</el-form-item>
-		</el-form>
-		<template #footer>
-			<el-button :disabled="formLoading" type="primary" @click="submitForms">确 定</el-button>
-			<el-button @click="dialogVisible = false">取 消</el-button>
-		</template>
-	</Dialog>
+    </div>
+  </div>
+  <!-- 表单弹窗：添加/修改 -->
+  <FileForm ref="formRef" @success="getList" />
+
+  <UpdateForm ref="forRef" @success="getList" />
+
+  <Dialog v-model="dialogVisibles" :title="dialogTitles">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="80px">
+
+      <el-form-item label="数据标签" prop="label">
+        <el-input v-model="formData.label" placeholder="请输入数据标签" />
+      </el-form-item>
+      <el-form-item label="显示排序" prop="sort">
+        <el-input-number v-model="formData.sort" :min="0" controls-position="right" />
+      </el-form-item>
+
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisibles = false">取 消</el-button>
+    </template>
+  </Dialog>
+
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
+      <el-form-item label="数据标签" prop="label">
+        <el-input v-model="updateLabel" placeholder="请输入数据标签" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForms">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
 
 
 </template>
 
 <script lang="ts" setup>
-	import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
-	import { fileSizeFormatter } from '@/utils'
-	import { Search, MoreFilled } from '@element-plus/icons-vue';
-	import { dateFormatter } from '@/utils/formatTime'
-	// import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-	import * as FileApi from '@/api/infra/file'
-	import FileForm from './FileForm.vue'
-	import UpdateForm from './updateForm.vue'
-	import * as DictDataApi from '@/api/system/dict/dict.data'
-	const typeMenu = ref<DictDataApi.DictDataVO[]>([]) // 
-	const targetMenuId = ref('0')
-	defineOptions({ name: 'InfraFile' })
-	const showActions = ref(null);
-	const dialogVisible = ref(false) // 弹窗的是否展示
-	const dialogTitle = ref('') // 弹窗的标题
-	const dialogVisibles = ref(false) // 弹窗的是否展示
-	const dialogTitles = ref('') // 弹窗的标题
-	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-	const formData = ref({
-		id: undefined,
-		sort: undefined,
-		label: '',
-		value: '',
-		dictType: '',
-		// status: CommonStatusEnum.ENABLE,
-		colorType: '',
-		cssClass: '',
-		remark: ''
-	})
-	const formRules = reactive({
-		label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
-		sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
-	})
-	const updateLabel = ref('')
-	const message = useMessage() // 消息弹窗
-	const { t } = useI18n() // 国际化
+  import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+  import { fileSizeFormatter } from '@/utils'
+  import { Search, MoreFilled } from '@element-plus/icons-vue';
+  import { dateFormatter } from '@/utils/formatTime'
+  // import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+  import * as FileApi from '@/api/infra/file'
+  import FileForm from './FileForm.vue'
+  import UpdateForm from './updateForm.vue'
+  import * as DictDataApi from '@/api/system/dict/dict.data'
+  const typeMenu = ref<DictDataApi.DictDataVO[]>([]) //
+  const targetMenuId = ref('0')
+  defineOptions({ name: 'InfraFile' })
+  const showActions = ref(null);
+  const dialogVisible = ref(false) // 弹窗的是否展示
+  const dialogTitle = ref('') // 弹窗的标题
+  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,
+    label: '',
+    value: '',
+    dictType: '',
+    // status: CommonStatusEnum.ENABLE,
+    colorType: '',
+    cssClass: '',
+    remark: ''
+  })
+  const formRules = reactive({
+    label: [{ required: true, message: '数据标签不能为空', trigger: 'blur' }],
+    sort: [{ required: true, message: '数据顺序不能为空', trigger: 'blur' }],
+  })
+  const updateLabel = ref('')
+  const message = useMessage() // 消息弹窗
+  const { t } = useI18n() // 国际化
 
-	const loading = ref(true) // 列表的加载中
-	const total = ref(0) // 列表的总页数
-	const list = ref([]) // 列表的
-	const menuId = ref()
+  const loading = ref(true) // 列表的加载中
+  const total = ref(0) // 列表的总页数
+  const list = ref([]) // 列表的
+  const menuId = ref()
 
-	const queryParams = reactive({
-		pageNo: 1,
-		pageSize: 10,
-		name: undefined,
-		type: undefined,
-		picType: '',
-		path: undefined,
-		createTime: [],
-	})
-	const queryFormRef = ref() // 搜索的表单
+  const queryParams = reactive({
+    pageNo: 1,
+    pageSize: 10,
+    name: undefined,
+    type: undefined,
+    picType: '',
+    path: undefined,
+    createTime: [],
+  })
+  const queryFormRef = ref() // 搜索的表单
 
-	/** 查询列表 */
-	const getList = async () => {
-		loading.value = true
-		try {
-			const data = await FileApi.getFilePage(queryParams)
-			list.value = data.list
-			total.value = data.total
-		} finally {
-			loading.value = false
-		}
-	}
+  /** 查询列表 */
+  const getList = async () => {
+    loading.value = true
+    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 createType = () => {
-		dialogVisibles.value = true
-		dialogTitles.value = '新增分类'
+  const tubiao = () => {
+    panduan.value = '2'
+  }
 
-	}
+  const liebiao = () => {
+    panduan.value = '1'
+  }
 
-	/** 添加分类菜单 */
-	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-	const submitForm = async () => {
-		// 校验表单
-		if (!formRef) return
-		const valid = await formRef.value.validate()
-		if (!valid) return
-		// 提交请求
-		formLoading.value = true
-		try {
-			const data = formData.value as DictDataApi.DictDataVO
-			await DictDataApi.createPicType(data)
-			message.success(t('common.createSuccess'))
-			dialogVisibles.value = false
-			// 发送操作成功的事件
-			emit('success')
-			getTypeList()
+  //新增分类
+  const createType = () => {
+    dialogVisibles.value = true
+    dialogTitles.value = '新增分类'
+  }
 
-		} finally {
-			formLoading.value = false
-		}
-	}
+  /** 添加分类菜单 */
+  const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+  const submitForm = async () => {
+    // 校验表单
+    if (!formRef) return
+    const valid = await formRef.value.validate()
+    if (!valid) return
+    // 提交请求
+    formLoading.value = true
+    try {
+      const data = formData.value as DictDataApi.DictDataVO
+      await DictDataApi.createPicType(data)
+      message.success(t('common.createSuccess'))
+      dialogVisibles.value = false
+      // 发送操作成功的事件
+      emit('success')
+      getTypeList()
 
-	//修改分类菜单
-	const submitForms = async () => {
-		// 校验表单
-		if (!formRef) return
-		const valid = await formRef.value.validate()
-		if (!valid) return
-		// 提交请求
-		formLoading.value = true
-		try {
+    } finally {
+      formLoading.value = false
+    }
+  }
 
-			await DictDataApi.updateMenu(menuId.value, updateLabel.value)
-			message.success(t('common.createSuccess'))
-			dialogVisible.value = false
-			// 发送操作成功的事件
-			emit('success')
-			getTypeList()
+  //修改分类菜单
+  const submitForms = async () => {
+    // 校验表单
+    if (!formRef) return
+    const valid = await formRef.value.validate()
+    if (!valid) return
+    // 提交请求
+    formLoading.value = true
+    try {
 
-		} finally {
-			formLoading.value = false
-		}
-	}
+      await DictDataApi.updateMenu(menuId.value, updateLabel.value)
+      message.success(t('common.createSuccess'))
+      dialogVisible.value = false
+      // 发送操作成功的事件
+      emit('success')
+      getTypeList()
 
-	//分类菜单修改按钮
-	const editItem = (id : number | undefined, lable : string) => {
-		dialogVisible.value = true
-		dialogTitle.value = '菜单编辑'
-		menuId.value = id
-		updateLabel.value = lable
-		// 处理编辑事件
-		console.log('编辑:',);
-	};
-	//分类菜单删除按钮
-	const deleteItem = async (id : number | undefined) => {
-		// 处理删除事件
-		// 删除的二次确认
-		await message.delConfirm()
-		await DictDataApi.deleteMenu(id)
-		message.success(t('common.delSuccess'))
-		getTypeList()
+    } finally {
+      formLoading.value = false
+    }
+  }
 
-	};
-	//图片素材管理分类菜单
-	const getTypeList = async () => {
-		const data = await DictDataApi.getTypeList()
-		typeMenu.value = data
-		console.log('1111111111', typeMenu)
-	}
+  //分类菜单修改按钮
+  const editItem = (id : number | undefined, lable : string) => {
+    dialogVisible.value = true
+    dialogTitle.value = '菜单编辑'
+    menuId.value = id
+    updateLabel.value = lable
+    // 处理编辑事件
+    console.log('编辑:',);
+  };
+  //分类菜单删除按钮
+  const deleteItem = async (id : number | undefined) => {
+    // 处理删除事件
+    // 删除的二次确认
+    await message.delConfirm()
+    await DictDataApi.deleteMenu(id)
+    message.success(t('common.delSuccess'))
+    getTypeList()
+
+  };
+  //图片素材管理分类菜单
+  const getTypeList = async () => {
+    const data = await DictDataApi.getTypeList()
+    typeMenu.value = data
+  }
 
 
-	/**  */
-	const clickMenu = (id : string) => {
-		queryParams.picType = id
-		queryParams.pageNo = 1
-		getList()
-	}
+  /**  */
+  const clickMenu = (id : string) => {
+    queryParams.picType = id
+    queryParams.pageNo = 1
+    getList()
+  }
 
-	/** 搜索按钮操作 */
-	const handleQuery = () => {
-		queryParams.pageNo = 1
-		getList()
-	}
+  /** 搜索按钮操作 */
+  const handleQuery = () => {
+    queryParams.pageNo = 1
+    getList()
+  }
 
-	/** 重置按钮操作 */
-	const resetQuery = () => {
-		queryFormRef.value.resetFields()
-		handleQuery()
-	}
+  /** 重置按钮操作 */
+  const resetQuery = () => {
+    queryFormRef.value.resetFields()
+    handleQuery()
+  }
 
 
-	const formRef = ref()
-	const openForm = () => {
-		formRef.value.open()
-	}
+  const formRef = ref()
+  const openForm = () => {
+    formRef.value.open()
+  }
 
-	const forRef = ref()
-	/** 修改操作 */
-	const updateForm = (type : string, id : number, picType : number) => {
-		forRef.value.open(type, id, picType)
-	}
+  const forRef = ref()
+  /** 修改操作 */
+  const updateForm = (type : string, id : number, picType : number) => {
+    forRef.value.open(type, id, picType)
+  }
 
 
 
-	/** 删除按钮操作 */
-	const handleDelete = async (id : number) => {
-		try {
-			// 删除的二次确认
-			await message.delConfirm()
-			// 发起删除
-			await FileApi.deleteFile(id)
-			message.success(t('common.delSuccess'))
-			// 刷新列表
-			await getList()
-		} catch { }
-	}
+  /** 删除按钮操作 */
+  const handleDelete = async (id : number) => {
+    try {
+      // 删除的二次确认
+      await message.delConfirm()
+      // 发起删除
+      await FileApi.deleteFile(id)
+      message.success(t('common.delSuccess'))
+      // 刷新列表
+      await getList()
+    } catch { }
+  }
 
-	/** 初始化 **/
-	onMounted(() => {
-		queryParams.picType = targetMenuId.value
-		getTypeList()
-		getList()
-	})
+  /** 初始化 **/
+  onMounted(() => {
+    queryParams.picType = targetMenuId.value
+    getTypeList()
+    getList()
+  })
 </script>
 <style scoped>
-	.flex-container {
-		height: 100vh;
-		/* 使容器填满视口高度 */
-		display: flex;
-	}
+  .flex-container {
+    height: 100vh;
+    /* 使容器填满视口高度 */
+    display: flex;
+  }
 
-	.menu-area {
-		padding: 25px;
-		background-color: white;
-		width: 180px;
-		height: 1000px;
-		/* 固定高度 */
-		overflow-y: hidden;
-		/* 禁止滚动 */
-		border-right: 1px solid #e0e0e0;
-		/* 可选：添加分隔线 */
-	}
+  .menu-area {
+    padding: 25px;
+    background-color: white;
+    width: 180px;
+    height: 1000px;
+    /* 固定高度 */
+    overflow-y: hidden;
+    /* 禁止滚动 */
+    border-right: 1px solid #e0e0e0;
+    /* 可选：添加分隔线 */
+  }
 
-	.content-wrap {
-		flex-grow: 1;
-		/* 使内容区域占据剩余空间 */
-		overflow-y: auto;
-		/* 允许内容区域滚动 */
-	}
-</style>
\ No newline at end of file
+  .content-wrap {
+    flex-grow: 1;
+    /* 使内容区域占据剩余空间 */
+    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>