parent
a6526c17d3
commit
6c1744c37e
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 53 KiB |
@ -1,99 +1,272 @@
|
||||
<template>
|
||||
<ContentField>
|
||||
我的Bots
|
||||
</ContentField>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-3">
|
||||
<div class="card" style="margin-top:20px;">
|
||||
<div class="card-body">
|
||||
<img :src="$store.state.user.photo" alt="头像无法显示~" style="width:100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-9">
|
||||
<div class="card" style="margin-top:20px;">
|
||||
|
||||
<div class="card-header">
|
||||
<span style="font-size:130%">我的Bot</span>
|
||||
<button type="button" class="btn btn-info float-end" data-bs-toggle="modal" data-bs-target="#add-bot-btn">创建</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="add-bot-btn" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">创建Bot</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="add-bot-title" class="form-label">名称</label>
|
||||
<input v-model="botadd.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="add-bot-description" class="form-label">简介</label>
|
||||
<textarea v-model="botadd.description" class="form-control" rows="3" id="add-bot-description" placeholder="请输入Bot简介"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="add-bot-code" class="form-label">代码</label>
|
||||
<VAceEditor
|
||||
v-model:value="botadd.content"
|
||||
@init="editorInit"
|
||||
lang="c_cpp"
|
||||
theme="textmate"
|
||||
style="height: 300px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="error-message">{{botadd.error_message}}</div>
|
||||
<button type="button" class="btn btn-primary" @click="add_bot">创建</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="card-body">
|
||||
<table class="table table-striped table-hover">
|
||||
<!-- 表头 -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- 表身 -->
|
||||
<tbody>
|
||||
<tr v-for="bot in bots" :key="bot.id">
|
||||
<th>{{bot.title}}</th>
|
||||
<th>{{bot.createtime}}</th>
|
||||
<th>
|
||||
<button type="button" class="btn btn-secondary" style="margin-right:10px" data-bs-toggle="modal" :data-bs-target="'#update-bot-modal-'+bot.id">修改</button>
|
||||
<button type="button" class="btn btn-danger" @click="remove_bot(bot)">删除</button>
|
||||
</th>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" :id="'update-bot-modal-'+bot.id" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">修改Bot</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="add-bot-title" class="form-label">名称</label>
|
||||
<input v-model="bot.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="add-bot-description" class="form-label">简介</label>
|
||||
<textarea v-model="bot.description" class="form-control" rows="3" id="add-bot-description" placeholder="请输入Bot简介"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="add-bot-code" class="form-label">代码</label>
|
||||
<VAceEditor
|
||||
v-model:value="bot.content"
|
||||
@init="editorInit"
|
||||
lang="c_cpp"
|
||||
theme="textmate"
|
||||
style="height: 300px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="error-message">{{bot.error_message}}</div>
|
||||
<button type="button" class="btn btn-primary" @click="update_bot(bot)">确定</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentField from "@/components/ContentField"
|
||||
import { ref , reactive } from "vue"
|
||||
import $ from "jquery"
|
||||
import { useStore } from "vuex";
|
||||
import { useStore } from "vuex"
|
||||
import { Modal } from "bootstrap/dist/js/bootstrap.js"
|
||||
//代码区域需要
|
||||
import { VAceEditor } from 'vue3-ace-editor';
|
||||
import ace from 'ace-builds';
|
||||
|
||||
|
||||
export default {
|
||||
components:{
|
||||
ContentField
|
||||
VAceEditor,
|
||||
},
|
||||
setup(){
|
||||
//配置编译器
|
||||
ace.config.set(
|
||||
"basePath",
|
||||
"https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")
|
||||
|
||||
const store = useStore();
|
||||
// //bot add
|
||||
// $.ajax({
|
||||
// url:"http://localhost:3000/user/bot/add/",
|
||||
// type:"post",
|
||||
// data:{
|
||||
// title:"My title ",
|
||||
// description:"My description ",
|
||||
// content:"My content ",
|
||||
// },
|
||||
// headers:{
|
||||
// Authorization:"Bearer " + store.state.user.token,
|
||||
// },
|
||||
// success(resp){
|
||||
// console.log(resp);
|
||||
// },
|
||||
// errror(resp){
|
||||
// console.log(resp);
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
// //bot remove
|
||||
// $.ajax({
|
||||
// url:"http://localhost:3000/user/bot/remove/",
|
||||
// type:"post",
|
||||
// data:{
|
||||
// bot_id : 5,
|
||||
// },
|
||||
// headers:{
|
||||
// Authorization:"Bearer " + store.state.user.token,
|
||||
// },
|
||||
// success(resp){
|
||||
// console.log(resp);
|
||||
// },
|
||||
// errror(resp){
|
||||
// console.log(resp);
|
||||
// }
|
||||
// });
|
||||
|
||||
|
||||
// //bot update
|
||||
// $.ajax({
|
||||
// url:"http://localhost:3000/user/bot/update/",
|
||||
// type:"post",
|
||||
// data:{
|
||||
// bot_id : 8,
|
||||
// title:"new title",
|
||||
// description:"new description",
|
||||
// content:"new content",
|
||||
// },
|
||||
// headers:{
|
||||
// Authorization:"Bearer " + store.state.user.token,
|
||||
// },
|
||||
// success(resp){
|
||||
// console.log(resp);
|
||||
// },
|
||||
// errror(resp){
|
||||
// console.log(resp);
|
||||
// }
|
||||
// });
|
||||
|
||||
// //bot getlist
|
||||
// $.ajax({
|
||||
// url:"http://localhost:3000/user/bot/getlist/",
|
||||
// type:"get",
|
||||
// headers:{
|
||||
// Authorization:"Bearer " + store.state.user.token,
|
||||
// },
|
||||
// success(resp){
|
||||
// console.log(resp);
|
||||
// },
|
||||
// errror(resp){
|
||||
// console.log(resp);
|
||||
// }
|
||||
// });
|
||||
|
||||
let bots = ref([]);
|
||||
const botadd = reactive({
|
||||
title:"",
|
||||
description:"",
|
||||
content:"",
|
||||
error_message:"",
|
||||
})
|
||||
|
||||
//更新所有bot
|
||||
const refresh_bots = () =>{
|
||||
$.ajax({
|
||||
url:"http://localhost:3000/user/bot/getlist/",
|
||||
type:"get",
|
||||
headers:{
|
||||
Authorization:"Bearer " + store.state.user.token,
|
||||
},
|
||||
success(resp){
|
||||
bots.value = resp ;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
refresh_bots();
|
||||
|
||||
//添加一个bot
|
||||
const add_bot = () => {
|
||||
botadd.error_message = "";
|
||||
$.ajax({
|
||||
url: "http://127.0.0.1:3000/user/bot/add/",
|
||||
type: "post",
|
||||
data: {
|
||||
title: botadd.title,
|
||||
description: botadd.description,
|
||||
content: botadd.content,
|
||||
},
|
||||
headers: {
|
||||
Authorization: "Bearer " + store.state.user.token,
|
||||
},
|
||||
success(resp) {
|
||||
if (resp.error_message === "success") {
|
||||
botadd.title = "";
|
||||
botadd.description = "";
|
||||
botadd.content = "";
|
||||
Modal.getInstance("#add-bot-btn").hide();//创建Bot后关闭Modal
|
||||
refresh_bots(); //增删改-->都需要更新
|
||||
} else {
|
||||
botadd.error_message = resp.error_message;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//删除一个bot
|
||||
const remove_bot = (bot) => {
|
||||
$.ajax({
|
||||
url: "http://127.0.0.1:3000/user/bot/remove/",
|
||||
type: "post",
|
||||
data: {
|
||||
bot_id:bot.id,
|
||||
},
|
||||
headers: {
|
||||
Authorization: "Bearer " + store.state.user.token,
|
||||
},
|
||||
success(resp) {
|
||||
if (resp.error_message === "success") {
|
||||
refresh_bots(); //增删改-->都需要更新
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//修改一个bot
|
||||
const update_bot = (bot) => {
|
||||
bot.error_message = "";
|
||||
$.ajax({
|
||||
url: "http://127.0.0.1:3000/user/bot/update/",
|
||||
type: "post",
|
||||
data: {
|
||||
bot_id:bot.id,
|
||||
title:bot.title,
|
||||
description:bot.description,
|
||||
content:bot.content,
|
||||
},
|
||||
headers: {
|
||||
Authorization: "Bearer " + store.state.user.token,
|
||||
},
|
||||
success(resp) {
|
||||
if (resp.error_message === "success") {
|
||||
Modal.getInstance("#update-bot-modal-"+bot.id).hide();//创建Bot后关闭Modal
|
||||
refresh_bots(); //增删改-->都需要更新
|
||||
} else {
|
||||
bot.error_message = resp.error_message;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
bots,
|
||||
botadd,
|
||||
add_bot,
|
||||
remove_bot,
|
||||
update_bot,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
div.error-message {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in new issue