mirror of https://github.com/1Panel-dev/1Panel
zhengkunwang223
2 years ago
committed by
GitHub
19 changed files with 801 additions and 7 deletions
@ -0,0 +1,118 @@
|
||||
<template> |
||||
<el-drawer v-model="open" :close-on-click-modal="false" size="40%" :before-close="handleClose"> |
||||
<template #header> |
||||
<DrawerHeader |
||||
:header="$t('commons.button.' + authBasic.operate) + $t('website.basicAuth')" |
||||
:back="handleClose" |
||||
/> |
||||
</template> |
||||
<el-row v-loading="loading"> |
||||
<el-col :span="22" :offset="1"> |
||||
<el-form-item> |
||||
<el-alert |
||||
v-if="authBasic.operate === 'edit'" |
||||
:title="$t('website.editBasicAuthHelper')" |
||||
type="info" |
||||
:closable="false" |
||||
/> |
||||
</el-form-item> |
||||
<el-form ref="proxyForm" label-position="top" :model="authBasic" :rules="rules"> |
||||
<el-form-item :label="$t('commons.table.name')" prop="username"> |
||||
<el-input v-model.trim="authBasic.username" :disabled="authBasic.operate === 'edit'"></el-input> |
||||
</el-form-item> |
||||
<el-form-item :label="$t('commons.login.password')" prop="password"> |
||||
<el-input type="password" clearable show-password v-model.trim="authBasic.password"> |
||||
<template #append> |
||||
<el-button @click="random"> |
||||
{{ $t('website.createPassword') }} |
||||
</el-button> |
||||
</template> |
||||
</el-input> |
||||
</el-form-item> |
||||
<el-form-item :label="$t('website.remark')" prop="remark"> |
||||
<el-input v-model.trim="authBasic.remark"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-col> |
||||
</el-row> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button> |
||||
<el-button type="primary" @click="submit(proxyForm)" :disabled="loading"> |
||||
{{ $t('commons.button.confirm') }} |
||||
</el-button> |
||||
</span> |
||||
</template> |
||||
</el-drawer> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import DrawerHeader from '@/components/drawer-header/index.vue'; |
||||
import { OperateAuthConfig } from '@/api/modules/website'; |
||||
import { Rules } from '@/global/form-rules'; |
||||
import i18n from '@/lang'; |
||||
import { FormInstance } from 'element-plus'; |
||||
import { ref } from 'vue'; |
||||
import { MsgSuccess } from '@/utils/message'; |
||||
import { Website } from '@/api/interface/website'; |
||||
import { getRandomStr } from '@/utils/util'; |
||||
|
||||
const proxyForm = ref<FormInstance>(); |
||||
const rules = ref({ |
||||
username: [Rules.requiredInput, Rules.name], |
||||
password: [Rules.requiredInput], |
||||
}); |
||||
const open = ref(false); |
||||
const loading = ref(false); |
||||
|
||||
const initData = (): Website.NginxAuthConfig => ({ |
||||
websiteID: 0, |
||||
operate: 'create', |
||||
username: '', |
||||
password: '', |
||||
remark: '', |
||||
}); |
||||
|
||||
let authBasic = ref(initData()); |
||||
const em = defineEmits(['close']); |
||||
const handleClose = () => { |
||||
proxyForm.value?.resetFields(); |
||||
open.value = false; |
||||
em('close', false); |
||||
}; |
||||
|
||||
const random = async () => { |
||||
authBasic.value.password = getRandomStr(16); |
||||
}; |
||||
|
||||
const acceptParams = (proxyParam: Website.NginxAuthConfig) => { |
||||
authBasic.value = proxyParam; |
||||
open.value = true; |
||||
}; |
||||
|
||||
const submit = async (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
await formEl.validate((valid) => { |
||||
if (!valid) { |
||||
return; |
||||
} |
||||
loading.value = true; |
||||
OperateAuthConfig(authBasic.value) |
||||
.then(() => { |
||||
if (authBasic.value.operate == 'create') { |
||||
MsgSuccess(i18n.global.t('commons.msg.createSuccess')); |
||||
} else { |
||||
MsgSuccess(i18n.global.t('commons.msg.updateSuccess')); |
||||
} |
||||
handleClose(); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}); |
||||
}; |
||||
|
||||
defineExpose({ |
||||
acceptParams, |
||||
}); |
||||
</script> |
||||
@ -0,0 +1,118 @@
|
||||
<template> |
||||
<el-form-item prop="enable" :label="$t('website.enableOrNot')"> |
||||
<el-switch v-model="enable" @change="changeEnable"></el-switch> |
||||
</el-form-item> |
||||
<ComplexTable :data="data" @search="search" v-loading="loading"> |
||||
<template #toolbar> |
||||
<el-button type="primary" plain @click="openCreate"> |
||||
{{ $t('commons.button.create') + $t('website.basicAuth') }} |
||||
</el-button> |
||||
</template> |
||||
<el-table-column :label="$t('commons.table.name')" prop="username"></el-table-column> |
||||
<el-table-column :label="$t('website.remark')" prop="remark"></el-table-column> |
||||
<fu-table-operations |
||||
:ellipsis="10" |
||||
width="260px" |
||||
:buttons="buttons" |
||||
:label="$t('commons.table.operate')" |
||||
fixed="right" |
||||
fix |
||||
/> |
||||
</ComplexTable> |
||||
<Create ref="createRef" @close="search()" /> |
||||
</template> |
||||
|
||||
<script lang="ts" setup name="proxy"> |
||||
import { Website } from '@/api/interface/website'; |
||||
import { OperateAuthConfig, GetAuthConfig } from '@/api/modules/website'; |
||||
import { computed, onMounted, ref } from 'vue'; |
||||
import i18n from '@/lang'; |
||||
import Create from './create/index.vue'; |
||||
import { useDeleteData } from '@/hooks/use-delete-data'; |
||||
import { MsgSuccess } from '@/utils/message'; |
||||
|
||||
const props = defineProps({ |
||||
id: { |
||||
type: Number, |
||||
default: 0, |
||||
}, |
||||
}); |
||||
const id = computed(() => { |
||||
return props.id; |
||||
}); |
||||
const loading = ref(false); |
||||
const data = ref(); |
||||
const createRef = ref(); |
||||
const enable = ref(false); |
||||
|
||||
const buttons = [ |
||||
{ |
||||
label: i18n.global.t('commons.button.edit'), |
||||
click: function (row: Website.NginxAuthConfig) { |
||||
openEdit(row); |
||||
}, |
||||
}, |
||||
{ |
||||
label: i18n.global.t('commons.button.delete'), |
||||
click: function (row: Website.NginxAuthConfig) { |
||||
deleteAuth(row); |
||||
}, |
||||
}, |
||||
]; |
||||
|
||||
const initData = (id: number): Website.NginxAuthConfig => ({ |
||||
websiteID: id, |
||||
operate: 'create', |
||||
username: '', |
||||
password: '', |
||||
remark: '', |
||||
}); |
||||
|
||||
const openCreate = () => { |
||||
createRef.value.acceptParams(initData(id.value)); |
||||
}; |
||||
|
||||
const openEdit = (authConfig: Website.NginxAuthConfig) => { |
||||
let authParam = JSON.parse(JSON.stringify(authConfig)); |
||||
authParam.operate = 'edit'; |
||||
authParam.websiteID = id.value; |
||||
createRef.value.acceptParams(authParam); |
||||
}; |
||||
|
||||
const deleteAuth = async (authConfig: Website.NginxAuthConfig) => { |
||||
authConfig.operate = 'delete'; |
||||
authConfig.websiteID = id.value; |
||||
await useDeleteData(OperateAuthConfig, authConfig, 'commons.msg.delete'); |
||||
search(); |
||||
}; |
||||
|
||||
const changeEnable = () => { |
||||
const req = initData(id.value); |
||||
req.operate = enable.value ? 'enable' : 'disable'; |
||||
loading.value = true; |
||||
OperateAuthConfig(req) |
||||
.then(() => { |
||||
MsgSuccess(i18n.global.t('commons.msg.updateSuccess')); |
||||
search(); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
|
||||
const search = async () => { |
||||
try { |
||||
loading.value = true; |
||||
const res = await GetAuthConfig({ websiteID: id.value }); |
||||
data.value = res.data.items || []; |
||||
enable.value = res.data.enable; |
||||
} catch (error) { |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
}; |
||||
|
||||
onMounted(() => { |
||||
search(); |
||||
}); |
||||
</script> |
||||
Loading…
Reference in new issue