uiujun
3d574f204a
All checks were successful
Build and Push Docker Image / build (push) Successful in 4m47s
110 lines
4.2 KiB
TypeScript
110 lines
4.2 KiB
TypeScript
import { MyBetaModalFormProps, renderTextHelper } from '@/common';
|
||
import { MyModal } from '@/components/MyModal';
|
||
import { Apis } from '@/gen/Apis';
|
||
import { QuestionsTypeEnum } from '@/gen/Enums';
|
||
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
|
||
import { Space, Spin } from 'antd';
|
||
import { useState } from 'react';
|
||
|
||
export default function SurveysListShow(props: MyBetaModalFormProps) {
|
||
const [loading, setLoading] = useState(true);
|
||
const [data, setData] = useState<any>({});
|
||
|
||
return (
|
||
<MyModal
|
||
title={props.title || '查看问卷'}
|
||
type={props.item?.type || 'primary'}
|
||
width="800px"
|
||
trigger={props?.trigger}
|
||
onOpen={() => {
|
||
if (props?.item?.id) {
|
||
setLoading(true);
|
||
Apis.Survey.Surveys.Show({ id: props.item.id })
|
||
.then((res) => {
|
||
setData(res?.data || {});
|
||
})
|
||
.finally(() => {
|
||
setLoading(false);
|
||
});
|
||
}
|
||
}}
|
||
node={
|
||
<Space direction="vertical" style={{ width: '100%' }}>
|
||
<ProCard extra={props.extra}>
|
||
<Spin spinning={loading}>
|
||
<ProDescriptions column={3}>
|
||
<ProDescriptions.Item label="问卷名称" span={1}>
|
||
<Space size="large">
|
||
<div>{data?.name}</div>
|
||
</Space>
|
||
</ProDescriptions.Item>
|
||
<ProDescriptions.Item label="问卷描述" span={2}>
|
||
{data?.description || '-'}
|
||
</ProDescriptions.Item>
|
||
<ProDescriptions.Item label="问卷题目" span={3}>
|
||
<Space
|
||
size="large"
|
||
direction="vertical"
|
||
style={{ width: '100%' }}
|
||
>
|
||
{data?.questions_with_order?.length > 0
|
||
? data?.questions_with_order?.map(
|
||
(item: any, index: number) => (
|
||
<ProCard
|
||
key={index}
|
||
bordered
|
||
size="small"
|
||
style={{ width: '100%' }}
|
||
>
|
||
<Space
|
||
direction="vertical"
|
||
style={{ width: '100%' }}
|
||
>
|
||
<Space>
|
||
<renderTextHelper.Tag
|
||
Enums={QuestionsTypeEnum}
|
||
value={item?.type}
|
||
key="type"
|
||
/>
|
||
{''}
|
||
<span>
|
||
题目{item?.category_id}:{item?.title || '-'}
|
||
</span>
|
||
{''}
|
||
<span
|
||
style={{ color: 'red', fontSize: '12px' }}
|
||
>
|
||
{item?.required ? '[必答]' : '[非必答]'}
|
||
</span>
|
||
</Space>
|
||
{item?.placeholder ? (
|
||
<div>
|
||
<strong>提示：</strong>
|
||
{item?.placeholder || '-'}
|
||
</div>
|
||
) : null}
|
||
</Space>
|
||
</ProCard>
|
||
),
|
||
)
|
||
: '-'}
|
||
</Space>
|
||
</ProDescriptions.Item>
|
||
<ProDescriptions.Item label="创建时间">
|
||
{data?.created_at || '-'}
|
||
</ProDescriptions.Item>
|
||
<ProDescriptions.Item label="更新时间">
|
||
{data?.updated_at || '-'}
|
||
</ProDescriptions.Item>
|
||
<ProDescriptions.Item label="是否启用">
|
||
{data?.is_enabled ? '是' : '否'}
|
||
</ProDescriptions.Item>
|
||
</ProDescriptions>
|
||
</Spin>
|
||
</ProCard>
|
||
</Space>
|
||
}
|
||
/>
|
||
);
|
||
}
|