mosr-web/src/components/SearchFilesByTag.vue

<template>
  <div v-loading="_value">
    <el-form :model="attachment" inline style="margin-left: 15px">
      <el-form-item label="名称" prop="fileName">
        <el-input v-model="attachment.fileName" placeholder="请输入附件名称查询" clearable filterable style="width: 300px"/>
      </el-form-item>
      <el-form-item label="标签" prop="tag" v-if="type==='40'">
        <el-select v-model="attachment.tag" placeholder="请选择标签" clearable remote 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 @click="handleReset">重置</el-button>
        <el-button v-if="uploadState" color="#DED0B2" @click="handleUpload">上传附件</el-button>
      </el-form-item>
    </el-form>
    <el-card style="width: 100%;overflow-y: hidden">
      <fvTable style="width: 100%;max-height: 254px" v-if="showTable" height="254"  :tableConfig="tableConfig"
               :data="fileList" :isSettingCol="false" :pagination="false">
        <template #empty>
          <el-empty :image-size="99" description="暂无数据" style="padding: 0"/>
        </template>
      </fvTable>
    </el-card>
  </div>
</template>

<script setup lang="jsx">
import {downloadFile} from "@/api/project-demand";
import {ElNotification} from "element-plus";
import {getTags} from "@/api/project-manage";
import {computed} from "vue";

const route = useRoute()
const router = useRouter()
const attachment = reactive({})
const emit = defineEmits(['search','update:modelValue'])
const props = defineProps({
  fileList: {
    type: Array,
    default: []
  },
  type: {
    type: String,
    default: '00'
  },
  uploadState: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: true
  }
})
const tagsOption = ref([])
const tableConfig = reactive({
  columns: [
    {
      prop: 'index',
      type: 'index',
      label: '序号',
      align: 'center',
      width:85,
    },
    {
      prop: 'originalFileName',
      label: '附件名称',
      align: 'center',
    },
    {
      prop: 'tag',
      label: '标签',
      align: 'center'
    },
    {
      prop: 'size',
      label: '文件大小',
      align: 'center',
      currentRender: ({row, index}) => (parseInt(row.size / 1024) + 'KB')
    },
    {
      prop: 'createTime',
      label: '上传时间',
      align: 'center',
    },
    {
      prop: 'oper',
      label: '操作',
      align: 'center',
      showOverflowTooltip: false,
      currentRender: ({row, index}) => {
        return (
            <div>
              <el-button type="primary" link onClick={() => handleDownload(row)}>下载</el-button>
            </div>
        )
      }
    }
  ]
})
const showTable = ref(true)
const _value = computed({
  get() {
    return props.loading || ""
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
const getTagsOption = () => {
  if (!route.query.id) return
  getTags(route.query.id).then(res => {
    if (res.code === 1000) {
      tagsOption.value = res.data
    } else {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
    }
  })
}
const handleSearch = () => {
  emit('search', attachment)
}
const handleReset=()=>{
  attachment.fileName=''
  attachment.tag=null
  emit('search', {})
}
const handleUpload = () => {
  emit('upload')
}
const handleDownload = (row) => {
  downloadFile(row.fileId).then(res => {
    const blob = new Blob([res])
    let a = document.createElement('a')
    a.href = URL.createObjectURL(blob)
    a.download = row.originalFileName
    a.click()
  })
}
watch(() => props.type, (val) => {
  props.type = val
})
watch(() => props.fileList, (val) => {
  showTable.value = false
  nextTick(() => {
    showTable.value = true
  })
  props.fileList = val
})
if (props.type === '40') {
  getTagsOption()
}

onActivated(()=>{
  if (props.type === '40') {
    getTagsOption()
  }
  handleSearch()
})
</script>

<style scoped>
:deep(.el-table--fit ) {
  height: 254px !important;
}
</style>