ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 调整大量细节

Browse Source
This commit is contained in:
自带大佬气场
2021-06-17 17:14:38 +08:00
parent aed7a07e51
commit 5b57785b81
13 changed files with 211 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web-react/src/assets/style/lib/form.less
View File

@@ -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;
padding: 0 @padding-md;
margin: 0;
padding: @padding-sm @padding-md @padding-xs;
}
.yo-form-group {
margin-bottom: 0;

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

@@ -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;

8
web-react/src/assets/style/lib/list.less
View File

@@ -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);
}
}
}

32
web-react/src/assets/style/lib/table.less
View File

@@ -23,8 +23,26 @@
}
}
.ant-table {
background-color: @white;
.ant-table-thead {
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 {
float: none;
.ant-table-bordered {
>.ant-table-container {
border-top: @border-width-base @border-style-base @table-border-color;
}
}
}

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

@@ -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%);
}
}

1
web-react/src/assets/style/theme/primary.less
View File

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

13
web-react/src/components/query-list/index.jsx
View File

@@ -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 onClick={() => this.onResetQuery()}>重置</Button>
<Button htmlType="submit" type="primary" icon={<AntIcon type="search" />}>查询</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>

3
web-react/src/components/query-table/index.jsx
View File

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

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

@@ -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}

13
web-react/src/index.js
View File

@@ -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')

17
web-react/src/pages/system/org/index.jsx
View File

@@ -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
Message.success(successMessage)
if (action) {
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>

178
web-react/src/pages/system/user/form.jsx
View File

@@ -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}>
<Col span={10}>
<h3 className="h3t">基本信息</h3>
<div className="yo-form-group">
<Form.Item label="账号" name="account" rules={[{ required: true, message: '请输入账号', trigger: 'blur' }]}>
<Input autoComplete="off" placeholder="请输入账号" />
</Form.Item>
<Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名', trigger: 'blur' }]}>
<Input autoComplete="off" placeholder="请输入姓名" />
</Form.Item>
{this.props.mode == 'add' && <>
<Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码', trigger: 'blur' }]}>
<Input.Password autoComplete="off" placeholder="请输入密码" />
</Form.Item>
<Form.Item label="确认密码" name="confirm" rules={[{ required: true, message: '请确认密码', trigger: 'blur' }]}>
<Input.Password autoComplete="off" placeholder="请确认密码" />
</Form.Item>
</>
<h3 className="h3">基本信息</h3>
<div className="yo-form-group">
<Form.Item label="账号" name="account" rules={[{ required: true, message: '请输入账号', trigger: 'blur' }]}>
<Input autoComplete="off" placeholder="请输入账号" />
</Form.Item>
<Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名', trigger: 'blur' }]}>
<Input autoComplete="off" placeholder="请输入姓名" />
</Form.Item>
{this.props.mode == 'add' && <>
<Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码', trigger: 'blur' }]}>
<Input.Password autoComplete="off" placeholder="请输入密码" />
</Form.Item>
<Form.Item label="确认密码" name="confirm" rules={[{ required: true, message: '请确认密码', trigger: 'blur' }]}>
<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" >
<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>
</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>
</Select>
</Form.Item>
</div>
{/* <h4 className="h4">附加信息</h4>
<div className="pl-md pr-md">
{this.renderExtInfoTable()}
</div> */}
</Col>
</Row>
</Spin>
</Form>
)

2
web-react/src/pages/system/user/index.jsx
View File

@@ -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>