Skip to content

Commit 08c5f68

Browse files
cxymdscxymds
committed
feat： lifecycle add form dialog
1 parent 66f2164 commit 08c5f68

File tree

3 files changed

+176
-1
lines changed

3 files changed

+176
-1
lines changed

‎components.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ declare module 'vue' {
1616
NCard: typeof import('naive-ui')['NCard']
1717
NCarousel: typeof import('naive-ui')['NCarousel']
1818
NCarouselItem: typeof import('naive-ui')['NCarouselItem']
19+
NCheckbox: typeof import('naive-ui')['NCheckbox']
20+
NCheckboxGroup: typeof import('naive-ui')['NCheckboxGroup']
1921
NCollapse: typeof import('naive-ui')['NCollapse']
2022
NCollapseItem: typeof import('naive-ui')['NCollapseItem']
2123
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
@@ -48,10 +50,13 @@ declare module 'vue' {
4850
NMessageProvider: typeof import('naive-ui')['NMessageProvider']
4951
NModal: typeof import('naive-ui')['NModal']
5052
NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
53+
NOption: typeof import('naive-ui')['NOption']
5154
NP: typeof import('naive-ui')['NP']
5255
NPageHeader: typeof import('naive-ui')['NPageHeader']
5356
NPopconfirm: typeof import('naive-ui')['NPopconfirm']
5457
NProgress: typeof import('naive-ui')['NProgress']
58+
NRadio: typeof import('naive-ui')['NRadio']
59+
NRadioGroup: typeof import('naive-ui')['NRadioGroup']
5560
NSelect: typeof import('naive-ui')['NSelect']
5661
NSpace: typeof import('naive-ui')['NSpace']
5762
NSpin: typeof import('naive-ui')['NSpin']

‎components/lifecycle/new-form.vue‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<template>
2+
<n-modal
3+
v-model:show="visible"
4+
:mask-closable="false"
5+
preset="card"
6+
title="添加生命周期规则"
7+
class="max-w-screen-md"
8+
:segmented="{
9+
content: true,
10+
action: true,
11+
}">
12+
<n-card>
13+
<n-form ref="formRef" :model="formData">
14+
<!-- 规则类型 -->
15+
<n-form-item label="类型" path="type">
16+
<n-select
17+
v-model:value="formData.type"
18+
:options="typeOptions"
19+
placeholder="选择规则类型"
20+
/>
21+
</n-form-item>
22+
<n-form-item label="对象版本" path="versionType">
23+
<n-select
24+
v-model:value="formData.versionType"
25+
:options="versionOptions"
26+
/>
27+
</n-form-item>
28+
<n-form-item label="" path="type">
29+
<div class="w-full flex items-center justify-between" >
30+
<span>在</span>
31+
<n-input-number
32+
class="flex-auto mx-4"
33+
v-model:value="formData.days"
34+
:min="1"
35+
placeholder="天数"
36+
style="width: 100px"
37+
/>
38+
<span>天后执行</span>
39+
<n-select
40+
class="flex-auto mx-4"
41+
v-model:value="formData.action"
42+
:options="actionOptions"
43+
style="width: 120px"
44+
/>
45+
</div>
46+
</n-form-item>
47+
48+
<!-- 生命周期 -->
49+
<n-card>
50+
<n-collapse>
51+
<n-collapse-item title="搜索生命周期" name="advanced">
52+
<n-form-item label="前缀">
53+
<n-input v-model="formData.prefix" placeholder="请输入前缀" />
54+
</n-form-item>
55+
<n-form-item label="标签">
56+
<n-dynamic-input
57+
v-model:value="formData.tags"
58+
preset="pair"
59+
key-placeholder="标签名"
60+
value-placeholder="标签值"
61+
/>
62+
</n-form-item>
63+
</n-collapse-item>
64+
</n-collapse>
65+
</n-card>
66+
67+
68+
<!-- 高级设置 -->
69+
<n-card class="mt-4">
70+
<n-collapse >
71+
<n-collapse-item title="高级设置" name="advanced">
72+
<n-form-item label="删除标记处理">
73+
<n-space vertical>
74+
<n-switch
75+
v-model:value="formData.expiredDeleteMark"
76+
:round="false"
77+
/>
78+
<span class="ml-4 text-gray-500">如果没有留下任何版本，请删除对该对象的引用</span>
79+
</n-space>
80+
</n-form-item>
81+
82+
<n-form-item label="版本清理">
83+
<n-space vertical>
84+
<n-switch
85+
v-model:value="formData.deleteAllExpired"
86+
:round="false"
87+
/>
88+
<span class="ml-4 text-gray-500">删除所有过期版本</span>
89+
</n-space>
90+
</n-form-item>
91+
</n-collapse-item>
92+
</n-collapse>
93+
</n-card>
94+
95+
<n-space justify="center">
96+
<n-button @click="handleCancel">取消</n-button>
97+
<n-button type="primary" @click="handleSave">保存</n-button>
98+
</n-space>
99+
</n-form>
100+
</n-card>
101+
</n-modal>
102+
</template>
103+
104+
<script setup>
105+
import { ref } from 'vue'
106+
import {
107+
NForm,
108+
NFormItem,
109+
NInput,
110+
NSelect,
111+
NDynamicInput,
112+
NCollapse,
113+
NCollapseItem,
114+
NSwitch,
115+
NButton,
116+
NInputNumber
117+
} from 'naive-ui'
118+
119+
const formRef = ref(null)
120+
const formData = ref({
121+
ruleName: '',
122+
type: null,
123+
versionType: 'current',
124+
days: null,
125+
action: 'transition',
126+
tags:[{
127+
key:'',
128+
value:''
129+
}],
130+
expiredDeleteMark: false,
131+
deleteAllExpired: false
132+
})
133+
134+
135+
const typeOptions = [
136+
{ label: '到期', value: 'expire' },
137+
{ label: '过渡', value: 'transition' }
138+
]
139+
140+
const versionOptions = [
141+
{ label: '当前版本', value: 'current' },
142+
{ label: '非当前版本', value: 'non-current' }
143+
]
144+
145+
const actionOptions = [
146+
{ label: '转储', value: 'transition' },
147+
{ label: '删除', value: 'delete' }
148+
]
149+
const visible = ref(false)
150+
151+
const open = () => {
152+
visible.value = true
153+
}
154+
155+
defineExpose({
156+
open
157+
})
158+
const handleSave = () => {
159+
formRef.value?.validate((errors) => {
160+
if (!errors) {
161+
console.log('提交数据:', formData.value)
162+
// 调用保存接口
163+
}
164+
})
165+
}
166+
167+
const handleCancel = () => {
168+
// 取消逻辑
169+
}
170+
</script>

‎config/navs.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default [
2626
icon: 'ri:broadcast-line',
2727
},
2828
{
29-
label: '副本',
29+
label: '桶复制',
3030
to: '/replication',
3131
icon: 'ri:file-copy-line',
3232
},

0 commit comments

Comments
 (0)