@vtx/modals2 2.6.19

package/src/vtx-zg-modal/components/BaseInfo/index.tsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import { Timeline } from 'antd';
+import { VtxImage } from '@vtx/components';
+import useSettings from '../../../vm-hooks/useSettings';
+import Base from '../../../vm-info-collection';
+import SubTitle from '../../../vm-sub-title';
+import VmMap from '../../../vm-map';
+import NoData from '../../../vm-nodata';
+import { secondToFormatTime } from '../../../util';
+
+import './index.less';
+
+interface BaseInfoProps {
+    id: string;
+    mapCenter?: Array<number | string>;
+    baseInfo: Array<any>;
+    photos: Array<any>;
+    feedbackPhotos: Array<any>;
+    logs: Array<any>;
+}
+
+const BaseInfo = (props: BaseInfoProps) => {
+    const { mapCenter, baseInfo, photos, feedbackPhotos, logs } = props;
+    const { theme } = useSettings();
+
+    const timelineColor = '#24F2FF';
+
+    return (
+        <div className={`zg-baseContent ${theme}`}>
+            <div className="zg-base">
+                <SubTitle />
+                <Base data={baseInfo} gap={10} />
+                <div className="zg-base-map">
+                    <VmMap mapCenter={mapCenter} />
+                </div>
+            </div>
+            <div className="zg-right">
+                <div className="zg-right-photo">
+                    <SubTitle title="整改图片" />
+                    <div className='zg-right-photo-wrap'>
+                        <div className="zg-right-photo1">
+                            <VtxImage
+                                src={`/cloudFile/common/downloadFile?id=${photos?.[0]?.id}`}
+                                aspectFit
+                                emptyText="暂无图片"
+                                errorText="暂无图片"
+                                alt={photos?.[0]?.name}
+                                isDark={true}
+                            />
+                            <span>整改前</span>
+                        </div>
+                        <div className="zg-right-photo1">
+                            <VtxImage
+                                src={`/cloudFile/common/downloadFile?id=${feedbackPhotos?.[0]?.id}`}
+                                aspectFit
+                                emptyText="暂无图片"
+                                errorText="暂无图片"
+                                alt={feedbackPhotos?.[0]?.name}
+                                isDark={true}
+                            />
+                            <span>整改后</span>
+                        </div>
+                    </div>
+                </div>
+                <div className="zg-right-czlc">
+                    <SubTitle title="处置流程" />
+                    <div className="zg-right-czlc-main">
+                        {logs?.length > 0 ? (
+                            <Timeline>
+                                {logs.map((item: any, index: number) => {
+                                    let detail;
+                                    let pf;
+                                    let pic;
+                                    if (item?.processDetail) {
+                                        detail = JSON.parse(item.processDetail);
+                                        pf = [
+                                            {
+                                                label: '责任单位',
+                                                key: 'thirdResponsibleUnitName',
+                                                value: detail?.thirdResponsibleUnitName,
+                                            },
+                                            {
+                                                label: '整改时限',
+                                                key: 'reformTimeLimit',
+                                                value: secondToFormatTime(detail?.reformTimeLimit),
+                                            },
+                                            {
+                                                label: '责任人',
+                                                key: 'thirdResponsibleStaffNames',
+                                                value: detail?.thirdResponsibleStaffNames,
+                                            },
+                                            {
+                                                label: '截止时间',
+                                                key: 'endDateTime',
+                                                value: detail?.endDateTime,
+                                            },
+                                        ];
+                                        pic = detail?.photos ? JSON.parse(detail.photos) : [];
+                                    }
+                                    return (
+                                        <Timeline.Item color={timelineColor} key={index}>
+                                            <div className="timeline">
+                                                <div className="timeline-title">
+                                                    {item?.processTypeStr}
+                                                </div>
+                                                <div className="timeline-time">
+                                                    {item?.processTimeStr}
+                                                </div>
+                                            </div>
+                                            <div className="timeline-main">
+                                                {item?.processContent}
+                                                <div className="timeline-main-extra">
+                                                    {item.processType == 'Cs' &&
+                                                        `结果：${item.processResultStr}；原因:${detail?.rejectReason}`}
+                                                    {(item.processType == 'pf' ||
+                                                        item.processType == 'Dzg') && (
+                                                        <Base
+                                                            data={pf || []}
+                                                            gap={10}
+                                                            width="48%"
+                                                            horizontal={true}
+                                                        />
+                                                    )}
+                                                    {(item.processType == 'Tjfk' ||
+                                                        item.processType == 'Dzgtjfk') && (
+                                                        <div
+                                                            style={{
+                                                                color: '#64FFC9',
+                                                                display: 'flex',
+                                                                justifyContent: 'start',
+                                                            }}
+                                                        >
+                                                            {pic?.length > 0 && (
+                                                                <div
+                                                                    style={{
+                                                                        width: '80px',
+                                                                        height: '80px',
+                                                                        marginRight: '12px',
+                                                                    }}
+                                                                >
+                                                                    <VtxImage
+                                                                        src={`/cloudFile/common/downloadFile?id=${pic[0]?.id}`}
+                                                                        aspectFit
+                                                                        emptyText="暂无图片"
+                                                                        errorText="暂无图片"
+                                                                        alt={pic[0].name}
+                                                                        isDark={true}
+                                                                    />
+                                                                </div>
+                                                            )}
+                                                            <Base
+                                                                data={[
+                                                                    {
+                                                                        key: 'feedbackContent',
+                                                                        label: '反馈内容',
+                                                                        value:
+                                                                            detail?.feedbackContent,
+                                                                    },
+                                                                ]}
+                                                            />
+                                                        </div>
+                                                    )}
+                                                    {item.processType == 'Jgsh' && (
+                                                        <div
+                                                            style={{
+                                                                color: '#64FFC9',
+                                                                display: 'flex',
+                                                                justifyContent: 'start',
+                                                            }}
+                                                        >
+                                                            {pic?.length > 0 && (
+                                                                <VtxImage
+                                                                    src={`/cloudFile/common/downloadFile?id=${pic[0]?.id}`}
+                                                                    style={{
+                                                                        width: '80px',
+                                                                        height: '80px',
+                                                                        marginRight: '12px',
+                                                                    }}
+                                                                    aspectFit
+                                                                    emptyText="暂无图片"
+                                                                    errorText="暂无图片"
+                                                                    alt={pic[0].name}
+                                                                    isDark={true}
+                                                                />
+                                                            )}
+                                                            <Base
+                                                                data={[
+                                                                    {
+                                                                        key: 'processResultStr',
+                                                                        label: '审批结果',
+                                                                        value:
+                                                                            item?.processResultStr,
+                                                                    },
+                                                                    {
+                                                                        key: 'auditOpinion',
+                                                                        label: '审批意见',
+                                                                        value: detail?.auditOpinion,
+                                                                    },
+                                                                ]}
+                                                            />
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </div>
+                                        </Timeline.Item>
+                                    );
+                                })}
+                            </Timeline>
+                        ) : (
+                            <NoData style={{ marginLeft: '50%', transform: 'translateX(-50%)' }} />
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BaseInfo;

package/src/vtx-zg-modal/components/index.ts

@@ -0,0 +1,3 @@
+import BaseInfo from './BaseInfo';
+
+export { BaseInfo };

package/src/vtx-zg-modal/demo/demo1.tsx

@@ -0,0 +1,27 @@
+import { Button } from 'antd';
+import React, { useState } from 'react';
+import { VtxZgModal } from '@vtx/modals';
+export default function Demo() {
+    const [visible, setVisible] = useState(false);
+    return (
+        <div style={{ height: '150px' }}>
+            <Button
+                type="primary"
+                onClick={() => {
+                    setVisible(true);
+                }}
+            >
+                暗色
+            </Button>
+            <VtxZgModal
+                visible={visible}
+                theme="dark"
+                title="GD20230206001"
+                id="1622495434693980160"
+                onCancel={() => {
+                    setVisible(false);
+                }}
+            />
+        </div>
+    );
+}

package/src/vtx-zg-modal/demo/demo2.tsx

@@ -0,0 +1,27 @@
+import { Button } from 'antd';
+import React, { useState } from 'react';
+import { VtxZgModal } from '@vtx/modals';
+export default function Demo() {
+    const [visible, setVisible] = useState(false);
+    return (
+        <div style={{ height: '150px' }}>
+            <Button
+                type="primary"
+                onClick={() => {
+                    setVisible(true);
+                }}
+            >
+                浅色
+            </Button>
+            <VtxZgModal
+                visible={visible}
+                theme="light"
+                title="GD20221215010"
+                id="1611192573666308102"
+                onCancel={() => {
+                    setVisible(false);
+                }}
+            />
+        </div>
+    );
+}

package/src/vtx-zg-modal/index.md

@@ -0,0 +1,19 @@
+---
+nav:
+    title: 组件
+    path: /modal
+group:
+    title: 弹窗
+    path: /modal
+    order: 12
+---
+
+# 整改弹窗
+
+Demo:
+
+<code src="./demo/demo1.tsx">深色</code>
+
+<code src="./demo/demo2.tsx">浅色</code>
+
+[更多技巧](https://d.umijs.org/guide/demo-principle)

package/src/vtx-zg-modal/index.tsx

@@ -0,0 +1,95 @@
+/**
+ * 整改弹窗
+ */
+import React from 'react';
+import VtxBaseModal from '../vtx-base-modal';
+import { BaseInfo } from './components';
+import { BaseService } from './api';
+import '../style';
+
+const TABS_BASE = 'zg-base';
+
+export interface VtxZgModalProps {
+    id: string;
+    visible: boolean;
+    onCancel: () => void;
+    title: string;
+    subTitle?: string;
+    theme?: 'light' | 'dark';
+    mapCenter?: Array<number | string>;
+}
+
+const VtxZgModal = (props: VtxZgModalProps) => {
+    const { id, title, visible, theme, onCancel, mapCenter } = props;
+    // const [statusName, setStatusName] = useState(null);
+    const { baseInfo, photos, feedbackPhotos, logs, baseInfoRes } = BaseService.useBaseInfo(id);
+
+    let statusName = <span></span>;
+    if (baseInfoRes) {
+        const status = baseInfoRes?.orderStatus;
+        let color = '',
+            bg = '';
+        switch (status) {
+            case 'Zgtg':
+                color = '#52C41A';
+                bg = 'rgba(82, 196, 26, 0.2)';
+                break;
+            case 'Zgbtg':
+                color = '#FF4D4F';
+                bg = 'rgba(255, 77, 79, 0.2)';
+                break;
+            case 'Dzgz':
+                color = '#1890FF';
+                bg = 'rgba(24, 144, 255, 0.2)';
+                break;
+            case 'Bzg':
+                color = '#999999';
+                bg = 'rgba(153, 153, 153, 0.2)';
+                break;
+            default:
+                color = '#FAAD14';
+                bg = 'rgba(250, 173, 20, 0.2)';
+                break;
+        }
+        if (color) {
+            statusName = (
+                <div
+                    className="zg-status-subtitle"
+                    style={{ color: color, borderColor: color, background: bg }}
+                >{`${baseInfoRes.orderStatusStr}`}</div>
+            );
+        }
+    }
+
+    return (
+        <>
+            {visible && (
+                <VtxBaseModal
+                    id={id}
+                    type="facility"
+                    title={title}
+                    subTitle={statusName}
+                    width={1278}
+                    theme={theme}
+                    visible={visible}
+                    onCancel={onCancel}
+                    tabs={[{ key: TABS_BASE, title: '总览信息' }]}
+                    contents={{
+                        [TABS_BASE]: (
+                            <BaseInfo
+                                id={id}
+                                mapCenter={mapCenter}
+                                baseInfo={baseInfo}
+                                photos={photos}
+                                feedbackPhotos={feedbackPhotos}
+                                logs={logs}
+                            />
+                        ),
+                    }}
+                />
+            )}
+        </>
+    );
+};
+
+export default VtxZgModal;

package/src/vtx-zg-modal/style/index.less

@@ -0,0 +1 @@
+@import '../../style/index';

package/src/vtx-zg-modal/style/index.ts

@@ -0,0 +1,4 @@
+// import 'antd/es/modal/style/css';
+import './index.less';
+// import './baseInfo.less';
+import '../components/BaseInfo/index.less';

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "target": "es6", // 指定 ECMAScript 版本
+        "allowJs": true, // 允许编译 JavaScript 文件
+        "skipLibCheck": true, // 跳过所有声明文件的类型检查
+        "esModuleInterop": true, // 禁用命名空间引用 (import * as fs from "fs") 启用 CJS/AMD/UMD 风格引用 (import fs from "fs")
+        "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块进行默认导入
+        "strict": true, // 启用所有严格类型检查选项
+        "forceConsistentCasingInFileNames": true, // 不允许对同一个文件使用不一致格式的引用
+        "module": "esnext", // 指定模块代码生成
+        "moduleResolution": "node", // 使用 Node.js 风格解析模块
+        "resolveJsonModule": true, // 允许使用 .json 扩展名导入的模块
+        "jsx": "react", // 在.tsx文件中支持JSX
+        "sourceMap": true, // 生成相应的.map文件
+        "noUnusedLocals": true, // 报告未使用的本地变量的错误
+        "noUnusedParameters": true, // 报告未使用参数的错误
+        "experimentalDecorators": true, // 启用对ES装饰器的实验性支持
+        "incremental": true, // 通过从以前的编译中读取/写入信息到磁盘上的文件来启用增量编译
+        "noFallthroughCasesInSwitch": true, // 每个case需要有break
+        "importHelpers": true,
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["src/*", "images/"]
+        }
+    },
+    "include": ["src"],
+    "exclude": ["node_modules", "lib", "es", "dist", "**/__test__", ".dumi", "docs"]
+}