|
|
@@ -1,50 +1,23 @@
|
|
|
<template>
|
|
|
- <el-dialog :title="state.ruleForm.id ? $t('common.editBtn') : $t('common.addBtn')" width="600" v-model="visible"
|
|
|
+ <el-dialog :title="sign === 'domain' ? '修改域名集合' : '修改ip集合'" width="600" v-model="visible"
|
|
|
:close-on-click-modal="false" :destroy-on-close="true" draggable>
|
|
|
- <el-form ref="menuDialogFormRef" :model="state.ruleForm" :rules="dataRules" label-width="90px" v-loading="loading">
|
|
|
- <el-form-item :label="$t('marketingConfig.name')" prop="domain">
|
|
|
- <el-input v-model="state.ruleForm.domain" clearable :placeholder="$t('marketingConfig.inputNameTip')"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item :label="$t('marketingConfig.config')" prop="configs">
|
|
|
- <div v-for="(item, index) in state.ruleForm.configs" :key="item.index" class="config-container">
|
|
|
- <span>IP</span> <el-input style="width: 140px;" v-model="item.ip" clearable :placeholder="$t('marketingConfig.inputIPTip')"></el-input>
|
|
|
- <span>{{ $t('marketingConfig.app') }}</span>
|
|
|
-
|
|
|
- <el-select
|
|
|
- style="width: 140px;"
|
|
|
- v-model="item.appId"
|
|
|
- clearable
|
|
|
- :placeholder="$t('marketingConfig.inputAppSel')"
|
|
|
- popper-class="apps-loadmore"
|
|
|
- @visible-change="handleVisibleChange"
|
|
|
- >
|
|
|
- <!-- <el-option
|
|
|
- v-for="item in state.appList"
|
|
|
- :key="item.appId"
|
|
|
- :label="item.appName"
|
|
|
- :value="item.appId"
|
|
|
- ></el-option> -->
|
|
|
-
|
|
|
- <el-option
|
|
|
- v-for="(item, index) in state.appList"
|
|
|
- :key="item.appId"
|
|
|
- :label="item.appName"
|
|
|
- :value="item.appId"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
-
|
|
|
+ <el-form ref="menuDialogFormRef" :model="state.ruleForm"
|
|
|
+ label-width="90px" v-loading="loading">
|
|
|
+ <el-form-item :label="sign === 'domain' ? '域名集合' : 'ip集合'" prop="configs">
|
|
|
+ <div v-for="(item, index) in state.ruleForm.list" :key="item.index" class="config-container">
|
|
|
+ <el-input style="width: 300px; margin-right: 20px;" v-model="item.val" clearable :placeholder="$t('marketingConfig.inputIPTip')"></el-input>
|
|
|
<div class="config-actions">
|
|
|
<svg
|
|
|
- v-if="index === state.ruleForm.configs.length - 1"
|
|
|
- @click="state.ruleForm.configs.push({ ip: '', appId: '', appName: '' })"
|
|
|
+ v-if="index === state.ruleForm.list.length - 1"
|
|
|
+ @click="state.ruleForm.list.push({val: ''})"
|
|
|
style="cursor: pointer;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
<path d="M19.5 3H4.5C3.67157 3 3 3.67157 3 4.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V4.5C21 3.67157 20.3284 3 19.5 3Z" stroke="#646464" stroke-linejoin="round"/>
|
|
|
<path d="M12 8V16" stroke="#646464" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
<path d="M8 12H16" stroke="#646464" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
</svg>
|
|
|
<svg
|
|
|
- v-if="state.ruleForm.configs.length > 1" style="cursor: pointer;"
|
|
|
- @click="state.ruleForm.configs.splice(index, 1)"
|
|
|
+ v-if="state.ruleForm.list.length > 1" style="cursor: pointer;"
|
|
|
+ @click="state.ruleForm.list.splice(index, 1)"
|
|
|
width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
<path d="M19.5 3H4.5C3.67157 3 3 3.67157 3 4.5V19.5C3 20.3284 3.67157 21 4.5 21H19.5C20.3284 21 21 20.3284 21 19.5V4.5C21 3.67157 20.3284 3 19.5 3Z" stroke="#646464" stroke-linejoin="round"/>
|
|
|
<path d="M8 12H16" stroke="#646464" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
@@ -71,26 +44,18 @@ import {rule} from '/@/utils/validate';
|
|
|
// 定义子组件向父组件传值/事件
|
|
|
const emit = defineEmits(['refresh']);
|
|
|
const {t} = useI18n();
|
|
|
-// 引入组件
|
|
|
-const IconSelector = defineAsyncComponent(() => import('/@/components/IconSelector/index.vue'));
|
|
|
|
|
|
// 定义变量内容
|
|
|
const visible = ref(false);
|
|
|
const loading = ref(false);
|
|
|
+const sign = ref('domain')
|
|
|
const menuDialogFormRef = ref();
|
|
|
// 定义需要的数据
|
|
|
const state = reactive({
|
|
|
ruleForm: {
|
|
|
- id: null,
|
|
|
- domain: '',
|
|
|
- configs: [
|
|
|
- {
|
|
|
- id: '',
|
|
|
- ip: '',
|
|
|
- appId: '',
|
|
|
- appUrl: '',
|
|
|
- appName: ''
|
|
|
- }
|
|
|
+ list: [''],
|
|
|
+ https: [''], // 域名集合
|
|
|
+ ips: [''], // ip集合
|
|
|
// {
|
|
|
// id: '1',
|
|
|
// ip: '美国',
|
|
|
@@ -98,18 +63,17 @@ const state = reactive({
|
|
|
// appUrl: 'www.baidu.com',
|
|
|
// appName: 'adsa'
|
|
|
// },
|
|
|
- ],
|
|
|
},
|
|
|
appList: [] as any[], // 应用下拉框列表
|
|
|
});
|
|
|
|
|
|
-// 表单校验规则
|
|
|
-const dataRules = reactive({
|
|
|
- domain: [
|
|
|
- {required: true, message: '域名不能为空', trigger: 'blur'},
|
|
|
- // { validator: rule.url, trigger: 'blur' }
|
|
|
- ],
|
|
|
-});
|
|
|
+// // 表单校验规则
|
|
|
+// const dataRules = reactive({
|
|
|
+// domain: [
|
|
|
+// {required: true, message: '域名不能为空', trigger: 'blur'},
|
|
|
+// // { validator: rule.url, trigger: 'blur' }
|
|
|
+// ],
|
|
|
+// });
|
|
|
|
|
|
// 分页参数
|
|
|
const pagination = reactive({
|
|
|
@@ -119,33 +83,34 @@ const pagination = reactive({
|
|
|
})
|
|
|
|
|
|
// 打开弹窗
|
|
|
-const openDialog = async (type: string, row?: any) => {
|
|
|
+const openDialog = async (type: string, row: any, str: string = 'domain') => {
|
|
|
visible.value = true;
|
|
|
-
|
|
|
+ sign.value = str;
|
|
|
nextTick(() => {
|
|
|
menuDialogFormRef.value?.resetFields();
|
|
|
});
|
|
|
-
|
|
|
- if (row?.id && type === 'edit') {
|
|
|
- await getConfigDetail(row.id);
|
|
|
- } else {
|
|
|
- state.ruleForm = {
|
|
|
- id: null,
|
|
|
- domain: '',
|
|
|
- configs: [
|
|
|
- {
|
|
|
- id: '',
|
|
|
- ip: '',
|
|
|
- appId: '',
|
|
|
- appUrl: '',
|
|
|
- appName: ''
|
|
|
- }
|
|
|
- ],
|
|
|
- };
|
|
|
- }
|
|
|
- pagination.current = 1;
|
|
|
- // 获取应用列表
|
|
|
- getAllAppData();
|
|
|
+ state.ruleForm = JSON.parse(JSON.stringify(row));
|
|
|
+ str === 'domain' ? state.ruleForm.list = row.https.map(e => ({val: e})) : state.ruleForm.list = row.ips.map(e => ({val: e}));
|
|
|
+ // if (row?.id && type === 'edit') {
|
|
|
+ // await getConfigDetail(row.id);
|
|
|
+ // } else {
|
|
|
+ // state.ruleForm = {
|
|
|
+ // id: null,
|
|
|
+ // domain: '',
|
|
|
+ // configs: [
|
|
|
+ // {
|
|
|
+ // id: '',
|
|
|
+ // ip: '',
|
|
|
+ // appId: '',
|
|
|
+ // appUrl: '',
|
|
|
+ // appName: ''
|
|
|
+ // }
|
|
|
+ // ],
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ // pagination.current = 1;
|
|
|
+ // // 获取应用列表
|
|
|
+ // getAllAppData();
|
|
|
};
|
|
|
|
|
|
// 获取当条配置信息
|
|
|
@@ -155,72 +120,15 @@ const getConfigDetail = (id: string) => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-const handleVisibleChange = (visible: boolean) => {
|
|
|
- if (visible) {
|
|
|
- // 添加滚动事件监听
|
|
|
- const dropdown = document.querySelector('.apps-loadmore .el-select-dropdown__wrap');
|
|
|
- dropdown?.addEventListener('scroll', handleScroll);
|
|
|
- } else {
|
|
|
- // 移除滚动事件监听
|
|
|
- const dropdown = document.querySelector('.el-select-dropdown');
|
|
|
- dropdown?.removeEventListener('scroll', handleScroll);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-//防抖函数，由于滚动一次滑轮会触发多次scroll事件，需要控制一下触发的次数。
|
|
|
-function debounce(func: Function, delay: Number = 100) {
|
|
|
- let timeout;
|
|
|
- return function(...args) {
|
|
|
- const context = this;
|
|
|
- clearTimeout(timeout);
|
|
|
- timeout = setTimeout(() => func.apply(context, args), delay);
|
|
|
- };
|
|
|
-}
|
|
|
-
|
|
|
-const handleScroll = debounce (event => {
|
|
|
- //判断是否到达可视区域底部，
|
|
|
- const bottom = event.target.scrollHeight === event.target.scrollTop + event.target.clientHeight;
|
|
|
- if (bottom && state.appList.length < pagination.total) {
|
|
|
- pagination.current += 1;
|
|
|
- getAllAppData();
|
|
|
- }
|
|
|
-}, 100);
|
|
|
-
|
|
|
-// 从后端获取菜单信息（含层级）
|
|
|
-const getAllAppData = async () => {
|
|
|
- try {
|
|
|
- const res = await getAppList({
|
|
|
- current: pagination.current,
|
|
|
- size: pagination.size
|
|
|
- })
|
|
|
-
|
|
|
- if (pagination.current === 1) {
|
|
|
- state.appList = res.data.records
|
|
|
- } else {
|
|
|
- state.appList = [...state.appList, ...res.data.records]
|
|
|
- }
|
|
|
- pagination.total = res.data.total
|
|
|
- } catch (error) {
|
|
|
- console.error(error)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
// 保存数据
|
|
|
const onSubmit = async () => {
|
|
|
- const valid = await menuDialogFormRef.value.validate().catch(() => {
|
|
|
- });
|
|
|
- if (!valid) return false;
|
|
|
-
|
|
|
+ // const valid = await menuDialogFormRef.value.validate().catch(() => {
|
|
|
+ // });
|
|
|
+ // if (!valid) return false;
|
|
|
+ sign.value === 'domain' ? state.ruleForm.https = state.ruleForm.list.map(e => e.val) : state.ruleForm.ips = state.ruleForm.list.map(e => e.val);
|
|
|
+ delete state.ruleForm.list;
|
|
|
try {
|
|
|
loading.value = true;
|
|
|
- if (!state.ruleForm.id) {
|
|
|
- delete state.ruleForm.id;
|
|
|
- }
|
|
|
- state.ruleForm.configs.forEach((item: any) => {
|
|
|
- item.appName = state.appList.find(app => app.appId === item.appId)?.appName || '';
|
|
|
- item.appUrl = state.appList.find(app => app.appId === item.appId)?.appUrl || '';
|
|
|
- !item.id && delete item.id; // 删除未定义的id
|
|
|
- });
|
|
|
await save(state.ruleForm);
|
|
|
useMessage().success(t(state.ruleForm.id ? 'common.editSuccessText' : 'common.addSuccessText'));
|
|
|
visible.value = false;
|
|
|
@@ -245,7 +153,7 @@ defineExpose({
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
width: 100%;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: start;
|
|
|
}
|
|
|
.config-actions {
|
|
|
width: 50px;
|
