工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
潘志宝
3 天以前 221918bba28d2384d03c596a68256d7832e4a0e0
提交 | 用户 | 时间
820397 1 <template>
H 2   <!-- 搜索 -->
3   <ContentWrap>
4     <el-form
5       class="-mb-15px"
6       :model="queryParams"
7       ref="queryFormRef"
8       :inline="true"
9       label-width="68px"
10     >
11       <el-form-item label="文件路径" prop="path">
12         <el-input
13           v-model="queryParams.path"
14           placeholder="请输入文件路径"
15           clearable
16           @keyup.enter="handleQuery"
17         />
18       </el-form-item>
19       <el-form-item label="文件类型" prop="type" width="80">
20         <el-input
21           v-model="queryParams.type"
22           placeholder="请输入文件类型"
23           clearable
24           @keyup.enter="handleQuery"
25         />
26       </el-form-item>
27       <el-form-item label="创建时间" prop="createTime">
28         <el-date-picker
29           v-model="queryParams.createTime"
30           value-format="YYYY-MM-DD HH:mm:ss"
31           type="daterange"
32           start-placeholder="开始日期"
33           end-placeholder="结束日期"
34           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
35         />
36       </el-form-item>
37       <el-form-item>
38         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
39         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
40         <el-button type="primary" plain @click="openForm">
41           <Icon icon="ep:upload" class="mr-5px" /> 上传文件
42         </el-button>
43       </el-form-item>
44     </el-form>
45   </ContentWrap>
46
47   <!-- 列表 -->
48   <ContentWrap>
49     <el-table v-loading="loading" :data="list">
50       <el-table-column label="文件名" align="center" prop="name" :show-overflow-tooltip="true" />
51       <el-table-column label="文件路径" align="center" prop="path" :show-overflow-tooltip="true" />
52       <el-table-column label="URL" align="center" prop="url" :show-overflow-tooltip="true" />
53       <el-table-column
54         label="文件大小"
55         align="center"
56         prop="size"
57         width="120"
58         :formatter="fileSizeFormatter"
59       />
60       <el-table-column label="文件类型" align="center" prop="type" width="180px" />
61       <el-table-column label="文件内容" align="center" prop="url" width="110px">
62         <template #default="{ row }">
63           <el-image
64             v-if="row.type.includes('image')"
65             class="h-80px w-80px"
66             lazy
67             :src="row.url"
68             :preview-src-list="[row.url]"
69             preview-teleported
70             fit="cover"
71           />
72           <el-link
73             v-else-if="row.type.includes('pdf')"
74             type="primary"
75             :href="row.url"
76             :underline="false"
77             target="_blank"
78             >预览</el-link
79           >
80           <el-link v-else type="primary" download :href="row.url" :underline="false" target="_blank"
81             >下载</el-link
82           >
83         </template>
84       </el-table-column>
85       <el-table-column
86         label="上传时间"
87         align="center"
88         prop="createTime"
89         width="180"
90         :formatter="dateFormatter"
91       />
92       <el-table-column label="操作" align="center">
93         <template #default="scope">
c9a6f7 94           <el-button link type="primary" @click="copyToClipboard(scope.row.url)">
H 95             复制链接
96           </el-button>
820397 97           <el-button
H 98             link
99             type="danger"
100             @click="handleDelete(scope.row.id)"
101             v-hasPermi="['infra:file:delete']"
102           >
103             删除
104           </el-button>
105         </template>
106       </el-table-column>
107     </el-table>
108     <!-- 分页 -->
109     <Pagination
110       :total="total"
111       v-model:page="queryParams.pageNo"
112       v-model:limit="queryParams.pageSize"
113       @pagination="getList"
114     />
115   </ContentWrap>
116
117   <!-- 表单弹窗：添加/修改 -->
118   <FileForm ref="formRef" @success="getList" />
119 </template>
120 <script lang="ts" setup>
121 import { fileSizeFormatter } from '@/utils'
122 import { dateFormatter } from '@/utils/formatTime'
123 import * as FileApi from '@/api/infra/file'
124 import FileForm from './FileForm.vue'
125
126 defineOptions({ name: 'InfraFile' })
127
128 const message = useMessage() // 消息弹窗
129 const { t } = useI18n() // 国际化
130
131 const loading = ref(true) // 列表的加载中
132 const total = ref(0) // 列表的总页数
133 const list = ref([]) // 列表的数据
134 const queryParams = reactive({
135   pageNo: 1,
136   pageSize: 10,
137   name: undefined,
138   type: undefined,
139   path: undefined,
140   createTime: []
141 })
142 const queryFormRef = ref() // 搜索的表单
143
144 /** 查询列表 */
145 const getList = async () => {
146   loading.value = true
147   try {
148     const data = await FileApi.getFilePage(queryParams)
149     list.value = data.list
150     total.value = data.total
151   } finally {
152     loading.value = false
153   }
154 }
155
156 /** 搜索按钮操作 */
157 const handleQuery = () => {
158   queryParams.pageNo = 1
159   getList()
160 }
161
162 /** 重置按钮操作 */
163 const resetQuery = () => {
164   queryFormRef.value.resetFields()
165   handleQuery()
166 }
167
168 /** 添加/修改操作 */
169 const formRef = ref()
170 const openForm = () => {
171   formRef.value.open()
172 }
173
c9a6f7 174 /** 复制到剪贴板方法 */
H 175 const copyToClipboard = (text: string) => {
176   navigator.clipboard.writeText(text).then(() => {
177     message.success('复制成功')
178   })
179 }
180
820397 181 /** 删除按钮操作 */
H 182 const handleDelete = async (id: number) => {
183   try {
184     // 删除的二次确认
185     await message.delConfirm()
186     // 发起删除
187     await FileApi.deleteFile(id)
188     message.success(t('common.delSuccess'))
189     // 刷新列表
190     await getList()
191   } catch {}
192 }
193
194 /** 初始化 **/
195 onMounted(() => {
196   getList()
197 })
198 </script>