fix : 优化需求征集详情页面

2024-06-04 16:41:28 +08:00
parent 6597506435
commit 1d66c44edb
16 changed files with 162 additions and 429 deletions
--- a/src/components/DetailComponent/ApprovalDetail.vue
+++ b/src/components/DetailComponent/ApprovalDetail.vue
@@ -55,19 +55,9 @@ const props = defineProps({
    default: false
  }
 })
-watch(() => props.loading, (newVal) => {
-  props.loading = newVal
-}, {deep: true})
 const form = ref()
-
-const localData = reactive({
-  fileList: props.formData.fileList,
-  singleFile: props.formData.singleFile
-})
-
 const schema = computed(()=>{
  let arr
-
  if(props.type == 'approval') {
    arr = [
      {
@@ -86,7 +76,7 @@ const schema = computed(()=>{
        component: ()=>(
          <div>
            {
-              props.formData.singleFile?.originalFileName ?
+              props.formData.singleFile?.originalFileName?
              <span
                style={{color: '#409EFF', cursor: 'pointer'}}
                onClick={()=>handleDownload(props.formData.singleFile)}
@@ -118,7 +108,7 @@ const schema = computed(()=>{
        component: ()=>(
            <div>
              {
-                props.formData.singleFile?.originalFileName ?
+                props.formData.singleFile?.originalFileName?
                    <span
                        style={{color: '#409EFF', cursor: 'pointer'}}
                        onClick={()=>handleDownload(props.formData.singleFile)}
@@ -143,7 +133,7 @@ const schema = computed(()=>{
        component: ()=>(
            <div>
              {
-                props.formData.singleFile?.originalFileName ?
+                props.formData.singleFile?.originalFileName?
                    <span
                        style={{color: '#409EFF', cursor: 'pointer'}}
                        onClick={()=>handleDownload(props.formData.singleFile)}
@@ -172,10 +162,13 @@ const handleDownload = (row) => {
    loading.close()
  })
 }
-
 watchEffect(()=>{
  Object.keys(props.formData).length && (form.value.setValues(props.formData))
 })
+
+watch(() => props.loading, (newVal) => {
+  props.loading = newVal
+}, {deep: true})
 </script>

 <style lang="scss" scoped>
--- a/src/components/DetailComponent/CollectionDetail.vue
+++ b/src/components/DetailComponent/CollectionDetail.vue
@@ -1,27 +1,32 @@
 <template>
  <div v-loading="loading">
-    <el-form :model="formData" ref="form" label-width="auto">
+    <el-form :model="formData" label-width="auto">
      <el-row>
        <el-col :span="12">
-          <el-form-item label="名称">
+          <el-form-item label="征集名称">
            <span>{{ formData.requirementName }}</span>
          </el-form-item>
        </el-col>
-<!--        <el-col :span="12">-->
-<!--          <el-form-item label="所属公司">-->
-<!--            <span>{{ formData.companyIds }}</span>-->
-<!--          </el-form-item>-->
-<!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="征集类型">
            <span>{{ formData.collectType }}</span>
          </el-form-item>
        </el-col>
-        <el-col :span="24">
+        <el-col :span="12" v-if="type==='singleDetail'">
+          <el-form-item label="所属公司">
+            <span>{{ formData.companyIds }}</span>
+          </el-form-item>
+        </el-col>
+        <el-col :span="type==='singleDetail'?12: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>
        <baseTitle title="征集说明"></baseTitle>
        <el-col :span="24">
          <el-form-item>
@@ -31,29 +36,11 @@
            </el-card>
          </el-form-item>
        </el-col>
-        <baseTitle title="附件列表"></baseTitle>
+        <baseTitle v-if="fileListShow === 'READ' || fileListShow === 'EDIT'" title="附件列表"></baseTitle>
        <el-col :span="24">
-          <el-form-item>
-            <fvTable style="width: 100%;max-height: 200px" v-if="processViewer" :tableConfig="tableConfig"
-                     :data="formData.fileList" :isSettingCol="false" :pagination="false">
-              <template #empty>
-                <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
-              </template>
-            </fvTable>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <div v-if="formData.taskId">
-            <baseTitle title="审核意见"></baseTitle>
-            <el-form-item prop="auditOpinion">
-              <el-input
-                  v-model="formData.auditOpinion"
-                  :rows="3"
-                  type="textarea"
-                  placeholder="请输入审核意见"
-              />
-            </el-form-item>
-          </div>
+          <file-component title="" tag="需求征集"
+                          v-model:value="formData.fileList" :processViewer="processViewer"
+                          :file-list-show="fileListShow"/>
        </el-col>
      </el-row>
      <div class="approval-record">
@@ -73,10 +60,6 @@ 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(['getInfo',"update:formData"])
-const form = ref()
-const showTable = ref(false)
-
 const props = defineProps({
  formData: {
    type: Array,
@@ -93,48 +76,20 @@ const props = defineProps({
  companyOption: {
    type: Array,
    default: []
-  }, loading: {
+  },
+  loading: {
    type: Boolean,
    default: false
+  },
+  fileListShow: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: ''
  }
 })
-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 (
-            <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
-        )
-      }
-    }
-  ]
-})
 const handleDownload = (row) => {
  downloadFile(row.fileId).then(res => {
    const blob = new Blob([res])
@@ -154,6 +109,16 @@ watch(() => props.processViewer, (newVal) => {
 }, {deep: true})
 </script>

-<style scoped>
+<style scoped lang="scss">
+:deep(.el-empty__description) {
+  margin-top: 0;
+}

+.approval-record {
+  padding-bottom: 30px;
+
+  .process {
+    position: relative;
+  }
+}
 </style>
--- a/src/components/DetailComponent/FileComponent.vue
+++ b/src/components/DetailComponent/FileComponent.vue
@@ -1,7 +1,7 @@
 <template>
-  <el-form-item label="需求上报附件" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'">
+  <el-form-item :label="title" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'">
    <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
-    <fvTable style="width: 100%;max-height: 400px;" v-if="processViewer" :tableConfig="tableConfig"
+    <fvTable style="width: 100%;max-height: 300px;" v-if="processViewer" :tableConfig="tableConfig"
             :data="_value" :isSettingCol="false" :pagination="false">
      <template #empty>
        <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
@@ -11,10 +11,8 @@
 </template>

 <script setup lang="jsx">
-
 import {downloadFile, deleteFile} from "@/api/project-demand";
-import {ElMessage, ElMessageBox} from "element-plus";
-
+import {ElMessageBox, ElNotification} from "element-plus";

 const props = defineProps({
  title: {
@@ -38,9 +36,7 @@ const props = defineProps({
    default: false
  },
 })
-
-
-
+const emit = defineEmits(['update:value'])
 const tableConfig = reactive({
  columns: [
    {
@@ -123,11 +119,18 @@ const compositeParam = (item, type) => {
    fileType: item.fileType,
    url: item.url,
    newFile: true,
-    tag: '需求上报'
+    tag: props.tag
  }
 }
-
-
+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()
+  })
+}
 const handleDelete = (row) => {
  ElMessageBox.confirm(`确认删除名称为${row.originalFileName}的表格吗?`, '系统提示', {
    confirmButtonText: '确定',
@@ -135,13 +138,21 @@ const handleDelete = (row) => {
    type: 'warning'
  }).then(() => {
    deleteFile(row.fileId).then(res => {
+      ElNotification({
+        title: '提示',
+        message: res.msg,
+        type: res.code === 1000 ? 'success' : 'error'
+      })
      if (res.code === 1000) {
-        ElMessage.success("删除成功");
-        _value.splice(_value.findIndex((item) => item.id === row.fileId), 1);
+        _value.value.splice(_value.value.findIndex((item) => item.id === row.fileId), 1);
      }
    });
  }).catch(() => {
-    ElMessage.warning("用户取消删除! ");
+    ElNotification({
+      title: '提示',
+      message: '用户取消删除! ',
+      type: 'warning'
+    })
  })
 }

@@ -151,5 +162,7 @@ watch(() => props.processViewer, (newVal) => {
 </script>

 <style scoped>
-
+:deep(.el-table--fit ) {
+  height: 300px !important;
+}
 </style>
--- a/src/components/DetailComponent/SummaryDetail.vue
+++ b/src/components/DetailComponent/SummaryDetail.vue
@@ -126,7 +126,7 @@
        </el-col>
        <el-col :span="24">
          <el-form-item label="需求上报申请书">
-            <el-button type="primary" link @click="handleDownload(localFormData.singleFile)">
+            <el-button type="primary" link @click="handleDownload(localFormData.singleFile)" style="font-size: 16px">
              {{ localFormData.singleFile?.originalFileName }}
            </el-button>
          </el-form-item>