|
1 | 1 | <template> |
2 | | - <el-dialog |
3 | | - :title="$t('views.applicationOverview.appInfo.accessControl')" |
4 | | - v-model="dialogVisible" |
5 | | - :close-on-click-modal="false" |
6 | | - :close-on-press-escape="false" |
7 | | - width="650" |
8 | | - > |
9 | | - <el-form label-position="top" ref="limitFormRef" :model="form"> |
| 2 | + <el-drawer v-model="dialogVisible" size="60%"> |
| 3 | + <template #header> |
| 4 | + <h4>{{ $t('views.applicationOverview.appInfo.accessControl') }}</h4> |
| 5 | + </template> |
| 6 | + <el-form |
| 7 | + label-position="top" |
| 8 | + ref="limitFormRef" |
| 9 | + :model="form" |
| 10 | + require-asterisk-position="right" |
| 11 | + > |
10 | 12 | <el-form-item |
11 | 13 | :label="$t('views.applicationOverview.appInfo.LimitDialog.clientQueryLimitLabel')" |
12 | 14 | > |
|
28 | 30 | <el-form-item :label="$t('views.applicationOverview.appInfo.LimitDialog.authentication')"> |
29 | 31 | <el-switch size="small" v-model="form.authentication" @change="firstGeneration"></el-switch> |
30 | 32 | </el-form-item> |
31 | | - <el-form-item |
32 | | - prop="authentication_value" |
33 | | - v-if="form.authentication" |
34 | | - :label="$t('views.applicationOverview.appInfo.LimitDialog.authenticationValue')" |
35 | | - > |
36 | | - <el-input |
37 | | - class="authentication-append-input" |
38 | | - v-model="form.authentication_value" |
39 | | - readonly |
40 | | - style="width: 268px" |
41 | | - disabled |
42 | | - > |
43 | | - <template #append> |
44 | | - <el-tooltip :content="$t('common.copy')" placement="top"> |
45 | | - <el-button |
46 | | - type="primary" |
47 | | - text |
48 | | - @click="copyClick(form.authentication_value)" |
49 | | - style="margin: 0 4px !important" |
50 | | - > |
51 | | - <AppIcon iconName="app-copy"></AppIcon> |
52 | | - </el-button> |
53 | | - </el-tooltip> |
54 | | - <el-tooltip :content="$t('common.refresh')" placement="top"> |
55 | | - <el-button |
56 | | - @click="refreshAuthentication" |
57 | | - type="primary" |
58 | | - text |
59 | | - style="margin: 0 4px 0 0 !important" |
60 | | - > |
61 | | - <el-icon><RefreshRight /></el-icon> |
| 33 | + <el-radio-group v-if="form.authentication" v-model="form.method" class="card__radio"> |
| 34 | + <el-card shadow="never" class="mb-16" :class="form.method === 'replace' ? 'active' : ''"> |
| 35 | + <el-radio value="replace" size="large"> |
| 36 | + <p class="mb-4 lighter"> |
| 37 | + {{ $t('views.applicationOverview.appInfo.LimitDialog.authenticationValue') }} |
| 38 | + </p> |
| 39 | + </el-radio> |
| 40 | + <el-form-item class="ml-24"> |
| 41 | + <el-input |
| 42 | + class="authentication-append-input" |
| 43 | + v-model="form.authentication_value" |
| 44 | + readonly |
| 45 | + style="width: 268px" |
| 46 | + > |
| 47 | + <template #append> |
| 48 | + <el-tooltip :content="$t('common.copy')" placement="top"> |
| 49 | + <el-button |
| 50 | + type="primary" |
| 51 | + text |
| 52 | + @click="copyClick(form.authentication_value)" |
| 53 | + style="margin: 0 0 0 4px !important" |
| 54 | + > |
| 55 | + <AppIcon iconName="app-copy"></AppIcon> |
| 56 | + </el-button> |
| 57 | + </el-tooltip> |
| 58 | + <el-tooltip :content="$t('common.refresh')" placement="top"> |
| 59 | + <el-button |
| 60 | + @click="refreshAuthentication" |
| 61 | + type="primary" |
| 62 | + text |
| 63 | + style="margin: 0 4px 0 0 !important" |
| 64 | + > |
| 65 | + <el-icon><RefreshRight /></el-icon> |
| 66 | + </el-button> |
| 67 | + </el-tooltip> |
| 68 | + </template> |
| 69 | + </el-input> |
| 70 | + </el-form-item> |
| 71 | + </el-card> |
| 72 | + |
| 73 | + <el-card shadow="never" class="mb-16" :class="form.method === 'complete' ? 'active' : ''"> |
| 74 | + <el-radio value="complete" size="large"> |
| 75 | + <p class="mb-16 lighter"> |
| 76 | + {{ $t('views.system.authentication.title') }} |
| 77 | + <el-button type="primary" link @click="router.push({ path: '' })"> |
| 78 | + {{ '去配置对话用户' }} |
62 | 79 | </el-button> |
63 | | - </el-tooltip> |
64 | | - </template> |
65 | | - </el-input> |
66 | | - </el-form-item> |
| 80 | + </p> |
| 81 | + </el-radio> |
| 82 | + <el-form-item |
| 83 | + label="登录方式" |
| 84 | + :rules="[ |
| 85 | + { |
| 86 | + required: true, |
| 87 | + message: $t('请选择登录方式'), |
| 88 | + trigger: 'change', |
| 89 | + }, |
| 90 | + ]" |
| 91 | + prop="checkList" |
| 92 | + class="ml-24 border-t" |
| 93 | + style="padding-top: 16px" |
| 94 | + > |
| 95 | + <el-checkbox-group v-model="form.checkList"> |
| 96 | + <el-checkbox label="账号登录" value="账号登录" /> |
| 97 | + <el-checkbox label="LDAP" value="LDAP" /> |
| 98 | + <el-checkbox label="OIDC" value="OIDC" /> |
| 99 | + <el-checkbox label="CAS" value="CAS" /> |
| 100 | + <el-checkbox label="企业微信" value="企业微信" /> |
| 101 | + <el-checkbox label="钉钉" value="钉钉" /> |
| 102 | + <el-checkbox label="飞书" value="飞书" /> |
| 103 | + </el-checkbox-group> |
| 104 | + </el-form-item> |
| 105 | + </el-card> |
| 106 | + </el-radio-group> |
| 107 | + |
67 | 108 | <el-form-item |
68 | 109 | :label="$t('views.applicationOverview.appInfo.LimitDialog.whitelistLabel')" |
69 | 110 | @click.prevent |
|
80 | 121 | </el-form-item> |
81 | 122 | </el-form> |
82 | 123 | <template #footer> |
83 | | - <span class="dialog-footer"> |
| 124 | + <div> |
84 | 125 | <el-button @click.prevent="dialogVisible = false">{{ $t('common.cancel') }} </el-button> |
85 | 126 | <el-button type="primary" @click="submit(limitFormRef)" :loading="loading"> |
86 | | - {{ $t('common.save') }} |
| 127 | + {{ $t('common.create') }} |
87 | 128 | </el-button> |
88 | | - </span> |
| 129 | + </div> |
89 | 130 | </template> |
90 | | - </el-dialog> |
| 131 | + </el-drawer> |
91 | 132 | </template> |
92 | 133 | <script setup lang="ts"> |
93 | 134 | import { ref, watch } from 'vue' |
94 | | -import { useRoute } from 'vue-router' |
| 135 | +import { useRoute, useRouter } from 'vue-router' |
95 | 136 | import type { FormInstance, FormRules } from 'element-plus' |
96 | 137 | import applicationApi from '@/api/application/application' |
97 | 138 | import { MsgSuccess } from '@/utils/message' |
98 | 139 | import { t } from '@/locales' |
99 | 140 | import { copyClick } from '@/utils/clipboard' |
100 | 141 |
|
| 142 | +const router = useRouter() |
101 | 143 | const route = useRoute() |
102 | 144 | const { |
103 | 145 | params: { id }, |
@@ -178,7 +220,7 @@ defineExpose({ open }) |
178 | 220 | </script> |
179 | 221 | <style lang="scss" scoped> |
180 | 222 | .authentication-append-input { |
181 | | - .el-input-group__append { |
| 223 | + :deep(.el-input-group__append) { |
182 | 224 | padding: 0 !important; |
183 | 225 | } |
184 | 226 | } |
|
0 commit comments