mosr-web/src/components/DetailComponent/ProjectAttachment.vue

<template>
  <el-row style="padding-bottom: 20px">
    <el-col :span="24">
      <baseTitle :title="'项目附件'"></baseTitle>
    </el-col>
    <el-form :model="attachmentParam" inline style="margin-left: 15px">
      <el-form-item label="标签" prop="tag">
        <el-select v-model="attachmentParam.tag" placeholder="请选择标签" clearable filterable style="width: 300px">
          <el-option
              v-for="item in tagsOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSearch" color="#DED0B2">搜索</el-button>
        <el-button v-if="uploadState&&isLineBtn" color="#DED0B2" @click="handleUpload">上传附件</el-button>
      </el-form-item>
    </el-form>
    <el-col v-if="!isLineBtn" :span="24" style="margin-bottom: 8px;margin-left: 15px">
      <el-button v-if="uploadState" color="#DED0B2" @click="handleUpload">上传附件</el-button>
    </el-col>
    <fvTable style="width: 100%;min-height:311px;max-height: 311px" v-if="showAttachmentTable" height="311"
             :tableConfig="executeTableConfig" class="execute-apply-table"
             :data="otherAttachmentList" :isSettingCol="false" :pagination="false">
      <template #empty>
        <el-empty :image-size="90" description="暂无数据" style="padding: 0"/>
      </template>
    </fvTable>
  </el-row>
</template>

<script setup lang="jsx">
import {getTags} from "@/api/project-manage";
import {ElLoading, ElNotification} from "element-plus";
import {searchImplementationFileList} from "@/api/project-manage/attachment";

const router = useRouter()
const route = useRoute()
const attachmentParam = reactive({
  tag: ''
})
const uploadState = ref(false)
const tagsOption = ref([])
const showAttachmentTable = ref(true)

const props = defineProps({
  fileNameTableWidth: {
    type: String,
    default: '400'
  },
  isLineBtn: {
    type: Boolean,
    default: false
  },
})
const executeTableConfig = reactive({
  columns: [
    {
      prop: 'index',
      type: 'index',
      label: '序号',
      align: 'center',
      width: 85,
    },
    {
      prop: 'originalFileName',
      label: '文件名',
      align: 'center',
      width: props.fileNameTableWidth,
      currentRender: ({row, index}) => (
          <div style="color: #2a99ff;cursor: pointer;" onClick={() => clickToPreview(row)}>{row.originalFileName}</div>)
    },
    {
      prop: 'tag',
      label: '标签',
      align: 'center',
    },
    {
      prop: 'size',
      label: '文件大小',
      align: 'center',
      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
    },
    {
      prop: 'oper',
      label: '操作',
      align: 'center',
      showOverflowTooltip: false,
      currentRender: ({row, index}) => {
        return (
            <div>
              <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
            </div>
        )
      }
    }
  ]
})
const otherAttachmentList = ref([])

const handleSearch = () => {
  const loading = ElLoading.service({fullscreen: true})
  let params = {
    targetId: route.query.projectId,
    targetState: "30"
  }
  if (attachmentParam.tag) {
    tagsOption.value.forEach(item => {
      if (item.value === attachmentParam.tag) {
        attachmentParam.tag = item.label
      }
    })
    params.tag = attachmentParam.tag
  }
  searchImplementationFileList(params).then(res => {
    showAttachmentTable.value = false
    if (res.code === 1000) {
      otherAttachmentList.value = res.data.fileList
      uploadState.value = res.data.upload
      nextTick(() => {
        showAttachmentTable.value = true
      })
      loading.close()
    } else {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
      loading.close()
    }
  })
}
const getTagsOption = () => {
  if (!route.query.projectId) return
  getTags(route.query.projectId).then(res => {
    if (res.code === 1000) {
      tagsOption.value = res.data
    } else {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
    }
  })
}
const handleUpload = () => {
  router.push({
    name: 'Implementation/upload',
    query: {
      id: route.query.id,
      projectId: route.query.projectId,
      state: route.query.state,
      step: '30'
    }
  })
}
handleSearch()
getTagsOption()
</script>
<style lang="scss">
.execute-apply-table {
  //.el-table__header {
  //  .el-table__cell:last-child {
  //    .cell {
  //      margin-left: -108px !important;
  //    }
  //  }
  //}

  //.el-table__body {
  //  .el-table__cell:last-child {
  //    .cell {
  //      margin-left: -108px !important;
  //    }
  //  }
  //}
  .is-leaf:first-child {
    .cell {
      margin-left: -25px !important;
    }
  }

  .el-table__body {
    .el-table__cell:first-child {
      .cell {
        margin-left: -13px !important;
      }
    }
  }
}
</style>
<style scoped>
:deep(.el-table--fit ) {
  height: 311px !important;
}
</style>