@sugarat/easypicker2-client 2.4.3 → 2.6.0

package/src/pages/dashboard/files/index.vue

@@ -1,1152 +0,0 @@
-<template>
-  <div class="files">
-    <!-- 筛选框 -->
-    <div class="panel header">
-      <div class="item">
-        <span class="label">分类</span>
-        <!--TODO: multiple 多选待评估 -->
-        <el-select
-          size="default"
-          v-model="selectCategory"
-          filterable
-          placeholder="请选择"
-        >
-          <el-option label="全部" value="all" />
-          <el-option label="默认" value="default" />
-          <el-option
-            v-for="item in categories"
-            :key="item.k"
-            :label="item.name"
-            :value="item.k"
-          />
-          <el-option label="无关联任务" value="no-task" />
-          <el-option label="♻️回收站♻️" value="trash" />
-        </el-select>
-      </div>
-      <div class="item">
-        <span class="label">任务</span>
-        <el-select
-          size="default"
-          v-model="selectTask"
-          filterable
-          placeholder="请选择"
-        >
-          <el-option label="全部" value="all" />
-          <el-option
-            v-for="item in filterTasks"
-            :key="item.key"
-            :label="item.name"
-            :value="item.key"
-          ></el-option>
-        </el-select>
-      </div>
-      <div class="item">
-        <el-button
-          :loading="batchDownStart"
-          :disabled="selectTask === 'all'"
-          type="primary"
-          size="default"
-          :icon="Download"
-          @click="handleDownloadTask"
-          >下载任务中的文件</el-button
-        >
-      </div>
-      <div class="item">
-        <el-input
-          size="default"
-          clearable
-          placeholder="请输入要检索的内容"
-          :prefix-icon="Search"
-          v-model="searchWord"
-        >
-        </el-input>
-      </div>
-    </div>
-    <div class="panel">
-      <div class="export-btns flex fac">
-        <el-dropdown trigger="click" @command="handleDropdownClick">
-          <el-button type="primary" size="default">
-            批量操作<el-icon class="el-icon--right">
-              <arrow-down />
-            </el-icon>
-          </el-button>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item
-                :disabled="selectItem.length === 0"
-                command="download"
-                >下载</el-dropdown-item
-              >
-              <el-dropdown-item
-                :disabled="selectItem.length === 0"
-                command="delete"
-                >删除</el-dropdown-item
-              >
-              <el-dropdown-item
-                :disabled="selectItem.length === 0"
-                command="excel"
-                >导出记录</el-dropdown-item
-              >
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-        <div v-show="false">
-          <!-- 迷惑的解决bug的手段 -->
-          <el-dropdown trigger="click" @command="handleDropdownClick">
-            <el-button
-              type="primary"
-              :disabled="selectItem.length === 0"
-              size="default"
-            >
-              批量操作
-              <el-icon>
-                <ArrowDown />
-              </el-icon>
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item command="download">下载</el-dropdown-item>
-                <el-dropdown-item command="delete">删除</el-dropdown-item>
-                <el-dropdown-item command="excel">导出记录</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-        <el-button size="default" :icon="Refresh" @click="handleRefresh"
-          >刷新</el-button
-        >
-        <el-button
-          title="导出表格中所有的数据"
-          type="success"
-          size="default"
-          :icon="DataAnalysis"
-          @click="
-            () => {
-              handleExportExcel(
-                filterFiles,
-                `筛选数据导出_${formatDate(
-                  new Date(),
-                  'yyyy年MM月日hh时mm分ss秒'
-                )}.xlsx`
-              )
-            }
-          "
-          :disabled="showFilterFiles.length === 0"
-          >导出记录</el-button
-        >
-        <div class="control-item">
-          显示图片
-          <el-switch
-            inline-prompt
-            v-model="showImg"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
-            active-text="是"
-            inactive-text="否"
-          />
-        </div>
-        <div class="control-item">
-          展示原文件名
-          <el-switch
-            inline-prompt
-            v-model="showOriginName"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
-            active-text="是"
-            inactive-text="否"
-          />
-        </div>
-        <div class="control-item">
-          显示提交人姓名
-          <el-switch
-            inline-prompt
-            v-model="showPeople"
-            active-color="#13ce66"
-            inactive-color="#ff4949"
-            active-text="是"
-            inactive-text="否"
-          />
-        </div>
-        <div class="control-item">
-          ⏰ 查看下载历史
-          <el-switch
-            v-model="showHistoryPanel"
-            style="
-              --el-switch-on-color: #13ce66;
-              --el-switch-off-color: #ff4949;
-            "
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="panel"
-      v-show="historyDownloadRecord.compressTask.length && !showHistoryPanel"
-    >
-      <tip style="font-size: 16px"
-        >正在进行归档的任务
-        {{ historyDownloadRecord.compressTask.length }}个</tip
-      >
-      <tip>详细归档记录点击右上角 “⏰查看下载历史”</tip>
-      <p
-        v-for="(record, idx) in historyDownloadRecord.compressTask"
-        :key="record.id"
-        class="tc"
-        style="margin-top: 10px"
-      >
-        {{ idx + 1 }}. {{ record.tip }}
-        <span
-          v-loading="true"
-          element-loading-text="..."
-          style="--el-loading-spinner-size: 20px"
-        ></span>
-      </p>
-    </div>
-    <div class="panel" v-show="showHistoryPanel">
-      <tip style="font-size: 16px"
-        >”❤️下面展示历史的下载记录与归档任务完成情况❤️“</tip
-      >
-      <tip>”再也不需要在页面停留等待归档完成“</tip>
-      <div>
-        <el-table
-          v-loading="isLoadingData"
-          element-loading-text="Loading..."
-          tooltip-effect="dark"
-          multipleTable
-          ref="multipleTable"
-          @selection-change="handleSelectionChange"
-          stripe
-          border
-          :default-sort="{ prop: 'date', order: 'descending' }"
-          :max-height="666"
-          :data="historyDownloadRecord.actions"
-          style="width: 100%"
-        >
-          <el-table-column prop="date" label="触发时间" width="200">
-            <template #default="scope">{{
-              formatDate(new Date(scope.row.date))
-            }}</template>
-          </el-table-column>
-          <el-table-column prop="tip" label="文件信息"></el-table-column>
-          <el-table-column prop="type" label="任务类型">
-            <template #default="scope">
-              <el-link
-                v-if="scope.row.type === ActionType.Compress"
-                type="primary"
-                >归档下载</el-link
-              >
-              <el-link v-else type="default">普通下载</el-link>
-            </template>
-          </el-table-column>
-          <el-table-column prop="size" label="大小" width="100">
-            <template #default="scope">
-              <span v-if="scope.row.status === DownloadStatus.ARCHIVE"
-                ><el-link type="danger">归档中...</el-link></span
-              >
-              <span v-else-if="scope.row.status !== DownloadStatus.FAIL">{{
-                !scope.row.size ? '未知大小' : formatSize(scope.row.size)
-              }}</span>
-              <span v-if="scope.row.status === DownloadStatus.FAIL"
-                ><el-link type="danger">归档失败</el-link></span
-              >
-            </template>
-          </el-table-column>
-          <el-table-column fixed="right" label="操作" width="140">
-            <template #default="scope">
-              <div
-                v-loading="true"
-                v-if="scope.row.status === DownloadStatus.ARCHIVE"
-              >
-                归档中...
-              </div>
-              <div v-if="scope.row.status === DownloadStatus.EXPIRED">
-                链接已失效
-              </div>
-              <div v-if="scope.row.status === DownloadStatus.FAIL">
-                联系开发者，提供错误信息：{{ scope.row.error }}
-              </div>
-              <div v-if="scope.row.status === DownloadStatus.SUCCESS">
-                <el-link @click="downLoadByUrl(scope.row.url)" type="primary"
-                  >下载</el-link
-                >
-                <el-link
-                  type="success"
-                  style="margin-left: 10px"
-                  @click="copyRes(scope.row.url)"
-                  >链接</el-link
-                >
-                <el-link
-                  type="warning"
-                  style="margin-left: 10px"
-                  @click="
-                    () => {
-                      showLinkModel = true
-                      downloadUrl = scope.row.url
-                    }
-                  "
-                  >二维码</el-link
-                >
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="flex fc">
-          <el-pagination
-            small
-            :current-page="historyDownloadRecord.pageCurrent"
-            :page-count="historyDownloadRecord.pageCount"
-            :total="historyDownloadRecord.pageTotal"
-            layout="total, prev, pager, next"
-            @current-change="handleHistoryActionPageChange"
-          ></el-pagination>
-        </div>
-      </div>
-    </div>
-    <!-- 主体内容 -->
-    <div class="panel">
-      <Tip>空间占用情况：{{ filterFileSize }} / {{ fileListSize }}</Tip>
-      <Tip>↑ 仅供使用者参考，应用无存储空间上限，也不收费</Tip>
-      <Tip
-        ><strong
-          >如果你觉得应用不错，<a
-            style="color: #409eff"
-            href="http://docs.ep.sugarat.top/praise/index.html"
-            target="_blank"
-            rel="noopener noreferrer"
-            >请作者喝茶 🍵</a
-          ></strong
-        >
-        <!-- <Praise>
-          <el-button style="margin:0 0 2px;" size="small" type="primary" text>Go！Go！❓</el-button>
-        </Praise> -->
-      </Tip>
-      <el-table
-        v-loading="isLoadingData"
-        element-loading-text="Loading..."
-        tooltip-effect="dark"
-        multipleTable
-        ref="multipleTable"
-        @selection-change="handleSelectionChange"
-        stripe
-        border
-        :max-height="666"
-        :data="showFilterFiles"
-        style="width: 100%"
-      >
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="date" label="提交时间" width="200">
-          <template #default="scope">{{
-            formatDate(new Date(scope.row.date))
-          }}</template>
-        </el-table-column>
-        <el-table-column
-          prop="task_name"
-          label="任务"
-          width="150"
-        ></el-table-column>
-        <el-table-column
-          prop="name"
-          label="文件名"
-          width="200"
-        ></el-table-column>
-        <template v-if="showOriginName">
-          <el-table-column prop="origin_name" label="原文件名" width="200">
-            <template #default="scope">
-              {{ scope.row.origin_name || '-' }}
-            </template>
-          </el-table-column>
-        </template>
-        <el-table-column prop="size" label="大小">
-          <template #default="scope">{{
-            scope.row.size === 0 ? '未知大小' : formatSize(scope.row.size)
-          }}</template>
-        </el-table-column>
-        <template v-if="showImg">
-          <el-table-column label="缩略图" width="120">
-            <template #default="scope">
-              <el-image
-                @switch="handleSwitchImage"
-                @click="handleSwitchImage(scope.$index)"
-                preview-teleported
-                :preview-src-list="previewImages"
-                :initial-index="scope.$index"
-                lazy
-                style="width: 100px; height: 100px"
-                :src="scope.row.cover"
-                fit="cover"
-              >
-                <template #viewer>
-                  <div class="imageDes">{{ viewImageFilename }}</div>
-                </template>
-                <template #placeholder>
-                  <div class="imageLoading">Loading...</div>
-                </template>
-                <template #error>
-                  <div class="imageLoading">
-                    不支持
-                    <el-icon>
-                      <Picture />
-                    </el-icon>
-                  </div>
-                </template>
-              </el-image>
-            </template>
-          </el-table-column>
-        </template>
-        <template v-if="showPeople">
-          <el-table-column prop="people" label="姓名">
-            <template #default="scope">
-              {{ scope.row.people || '-' }}
-            </template>
-          </el-table-column>
-        </template>
-        <el-table-column fixed="right" label="操作" width="140">
-          <template #default="scope">
-            <div class="text-btns">
-              <el-button
-                @click="checkInfo(scope.row)"
-                type="primary"
-                text
-                size="small"
-                >查看提交信息</el-button
-              >
-              <el-button
-                @click="rewriteFilename(scope.row)"
-                type="primary"
-                text
-                size="small"
-                >修改文件名</el-button
-              >
-              <el-button
-                @click="downloadOne(scope.row)"
-                type="primary"
-                text
-                size="small"
-                >下载</el-button
-              >
-              <el-button
-                @click="handleDelete(scope.row)"
-                type="primary"
-                text
-                size="small"
-                >删除</el-button
-              >
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <!-- 分页 -->
-    <div class="panel flex fc">
-      <el-pagination
-        :current-page="pageCurrent"
-        @current-change="handlePageChange"
-        background
-        :page-count="pageCount"
-        :page-sizes="[6, 10, 50, 100]"
-        :page-size="pageSize"
-        @size-change="handleSizeChange"
-        :total="filterFiles.length"
-        layout="total, sizes, prev, pager, next, jumper"
-      ></el-pagination>
-    </div>
-    <!-- 信息弹窗 -->
-    <el-dialog
-      :fullscreen="isMobile"
-      title="提交填写的信息"
-      v-model="showInfoDialog"
-    >
-      <InfosForm :infos="infos" :disabled="true" />
-    </el-dialog>
-    <LinkDialog
-      v-model:value="showLinkModel"
-      title="下载链接"
-      :link="downloadUrl"
-    ></LinkDialog>
-    <el-dialog
-      :fullscreen="isMobile"
-      title="修改文件名"
-      v-model="showRenameDialog"
-    >
-      <div>
-        <el-form label-width="100px" :model="renameForm">
-          <el-form-item label="原文件名" prop="newName">
-            <el-input v-model="renameForm.oldName" disabled />
-          </el-form-item>
-          <el-form-item label="新文件名" prop="newName">
-            <el-input v-model="renameForm.newName" placeholder="请输入新文件名">
-              <template #append>
-                {{ renameForm.suffix }}
-              </template>
-            </el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="success" @click="handleSaveNewName"
-              >保存</el-button
-            >
-            <el-button @click="showRenameDialog = false">取消</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
-import { useStore } from 'vuex'
-import LinkDialog from '@components/linkDialog.vue'
-import {
-  ArrowDown,
-  Refresh,
-  DataAnalysis,
-  Download,
-  Search,
-  Picture
-} from '@element-plus/icons-vue'
-import { useRoute } from 'vue-router'
-import {
-  copyRes,
-  formatDate,
-  formatSize,
-  getFileSuffix,
-  parseInfo
-} from '@/utils/stringUtil'
-import { ActionServiceAPI, FileApi } from '@/apis'
-import { downLoadByUrl, tableItem, tableToExcel } from '@/utils/networkUtil'
-import Tip from '../tasks/components/infoPanel/tip.vue'
-import InfosForm from '@/components/InfosForm/index.vue'
-import { DownloadStatus, ActionType, filenamePattern } from '@/constants'
-
-const $store = useStore()
-const $route = useRoute()
-const showLinkModel = ref(false)
-const downloadUrl = ref('')
-const showImg = ref(localStorage.getItem('ep-show-images') === 'true')
-const showPeople = ref(true)
-const showOriginName = ref(false)
-const showHistoryPanel = ref(false)
-const historyDownloadRecord = reactive({
-  actions: [],
-  pageSize: 3,
-  /**
-   * 总页数
-   */
-  pageCount: 0,
-  pageCurrent: 1,
-  pageTotal: 0,
-  compressTask: []
-})
-
-const loadActions = () => {
-  // 已记录的task
-  const compressTask: ActionApiTypes.DownloadActionData[] = JSON.parse(
-    localStorage.getItem('ep_compress_task') || '[]'
-  )
-  historyDownloadRecord.compressTask = compressTask
-
-  ActionServiceAPI.getDownloadActions(
-    historyDownloadRecord.pageSize,
-    historyDownloadRecord.pageCurrent,
-    compressTask.map((v) => v.id)
-  ).then((v) => {
-    const { actions, sum } = v.data
-    const haveArchive = !!actions.find(
-      (v) => v.status === DownloadStatus.ARCHIVE
-    )
-
-    actions
-      .filter((v) => v.type === ActionType.Compress)
-      .forEach((action) => {
-        const existIndex = compressTask.findIndex((v) => v.id === action.id)
-        // 判断状态
-        // SUCCESS
-        //  存在，触发下载，从compressTask移除
-        if (action.status === DownloadStatus.SUCCESS && existIndex !== -1) {
-          // 展示弹窗
-          downloadUrl.value = action.url
-          showLinkModel.value = true
-          downLoadByUrl(action.url)
-          // ElMessage.success(`自动下载归档任务 ${action.tip}`)
-          compressTask.splice(existIndex, 1)
-        }
-        // Archive
-        //  不存在，push进compressTask
-        if (action.status === DownloadStatus.ARCHIVE && existIndex === -1) {
-          compressTask.push(action)
-        }
-
-        // ERROR
-        if (action.status === DownloadStatus.FAIL && existIndex !== -1) {
-          compressTask.splice(existIndex, 1)
-        }
-      })
-    // TODO:之后根据反馈优化
-    historyDownloadRecord.compressTask = compressTask
-    localStorage.setItem('ep_compress_task', JSON.stringify(compressTask))
-    if (haveArchive) {
-      // 递归查询
-      setTimeout(loadActions, 1000)
-    }
-    historyDownloadRecord.pageTotal = sum
-    historyDownloadRecord.actions = actions
-    historyDownloadRecord.pageCount = Math.ceil(
-      sum / historyDownloadRecord.pageSize
-    )
-  })
-}
-const handleHistoryActionPageChange = (v) => {
-  historyDownloadRecord.pageCurrent = v
-  loadActions()
-}
-// 记录导出
-const handleExportExcel = (files: FileApiTypes.File[], filename?: string) => {
-  if (files.length === 0) {
-    ElMessage.warning('表格中没有可导出的内容')
-    return
-  }
-  const baseHeaders = ['提交时间', '任务', '文件名', '大小']
-  if (showOriginName.value) {
-    baseHeaders.push('原文件名')
-  }
-  if (showPeople.value) {
-    baseHeaders.push('姓名')
-  }
-  const headers: (string | tableItem)[] = baseHeaders.map((v) => ({
-    value: v,
-    row: 2
-  }))
-
-  const infosHeader = files.reduce((pre, value) => {
-    JSON.parse(value.info).forEach((i: any) => {
-      if (!pre.includes(i.text)) {
-        pre.push(i.text)
-      }
-    })
-    return pre
-  }, [])
-  headers.push({
-    value: '提交信息',
-    col: infosHeader.length
-  })
-
-  const body = files.map((v) => {
-    const { date, task_name: taskName, name, size, people } = v
-    const infoObj = JSON.parse(v.info).reduce((pre, v) => {
-      pre[v.text] = v.value
-      return pre
-    }, {})
-    const info = infosHeader.map((v) => infoObj[v] ?? '-')
-    const rows = [formatDate(new Date(date)), taskName, name, formatSize(size)]
-    if (showOriginName.value) {
-      rows.push(v.origin_name || '-')
-    }
-    if (showPeople.value) {
-      rows.push(people || '-')
-    }
-    rows.push(...info)
-    return rows
-  })
-  body.unshift(infosHeader)
-  tableToExcel(
-    headers,
-    body,
-    filename ||
-      `数据导出_${formatDate(new Date(), 'yyyy年MM月日hh时mm分ss秒')}.xlsx`
-  )
-  ElMessage.success('导出成功')
-}
-// 分类相关
-const categories = computed(() => $store.state.category.categoryList)
-const selectCategory = ref('all')
-// 任务相关
-const tasks = computed<TaskApiTypes.TaskItem[]>(
-  () => $store.state.task.taskList
-)
-const selectTask = ref('all')
-const filterTasks = computed(() => {
-  if (selectCategory.value === 'all') {
-    return tasks.value
-  }
-  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-  selectTask.value = 'all'
-  return tasks.value.filter((t) => t.category === selectCategory.value)
-})
-const selectTaskName = computed(() => {
-  const t = filterTasks.value.find((v) => v.key === selectTask.value)
-  return t?.name
-})
-
-watchEffect(() => {
-  if (
-    tasks.value.length &&
-    tasks.value.some((v) => v.key === $route.query.task)
-  ) {
-    selectTask.value = `${$route.query.task}`
-  }
-})
-
-const isLoadingData = ref(false)
-// 提交的所有文件
-const files: FileApiTypes.File[] = reactive([])
-const loadFiles = () => {
-  isLoadingData.value = true
-  files.splice(0, files.length)
-  FileApi.getFileList().then((res) => {
-    files.push(...res.data.files)
-    isLoadingData.value = false
-  })
-}
-const multipleTable: any = ref()
-const searchWord = ref('')
-
-// 用于展示的文件
-// 1. 过滤指定任务
-const filterFiles = computed(() =>
-  files
-    .filter((f) => {
-      if (selectCategory.value === 'no-task') {
-        return tasks.value.every((t) => t.key !== f.task_key)
-      }
-      if (filterTasks.value.length === 0) {
-        return false
-      }
-
-      if (selectTask.value === 'all') {
-        return filterTasks.value.find((t) => t.key === f.task_key)
-      }
-
-      return selectTask.value === f.task_key
-      // 2. 过滤关键词(精细优化)
-    })
-    .filter((t) =>
-      searchWord.value
-        ? JSON.stringify([
-            formatDate(new Date(t.date)),
-            formatSize(t.size),
-            t.people,
-            t.name,
-            t.task_name,
-            // eslint-disable-next-line no-useless-escape
-            t.info
-          ])
-            .replace(/[:'"{},[\]]/g, '')
-            .includes(searchWord.value)
-        : true
-    )
-)
-
-/**
- * 清空所有选项
- */
-const clearSelection = () => {
-  multipleTable.value.clearSelection()
-}
-// 多选选中的项
-const selectItem: any[] = reactive([])
-const handleSelectionChange = (e: any) => {
-  selectItem.splice(0, selectItem.length)
-  selectItem.push(...e)
-}
-const batchDownStart = ref(false)
-const handleDropdownClick = (e: string) => {
-  const ids: number[] = selectItem.map((v) => v.id)
-  switch (e) {
-    case 'download':
-      if (selectItem.length === 0) {
-        ElMessage.warning('没有选中需要下载的内容')
-        return
-      }
-      if (batchDownStart.value) {
-        ElMessage.warning('已经有批量下载任务正在进行,请稍后再试')
-        return
-      }
-      FileApi.batchDownload(
-        ids,
-        `批量下载_${formatDate(new Date(), 'yyyy年MM月日hh时mm分ss秒')}`
-      )
-        .then(() => {
-          loadActions()
-        })
-        .catch(() => {
-          ElMessage.error('所选文件均已从服务器上移除')
-          batchDownStart.value = false
-        })
-      ElMessage.info('开始归档选中的文件,请赖心等待')
-      break
-    case 'delete':
-      if (selectItem.length === 0) {
-        ElMessage.warning('没有选中需要删除的内容')
-        return
-      }
-      ElMessageBox.confirm('删除后无法恢复，是否删除', '数据无价，请谨慎操作')
-        .then(() => {
-          FileApi.batchDel(ids).then(() => {
-            files.splice(
-              0,
-              files.length,
-              ...files.filter((v) => !ids.includes(v.id))
-            )
-            ElMessage.success('删除成功')
-          })
-        })
-        .catch(() => {
-          ElMessage.info('取消')
-        })
-      break
-    case 'excel':
-      if (selectItem.length === 0) {
-        ElMessage.warning('没有选中需要导出的内容')
-        return
-      }
-      handleExportExcel(
-        selectItem,
-        `批量导出_${formatDate(new Date(), 'yyyy年MM月日hh时mm分ss秒')}.xlsx`
-      )
-      ElMessage.success('导出成功')
-      break
-    default:
-      break
-  }
-  clearSelection()
-}
-const showInfoDialog = ref(false)
-const infos: any[] = reactive([])
-const checkInfo = (e: any) => {
-  infos.splice(0, infos.length)
-  infos.push(...parseInfo(e.info))
-  showInfoDialog.value = true
-}
-
-const showRenameDialog = ref(false)
-const renameForm = reactive({
-  oldName: '',
-  newName: '',
-  suffix: '',
-  id: -1
-})
-const rewriteFilename = (e: any) => {
-  const { id, name } = e
-  const suffix = getFileSuffix(name)
-  renameForm.oldName = name
-  renameForm.suffix = suffix
-  renameForm.id = id
-  showRenameDialog.value = true
-}
-
-const handleSaveNewName = () => {
-  // 文件名校验，不能有系统不支持的字符
-  if (filenamePattern.test(renameForm.newName)) {
-    ElMessage.error(`文件名不能包含${filenamePattern.source}等字符`)
-    filenamePattern.lastIndex = 0
-    return
-  }
-  FileApi.updateFilename(
-    renameForm.id,
-    `${renameForm.newName}${renameForm.suffix}`
-  )
-    .then(() => {
-      ElMessage.success('修改成功')
-      const file = files.find((v) => v.id === renameForm.id)
-      file.name = `${renameForm.newName}${renameForm.suffix}`
-    })
-    .catch(() => {
-      ElMessage.error('修改失败')
-    })
-    .finally(() => {
-      showRenameDialog.value = false
-    })
-}
-
-const downloadOne = (e: any) => {
-  const { id, name } = e
-  FileApi.getOneFileUrl(id)
-    .then((res) => {
-      const { link } = res.data
-      showLinkModel.value = true
-      downloadUrl.value = link
-      downLoadByUrl(link, name)
-      // 刷新
-      loadActions()
-    })
-    .catch(() => {
-      ElMessage.error('文件已从服务器上移除')
-    })
-}
-const handleDelete = (e: any) => {
-  const idx = files.findIndex((v) => v === e)
-  ElMessageBox.confirm('确认删除此文件吗？', '数据无价，请谨慎操作')
-    .then(() => {
-      FileApi.deleteOneFile(e.id).then(() => {
-        ElMessage.success('删除成功')
-        files.splice(idx, 1)
-      })
-    })
-    .catch(() => {
-      ElMessage.info('取消删除')
-    })
-}
-
-// 分页
-const pageSize = ref(6)
-const handleSizeChange = (v: number) => {
-  pageSize.value = v
-}
-const pageCount = computed(() => {
-  const t = Math.ceil(filterFiles.value.length / pageSize.value)
-  return t
-})
-// 当前页
-const pageCurrent = ref(1)
-const showFilterFiles = computed(() => {
-  const start = (pageCurrent.value - 1) * pageSize.value
-  const end = pageCurrent.value * pageSize.value
-  return filterFiles.value.slice(start, end)
-})
-
-const filterFileSize = computed(() =>
-  formatSize(filterFiles.value.reduce((acc, cur) => acc + cur.size, 0))
-)
-const fileListSize = computed(() =>
-  formatSize(files.reduce((acc, cur) => acc + cur.size, 0))
-)
-const handlePageChange = (idx: number) => {
-  pageCurrent.value = idx
-}
-
-// 刷新文件列表
-
-const handleRefresh = () => {
-  ElMessage.success({
-    message: '刷新成功'
-  })
-  loadFiles()
-}
-const handleDownloadTask = () => {
-  const ids: number[] = files
-    .filter((f) => f.task_key === selectTask.value)
-    .map((v) => v.id)
-  if (ids.length === 0) {
-    ElMessage.warning('该任务中没有数据')
-    return
-  }
-  if (batchDownStart.value) {
-    ElMessage.warning('已经有批量下载任务正在进行,请稍后再试')
-    return
-  }
-  batchDownStart.value = true
-  FileApi.batchDownload(ids, selectTaskName.value)
-    .then(() => {
-      loadActions()
-    })
-    .catch(() => {
-      ElMessage.error('所选任务中的文件均已从服务器上移除')
-    })
-    .finally(() => {
-      setTimeout(() => {
-        batchDownStart.value = false
-      }, 1000)
-    })
-  ElMessage.info('开始归档选中的文件,请赖心等待')
-}
-
-const previewData = reactive<
-  { cover: string; preview: string; name: string; date: string; id: number }[]
->([])
-const sortProps = reactive({
-  order: null,
-  prop: null
-})
-const viewImageFilename = ref('')
-const handleFilesSortChange = (v) => {
-  sortProps.prop = v.prop
-  sortProps.order = v.order
-}
-const previewImages = computed(() => {
-  // if (!sortProps.prop) {
-  return previewData.map((v) => v.preview)
-  // }
-  // TODO：下面代码暂不生效，后续再支持表格排序场景
-  // const temp = [...previewData]
-  // temp.sort((a, b) => {
-  //   if (sortProps.order === 'descending') {
-  //     return a[sortProps.prop] - b[sortProps.prop]
-  //   }
-  //   return b[sortProps.prop] - a[sortProps.prop]
-  // })
-  // return temp.map((v) => v.preview)
-})
-
-const handleSwitchImage = (idx: number) => {
-  viewImageFilename.value = showFilterFiles.value[idx].name
-}
-
-let fetching = false
-const refreshFilesCover = () => {
-  const ids = showFilterFiles.value.map((v) => v.id)
-  if (ids.length === 0 || fetching) {
-    return
-  }
-  fetching = true
-  FileApi.checkImageFilePreviewUrl(ids).then((r) => {
-    fetching = false
-    const { data } = r
-    if (data.length === 0 || data.length !== showFilterFiles.value.length) {
-      return
-    }
-    previewData.splice(0, previewData.length)
-    showFilterFiles.value.forEach((v, idx) => {
-      const { cover, preview } = data[idx]
-      v.cover = cover
-      previewData.push({ cover, preview, name: v.name, date: v.date, id: v.id })
-    })
-  })
-}
-watchEffect(() => {
-  window.localStorage.setItem('ep-show-images', `${showImg.value}`)
-  if (!showImg.value) {
-    return
-  }
-  if (searchWord.value || pageCurrent.value || pageSize.value) {
-    refreshFilesCover()
-    return
-  }
-  refreshFilesCover()
-})
-
-onMounted(() => {
-  loadFiles()
-  loadActions()
-  $store.dispatch('category/getCategory')
-  $store.dispatch('task/getTask')
-})
-
-const isMobile = computed(() => $store.getters['public/isMobile'])
-</script>
-<style scoped lang="scss">
-.files {
-  max-width: 1024px;
-  margin: 0 auto;
-  padding-bottom: 2em;
-}
-
-@media screen and (max-width: 700px) {
-  .files {
-    margin-top: 70px;
-  }
-
-  .text-btns {
-    display: flex;
-    flex-direction: column;
-
-    :deep(.el-button) {
-      margin-left: 0px;
-      margin-bottom: 0px;
-    }
-  }
-
-  .header {
-    justify-content: center;
-  }
-
-  .export-btns {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-  }
-}
-
-.panel {
-  padding: 1em;
-  background-color: #fff;
-  margin: 10px auto;
-  box-sizing: border-box;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  z-index: 1;
-
-  .label {
-    font-size: 12px;
-    margin-right: 10px;
-  }
-}
-
-.header {
-  display: flex;
-  flex-wrap: wrap;
-
-  .item {
-    margin-right: 10px;
-    margin-bottom: 10px;
-  }
-}
-
-.el-button {
-  margin-left: 10px;
-  margin-bottom: 10px;
-}
-
-.control-item {
-  margin-left: 10px;
-  margin-bottom: 10px;
-  font-size: 14px;
-}
-
-.imageLoading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-.imageDes {
-  position: absolute;
-  bottom: 80px;
-  color: #fff;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.progress-list {
-  margin-top: 10px;
-
-  .progress-item {
-    margin-bottom: 10px;
-
-    .progress {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-bottom: 6px;
-
-      .el-progress--line {
-        min-width: 200px;
-        width: 260px;
-      }
-
-      .el-button {
-        margin: 0 6px;
-      }
-    }
-
-    .des {
-      font-size: 12px;
-
-      .filename {
-        max-width: 200px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        word-break: keep-all;
-        margin-right: 10px;
-      }
-
-      .mimeType {
-        width: 60px;
-        color: #409eff;
-      }
-    }
-
-    text-align: center;
-  }
-}
-</style>