父组件：
1 <template>
2 <div class="auto-wrap">
3 <div class="content-left">
4
5 <el-form :model="addReportForm" label-width="120px">
6 <el-form-item label="内容">
7 <el-button type="success" @click="selectReport" :icon="Plus" size="default">增加</el-button>
8 </el-form-item>
9 </el-form>
10 </div>
11 </div>
12 <!-- 新增报表-弹窗 -->
13 <AddReportDialog v-model:showDialog="addReportForm.showDialog" @confirmAddReport="confirmAddReport" />
14 </template>
15
16 <script setup lang="ts">
17 import { ref, reactive, onMounted, nextTick } from 'vue';
18 import { ElButton, ElDialog, ElForm, ElFormItem } from 'element-plus';
19 import { Plus, Search } from '@element-plus/icons-vue';
20 import AddReportDialog from './AddReportDialog.vue';
21 // 左侧新增节点表单
22 const addReportForm = reactive({
23 showDialog: false
24 });
25 function selectReport() {
26 addReportForm.showDialog = true;
27 };
28 function confirmAddReport(newNodes) {
29 addReportForm.tableData = [...addReportForm.tableData, ...newNodes];
30 };
31 </script>
子组件：
1 <template>
2 <el-dialog v-model="showDialog" :title="$t('report.select')+$t('report.reportModule')"
3 width="640px" :close-on-click-modal="false" @click="closeAddReportForm">
4 <div class="tree-wrap flex-col" v-loading="addReportDialogForm.treeLoading">
5 <div class="flex-col" v-show="addReportDialogForm.treeNodeData.length">
6 <input id="searchKey" class="form-control mb-8" type="text" :placeholder="$t('general.searchKeyWord')" />
7 <ul id="reportDialogTree" class="ztree sec-module-ztree" role="menu"></ul>
8 </div>
9 <el-empty v-show="!addReportDialogForm.treeNodeData.length" class="flex-1" :image-size="120"></el-empty>
10 </div>
11 <template #footer>
12 <span class="dialog-footer">
13 <el-button type="primary" @click="confirmAddReportForm">{{$t('config.ok')}}</el-button>
14 <el-button @click="closeAddReportForm">{{$t('config.close')}}</el-button>
15 </span>
16 </template>
17 </el-dialog>
18 </template>
19
20 <script setup lang="ts">
21 import { reactive, computed, onMounted, watch, nextTick } from 'vue';
22 import { ElMessage } from 'element-plus';
23 import { fuzzySearch } from '@/common/libs/ztree/fuzzySearch.js';
24 import * as api from './api';
25 const $t = $.t;
26 const props = defineProps({
27 showDialog: {
28 type: Boolean,
29 default: false,
30 },
31 });
32 const emit = defineEmits(['update:showDialog', 'confirmAddReport' ]);
33 const showDialog = computed({
34 get: () => props.showDialog,
35 set: (val) => {
36 emit('update:showDialog', val);
37 }
38 });
39 const addReportDialogForm = reactive({
40 treeLoading: false,
41 treeNodeData: [],
42 });
43 watch(
44 ( ) => props.showDialog,
45 ( ) => {
46 nextTick(async () => {
47 showTreeLoading();
48 await initReportTree();
49 hideTreeLoading();
50 });
51 },
52 { deep: true, immediate: true },
53 );
54 onMounted(async () => {
55 showTreeLoading();
56 await initReportTree();
57 hideTreeLoading();
58 });
59 function showTreeLoading() {
60 addReportDialogForm.treeLoading = true;
61 };
62 function hideTreeLoading() {
63 addReportDialogForm.treeLoading = false;
64 };
65 // 初始化-系统报告树
66 async function initReportTree() {
67 try {
68 const data = await api.dailyReportZtree();
69 const nodes = [ {
70 id: 0,
71 parentId: null,
72 name: $t('general.predefine'),
73 reportType: 'Node',
74 iconSkin: 'Node',
75 remark: 'Y',
76 isParent: true,
77 }, {
78 id: -1,
79 parentId: null,
80 name: $t('general.custom1'),
81 reportType: 'Node',
82 iconSkin: 'Node',
83 isParent: true,
84 }];
85 data?.object.inside.forEach(node => {
86 if (node.reportType === 'Node') {
87 node.iconSkin = 'Node';
88 } else {
89 node.icon = `${__ctx}/static/skin/images/chart/${node.reportType}.svg`;
90 }
91 });
92 data?.object.user.forEach((userNode) => {
93 if (userNode.reportType === 'Node') {
94 userNode.iconSkin = 'Node';
95 } else {
96 userNode.icon = `${__ctx}/static/skin/images/chart/${userNode.reportType}.svg`;
97 }
98 });
99 if(data?.object && data?.object.inside.length > 0 && data?.object.user.length > 0) {
100 addReportDialogForm.treeNodeData = [...data?.object.inside, ...data?.object.user, ...nodes];
101 initZtree();
102 };
103 } catch (err) {
104 console.log(`[log]: initAssetTree -> err`, err);
105 }
106 };
107 // 初始化 zTree
108 function initZtree() {
109 let data = addReportDialogForm.treeNodeData;
110 if (!_.isArray(data) || _.isEmpty(data)) {
111 data = [];
112 };
113 const setting = {
114 view: {
115 selectedMulti: true,
116 showIcon: true,
117 },
118 check: {
119 enable: true,
120 chkStyle: 'checkbox',
121 radioType: 'all',
122 chkboxType: { 'Y': 's', 'N': 'ps' },
123 },
124 data: {
125 simpleData: {
126 enable: true,
127 idKey: 'id',
128 pIdKey: 'parentId',
129 rootPId: 0,
130 },
131 },
132 };
133 const treeObj = $.fn.zTree.init($('#reportDialogTree'), setting, data);
134 if (treeObj.getNodes().length >= 1) {
135 treeObj.expandNode(treeObj.getNodes()[0], true);
136 };
137 if (treeObj.getNodes().length >= 2) {
138 treeObj.expandNode(treeObj.getNodes()[1], true);
139 };
140 // 添加模糊搜索
141 fuzzySearch('reportDialogTree', '#searchKey', {
142 highlight: true,
143 expand: true,
144 });
145 return treeObj;
146 };
147 // 确认
148 function confirmAddReportForm() {
149 var treeObj = $.fn.zTree.getZTreeObj('reportDialogTree');
150 var nodes = treeObj.getCheckedNodes(true);
151 nodes = _.filter(nodes, (v) => v.reportType !== 'Node');
152 let newNodes = nodes.map(item => ({
153 id: item.id,
154 title: item.name,
155 desc: '',
156 }));
157 if(newNodes.length > 50) {
158 ElMessage.warning($t('report.addReportTip'));
159 newNodes = newNodes.splice(0, 50);
160 };
161 showDialog.value = false;
162 emit('update:showDialog', false);
163 emit('confirmAddReport', newNodes);
164 };
165
166 function closeAddReportForm() {
167 showDialog.value = false;
168 emit('update:showDialog', false);
169 };
170
171 </script>
<template> <el-dialog v-model="showDialog" :title="$t('report.select')+$t('report.reportModule')" width="640px" :close-on-click-modal="false" @click="closeAddReportForm"> <div class="tree-wrap flex-col" v-loading="addReportDialogForm.treeLoading"> <div class="flex-col" v-show="addReportDialogForm.treeNodeData.length"> <input id="searchKey" class="form-control mb-8" type="text" :placeholder="$t('general.searchKeyWord')" /> <ul id="reportDialogTree" class="ztree sec-module-ztree" role="menu"></ul> </div> <el-empty v-show="!addReportDialogForm.treeNodeData.length" class="flex-1" :image-size="120"></el-empty> </div> <template #footer> <span class="dialog-footer"> <el-button type="primary" @click="confirmAddReportForm">{{$t('config.ok')}}</el-button> <el-button @click="closeAddReportForm">{{$t('config.close')}}</el-button> </span> </template> </el-dialog> </template>
<script setup lang="ts"> import { reactive, computed, onMounted, watch, nextTick } from 'vue'; import { ElMessage } from 'element-plus'; import { fuzzySearch } from '@/common/libs/ztree/fuzzySearch.js'; import * as api from './api'; const $t = $.t; const props = defineProps({ showDialog: { type: Boolean, default: false, }, }); const emit = defineEmits(['update:showDialog', 'confirmAddReport' ]); const showDialog = computed({ get: () => props.showDialog, set: (val) => { emit('update:showDialog', val); } }); const addReportDialogForm = reactive({ treeLoading: false, treeNodeData: [], }); watch( ( ) => props.showDialog, ( ) => { nextTick(async () => { showTreeLoading(); await initReportTree(); hideTreeLoading(); }); }, { deep: true, immediate: true }, ); onMounted(async () => { showTreeLoading(); await initReportTree(); hideTreeLoading(); }); function showTreeLoading() { addReportDialogForm.treeLoading = true; }; function hideTreeLoading() { addReportDialogForm.treeLoading = false; }; // 初始化-系统报告树 async function initReportTree() { try { const data = await api.dailyReportZtree(); const nodes = [ { id: 0, parentId: null, name: $t('general.predefine'), reportType: 'Node', iconSkin: 'Node', remark: 'Y', isParent: true, }, { id: -1, parentId: null, name: $t('general.custom1'), reportType: 'Node', iconSkin: 'Node', isParent: true, }]; data?.object.inside.forEach(node => { if (node.reportType === 'Node') { node.iconSkin = 'Node'; } else { node.icon = `${__ctx}/static/skin/images/chart/${node.reportType}.svg`; } }); data?.object.user.forEach((userNode) => { if (userNode.reportType === 'Node') { userNode.iconSkin = 'Node'; } else { userNode.icon = `${__ctx}/static/skin/images/chart/${userNode.reportType}.svg`; } }); if(data?.object && data?.object.inside.length > 0 && data?.object.user.length > 0) { addReportDialogForm.treeNodeData = [...data?.object.inside, ...data?.object.user, ...nodes]; initZtree(); }; } catch (err) { console.log(`[log]: initAssetTree -> err`, err); } }; // 初始化 zTree function initZtree() { let data = addReportDialogForm.treeNodeData; if (!_.isArray(data) || _.isEmpty(data)) { data = []; }; const setting = { view: { selectedMulti: true, showIcon: true, }, check: { enable: true, chkStyle: 'checkbox', radioType: 'all', chkboxType: { 'Y': 's', 'N': 'ps' }, }, data: { simpleData: { enable: true, idKey: 'id', pIdKey: 'parentId', rootPId: 0, }, }, }; const treeObj = $.fn.zTree.init($('#reportDialogTree'), setting, data); if (treeObj.getNodes().length >= 1) { treeObj.expandNode(treeObj.getNodes()[0], true); }; if (treeObj.getNodes().length >= 2) { treeObj.expandNode(treeObj.getNodes()[1], true); }; // 添加模糊搜索 fuzzySearch('reportDialogTree', '#searchKey', { highlight: true, expand: true, }); return treeObj; }; // 确认 function confirmAddReportForm() { var treeObj = $.fn.zTree.getZTreeObj('reportDialogTree'); var nodes = treeObj.getCheckedNodes(true); nodes = _.filter(nodes, (v) => v.reportType !== 'Node'); let newNodes = nodes.map(item => ({ id: item.id, title: item.name, desc: '', })); if(newNodes.length > 50) { ElMessage.warning($t('report.addReportTip')); newNodes = newNodes.splice(0, 50); }; showDialog.value = false; emit('update:showDialog', false); emit('confirmAddReport', newNodes); };
function closeAddReportForm() { showDialog.value = false; emit('update:showDialog', false); };
</script> 标签：Node,el,const,data,showDialog,dialog,vue3,treeObj,true From： https://www.cnblogs.com/guwufeiyang/p/16981768.html