`文件上传`

src/api/archives/index.ts

@@ -68,3 +68,10 @@ export const getArchive_files = (id: string | number | Array<string | number>) =
     method: 'get'
   });
 };
+
+export const saveArchive_files = (id: string | number | Array<string | number>,files:string) => {
+  return request({
+    url: `/filemanager/archives/save/${id}/${files}`,
+    method: 'put'
+  });
+};

src/api/system/oss/index.ts

@@ -26,3 +26,11 @@ export function delOss(ossId: string | number | Array<string | number>) {
     method: 'delete'
   });
 }
+
+export function listArchivesFileList(query: OssQuery): AxiosPromise<OssVO[]> {
+  return request({
+    url: '/resource/oss/allArchivesFileList',
+    method: 'get',
+    params: query
+  });
+}

src/components/FileUpload/index.vue

@@ -13,12 +13,15 @@
       :headers="headers"
       class="upload-file-uploader"
       ref="fileUploadRef"
+      auto-upload
+      :drag="suportdrag"
     >
+     <slot v-if="!defaultbtn"></slot>
       <!-- 上传按钮 -->
-      <el-button type="primary">选取文件</el-button>
+      <el-button v-if="defaultbtn" type="primary">选取文件</el-button>
     </el-upload>
     <!-- 上传提示 -->
-    <div class="el-upload__tip" v-if="showTip">
+    <div class="el-upload__tip" v-if="showTip" style="position: relative;">
       请上传
       <template v-if="fileSize">
         大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
@@ -27,9 +30,12 @@
         格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
       </template>
       的文件
+
+      <div style="position: absolute;top:0;right:10px">共 <span style="color: #f56c6c;">{{ fileList.length }}</span> 个文件</div>
     </div>
+
     <!-- 文件列表 -->
-    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul" style="max-height: 150px;overflow-y: auto;">
       <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
         <el-link :href="`${file.url}`" :underline="false" target="_blank">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
@@ -50,13 +56,15 @@ import { globalHeaders } from "@/utils/request";
 const props = defineProps({
     modelValue: [String, Object, Array],
     // 数量限制
-    limit: propTypes.number.def(5),
+    limit: propTypes.number.def(50),
     // 大小限制(MB)
     fileSize: propTypes.number.def(5),
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: propTypes.array.def(["doc", "xls", "ppt", "txt", "pdf"]),
-    // 是否显示提示
+  // 是否显示提示
     isShowTip: propTypes.bool.def(true),
+  suportdrag: propTypes.bool.def(false),
+    defaultbtn: propTypes.bool.def(true),
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -202,6 +210,7 @@ const listToString = (list: any[], separator?: string) => {
     line-height: 2;
     margin-bottom: 10px;
     position: relative;
+
 }
 
 .upload-file-list .ele-upload-list__item-content {

src/views/file/list/index.vue

@@ -0,0 +1,296 @@
+<!-- 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="文件名称" width="280">
+<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)"
+                  >预览</el-button
+                >
+              </div>
+              <div
+              >
+                <el-button type="text" size="small" @click="downloadfile(scope.row)"
+                  >下载</el-button
+                >
+              </div>
+
+              <div
+              >
+                <el-button type="text" size="small" @click="logs(scope.row)"
+                  >记录</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;">
+           <el-affix :offset="400" style="width: 100%;">
+              <div style="position: absolute;">
+                 <el-button type="primary" icon="DArrowLeft"></el-button>
+              </div>
+              <div style="float: right;">
+                 <el-button type="primary" icon="DArrowRight"></el-button>
+              </div>
+           </el-affix>
+            <pdfview :src="currentfile.url"></pdfview>
+
+
+
+        </div>
+        <!-- <div><el-affix :offset="120" position="bottom"><el-button type="text" icon="DArrowRight"></el-button></el-affix></div>
+      </div> -->
+
+     <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="pdfviewshow = false">关闭</el-button>
+
+          <el-button type="primary" @click="downloadfile">
+            下载
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref,onMounted } from "vue";
+import {
+  listArchivesFileList,
+
+} from "@/api/system/oss/index";
+import _ from "lodash";
+
+// 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 filepreview = (file) => {
+  currentfile.value = file;
+  pdfviewshow.value = true;
+}
+const downloadfile = (file) => {
+
+ }
+
+
+
+
+
+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'
+
+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>

src/views/project/list/index.vue

@@ -316,7 +316,7 @@
     :before-close="handleClose" size="50%"
   >
     <div style="position: absolute;right: 20px;bottom: 20px;">
-    <el-button type="primary" icon="UploadFilled" >上传文件</el-button>
+    <el-button type="primary" icon="UploadFilled"  @click="uploadfile">上传文件</el-button>
     </div>
 
     <el-table style="width: 100%;" :data="filelist">
@@ -347,17 +347,40 @@
         </el-table-column>
     </el-table>
   </el-drawer>
+
+   <el-dialog  v-model="showfileuplaod"
+      :title="`上传文件`" :before-close="handleCloseupload"
+      width="40vw">
+
+    <fileUpload :fileSize="100" v-model="uploadfilelist"  :suportdrag="true" :defaultbtn="false">
+       <template #default>
+          <div>
+             <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+             <div class="el-upload__text">
+               拖动文件到这边 或 <em>点击这边</em>
+             </div>
+          </div>
+       </template>
+    </fileUpload>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="saveuploadfiles"> 保存 </el-button>
+        </div>
+      </template>
+      </el-dialog>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref,onMounted } from "vue";
+import { ref, onMounted } from "vue";
+import { delOss } from "@/api/system/oss";
 import {
   listArchives,
   addArchives,
   updateArchives,
   delArchives,
-  getArchive_files
+  getArchive_files,
+  saveArchive_files
 } from "@/api/archives/index";
 import _ from "lodash";
 
@@ -526,6 +549,40 @@ const lookfiles = (item) => {
     filelist.value = res.data
   });
 };
+const showfileuplaod = ref(false);
+const uploadfilelist = ref("");
+const uploadfile = () => {
+  uploadfilelist.value = "";
+  showfileuplaod.value = true;
+};
+const saveuploadfiles = () => {
+  saveArchive_files(currentitem.value.id, uploadfilelist.value).then(res => {
+    ElMessage.success("保存成功");
+    showfileuplaod.value = false;
+    getArchive_files(currentitem.value.id).then((res) => {
+    filelist.value = res.data
+  });
+  })
+
+}
+
+const handleCloseupload = (done) => {
+    ElMessageBox.confirm('确定取消文件上传?')
+      .then(() => {
+        try {
+          uploadfilelist.value.split(",").map(i => {
+            // delOss(i.id)
+            console.log(i)
+          })
+        } catch (error) {}
+      done()
+    })
+      .catch((e) => {
+       console.log(e)
+      // catch error
+    })
+};
+
 const handleClose = (done) => {
     ElMessageBox.confirm('确定关闭文件查看?')
     .then(() => {
@@ -544,7 +601,7 @@ const filepreview = (file) => {
 }
 const downloadfile = (file) => {
 
- }
+}
 
 
 

src/views/system/oss/index.vue

@@ -118,7 +118,7 @@
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="ossFormRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="文件名">
-          <fileUpload :fileSize="1000" v-model="form.file"  v-if="type === 0" />
+          <fileUpload :fileSize="1000" v-model="form.file" v-if="type === 0" />
           <imageUpload v-model="form.file" v-if="type === 1" />
         </el-form-item>
       </el-form>