1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
| <template>
| <a-button type="primary" @click="handleClick" style="margin-left: 10px">
| <template #icon>
| <icon-plus />
| </template>
| </a-button>
| <a-modal v-model:visible="visible" title="创建知识库" @before-open="handleOpened" @cancel="handleCancel" :footer="false" title-align="start">
| <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" >
| <a-form-item field="name" label="名称">
| <a-input v-model="form.name" placeholder="请输入名称"/>
| </a-form-item>
| <a-form-item>
| <div style="width: 100%;text-align: right">
| <a-button @click="visible = false">取消</a-button>
| <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>
| </div>
| </a-form-item>
| </a-form>
| </a-modal>
| </template>
|
| <script lang="ts" setup>
| import { onMounted ,onBeforeMount, reactive, ref } from "vue";
|
| const visible = ref(false);
| const loading = ref(false);
| const form = reactive({
| name: '',// 用户名
| nameJoin: '',// 昵称
| post: '',// 岗位
| txt: '',// 备注
| });
| const formRef = ref(null);
|
| const rules = {
| name: [
| {
| required: true,
| message:'名称不允许为空',
| },
| ],
| }
|
|
| const handleSubmit = ({values, errors}) => {
| console.log('values:', values, '\nerrors:', errors)
| }
|
| const handleClick = () => {
| visible.value = true;
| };
| const handleBeforeOk = (done) => {
| formRef.value.validate().then(res => {
| console.log('form:', form)
| if (!form.name) {
| done(false)
| }else {
| console.log('请求数据');
|
| }
| })
| };
| const handleCancel = () => {
| visible.value = false;
| }
|
| const handleOpened =(el) => {
| Object.assign(form,{
| name: '',// 用户名
| nameJoin: '',// 昵称
| post: '',// 岗位
| txt: '',// 备注
| });
| formRef.value.resetFields();
| }
|
| onBeforeMount(()=>{
|
| })
| onMounted(()=>{
|
|
| })
| </script>
|
| <script lang="ts">
| export default {
| name: 'add',
| methods: {
|
| }
| };
| </script>
|
|
