Skip to content
项目
群组
代码片段
帮助
正在加载...
帮助
提交反馈
为 GitLab 提交贡献
登录
切换导航
iBiz-Vue-Mob-R7
项目
项目
详情
动态
版本
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
计划
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
统计图
创建新议题
作业
提交
议题看板
打开侧边栏
iBiz-R7前端标准模板
iBiz-Vue-Mob-R7
提交
3a291501
提交
3a291501
编写于
8月 05, 2020
作者:
KK
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
树视图部件逻辑
上级
e711a379
变更
1
隐藏空白字符变更
内嵌
并排
正在显示
1 个修改的文件
包含
576 行增加
和
114 行删除
+576
-114
CONTROL-BASE.vue.ftl
@CONTROL/树视图/CONTROL-BASE.vue.ftl
+576
-114
未找到文件。
@CONTROL/树视图/CONTROL-BASE.vue.ftl
浏览文件 @
3a291501
...
...
@@ -9,203 +9,665 @@
* 获取多项数据
*
* @returns {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')}
* @memberof ${srfclassname('${ctrl.codeName}')}
Base
*/
public getDatas(): any[] {
return [
];
return [this.currentselectedNode
];
}
/**
* 获取单项树
*
* @returns {*}
* @memberof ${srfclassname('${ctrl.codeName}')}
* @memberof ${srfclassname('${ctrl.codeName}')}
Base
*/
public getData(): any {
return {}
;
return this.currentselectedNode
;
}
/**
*
数据选择视图选中项
*
是否单选
*
* @type {
any
}
* @memberof ${srfclassname('${ctrl.codeName}')}
* @type {
boolean
}
* @memberof ${srfclassname('${ctrl.codeName}')}
Base
*/
@Prop(
) public selectedData?: any
;
@Prop(
{ default: true }) public isSingleSelect!: boolean
;
/**
*
跳转变量
*
是否默认选中第一条数据
*
* @type
number
* @memberof ${srfclassname('${ctrl.codeName}')}
* @type
{boolean}
* @memberof ${srfclassname('${ctrl.codeName}')}
Base
*/
public active: number = 0
;
@Prop({ default: false }) public isSelectFirstDefault!: boolean
;
/**
*
节点数组
*
枝干节点是否可用(具有数据能力,可抛出)
*
* @type Array<any>
* @memberof ${srfclassname('${ctrl.codeName}')}
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
@Prop({default:true}) public isBranchAvailable!: boolean;
/**
* 显示处理提示
*
* @type {boolean}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
@Prop({ default: true }) public showBusyIndicator?: boolean;
/**
* 初始化完成
*
* @type {boolean}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public
nodeArray: Array<any> = []
;
public
inited: boolean = false
;
/**
*
选中数组
*
已选中数据集合
*
* @type
Array<any>
* @memberof ${srfclassname('${ctrl.codeName}')}
* @type
{*}
* @memberof ${srfclassname('${ctrl.codeName}')}
Base
*/
public
checkedList: Array<any>
= [];
public
selectedNodes: any
= [];
/**
*
选中数据
*
当前选中数据项
*
* @type
Array<any>
* @memberof ${srfclassname('${ctrl.codeName}')}
* @type
{*}
* @memberof ${srfclassname('${ctrl.codeName}')}
Base
*/
public c
heckedData: Array<any> = []
;
public c
urrentselectedNode: any = {}
;
/**
*
是否可以选择
*
选中数据字符串
*
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}
* @memberof ${srfclassname('${ctrl.codeName}')}
Base
*/
@Prop(
{ default: false }) public isOptional?: boolean
;
@Prop(
) public selectedData?: string
;
/**
*
节点导航视图映射
*
选中值变化
*
* @type any
* @memberof ${srfclassname('${ctrl.codeName}')}
* @param {*} newVal
* @param {*} oldVal
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
protected nodeView: any = {
<#list ctrl.getPSDETreeNodes() as node>
<#if node.getNavPSAppView?? && node.getNavPSAppView()??>
'${node.getNodeType()}':{hasView: true, viewName: 'view-${node.getNavPSAppView().getName()?lower_case}'},
<#else>
'${node.getNodeType()}':{hasView: false},
</#if>
</#list>
};
@Watch('selectedData')
public onValueChange(newVal: any, oldVal: any) {
this.echoselectedNodes = newVal ? this.isSingleSelect ? JSON.parse(newVal)[0] : JSON.parse(newVal) : [];
this.selectedNodes = [];
if(this.echoselectedNodes.length > 0){
let AllnodesObj = (this.$refs.treeexpbar_tree as any).store.nodesMap;
let AllnodesArray : any[] = [];
for (const key in AllnodesObj) {
if (AllnodesObj.hasOwnProperty(key)) {
AllnodesArray.push(AllnodesObj[key].data);
}
}
this.setDefaultSelection(AllnodesArray);
}
}
/**
* 回显选中数据集合
*
* @type {*}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public echoselectedNodes:any[] = this.selectedData ? ( this.isSingleSelect ? [JSON.parse(this.selectedData)[0]] : JSON.parse(this.selectedData)) : [];
/**
* 部件行为--update
*
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
@Prop() public updateAction!: string;
/**
* 部件行为--fetch
*
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
@Prop() public fetchAction!: string;
/**
* 部件行为--remove
*
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
@Prop() public removeAction!: string;
/**
*
初始化方法
*
部件行为--load
*
* @memberof ${srfclassname('${ctrl.codeName}')}
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
protected created() {
this.afterCreated();
@Prop() public loadAction!: string;
/**
* 部件行为--create
*
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
@Prop() public createAction!: string;
/**
* 过滤属性
*
* @type {string}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public srfnodefilter: string = '';
/**
* 默认输出图标
*
* @type {boolean}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public isOutputIconDefault: boolean = ${ctrl.isOutputIconDefault()?c};
<#-- /**
* 树数据
*
* @type {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
@Provide()
public nodes: any[] = []; -->
/**
* 数据展开主键
*
* @type {string[]}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
@Provide()
public expandedKeys: string[] = [];
/**
* 应用状态事件
*
* @public
* @type {(Subscription | undefined)}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public appStateEvent: Subscription | undefined;
/**
* 选中数据变更事件
*
* @public
* @param {*} data
* @param {*} data 当前节点对应传入对象
* @param {*} checkedState 树目前选中状态对象
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public onCheck(data: any, checkedState: any) {
// 处理多选数据
if(!this.isSingleSelect){
let leafNodes = checkedState.checkedNodes.filter((item:any) => item.leaf);
this.selectedNodes = JSON.parse(JSON.stringify(leafNodes));
this.$emit('selectionchange', this.selectedNodes);
}
}
/**
*
执行created后的逻辑
*
选中数据变更事件
*
* @memberof ${srfclassname('${ctrl.codeName}')}
* @public
* @param {*} data 节点对应传入对象
* @param {*} node 节点对应node对象
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
p
rotected afterCreated(
) {
if (this.viewState) {
this.viewState.subscribe(({ tag, action, data }) =>
{
if (!Object.is(tag, this.name)) {
p
ublic selectionChange(data: any, node: any
) {
// 禁用项处理
if (data.disabled)
{
node.isCurrent = false;
return;
}
if (Object.is(action, "load")) {
this.load(data);
}
if (Object.is(action, "save")) {
this.$emit("change", this.checkedData);
}
}
// 只处理最底层子节点
if(this.isBranchAvailable || data.leaf){
this.currentselectedNode = JSON.parse(JSON.stringify(data));
// 单选直接替换
if(this.isSingleSelect){
this.selectedNodes = [this.currentselectedNode];
this.$emit('selectionchange', this.selectedNodes);
}
// 多选用check方法
}
}
/**
* Vue声明周期(处理组件的输入属性)
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public created() {
this.afterCreated();
}
/**
* 执行created后的逻辑
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public afterCreated(){
if (this.viewState) {
this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
if (!Object.is(tag, this.name)) {
return;
}
if (Object.is('load', action)) {
this.inited = false;
this.$nextTick(() => {
this.inited = true;
});
}
if (Object.is('filter', action)) {
this.srfnodefilter = data.srfnodefilter;
this.refresh_all();
}
if (Object.is('refresh_parent', action)) {
this.refresh_parent();
}
});
}
if(AppCenterService && AppCenterService.getMessageCenter()){
this.appStateEvent = AppCenterService.getMessageCenter().subscribe(({ name, action, data }) =>{
if(!Object.is(name,"${ctrl.getPSAppDataEntity().getCodeName()}")){
return;
}
if(Object.is(action,'appRefresh')){
this.refresh([data]);
}
})
}
}
/**
* 对树节点进行筛选操作
* @memberof OrderTree
*/
public filterNode(value:any, data:any) {
if (!value) return true;
return data.text.indexOf(value) !== -1;
}
/**
* vue 生命周期
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public destroyed() {
this.afterDestroy();
}
/**
* 执行destroyed后的逻辑
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public afterDestroy() {
if (this.viewStateEvent) {
this.viewStateEvent.unsubscribe();
}
if(this.appStateEvent){
this.appStateEvent.unsubscribe();
}
<#if destroyed_block??>
${destroyed_block}
</#if>
}
/**
* 刷新数据
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public refresh_all(): void {
this.inited = false;
this.$nextTick(() => {
this.inited = true;
});
}
}
/**
* 刷新父节点
*
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public refresh_parent(): void {
if (Object.keys(this.currentselectedNode).length === 0) {
return;
}
const tree: any = this.$refs.${ctrl.name};
const node: any = tree.getNode(this.currentselectedNode.id);
if (!node || !node.parent) {
return;
}
let curNode:any = {};
const { parent: _parent } = node;
curNode = Util.deepObjectMerge(curNode,_parent);
let tempContext:any = {};
if(curNode.data && curNode.data.srfappctx){
Object.assign(tempContext,curNode.data.srfappctx);
}else{
Object.assign(tempContext,this.context);
}
const id: string = _parent.key ? _parent.key : '#';
const param: any = { srfnodeid: id };
this.refresh_node(tempContext,param, true);
}
/**
* 数据加载
*
* @memberof ${srfclassname('${ctrl.codeName}')}
*/
protected load(data: any) {
let params: any =
data && data.id ? { srfnodeid: data.id } : { srfnodeid: "#" };
this.service
.getNodes(JSON.parse(JSON.stringify(this.context)), params)
.then((res: any) => {
if (res && res.data.records && res.data.records.length > 0) {
this.nodeArray.push(res.data.records);
this.setcheckedList();
}
* @param {*} node
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public load(node: any = {}, resolve?: any) {
if (node.data && node.data.children) {
resolve(node.data.children);
return;
}
const params: any = {
srfnodeid: node.data && node.data.id ? node.data.id : "#",
srfnodefilter: this.srfnodefilter
};
let tempViewParams:any = JSON.parse(JSON.stringify(this.viewparams));
let curNode:any = {};
curNode = Util.deepObjectMerge(curNode,node);
let tempContext:any = this.computecurNodeContext(curNode);
if(curNode.data && curNode.data.srfparentdename){
Object.assign(tempContext,{srfparentdename:curNode.data.srfparentdename});
Object.assign(tempViewParams,{srfparentdename:curNode.data.srfparentdename});
}
if(curNode.data && curNode.data.srfparentkey){
Object.assign(tempContext,{srfparentkey:curNode.data.srfparentkey});
Object.assign(tempViewParams,{srfparentkey:curNode.data.srfparentkey});
}
Object.assign(params,{viewparams:tempViewParams});
this.service.getNodes(tempContext,params).then((response: any) => {
if (!response || response.status !== 200) {
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.info });
resolve([]);
return;
}
const _items = response.data;
this.formatExpanded(_items);
<#-- if (!node.level || node.level === 0) {
this.nodes = [..._items];
}
this.nodes = response.data; -->
resolve([..._items]);
let isRoot = Object.is(node.level,0);
let isSelectedAll = node.checked;
this.setDefaultSelection(_items, isRoot, isSelectedAll);
this.$emit("load", _items);
}).catch((response: any) => {
resolve([]);
if (response && response.status === 401) {
return;
}
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.info });
});
}
/**
* 跳转方法
* 计算当前节点的上下文
*
* @param {*} curNode 当前节点
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public computecurNodeContext(curNode:any){
let tempContext:any = {};
if(curNode && curNode.data && curNode.data.srfappctx){
tempContext = JSON.parse(JSON.stringify(curNode.data.srfappctx));
}else{
tempContext = JSON.parse(JSON.stringify(this.context));
}
return tempContext;
}
/**
* 刷新功能
*
* @param
haschild 是否有子节点
* @memberof ${srfclassname('${ctrl.codeName}')}
* @param
{any[]} args
* @memberof ${srfclassname('${ctrl.codeName}')}
Base
*/
protected show(node: any) {
this.active++;
this.load(node);
public refresh(args: any[]): void {
this.refresh_all();
<#-- if (Object.keys(this.currentselectedNode).length === 0) {
return;
}
const id: string = this.currentselectedNode.id;
const param: any = { srfnodeid: id };
const tree: any = this.$refs.${ctrl.name};
const node: any = tree.getNode(id);
if (!node) {
return;
}
let curNode:any = {};
curNode = Util.deepObjectMerge(curNode,node);
let tempContext:any = {};
if(curNode.data && curNode.data.srfappctx){
Object.assign(tempContext,curNode.data.srfappctx);
}else{
Object.assign(tempContext,this.context);
}
this.refresh_node(tempContext,param, false); -->
}
/**
*
解析选中数据方法
*
刷新节点
*
* @memberof ${srfclassname('${ctrl.codeName}')}
* @public
* @param {*} [curContext] 当前节点上下文
* @param {*} [arg={}] 当前节点附加参数
* @param {boolean} parentnode 是否是刷新父节点
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
protected setcheckedList() {
if (this.selectedData) {
this.selectedData.forEach((item: any) => {
this.checkedList.push(item.id);
this.checkedList = Array.from(new Set(this.checkedList));
public refresh_node(curContext:any,arg: any = {}, parentnode: boolean): void {
const { srfnodeid: id } = arg;
Object.assign(arg,{viewparams:this.viewparams});
const get: Promise<any> = this.service.getNodes(JSON.parse(JSON.stringify(this.context)),arg);
get.then((response: any) => {
if (!response || response.status !== 200) {
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.info });
return;
}
const _items = [...response.data];
this.formatExpanded(_items);
const tree: any = this.$refs.${ctrl.name};
tree.updateKeyChildren(id, _items);
if (parentnode) {
this.currentselectedNode = {};
}
this.setDefaultSelection(_items);
}).catch((response: any) => {
if (response && response.status === 401) {
return;
}
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.info });
});
}
this.checkedData = this.selectedData;
}
/**
* 打开编辑视图
* 默认展开节点
*
* @public
* @param {any[]} items
* @returns {any[]}
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public formatExpanded(items: any[]): any[] {
const data: any[] = [];
items.forEach((item) => {
if (item.expanded || (item.children && item.children.length > 0)) {
this.expandedKeys.push(item.id);
}
});
return data;
}
/**
* 设置默认选中,回显数项,选中所有子节点
*
* @param {any[]} items 当前节点所有子节点集合
* @param {boolean} isRoot 是否是加载根节点
* @param {boolean} isSelectedAll 是否选中所有子节点
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public setDefaultSelection(items: any[], isRoot: boolean = false, isSelectedAll: boolean = false): void {
if(items.length == 0){
return;
}
let defaultData: any;
// 导航中选中第一条配置的默认选中,没有选中第一条
if(this.isSelectFirstDefault){
if(this.isSingleSelect){
let index = items.findIndex((item: any) => item.selected);
if(index === -1) {
if(isRoot){
index = 0;
}else{
return;
}
}
defaultData = items[index];
this.setTreeNodeHighLight(defaultData);
this.currentselectedNode = JSON.parse(JSON.stringify(defaultData));
if(this.isBranchAvailable || defaultData.leaf){
this.selectedNodes = [this.currentselectedNode];
this.$emit('selectionchange', this.selectedNodes);
}
}
}
// 已选数据的回显
if(this.echoselectedNodes && this.echoselectedNodes.length > 0){
let checkedNodes = items.filter((item:any)=>{
return this.echoselectedNodes.some((val:any)=> {
if(Object.is(item.srfkey,val.srfkey) && Object.is(item.srfmajortext,val.srfmajortext)){
val.used = true;
return true;
}
});
});
if(checkedNodes.length > 0){
this.echoselectedNodes = this.echoselectedNodes.filter((item:any)=> !item.used);
// 父节点选中时,不需要执行这段,会选中所有子节点
if(!isSelectedAll){
if(this.isSingleSelect){
this.setTreeNodeHighLight(checkedNodes[0]);
this.currentselectedNode = JSON.parse(JSON.stringify(checkedNodes[0]));
this.selectedNodes = [this.currentselectedNode];
}else{
this.selectedNodes = this.selectedNodes.concat(checkedNodes);
const tree: any = this.$refs.treeexpbar_tree;
tree.setCheckedNodes(this.selectedNodes);
}
}
}
}
// 父节点选中时,选中所有子节点
if(isSelectedAll){
let leafNodes = items.filter((item:any) => item.leaf);
this.selectedNodes = this.selectedNodes.concat(leafNodes);
this.$emit('selectionchange', this.selectedNodes);
}
}
/**
* 绘制右击菜单
*
* @param {*} node
* @returns
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
public renderContextMenu(node: any) {
let content;
if (node && node.data) {
const data: any = JSON.parse(JSON.stringify(node.data));
this.currentselectedNode = { ...data };
const tags: string[] = data.id.split(';');
<#if ctrl.getPSControls()??>
<#list ctrl.getPSControls() as childCtrl>
<#if childCtrl.getControlType() == "CONTEXTMENU">
if (tags[0] === "${childCtrl.getOwner().getNodeType()}") {
content = this.renderContextMenu${srfclassname(childCtrl.getOwner().getNodeType()?lower_case)}();
}
</#if>
</#list>
</#if>
}
return content;
}
<#if ctrl.getPSControls()??>
<#list ctrl.getPSControls() as childCtrl>
<#if childCtrl.getControlType() == "CONTEXTMENU">
/**
* 绘制${childCtrl.getOwner().getNodeType()}类型右键菜单
*
* @param any 节点对象
* @memberof ${srfclassname('${ctrl.codeName}')}
* @param {*} node
* @returns
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
protected openModal(node: any = {}) {
// let nodeType = this.nodeView[node.id.split(";")[0]];
// if(nodeType.hasView){
// let modalSubject = this.$modal.openModal({
// componentName: nodeType.viewName
// }
// viewdata:JSON.stringify({ srfkey: node.srfkey })
// );
// modalSubject.subscribe((res: any) => {
// if (res) {
// return Promise.resolve(res);
// }
// });
// }else{
// console.log("编辑视图未配置");
// }
public renderContextMenu${srfclassname(childCtrl.getOwner().getNodeType()?lower_case)}() {
return (
<@ibizindent blank=12>
${P.getCtrlCode(childCtrl, 'CONTROL.html').code}
</@ibizindent>
);
}
</#if>
</#list>
</#if>
/**
*
删除节点
*
设置选中高亮
*
* @memberof ${srfclassname('${ctrl.codeName}')}
* @param {*} data
* @memberof ${srfclassname('${ctrl.codeName}')}Base
*/
protected deleteNode() {
if (this.active == this.nodeArray.length - 2) {
this.nodeArray.splice(this.nodeArray.length - 1, 1);
}
public setTreeNodeHighLight(data: any): void {
const tree: any = this.$refs.${ctrl.name};
tree.setCurrentKey(data.id);
}
/**
*
选中切换方法
*
执行默认界面行为
*
* @param
node 节点数据
* @memberof ${srfclassname('${ctrl.codeName}')}
* @param
{*} node
* @memberof ${srfclassname('${ctrl.codeName}')}
Base
*/
protected toggle(node: any) {
this.$emit('selectionchange',[node])
public doDefaultAction(node: any) {
if (node && node.data) {
const data: any = node.data;
const tags: string[] = data.id.split(';');
<#if ctrl.getPSDETreeNodes()??>
<#list ctrl.getPSDETreeNodes() as node>
<#if node.getPSDEContextMenu()?? && node.getDefaultPSUIAction()??>
<#assign contextMenu = node.getPSDEContextMenu()/>
if (tags[0] === "${contextMenu.getOwner().getNodeType()}") {
this.${contextMenu.name}_click({tag: '${node.getDefaultPSUIAction().name}'});
}
</#if>
</#list>
</#if>
}
this.$emit('nodedblclick', this.selectedNodes);
}
<#ibizinclude>
../@MACRO/CONTROL/CONTROL_BOTTOM-BASE.vue.ftl
...
...
编辑
预览
Markdown
格式
0%
请重试
or
添加新附件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
先完成此消息的编辑!
取消
想要评论请
注册
或
登录