11<template >
2- <DrawerPro v-model =" open" :title =" $t('aiTools.proxy.proxy')" :back =" handleClose" size =" large" >
2+ <DrawerPro v-model =" open" :header =" $t('aiTools.proxy.proxy')" :back =" handleClose" size =" large" >
33 <div v-loading =" loading" >
44 <el-form ref =" formRef" label-position =" top" @submit.prevent :model =" req" :rules =" rules" >
5- <el-row type =" flex" justify =" center" >
6- <el-col :span =" 22" >
7- <el-alert class =" common-prompt" :closable =" false" type =" warning" >
8- <template #default >
9- <ul >
10- <li >{{ $t('aiTools.proxy.proxyHelper1') }}</li >
11- <li >{{ $t('aiTools.proxy.proxyHelper2') }}</li >
12- <li >{{ $t('aiTools.proxy.proxyHelper3') }}</li >
13- </ul >
14- </template >
15- </el-alert >
16- <el-form-item :label =" $t('website.domain')" prop =" domain" >
17- <el-input v-model.trim =" req.domain" :disabled =" operate === 'update'" />
18- <span class =" input-help" >
19- {{ $t('aiTools.proxy.proxyHelper4') }}
20- </span >
21- <span class =" input-help" >
22- {{ $t('aiTools.proxy.proxyHelper6') }}
23- <el-link
24- class =" pageRoute"
25- icon =" Position"
26- @click =" toWebsite(req.websiteID)"
27- type =" primary"
28- >
29- {{ $t('firewall.quickJump') }}
30- </el-link >
31- </span >
32- </el-form-item >
33- <el-form-item :label =" $t('xpack.waf.whiteList') + ' IP'" prop =" ipList" >
34- <el-input
35- :rows =" 3"
36- type =" textarea"
37- clearable
38- v-model =" req.ipList"
39- :placeholder =" $t('xpack.waf.ipGroupHelper')"
40- />
41- <span class =" input-help" >
42- {{ $t('aiTools.proxy.whiteListHelper') }}
43- </span >
44- </el-form-item >
45- <el-form-item >
46- <el-checkbox v-model =" req.enableSSL" @change =" changeSSL" >
47- {{ $t('website.enable') + ' ' + 'HTTPS' }}
48- </el-checkbox >
49- </el-form-item >
50- <el-form-item
51- :label =" $t('website.acmeAccountManage')"
52- prop =" acmeAccountID"
53- v-if =" req.enableSSL"
5+ <el-alert class =" common-prompt" :closable =" false" type =" warning" >
6+ <template #default >
7+ <ul >
8+ <li >{{ $t('aiTools.proxy.proxyHelper1') }}</li >
9+ <li >{{ $t('aiTools.proxy.proxyHelper2') }}</li >
10+ <li >{{ $t('aiTools.proxy.proxyHelper3') }}</li >
11+ </ul >
12+ </template >
13+ </el-alert >
14+ <el-form-item :label =" $t('website.domain')" prop =" domain" >
15+ <el-input v-model.trim =" req.domain" :disabled =" operate === 'update'" />
16+ <span class =" input-help" >
17+ {{ $t('aiTools.proxy.proxyHelper4') }}
18+ </span >
19+ <span class =" input-help" >
20+ {{ $t('aiTools.proxy.proxyHelper6') }}
21+ <el-link class =" pageRoute" icon =" Position" @click =" toWebsite(req.websiteID)" type =" primary" >
22+ {{ $t('firewall.quickJump') }}
23+ </el-link >
24+ </span >
25+ </el-form-item >
26+ <el-form-item :label =" $t('xpack.waf.whiteList') + ' IP'" prop =" ipList" >
27+ <el-input
28+ :rows =" 3"
29+ type =" textarea"
30+ clearable
31+ v-model =" req.ipList"
32+ :placeholder =" $t('xpack.waf.ipGroupHelper')"
33+ />
34+ <span class =" input-help" >
35+ {{ $t('aiTools.proxy.whiteListHelper') }}
36+ </span >
37+ </el-form-item >
38+ <el-form-item >
39+ <el-checkbox v-model =" req.enableSSL" @change =" changeSSL" >
40+ {{ $t('website.enable') + ' ' + 'HTTPS' }}
41+ </el-checkbox >
42+ </el-form-item >
43+ <el-form-item :label =" $t('website.acmeAccountManage')" prop =" acmeAccountID" v-if =" req.enableSSL" >
44+ <el-select v-model =" req.acmeAccountID" :placeholder =" $t('website.selectAcme')" @change =" loadSSL" >
45+ <el-option :key =" 0" :label =" $t('website.imported')" :value =" 0" ></el-option >
46+ <el-option
47+ v-for =" (acme, index) in acmeAccounts"
48+ :key =" index"
49+ :label =" acme.email"
50+ :value =" acme.id"
5451 >
55- <el-select
56- v-model =" req.acmeAccountID"
57- :placeholder =" $t('website.selectAcme')"
58- @change =" listSSL"
59- >
60- <el-option :key =" 0" :label =" $t('website.imported')" :value =" 0" ></el-option >
61- <el-option
62- v-for =" (acme, index) in acmeAccounts"
63- :key =" index"
64- :label =" acme.email"
65- :value =" acme.id"
66- >
67- <span >
68- {{ acme.email }}
69- <el-tag class =" ml-5" >{{ getAccountName(acme.type) }}</el-tag >
70- </span >
71- </el-option >
72- </el-select >
73- </el-form-item >
74- <el-form-item :label =" $t('website.ssl')" prop =" sslID" v-if =" req.enableSSL" >
75- <el-select
76- v-model =" req.sslID"
77- :placeholder =" $t('website.selectSSL')"
78- @change =" changeSSl(req.sslID)"
79- >
80- <el-option
81- v-for =" (ssl, index) in ssls"
82- :key =" index"
83- :label =" ssl.primaryDomain"
84- :value =" ssl.id"
85- ></el-option >
86- </el-select >
87- </el-form-item >
88- <el-alert :closable =" false" >
89- {{ $t('aiTools.proxy.proxyHelper5') }}
90- <el-link class =" pageRoute" icon =" Position" @click =" toInstalled()" type =" primary" >
91- {{ $t('firewall.quickJump') }}
92- </el-link >
93- </el-alert >
94- </el-col >
95- </el-row >
52+ <span >
53+ {{ acme.email }}
54+ <el-tag class =" ml-5" >{{ getAccountName(acme.type) }}</el-tag >
55+ </span >
56+ </el-option >
57+ </el-select >
58+ </el-form-item >
59+ <el-form-item :label =" $t('website.ssl')" prop =" sslID" v-if =" req.enableSSL" >
60+ <el-select
61+ v-model =" req.sslID"
62+ :placeholder =" $t('website.selectSSL')"
63+ @change =" changeSSl(req.sslID)"
64+ >
65+ <el-option
66+ v-for =" (ssl, index) in ssls"
67+ :key =" index"
68+ :label =" ssl.primaryDomain"
69+ :value =" ssl.id"
70+ ></el-option >
71+ </el-select >
72+ </el-form-item >
73+ <el-alert :closable =" false" >
74+ {{ $t('aiTools.proxy.proxyHelper5') }}
75+ <el-link class =" pageRoute" icon =" Position" @click =" toInstalled()" type =" primary" >
76+ {{ $t('firewall.quickJump') }}
77+ </el-link >
78+ </el-alert >
9679 </el-form >
9780 </div >
9881 <template #footer >
@@ -134,6 +117,9 @@ const req = ref({
134117 appInstallID: 0 ,
135118 websiteID: 0 ,
136119});
120+ const sslReq = reactive ({
121+ acmeAccountID: ' ' ,
122+ });
137123const rules = reactive <FormRules >({
138124 domain: [Rules .domainWithPort ],
139125 sslID: [Rules .requiredSelectBusiness ],
@@ -167,9 +153,7 @@ const changeSSL = () => {
167153};
168154
169155const loadSSL = () => {
170- const sslReq = {
171- acmeAccountID: String (req .value .acmeAccountID ),
172- };
156+ sslReq .acmeAccountID = String (req .value .acmeAccountID );
173157 listSSL (sslReq ).then ((res ) => {
174158 ssls .value = res .data || [];
175159 if (ssls .value .length > 0 ) {
@@ -193,9 +177,6 @@ const loadSSL = () => {
193177const listAcmeAccount = () => {
194178 searchAcmeAccount ({ page: 1 , pageSize: 100 }).then ((res ) => {
195179 acmeAccounts .value = res .data .items || [];
196- if (acmeAccounts .value .length > 0 ) {
197- req .value .acmeAccountID = acmeAccounts .value [0 ].id ;
198- }
199180 loadSSL ();
200181 });
201182};
@@ -229,6 +210,7 @@ const search = async (appInstallID: number) => {
229210 if (res .data .sslID > 0 ) {
230211 req .value .enableSSL = true ;
231212 req .value .sslID = res .data .sslID ;
213+ req .value .acmeAccountID = res .data .acmeAccountID ;
232214 listAcmeAccount ();
233215 }
234216 }
0 commit comments