482 lines
14 KiB
JavaScript
482 lines
14 KiB
JavaScript
// 核心库
|
||
import React from 'react'
|
||
// 组件库
|
||
import { message, Button, Icon, Popconfirm, Empty } from 'antd'
|
||
import { Search, OrganizationTree } from '@woowalker/feui'
|
||
import ComponentBase from "../ComponentBase"
|
||
import Node from "./node"
|
||
import VPage from './VPage'
|
||
import EditModal from '../../components/Edit/EditModal'
|
||
import CombinationModal from '../../components/Combination/CombinationModal'
|
||
import TableModal from '../../components/Table/TableModal'
|
||
import FormModal from '../../components/FormModal'
|
||
import DataLoading from '../../components/common/DataLoading'
|
||
// 工具库
|
||
import { cloneDeep } from 'lodash'
|
||
import { addRuleAndGroups, extendRule, extendGroupRule, initFilter } from "../../utils/common"
|
||
// 样式
|
||
import styles from '../Component.css'
|
||
let formParam = ''
|
||
class TreeBaseComponent extends ComponentBase {
|
||
constructor (props) {
|
||
super(props)
|
||
this.state = {
|
||
data: {},
|
||
treeConfig: {},
|
||
treeLoadParam: {},
|
||
showAdd: false,
|
||
showModal: false
|
||
}
|
||
this.defaultTreeCode = 'tree'
|
||
};
|
||
componentDidMount () {
|
||
super.componentDidMount()
|
||
this.onLoadData()
|
||
}
|
||
|
||
componentWillReceiveProps (NextProps) {
|
||
super.componentWillReceiveProps(NextProps)
|
||
}
|
||
|
||
onLoadTreeData ({ treeCode, searchValue, onComplete }) {
|
||
const treeConfig = this.getTreeConfig({ treeCode })
|
||
if (treeConfig) {
|
||
const { sort, order, relationField, relationId, api, orgType, ignoreOrgRule } = treeConfig
|
||
|
||
if (!api) return
|
||
const treeLoadParam = this.state.treeLoadParam
|
||
let loadParam = treeLoadParam[treeCode]
|
||
|
||
if (!loadParam) {
|
||
loadParam = initFilter(this.props.login.OrgId, '', sort, order)
|
||
treeLoadParam[treeCode] = loadParam
|
||
}
|
||
loadParam['Level'] = -1
|
||
const rules = this.props && this.props.data && this.props.data.rules ? this.props.data.rules : []
|
||
const json = cloneDeep(loadParam)
|
||
|
||
formParam = this.props.formParam
|
||
if (formParam) {
|
||
for (var val in formParam) {
|
||
json[val] = formParam[val]
|
||
}
|
||
}
|
||
|
||
if (rules) {
|
||
rules.forEach(item => {
|
||
extendRule(json, item.field, item.operator, item.value, item.isSysParam)
|
||
})
|
||
}
|
||
if (orgType) {
|
||
json.OrgType = orgType
|
||
}
|
||
if (searchValue) {
|
||
addRuleAndGroups(json, searchValue)
|
||
}
|
||
|
||
//填加关联字段过滤
|
||
if (relationField && relationId) {
|
||
extendRule(json, relationField, 1, relationId)
|
||
}
|
||
|
||
// 是否忽略组织权限
|
||
if (ignoreOrgRule) {
|
||
json.IgnoreOrgRule = ignoreOrgRule
|
||
}
|
||
|
||
//配置的自定义查询条件
|
||
if (this.props.data?.Filter) {
|
||
json[this.props.data.Filter] = this.props.data.ID
|
||
}
|
||
|
||
// 配置的自定义过滤参数
|
||
if (this.props.data?.customParams) {
|
||
extendGroupRule(json.FilterGroup, this.props.data.customParams, 1, this.props.data.ID)
|
||
}
|
||
|
||
this.props.dispatch({
|
||
type: 'app/getTableData',
|
||
payload: json,
|
||
url: api,
|
||
onComplete: (ret) => {
|
||
if (ret) {
|
||
if (!ret.IsSuccessful) {
|
||
message.error(ret.ErrorMessage)
|
||
return
|
||
}
|
||
const datas = JSON.stringify(ret.Data)
|
||
this.setTreeData({
|
||
treeCode,
|
||
data: JSON.parse(datas.toLowerCase()),
|
||
onComplete,
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
|
||
/*
|
||
获取树配置
|
||
*/
|
||
getTreeConfig (params) {
|
||
const { treeCode = this.defaultTreeCode } = params ? params : {}
|
||
let treeConfig = this.state.treeConfig
|
||
if (!treeConfig) {
|
||
treeConfig = {}
|
||
}
|
||
return treeConfig[treeCode]
|
||
}
|
||
|
||
/*
|
||
设置树配置
|
||
*/
|
||
setTreeConfig (params) {
|
||
const { treeConfig, onComplete } = params ? params : {}
|
||
let tempTreeConfig = this.state.treeConfig
|
||
if (!tempTreeConfig) {
|
||
tempTreeConfig = {}
|
||
}
|
||
if (treeConfig.treeCode === undefined) {
|
||
treeConfig.treeCode = this.defaultTreeCode
|
||
}
|
||
tempTreeConfig = {
|
||
...tempTreeConfig,
|
||
[treeConfig.treeCode]: treeConfig,
|
||
}
|
||
this.setState({
|
||
treeConfig: tempTreeConfig
|
||
}, () => {
|
||
if (typeof onComplete === 'function') {
|
||
onComplete()
|
||
}
|
||
})
|
||
}
|
||
|
||
/*
|
||
获取树数据
|
||
*/
|
||
getTreeData (params) {
|
||
const { treeCode = this.defaultTreeCode } = params ? params : {}
|
||
let data = this.state.treeData
|
||
if (!data) {
|
||
data = {}
|
||
}
|
||
return data[treeCode]
|
||
}
|
||
|
||
/*
|
||
设置树数据
|
||
*/
|
||
setTreeData ({ treeCode, data, onComplete }) {
|
||
let tempData = this.state.treeData
|
||
if (!tempData) {
|
||
tempData = {}
|
||
}
|
||
if (treeCode === undefined) {
|
||
treeCode = this.defaultTreeCode
|
||
}
|
||
tempData = {
|
||
...tempData,
|
||
[treeCode]: data,
|
||
}
|
||
this.setState({
|
||
treeData: tempData,
|
||
}, () => {
|
||
if (typeof onComplete === 'function') {
|
||
onComplete()
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 节点包含MENU_LEVEL：第几级（没有默认第一个颜色），ICON：下方图标（没有默认不显示）
|
||
*/
|
||
MyNode = (data) => {
|
||
const treeCode = this.defaultTreeCode
|
||
const treeConfig = this.getTreeConfig({ treeCode })
|
||
return (
|
||
<Node
|
||
key={`${data.node.id}--customNode`}
|
||
treeCode={treeCode}
|
||
treeConfig={treeConfig}
|
||
treePicFilter={this.state.picFilter}
|
||
nodeData={data}
|
||
{...this.props}
|
||
showModal={this.state.showModal}
|
||
getRenderBtn={this.getRenderBtn} />
|
||
)
|
||
};
|
||
|
||
click = visible => {
|
||
this.setState({ showModal: visible })
|
||
}
|
||
|
||
getRenderBtn = (params = {}) => {
|
||
const { record, btnConfig = {} } = params
|
||
// 编辑 新增 查看 复制新增 新增同级
|
||
if (
|
||
btnConfig.btnType === 5
|
||
|| btnConfig.btnType === 3
|
||
|| btnConfig.btnType === 8
|
||
|| btnConfig.btnType === 10
|
||
|| (btnConfig.btnType === -1 && record.parent_id)
|
||
) {
|
||
const isShow = btnConfig.btnType === 8
|
||
|
||
const isBatchEdit = false
|
||
const extKey = record ? (record.id + btnConfig.id) : btnConfig.id
|
||
const reloadKey = this.props.formCode + '_' + extKey + '_reload'
|
||
const data = {
|
||
isShow: isShow,
|
||
record: record || {},
|
||
isBatchEdit,
|
||
reloadKey,
|
||
|
||
}
|
||
if (this.props.data?.Filter) {
|
||
data.record[this.props.data.Filter] = this.props.data.ID
|
||
}
|
||
const extraSaveData = {}
|
||
if (this.props.data?.customParams) {
|
||
extraSaveData[this.props.data.customParams] = this.props.data.ID
|
||
}
|
||
const id = btnConfig.btnType !== 10 && record ? (btnConfig.btnType === -1 ? record.parent_id : record.id) : ''
|
||
const copySrcId = btnConfig.btnType === 10 && record ? record.id : ''
|
||
return (
|
||
<EditModal
|
||
key={record ? (record.id + btnConfig.id) : btnConfig.id}
|
||
formCode={this.props.formCode}
|
||
id={id}
|
||
copySrcId={copySrcId}
|
||
data={data}
|
||
extraSaveData={extraSaveData}
|
||
title={btnConfig.label}
|
||
formParam={formParam}
|
||
parentId={btnConfig.btnType === -1 ? record.parent_id : record.id}
|
||
isAddH={btnConfig.btnType === 3 || btnConfig.btnType === -1}
|
||
onSave={saveData => {
|
||
this.updateTreeDataBySave(saveData)
|
||
}}
|
||
click={this.click}>
|
||
<Icon type={btnConfig.icon} title={btnConfig.label} />
|
||
</EditModal>
|
||
)
|
||
}
|
||
// 节点删除
|
||
else if (btnConfig.btnType === 4) {
|
||
return (
|
||
<Popconfirm
|
||
title="是否确定删除？"
|
||
onConfirm={this.deleteTreeNode.bind(this, params)}
|
||
onVisibleChange={visible => this.setState({ showModal: visible })}
|
||
icon={<Icon type="exclamation-circle" style={{ color: '#faad14' }} />}
|
||
>
|
||
<Icon type={btnConfig.icon} title={btnConfig.label} />
|
||
</Popconfirm>
|
||
)
|
||
}
|
||
// 列表查看
|
||
else if (btnConfig.btnType === 12) {
|
||
return (
|
||
<TableModal
|
||
key={record ? (record.id + btnConfig.id) : btnConfig.id}
|
||
formCode={btnConfig.formCode}
|
||
id={record.id}
|
||
customParams={btnConfig.customParams}
|
||
formParam={formParam}
|
||
data={record}
|
||
title={btnConfig.label}
|
||
parentId={btnConfig.btnType === -1 ? record.parent_id : record.id}
|
||
click={this.click}>
|
||
<Icon type={btnConfig.icon} title={btnConfig.label} />
|
||
</TableModal>
|
||
)
|
||
}
|
||
// 组合表单
|
||
else if (btnConfig.btnType === 14) {
|
||
return (
|
||
<CombinationModal
|
||
key={record ? (record.id + btnConfig.id) : btnConfig.id}
|
||
formCode={btnConfig.formCode}
|
||
id={record.id}
|
||
customParams={btnConfig.customParams}
|
||
formParam={formParam}
|
||
data={record}
|
||
title={btnConfig.label}
|
||
parentId={btnConfig.btnType === -1 ? record.parent_id : record.id}
|
||
click={this.click}>
|
||
<Icon type={btnConfig.icon} title={btnConfig.label} />
|
||
</CombinationModal>
|
||
)
|
||
}
|
||
// 自定义弹窗
|
||
else if (btnConfig.btnType === 0) {
|
||
return (
|
||
<FormModal
|
||
key={record ? (record.id + btnConfig.id) : btnConfig.id}
|
||
formCode={btnConfig.formCode}
|
||
id={record.id}
|
||
customParams={btnConfig.customParams}
|
||
formParam={formParam}
|
||
data={record}
|
||
title={btnConfig.label}
|
||
parentId={btnConfig.btnType === -1 ? record.parent_id : record.id}
|
||
click={this.click}>
|
||
<Icon type={btnConfig.icon} title={btnConfig.label} />
|
||
</FormModal>
|
||
)
|
||
}
|
||
// 无树数据时，新增顶级节点
|
||
else {
|
||
const data = {}
|
||
if (this.props.data?.Filter) {
|
||
data.record = {
|
||
[this.props.data.Filter]: this.props.data.ID
|
||
}
|
||
}
|
||
const extraSaveData = {}
|
||
if (this.props.data?.customParams) {
|
||
extraSaveData[this.props.data.customParams] = this.props.data.ID
|
||
}
|
||
return (
|
||
<EditModal
|
||
formCode={this.props.formCode}
|
||
title='新增'
|
||
isAddH={true}
|
||
data={data}
|
||
onSave={saveData => {
|
||
this.updateTreeDataBySave(saveData)
|
||
}}
|
||
extraSaveData={extraSaveData}
|
||
click={this.click}>
|
||
{
|
||
btnConfig.btnType === -1
|
||
? <Icon type={btnConfig.icon} title={btnConfig.label} />
|
||
: <Button type="primary" icon="plus">添加</Button>
|
||
}
|
||
</EditModal>
|
||
)
|
||
}
|
||
}
|
||
|
||
deleteTreeNode = (params) => {
|
||
const { treeCode = this.defaultTreeCode, record } = params
|
||
const treeConfig = this.getTreeConfig({ treeCode })
|
||
if (treeConfig) {
|
||
const { deleteApi } = treeConfig
|
||
if (deleteApi) {
|
||
this.props.dispatch({
|
||
type: 'app/deleteItemBatch',
|
||
payload: {
|
||
ids: record.id
|
||
},
|
||
url: deleteApi,
|
||
onComplete: (ret) => {
|
||
if (ret) {
|
||
message.success('删除成功')
|
||
this.updateTreeDataBySave()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
updateTreeDataBySave = () => {
|
||
this.onLoadTreeData({ treeCode: this.defaultTreeCode })
|
||
}
|
||
|
||
/*
|
||
根据树编号渲染树
|
||
*/
|
||
getRenderTreeByConfig (treeCode) {
|
||
if (treeCode === undefined) {
|
||
treeCode = this.defaultTreeCode
|
||
}
|
||
const treeConfig = this.getTreeConfig({ treeCode })
|
||
if (treeConfig) {
|
||
const treeData = this.getTreeData({ treeCode })
|
||
const { formCode, queryCode } = treeConfig
|
||
if (treeConfig.showModel == 1) {
|
||
return (
|
||
<>
|
||
<Search
|
||
formCode={formCode}
|
||
formParam={this.props.formParam}
|
||
code={queryCode}
|
||
onSearch={(value) => this.onLoadTreeData({ treeCode, searchValue: value })}
|
||
/>
|
||
{
|
||
treeData && treeData.length
|
||
? (
|
||
<VPage
|
||
treeData={treeData}
|
||
treeConfig={treeConfig}
|
||
formParam={formParam}
|
||
treePicFilter={this.state.picFilter}
|
||
getRenderBtn={this.getRenderBtn}
|
||
onSave={this.updateTreeDataBySave}
|
||
/>
|
||
)
|
||
: null
|
||
}
|
||
{
|
||
treeData && treeData.length === 0 && treeConfig.canAddNode
|
||
? <div className={styles.treeVBox}>{this.getRenderBtn()}</div>
|
||
: (
|
||
treeData && treeData.length === 0
|
||
? <div className={styles.treeVBox}><Empty style={{ position: 'relative', top: '50%', transform: 'translateY(-50%)' }} /></div>
|
||
: (!treeData ? <div className={styles.treeVBox}><DataLoading /></div> : null)
|
||
)
|
||
}
|
||
</>
|
||
)
|
||
}
|
||
return (
|
||
<>
|
||
<Search
|
||
formCode={formCode}
|
||
formParam={this.props.formParam}
|
||
code={queryCode}
|
||
onSearch={(value) => this.onLoadTreeData({ treeCode, searchValue: value })}
|
||
/>
|
||
<div className={styles.treeHBox}>
|
||
{
|
||
(treeData || []).map(item => {
|
||
return (
|
||
<OrganizationTree
|
||
key={`${item.node.id}--rootTree`}
|
||
data={item}
|
||
node={{
|
||
id: 'node.id',
|
||
label: 'node.name',
|
||
expand: 'expand',
|
||
children: 'children'
|
||
}}
|
||
expandLevel={treeConfig.expandLevel}
|
||
renderContent={this.MyNode}
|
||
/>
|
||
)
|
||
})
|
||
}
|
||
{
|
||
treeData && treeData.length === 0 && treeConfig.canAddNode
|
||
? this.getRenderBtn()
|
||
: (
|
||
treeData && treeData.length === 0
|
||
? <Empty style={{ position: 'relative', top: '50%', transform: 'translateY(-50%)' }} />
|
||
: (!treeData ? <DataLoading /> : null)
|
||
)
|
||
}
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
return <div />
|
||
}
|
||
}
|
||
|
||
export default TreeBaseComponent
|