@bit-sun/business-component 4.2.0-alpha.3 → 4.2.0-alpha.30

package/src/components/Business/ImportExport/ImportWizard/Preview.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Alert, Button, Descriptions, Modal, Space, Table } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
+import styles from './index.module.less';
+
+interface PreviewProps {
+  preview: any;
+  onBack: () => void;
+  onExecute: () => void;
+  onDownloadErrorFile: () => void;
+  executing: boolean;
+  downloadingErrorFile: boolean;
+}
+
+const Preview: React.FC<PreviewProps> = ({
+  preview,
+  onBack,
+  onExecute,
+  onDownloadErrorFile,
+  executing,
+  downloadingErrorFile,
+}) => {
+  const errorTypes = Array.isArray(preview?.errorCategories)
+    ? preview.errorCategories
+    : [];
+  const totalCount = Number(preview?.totalCount ?? 0);
+  const failedCount = Number(preview?.failedCount ?? 0);
+  const errorTypeCount = Number(preview?.categoryCount ?? errorTypes.length);
+  const hasErrors = failedCount > 0;
+  const canExecute = preview?.canExecute === true;
+  const errorFileAvailable = preview?.errorFileAvailable === true;
+
+  const handleExecute = () => {
+    if (hasErrors && canExecute) {
+      Modal.confirm({
+        title: '确认导入合格业务单据？',
+        content: '异常所属业务单据将整单跳过，仅导入其余合格业务单据。',
+        okText: '确认导入',
+        cancelText: '取消',
+        onOk: onExecute,
+      });
+      return;
+    }
+    onExecute();
+  };
+
+  return (
+    <div className={styles.preview}>
+      <section className={styles.previewCard}>
+        <div className={styles.sectionHeader}>
+          <span className={styles.sectionIndex}>
+            <CheckOutlined />
+          </span>
+          <span>
+            <span className={styles.sectionTitle}>数据校验结果</span>
+            <span className={styles.sectionDescription}>
+              请确认校验结果后再执行正式导入
+            </span>
+          </span>
+        </div>
+        <Descriptions
+          bordered
+          size="small"
+          column={{ xs: 1, sm: 3 }}
+          className={styles.previewSummary}
+        >
+          <Descriptions.Item label="总明细数">{totalCount}</Descriptions.Item>
+          <Descriptions.Item label="异常明细数">
+            {failedCount}
+          </Descriptions.Item>
+          <Descriptions.Item label="错误类型数">
+            {errorTypeCount}
+          </Descriptions.Item>
+        </Descriptions>
+        {hasErrors && (
+          <Alert
+            className={styles.previewAlert}
+            type="warning"
+            showIcon
+            message={`存在 ${failedCount} 条异常明细`}
+            description={
+              canExecute
+                ? '异常所属业务单据将整单阻断，其余合格业务单据可继续导入。'
+                : '当前没有可执行的合格业务单据，请下载错误文件并重新上传校验。'
+            }
+          />
+        )}
+        {errorTypes.length > 0 && (
+          <Table
+            className={styles.previewTable}
+            rowKey="reason"
+            size="small"
+            pagination={false}
+            dataSource={errorTypes}
+            columns={[
+              { title: '错误原因', dataIndex: 'reason' },
+              { title: '异常明细数', dataIndex: 'count', width: 120 },
+            ]}
+          />
+        )}
+      </section>
+      <div className={`${styles.formFooter} ${styles.previewFooter}`}>
+        <div>
+          {errorFileAvailable && (
+            <Button
+              loading={downloadingErrorFile}
+              onClick={onDownloadErrorFile}
+            >
+              下载错误文件
+            </Button>
+          )}
+        </div>
+        <Space>
+          <Button onClick={onBack}>上一步</Button>
+          <Button
+            type="primary"
+            loading={executing}
+            disabled={!canExecute}
+            onClick={handleExecute}
+          >
+            开始导入
+          </Button>
+        </Space>
+      </div>
+    </div>
+  );
+};
+
+export default Preview;

package/src/components/Business/ImportExport/ImportWizard/index.module.less

@@ -0,0 +1,360 @@
+.importModal {
+  :global {
+    .ant-modal {
+      top: 32px;
+      max-width: calc(100vw - 32px);
+      padding-bottom: 24px;
+    }
+
+    .ant-modal-content {
+      overflow: hidden;
+      border-radius: 8px;
+      box-shadow: 0 12px 40px rgba(31, 35, 41, 0.18);
+    }
+
+    .ant-modal-header {
+      padding: 18px 24px;
+      border-bottom-color: #eef0f3;
+    }
+
+    .ant-modal-body {
+      max-height: calc(100vh - 196px);
+      padding: 0;
+      overflow-y: auto;
+      background: #f7f8fa;
+    }
+
+    .ant-modal-footer {
+      padding: 14px 24px;
+      border-top-color: #eef0f3;
+    }
+
+    .ant-modal-close-x {
+      height: 76px;
+      line-height: 76px;
+    }
+  }
+}
+
+.modalTitle {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+}
+
+.modalTitleIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-right: 12px;
+  color: #1677ff;
+  font-size: 20px;
+  background: #eaf3ff;
+  border-radius: 8px;
+}
+
+.modalTitleText,
+.modalTitleDescription,
+.sectionTitle,
+.sectionDescription {
+  display: block;
+}
+
+.modalTitleText {
+  color: #1f2329;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.modalTitleDescription {
+  margin-top: 2px;
+  color: #8f959e;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.stepsPanel {
+  padding: 18px 112px;
+  background: #fff;
+  border-bottom: 1px solid #eef0f3;
+}
+
+.form {
+  padding: 16px 24px 24px;
+}
+
+.section {
+  margin-bottom: 16px;
+  padding: 18px 20px;
+  background: #fff;
+  border: 1px solid #e8eaed;
+  border-radius: 8px;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+
+.sectionIndex {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  color: #1677ff;
+  font-weight: 600;
+  font-size: 13px;
+  background: #eaf3ff;
+  border-radius: 50%;
+}
+
+.sectionTitle {
+  color: #1f2329;
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.sectionDescription {
+  margin-top: 2px;
+  color: #8f959e;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.templateRow {
+  display: flex;
+  align-items: flex-end;
+}
+
+.templateField {
+  flex: 1;
+  margin-bottom: 12px;
+}
+
+.downloadButton {
+  flex: 0 0 auto;
+  margin-bottom: 12px;
+  margin-left: 12px;
+}
+
+.templateSummary {
+  :global {
+    .ant-descriptions-item-label {
+      color: #646a73;
+      background: #f7f8fa;
+    }
+
+    .ant-descriptions-item-content {
+      color: #1f2329;
+    }
+  }
+}
+
+.settingGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.settingItem {
+  min-width: 0;
+  margin-bottom: 0;
+  padding: 14px 16px;
+  background: #f7f8fa;
+  border-radius: 6px;
+
+  :global {
+    .ant-form-item-label {
+      padding-bottom: 10px;
+      font-weight: 500;
+    }
+  }
+}
+
+.radioGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 16px;
+
+  :global {
+    .ant-radio-wrapper {
+      margin-right: 0;
+    }
+  }
+}
+
+.uploadSection {
+  margin-bottom: 0;
+}
+
+.uploadDragger {
+  :global {
+    .ant-upload.ant-upload-drag {
+      min-height: 156px;
+      background: #fbfcfd;
+      border-color: #c9cdd4;
+      border-radius: 8px;
+    }
+
+    .ant-upload.ant-upload-drag:hover {
+      background: #f5f9ff;
+      border-color: #1677ff;
+    }
+
+    .ant-upload.ant-upload-drag .ant-upload {
+      padding: 24px;
+    }
+
+    .ant-upload-drag-icon {
+      margin-bottom: 8px;
+    }
+
+    .ant-upload-drag-icon .anticon {
+      color: #1677ff;
+      font-size: 42px;
+    }
+
+    .ant-upload-text {
+      margin-bottom: 4px;
+      color: #1f2329;
+      font-weight: 500;
+      font-size: 14px;
+    }
+
+    .ant-upload-hint {
+      color: #8f959e;
+      font-size: 12px;
+    }
+
+    .ant-upload-list-item {
+      margin-top: 10px;
+    }
+  }
+}
+
+.uploadAlert {
+  margin-top: 12px;
+  border-color: #d9e8ff;
+  border-radius: 6px;
+}
+
+.progressPanel {
+  margin-top: 14px;
+  padding: 12px 14px 8px;
+  background: #f7f8fa;
+  border-radius: 6px;
+}
+
+.progressTitle {
+  margin-bottom: 6px;
+  color: #646a73;
+  font-size: 13px;
+}
+
+.formFooter {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  justify-content: flex-end;
+  margin: 16px -24px 0;
+  padding: 14px 24px;
+  background: #fff;
+  border-top: 1px solid #eef0f3;
+  gap: 8px;
+}
+
+.preview {
+  padding: 16px 24px 0;
+}
+
+.previewCard {
+  min-height: 280px;
+  padding: 18px 20px;
+  background: #fff;
+  border: 1px solid #e8eaed;
+  border-radius: 8px;
+}
+
+.previewSummary {
+  :global {
+    .ant-descriptions-item-label {
+      color: #646a73;
+      background: #f7f8fa;
+    }
+
+    .ant-descriptions-item-content {
+      color: #1f2329;
+      font-weight: 500;
+    }
+  }
+}
+
+.previewAlert,
+.previewTable {
+  margin-top: 12px;
+}
+
+.previewFooter {
+  justify-content: space-between;
+}
+
+@media (max-width: 768px) {
+  .stepsPanel {
+    padding: 16px 32px;
+  }
+
+  .form {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .preview {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .section {
+    padding: 16px;
+  }
+
+  .settingGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .formFooter {
+    margin-right: -16px;
+    margin-left: -16px;
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+}
+
+@media (max-width: 576px) {
+  .modalTitleDescription {
+    display: none;
+  }
+
+  .stepsPanel {
+    padding: 14px 20px;
+  }
+
+  .templateRow {
+    display: block;
+  }
+
+  .downloadButton {
+    margin-top: 0;
+    margin-bottom: 12px;
+    margin-left: 0;
+  }
+}