文件管理

web/src/api/file.js

@@ -30,3 +30,38 @@ export const deleteFileType = (data) => {
     data: data
   })
 }
+// 查询文件列表
+export const queryFileList = (data) => {
+  return service({
+    url: '/project/queryFileList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 项目文件上传
+export const createProjectFile = (data) => {
+  return service({
+    url: '/project/createProjectFile',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除项目文件
+export const deleteProjectFile = (data) => {
+  return service({
+    url: '/project/deleteProjectFile',
+    method: 'delete',
+    data: data
+  })
+}
+
+// 下载项目文件
+export const downloadProjectFile = (data) => {
+  return service({
+    url: '/project/projectFilesDownload',
+    method: 'post',
+    data: data
+  })
+}

web/src/view/projectManage/projectList/projectList.vue

@@ -356,6 +356,7 @@ const listData = (condition) => {
         item.CreatedAt = formatDate(item.CreatedAt)
         item.state = projectState(item.state)
       })
+      console.log(list)
       projectListData.push(...list)
       listTotal.value = res.data.total
     }
@@ -372,17 +373,14 @@ const dataScreen = () => {
 const formatDate = (dateString, locale = 'en-US', timezone = 'Asia/Shanghai') => {
   // 使用 Date 构造函数解析日期字符串
   const date = new Date(dateString)
-
   // 检查日期是否有效
   if (isNaN(date.getTime())) {
     throw new Error('Invalid date string')
   }
-
   // 使用 Date 对象的年份、月份和日期来构建新的日期字符串
   // 注意：JavaScript 中的月份是从 0 开始的，所以我们需要加 1
-  const formattedDate = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`
 
-  return formattedDate
+  return `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`
 }
 const projectState = (state) => {
   const obj = {

web/src/view/projectManage/test/test.vue

@@ -3,9 +3,25 @@
     <el-row style="height: 800px">
       <el-col :span="10">
         <el-card
-          header="项目基本信息"
           style="height: 100%"
         >
+          <template #header>
+            <el-row align="middle">
+              <el-col :span="6">
+                <el-text size="large">项目基本信息</el-text>
+              </el-col>
+              <el-col
+                :span="4"
+                :offset="14"
+              >
+                <el-button
+                  type="primary"
+                  :icon="Edit"
+                  @click="messagePopupShow = true"
+                >信息编辑</el-button>
+              </el-col>
+            </el-row>
+          </template>
           <el-row>
             <el-col :span="24">
               <el-text
@@ -89,9 +105,24 @@
         class="ml-5"
       >
         <el-card
-          header="项目文件列表"
           style="height: 100%"
         >
+          <template #header>
+            <el-row align="middle">
+              <el-col :span="6">
+                <el-text size="large">项目文件列表</el-text>
+              </el-col>
+              <el-col
+                :span="3"
+                :offset="15"
+              >
+                <el-button
+                  type="primary"
+                  :icon="Edit"
+                >类型编辑</el-button>
+              </el-col>
+            </el-row>
+          </template>
           <el-row>
             <el-col :span="6">
               <el-input
@@ -105,15 +136,15 @@
               :offset="1"
             >
               <el-select
-                  clearable
-                  v-model="fileType"
-                  @change="changeFileType"
+                v-model="fileType"
+                clearable
+                @change="changeFileType"
               >
                 <el-option
                   v-for="item in fileTypeList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
+                  :key="item.ID"
+                  :label="item.name"
+                  :value="item.ID"
                 />
               </el-select>
             </el-col>
@@ -143,16 +174,18 @@
               <el-button
                 type="primary"
                 :icon="Upload"
+                @click="fileDialog = true"
               >
                 上传
               </el-button>
             </el-col>
             <el-col
-                :span="3"
+              :span="3"
             >
               <el-button
-                  type="primary"
-                  :icon="Download"
+                type="primary"
+                :icon="Download"
+                @click="downloadTips"
               >
                 下载
               </el-button>
@@ -187,6 +220,7 @@
                       text
                       type="primary"
                       :icon="Download"
+                      size="large"
                       @click="projectEdit(scope.$index, scope.row)"
                     >
                       下载
@@ -195,6 +229,7 @@
                       text
                       type="primary"
                       :icon="Delete"
+                      size="large"
                       @click="projectDelete(scope.$index, scope.row)"
                     >
                       删除
@@ -207,6 +242,87 @@
         </el-card>
       </el-col>
     </el-row>
+    <el-dialog
+      v-model="fileDialog"
+      title="上传文件"
+      width="40%"
+      :before-close="fileDialogClose"
+      :align-center="true"
+    >
+      <el-form>
+        <el-row style="margin-top: 20px">
+          <el-col :span="8">
+            <el-form-item label="文件类型：">
+              <el-select
+                v-model="uploadFileType"
+                clearable
+                placeholder="请选择上传文件的类型"
+                @change="changeUploadFileType"
+              >
+                <el-option
+                  v-for="item in fileTypeList"
+                  :key="item.ID"
+                  :label="item.name"
+                  :value="item.ID"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-row style="margin-top: 20px">
+        <el-col :span="24">
+          <el-upload
+            class="upload-demo"
+            drag
+            multiple
+            :auto-upload="false"
+            :file-list="uploadFileData"
+            :on-change="changeFileData"
+            :on-remove="removeFileData"
+          >
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">
+              请选择需要上传的文件
+            </div>
+            <template #tip>
+              <div class="el-upload__tip">
+                选择的文件不要超过500MB
+              </div>
+            </template>
+          </el-upload>
+        </el-col>
+      </el-row>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="fileDialog = false">取消</el-button>
+          <el-button
+            type="primary"
+            @click="supplementFile"
+          >
+            上传
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog
+        v-model="messagePopupShow"
+        title="项目基本信息编辑"
+        width="40%"
+    >
+      <el-from>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="项目名称">
+              <el-input placeholder="请输入项目名称"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row></el-row>
+        <el-row></el-row>
+        <el-row></el-row>
+      </el-from>
+    </el-dialog>
   </div>
 </template>
 
@@ -214,13 +330,15 @@
 import { getProjectMessage } from '@/api/project'
 import { onMounted, reactive, ref } from 'vue'
 import { getAllUsers } from '@/api/user'
-import { Download, Upload, Delete, Search, RefreshLeft } from '@element-plus/icons-vue'
+import { getFileType, queryFileList, createProjectFile, downloadProjectFile } from '@/api/file'
+import { Download, Upload, Delete, Search, RefreshLeft, Edit } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 defineOptions({
   name: 'Test'
 })
 const fileCondition = reactive({
-  code: '',
+  code: 'LCZM202407161229',
   name: '',
   genre: 0,
   pageInfo: {
@@ -228,30 +346,39 @@ const fileCondition = reactive({
     pageSize: 9
   }
 })
+
 const information = reactive({})
+
+const messagePopupShow = ref(false)
 // 项目用户列表
 const userList = reactive([])
 // 项目文件列表
 const fileList = reactive([])
 // 项目文件类型列表
-const fileTypeList = [
-  { label: '立项文件', value: 1 },
-  { label: '施工文件', value: 2 }
-]
+const fileTypeList = reactive([])
 // 项目文件类型
 const fileType = ref('')
+// 上传文件弹窗
+const fileDialog = ref(false)
+
+const uploadFileType = ref('')
+
+const uploadFileData = ref([])
+
+// const uploadFileList = ref([])
 
 onMounted(() => {
   projectMessage('LCZM202407161229')
+  queryFileType()
   getAllUsers().then(res => {
     if (res.code === 0) {
       userList.push(...res.data)
     }
   })
 })
+// 初始化项目数据
 const projectMessage = (code) => {
   getProjectMessage(code).then(res => {
-    console.log(res.data)
     if (res.code === 0) {
       const data = res.data
       data.CreatedAt = formatDate(data.CreatedAt)
@@ -261,29 +388,118 @@ const projectMessage = (code) => {
           // data[key].CreatedAt = formatDate(data[key].CreatedAt)
           // data[key].UpdatedAt = formatDate(data[key].UpdatedAt)
           fileList.push(...data[key])
-          console.log(fileList)
         }
         information[key] = data[key]
       })
     }
   })
 }
+// 项目类型
+const queryFileType = () => {
+  getFileType().then(res => {
+    if (res.code === 0) {
+      fileTypeList.push(...res.data)
+    }
+  })
+}
 
 const changeFileType = (value) => {
-  console.log(value)
-  fileTypeList.forEach(item => {
-    if (item.value === value) {
-      fileType.value = item.label
+  if (typeof value === 'number') {
+    fileTypeList.forEach(item => {
+      if (item.ID === value) {
+        fileType.value = item.name
+      }
+    })
+    fileCondition.genre = value
+  } else {
+    fileCondition.genre = 0
+  }
+}
+// 查询文件
+const queryFile = () => {
+  queryFileList(fileCondition).then(res => {
+    if (res.code === 0) {
+      console.log(res.data)
+      fileList.push(...res.data)
     }
   })
-  fileCondition.genre = value
 }
-// 查询文件
-const queryFile = () => {}
-// 选择负责人
-// const headSelect = (value) => {
-//   information.principal = value
-// }
+// 上传文件
+const fileDialogClose = () => {
+  fileDialog.value = false
+}
+
+const changeUploadFileType = (value) => {
+  if (typeof value === 'number') {
+    uploadFileType.value = value
+  } else {
+    uploadFileType.value = ''
+  }
+}
+
+const changeFileData = (file, fileList) => {
+  uploadFileData.value = fileList
+  console.log(uploadFileData)
+}
+
+const removeFileData = (file, fileList) => {
+  uploadFileData.value = fileList
+  console.log(uploadFileData)
+}
+
+const supplementFile = () => {
+  if (uploadFileType.value === '') {
+    ElMessage.error('请选择文件类型')
+  } else if (uploadFileData.value.length === 0) {
+    ElMessage.error('暂未选择文件')
+  } else {
+    const formData = new FormData()
+    uploadFileData.value.forEach(item => {
+      formData.append('file', item.raw)
+    })
+    formData.append('genre', uploadFileType.value)
+    formData.append('code', 'LCZM202407161229')
+    createProjectFile(formData).then(res => {
+      if (res.code === 0) {
+        fileDialog.value = false
+        ElMessage.success(res.msg)
+      } else {
+        ElMessage.error(res.msg)
+      }
+    })
+  }
+}
+
+// 下载文件
+const downloadTips = () => {
+  ElMessageBox.confirm(
+    '确定要下载列表中的所有文件吗?',
+    '文件下载',
+    {
+      confirmButtonText: '下载',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      const type = fileType.value === '' ? 0 : fileType.value
+      console.log(type)
+      const data = {
+        code: 'LCZM202407161229',
+        genre: type,
+        name: fileCondition.name
+      }
+      downloadProjectFile(data).then(res => {
+        console.log(res.data)
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消下载',
+      })
+    })
+}
 // 日期格式化
 const formatDate = (dateString, locale = 'en-US', timezone = 'Asia/Shanghai') => {
   // 使用 Date 构造函数解析日期字符串