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="00">
      <search-files-by-tag @search="searchRequirement" @upload="upload"
                           :otherFileList="otherFileList" :uploadState="uploadState"/>
    </el-tab-pane>
    <el-tab-pane label="需求上报" name="10">
      <search-files-by-tag @search="searchReport" @upload="upload"
                           :otherFileList="otherFileList" :uploadState="uploadState"/>
    </el-tab-pane>
    <el-tab-pane label="项目立项" name="20">
      <search-files-by-tag @search="searchInitiation" @upload="upload"
                           :otherFileList="otherFileList" :uploadState="uploadState"/>
    </el-tab-pane>
    <el-tab-pane label="项目实施" name="40">
      <search-files-by-tag type="40" @search="searchImplementation" @upload="upload" ref="implementation"
                           :otherFileList="otherFileList" :uploadState="uploadState"/>
    </el-tab-pane>
    <el-tab-pane label="项目归档" name="50">
      <search-files-by-tag @search="searchFiling" @upload="upload"
                           :otherFileList="otherFileList" :uploadState="uploadState"/>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="jsx">
import {searchFileList} from "@/api/project-manage/attachment.js";
import {ElNotification} from "element-plus";

const route = useRoute()
const router = useRouter()
const activeName = ref('50')
const attachment = ref({})
const implementation = ref()
const uploadState = ref(true)
const otherFileList = ref([])
const projectId = ref(route.query.id)
const requirementId = ref(route.query.requirementId)
const handleClick = (tab) => {
  switchSearch(tab.props.name)
}

const switchSearch = (index) => {
  switch (index) {
    case '00':
      searchRequirement({})
      break
    case '10':
      searchReport({})
      break
    case '20':
      searchInitiation({})
      break
    case '40':
      searchImplementation({})
      break
    case '50':
      searchFiling({})
      break
  }
}

const searchRequirement = async (param) => {
  param.targetState = '00'
  param.targetId = projectId.value
  searchFileList(param).then(res => {
    changeFileList(res)
  })
}

const searchReport = async (param) => {
  param.targetState = '10'
  param.targetId = projectId.value
  searchFileList(param).then(res => {
    changeFileList(res)
  })
}
const searchInitiation = async (param) => {
  param.targetState = '20'
  param.targetId = projectId.value
  searchFileList(param).then(res => {
    changeFileList(res)
  })
}

const searchImplementation = async (param) => {
  param.targetState = '40'
  param.targetId = projectId.value
  console.log('param',param)
  searchFileList(param).then(res => {
    changeFileList(res)
  })
}
const searchFiling = async (param) => {
  param.targetState = '50'
  param.targetId = projectId.value
  searchFileList(param).then(res => {
    changeFileList(res)
  })
}


const changeFileList = (res) => {
  if (res.code === 1000) {
    otherFileList.value = res.data.fileList
    uploadState.value = res.data.upload
  } else {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    })
  }
}


onMounted(() => {
  if (activeName.value === '50') {
    searchFiling({})
  }
})


const upload = () => {
  if (activeName.value === '40') {
    router.push({
      name: 'Implementation/upload',
      query: {
        id: route.query.id,
        type: '40'
      }
    })
  } else {
    router.push({
      name: switchUpload(activeName.value),
      query: {
        id: route.query.id
      }
    })
  }
}
const switchUpload = (index) => {
  switch (index) {
    case '00':
      return 'Requirement/upload';
    case '10':
      return 'Summary/upload';
    case '20':
      return 'Initiation/upload';
    case '40':
      return 'Implementation/upload';
    case '50':
      return 'Filing/upload';
  }
}
</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>