FileManagerUI/src/views/file/list/index.vue

<!-- eslint-disable prettier/prettier -->
<template>
  <div class="bodycontent">
    <div class="sheard">
      <div class="searchheard">
        <div class="item">
          <div>文件名称：</div>
          <div>
            <el-input
              v-model="searchForm.originalName"
              style="width: 240px"
              placeholder="请输入文件名称"
            />
          </div>
        </div>
        <div class="item">
          <div>丘权号：</div>
          <div>
            <el-input
              v-model="searchForm.qiuquan"
              style="width: 240px"
              placeholder="请输入丘权号"
            />
          </div>
        </div>
      </div>

      <div
        style="
          position: absolute;
          right: 0;
          top: 10px;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
        "
      >
        <div>
          <el-button type="primary" @click="reset">重置</el-button>
          <el-button type="primary" @click="getnextdata(1)">查询</el-button>
        </div>
      </div>
    </div>

    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%; height: 70vh"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="originalName" label="文件名称">
          <template #default="scope">
            <div style="display: flex">
              <img
                style="width: 25px; height: 25px"
                :src="gettypeicon(scope.row.fileSuffix)"
              />
              <div>{{ scope.row.originalName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="文件大小" width="190">
          <template #default="scope">
            {{
              scope.row.size > 1024
                ? scope.row.size > 1024 * 1024
                  ? (scope.row.size / 1024 / 1024).toFixed(2) + " MB"
                  : (scope.row.size / 1024).toFixed(2) + " KB"
                : scope.row.size + " B"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="上传日期" width="160" />

        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <div
              style="
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                align-content: center;
                flex-direction: row;
              "
            >
              <div>
                <el-button type="text" size="small" @click="filepreview(scope.row)" v-hasPermi="['filemanager.file.preview']"
                  >预览</el-button
                >
              </div>
              <div>
                <el-button type="text" size="small" @click="downloadfile(scope.row)" v-hasPermi="['filemanager.file.download']"
                  >下载</el-button
                >
              </div>

              <div>
                <el-button type="text" size="small" @click="filelogs(scope.row)" v-hasPermi="['filemanager.file.log']"
                  >记录</el-button
                >
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end">
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="totalnum"
          class="mt-4"
          @current-change="getnextdata"
        />
      </div>
    </div>

    <el-dialog v-model="pdfviewshow" :title="`文件预览`" width="60vw">
      <div style="position: relative; min-height: 70vh">
        <el-affix :offset="400" style="width: 100%">
          <div style="position: absolute">
            <el-button
              type="primary"
              icon="DArrowLeft"
              :disabled="ccindex <= 0"
              @click="fileindexlook(ccindex - 1)"
            ></el-button>
          </div>
          <div style="float: right">
            <el-button
              type="primary"
              icon="DArrowRight"
              :disabled="ccindex + 1 >= tableData.length"
              @click="fileindexlook(ccindex + 1)"
            ></el-button>
          </div>
        </el-affix>
        <pdfview :src="currentfile.url" :size="currentfile.size"></pdfview>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="pdfviewshow = false">关闭</el-button>

          <el-button type="primary" @click="downloadfile" v-hasPermi="['filemanager.file.download']"> 下载 </el-button>
        </div>
      </template>
    </el-dialog>

    <el-drawer
      v-model="logsshow"
      title="文件信息"
      :direction="'rtl'"
    >
      <div>
        <el-descriptions title="项目信息" border :column="2">
          <el-descriptions-item label="电子编号">{{
            currentproject.ecode
          }}</el-descriptions-item>
          <el-descriptions-item label="丘权号">{{
            currentproject.qiuquan
          }}</el-descriptions-item>
          <el-descriptions-item label="区域">{{
            currentproject.area
          }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ currentproject.achievementDate }}
          </el-descriptions-item>
          <el-descriptions-item label="建设单位" :span="2">
            {{ currentproject.buildUnit }}
          </el-descriptions-item>
          <el-descriptions-item label="地址" :span="2">
            {{ currentproject.addr }}
          </el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">
            {{ currentproject.remark }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-divider />

      <div>
        <div style="max-height: 50vh;overflow-y: auto;">
          <el-timeline style="max-width: 600px; ">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp"
               :color="activity.color"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import txticon from "@/assets/icons/svg/txt.svg";
import picicon from "@/assets/icons/svg/pic.svg";
import pdficon from "@/assets/icons/svg/pdf1.svg";
import docicon from "@/assets/icons/svg/doc.svg";
import xlsicon from "@/assets/icons/svg/xls.svg";
import ppticon from "@/assets/icons/svg/ppt.svg";
import mp4icon from "@/assets/icons/svg/mp4.svg";
import cadicon from "@/assets/icons/svg/cad.svg";
import unknownicon from "@/assets/icons/svg/unknown.svg";
import { ref, onMounted } from "vue";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { listByIds, listArchivesFileList } from "@/api/system/oss/index";
import _ from "lodash";
import { getArchives } from "@/api/archives/index";

import { list } from "@/api/monitor/operlog/index";
import {ElLoading} from "element-plus";

// const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// const { sys_area, sys_project_status } = toRefs<any>(
//   proxy?.useDict("sys_area", "sys_project_status")
// );

const searchForm = ref({
  qiuquan: "",
  originalName: "",
});

const reset = () => {
  searchForm.value = {
    qiuquan: "",
    originalName: "",
  };
  getnextdata(1);
};

const tableData = ref([]);

const currentpage = ref(0);
const totalnum = ref(0);

const getnextdata = (page: number) => {
  currentpage.value = page;
  listArchivesFileList({ pageSize: 10, pageNum: page, ...searchForm.value }).then(
    (res) => {
      tableData.value = res.rows;
      totalnum.value = res.total;
    }
  );
};
onMounted(() => {
  getnextdata(1);
});

const tableRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
  return "";
};

const pdfviewshow = ref(false);
const currentfile = ref();
const ccindex = ref(0);
const fileindexlook = (index) => {
  var item = tableData.value[index];
  filepreview(item);
};
const filepreview = (file) => {
  ccindex.value = tableData.value.indexOf(file);
  currentfile.value = file;
  listByIds(file.ossId).then((res) => {
    currentfile.value.url = res.data[0].url;
    pdfviewshow.value = true;
  });
};
const downloadfile = (file) => {
  // proxy?.$download.oss(file.ossId);
  // currentfile.value = file;

  const loadingInstance1 = ElLoading.service({ fullscreen: true,text:"下载中..." })
  listByIds(file.ossId).then((res) => {
    fetch(res.data[0].url)
      .then(response => response.blob())
      .then(blob => {
        loadingInstance1.close();
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = file.originalName;
        link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
        link.click();
      });
  });
};


const currentproject = ref({
  area: "",
  ecode: "",
  qiuquan: "",
  buildUnit: "",
  addr: "",
  saveAddr: "",
  remark: "",
});
const logsshow = ref(false);
const filelogs = (file) => {
  logsshow.value = true;
  getArchives(file.archiveId).then((res) => {
    currentproject.value = res.data;
  });
  activities.value = [];
  list({ title: "OSS对象存储", jsonResult: file.ossId }).then((res) => {
    var ll = res.rows.map((item) => {
      var re = { content: item.operName + " 预览文件", timestamp: item.operTime, color: '#0bbd87', };
      if ((item.operParam + "").indexOf("type") != -1) {
        re.content = item.operName + " 预览文件";
      }
      if (item.requestMethod == "POST") {
        re.content = item.operName + " 上传了文件";
        re.color = '#1e90ff';
      }
      return re;
    });
    activities.value = activities.value.concat(ll);

    _.sortedIndexBy(activities.value, function (o) {
      return o.timestamp;
    });
  });
  list({ title: "OSS对象存储", businessType: 5, operUrl: file.ossId }).then((res) => {
    var ll = res.rows.map((item) => {
      var re = { content: item.operName + " 下载了文件", timestamp: item.operTime , color: '#c4000a',};
      return re;
    });
    activities.value = activities.value.concat(ll);
    _.sortedIndexBy(activities.value, function (o) {
      return o.timestamp;
    });
  });
};

const activities = ref([
]);



const gettypeicon = (type) => {
  if (type.indexOf("png") != -1 || type.indexOf("jp") != -1) {
    return picicon;
  }
  if (type.indexOf("ppt") != -1) {
    return ppticon;
  }
  if (type.indexOf("xl") != -1) {
    return xlsicon;
  }
  if (type.indexOf("doc") != -1) {
    return docicon;
  }
  if (type.indexOf("txt") != -1) {
    return txticon;
  }
  if (type.indexOf("ca") != -1) {
    return cadicon;
  }
  if (type.indexOf("mp4") != -1) {
    return mp4icon;
  }
  if (type.indexOf("pdf") != -1) {
    return pdficon;
  }
  return unknownicon;
};
</script>

<style type="scss" scoped>
.bodycontent {
  padding: 10px 15px;
  .sheard {
    position: relative;
    padding: 10px 0px;
    .searchheard {
      display: flex;
      align-items: center;
      .item {
        display: flex;
        align-items: center;
        margin-right: 20px;
        font-size: 14px;
      }
    }
  }
  .formitem {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 14px;
  }
}
</style>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el-table .danger-row {
  --el-table-tr-bg-color: var(--el-color-danger-light-9);
}
</style>