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>
|
<template>
|
||||||
<ContentField>
|
<div class="container">
|
||||||
我的Bots
|
<div class="row">
|
||||||
</ContentField>
|
|
||||||
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ContentField from "@/components/ContentField"
|
import { ref , reactive } from "vue"
|
||||||
import $ from "jquery"
|
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 {
|
export default {
|
||||||
components:{
|
components:{
|
||||||
ContentField
|
VAceEditor,
|
||||||
},
|
},
|
||||||
setup(){
|
setup(){
|
||||||
|
//配置编译器
|
||||||
|
ace.config.set(
|
||||||
|
"basePath",
|
||||||
|
"https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")
|
||||||
|
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
// //bot add
|
|
||||||
// $.ajax({
|
let bots = ref([]);
|
||||||
// url:"http://localhost:3000/user/bot/add/",
|
const botadd = reactive({
|
||||||
// type:"post",
|
title:"",
|
||||||
// data:{
|
description:"",
|
||||||
// title:"My title ",
|
content:"",
|
||||||
// description:"My description ",
|
error_message:"",
|
||||||
// content:"My content ",
|
})
|
||||||
// },
|
|
||||||
// headers:{
|
//更新所有bot
|
||||||
// Authorization:"Bearer " + store.state.user.token,
|
const refresh_bots = () =>{
|
||||||
// },
|
$.ajax({
|
||||||
// success(resp){
|
url:"http://localhost:3000/user/bot/getlist/",
|
||||||
// console.log(resp);
|
type:"get",
|
||||||
// },
|
headers:{
|
||||||
// errror(resp){
|
Authorization:"Bearer " + store.state.user.token,
|
||||||
// console.log(resp);
|
},
|
||||||
// }
|
success(resp){
|
||||||
// });
|
bots.value = resp ;
|
||||||
|
}
|
||||||
|
})
|
||||||
// //bot remove
|
}
|
||||||
// $.ajax({
|
|
||||||
// url:"http://localhost:3000/user/bot/remove/",
|
refresh_bots();
|
||||||
// type:"post",
|
|
||||||
// data:{
|
//添加一个bot
|
||||||
// bot_id : 5,
|
const add_bot = () => {
|
||||||
// },
|
botadd.error_message = "";
|
||||||
// headers:{
|
$.ajax({
|
||||||
// Authorization:"Bearer " + store.state.user.token,
|
url: "http://127.0.0.1:3000/user/bot/add/",
|
||||||
// },
|
type: "post",
|
||||||
// success(resp){
|
data: {
|
||||||
// console.log(resp);
|
title: botadd.title,
|
||||||
// },
|
description: botadd.description,
|
||||||
// errror(resp){
|
content: botadd.content,
|
||||||
// console.log(resp);
|
},
|
||||||
// }
|
headers: {
|
||||||
// });
|
Authorization: "Bearer " + store.state.user.token,
|
||||||
|
},
|
||||||
|
success(resp) {
|
||||||
// //bot update
|
if (resp.error_message === "success") {
|
||||||
// $.ajax({
|
botadd.title = "";
|
||||||
// url:"http://localhost:3000/user/bot/update/",
|
botadd.description = "";
|
||||||
// type:"post",
|
botadd.content = "";
|
||||||
// data:{
|
Modal.getInstance("#add-bot-btn").hide();//创建Bot后关闭Modal
|
||||||
// bot_id : 8,
|
refresh_bots(); //增删改-->都需要更新
|
||||||
// title:"new title",
|
} else {
|
||||||
// description:"new description",
|
botadd.error_message = resp.error_message;
|
||||||
// content:"new content",
|
}
|
||||||
// },
|
}
|
||||||
// headers:{
|
})
|
||||||
// Authorization:"Bearer " + store.state.user.token,
|
}
|
||||||
// },
|
|
||||||
// success(resp){
|
//删除一个bot
|
||||||
// console.log(resp);
|
const remove_bot = (bot) => {
|
||||||
// },
|
$.ajax({
|
||||||
// errror(resp){
|
url: "http://127.0.0.1:3000/user/bot/remove/",
|
||||||
// console.log(resp);
|
type: "post",
|
||||||
// }
|
data: {
|
||||||
// });
|
bot_id:bot.id,
|
||||||
|
},
|
||||||
// //bot getlist
|
headers: {
|
||||||
// $.ajax({
|
Authorization: "Bearer " + store.state.user.token,
|
||||||
// url:"http://localhost:3000/user/bot/getlist/",
|
},
|
||||||
// type:"get",
|
success(resp) {
|
||||||
// headers:{
|
if (resp.error_message === "success") {
|
||||||
// Authorization:"Bearer " + store.state.user.token,
|
refresh_bots(); //增删改-->都需要更新
|
||||||
// },
|
}
|
||||||
// success(resp){
|
}
|
||||||
// console.log(resp);
|
})
|
||||||
// },
|
}
|
||||||
// errror(resp){
|
|
||||||
// console.log(resp);
|
|
||||||
// }
|
//修改一个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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
|
div.error-message {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue