feat : 文件预览,项目详情文件表格展示

src/views/project-demand/requirement/add.vue

@@ -110,6 +110,8 @@
 
     <company-picker :multiple="true" ref="companyRef" title="请选择征集公司" @ok="selected"
                     v-model:value="selectedCompanyList"/>
+    <file-preview ref="filePreviewRef" v-if="filePreviewShow" :fileName="filePreviewParam.fileName" :fileUrl="filePreviewParam.fileUrl"
+                  :fileType="filePreviewParam.fileType"/>
   </div>
 </template>
 
@@ -134,7 +136,12 @@ import {getFundOption} from "@/api/special-fund";
 import CompanyPicker from "@/components/DetailComponent/CompanyPicker.vue";
 
 import {useCacheStore} from '@/stores/cache.js'
-
+const filePreviewParam = ref({
+  fileUrl: '',
+  fileName: '',
+  fileType: 'pdf'
+})
+const filePreviewShow = ref(false)
 const cacheStore = useCacheStore()
 const companyRef = ref()
 const showExpendText = ref('')
@@ -190,6 +197,9 @@ const tableConfig = reactive({
       prop: 'originalFileName',
       label: '文件名',
       align: 'center',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => (
+          <div style="color: #2a99ff;cursor: pointer;" onClick={() => clickToPreview(row)}>{row.originalFileName}</div>)
     },
     {
       prop: 'tag',
@@ -220,6 +230,18 @@ const tableConfig = reactive({
     }
   ]
 })
+const clickToPreview = (row) => {
+  filePreviewShow.value = false
+  filePreviewParam.value = {
+    fileUrl: row.url,
+    fileName: row.originalFileName,
+    fileType: row.fileType
+  }
+  nextTick(()=>{
+    filePreviewShow.value = true
+  })
+  // filePreviewRef.value.show()
+}
 const disabledDate = (time) => {
   return time.getTime() < Date.now() - 8.64e7//不能选择之后的数据
 }

src/views/project-demand/requirement/moblieDetail/CollectionDetailMoblie.vue

@@ -1,193 +0,0 @@
-<template>
-  <div v-loading="loading">
-    <el-form :model="formData" label-width="left">
-      <el-row>
-        <el-col :span="24" v-if="type==='singleDetail'">
-          <el-form-item label="征集名称">
-            <span>{{ formData.requirementName }}</span>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item label="征集类型">
-            <span>{{ formData.collectType }}</span>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item label="需求上报截止时间">
-            <span>{{ formData.deadline }}</span>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" v-if="formData.isSpecialFund">
-          <el-form-item label="专项资金名称">
-            <span>{{ formData.specialFund }}</span>
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="24" v-if="type==='singleDetail'">
-          <el-form-item label="征集公司">
-            <span :class="showExpendClass(showMoreCompany,formData.companyIds)">{{
-                getCompanyName(formData.companyIds)
-              }}</span>
-            <div style="color: #2a99ff;text-align: center;width: 100%;font-size: 15px;cursor: pointer"
-                 @click="handleExpend">{{ showExpendText }}
-            </div>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <baseTitle title="征集说明"></baseTitle>
-          <el-form-item>
-            <el-card style="width: 100%">
-              <div v-html="formData.collectExplain">
-              </div>
-            </el-card>
-          </el-form-item>
-        </el-col>
-        <baseTitle v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" title="附件列表"></baseTitle>
-        <el-col :span="24">
-          <file-component title="" tag="需求征集" fileNameTableWidth="300"
-                          v-model:value="formData.fileList" :processViewer="processViewer"
-                          :file-list-show="fileListShow"/>
-        </el-col>
-        <el-col :span="24">
-          <div v-if="data.taskId">
-            <baseTitle title="审核意见"></baseTitle>
-            <el-form-item prop="_value">
-              <el-input
-                  v-model="_value"
-                  :rows="3"
-                  type="textarea"
-                  placeholder="请输入审核意见"
-              />
-            </el-form-item>
-          </div>
-        </el-col>
-      </el-row>
-      <div class="approval-record">
-        <div class="approval-title">
-          <baseTitle title="审批记录"></baseTitle>
-          <div class="diagram">
-            <div class="base-title">流程图</div>
-            <el-switch
-                v-model="changeDiagram"
-                style="--el-switch-on-color:#BEA266; --el-switch-off-color:#cecdcd"
-            />
-          </div>
-        </div>
-        <div class="process">
-          <operation-render v-if="processViewer && data.operationList && data.operationList.length > 0&&!changeDiagram"
-                            :operation-list="data.operationList" :isColumn="true"
-                            :state="data.state"/>
-          <process-diagram-viewer v-if="processViewer&&changeDiagram" id-name="collectionProcess"/>
-        </div>
-      </div>
-    </el-form>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import OperationRender from '@/views/workflow/common/OperationRender.vue'
-import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
-import {downloadFile} from "@/api/project-demand";
-
-const emit = defineEmits(['update:value'])
-const showExpendText = ref('')
-const showMoreCompany = ref(false)
-const props = defineProps({
-  formData: {
-    type: Array,
-    default: []
-  },
-  data: {
-    type: Array,
-    default: []
-  },
-  processViewer: {
-    type: Boolean,
-    default: false
-  },
-  companyOption: {
-    type: Array,
-    default: []
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  fileListShow: {
-    type: String,
-    default: ''
-  },
-  type: {
-    type: String,
-    default: ''
-  },
-  value: {
-    type: String,
-    default: ''
-  }
-})
-const changeDiagram = ref(false)
-const _value = computed({
-  get() {
-    return props.value;
-  },
-  set(val) {
-    emit("update:value", val);
-  }
-})
-const getCompanyName = (data) => {
-  if (data) {
-    return data.join('，')
-  }
-}
-const handleExpend = () => {
-  showMoreCompany.value = !showMoreCompany.value;
-  showExpendClass(showMoreCompany.value, props.formData.companyIds)
-}
-const showExpendClass = (showMoreCompany, data) => {
-  if (!showMoreCompany) {
-    if (data && data.length > 14) {
-      showExpendText.value = '展开'
-      return 'company-style'
-    }
-  } else {
-    showExpendText.value = '收缩'
-    return ''
-  }
-}
-
-const handleDownload = (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()
-  })
-}
-
-watch(() => props.loading, (newVal) => {
-  props.loading = newVal
-}, {deep: true})
-
-watch(() => props.processViewer, (newVal) => {
-  props.processViewer = newVal
-}, {deep: true})
-</script>
-
-<style scoped lang="scss">
-:deep(.el-empty__description) {
-  margin-top: 0;
-}
-
-.company-style {
-  //width: 98%;
-  min-height: 30px;
-  max-height: 60px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-}
-</style>

src/views/project-demand/requirement/moblieDetail/index.vue

@@ -16,7 +16,7 @@ import {useTagsView} from '@/stores/tagsview.js'
 import {getFundOption} from "@/api/special-fund";
 import {getSubCompOpt} from "@/api/user/user";
 import {matterTree} from "@/utils/matterTree";
-import CollectionDetailMoblie from './CollectionDetailMoblie.vue'
+import CollectionDetailMoblie from '@/views/project-management/mobledetail/CollectionDetailMoblie.vue'
 import OpinionMoblie from '@/views/project-management/mobledetail/OpinionMoblie.vue'
 
 const tagsViewStore = useTagsView()