77 class =" max-w-screen-md"
88 :segmented =" {
99 content: true,
10- action: true
10+ action: true,
1111 }" >
1212 <n-card >
1313 <n-form
14+ ref =" formRef"
1415 label-placement =" left"
1516 :model =" formModel"
17+ :rules =" rules"
1618 label-align =" center"
1719 :label-width =" 130" >
1820 <n-grid :cols =" 24" :x-gap =" 18" >
19- <n-form-item-grid-item :span =" 24" label =" Access Key" path =" accessKey" >
21+ <n-form-item-gi :span =" 24" label =" Access Key" path =" accessKey" >
2022 <n-input v-model:value =" formModel.accessKey" />
21- </n-form-item-grid-item >
22- <n-form-item-grid-item :span =" 24" label =" Secret Key" path =" secretKey" >
23- <n-input
24- v-model:value =" formModel.secretKey"
25- show-password-on =" mousedown"
26- type =" password" />
27- </n-form-item-grid-item >
28- <n-form-item-grid-item :span =" 24" label =" 策略" path =" policy" >
29- <n-select
30- v-model:value =" formModel.policy"
31- filterable
32- multiple
33- :options =" polices" />
34- </n-form-item-grid-item >
23+ </n-form-item-gi >
24+ <n-form-item-gi :span =" 24" label =" Secret Key" path =" secretKey" >
25+ <n-input v-model:value =" formModel.secretKey" show-password-on =" mousedown" type =" password" />
26+ </n-form-item-gi >
3527
36- <!-- TODO: 时间格式有问题 -->
37- <n-form-item-grid-item :span =" 24" label =" 有效期" path =" expiry" >
28+ <!-- <n-form-item-gi :span="24" label="策略" path="policy">
29+ <n-select v-model:value="formModel.policy" filterable multiple :options="polices" />
30+ </n-form-item-gi> -->
31+
32+ <n-form-item-gi :span =" 24" label =" 有效期" path =" expiry" >
3833 <n-date-picker
3934 class =" !w-full"
4035 v-model:value =" formModel.expiry"
4136 :is-date-disabled =" dateDisabled"
42- value-format =" yyyy-MM-ddTkk:mm:SSS"
4337 type =" datetime"
4438 clearable />
45- </n-form-item-grid-item >
46- <n-form-item-grid-item :span =" 24" label =" 名称" path =" name" >
39+ </n-form-item-gi >
40+ <n-form-item-gi :span =" 24" label =" 名称" path =" name" >
4741 <n-input v-model:value =" formModel.name" />
48- </n-form-item-grid-item >
49- <!-- <n-form-item-grid-item :span="24" label="描述" path="comment">
42+ </n-form-item-gi >
43+ <!-- <n-form-item-gi :span="24" label="描述" path="comment">
5044 <n-input v-model:value="formModel.comment" />
51- </n-form-item-grid-item > -->
52- <n-form-item-grid-item :span =" 24" label =" 注释" path =" description" >
45+ </n-form-item-gi > -->
46+ <n-form-item-gi :span =" 24" label =" 注释" path =" description" >
5347 <n-input v-model:value =" formModel.description" />
54- </n-form-item-grid-item >
55- <!-- <n-form-item-grid-item
56- :span="24"
57- label="限制超出用户策略"
58- path="flag">
59- <n-switch v-model:value="formModel.flag" />
60- </n-form-item-grid-item>
61- <n-form-item-grid-item
62- v-if="formModel.flag"
63- :span="24"
64- label="策略详情"
65- path="policy">
48+ </n-form-item-gi >
49+ <n-form-item-gi :span =" 24" label =" 使用主账户策略" path =" impliedPolicy" >
50+ <n-switch v-model:value =" formModel.impliedPolicy" />
51+ </n-form-item-gi >
52+ <n-form-item-gi v-if =" !formModel.impliedPolicy" :span =" 24" label =" 当前用户策略" path =" policy" >
6653 <json-editor v-model =" formModel.policy" />
67- </n-form-item-grid-item> -- >
54+ </n-form-item-gi >
6855 </n-grid >
6956 </n-form >
7057 </n-card >
7764 </n-modal >
7865</template >
7966<script setup lang="ts">
80- import { computed , ref } from ' vue'
81- import { makeRandomString } from ' ~/utils/functions'
67+ import type { FormInst , FormItemRule } from " naive-ui"
68+ import { computed , ref } from " vue"
69+ import { makeRandomString } from " ~/utils/functions"
8270
8371interface Props {
8472 visible: boolean
@@ -87,26 +75,50 @@ const { visible } = defineProps<Props>()
8775const message = useMessage ()
8876const { $api } = useNuxtApp ()
8977const { createServiceAccount } = useAccessKeys ()
90- const { listPolicies } = usePolicies ()
91- const { credentials } = useAuth ()
9278
9379const emit = defineEmits <Emits >()
9480const defaultFormModal = {
9581 accessKey: makeRandomString (20 ),
9682 secretKey: makeRandomString (40 ),
97- name: ' ' ,
98- description: ' ' ,
99- comment: ' ' ,
83+ name: " " ,
84+ description: " " ,
85+ // comment: "" ,
10086 expiry: null ,
101- policy: [],
102- flag: false
87+ datetimeValue: null ,
88+ policy: " " ,
89+ impliedPolicy: true ,
10390}
10491const formModel = ref ({ ... defaultFormModal })
10592
93+ // 验证
94+ const rules = ref ({
95+ accessKey: {
96+ required: true ,
97+ trigger: [" blur" , " input" ],
98+ message: " 请输入Access Key" ,
99+ },
100+ secretKey: {
101+ required: true ,
102+ trigger: [" blur" , " input" ],
103+ message: " 请输入Secret Key" ,
104+ },
105+ expiry: {
106+ required: true ,
107+ trigger: [" blur" , " change" ],
108+ // message: "请选择有效期",
109+ validator(rule : FormItemRule , value : string ) {
110+ if (! value ) {
111+ return new Error (" 请选择有效期" )
112+ }
113+ return true
114+ },
115+ },
116+ })
117+
106118interface Emits {
107- (e : ' update:visible' , visible : boolean ): void
108- (e : ' search' ): void
109- (e : ' notice' , data : object ): void
119+ (e : " update:visible" , visible : boolean ): void
120+ (e : " search" ): void
121+ (e : " notice" , data : object ): void
110122}
111123
112124const modalVisible = computed ({
@@ -115,49 +127,52 @@ const modalVisible = computed({
115127 },
116128 set(visible ) {
117129 closeModal (visible )
118- }
130+ },
119131})
120132function closeModal(visible = false ) {
121- emit (' update:visible' , visible )
133+ emit (" update:visible" , visible )
134+ formModel .value = { ... defaultFormModal , policy: JSON .stringify (parentPolicy .value ) }
122135}
123136
124137function dateDisabled(ts : number ) {
125138 const date = new Date (ts )
126139 return date < new Date ()
127140}
128- async function submitForm() {
129- try {
130- const res = await createServiceAccount ({
131- ... formModel .value ,
132- status: ' enabled' ,
133- policy: formModel .value .policy .join (' ,' ),
134- expiration: formModel .value .expiry
135- ? new Date (formModel .value .expiry ).toISOString ()
136- : null
137- })
138- message .success (' 添加成功' )
139- emit (' notice' , res )
140- closeModal ()
141- emit (' search' )
142- } catch (error ) {
143- console .log (' 🚀 ~ submitForm ~ error:' , error )
144- message .error (' 添加失败' )
145- }
146- }
147-
148- // 策略列表
149- const polices = ref <any []>([])
150141
151- const getPoliciesList = async () => {
152- const res = await listPolicies ()
153- polices .value = Object .keys (res ).map ((key ) => {
154- return {
155- label: key ,
156- value: key
142+ const formRef = ref <FormInst | null >(null )
143+ async function submitForm(e : MouseEvent ) {
144+ // e.preventDefault()
145+ formRef .value ?.validate (async (errors ) => {
146+ if (! errors ) {
147+ try {
148+ const res = await createServiceAccount ({
149+ ... formModel .value ,
150+ policy: ! formModel .value .impliedPolicy ? JSON .stringify (JSON .parse (formModel .value .policy )) : null ,
151+ expiration: formModel .value .expiry ? new Date (formModel .value .expiry ).toISOString () : null ,
152+ })
153+ message .success (" 添加成功" )
154+ emit (" notice" , res )
155+ closeModal ()
156+ emit (" search" )
157+ } catch (error ) {
158+ console .log (" 🚀 ~ submitForm ~ error:" , error )
159+ message .error (" 添加失败" )
160+ }
161+ } else {
162+ console .log (errors )
163+ message .error (" 请填写正确的格式" )
157164 }
158165 })
159166}
160- getPoliciesList ()
167+
168+ const parentPolicy = ref (" " )
169+ // 默认策略原文
170+ const getPolicie = async () => {
171+ const userInfo = await $api .get (` /accountinfo ` )
172+ parentPolicy .value = userInfo .Policy
173+ formModel .value .policy = JSON .stringify (userInfo .Policy )
174+ }
175+ getPolicie ()
161176 </script >
162177
163178<style scoped></style >
0 commit comments