Skip to content

Commit 75575be

Browse files
YunaiVYunaiV
committed
【功能新增】AI：增加函数的管理
1 parent 8a7e229 commit 75575be

File tree

3 files changed

+325
-0
lines changed

3 files changed

+325
-0
lines changed

‎src/api/ai/model/tool/index.ts

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import request from '@/config/axios'
2+
3+
// AI 工具 VO
4+
export interface ToolVO {
5+
id: number // 工具编号
6+
name: string // 工具名称
7+
description: string // 工具描述
8+
status: number // 状态
9+
}
10+
11+
// AI 工具 API
12+
export const ToolApi = {
13+
// 查询工具分页
14+
getToolPage: async (params: any) => {
15+
return await request.get({ url: `/ai/tool/page`, params })
16+
},
17+
18+
// 查询工具详情
19+
getTool: async (id: number) => {
20+
return await request.get({ url: `/ai/tool/get?id=` + id })
21+
},
22+
23+
// 新增工具
24+
createTool: async (data: ToolVO) => {
25+
return await request.post({ url: `/ai/tool/create`, data })
26+
},
27+
28+
// 修改工具
29+
updateTool: async (data: ToolVO) => {
30+
return await request.put({ url: `/ai/tool/update`, data })
31+
},
32+
33+
// 删除工具
34+
deleteTool: async (id: number) => {
35+
return await request.delete({ url: `/ai/tool/delete?id=` + id })
36+
}
37+
}

‎src/views/ai/model/tool/ToolForm.vue

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<template>
2+
<Dialog :title="dialogTitle" v-model="dialogVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="100px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="工具名称" prop="name">
11+
<el-input v-model="formData.name" placeholder="请输入工具名称" />
12+
</el-form-item>
13+
<el-form-item label="工具描述" prop="description">
14+
<el-input type="textarea" v-model="formData.description" placeholder="请输入工具描述" />
15+
</el-form-item>
16+
<el-form-item label="状态" prop="status">
17+
<el-radio-group v-model="formData.status">
18+
<el-radio
19+
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
20+
:key="dict.value"
21+
:label="dict.value"
22+
>
23+
{{ dict.label }}
24+
</el-radio>
25+
</el-radio-group>
26+
</el-form-item>
27+
</el-form>
28+
<template #footer>
29+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
30+
<el-button @click="dialogVisible = false">取 消</el-button>
31+
</template>
32+
</Dialog>
33+
</template>
34+
<script setup lang="ts">
35+
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
36+
import { ToolApi, ToolVO } from '@/api/ai/model/tool'
37+
import { CommonStatusEnum } from '@/utils/constants'
38+
39+
/** AI 工具表单 */
40+
defineOptions({ name: 'ToolForm' })
41+
42+
const { t } = useI18n() // 国际化
43+
const message = useMessage() // 消息弹窗
44+
45+
const dialogVisible = ref(false) // 弹窗的是否展示
46+
const dialogTitle = ref('') // 弹窗的标题
47+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
48+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
49+
const formData = ref({
50+
id: undefined,
51+
name: undefined,
52+
description: undefined,
53+
status: CommonStatusEnum.ENABLE
54+
})
55+
const formRules = reactive({
56+
name: [{ required: true, message: '工具名称不能为空', trigger: 'blur' }]
57+
})
58+
const formRef = ref() // 表单 Ref
59+
60+
/** 打开弹窗 */
61+
const open = async (type: string, id?: number) => {
62+
dialogVisible.value = true
63+
dialogTitle.value = t('action.' + type)
64+
formType.value = type
65+
resetForm()
66+
// 修改时，设置数据
67+
if (id) {
68+
formLoading.value = true
69+
try {
70+
formData.value = await ToolApi.getTool(id)
71+
} finally {
72+
formLoading.value = false
73+
}
74+
}
75+
}
76+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
77+
78+
/** 提交表单 */
79+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
80+
const submitForm = async () => {
81+
// 校验表单
82+
await formRef.value.validate()
83+
// 提交请求
84+
formLoading.value = true
85+
try {
86+
const data = formData.value as unknown as ToolVO
87+
if (formType.value === 'create') {
88+
await ToolApi.createTool(data)
89+
message.success(t('common.createSuccess'))
90+
} else {
91+
await ToolApi.updateTool(data)
92+
message.success(t('common.updateSuccess'))
93+
}
94+
dialogVisible.value = false
95+
// 发送操作成功的事件
96+
emit('success')
97+
} finally {
98+
formLoading.value = false
99+
}
100+
}
101+
102+
/** 重置表单 */
103+
const resetForm = () => {
104+
formData.value = {
105+
id: undefined,
106+
name: undefined,
107+
description: undefined,
108+
status: CommonStatusEnum.ENABLE
109+
}
110+
formRef.value?.resetFields()
111+
}
112+
</script>

‎src/views/ai/model/tool/index.vue

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
<template>
2+
<ContentWrap>
3+
<!-- 搜索工作栏 -->
4+
<el-form
5+
class="-mb-15px"
6+
:model="queryParams"
7+
ref="queryFormRef"
8+
:inline="true"
9+
label-width="68px"
10+
>
11+
<el-form-item label="工具名称" prop="name">
12+
<el-input
13+
v-model="queryParams.name"
14+
placeholder="请输入工具名称"
15+
clearable
16+
@keyup.enter="handleQuery"
17+
class="!w-240px"
18+
/>
19+
</el-form-item>
20+
<el-form-item label="状态" prop="status">
21+
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
22+
<el-option
23+
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
24+
:key="dict.value"
25+
:label="dict.label"
26+
:value="dict.value"
27+
/>
28+
</el-select>
29+
</el-form-item>
30+
<el-form-item label="创建时间" prop="createTime">
31+
<el-date-picker
32+
v-model="queryParams.createTime"
33+
value-format="YYYY-MM-DD HH:mm:ss"
34+
type="daterange"
35+
start-placeholder="开始日期"
36+
end-placeholder="结束日期"
37+
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
38+
class="!w-220px"
39+
/>
40+
</el-form-item>
41+
<el-form-item>
42+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
43+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
44+
<el-button type="primary" plain @click="openForm('create')" v-hasPermi="['ai:tool:create']">
45+
<Icon icon="ep:plus" class="mr-5px" /> 新增
46+
</el-button>
47+
</el-form-item>
48+
</el-form>
49+
</ContentWrap>
50+
51+
<!-- 列表 -->
52+
<ContentWrap>
53+
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
54+
<el-table-column label="工具编号" align="center" prop="id" />
55+
<el-table-column label="工具名称" align="center" prop="name" />
56+
<el-table-column label="工具描述" align="center" prop="description" />
57+
<el-table-column label="状态" align="center" prop="status">
58+
<template #default="scope">
59+
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
60+
</template>
61+
</el-table-column>
62+
<el-table-column
63+
label="创建时间"
64+
align="center"
65+
prop="createTime"
66+
:formatter="dateFormatter"
67+
width="180px"
68+
/>
69+
<el-table-column label="操作" align="center" min-width="120px">
70+
<template #default="scope">
71+
<el-button
72+
link
73+
type="primary"
74+
@click="openForm('update', scope.row.id)"
75+
v-hasPermi="['ai:tool:update']"
76+
>
77+
编辑
78+
</el-button>
79+
<el-button
80+
link
81+
type="danger"
82+
@click="handleDelete(scope.row.id)"
83+
v-hasPermi="['ai:tool:delete']"
84+
>
85+
删除
86+
</el-button>
87+
</template>
88+
</el-table-column>
89+
</el-table>
90+
<!-- 分页 -->
91+
<Pagination
92+
:total="total"
93+
v-model:page="queryParams.pageNo"
94+
v-model:limit="queryParams.pageSize"
95+
@pagination="getList"
96+
/>
97+
</ContentWrap>
98+
99+
<!-- 表单弹窗：添加/修改 -->
100+
<ToolForm ref="formRef" @success="getList" />
101+
</template>
102+
103+
<script setup lang="ts">
104+
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
105+
import { dateFormatter } from '@/utils/formatTime'
106+
import { ToolApi, ToolVO } from '@/api/ai/model/tool'
107+
import ToolForm from './ToolForm.vue'
108+
109+
/** AI 工具 列表 */
110+
defineOptions({ name: 'AiTool' })
111+
112+
const message = useMessage() // 消息弹窗
113+
const { t } = useI18n() // 国际化
114+
115+
const loading = ref(true) // 列表的加载中
116+
const list = ref<ToolVO[]>([]) // 列表的数据
117+
const total = ref(0) // 列表的总页数
118+
const queryParams = reactive({
119+
pageNo: 1,
120+
pageSize: 10,
121+
name: undefined,
122+
description: undefined,
123+
status: undefined,
124+
createTime: []
125+
})
126+
const queryFormRef = ref() // 搜索的表单
127+
const exportLoading = ref(false) // 导出的加载中
128+
129+
/** 查询列表 */
130+
const getList = async () => {
131+
loading.value = true
132+
try {
133+
const data = await ToolApi.getToolPage(queryParams)
134+
list.value = data.list
135+
total.value = data.total
136+
} finally {
137+
loading.value = false
138+
}
139+
}
140+
141+
/** 搜索按钮操作 */
142+
const handleQuery = () => {
143+
queryParams.pageNo = 1
144+
getList()
145+
}
146+
147+
/** 重置按钮操作 */
148+
const resetQuery = () => {
149+
queryFormRef.value.resetFields()
150+
handleQuery()
151+
}
152+
153+
/** 添加/修改操作 */
154+
const formRef = ref()
155+
const openForm = (type: string, id?: number) => {
156+
formRef.value.open(type, id)
157+
}
158+
159+
/** 删除按钮操作 */
160+
const handleDelete = async (id: number) => {
161+
try {
162+
// 删除的二次确认
163+
await message.delConfirm()
164+
// 发起删除
165+
await ToolApi.deleteTool(id)
166+
message.success(t('common.delSuccess'))
167+
// 刷新列表
168+
await getList()
169+
} catch {}
170+
}
171+
172+
/** 初始化 **/
173+
onMounted(() => {
174+
getList()
175+
})
176+
</script>

0 commit comments

Comments
 (0)