vue3/src/views/projectLib/projectInfo/Detailpage.vue

<template>
  <!-- 自定义表单 -->
  <el-divider content-position="left">项目入库详情</el-divider>
  <BasicForm @register="registerProjectForm" />


  <div v-if="projectStatus >= 3">
    <el-divider content-position="left">项目资料详情</el-divider>
    <BasicTable @register="registerResourceTable">
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </div>
  <el-divider content-position="left">审批详情</el-divider>
  <BasicTable @register="registerApproveStartTable" />
</template>
<script lang="ts" name="Detailpage" setup>
import { ref, defineProps, onMounted } from 'vue'
import { useForm, BasicForm } from '/@/components/Form';
import { formSchemas, approveStartProcessColumns, resourcetableColumns } from './projectInfo.data';
import { queryProjectInfoById, queryProcessInfo, queryResourceInfo } from './projectInfo.api'
import { ActionItem, BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { downloadFile } from "../../../api/common/api"
let dataTo = defineProps(["projectid"])
let projectStatus = ref()

onMounted(async () => {
  console.log("projectid", dataTo.projectid)
  let param: any = {
    projectid: dataTo.projectid
  }
  let resProject = await queryProjectInfoById(param)
  setFieldsValue(resProject)
  projectStatus.value = resProject.status
  console.log("projectid", dataTo.projectid, projectStatus.value)
})

function getTableAction(record): ActionItem[] {
  return [
    {
      label: '下载',
      ifShow: true,
      onClick: handleDetailpage.bind(null, record),
    }
  ];
}
/**
 * BasicForm绑定注册;
 * useForm 是整个框架的核心用于表单渲染，里边封装了很多公共方法;
 * 支持（schemas: 渲染表单列，autoSubmitOnEnter：回车提交,submitButtonOptions：自定义按钮文本和图标等方法）；
 * 平台通过此封装，简化了代码，支持自定义扩展;
 */
const [registerProjectForm, { setFieldsValue }] = useForm({
  //注册表单列
  schemas: formSchemas,
  showActionButtonGroup: false,
  //回车提交
  // autoSubmitOnEnter: true,
  // //不显示重置按钮
  // showResetButton: false,
  //自定义提交按钮文本和图标
  // submitButtonOptions: { text: '提交', preIcon: '' },
  //查询列占比 24代表一行 取值范围 0-24
  // actionColOptions: { span: 17 },
  labelCol: { style: { width: '120px' } },
  wrapperCol: { style: { width: 'auto' } },
  disabled: true
});

//项目入库审批table
const { tableContext: approveStarttableContext } = useListPage({
  tableProps: {
    size: 'small',//紧凑型表格
    title: '审批详情',
    api: queryProcessInfo,
    columns: approveStartProcessColumns,
    showActionColumn: false,
    useSearchForm: false,
    beforeFetch(params) {
      params.status = projectStatus.value>=3?"2":"1",
        params.projectid = dataTo.projectid
    },
  },
});
// BasicTable绑定注册
const [registerApproveStartTable] = approveStarttableContext;

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


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

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