feats

generator_ice/src/pages/Dashboard/components/Guide/index.jsx

@@ -1,110 +1,126 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Button,Form,Input,Message,Select, Switch } from '@alifd/next';
-import styles from './index.module.scss';
 import { request } from 'ice';
+import styles from './index.module.scss';
+
+const apiService = 'http://codeapi.njyunzhi.com'
 
 const postData = {
-    mysqlIp: process.env.NODE_ENV === 'development' ? 'rm-uf6z3z6jq11x653d77o.mysql.rds.aliyuncs.com' : undefined,
-    mysqlPort: '3306',
-    mysqlUsername: 'root',
-    mysqlUserpass: process.env.NODE_ENV === 'development' ? 'DQ@0lW##kBb2+-jPZC1s$Ma0h5$9W((q' : undefined,
-    mysqlName: '',
+  mysqlIp: process.env.NODE_ENV === 'development' ? 'rm-uf6z3z6jq11x653d77o.mysql.rds.aliyuncs.com' : undefined,
+  mysqlPort: '3306',
+  mysqlUsername: 'root',
+  mysqlUserpass: process.env.NODE_ENV === 'development' ? 'DQ@0lW##kBb2+-jPZC1s$Ma0h5$9W((q' : undefined,
+  mysqlName: '',
 }
 
 const tjData = { packPath:'com.yunzhi',author:'yansen' }
 const FormItem = Form.Item;
 
 const formItemLayout = {
-    labelCol: {xxs: 4, l: 4},
-    wrapperCol: {xxs: 20, l: 16}
+  labelCol: {xxs: 4, l: 4},
+  wrapperCol: {xxs: 20, l: 16}
 };
 
 const Guide = props => {
-    const [dataSource, setDataSource] = useState([])
-    const [dbData, setDbData] = useState({})
+  const [loading, setLoading] = useState(false)
+  const [generating, setGenerating] = useState(false)
+  const [dataSource, setDataSource] = useState([])
+  const [dbData, setDbData] = useState({})
 
-    const handleSubmit = (values) => {
-        console.log('Get form value:', values);
-        setDbData(values)
-        request({
-          url: '/mydb/connection',
-          method: 'post',
-          data: values
-        }).then((response) => {
-            setDataSource(response)
-            Message.success('连接成功，请选择要生成的库')})
-        .catch((err) => {Message.error('连接出错,请检查配置')});
-    };
+  const handleSubmit = (values) => {
+    console.log('Get form value:', values);
+    setDbData(values)
+    setLoading(true)
+    request({
+      url: `${apiService}/mydb/connection`,
+      method: 'post',
+      data: values
+    }).then((response) => {
+      setLoading(false)
+      setDataSource(response)
+      Message.success('连接成功，请选择要生成的库')})
+      .catch((err) => {
+        console.error(err)
+        setLoading(false)
+        Message.error('连接出错,请检查配置')
+      });
+  };
       
-    const createdCode = (values) => {
-        console.log('Get form value22:', {...values,...dbData});
-        request({
-            url: '/mydb/create',
-            method: 'post',
-            responseType: 'arraybuffer',
-            data: {...values,...dbData}
-          }).then((response) => {
-              var binaryData = [];
-              binaryData.push(response);
-              let blobUrl = window.URL.createObjectURL(new Blob(binaryData, {type: "application/zip"}))
-              let aElement = document.createElement('a'); //获取a标签元素
-              let filename = 'code.zip';//设置文件名称
-              aElement.href = blobUrl;//设置a标签路径
-              aElement.download = filename;
-              aElement.click();
-              window.URL.revokeObjectURL(blobUrl);
-          })
-          .catch((err) => {console.error(err) ; Message.error('生成失败请重试，或联系工作人员')});
-    };
+  const createdCode = (values) => {
+    console.log('Get form value22:', {...values,...dbData});
+    setGenerating(true)
+    request({
+      url: `${apiService}/mydb/create`,
+      method: 'post',
+      responseType: 'arraybuffer',
+      data: {...values,...dbData}
+    }).then((response) => {
+      setGenerating(false)
+      const binaryData = [];
+      binaryData.push(response);
+      const blobUrl = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/zip'}))
+      const aElement = document.createElement('a'); // 获取a标签元素
+      const filename = 'code.zip';// 设置文件名称
+      aElement.href = blobUrl;// 设置a标签路径
+      aElement.download = filename;
+      aElement.click();
+      window.URL.revokeObjectURL(blobUrl);
+    })
+      .catch((err) => {
+        console.error(err);        
+        setGenerating(false)
+        Message.error('生成失败请重试，或联系工作人员')
+      });
+  };
 
-    return (
-  <div className={styles.container}>
+  return (
+    <div className={styles.container}>
       <div>
         <Form style={{width: '60%'}} {...formItemLayout} value={postData}>
-            <FormItem label="数据库类型">
-                <p>MSQL</p>
-            </FormItem>
-            <FormItem label="数据库地址" required requiredMessage="必填">
-                <Input name="mysqlIp" placeholder="请输入数据库地址"/>
-            </FormItem>
-            <FormItem label="端口号" required requiredMessage="必填">
-                <Input name="mysqlPort" placeholder="请输入数据库端口号"/>
-            </FormItem>
-            <FormItem label="数据库用户名" required requiredMessage="必填">
-                <Input name="mysqlUsername" placeholder="请输入数据库用户名"/>
-            </FormItem>
-            <FormItem label="数据库密码" required requiredMessage="必填">
-                <Input.Password name="mysqlUserpass" placeholder="请输入数据库密码"/>
-            </FormItem>
-            <FormItem label="数据库库名" required requiredMessage="必填">
-                <Input name="mysqlName" placeholder="请输入数据库库名"/>
-            </FormItem>
-            <FormItem label=" ">
-                <Form.Submit onClick={handleSubmit}>连接数据库</Form.Submit>
-            </FormItem>
+          <FormItem label="数据库类型">
+            <p>MSQL</p>
+          </FormItem>
+          <FormItem label="数据库地址" required requiredMessage="必填">
+            <Input name="mysqlIp" placeholder="请输入数据库地址"/>
+          </FormItem>
+          <FormItem label="端口号" required requiredMessage="必填">
+            <Input name="mysqlPort" placeholder="请输入数据库端口号"/>
+          </FormItem>
+          <FormItem label="数据库用户名" required requiredMessage="必填">
+            <Input name="mysqlUsername" placeholder="请输入数据库用户名"/>
+          </FormItem>
+          <FormItem label="数据库密码" required requiredMessage="必填">
+            <Input.Password name="mysqlUserpass" placeholder="请输入数据库密码"/>
+          </FormItem>
+          <FormItem label="数据库库名" required requiredMessage="必填">
+            <Input name="mysqlName" placeholder="请输入数据库库名"/>
+          </FormItem>
+          <FormItem label=" ">
+            <Form.Submit onClick={handleSubmit} loading={loading}>连接数据库</Form.Submit>
+          </FormItem>
         </Form>
       </div>
       <div>
-      <Form style={{width: '60%'}} {...formItemLayout} value={tjData}>
-            <FormItem label="包路径" help="如：com.huiju.estateagents">
-                <Input name="packPath" placeholder="请输入包路径"/>
-            </FormItem>
-            <FormItem label="作者">
-                <Input name="author" placeholder="请输入作者"/>
-            </FormItem>
-            <FormItem label="开启 Swagger2" style={{  textAlign: 'left' }}>
-                <Switch name="swagger2" checkedChildren="on" unCheckedChildren="off" style={{ width: `60px` }} />
-            </FormItem>
-            <FormItem label="要生成代码的表" required requiredMessage="必填">
-                <Select name="mysqlLib" mode="multiple" showSearch dataSource={dataSource} style={{width: 700}} />
-            </FormItem>
-            <FormItem label=" ">
-                <a download><Form.Submit onClick={createdCode}>生成代码</Form.Submit></a>
-            </FormItem>
+        <Form style={{width: '60%'}} {...formItemLayout} value={tjData}>
+          <FormItem label="包路径" help="如：com.huiju.estateagents">
+            <Input name="packPath" placeholder="请输入包路径"/>
+          </FormItem>
+          <FormItem label="作者">
+            <Input name="author" placeholder="请输入作者"/>
+          </FormItem>
+          <FormItem label="开启 Swagger2" style={{  textAlign: 'left' }}>
+            <Switch name="swagger2" checkedChildren="on" unCheckedChildren="off" style={{ width: '60px' }} />
+          </FormItem>
+          <FormItem label="要生成代码的表" required requiredMessage="必填">
+            <Select name="mysqlLib" mode="multiple" showSearch dataSource={dataSource} style={{width: 700}} />
+          </FormItem>
+          <FormItem label=" ">
+            <a download><Form.Submit onClick={createdCode} loading={generating}>生成代码</Form.Submit></a>
+          </FormItem>
         </Form>
        
       </div>
-  </div>)
+    </div>)
 }
 
 export default Guide;