code

generator_ice/build.json

@@ -14,5 +14,11 @@
         ]
       }
     ]
-  ]
+  ],
+  "proxy": {
+    "/**": {
+      "enable": true,
+      "target": "http://127.0.0.1:8080"
+    }
+  }
 }

generator_ice/src/layouts/BasicLayout/menuConfig.js

@@ -1,7 +1,7 @@
 const headerMenuConfig = [];
 const asideMenuConfig = [
   {
-    name: 'Dashboard',
+    name: '代码生成',
     path: '/',
     icon: 'smile',
   },

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

@@ -1,33 +1,99 @@
-import * as React from 'react';
-import { Button } from '@alifd/next';
+import React, { useState, useEffect, useRef } from 'react';
+import { Button,Form,Input,Message,Select } from '@alifd/next';
 import styles from './index.module.scss';
+import { request } from 'ice';
 
-const Guide = () => (
-  <div className={styles.container}>
-    <h2 className={styles.title}>Welcome to icejs!</h2>
+const postData = {mysqlIp:'123.57.65.31',mysqlPort:'3306',mysqlUsername:'root',mysqlUserpass:'LUfZGvh7j1^qA*2c',mysqlName:'estateagents_test'}
+const FormItem = Form.Item;
+
+const formItemLayout = {
+    labelCol: {xxs: 4, l: 4},
+    wrapperCol: {xxs: 20, l: 16}
+};
 
-    <p className={styles.description}>This is a awesome project, enjoy it!</p>
+const Guide = props => {
+    const [dataSource, setDataSource] = useState([])
+    const [dbData, setDbData] = useState({})
 
-    <div className={styles.action}>
-      <a
-        href="https://ice.work/docs/guide/about"
-        target="_blank"
-        rel="noopener noreferrer"
-        style={{
-          marginRight: 20,
-        }}
-      >
-        <Button type="primary" size="large">
-          使用文档
-        </Button>
-      </a>
-      <a href="https://github.com/ice-lab/icejs" target="_blank" rel="noopener noreferrer">
-        <Button type="secondary" size="large">
-          GitHub
-        </Button>
-      </a>
-    </div>
-  </div>
-);
+    const handleSubmit = (values) => {
+        console.log('Get form value:', values);
+        setDbData(values)
+        request({
+          url: '/api/connection',
+          method: 'post',
+          data: values
+        }).then((response) => {
+            setDataSource(response)
+            Message.success('连接成功，请选择要生成的库')})
+        .catch((err) => {Message.error('连接出错,请检查配置')});
+    };
+      
+    const createdCode = (values) => {
+        console.log('Get form value22:', {...values,...dbData});
+        request({
+            url: '/api/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('生成失败请重试，或联系工作人员')});
+    };
+
+    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 name="mysqlUserpass" placeholder="请输入数据库密码"/>
+            </FormItem>
+            <FormItem label="数据库库名" required requiredMessage="必填">
+                <Input name="mysqlName" placeholder="请输入数据库库名"/>
+            </FormItem>
+            <FormItem label=" ">
+                <Form.Submit onClick={handleSubmit}>连接数据库</Form.Submit>
+            </FormItem>
+        </Form>
+      </div>
+      <div>
+      <Form style={{width: '60%'}} {...formItemLayout}>
+            <FormItem label="包路径" help="如：com.huiju.estateagents">
+                <Input name="packPath" placeholder="请输入包路径"/>
+            </FormItem>
+            <FormItem label="作者">
+                <Input name="author" placeholder="请输入作者"/>
+            </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>
+       
+      </div>
+  </div>)
+}
 
 export default Guide;

generator_ice/src/pages/Generator/index.jsx

@@ -0,0 +1,15 @@
+import React from './node_modules/react';
+import { ResponsiveGrid } from './node_modules/@alifd/next';
+import Guide from './components/Guide';
+
+const { Cell } = ResponsiveGrid;
+
+const Generator = () => (
+  <ResponsiveGrid gap={20}>
+    <Cell colSpan={12}>
+       <p>111111</p>
+    </Cell>
+  </ResponsiveGrid>
+);
+
+export default Generator;