vue3组件el-dialog提取

父组件：

<template>
  <div class="auto-wrap">
    <div class="content-left">
     
      <el-form  :model="addReportForm" label-width="120px">
        <el-form-item label="内容">
          <el-button type="success" @click="selectReport" :icon="Plus" size="default">增加</el-button>
        </el-form-item> 
      </el-form>
    </div>
  </div>
 <!-- 新增报表-弹窗 -->
  <AddReportDialog v-model:showDialog="addReportForm.showDialog" @confirmAddReport="confirmAddReport" />
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue';
import { ElButton, ElDialog, ElForm, ElFormItem } from 'element-plus';
import { Plus, Search } from '@element-plus/icons-vue';
import AddReportDialog from './AddReportDialog.vue';
// 左侧新增节点表单
const addReportForm = reactive({
  showDialog: false
});
function selectReport() {
  addReportForm.showDialog = true;
};
function confirmAddReport(newNodes) {
  addReportForm.tableData = [...addReportForm.tableData, ...newNodes];
};
</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, 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({
  treeObj: null,
  treeLoading: false,
  treeNodeData: [],
});
watch(
  ( ) => props.showDialog,
  ( ) => {
    nextTick(async () => {
      showTreeLoading();
      await initReportTree();
      hideTreeLoading();
    });
  },
  { deep: true, immediate: true },
);
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() {
  addReportDialogForm.treeObj = $.fn.zTree.getZTreeObj('reportDialogTree');
  var nodes = addReportDialogForm.treeObj.getCheckedNodes(true);
  nodes = _.filter(nodes, (v) => v.reportType !== 'Node');
  let newNodes = nodes.map((item: {id: number, name: string, desc: string}) => ({
    id: item.id,
    title: item.name,
    desc: '',
  }));
  if(newNodes.length > 50) {
    ElMessage.warning($t('report.addReportTip'));
    newNodes = newNodes.splice(0, 50);
  };
  addReportDialogForm.treeObj?.destroy?.();
  addReportDialogForm.treeObj = null;
  showDialog.value = false;
  emit('confirmAddReport', newNodes);
};
function closeAddReportForm() {
  addReportDialogForm.treeObj?.destroy?.();
  addReportDialogForm.treeObj = null;
  showDialog.value = false;
};
</script>