update 调整大量细节

web-react/src/assets/style/lib/form.less

@@ -45,7 +45,9 @@
     .ant-mentions,
     .ant-select-selector,
     .ant-input-group-addon,
-    .ant-cascader-picker {
+    .ant-cascader-picker,
+    .ant-input-affix-wrapper,
+    .ant-picker {
       z-index: 1;
 
       text-align: left;
@@ -64,11 +66,23 @@
 
       box-shadow: @box-shadow-focused;
     }
+    .unfoucs {
+      z-index: 1 !important;
+
+      box-shadow: none;
+    }
     .ant-input {
       &:focus {
         .focus();
       }
     }
+    .ant-input-affix-wrapper {
+      >.ant-input {
+        &:focus {
+          .unfoucs();
+        }
+      }
+    }
     .ant-input-number-focused,
     .ant-mentions-focused {
       .focus();
@@ -85,6 +99,18 @@
         .focus();
       }
     }
+    .ant-input-affix-wrapper:focus,
+    .ant-input-affix-wrapper-focused {
+      .focus();
+    }
+    .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) {
+      .ant-select-selector {
+        .focus();
+      }
+    }
+    .ant-picker-focused {
+      .focus();
+    }
     .ant-input-group {
       .ant-row-flex {
         .ant-select {
@@ -205,8 +231,8 @@
     h3,
     h4,
     h5 {
-      margin-top: @padding-sm;
+      margin: 0;
-      padding: 0 @padding-md;
+      padding: @padding-sm @padding-md @padding-xs;
     }
     .yo-form-group {
       margin-bottom: 0;

web-react/src/assets/style/lib/icon-selector.less

@@ -13,11 +13,10 @@
   }
   .ant-tabs {
     height: 100%;
-    .ant-tabs-left-content {
+    .ant-tabs-content-left {
       position: relative;
 
       height: 100%;
-      padding: 0;
       .ant-tabs-tabpane {
         position: absolute;
         top: 0;

web-react/src/assets/style/lib/list.less

@@ -44,4 +44,12 @@
       }
     }
   }
+  .ant-list-item {
+    transition: @animation-duration-slow;
+    transition-property: background, border-bottom-color;
+    &:hover {
+      border-bottom-color: lighten(@primary-color, 30%);
+      background: linear-gradient(90deg, transparent 10%, @background-color-light 70%, transparent);
+    }
+  }
 }

web-react/src/assets/style/lib/table.less

@@ -23,8 +23,26 @@
   }
 }
 
-.ant-table {
+.ant-table-thead {
-  background-color: @white;
+  th.ant-table-column-has-sorters {
+    &:hover {
+      background-color: darken(@background-color-base, 5%);
+    }
+  }
+}
+
+.ant-table-tbody {
+  >tr {
+    >td {
+      transition-property: background, border-bottom-color;
+    }
+  }
+
+  >tr.ant-table-row:hover {
+    >td {
+      border-bottom-color: lighten(@primary-color, 30%);
+    }
+  }
 }
 
 .ant-table-small {
@@ -54,6 +72,10 @@
 }
 
 .yo-table {
+  .ant-table {
+    margin: 0 !important;
+  }
+
   .border-right-none() {
     border-right-width: 0 !important;
 
@@ -126,8 +148,10 @@
     }
   }
 
-  .ant-table-pagination {
+  .ant-table-bordered {
-    float: none;
+    >.ant-table-container {
+      border-top: @border-width-base @border-style-base @table-border-color;
+    }
   }
 }
 

web-react/src/assets/style/lib/tree-layout.less

@@ -27,6 +27,8 @@
 
     text-align: right;
     >.anticon {
+      margin-left: @padding-xs;
+
       cursor: pointer;
 
       color: fade(@black, 50%);
@@ -60,4 +62,7 @@
       background-color: fade(@black, 45%);
     }
   }
+  .ant-tree {
+    color: fade(@black, 60%);
+  }
 }

web-react/src/assets/style/theme/primary.less

@@ -2,3 +2,4 @@
 @primary-color: #007bff;
 @font-size-base: 13px;
 @border-radius-base: 0;
+@border-color-split: hsv(0, 0, 90%);

web-react/src/components/query-list/index.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Button, Form, List, Pagination, Spin } from 'antd'
+import { Button, Form, List, Pagination, Spin, Tooltip } from 'antd'
 import { AntIcon } from 'components'
 
 export default class QueryList extends Component {
@@ -148,12 +148,15 @@ export default class QueryList extends Component {
                     layout="inline"
                     ref={this.form}
                     onFinish={(value) => this.onQuery(value)}
+                    initialValues={this.props.queryInitialValues}
                 >
                     {query}
                     <Form.Item>
                         <Button.Group className="mr-xs">
-                            <Button htmlType="submit" type="primary">查询</Button>
+                            <Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>查询</Button>
-                            <Button onClick={() => this.onResetQuery()}>重置</Button>
+                            <Tooltip placement="bottom" title="重置查询">
+                                <Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
+                            </Tooltip>
                         </Button.Group>
                         {
                             moreQuery && <Button>更多查询条件</Button>
@@ -181,7 +184,9 @@ export default class QueryList extends Component {
                     </div>
                     <div className="yo-action-bar--actions">
                         <Button.Group>
-                            <Button>刷新</Button>
+                            <Tooltip placement="bottom" title="刷新">
+                                <Button onClick={() => this.onReloadData()} type="text" icon={<AntIcon type="reload" />} />
+                            </Tooltip>
                         </Button.Group>
                     </div>
                 </div>

web-react/src/components/query-table/index.jsx

@@ -40,7 +40,8 @@ export default class QueryTable extends Component {
         size: 'small',
         showSizeChanger: true,
         showQuickJumper: true,
-        showTotal: (total) => `总共${total}条数据`
+        showTotal: (total) => `总共${total}条数据`,
+        position: ['bottomLeft']
     }
 
     // 默认选中页码

web-react/src/components/query-tree-layout/index.jsx

@@ -86,6 +86,10 @@ export default class QueryTreeLayout extends Component {
         this.setState({ loading: false })
     }
 
+    onReloadData() {
+        this.onLoadData()
+    }
+
     onExpand(expandedKeys) {
         this.setState({
             expandedKeys,
@@ -240,15 +244,26 @@ export default class QueryTreeLayout extends Component {
                         </div>
                     </Layout.Header>
                     <div className="yo-tree-layout--bar">
+                        <Tooltip placement="bottom" title="刷新">
+                            <AntIcon type="undo" onClick={() => this.onReloadData()} />
+                        </Tooltip>
                         <Tooltip placement="bottom" title="折叠全部">
                             <AntIcon type="switcher" onClick={() => this.setState({ expandedKeys: [] })} />
                         </Tooltip>
                     </div>
                     <div className="yo-tree-layout--content">
-                        <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
+                        <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />} wrapperClassName="h-100-p">
                             {
                                 !this.state.loading && !this.state.dataSource.length ?
-                                    <Empty />
+                                    <Empty
+                                        image={
+                                            <div className="text-center pt-md">
+                                                <AntIcon className="h3 mt-xl mb-md" type="smile" />
+                                                <p>暂无数据</p>
+                                            </div>
+                                        }
+                                        description={false}
+                                    />
                                     :
                                     <Tree
                                         {...props}

web-react/src/index.js

@@ -4,6 +4,7 @@ import Router from './router'
 import reportWebVitals from './reportWebVitals';
 
 import { ConfigProvider } from 'antd'
+import { AntIcon } from 'components'
 import zhCN from 'antd/lib/locale/zh_CN'
 import moment from 'moment'
 import 'moment/locale/zh-cn'
@@ -14,7 +15,17 @@ moment.locale('zh-cn')
 //<React.StrictMode></React.StrictMode>
 
 ReactDOM.render(
-  <ConfigProvider locale={zhCN}>
+  <ConfigProvider
+    locale={zhCN}
+    renderEmpty={
+      () => (
+        <div className="text-center pt-md">
+          <AntIcon className="h3 mb-md" type="smile" />
+          <p>暂无数据</p>
+        </div>
+      )
+    }
+  >
     <Router />
   </ConfigProvider>,
   document.getElementById('root')

web-react/src/pages/system/org/index.jsx

@@ -26,6 +26,9 @@ export default class index extends Component {
         }
     }
 
+    // 树框架实例
+    treeLayout = React.createRef()
+
     // 表格实例
     table = React.createRef()
 
@@ -209,8 +212,13 @@ export default class index extends Component {
     async onAction(action, successMessage) {
         this.table.current.onLoading()
         try {
-            await action
+            if (action) {
-            Message.success(successMessage)
+                await action
+            }
+            if (successMessage) {
+                Message.success(successMessage)
+            }
+            this.treeLayout.current.onReloadData()
             this.table.current.onReloadData()
         } catch {
             this.table.current.onLoaded()
@@ -234,6 +242,7 @@ export default class index extends Component {
     render() {
         return (
             <QueryTreeLayout
+                ref={this.treeLayout}
                 loadData={this.loadTreeData}
                 defaultExpanded={true}
                 onSelect={(key) => this.onSelectTree(key)}
@@ -266,7 +275,7 @@ export default class index extends Component {
                     title={`新增${name}`}
                     action={apiAction.add}
                     ref={this.addForm}
-                    onSuccess={() => this.table.current.onReloadData()}
+                    onSuccess={() => this.onAction()}
                 >
                     <FormBody />
                 </ModalForm>
@@ -275,7 +284,7 @@ export default class index extends Component {
                     title={`编辑${name}`}
                     action={apiAction.edit}
                     ref={this.editForm}
-                    onSuccess={() => this.table.current.onReloadData()}
+                    onSuccess={() => this.onAction()}
                 >
                     <FormBody />
                 </ModalForm>

web-react/src/pages/system/user/form.jsx

@@ -109,7 +109,7 @@ export default class form extends Component {
         //#region 从后端转换成前段所需格式
         const orgData = await this.loadOrgData()
         const posData = await this.loadPosData()
-        const codes = await getDicData('org_type')
+        const codes = await getDictData('org_type')
 
         // 日期特殊处理
         if (this.record.birthday) {
@@ -278,101 +278,95 @@ export default class form extends Component {
                 <Spin
                     spinning={this.state.loading}
                     indicator={<AntIcon type="loading" />}>
-                    <Row gutter={16}>
+                    <h3 className="h3">基本信息</h3>
-                        <Col span={10}>
+                    <div className="yo-form-group">
-                            <h3 className="h3t">基本信息</h3>
+                        <Form.Item label="账号" name="account" rules={[{ required: true, message: '请输入账号', trigger: 'blur' }]}>
-                            <div className="yo-form-group">
+                            <Input autoComplete="off" placeholder="请输入账号" />
-                                <Form.Item label="账号" name="account" rules={[{ required: true, message: '请输入账号', trigger: 'blur' }]}>
+                        </Form.Item>
-                                    <Input autoComplete="off" placeholder="请输入账号" />
+                        <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名', trigger: 'blur' }]}>
-                                </Form.Item>
+                            <Input autoComplete="off" placeholder="请输入姓名" />
-                                <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名', trigger: 'blur' }]}>
+                        </Form.Item>
-                                    <Input autoComplete="off" placeholder="请输入姓名" />
+                        {this.props.mode == 'add' && <>
-                                </Form.Item>
+                            <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码', trigger: 'blur' }]}>
-                                {this.props.mode == 'add' && <>
+                                <Input.Password autoComplete="off" placeholder="请输入密码" />
-                                    <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码', trigger: 'blur' }]}>
+                            </Form.Item>
-                                        <Input.Password autoComplete="off" placeholder="请输入密码" />
+                            <Form.Item label="确认密码" name="confirm" rules={[{ required: true, message: '请确认密码', trigger: 'blur' }]}>
-                                    </Form.Item>
+                                <Input.Password autoComplete="off" placeholder="请确认密码" />
-                                    <Form.Item label="确认密码" name="confirm" rules={[{ required: true, message: '请确认密码', trigger: 'blur' }]}>
+                            </Form.Item>
-                                        <Input.Password autoComplete="off" placeholder="请确认密码" />
+                        </>
-                                    </Form.Item>
+                        }
-                                </>
+                        <Form.Item label="昵称" name="nickName" >
+                            <Input autoComplete="off" placeholder="请输入昵称" />
+                        </Form.Item>
+                        <Form.Item label="生日" name="birthday" >
+                            <DatePicker className="w-100-p" />
+                        </Form.Item>
+                        <Form.Item label="性别" name="sex" >
+                            <Radio.Group >
+                                <Radio.Button value={0}>
+                                    <AntIcon className="mr-xxs" type="stop" />
+                                    <span>保密</span>
+                                </Radio.Button>
+                                <Radio.Button value={1}>
+                                    <AntIcon style={{ color: '#1890ff' }} className="mr-xxs" type="man" />
+                                    <span>男</span>
+                                </Radio.Button>
+                                <Radio.Button value={2}>
+                                    <AntIcon style={{ color: '#eb2f96' }} className="mr-xxs" type="woman" />
+                                    <span>女</span>
+                                </Radio.Button>
+                            </Radio.Group>
+                        </Form.Item>
+                        <Form.Item label="邮箱" name="email" >
+                            <Input autoComplete="off" placeholder="请输入邮箱" />
+                        </Form.Item>
+                        <Form.Item label="手机号" name="phone" >
+                            <Input autoComplete="off" placeholder="请输入手机号" />
+                        </Form.Item>
+                        <Form.Item label="电话" name="tel" >
+                            <Input autoComplete="off" placeholder="请输入电话" />
+                        </Form.Item>
+                    </div>
+                    <h3 className="h3">员工信息</h3>
+                    <div className="yo-form-group">
+                        <Form.Item
+                            label="所属组织机构"
+                            name={['sysEmpParam', 'orgId']}
+                            rules={[{ required: true, message: '所属组织机构' }]}>
+                            <TreeSelect
+                                treeData={this.state.options.orgData}
+                                dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
+                                treeDefaultExpandAll
+                                placeholder="请选择所属组织机构"
+                            />
+                        </Form.Item>
+                        <Form.Item
+                            label="工号"
+                            name={['sysEmpParam', 'jobNum']} >
+                            <Input
+                                autoComplete="off"
+                                placeholder="请输入工号" />
+                        </Form.Item>
+                        <Form.Item label="职位信息" name={['sysEmpParam', 'posIdList']}>
+                            <Select
+                                mode="multiple"
+                                placeholder="请选择职位信息">
+                                {
+                                    this.state.options.posData.map(item => {
+                                        return <Select.Option
+                                            key={item.id}
+                                            value={item.id}
+                                        >
+                                            {item.name}</Select.Option>
+                                    })
                                 }
-                                <Form.Item label="昵称" name="nickName" >
+                            </Select>
-                                    <Input autoComplete="off" placeholder="请输入昵称" />
+                        </Form.Item>
-                                </Form.Item>
+                    </div>
-                                <Form.Item label="生日" name="birthday" >
+                    {/* <h4 className="h4">附加信息</h4>
-                                    <DatePicker className="w-100-p" />
-                                </Form.Item>
-                                <Form.Item label="性别" name="sex" >
-                                    <Radio.Group >
-                                        <Radio.Button value={0}>
-                                            <AntIcon className="mr-xxs" type="stop" />
-                                            <span>保密</span>
-                                        </Radio.Button>
-                                        <Radio.Button value={1}>
-                                            <AntIcon style={{ color: '#1890ff' }} className="mr-xxs" type="man" />
-                                            <span>男</span>
-                                        </Radio.Button>
-                                        <Radio.Button value={2}>
-                                            <AntIcon style={{ color: '#eb2f96' }} className="mr-xxs" type="woman" />
-                                            <span>女</span>
-                                        </Radio.Button>
-                                    </Radio.Group>
-                                </Form.Item>
-                                <Form.Item label="邮箱" name="email" >
-                                    <Input autoComplete="off" placeholder="请输入邮箱" />
-                                </Form.Item>
-                                <Form.Item label="手机号" name="phone" >
-                                    <Input autoComplete="off" placeholder="请输入手机号" />
-                                </Form.Item>
-                                <Form.Item label="电话" name="tel" >
-                                    <Input autoComplete="off" placeholder="请输入电话" />
-                                </Form.Item>
-                            </div>
-                        </Col>
-                        <Col span={14}>
-                            <h3 className="h3t">员工信息</h3>
-                            <div className="yo-form-group">
-                                <Form.Item
-                                    label="所属组织机构"
-                                    name={['sysEmpParam', 'orgId']}
-                                    rules={[{ required: true, message: '所属组织机构' }]}>
-                                    <TreeSelect
-                                        treeData={this.state.options.orgData}
-                                        dropdownStyle={{ maxHeight: '300px', overflow: 'auto' }}
-                                        treeDefaultExpandAll
-                                        placeholder="请选择所属组织机构"
-                                    />
-                                </Form.Item>
-                                <Form.Item
-                                    label="工号"
-                                    name={['sysEmpParam', 'jobNum']} >
-                                    <Input
-                                        autoComplete="off"
-                                        placeholder="请输入工号" />
-                                </Form.Item>
-                                <Form.Item label="职位信息" name={['sysEmpParam', 'posIdList']}>
-                                    <Select
-                                        mode="multiple"
-                                        placeholder="请选择职位信息">
-                                        {
-                                            this.state.options.posData.map(item => {
-                                                return <Select.Option
-                                                    key={item.id}
-                                                    value={item.id}
-                                                >
-                                                    {item.name}</Select.Option>
-                                            })
-                                        }
-                                    </Select>
-                                </Form.Item>
-                            </div>
-                            {/* <h4 className="h4">附加信息</h4>
                             <div className="pl-md pr-md">
                                 {this.renderExtInfoTable()}
                             </div> */}
-                        </Col>
-                    </Row>
                 </Spin>
             </Form>
         )

web-react/src/pages/system/user/index.jsx

@@ -301,7 +301,6 @@ export default class index extends Component {
                     action={apiAction.add}
                     ref={this.addForm}
                     onSuccess={() => this.list.current.onReloadData()}
-                    width={1100}
                 >
                     <FormBody mode="add" />
                 </ModalForm>
@@ -311,7 +310,6 @@ export default class index extends Component {
                     action={apiAction.edit}
                     ref={this.editForm}
                     onSuccess={() => this.list.current.onReloadData()}
-                    width={1100}
                 >
                     <FormBody mode="edit" />
                 </ModalForm>