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

<template>
  <div class="apps-form">
    <el-dialog
      append-to-body :title="'修改IP'" width="880" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true"
      draggable>
      <IpCollapse :data=ips  @ips="updateIps" @delIps="updateDelIps"></IpCollapse>
      <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';
import { updateModIp } from '/@/api/marketing/apps';
const IpCollapse = defineAsyncComponent(() => import('./ipCollapse.vue'));

interface IpItem {
  id: String;
  ip: 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 ips = ref<IpItem[]>([]);
const childIps = ref();
const delIps = ref<String[]>([]);
const rowData = ref();

// 打开弹窗
const openDialog = async (data: any, row) => {
  visible.value = true;
  ips.value = data;
  rowData.value = row;
};

const updateIps = (data: IpItem[])=>{
  childIps.value = data;
}
const updateDelIps = (data: String[]) => {
  delIps.value = data;
}

// 保存数据
const onSubmit = async () => {
  ElMessage.success('提交成功！');
  visible.value = false;
  updateModIp({ ips: childIps.value, delIps: delIps.value, id: rowData.value.id}).then((res) => {
    emit('refresh');
  })
};

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