|
@@ -1,152 +1,181 @@
|
|
|
<template>
|
|
|
- <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"
|
|
|
- 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="flex items-center mb-2 text-sm font-normal justify-start w-full">
|
|
|
- <el-input style="width: 300px; margin-right: 20px;" v-model="item.val" clearable :placeholder="t('marketingConfig.inputIPTip')"></el-input>
|
|
|
- <div class="config-actions w-[50px] flex items-center justify-between ">
|
|
|
- <svg
|
|
|
- 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.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"/>
|
|
|
- </svg>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <template #footer>
|
|
|
+ <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" 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="flex items-center mb-2 text-sm font-normal justify-start w-full">
|
|
|
+ <el-input style="width: 300px; margin-right: 20px" v-model="item.val" clearable :placeholder="t('marketingConfig.inputIPTip')"></el-input>
|
|
|
+ <div class="config-actions w-[50px] flex items-center justify-between">
|
|
|
+ <svg
|
|
|
+ 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.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" />
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <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>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="systemMenuDialog">
|
|
|
-import {useI18n} from 'vue-i18n';
|
|
|
-import {info, getAppList, save} from '/@/api/marketing/config';
|
|
|
-import {useMessage} from '/@/hooks/message';
|
|
|
-import {rule} from '/@/utils/validate';
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
+import { info, getAppList, save } from '/@/api/marketing/config';
|
|
|
+import { useMessage } from '/@/hooks/message';
|
|
|
+import { rule } from '/@/utils/validate';
|
|
|
|
|
|
// 定义子组件向父组件传值/事件
|
|
|
-const emit = defineEmits(['refresh']);
|
|
|
+const emit = defineEmits(['onsuccess']);
|
|
|
const { t } = useI18n();
|
|
|
|
|
|
// 定义变量内容
|
|
|
const visible = ref(false);
|
|
|
const loading = ref(false);
|
|
|
-const sign = ref('domain')
|
|
|
+const sign = ref('domain');
|
|
|
const menuDialogFormRef = ref();
|
|
|
// 定义需要的数据
|
|
|
const state = reactive({
|
|
|
- ruleForm: {
|
|
|
- list: [''],
|
|
|
- https: [''], // 域名集合
|
|
|
- ips: [''], // ip集合
|
|
|
- // {
|
|
|
- // id: '1',
|
|
|
- // ip: '美国',
|
|
|
- // appId: '1',
|
|
|
- // appUrl: 'www.baidu.com',
|
|
|
- // appName: 'adsa'
|
|
|
- // },
|
|
|
- },
|
|
|
- appList: [], // 应用下拉框列表
|
|
|
+ ruleForm: {
|
|
|
+ list: [{
|
|
|
+ val:'192.168.0.32',
|
|
|
+ }],
|
|
|
+ https: [''], // 域名集合
|
|
|
+ ips: [''], // ip集合
|
|
|
+ // {
|
|
|
+ // id: '1',
|
|
|
+ // ip: '美国',
|
|
|
+ // appId: '1',
|
|
|
+ // appUrl: 'www.baidu.com',
|
|
|
+ // appName: 'adsa'
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ appList: [], // 应用下拉框列表
|
|
|
});
|
|
|
|
|
|
// // 表单校验规则
|
|
|
-// const dataRules = reactive({
|
|
|
-// domain: [
|
|
|
-// {required: true, message: '域名不能为空', trigger: 'blur'},
|
|
|
-// // { validator: rule.url, trigger: 'blur' }
|
|
|
-// ],
|
|
|
-// });
|
|
|
+const dataRules = reactive({
|
|
|
+ domain: [
|
|
|
+ {required: true, message: sign.value == 'domain' ? '域名':'ip'+'不能为空', trigger: 'blur'},
|
|
|
+ { validator: sign.value == 'domain'?rule.domain : rule.ip, trigger: 'blur' }
|
|
|
+ ],
|
|
|
+});
|
|
|
|
|
|
// 分页参数
|
|
|
const pagination = reactive({
|
|
|
- current: 1,
|
|
|
- size: 10,
|
|
|
- total: 0
|
|
|
-})
|
|
|
+ current: 1,
|
|
|
+ size: 10,
|
|
|
+ total: 0,
|
|
|
+});
|
|
|
|
|
|
// 打开弹窗
|
|
|
const openDialog = async (type, row, str = 'domain') => {
|
|
|
- visible.value = true;
|
|
|
- sign.value = str;
|
|
|
- nextTick(() => {
|
|
|
- menuDialogFormRef.value?.resetFields();
|
|
|
- });
|
|
|
- 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();
|
|
|
+ visible.value = true;
|
|
|
+ sign.value = type;
|
|
|
+ nextTick(() => {
|
|
|
+ menuDialogFormRef.value?.resetFields();
|
|
|
+ });
|
|
|
+ // 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();
|
|
|
};
|
|
|
|
|
|
// 获取当条配置信息
|
|
|
const getConfigDetail = (id) => {
|
|
|
- info(id).then((res) => {
|
|
|
- Object.assign(state.ruleForm, res.data);
|
|
|
- });
|
|
|
+ info(id).then((res) => {
|
|
|
+ Object.assign(state.ruleForm, res.data);
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
// 保存数据
|
|
|
const onSubmit = async () => {
|
|
|
- // 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;
|
|
|
- await save(state.ruleForm);
|
|
|
- useMessage().success(t(state.ruleForm.id ? 'common.editSuccessText' : 'common.addSuccessText'));
|
|
|
- visible.value = false;
|
|
|
- emit('refresh');
|
|
|
- } catch (err) {
|
|
|
- useMessage().error(err.msg);
|
|
|
- } finally {
|
|
|
- loading.value = 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;
|
|
|
+ // await save(state.ruleForm);
|
|
|
+ useMessage().success(t(state.ruleForm.id ? 'common.editSuccessText' : 'common.addSuccessText'));
|
|
|
+ visible.value = false;
|
|
|
+ emit('onsuccess');
|
|
|
+ } catch (err) {
|
|
|
+ useMessage().error(err.msg);
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
// 暴露变量 只有暴漏出来的变量 父组件才能使用
|
|
|
defineExpose({
|
|
|
- openDialog,
|
|
|
+ openDialog,
|
|
|
});
|
|
|
</script>
|
|
|
<style>
|
|
|
.apps-loadmore.el-select-dropdown .el-scrollbar__wrap {
|
|
|
- height: 330px !important;
|
|
|
+ height: 330px !important;
|
|
|
}
|
|
|
</style>
|