feature:新增修改ip、修改域名弹窗

src/api/marketing/apps.ts

@@ -1,18 +1,26 @@
 import request from '/@/utils/request';
 
-export const getDetail = (params?: Object) => {
+// export const getDetail = (params?: Object) => {
+// 	return request({
+// 		url: '/marketing/apps/edit',
+// 		// url: 'https://m1.apifoxmock.com/m1/6687089-6396408-default/marketing/apps/edit',
+// 		method: 'get',
+// 		params,
+// 	});
+// };
+
+export const pageList = (params?: Object) => {
 	return request({
-		url: '/marketing/apps/edit',
-		// url: 'https://m1.apifoxmock.com/m1/6687089-6396408-default/marketing/apps/edit',
+		url: '/marketing/app/page',
+		// url: 'https://m1.apifoxmock.com/m1/6687089-6396408-default/app/page',
 		method: 'get',
 		params,
 	});
 };
 
-export const pageList = (params?: Object) => {
+export const delAppById = (params?: Object) => {
 	return request({
-		url: '/marketing/app/page',
-		// url: 'https://m1.apifoxmock.com/m1/6687089-6396408-default/app/page',
+		url: '/marketing/app/del/{id}',
 		method: 'get',
 		params,
 	});

src/components/JCollapse/index.vue

@@ -66,13 +66,23 @@ const innerActiveNames = computed({
 	position: relative;
 }
 .coll-left {
+	.collapse-title {
+		padding-right: 0;
+	}
 	button {
 		background-color: #f4f5fa !important;
 	}
+	.el-button {
+		padding: 0 10px;
+		height: 50px;
+	}
+	.el-button+.el-button {
+		margin-left: 0;
+	}
 	.coll-left-title,
 	span.el-collapse-item__title {
 		order: 1;
-		margin-left: 5px;
+		// margin-left: 5px;
 	}
 	.el-icon {
 		margin-left: 10px;

src/theme/app.scss

@@ -353,6 +353,9 @@ body,
 	.el-sub-menu__title {
 		height: 48px;
 		border-bottom: 2px solid transparent !important;
+	}
+	.el-menu-item,
+	.el-sub-menu {
 		border-right: 2px solid var(--menu-bar-active-font-color)!important;
 	}
 	.el-menu-item:hover,

src/views/marketing/apps/components/domainCell.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="flex">
     <div class="item" v-for="item in list.slice(0, 4)" :key="item">{{item}};</div>
-    <el-link type="info">查看详情</el-link>
+    <el-link type="info" @click="handleEdit" >查看详情</el-link>
   </div>
+  <DomainForm ref="DomainFormRef" />
 </template>
 <script setup>
 import { ref, watch } from 'vue';
+const DomainForm = defineAsyncComponent(() => import('./domainForm.vue'));
 
-const props = defineProps(['domainList']);
+const props = defineProps(['domainList', 'rowData']);
 const list = ref([]);
+const DomainFormRef = ref();
 
 watch(
   () => props.domainList,
@@ -26,6 +29,11 @@ watch(
   },
   { immediate: true }
 );
+
+// 修改域名弹窗
+const handleEdit = () => {
+  DomainFormRef.value.openDialog(props.domainList);
+};
 </script>
 <style scoped>
 .flex {

src/views/marketing/apps/components/domainCollapse.vue

@@ -0,0 +1,84 @@
+<template>
+  <JCollapse :data="[
+    { title: '域名集合', id: '1' },
+  ]" @update="(item) => domainEditOpen = true" @delete="(item) => domainDeletable = !domainDeletable"
+    :deleteText="domainDeletable ? '取消' : t('marketingConfig.deleteText')" :updateText="'新增'" :activeNames="['1']">
+    <template #default>
+      <div class="p-2 items-center flex flex-wrap">
+        <template v-for="item in domains" :key="item.id">
+          <!-- 具体域名 -->
+          <el-tag v-if="item.sourceType == 2" @click="getDomainList(item)" effect="light" :closable="domainDeletable"
+            @close="handleDeleteDomain(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
+            style="margin-bottom: 4px;">
+            {{ item.domain }}
+          </el-tag>
+          <!-- 分组域名 -->
+          <el-popover v-else width="200" trigger="hover" placement="top">
+            <div class="flex flex-wrap">
+              {{ item.groupName }}
+            </div>
+            <template #reference>
+              <el-tag @click="getDomainList(item)" effect="light" :closable="domainDeletable"
+                @close="handleDeleteDomain(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
+                style="margin-bottom: 4px;">
+                {{ item.groupName }}
+              </el-tag>
+            </template>
+          </el-popover>
+        </template>
+      </div>
+    </template>
+  </JCollapse>
+  <DomainEdit v-model:open="domainEditOpen" />
+</template>
+
+<script setup lang="ts" name="domainCollapse">
+import { useI18n } from 'vue-i18n';
+const JCollapse = defineAsyncComponent(() => import('/@/components/JCollapse/index.vue'));
+const DomainEdit = defineAsyncComponent(() => import('./domainEdit.vue'));
+
+interface DomianItem {
+  id: String;
+  domain: String;
+  sourceType: Number; // 1:分组 2:具体域名
+  groupId: String;
+  groupName: String;
+}
+
+const props = defineProps(['data']);
+
+// 定义子组件向父组件传值/事件
+const emit = defineEmits(['refresh']);
+const { t } = useI18n();
+
+// 定义变量内容
+const domains = ref<DomianItem[]>([]);
+const domainDeletable = ref(false);// 控制域名列表项是否可删除
+const domainEditOpen = ref(false);
+
+watchEffect(() => {
+  if (props.data) {
+    domains.value = props.data;
+  }
+  console.log('domains', domains.value);
+
+})
+
+const getDomainList = (detail: DomianItem) => {
+  if (detail.sourceType == 1) {
+    // 获取ip组
+    console.log(detail.groupId);
+  }
+}
+
+// 删除域名
+const handleDeleteDomain = (deleteItem: DomianItem) => {
+  domains.value = domains.value.filter((item: any) => item.id != deleteItem.id);
+}
+
+</script>
+<style lang="scss">
+.el-collapse-item__content {
+  padding: 0;
+}
+</style>

src/views/marketing/apps/components/domainForm.vue

@@ -0,0 +1,67 @@
+<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></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 openDialog = async (data: any) => {
+  visible.value = true;
+  domains.value = data;
+};
+
+// 保存数据
+const onSubmit = async () => {
+  ElMessage.success('提交成功！');
+  visible.value = false;
+};
+
+// 暴露变量 只有暴漏出来的变量 父组件才能使用
+defineExpose({
+  openDialog,
+});
+</script>
+<style lang="scss">
+.el-overlay {
+  .el-overlay-dialog {
+    .el-dialog {
+      .el-dialog__body {
+        padding: 0 !important;
+      }
+    }
+  }
+}
+</style>

src/views/marketing/apps/components/form.vue

@@ -2,8 +2,8 @@
   <div class="apps-form">
     <el-dialog :title="'修改营销配置'" width="880" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true"
       draggable>
-      <el-form ref="appDialogFormRef" :model="state.ruleForm" class="demo-form-inline" v-loading="loading">
-        <el-form-item :label="'应用名称'" prop="appName">
+      <el-form ref="appDialogFormRef" :rules="dataRules" :model="state.ruleForm" class="demo-form-inline" v-loading="loading">
+        <el-form-item v-if="state.ruleForm.appName" :label="'应用名称'" prop="appName">
           <el-input style="width: 200px;" v-model="state.ruleForm.appName" disabled />
         </el-form-item>
         <el-row :gutter="20" style="margin-bottom: 15px;">
@@ -34,99 +34,14 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <JCollapse :data="[
-          { title: 'IP集合', id: '1' },
-        ]" @update="(item: any) => listEditOpen = true" @delete="(item: any) => ipDeletable = !ipDeletable"
-          :deleteText="ipDeletable ? '取消' : t('marketingConfig.deleteText')" :updateText="'新增'"
-          style="margin-top: 25px;" :activeNames="['1']">
-          <template #default>
-            <div class="border-b p-2 items-center flex flex-wrap collapse-group">
-              <div class="collapse-group-name">白名单：</div>
-              <div class="tag-content">
-                <template v-for="item in ips.whitelist" :key="item.id">
-                  <!-- 具体IP(段) -->
-                  <el-tag v-if="item.sourceType == 2" effect="light" :closable="ipDeletable"
-                    @close="handleDeleteIp(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
-                    style="margin-bottom: 4px;">
-                    {{ item.startIp }}{{ item.ipMode == 2 ? (' / ' + item.endIp.split('.').pop()) : '' }}
-                  </el-tag>
-                  <!-- 分组 -->
-                  <el-popover v-else width="200" trigger="hover" placement="top">
-                    <div class="flex flex-wrap">
-                      {{ item.groupName }}
-                    </div>
-                    <template #reference>
-                      <el-tag @click="getIpList(item)" effect="light" :closable="ipDeletable"
-                        @close="handleDeleteIp(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
-                        style="margin-bottom: 4px;">
-                        {{ item.groupName }}
-                      </el-tag>
-                    </template>
-                  </el-popover>
-                </template>
-              </div>
-            </div>
-            <div class="p-2 items-center flex flex-wrap collapse-group">
-              <div class="collapse-group-name">黑名单：</div>
-              <div class="tag-content">
-                <template v-for="item in ips.blacklist" :key="item.id">
-                  <!-- 具体IP(段) -->
-                  <el-tag v-if="item.sourceType == 2" effect="light" :closable="ipDeletable"
-                    @close="handleDeleteIp(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
-                    style="margin-bottom: 4px;">
-                    {{ item.startIp }}{{ item.ipMode == 2 ? (' / ' + item.endIp.split('.').pop()) : '' }}
-                  </el-tag>
-                  <!-- 分组 -->
-                  <el-popover v-else width="200" trigger="hover" placement="top">
-                    <div class="flex flex-wrap">
-                      {{ item.groupName }}
-                    </div>
-                    <template #reference>
-                      <el-tag @click="getIpList(item)" effect="light" :closable="ipDeletable"
-                        @close="handleDeleteIp(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
-                        style="margin-bottom: 4px;">
-                        {{ item.groupName }}
-                      </el-tag>
-                    </template>
-                  </el-popover>
-                </template>
-              </div>
-            </div>
-          </template>
-        </JCollapse>
-        <JCollapse :data="[
-          { title: '域名集合', id: '1' },
-        ]" @update="(item) => domainEditOpen = true" @delete="(item) => domainDeletable = !domainDeletable"
-          :deleteText="domainDeletable ? '取消' : t('marketingConfig.deleteText')" :updateText="'新增'"
-          style="margin-top: 25px;" :activeNames="['1']">
-          <template #default>
-            <div class="p-2 items-center flex flex-wrap">
-              <template v-for="item in domains" :key="item.id">
-                <!-- 具体域名 -->
-                <el-tag v-if="item.sourceType == 2" @click="getIpList(item)" effect="light" :closable="domainDeletable"
-                  @close="handleDeleteDomain(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
-                  style="margin-bottom: 4px;">
-                  {{ item.domain }}
-                </el-tag>
-                <!-- 分组域名 -->
-                <el-popover v-else width="200" trigger="hover" placement="top">
-                  <div class="flex flex-wrap">
-                    {{ item.groupName }}
-                  </div>
-                  <template #reference>
-                    <el-tag @click="getIpList(item)" effect="light" :closable="domainDeletable"
-                      @close="handleDeleteDomain(item)" color="#f4f4f4" round class="ml-1 cursor-pointer"
-                      style="margin-bottom: 4px;">
-                      {{ item.groupName }}
-                    </el-tag>
-                  </template>
-                </el-popover>
-              </template>
-            </div>
-          </template>
-        </JCollapse>
+        <div class="mt-7">
+          <IpCollapse :data=state.ruleForm.ips></IpCollapse>
+        </div>
+        <div class="mt-7">
+          <DomainCollapse :data=state.ruleForm.domains></DomainCollapse>
+        </div>
         <div class="title">备注</div>
-        <el-form-item prop="triggerRule">
+        <el-form-item>
           <el-input :rows="4" v-model="state.ruleForm.remark" type="textarea" placeholder="请输入备注"></el-input>
         </el-form-item>
       </el-form>
@@ -138,17 +53,14 @@
         </span>
       </template>
     </el-dialog>
-    <ListEdit v-model:open="listEditOpen" />
-    <DomainEdit v-model:open="domainEditOpen" />
   </div>
 </template>
 
 <script setup lang="ts" name="systemMenuDialog">
 import { ElMessage } from 'element-plus';
 import { useI18n } from 'vue-i18n';
-const JCollapse = defineAsyncComponent(() => import('/@/components/JCollapse/index.vue'));
-const ListEdit = defineAsyncComponent(() => import('./listEdit.vue'));
-const DomainEdit = defineAsyncComponent(() => import('./domainEdit.vue'));
+const DomainCollapse = defineAsyncComponent(() => import('./domainCollapse.vue'));
+const IpCollapse = defineAsyncComponent(() => import('./ipCollapse.vue'));
 
 interface IpItem {
   id: String;
@@ -161,11 +73,6 @@ interface IpItem {
   groupName: String;
 }
 
-interface Ips {
-  blacklist: IpItem[];
-  whitelist: IpItem[];
-}
-
 interface DomianItem {
   id: String;
   domain: String;
@@ -199,15 +106,6 @@ const { t } = useI18n();
 const visible = ref(false);
 const loading = ref(false);
 const appDialogFormRef = ref();
-const ips = ref<Ips>({
-  blacklist: [],
-  whitelist: []
-});
-const domains = ref<DomianItem[]>([]);
-const ipDeletable = ref(false);// 控制 IP 列表项是否可删除
-const domainDeletable = ref(false);// 控制域名列表项是否可删除
-const listEditOpen = ref(false);
-const domainEditOpen = ref(false);
 
 const triggerRules = [
   {
@@ -225,34 +123,25 @@ const state = reactive({
   ruleForm: {} as Form,
 });
 
-const getIpList = (detail: IpItem) => {
-  if (detail.sourceType == 1) {
-    // 获取ip组
-    console.log(detail.groupId);
-  }
-}
-
-// 删除ip
-const handleDeleteIp = (deleteItem: IpItem) => {
-  ips.value.whitelist = ips.value.whitelist.filter((item: any) => item.id != deleteItem.id);
-  ips.value.blacklist = ips.value.blacklist.filter((item: any) => item.id != deleteItem.id);
-}
-
-// 删除域名
-const handleDeleteDomain = (deleteItem: DomianItem) => {
-  domains.value = domains.value.filter((item: any) => item.id != deleteItem.id);
-}
-
 // 打开弹窗
 const openDialog = async (type: string, row: any, str: string = 'domain') => {
   visible.value = true;
   state.ruleForm = row;
   console.log(row);
-  ips.value.blacklist = row.ips.filter((item: any) => item.ipType == '1');
-  ips.value.whitelist = row.ips.filter((item: any) => item.ipType == '2');
-  domains.value = row.domains;
 };
 
+// 表单校验规则
+const dataRules = reactive({
+	triggerNum: [
+    { required: true, message: '触发频率不能为空', trigger: 'blur' },
+    {
+      pattern: /^(10000|[1-9]\d{0,3}|0)$|^(100%|[1-9]?\d%|0%)$/,
+      message: '请输入 0-10000 的正整数或 0%-100% 的百分比',
+      trigger: 'blur',
+    },
+  ],
+});
+
 // 保存数据
 const onSubmit = async () => {
   console.log(state.ruleForm)
@@ -305,9 +194,5 @@ defineExpose({
     color: rgba(18, 18, 18, 1);
     margin: 25px 0 12px;
   }
-
-  .el-collapse-item__content {
-    padding: 0;
-  }
 }
 </style>

src/views/marketing/apps/components/ipCell.vue

@@ -2,21 +2,24 @@
   <div style="text-align: left;">白名单:</div>
   <div class="flex">
     <div class="item" v-for="item in whitelist.slice(0, 4)" :key="item">{{item}};</div>
-    <el-link type="info">查看详情</el-link>
+    <el-link type="info" @click="handleEdit">查看详情</el-link>
   </div>
   <div style="text-align: left; margin-top: 10px;">黑名单:</div>
   <div class="flex">
     <div class="item" v-for="item in blacklist.slice(0, 4)" :key="item">{{item}};</div>
-    <el-link type="info">查看详情</el-link>
+    <el-link type="info" @click="handleEdit">查看详情</el-link>
   </div>
+  <IpForm ref="IpFormRef" />
 </template>
 <script setup>
 import { ref, watch } from 'vue';
+const IpForm = defineAsyncComponent(() => import('./ipForm.vue'));
 
 const props = defineProps(['ipList']);
 
 const blacklist = ref([]);
 const whitelist = ref([]);
+const IpFormRef = ref();
 
 watch(
   () => props.ipList,
@@ -37,6 +40,11 @@ watch(
   },
   { immediate: true }
 );
+
+// 修改域名弹窗
+const handleEdit = () => {
+  IpFormRef.value.openDialog(props.ipList);
+};
 </script>
 <style scoped>
 .flex {

src/views/marketing/apps/components/ipCollapse.vue

@@ -0,0 +1,122 @@
+<template>
+  <JCollapse :data="[
+    { title: 'IP集合', id: '1' },
+  ]" @update="(item: any) => listEditOpen = true" @delete="(item: any) => ipDeletable = !ipDeletable"
+    :deleteText="ipDeletable ? '取消' : t('marketingConfig.deleteText')" :updateText="'新增'"
+    :activeNames="['1']">
+    <template #default>
+      <div class="border-b p-2 items-center flex flex-wrap collapse-group">
+        <div class="collapse-group-name">白名单：</div>
+        <div class="tag-content">
+          <template v-for="item in ips.whitelist" :key="item.id">
+            <!-- 具体IP(段) -->
+            <el-tag v-if="item.sourceType == 2" effect="light" :closable="ipDeletable" @close="handleDeleteIp(item)"
+              color="#f4f4f4" round class="ml-1 cursor-pointer" style="margin-bottom: 4px;">
+              {{ item.startIp }}{{ item.ipMode == 2 ? (' / ' + item.endIp.split('.').pop()) : '' }}
+            </el-tag>
+            <!-- 分组 -->
+            <el-popover v-else width="200" trigger="hover" placement="top">
+              <div class="flex flex-wrap">
+                {{ item.groupName }}
+              </div>
+              <template #reference>
+                <el-tag @click="getIpList(item)" effect="light" :closable="ipDeletable" @close="handleDeleteIp(item)"
+                  color="#f4f4f4" round class="ml-1 cursor-pointer" style="margin-bottom: 4px;">
+                  {{ item.groupName }}
+                </el-tag>
+              </template>
+            </el-popover>
+          </template>
+        </div>
+      </div>
+      <div class="p-2 items-center flex flex-wrap collapse-group">
+        <div class="collapse-group-name">黑名单：</div>
+        <div class="tag-content">
+          <template v-for="item in ips.blacklist" :key="item.id">
+            <!-- 具体IP(段) -->
+            <el-tag v-if="item.sourceType == 2" effect="light" :closable="ipDeletable" @close="handleDeleteIp(item)"
+              color="#f4f4f4" round class="ml-1 cursor-pointer" style="margin-bottom: 4px;">
+              {{ item.startIp }}{{ item.ipMode == 2 ? (' / ' + item.endIp.split('.').pop()) : '' }}
+            </el-tag>
+            <!-- 分组 -->
+            <el-popover v-else width="200" trigger="hover" placement="top">
+              <div class="flex flex-wrap">
+                {{ item.groupName }}
+              </div>
+              <template #reference>
+                <el-tag @click="getIpList(item)" effect="light" :closable="ipDeletable" @close="handleDeleteIp(item)"
+                  color="#f4f4f4" round class="ml-1 cursor-pointer" style="margin-bottom: 4px;">
+                  {{ item.groupName }}
+                </el-tag>
+              </template>
+            </el-popover>
+          </template>
+        </div>
+      </div>
+    </template>
+  </JCollapse>
+  <IpEdit v-model:open="listEditOpen" />
+</template>
+
+<script setup lang="ts" name="ipCollapse">
+import { useI18n } from 'vue-i18n';
+const JCollapse = defineAsyncComponent(() => import('/@/components/JCollapse/index.vue'));
+const IpEdit = defineAsyncComponent(() => import('./ipEdit.vue'));
+
+interface IpItem {
+  id: String;
+  ipMode: Number;
+  ipType: Number;
+  sourceType: Number; // 1:分组 2:具体Ip(段)
+  startIp: String;
+  endIp: String;
+  groupId: String;
+  groupName: String;
+}
+
+interface Ips {
+  blacklist: IpItem[];
+  whitelist: IpItem[];
+}
+
+const props = defineProps(['data']);
+
+// 定义子组件向父组件传值/事件
+const emit = defineEmits(['refresh']);
+const { t } = useI18n();
+
+// 定义变量内容
+const ips = ref<Ips>({
+  blacklist: [],
+  whitelist: []
+});
+const ipDeletable = ref(false);// 控制域名列表项是否可删除
+const listEditOpen = ref(false);
+
+watchEffect(() => {
+  if (props.data) {
+    ips.value.blacklist = props.data.filter((item: any) => item.ipType == '1');
+    ips.value.whitelist = props.data.filter((item: any) => item.ipType == '2');
+  }
+  console.log('ips', ips.value);
+})
+
+const getIpList = (detail: IpItem) => {
+  if (detail.sourceType == 1) {
+    // 获取ip组
+    console.log(detail.groupId);
+  }
+}
+
+// 删除ip
+const handleDeleteIp = (deleteItem: IpItem) => {
+  ips.value.whitelist = ips.value.whitelist.filter((item: any) => item.id != deleteItem.id);
+  ips.value.blacklist = ips.value.blacklist.filter((item: any) => item.id != deleteItem.id);
+}
+
+</script>
+<style lang="scss">
+.el-collapse-item__content {
+  padding: 0;
+}
+</style>

src/views/marketing/apps/components/listEdit.vue → src/views/marketing/apps/components/ipEdit.vue

@@ -102,13 +102,16 @@ const props = defineProps({
 		default: false,
 	},
 });
-// // 表单校验规则
+
+// 表单校验规则
 const dataRules = reactive({
 	domain: [{ required: true, message: '域名不能为空', trigger: 'blur' }],
 });
+
 const onCancel = () => {
 	emit('update:open', false);
 };
+
 // 保存数据
 const onSubmit = async () => {
 	try {

src/views/marketing/apps/components/ipForm.vue

@@ -0,0 +1,67 @@
+<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></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';
+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 openDialog = async (data: any) => {
+  visible.value = true;
+  ips.value = data;
+};
+
+// 保存数据
+const onSubmit = async () => {
+  ElMessage.success('提交成功！');
+  visible.value = false;
+};
+
+// 暴露变量 只有暴漏出来的变量 父组件才能使用
+defineExpose({
+  openDialog,
+});
+</script>
+<style lang="scss">
+.el-overlay {
+  .el-overlay-dialog {
+    .el-dialog {
+      .el-dialog__body {
+        padding: 0 !important;
+      }
+    }
+  }
+}
+</style>

src/views/marketing/apps/index.vue

@@ -17,7 +17,7 @@
             </el-select>
           </el-form-item>
           <el-form-item :label="'备注'" prop="remark">
-            <el-input :placeholder="'请输入备注'" clearable v-model="state.queryForm.domain" />
+            <el-input :placeholder="'请输入备注'" clearable v-model="state.queryForm.remark" />
           </el-form-item>
           <el-form-item>
             <el-button @click="query" class="ml10" icon="search" type="primary">
@@ -62,7 +62,7 @@
         </el-table-column>
         <el-table-column :label="t('marketingApps.appType')" prop="domainType" width="110" show-overflow-tooltip>
           <template #default="{ row }">
-            <el-select :disabled="activeName === 'tab2'" v-model="row.domainType" placeholder="" style="width: 80px">
+            <el-select @change="handleChange(row)" :disabled="activeName === 'tab2'" v-model="row.domainType" placeholder="" style="width: 80px">
               <el-option v-for="item in appTypes" :key="item.value" :label="item.description" :value="item.value" />
             </el-select>
           </template>
@@ -81,7 +81,7 @@
         </el-table-column>
         <el-table-column :label="'域名集合'" prop="domains" width="280" show-overflow-tooltip>
           <template #default="{ row }">
-            <DomainCell :domainList="row.domains" />
+            <DomainCell :domainList="row.domains" :rowData="row" />
           </template>
         </el-table-column>
         <el-table-column :label="'IP集合'" prop="ips" width="320">
@@ -97,7 +97,7 @@
         </el-table-column>
         <el-table-column :label="t('marketingApps.triggerRule')" width="140" prop="triggerRule" show-overflow-tooltip>
           <template #default="{ row }">
-            <el-select :disabled="activeName === 'tab2'" v-model="row.triggerRule" placeholder="" style="width: 100px">
+            <el-select @change="handleChange(row)" :disabled="activeName === 'tab2'" v-model="row.triggerRule" placeholder="" style="width: 100px">
               <el-option v-for="item in triggerRules" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </template>
@@ -159,7 +159,7 @@
 </template>
 
 <script lang="ts" name="marketingApps" setup>
-import { pageList } from '/@/api/marketing/apps';
+import { pageList, delAppById } from '/@/api/marketing/apps';
 import { BasicTableProps, useTable } from '/@/hooks/table';
 import { useMessage, useMessageBox } from '/@/hooks/message';
 import { useI18n } from 'vue-i18n';