Merge pull request 'fix : 修复直接上报的详情组件渲染' (#274) from dj into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/274

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" >
-    <el-form :model="formData" label-width="auto" v-if="fileListShow === 'READ' || fileListShow === 'EDIT'">
+      <file-component title="需求上报附件" tag="需求上报"
-      <el-form-item label="其他文件">
+                      v-model:value="formData.fileList" :processViewer="processViewer"
-        <file-upload @getFile="getOtherFile" v-if="fileListShow === 'EDIT'"/>
+                      :file-list-show="fileListShow"/>
-        <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>
     <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
   }

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 = () => {
+watch(() => props.processViewer, (newVal) => {
-  nextTick(() => {
+  props.processViewer = newVal
-    processViewer.value = true
+}, {deep: true})
-  })
-}
-
-init()
-
-
 </script>
 
 <style scoped>

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>

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"
+          v-for="(item, index) in localSteps"
-        :key="item.key"
+          :key="item.key"
-        :title="item.title"
+          :title="item.title"
-        :class="stepClass(index)"
+          :class="stepClass(index)"
-        @click="handleStep(item.key, index)"
+          @click="handleStep(item.key, index)"
 
       />
     </el-steps>
@@ -25,10 +25,10 @@
 </template>
 
 <script setup lang="jsx">
-import { ElLoading, ElNotification } from 'element-plus';
+import {ElLoading, ElNotification} from 'element-plus';
-import { computed, reactive, ref, watchEffect } from 'vue';
+import {computed, reactive, ref, watchEffect} from 'vue';
-import { useRoute } from 'vue-router';
+import {useRoute} from 'vue-router';
-import { getBaseInfoApi } from './api';
+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) {
+  if (data instanceof Array) {
-    data.forEach(item=>{
+    data.forEach(item => {
-      switch (item) {
+      if (props.reportType === 'direct') {
-        case '00': arr.push(0)
+        switch (item) {
-          break
+          case '10':
-        case '10': arr.push(1)
+            arr.push(0)
-          break
+            break
-        case '20': arr.push(2)
+          case '20':
-          break
+            arr.push(1)
-        // case '30': arr.push(3)
+            break
-        //   break
+          case '40':
-        case '40': arr.push(3)
+            arr.push(2)
-          break
+            break
-        case '50': arr.push(4)
+          case '50':
-          break
+            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) {
+  if (data instanceof Array) {
-    data.forEach(item=>{
+    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')
+          // case 3: arr.push('30')
-        //   break
+          //   break
-        case 3: arr.push('40')
+        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')
+  newVal == 0 && (active = '00')
-  val == 1 && (active = '10')
+  newVal == 1 && (active = '10')
-  val == 2 && (active = '20')
+  newVal == 2 && (active = '20')
   // val == 3 && (active = '30')
-  val == 3 && (active = '40')
+  newVal == 3 && (active = '40')
-  val == 4 && (active = '50')
+  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) {
+    if (props.reportType === 'direct') {
-      case 0: active = '00'
+      switch (index) {
-        break
+        case 0:
-      case 1: active = '10'
+          active = '10'
-        break
+          break
-      case 2: active = '20'
+        case 1:
-        break
+          active = '20'
-      // case 3: active = '30'
+          break
-      //   break
+        case 2:
-      case 3: active = '40'
+          active = '40'
-        break
+          break
-      case 4: active = '50'
+        case 3:
-        break
+          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'){
+  if (props.reportType === 'direct') {
-    localSteps.value=localSteps.value.slice(1)
+    localSteps.value = localSteps.value.slice(1)
   }
 })
 </script>

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
       }

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
     }

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"
+          :formData="commonForm.formData"
-        :data="commonForm"
+          :data="commonForm"
-        :processViewer="commonProvessViewer"
+          :processViewer="commonProvessViewer"
-        v-show="showActive == '00'"
+          v-show="showActive == '00'"
-        :loading="loading"
+          :loading="loading"
       />
-      <summary-detail v-show="showActive == '10'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"/>
+      <summary-detail v-show="showActive == '10'" :formData="commonForm.formData" :data="commonForm"
-      <ApprovalDetail type="approval" v-show="showActive == '20'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"></ApprovalDetail>
+                      :processViewer="commonProvessViewer" :loading="loading" :fileListShow="fileListShow"/>
-      <ApprovalDetail type="execute" v-show="showActive == '40'" :formData="commonForm.formData" :data="commonForm" :processViewer="commonProvessViewer" :loading="loading"></ApprovalDetail>
+      <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()
+const fileListShow = ref('READ')
-route.query.step == '10' && (cuurentStep.value = 1)
+const currentStep = ref()
-route.query.step == '20' && (cuurentStep.value = 2)
+route.query.step == '10' && (currentStep.value = 1)
-route.query.step == '40' && (cuurentStep.value = 3)
+route.query.step == '20' && (currentStep.value = 2)
-route.query.step == '50' && (cuurentStep.value = 4)
+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)
+    const {data, code, msg} = await getMapProjectStateInfo(route.query.projectId, state)
-    if(code===1000){
+    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;
       }