Gpt (#1389)
* fix:优化自动化代码搜索区域 (#1382) * 增加gpt功能（万用表格） * feat: chatTable页面 --------- Co-authored-by: ipanghu <bypanghu@163.com> Co-authored-by: 陶正虎 <zhenghu.tao@jutze.com.cn> Co-authored-by: krank <emosick@qq.com>
This commit is contained in:
奇淼（piexlmax
committed by
GitHub
GitHub
co-authored by
ipanghu
陶正虎
krank
ipanghu
陶正虎
krank
parent
a207c982b7
commit
64608f6b05
+2
-4
@@ -1,4 +1,4 @@
|
||||
# qm-plus-vue-page
|
||||
# gin-vue-admin web
|
||||
|
||||
## Project setup
|
||||
```
|
||||
@@ -25,8 +25,6 @@ npm run test
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
整理代码结构
|
||||
``` lua
|
||||
@@ -101,4 +99,4 @@ web
|
||||
├── vite.config.js -- vite 配置文件
|
||||
└── yarn.lock
|
||||
|
||||
```
|
||||
```
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
import service from '@/utils/request'
|
||||
|
||||
export const getTableApi = (data) => {
|
||||
return service({
|
||||
url: '/chatGpt/getTable',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export const createSKApi = (data) => {
|
||||
return service({
|
||||
url: '/chatGpt/createSK',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export const getSKApi = () => {
|
||||
return service({
|
||||
url: '/chatGpt/getSK',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export const deleteSKApi = () => {
|
||||
return service({
|
||||
url: '/chatGpt/deleteSK',
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="gva-table-box">
|
||||
<div v-if="!chatToken">
|
||||
<warning-bar title="在资源权限中将此角色的资源权限清空 或者不包含创建者的角色 即可屏蔽此客户资源的显示" />
|
||||
<el-input v-model="skObj.sk" class="query-ipt" placeholder="请输入您的ChatGpt SK" clearable />
|
||||
<el-button type="primary" @click="save">保存</el-button>
|
||||
<div class="secret">
|
||||
<el-empty description="请到gpt网站获取您的sk：https://platform.openai.com/account/api-keys" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-form :model="form" label-width="120px">
|
||||
<el-form-item label="删除当前sk：">
|
||||
<el-popover placement="top" width="160">
|
||||
<p>确定要删除并返回吗？</p>
|
||||
<div style="text-align: right; margin-top: 8px;">
|
||||
<el-button type="primary" @click="deleteSK">确定</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button type="primary" link icon="delete">删除</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item label="查询db名称：">
|
||||
<el-select v-model="form.dbname" placeholder="请选择库" style="width: 115px">
|
||||
<el-option
|
||||
v-for="(item, index) in dbArr"
|
||||
:key="index"
|
||||
:label="item.database"
|
||||
:value="item.database"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="查询db描述：">
|
||||
<el-input
|
||||
v-model="form.chat"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
clearable
|
||||
placeholder="请输入对话"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="GPT生成SQL:">
|
||||
<el-input
|
||||
v-model="sql"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
type="textarea"
|
||||
disabled
|
||||
placeholder="此处展示自动生成的sql"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-button type="primary" @click="handleQueryTable">查询</el-button>
|
||||
</el-form>
|
||||
<div class="tables">
|
||||
<el-table
|
||||
v-if="tableData.length"
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
tooltip-effect="dark"
|
||||
height="400px"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="(item, index) in tableData[0]"
|
||||
:key="index"
|
||||
:prop="index"
|
||||
:label="index"
|
||||
min-width="200"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
</el-table>
|
||||
<p v-else class="text">请在对话框输入你需要AI帮你查询的内容：）</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getTableApi,
|
||||
createSKApi,
|
||||
getSKApi,
|
||||
deleteSKApi } from '@/api/chatgpt'
|
||||
import { getDB as getDBAPI } from '@/api/autoCode'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
const chatToken = ref(null)
|
||||
const skObj = reactive({
|
||||
sk: '',
|
||||
})
|
||||
const sql = ref("")
|
||||
const getSK = async() => {
|
||||
const res = await getSKApi()
|
||||
chatToken.value = res.data.ok
|
||||
}
|
||||
|
||||
const getDB = async() => {
|
||||
const res = await getDBAPI()
|
||||
if (res.code === 0) {
|
||||
dbArr.value = res.data.dbs
|
||||
}
|
||||
}
|
||||
getSK()
|
||||
getDB()
|
||||
const save = async() => {
|
||||
const res = await createSKApi(skObj)
|
||||
if (res.code === 0) {
|
||||
await getSK()
|
||||
}
|
||||
}
|
||||
|
||||
const deleteSK = async() => {
|
||||
const res = await deleteSKApi()
|
||||
if (res.code === 0) {
|
||||
await getSK()
|
||||
}
|
||||
}
|
||||
|
||||
const form = ref({
|
||||
dbname: '',
|
||||
chat: '',
|
||||
})
|
||||
const dbArr = ref([])
|
||||
const tableData = ref([])
|
||||
|
||||
const handleQueryTable = async() => {
|
||||
const res = await getTableApi(form.value)
|
||||
if (res.code === 0) {
|
||||
tableData.value = res.data.results||[]
|
||||
}
|
||||
sql.value = res.data.sql
|
||||
// 根据后台返回值动态渲染表格
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.secret{
|
||||
padding: 30px;
|
||||
margin-top: 20px;
|
||||
background: #F5F5F5;
|
||||
p {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.query-ipt{
|
||||
width: 300px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.content{
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
background: #F5F5F5;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.tables{
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
.text{
|
||||
font-size: 18px;
|
||||
color: #6B7687;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -66,7 +66,7 @@ const changeRouter = (e) => {
|
||||
router.push({ name: e })
|
||||
}
|
||||
|
||||
const show = ref(true)
|
||||
const show = ref(false)
|
||||
const hiddenSearch = async() => {
|
||||
setTimeout(() => {
|
||||
show.value = false
|
||||
|
||||
Reference in New Issue
Block a user