Merge pull request 'feat 用户手册模块' (#19) from dev-xjf into master

Reviewed-on: http://120.26.116.243:3000/root/alert-front/pulls/19

src/api/alert/exa/index.ts

@@ -77,3 +77,5 @@ export function deletePoint(ItemName: string) {
 export function importTemplate() {
   return defHttp.get({ url: '/alert/exa/get-import-template', responseType: 'blob' })
 }
+
+

src/api/infra/file/index.ts

@@ -13,6 +13,7 @@ export interface FileVO {
 
 export interface FilePageReqVO extends PageParam {
   path?: string
+  name?: string
   type?: string
   createTime?: Date[]
 }

src/views/file/file.data.ts

@@ -0,0 +1,86 @@
+import type { BasicColumn, FormSchema } from '@/components/Table'
+import { useRender } from '@/components/Table'
+
+export const columns: BasicColumn[] = [
+  {
+    title: '编号',
+    dataIndex: 'id',
+    width: 100,
+  },
+  {
+    title: '文件名',
+    dataIndex: 'name',
+    width: 200,
+  },
+  // {
+  //   title: '文件 URL',
+  //   dataIndex: 'url',
+  //   width: 180,
+  //   customRender: ({ text }) => {
+  //     return useRender.renderImg(text)
+  //   },
+  // },
+  // {
+  //   title: '文件路径',
+  //   dataIndex: 'path',
+  //   width: 180,
+  // },
+  {
+    title: '文件大小',
+    dataIndex: 'size',
+    width: 120,
+    customRender: ({ text }) => {
+      const unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+      const srcSize = Number.parseFloat(text)
+      const index = Math.floor(Math.log(srcSize) / Math.log(1024))
+      const size = srcSize / 1024 ** index
+      return `${size.toFixed(2)} ${unitArr[index]}`
+    },
+  },
+  {
+    title: '文件类型',
+    dataIndex: 'type',
+    width: 100,
+    customRender: ({ text }) => {
+      return useRender.renderTag(text)
+    },
+  },
+  // {
+  //   title: '文件内容',
+  //   dataIndex: 'content',
+  //   width: 180,
+  //   customRender: ({ text }) => {
+  //     return useRender.renderImg(text)
+  //   },
+  // },
+  {
+    title: '上传时间',
+    dataIndex: 'createTime',
+    width: 180,
+    customRender: ({ text }) => {
+      return useRender.renderDate(text)
+    },
+  },
+]
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '文件路径',
+    field: 'path',
+    component: 'Input',
+    show: false,
+    colProps: { span: 8 },
+  },
+  {
+    label: '文件名',
+    field: 'name',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    label: '创建时间',
+    field: 'createTime',
+    component: 'RangePicker',
+    colProps: { span: 8 },
+  },
+]

src/views/file/index.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { columns, searchFormSchema } from './file.data'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+import { IconEnum } from '@/enums/appEnum'
+import { BasicUpload } from '@/components/Upload'
+import { BasicTable, TableAction, useTable } from '@/components/Table'
+import { deleteFile, getFilePage } from '@/api/infra/file'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+import { copyText } from '@/utils/copyTextToClipboard'
+import { uploadApi } from '@/api/base/upload'
+import { DocAlert } from '@/components/DocAlert'
+
+defineOptions({ name: 'InfraFile' })
+
+const { t } = useI18n()
+const { createMessage } = useMessage()
+
+const uploadParams = ref({
+  Authorization: `Bearer ${getAccessToken()}`,
+})
+
+const [registerTable, { reload }] = useTable({
+  title: '文件列表',
+  api: getFilePage,
+  columns,
+  formConfig: { labelWidth: 120, schemas: searchFormSchema },
+  useSearchForm: true,
+  showTableSetting: true,
+  showIndexColumn: false,
+  actionColumn: {
+    width: 160,
+    title: t('common.action'),
+    dataIndex: 'action',
+    fixed: 'right',
+  },
+})
+
+function handleChange() {
+  reload()
+}
+
+function handleCopy(record: Recordable) {
+  copyText(record.url)
+}
+function handleDownload(record: Recordable) {
+  const link = document.createElement('a')
+  link.href = record.url
+  link.download = record.name
+  document.body.appendChild(link)
+  link.click()
+  window.URL.revokeObjectURL(link.href)
+  document.body.removeChild(link)
+
+  // copyText(record.url)
+}
+// /**
+//  * 图片及pdf文件直接预览，其他格式文件直接下载
+//  * @param file
+//  */
+// clickFile(file) {
+//   let fileType = file.fileType.toLowerCase()
+//   if (fileType === 'pdf' || fileType === 'jpg' || fileType === 'png') {
+//     let a = document.createElement('a')
+//     a.target = '_blank'
+//     a.href = file.filePath
+//     a.click()
+//   } else {
+//     fetch(file.filePath)
+//       .then((res) => res.blob())
+//       .then((blob) => {
+//         const link = document.createElement('a')
+//         link.href = URL.createObjectURL(blob)
+//         link.download = file.fileName
+//         document.body.appendChild(link)
+//         link.click()
+//         window.URL.revokeObjectURL(link.href)
+//         document.body.removeChild(link)
+//       })
+//   }
+// }
+
+async function handleDelete(record: Recordable) {
+  await deleteFile(record.id)
+  createMessage.success(t('common.delSuccessText'))
+  reload()
+}
+</script>
+
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <BasicUpload
+          :max-size="20"
+          :max-number="10"
+          :empty-hide-preview="true"
+          :upload-params="uploadParams"
+          :api="uploadApi"
+          class="my-5"
+          :accept="['pdf/*']"
+          @change="handleChange"
+        />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              { icon: IconEnum.VIEW, label: '复制链接', ifShow: false, onClick: handleCopy.bind(null, record) },
+              { icon: IconEnum.DOWNLOAD, label: '下载文件', onClick: handleDownload.bind(null, record) },
+
+              {
+                icon: IconEnum.DELETE,
+                danger: true,
+                label: t('action.delete'),
+                auth: 'infra:file:delete',
+                popConfirm: {
+                  title: t('common.delMessage'),
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+  </div>
+</template>