mosr-web/src/views/project-management/filing/attachment.vue

<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="需求征集" name="0">
      <search-files-by-tag @search="searchRequirement" @upload="upload"
                           :otherFileList="otherFileList"/>
    </el-tab-pane>
    <el-tab-pane label="需求上报" name="1">
      <search-files-by-tag @search="searchReport" @upload="upload"
                           :otherFileList="otherFileList"/>
    </el-tab-pane>
    <el-tab-pane label="项目立项" name="2">
      <search-files-by-tag @search="searchInitiation" @upload="upload"
                           :otherFileList="otherFileList"/>
    </el-tab-pane>
    <el-tab-pane label="项目实施" name="3">
      <search-files-by-tag type="3" @search="searchImplementation" @upload="upload" ref="implementation"
                           :otherFileList="otherFileList"/>
    </el-tab-pane>
    <el-tab-pane label="项目归档" name="4">
      <search-files-by-tag @search="searchFiling" @upload="upload"
                           :otherFileList="otherFileList"/>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="jsx">
import {ElNotification} from "element-plus";
import {getImplementationAttachment} from "@/api/project-manage";
import {getRequirementAttachment} from "@/api/project-demand";
import {getCollectAttachment} from "@/views/project-demand/summary/api";
import {getFilingAttachment, getInitiationAttachment} from "@/api/project-manage";

const route = useRoute()
const router = useRouter()
const activeName = ref('4')
const attachment = ref({})
const showTable = ref(true)
const implementation = ref()
const otherFileList = ref([])
const handleClick = (tab) => {
  let name = {}
  switchSearch(name, tab.index)
}
const getParams = (param, type) => {
  let targetId
  let params
  if (type === 1) {
    targetId = route.query.requirementId
    params = {
      targetId: targetId,
      ...param
    }
  } else if (type === 2){
    targetId = route.query.id
    if(JSON.stringify(param) !== '{}'){
      if (param.tag &&!param.name) {
        implementation.value.tagsOption?.forEach(item => {
          if (item.value === param.tag) {
            param.tag = item.label
          }
        })
        params = {
          targetId: targetId,
          tag:param.tag
        }
      }else if(!param.tag &&param.name){
        params = {
          targetId: targetId,
          ...param
        }
      } else if (!param.tag &&!param.name) {
        params = {
          targetId: targetId,
        }
      }
    }else {
      params = {
        targetId: targetId
      }
    }
  }else {
    targetId = route.query.id
    params = {
      targetId: targetId,
      ...param
    }
  }
  return params;
}

const searchRequirement = async (param) => {
  await search(param)
}
const search = async (param, type) => {
  const res = await getRequirementAttachment(getParams(param, type))
  changeFileList(res)
}
const searchReport = async (param) => {
  const res = await getCollectAttachment(getParams(param))
  changeFileList(res)
}
const searchInitiation = async (param) => {
  const res = await getInitiationAttachment(getParams(param))
  changeFileList(res)
}
const searchImplementation = async (param) => {
  const res = await getImplementationAttachment(getParams(param,2))
  changeFileList(res)
}
const searchFiling = async (param) => {
  const res = await getFilingAttachment(getParams(param))
  changeFileList(res)
}
const changeFileList = (res) => {
  showTable.value = false
  if (res.code === 1000) {
    otherFileList.value = res.data
    nextTick(() => {
      showTable.value = true
    })
  } else {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    })
  }
}
const upload = () => {
  if(activeName.value==='3'){
    router.push({
      name: 'Implementation/upload',
      query: {
        id: route.query.id,
        type:'3'
      }
    })
  }else {
    router.push({
      name: switchUpload(activeName.value),
      query: {
        id: route.query.id
      }
    })
  }
}
const switchUpload=(index)=>{
  switch (index) {
    case '0':
      return 'Requirement/upload';
    case '1':
      return 'Summary/upload';
    case '2':
      return 'Initiation/upload';
    case '3':
      return 'Implementation/upload';
    case '4':
      return 'Filing/upload';
  }
}
const switchSearch = (name, index) => {
  switch (index) {
    case '0':
      search(name, 1)
      break
    case '1':
      searchReport(name)
      break
    case '2':
      searchInitiation(name)
      break
    case '3':
      searchImplementation(name)
      break
    case '4':
      searchFiling(name)
      break
  }
}
onMounted(() => {
  if (activeName.value === '4') {
    let name = {
      name: ''
    }
    searchFiling(name)
  }
})
</script>

<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 15px 0 30px 0;
}

: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>