项目文件管理完成

package.json

@@ -15,10 +15,12 @@
     "js-cookie": "^3.0.5",
     "jsencrypt": "^3.3.2",
     "less": "^4.2.0",
+    "less-loader": "^12.2.0",
     "path": "^0.12.7",
     "pinia": "^2.2.4",
     "process": "^0.11.10",
     "sass": "^1.79.4",
+    "v-viewer": "^3.0.11",
     "vant": "^4.9.7",
     "vue": "^3.4.37",
     "vue-router": "^4.4.5"

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       less:
         specifier: ^4.2.0
         version: 4.2.0
+      less-loader:
+        specifier: ^12.2.0
+        version: 12.2.0(less@4.2.0)
       path:
         specifier: ^0.12.7
         version: 0.12.7
@@ -38,6 +41,9 @@ importers:
       sass:
         specifier: ^1.79.4
         version: 1.79.4
+      v-viewer:
+        specifier: ^3.0.11
+        version: 3.0.11(vue@3.5.10)
       vant:
         specifier: ^4.9.7
         version: 4.9.7(vue@3.5.10)
@@ -603,6 +609,19 @@ packages:
   jsencrypt@3.3.2:
     resolution: {integrity: sha512-arQR1R1ESGdAxY7ZheWr12wCaF2yF47v5qpB76TtV64H1pyGudk9Hvw8Y9tb/FiTIaaTRUyaSnm5T/Y53Ghm/A==}
 
+  less-loader@12.2.0:
+    resolution: {integrity: sha512-MYUxjSQSBUQmowc0l5nPieOYwMzGPUaTzB6inNW/bdPEG9zOL3eAAD1Qw5ZxSPk7we5dMojHwNODYMV1hq4EVg==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      '@rspack/core': 0.x || 1.x
+      less: ^3.5.0 || ^4.0.0
+      webpack: ^5.0.0
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
+
   less@4.2.0:
     resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==}
     engines: {node: '>=6'}
@@ -839,11 +858,19 @@ packages:
   util@0.10.4:
     resolution: {integrity: sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==}
 
+  v-viewer@3.0.11:
+    resolution: {integrity: sha512-E8LOdAxhzuktt4HB3PswVCccQ1Q1sYHYnLsS6zaJISpb5EvmAFs5sYNfXnDLFxVb5DQ82v4ZlGxkYlseXwWRJw==}
+    peerDependencies:
+      vue: ^3.0.0
+
   vant@4.9.7:
     resolution: {integrity: sha512-bFkjF6zZf8l6WxPwDn6vd2PZISpUhm4u3fBJStUh+BDll7yaAv610j56DDYoL3HM8tws9nanGN4WBbTrKToMrA==}
     peerDependencies:
       vue: ^3.0.0
 
+  viewerjs@1.11.6:
+    resolution: {integrity: sha512-TlhdSp2oEOLFXvEp4psKaeTjR5zBjTRcM/sHUN8PkV1UWuY8HKC8n7GaVdW5Xqnwdr/F1OmzLik1QwDjI4w/nw==}
+
   vite@5.4.8:
     resolution: {integrity: sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -1371,6 +1398,10 @@ snapshots:
 
   jsencrypt@3.3.2: {}
 
+  less-loader@12.2.0(less@4.2.0):
+    dependencies:
+      less: 4.2.0
+
   less@4.2.0:
     dependencies:
       copy-anything: 2.0.6
@@ -1630,6 +1661,12 @@ snapshots:
     dependencies:
       inherits: 2.0.3
 
+  v-viewer@3.0.11(vue@3.5.10):
+    dependencies:
+      lodash: 4.17.21
+      viewerjs: 1.11.6
+      vue: 3.5.10
+
   vant@4.9.7(vue@3.5.10):
     dependencies:
       '@vant/popperjs': 1.3.0
@@ -1637,6 +1674,8 @@ snapshots:
       '@vue/shared': 3.5.10
       vue: 3.5.10
 
+  viewerjs@1.11.6: {}
+
   vite@5.4.8(less@4.2.0)(sass@1.79.4):
     dependencies:
       esbuild: 0.21.5

src/api/project.js

@@ -33,3 +33,13 @@ export const createProjectFile = (data) => {
         data: data
     })
 }
+
+// 项目文件预览
+export const previewProjectFile = (data) => {
+    return service({
+        url: '/file/filePreview',
+        method: 'get',
+        params:data,
+        responseType: 'blob'
+    })
+}

src/main.js

@@ -1,16 +1,37 @@
-import { createApp } from 'vue'
+import {createApp} from 'vue'
 import './style.css'
 import App from './App.vue'
 import router from "@/router/index.js";
-import { createPinia } from 'pinia'
+import {createPinia} from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import vantage from 'vant'
 import 'vant/lib/index.css';
+import Viewer from 'v-viewer';
+// import 'viewerjs/dist/viewer.css';
+
 const manage = createPinia()
 const app = createApp(App)
 app.use(manage)
 app.use(ElementPlus)
 app.use(router)
 app.use(vantage)
+app.use(Viewer, {
+    Options: {
+        'inline': true,
+        'button': true, //右上角按钮
+        'navbar': true, //底部缩略图
+        'title': true, //当前图片标题
+        'toolbar': true, //底部工具栏
+        'tooltip': true, //显示缩放百分比
+        'movable': true, //是否可以移动
+        'zoomable': true, //是否可以缩放
+        'rotatable': true, //是否可旋转
+        'scalable': true, //是否可翻转
+        'transition': true, //使用 CSS3 过度
+        'fullscreen': true, //播放时是否全屏
+        'keyboard': true, //是否支持键盘
+        'url': 'data-source',
+    },
+})
 app.mount('#app')

src/view/project/project.vue

@@ -1,7 +1,163 @@
+<template>
+  <van-row style="margin-top: 1rem;height: 3.2rem;">
+    <van-col :span="18">
+      <van-search
+          v-model="fileName"
+          placeholder="请输入文件名称"
+          shape="round"
+          style="height: 3.2rem"
+          @search="fileSearch"
+      />
+    </van-col>
+    <van-col :span="6" class="design">
+      <van-button
+          icon="replay"
+          type="primary"
+          plain
+          @click="fileReset"
+          style="border: 0;font-size: 1.2rem">
+        重置
+      </van-button>
+    </van-col>
+  </van-row>
+  <van-row style="margin-top: 1rem;height: 3rem">
+    <van-col :span="11" :offset="1" style="display: flex;align-items: center">
+      <van-icon
+          name="arrow-down"
+          color="#1989fa" />
+      <van-text-ellipsis
+          content="文件检索"
+          @click="fileRetrievalShow = true"
+          style="color:#1989fa"
+      />
+    </van-col>
+    <van-col :span="10" class="design">
+      <van-icon
+          name="plus"
+          color="#1989fa" />
+      <van-text-ellipsis
+          content="添加"
+          @click="uploadFileShow = true"
+          style="color:#1989fa"
+      />
+    </van-col>
+  </van-row>
+  <van-row style="margin-top: 1rem;height: 30rem;">
+    <van-col :span="24">
+      <van-list
+          finished-text="没有更多了"
+          @load="refreshList"
+          :finished="finished"
+      >
+        <van-cell-group>
+          <van-cell v-for="item in fileList" :key="item.ID" style="height: 3.7rem">
+            <template #title>
+              <el-text size="large" style="width: 45vw" :line-clamp="1">{{item.name}}</el-text>
+            </template>
+            <template #value>
+              <van-button
+                  icon="search"
+                  type="primary"
+                  plain
+                  style="border: 0;font-size: 1rem"
+                  @click="filePreview(item.name, item.path)">
+                预览
+              </van-button>
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </van-list>
+    </van-col>
+  </van-row>
+  <van-row style="margin-top: 2rem">
+    <el-col :span="22" :offset="1">
+      <van-pagination v-model="currentPage" :total-items="pageTotal" :items-per-page="8" @change="pageChange"/>
+    </el-col>
+  </van-row>
+  <van-popup
+      v-model:show="uploadFileShow"
+      style="width: 87vw;height: 58vh"
+      round
+      closeable
+      close-icon-position="top-right"
+  >
+    <van-row style="margin-top: 2vh">
+      <van-col :span="16" :offset="1">
+        <span style="font-size: 1.1rem;">上传文件</span>
+      </van-col>
+    </van-row>
+    <van-row style="margin-top: 3vh">
+      <van-col :span="8" :offset="1">
+        <van-button
+            type="primary"
+            plain
+            icon="arrow-down"
+            @click="fileTypeShow = true">
+          文件类型
+        </van-button>
+      </van-col>
+      <van-col :span="13" :offset="1" class="typeLayout">
+        <van-field
+            v-model="fileTypeText"
+            disabled
+            placeholder="请选择文件类型"
+            style="border: 1px solid #dadadd;border-radius: 5px"/>
+      </van-col>
+    </van-row>
+    <van-row>
+      <van-col :span="22" :offset="1">
+        <div class="fileExhibition">
+          <van-uploader
+              v-model="fileObjectList"
+              multiple
+              :accept="accept"
+          />
+        </div>
+      </van-col>
+    </van-row>
+    <van-row style="margin-top: 2vh">
+      <van-col :span="22" :offset="1" class="design">
+        <van-button type="primary" @click="uploadFile">确认</van-button>
+      </van-col>
+    </van-row>
+  </van-popup>
+  <van-popup position="bottom" v-model:show="fileTypeShow" round>
+    <van-picker
+        :columns="fileTypeList"
+        :columns-field-names="customFieldName"
+        @cancel="fileTypeShow = false"
+        @confirm="confirmFileType"
+    />
+  </van-popup>
+  <van-popup v-model:show="fileRetrievalShow" round position="bottom">
+    <van-picker-group
+        title="文件搜索"
+        :tabs="['项目列表', '文件类型']"
+        @cancel="fileRetrievalShow = false"
+        @confirm="fileRetrieval"
+    >
+      <van-picker
+          :columns="projectList"
+          :columns-field-names="customProjectName"
+      />
+      <van-picker
+          :columns="fileTypeList"
+          :columns-field-names="customFieldName"
+      />
+    </van-picker-group>
+  </van-popup>
+</template>
+
 <script setup>
-import { getAllProject, getProjectFile, getFileType, createProjectFile } from '@/api/project.js'
-import { Download, Upload } from '@element-plus/icons-vue'
+import {
+  getAllProject,
+  getProjectFile,
+  getFileType,
+  createProjectFile,
+  previewProjectFile
+} from '@/api/project.js'
 import { showNotify } from "vant";
+import { showImagePreview } from 'vant';
 defineOptions({
   name: 'Project',
 })
@@ -10,14 +166,14 @@ onMounted(() => {
   queryFileType()
 })
 const projectList = reactive([])
-const projectValue = ref(0)
 const queryProjectList = () => {
   getAllProject().then(res => {
     if (res.code === 0) {
       const list = res.data
       projectList.length = 0
       projectList.push(...list)
-      queryProjectFile(list[0].code)
+      fileCondition.code = list[0].code
+      queryProjectFile()
     }
   })
 }
@@ -28,26 +184,26 @@ const fileCondition = reactive({
       genre: 0,
       pageInfo: {
         page: 1,
-        pageSize: 10
+        pageSize: 8
       }
     }
 )
 const fileList = reactive([])
-const queryProjectFile = (code) => {
-  fileCondition.code = code
+const queryProjectFile = () => {
   getProjectFile(fileCondition).then(res => {
     if (res.code === 0) {
       const list = res.data.list
+      console.log(res.data)
+      pageTotal.value = res.data.total
       fileList.length = 0
       fileList.push(...list)
+      fileRetrievalShow.value = false
     }
   })
 }
 const finished = ref(false)
 const refreshList = () => {}
 
-const selectAll = ref(false)
-
 //上传文件
 const uploadFileShow = ref(false)
 const fileTypeList = reactive([])
@@ -61,23 +217,31 @@ const uploadFile = () => {
     showNotify({ type: 'danger', message: '请选择文件类型' });
   } else if (fileObjectList.value.length === 0) {
     showNotify({ type: 'danger', message: '暂未选择文件' });
+  } else {
+    const formData = new FormData()
+    fileObjectList.value.forEach(item => {
+      formData.append('file', item.file)
+    })
+    formData.append('genre', fileTypeValue.value)
+    formData.append('code', fileCondition.code)
+    createProjectFile(formData).then(res => {
+      if (res.code === 0) {
+        showNotify({ type: 'success', message: '上传成功' })
+        queryProjectFile()
+        uploadFileShow.value = false
+        fileObjectList.value = []
+      }
+    })
   }
-  // const formData = new FormData()
-  // fileObjectList.value.forEach(item => {
-  //   formData.append('file', item)
-  // })
-  // formData.append('genre', fileTypeValue.value)
-  // formData.append('code', fileCondition.code)
-  // createProjectFile(formData).then(res => {
-  //   if (res.code === 0) {
-  //     console.log(res.data)
-  //   }
-  // })
 }
 const customFieldName = {
   text: 'name',
   value: 'ID',
 }
+const customProjectName = {
+  text: 'name',
+  value: 'ID'
+}
 // 获取文件类型
 const queryFileType = () => {
   getFileType().then(res => {
@@ -85,13 +249,6 @@ const queryFileType = () => {
       const list = res.data
       fileTypeList.length = 0
       fileTypeList.push(...list)
-      // let option = { text: '', value: '' }
-      // list.forEach(item => {
-      //   option.text = item.name
-      //   option.value = item.ID
-      //   fileTypeList.push(option)
-      // })
-      // console.log('数据', fileTypeList)
     }
   })
 }
@@ -105,126 +262,67 @@ const confirmFileType = ({ selectedValues }) => {
   })
   fileTypeShow.value = false
 }
-</script>
 
-<template>
-  <van-row style="margin-top: 2vh">
-    <van-col :span="14" :offset="1">
-      <el-select placeholder="请选择项目" size="large">
-        <el-option
-            v-for="item in projectList"
-            :key="item.code"
-            :label="item.name"
-            :value="item.code"
-        >
-        </el-option>
-      </el-select>
-    </van-col>
-    <van-col :span="7" :offset="1">
-      <el-dropdown split-button type="primary" size="large">
-        操作
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item>
-              <el-button type="primary" :icon="Upload" @click="uploadFileShow = true">上传</el-button>
-            </el-dropdown-item>
-            <el-dropdown-item>
-              <el-button type="primary" :icon="Download">下载</el-button>
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </van-col>
-  </van-row>
-  <van-row style="margin-top: 3vh">
-    <van-col :span="11" :offset="1">
-      <van-button icon="filter-o" size="small">文件筛选</van-button>
-    </van-col>
-    <van-col :span="11" class="design">
-      <van-checkbox v-model="selectAll" shape="square" label-position="left">全选</van-checkbox>
-    </van-col>
-  </van-row>
-  <van-row style="margin-top: 2vh">
-    <van-col :span="24">
-      <van-list
-          finished-text="没有更多了"
-          @load="refreshList"
-          :finished="finished"
-      >
-        <van-cell-group>
-          <van-cell v-for="item in fileList" :key="item.ID" size="large">
-            <template #title>
-              <el-text size="large">{{item.name}}</el-text>
-            </template>
-            <template #value>
-              <van-checkbox shape="square" style="margin-left: 41vw"></van-checkbox>
-            </template>
-          </van-cell>
-        </van-cell-group>
-      </van-list>
-    </van-col>
-  </van-row>
-  <van-popup
-      v-model:show="uploadFileShow"
-      style="width: 87vw;height: 58vh"
-      round
-      closeable
-      close-icon-position="top-right"
-  >
-    <van-row style="margin-top: 2vh">
-      <van-col :span="16" :offset="1">
-        <span style="font-size: 1.1rem;">上传文件</span>
-      </van-col>
-    </van-row>
-    <van-row style="margin-top: 3vh">
-      <van-col :span="8" :offset="1">
-        <van-button
-            type="primary"
-            plain
-            icon="arrow-down"
-            @click="fileTypeShow = true">
-          文件类型
-        </van-button>
-      </van-col>
-      <van-col :span="13" :offset="1" class="typeLayout">
-        <van-field
-            v-model="fileTypeText"
-            disabled
-            placeholder="请选择文件类型"
-            style="border: 1px solid #dadadd;border-radius: 5px"/>
-<!--        <el-text :line-clamp="1" style="font-size: 1rem">-->
-<!--          {{fileTypeText}}-->
-<!--        </el-text>-->
-      </van-col>
-    </van-row>
-    <van-row>
-      <van-col :span="22" :offset="1">
-        <div class="fileExhibition">
-          <van-uploader
-              v-model="fileObjectList"
-              multiple
-              :accept="accept"
-          />
-        </div>
-      </van-col>
-    </van-row>
-    <van-row style="margin-top: 2vh">
-      <van-col :span="22" :offset="1" class="design">
-        <van-button type="primary" @click="uploadFile">确认</van-button>
-      </van-col>
-    </van-row>
-  </van-popup>
-  <van-popup position="bottom" v-model:show="fileTypeShow" round>
-    <van-picker
-        :columns="fileTypeList"
-        :columns-field-names="customFieldName"
-        @cancel="fileTypeShow = false"
-        @confirm="confirmFileType"
-    />
-  </van-popup>
-</template>
+const fileRetrievalShow = ref(false)
+
+const fileName = ref('')
+
+// 文件预览
+const filePreview = (name, path) => {
+  // const suffix = name.substring(name.lastIndexOf(".")+1);
+  const info = {
+    name: name,
+    path: path
+  }
+  previewProjectFile(info).then(res =>{
+    showImagePreview([window.URL.createObjectURL(res)]);
+  })
+}
+
+// 文件检索
+const fileRetrieval = (val) => {
+  fileCondition.genre = val[1].selectedOptions[0].ID
+  fileCondition.code = val[0].selectedOptions[0].code
+  queryProjectFile()
+}
+
+// 重置文件检索
+const fileReset = () => {
+  const condition = {
+    code: projectList[0].code,
+    name: "",
+    genre: 0,
+    pageInfo: {
+      page: 1,
+      pageSize: 8
+    }
+  }
+  getProjectFile(condition).then(res => {
+    if (res.code === 0) {
+      const list = res.data.list
+      fileList.length = 0
+      fileList.push(...list)
+    }
+  })
+}
+
+// 文件分页
+const currentPage = ref(1)
+const pageTotal = ref(0)
+// 改变页面
+const pageChange = (val) => {
+  console.log(val)
+  fileCondition.pageInfo.page = val
+  queryProjectFile()
+}
+
+const fileSearch = () => {
+  fileCondition.name = fileName
+  queryProjectFile()
+}
+</script>
 
-<style scoped lang="scss">
+<style scoped>
 .design{
   display: flex;
   align-items: center;