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 18:07:33 +08:00
parent 5b57785b81
commit d3385102f2
12 changed files with 424 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
web-react/src/components/authority-view/index.jsx
View File

@@ -3,6 +3,94 @@ import { Checkbox, Descriptions, Empty, Spin, Tooltip } from 'antd'
import { AntIcon } from 'components'
import { EMPTY_ID } from 'util/global'
function generateList(data) {
data.forEach(item => {
if (item.children && item.children.length) {
generateList.call(this, item.children)
}
this.list.push(item)
})
}
function getVisible() {
const checked = this.list.filter(item => item.checked)
const caseChildren = checked.filter(item => item.visibleParent || item.type != 2)
const visibleParents = []
// 递归寻找父级
const findVisibleParents = (children) => {
const parents = []
children.forEach(item => {
if (item.parentId) {
const parent = this.list.find(item => item.id === item.parentId)
if (parent) {
parents.push(parent)
visibleParents.push(parent)
}
}
})
if (parents.length) {
findVisibleParents(parents)
}
}
findVisibleParents(caseChildren)
const checkedIds = checked.map(item => item.id)
const visibleParentsIds = visibleParents.map(item => item.id)
const result = checkedIds
visibleParentsIds.forEach(item => {
if (!result.includes(item)) {
result.push(item)
}
})
return result
}
function renderDescriptions(data) {
return data.map(item => {
return item.children && item.children.length ? renderItem.call(this, item) : renderCheckbox.call(this, item)
})
}
function renderItem(data) {
return (
<Descriptions bordered column={1}>
<Descriptions.Item
label={
<Checkbox
value={data.id}
checked={data.checked}
indeterminate={data.indeterminate}
onChange={(e) => this.onChange(e, data)}
>{data.title}</Checkbox>
}
>
{renderDescriptions.call(this, data.children)}
</Descriptions.Item>
</Descriptions>
)
}
function renderCheckbox(data) {
return (
<div className="yo-authority-view--checkbox">
<Checkbox
value={data.id}
checked={data.checked}
onChange={(e) => this.onChange(e, data)}
>{data.title}</Checkbox>
{
data.visibleParent && data.type == 2 &&
<Tooltip placement="top" title="选中此项才会显示菜单">
<AntIcon type="eye" style={{ color: '#1890ff' }} className="mr-xxs" />
</Tooltip>
}
</div>
)
}
export default class AuthorityView extends Component {
state = {
@@ -28,13 +116,13 @@ export default class AuthorityView extends Component {
}
}
async onLoadData() {
onLoadData = async () => {
this.setState({ loading: true })
const res = await this.loadData()
this.list = []
this.generateList(res)
generateList.call(this, res)
if (this.props.defaultSelectedKeys) {
this.list.map(item => {
@@ -50,14 +138,14 @@ export default class AuthorityView extends Component {
})
}
onReloadData() {
onReloadData = () => {
this.onLoadData()
}
onChange(e, item) {
onChange = (e, item) => {
this.onSelect(e.target.checked, item)
const visible = this.getVisible()
const visible = getVisible.call(this)
if (this.props.onSelect) {
this.props.onSelect(
@@ -71,7 +159,7 @@ export default class AuthorityView extends Component {
}
}
onSelect(check, item) {
onSelect = (check, item) => {
item.checked = check
item.indeterminate = false
if (item.children && item.children.length) {
@@ -86,7 +174,7 @@ export default class AuthorityView extends Component {
})
}
onChangeParent(checked, parentId) {
onChangeParent = (checked, parentId) => {
const parent = this.list.find(p => p.id === parentId)
if (parent) {
const checkedCount = parent.children.filter(p => p.checked).length
@@ -108,7 +196,7 @@ export default class AuthorityView extends Component {
}
}
onChangeChildren(checked, children) {
onChangeChildren = (checked, children) => {
children.forEach(p => {
p.checked = checked
p.indeterminate = false
@@ -118,101 +206,13 @@ export default class AuthorityView extends Component {
})
}
generateList(data) {
data.forEach(item => {
if (item.children && item.children.length) {
this.generateList(item.children)
}
this.list.push(item)
})
}
getVisible() {
const checked = this.list.filter(item => item.checked)
const caseChildren = checked.filter(item => item.visibleParent || item.type != 2)
const visibleParents = []
// 递归寻找父级
const findVisibleParents = (children) => {
const parents = []
children.forEach(item => {
if (item.parentId) {
const parent = this.list.find(item => item.id === item.parentId)
if (parent) {
parents.push(parent)
visibleParents.push(parent)
}
}
})
if (parents.length) {
findVisibleParents(parents)
}
}
findVisibleParents(caseChildren)
const checkedIds = checked.map(item => item.id)
const visibleParentsIds = visibleParents.map(item => item.id)
const result = checkedIds
visibleParentsIds.forEach(item => {
if (!result.includes(item)) {
result.push(item)
}
})
return result
}
renderDescriptions(data) {
return data.map(item => {
return item.children && item.children.length ? this.renderItem(item) : this.renderCheckbox(item)
})
}
renderItem(data) {
return (
<Descriptions bordered column={1}>
<Descriptions.Item
label={
<Checkbox
value={data.id}
checked={data.checked}
indeterminate={data.indeterminate}
onChange={(e) => this.onChange(e, data)}
>{data.title}</Checkbox>
}
>
{this.renderDescriptions(data.children)}
</Descriptions.Item>
</Descriptions>
)
}
renderCheckbox(data) {
return (
<div className="yo-authority-view--checkbox">
{
data.visibleParent && data.type == 2 &&
<Tooltip placement="top" title="选中此项才会显示父节点">
<AntIcon type="eye" style={{ color: '#1890ff' }} className="mr-xxs" />
</Tooltip>
}
<Checkbox
value={data.id}
checked={data.checked}
onChange={(e) => this.onChange(e, data)}
>{data.title}</Checkbox>
</div>
)
}
render() {
return (
<div className="yo-authority-view">
<Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
{
!this.state.loading ?
<Descriptions bordered column={1}>
<Descriptions bordered column={1} className="yo-authority-view--container">
{
this.state.dataSource.map(item => {
return (
@@ -226,7 +226,7 @@ export default class AuthorityView extends Component {
>{item.title}</Checkbox>
}
>
{this.renderDescriptions(item.children)}
{renderDescriptions.call(this, item.children)}
</Descriptions.Item>
)
})

6
web-react/src/components/icon-selector/index.jsx
View File

@@ -11,7 +11,7 @@ export default class IconSelector extends Component {
selected: ''
}
open(icon) {
open = (icon) => {
if (icon) {
const activeKey = (icons.find(p => p.icons.includes(icon)) || icons[0]).key
this.setState({
@@ -24,11 +24,11 @@ export default class IconSelector extends Component {
}
}
close() {
close = () => {
this.setState({ visible: false })
}
onSelectIcon(icon) {
onSelectIcon = (icon) => {
if (this.props.onSelect) {
this.props.onSelect(icon)
}

10
web-react/src/components/image/index.jsx
View File

@@ -11,14 +11,14 @@ const getSrc = async (id) => {
return ''
}
let id = ''
export default class Image extends Component {
state = {
src: ''
}
id = ''
constructor(props) {
super(props)
@@ -31,15 +31,15 @@ export default class Image extends Component {
}
componentDidUpdate() {
if (id !== this.props.id && this.props.id) {
if (this.id !== this.props.id && this.props.id) {
this.setSrc()
}
}
setSrc = async () => {
if (this.props.id) {
id = this.props.id
const src = await getSrc(id)
this.id = this.props.id
const src = await getSrc(this.id)
this.setState({ src })
}
}

102
web-react/src/components/modal-form/index.jsx
View File

@@ -2,6 +2,50 @@ import React, { Component } from 'react'
import { Button, Drawer, message as Message, Modal } from 'antd'
import { cloneDeep, isEqual } from 'lodash'
/**
* 渲染对话框
* @param {*} props
* @param {*} on
* @param {*} childWithProps
* @returns
*/
function renderModal(props, on, childWithProps) {
on = {
...on,
onCancel: () => this.onClose()
}
return <Modal className="yo-modal-form" {...props} {...on}>
{childWithProps}
</Modal>
}
/**
* 渲染抽屉
* @param {*} props
* @param {*} on
* @param {*} childWithProps
* @returns
*/
function renderDrawer(props, on, childWithProps) {
on = {
...on,
onClose: () => this.onClose()
}
return <Drawer className="yo-drawer-form" {...props} {...on}>
<div class="yo-drawer-form--body">
{childWithProps}
</div>
<div className="ant-drawer-footer">
<Button onClick={on.onClose}>取消</Button>
<Button loading={this.state.confirmLoading} onClick={on.onOk} type="primary">确定</Button>
</div>
</Drawer>
}
export default class ModalForm extends Component {
state = {
@@ -51,7 +95,7 @@ export default class ModalForm extends Component {
* 打开弹窗
* @param {*} data
*/
open(data = {}) {
open = (data = {}) => {
this.data = data
this.setState({ visible: true })
}
@@ -59,7 +103,7 @@ export default class ModalForm extends Component {
/**
* 关闭弹窗
*/
close() {
close = () => {
this.setState({ visible: false })
}
@@ -68,7 +112,7 @@ export default class ModalForm extends Component {
* 对子元素数据进行填充,(如需关闭时对比)之后再获取结构调整后的数据快照
* @returns
*/
async onCreated() {
onCreated = async () => {
const body = this.childNode.current
if (!body || !body.fillData) return
@@ -84,7 +128,7 @@ export default class ModalForm extends Component {
* (如需关闭时对比)获取当前数据结构与快照对比
* @returns
*/
async onClose() {
onClose = async () => {
const body = this.childNode.current
if (!body) {
this.close()
@@ -113,7 +157,7 @@ export default class ModalForm extends Component {
* 校验并获取结构调整后的数据,调用this.action进行操作
* @returns
*/
async onOk() {
onOk = async () => {
const body = this.childNode.current
if (!body || !this.action || !body.getData) return
@@ -137,50 +181,6 @@ export default class ModalForm extends Component {
}
}
/**
* 渲染对话框
* @param {*} props
* @param {*} on
* @param {*} childWithProps
* @returns
*/
renderModal(props, on, childWithProps) {
on = {
...on,
onCancel: () => this.onClose()
}
return <Modal className="yo-modal-form" {...props} {...on}>
{childWithProps}
</Modal>
}
/**
* 渲染抽屉
* @param {*} props
* @param {*} on
* @param {*} childWithProps
* @returns
*/
renderDrawer(props, on, childWithProps) {
on = {
...on,
onClose: () => this.onClose()
}
return <Drawer className="yo-drawer-form" {...props} {...on}>
<div class="yo-drawer-form--body">
{childWithProps}
</div>
<div className="ant-drawer-footer">
<Button onClick={on.onClose}>取消</Button>
<Button loading={this.state.confirmLoading} onClick={on.onOk} type="primary">确定</Button>
</div>
</Drawer>
}
render() {
const props = {
@@ -206,8 +206,8 @@ export default class ModalForm extends Component {
)
return this.type === 'modal' ?
this.renderModal(props, on, childWithProps)
renderModal.call(this, props, on, childWithProps)
:
this.renderDrawer(props, on, childWithProps)
renderDrawer.call(this, props, on, childWithProps)
}
}

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

@@ -2,6 +2,39 @@ import React, { Component } from 'react'
import { Button, Form, List, Pagination, Spin, Tooltip } from 'antd'
import { AntIcon } from 'components'
/**
* 渲染查询栏
* @returns
*/
function renderQueryBar() {
const { query, moreQuery } = this.props
return (
<div className="yo-query-bar">
<Form
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" icon={<AntIcon type="search" />}>查询</Button>
<Tooltip placement="bottom" title="重置查询">
<Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
</Tooltip>
</Button.Group>
{
moreQuery && <Button>更多查询条件</Button>
}
</Form.Item>
</Form>
</div>
)
}
export default class QueryList extends Component {
state = {
@@ -60,7 +93,7 @@ export default class QueryList extends Component {
* 加载数据
* 调用外部传入的loadData函数,可在loadData中自行改变参数
*/
async onLoadData() {
onLoadData = async () => {
this.onLoading()
const res = await this.props.loadData({
@@ -80,14 +113,14 @@ export default class QueryList extends Component {
/**
* 数据开始加载
*/
onLoading() {
onLoading = () => {
this.setState({ loading: true })
}
/**
* 数据加载完成
*/
onLoaded() {
onLoaded = () => {
this.setState({ loading: false })
}
@@ -96,7 +129,7 @@ export default class QueryList extends Component {
* 返回表单字段值,加载数据,并且返回到第一页
* @param {*} values
*/
onQuery(values) {
onQuery = (values) => {
this.query = values
this.onReloadData(true)
}
@@ -105,7 +138,7 @@ export default class QueryList extends Component {
* 重置查询
* 初始化表单字段值,加载数据,并返回到第一页
*/
onResetQuery() {
onResetQuery = () => {
this.form.current.resetFields()
this.query = {}
this.onReloadData(true)
@@ -115,7 +148,7 @@ export default class QueryList extends Component {
* 重新加载表格数据
* @param {Boolean} resetPage 是否重置页码
*/
onReloadData(resetPage = false) {
onReloadData = (resetPage = false) => {
if (resetPage) {
this.pagination = {
...this.pagination,
@@ -125,7 +158,7 @@ export default class QueryList extends Component {
this.onLoadData()
}
onListChange(current, pageSize) {
onListChange = (current, pageSize) => {
this.pagination = {
...this.pagination,
current,
@@ -134,39 +167,6 @@ export default class QueryList extends Component {
this.onLoadData()
}
/**
* 渲染查询栏
* @returns
*/
renderQueryBar() {
const { query, moreQuery } = this.props
return (
<div className="yo-query-bar">
<Form
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" icon={<AntIcon type="search" />}>查询</Button>
<Tooltip placement="bottom" title="重置查询">
<Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
</Tooltip>
</Button.Group>
{
moreQuery && <Button>更多查询条件</Button>
}
</Form.Item>
</Form>
</div>
)
}
render() {
const props = {
@@ -177,7 +177,7 @@ export default class QueryList extends Component {
return (
<section>
{this.props.query && this.renderQueryBar()}
{this.props.query && renderQueryBar.call(this)}
<div className="yo-action-bar">
<div className="yo-action-bar--actions">
{this.props.operator}

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

@@ -1,29 +1,29 @@
import React, { Component } from 'react'
import { Divider } from 'antd'
function renderActions() {
const { children } = this.props
const actions = []
Array.isArray(children) ? children
.filter(action => action)
.forEach((action, i) => {
actions.push(action)
if (i < this.props.children.length - 1) {
actions.push(<Divider type="vertical" key={i} />)
}
}) : (actions.push(children))
return actions
}
export default class QueryTableActions extends Component {
renderActions() {
const { children } = this.props
const actions = []
Array.isArray(children) ? children
.filter(action => action)
.forEach((action, i) => {
actions.push(action)
if (i < this.props.children.length - 1) {
actions.push(<Divider type="vertical" key={i} />)
}
}) : (actions.push(children))
return actions
}
render() {
return (
<div className="yo-table-actions">
<div className="yo-table-actions--inner">
{this.renderActions()}
{renderActions.call(this)}
</div>
</div>
)

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

@@ -15,6 +15,43 @@ const clearChildren = (data) => {
return data
}
/**
* 渲染查询栏
* @returns
*/
function renderQueryBar() {
const { query, moreQuery } = this.props
return (
<div className="yo-query-bar">
<Form
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" icon={<AntIcon type="search" />}>查询</Button>
<Tooltip placement="bottom" title="重置查询">
<Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
</Tooltip>
</Button.Group>
{
moreQuery && <Button>更多查询条件</Button>
}
</Form.Item>
</Form>
</div>
)
}
function renderTable(props, on) {
return <Table className="yo-table" {...props} {...on} />
}
export default class QueryTable extends Component {
state = {
@@ -84,7 +121,7 @@ export default class QueryTable extends Component {
* 加载数据
* 调用外部传入的loadData函数,可在loadData中自行改变参数
*/
async onLoadData() {
onLoadData = async () => {
this.onLoading()
const res = await this.loadData({
@@ -114,7 +151,7 @@ export default class QueryTable extends Component {
/**
* 数据开始加载
*/
onLoading() {
onLoading = () => {
this.setState({
loading: {
indicator: <AntIcon type="loading" />
@@ -125,7 +162,7 @@ export default class QueryTable extends Component {
/**
* 数据加载完成
*/
onLoaded() {
onLoaded = () => {
this.setState({ loading: false })
}
@@ -134,7 +171,7 @@ export default class QueryTable extends Component {
* 返回表单字段值,加载数据,并且返回到第一页
* @param {*} values
*/
onQuery(values) {
onQuery = (values) => {
this.query = values
this.onReloadData(true)
}
@@ -143,7 +180,7 @@ export default class QueryTable extends Component {
* 重置查询
* 初始化表单字段值,加载数据,并返回到第一页
*/
onResetQuery() {
onResetQuery = () => {
this.form.current.resetFields()
this.query = {
...this.props.queryInitialValues
@@ -155,7 +192,7 @@ export default class QueryTable extends Component {
* 重新加载表格数据
* @param {Boolean} resetPage 是否重置页码
*/
onReloadData(resetPage = false) {
onReloadData = (resetPage = false) => {
if (resetPage) {
this.pagination = {
...this.pagination,
@@ -171,7 +208,7 @@ export default class QueryTable extends Component {
* @param {*} filters
* @param {*} sorter
*/
onTableChange(pagination, filters, sorter) {
onTableChange = (pagination, filters, sorter) => {
this.pagination = {
...pagination,
showTotal: (total) => `总共${total}条数据`
@@ -183,7 +220,7 @@ export default class QueryTable extends Component {
this.onLoadData()
}
onAddRow(record = {}) {
onAddRow = (record = {}) => {
let { dataSource } = this.state
if (!dataSource.find(item => !item.id)) {
dataSource = [...dataSource, record]
@@ -195,43 +232,6 @@ export default class QueryTable extends Component {
return false
}
/**
* 渲染查询栏
* @returns
*/
renderQueryBar() {
const { query, moreQuery } = this.props
return (
<div className="yo-query-bar">
<Form
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" icon={<AntIcon type="search" />}>查询</Button>
<Tooltip placement="bottom" title="重置查询">
<Button onClick={() => this.onResetQuery()} icon={<AntIcon type="undo" />} />
</Tooltip>
</Button.Group>
{
moreQuery && <Button>更多查询条件</Button>
}
</Form.Item>
</Form>
</div>
)
}
renderTable(props, on) {
return <Table className="yo-table" {...props} {...on} />
}
render() {
const { loading, dataSource } = this.state
@@ -256,7 +256,7 @@ export default class QueryTable extends Component {
return (
<section>
{query && this.renderQueryBar()}
{query && renderQueryBar.call(this)}
<div className="yo-action-bar">
<div className="yo-action-bar--actions">
{operator}
@@ -272,10 +272,10 @@ export default class QueryTable extends Component {
{
this.props.editable ?
<Form ref={this.props.form}>
{this.renderTable(props, on)}
{renderTable.call(this, props, on)}
</Form>
:
this.renderTable(props, on)
renderTable.call(this, props, on)
}
</section>
)

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

@@ -2,6 +2,94 @@ import React, { Component } from 'react'
import { Breadcrumb, Empty, Input, Layout, Spin, Tooltip, Tree } from 'antd'
import { AntIcon, Container } from 'components'
function generateKey(data, level) {
const n = level || [0]
n.push(0)
data.forEach((p, i) => {
n[n.length - 1] = i
p.key = n.join('-')
p.scopedSlots = { title: 'title' }
if (p[this.replaceFields.children]) {
generateKey.call(this, p[this.replaceFields.children], Object.assign([], n))
}
})
return data
}
function generateList(data) {
// 这里获取不到Key
for (let i = 0; i < data.length; i++) {
const { key } = data[i]
this.list.push({
key,
[this.replaceFields.value]: data[i][this.replaceFields.value],
[this.replaceFields.title]: data[i][this.replaceFields.title]
})
if (data[i][this.replaceFields.children]) {
generateList.call(this, data[i][this.replaceFields.children])
}
}
}
function getParentKey(key, tree) {
let parentKey;
for (let i = 0; i < tree.length; i++) {
const node = tree[i]
if (node[this.replaceFields.children]) {
if (node[this.replaceFields.children].some(item => item.key === key)) {
parentKey = node.key
} else if (getParentKey.call(this, key, node[this.replaceFields.children])) {
parentKey = getParentKey.call(this, key, node[this.replaceFields.children])
}
}
}
return parentKey;
}
function renderTitle(nodeData) {
const title = nodeData[this.replaceFields.title]
if (this.state.searchValue && title.indexOf(this.state.searchValue) > -1) {
return <>
{title.substr(0, title.indexOf(this.state.searchValue))}
<span style={{ color: '#f50' }}>{this.state.searchValue}</span>
{title.substr(title.indexOf(this.state.searchValue) + this.state.searchValue.length)}
</>
}
return <>{title}</>
}
function renderBreadcrumbItem() {
const path = ['顶级']
const findPath = (data, level) => {
level = level || 1
for (let i = 0; i < data.length; i++) {
const item = data[i]
path[level] = item[this.replaceFields.title]
if (item[this.replaceFields.value] === this.state.selectedKey) {
path.length = level + 1
return true
}
if (item[this.replaceFields.children] && item[this.replaceFields.children].length) {
const found = findPath(item[this.replaceFields.children], level + 1)
if (found) {
return true
}
}
}
}
if (this.state.selectedKey) {
findPath(this.state.dataSource)
}
return path.map((p, i) => <Breadcrumb.Item key={i}>{p}</Breadcrumb.Item>)
}
export default class QueryTreeLayout extends Component {
state = {
@@ -49,13 +137,13 @@ export default class QueryTreeLayout extends Component {
* 加载数据
* 调用外部传入的loadData函数,可在loadData中自行改变参数
*/
async onLoadData() {
onLoadData = async () => {
this.onLoading()
const res = await this.props.loadData()
const data = this.generateKey(res)
const data = generateKey.call(this, res)
this.list = []
this.generateList(data)
generateList.call(this, data)
let expandedKeys = []
if (this.defaultExpanded) {
@@ -71,7 +159,7 @@ export default class QueryTreeLayout extends Component {
/**
* 数据开始加载
*/
onLoading() {
onLoading = () => {
this.setState({
loading: {
indicator: <AntIcon type="loading" />
@@ -82,22 +170,22 @@ export default class QueryTreeLayout extends Component {
/**
* 数据加载完成
*/
onLoaded() {
onLoaded = () => {
this.setState({ loading: false })
}
onReloadData() {
onReloadData = () => {
this.onLoadData()
}
onExpand(expandedKeys) {
onExpand = (expandedKeys) => {
this.setState({
expandedKeys,
autoExpandParent: false
})
}
onSelect(selectedKeys) {
onSelect = (selectedKeys) => {
const selectedIds = []
selectedKeys.forEach(p => {
const data = this.list.find(m => m.key === p)
@@ -111,11 +199,11 @@ export default class QueryTreeLayout extends Component {
}
}
onSearch(value) {
onSearch = (value) => {
const expandedKeys = this.list
.map(p => {
if (p[this.replaceFields.title].indexOf(value) > -1) {
return this.getParentKey(p.key, this.state.dataSource)
return getParentKey.call(this, p.key, this.state.dataSource)
}
return null
})
@@ -128,94 +216,6 @@ export default class QueryTreeLayout extends Component {
})
}
generateKey(data, level) {
const n = level || [0]
n.push(0)
data.forEach((p, i) => {
n[n.length - 1] = i
p.key = n.join('-')
p.scopedSlots = { title: 'title' }
if (p[this.replaceFields.children]) {
this.generateKey(p[this.replaceFields.children], Object.assign([], n))
}
})
return data
}
generateList(data) {
// 这里获取不到Key
for (let i = 0; i < data.length; i++) {
const { key } = data[i]
this.list.push({
key,
[this.replaceFields.value]: data[i][this.replaceFields.value],
[this.replaceFields.title]: data[i][this.replaceFields.title]
})
if (data[i][this.replaceFields.children]) {
this.generateList(data[i][this.replaceFields.children])
}
}
}
getParentKey(key, tree) {
let parentKey;
for (let i = 0; i < tree.length; i++) {
const node = tree[i]
if (node[this.replaceFields.children]) {
if (node[this.replaceFields.children].some(item => item.key === key)) {
parentKey = node.key
} else if (this.getParentKey(key, node[this.replaceFields.children])) {
parentKey = this.getParentKey(key, node[this.replaceFields.children])
}
}
}
return parentKey;
}
titleRender(nodeData) {
const title = nodeData[this.replaceFields.title]
if (this.state.searchValue && title.indexOf(this.state.searchValue) > -1) {
return <>
{title.substr(0, title.indexOf(this.state.searchValue))}
<span style={{ color: '#f50' }}>{this.state.searchValue}</span>
{title.substr(title.indexOf(this.state.searchValue) + this.state.searchValue.length)}
</>
}
return <>{title}</>
}
renderBreadcrumbItem() {
const path = ['顶级']
const findPath = (data, level) => {
level = level || 1
for (let i = 0; i < data.length; i++) {
const item = data[i]
path[level] = item[this.replaceFields.title]
if (item[this.replaceFields.value] === this.state.selectedKey) {
path.length = level + 1
return true
}
if (item[this.replaceFields.children] && item[this.replaceFields.children].length) {
const found = findPath(item[this.replaceFields.children], level + 1)
if (found) {
return true
}
}
}
}
if (this.state.selectedKey) {
findPath(this.state.dataSource)
}
return path.map((p, i) => <Breadcrumb.Item key={i}>{p}</Breadcrumb.Item>)
}
render() {
const { dataSource, expandedKeys, autoExpandParent } = this.state
@@ -268,7 +268,7 @@ export default class QueryTreeLayout extends Component {
<Tree
{...props}
{...on}
titleRender={(nodeData) => this.titleRender(nodeData)}
titleRender={(nodeData) => renderTitle.call(this, nodeData)}
/>
}
</Spin>
@@ -277,7 +277,7 @@ export default class QueryTreeLayout extends Component {
<Layout.Content>
<Container mode="fluid">
<Breadcrumb className="mt-md mb-md">
{this.renderBreadcrumbItem()}
{renderBreadcrumbItem.call(this)}
</Breadcrumb>
</Container>
{this.props.children}