DDL导出详情

src/service/datamodeler.js

-import { PostFile, GetJSON, PostJSON, Post, Get, Delete, Delete1, Delete2 } from "../util/axios"
+import { PostFile, GetJSON, PostJSON, Post, Get, Delete, Delete1, Delete2, callFetchRaw } from "../util/axios"
 
 export function loadDataModelCatalog() {
   return GetJSON("/datamodeler/easyDataModelerCURD/loadDataModelCatalog");
@@ -246,7 +246,7 @@ export function getExportTableDDL(payload) {
 }
 
 export function downloadExportTableDDLListZip(payload) {
-  return PostFile("/shandatamodeler/easyDataModelerExport/downloadExportTableDDLListZip", payload);
+  return callFetchRaw("post","/shandatamodeler/easyDataModelerExport/downloadExportTableDDLListZip", payload);
 }
 
 export function validateDataModel(payload) {

src/util/Component/download.ts

+import { AxiosResponse } from "axios"
+
+export default function (res: AxiosResponse<any>) {
+  const blob = res.data
+  const headers = res.headers
+
+  let tempName = headers["content-disposition"]
+    ?.split(";")?.[1]
+    ?.split("filename=")?.[1];
+  tempName = decodeURI(tempName);
+
+  // const blob = new Blob([content], { type: 'application/octet-stream' })
+  var url = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.style.display = 'none';
+  link.href = url;
+  link.setAttribute('download', tempName); //or any other extension
+  document.body.appendChild(link);
+  link.click();
+  URL.revokeObjectURL(link.href) // 释放URL 对象
+  document.body.removeChild(link)
+}
\ No newline at end of file

src/util/axios.js

@@ -198,6 +198,9 @@ export const callFetchRaw = (method, url, options) => {
     bodyFormData.append(key, params[key]);
   });
 
+  console.log('options', options)
+  console.log('reqConfig', reqConfig)
+
   return axios.request({
     method,
     url,

src/view/Manage/Model/Component/export-ddl.jsx

 import React from "react"
-import { Modal, Button, Row, Col, Space, Select, Input, Form, Tooltip } from 'antd'
+import { Modal, Button, Row, Col, Space, Select, Input, Form, Tooltip, Typography, Spin } from 'antd'
 
 import { dispatch } from '../../../../model'
 import { formatVersionDate } from "../../../../util"
+import download from "../../../../util/Component/download"
+import { config } from "rxjs"
 
 const FC = (props) => {
   const { ids, visible, onCancel } = props
+  const [downloading, setDownloading] = React.useState(false)
   const basicRef = React.useRef()
 
   const close = () => {
+    setDownloading(false)
     onCancel?.()
   }
 
-  const download = () => {
+  const onDownload = () => {
+    setDownloading(true)
     dispatch({
       type: 'datamodel.downloadExportTableDDLListZip',
       payload: {
-        data: basicRef.current.configs??[]
+        data: basicRef.current.configs??[],
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        responseType: 'blob',
       },
       callback: (data) => {
-        
+        setDownloading(false)
+        download(data)
       },
       error: () => {
-        
+        setDownloading(false)
       }
     }) 
   }
@@ -33,10 +43,12 @@ const FC = (props) => {
         onClick={() => close()}
       >取消</Button>,
       <Button key={'save'} type='primary'
-        onClick={() => download()}
+        loading={downloading}
+        disabled={downloading}
+        onClick={() => onDownload()}
       >导出</Button>
     ]
-  }, [close, download])
+  }, [close, onDownload, downloading])
 
   return (
     <Modal
@@ -101,7 +113,7 @@ const Basic = React.forwardRef(function ({ ids }, ref) {
     dispatch({
       type: 'datamodel.exportTableDDLAbstractList',
       payload: {
-        data: ids
+        data: ids,
       },
       callback: (data) => {
         setLoading(false)
@@ -114,42 +126,69 @@ const Basic = React.forwardRef(function ({ ids }, ref) {
   }
 
   return (
-    <Row>
-      <Col>
-      { data?.map(item => (
-        <div>
-          <Space>
-            <div>{item.modelEnName}</div>
-            <div>{item.dbType}</div>
-            <Select defaultValue={false} size='small' onChange={(val) => {
+    <Spin spinning={loading}>
+      <Row gutter={15}>
+        <Col flex='300px' style={{ height: 'calc(80vh - 30px)', overflow: 'auto' }}>
+        { data?.map((item, index) => (
+          <Row gutter={10} key={index} className={index!==0?'mt-2':''}>
+            <Col flex='1' style={{ overflow: 'hidden' }}>
+              <Tooltip title={item.modelEnName}>
+                <Typography.Text ellipsis={true}>
+                  <a style={{ color: (item.easyDataModelerDataModelId===currentConfig?.easyDataModelerDataModelId)?'#196AD2':'#262626' }}
+                    onClick={() => {
+                      const index = (configs??[]).findIndex(_item => item.easyDataModelerDataModelId === _item.easyDataModelerDataModelId)
+                      if (index !== -1) {
+                        setConfig(configs[index])
+                      }
+                    }}
+                  >
+                  {item.modelEnName}
+                  </a>
+                </Typography.Text>
+              </Tooltip>
+            </Col>
+            <Col flex='80px'>{item.dbType}</Col>
+            <Col flex='none'>
+              <Select defaultValue={false} size='small' 
+                style={{ width: 80 }}
+                onChange={(val) => {
                   const index = (configs??[]).findIndex(_item => item.easyDataModelerDataModelId === _item.easyDataModelerDataModelId)
                   if (index !== -1) {
                     const newConfig = { ...configs[index], alertDLL: val }
                     setConfigs((prev) => {
-                  return (prev??[]).splice(index, 1, newConfig)
+                      const newConfigs = [...prev??[]]
+                      newConfigs.splice(index, 1, newConfig)
+                      return newConfigs
                     })
+
+                    if (configs[index].easyDataModelerDataModelId === currentConfig?.easyDataModelerDataModelId) {
                       setConfig(newConfig)
                     }
-            }}>
+                  }
+                }}
+              >
                 <Select.Option value={false}>全量</Select.Option>
                 { item.supportAlertDLL && <Select.Option value={true}>增量</Select.Option> }
               </Select>
-          </Space>
-        </div>
+            </Col>
+          </Row>
         )) }
         </Col>
-      <Col>
+        <Col flex='1' style={{ overflow: 'hidden' }}>
           <DDLDetail config={currentConfig} setConfig={(val) => {
             const index = (configs??[]).findIndex(item => item.easyDataModelerDataModelId === val?.easyDataModelerDataModelId)
             if (index !== -1) {
               setConfigs((prev) => {
-              return (prev??[]).splice(index, 1, val)
+                const newConfigs = [...prev??[]]
+                newConfigs.splice(index, 1, val)
+                return newConfigs
               })
               setConfig(val)
             }
           }} />
         </Col>
       </Row>
+    </Spin>
   )
 })
 
@@ -175,6 +214,7 @@ const DDLDetail = ({ config, setConfig }) => {
 
   const getVersions = () => {
     setLoadingVersions(true)
+    setVersions()
     dispatch({
       type: 'datamodel.getVersions',
       payload: {
@@ -264,11 +304,11 @@ const DDLDetail = ({ config, setConfig }) => {
     <>
       <Form layout='inline'>
         <Form.Item label='基线版本'>
-          <Select loading={loadingVersions} value={config?.leftVersionId} style={{ width: 300 }} onChange={onBasicChange}  >
+          <Select loading={loadingVersions} value={(versions??[]).length>0?config?.leftVersionId:undefined} style={{ width: 300 }} onChange={onBasicChange}  >
           {
             versions?.map((item, index) => (
-              <Select.Option key={index} value={item.id} disabled={index===0}>
-                <Tooltip title={(index===0)?'最近版本只能在增量版本中被选中':''}>
+              <Select.Option key={index} value={item.id} disabled={config?.alertDLL&&index===0}>
+                <Tooltip title={(config?.alertDLL&&index===0)?'最近版本只能在增量版本中被选中':''}>
                 {item.name}
                 </Tooltip>
               </Select.Option>
@@ -278,7 +318,7 @@ const DDLDetail = ({ config, setConfig }) => {
         </Form.Item>
         {
           config?.alertDLL && <Form.Item label='增量版本'>
-            <Select value={config?.rightVersionId} style={{ width: 300 }} disabled={!config?.leftVersionId} onChange={onIncChange}>
+            <Select value={(incVersions??[]).length>0?config?.rightVersionId:undefined} style={{ width: 300 }} disabled={!config?.leftVersionId} onChange={onIncChange}>
             {
               (incVersions||[]).map((item, index) => (
                 <Select.Option key={index} value={item.id}>{item.name}</Select.Option>
@@ -288,7 +328,9 @@ const DDLDetail = ({ config, setConfig }) => {
           </Form.Item>
         }
       </Form>
-      <Input.TextArea value={ddl??''} autoSize={{minRows:4,maxRows:20}} />
+      <div className='mt-2'>
+        <Input.TextArea value={ddl??''} style={{ height: 'calc(80vh - 70px)', resize: 'none'  }} />
+      </div>
     </>
   )
 }
\ No newline at end of file