From 716d18122fa5951c393c384965ce9e30c7cca040 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Sat, 18 May 2024 20:52:14 +0800
Subject: [PATCH] =?UTF-8?q?feat=20:=20=E5=B0=81=E8=A3=85=E5=B8=A6=E6=9C=89?=
 =?UTF-8?q?=E9=99=84=E4=BB=B6=E5=8F=8A=E5=85=B6=E4=BB=96=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=9A=84=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AttachmentUpload.vue           | 115 ++++++++++++++++
 .../DetailComponent/CollectionDetail.vue      |   5 +-
 .../implementation/check.vue                  | 124 +++++++-----------
 3 files changed, 167 insertions(+), 77 deletions(-)
 create mode 100644 src/components/AttachmentUpload.vue

diff --git a/src/components/AttachmentUpload.vue b/src/components/AttachmentUpload.vue
new file mode 100644
index 0000000..49aa5e9
--- /dev/null
+++ b/src/components/AttachmentUpload.vue
@@ -0,0 +1,115 @@
+<template>
+  <el-form :model="formData" ref="applyForm" label-width="auto" :rules="rules">
+    <el-row>
+      <el-col :span="24">
+        <el-form-item :label="label" prop="attachment">
+          <file-upload @getFile="getAttachment" :showFileList="showFileList" @delete="deleteFile"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="其他文件">
+          <el-card style="width: 100%">
+            <file-upload @getFile="getOtherFile" :showFileList="false"/>
+            <fvTable style="width: 100%;max-height: 250px" v-if="showTable" :tableConfig="tableConfig"
+                     :data="otherFileList" :isSettingCol="false" :pagination="false">
+              <template #empty>
+                <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
+              </template>
+            </fvTable>
+          </el-card>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup lang="jsx">
+import FileUpload from '@/components/FileUpload.vue'
+const emit = defineEmits(["getAttachment", "getOtherFile", "deleteFile","deleteOtherFile","download"])
+const formData = ref({})
+const tableConfig = reactive({
+  columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width: '80',
+    },
+    {
+      prop: 'originalFileName',
+      label: '文件名',
+      align: 'center',
+    },
+    {
+      prop: 'tag',
+      label: '标签',
+      align: 'center'
+    },
+    {
+      prop: 'size',
+      label: '文件大小',
+      align: 'center',
+      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        return (
+            <div>
+              <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
+              <el-button type="primary" size="large" link onClick={() => deleteOtherFile(row)}>删除</el-button>
+            </div>
+        )
+      }
+    }
+  ]
+})
+const rules = reactive({
+  attachment: [{required: true, message: '请上传附件', trigger: 'blur'}],
+})
+const props = defineProps({
+  showFileList: {
+    type: Boolean,
+    default:false
+  },label: {
+    type: String,
+    default:'项目附件'
+  },otherFileList: {
+    type: Array,
+    default:[]
+  },showTable: {
+    type: Boolean,
+    default:true
+  }
+})
+watch(() => props.showTable, (newVal) => {
+  props.showTable=newVal
+}, {deep: true})
+watch(() => props.otherFileList, (newVal) => {
+  props.otherFileList=newVal
+}, {deep: true})
+
+const getAttachment = (val) => {
+  emit('getAttachment',val)
+}
+const getOtherFile = (val) => {
+  emit('getOtherFile',val)
+}
+const deleteFile = (val) => {
+  emit('deleteFile',val)
+}
+const deleteOtherFile = (row) => {
+  emit('deleteOtherFile',row)
+}
+const handleDownload = (row) => {
+  emit('download',row)
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/DetailComponent/CollectionDetail.vue b/src/components/DetailComponent/CollectionDetail.vue
index a6a3a26..03a965b 100644
--- a/src/components/DetailComponent/CollectionDetail.vue
+++ b/src/components/DetailComponent/CollectionDetail.vue
@@ -39,7 +39,7 @@ import OperationRender from '@/views/workflow/common/OperationRender.vue'
 import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
 import {matterTree} from '@/utils/matterTree.js';
 
-const emit = defineEmits(['getInfo'])
+const emit = defineEmits(['getInfo','download'])
 const form = ref()
 const showForm = ref(true)
 const loading = ref(false)
@@ -139,6 +139,9 @@ const init = (newVal) => {
 const getInfo = () => {
   emit('getInfo')
 }
+const handleDownload = (row) => {
+  emit('download',row)
+}
 const getDataSourceOptionItem = (val) => {
   if (val instanceof Array) {
     val.forEach(item => {
diff --git a/src/views/project-management/implementation/check.vue b/src/views/project-management/implementation/check.vue
index a8e88b1..ee49e07 100644
--- a/src/views/project-management/implementation/check.vue
+++ b/src/views/project-management/implementation/check.vue
@@ -1,33 +1,18 @@
 <template>
   <div class="apply-block">
     <el-form :model="formData" ref="applyForm" label-width="auto" :rules="rules">
-      <baseTitle title="项目立项申请"></baseTitle>
+      <baseTitle title="项目验收"></baseTitle>
       <el-row>
         <el-col :span="12">
           <el-form-item label="前置流程">
             <el-input v-model="formData.requirementName" clearable></el-input>
           </el-form-item>
         </el-col>
-        <el-col :span="24">
-          <el-form-item label="项目验收附件" prop="attachment">
-            <file-upload @getFile="getAttachment" :showFileList="true" @delete="handleDelete"/>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item label="其他文件">
-            <el-card style="width: 100%">
-              <file-upload @getFile="getOtherFile" :showFileList="false" />
-              <fvTable style="width: 100%;max-height: 250px" v-if="showTable" :tableConfig="tableConfig"
-                       :data="otherFileList" :isSettingCol="false" :pagination="false">
-                <template #empty>
-                  <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
-                </template>
-              </fvTable>
-            </el-card>
-          </el-form-item>
-        </el-col>
       </el-row>
     </el-form>
+    <AttachmentUpload label="项目验收附件" :showTable="showTable" :otherFileList="otherFileList"
+                      @deleteOtherFile="deleteOtherFile" @download="downloadOtherFile" @getAttachment="getAttachment"
+                      @getOtherFile="getOtherFile" :showFileList="true" @deleteFile="deleteAttachment"/>
     <div class="oper-page-btn">
       <el-button color="#DED0B2" @click="handleSubmit(applyForm)">提交</el-button>
     </div>
@@ -35,59 +20,14 @@
 </template>
 
 <script setup lang="jsx">
-import FileUpload from "@/components/FileUpload.vue";
-import {ElMessage} from "element-plus";
-import {deleteFile} from "@/api/project-demand";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {deleteFile,downloadFile} from "@/api/project-demand";
 
 const formData = ref({})
-const rules = reactive({
-  attachment: [{required: true, message: '请上传项目立项附件', trigger: 'blur'}],
-})
 const fileList = ref(null)
 const applyForm = ref()
 const showTable = ref(true)
 const otherFileList = ref([])
-const tableConfig = reactive({
-  columns: [
-    {
-      prop: 'index',
-      type: 'index',
-      label: '序号',
-      align: 'center',
-      width: '80',
-    },
-    {
-      prop: 'originalFileName',
-      label: '文件名',
-      align: 'center',
-    },
-    {
-      prop: 'tag',
-      label: '标签',
-      align: 'center'
-    },
-    {
-      prop: 'size',
-      label: '文件大小',
-      align: 'center',
-      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
-    },
-    {
-      prop: 'oper',
-      label: '操作',
-      align: 'center',
-      currentRender: ({row, index}) => {
-        return (
-            <div>
-              <a style="cursor: pointer;font-size: 14px;color: #2a99ff;" href={row.url}>下载</a>
-              <el-button type="primary" size="large" link onClick={() => beforeRemove(row)}>删除</el-button>
-            </div>
-        )
-      }
-    }
-  ]
-})
-
 const compositeParam = (item) => {
   return {
     fileId: item.id,
@@ -100,24 +40,56 @@ const compositeParam = (item) => {
   }
 }
 const getAttachment = (val) => {
-  console.log('上传文件', val)
-  // showTable.value = false
-  // let fileObj = compositeParam(val)
-  // formData.value.fileList.push(fileObj)
-  // nextTick(() => {
-  //   showTable.value = true
-  // })
+  console.log('上传文件getAttachment', val)
+  showTable.value = false
+  let fileObj = compositeParam(val)
+  fileList.value.push(fileObj)
+  nextTick(() => {
+    showTable.value = true
+  })
 }
-const getOtherFile = () => {
-
+const getOtherFile = (val) => {
+  console.log('上传文件getOtherFile', val)
+  showTable.value = false
+  let fileObj = compositeParam(val)
+  otherFileList.value.push(fileObj)
+  nextTick(() => {
+    showTable.value = true
+  })
 }
-const handleDelete=(val)=>{
+const deleteAttachment = (val) => {
   deleteFile(val).then(res => {
     if (res.code === 1000) {
       ElMessage.success("删除成功");
     }
   });
 }
+const deleteOtherFile = (row) => {
+  ElMessageBox.confirm(`确认删除名称为${row.originalFileName}的表格吗?`, '系统提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deleteFile(row.fileId).then(res => {
+      if (res.code === 1000) {
+        ElMessage.success("删除成功");
+        otherFileList.value.splice(otherFileList.value.findIndex((item) => item.id === row.fileId), 1);
+      }
+    });
+  }).catch(() => {
+    ElMessage.warning("用户取消删除! ");
+  })
+}
+
+const downloadOtherFile = (row) => {
+  downloadFile(row.fileId).then(res => {
+    const blob = new Blob([res])
+    let a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = row.originalFileName
+    a.click()
+  })
+}
 const handleSubmit = (instance) => {
   if (!instance) return
   instance.validate(async (valid) => {