mosr-web/src/views/project-management/implementation/detail.vue

<template>
  <steps :active="route.query.id==='-1'?currentStep-1:currentStep" @setDetail="setDetail" @stepChange="stepChange"
         :reportType="route.query.id==='-1'?'direct':''">
    <template #content>
      <collection-detail :formData="detailData.formData"
                         :data="detailData"
                         :processViewer="commonProvessViewer"
                         v-show="showActive == '00'"
                         :fileListShow="fileListShow"
                         v-model:value="auditOpinion"
      />
      <summary-detail v-show="showActive == '10'"
                      :formData="detailData.formData"
                      :data="detailData"
                      :processViewer="commonProvessViewer"
                      :fileListShow="fileListShow"
                      v-model:value="auditOpinion"/>
      <ApprovalDetail type="approval"
                      v-if="showActive == '20'&&!editShow"
                      :formData="detailData.formData"
                      :data="detailData"
                      :processViewer="commonProvessViewer"
                      :fileListShow="fileListShow"
                      v-model:value="auditOpinion"/>
      <ApprovalDetail type="execute"
                      v-if="showActive == '40'&&!editShow"
                      :formData="detailData.formData"
                      :data="detailData"
                      :processViewer="commonProvessViewer"
                      :fileListShow="fileListShow"
                      v-model:value="auditOpinion"/>
      <ApprovalDetail type="archivist"
                      v-show="showActive == '50'&&!editShow"
                      :formData="detailData.formData"
                      :data="detailData"
                      :processViewer="commonProvessViewer"
                      :fileListShow="fileListShow"
                      v-model:value="auditOpinion"/>
      <project-apply :title="applyTitle"
                     v-if="editShow"
                     :mode="mode"
                     :step="showActive"
                     :data="detailData"
                     :formData="detailData.formData"/>
    </template>
  </steps>
  <div style="width: 100%;height: 30px"></div>
  <opinion v-if="detailData.taskId" :formData="detailData.formData" :taskId="detailData.taskId"
           v-model:value="auditOpinion"/>
</template>

<script setup lang="jsx">
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 {ElLoading, ElNotification} from "element-plus";
import Opinion from "@/components/DetailComponent/Opinion.vue";

const route = useRoute()
const editShow = ref(false)
const applyTitle = ref('apply')
const loading = ref(false)
const processStore = useProcessStore()
const fileListShow = ref('READ')
const mode = ref('')
const currentStep = ref()
const auditOpinion = ref('')
// const step = ref(route.query.step)
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 detailData = ref({})
const commonProvessViewer = ref(true)

const getAllInfo = async (state) => {
  const loading = ElLoading.service({fullscreen: true})
  try {
    fileListShow.value = 'READ'
    commonProvessViewer.value = false
    const {data, code, msg} = await getMapProjectStateInfo(route.query.projectId, state)
    if (code === 1000) {
      data.formData.preProcess = data.formData.preProcess ? JSON.parse(data.formData.preProcess) : undefined
      detailData.value = data
      mode.value = data.formData.mode
      processStore.setDesign(data)
      processStore.runningList.value = data.runningList;
      processStore.endList.value = data.endList;
      processStore.noTakeList.value = data.noTakeList;
      processStore.refuseList.value = data.refuseList;
      processStore.passList.value = data.passList;
      nextTick(() => {
        commonProvessViewer.value = true
        if (data.formPermMap && data.formPermMap["fileList"]) {
          fileListShow.value = data.formPermMap["fileList"].perm
        }
      })
      changeModel(state, mode.value)
      loading.close()
    } else {
      ElNotification({
        title: '提示',
        message: msg,
        type: 'error'
      })
      if (msg === '查询结果为空') {
        detailData.value = []
        detailData.value.formData = {}
      }
      loading.close()
    }
  } catch {
    loading.close()
  }
}
const changeModel = (active, mode) => {
  editShow.value = false
  nextTick(() => {
    editShow.value = mode === 'submit' || mode === 'resubmit';
    if (route.query.step === '20' && active === '20') {
      applyTitle.value = 'apply'
    } else if (route.query.step === '40' && active === '40') {
      applyTitle.value = 'check'
    } else if (route.query.step === '50' && active === '50') {
      applyTitle.value = 'filing'
    }
  })
}
const setDetail = (active) => {
  showActive.value = active
  getAllInfo(active)
}

const stepChange = (data) => {
  showActive.value = data.active
  getAllInfo(data.active)
}
</script>

<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;
    //}
  }
}
</style>