From ac37e35e94637434bd4b6613181c4642c8adb5ae Mon Sep 17 00:00:00 2001 From: ylj20011123 Date: Wed, 30 Jul 2025 16:16:41 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A5=20feat(=E6=A8=A1=E5=9D=97):=20?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=86=E4=B8=AA=E5=BE=88=E6=A3=92=E7=9A=84?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/examine/question/index.tsx | 289 ++++++++++++++++++++++++++- 1 file changed, 288 insertions(+), 1 deletion(-) diff --git a/src/pages/examine/question/index.tsx b/src/pages/examine/question/index.tsx index 616ad67..8e24e93 100644 --- a/src/pages/examine/question/index.tsx +++ b/src/pages/examine/question/index.tsx @@ -1,6 +1,6 @@ import { ActionType, FormInstance, ProForm, ProFormDigit, ProFormList, ProFormRadio, ProFormSelect, ProFormSwitch, ProFormText, ProFormTextArea, ProFormTreeSelect, ProTable } from "@ant-design/pro-components"; -import { Button, Col, message, Modal, Popconfirm, Row, Space } from "antd"; +import { Button, Col, message, Modal, Popconfirm, Row, Space, Spin } from "antd"; import { useRef, useState } from "react"; import { connect } from "umi"; import { handleAddQuestion, handleDeleteQuestion, handleEditQuestion, handleGetQuestionList } from "./service"; @@ -8,12 +8,16 @@ import { handleGetAddExamineType, handleGetAllTypeQuestion, handleGetExamineType import moment from "moment"; import AddQuestion from "./components/addQuestion"; import { request } from "express"; +import ReactHTMLTableToExcel from "react-html-table-to-excel"; const examineQuestion: React.FC<{ currentUser: any }> = (props) => { const { currentUser } = props + const downloadBtnRef = useRef() const actionRef = useRef(); const formRef = useRef(); + // 导出的加载效果 + const [showLoading, setShowLoading] = useState(false) const addQuestionRef = useRef() // 显示新增问题的悬浮框 @@ -30,7 +34,11 @@ const examineQuestion: React.FC<{ currentUser: any }> = (props) => { // 拿到protable的问题分类 const [bigTypeList, setBigTypeList] = useState() + const [reqDetailList, setReqDetailList] = useState(); // 合计项数据源 + const [printIndex, setPrintIndex] = useState(new Date().getTime()) + // 是否显示打印的表格 + const [showExportTable, setShowExportTable] = useState(false) const columns: any = [ { @@ -273,8 +281,252 @@ const examineQuestion: React.FC<{ currentUser: any }> = (props) => { // return res } + const exportColumns: any = [ + { + title:
问题分类
, + dataIndex: "bigName", + width: 150, + hideInSearch: true, + ellipsis: true + }, + { + title: "问题分类", + dataIndex: "id", + hideInTable: true, + valueType: 'treeSelect', + request: async () => { + const typeReq = { + // any: [{ + // "key": "" + // }] + } + let typeData = await handleGetExamineTypeTreeList(typeReq) + console.log('typeData', typeData); + return typeData + }, + fieldProps: { + multiple: false, + treeDefaultExpandAll: true, + showSearch: true, + treeNodeFilterProp: 'title', + placeholder: '请选择问题分类', + fieldNames: { + label: "name", + value: "id" + }, + // options: bigTypeList || [] + } + }, + { + title:
问题分类
, + dataIndex: "description", + width: 150, + hideInSearch: true, + ellipsis: true + }, + { + title:
问题内容
, + dataIndex: "title", + width: 200, + hideInSearch: true, + ellipsis: true + }, + { + title:
问题类型
, + dataIndex: "type", + width: 100, + hideInSearch: true, + align: 'center', + ellipsis: true, + render: (_, record) => { + let questionType: string = record?.type && record?.type.split('_') && record?.type.split('_').length > 0 ? record?.type.split('_')[0] : '' + return questionType === 'radio' ? '单选' : questionType === 'checked' ? "多选" : "" + } + }, + // { + // title:
有效状态
, + // dataIndex: "status", + // width: 100, + // // hideInSearch: true, + // align: 'center', + // valueType: "select", + // ellipsis: true, + // valueEnum: { + // "1": "有效", + // "0": "无效" + // }, + // initialValue: "1", + // render: (_, record) => { + // return record?.type ? record?.status ? '有效' : '无效' : "" + // } + // }, + // { + // title:
必填
, + // dataIndex: "required", + // width: 100, + // hideInSearch: true, + // align: 'center', + // ellipsis: true, + // render: (_, record) => { + // return record?.isNoChildren ? record?.required ? '是' : "否" : '' + // } + // }, + { + title:
选项内容
, + dataIndex: "options", + width: 300, + hideInSearch: true, + ellipsis: true, + render: (_, record) => { + let str: string = '' + if (record.options && record?.options.length > 0) { + record.options.forEach((item: any, index: number) => { + str += `${item.text}；` + }) + } + return str || '' + } + }, + { + title:
更新时间
, + dataIndex: "updatedAt", + width: 150, + align: 'center', + hideInSearch: true, + ellipsis: true, + render: (_, record) => { + return record?.updatedAt ? moment(record?.updatedAt).format('YYYY-MM-DD HH:mm:ss') : '' + } + }, + { + title:
创建时间
, + dataIndex: "createdAt", + width: 150, + align: 'center', + hideInSearch: true, + ellipsis: true, + render: (_, record) => { + return record?.createdAt ? moment(record?.createdAt).format('YYYY-MM-DD HH:mm:ss') : '' + } + }, + { + title:
操作人
, + dataIndex: "operator", + width: 100, + align: 'center', + hideInSearch: true, + ellipsis: true + }, + ] + + const exportTable = (e) => { + e.stopPropagation(); // 防止Collapse组件收起 + const main = document.getElementsByClassName(`saleReportHideBox${printIndex}`)[0] + const thead = main.querySelector('thead').cloneNode(true); // 深克隆DOM节点 + const tbody = main.querySelector('tbody').cloneNode(true); // 深克隆DOM节点 + const container = document.querySelector('#hiddenBox'); + + + // 加个标题 + const tableTop = document.createElement('div') + tableTop.innerText = `考核问题表` + tableTop.setAttribute('style', 'font-size:20px;font-weight:600;display:flex;width:100%;justify-content: center;text-align: center;'); + + // // 加个时间 + // const tableTime = document.createElement('div') + // tableTime.innerText = `${moment().format('YYYY-MM-DD')}` + // tableTop.setAttribute('style', 'font-size:14px;display:flex;width:100%;justify-content: flex-start;text-align: center;'); + + const tempTable = document.createElement('table'); + tempTable.appendChild(tableTop) + // tempTable.appendChild(tableTime) + + tempTable.appendChild(thead); + tempTable.appendChild(tbody); + + tempTable.setAttribute('id', 'table-to-xls-saleRankReport'); // 给table添加id，值与按钮上的table字段对应 + + container.appendChild(tempTable); // 把创建的节点添加到页面容器中 + + setShowLoading(false) + + downloadBtnRef.current.handleDownload(); + setShowExportTable(false) + tempTable.remove() // 防止重复打印一个内容 + } + + // 把无限嵌套的树形 变为 单层的 + const getLeafNodes = (treeList: any) => { + const result: any = []; + + function traverse(list: any, bigName: any) { + for (const node of list) { + if (node.children && node.children.length > 0) { + traverse(node.children, bigName); + } else { + result.push({ + ...node, + bigName // 新增字段 + }); + } + } + } + + for (const item of treeList) { + traverse([item], item.name); // 第一层的 name 作为 bigName 传入 + } + + return result; + } + return (
+ + { + showLoading ? +
+
+ + 数据导出中... +
+
: '' + } + +
+ { + showExportTable && reqDetailList && reqDetailList.length > 0 ? + : '' + } +
+
+ +
= (props) => { console.log('data', data); if (data && data.length > 0) { + + let list: any = getLeafNodes(data) + console.log('listlistlistlistlist321', list); + setReqDetailList(list) return { data: data, success: true } } + setReqDetailList([]) return { data: [], success: true } @@ -348,10 +605,40 @@ const examineQuestion: React.FC<{ currentUser: any }> = (props) => { }} toolbar={{ actions: [ + + + + + , , + ] }}