fix : 修复详情页切换流程图渲染bug

src/components/DetailComponent/ProjectApply.vue

@@ -4,7 +4,11 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="前置流程">
-            <el-input v-model="localFormData.requirementName" clearable></el-input>
+            <div @click="handleShowPreTable">点击</div>
+            <!--            <el-select v-model="localFormData.preProcess" placeholder="请选择前置流程" clearable filterable>-->
+            <!--              <el-option v-for="item in preProcessList" :key="item.id" :label="item.label" :value="item.value">-->
+            <!--              </el-option>-->
+            <!--            </el-select>-->
           </el-form-item>
         </el-col>
       </el-row>
@@ -29,6 +33,30 @@
       <el-button color="#DED0B2" v-else-if="mode === 'resubmit'" @click="handleSubmit">重新提交</el-button>
       <el-button @click="handleBack">返回</el-button>
     </div>
+    <el-dialog title="前置流程" v-model="showPreTable" width="80%">
+      <el-form :model="searchPreProcess" label-width="auto">
+        <el-form-item label="请求名称">
+          <el-input v-model="searchPreProcess.requestName" placeholder="请输入请求名称" clearable>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <el-table :data="preProcessList"  stripe v-loading="loading">
+        <el-table-column prop="requestId" label="请求id"></el-table-column>
+        <el-table-column prop="requestName" label="请求名称"></el-table-column>
+        <el-table-column prop="lastOperatorName" label="最后操作人名称"></el-table-column>
+        <el-table-column prop="lastOperateTime" label="最后操作时间"></el-table-column>
+        <el-table-column prop="currentNodeName" label="当前节点"></el-table-column>
+        <el-table-column prop="creatorName" label="创建人"></el-table-column>
+        <el-table-column prop="createTime" label="创建时间"></el-table-column>
+        <el-table-column label="操作" align="center">
+          <template #default="scope">
+           <a :href="scope.row.baseUrl" target="_blank" style="color: #2a99ff">查看详情</a>
+          </template>
+        </el-table-column>
+      </el-table>
+<!--      <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"-->
+<!--              :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>-->
+    </el-dialog>
   </div>
 </template>
 
@@ -49,6 +77,7 @@ import {
 } from "@/api/project-manage";
 import {useProcessStore} from '@/stores/processStore.js';
 import {useTagsView} from '@/stores/tagsview.js'
+import {getPreProcess} from "@/api/project-manage";
 
 const router = useRouter()
 const route = useRoute()
@@ -73,8 +102,22 @@ const props = defineProps({
   formData: {
     type: Object,
     default: {}
+  },
+  step: {
+    type: String,
+    default: "20"
   }
 })
+const preProcessList = ref([])
+//暂存数据
+const currentList=ref([])
+const searchPreProcess = ref({
+  requestName:''
+})
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
 const rules = reactive({
   // requirementName: [{required: true, message: '请选择前置流程', trigger: 'blur'}],
 })
@@ -83,13 +126,26 @@ const processStore = useProcessStore()
 const otherFileList = ref([])
 const localFormData = ref({})
 const attachment = ref()
+const showPreTable = ref(false)
 const showTable = ref(true)
 const loading = ref(false)
 const processDiagramViewer = ref(false)
 const name = ref(router.currentRoute.value.name)
 const deploymentId = ref()
 const projectId = ref(route.query.projectId)
-const step = ref(route.query.step)
+const handleShowPreTable = () => {
+  showPreTable.value = true
+}
+const getPreProcessList = () => {
+  // loading.value=true
+  getPreProcess().then(res => {
+    console.log('浅灰的', res)
+    // loading.value=false
+    // baseUrl.value=res.data.baseUrl
+    // currentList.value=res.data
+    preProcessList.value = res.data.slice(0,10)
+  })
+}
 const getTitleName = (type) => {
   switch (type) {
     case 'apply':
@@ -150,10 +206,10 @@ const handleSubmit = async () => {
   // if (localFormData.value.singleFile !== undefined) {
   //   localFormData.value.singleFile = getFileParam(localFormData.value.singleFile)
   // }
-  console.log('attachment.value.singleFile',attachment.value,attachment.value.singleFile)
-  if(localFormData.value.singleFile){
+  console.log('attachment.value.singleFile', attachment.value, attachment.value.singleFile)
+  if (localFormData.value.singleFile) {
 
-  }else {
+  } else {
     if (attachment.value.singleFile == null) {
       attachment.value.validate()
       ElNotification({
@@ -176,19 +232,19 @@ const handleSubmit = async () => {
   }
   console.log('params', params)
   let res
-  if (step.value === '20') {
+  if (props.step === '20') {
     if (props.mode === 'resubmit') {
       res = await resubmitApply(params)
     } else {
       res = await projectApply(params)
     }
-  } else if (step.value === '40') {
+  } else if (props.step === '40') {
     if (props.mode === 'resubmit') {
       res = await resubmitCheck(params)
     } else {
       res = await projectCheck(params)
     }
-  } else if (step.value === '50') {
+  } else if (props.step === '50') {
     if (props.mode === 'resubmit') {
       res = await resubmitConclusion(params)
     } else {
@@ -202,15 +258,15 @@ const handleSubmit = async () => {
   })
   if (res.code === 1000) {
     tagsViewStore.delVisitedViews(router.currentRoute.value.path)
-    if (step.value === '20') {
+    if (props.step === '20') {
       await router.push({
         name: 'Initiation'
       })
-    } else if (step.value === '40') {
+    } else if (props.step === '40') {
       await router.push({
         name: 'Implementation'
       })
-    } else if (step.value === '50') {
+    } else if (props.step === '50') {
       await router.push({
         name: 'Filing'
       })
@@ -223,11 +279,11 @@ const init = async () => {
   if (!id) return;
   processDiagramViewer.value = false
   let res
-  if (step.value === '20') {
+  if (props.step === '20') {
     res = await getApplyProcess(id)
-  } else if (step.value === '40') {
+  } else if (props.step === '40') {
     res = await getProjectCheckProcess(id)
-  } else if (step.value === '50') {
+  } else if (props.step === '50') {
     res = await getProjectConclusionProcess(id)
   }
   if (res.code === 1000) {
@@ -255,6 +311,7 @@ watchEffect(() => {
   return Object.keys(props.formData).length && (localFormData.value = props.formData)
 })
 
+getPreProcessList()
 onMounted(async () => {
   await init()
 })