data-marketing-platform/src/views/marketing/apps/components/domainForm.vue

<template>
  <div class="apps-form">
    <el-dialog
      append-to-body :title="'修改域名'" width="880" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true"
      draggable>
      <DomainCollapse :data=domains @domains="updateDomains"
        @delDomains="updateDelDomains"></DomainCollapse>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">{{ t('common.cancelButtonText') }}</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">{{ t('common.confirmButtonText')
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemMenuDialog">
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
const DomainCollapse = defineAsyncComponent(() => import('./domainCollapse.vue'));

interface DomianItem {
  id: String;
  domain: String;
  sourceType: Number; // 1:分组 2:具体域名
  groupId: String;
  groupName: String;
}

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const { t } = useI18n();

// 定义变量内容
const visible = ref(false);
const loading = ref(false);
const domains = ref<DomianItem[]>([]);
const childDomains = ref();
const delDomains = ref<String[]>([]);

// 打开弹窗
const openDialog = async (data: any) => {
  visible.value = true;
  domains.value = data;
  childDomains.value = [];
  delDomains.value = [];
};

const updateDomains = (data: DomianItem[])=>{
  childDomains.value = data;
}
const updateDelDomains = (data: String[]) => {
  delDomains.value = data;
}

// 保存数据
const onSubmit = async () => {
  ElMessage.success('提交成功！');
  visible.value = false;
  console.log(childDomains.value);
  console.log(delDomains.value);
};

// 暴露变量 只有暴漏出来的变量 父组件才能使用
defineExpose({
  openDialog,
});
</script>
<style lang="scss">
.el-overlay {
  .el-overlay-dialog {
    .el-dialog {
      .el-dialog__body {
        padding: 0 !important;
      }
    }
  }
}
</style>