mirror of https://github.com/1Panel-dev/1Panel
fix: 面板设置界面样式统一 (#1177)
ssongliu
GitHub
parent
ec843f2396
commit
9f5a03419e
|
|
@ -46,21 +46,15 @@
|
|||
<el-col :span="10">
|
||||
<el-form :model="form" label-position="left" :rules="rules" ref="formRef" label-width="150px">
|
||||
<el-form-item :label="$t('container.mirrors')" prop="mirrors">
|
||||
<div style="width: 100%">
|
||||
<div style="width: 100%" v-if="form.mirrors">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 5 }"
|
||||
disabled
|
||||
v-if="form.mirrors"
|
||||
v-model="form.mirrors"
|
||||
style="width: calc(100% - 80px)"
|
||||
/>
|
||||
<el-button
|
||||
v-if="form.mirrors"
|
||||
style="width: 80px"
|
||||
@click="onChangeMirrors"
|
||||
icon="Setting"
|
||||
>
|
||||
<el-button class="append-button" @click="onChangeMirrors" icon="Setting">
|
||||
{{ $t('commons.button.set') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
@ -85,21 +79,15 @@
|
|||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('container.registries')" prop="registries">
|
||||
<div style="width: 100%">
|
||||
<div style="width: 100%" v-if="form.registries">
|
||||
<el-input
|
||||
v-if="form.registries"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 5 }"
|
||||
disabled
|
||||
v-model="form.registries"
|
||||
style="width: calc(100% - 80px)"
|
||||
/>
|
||||
<el-button
|
||||
v-if="form.mirrors"
|
||||
style="width: 80px"
|
||||
@click="onChangeRegistries"
|
||||
icon="Setting"
|
||||
>
|
||||
<el-button class="append-button" @click="onChangeRegistries" icon="Setting">
|
||||
{{ $t('commons.button.set') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
@ -465,4 +453,10 @@ onMounted(() => {
|
|||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.append-button {
|
||||
width: 80px;
|
||||
background-color: var(--el-fill-color-light);
|
||||
color: var(--el-color-info);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,35 +7,13 @@
|
|||
<el-form label-position="top" @submit.prevent v-loading="loading">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :span="22">
|
||||
<el-form-item>
|
||||
<table style="width: 100%" class="tab-table">
|
||||
<tr v-if="allowIPs.length !== 0">
|
||||
<th scope="col" width="90%" align="left">
|
||||
<label>{{ $t('setting.allowIPs') }}</label>
|
||||
</th>
|
||||
<th align="left"></th>
|
||||
</tr>
|
||||
<tr v-for="(row, index) in allowIPs" :key="index">
|
||||
<td width="90%">
|
||||
<el-form-item :label="$t('setting.allowIPs')">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:placeholder="$t('setting.allowIPEgs')"
|
||||
style="width: 100%"
|
||||
v-model="row.value"
|
||||
:autosize="{ minRows: 8, maxRows: 10 }"
|
||||
v-model="allowIPs"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<el-button link style="font-size: 10px" @click="handlePortsDelete(index)">
|
||||
{{ $t('commons.button.delete') }}
|
||||
</el-button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="left">
|
||||
<el-button @click="handlePortsAdd()">{{ $t('commons.button.add') }}</el-button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<span class="input-help">{{ $t('setting.allowIPsHelper1') }}</span>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -69,40 +47,22 @@ const drawerVisiable = ref();
|
|||
const loading = ref();
|
||||
|
||||
const acceptParams = (params: DialogProps): void => {
|
||||
allowIPs.value = [];
|
||||
if (params.allowIPs) {
|
||||
for (const ip of params.allowIPs.split(',')) {
|
||||
if (ip) {
|
||||
allowIPs.value.push({ value: ip });
|
||||
}
|
||||
}
|
||||
}
|
||||
allowIPs.value = params.allowIPs;
|
||||
drawerVisiable.value = true;
|
||||
};
|
||||
|
||||
const handlePortsAdd = () => {
|
||||
let item = {
|
||||
value: '',
|
||||
};
|
||||
allowIPs.value.push(item);
|
||||
};
|
||||
const handlePortsDelete = (index: number) => {
|
||||
allowIPs.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const onSavePort = async () => {
|
||||
let allows = '';
|
||||
if (allowIPs.value.length !== 0) {
|
||||
for (const ip of allowIPs.value) {
|
||||
if (checkIp(ip.value)) {
|
||||
if (allowIPs.value) {
|
||||
let ips = allowIPs.value.split('\n');
|
||||
for (const ip of ips) {
|
||||
if (ip) {
|
||||
if (checkIp(ip)) {
|
||||
MsgError(i18n.global.t('firewall.addressFormatError'));
|
||||
return false;
|
||||
}
|
||||
allows += ip.value + ',';
|
||||
}
|
||||
allows = allows.substring(0, allows.length - 1);
|
||||
}
|
||||
|
||||
}
|
||||
ElMessageBox.confirm(i18n.global.t('setting.allowIPsHelper'), i18n.global.t('setting.allowIPs'), {
|
||||
confirmButtonText: i18n.global.t('commons.button.confirm'),
|
||||
cancelButtonText: i18n.global.t('commons.button.cancel'),
|
||||
|
|
@ -110,7 +70,7 @@ const onSavePort = async () => {
|
|||
}).then(async () => {
|
||||
loading.value = true;
|
||||
|
||||
await updateSetting({ key: 'AllowIPs', value: allows })
|
||||
await updateSetting({ key: 'AllowIPs', value: allowIPs.value.replaceAll('\n', ',') })
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
|
||||
|
|
|
|||
|
|
@ -40,13 +40,18 @@
|
|||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('setting.allowIPs')">
|
||||
<el-input v-if="form.allowIPs" disabled v-model="form.allowIPs">
|
||||
<template #append>
|
||||
<el-button @click="onChangeAllowIPs" icon="Setting">
|
||||
<div style="width: 100%" v-if="form.allowIPs">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 5 }"
|
||||
disabled
|
||||
v-model="form.allowIPs"
|
||||
style="width: calc(100% - 80px)"
|
||||
/>
|
||||
<el-button class="append-button" @click="onChangeAllowIPs" icon="Setting">
|
||||
{{ $t('commons.button.set') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-input disabled v-if="!form.allowIPs" v-model="unset">
|
||||
<template #append>
|
||||
<el-button @click="onChangeAllowIPs" icon="Setting">
|
||||
|
|
@ -206,7 +211,7 @@ const search = async () => {
|
|||
form.expirationTime = res.data.expirationTime;
|
||||
form.complexityVerification = res.data.complexityVerification;
|
||||
form.mfaStatus = res.data.mfaStatus;
|
||||
form.allowIPs = res.data.allowIPs || '';
|
||||
form.allowIPs = res.data.allowIPs.replaceAll(',', '\n');
|
||||
form.bindDomain = res.data.bindDomain;
|
||||
};
|
||||
|
||||
|
|
@ -311,3 +316,11 @@ onMounted(() => {
|
|||
getSystemAvailable();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.append-button {
|
||||
width: 80px;
|
||||
background-color: var(--el-fill-color-light);
|
||||
color: var(--el-color-info);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue