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

@@ -57,9 +57,7 @@ const route = useRoute()
 
 const emits = defineEmits(['stepChange', 'setDetail'])
 
-const localData = reactive({
+const localData = reactive({})
-
-})
 
 const localActive = ref(0) // 当前激活步骤
 
@@ -136,20 +134,41 @@ const formatProcedure = (data) => {
   let arr = []
   if (data instanceof Array) {
     data.forEach(item => {
+      if (props.reportType === 'direct') {
         switch (item) {
-        case '00': arr.push(0)
+          case '10':
+            arr.push(0)
             break
-        case '10': arr.push(1)
+          case '20':
+            arr.push(1)
             break
-        case '20': arr.push(2)
+          case '40':
+            arr.push(2)
             break
-        // case '30': arr.push(3)
+          case '50':
-        //   break
+            arr.push(3)
-        case '40': arr.push(3)
-          break
-        case '50': arr.push(4)
             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
@@ -161,17 +180,22 @@ const formatReProcedure = (data) => {
   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('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,22 +228,43 @@ const stepClass = (val) => {
 }
 
 const handleStep = (key, index) => {
+  console.log('key, index',key, index)
   if (localStepSuccess.value.includes(index)) {
     let active = ''
     localActive.value = index
+    if (props.reportType === 'direct') {
       switch (index) {
-      case 0: active = '00'
+        case 0:
+          active = '10'
           break
-      case 1: active = '10'
+        case 1:
+          active = '20'
           break
-      case 2: active = '20'
+        case 2:
+          active = '40'
           break
-      // case 3: active = '30'
+        case 3:
-      //   break
+          active = '50'
-      case 3: active = '40'
           break
-      case 4: active = '50'
+      }
+    } 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})
     return
@@ -230,7 +282,6 @@ const getBaseInfo = async () => {
     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 {

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,5 +1,6 @@
 <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"
@@ -8,11 +9,16 @@
           v-show="showActive == '00'"
           :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>
@@ -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)
@@ -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 {
@@ -89,16 +99,20 @@ const stepChange = (data) => {
 <style scoped lang="scss">
 .detail-block {
   padding-top: 15px;
+
   :deep(.el-tabs__nav-scroll) {
     width: 100%;
     display: flex;
+
     .el-tabs__nav {
       display: flex;
       flex: 1;
+
       .el-tabs__item {
         flex: 1;
         font-size: 16px;
       }
+
       .is-active {
         color: black;
         background-color: #DED0B2;