@jiangood/admin-spring-boot-starter 0.2.0

package/src/pages/test.jsx

@@ -0,0 +1,200 @@
+import React from "react";
+import {Button, Card, Divider, Form, Space} from "antd";
+import {
+    FieldBoolean,
+    FieldDate,
+    FieldDateRange,
+    FieldEditor,
+    FieldPercent,
+    FieldRemoteSelect,
+    FieldRemoteSelectMultiple,
+    FieldRemoteTree,
+    FieldRemoteTreeCascader,
+    FieldRemoteTreeSelect,
+    FieldRemoteTreeSelectMultiple,
+    FieldSysOrgTree,
+    FieldSysOrgTreeSelect,
+    FieldTable,
+    FieldTableSelect,
+    FieldUploadFile
+} from "../framework";
+
+export default class extends React.Component {
+
+
+    state = {
+        formValues: {}
+    }
+
+
+    componentDidMount() {
+        const json = localStorage.getItem("_test")
+        const formValues = json ? JSON.parse(json) : {}
+        this.formRef.current.setFieldsValue(formValues)
+        this.setState({formValues})
+    }
+
+    formRef = React.createRef()
+
+
+    render() {
+
+        return <>
+            <Card title='表单组件-自定义封装'>
+                {JSON.stringify(this.state.formValues)}
+                <Divider></Divider>
+                <Form
+                    ref={this.formRef}
+                    onValuesChange={(changedValues, allValues) => {
+                        this.setState({formValues: allValues})
+                    }}
+                    onReset={() => {
+                        this.setState({formValues: {}})
+                    }}
+
+                    onFinish={values => {
+                        localStorage.setItem("_test", JSON.stringify(values))
+                    }}
+
+                    labelAlign={'left'}
+                    labelCol={{flex: '400px',}}
+                    layout='horizontal'
+                >
+                    <Form.Item label='上传'   name='file'>
+                        <FieldUploadFile cropImage={true} />
+                    </Form.Item>
+
+                    <Form.Item label='百分数'   name='number'>
+                        <FieldPercent />
+                    </Form.Item>
+                    <Form.Item label='机构树选择 （部门） FieldSysOrgTree'   name='org'>
+                        <FieldSysOrgTree />
+                    </Form.Item>
+                    <Form.Item label='机构树选择 （部门） FieldSysOrgTreeSelect'   name='org'>
+                        <FieldSysOrgTreeSelect />
+                    </Form.Item>
+
+                    <Form.Item label='机构树选择（单位） FieldSysOrgTreeSelect'   name='org'>
+                        <FieldSysOrgTreeSelect type='unit' />
+                    </Form.Item>
+
+
+
+                    <Form.Item label='选择表格 FieldTableSelect' name='user'>
+                        <FieldTableSelect url='admin/sysUser/page'  columns={[
+                            {title: '姓名', dataIndex: 'name'},
+                            {title: '账号', dataIndex: 'account'},
+                        ]}/>
+                    </Form.Item>
+
+                    <Form.Item label='可编辑表格' name='tableData'>
+                        <FieldTable columns={[
+                            {title: '名称', dataIndex: 'name'},
+                            {title: '年龄', dataIndex: 'age'},
+                            {title: '婚否', dataIndex: 'marry',render(){
+                                return <FieldBoolean type='select'></FieldBoolean>
+                                }},
+                        ]}></FieldTable>
+                    </Form.Item>
+
+                    <Divider>日期区间 FieldDateRange</Divider>
+                    <Form.Item label=' YYYY-MM-DD HH:mm:ss' name='dateRange'>
+                        <FieldDateRange type='YYYY-MM-DD HH:mm:ss'></FieldDateRange>
+                    </Form.Item>
+                    <Form.Item label='YYYY-MM-DD HH:mm' name='dateRange'>
+                        <FieldDateRange type='YYYY-MM-DD HH:mm'></FieldDateRange>
+                    </Form.Item>
+                    <Form.Item label='日期' name='dateRange'>
+                        <FieldDateRange ></FieldDateRange>
+                    </Form.Item>
+                    <Form.Item label='YYYY-QQ 季度' name='dateRange'>
+                        <FieldDateRange type='YYYY-QQ'></FieldDateRange>
+                    </Form.Item>
+                    <Form.Item label='YYYY-MM' name='dateRange'>
+                        <FieldDateRange type='YYYY-MM'></FieldDateRange>
+                    </Form.Item>
+                    <Form.Item label='YYYY' name='dateRange'>
+                        <FieldDateRange type='YYYY'></FieldDateRange>
+                    </Form.Item>
+                    <Form.Item label='HH:mm' name='dateRange'>
+                        <FieldDateRange type='HH:mm'></FieldDateRange>
+                    </Form.Item>
+                    <Form.Item label='HH:mm:ss' name='dateRange'>
+                        <FieldDateRange type='HH:mm:ss'></FieldDateRange>
+                    </Form.Item>
+
+
+                    <Divider>日期</Divider>
+                    <Form.Item label='YYYY-MM-DD HH:mm:ss' name='date'>
+                        <FieldDate type='YYYY-MM-DD HH:mm:ss'></FieldDate>
+                    </Form.Item>
+                    <Form.Item label='FieldDate YYYY-MM-DD HH:mm' name='date'>
+                        <FieldDate type='YYYY-MM-DD HH:mm'></FieldDate>
+                    </Form.Item>
+                    <Form.Item label='FieldDate 日期' name='date'>
+                        <FieldDate ></FieldDate>
+                    </Form.Item>
+                    <Form.Item label='FieldDate YYYY-QQ 季度' name='date'>
+                        <FieldDate type='YYYY-QQ'></FieldDate>
+                    </Form.Item>
+                    <Form.Item label='FieldDate YYYY-MM' name='date'>
+                        <FieldDate type='YYYY-MM'></FieldDate>
+                    </Form.Item>
+                    <Form.Item label='FieldDate YYYY' name='date'>
+                        <FieldDate type='YYYY'></FieldDate>
+                    </Form.Item>
+                    <Form.Item label='FieldDate HH:mm' name='date'>
+                        <FieldDate type='HH:mm'></FieldDate>
+                    </Form.Item>
+                    <Form.Item label='FieldDate HH:mm:ss' name='date'>
+                        <FieldDate type='HH:mm:ss'></FieldDate>
+                    </Form.Item>
+                    <Divider>布尔</Divider>
+                    <Form.Item label='FieldBoolean 布尔 (switch)' name='boolean'>
+                        <FieldBoolean type='switch'></FieldBoolean>
+                    </Form.Item>
+                    <Form.Item label='FieldBoolean 布尔 (checkbox)' name='boolean'>
+                        <FieldBoolean type='checkbox'></FieldBoolean>
+                    </Form.Item>
+                    <Form.Item label='FieldBoolean 布尔 (radio)' name='boolean'>
+                        <FieldBoolean type='radio'></FieldBoolean>
+                    </Form.Item>
+                    <Form.Item label='FieldBoolean 布尔 (选择框)' name='boolean'>
+                        <FieldBoolean type='select'></FieldBoolean>
+                    </Form.Item>
+                    <Form.Item label='FieldRemoteTreeSelectMultiple 远程树选择(多选)' name='users'>
+                        <FieldRemoteTreeSelectMultiple url='admin/sysUser/tree'/>
+                    </Form.Item>
+
+                    <Divider>选择</Divider>
+                    <Form.Item label='远程树选择' name='user'>
+                        <FieldRemoteTreeSelect url='admin/sysUser/tree'/>
+                    </Form.Item>
+                    <Form.Item label='远程树（多选）' name='users'>
+                        <FieldRemoteTree url='admin/sysUser/tree'/>
+                    </Form.Item>
+                    <Form.Item label='远程树级联选择' name='user'>
+                        <FieldRemoteTreeCascader url='admin/sysUser/tree'/>
+                    </Form.Item>
+
+                    <Form.Item label='单选' name='user'>
+                        <FieldRemoteSelect url='admin/sysUser/options'/>
+                    </Form.Item>
+                    <Form.Item label='多选' name='users'>
+                        <FieldRemoteSelectMultiple url='admin/sysUser/options'/>
+                    </Form.Item>
+                    <Form.Item label='富文本' name='富文本'>
+                        <FieldEditor height={100}/>
+                    </Form.Item>
+
+                    <Space>
+                        <Button type='primary' htmlType='submit'>保存</Button>
+                        <Button htmlType='reset'>重置</Button>
+                    </Space>
+                </Form>
+
+
+            </Card>
+        </>
+    }
+}

package/src/pages/ureport/index.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import {Button, Flex} from "antd";
+
+export default class extends React.Component {
+
+
+
+    render() {
+        return <div style={{display:'flex',alignItems:'center',justifyContent:'center'}}>
+
+
+            <Button type='primary' href='/ureport/designer'>打开设计器</Button>
+
+
+        </div>
+    }
+
+
+}
+
+
+

package/src/pages/userCenter/ChangePassword.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+import {Button, Form, Input, Modal} from "antd";
+
+
+import {history} from 'umi'
+
+export default class extends React.Component {
+
+
+    onFinish = (values) => {
+        HttpUtils.post('admin/userCenter/updatePwd', values).then(() => {
+            Modal.success({
+                title: '提示',
+                content: '修改密码成功',
+                onOk: () => {
+                    SysUtils.setToken(null)
+                    history.push('/login')
+                }
+            })
+        })
+    }
+
+    validator = (rule, value) => {
+        return new Promise((resolve, reject) => {
+            HttpUtils.create().get("admin/sysUser/pwdStrength", {password: value}).then(response => {
+                const rs = response.data
+                if (!rs.success) {
+                    reject(rs.message)
+                }
+                resolve()
+            })
+        })
+
+    }
+
+    render() {
+        return <div>
+
+            <Form onFinish={this.onFinish} style={{maxWidth: 400}}>
+
+                <Form.Item name='newPassword'
+                           label='新密码'
+                           extra={'请输入字母、数字、特殊字符'}
+                           rules={[
+                               {required: true},
+                               {
+                                   validator: this.validator
+                               }
+                           ]}
+                >
+                    <Input.Password></Input.Password>
+                </Form.Item>
+
+                <Form.Item wrapperCol={{offset: 5}} style={{marginTop: 40}}>
+                    <Button type="primary" htmlType="submit">
+                        确定
+                    </Button>
+                </Form.Item>
+            </Form>
+
+        </div>
+    }
+}

package/src/pages/userCenter/index.jsx

@@ -0,0 +1,90 @@
+import React from "react";
+import {Avatar, Card, Col, Row, Tabs} from "antd";
+import ChangePassword from "./ChangePassword";
+import {HttpUtils, Page} from "../../framework";
+
+export default class extends React.Component {
+
+    state = {
+        info :{}
+    }
+
+    componentDidMount() {
+        HttpUtils.get('admin/userCenter/info').then(rs=>{
+            this.setState({info:rs})
+        })
+    }
+
+    render() {
+const {info} = this.state;
+        return <Page padding backgroundGray>
+            <Row gutter={[16,16]}>
+                <Col md={6} sm={24}>
+                    <Card title='个人信息'>
+
+                        <div className='flex-center' style={{marginBottom:32}}>
+                            <Avatar size={128} title='点击修改头像' />
+                        </div>
+
+
+                        <table className='tmgg-table'>
+                            <tbody>
+                            <tr>
+                                <td>用户名称</td>
+                                <td align='right'>{info.name}</td>
+                            </tr>
+                            <tr>
+                                <td>账号</td>
+                                <td align='right'>{info.account}</td>
+                            </tr>
+                            <tr>
+                                <td>手机号码</td>
+                                <td>{info.phone}</td>
+                            </tr>
+                            <tr>
+                                <td>用户邮箱</td>
+                                <td>{info.email}</td>
+                            </tr>
+                            <tr>
+                                <td>所属部门</td>
+                                <td>{info.unit} {info.dept}</td>
+                            </tr>
+                            <tr>
+                                <td>所属角色</td>
+                                <td>{info.roles}</td>
+                            </tr>
+                            <tr>
+                                <td>创建日期</td>
+                                <td>{info.createTime}</td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </Card>
+                </Col>
+                <Col md={18}  sm={24}>
+                    <Card title='个人设置'>
+                        <Tabs
+                            items={[
+                                {
+                                    label: '修改密码', key: 'pwd', children: <div>
+                                        <ChangePassword/>
+                                    </div>
+                                },
+                                {
+                                    label: '消息订阅', key: 'topic', children: <div>
+                                        当账号管理邮箱后，系统消息会发送邮件给您
+                                    </div>
+                                }
+                            ]}
+                            tabPosition='left'
+                        >
+                        </Tabs>
+                    </Card>
+                </Col>
+            </Row>
+
+
+        </Page>
+
+    }
+}

package/src/pages/userCenter/manual.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import {HttpUtils, Page, ProTable} from "../../framework";
+
+
+export default class extends React.Component {
+
+
+    tableRef = React.createRef()
+
+    columns = [
+
+        {
+            title: '名称',
+            dataIndex: 'name',
+
+
+        },
+
+        {
+            title: '版本',
+            dataIndex: 'version',
+            render(version) {
+                return 'v' +version;
+            }
+        },
+
+        {
+            title: '文件',
+            dataIndex: 'fileId',
+            render(id){
+               const url = ('admin/sysFile/preview/' + id);
+                return <a href={url} target='_blank'>查看文件</a>
+            }
+
+        },
+
+        {
+            title: '更新时间',
+            dataIndex: 'updateTime',
+        },
+    ]
+
+
+
+
+    render() {
+        return <Page>
+            <ProTable
+                actionRef={this.tableRef}
+                request={(params) => HttpUtils.get('admin/sysManual/pageForUser', params)}
+                columns={this.columns}
+            />
+        </Page>
+
+
+    }
+}
+
+

package/src/pages/userCenter/message.jsx

@@ -0,0 +1,105 @@
+import React from "react";
+import {Button, Card, Tabs, Tag} from "antd";
+import {ProTable} from "../../framework";
+
+export default class  extends React.Component {
+
+    tableRef = React.createRef()
+
+    columns = [
+        {
+            title: '时间',
+            dataIndex: 'createTime',
+            width: 150
+        },
+        {
+            title: '标题',
+            dataIndex: 'title',
+        },
+        {
+            title: '内容',
+            dataIndex: 'content',
+            render(content, row) {
+                return <div dangerouslySetInnerHTML={{__html: content}}/>
+            }
+        },
+        {
+            title: '已读时间',
+            dataIndex: 'readTime',
+            width: 150
+        },
+        {
+            title: '状态',
+            dataIndex: 'isRead',
+            render: (v, row) => {
+                return v == true ? <Tag color='green'>已读</Tag> : <Tag color='red'>未读</Tag>;
+            },
+            width: 80
+        },
+
+        {
+            title: '-',
+            dataIndex: 'option',
+            render: (read, row) => {
+                if(!row.isRead)
+                 return <Button size='small' onClick={() => this.read(row)}> 标记已读 </Button>
+            },   width: 80
+        }
+    ]
+
+    read = (record) => {
+        HttpUtils.post("admin/user/msg/read", record).then(rs => {
+            this.tableRef.current.reload()
+        })
+    }
+
+
+
+    render() {
+        return <Card variant={"borderless"}>
+
+            <Tabs defaultActiveKey="0" destroyOnHidden
+                >
+                <Tabs.TabPane key='0' tab='所有消息'>
+                    <ProTable
+                        actionRef={this.tableRef}
+                        request={(params) => HttpUtils.get("admin/user/msg/page", params)}
+                        columns={this.columns}
+                        toolbarOptions={{showSearch:false}}
+                        size='small'
+                    />
+                </Tabs.TabPane>
+                <Tabs.TabPane key='1' tab='未读消息'>
+                    <ProTable
+                        actionRef={this.tableRef}
+                        request={(params) => HttpUtils.get("admin/user/msg/page?read=false", params)}
+                        columns={this.columns}
+                        rowSelection={false}
+                        rowKey='id'
+                        toolbarOptions={{showSearch:false}}
+                        size='small'
+                    />
+
+
+                </Tabs.TabPane>
+                <Tabs.TabPane key='2' tab='已读消息'>
+
+                    <ProTable
+                        actionRef={this.tableRef}
+                        request={(params) => HttpUtils.get("admin/user/msg/page?read=true", params)}
+                        rowSelection={false}
+                        rowKey='id'
+                        toolbarOptions={{showSearch:false}}
+                        options={false}
+                        size='small'
+                        columns={this.columns}
+                    />
+
+
+                </Tabs.TabPane>
+
+            </Tabs>
+
+        </Card>
+    }
+}

package/src/style/global.less

@@ -0,0 +1,51 @@
+/*主要在layout中导入*/
+table.tmgg-table {
+  width: 100%;
+  border-collapse: collapse; /* 合并边框 */
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
+  table-layout: fixed;
+
+  th {
+    background-color: #f2f2f2; /* 背景色 */
+    color: #333; /* 文字颜色 */
+    font-weight: bold; /* 加粗 */
+    padding: 12px 15px; /* 内边距 */
+    text-align: left; /* 文字对齐 */
+    border-bottom: 2px solid #ddd; /* 底部边框 */
+  }
+
+  td {
+    padding: 10px 15px; /* 内边距 */
+    border-bottom: 1px solid #ddd; /* 底部边框 */
+    text-align: left; /* 文字对齐 */
+  }
+
+  /* 表格行悬停效果 */
+
+  tr:hover {
+    background-color: #f5f5f5; /* 悬停背景色 */
+  }
+
+  /* 斑马纹效果 - 交替行颜色 */
+  tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+
+  /* 响应式表格 - 在小屏幕上添加水平滚动 */
+  @media screen and (max-width: 600px) {
+    table {
+      display: block;
+      overflow-x: auto;
+    }
+  }
+
+
+}
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+