index.vue
3.56 KB
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<template>
<div class="quest-container">
<!-- 搜索区域 -->
<!-- <div class="bg-white p-4 mb-4">
<BasicForm @register="registerForm" />
</div> -->
<!-- 表格区域 -->
<div class="bg-white">
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleCreate">
新建
</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'ant-design:eye-outlined',
tooltip: '查看',
onClick: handleView.bind(null, record),
},
{
icon: 'clarity:note-edit-line',
tooltip: '编辑',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
tooltip: '删除',
popConfirm: {
title: '是否确认删除?',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template>
</BasicTable>
</div>
<!-- 编辑弹窗 -->
<QuestDrawer @register="registerDrawer" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup name="QuestList">
import { onMounted, ref } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import QuestDrawer from './QuestDrawer.vue';
import { getQuestList, questDelete } from '/@/api/project/quest';
import { columns, searchFormSchema } from './quest.data';
// 注册表格
const [registerTable, { reload }] = useTable({
title: '问题列表',
api: getQuestList,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
bordered: true,
showIndexColumn: true,
useSearchForm: true,//启用表单搜索
});
// 注册抽屉
const [registerDrawer, { openDrawer }] = useDrawer();
// 表单提交
// async function handleSubmit(values) {
// console.log('表单提交', values);
// // 假设 contentText 是需要转换为数组的字段
// if (typeof values.contentText === 'string') {
// values.contentText = values.contentText.split(',').map(item => item.trim());
// }
// await reload(values);
// return Promise.resolve();
// }
// 新建
function handleCreate() {
openDrawer(true, {
isUpdate: false,
});
}
// 查看（只读模式）
function handleView(record) {
openDrawer(true, {
record,
isUpdate: true,
isView: true, // 标记为查看模式
});
}
// 编辑
function handleEdit(record) {
console.log('编辑记录:', record);
console.log('记录ID:', record.id);
openDrawer(true, {
record,
isUpdate: true,
isView: false, // 显式标记为编辑模式
});
}
// 删除
async function handleDelete(record) {
await questDelete([record.id]);
await reload();
}
// 刷新表格
function handleSuccess() {
reload();
}
// 页面加载完成后请求数据
onMounted(async () => {
});
</script>
<style lang="less" scoped>
.quest-container {
padding: 16px;
:deep(.ant-table-wrapper) {
padding: 16px;
}
}
</style>