fix : 修复直接上报的详情组件渲染

2024-06-02 22:22:06 +08:00
parent 6bb97b4a1d
commit 456f2284e9
7 changed files with 194 additions and 130 deletions
--- a/src/components/DetailComponent/ApprovalDetail.vue
+++ b/src/components/DetailComponent/ApprovalDetail.vue
@@ -1,17 +1,10 @@
 <template>
  <div  v-loading="loading">
    <fvForm :schema="schema" @getInstance="(e)=>form = e"></fvForm>
-    <!-- <AttachmentUpload></AttachmentUpload> -->
-    <el-form :model="formData" label-width="auto" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'">
-      <el-form-item label="其他文件">
-        <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
-        <fvTable style="width: 100%;max-height: 400px;" v-if="processViewer" :tableConfig="tableConfig"
-                 :data="localFormData.fileList" :isSettingCol="false" :pagination="false">
-          <template #empty>
-            <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
-          </template>
-        </fvTable>
-      </el-form-item>
+    <el-form :model="formData" label-width="auto" >
+      <file-component title="需求上报附件" tag="需求上报"
+                      v-model:value="formData.fileList" :processViewer="processViewer"
+                      :file-list-show="fileListShow"/>
    </el-form>
    <div class="approval-record">
        <baseTitle title="审批记录"></baseTitle>
@@ -21,19 +14,15 @@
          <process-diagram-viewer v-if="processViewer" :id-name="type"/>
        </div>
    </div>
-<!--    <Opinion: v-if="data.taskId" :formData="formData" :taskId="formData.taskId"></Opinion:>-->
  </div>
 </template>

 <script setup lang="jsx">
 import { computed, markRaw, reactive, ref, watchEffect } from 'vue';
-import AttachmentUpload from '../AttachmentUpload.vue';
 import OperationRender from '@/views/workflow/common/OperationRender.vue'
 import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';
-import Opinion from './Opinion.vue';
-import fvTable from '@/fvcomponents/fvTable/index.vue'
 import { ElLoading } from 'element-plus';
-import {deleteFile, downloadFile} from "@/api/project-demand";
+import {downloadFile} from "@/api/project-demand";

 const props = defineProps({
  formData: {
@@ -52,12 +41,16 @@ const props = defineProps({
    type: Array,
    default: []
  },
-
+  fileListShow: {
+    type: String,
+    default: 'READ'
+  },
  // approval 立项, execute 实施, 归档 archivist
  type: {
    type: String,
    default: 'approval'
-  }, loading: {
+  },
+  loading: {
    type: Boolean,
    default: false
  }
--- a/src/components/DetailComponent/FileComponent.vue
+++ b/src/components/DetailComponent/FileComponent.vue
@@ -1,8 +1,8 @@
 <template>
  <el-form-item label="需求上报附件" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'">
-    <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>{{fileList}}
+    <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
    <fvTable style="width: 100%;max-height: 400px;" v-if="processViewer" :tableConfig="tableConfig"
-             :data="fileList" :isSettingCol="false" :pagination="false">
+             :data="_value" :isSettingCol="false" :pagination="false">
      <template #empty>
        <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
      </template>
@@ -29,14 +29,17 @@ const props = defineProps({
    type: String,
    default: 'READ'
  },
-  fileList: {
+  value: {
    type: Array,
    default: []
  },
+  processViewer: {
+    type: Boolean,
+    default: false
+  },
 })


-const processViewer = ref(false)

 const tableConfig = reactive({
  columns: [
@@ -93,13 +96,21 @@ const tableConfig = reactive({
  ]
 })

+const _value = computed({
+  get() {
+    return props.value;
+  },
+  set(val) {
+    emit("update:value", val);
+  }
+})

 const getOtherFile = (val) => {
-  processViewer.value = false
+  props.processViewer = false
  let fileObj = compositeParam(val)
-  props.fileList.push(fileObj)
+  _value.value.push(fileObj)
  nextTick(() => {
-    processViewer.value = true
+    props.processViewer = true
  })
 }

@@ -126,7 +137,7 @@ const handleDelete = (row) => {
    deleteFile(row.fileId).then(res => {
      if (res.code === 1000) {
        ElMessage.success("删除成功");
-        props.fileList.splice(props.fileList.findIndex((item) => item.id === row.fileId), 1);
+        _value.splice(_value.findIndex((item) => item.id === row.fileId), 1);
      }
    });
  }).catch(() => {
@@ -134,15 +145,9 @@ const handleDelete = (row) => {
  })
 }

-const init = () => {
-  nextTick(() => {
-    processViewer.value = true
-  })
-}
-
-init()
-
-
+watch(() => props.processViewer, (newVal) => {
+  props.processViewer = newVal
+}, {deep: true})
 </script>

 <style scoped>
--- a/src/components/DetailComponent/SummaryDetail.vue
+++ b/src/components/DetailComponent/SummaryDetail.vue
@@ -133,7 +133,7 @@
        </el-col>
        <el-col :span="24">
          <file-component title="需求上报附件" tag="需求上报"
-                          :file-list="localFormData.fileList"
+                          v-model:value="localFormData.fileList" :processViewer="processViewer"
                          :file-list-show="fileListShow"/>
        </el-col>
      </el-row>
--- a/src/components/steps/index.vue
+++ b/src/components/steps/index.vue
@@ -5,11 +5,11 @@
  <div class="steps-box">
    <el-steps :active="localActive" finish-status="success">
      <el-step
-        v-for="(item, index) in localSteps"
-        :key="item.key"
-        :title="item.title"
-        :class="stepClass(index)"
-        @click="handleStep(item.key, index)"
+          v-for="(item, index) in localSteps"
+          :key="item.key"
+          :title="item.title"
+          :class="stepClass(index)"
+          @click="handleStep(item.key, index)"

      />
    </el-steps>
@@ -25,10 +25,10 @@
 </template>

 <script setup lang="jsx">
-import { ElLoading, ElNotification } from 'element-plus';
-import { computed, reactive, ref, watchEffect } from 'vue';
-import { useRoute } from 'vue-router';
-import { getBaseInfoApi } from './api';
+import {ElLoading, ElNotification} from 'element-plus';
+import {computed, reactive, ref, watchEffect} from 'vue';
+import {useRoute} from 'vue-router';
+import {getBaseInfoApi} from './api';

 const props = defineProps({
  // 步骤对应内容list
@@ -39,7 +39,7 @@ const props = defineProps({
  // 当前显示步骤
  active: {
    type: Number,
-    default:0
+    default: 0
  },
  // 已完成的工作流步骤
  stepSuccess: {
@@ -47,7 +47,7 @@ const props = defineProps({
    default: ['00']
  },
  //直接上报/需求征集
-  reportType:{
+  reportType: {
    type: String,
    default: ''
  }
@@ -57,9 +57,7 @@ const route = useRoute()

 const emits = defineEmits(['stepChange', 'setDetail'])

-const localData = reactive({
-
-})
+const localData = reactive({})

 const localActive = ref(0) // 当前激活步骤

@@ -92,7 +90,7 @@ const localSteps = ref([

 const baseForm = ref()

-const schema = computed(()=>{
+const schema = computed(() => {
  return [
    {
      label: '所属公司',
@@ -134,22 +132,43 @@ const localStepSuccess = ref([])
 // 格式化详情步骤条
 const formatProcedure = (data) => {
  let arr = []
-  if(data instanceof Array) {
-    data.forEach(item=>{
-      switch (item) {
-        case '00': arr.push(0)
-          break
-        case '10': arr.push(1)
-          break
-        case '20': arr.push(2)
-          break
-        // case '30': arr.push(3)
-        //   break
-        case '40': arr.push(3)
-          break
-        case '50': arr.push(4)
-          break
+  if (data instanceof Array) {
+    data.forEach(item => {
+      if (props.reportType === 'direct') {
+        switch (item) {
+          case '10':
+            arr.push(0)
+            break
+          case '20':
+            arr.push(1)
+            break
+          case '40':
+            arr.push(2)
+            break
+          case '50':
+            arr.push(3)
+            break
+        }
+      } else {
+        switch (item) {
+          case '00':
+            arr.push(0)
+            break
+          case '10':
+            arr.push(1)
+            break
+          case '20':
+            arr.push(2)
+            break
+          case '40':
+            arr.push(3)
+            break
+          case '50':
+            arr.push(4)
+            break
+        }
      }
+
    })
  }
  return arr
@@ -158,20 +177,25 @@ const formatProcedure = (data) => {
 // 反向格式化
 const formatReProcedure = (data) => {
  let arr = []
-  if(data instanceof Array) {
-    data.forEach(item=>{
+  if (data instanceof Array) {
+    data.forEach(item => {
      switch (item) {
-        case 0: arr.push('00')
+        case 0:
+          arr.push('00')
          break
-        case 1: arr.push('10')
+        case 1:
+          arr.push('10')
          break
-        case 2: arr.push('20')
+        case 2:
+          arr.push('20')
          break
-        // case 3: arr.push('30')
-        //   break
-        case 3: arr.push('40')
+          // case 3: arr.push('30')
+          //   break
+        case 3:
+          arr.push('40')
          break
-        case 4: arr.push('50')
+        case 4:
+          arr.push('50')
          break
      }
    })
@@ -179,17 +203,24 @@ const formatReProcedure = (data) => {
 }

 const formatActive = (val) => {
+  let newVal
+  if (props.reportType === 'direct') {
+    newVal = val + 1
+  } else {
+    newVal = val
+  }
  let active = ''
-  val == 0 && (active = '00')
-  val == 1 && (active = '10')
-  val == 2 && (active = '20')
+  newVal == 0 && (active = '00')
+  newVal == 1 && (active = '10')
+  newVal == 2 && (active = '20')
  // val == 3 && (active = '30')
-  val == 3 && (active = '40')
-  val == 4 && (active = '50')
+  newVal == 3 && (active = '40')
+  newVal == 4 && (active = '50')
  return active
 }

 const stepClass = (val) => {
+  console.log('localStepSuccess.value',localStepSuccess.value,val)
  if (localStepSuccess.value.includes(val)) {
    return 'step-success'
  }
@@ -197,24 +228,45 @@ const stepClass = (val) => {
 }

 const handleStep = (key, index) => {
+  console.log('key, index',key, index)
  if (localStepSuccess.value.includes(index)) {
    let active = ''
    localActive.value = index
-    switch(index) {
-      case 0: active = '00'
-        break
-      case 1: active = '10'
-        break
-      case 2: active = '20'
-        break
-      // case 3: active = '30'
-      //   break
-      case 3: active = '40'
-        break
-      case 4: active = '50'
-        break
+    if (props.reportType === 'direct') {
+      switch (index) {
+        case 0:
+          active = '10'
+          break
+        case 1:
+          active = '20'
+          break
+        case 2:
+          active = '40'
+          break
+        case 3:
+          active = '50'
+          break
+      }
+    } else {
+      switch (index) {
+        case 0:
+          active = '00'
+          break
+        case 1:
+          active = '10'
+          break
+        case 2:
+          active = '20'
+          break
+        case 3:
+          active = '40'
+          break
+        case 4:
+          active = '50'
+          break
+      }
    }
-    emits('stepChange', { key, active })
+    emits('stepChange', {key, active})
    return
  }
  ElNotification({
@@ -227,10 +279,9 @@ const handleStep = (key, index) => {
 const getBaseInfo = async () => {
  const loading = ElLoading.service({fullscreen: true})
  try {
-    const { code, data } = await getBaseInfoApi(route.query.projectId)
+    const {code, data} = await getBaseInfoApi(route.query.projectId)
    localStepSuccess.value = formatProcedure(data.procedure)
    baseForm.value.setValues(data)
-    console.log(formatActive(localActive.value), 'formatActive(localActive.value)');
    emits('setDetail', formatActive(localActive.value))
    loading.close()
  } catch {
@@ -244,8 +295,8 @@ watchEffect(() => {
  localActive.value = props.active
 })
 watchEffect(() => {
-  if(props.reportType==='direct'){
-    localSteps.value=localSteps.value.slice(1)
+  if (props.reportType === 'direct') {
+    localSteps.value = localSteps.value.slice(1)
  }
 })
 </script>
--- a/src/views/project-demand/summary/detail.vue
+++ b/src/views/project-demand/summary/detail.vue
@@ -1,16 +1,16 @@
 <template>
-  <steps :active="1" @setDetail="setDetail" @stepChange="stepChange" :reportType="route.query.id=='-1'?'direct':''">
+  <steps :active="route.query.id==='-1'?0:1" @setDetail="setDetail" @stepChange="stepChange" :reportType="route.query.id==='-1'?'direct':''">
    <template #content>
      <collection-detail v-show="showActive == '00'" :formData="summaryData.formData" :data="summaryData"
                         :processViewer="summaryProcessViewer"  :loading="loading"/>
      <summary-detail v-show="showActive == '10'" :formData="summaryData.formData" :data="summaryData"
                      :processViewer="summaryProcessViewer" :loading="loading" :fileListShow="fileListShow"/>
-      <ApprovalDetail v-show="showActive == '20'" :formData="summaryData.formData" :data="summaryData" :processViewer="summaryProcessViewer" :loading="loading"></ApprovalDetail>
+      <ApprovalDetail v-show="showActive == '20'" :formData="summaryData.formData" :data="summaryData"
+                      :processViewer="summaryProcessViewer" :loading="loading" :fileListShow="fileListShow"/>
      <ApprovalDetail type="execute" v-show="showActive == '40'" :formData="summaryData.formData" :data="summaryData"
-                      :processViewer="summaryProcessViewer" :loading="loading"></ApprovalDetail>
+                      :processViewer="summaryProcessViewer" :loading="loading" :fileListShow="fileListShow"/>
      <ApprovalDetail type="archivist" v-show="showActive == '50'" :formData="summaryData.formData" :data="summaryData"
-                      :processViewer="summaryProcessViewer" :loading="loading"></ApprovalDetail>
-
+                      :processViewer="summaryProcessViewer" :loading="loading" :fileListShow="fileListShow"/>
    </template>
  </steps>
  <opinion v-if="summaryData.taskId" :formData="summaryData.formData" :taskId="summaryData.taskId"></opinion>
@@ -48,6 +48,7 @@ const getInfo = async (state) => {
    processStore.passList.value = data.passList;
    nextTick(() => {
      summaryProcessViewer.value = true
+      console.log('data.formPermMap["fileList"]',data.formPermMap["fileList"])
      if (data.formPermMap["fileList"]) {
        fileListShow.value = data.formPermMap["fileList"].perm
      }
--- a/src/views/project-demand/summary/index.vue
+++ b/src/views/project-demand/summary/index.vue
@@ -246,7 +246,7 @@ const handleDetail = (row) => {
  router.push({
    name: 'Summary/detail',
    query: {
-      id: row.requirementId===null?'-1':row.requirementId,
+      id: row.requirementId==null?'-1':row.requirementId,
      projectId: row.projectId,
      state: row.state
    }
--- a/src/views/project-management/implementation/detail.vue
+++ b/src/views/project-management/implementation/detail.vue
@@ -1,18 +1,24 @@
 <template>
-  <steps :active="cuurentStep" @setDetail="setDetail" @stepChange="stepChange">
+  <steps :active="route.query.id==='-1'?currentStep-1:currentStep" @setDetail="setDetail" @stepChange="stepChange"
+         :reportType="route.query.id==='-1'?'direct':''">
    <template #content>
      <collection-detail
-        :formData="commonForm.formData"
-        :data="commonForm"
-        :processViewer="commonProvessViewer"
-        v-show="showActive == '00'"
-        :loading="loading"
+          :formData="commonForm.formData"
+          :data="commonForm"
+          :processViewer="commonProvessViewer"
+          v-show="showActive == '00'"
+          :loading="loading"
      />
-      <summary-detail v-show="showActive == '10'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"/>
-      <ApprovalDetail type="approval" v-show="showActive == '20'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"></ApprovalDetail>
-      <ApprovalDetail type="execute" v-show="showActive == '40'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"></ApprovalDetail>
+      <summary-detail v-show="showActive == '10'" :formData="commonForm.formData" :data="commonForm"
+                      :processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow"/>
+      <ApprovalDetail type="approval" v-show="showActive == '20'" :formData="commonForm.formData"
+                      :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"
+                      :fileListShow="fileListShow"/>
+      <ApprovalDetail type="execute" v-show="showActive == '40'" :formData="commonForm.formData"
+                      :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"
+                      :fileListShow="fileListShow"/>
      <ApprovalDetail type="archivist" v-show="showActive == '50'" :formData="commonForm.formData" :data="commonForm"
-                      :processViewer="commonProvessViewer" :loading="loading"></ApprovalDetail>
+                      :processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow"/>

    </template>
  </steps>
@@ -24,7 +30,7 @@ import {useProcessStore} from '@/stores/processStore.js';
 import CollectionDetail from "@/components/DetailComponent/CollectionDetail.vue";
 import SummaryDetail from "@/components/DetailComponent/SummaryDetail.vue";
 import ApprovalDetail from "@/components/DetailComponent/ApprovalDetail.vue";
-import { getMapProjectStateInfo } from '@/components/steps/api';
+import {getMapProjectStateInfo} from '@/components/steps/api';
 import {ElLoading, ElNotification} from "element-plus";
 import Opinion from "@/components/DetailComponent/Opinion.vue";

@@ -32,11 +38,12 @@ const route = useRoute()
 const activeName = ref('first')
 const loading = ref(false)
 const processStore = useProcessStore()
-const cuurentStep = ref()
-route.query.step == '10' && (cuurentStep.value = 1)
-route.query.step == '20' && (cuurentStep.value = 2)
-route.query.step == '40' && (cuurentStep.value = 3)
-route.query.step == '50' && (cuurentStep.value = 4)
+const fileListShow = ref('READ')
+const currentStep = ref()
+route.query.step == '10' && (currentStep.value = 1)
+route.query.step == '20' && (currentStep.value = 2)
+route.query.step == '40' && (currentStep.value = 3)
+route.query.step == '50' && (currentStep.value = 4)
 const showActive = ref()
 const commonForm = ref({})
 const commonProvessViewer = ref(true)
@@ -46,18 +53,18 @@ const getAllInfo = async (state) => {
  try {
    commonProvessViewer.value = false
    loading.value = true
-    const { data, code ,msg} = await getMapProjectStateInfo(route.query.projectId, state)
-    if(code===1000){
+    const {data, code, msg} = await getMapProjectStateInfo(route.query.projectId, state)
+    if (code === 1000) {
      loading.value = false
-    }else {
+    } else {
      ElNotification({
        title: '提示',
        message: msg,
-        type:  'error'
+        type: 'error'
      })
      loading.close()
    }
-    if(data===undefined)return;
+    if (data === undefined) return;
    commonForm.value = data
    processStore.setDesign(data)
    processStore.runningList.value = data.runningList;
@@ -67,6 +74,9 @@ const getAllInfo = async (state) => {
    processStore.passList.value = data.passList;
    nextTick(() => {
      commonProvessViewer.value = true
+      if (data.formPermMap["fileList"]) {
+        fileListShow.value = data.formPermMap["fileList"].perm
+      }
    })
    loading.close()
  } catch {
@@ -87,19 +97,23 @@ const stepChange = (data) => {
 </script>

 <style scoped lang="scss">
-.detail-block{
+.detail-block {
  padding-top: 15px;
-  :deep(.el-tabs__nav-scroll){
+
+  :deep(.el-tabs__nav-scroll) {
    width: 100%;
    display: flex;
-    .el-tabs__nav{
+
+    .el-tabs__nav {
      display: flex;
      flex: 1;
-      .el-tabs__item{
+
+      .el-tabs__item {
        flex: 1;
        font-size: 16px;
      }
-      .is-active{
+
+      .is-active {
        color: black;
        background-color: #DED0B2;
      }