refactor(question): 重构问题分类树结构和展示逻辑
- 将 `treeDefaultExpandedKeys` 替换为 `treeDefaultExpandAll`，确保树结构默认全部展开 - 新增 `bigTypeList` 状态，用于存储问题分类数据 - 添加递归函数 `handleGetNewQuestion`，将问题数据拼接到对应的分类下 - 更新表格列的渲染逻辑，优化问题分类和选项的展示
This commit is contained in:
parent
70d4f4cb3d
commit
a96e829ac4
@ -144,7 +144,8 @@ const addQuestion = ({ parentRow, onRef, currentUser, showQuestionModal, setShow
|
||||
return data
|
||||
}}
|
||||
fieldProps={{
|
||||
treeDefaultExpandedKeys: [0],
|
||||
treeDefaultExpandAll: true,
|
||||
// treeDefaultExpandedKeys: [0],
|
||||
fieldNames: {
|
||||
label: "name",
|
||||
value: "id"
|
||||
|
||||
@ -26,6 +26,8 @@ const examineQuestion: React.FC<{ currentUser: any }> = (props) => {
|
||||
const [columnsStateMap, setColumnsStateMap] = useState<any>({
|
||||
createdAt: { show: false }
|
||||
})
|
||||
// 拿到protable的问题分类
|
||||
const [bigTypeList, setBigTypeList] = useState<any>()
|
||||
|
||||
|
||||
|
||||
@ -35,6 +37,24 @@ const examineQuestion: React.FC<{ currentUser: any }> = (props) => {
|
||||
dataIndex: "title",
|
||||
hideInTable: true,
|
||||
},
|
||||
{
|
||||
title: "问题分类",
|
||||
dataIndex: "id",
|
||||
hideInTable: true,
|
||||
valueType: 'treeSelect',
|
||||
fieldProps: {
|
||||
multiple: false,
|
||||
treeDefaultExpandAll: true,
|
||||
showSearch: true,
|
||||
treeNodeFilterProp: 'title',
|
||||
placeholder: '请选择问题分类',
|
||||
fieldNames: {
|
||||
label: "name",
|
||||
value: "id"
|
||||
},
|
||||
options: bigTypeList || []
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>问题分类</div>,
|
||||
dataIndex: "description",
|
||||
@ -58,7 +78,7 @@ const examineQuestion: React.FC<{ currentUser: any }> = (props) => {
|
||||
ellipsis: true,
|
||||
render: (_, record) => {
|
||||
let questionType: string = record?.type && record?.type.split('_') && record?.type.split('_').length > 0 ? record?.type.split('_')[0] : ''
|
||||
return questionType === 'radio' ? '单选' : "多选"
|
||||
return questionType === 'radio' ? '单选' : questionType === 'checked' ? "多选" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -69,7 +89,7 @@ const examineQuestion: React.FC<{ currentUser: any }> = (props) => {
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
render: (_, record) => {
|
||||
return record?.required ? '是' : "否"
|
||||
return record?.isNoChildren ? record?.required ? '是' : "否" : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -82,7 +102,7 @@ const examineQuestion: React.FC<{ currentUser: any }> = (props) => {
|
||||
let str: string = ''
|
||||
if (record.options && record?.options.length > 0) {
|
||||
record.options.forEach((item: any, index: number) => {
|
||||
str += `${index > 0 ? '，' : ''}选项${index + 1}：${item.text}`
|
||||
str += `${item.text}；`
|
||||
})
|
||||
}
|
||||
return str || ''
|
||||
@ -126,7 +146,7 @@ const examineQuestion: React.FC<{ currentUser: any }> = (props) => {
|
||||
hideInSearch: true,
|
||||
width: 100,
|
||||
render: (_: any, record: any) => {
|
||||
return <Space>
|
||||
return record?.isNoChildren ? <Space>
|
||||
<a onClick={() => {
|
||||
console.log('record', record);
|
||||
setCurrentRow(record)
|
||||
@ -140,8 +160,7 @@ const examineQuestion: React.FC<{ currentUser: any }> = (props) => {
|
||||
>
|
||||
<a>删除</a>
|
||||
</Popconfirm>
|
||||
|
||||
</Space>
|
||||
</Space> : ""
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -155,6 +174,36 @@ const examineQuestion: React.FC<{ currentUser: any }> = (props) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 递归 处理 将问题拼在列表的对应层 不一定是第二层
|
||||
const handleGetNewQuestion = (typeList: any, list: any) => {
|
||||
let res: any = []
|
||||
if (typeList && typeList.length > 0) {
|
||||
typeList.forEach((item: any) => {
|
||||
if (item.children && item.children.length > 0) {
|
||||
let newRes = handleGetNewQuestion(item.children, list)
|
||||
item.children = newRes
|
||||
res.push(item)
|
||||
} else {
|
||||
if (list && list.length > 0) {
|
||||
list.forEach((subItem: any) => {
|
||||
if (subItem.categoryId === item.id) {
|
||||
if (item.children && item.children.length > 0) {
|
||||
subItem.isNoChildren = true
|
||||
item.children.push(subItem)
|
||||
} else {
|
||||
subItem.isNoChildren = true
|
||||
item.children = [subItem]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
res.push(item)
|
||||
}
|
||||
})
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{
|
||||
@ -173,16 +222,33 @@ const examineQuestion: React.FC<{ currentUser: any }> = (props) => {
|
||||
}}
|
||||
headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>考核问题管理</span>}
|
||||
search={{ span: 6 }}
|
||||
rowKey={(record: any) => {
|
||||
return `${record?.id}-${record?.categoryId}`
|
||||
}}
|
||||
scroll={{ x: "100%", y: 'calc(100vh - 400px)' }}
|
||||
request={async (params) => {
|
||||
|
||||
// 拿到分类数据 将 问题数据 拼到对应的分类下面去
|
||||
const typeReq = {
|
||||
any: [{
|
||||
"key": ""
|
||||
}]
|
||||
}
|
||||
let typeData = await handleGetExamineTypeTreeList(typeReq)
|
||||
let bigType = JSON.parse(JSON.stringify(typeData))
|
||||
console.log('bigType', bigType);
|
||||
setBigTypeList(bigType)
|
||||
|
||||
const req = {
|
||||
any: params?.title ? [{ key: "title", value: params?.title }] : undefined
|
||||
}
|
||||
const data = await handleGetQuestionList(req)
|
||||
console.log('data', data);
|
||||
|
||||
if (data && data.length > 0) {
|
||||
return { data, success: true }
|
||||
let res = await handleGetNewQuestion(typeData, data)
|
||||
console.log('res', res);
|
||||
if (res && res.length > 0) {
|
||||
return { data: res, success: true }
|
||||
}
|
||||
return { data: [], success: true }
|
||||
}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user