vue3/src/views/projectLib/projectPlan/planinfoFileDetail.vue

<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="文件详情" width="1200px" :showOkBtn="false">
    <el-divider content-position="left">{{ dataTo.taskName }}</el-divider>
    <div>
      <el-divider content-position="left">项目资料详情</el-divider>
      <BasicTable @register="registerResourceTable">
        <template #action="{ record }">
          <TableAction :actions="getTableAction(record)" />
        </template>
      </BasicTable>
      <div v-if="dataTo.isfinish == 1">
        <ApprovalDetails :projectid="planinfoid" :stage="4" />
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" name="Detailpage" setup>
import { defineProps, onMounted } from 'vue'
import { PlaninfoFiletableColumns } from './projectPlan.data';
import { queryPlaninfoFilePageByid } from './projectPlan.api'
import { ActionItem, BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { downloadFile } from "../../../api/common/api"
import { BasicModal ,useModalInner} from '/@/components/Modal';

import ApprovalDetails from "../../ProcessApprovalSubPage/component/ApprovalDetails.vue"
const [registerModal, { closeModal }] = useModalInner();

let dataTo = defineProps(["planinfoid", "taskName", "isfinish"])
console.log("wwwwwwwwwwww",dataTo)
onMounted(async () => {

})

function getTableAction(record): ActionItem[] {
  return [
    {
      label: '下载',
      ifShow: true,
      onClick: handleDetailpage.bind(null, record),
    }
  ];
}
/**
 * BasicForm绑定注册;
 * useForm 是整个框架的核心用于表单渲染，里边封装了很多公共方法;
 * 支持（schemas: 渲染表单列，autoSubmitOnEnter：回车提交,submitButtonOptions：自定义按钮文本和图标等方法）；
 * 平台通过此封装，简化了代码，支持自定义扩展;
 */



//项目资料table
const { tableContext } = useListPage({
  tableProps: {
    size: 'small',//紧凑型表格
    title: '项目入库资料详情',
    api: queryPlaninfoFilePageByid,
    columns: PlaninfoFiletableColumns,
    useSearchForm: false,
    actionColumn: {
      width: 120,
      fixed: "right",
    },
    beforeFetch(params) {
      params.planinfoid = dataTo.planinfoid
    },
  },
});
const [registerResourceTable] = tableContext;


function handleDetailpage(record) {
  console.log("我这一行的数据是", record)
  let param = {
    path: record.documentPath,
    fileName: record.documentName
  }
  //
  console.log("我这一行的数据是", param)

  downloadFile("/huzhouUploadfileinfo/downloadfile", record.documentName, param)
}
</script>
<style></style>