td_official/src/views/design/condition/comm/filePage.vue

<template>
  <div>
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <div class="box_btn">
              <file-upload :limit="1" :uploadUrl="uploadUrl" :params="uploadParams" :on-upload-success="uploadFile" :fileType="[]">
                <el-button type="primary" style="float: left">
                  <el-icon size="small"><Upload /></el-icon>上传文件
                </el-button>
              </file-upload>
            </div>
          </el-col>
          <right-toolbar @queryTable="getList"></right-toolbar>
        </el-row>
      </template>
      <el-table :data="FileList" style="width: 100%" height="64vh">
        <el-table-column type="index" align="center" label="序号" width="180" />
        <el-table-column prop="fileName" align="center" label="文件名称" />
        <el-table-column label="流程状态" align="center" prop="status">
          <template #default="scope">
            <dict-tag :options="wf_business_status" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" icon="Download" @click="onExport(scope.row.fileUrl)">下载</el-button>
            <el-button type="success" link icon="edit" v-show="scope.row.status == 'draft'" @click="onUpdate(scope.row)">审核</el-button>
            <el-button link type="warning" v-show="scope.row.status != 'draft'" icon="View" @click="onView(scope.row)">查看流程</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
  </div>
</template>

<script setup name="DataCollectionForm" lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useUserStoreHook } from '@/store/modules/user';
import { collectFileList } from '@/api/design/condition';
const { proxy } = getCurrentInstance() as any;
const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
const uploadUrl = computed(() => {
  return `/design/collectFile/upload`;
});
// 父组件传递的参数接受
const props = defineProps({
  catalogueId: {
    type: Number
  }
});

const uploadParams = ref({
  catalogueId: '',
  projectId: currentProject.value?.id
});
const total = ref(0);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    projectId: currentProject.value?.id,
    formNo: undefined,
    projectName: undefined,
    submitUnit: undefined,
    specialty: undefined,
    submitDate: undefined,
    volumeName: undefined,
    volumeNo: undefined,
    changeReason: undefined,
    status: undefined,
    params: {},
    catalogueId: undefined
  }
});
const { queryParams } = toRefs(data);
const FileList = ref([]);
// 查询收资清单目录列表
const getList = async () => {
  let res = await collectFileList(queryParams.value);
  if (res.code == 200) {
    FileList.value = res.rows;
    total.value = res.total;
  }
};
// 上传文件
const uploadFile = (files) => {
  proxy.$modal.success('上传成功');
  console.log(files);
  getList();
};
const onUpdate = (row) => {
  // 审核
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.push({
    path: `/design-management/condition/indexEdit`,
    query: {
      id: row.id,
      type: 'update'
    }
  });
};
const onView = (row) => {
  // 查看流程
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.push({
    path: `/design-management/condition/indexEdit`,
    query: {
      id: row.id,
      type: 'view'
    }
  });
};
const onExport = (fileUrl) => {
  if (!fileUrl) {
    proxy.$modal.error('文件地址不存在，无法下载');
    return;
  }
  try {
    // 创建一个隐藏的a标签
    const link = document.createElement('a');
    // 设置下载地址
    link.href = fileUrl;
    // 从URL中提取文件名作为下载文件名
    const fileName = fileUrl.split('/').pop();
    link.download = fileName || 'download file';
    // 触发点击事件
    link.click();
    // 下载后移除a标签
    document.body.removeChild(link);
    // 显示下载成功提示
    proxy.$modal.success('文件开始下载');
  } catch (error) {
    // proxy.$modal.error('下载失败，请稍后重试');
  }
};
// 页面挂载时初始化数据
onMounted(() => {
  getList();
});
const getInfo = (id) => {
  queryParams.value.catalogueId = id;
  uploadParams.value.catalogueId = id;
  getList();
};
defineExpose({
  getInfo
});
</script>

<style lang="scss">
.condition {
  .el-tabs__header {
    height: 84vh !important;
  }
}
</style>